@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/dist/slider/slider.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./slider.module.css";
+
+//#region src/slider/slider.d.ts
+interface SliderProps {
+  value?: number | number[];
+  defaultValue?: number | number[];
+  onValueChange?: (value: number | number[], eventDetails: unknown) => void;
+  onValueCommitted?: (value: number | number[], eventDetails: unknown) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  largeStep?: number;
+  disabled?: boolean;
+  name?: string;
+  orientation?: "horizontal" | "vertical";
+  format?: Intl.NumberFormatOptions;
+  /** Visible label rendered above the track. */
+  label?: ReactNode;
+  /** Show the current value next to the label. */
+  showValue?: boolean;
+  /** Aria-label for single-thumb sliders without a visible label. */
+  "aria-label"?: string;
+  className?: string;
+}
+declare function Slider({
+  label,
+  showValue,
+  className,
+  onValueChange,
+  onValueCommitted,
+  "aria-label": ariaLabel,
+  ...props
+}: SliderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Slider, SliderProps, styles };
+//# sourceMappingURL=slider.d.ts.map

package/dist/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","names":[],"sources":["../../src/slider/slider.tsx"],"mappings":";;;;;UAIiB,WAAA;EACf,KAAA;EACA,YAAA;EACA,aAAA,IAAiB,KAAA,qBAA0B,YAAA;EAC3C,gBAAA,IAAoB,KAAA,qBAA0B,YAAA;EAC9C,GAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;EACA,QAAA;EACA,IAAA;EACA,WAAA;EACA,MAAA,GAAS,IAAA,CAAK,mBAAA;EARM;EAUpB,KAAA,GAAQ,SAAA;EATR;EAWA,SAAA;EATA;EAWA,YAAA;EACA,SAAA;AAAA;AAAA,iBAGc,MAAA,CAAA;EACd,KAAA;EACA,SAAA;EACA,SAAA;EACA,aAAA;EACA,gBAAA;EAAA,cACc,SAAA;EAAA,GACX;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/slider/slider.js

@@ -0,0 +1,41 @@
+import slider_module_default from "./slider.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+//#region src/slider/slider.tsx
+function Slider$1({ label, showValue = false, className, onValueChange, onValueCommitted, "aria-label": ariaLabel, ...props }) {
+	const isRange = Array.isArray(props.defaultValue ?? props.value);
+	return /* @__PURE__ */ jsxs(Slider.Root, {
+		className: `${slider_module_default.root} ${className ?? ""}`,
+		onValueChange,
+		onValueCommitted,
+		...props,
+		children: [(label || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: slider_module_default.header,
+			children: [label && /* @__PURE__ */ jsx(Slider.Label, {
+				className: slider_module_default.label,
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Slider.Value, { className: slider_module_default.value })]
+		}), /* @__PURE__ */ jsx(Slider.Control, {
+			className: slider_module_default.control,
+			children: /* @__PURE__ */ jsxs(Slider.Track, {
+				className: slider_module_default.track,
+				children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: slider_module_default.indicator }), isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Slider.Thumb, {
+					index: 0,
+					className: slider_module_default.thumb,
+					"aria-label": "Minimum value"
+				}), /* @__PURE__ */ jsx(Slider.Thumb, {
+					index: 1,
+					className: slider_module_default.thumb,
+					"aria-label": "Maximum value"
+				})] }) : /* @__PURE__ */ jsx(Slider.Thumb, {
+					className: slider_module_default.thumb,
+					"aria-label": ariaLabel
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { Slider$1 as Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":["Slider","BaseSlider","styles"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\";\nimport styles from \"./slider.module.css\";\n\nexport interface SliderProps {\n  value?: number | number[];\n  defaultValue?: number | number[];\n  onValueChange?: (value: number | number[], eventDetails: unknown) => void;\n  onValueCommitted?: (value: number | number[], eventDetails: unknown) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  largeStep?: number;\n  disabled?: boolean;\n  name?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  format?: Intl.NumberFormatOptions;\n  /** Visible label rendered above the track. */\n  label?: ReactNode;\n  /** Show the current value next to the label. */\n  showValue?: boolean;\n  /** Aria-label for single-thumb sliders without a visible label. */\n  \"aria-label\"?: string;\n  className?: string;\n}\n\nexport function Slider({\n  label,\n  showValue = false,\n  className,\n  onValueChange,\n  onValueCommitted,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SliderProps) {\n  const isRange = Array.isArray(props.defaultValue ?? props.value);\n\n  return (\n    <BaseSlider.Root\n      className={`${styles.root} ${className ?? \"\"}`}\n      onValueChange={onValueChange as never}\n      onValueCommitted={onValueCommitted as never}\n      {...props}\n    >\n      {(label || showValue) && (\n        <div className={styles.header}>\n          {label && <BaseSlider.Label className={styles.label}>{label}</BaseSlider.Label>}\n          {showValue && <BaseSlider.Value className={styles.value} />}\n        </div>\n      )}\n      <BaseSlider.Control className={styles.control}>\n        <BaseSlider.Track className={styles.track}>\n          <BaseSlider.Indicator className={styles.indicator} />\n          {isRange ? (\n            <>\n              <BaseSlider.Thumb index={0} className={styles.thumb} aria-label=\"Minimum value\" />\n              <BaseSlider.Thumb index={1} className={styles.thumb} aria-label=\"Maximum value\" />\n            </>\n          ) : (\n            <BaseSlider.Thumb className={styles.thumb} aria-label={ariaLabel} />\n          )}\n        </BaseSlider.Track>\n      </BaseSlider.Control>\n    </BaseSlider.Root>\n  );\n}\n\nexport { styles as SliderStyles };\n"],"mappings":";;;;AA0BA,SAAgBA,SAAO,EACrB,OACA,YAAY,OACZ,WACA,eACA,kBACA,cAAc,WACd,GAAG,SACW;CACd,MAAM,UAAU,MAAM,QAAQ,MAAM,gBAAgB,MAAM,MAAM;AAEhE,QACE,qBAACC,OAAW,MAAZ;EACE,WAAW,GAAGC,sBAAO,KAAK,GAAG,aAAa;EAC3B;EACG;EAClB,GAAI;YAJN,EAMI,SAAS,cACT,qBAAC,OAAD;GAAK,WAAWA,sBAAO;aAAvB,CACG,SAAS,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;cAAQ;IAAyB,CAAA,EAC9E,aAAa,oBAACD,OAAW,OAAZ,EAAkB,WAAWC,sBAAO,OAAS,CAAA,CACvD;MAER,oBAACD,OAAW,SAAZ;GAAoB,WAAWC,sBAAO;aACpC,qBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;cAApC,CACE,oBAACD,OAAW,WAAZ,EAAsB,WAAWC,sBAAO,WAAa,CAAA,EACpD,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAACD,OAAW,OAAZ;KAAkB,OAAO;KAAG,WAAWC,sBAAO;KAAO,cAAW;KAAkB,CAAA,EAClF,oBAACD,OAAW,OAAZ;KAAkB,OAAO;KAAG,WAAWC,sBAAO;KAAO,cAAW;KAAkB,CAAA,CACjF,EAAA,CAAA,GAEH,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAY;KAAa,CAAA,CAErD;;GACA,CAAA,CACL"}

package/dist/slider/slider.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/slider/slider.module.js

@@ -0,0 +1,15 @@
+//#region src/slider/slider.module.css
+var slider_module_default = {
+	"control": "control_Lvfi-a",
+	"header": "header_Lvfi-a",
+	"indicator": "indicator_Lvfi-a",
+	"label": "label_Lvfi-a",
+	"root": "root_Lvfi-a",
+	"thumb": "thumb_Lvfi-a",
+	"track": "track_Lvfi-a",
+	"value": "value_Lvfi-a"
+};
+//#endregion
+export { slider_module_default as default };
+
+//# sourceMappingURL=slider.module.js.map

package/dist/slider/slider.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.module.js","names":[],"sources":["../../src/slider/slider.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n    width: 100%;\n  }\n\n  /* ─── Label + Value row ──────────────────────────────────────── */\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-2);\n  }\n\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-secondary);\n    letter-spacing: var(--letter-spacing-wide);\n    text-transform: uppercase;\n    user-select: none;\n  }\n\n  .value {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-tertiary);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* ─── Control (hit area) ─────────────────────────────────────── */\n\n  .control {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    padding-block: var(--space-2);\n    touch-action: none;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .control[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  /* ─── Track ──────────────────────────────────────────────────── */\n\n  .track {\n    position: relative;\n    width: 100%;\n    height: 4px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-line-subtle);\n    user-select: none;\n  }\n\n  /* ─── Indicator (filled portion) ────────────────────────────── */\n\n  .indicator {\n    border-radius: var(--radius-full);\n    background-color: var(--color-accent);\n    user-select: none;\n    transition: background-color var(--duration-fast) var(--easing-standard);\n  }\n\n  .root[data-disabled] .indicator {\n    background-color: var(--color-tertiary);\n  }\n\n  /* ─── Thumb ──────────────────────────────────────────────────── */\n\n  .thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-elevated);\n    border: var(--border-width-base) solid var(--color-line);\n    box-shadow: var(--shadow-sm);\n    user-select: none;\n    transition:\n      transform var(--duration-fast) var(--easing-spring),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard);\n  }\n\n  /* Grow on drag — gives tactile feedback */\n  .thumb[data-dragging] {\n    transform: scale(1.2);\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-md);\n  }\n\n  /* Focus ring via the nested <input> */\n  .thumb:has(:focus-visible) {\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-focus);\n  }\n\n  .thumb[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--color-surface-3);\n  }\n}\n"],"mappings":""}

package/dist/styles/reset.css

@@ -0,0 +1,69 @@
+@layer base {
+  *, :before, :after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizelegibility;
+    tab-size: 2;
+  }
+
+  body {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-normal);
+    color: var(--color-primary);
+    background-color: var(--color-canvas);
+  }
+
+  img, picture, video, canvas, svg {
+    max-width: 100%;
+    display: block;
+  }
+
+  input, button, textarea, select {
+    font: inherit;
+  }
+
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-display);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+    color: var(--color-primary);
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-thumb) var(--color-track);
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-thumb);
+    border-radius: var(--radius-full);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-track);
+  }
+}

package/dist/styles/tokens.css

@@ -0,0 +1,276 @@
+@layer theme {
+  :root {
+    --font-display: "New York", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
+    --font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Menlo", ui-monospace, "Courier New", monospace;
+    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+    --font-size-2xs: .625rem;
+    --font-size-xs: .6875rem;
+    --font-size-sm: .75rem;
+    --font-size-md: .8125rem;
+    --font-size-lg: .875rem;
+    --font-size-xl: 1rem;
+    --font-size-2xl: 1.125rem;
+    --font-size-3xl: 1.25rem;
+    --font-size-4xl: 1.5rem;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --line-height-tight: 1.2;
+    --line-height-normal: 1.4;
+    --line-height-relaxed: 1.6;
+    --letter-spacing-tight: -.02em;
+    --letter-spacing-normal: 0em;
+    --letter-spacing-wide: .04em;
+    --letter-spacing-wider: .08em;
+    --space-0: 0px;
+    --space-px: 1px;
+    --space-0-5: 2px;
+    --space-1: 4px;
+    --space-1-5: 6px;
+    --space-2: 8px;
+    --space-2-5: 10px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-20: 80px;
+    --space-24: 96px;
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-2xl: 12px;
+    --radius-full: 9999px;
+    --border-width-base: 1px;
+    --border-width-medium: 1.5px;
+    --border-width-thick: 2px;
+    --duration-instant: 0s;
+    --duration-fast: .1s;
+    --duration-normal: .15s;
+    --duration-slow: .2s;
+    --duration-slower: .3s;
+    --easing-ease-out: cubic-bezier(0, 0, .2, 1);
+    --easing-ease-in: cubic-bezier(.4, 0, 1, 1);
+    --easing-standard: cubic-bezier(.4, 0, .2, 1);
+    --easing-spring: cubic-bezier(.34, 1.56, .64, 1);
+    --easing-linear: linear;
+    --z-below: -1;
+    --z-base: 0;
+    --z-raised: 10;
+    --z-dropdown: 100;
+    --z-sticky: 200;
+    --z-overlay: 300;
+    --z-modal: 400;
+    --z-popover: 500;
+    --z-toast: 600;
+    --z-tooltip: 700;
+  }
+
+  :root, [data-theme="light"] {
+    color-scheme: light;
+    --color-canvas: #f0eff0;
+    --color-elevated: #fafafa;
+    --color-sunken: #e8e7e8;
+    --color-overlay: #fafafaeb;
+    --color-sidebar: #f4f3f4f5;
+    --color-surface-1: #fafafa;
+    --color-surface-2: #f4f3f4;
+    --color-surface-3: #eeeded;
+    --color-hover: #0000000a;
+    --color-active: #00000012;
+    --color-selected: #0078d41a;
+    --color-primary: #000000e0;
+    --color-secondary: #0000008c;
+    --color-tertiary: #0000005c;
+    --color-disabled: #0000003d;
+    --color-inverse: #fffffff2;
+    --color-on-accent: #fff;
+    --color-code: #0f766e;
+    --color-line: #0000001f;
+    --color-line-strong: #00000038;
+    --color-line-subtle: #0000000f;
+    --color-line-focus: var(--color-focus-ring);
+    --color-accent: #0078d4;
+    --color-accent-hover: #006bbf;
+    --color-accent-pressed: #005ea8;
+    --color-accent-tint: #0078d41a;
+    --color-accent-tint-hover: #0078d429;
+    --color-focus-ring: #0078d4cc;
+    --shadow-xs: 0 1px 2px 0 #00000014;
+    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000000f;
+    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000000f;
+    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000000f;
+    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000000f;
+    --shadow-popover: 0 8px 24px -4px #00000029, 0 2px 6px -2px #0000001a;
+    --shadow-sheet: 0 -4px 16px 0 #0000001f;
+    --shadow-inset: inset 0 1px 2px 0 #00000014;
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
+    --color-success-bg: #f0fdf4;
+    --color-success-border: #bbf7d0;
+    --color-success-text: #15803d;
+    --color-success-solid: #16a34a;
+    --color-warning-bg: #fffbeb;
+    --color-warning-border: #fde68a;
+    --color-warning-text: #92400e;
+    --color-warning-solid: #d97706;
+    --color-error-bg: #fef2f2;
+    --color-error-border: #fecaca;
+    --color-error-text: #991b1b;
+    --color-error-solid: #dc2626;
+    --color-info-bg: #eff6ff;
+    --color-info-border: #bfdbfe;
+    --color-info-text: #1d4ed8;
+    --color-info-solid: #2563eb;
+    --color-code-canvas: #f6f8fa;
+    --color-code-border: #d0d7de;
+    --color-code-comment: #6e7781;
+    --color-code-keyword: #cf222e;
+    --color-code-string: #0a3069;
+    --color-code-number: #0550ae;
+    --color-code-function: #8250df;
+    --color-thumb: #0003;
+    --color-track: transparent;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-theme="dark"] {
+      color-scheme: dark;
+      --color-canvas: #1c1c1e;
+      --color-elevated: #2c2c2e;
+      --color-sunken: #141416;
+      --color-overlay: #1e1e20eb;
+      --color-sidebar: #1c1c1ef2;
+      --color-surface-1: #2c2c2e;
+      --color-surface-2: #3a3a3c;
+      --color-surface-3: #48484a;
+      --color-hover: #ffffff0f;
+      --color-active: #ffffff1a;
+      --color-selected: #0a84ff29;
+      --color-primary: #ffffffeb;
+      --color-secondary: #ffffff8c;
+      --color-tertiary: #ffffff5c;
+      --color-disabled: #ffffff3d;
+      --color-inverse: #000000e0;
+      --color-on-accent: #fff;
+      --color-code: #2dd4bf;
+      --color-line: #ffffff1f;
+      --color-line-strong: #ffffff38;
+      --color-line-subtle: #ffffff0f;
+      --color-accent: #0a84ff;
+      --color-accent-hover: #0071e3;
+      --color-accent-pressed: #005bb5;
+      --color-accent-tint: #0a84ff1f;
+      --color-accent-tint-hover: #0a84ff33;
+      --color-focus-ring: #0a84ffe6;
+      --shadow-xs: 0 1px 2px 0 #0000004d;
+      --shadow-sm: 0 1px 3px 0 #0006, 0 1px 2px -1px #0000004d;
+      --shadow-md: 0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d;
+      --shadow-lg: 0 10px 15px -3px #00000080, 0 4px 6px -4px #0000004d;
+      --shadow-xl: 0 20px 25px -5px #00000080, 0 8px 10px -6px #0000004d;
+      --shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
+      --shadow-sheet: 0 -4px 16px 0 #0006;
+      --shadow-inset: inset 0 1px 2px 0 #0000004d;
+      --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
+      --color-success-bg: #16a34a1f;
+      --color-success-border: #16a34a4d;
+      --color-success-text: #4ade80;
+      --color-success-solid: #22c55e;
+      --color-warning-bg: #d977061f;
+      --color-warning-border: #d977064d;
+      --color-warning-text: #fbbf24;
+      --color-warning-solid: #f59e0b;
+      --color-error-bg: #dc26261f;
+      --color-error-border: #dc26264d;
+      --color-error-text: #f87171;
+      --color-error-solid: #ef4444;
+      --color-info-bg: #2563eb1f;
+      --color-info-border: #2563eb4d;
+      --color-info-text: #60a5fa;
+      --color-info-solid: #3b82f6;
+      --color-code-canvas: #161b22;
+      --color-code-border: #ffffff1a;
+      --color-code-comment: #8b949e;
+      --color-code-keyword: #ff7b72;
+      --color-code-string: #a5d6ff;
+      --color-code-number: #79c0ff;
+      --color-code-function: #d2a8ff;
+      --color-thumb: #fff3;
+      --color-track: transparent;
+    }
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+    --color-canvas: #1c1c1e;
+    --color-elevated: #2c2c2e;
+    --color-sunken: #141416;
+    --color-overlay: #1e1e20eb;
+    --color-sidebar: #1c1c1ef2;
+    --color-surface-1: #2c2c2e;
+    --color-surface-2: #3a3a3c;
+    --color-surface-3: #48484a;
+    --color-hover: #ffffff0f;
+    --color-active: #ffffff1a;
+    --color-selected: #0a84ff29;
+    --color-primary: #ffffffeb;
+    --color-secondary: #ffffff8c;
+    --color-tertiary: #ffffff5c;
+    --color-disabled: #ffffff3d;
+    --color-inverse: #000000e0;
+    --color-on-accent: #fff;
+    --color-code: #2dd4bf;
+    --color-line: #ffffff1f;
+    --color-line-strong: #ffffff38;
+    --color-line-subtle: #ffffff0f;
+    --color-accent: #0a84ff;
+    --color-accent-hover: #0071e3;
+    --color-accent-pressed: #005bb5;
+    --color-accent-tint: #0a84ff1f;
+    --color-accent-tint-hover: #0a84ff33;
+    --color-focus-ring: #0a84ffe6;
+    --shadow-xs: 0 1px 2px 0 #0000004d;
+    --shadow-sm: 0 1px 3px 0 #0006, 0 1px 2px -1px #0000004d;
+    --shadow-md: 0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d;
+    --shadow-lg: 0 10px 15px -3px #00000080, 0 4px 6px -4px #0000004d;
+    --shadow-xl: 0 20px 25px -5px #00000080, 0 8px 10px -6px #0000004d;
+    --shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
+    --shadow-sheet: 0 -4px 16px 0 #0006;
+    --shadow-inset: inset 0 1px 2px 0 #0000004d;
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
+    --color-success-bg: #16a34a1f;
+    --color-success-border: #16a34a4d;
+    --color-success-text: #4ade80;
+    --color-success-solid: #22c55e;
+    --color-warning-bg: #d977061f;
+    --color-warning-border: #d977064d;
+    --color-warning-text: #fbbf24;
+    --color-warning-solid: #f59e0b;
+    --color-error-bg: #dc26261f;
+    --color-error-border: #dc26264d;
+    --color-error-text: #f87171;
+    --color-error-solid: #ef4444;
+    --color-info-bg: #2563eb1f;
+    --color-info-border: #2563eb4d;
+    --color-info-text: #60a5fa;
+    --color-info-solid: #3b82f6;
+    --color-code-canvas: #161b22;
+    --color-code-border: #ffffff1a;
+    --color-code-comment: #8b949e;
+    --color-code-keyword: #ff7b72;
+    --color-code-string: #a5d6ff;
+    --color-code-number: #79c0ff;
+    --color-code-function: #d2a8ff;
+    --color-thumb: #fff3;
+    --color-track: transparent;
+  }
+}
+
+@layer base, components, utilities;

package/dist/switch/index.d.ts

@@ -0,0 +1,3 @@
+import { Switch, SwitchProps, styles } from "./switch.js";
+import { SwitchRoot, SwitchRootProps, SwitchThumb, SwitchThumbProps } from "./parts.js";
+export { Switch, type SwitchProps, SwitchRoot, type SwitchRootProps, styles as SwitchStyles, SwitchThumb, type SwitchThumbProps };

package/dist/switch/index.js

@@ -0,0 +1,4 @@
+import switch_module_default from "./switch.module.js";
+import { Switch } from "./switch.js";
+import { SwitchRoot, SwitchThumb } from "./parts.js";
+export { Switch, SwitchRoot, switch_module_default as SwitchStyles, SwitchThumb };

package/dist/switch/parts.d.ts

@@ -0,0 +1,18 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { Switch } from "@base-ui/react/switch";
+
+//#region src/switch/parts.d.ts
+type BaseRootProps = ComponentPropsWithoutRef<typeof Switch.Root>;
+type BaseThumbProps = ComponentPropsWithoutRef<typeof Switch.Thumb>;
+interface SwitchRootProps extends Omit<BaseRootProps, "className"> {
+  className?: string;
+}
+interface SwitchThumbProps extends Omit<BaseThumbProps, "className"> {
+  className?: string;
+}
+declare const SwitchRoot: react.ForwardRefExoticComponent<SwitchRootProps & react.RefAttributes<HTMLElement>>;
+declare const SwitchThumb: react.ForwardRefExoticComponent<SwitchThumbProps & react.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { SwitchRoot, SwitchRootProps, SwitchThumb, SwitchThumbProps };
+//# sourceMappingURL=parts.d.ts.map

package/dist/switch/parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/switch/parts.tsx"],"mappings":";;;;;KAqBK,aAAA,GAAgB,wBAAA,QAAgC,MAAA,CAAW,IAAA;AAAA,KAC3D,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,UAEhD,eAAA,SAAwB,IAAA,CAAK,aAAA;EAC5C,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,cAGW,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,cAOV,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA"}

package/dist/switch/parts.js

@@ -0,0 +1,39 @@
+import switch_module_default from "./switch.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/switch/parts.tsx
+/**
+* Styled primitives for Switch.
+*
+* @example
+* ```tsx
+* import { Switch } from '@base-ui/react/switch';
+* import { SwitchRoot, SwitchThumb } from '@brijbyte/agentic-ui/switch';
+*
+* <label htmlFor="sw">
+*   <SwitchRoot id="sw" onCheckedChange={...}>
+*     <SwitchThumb />
+*   </SwitchRoot>
+*   Dark mode
+* </label>
+* ```
+*/
+const SwitchRoot = forwardRef(function SwitchRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		ref,
+		className: `${switch_module_default["thumb-track"]} ${className ?? ""}`,
+		...props
+	});
+});
+const SwitchThumb = forwardRef(function SwitchThumb({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Switch.Thumb, {
+		ref,
+		className: `${switch_module_default.thumb} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { SwitchRoot, SwitchThumb };
+
+//# sourceMappingURL=parts.js.map

package/dist/switch/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseSwitch","styles"],"sources":["../../src/switch/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Switch.\n *\n * @example\n * ```tsx\n * import { Switch } from '@base-ui/react/switch';\n * import { SwitchRoot, SwitchThumb } from '@brijbyte/agentic-ui/switch';\n *\n * <label htmlFor=\"sw\">\n *   <SwitchRoot id=\"sw\" onCheckedChange={...}>\n *     <SwitchThumb />\n *   </SwitchRoot>\n *   Dark mode\n * </label>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport styles from \"./switch.module.css\";\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof BaseSwitch.Root>;\ntype BaseThumbProps = ComponentPropsWithoutRef<typeof BaseSwitch.Thumb>;\n\nexport interface SwitchRootProps extends Omit<BaseRootProps, \"className\"> {\n  className?: string;\n}\nexport interface SwitchThumbProps extends Omit<BaseThumbProps, \"className\"> {\n  className?: string;\n}\n\nexport const SwitchRoot = forwardRef<ComponentRef<typeof BaseSwitch.Root>, SwitchRootProps>(function SwitchRoot(\n  { className, ...props },\n  ref,\n) {\n  return <BaseSwitch.Root ref={ref} className={`${styles[\"thumb-track\"]} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const SwitchThumb = forwardRef<ComponentRef<typeof BaseSwitch.Thumb>, SwitchThumbProps>(function SwitchThumb(\n  { className, ...props },\n  ref,\n) {\n  return <BaseSwitch.Thumb ref={ref} className={`${styles.thumb} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,aAAa,WAAkE,SAAS,WACnG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,OAAW,MAAZ;EAAsB;EAAK,WAAW,GAAGC,sBAAO,eAAe,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACzG;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG"}

package/dist/switch/switch.css

@@ -0,0 +1,64 @@
+@layer components {
+  .root_3hDtBa {
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+  }
+
+  .root_3hDtBa[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
+  }
+
+  .thumb-track_3hDtBa {
+    border-radius: var(--radius-full);
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-line);
+    width: 36px;
+    height: 20px;
+    transition: background-color var(--duration-normal) var(--easing-standard),
+      border-color var(--duration-normal) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard);
+    outline: none;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .thumb-track_3hDtBa:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  .thumb-track_3hDtBa[data-checked] {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .thumb-track_3hDtBa[data-checked]:hover {
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+  }
+
+  .thumb_3hDtBa {
+    border-radius: var(--radius-full);
+    width: 14px;
+    height: 14px;
+    box-shadow: var(--shadow-xs);
+    transition: transform var(--duration-normal) var(--easing-spring);
+    background-color: #fff;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+  }
+
+  .thumb-track_3hDtBa[data-checked] .thumb_3hDtBa {
+    transform: translateX(16px);
+  }
+
+  .label_3hDtBa {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-primary);
+  }
+}

package/dist/switch/switch.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./switch.module.css";
+
+//#region src/switch/switch.d.ts
+interface SwitchProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */
+  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
+  children?: ReactNode;
+  id?: string;
+  className?: string;
+}
+declare function Switch({
+  children,
+  id,
+  className,
+  onCheckedChange,
+  ...props
+}: SwitchProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Switch, SwitchProps, styles };
+//# sourceMappingURL=switch.d.ts.map

package/dist/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","names":[],"sources":["../../src/switch/switch.tsx"],"mappings":";;;;;UAKiB,WAAA;EACf,OAAA;EACA,cAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,KAAA;EALA;EAOA,eAAA,IAAmB,OAAA,WAAkB,YAAA;EACrC,QAAA,GAAW,SAAA;EACX,EAAA;EACA,SAAA;AAAA;AAAA,iBAGc,MAAA,CAAA;EAAS,QAAA;EAAU,EAAA;EAAI,SAAA;EAAW,eAAA;EAAA,GAAoB;AAAA,GAAS,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/switch/switch.js

@@ -0,0 +1,26 @@
+import switch_module_default from "./switch.module.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/switch/switch.tsx
+function Switch$1({ children, id, className, onCheckedChange, ...props }) {
+	const switchId = id ?? useId();
+	return /* @__PURE__ */ jsxs("label", {
+		className: `${switch_module_default.root} ${className ?? ""}`,
+		htmlFor: switchId,
+		children: [/* @__PURE__ */ jsx(Switch.Root, {
+			id: switchId,
+			className: switch_module_default["thumb-track"],
+			onCheckedChange,
+			...props,
+			children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.thumb })
+		}), children && /* @__PURE__ */ jsx("span", {
+			className: switch_module_default.label,
+			children
+		})]
+	});
+}
+//#endregion
+export { Switch$1 as Switch };
+
+//# sourceMappingURL=switch.js.map