@usetheo/ui 0.16.0 → 0.17.0

package/dist/components/primitives/combobox/combobox.d.ts

@@ -0,0 +1,53 @@
+import { Command as CommandPrimitive } from "cmdk";
+import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from "react";
+interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Selected value (controlled). */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Listbox visibility (controlled). */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Set false to disable cmdk's internal filter (async mode — consumer filters). */
+    shouldFilter?: boolean;
+    children: ReactNode;
+}
+type ComboboxInputProps = ComponentPropsWithoutRef<typeof CommandPrimitive.Input>;
+interface ComboboxContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Async fetch in flight: shows the loading slot and hides items/empty. */
+    loading?: boolean;
+}
+type ComboboxItemProps = ComponentPropsWithoutRef<typeof CommandPrimitive.Item>;
+declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Input: import("react").ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+        ref?: React.Ref<HTMLInputElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+        value?: string;
+        onValueChange?: (search: string) => void;
+    } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    Content: import("react").ForwardRefExoticComponent<ComboboxContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+        disabled?: boolean;
+        onSelect?: (value: string) => void;
+        value?: string;
+        keywords?: string[];
+        forceMount?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Empty: import("react").ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Combobox };
+export type { ComboboxProps, ComboboxContentProps, ComboboxInputProps, ComboboxItemProps };

package/dist/components/primitives/combobox/index.d.ts

@@ -0,0 +1 @@
+export { Combobox, type ComboboxContentProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxProps, } from "./combobox.js";

package/dist/components/primitives/slider/index.d.ts

@@ -0,0 +1 @@
+export { Slider, type SliderMark, type SliderProps } from "./slider.js";

package/dist/components/primitives/slider/slider.d.ts

@@ -0,0 +1,24 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+/**
+ * Slider — range input primitive over Radix Slider.
+ *
+ * Single thumb: `defaultValue={[5]}`. Range: `defaultValue={[20, 80]}` (one
+ * thumb per array entry). `marks` renders labelled, clickable points over the
+ * track (Mantine-shaped `{value, label?}`); clicking a mark sets the value in
+ * single mode and is a no-op in range mode (which thumb to move is ambiguous).
+ *
+ *   <Slider aria-label="Top K" min={1} max={100} defaultValue={[5]}
+ *           marks={[{ value: 1 }, { value: 50 }, { value: 100 }]} />
+ */
+interface SliderMark {
+    value: number;
+    label?: ReactNode;
+}
+interface SliderProps extends ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+    /** Labelled, clickable points rendered over the track. Values outside [min, max] are skipped. */
+    marks?: SliderMark[];
+}
+declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { Slider };
+export type { SliderMark, SliderProps };

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { cn } from "./lib/cn.js";
 export { Button, buttonVariants, type ButtonProps } from "./components/primitives/button/index.js";
 export { Badge, badgeVariants, type BadgeProps } from "./components/primitives/badge/index.js";
 export { Breadcrumb, type BreadcrumbLinkProps, } from "./components/primitives/breadcrumb/index.js";
+export { Combobox, type ComboboxContentProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxProps, } from "./components/primitives/combobox/index.js";
+export { Slider, type SliderMark, type SliderProps, } from "./components/primitives/slider/index.js";
 export { UpdateBanner, type UpdateBannerProps, } from "./components/primitives/update-banner/index.js";
 export { Card } from "./components/primitives/card/index.js";
 export { Input, type InputProps } from "./components/primitives/input/index.js";

package/dist/index.js

@@ -2,9 +2,11 @@ import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { forwardRef, createContext, useId, Children, isValidElement, cloneElement, Fragment as Fragment$1, useContext, useEffect, useState, useRef, useCallback, createElement, useMemo } from 'react';
+import { forwardRef, createContext, useState, useRef, useId, useCallback, useEffect, useMemo, Children, isValidElement, cloneElement, Fragment as Fragment$1, useContext, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ArrowUpCircle, X, AlertCircle, ChevronDown, ChevronUp, Check, Minus, Circle, ChevronRight, ChevronsUpDown, Copy, TrendingDown, TrendingUp, ArrowUpRight, Loader2, TriangleAlert, CheckCircle2, Info, ChevronsLeft, ChevronLeft, ChevronsRight, Search, Filter, GitCommit, GitBranch, Activity, Plus, Lock, EyeOff, Eye, Trash2, GitPullRequest, Server, ExternalLink, Globe, ShieldCheck, ShieldX, Clock, RotateCcw, ArrowDownLeft, MoreHorizontal } from 'lucide-react';
+import { Loader2, Check, ArrowUpCircle, X, AlertCircle, ChevronDown, ChevronUp, Minus, Circle, ChevronRight, ChevronsUpDown, Copy, TrendingDown, TrendingUp, ArrowUpRight, TriangleAlert, CheckCircle2, Info, ChevronsLeft, ChevronLeft, ChevronsRight, Search, Filter, GitCommit, GitBranch, Activity, Plus, Lock, EyeOff, Eye, Trash2, GitPullRequest, Server, ExternalLink, Globe, ShieldCheck, ShieldX, Clock, RotateCcw, ArrowDownLeft, MoreHorizontal } from 'lucide-react';
+import { Command, useCommandState } from 'cmdk';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -17,7 +19,6 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Command } from 'cmdk';
 
 // src/lib/cn.ts
 var twMerge = extendTailwindMerge({
@@ -286,6 +287,334 @@ var Breadcrumb = Object.assign(Root, {
   Separator,
   Ellipsis
 });
+var inputVariants = cva(
+  [
+    "flex w-full rounded-md border border-input bg-card",
+    "text-foreground placeholder:text-muted-foreground",
+    "transition-[box-shadow,border-color] duration-base ease-out-soft",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "focus-visible:border-primary",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "file:border-0 file:bg-transparent file:font-medium file:text-body-sm"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 py-1 text-body-sm",
+        // md: density-tunable via CSS var. Comfortable (default) = 36px.
+        md: "h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm",
+        lg: "h-11 px-4 py-2.5 text-body-md"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Input = forwardRef(
+  ({ className, type = "text", size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-slot": "input",
+      "data-size": size,
+      ref,
+      type,
+      className: cn(inputVariants({ size }), className),
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+var ComboboxContext = createContext(null);
+function composeRefs(local, forwarded) {
+  return (node) => {
+    local.current = node;
+    if (typeof forwarded === "function") forwarded(node);
+    else if (forwarded) forwarded.current = node;
+  };
+}
+function useComboboxContext(sub2) {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) throw new Error(`<Combobox.${sub2}> must be used inside <Combobox>`);
+  return ctx;
+}
+var Root2 = forwardRef(
+  ({
+    className,
+    children,
+    value,
+    onValueChange,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    shouldFilter = true,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const open = openProp ?? uncontrolledOpen;
+    const rootRef = useRef(null);
+    const listId = useId();
+    const setOpen = useCallback(
+      (next) => {
+        setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [onOpenChange]
+    );
+    const select = useCallback(
+      (next) => {
+        onValueChange?.(next);
+        setOpen(false);
+      },
+      [onValueChange, setOpen]
+    );
+    useEffect(() => {
+      if (!open) return;
+      const onMouseDown = (event) => {
+        if (rootRef.current && !rootRef.current.contains(event.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onMouseDown);
+      return () => document.removeEventListener("mousedown", onMouseDown);
+    }, [open, setOpen]);
+    return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: { open, setOpen, value, select, listId }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "combobox",
+        ref: composeRefs(rootRef, ref),
+        className: cn("relative w-full", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Command, { label: ariaLabel, shouldFilter, children })
+      }
+    ) });
+  }
+);
+Root2.displayName = "Combobox";
+var Input2 = forwardRef(
+  ({ className, onFocus, onKeyDown, onValueChange, ...props }, ref) => {
+    const { open, setOpen, listId } = useComboboxContext("Input");
+    const innerRef = useRef(null);
+    useEffect(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      el.setAttribute("aria-expanded", String(open));
+      if (open) el.setAttribute("aria-controls", listId);
+      else el.removeAttribute("aria-controls");
+    });
+    return /* @__PURE__ */ jsx(
+      Command.Input,
+      {
+        "data-slot": "combobox-input",
+        ref: composeRefs(innerRef, ref),
+        className: cn(inputVariants({ size: "md" }), className),
+        onFocus: (event) => {
+          setOpen(true);
+          onFocus?.(event);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Escape") setOpen(false);
+          onKeyDown?.(event);
+        },
+        onValueChange: (search) => {
+          if (!open) setOpen(true);
+          onValueChange?.(search);
+        },
+        ...props
+      }
+    );
+  }
+);
+Input2.displayName = "Combobox.Input";
+var Content = forwardRef(
+  ({ className, children, loading, ...props }, ref) => {
+    const { open, listId } = useComboboxContext("Content");
+    const resultCount = useCommandState((state) => state.filtered.count);
+    const listRef = useRef(null);
+    useEffect(() => {
+      const el = listRef.current;
+      if (!el) return;
+      el.setAttribute("id", listId);
+      if (resultCount === 0) {
+        el.setAttribute("role", "presentation");
+        el.removeAttribute("aria-label");
+      } else {
+        el.setAttribute("role", "listbox");
+        if (!el.getAttribute("aria-label")) el.setAttribute("aria-label", "Suggestions");
+      }
+    });
+    if (!open) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "combobox-content",
+        ref,
+        className: cn(
+          "absolute top-full z-50 mt-1 w-full rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md",
+          className
+        ),
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "combobox-loading",
+            id: listId,
+            "aria-busy": "true",
+            className: "flex items-center justify-center gap-2 px-3 py-6 text-body-sm text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-4 animate-spin" }),
+              "Loading\u2026"
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(Command.List, { ref: listRef, className: "max-h-64 overflow-y-auto", children })
+      }
+    );
+  }
+);
+Content.displayName = "Combobox.Content";
+var Item2 = forwardRef(
+  ({ className, children, value, onSelect, ...props }, ref) => {
+    const ctx = useComboboxContext("Item");
+    const selected = value !== void 0 && ctx.value === value;
+    return /* @__PURE__ */ jsxs(
+      Command.Item,
+      {
+        "data-slot": "combobox-item",
+        "data-selected-value": selected ? "true" : void 0,
+        ref,
+        value,
+        onSelect: (selectedValue) => {
+          ctx.select(selectedValue);
+          onSelect?.(selectedValue);
+        },
+        className: cn(
+          "flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-body-sm",
+          "data-[selected=true]:bg-accent/10 data-[selected=true]:text-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            Check,
+            {
+              "aria-hidden": true,
+              className: cn("ml-auto size-4", selected ? "opacity-100" : "opacity-0")
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Item2.displayName = "Combobox.Item";
+var Empty = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Empty,
+  {
+    "data-slot": "combobox-empty",
+    ref,
+    className: cn("px-3 py-6 text-center text-body-sm text-muted-foreground", className),
+    ...props
+  }
+));
+Empty.displayName = "Combobox.Empty";
+var Combobox = Object.assign(Root2, { Input: Input2, Content, Item: Item2, Empty });
+var Slider = forwardRef(
+  ({
+    className,
+    defaultValue,
+    value,
+    min = 0,
+    max = 100,
+    marks,
+    disabled,
+    onValueChange,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    ...props
+  }, ref) => {
+    const clamp = (entries) => entries?.map((entry) => Math.min(Math.max(entry, min), max));
+    const [internalValue, setInternalValue] = useState(clamp(defaultValue));
+    const clampedValue = clamp(value) ?? internalValue;
+    const thumbCount = useMemo(() => {
+      if (Array.isArray(value)) return value.length;
+      if (Array.isArray(defaultValue)) return defaultValue.length;
+      return 1;
+    }, [value, defaultValue]);
+    const span = max - min || 1;
+    const visibleMarks = (marks ?? []).filter((mark) => mark.value >= min && mark.value <= max);
+    const isRange = thumbCount > 1;
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "slider", className: cn("relative w-full", visibleMarks.length > 0 && "pb-5"), children: [
+      /* @__PURE__ */ jsxs(
+        SliderPrimitive.Root,
+        {
+          ref,
+          "data-slot": "slider-root",
+          value: clampedValue,
+          min,
+          max,
+          disabled,
+          onValueChange: (next) => {
+            if (value === void 0) setInternalValue(next);
+            onValueChange?.(next);
+          },
+          className: cn(
+            "relative flex w-full touch-none select-none items-center",
+            "data-[disabled]:opacity-50",
+            "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              SliderPrimitive.Track,
+              {
+                "data-slot": "slider-track",
+                className: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5",
+                children: /* @__PURE__ */ jsx(
+                  SliderPrimitive.Range,
+                  {
+                    "data-slot": "slider-range",
+                    className: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                  }
+                )
+              }
+            ),
+            Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx(
+              SliderPrimitive.Thumb,
+              {
+                "aria-label": isRange && ariaLabel ? `${ariaLabel} (${index + 1} of ${thumbCount})` : ariaLabel,
+                "aria-labelledby": ariaLabelledby,
+                "data-slot": "slider-thumb",
+                className: "block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm transition-[box-shadow] hover:ring-4 hover:ring-ring/50 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+              },
+              index
+            ))
+          ]
+        }
+      ),
+      visibleMarks.map((mark) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-slot": "slider-mark",
+          disabled,
+          tabIndex: -1,
+          "aria-hidden": "true",
+          style: { left: `${(mark.value - min) / span * 100}%` },
+          className: "-translate-x-1/2 absolute top-4 cursor-pointer text-body-sm text-muted-foreground disabled:cursor-default",
+          onClick: () => {
+            if (disabled || isRange) return;
+            if (value === void 0) setInternalValue([mark.value]);
+            onValueChange?.([mark.value]);
+          },
+          children: mark.label ?? mark.value
+        },
+        mark.value
+      ))
+    ] });
+  }
+);
+Slider.displayName = "Slider";
 var UpdateBanner = forwardRef(
   ({
     currentVersion,
@@ -361,7 +690,7 @@ var UpdateBanner = forwardRef(
 UpdateBanner.displayName = "UpdateBanner";
 var CardContext = createContext({ size: "md" });
 var useCardSize = () => useContext(CardContext).size;
-var Root2 = forwardRef(
+var Root4 = forwardRef(
   ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(CardContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -376,7 +705,7 @@ var Root2 = forwardRef(
     }
   ) })
 );
-Root2.displayName = "Card";
+Root4.displayName = "Card";
 var headerPadBySize = {
   sm: "gap-1 p-3 pb-1.5",
   md: "gap-1.5 p-5 pb-2.5",
@@ -478,49 +807,13 @@ var Footer = forwardRef(
   }
 );
 Footer.displayName = "Card.Footer";
-var Card = /* @__PURE__ */ Object.assign(Root2, {
+var Card = /* @__PURE__ */ Object.assign(Root4, {
   Header,
   Title,
   Description,
   Body,
   Footer
 });
-var inputVariants = cva(
-  [
-    "flex w-full rounded-md border border-input bg-card",
-    "text-foreground placeholder:text-muted-foreground",
-    "transition-[box-shadow,border-color] duration-base ease-out-soft",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    "focus-visible:border-primary",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "file:border-0 file:bg-transparent file:font-medium file:text-body-sm"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-8 px-2.5 py-1 text-body-sm",
-        // md: density-tunable via CSS var. Comfortable (default) = 36px.
-        md: "h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm",
-        lg: "h-11 px-4 py-2.5 text-body-md"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var Input = forwardRef(
-  ({ className, type = "text", size, ...props }, ref) => /* @__PURE__ */ jsx(
-    "input",
-    {
-      "data-slot": "input",
-      "data-size": size,
-      ref,
-      type,
-      className: cn(inputVariants({ size }), className),
-      ...props
-    }
-  )
-);
-Input.displayName = "Input";
 var Overlay2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
@@ -536,7 +829,7 @@ var Overlay2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   }
 ));
 Overlay2.displayName = "Dialog.Overlay";
-var Content2 = forwardRef(
+var Content3 = forwardRef(
   ({ className, children, hideCloseButton, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx(Overlay2, {}),
     /* @__PURE__ */ jsxs(
@@ -575,7 +868,7 @@ var Content2 = forwardRef(
     )
   ] })
 );
-Content2.displayName = "Dialog.Content";
+Content3.displayName = "Dialog.Content";
 var Header2 = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 p-6 pb-3 text-left", className), ...props });
 Header2.displayName = "Dialog.Header";
 var Body2 = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("px-6 pb-6 text-body-md text-muted-foreground", className), ...props });
@@ -613,7 +906,7 @@ Description3.displayName = "Dialog.Description";
 var Dialog = /* @__PURE__ */ Object.assign(DialogPrimitive.Root, {
   Trigger: DialogPrimitive.Trigger,
   Close: DialogPrimitive.Close,
-  Content: Content2,
+  Content: Content3,
   Overlay: Overlay2,
   Header: Header2,
   Body: Body2,
@@ -655,7 +948,7 @@ var Trigger3 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   }
 ));
 Trigger3.displayName = "Tabs.Trigger";
-var Content4 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Content5 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     "data-slot": "tabs-content",
@@ -667,16 +960,16 @@ var Content4 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     ...props
   }
 ));
-Content4.displayName = "Tabs.Content";
+Content5.displayName = "Tabs.Content";
 var Tabs = /* @__PURE__ */ Object.assign(TabsPrimitive.Root, {
   List: List3,
   Trigger: Trigger3,
-  Content: Content4
+  Content: Content5
 });
 var Provider2 = TooltipPrimitive.Provider;
-var Root6 = TooltipPrimitive.Root;
+var Root8 = TooltipPrimitive.Root;
 var Trigger5 = TooltipPrimitive.Trigger;
-var Content6 = forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var Content7 = forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     "data-slot": "tooltip-content",
@@ -694,7 +987,7 @@ var Content6 = forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @
     ...props
   }
 ) }));
-Content6.displayName = "Tooltip.Content";
+Content7.displayName = "Tooltip.Content";
 var Tooltip = ({
   label,
   side = "top",
@@ -702,15 +995,15 @@ var Tooltip = ({
   delayDuration = 200,
   children,
   ...rootProps
-}) => /* @__PURE__ */ jsx(Provider2, { delayDuration, children: /* @__PURE__ */ jsxs(Root6, { ...rootProps, children: [
+}) => /* @__PURE__ */ jsx(Provider2, { delayDuration, children: /* @__PURE__ */ jsxs(Root8, { ...rootProps, children: [
   /* @__PURE__ */ jsx(Trigger5, { asChild: true, children }),
-  /* @__PURE__ */ jsx(Content6, { side, align, children: label })
+  /* @__PURE__ */ jsx(Content7, { side, align, children: label })
 ] }) });
 var TooltipWithStatics = Tooltip;
 TooltipWithStatics.Provider = Provider2;
-TooltipWithStatics.Root = Root6;
+TooltipWithStatics.Root = Root8;
 TooltipWithStatics.Trigger = Trigger5;
-TooltipWithStatics.Content = Content6;
+TooltipWithStatics.Content = Content7;
 var ScrollAreaRoot = forwardRef(
   ({ className, children, orientation = "vertical", size = "thin", type = "hover", ...props }, ref) => /* @__PURE__ */ jsxs(
     ScrollAreaPrimitive.Root,
@@ -1560,7 +1853,7 @@ var Textarea = forwardRef(
   )
 );
 Textarea.displayName = "Textarea";
-var Root16 = forwardRef(
+var Root18 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "aside",
     {
@@ -1574,7 +1867,7 @@ var Root16 = forwardRef(
     }
   )
 );
-Root16.displayName = "Sidebar";
+Root18.displayName = "Sidebar";
 var Header3 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1603,7 +1896,7 @@ var Section = forwardRef(
   )
 );
 Section.displayName = "Sidebar.Section";
-var Item4 = forwardRef(
+var Item5 = forwardRef(
   ({ className, icon: Icon2, active, count, as = "button", href, children, ...props }, ref) => {
     const classes = cn(
       "group flex w-full items-center gap-3 rounded-lg px-2 py-2",
@@ -1663,7 +1956,7 @@ var Item4 = forwardRef(
     );
   }
 );
-Item4.displayName = "Sidebar.Item";
+Item5.displayName = "Sidebar.Item";
 var Footer3 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1676,13 +1969,13 @@ var Footer3 = forwardRef(
   )
 );
 Footer3.displayName = "Sidebar.Footer";
-var Sidebar = /* @__PURE__ */ Object.assign(Root16, {
+var Sidebar = /* @__PURE__ */ Object.assign(Root18, {
   Header: Header3,
   Section,
-  Item: Item4,
+  Item: Item5,
   Footer: Footer3
 });
-var Root17 = forwardRef(
+var Root19 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "header",
     {
@@ -1696,7 +1989,7 @@ var Root17 = forwardRef(
     }
   )
 );
-Root17.displayName = "TopNav";
+Root19.displayName = "TopNav";
 var Left = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1831,7 +2124,7 @@ var ModeSwitcher = forwardRef(
   }
 );
 ModeSwitcher.displayName = "TopNav.ModeSwitcher";
-var TopNav = /* @__PURE__ */ Object.assign(Root17, {
+var TopNav = /* @__PURE__ */ Object.assign(Root19, {
   Left,
   Center,
   Right,
@@ -1871,7 +2164,7 @@ var sheetVariants = cva(
     defaultVariants: { side: "right" }
   }
 );
-var Content9 = forwardRef(
+var Content10 = forwardRef(
   ({ className, children, hideCloseButton, side = "right", ...props }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx(Overlay4, {}),
     /* @__PURE__ */ jsxs(
@@ -1903,7 +2196,7 @@ var Content9 = forwardRef(
     )
   ] })
 );
-Content9.displayName = "Sheet.Content";
+Content10.displayName = "Sheet.Content";
 var Header4 = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -1948,7 +2241,7 @@ Description6.displayName = "Sheet.Description";
 var Sheet = DialogPrimitive.Root;
 Sheet.Trigger = DialogPrimitive.Trigger;
 Sheet.Close = DialogPrimitive.Close;
-Sheet.Content = Content9;
+Sheet.Content = Content10;
 Sheet.Overlay = Overlay4;
 Sheet.Header = Header4;
 Sheet.Body = Body3;
@@ -2127,7 +2420,7 @@ var alignClass = {
   center: "text-center",
   right: "text-right"
 };
-var Root19 = forwardRef(
+var Root21 = forwardRef(
   ({ className, density = "default", children, ...props }, ref) => /* @__PURE__ */ jsx(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(
     "table",
     {
@@ -2139,7 +2432,7 @@ var Root19 = forwardRef(
     }
   ) })
 );
-Root19.displayName = "Table";
+Root21.displayName = "Table";
 var Header5 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "thead",
@@ -2259,7 +2552,7 @@ var HeaderCell = forwardRef(
   }
 );
 HeaderCell.displayName = "Table.HeaderCell";
-var Table = Object.assign(Root19, { Header: Header5, Body: Body4, Row, Cell, HeaderCell });
+var Table = Object.assign(Root21, { Header: Header5, Body: Body4, Row, Cell, HeaderCell });
 
 // src/lib/env.ts
 function readNodeEnv() {
@@ -2636,7 +2929,7 @@ var StatTile = forwardRef(
   }
 );
 StatTile.displayName = "StatTile";
-var Root20 = forwardRef(
+var Root22 = forwardRef(
   ({ className, title = "Danger Zone", children, ...props }, ref) => /* @__PURE__ */ jsxs(
     "section",
     {
@@ -2652,7 +2945,7 @@ var Root20 = forwardRef(
     }
   )
 );
-Root20.displayName = "DangerZone";
+Root22.displayName = "DangerZone";
 var Action2 = forwardRef(
   ({ className, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
@@ -2675,7 +2968,7 @@ var Action2 = forwardRef(
   )
 );
 Action2.displayName = "DangerZone.Action";
-var DangerZone = Object.assign(Root20, { Action: Action2 });
+var DangerZone = Object.assign(Root22, { Action: Action2 });
 var ConfirmDialog = forwardRef(
   ({
     open,
@@ -3187,7 +3480,7 @@ var Portal6 = DropdownMenuPrimitive.Portal;
 var Group3 = DropdownMenuPrimitive.Group;
 var Sub2 = DropdownMenuPrimitive.Sub;
 var RadioGroup3 = DropdownMenuPrimitive.RadioGroup;
-var Content11 = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var Content12 = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     "data-slot": "dropdown-menu-content",
@@ -3203,8 +3496,8 @@ var Content11 = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /*
     ...props
   }
 ) }));
-Content11.displayName = "DropdownMenu.Content";
-var Item6 = forwardRef(
+Content12.displayName = "DropdownMenu.Content";
+var Item7 = forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Item,
     {
@@ -3223,7 +3516,7 @@ var Item6 = forwardRef(
     }
   )
 );
-Item6.displayName = "DropdownMenu.Item";
+Item7.displayName = "DropdownMenu.Item";
 var CheckboxItem2 = forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
@@ -3338,8 +3631,8 @@ SubContent2.displayName = "DropdownMenu.SubContent";
 var DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {
   Trigger: Trigger9,
   Portal: Portal6,
-  Content: Content11,
-  Item: Item6,
+  Content: Content12,
+  Item: Item7,
   CheckboxItem: CheckboxItem2,
   RadioItem: RadioItem2,
   Label: Label4,
@@ -4788,4 +5081,4 @@ function CommandPalette({
   ] }) });
 }
 
-export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, isNearBottom, sheetVariants, useStickToBottom, useToast };
+export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, isNearBottom, sheetVariants, useStickToBottom, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "type": "module",
   "license": "Apache-2.0",
   "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",
@@ -34,6 +34,7 @@
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.4.3",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.3",