@usetheo/ui 0.15.0 → 0.17.0

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

@@ -0,0 +1,15 @@
+import type { AnchorHTMLAttributes, HTMLAttributes } from "react";
+interface BreadcrumbLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Render the consumer's element (e.g. a router <Link>) instead of a native anchor. */
+    asChild?: boolean;
+}
+declare const Breadcrumb: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
+    List: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLOListElement> & import("react").RefAttributes<HTMLOListElement>>;
+    Item: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+    Link: import("react").ForwardRefExoticComponent<BreadcrumbLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+    Page: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Separator: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+    Ellipsis: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export { Breadcrumb };
+export type { BreadcrumbLinkProps };

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

@@ -0,0 +1 @@
+export { Breadcrumb, type BreadcrumbLinkProps } from "./breadcrumb.js";

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

@@ -1,6 +1,9 @@
 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, 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({
@@ -189,6 +190,431 @@ var Dot = forwardRef(
 Dot.displayName = "Badge.Dot";
 var BadgeWithDot = Badge;
 BadgeWithDot.Dot = Dot;
+
+// src/lib/safe-href.ts
+var DANGEROUS_PROTOCOL_PATTERNS = [
+  /^javascript:/i,
+  /^vbscript:/i,
+  /^data:text\/html/i
+];
+function safeHref(url) {
+  if (url === null || url === void 0) return void 0;
+  const trimmed = url.trim();
+  if (trimmed.length === 0) return void 0;
+  for (const pattern of DANGEROUS_PROTOCOL_PATTERNS) {
+    if (pattern.test(trimmed)) return void 0;
+  }
+  return url;
+}
+function sub(tag, slot, displayName, baseClass, attrs, defaultChildren) {
+  const Component = forwardRef(
+    ({ className, children, ...props }, ref) => createElement(
+      tag,
+      {
+        "data-slot": slot,
+        ref,
+        ...attrs,
+        className: cn(baseClass, className),
+        ...props
+      },
+      children ?? defaultChildren
+    )
+  );
+  Component.displayName = displayName;
+  return Component;
+}
+var Root = forwardRef((props, ref) => /* @__PURE__ */ jsx("nav", { "data-slot": "breadcrumb", ref, "aria-label": "breadcrumb", ...props }));
+Root.displayName = "Breadcrumb";
+var List = sub(
+  "ol",
+  "breadcrumb-list",
+  "Breadcrumb.List",
+  "flex flex-wrap items-center gap-1.5 break-words text-body-sm text-muted-foreground sm:gap-2.5"
+);
+var Item = sub(
+  "li",
+  "breadcrumb-item",
+  "Breadcrumb.Item",
+  "inline-flex items-center gap-1.5"
+);
+var Link = forwardRef(
+  ({ asChild, className, href, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        "data-slot": "breadcrumb-link",
+        ref,
+        className: cn("transition-colors hover:text-foreground", className),
+        href: asChild ? href : safeHref(href),
+        ...props
+      }
+    );
+  }
+);
+Link.displayName = "Breadcrumb.Link";
+var Page = sub(
+  "span",
+  "breadcrumb-page",
+  "Breadcrumb.Page",
+  "font-normal text-foreground",
+  { role: "link", "aria-disabled": "true", "aria-current": "page" }
+);
+var Separator = sub(
+  "li",
+  "breadcrumb-separator",
+  "Breadcrumb.Separator",
+  "[&>svg]:size-3.5",
+  { role: "presentation", "aria-hidden": "true" },
+  /* @__PURE__ */ jsx(ChevronRight, {})
+);
+var Ellipsis = sub(
+  "span",
+  "breadcrumb-ellipsis",
+  "Breadcrumb.Ellipsis",
+  "flex size-9 items-center justify-center",
+  { role: "presentation", "aria-hidden": "true" },
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+  ] })
+);
+var Breadcrumb = Object.assign(Root, {
+  List,
+  Item,
+  Link,
+  Page,
+  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,
@@ -264,7 +690,7 @@ var UpdateBanner = forwardRef(
 UpdateBanner.displayName = "UpdateBanner";
 var CardContext = createContext({ size: "md" });
 var useCardSize = () => useContext(CardContext).size;
-var Root = forwardRef(
+var Root4 = forwardRef(
   ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(CardContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -279,7 +705,7 @@ var Root = forwardRef(
     }
   ) })
 );
-Root.displayName = "Card";
+Root4.displayName = "Card";
 var headerPadBySize = {
   sm: "gap-1 p-3 pb-1.5",
   md: "gap-1.5 p-5 pb-2.5",
@@ -381,49 +807,13 @@ var Footer = forwardRef(
   }
 );
 Footer.displayName = "Card.Footer";
-var Card = /* @__PURE__ */ Object.assign(Root, {
+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,
   {
@@ -439,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(
@@ -478,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 });
@@ -516,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,
@@ -524,7 +914,7 @@ var Dialog = /* @__PURE__ */ Object.assign(DialogPrimitive.Root, {
   Title: Title3,
   Description: Description3
 });
-var List2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var List3 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     "data-slot": "tabs-list",
@@ -536,7 +926,7 @@ var List2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     ...props
   }
 ));
-List2.displayName = "Tabs.List";
+List3.displayName = "Tabs.List";
 var Trigger3 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
@@ -558,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",
@@ -570,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: List2,
+  List: List3,
   Trigger: Trigger3,
-  Content: Content4
+  Content: Content5
 });
 var Provider2 = TooltipPrimitive.Provider;
-var Root5 = 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",
@@ -597,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",
@@ -605,15 +995,15 @@ var Tooltip = ({
   delayDuration = 200,
   children,
   ...rootProps
-}) => /* @__PURE__ */ jsx(Provider2, { delayDuration, children: /* @__PURE__ */ jsxs(Root5, { ...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 = Root5;
+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,
@@ -1463,7 +1853,7 @@ var Textarea = forwardRef(
   )
 );
 Textarea.displayName = "Textarea";
-var Root15 = forwardRef(
+var Root18 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "aside",
     {
@@ -1477,7 +1867,7 @@ var Root15 = forwardRef(
     }
   )
 );
-Root15.displayName = "Sidebar";
+Root18.displayName = "Sidebar";
 var Header3 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1506,7 +1896,7 @@ var Section = forwardRef(
   )
 );
 Section.displayName = "Sidebar.Section";
-var Item3 = 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",
@@ -1566,7 +1956,7 @@ var Item3 = forwardRef(
     );
   }
 );
-Item3.displayName = "Sidebar.Item";
+Item5.displayName = "Sidebar.Item";
 var Footer3 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1579,13 +1969,13 @@ var Footer3 = forwardRef(
   )
 );
 Footer3.displayName = "Sidebar.Footer";
-var Sidebar = /* @__PURE__ */ Object.assign(Root15, {
+var Sidebar = /* @__PURE__ */ Object.assign(Root18, {
   Header: Header3,
   Section,
-  Item: Item3,
+  Item: Item5,
   Footer: Footer3
 });
-var Root16 = forwardRef(
+var Root19 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "header",
     {
@@ -1599,7 +1989,7 @@ var Root16 = forwardRef(
     }
   )
 );
-Root16.displayName = "TopNav";
+Root19.displayName = "TopNav";
 var Left = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1734,7 +2124,7 @@ var ModeSwitcher = forwardRef(
   }
 );
 ModeSwitcher.displayName = "TopNav.ModeSwitcher";
-var TopNav = /* @__PURE__ */ Object.assign(Root16, {
+var TopNav = /* @__PURE__ */ Object.assign(Root19, {
   Left,
   Center,
   Right,
@@ -1774,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(
@@ -1806,7 +2196,7 @@ var Content9 = forwardRef(
     )
   ] })
 );
-Content9.displayName = "Sheet.Content";
+Content10.displayName = "Sheet.Content";
 var Header4 = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -1851,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;
@@ -2030,7 +2420,7 @@ var alignClass = {
   center: "text-center",
   right: "text-right"
 };
-var Root18 = forwardRef(
+var Root21 = forwardRef(
   ({ className, density = "default", children, ...props }, ref) => /* @__PURE__ */ jsx(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(
     "table",
     {
@@ -2042,7 +2432,7 @@ var Root18 = forwardRef(
     }
   ) })
 );
-Root18.displayName = "Table";
+Root21.displayName = "Table";
 var Header5 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "thead",
@@ -2162,7 +2552,7 @@ var HeaderCell = forwardRef(
   }
 );
 HeaderCell.displayName = "Table.HeaderCell";
-var Table = Object.assign(Root18, { 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() {
@@ -2539,7 +2929,7 @@ var StatTile = forwardRef(
   }
 );
 StatTile.displayName = "StatTile";
-var Root19 = forwardRef(
+var Root22 = forwardRef(
   ({ className, title = "Danger Zone", children, ...props }, ref) => /* @__PURE__ */ jsxs(
     "section",
     {
@@ -2555,7 +2945,7 @@ var Root19 = forwardRef(
     }
   )
 );
-Root19.displayName = "DangerZone";
+Root22.displayName = "DangerZone";
 var Action2 = forwardRef(
   ({ className, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
@@ -2578,7 +2968,7 @@ var Action2 = forwardRef(
   )
 );
 Action2.displayName = "DangerZone.Action";
-var DangerZone = Object.assign(Root19, { Action: Action2 });
+var DangerZone = Object.assign(Root22, { Action: Action2 });
 var ConfirmDialog = forwardRef(
   ({
     open,
@@ -3090,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",
@@ -3106,8 +3496,8 @@ var Content11 = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /*
     ...props
   }
 ) }));
-Content11.displayName = "DropdownMenu.Content";
-var Item5 = forwardRef(
+Content12.displayName = "DropdownMenu.Content";
+var Item7 = forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Item,
     {
@@ -3126,7 +3516,7 @@ var Item5 = forwardRef(
     }
   )
 );
-Item5.displayName = "DropdownMenu.Item";
+Item7.displayName = "DropdownMenu.Item";
 var CheckboxItem2 = forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
@@ -3184,7 +3574,7 @@ var Label4 = forwardRef(
   )
 );
 Label4.displayName = "DropdownMenu.Label";
-var Separator3 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Separator4 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     "data-slot": "dropdown-menu-separator",
@@ -3193,7 +3583,7 @@ var Separator3 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ js
     ...props
   }
 ));
-Separator3.displayName = "DropdownMenu.Separator";
+Separator4.displayName = "DropdownMenu.Separator";
 var Shortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
@@ -3241,12 +3631,12 @@ SubContent2.displayName = "DropdownMenu.SubContent";
 var DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {
   Trigger: Trigger9,
   Portal: Portal6,
-  Content: Content11,
-  Item: Item5,
+  Content: Content12,
+  Item: Item7,
   CheckboxItem: CheckboxItem2,
   RadioItem: RadioItem2,
   Label: Label4,
-  Separator: Separator3,
+  Separator: Separator4,
   Shortcut,
   Group: Group3,
   Sub: Sub2,
@@ -4067,22 +4457,6 @@ var DeploymentRow = forwardRef(
   }
 );
 DeploymentRow.displayName = "DeploymentRow";
-
-// src/lib/safe-href.ts
-var DANGEROUS_PROTOCOL_PATTERNS = [
-  /^javascript:/i,
-  /^vbscript:/i,
-  /^data:text\/html/i
-];
-function safeHref(url) {
-  if (url === null || url === void 0) return void 0;
-  const trimmed = url.trim();
-  if (trimmed.length === 0) return void 0;
-  for (const pattern of DANGEROUS_PROTOCOL_PATTERNS) {
-    if (pattern.test(trimmed)) return void 0;
-  }
-  return url;
-}
 var statusToVariant2 = {
   queued: "warning",
   building: "primary",
@@ -4707,4 +5081,4 @@ function CommandPalette({
   ] }) });
 }
 
-export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, 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,7 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.15.0",
-  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
+  "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).",
@@ -22,18 +21,6 @@
   "engines": {
     "node": ">=20"
   },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "biome check src",
-    "lint:ci": "biome check src",
-    "format:check": "biome format src",
-    "test": "vitest run",
-    "test:run": "vitest run",
-    "build": "tsup && tsc -p tsconfig.dts.json",
-    "prepublishOnly": "npm run build",
-    "registry:build": "tsx scripts/build-registry.ts",
-    "registry:validate": "tsx scripts/validate-registry.ts"
-  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
@@ -47,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",
@@ -72,6 +60,7 @@
     "react": ">=18.2.0 <20",
     "react-dom": ">=18.2.0 <20",
     "tailwindcss": "^4.0.0",
+    "ts-prune": "^0.10.3",
     "tsup": "^8.3.5",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
@@ -79,5 +68,16 @@
     "vitest": "^4.1.8",
     "vitest-axe": "^0.1.0"
   },
-  "_provenance": "seeded from theo-ui @ 2b46eca (2026-07-03, pivot M-B)"
-}
+  "_provenance": "seeded from theo-ui @ 2b46eca (2026-07-03, pivot M-B)",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src",
+    "lint:ci": "biome check src",
+    "format:check": "biome format src",
+    "test": "vitest run",
+    "test:run": "vitest run",
+    "build": "tsup && tsc -p tsconfig.dts.json",
+    "registry:build": "tsx scripts/build-registry.ts",
+    "registry:validate": "tsx scripts/validate-registry.ts"
+  }
+}