react|docs: creates Switch component and story

packages/docs/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @wolves-league-ui/docs
 
+## 0.2.0
+
+### Minor Changes
+
+- Creates `Switch` component story
+
+## 0.1.2
+
+### Patch Changes
+
+- Improves `Checkbox` story
+
 ## 0.1.1
 
 ### Patch Changes

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wolves-league-ui/docs",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "index.js",
   "license": "MIT",
   "private": true,

packages/docs/src/stories/Switch.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Switch } from '@wolves-league-ui/react';
+
+const meta: Meta<typeof Switch> = {
+  component: Switch,
+  title: 'Form/Switch',
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    id: { control: 'text' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-4">
+      <label htmlFor="switch-id" className="text-gray-100">
+        Label
+      </label>
+      <Switch {...args} />
+    </div>
+  ),
+  args: {
+    id: 'switch-id',
+  },
+};

packages/react/CHANGELOG.md

@@ -1,11 +1,16 @@
 # @wolves-league-ui/react
 
+## 0.2.0
+
+### Minor Changes
+
+- Creates `Switch` component
+
 ## 0.1.3
 
 ### Patch Changes
 
-- - Updates `Checkbox` style
-  - Improves `Checkbox` story
+- Updates `Checkbox` style
 
 ## 0.1.2
 

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wolves-league-ui/react",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "./dist/index.js",
   "module": "dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -17,6 +17,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",

packages/react/src/components/Switch.tsx

@@ -0,0 +1,11 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+export const Switch = ({ id }: { id?: string }) => (
+  <SwitchPrimitive.Root
+    id={id}
+    className="w-10 h-6 bg-gray-900 rounded-full relative shadow-md border border-gray-700 focus:shadow-sm data-[state=checked]:border-wl-700 outline-none cursor-default"
+  >
+    <SwitchPrimitive.Thumb className="block w-5 h-5 bg-gray-100 data-[state=checked]:bg-wl-700 rounded-full shadow-md transition-transform duration-100 translate-x-[0.063rem] will-change-transform data-[state=checked]:translate-x-[17px]" />
+  </SwitchPrimitive.Root>
+);
+Switch.displayName = 'Switch';

packages/react/src/index.tsx

@@ -1,5 +1,8 @@
 import '../index.css';
+// Form
 export * from './components/Button';
+export * from './components/Checkbox';
+export * from './components/Switch';
+// Overlay
 export * from './components/Tooltip';
 export * from './components/Dialog';
-export * from './components/Checkbox';