Switch Component

.changeset/neat-mangos-tickle.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add switch component

package.json

@@ -91,6 +91,7 @@
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-select": "^2.0.0",
 		"@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",

src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta } from "@storybook/react";
+import { Switch } from "./index";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Switch",
+	component: Switch,
+	argTypes: {
+		disabled: {
+			control: "boolean",
+			defaultValue: false,
+			description: "if true, the switch is disabled"
+		},
+		defaultChecked: {
+			control: "boolean",
+			defaultValue: false,
+			description: "if true, the switch is checked by default"
+		},
+		half: {
+			control: "boolean",
+			defaultValue: false
+		}
+	},
+	parameters: {
+		layout: "centered"
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const defaultVariant: Story = {
+	name: "default",
+	args: {
+		defaultChecked: true,
+		half: false,
+		disabled: false
+	}
+};
+
+export const half: Story = {
+	name: "Half",
+	args: {
+		half: true,
+		defaultChecked: true,
+		disabled: false
+	}
+};

src/components/Switch/Switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "../../utilities";
+
+const Switch = React.forwardRef<
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & { half?: boolean }
+>(({ className, half, ...props }, ref) => (
+	<SwitchPrimitives.Root
+		data-half={half}
+		className={cn(
+			"peer inline-flex h-4 w-[36px] shrink-0 cursor-pointer items-center rounded-rounded 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 data-[state=checked]:disabled:bg-primary-400/30 data-[state=checked]:data-[half=true]:bg-primary-50 disabled:data-[state=checked]:data-[half=true]:bg-primary-50/30 data-[state=checked]:bg-primary-400 disabled:data-[state=unchecked]:bg-neutral-100/30 data-[state=unchecked]:bg-neutral-100",
+			className
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				"pointer-events-none block h-3 w-3 rounded-rounded bg-white shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0"
+			)}
+		/>
+	</SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

src/components/Switch/index.tsx

@@ -0,0 +1 @@
+export * from "./Switch";

src/components/index.ts

@@ -18,3 +18,4 @@ export * from "./Toast";
 export * from "./Dialog";
 export * from "./Progress";
 export * from "./Select";
+export * from "./Switch";