@flanksource/clicky-ui 0.2.19 → 0.2.20

package/dist/components/SearchInput.cjs

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const UiSearch = require("../icons/components/UiSearch.cjs");
+function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search…",
+  shortcut = "⌘K",
+  onShortcut,
+  className,
+  ...rest
+}) {
+  const inputRef = react.useRef(null);
+  const shortcutKey = shortcut ? shortcut.slice(-1).toLowerCase() : "k";
+  react.useEffect(() => {
+    if (!onShortcut) return;
+    const handler = (e) => {
+      var _a;
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey) {
+        e.preventDefault();
+        onShortcut();
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onShortcut, shortcutKey]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex items-center gap-density-2 rounded-md border border-border bg-secondary px-density-3",
+        "h-control-h focus-within:ring-2 focus-within:ring-ring",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "search",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            placeholder,
+            className: utils.cn(
+              "min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none",
+              "placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:appearance-none"
+            ),
+            ...rest
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "shrink-0 rounded border border-border px-1 font-mono text-[10px] text-muted-foreground", children: shortcut })
+      ]
+    }
+  );
+}
+exports.SearchInput = SearchInput;
+//# sourceMappingURL=SearchInput.cjs.map

package/dist/components/SearchInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.cjs","sources":["../../src/components/SearchInput.tsx"],"sourcesContent":["import { useEffect, useRef, type InputHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\n\ntype NativeInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"value\" | \"onChange\" | \"size\"\n>;\n\nexport type SearchInputProps = NativeInputProps & {\n  /** Controlled query value. */\n  value: string;\n  /** Called with the next query string. */\n  onChange: (value: string) => void;\n  /** Placeholder text. */\n  placeholder?: string;\n  /**\n   * Keyboard-shortcut hint rendered as a trailing `<kbd>` (Gavel's `⌘K`).\n   * Pass `null` to hide it. Defaults to `⌘K`.\n   */\n  shortcut?: string | null;\n  /**\n   * When set, the matching shortcut (cmd/ctrl + the last character of\n   * `shortcut`, default `k`) focuses the input from anywhere on the page.\n   */\n  onShortcut?: () => void;\n  /** Classes applied to the wrapper. */\n  className?: string;\n};\n\n/**\n * Search field with a leading magnifier and an optional trailing keyboard-hint\n * (the Gavel app-bar `⌘K` search). Controlled. Built on clicky tokens. When\n * `onShortcut` is provided, a global cmd/ctrl+K listener is wired so the field\n * can be focused from anywhere.\n */\nexport function SearchInput({\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  shortcut = \"⌘K\",\n  onShortcut,\n  className,\n  ...rest\n}: SearchInputProps) {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  // Match cmd/ctrl + the shortcut's trailing key (e.g. \"k\" from \"⌘K\").\n  const shortcutKey = shortcut ? shortcut.slice(-1).toLowerCase() : \"k\";\n\n  useEffect(() => {\n    if (!onShortcut) return;\n    const handler = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey) {\n        e.preventDefault();\n        onShortcut();\n        inputRef.current?.focus();\n      }\n    };\n    window.addEventListener(\"keydown\", handler);\n    return () => window.removeEventListener(\"keydown\", handler);\n  }, [onShortcut, shortcutKey]);\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-density-2 rounded-md border border-border bg-secondary px-density-3\",\n        \"h-control-h focus-within:ring-2 focus-within:ring-ring\",\n        className,\n      )}\n    >\n      <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n      <input\n        ref={inputRef}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder={placeholder}\n        className={cn(\n          \"min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none\",\n          \"placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:appearance-none\",\n        )}\n        {...rest}\n      />\n      {shortcut && (\n        <kbd className=\"shrink-0 rounded border border-border px-1 font-mono text-[10px] text-muted-foreground\">\n          {shortcut}\n        </kbd>\n      )}\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","Icon","UiSearch"],"mappings":";;;;;;;AAqCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,WAAWA,MAAAA,OAAgC,IAAI;AAGrD,QAAM,cAAc,WAAW,SAAS,MAAM,EAAE,EAAE,gBAAgB;AAElEC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,WAAY;AACjB,UAAM,UAAU,CAAC,MAAqB;;AACpC,WAAK,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,YAAA,MAAkB,aAAa;AACnE,UAAE,eAAA;AACF,mBAAA;AACA,uBAAS,YAAT,mBAAkB;AAAA,MACpB;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,OAAO;AAC1C,WAAO,MAAM,OAAO,oBAAoB,WAAW,OAAO;AAAA,EAC5D,GAAG,CAAC,YAAY,WAAW,CAAC;AAE5B,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAMC,SAAAA,UAAU,WAAU,kCAAiC;AAAA,QACjEF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,YACxC;AAAA,YACA,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEL,YACCC,2BAAAA,IAAC,OAAA,EAAI,WAAU,0FACZ,UAAA,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/components/SearchInput.d.ts

@@ -0,0 +1,31 @@
+import { InputHTMLAttributes } from 'react';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "size">;
+export type SearchInputProps = NativeInputProps & {
+    /** Controlled query value. */
+    value: string;
+    /** Called with the next query string. */
+    onChange: (value: string) => void;
+    /** Placeholder text. */
+    placeholder?: string;
+    /**
+     * Keyboard-shortcut hint rendered as a trailing `<kbd>` (Gavel's `⌘K`).
+     * Pass `null` to hide it. Defaults to `⌘K`.
+     */
+    shortcut?: string | null;
+    /**
+     * When set, the matching shortcut (cmd/ctrl + the last character of
+     * `shortcut`, default `k`) focuses the input from anywhere on the page.
+     */
+    onShortcut?: () => void;
+    /** Classes applied to the wrapper. */
+    className?: string;
+};
+/**
+ * Search field with a leading magnifier and an optional trailing keyboard-hint
+ * (the Gavel app-bar `⌘K` search). Controlled. Built on clicky tokens. When
+ * `onShortcut` is provided, a global cmd/ctrl+K listener is wired so the field
+ * can be focused from anywhere.
+ */
+export declare function SearchInput({ value, onChange, placeholder, shortcut, onShortcut, className, ...rest }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/components/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKpE,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,UAAU,GAAG,MAAM,CAC9B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG;IAChD,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAuB,EACvB,QAAe,EACf,UAAU,EACV,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,2CA+ClB"}

package/dist/components/SearchInput.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { UiSearch } from "../icons/components/UiSearch.js";
+function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search…",
+  shortcut = "⌘K",
+  onShortcut,
+  className,
+  ...rest
+}) {
+  const inputRef = useRef(null);
+  const shortcutKey = shortcut ? shortcut.slice(-1).toLowerCase() : "k";
+  useEffect(() => {
+    if (!onShortcut) return;
+    const handler = (e) => {
+      var _a;
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey) {
+        e.preventDefault();
+        onShortcut();
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onShortcut, shortcutKey]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-density-2 rounded-md border border-border bg-secondary px-density-3",
+        "h-control-h focus-within:ring-2 focus-within:ring-ring",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon: UiSearch, className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "search",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            placeholder,
+            className: cn(
+              "min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none",
+              "placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:appearance-none"
+            ),
+            ...rest
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsx("kbd", { className: "shrink-0 rounded border border-border px-1 font-mono text-[10px] text-muted-foreground", children: shortcut })
+      ]
+    }
+  );
+}
+export {
+  SearchInput
+};
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../src/components/SearchInput.tsx"],"sourcesContent":["import { useEffect, useRef, type InputHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\n\ntype NativeInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"value\" | \"onChange\" | \"size\"\n>;\n\nexport type SearchInputProps = NativeInputProps & {\n  /** Controlled query value. */\n  value: string;\n  /** Called with the next query string. */\n  onChange: (value: string) => void;\n  /** Placeholder text. */\n  placeholder?: string;\n  /**\n   * Keyboard-shortcut hint rendered as a trailing `<kbd>` (Gavel's `⌘K`).\n   * Pass `null` to hide it. Defaults to `⌘K`.\n   */\n  shortcut?: string | null;\n  /**\n   * When set, the matching shortcut (cmd/ctrl + the last character of\n   * `shortcut`, default `k`) focuses the input from anywhere on the page.\n   */\n  onShortcut?: () => void;\n  /** Classes applied to the wrapper. */\n  className?: string;\n};\n\n/**\n * Search field with a leading magnifier and an optional trailing keyboard-hint\n * (the Gavel app-bar `⌘K` search). Controlled. Built on clicky tokens. When\n * `onShortcut` is provided, a global cmd/ctrl+K listener is wired so the field\n * can be focused from anywhere.\n */\nexport function SearchInput({\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  shortcut = \"⌘K\",\n  onShortcut,\n  className,\n  ...rest\n}: SearchInputProps) {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  // Match cmd/ctrl + the shortcut's trailing key (e.g. \"k\" from \"⌘K\").\n  const shortcutKey = shortcut ? shortcut.slice(-1).toLowerCase() : \"k\";\n\n  useEffect(() => {\n    if (!onShortcut) return;\n    const handler = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcutKey) {\n        e.preventDefault();\n        onShortcut();\n        inputRef.current?.focus();\n      }\n    };\n    window.addEventListener(\"keydown\", handler);\n    return () => window.removeEventListener(\"keydown\", handler);\n  }, [onShortcut, shortcutKey]);\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-density-2 rounded-md border border-border bg-secondary px-density-3\",\n        \"h-control-h focus-within:ring-2 focus-within:ring-ring\",\n        className,\n      )}\n    >\n      <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n      <input\n        ref={inputRef}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder={placeholder}\n        className={cn(\n          \"min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none\",\n          \"placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:appearance-none\",\n        )}\n        {...rest}\n      />\n      {shortcut && (\n        <kbd className=\"shrink-0 rounded border border-border px-1 font-mono text-[10px] text-muted-foreground\">\n          {shortcut}\n        </kbd>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAqCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,WAAW,OAAgC,IAAI;AAGrD,QAAM,cAAc,WAAW,SAAS,MAAM,EAAE,EAAE,gBAAgB;AAElE,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AACjB,UAAM,UAAU,CAAC,MAAqB;;AACpC,WAAK,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,YAAA,MAAkB,aAAa;AACnE,UAAE,eAAA;AACF,mBAAA;AACA,uBAAS,YAAT,mBAAkB;AAAA,MACpB;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,OAAO;AAC1C,WAAO,MAAM,OAAO,oBAAoB,WAAW,OAAO;AAAA,EAC5D,GAAG,CAAC,YAAY,WAAW,CAAC;AAE5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAM,UAAU,WAAU,kCAAiC;AAAA,QACjE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,YACxC;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEL,YACC,oBAAC,OAAA,EAAI,WAAU,0FACZ,UAAA,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/SegmentedControl.cjs

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const SIZE_CLASSES = {
+  sm: "text-xs px-density-2 py-density-1 gap-1",
+  md: "text-sm px-density-3 py-1.5 gap-1.5"
+};
+function SegmentedControl({
+  value,
+  options,
+  onChange,
+  size = "md",
+  className,
+  "aria-label": ariaLabel
+}) {
+  const btnRefs = react.useRef([]);
+  const move = (from, dir) => {
+    var _a;
+    const n = options.length;
+    let i = from;
+    for (let step = 0; step < n; step++) {
+      i = (i + dir + n) % n;
+      const opt = options[i];
+      if (opt && !opt.disabled) {
+        onChange(opt.id);
+        (_a = btnRefs.current[i]) == null ? void 0 : _a.focus();
+        return;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      className: utils.cn("inline-flex items-center rounded-md bg-muted p-0.5", className),
+      children: options.map((option, index) => {
+        const active = option.id === value;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref: (el) => {
+              btnRefs.current[index] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": active,
+            title: option.title,
+            disabled: option.disabled,
+            tabIndex: active ? 0 : -1,
+            onClick: () => !option.disabled && onChange(option.id),
+            onKeyDown: (e) => {
+              if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+                e.preventDefault();
+                move(index, 1);
+              } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+                e.preventDefault();
+                move(index, -1);
+              }
+            },
+            className: utils.cn(
+              "inline-flex items-center whitespace-nowrap rounded-[5px] font-medium transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              SIZE_CLASSES[size],
+              active ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              option.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.Icon,
+                {
+                  ...typeof option.icon === "string" ? { name: option.icon } : { icon: option.icon }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+            ]
+          },
+          option.id
+        );
+      })
+    }
+  );
+}
+exports.SegmentedControl = SegmentedControl;
+//# sourceMappingURL=SegmentedControl.cjs.map

package/dist/components/SegmentedControl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.cjs","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser. */\n  size?: SegmentedSize;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"text-sm px-density-3 py-1.5 gap-1.5\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\"inline-flex items-center rounded-md bg-muted p-0.5\", className)}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center whitespace-nowrap rounded-[5px] font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              SIZE_CLASSES[size],\n              active\n                ? \"bg-card text-foreground shadow-sm\"\n                : \"text-muted-foreground hover:text-foreground\",\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\" ? { name: option.icon } : { icon: option.icon })}\n              />\n            )}\n            <span>{option.label}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["useRef","jsx","cn","jsxs","Icon"],"mappings":";;;;;;AAkCA,MAAM,eAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AACN;AASO,SAAS,iBAA4C;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAChB,GAA6B;AAC3B,QAAM,UAAUA,MAAAA,OAAqC,EAAE;AAEvD,QAAM,OAAO,CAAC,MAAc,QAAgB;;AAC1C,UAAM,IAAI,QAAQ;AAClB,QAAI,IAAI;AACR,aAAS,OAAO,GAAG,OAAO,GAAG,QAAQ;AACnC,WAAK,IAAI,MAAM,KAAK;AACpB,YAAM,MAAM,QAAQ,CAAC;AACrB,UAAI,OAAO,CAAC,IAAI,UAAU;AACxB,iBAAS,IAAI,EAAE;AACf,sBAAQ,QAAQ,CAAC,MAAjB,mBAAoB;AACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAWC,MAAAA,GAAG,sDAAsD,SAAS;AAAA,MAE5E,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,SAAS,OAAO,OAAO;AAC7B,eACEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,OAAO;AACX,sBAAQ,QAAQ,KAAK,IAAI;AAAA,YAC3B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,UAAU,SAAS,IAAI;AAAA,YACvB,SAAS,MAAM,CAAC,OAAO,YAAY,SAAS,OAAO,EAAE;AAAA,YACrD,WAAW,CAAC,MAAM;AAChB,kBAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;AACnD,kBAAE,eAAA;AACF,qBAAK,OAAO,CAAC;AAAA,cACf,WAAW,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AACvD,kBAAE,eAAA;AACF,qBAAK,OAAO,EAAE;AAAA,cAChB;AAAA,YACF;AAAA,YACA,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,aAAa,IAAI;AAAA,cACjB,SACI,sCACA;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,cAAA,OAAO,QACND,2BAAAA;AAAAA,gBAACG,KAAAA;AAAAA,gBAAA;AAAA,kBACE,GAAI,OAAO,OAAO,SAAS,WAAW,EAAE,MAAM,OAAO,KAAA,IAAS,EAAE,MAAM,OAAO,KAAA;AAAA,gBAAK;AAAA,cAAA;AAAA,cAGvFH,2BAAAA,IAAC,QAAA,EAAM,UAAA,OAAO,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAnCf,OAAO;AAAA,QAAA;AAAA,MAsClB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/components/SegmentedControl.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { StaticIconComponent } from '../data/Icon';
+export type SegmentedSize = "sm" | "md";
+export type SegmentedOption<T extends string = string> = {
+    /** Stable value emitted on selection. */
+    id: T;
+    /** Visible label. */
+    label: ReactNode;
+    /** Optional leading icon (imported `Ui*` component or runtime name). */
+    icon?: string | StaticIconComponent;
+    /** Native title attribute. */
+    title?: string;
+    /** Disable this segment. */
+    disabled?: boolean;
+};
+export type SegmentedControlProps<T extends string = string> = {
+    /** Currently selected option id. */
+    value: T;
+    /** Mutually-exclusive options rendered left to right. */
+    options: SegmentedOption<T>[];
+    /** Called with the newly selected id. */
+    onChange: (id: T) => void;
+    /** Control size. `md` (default) matches form controls; `sm` is denser. */
+    size?: SegmentedSize;
+    /** Accessible group label. */
+    "aria-label"?: string;
+    /** Classes applied to the track. */
+    className?: string;
+};
+/**
+ * Single-select toggle group (the Gavel `Segmented` "Mine / All / Bots"
+ * pattern). A muted track holds mutually-exclusive segments; the active
+ * segment lifts onto the card surface. Built on clicky tokens so it inherits
+ * dark-mode and density. Use for small, flat choice sets — reach for `Select`
+ * when the option count grows.
+ */
+export declare function SegmentedControl<T extends string = string>({ value, options, onChange, size, className, "aria-label": ariaLabel, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/components/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/components/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,yCAAyC;IACzC,EAAE,EAAE,CAAC,CAAC;IACN,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,oCAAoC;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,yDAAyD;IACzD,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,0EAA0E;IAC1E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAOF;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAoE1B"}

package/dist/components/SegmentedControl.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+const SIZE_CLASSES = {
+  sm: "text-xs px-density-2 py-density-1 gap-1",
+  md: "text-sm px-density-3 py-1.5 gap-1.5"
+};
+function SegmentedControl({
+  value,
+  options,
+  onChange,
+  size = "md",
+  className,
+  "aria-label": ariaLabel
+}) {
+  const btnRefs = useRef([]);
+  const move = (from, dir) => {
+    var _a;
+    const n = options.length;
+    let i = from;
+    for (let step = 0; step < n; step++) {
+      i = (i + dir + n) % n;
+      const opt = options[i];
+      if (opt && !opt.disabled) {
+        onChange(opt.id);
+        (_a = btnRefs.current[i]) == null ? void 0 : _a.focus();
+        return;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      className: cn("inline-flex items-center rounded-md bg-muted p-0.5", className),
+      children: options.map((option, index) => {
+        const active = option.id === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => {
+              btnRefs.current[index] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": active,
+            title: option.title,
+            disabled: option.disabled,
+            tabIndex: active ? 0 : -1,
+            onClick: () => !option.disabled && onChange(option.id),
+            onKeyDown: (e) => {
+              if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+                e.preventDefault();
+                move(index, 1);
+              } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+                e.preventDefault();
+                move(index, -1);
+              }
+            },
+            className: cn(
+              "inline-flex items-center whitespace-nowrap rounded-[5px] font-medium transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              SIZE_CLASSES[size],
+              active ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              option.icon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  ...typeof option.icon === "string" ? { name: option.icon } : { icon: option.icon }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: option.label })
+            ]
+          },
+          option.id
+        );
+      })
+    }
+  );
+}
+export {
+  SegmentedControl
+};
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/components/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser. */\n  size?: SegmentedSize;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"text-sm px-density-3 py-1.5 gap-1.5\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\"inline-flex items-center rounded-md bg-muted p-0.5\", className)}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center whitespace-nowrap rounded-[5px] font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              SIZE_CLASSES[size],\n              active\n                ? \"bg-card text-foreground shadow-sm\"\n                : \"text-muted-foreground hover:text-foreground\",\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\" ? { name: option.icon } : { icon: option.icon })}\n              />\n            )}\n            <span>{option.label}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAkCA,MAAM,eAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AACN;AASO,SAAS,iBAA4C;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAChB,GAA6B;AAC3B,QAAM,UAAU,OAAqC,EAAE;AAEvD,QAAM,OAAO,CAAC,MAAc,QAAgB;;AAC1C,UAAM,IAAI,QAAQ;AAClB,QAAI,IAAI;AACR,aAAS,OAAO,GAAG,OAAO,GAAG,QAAQ;AACnC,WAAK,IAAI,MAAM,KAAK;AACpB,YAAM,MAAM,QAAQ,CAAC;AACrB,UAAI,OAAO,CAAC,IAAI,UAAU;AACxB,iBAAS,IAAI,EAAE;AACf,sBAAQ,QAAQ,CAAC,MAAjB,mBAAoB;AACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,GAAG,sDAAsD,SAAS;AAAA,MAE5E,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,SAAS,OAAO,OAAO;AAC7B,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,OAAO;AACX,sBAAQ,QAAQ,KAAK,IAAI;AAAA,YAC3B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,UAAU,SAAS,IAAI;AAAA,YACvB,SAAS,MAAM,CAAC,OAAO,YAAY,SAAS,OAAO,EAAE;AAAA,YACrD,WAAW,CAAC,MAAM;AAChB,kBAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;AACnD,kBAAE,eAAA;AACF,qBAAK,OAAO,CAAC;AAAA,cACf,WAAW,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AACvD,kBAAE,eAAA;AACF,qBAAK,OAAO,EAAE;AAAA,cAChB;AAAA,YACF;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,aAAa,IAAI;AAAA,cACjB,SACI,sCACA;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,cAAA,OAAO,QACN;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACE,GAAI,OAAO,OAAO,SAAS,WAAW,EAAE,MAAM,OAAO,KAAA,IAAS,EAAE,MAAM,OAAO,KAAA;AAAA,gBAAK;AAAA,cAAA;AAAA,cAGvF,oBAAC,QAAA,EAAM,UAAA,OAAO,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAnCf,OAAO;AAAA,QAAA;AAAA,MAsClB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Switch.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+function Switch({
+  checked,
+  onChange,
+  disabled,
+  label,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const labelId = react.useId();
+  const track = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label ? void 0 : ariaLabel,
+      "aria-labelledby": label ? labelId : void 0,
+      disabled,
+      onClick: () => onChange(!checked),
+      className: utils.cn(
+        "inline-flex shrink-0 items-center rounded-full px-0.5 transition-colors",
+        "h-5 w-9 density-compact:h-4 density-compact:w-7 density-spacious:h-6 density-spacious:w-11",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "justify-end bg-primary" : "justify-start bg-input",
+        !label && className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: utils.cn(
+            "pointer-events-none rounded-full bg-background shadow transition-all",
+            "h-4 w-4 density-compact:h-3 density-compact:w-3 density-spacious:h-5 density-spacious:w-5"
+          )
+        }
+      )
+    }
+  );
+  if (!label) return track;
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: utils.cn("inline-flex cursor-pointer items-center gap-density-2", className), children: [
+    track,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "text-sm text-foreground", children: label })
+  ] });
+}
+exports.Switch = Switch;
+//# sourceMappingURL=Switch.cjs.map

package/dist/components/Switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.cjs","sources":["../../src/components/Switch.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SwitchProps = {\n  /** Current on/off state. */\n  checked: boolean;\n  /** Called with the next state when toggled. */\n  onChange: (checked: boolean) => void;\n  /** Disable interaction. */\n  disabled?: boolean;\n  /** Optional clickable label rendered after the track. */\n  label?: ReactNode;\n  /** Accessible name when no visible `label` is given. */\n  \"aria-label\"?: string;\n  /** Classes applied to the wrapper (or the track when there is no label). */\n  className?: string;\n};\n\n/**\n * On/off toggle switch (`role=\"switch\"`). Density-aware: the track and knob\n * scale via `density-*` variants, so it shrinks/grows with the active\n * `data-density`. The knob is positioned with flex alignment (no translate\n * math), so it stays centered at every size.\n */\nexport function Switch({\n  checked,\n  onChange,\n  disabled,\n  label,\n  className,\n  \"aria-label\": ariaLabel,\n}: SwitchProps) {\n  const labelId = useId();\n\n  const track = (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={label ? undefined : ariaLabel}\n      aria-labelledby={label ? labelId : undefined}\n      disabled={disabled}\n      onClick={() => onChange(!checked)}\n      className={cn(\n        \"inline-flex shrink-0 items-center rounded-full px-0.5 transition-colors\",\n        \"h-5 w-9 density-compact:h-4 density-compact:w-7 density-spacious:h-6 density-spacious:w-11\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        checked ? \"justify-end bg-primary\" : \"justify-start bg-input\",\n        !label && className,\n      )}\n    >\n      <span\n        className={cn(\n          \"pointer-events-none rounded-full bg-background shadow transition-all\",\n          \"h-4 w-4 density-compact:h-3 density-compact:w-3 density-spacious:h-5 density-spacious:w-5\",\n        )}\n      />\n    </button>\n  );\n\n  if (!label) return track;\n\n  return (\n    <label className={cn(\"inline-flex cursor-pointer items-center gap-density-2\", className)}>\n      {track}\n      <span id={labelId} className=\"text-sm text-foreground\">\n        {label}\n      </span>\n    </label>\n  );\n}\n"],"names":["useId","jsx","cn"],"mappings":";;;;;AAwBO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAgB;AACd,QAAM,UAAUA,MAAAA,MAAA;AAEhB,QAAM,QACJC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,cAAY,QAAQ,SAAY;AAAA,MAChC,mBAAiB,QAAQ,UAAU;AAAA,MACnC;AAAA,MACA,SAAS,MAAM,SAAS,CAAC,OAAO;AAAA,MAChC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,2BAA2B;AAAA,QACrC,CAAC,SAAS;AAAA,MAAA;AAAA,MAGZ,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIJ,MAAI,CAAC,MAAO,QAAO;AAEnB,yCACG,SAAA,EAAM,WAAWA,MAAAA,GAAG,yDAAyD,SAAS,GACpF,UAAA;AAAA,IAAA;AAAA,mCACA,QAAA,EAAK,IAAI,SAAS,WAAU,2BAC1B,UAAA,MAAA,CACH;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/Switch.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export type SwitchProps = {
+    /** Current on/off state. */
+    checked: boolean;
+    /** Called with the next state when toggled. */
+    onChange: (checked: boolean) => void;
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Optional clickable label rendered after the track. */
+    label?: ReactNode;
+    /** Accessible name when no visible `label` is given. */
+    "aria-label"?: string;
+    /** Classes applied to the wrapper (or the track when there is no label). */
+    className?: string;
+};
+/**
+ * On/off toggle switch (`role="switch"`). Density-aware: the track and knob
+ * scale via `density-*` variants, so it shrinks/grows with the active
+ * `data-density`. The knob is positioned with flex alignment (no translate
+ * math), so it stays centered at every size.
+ */
+export declare function Switch({ checked, onChange, disabled, label, className, "aria-label": ariaLabel, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Switch.d.ts.map

package/dist/components/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9C,MAAM,MAAM,WAAW,GAAG;IACxB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE,WAAW,2CAwCb"}

package/dist/components/Switch.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/utils.js";
+function Switch({
+  checked,
+  onChange,
+  disabled,
+  label,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const labelId = useId();
+  const track = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label ? void 0 : ariaLabel,
+      "aria-labelledby": label ? labelId : void 0,
+      disabled,
+      onClick: () => onChange(!checked),
+      className: cn(
+        "inline-flex shrink-0 items-center rounded-full px-0.5 transition-colors",
+        "h-5 w-9 density-compact:h-4 density-compact:w-7 density-spacious:h-6 density-spacious:w-11",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "justify-end bg-primary" : "justify-start bg-input",
+        !label && className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none rounded-full bg-background shadow transition-all",
+            "h-4 w-4 density-compact:h-3 density-compact:w-3 density-spacious:h-5 density-spacious:w-5"
+          )
+        }
+      )
+    }
+  );
+  if (!label) return track;
+  return /* @__PURE__ */ jsxs("label", { className: cn("inline-flex cursor-pointer items-center gap-density-2", className), children: [
+    track,
+    /* @__PURE__ */ jsx("span", { id: labelId, className: "text-sm text-foreground", children: label })
+  ] });
+}
+export {
+  Switch
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../src/components/Switch.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SwitchProps = {\n  /** Current on/off state. */\n  checked: boolean;\n  /** Called with the next state when toggled. */\n  onChange: (checked: boolean) => void;\n  /** Disable interaction. */\n  disabled?: boolean;\n  /** Optional clickable label rendered after the track. */\n  label?: ReactNode;\n  /** Accessible name when no visible `label` is given. */\n  \"aria-label\"?: string;\n  /** Classes applied to the wrapper (or the track when there is no label). */\n  className?: string;\n};\n\n/**\n * On/off toggle switch (`role=\"switch\"`). Density-aware: the track and knob\n * scale via `density-*` variants, so it shrinks/grows with the active\n * `data-density`. The knob is positioned with flex alignment (no translate\n * math), so it stays centered at every size.\n */\nexport function Switch({\n  checked,\n  onChange,\n  disabled,\n  label,\n  className,\n  \"aria-label\": ariaLabel,\n}: SwitchProps) {\n  const labelId = useId();\n\n  const track = (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={label ? undefined : ariaLabel}\n      aria-labelledby={label ? labelId : undefined}\n      disabled={disabled}\n      onClick={() => onChange(!checked)}\n      className={cn(\n        \"inline-flex shrink-0 items-center rounded-full px-0.5 transition-colors\",\n        \"h-5 w-9 density-compact:h-4 density-compact:w-7 density-spacious:h-6 density-spacious:w-11\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        checked ? \"justify-end bg-primary\" : \"justify-start bg-input\",\n        !label && className,\n      )}\n    >\n      <span\n        className={cn(\n          \"pointer-events-none rounded-full bg-background shadow transition-all\",\n          \"h-4 w-4 density-compact:h-3 density-compact:w-3 density-spacious:h-5 density-spacious:w-5\",\n        )}\n      />\n    </button>\n  );\n\n  if (!label) return track;\n\n  return (\n    <label className={cn(\"inline-flex cursor-pointer items-center gap-density-2\", className)}>\n      {track}\n      <span id={labelId} className=\"text-sm text-foreground\">\n        {label}\n      </span>\n    </label>\n  );\n}\n"],"names":[],"mappings":";;;AAwBO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAgB;AACd,QAAM,UAAU,MAAA;AAEhB,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,cAAY,QAAQ,SAAY;AAAA,MAChC,mBAAiB,QAAQ,UAAU;AAAA,MACnC;AAAA,MACA,SAAS,MAAM,SAAS,CAAC,OAAO;AAAA,MAChC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,2BAA2B;AAAA,QACrC,CAAC,SAAS;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIJ,MAAI,CAAC,MAAO,QAAO;AAEnB,8BACG,SAAA,EAAM,WAAW,GAAG,yDAAyD,SAAS,GACpF,UAAA;AAAA,IAAA;AAAA,wBACA,QAAA,EAAK,IAAI,SAAS,WAAU,2BAC1B,UAAA,MAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}