@agentero/design-system 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.11.0",
+	"version": "0.12.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -57,6 +57,10 @@
 			"types": "./src/pagination/index.d.ts",
 			"import": "./src/pagination/index.js"
 		},
+		"./switch": {
+			"types": "./src/switch/index.d.ts",
+			"import": "./src/switch/index.js"
+		},
 		"./tag": {
 			"types": "./src/tag/index.d.ts",
 			"import": "./src/tag/index.js"
@@ -88,6 +92,7 @@
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-switch": "^1.3.2",
 		"clsx": "^2.1.1",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.5.0",

package/src/switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch, switchRecipe } from './switch';
+export type { SwitchProps, SwitchSize } from './switch';

package/src/switch/index.js

@@ -0,0 +1,2 @@
+import { Switch as e, switchRecipe as t } from "./switch.js";
+export { e as Switch, t as switchRecipe };

package/src/switch/switch.d.ts

@@ -0,0 +1,59 @@
+import { ComponentPropsWithRef } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+export declare const switchRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            thumb: string;
+        };
+        md: {
+            root: string;
+            thumb: string;
+        };
+    };
+}, {
+    root: string[];
+    thumb: string;
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            thumb: string;
+        };
+        md: {
+            root: string;
+            thumb: string;
+        };
+    };
+}, {
+    root: string[];
+    thumb: string;
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            thumb: string;
+        };
+        md: {
+            root: string;
+            thumb: string;
+        };
+    };
+}, {
+    root: string[];
+    thumb: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SwitchSize = NonNullable<VariantProps<typeof switchRecipe>['size']>;
+export type SwitchProps = ComponentPropsWithRef<typeof SwitchPrimitive.Root> & VariantProps<typeof switchRecipe>;
+/**
+ * Instant-effect on/off toggle built on Radix Switch. Reach for it over a
+ * Checkbox when flipping a single boolean that applies immediately. Renders
+ * only the toggle — pair it with a `<label htmlFor>` for an accessible name.
+ *
+ * @summary Instant-effect on/off toggle built on Radix Switch
+ *
+ * @example
+ * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ */
+export declare const Switch: ({ className, size, ref, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/src/switch/switch.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { tv as t } from "tailwind-variants";
+import { jsx as n } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-switch";
+//#region src/switch/switch.tsx
+var i = t({
+	slots: {
+		root: [
+			"inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors",
+			"bg-bg-default-base-tertiary data-[state=checked]:bg-bg-default-base-inverse-primary",
+			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary",
+			"disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		thumb: "block translate-x-0 rounded-full bg-bg-default-base-primary shadow-sm transition-transform"
+	},
+	variants: { size: {
+		sm: {
+			root: "h-4 w-7.5 p-0.5",
+			thumb: "size-3 data-[state=checked]:translate-x-3.5"
+		},
+		md: {
+			root: "h-6 w-12 p-0.75",
+			thumb: "size-4.5 data-[state=checked]:translate-x-6"
+		}
+	} },
+	defaultVariants: { size: "md" }
+}), a = ({ className: t, size: a, ref: o, ...s }) => {
+	let c = i({ size: a });
+	return /* @__PURE__ */ n(r.Root, {
+		ref: o,
+		"data-slot": "switch",
+		className: e(c.root(), t),
+		...s,
+		children: /* @__PURE__ */ n(r.Thumb, {
+			"data-slot": "switch-thumb",
+			className: c.thumb()
+		})
+	});
+};
+//#endregion
+export { a as Switch, i as switchRecipe };