From 687fad64abc4a4c078c0463a90b2992aa973fe6b Mon Sep 17 00:00:00 2001
From: gvl <gustav.larsson@tt.se>
Date: Mon, 22 Jan 2024 09:52:45 +0100
Subject: [PATCH] feat: add Switch

---
 package-lock.json                  | 30 ++++++++++++++++++++++++++++++
 package.json                       |  1 +
 src/components/ui/switch.tsx       | 29 +++++++++++++++++++++++++++++
 src/index.ts                       |  2 +-
 src/showroom/app.tsx               |  2 ++
 src/showroom/components/switch.tsx | 15 +++++++++++++++
 6 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/switch.tsx
 create mode 100644 src/showroom/components/switch.tsx

diff --git a/package-lock.json b/package-lock.json
index 35f4d73d..292f3802 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
         "class-variance-authority": "^0.7.0",
@@ -1780,6 +1781,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+      "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
diff --git a/package.json b/package.json
index acb2bc9a..d7049d26 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 00000000..09a2aafb
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/utils'
+
+const Switch = React.forwardRef<
+React.ElementRef<typeof SwitchPrimitives.Root>,
+React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/index.ts b/src/index.ts
index 8f95d8be..f77b23d2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -94,7 +94,6 @@ export {
 } from '@/components/ui/calendar'
 export { Label } from '@/components/ui/label'
 export { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
-
 export {
   Dialog,
   DialogPortal,
@@ -107,3 +106,4 @@ export {
   DialogTitle,
   DialogDescription
 } from '@/components/ui/dialog'
+export { Switch } from '@/components/ui/switch'
diff --git a/src/showroom/app.tsx b/src/showroom/app.tsx
index 720909a0..e21c6a15 100644
--- a/src/showroom/app.tsx
+++ b/src/showroom/app.tsx
@@ -16,6 +16,7 @@ import { TypographyExample } from './components/typography'
 import { ScrollAreaExample } from './components/scroll-area'
 import { DrawerExample } from './components/drawer'
 import { DialogExample } from './components/dialog'
+import { SwitchExample } from './components/switch'
 
 export function App(): JSX.Element {
   return <div className="grid grid-cols-2 gap-4 gap-y-8 max-w-[900px] m-10">
@@ -37,5 +38,6 @@ export function App(): JSX.Element {
     <TabsExample />
     <CalendarExample />
     <ScrollAreaExample />
+    <SwitchExample />
   </div >
 }
diff --git a/src/showroom/components/switch.tsx b/src/showroom/components/switch.tsx
new file mode 100644
index 00000000..2a48d047
--- /dev/null
+++ b/src/showroom/components/switch.tsx
@@ -0,0 +1,15 @@
+import { Switch } from '@/components/ui/switch'
+import { Header } from '../header'
+import { Code } from '../code'
+
+export function SwitchExample(): JSX.Element {
+  return <>
+    <Header>Switch</Header>
+
+    <div>
+      <Switch checked />
+    </div>
+
+    <Code code={'<Switch checked />'} />
+  </>
+}