@tollerud/ui 1.0.7 → 1.1.0

package/dist/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var clsx = require('clsx');
@@ -2675,22 +2676,1190 @@ function MetricBadge({ label, value }) {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "float-right text-tollerud-text-primary font-mono", children: value })
   ] });
 }
+var Divider = React2.forwardRef(
+  ({ className, orientation = "horizontal", label, ...props }, ref) => {
+    if (orientation === "vertical") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "aria-orientation": "vertical",
+          className: cn("w-px self-stretch bg-tollerud-border", className),
+          ...props
+        }
+      );
+    }
+    if (label) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "aria-orientation": "horizontal",
+          className: cn("flex items-center gap-3 text-xs text-tollerud-text-muted", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-tollerud-border" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-tollerud-border" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": "horizontal",
+        className: cn("h-px w-full bg-tollerud-border", className),
+        ...props
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+var pillVariants = {
+  outline: "bg-transparent border border-tollerud-border text-tollerud-text-secondary",
+  solid: "bg-tollerud-surface-raised text-tollerud-text-primary",
+  accent: "bg-tollerud-yellow/15 border border-tollerud-yellow/30 text-tollerud-yellow"
+};
+var Pill = React2.forwardRef(
+  ({ className, variant = "outline", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium rounded-full leading-none",
+          pillVariants[variant],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Pill.displayName = "Pill";
+var avatarSizes = {
+  sm: "h-6 w-6 text-[10px]",
+  md: "h-8 w-8 text-xs",
+  lg: "h-11 w-11 text-sm"
+};
+function initialsFrom(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+var Avatar = React2.forwardRef(
+  ({ className, src, name, fallback, size = "md", ...props }, ref) => {
+    const [errored, setErrored] = React2.useState(false);
+    const showImage = !!src && !errored;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full select-none",
+          "bg-tollerud-surface-raised text-tollerud-text-secondary font-medium",
+          "ring-1 ring-tollerud-border",
+          avatarSizes[size],
+          className
+        ),
+        ...props,
+        children: showImage ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt: name ?? "",
+              className: "h-full w-full object-cover",
+              onError: () => setErrored(true)
+            }
+          )
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": !!name, children: fallback ?? (name ? initialsFrom(name) : null) })
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarGroup = React2.forwardRef(
+  ({ className, max, size = "md", children, ...props }, ref) => {
+    const items = Array.isArray(children) ? children : [children];
+    const visible = max ? items.slice(0, max) : items;
+    const overflow = max ? items.length - max : 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center -space-x-2", className),
+        ...props,
+        children: [
+          visible.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ring-2 ring-tollerud-surface rounded-full", children: child }, i)),
+          overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "relative inline-flex shrink-0 items-center justify-center rounded-full select-none",
+                "bg-tollerud-surface-raised text-tollerud-text-muted font-medium",
+                "ring-2 ring-tollerud-surface",
+                avatarSizes[size]
+              ),
+              children: [
+                "+",
+                overflow
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+var Breadcrumb = React2.forwardRef(
+  ({ className, items, separator, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("text-sm", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-1.5 flex-wrap", children: items.map((item, i) => {
+      const isLast = i === items.length - 1;
+      const content = !isLast && (item.href || item.onClick) ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: item.href,
+          onClick: item.onClick,
+          className: "text-tollerud-text-secondary hover:text-tollerud-text-primary transition-colors duration-[150ms]",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-current": isLast ? "page" : void 0,
+          className: isLast ? "text-tollerud-text-primary font-medium" : "text-tollerud-text-secondary",
+          children: item.label
+        }
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(React2.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex items-center gap-1.5", children: content }),
+        !isLast && /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-hidden": "true", className: "flex items-center text-tollerud-text-muted", children: separator ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14 }) })
+      ] }, i);
+    }) }) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+function getPageRange(page, pageCount, siblingCount) {
+  const totalVisible = siblingCount * 2 + 5;
+  if (pageCount <= totalVisible) {
+    return Array.from({ length: pageCount }, (_, i) => i + 1);
+  }
+  const left = Math.max(page - siblingCount, 1);
+  const right = Math.min(page + siblingCount, pageCount);
+  const range = [1];
+  if (left > 2) range.push("ellipsis");
+  for (let p = left === 1 ? 2 : left; p <= (right === pageCount ? pageCount - 1 : right); p++) {
+    range.push(p);
+  }
+  if (right < pageCount - 1) range.push("ellipsis");
+  if (pageCount > 1) range.push(pageCount);
+  return range;
+}
+var navButtonClasses = "inline-flex h-8 min-w-8 items-center justify-center rounded px-2 text-sm transition-colors duration-[150ms] disabled:opacity-40 disabled:pointer-events-none";
+var Pagination = React2.forwardRef(
+  ({ className, page, pageCount, onChange, siblingCount = 1, ...props }, ref) => {
+    const range = getPageRange(page, pageCount, siblingCount);
+    return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ref, "aria-label": "Pagination", className: cn("flex items-center gap-1", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous page",
+          disabled: page <= 1,
+          onClick: () => onChange(page - 1),
+          className: cn(navButtonClasses, "text-tollerud-text-secondary hover:bg-tollerud-surface-hover"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
+        }
+      ),
+      range.map(
+        (item, i) => item === "ellipsis" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex h-8 w-8 items-center justify-center text-tollerud-text-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 16 }) }, `e-${i}`) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-current": item === page ? "page" : void 0,
+            onClick: () => onChange(item),
+            className: cn(
+              navButtonClasses,
+              item === page ? "bg-tollerud-yellow text-tollerud-noir-black font-medium" : "text-tollerud-text-secondary hover:bg-tollerud-surface-hover"
+            ),
+            children: item
+          },
+          item
+        )
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next page",
+          disabled: page >= pageCount,
+          onClick: () => onChange(page + 1),
+          className: cn(navButtonClasses, "text-tollerud-text-secondary hover:bg-tollerud-surface-hover"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
+        }
+      )
+    ] });
+  }
+);
+Pagination.displayName = "Pagination";
+var Segmented = React2.forwardRef(
+  ({ className, options, value, onChange, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        className: cn(
+          "inline-flex items-center gap-0.5 rounded-lg p-1 bg-tollerud-surface-raised border border-tollerud-border",
+          className
+        ),
+        ...props,
+        children: options.map((opt) => {
+          const active = opt.value === value;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": active,
+              disabled: opt.disabled,
+              onClick: () => !opt.disabled && onChange(opt.value),
+              className: cn(
+                "rounded-md font-medium transition-colors duration-[150ms]",
+                size === "sm" ? "px-2.5 py-1 text-xs" : "px-3.5 py-1.5 text-sm",
+                active ? "bg-tollerud-yellow text-tollerud-noir-black" : "text-tollerud-text-secondary hover:text-tollerud-text-primary",
+                opt.disabled && "opacity-40 pointer-events-none"
+              ),
+              children: opt.label
+            },
+            opt.value
+          );
+        })
+      }
+    );
+  }
+);
+Segmented.displayName = "Segmented";
+var Stepper = React2.forwardRef(
+  ({ className, steps, current, orientation = "horizontal", ...props }, ref) => {
+    const vertical = orientation === "vertical";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "ol",
+      {
+        ref,
+        className: cn("flex", vertical ? "flex-col gap-0" : "items-start gap-0 w-full", className),
+        ...props,
+        children: steps.map((step, i) => {
+          const status = i < current ? "complete" : i === current ? "active" : "upcoming";
+          const isLast = i === steps.length - 1;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "li",
+            {
+              className: cn(
+                "flex",
+                vertical ? "flex-row gap-3" : "flex-col flex-1 gap-2",
+                !vertical && !isLast && "pr-2"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center", vertical ? "flex-col" : "flex-row gap-2 w-full"), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-medium transition-colors duration-[150ms]",
+                        status === "complete" && "bg-tollerud-yellow text-tollerud-noir-black",
+                        status === "active" && "border-2 border-tollerud-yellow text-tollerud-yellow",
+                        status === "upcoming" && "border border-tollerud-border text-tollerud-text-muted"
+                      ),
+                      children: status === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14 }) : i + 1
+                    }
+                  ),
+                  !isLast && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: cn(
+                        "bg-tollerud-border",
+                        vertical ? "w-px flex-1 my-1" : "h-px flex-1",
+                        status === "complete" && "bg-tollerud-yellow"
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", vertical && "pb-6"), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-sm font-medium",
+                        status === "upcoming" ? "text-tollerud-text-muted" : "text-tollerud-text-primary"
+                      ),
+                      children: step.label
+                    }
+                  ),
+                  step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-tollerud-text-muted", children: step.description })
+                ] })
+              ]
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+var Panel = React2.forwardRef(
+  ({ className, title, description, actions, children, ...props }, ref) => {
+    const hasHeader = title || description || actions;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border border-tollerud-border bg-tollerud-surface overflow-hidden",
+          className
+        ),
+        ...props,
+        children: [
+          hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 px-5 py-4 border-b border-tollerud-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-tollerud-text-primary", children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-tollerud-text-muted", children: description })
+            ] }),
+            actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions })
+          ] }),
+          children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4", children })
+        ]
+      }
+    );
+  }
+);
+Panel.displayName = "Panel";
+var meterTones = {
+  default: "bg-tollerud-yellow",
+  success: "bg-tollerud-success",
+  warning: "bg-tollerud-warning",
+  error: "bg-tollerud-error"
+};
+var Meter = React2.forwardRef(
+  ({ className, value, max = 100, label, showValue, tone = "default", ...props }, ref) => {
+    const pct = Math.min(100, Math.max(0, value / max * 100));
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props, children: [
+      (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-tollerud-text-secondary", children: label }),
+        showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-tollerud-text-muted tabular-nums", children: [
+          Math.round(pct),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "meter",
+          "aria-valuenow": value,
+          "aria-valuemin": 0,
+          "aria-valuemax": max,
+          className: "h-1.5 w-full overflow-hidden rounded-full bg-tollerud-surface-raised",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("h-full rounded-full transition-[width] duration-300", meterTones[tone]),
+              style: { width: `${pct}%` }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Meter.displayName = "Meter";
+var FormRow = React2.forwardRef(
+  ({ className, label, description, error, required, htmlFor, children, ...props }, ref) => {
+    const autoId = React2.useId();
+    const descriptionId = description ? `${autoId}-description` : void 0;
+    const errorId = error ? `${autoId}-error` : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor, className: "text-sm font-medium text-tollerud-text-primary", children: [
+        label,
+        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-tollerud-error", children: "*" })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descriptionId, className: "text-xs text-tollerud-text-muted", children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || void 0, children }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: "text-xs text-tollerud-error", children: error })
+    ] });
+  }
+);
+FormRow.displayName = "FormRow";
+var PricingCard = React2.forwardRef(
+  ({
+    className,
+    name,
+    price,
+    period,
+    description,
+    features = [],
+    ctaLabel = "Get started",
+    onCtaClick,
+    featured,
+    badge,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-5 rounded-xl border p-6",
+          featured ? "border-tollerud-yellow bg-tollerud-yellow/[0.04] shadow-[0_0_0_1px_rgba(255,255,0,0.15)]" : "border-tollerud-border bg-tollerud-surface",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex w-fit items-center rounded-full bg-tollerud-yellow/15 px-2.5 py-0.5 text-xs font-medium text-tollerud-yellow", children: badge }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-medium text-tollerud-text-primary", children: name }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-tollerud-text-muted", children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-semibold tracking-tight text-tollerud-text-primary", children: price }),
+            period && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-tollerud-text-muted", children: period })
+          ] }),
+          features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2.5", children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2.5 text-sm text-tollerud-text-secondary", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16, className: "mt-0.5 shrink-0 text-tollerud-yellow" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature })
+          ] }, i)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: featured ? "primary" : "secondary", onClick: onCtaClick, className: "mt-auto w-full", children: ctaLabel })
+        ]
+      }
+    );
+  }
+);
+PricingCard.displayName = "PricingCard";
+var AccordionContext = React2.createContext(null);
+function useAccordionContext(component) {
+  const ctx = React2.useContext(AccordionContext);
+  if (!ctx) throw new Error(`<${component}> must be used within <Accordion>`);
+  return ctx;
+}
+var Accordion = React2.forwardRef(
+  ({ className, multiple = false, defaultOpen, children, ...props }, ref) => {
+    const [openItems, setOpenItems] = React2.useState(() => {
+      if (!defaultOpen) return /* @__PURE__ */ new Set();
+      return new Set(Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen]);
+    });
+    const toggle = (value) => {
+      setOpenItems((prev) => {
+        const next = multiple ? new Set(prev) : /* @__PURE__ */ new Set();
+        if (prev.has(value)) {
+          next.delete(value);
+        } else {
+          next.add(value);
+        }
+        return next;
+      });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: { openItems, toggle }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col divide-y divide-tollerud-border rounded-lg border border-tollerud-border", className), ...props, children }) });
+  }
+);
+Accordion.displayName = "Accordion";
+var AccordionItemContext = React2.createContext(null);
+var AccordionItem = React2.forwardRef(
+  ({ className, value, children, ...props }, ref) => {
+    const { openItems } = useAccordionContext("AccordionItem");
+    const autoId = React2.useId();
+    const open = openItems.has(value);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionItemContext.Provider,
+      {
+        value: { value, open, triggerId: `${autoId}-trigger`, contentId: `${autoId}-content` },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("first:rounded-t-lg last:rounded-b-lg", className), ...props, children })
+      }
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+function useAccordionItemContext(component) {
+  const ctx = React2.useContext(AccordionItemContext);
+  if (!ctx) throw new Error(`<${component}> must be used within <AccordionItem>`);
+  return ctx;
+}
+var AccordionTrigger = React2.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { toggle } = useAccordionContext("AccordionTrigger");
+    const { value, open, triggerId, contentId } = useAccordionItemContext("AccordionTrigger");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        id: triggerId,
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": contentId,
+        onClick: () => toggle(value),
+        className: cn(
+          "flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left text-sm font-medium",
+          "text-tollerud-text-primary hover:bg-tollerud-surface-hover transition-colors duration-[150ms]",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              size: 16,
+              className: cn("shrink-0 text-tollerud-text-muted transition-transform duration-[200ms]", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React2.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { open, triggerId, contentId } = useAccordionItemContext("AccordionContent");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        id: contentId,
+        role: "region",
+        "aria-labelledby": triggerId,
+        hidden: !open,
+        className: cn("px-4 pb-4 text-sm text-tollerud-text-secondary", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+AccordionContent.displayName = "AccordionContent";
+var Slider = React2.forwardRef(
+  ({ className, label, showValue, id: idProp, value, defaultValue, min = 0, max = 100, onChange, ...props }, ref) => {
+    const autoId = React2.useId();
+    const id = idProp ?? autoId;
+    const current = value ?? defaultValue ?? min;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "font-medium text-tollerud-text-muted", children: label }),
+        showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-tollerud-text-secondary tabular-nums", children: current })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          id,
+          type: "range",
+          min,
+          max,
+          value,
+          defaultValue,
+          onChange: (e) => onChange?.(Number(e.target.value)),
+          className: cn(
+            "h-1.5 w-full cursor-pointer appearance-none rounded-full bg-tollerud-surface-raised accent-tollerud-yellow",
+            "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4",
+            "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-tollerud-yellow [&::-webkit-slider-thumb]:cursor-pointer",
+            "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-tollerud-noir-black",
+            "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full",
+            "[&::-moz-range-thumb]:bg-tollerud-yellow [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-tollerud-noir-black [&::-moz-range-thumb]:cursor-pointer",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tollerud-yellow/50",
+            "disabled:opacity-40 disabled:pointer-events-none",
+            className
+          ),
+          ...props
+        }
+      )
+    ] });
+  }
+);
+Slider.displayName = "Slider";
+var PasswordInput = React2.forwardRef(
+  ({ className, label, error, id, ...props }, ref) => {
+    const [visible, setVisible] = React2.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "text-xs font-medium text-tollerud-text-muted", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            id,
+            type: visible ? "text" : "password",
+            className: cn(
+              "w-full font-sans text-base px-3 py-2 pr-10 rounded",
+              "bg-tollerud-surface-raised border",
+              "text-tollerud-text-primary",
+              "placeholder:text-tollerud-text-muted",
+              "transition-[border-color] duration-[150ms]",
+              "focus:outline-none focus:border-tollerud-yellow focus:shadow-[0_0_0_1px_#E8D500]",
+              error ? "border-tollerud-error" : "border-tollerud-border",
+              className
+            ),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setVisible((v) => !v),
+            "aria-label": visible ? "Hide password" : "Show password",
+            "aria-pressed": visible,
+            className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-tollerud-text-muted hover:text-tollerud-text-secondary transition-colors duration-[150ms]",
+            children: visible ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 16 })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-tollerud-error mt-0.5", children: error })
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var defaultFilter = (option, query) => option.label.toLowerCase().includes(query.toLowerCase());
+function Combobox({
+  options,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder = "Search\u2026",
+  label,
+  error,
+  filter = defaultFilter,
+  className,
+  disabled
+}) {
+  const id = React2.useId();
+  const rootRef = React2.useRef(null);
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = React2.useState(defaultValue);
+  const value = isControlled ? valueProp : internalValue;
+  const [open, setOpen] = React2.useState(false);
+  const [query, setQuery] = React2.useState("");
+  const [activeIndex, setActiveIndex] = React2.useState(0);
+  const selected = options.find((o) => o.value === value);
+  const filtered = React2.useMemo(() => {
+    if (!query) return options;
+    return options.filter((o) => filter(o, query));
+  }, [options, query, filter]);
+  React2.useEffect(() => {
+    if (!open) return;
+    function onClickOutside(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    function onResize() {
+      setOpen(false);
+      setQuery("");
+    }
+    document.addEventListener("mousedown", onClickOutside);
+    window.addEventListener("resize", onResize);
+    return () => {
+      document.removeEventListener("mousedown", onClickOutside);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open]);
+  const commit = (option) => {
+    if (option.disabled) return;
+    if (!isControlled) setInternalValue(option.value);
+    onChange?.(option.value);
+    setOpen(false);
+    setQuery("");
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setOpen(true);
+      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const opt = filtered[activeIndex];
+      if (opt) commit(opt);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+      setQuery("");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("relative flex flex-col gap-1", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "text-xs font-medium text-tollerud-text-muted", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id,
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-autocomplete": "list",
+          "aria-controls": `${id}-listbox`,
+          disabled,
+          value: open ? query : selected?.label ?? "",
+          placeholder: selected ? selected.label : placeholder,
+          onFocus: () => {
+            setOpen(true);
+            setActiveIndex(0);
+          },
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setActiveIndex(0);
+            if (!open) setOpen(true);
+          },
+          onKeyDown,
+          className: cn(
+            "w-full font-sans text-base px-3 py-2 pr-9 rounded",
+            "bg-tollerud-surface-raised border",
+            "text-tollerud-text-primary placeholder:text-tollerud-text-muted",
+            "transition-[border-color] duration-[150ms]",
+            "focus:outline-none focus:border-tollerud-yellow focus:shadow-[0_0_0_1px_#E8D500]",
+            error ? "border-tollerud-error" : "border-tollerud-border",
+            disabled && "opacity-50 pointer-events-none"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.ChevronDown,
+        {
+          size: 15,
+          className: cn(
+            "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-tollerud-text-muted transition-transform duration-[150ms]",
+            open && "rotate-180"
+          )
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "ul",
+      {
+        id: `${id}-listbox`,
+        role: "listbox",
+        className: "absolute top-full z-20 mt-1 max-h-64 w-full overflow-auto rounded-lg border border-tollerud-border bg-tollerud-surface-overlay py-1 shadow-lg",
+        children: [
+          filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-2 text-sm text-tollerud-text-muted", children: "No results" }),
+          filtered.map((option, i) => {
+            const isSelected = option.value === value;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  commit(option);
+                },
+                onMouseEnter: () => setActiveIndex(i),
+                className: cn(
+                  "flex items-center justify-between gap-2 px-3 py-2 text-sm cursor-pointer",
+                  i === activeIndex ? "bg-tollerud-surface-hover text-tollerud-text-primary" : "text-tollerud-text-secondary",
+                  option.disabled && "opacity-40 pointer-events-none"
+                ),
+                children: [
+                  option.label,
+                  isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, className: "text-tollerud-yellow" })
+                ]
+              },
+              option.value
+            );
+          })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-tollerud-error mt-0.5", children: error })
+  ] });
+}
+Combobox.displayName = "Combobox";
+var defaultFormat = (date) => date.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function buildCalendarGrid(monthDate) {
+  const first = startOfMonth(monthDate);
+  const startWeekday = first.getDay();
+  const daysInMonth = new Date(monthDate.getFullYear(), monthDate.getMonth() + 1, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < startWeekday; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(monthDate.getFullYear(), monthDate.getMonth(), d));
+  return cells;
+}
+var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function DatePicker({
+  value: valueProp,
+  defaultValue = null,
+  onChange,
+  label,
+  error,
+  placeholder = "Select a date",
+  formatDate = defaultFormat,
+  className,
+  disabled
+}) {
+  const id = React2.useId();
+  const rootRef = React2.useRef(null);
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = React2.useState(defaultValue);
+  const value = isControlled ? valueProp ?? null : internalValue;
+  const [open, setOpen] = React2.useState(false);
+  const [viewMonth, setViewMonth] = React2.useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
+  const cells = React2.useMemo(() => buildCalendarGrid(viewMonth), [viewMonth]);
+  React2.useEffect(() => {
+    if (!open) return;
+    function onClickOutside(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    }
+    function onResize() {
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", onClickOutside);
+    window.addEventListener("resize", onResize);
+    return () => {
+      document.removeEventListener("mousedown", onClickOutside);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open]);
+  const select = (date) => {
+    if (!isControlled) setInternalValue(date);
+    onChange?.(date);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("relative flex flex-col gap-1", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "text-xs font-medium text-tollerud-text-muted", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        id,
+        type: "button",
+        disabled,
+        onClick: () => {
+          setViewMonth(startOfMonth(value ?? /* @__PURE__ */ new Date()));
+          setOpen((o) => !o);
+        },
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        className: cn(
+          "flex w-full items-center justify-between gap-2 rounded px-3 py-2 text-left text-base",
+          "bg-tollerud-surface-raised border",
+          "transition-[border-color] duration-[150ms]",
+          "focus:outline-none focus:border-tollerud-yellow focus:shadow-[0_0_0_1px_#E8D500]",
+          error ? "border-tollerud-error" : "border-tollerud-border",
+          value ? "text-tollerud-text-primary" : "text-tollerud-text-muted",
+          disabled && "opacity-50 pointer-events-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: value ? formatDate(value) : placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 15, className: "text-tollerud-text-muted" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Choose date",
+        className: "absolute top-full z-20 mt-1 w-72 rounded-lg border border-tollerud-border bg-tollerud-surface-overlay p-3 shadow-lg",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Previous month",
+                onClick: () => setViewMonth((m) => new Date(m.getFullYear(), m.getMonth() - 1, 1)),
+                className: "rounded p-1 text-tollerud-text-secondary hover:bg-tollerud-surface-hover",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-tollerud-text-primary", children: viewMonth.toLocaleDateString(void 0, { month: "long", year: "numeric" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Next month",
+                onClick: () => setViewMonth((m) => new Date(m.getFullYear(), m.getMonth() + 1, 1)),
+                className: "rounded p-1 text-tollerud-text-secondary hover:bg-tollerud-surface-hover",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
+            WEEKDAYS.map((d) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-tollerud-text-muted py-1", children: d }, d)),
+            cells.map((date, i) => {
+              if (!date) return /* @__PURE__ */ jsxRuntime.jsx("span", {}, i);
+              const selected = value ? isSameDay(date, value) : false;
+              const today = isSameDay(date, /* @__PURE__ */ new Date());
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => select(date),
+                  className: cn(
+                    "h-8 w-8 rounded-full text-sm transition-colors duration-[150ms]",
+                    selected ? "bg-tollerud-yellow text-tollerud-noir-black font-medium" : "text-tollerud-text-secondary hover:bg-tollerud-surface-hover",
+                    !selected && today && "ring-1 ring-tollerud-yellow/40"
+                  ),
+                  children: date.getDate()
+                },
+                i
+              );
+            })
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-tollerud-error mt-0.5", children: error })
+  ] });
+}
+DatePicker.displayName = "DatePicker";
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function FileUpload({
+  label,
+  description,
+  error,
+  accept,
+  multiple,
+  onFilesChange,
+  className,
+  disabled
+}) {
+  const id = React2.useId();
+  const inputRef = React2.useRef(null);
+  const [files, setFiles] = React2.useState([]);
+  const [dragging, setDragging] = React2.useState(false);
+  const setAndNotify = (next) => {
+    setFiles(next);
+    onFilesChange?.(next);
+  };
+  const addFiles = (incoming) => {
+    if (!incoming || incoming.length === 0) return;
+    const incomingArr = Array.from(incoming);
+    setAndNotify(multiple ? [...files, ...incomingArr] : [incomingArr[0]]);
+  };
+  const removeAt = (index) => {
+    setAndNotify(files.filter((_, i) => i !== index));
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    addFiles(e.dataTransfer.files);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "text-xs font-medium text-tollerud-text-muted", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled,
+        onClick: () => !disabled && inputRef.current?.click(),
+        onKeyDown: (e) => {
+          if (!disabled && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            inputRef.current?.click();
+          }
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          if (!disabled) setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop,
+        className: cn(
+          "flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed px-6 py-8 text-center cursor-pointer transition-colors duration-[150ms]",
+          dragging ? "border-tollerud-yellow bg-tollerud-yellow/[0.06]" : "border-tollerud-border bg-tollerud-surface-raised hover:border-tollerud-text-secondary",
+          error && "border-tollerud-error",
+          disabled && "opacity-50 pointer-events-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { size: 20, className: "text-tollerud-text-muted" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-tollerud-text-secondary", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-tollerud-yellow", children: "Click to upload" }),
+            " or drag and drop"
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-tollerud-text-muted", children: description }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              type: "file",
+              accept,
+              multiple,
+              disabled,
+              onChange: (e) => addFiles(e.target.files),
+              className: "sr-only"
+            }
+          )
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: files.map((file, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        className: "flex items-center gap-2.5 rounded-md border border-tollerud-border bg-tollerud-surface-raised px-3 py-2 text-sm",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { size: 15, className: "shrink-0 text-tollerud-text-muted" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-tollerud-text-primary", children: file.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-tollerud-text-muted", children: formatBytes(file.size) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${file.name}`,
+              onClick: () => removeAt(i),
+              className: "shrink-0 text-tollerud-text-muted hover:text-tollerud-text-primary transition-colors duration-[150ms]",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 })
+            }
+          )
+        ]
+      },
+      `${file.name}-${i}`
+    )) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-tollerud-error", children: error })
+  ] });
+}
+FileUpload.displayName = "FileUpload";
+function TagInput({
+  value: valueProp,
+  defaultValue = [],
+  onChange,
+  label,
+  error,
+  placeholder = "Add a tag\u2026",
+  max,
+  className,
+  disabled
+}) {
+  const id = React2.useId();
+  const isControlled = valueProp !== void 0;
+  const [internalTags, setInternalTags] = React2.useState(defaultValue);
+  const tags = isControlled ? valueProp : internalTags;
+  const [draft, setDraft] = React2.useState("");
+  const setAndNotify = (next) => {
+    if (!isControlled) setInternalTags(next);
+    onChange?.(next);
+  };
+  const addTag = (raw) => {
+    const tag = raw.trim();
+    if (!tag || tags.includes(tag)) return;
+    if (max && tags.length >= max) return;
+    setAndNotify([...tags, tag]);
+    setDraft("");
+  };
+  const removeTag = (index) => {
+    setAndNotify(tags.filter((_, i) => i !== index));
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      addTag(draft);
+    } else if (e.key === "Backspace" && draft === "" && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+  const atMax = max ? tags.length >= max : false;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "text-xs font-medium text-tollerud-text-muted", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-wrap items-center gap-1.5 rounded px-2.5 py-1.5",
+          "bg-tollerud-surface-raised border",
+          "transition-[border-color] duration-[150ms]",
+          "focus-within:border-tollerud-yellow focus-within:shadow-[0_0_0_1px_#E8D500]",
+          error ? "border-tollerud-error" : "border-tollerud-border",
+          disabled && "opacity-50 pointer-events-none"
+        ),
+        children: [
+          tags.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded-full bg-tollerud-surface-hover px-2.5 py-0.5 text-xs font-medium text-tollerud-text-primary",
+              children: [
+                tag,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${tag}`,
+                    onClick: () => removeTag(i),
+                    className: "text-tollerud-text-muted hover:text-tollerud-text-primary transition-colors duration-[150ms]",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 12 })
+                  }
+                )
+              ]
+            },
+            `${tag}-${i}`
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              value: draft,
+              disabled: disabled || atMax,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown,
+              onBlur: () => addTag(draft),
+              placeholder: atMax ? "" : placeholder,
+              className: cn(
+                "min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-tollerud-text-primary",
+                "placeholder:text-tollerud-text-muted focus:outline-none"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-tollerud-error mt-0.5", children: error })
+  ] });
+}
+TagInput.displayName = "TagInput";
 
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
 exports.ActionDiff = ActionDiff;
 exports.ActionRow = ActionRow;
 exports.Alert = Alert;
 exports.AlertInbox = AlertInbox;
 exports.ApprovalCard = ApprovalCard;
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
 exports.BackupStatusPanel = BackupStatusPanel;
 exports.Badge = Badge;
 exports.BentoDashboard = BentoDashboard;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.CodeBlock = CodeBlock;
+exports.Combobox = Combobox;
 exports.CommandMenu = CommandMenu;
 exports.Container = Container;
 exports.DataTable = DataTable;
+exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -2701,6 +3870,7 @@ exports.DialogOverlay = DialogOverlay;
 exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
+exports.Divider = Divider;
 exports.DockerStackCard = DockerStackCard;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuContent = DropdownMenuContent;
@@ -2714,18 +3884,27 @@ exports.EmptyDescription = EmptyDescription;
 exports.EmptyHeader = EmptyHeader;
 exports.EmptyIcon = EmptyIcon;
 exports.EmptyTitle = EmptyTitle;
+exports.FileUpload = FileUpload;
 exports.Footer = Footer;
+exports.FormRow = FormRow;
 exports.GlowCard = GlowCard;
 exports.HostCard = HostCard;
 exports.IncidentCard = IncidentCard;
 exports.Input = Input;
 exports.Kbd = Kbd;
 exports.LogViewer = LogViewer;
+exports.Meter = Meter;
 exports.NoirGlowBackground = NoirGlowBackground;
+exports.Pagination = Pagination;
+exports.Panel = Panel;
+exports.PasswordInput = PasswordInput;
+exports.Pill = Pill;
+exports.PricingCard = PricingCard;
 exports.Progress = Progress;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.RollbackPlan = RollbackPlan;
+exports.Segmented = Segmented;
 exports.Select = Select;
 exports.ServiceHealthCard = ServiceHealthCard;
 exports.Sheet = Sheet;
@@ -2736,13 +3915,16 @@ exports.SheetHeader = SheetHeader;
 exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
 exports.Skeleton = Skeleton;
+exports.Slider = Slider;
 exports.StatCard = StatCard;
 exports.StatusDot = StatusDot;
+exports.Stepper = Stepper;
 exports.Switch = Switch;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
+exports.TagInput = TagInput;
 exports.Textarea = Textarea;
 exports.Timeline = Timeline;
 exports.Toaster = Toaster;