@timbal-ai/timbal-react 1.1.0 → 1.3.0

package/dist/{chunk-6HWMJNZT.esm.js → chunk-OH23AX2V.esm.js}

@@ -9,14 +9,13 @@ import {
   TIMBAL_V2_MODAL_SURFACE,
   TIMBAL_V2_SWITCH_THUMB,
   TIMBAL_V2_SWITCH_TRACK_OFF,
-  buttonVariants,
   cn,
   controlClass,
   controlSurfaceClass,
   overlayItemClass,
   overlayListPanelClass,
   overlaySurfaceClass
-} from "./chunk-4AKJ6FKE.esm.js";
+} from "./chunk-QU7ET55D.esm.js";
 
 // src/ui/dropdown-menu.tsx
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
@@ -1451,8 +1450,11 @@ function CommandShortcut({
 
 // src/ui/calendar.tsx
 import * as React from "react";
-import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon5 } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import { ChevronDownIcon as ChevronDownIcon3, ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon5 } from "lucide-react";
+import {
+  DayPicker,
+  getDefaultClassNames
+} from "react-day-picker";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function Calendar({
   className,
@@ -1460,56 +1462,71 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }) {
+  const defaults = getDefaultClassNames();
   return /* @__PURE__ */ jsx17(
     DayPicker,
     {
       showOutsideDays,
-      className: cn("p-3", className),
+      className: cn("p-4", className),
       classNames: {
-        months: "flex flex-col gap-4 sm:flex-row sm:gap-4",
-        month: "flex flex-col gap-4",
-        month_caption: "relative flex items-center justify-center pt-1",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        button_previous: cn(
-          buttonVariants({ variant: "outline" }),
-          "absolute left-1 size-7 bg-transparent p-0 opacity-70 hover:opacity-100"
+        root: cn("w-fit", defaults.root),
+        months: cn("relative flex flex-col gap-4 sm:flex-row", defaults.months),
+        month: cn("flex w-full flex-col gap-3", defaults.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex items-center justify-between",
+          defaults.nav
+        ),
+        button_previous: cn(navButtonClass, defaults.button_previous),
+        button_next: cn(navButtonClass, defaults.button_next),
+        month_caption: cn(
+          "flex h-10 items-center justify-center",
+          defaults.month_caption
+        ),
+        caption_label: cn("text-sm font-semibold", defaults.caption_label),
+        dropdowns: cn(
+          "flex h-10 items-center justify-center gap-1.5 text-sm font-semibold",
+          defaults.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-md border border-border focus-within:ring-2 focus-within:ring-foreground/10",
+          defaults.dropdown_root
         ),
-        button_next: cn(
-          buttonVariants({ variant: "outline" }),
-          "absolute right-1 size-7 bg-transparent p-0 opacity-70 hover:opacity-100"
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaults.dropdown),
+        month_grid: cn("border-separate border-spacing-y-1", defaults.month_grid),
+        weekdays: cn(defaults.weekdays),
+        weekday: cn(
+          "size-10 pb-2 text-xs font-medium text-muted-foreground",
+          defaults.weekday
+        ),
+        week: cn(defaults.week),
+        week_number_header: cn("size-10", defaults.week_number_header),
+        week_number: cn(
+          "text-xs text-muted-foreground",
+          defaults.week_number
         ),
-        month_grid: "w-full border-collapse",
-        weekdays: "flex",
-        weekday: "w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground",
-        week: "mt-2 flex w-full",
         day: cn(
-          "relative size-9 p-0 text-center text-sm",
-          "[&:has([aria-selected].day-range-end)]:rounded-r-md",
-          "[&:has([aria-selected].day-outside)]:bg-accent/50",
-          "[&:has([aria-selected])]:bg-accent",
-          "first:[&:has([aria-selected])]:rounded-l-md",
-          "last:[&:has([aria-selected])]:rounded-r-md",
-          "focus-within:relative focus-within:z-10"
+          "relative size-10 p-0 text-center text-sm focus-within:relative focus-within:z-10",
+          defaults.day
+        ),
+        range_start: cn("rounded-l-md", defaults.range_start),
+        range_middle: cn("rounded-none", defaults.range_middle),
+        range_end: cn("rounded-r-md", defaults.range_end),
+        today: cn(
+          "[&>button]:font-semibold [&>button:not([data-selected-single=true]):not([data-range-middle=true])]:text-primary",
+          defaults.today
         ),
-        day_button: cn(
-          buttonVariants({ variant: "ghost" }),
-          "size-9 p-0 font-normal aria-selected:opacity-100"
+        outside: cn(
+          "text-muted-foreground/60 aria-selected:text-muted-foreground",
+          defaults.outside
         ),
-        range_start: "day-range-start rounded-l-md",
-        range_middle: "day-range-middle aria-selected:bg-accent",
-        range_end: "day-range-end rounded-r-md",
-        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        today: "bg-accent text-accent-foreground",
-        outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        disabled: "text-muted-foreground opacity-50",
-        hidden: "invisible",
+        disabled: cn("text-muted-foreground opacity-50", defaults.disabled),
+        hidden: cn("invisible", defaults.hidden),
         ...classNames
       },
       components: {
-        Chevron: ({ orientation, className: className2, ...chevronProps }) => {
-          const Icon = orientation === "left" ? ChevronLeftIcon2 : ChevronRightIcon5;
-          return /* @__PURE__ */ jsx17(Icon, { className: cn("size-4", className2), ...chevronProps });
+        Chevron: ({ orientation, className: chevronClass, ...chevronProps }) => {
+          const Icon = orientation === "left" ? ChevronLeftIcon2 : orientation === "right" ? ChevronRightIcon5 : ChevronDownIcon3;
+          return /* @__PURE__ */ jsx17(Icon, { className: cn("size-4", chevronClass), ...chevronProps });
         },
         DayButton: CalendarDayButton
       },
@@ -1517,6 +1534,12 @@ function Calendar({
     }
   );
 }
+var navButtonClass = cn(
+  "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors",
+  "hover:bg-accent hover:text-accent-foreground",
+  "disabled:pointer-events-none disabled:opacity-40",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10"
+);
 function CalendarDayButton({
   className,
   day,
@@ -1527,25 +1550,26 @@ function CalendarDayButton({
   React.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
+  const isSingle = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle;
   return /* @__PURE__ */ jsx17(
     "button",
     {
       ref,
       type: "button",
       "data-day": day.date.toLocaleDateString(),
-      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
-      "data-range-start": modifiers.range_start,
-      "data-range-end": modifiers.range_end,
-      "data-range-middle": modifiers.range_middle,
+      "data-selected-single": isSingle || void 0,
+      "data-range-start": modifiers.range_start || void 0,
+      "data-range-end": modifiers.range_end || void 0,
+      "data-range-middle": modifiers.range_middle || void 0,
       className: cn(
-        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors",
+        "inline-flex size-full items-center justify-center rounded-md text-sm font-normal transition-colors",
         "hover:bg-accent hover:text-accent-foreground",
-        "focus-visible:ring-2 focus-visible:ring-foreground/10 focus-visible:outline-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
         "disabled:pointer-events-none disabled:opacity-50",
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground",
-        "data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground",
-        "data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground",
-        "data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-primary",
+        "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground",
+        "data-[range-start=true]:rounded-l-md data-[range-start=true]:rounded-r-none data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground",
+        "data-[range-end=true]:rounded-r-md data-[range-end=true]:rounded-l-none data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground",
         className
       ),
       ...props
@@ -1554,7 +1578,7 @@ function CalendarDayButton({
 }
 
 // src/ui/combobox.tsx
-import { ChevronDownIcon as ChevronDownIcon3 } from "lucide-react";
+import { ChevronDownIcon as ChevronDownIcon4 } from "lucide-react";
 import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 function Combobox({
   ...props
@@ -1580,7 +1604,7 @@ function ComboboxTrigger({
       ...props,
       children: [
         /* @__PURE__ */ jsx18("span", { className: "truncate", children }),
-        /* @__PURE__ */ jsx18(ChevronDownIcon3, { className: "size-4 shrink-0 opacity-50" })
+        /* @__PURE__ */ jsx18(ChevronDownIcon4, { className: "size-4 shrink-0 opacity-50" })
       ]
     }
   );
@@ -1950,7 +1974,7 @@ function InputGroupText({
 
 // src/ui/accordion.tsx
 import { Accordion as AccordionPrimitive } from "radix-ui";
-import { ChevronDownIcon as ChevronDownIcon4 } from "lucide-react";
+import { ChevronDownIcon as ChevronDownIcon5 } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 function Accordion({
   ...props
@@ -1988,7 +2012,7 @@ function AccordionTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx24(ChevronDownIcon4, { className: "pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" })
+        /* @__PURE__ */ jsx24(ChevronDownIcon5, { className: "pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" })
       ]
     }
   ) });
@@ -3227,6 +3251,673 @@ function Toaster() {
   ] });
 }
 
+// src/ui/avatar-group.tsx
+import * as React4 from "react";
+import { jsxs as jsxs18 } from "react/jsx-runtime";
+var spacingClass = {
+  sm: "-space-x-2",
+  md: "-space-x-3"
+};
+function AvatarGroup({
+  className,
+  children,
+  max,
+  spacing = "sm",
+  ...props
+}) {
+  const items = React4.Children.toArray(children);
+  const overflow = typeof max === "number" ? items.length - max : 0;
+  const visible = typeof max === "number" ? items.slice(0, max) : items;
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      "data-slot": "avatar-group",
+      className: cn(
+        "flex items-center",
+        spacingClass[spacing],
+        "[&>*]:rounded-full [&>*]:ring-2 [&>*]:ring-background",
+        className
+      ),
+      ...props,
+      children: [
+        visible,
+        overflow > 0 ? /* @__PURE__ */ jsxs18(
+          "span",
+          {
+            "aria-label": `${overflow} more`,
+            className: "inline-flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-2 ring-background",
+            children: [
+              "+",
+              overflow
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/ui/stepper.tsx
+import { CheckIcon as CheckIcon5 } from "lucide-react";
+import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+function Stepper({
+  steps,
+  current,
+  orientation = "horizontal",
+  className,
+  ...props
+}) {
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ jsx42(
+    "ol",
+    {
+      "data-slot": "stepper",
+      className: cn(
+        "flex",
+        isVertical ? "flex-col gap-0" : "items-start gap-2",
+        className
+      ),
+      ...props,
+      children: steps.map((step, index) => {
+        const complete = index < current;
+        const active = index === current;
+        const last = index === steps.length - 1;
+        const connectorFilled = index < current;
+        return /* @__PURE__ */ jsxs19(
+          "li",
+          {
+            "aria-current": active ? "step" : void 0,
+            className: cn(
+              "flex min-w-0",
+              isVertical ? "gap-3" : "flex-1 flex-col gap-1.5",
+              last && !isVertical && "flex-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs19("div", { className: cn("flex items-center gap-2", isVertical && "flex-col"), children: [
+                /* @__PURE__ */ jsx42(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium transition-colors",
+                      complete && "border-primary bg-primary text-primary-foreground",
+                      active && "border-primary text-primary",
+                      !complete && !active && "border-border text-muted-foreground"
+                    ),
+                    children: complete ? /* @__PURE__ */ jsx42(CheckIcon5, { className: "size-3.5", "aria-hidden": true }) : index + 1
+                  }
+                ),
+                !last ? /* @__PURE__ */ jsx42(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: cn(
+                      isVertical ? "w-px flex-1" : "h-px flex-1",
+                      connectorFilled ? "bg-primary" : "bg-border",
+                      isVertical && "min-h-6"
+                    )
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsxs19("div", { className: cn("min-w-0", isVertical && "pb-4"), children: [
+                /* @__PURE__ */ jsx42(
+                  "p",
+                  {
+                    className: cn(
+                      "truncate text-sm font-medium",
+                      active ? "text-foreground" : "text-muted-foreground"
+                    ),
+                    children: step.label
+                  }
+                ),
+                step.description ? /* @__PURE__ */ jsx42("p", { className: "truncate text-xs text-muted-foreground", children: step.description }) : null
+              ] })
+            ]
+          },
+          step.id
+        );
+      })
+    }
+  );
+}
+
+// src/ui/timeline.tsx
+import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
+var dotToneClass = {
+  default: "border-border bg-card",
+  primary: "border-primary bg-primary",
+  success: "border-emerald-500 bg-emerald-500",
+  warn: "border-amber-500 bg-amber-500",
+  danger: "border-destructive bg-destructive"
+};
+function Timeline({ items, className, ...props }) {
+  return /* @__PURE__ */ jsx43("ol", { "data-slot": "timeline", className: cn("flex flex-col", className), ...props, children: items.map((item, index) => {
+    const last = index === items.length - 1;
+    const tone = item.tone ?? "default";
+    return /* @__PURE__ */ jsxs20("li", { className: "relative flex gap-3 pb-5 last:pb-0", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx43(
+          "span",
+          {
+            className: cn(
+              "z-[1] mt-0.5 inline-flex size-3 shrink-0 items-center justify-center rounded-full border-2",
+              dotToneClass[tone],
+              item.icon && "size-6"
+            ),
+            children: item.icon
+          }
+        ),
+        !last ? /* @__PURE__ */ jsx43("span", { "aria-hidden": true, className: "w-px flex-1 bg-border" }) : null
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: "min-w-0 flex-1 pb-0.5", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsx43("p", { className: "text-sm font-medium text-foreground", children: item.title }),
+          item.meta ? /* @__PURE__ */ jsx43("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: item.meta }) : null
+        ] }),
+        item.description ? /* @__PURE__ */ jsx43("p", { className: "mt-0.5 text-sm text-muted-foreground", children: item.description }) : null
+      ] })
+    ] }, item.id);
+  }) });
+}
+
+// src/ui/rating.tsx
+import * as React5 from "react";
+import { StarIcon } from "lucide-react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var sizeClass = { sm: "size-4", md: "size-5", lg: "size-6" };
+function Rating({
+  value: valueProp,
+  defaultValue = 0,
+  onChange,
+  max = 5,
+  readOnly = false,
+  disabled = false,
+  size = "md",
+  label = "Rating",
+  className
+}) {
+  const [uncontrolled, setUncontrolled] = React5.useState(defaultValue);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp : uncontrolled;
+  const [hover, setHover] = React5.useState(null);
+  const interactive = !readOnly && !disabled;
+  const shown = hover ?? value;
+  const set = (next) => {
+    if (!interactive) return;
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+  };
+  if (!interactive) {
+    return /* @__PURE__ */ jsx44(
+      "span",
+      {
+        "data-slot": "rating",
+        role: "img",
+        "aria-label": `${label}: ${value} of ${max}`,
+        className: cn("inline-flex items-center gap-0.5", disabled && "opacity-50", className),
+        children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ jsx44(
+          StarIcon,
+          {
+            "aria-hidden": true,
+            className: cn(
+              sizeClass[size],
+              i < value ? "fill-amber-400 text-amber-400" : "fill-transparent text-muted-foreground/40"
+            )
+          },
+          i
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx44(
+    "span",
+    {
+      "data-slot": "rating",
+      role: "radiogroup",
+      "aria-label": label,
+      className: cn("inline-flex items-center gap-0.5", className),
+      onMouseLeave: () => setHover(null),
+      children: Array.from({ length: max }, (_, i) => {
+        const unit = i + 1;
+        const filled = unit <= shown;
+        return /* @__PURE__ */ jsx44(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": unit === value,
+            "aria-label": `${unit} ${unit === 1 ? "star" : "stars"}`,
+            onClick: () => set(unit === value ? 0 : unit),
+            onMouseEnter: () => setHover(unit),
+            onFocus: () => setHover(unit),
+            onBlur: () => setHover(null),
+            className: "rounded-sm p-0.5 transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
+            children: /* @__PURE__ */ jsx44(
+              StarIcon,
+              {
+                className: cn(
+                  sizeClass[size],
+                  "transition-colors",
+                  filled ? "fill-amber-400 text-amber-400" : "fill-transparent text-muted-foreground/40"
+                )
+              }
+            )
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+// src/ui/number-field.tsx
+import * as React6 from "react";
+import { MinusIcon as MinusIcon2, PlusIcon } from "lucide-react";
+import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
+var heightClass = { sm: "h-9", default: "h-10" };
+var stepButtonClass = "inline-flex aspect-square h-full items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/15";
+function clamp(n, min, max) {
+  if (typeof min === "number" && n < min) return min;
+  if (typeof max === "number" && n > max) return max;
+  return n;
+}
+function NumberField({
+  value: valueProp,
+  defaultValue = 0,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  size = "default",
+  disabled,
+  ariaLabel,
+  className,
+  ...inputProps
+}) {
+  const [uncontrolled, setUncontrolled] = React6.useState(defaultValue);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp : uncontrolled;
+  const commit = (next) => {
+    const clamped = clamp(next, min, max);
+    if (!isControlled) setUncontrolled(clamped);
+    onValueChange?.(clamped);
+  };
+  return /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      "data-slot": "number-field",
+      className: cn(
+        controlSurfaceClass,
+        "inline-flex w-full items-stretch overflow-hidden rounded-lg p-0",
+        heightClass[size],
+        disabled && "opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx45(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": true,
+            disabled: disabled || typeof min === "number" && value <= min,
+            onClick: () => commit(value - step),
+            className: cn(stepButtonClass, "border-r border-border"),
+            children: /* @__PURE__ */ jsx45(MinusIcon2, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx45(
+          "input",
+          {
+            type: "number",
+            inputMode: "decimal",
+            role: "spinbutton",
+            "aria-label": ariaLabel,
+            "aria-valuenow": value,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            value: Number.isNaN(value) ? "" : value,
+            disabled,
+            onChange: (e) => {
+              const next = e.target.valueAsNumber;
+              if (Number.isNaN(next)) {
+                if (!isControlled) setUncontrolled(Number.NaN);
+                return;
+              }
+              commit(next);
+            },
+            className: "w-full min-w-0 [appearance:textfield] bg-transparent px-2 text-center text-sm text-foreground outline-none disabled:cursor-not-allowed [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+            ...inputProps
+          }
+        ),
+        /* @__PURE__ */ jsx45(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": true,
+            disabled: disabled || typeof max === "number" && value >= max,
+            onClick: () => commit(value + step),
+            className: cn(stepButtonClass, "border-l border-border"),
+            children: /* @__PURE__ */ jsx45(PlusIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/ui/tag-input.tsx
+import * as React7 from "react";
+import { XIcon as XIcon3 } from "lucide-react";
+import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
+function TagInput({
+  value: valueProp,
+  defaultValue = [],
+  onChange,
+  placeholder,
+  separators = ["Enter", ","],
+  dedupe = true,
+  max,
+  disabled,
+  ariaLabel,
+  className,
+  inputClassName
+}) {
+  const [uncontrolled, setUncontrolled] = React7.useState(defaultValue);
+  const isControlled = valueProp !== void 0;
+  const tags = isControlled ? valueProp : uncontrolled;
+  const [draft, setDraft] = React7.useState("");
+  const setTags = (next) => {
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+  };
+  const addTag = (raw) => {
+    const tag = raw.trim();
+    if (!tag) return;
+    if (typeof max === "number" && tags.length >= max) return;
+    if (dedupe && tags.some((t) => t.toLowerCase() === tag.toLowerCase())) {
+      setDraft("");
+      return;
+    }
+    setTags([...tags, tag]);
+    setDraft("");
+  };
+  const removeAt = (index) => {
+    setTags(tags.filter((_, i) => i !== index));
+  };
+  const handleKeyDown = (event) => {
+    if (separators.includes(event.key)) {
+      event.preventDefault();
+      addTag(draft);
+    } else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+      removeAt(tags.length - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      "data-slot": "tag-input",
+      className: cn(
+        controlSurfaceClass,
+        "flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-lg px-2 py-1.5",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      children: [
+        tags.map((tag, index) => /* @__PURE__ */ jsxs22(
+          "span",
+          {
+            className: "inline-flex items-center gap-1 rounded-md bg-muted py-0.5 pl-2 pr-1 text-xs font-medium text-foreground",
+            children: [
+              tag,
+              /* @__PURE__ */ jsx46(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Remove ${tag}`,
+                  onClick: () => removeAt(index),
+                  className: "inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20",
+                  children: /* @__PURE__ */ jsx46(XIcon3, { className: "size-3", "aria-hidden": true })
+                }
+              )
+            ]
+          },
+          `${tag}-${index}`
+        )),
+        /* @__PURE__ */ jsx46(
+          "input",
+          {
+            type: "text",
+            "aria-label": ariaLabel ?? placeholder ?? "Add tag",
+            value: draft,
+            disabled,
+            placeholder: tags.length === 0 ? placeholder : void 0,
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: handleKeyDown,
+            onBlur: () => addTag(draft),
+            className: cn(
+              "min-w-[6rem] flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground/70",
+              inputClassName
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/ui/banner.tsx
+import { XIcon as XIcon4 } from "lucide-react";
+import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
+var bannerToneClass = {
+  default: "border-border bg-muted/50 text-foreground",
+  primary: "border-primary/20 bg-primary/10 text-foreground",
+  success: "border-emerald-500/25 bg-emerald-500/10 text-foreground [&_[data-banner-icon]]:text-emerald-600 dark:[&_[data-banner-icon]]:text-emerald-400",
+  warn: "border-amber-500/25 bg-amber-500/10 text-foreground [&_[data-banner-icon]]:text-amber-600 dark:[&_[data-banner-icon]]:text-amber-400",
+  danger: "border-destructive/25 bg-destructive/10 text-foreground [&_[data-banner-icon]]:text-destructive"
+};
+function Banner({
+  tone = "default",
+  icon,
+  title,
+  actions,
+  onDismiss,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      "data-slot": "banner",
+      role: "status",
+      className: cn(
+        "flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-sm",
+        bannerToneClass[tone],
+        className
+      ),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx47("span", { "data-banner-icon": true, className: "mt-0.5 shrink-0 [&_svg]:size-4", children: icon }) : null,
+        /* @__PURE__ */ jsxs23("div", { className: "min-w-0 flex-1", children: [
+          title ? /* @__PURE__ */ jsx47("p", { className: "font-medium", children: title }) : null,
+          children ? /* @__PURE__ */ jsx47("div", { className: cn("text-muted-foreground", title && "mt-0.5"), children }) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx47("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null,
+        onDismiss ? /* @__PURE__ */ jsx47(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            className: "-mr-1 -mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
+            children: /* @__PURE__ */ jsx47(XIcon4, { className: "size-4", "aria-hidden": true })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/ui/copy-button.tsx
+import * as React8 from "react";
+import { CheckIcon as CheckIcon6, CopyIcon } from "lucide-react";
+import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
+function CopyButton({
+  value,
+  timeout = 1500,
+  onCopied,
+  className,
+  children,
+  onClick,
+  ...props
+}) {
+  const [copied, setCopied] = React8.useState(false);
+  const timer = React8.useRef(void 0);
+  React8.useEffect(() => () => clearTimeout(timer.current), []);
+  const handleClick = async (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      onCopied?.(value);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), timeout);
+    } catch {
+    }
+  };
+  const Icon = copied ? CheckIcon6 : CopyIcon;
+  return /* @__PURE__ */ jsxs24(
+    "button",
+    {
+      type: "button",
+      "data-slot": "copy-button",
+      "data-copied": copied || void 0,
+      "aria-label": copied ? "Copied" : "Copy",
+      onClick: handleClick,
+      className: cn(
+        "inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium text-muted-foreground transition-colors",
+        "hover:bg-accent hover:text-foreground data-[copied=true]:text-emerald-600 dark:data-[copied=true]:text-emerald-400",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
+        children ? "h-8 px-2" : "size-8",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx48(Icon, { className: "size-4 shrink-0", "aria-hidden": true }),
+        children
+      ]
+    }
+  );
+}
+
+// src/ui/snippet.tsx
+import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
+function Snippet({
+  children,
+  symbol,
+  hideCopy = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      "data-slot": "snippet",
+      className: cn(
+        "flex items-center gap-2 rounded-lg border border-border bg-muted/40 py-1.5 pl-3 pr-1.5 font-mono text-sm",
+        className
+      ),
+      ...props,
+      children: [
+        symbol ? /* @__PURE__ */ jsx49("span", { "aria-hidden": true, className: "select-none text-muted-foreground", children: symbol }) : null,
+        /* @__PURE__ */ jsx49("code", { className: "min-w-0 flex-1 truncate text-foreground", children }),
+        hideCopy ? null : /* @__PURE__ */ jsx49(CopyButton, { value: children, className: "size-7 shrink-0" })
+      ]
+    }
+  );
+}
+
+// src/ui/circular-progress.tsx
+import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
+var toneClass = {
+  primary: "text-primary",
+  success: "text-emerald-500",
+  warn: "text-amber-500",
+  danger: "text-destructive"
+};
+function CircularProgress({
+  value = 0,
+  max = 100,
+  size = 40,
+  thickness = 4,
+  showLabel = false,
+  label,
+  tone = "primary",
+  className,
+  ...props
+}) {
+  const indeterminate = value === null || value === void 0;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const pct = indeterminate ? 0.25 : Math.min(Math.max(value / max, 0), 1);
+  const dashOffset = circumference * (1 - pct);
+  return /* @__PURE__ */ jsxs26(
+    "div",
+    {
+      "data-slot": "circular-progress",
+      role: "progressbar",
+      "aria-valuenow": indeterminate ? void 0 : Math.round(pct * 100),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: cn("relative inline-flex shrink-0", className),
+      style: { width: size, height: size },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs26(
+          "svg",
+          {
+            width: size,
+            height: size,
+            viewBox: `0 0 ${size} ${size}`,
+            className: cn(toneClass[tone], indeterminate && "animate-spin"),
+            children: [
+              /* @__PURE__ */ jsx50(
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: thickness,
+                  className: "stroke-current opacity-15"
+                }
+              ),
+              /* @__PURE__ */ jsx50(
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: thickness,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: dashOffset,
+                  transform: `rotate(-90 ${size / 2} ${size / 2})`,
+                  className: cn("stroke-current", !indeterminate && "transition-[stroke-dashoffset] duration-500")
+                }
+              )
+            ]
+          }
+        ),
+        showLabel && !indeterminate ? /* @__PURE__ */ jsx50("span", { className: "absolute inset-0 flex items-center justify-center text-[0.7rem] font-medium tabular-nums text-foreground", children: label ?? `${Math.round(pct * 100)}%` }) : null
+      ]
+    }
+  );
+}
+
 export {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -3435,5 +4126,15 @@ export {
   ToastDescription,
   toast,
   useToast,
-  Toaster
+  Toaster,
+  AvatarGroup,
+  Stepper,
+  Timeline,
+  Rating,
+  NumberField,
+  TagInput,
+  Banner,
+  CopyButton,
+  Snippet,
+  CircularProgress
 };