@timbal-ai/timbal-react 1.2.0 → 1.4.0

package/dist/ui.cjs

@@ -52,8 +52,10 @@ __export(ui_exports, {
   AspectRatio: () => AspectRatio,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
+  AvatarGroup: () => AvatarGroup,
   AvatarImage: () => AvatarImage,
   Badge: () => Badge,
+  Banner: () => Banner,
   Breadcrumb: () => Breadcrumb,
   BreadcrumbEllipsis: () => BreadcrumbEllipsis,
   BreadcrumbItem: () => BreadcrumbItem,
@@ -78,6 +80,7 @@ __export(ui_exports, {
   ChartTooltip: () => ChartTooltip,
   ChartTooltipContent: () => ChartTooltipContent,
   Checkbox: () => Checkbox,
+  CircularProgress: () => CircularProgress,
   Collapsible: () => Collapsible,
   CollapsibleContent: () => CollapsibleContent,
   CollapsibleTrigger: () => CollapsibleTrigger,
@@ -116,6 +119,7 @@ __export(ui_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
+  CopyButton: () => CopyButton,
   DatePicker: () => DatePicker,
   DatePickerButton: () => DatePickerButton,
   DatePickerCalendar: () => DatePickerCalendar,
@@ -191,6 +195,7 @@ __export(ui_exports, {
   NavigationMenuList: () => NavigationMenuList,
   NavigationMenuTrigger: () => NavigationMenuTrigger,
   NavigationMenuViewport: () => NavigationMenuViewport,
+  NumberField: () => NumberField,
   Pagination: () => Pagination,
   PaginationContent: () => PaginationContent,
   PaginationEllipsis: () => PaginationEllipsis,
@@ -206,6 +211,7 @@ __export(ui_exports, {
   Progress: () => Progress,
   RadioGroup: () => RadioGroup,
   RadioGroupItem: () => RadioGroupItem,
+  Rating: () => Rating,
   ScrollArea: () => ScrollArea,
   ScrollBar: () => ScrollBar,
   Select: () => Select,
@@ -230,7 +236,9 @@ __export(ui_exports, {
   Shimmer: () => Shimmer,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
+  Snippet: () => Snippet,
   Spinner: () => Spinner,
+  Stepper: () => Stepper,
   Switch: () => Switch,
   Table: () => Table,
   TableBody: () => TableBody,
@@ -240,8 +248,10 @@ __export(ui_exports, {
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
   TableRow: () => TableRow,
+  TagInput: () => TagInput,
   Textarea: () => Textarea,
   TimbalV2Button: () => TimbalV2Button,
+  Timeline: () => Timeline,
   Toast: () => Toast,
   ToastAction: () => ToastAction,
   ToastClose: () => ToastClose,
@@ -481,12 +491,12 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
   ...props
 }, ref) {
   const isDisabled = disabled || isLoading;
-  const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
+  const sizeClass2 = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
   const radiusClass = "rounded-full";
   const sharedRootClass = cn(
     "relative box-border inline-flex items-center justify-center gap-2 whitespace-nowrap border-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-    sizeClass,
+    sizeClass2,
     radiusClass,
     TIMBAL_V2_BORDER[variant],
     TIMBAL_V2_SHADOW[variant],
@@ -2425,56 +2435,71 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }) {
+  const defaults = (0, import_react_day_picker.getDefaultClassNames)();
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_react_day_picker.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_next: cn(
-          buttonVariants({ variant: "outline" }),
-          "absolute right-1 size-7 bg-transparent p-0 opacity-70 hover:opacity-100"
+        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
+        ),
+        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
         ),
-        day_button: cn(
-          buttonVariants({ variant: "ghost" }),
-          "size-9 p-0 font-normal aria-selected:opacity-100"
+        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
         ),
-        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",
+        outside: cn(
+          "text-muted-foreground/60 aria-selected:text-muted-foreground",
+          defaults.outside
+        ),
+        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" ? import_lucide_react11.ChevronLeftIcon : import_lucide_react11.ChevronRightIcon;
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { className: cn("size-4", className2), ...chevronProps });
+        Chevron: ({ orientation, className: chevronClass, ...chevronProps }) => {
+          const Icon = orientation === "left" ? import_lucide_react11.ChevronLeftIcon : orientation === "right" ? import_lucide_react11.ChevronRightIcon : import_lucide_react11.ChevronDownIcon;
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { className: cn("size-4", chevronClass), ...chevronProps });
         },
         DayButton: CalendarDayButton
       },
@@ -2482,6 +2507,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,
@@ -2492,25 +2523,26 @@ function CalendarDayButton({
   React3.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
+  const isSingle = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "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
@@ -4578,6 +4610,673 @@ var PillSegmentedTabs = ({
   )) });
 };
 var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
+
+// src/ui/avatar-group.tsx
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var spacingClass = {
+  sm: "-space-x-2",
+  md: "-space-x-3"
+};
+function AvatarGroup({
+  className,
+  children,
+  max,
+  spacing = "sm",
+  ...props
+}) {
+  const items = React7.Children.toArray(children);
+  const overflow = typeof max === "number" ? items.length - max : 0;
+  const visible = typeof max === "number" ? items.slice(0, max) : items;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "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__ */ (0, import_jsx_runtime52.jsxs)(
+          "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
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+function Stepper({
+  steps,
+  current,
+  orientation = "horizontal",
+  className,
+  ...props
+}) {
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    "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__ */ (0, import_jsx_runtime53.jsxs)(
+          "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__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("flex items-center gap-2", isVertical && "flex-col"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  "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__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react19.CheckIcon, { className: "size-3.5", "aria-hidden": true }) : index + 1
+                  }
+                ),
+                !last ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  "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__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("min-w-0", isVertical && "pb-4"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  "p",
+                  {
+                    className: cn(
+                      "truncate text-sm font-medium",
+                      active ? "text-foreground" : "text-muted-foreground"
+                    ),
+                    children: step.label
+                  }
+                ),
+                step.description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: step.description }) : null
+              ] })
+            ]
+          },
+          step.id
+        );
+      })
+    }
+  );
+}
+
+// src/ui/timeline.tsx
+var import_jsx_runtime54 = require("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__ */ (0, import_jsx_runtime54.jsx)("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__ */ (0, import_jsx_runtime54.jsxs)("li", { className: "relative flex gap-3 pb-5 last:pb-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          "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__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: "w-px flex-1 bg-border" }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-0 flex-1 pb-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-medium text-foreground", children: item.title }),
+          item.meta ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: item.meta }) : null
+        ] }),
+        item.description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "mt-0.5 text-sm text-muted-foreground", children: item.description }) : null
+      ] })
+    ] }, item.id);
+  }) });
+}
+
+// src/ui/rating.tsx
+var React8 = __toESM(require("react"), 1);
+var import_lucide_react20 = require("lucide-react");
+var import_jsx_runtime55 = require("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] = React8.useState(defaultValue);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp : uncontrolled;
+  const [hover, setHover] = React8.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__ */ (0, import_jsx_runtime55.jsx)(
+      "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__ */ (0, import_jsx_runtime55.jsx)(
+          import_lucide_react20.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__ */ (0, import_jsx_runtime55.jsx)(
+    "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__ */ (0, import_jsx_runtime55.jsx)(
+          "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__ */ (0, import_jsx_runtime55.jsx)(
+              import_lucide_react20.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
+var React9 = __toESM(require("react"), 1);
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime56 = require("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] = React9.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__ */ (0, import_jsx_runtime56.jsxs)(
+    "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__ */ (0, import_jsx_runtime56.jsx)(
+          "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__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react21.MinusIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "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__ */ (0, import_jsx_runtime56.jsx)(
+          "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__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react21.PlusIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/ui/tag-input.tsx
+var React10 = __toESM(require("react"), 1);
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+function TagInput({
+  value: valueProp,
+  defaultValue = [],
+  onChange,
+  placeholder,
+  separators = ["Enter", ","],
+  dedupe = true,
+  max,
+  disabled,
+  ariaLabel,
+  className,
+  inputClassName
+}) {
+  const [uncontrolled, setUncontrolled] = React10.useState(defaultValue);
+  const isControlled = valueProp !== void 0;
+  const tags = isControlled ? valueProp : uncontrolled;
+  const [draft, setDraft] = React10.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__ */ (0, import_jsx_runtime57.jsxs)(
+    "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__ */ (0, import_jsx_runtime57.jsxs)(
+          "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__ */ (0, import_jsx_runtime57.jsx)(
+                "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__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react22.XIcon, { className: "size-3", "aria-hidden": true })
+                }
+              )
+            ]
+          },
+          `${tag}-${index}`
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          "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
+var import_lucide_react23 = require("lucide-react");
+var import_jsx_runtime58 = require("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__ */ (0, import_jsx_runtime58.jsxs)(
+    "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__ */ (0, import_jsx_runtime58.jsx)("span", { "data-banner-icon": true, className: "mt-0.5 shrink-0 [&_svg]:size-4", children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "font-medium", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: cn("text-muted-foreground", title && "mt-0.5"), children }) : null
+        ] }),
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null,
+        onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          "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__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react23.XIcon, { className: "size-4", "aria-hidden": true })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/ui/copy-button.tsx
+var React11 = __toESM(require("react"), 1);
+var import_lucide_react24 = require("lucide-react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+function CopyButton({
+  value,
+  timeout = 1500,
+  onCopied,
+  className,
+  children,
+  onClick,
+  ...props
+}) {
+  const [copied, setCopied] = React11.useState(false);
+  const timer = React11.useRef(void 0);
+  React11.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 ? import_lucide_react24.CheckIcon : import_lucide_react24.CopyIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    "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__ */ (0, import_jsx_runtime59.jsx)(Icon, { className: "size-4 shrink-0", "aria-hidden": true }),
+        children
+      ]
+    }
+  );
+}
+
+// src/ui/snippet.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function Snippet({
+  children,
+  symbol,
+  hideCopy = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+    "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__ */ (0, import_jsx_runtime60.jsx)("span", { "aria-hidden": true, className: "select-none text-muted-foreground", children: symbol }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("code", { className: "min-w-0 flex-1 truncate text-foreground", children }),
+        hideCopy ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CopyButton, { value: children, className: "size-7 shrink-0" })
+      ]
+    }
+  );
+}
+
+// src/ui/circular-progress.tsx
+var import_jsx_runtime61 = require("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__ */ (0, import_jsx_runtime61.jsxs)(
+    "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__ */ (0, import_jsx_runtime61.jsxs)(
+          "svg",
+          {
+            width: size,
+            height: size,
+            viewBox: `0 0 ${size} ${size}`,
+            className: cn(toneClass[tone], indeterminate && "animate-spin"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth: thickness,
+                  className: "stroke-current opacity-15"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                "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__ */ (0, import_jsx_runtime61.jsx)("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
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AVATAR_PRIMARY_FALLBACK_CLASS,
@@ -4602,8 +5301,10 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
   AspectRatio,
   Avatar,
   AvatarFallback,
+  AvatarGroup,
   AvatarImage,
   Badge,
+  Banner,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -4628,6 +5329,7 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
   ChartTooltip,
   ChartTooltipContent,
   Checkbox,
+  CircularProgress,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
@@ -4666,6 +5368,7 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  CopyButton,
   DatePicker,
   DatePickerButton,
   DatePickerCalendar,
@@ -4741,6 +5444,7 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
   NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
+  NumberField,
   Pagination,
   PaginationContent,
   PaginationEllipsis,
@@ -4756,6 +5460,7 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
   Progress,
   RadioGroup,
   RadioGroupItem,
+  Rating,
   ScrollArea,
   ScrollBar,
   Select,
@@ -4780,7 +5485,9 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
   Shimmer,
   Skeleton,
   Slider,
+  Snippet,
   Spinner,
+  Stepper,
   Switch,
   Table,
   TableBody,
@@ -4790,8 +5497,10 @@ var MemoPillSegmentedTabs = (0, import_react3.memo)(PillSegmentedTabs);
   TableHead,
   TableHeader,
   TableRow,
+  TagInput,
   Textarea,
   TimbalV2Button,
+  Timeline,
   Toast,
   ToastAction,
   ToastClose,