Create Switch component and update dependencies in lock file

Introduce a new Switch component in the shadcn UI package to enhance user interface capabilities. Simultaneously, the pnpm-lock.yaml file's lockfileVersion has been updated from '6.0' to '9.0'. Also, several dependencies' versions within the file are updated to ensure compatibility and security improvements.

README.md

@@ -271,16 +271,18 @@ Makerkit makes assumptions and as such - they may not apply to your specific use
 
 ## Installing a Shadcn UI component
 
-To install a Shadcn UI component, you can use the following command:
+To install a Shadcn UI component, you can use the following commands:
 
 ```bash
-npx shadcn-ui@latest add <component> --path=packages/src/ui/shadcn
+cd packages/ui
+npx shadcn-ui@latest add <component> --path=src/shadcn
 ```
 
 For example, to install the `Button` component, you can use the following command:
 
 ```bash
-npx shadcn-ui@latest add button --path=packages/src/ui/shadcn
+cd packages/ui
+npx shadcn-ui@latest add button --path=src/shadcn
 ```
 
 We pass the `--path` flag to specify the path where the component should be installed. You may need to adjust the path based on your project structure.

package.json

@@ -29,7 +29,6 @@
     "stripe:listen": "pnpm --filter '@kit/stripe' start"
   },
   "prettier": "@kit/prettier-config",
-  "packageManager": "pnpm@9.0.4",
   "workspaces": [
     "apps/*",
     "packages/**",

packages/ui/package.json

@@ -24,6 +24,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-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "1.0.7",
@@ -97,6 +98,7 @@
     "./separator": "./src/shadcn/separator.tsx",
     "./input-otp": "./src/shadcn/input-otp.tsx",
     "./textarea": "./src/shadcn/textarea.tsx",
+    "./switch": "./src/shadcn/switch.tsx",
     "./utils": "./src/utils/index.ts",
     "./if": "./src/makerkit/if.tsx",
     "./trans": "./src/makerkit/trans.tsx",

packages/ui/src/shadcn/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@kit/ui/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-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }