Added Switch component with small and large variants

apps/webapp/app/components/primitives/Switch.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "~/utils/cn";
+
+const variations = {
+  large: {
+    root: "h-6 w-11",
+    thumb:
+      "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+  },
+  small: {
+    root: "h-3 w-6",
+    thumb:
+      "h-2.5 w-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
+  },
+};
+
+type SwitchProps = React.ComponentPropsWithoutRef<
+  typeof SwitchPrimitives.Root
+> & {
+  variant: keyof typeof variations;
+};
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  SwitchProps
+>(({ className, variant, ...props }, ref) => {
+  const { root, thumb } = variations[variant];
+
+  return (
+    <SwitchPrimitives.Root
+      className={cn(
+        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-slate-700 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",
+        root,
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          thumb,
+          "pointer-events-none block rounded-full bg-slate-200 shadow-lg ring-0 transition-transform"
+        )}
+      />
+    </SwitchPrimitives.Root>
+  );
+});
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

apps/webapp/app/components/stories/Switch.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "../primitives/Switch";
+
+const meta: Meta = {
+  title: "Primitives/Switch",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Collection>;
+
+export const Switches: Story = {
+  render: () => <Collection />,
+};
+
+function Collection() {
+  return (
+    <div className="flex flex-col items-start gap-y-4 p-4">
+      <Switch variant="large" />
+      <Switch variant="small" />
+    </div>
+  );
+}

apps/webapp/package.json

@@ -60,6 +60,7 @@
     "@radix-ui/react-popover": "^1.0.5",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@remix-run/express": "1.16.1",