@agentero/design-system 0.15.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.15.0",
+	"version": "0.15.1",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/switch/switch.d.ts

@@ -12,9 +12,16 @@ export declare const switchRecipe: import('tailwind-variants').TVReturnType<{
             thumb: string;
         };
     };
+    reverse: {
+        true: {
+            wrapper: string;
+        };
+    };
 }, {
+    wrapper: string;
     root: string[];
     thumb: string;
+    label: string[];
 }, undefined, {
     size: {
         sm: {
@@ -26,9 +33,16 @@ export declare const switchRecipe: import('tailwind-variants').TVReturnType<{
             thumb: string;
         };
     };
+    reverse: {
+        true: {
+            wrapper: string;
+        };
+    };
 }, {
+    wrapper: string;
     root: string[];
     thumb: string;
+    label: string[];
 }, import('tailwind-variants').TVReturnType<{
     size: {
         sm: {
@@ -40,20 +54,39 @@ export declare const switchRecipe: import('tailwind-variants').TVReturnType<{
             thumb: string;
         };
     };
+    reverse: {
+        true: {
+            wrapper: string;
+        };
+    };
 }, {
+    wrapper: string;
     root: string[];
     thumb: string;
+    label: string[];
 }, undefined, unknown, unknown, undefined>>;
 export type SwitchSize = NonNullable<VariantProps<typeof switchRecipe>['size']>;
-export type SwitchProps = ComponentPropsWithRef<typeof SwitchPrimitive.Root> & VariantProps<typeof switchRecipe>;
+export type SwitchProps = ComponentPropsWithRef<typeof SwitchPrimitive.Root> & VariantProps<typeof switchRecipe> & {
+    /**
+     * Optional text rendered beside the toggle and associated with it via
+     * `htmlFor`. Provide an `id` so the association resolves. Omit it to keep
+     * the toggle headless and supply your own `<label htmlFor>`.
+     */
+    label?: string;
+};
 /**
  * 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.
+ * Checkbox when flipping a single boolean that applies immediately.
+ *
+ * Renders only the toggle by default — pair it with a `<label htmlFor>` for an
+ * accessible name. Pass `label` (with an `id`) to render an associated text
+ * label beside the toggle; `reverse` places the label before it.
  *
  * @summary Instant-effect on/off toggle built on Radix Switch
  *
  * @example
  * <Switch checked={enabled} onCheckedChange={setEnabled} />
+ * @example
+ * <Switch id="email-notifications" label="Email" checked={on} onCheckedChange={setOn} />
  */
-export declare const Switch: ({ className, size, ref, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ className, size, reverse, label, id, ref, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/src/switch/switch.js

@@ -1,42 +1,61 @@
 "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";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useId as i } from "react";
+import * as a from "@radix-ui/react-switch";
 //#region src/switch/switch.tsx
-var i = t({
+var o = t({
 	slots: {
+		wrapper: "inline-flex items-center gap-2.5",
 		root: [
-			"inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors",
+			"peer 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"
+		thumb: "block translate-x-0 rounded-full bg-bg-default-base-primary shadow-sm transition-transform",
+		label: ["cursor-pointer text-sm text-text-default-base-primary select-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"]
 	},
-	variants: { size: {
-		sm: {
-			root: "h-4 w-7.5 p-0.5",
-			thumb: "size-3 data-[state=checked]:translate-x-3.5"
+	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"
+			}
 		},
-		md: {
-			root: "h-6 w-12 p-0.75",
-			thumb: "size-4.5 data-[state=checked]:translate-x-6"
-		}
-	} },
+		reverse: { true: { wrapper: "flex-row-reverse" } }
+	},
 	defaultVariants: { size: "md" }
-}), a = ({ className: t, size: a, ref: o, ...s }) => {
-	let c = i({ size: a });
-	return /* @__PURE__ */ n(r.Root, {
-		ref: o,
+}), s = ({ className: t, size: s, reverse: c, label: l, id: u, ref: d, ...f }) => {
+	let p = i(), m = u ?? (l ? p : void 0), h = o({
+		size: s,
+		reverse: c
+	}), g = /* @__PURE__ */ n(a.Root, {
+		ref: d,
+		id: m,
 		"data-slot": "switch",
-		className: e(c.root(), t),
-		...s,
-		children: /* @__PURE__ */ n(r.Thumb, {
+		className: e(h.root(), t),
+		...f,
+		children: /* @__PURE__ */ n(a.Thumb, {
 			"data-slot": "switch-thumb",
-			className: c.thumb()
+			className: h.thumb()
 		})
 	});
+	return l ? /* @__PURE__ */ r("span", {
+		"data-slot": "switch-wrapper",
+		className: h.wrapper(),
+		children: [g, /* @__PURE__ */ n("label", {
+			htmlFor: m,
+			"data-slot": "switch-label",
+			className: h.label(),
+			children: l
+		})]
+	}) : g;
 };
 //#endregion
-export { a as Switch, i as switchRecipe };
+export { s as Switch, o as switchRecipe };