@crimson_/altarev 1.1.0

package/dist/index.js

@@ -0,0 +1,2951 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { createContext, useRef, useState, useId, useEffect, cloneElement, Fragment, Children, useCallback, isValidElement, useContext, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { DayPicker } from 'react-day-picker';
+
+// src/lib/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Container({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mx-auto w-full max-w-container px-4 md:px-6 lg:px-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var accordion = cva(
+  "group rounded-[8px] bg-surface text-text border border-border [&[open]>summary>svg]:rotate-180",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm",
+        xl: "text-md"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var PAD = { sm: "p-2", md: "px-3 py-2", lg: "p-3", xl: "p-4" };
+var summary = cva(
+  "flex cursor-pointer list-none items-center gap-2 font-bold marker:hidden outline-none focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2",
+  {
+    variants: { size: PAD },
+    defaultVariants: { size: "md" }
+  }
+);
+function Accordion({
+  size = "md",
+  title,
+  leading,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("details", { className: cn(accordion({ size }), className), ...props, children: [
+    /* @__PURE__ */ jsxs("summary", { className: summary({ size }), children: [
+      leading,
+      /* @__PURE__ */ jsx("span", { className: "flex-1", children: title }),
+      /* @__PURE__ */ jsx(ChevronDown, {})
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
+    /* @__PURE__ */ jsx("div", { className: PAD[size ?? "md"], children })
+  ] });
+}
+function ChevronDown() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-6 shrink-0 transition-transform duration-200 ease-in-out",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+var alert = cva(
+  "flex items-center gap-3 rounded-[8px] p-4 text-sm [&>svg]:size-6 [&>svg]:shrink-0",
+  {
+    variants: {
+      status: {
+        success: "",
+        error: "",
+        warning: "",
+        info: ""
+      },
+      styleVariant: {
+        colourful: "",
+        outline: "border",
+        generic: "bg-surface text-text"
+      }
+    },
+    compoundVariants: [
+      {
+        styleVariant: "colourful",
+        status: "success",
+        class: "bg-success-tint text-success"
+      },
+      {
+        styleVariant: "colourful",
+        status: "error",
+        class: "bg-error-tint text-error"
+      },
+      {
+        styleVariant: "colourful",
+        status: "warning",
+        class: "bg-warning-tint text-warning"
+      },
+      {
+        styleVariant: "colourful",
+        status: "info",
+        class: "bg-info-tint text-info"
+      },
+      {
+        styleVariant: "outline",
+        status: "success",
+        class: "border-success text-success"
+      },
+      {
+        styleVariant: "outline",
+        status: "error",
+        class: "border-error text-error"
+      },
+      {
+        styleVariant: "outline",
+        status: "warning",
+        class: "border-warning text-warning"
+      },
+      {
+        styleVariant: "outline",
+        status: "info",
+        class: "border-info text-info"
+      }
+    ],
+    defaultVariants: { status: "info", styleVariant: "generic" }
+  }
+);
+function Alert({
+  status = "info",
+  variant = "generic",
+  icon,
+  trailing,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: cn(alert({ status, styleVariant: variant }), className),
+      ...props,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        trailing
+      ]
+    }
+  );
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-[374px] max-w-full flex-col items-center gap-2 px-4 text-center",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "flex size-20 items-center justify-center [&_svg]:size-20", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pb-6 text-text", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold leading-8", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-base leading-6 text-text", children: description })
+        ] }),
+        children && /* @__PURE__ */ jsx("div", { className: "flex items-start justify-center gap-3", children })
+      ]
+    }
+  );
+}
+var avatar = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-visible rounded-full bg-surface font-bold text-text select-none",
+  {
+    variants: {
+      size: {
+        xs: "size-6 text-2xs",
+        sm: "size-8 text-xs",
+        md: "size-10 text-sm",
+        lg: "size-12 text-md",
+        xl: "size-14 text-md",
+        "2xl": "size-16 text-xl"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var badgeCorner = {
+  tr: "top-0 right-0",
+  tl: "top-0 left-0",
+  br: "bottom-0 right-0",
+  bl: "bottom-0 left-0"
+};
+var badgeSize = {
+  xs: "size-1 border-2",
+  sm: "size-2 border-2",
+  md: "size-2 border-2",
+  lg: "size-3 border-4",
+  xl: "size-3 border-4",
+  "2xl": "size-3 border-4"
+};
+function Avatar({
+  size = "md",
+  src,
+  alt = "",
+  children,
+  badge,
+  badgeColor = "bg-success",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn(avatar({ size }), className), ...props, children: [
+    src ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        className: "absolute inset-0 size-full rounded-full object-cover"
+      }
+    ) : children,
+    badge && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute rounded-full border-background",
+          badgeCorner[badge],
+          badgeSize[size ?? "md"],
+          badgeColor
+        )
+      }
+    )
+  ] });
+}
+var cell = cva(
+  "size-14 w-12 rounded-[8px] border bg-surface text-center text-sm text-text outline-none transition-shadow focus:border-[1.5px] focus:border-primary focus:ring-2 focus:ring-primary-tint",
+  {
+    variants: {
+      error: {
+        true: "border-[1.5px] border-[var(--color-input-error)] text-[var(--color-input-error)] focus:border-[var(--color-input-error)] focus:ring-0",
+        false: "border-border"
+      }
+    },
+    defaultVariants: { error: false }
+  }
+);
+function splitCode(raw, length) {
+  const digits = raw.replace(/\D/g, "").slice(0, length).split("");
+  return Array.from({ length }, (_, i) => digits[i] ?? "");
+}
+function AuthCode({
+  value,
+  onChange,
+  length = 6,
+  error = false,
+  disabled,
+  className
+}) {
+  const refs = useRef([]);
+  const cells = splitCode(value, length);
+  const hasError = Boolean(error);
+  const setCharAt = (index, char) => {
+    const next = cells.slice();
+    next[index] = char;
+    onChange(next.join(""));
+  };
+  const focusCell = (index) => {
+    const el = refs.current[Math.max(0, Math.min(index, length - 1))];
+    el?.focus();
+    el?.select();
+  };
+  const handleInput = (index, raw) => {
+    const char = raw.replace(/\D/g, "").slice(-1);
+    if (!char) return;
+    setCharAt(index, char);
+    if (index < length - 1) focusCell(index + 1);
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      if (cells[index]) {
+        setCharAt(index, "");
+      } else if (index > 0) {
+        setCharAt(index - 1, "");
+        focusCell(index - 1);
+      }
+    } else if (e.key === "ArrowLeft") {
+      focusCell(index - 1);
+    } else if (e.key === "ArrowRight") {
+      focusCell(index + 1);
+    }
+  };
+  const handlePaste = (index, e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "");
+    if (!pasted) return;
+    const next = cells.slice();
+    for (let i = 0; i < pasted.length && index + i < length; i++) {
+      next[index + i] = pasted[i];
+    }
+    onChange(next.join(""));
+    focusCell(index + pasted.length);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: cells.map((char, i) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        value: char,
+        disabled,
+        inputMode: "numeric",
+        autoComplete: "one-time-code",
+        "aria-label": `Digit ${i + 1}`,
+        "aria-invalid": hasError,
+        className: cn(cell({ error: hasError }), "disabled:opacity-50"),
+        onChange: (e) => handleInput(i, e.target.value),
+        onKeyDown: (e) => handleKeyDown(i, e),
+        onPaste: (e) => handlePaste(i, e),
+        onFocus: (e) => e.target.select()
+      },
+      i
+    )) }),
+    typeof error === "string" && error && /* @__PURE__ */ jsx("p", { className: "px-2 text-center text-xs text-[var(--color-input-error)]", children: error })
+  ] });
+}
+function Popover({
+  trigger,
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  align = "start",
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const anchorRef = useRef(null);
+  const panelRef = useRef(null);
+  const id = useId();
+  const setOpen = (next) => {
+    if (!isControlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!anchorRef.current?.contains(target) && !panelRef.current?.contains(target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  });
+  const triggerEl = cloneElement(trigger, {
+    onClick: (e) => {
+      trigger.props.onClick?.(e);
+      setOpen(!open);
+    },
+    "aria-expanded": open,
+    "aria-haspopup": true
+  });
+  return /* @__PURE__ */ jsxs("div", { ref: anchorRef, className: "relative inline-block w-full", children: [
+    triggerEl,
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        id,
+        role: "listbox",
+        className: cn(
+          "absolute z-50 mt-1 min-w-full rounded-[12px] border border-border bg-surface p-1 shadow-lg",
+          align === "end" ? "right-0" : "left-0",
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+var ELLIPSIS = /* @__PURE__ */ Symbol("ellipsis");
+function collapseItems(items, maxItems) {
+  const indexed = items.map((item, index) => ({ item, index }));
+  if (!maxItems || items.length <= maxItems || items.length <= 2) {
+    return indexed;
+  }
+  const tail = Math.max(1, maxItems - 1);
+  return [indexed[0], ELLIPSIS, ...indexed.slice(items.length - tail)];
+}
+function ArrowSeparator() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-4 shrink-0 text-text-muted",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M3 8h9M9 5l3 3-3 3" })
+    }
+  );
+}
+function Breadcrumbs({
+  items,
+  separator,
+  maxItems,
+  className,
+  ...props
+}) {
+  const sep = separator ?? /* @__PURE__ */ jsx(ArrowSeparator, {});
+  const slots = collapseItems(items, maxItems);
+  const hidden = slots.includes(ELLIPSIS) && maxItems ? items.slice(1, items.length - Math.max(1, maxItems - 1)) : [];
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-2 text-sm", children: slots.map((slot, i) => {
+    const isLast = i === slots.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("li", { className: "flex items-center", children: slot === ELLIPSIS ? /* @__PURE__ */ jsx(
+        Popover,
+        {
+          align: "start",
+          trigger: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Show more",
+              className: "rounded-[4px] px-1 text-text-muted hover:text-text focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2",
+              children: "\u2026"
+            }
+          ),
+          children: /* @__PURE__ */ jsx("ul", { className: "min-w-32", children: hidden.map((h, hi) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: h.href,
+              className: "block rounded-[8px] px-3 py-2 text-sm text-text hover:bg-hover",
+              children: h.label
+            }
+          ) }, hi)) })
+        }
+      ) : isLast || !slot.item.href ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-current": isLast ? "page" : void 0,
+          className: cn(
+            isLast ? "font-bold text-text" : "text-text-muted"
+          ),
+          children: slot.item.label
+        }
+      ) : /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: slot.item.href,
+          className: "text-text-muted hover:text-text hover:underline",
+          children: slot.item.label
+        }
+      ) }),
+      !isLast && /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: "flex items-center text-text-muted", children: sep })
+    ] }, i);
+  }) }) });
+}
+var buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-[8px] font-bold whitespace-nowrap transition-colors outline-none focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95 hover:brightness-95",
+  {
+    variants: {
+      variant: {
+        fill: "",
+        outline: "border bg-transparent",
+        ghost: "bg-transparent",
+        text: "bg-transparent hover:underline hover:brightness-100"
+      },
+      color: {
+        primary: "",
+        success: "",
+        error: "",
+        warning: "",
+        info: ""
+      },
+      size: {
+        xs: "h-8 px-3 text-xs",
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-5 text-md",
+        xl: "h-14 px-6 text-md"
+      },
+      iconOnly: {
+        true: "aspect-square p-0",
+        false: ""
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { variant: "fill", color: "primary", class: "bg-primary text-white" },
+      { variant: "fill", color: "success", class: "bg-success text-white" },
+      { variant: "fill", color: "error", class: "bg-error text-white" },
+      { variant: "fill", color: "warning", class: "bg-warning text-text" },
+      { variant: "fill", color: "info", class: "bg-info text-white" },
+      {
+        variant: "outline",
+        color: "primary",
+        class: "border-primary text-primary hover:bg-primary-tint"
+      },
+      {
+        variant: "outline",
+        color: "success",
+        class: "border-success text-success hover:bg-success-tint"
+      },
+      {
+        variant: "outline",
+        color: "error",
+        class: "border-error text-error hover:bg-error-tint"
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        class: "border-warning text-warning hover:bg-warning-tint"
+      },
+      {
+        variant: "outline",
+        color: "info",
+        class: "border-info text-info hover:bg-info-tint"
+      },
+      {
+        variant: "ghost",
+        color: "primary",
+        class: "text-primary hover:bg-primary-tint"
+      },
+      {
+        variant: "ghost",
+        color: "success",
+        class: "text-success hover:bg-success-tint"
+      },
+      {
+        variant: "ghost",
+        color: "error",
+        class: "text-error hover:bg-error-tint"
+      },
+      {
+        variant: "ghost",
+        color: "warning",
+        class: "text-warning hover:bg-warning-tint"
+      },
+      {
+        variant: "ghost",
+        color: "info",
+        class: "text-info hover:bg-info-tint"
+      },
+      { variant: "text", color: "primary", class: "text-primary" },
+      { variant: "text", color: "success", class: "text-success" },
+      { variant: "text", color: "error", class: "text-error" },
+      { variant: "text", color: "warning", class: "text-warning" },
+      { variant: "text", color: "info", class: "text-info" },
+      { iconOnly: true, size: "xs", class: "size-8" },
+      { iconOnly: true, size: "sm", class: "size-8" },
+      { iconOnly: true, size: "md", class: "size-10" },
+      { iconOnly: true, size: "lg", class: "size-12" },
+      { iconOnly: true, size: "xl", class: "size-14" }
+    ],
+    defaultVariants: {
+      variant: "fill",
+      color: "primary",
+      size: "md",
+      iconOnly: false,
+      fullWidth: false
+    }
+  }
+);
+function Button({
+  variant = "fill",
+  color = "primary",
+  size = "md",
+  fullWidth = false,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  ...props
+}) {
+  const iconOnly = !children && Boolean(leftIcon ?? rightIcon);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        buttonVariants({ variant, color, size, fullWidth, iconOnly }),
+        fullWidth && (leftIcon || rightIcon) && "justify-between",
+        className
+      ),
+      ...props,
+      children: [
+        leftIcon,
+        children,
+        rightIcon
+      ]
+    }
+  );
+}
+function nextIndex(current, count, dir, loop) {
+  const n = current + dir;
+  if (n < 0) return loop ? count - 1 : 0;
+  if (n >= count) return loop ? 0 : count - 1;
+  return n;
+}
+function Carousel({
+  children,
+  title,
+  description,
+  seeAllHref,
+  arrows = true,
+  indicators = true,
+  autoSlide = false,
+  interval = 5e3,
+  loop = true,
+  gap = 16,
+  className,
+  ...props
+}) {
+  const trackRef = useRef(null);
+  const items = Children.toArray(children);
+  const count = items.length;
+  const [active, setActive] = useState(0);
+  const [progress, setProgress] = useState(0);
+  const scrollToIndex = useCallback((index) => {
+    const track2 = trackRef.current;
+    if (!track2) return;
+    const child = track2.children[index];
+    child?.scrollIntoView({
+      behavior: "smooth",
+      inline: "start",
+      block: "nearest"
+    });
+  }, []);
+  const go = useCallback(
+    (dir) => {
+      setActive((cur) => {
+        const target = nextIndex(cur, count, dir, loop);
+        scrollToIndex(target);
+        return target;
+      });
+    },
+    [count, loop, scrollToIndex]
+  );
+  useEffect(() => {
+    const track2 = trackRef.current;
+    if (!track2) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const idx = Array.prototype.indexOf.call(
+              track2.children,
+              entry.target
+            );
+            if (idx >= 0) setActive(idx);
+          }
+        }
+      },
+      { root: track2, threshold: 0.6 }
+    );
+    for (const child of Array.from(track2.children)) observer.observe(child);
+    return () => observer.disconnect();
+  }, [count]);
+  useEffect(() => {
+    if (!autoSlide || count <= 1) return;
+    const step = 50;
+    let elapsed = 0;
+    const id = setInterval(() => {
+      elapsed += step;
+      setProgress(Math.min(1, elapsed / interval));
+      if (elapsed >= interval) {
+        elapsed = 0;
+        go(1);
+      }
+    }, step);
+    return () => clearInterval(id);
+  }, [autoSlide, interval, count, active, go]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), ...props, children: [
+    (title || description || seeAllHref || arrows) && /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-text", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-text-muted", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        seeAllHref && /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: seeAllHref,
+            className: "text-sm font-bold text-primary hover:underline",
+            children: "See all"
+          }
+        ),
+        arrows && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx(ArrowButton, { dir: "prev", onClick: () => go(-1) }),
+          /* @__PURE__ */ jsx(ArrowButton, { dir: "next", onClick: () => go(1) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: trackRef,
+        className: "flex snap-x snap-mandatory overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        style: { gap },
+        children: items.map((child, i) => /* @__PURE__ */ jsx("div", { className: "shrink-0 snap-start", children: child }, i))
+      }
+    ),
+    indicators && count > 1 && /* @__PURE__ */ jsx("div", { className: "flex justify-center gap-2", children: items.map((_, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": `Go to slide ${i + 1}`,
+        "aria-current": i === active,
+        onClick: () => {
+          setActive(i);
+          scrollToIndex(i);
+        },
+        className: "relative size-2 overflow-hidden rounded-full bg-border",
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute inset-0 rounded-full bg-primary transition-transform",
+              i === active ? "scale-100" : "scale-0"
+            ),
+            style: autoSlide && i === active ? {
+              transform: `scaleX(${progress})`,
+              transformOrigin: "left"
+            } : void 0
+          }
+        )
+      },
+      i
+    )) })
+  ] });
+}
+function ArrowButton({
+  dir,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": dir === "prev" ? "Previous" : "Next",
+      onClick,
+      className: "flex size-8 items-center justify-center rounded-full border border-border text-text transition-colors hover:bg-hover",
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: cn("size-4", dir === "prev" && "rotate-180"),
+          viewBox: "0 0 16 16",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx("path", { d: "m6 4 4 4-4 4" })
+        }
+      )
+    }
+  );
+}
+function Checkbox({
+  label,
+  indeterminate = false,
+  className,
+  disabled,
+  ...props
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  const input = /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-6 shrink-0", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        disabled,
+        className: cn(
+          "peer size-6 cursor-pointer appearance-none rounded-[4px] border-[1.5px] border-text-muted bg-transparent transition-colors",
+          "checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary",
+          "focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "pointer-events-none absolute inset-0 m-auto hidden size-4 text-white peer-checked:block peer-indeterminate:hidden",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsx("path", { d: "m3 8 3.5 3.5L13 5" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "pointer-events-none absolute inset-0 m-auto hidden size-4 text-white peer-indeterminate:block",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsx("path", { d: "M4 8h8" })
+      }
+    )
+  ] });
+  if (!label) return input;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 text-sm text-text",
+        disabled && "cursor-not-allowed opacity-50"
+      ),
+      children: [
+        input,
+        label
+      ]
+    }
+  );
+}
+var chip = cva(
+  "inline-flex items-center gap-2 bg-surface text-text whitespace-nowrap",
+  {
+    variants: {
+      size: {
+        sm: "h-8 rounded-[4px] px-2 text-sm [&_svg]:size-4",
+        md: "h-10 rounded-[8px] px-3 text-sm [&_svg]:size-6"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function Chip({
+  size = "md",
+  leading,
+  trailing,
+  onDismiss,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn(chip({ size }), className), ...props, children: [
+    leading,
+    children,
+    onDismiss ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Remove",
+        onClick: onDismiss,
+        className: "-mr-1 inline-flex shrink-0 items-center justify-center rounded-full text-text-muted hover:text-text focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+          }
+        )
+      }
+    ) : trailing
+  ] });
+}
+var tag = cva(
+  "inline-flex items-center gap-1 rounded-[4px] bg-background font-bold text-text whitespace-nowrap",
+  {
+    variants: {
+      size: {
+        "2xs": "h-4 px-1 text-[10px] [&_svg]:size-3",
+        xs: "h-6 px-2 text-xs [&_svg]:size-4"
+      },
+      uppercase: {
+        true: "uppercase",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "xs", uppercase: false }
+  }
+);
+function Tag({
+  size = "xs",
+  uppercase,
+  leading,
+  trailing,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn(tag({ size, uppercase }), className), ...props, children: [
+    leading,
+    children,
+    trailing
+  ] });
+}
+function Radio({ label, className, disabled, ...props }) {
+  const input = /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-6 shrink-0", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        disabled,
+        className: cn(
+          "peer size-6 cursor-pointer appearance-none rounded-full border-[1.5px] border-text-muted bg-transparent transition-colors",
+          "checked:border-primary",
+          "focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 m-auto size-3 scale-0 rounded-full bg-primary transition-transform peer-checked:scale-100" })
+  ] });
+  if (!label) return input;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 text-sm text-text",
+        disabled && "cursor-not-allowed opacity-50"
+      ),
+      children: [
+        input,
+        label
+      ]
+    }
+  );
+}
+var loader = cva(
+  "inline-block animate-spin rounded-full border-current border-t-transparent text-primary",
+  {
+    variants: {
+      size: {
+        "2xs": "size-4 border-2",
+        xs: "size-6 border-2",
+        sm: "size-8 border-[3px]",
+        md: "size-10 border-4",
+        lg: "size-12 border-4"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function Loader({
+  size = "md",
+  label = "Loading",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cn(loader({ size }), className),
+      ...props
+    }
+  );
+}
+function Search({
+  value,
+  onValueChange,
+  results,
+  loading = false,
+  emptyState = "No results",
+  resultsTitle = "Search results",
+  shortcut = "\u2318K",
+  mobile = false,
+  open: controlledOpen,
+  onOpenChange,
+  placeholder = "Search\u2026",
+  className,
+  ...props
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const setOpen = (next) => {
+    if (!isControlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  useEffect(() => {
+    if (!open || mobile) return;
+    const onPointerDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  });
+  const hasResults = Boolean(results);
+  const inputRow = /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center gap-3 px-4", children: [
+    loading ? /* @__PURE__ */ jsx(Loader, { size: "2xs", className: "text-text-muted" }) : /* @__PURE__ */ jsx(SearchIcon, { className: "size-6 shrink-0 text-text-muted" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "search",
+        value,
+        placeholder,
+        role: "searchbox",
+        className: "flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-muted [&::-webkit-search-cancel-button]:hidden",
+        onChange: (e) => onValueChange(e.target.value),
+        onFocus: () => setOpen(true),
+        ...props
+      }
+    ),
+    value ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Clear search",
+        onClick: () => {
+          onValueChange("");
+          inputRef.current?.focus();
+        },
+        className: "inline-flex size-6 shrink-0 items-center justify-center rounded-full text-text-muted hover:bg-hover hover:text-text",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            className: "size-4",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+          }
+        )
+      }
+    ) : shortcut && /* @__PURE__ */ jsx("kbd", { className: "shrink-0 text-xs text-text-muted", children: shortcut })
+  ] });
+  const panel = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("div", { className: "border-t border-border" }),
+    hasResults && /* @__PURE__ */ jsx("div", { className: "px-6 py-3 text-sm font-bold text-text-muted", children: resultsTitle }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-auto p-1", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx(Loader, {}) }) : hasResults ? results : /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-sm text-text-muted", children: emptyState }) })
+  ] });
+  if (mobile && open) {
+    return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-surface", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: inputRow }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close search",
+            onClick: () => setOpen(false),
+            className: "px-4 text-sm font-bold text-primary",
+            children: "Cancel"
+          }
+        )
+      ] }),
+      panel
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: cn("relative w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "rounded-[12px] border border-border bg-surface", children: [
+    inputRow,
+    open && panel
+  ] }) });
+}
+function SearchIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+        /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+      ]
+    }
+  );
+}
+var container = cva(
+  "inline-flex items-center gap-1 rounded-[12px] bg-background p-1",
+  {
+    variants: {
+      size: {
+        sm: "h-10",
+        md: "h-12"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var segment = cva(
+  "inline-flex h-full flex-1 items-center justify-center gap-2 rounded-[8px] px-3 text-sm font-bold whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2 [&_svg]:size-5",
+  {
+    variants: {
+      active: {
+        true: "bg-surface text-text shadow-sm",
+        false: "text-text-muted hover:text-text"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+function SegmentedControl({
+  items,
+  value,
+  onChange,
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: cn(container({ size }), className),
+      ...props,
+      children: items.map((item) => {
+        const active = item.value === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => onChange(item.value),
+            className: segment({ active }),
+            children: [
+              item.icon,
+              item.label
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+var TabsContext = createContext(null);
+function useTabs() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs components must be used within <Tabs>");
+  return ctx;
+}
+function Tabs({
+  value,
+  onValueChange,
+  type = "underline",
+  size = "md",
+  children,
+  className
+}) {
+  const baseId = useId();
+  return /* @__PURE__ */ jsx(
+    TabsContext.Provider,
+    {
+      value: { value, setValue: onValueChange, type, size, baseId },
+      children: /* @__PURE__ */ jsx("div", { className, children })
+    }
+  );
+}
+var list = cva("flex items-center", {
+  variants: {
+    type: {
+      default: "gap-1",
+      pill: "gap-1 rounded-[12px] bg-background p-1",
+      underline: "gap-1 border-b border-border"
+    }
+  },
+  defaultVariants: { type: "underline" }
+});
+function TabList({
+  children,
+  className
+}) {
+  const { type } = useTabs();
+  return /* @__PURE__ */ jsx("div", { role: "tablist", className: cn(list({ type }), className), children });
+}
+var tab = cva(
+  "inline-flex items-center justify-center gap-2 font-bold whitespace-nowrap transition-colors outline-none focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-5",
+  {
+    variants: {
+      type: {
+        default: "rounded-[8px] px-3",
+        pill: "rounded-[8px] px-3",
+        underline: "-mb-px border-b-2 border-transparent px-3"
+      },
+      size: { sm: "h-8 text-sm", md: "h-10 text-sm" },
+      active: { true: "", false: "text-text-muted hover:text-text" }
+    },
+    compoundVariants: [
+      { type: "default", active: true, class: "text-primary" },
+      { type: "pill", active: true, class: "bg-surface text-text shadow-sm" },
+      { type: "underline", active: true, class: "border-primary text-primary" }
+    ],
+    defaultVariants: { type: "underline", size: "md", active: false }
+  }
+);
+function Tab({
+  value,
+  leading,
+  trailing,
+  children,
+  className,
+  ...props
+}) {
+  const ctx = useTabs();
+  const active = ctx.value === value;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      id: `${ctx.baseId}-tab-${value}`,
+      "aria-selected": active,
+      "aria-controls": `${ctx.baseId}-panel-${value}`,
+      tabIndex: active ? 0 : -1,
+      onClick: () => ctx.setValue(value),
+      onKeyDown: (e) => {
+        if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+        const tabs = Array.from(
+          e.currentTarget.parentElement?.querySelectorAll(
+            '[role="tab"]'
+          ) ?? []
+        );
+        const i = tabs.indexOf(e.currentTarget);
+        const next = e.key === "ArrowRight" ? tabs[i + 1] : tabs[i - 1];
+        next?.focus();
+        next?.click();
+      },
+      className: cn(tab({ type: ctx.type, size: ctx.size, active }), className),
+      ...props,
+      children: [
+        leading,
+        children,
+        trailing
+      ]
+    }
+  );
+}
+function TabPanel({
+  value,
+  children,
+  className
+}) {
+  const ctx = useTabs();
+  if (ctx.value !== value) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${ctx.baseId}-panel-${value}`,
+      "aria-labelledby": `${ctx.baseId}-tab-${value}`,
+      className,
+      children
+    }
+  );
+}
+var field = cva(
+  "w-full appearance-none rounded-[8px] border bg-surface text-sm text-text outline-none transition-shadow disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2",
+        md: "h-10 px-3",
+        lg: "h-12 px-3",
+        xl: "h-14 px-4"
+      },
+      invalid: {
+        true: "border-[2px] border-[var(--color-input-error)]",
+        false: "border-border hover:border-text-muted focus:border-[1.5px] focus:border-primary focus:ring-2 focus:ring-primary-tint"
+      }
+    },
+    defaultVariants: { size: "md", invalid: false }
+  }
+);
+function Select({
+  size = "md",
+  invalid,
+  label,
+  leadingIcon,
+  error,
+  helperText,
+  className,
+  id,
+  disabled,
+  children,
+  ...props
+}) {
+  const isInvalid = invalid ?? Boolean(error);
+  const hint = error ?? helperText;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1", className), children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-bold text-text", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      leadingIcon && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-text-muted [&_svg]:size-5", children: leadingIcon }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id,
+          disabled,
+          "aria-invalid": isInvalid || void 0,
+          className: cn(
+            field({ size, invalid: isInvalid }),
+            leadingIcon && "pl-10",
+            "pr-9"
+          ),
+          ...props,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(ChevronDown2, { className: "pointer-events-none absolute inset-y-0 right-3 my-auto size-5 text-text-muted" })
+    ] }),
+    hint && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-xs",
+          error ? "text-[var(--color-input-error)]" : "text-text-muted"
+        ),
+        children: hint
+      }
+    )
+  ] });
+}
+function ChevronDown2({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+var field2 = cva(
+  "w-full appearance-none rounded-[8px] border bg-surface text-sm text-text outline-none transition-shadow placeholder:text-text-muted disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2",
+        md: "h-10 px-3",
+        lg: "h-12 px-3",
+        xl: "h-14 px-4"
+      },
+      invalid: {
+        true: "border-[2px] border-[var(--color-input-error)]",
+        false: "border-border hover:border-text-muted focus:border-[1.5px] focus:border-primary focus:ring-2 focus:ring-primary-tint"
+      }
+    },
+    defaultVariants: { size: "md", invalid: false }
+  }
+);
+function TextInput({
+  size = "md",
+  invalid,
+  label,
+  leadingIcon,
+  trailingIcon,
+  error,
+  helperText,
+  floatingLabel = false,
+  className,
+  id,
+  disabled,
+  placeholder,
+  ...props
+}) {
+  const isInvalid = invalid ?? Boolean(error);
+  const hint = error ?? helperText;
+  const floating = floatingLabel && Boolean(label);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1", className), children: [
+    label && !floating && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-bold text-text", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      leadingIcon && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-text-muted [&_svg]:size-5", children: leadingIcon }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          disabled,
+          placeholder: floating ? " " : placeholder,
+          "aria-invalid": isInvalid || void 0,
+          className: cn(
+            field2({ size, invalid: isInvalid }),
+            "peer",
+            leadingIcon && "pl-10",
+            trailingIcon && "pr-10",
+            floating && "placeholder-shown:[&::placeholder]:opacity-0"
+          ),
+          ...props
+        }
+      ),
+      floating && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: id,
+          className: cn(
+            "pointer-events-none absolute left-3 top-0 flex h-full origin-left items-center text-sm text-text-muted transition-all peer-focus:top-0 peer-focus:h-auto peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:text-primary peer-not-placeholder-shown:top-0 peer-not-placeholder-shown:h-auto peer-not-placeholder-shown:-translate-y-1/2 peer-not-placeholder-shown:text-xs",
+            leadingIcon && "left-10 peer-focus:left-3 peer-not-placeholder-shown:left-3",
+            isInvalid && "peer-focus:text-[var(--color-input-error)]"
+          ),
+          children: /* @__PURE__ */ jsx("span", { className: "bg-surface px-1", children: label })
+        }
+      ),
+      trailingIcon && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-text-muted [&_svg]:size-5", children: trailingIcon })
+    ] }),
+    hint && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "px-1 text-xs",
+          error ? "text-[var(--color-input-error)]" : "text-text-muted"
+        ),
+        children: hint
+      }
+    )
+  ] });
+}
+var cellBase = "relative flex w-full items-center rounded-[8px] border-[1.5px] border-transparent";
+var cellActive = "focus-within:z-10 focus-within:border-primary focus-within:ring-4 focus-within:ring-primary-tint";
+var cellError = "z-10 border-[var(--color-input-error)] focus-within:border-[var(--color-input-error)]";
+function GroupField({
+  select,
+  invalid,
+  className,
+  children,
+  ...props
+}) {
+  const cell3 = cn(cellBase, invalid ? cellError : cellActive, className);
+  if (select) {
+    return /* @__PURE__ */ jsxs("div", { className: cell3, children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: "w-full appearance-none bg-transparent px-4 py-4 pr-10 text-base text-text outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          ...props,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(ChevronDown3, { className: "pointer-events-none absolute right-4 size-5 text-text-muted" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cell3, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "w-full bg-transparent px-4 py-4 text-base text-text outline-none placeholder:text-text-muted disabled:cursor-not-allowed disabled:opacity-50",
+        ...props
+      }
+    ),
+    children
+  ] });
+}
+function TextInputGroup({
+  direction = "vertical",
+  errors,
+  className,
+  children,
+  ...props
+}) {
+  const fields = Children.toArray(children).filter(isValidElement);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex rounded-[8px] border border-border bg-surface",
+          direction === "vertical" ? "flex-col divide-y divide-border" : "flex-row divide-x divide-border"
+        ),
+        children: fields.map(
+          (child, i) => cloneElement(child, {
+            key: i,
+            className: cn(
+              "-m-px",
+              direction === "horizontal" && "flex-1",
+              child.props.className
+            )
+          })
+        )
+      }
+    ),
+    errors?.filter(Boolean).map((msg, i) => /* @__PURE__ */ jsx("span", { className: "px-1 text-xs text-[var(--color-input-error)]", children: msg }, i))
+  ] });
+}
+function ChevronDown3({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+var field3 = cva(
+  "w-full rounded-[8px] border bg-surface px-3 py-2 text-sm text-text outline-none transition-shadow placeholder:text-text-muted disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      invalid: {
+        true: "border-[2px] border-[var(--color-input-error)]",
+        false: "border-border hover:border-text-muted focus:border-[1.5px] focus:border-primary focus:ring-2 focus:ring-primary-tint"
+      }
+    },
+    defaultVariants: { invalid: false }
+  }
+);
+function Textarea({
+  invalid,
+  label,
+  error,
+  helperText,
+  autoResize = false,
+  className,
+  id,
+  disabled,
+  value,
+  onChange,
+  rows = 3,
+  ...props
+}) {
+  const ref = useRef(null);
+  const isInvalid = invalid ?? Boolean(error);
+  const hint = error ?? helperText;
+  const resize = () => {
+    const el = ref.current;
+    if (!el || !autoResize) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  };
+  useEffect(resize, [value, autoResize]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1", className), children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-bold text-text", children: label }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id,
+        rows,
+        disabled,
+        value,
+        "aria-invalid": isInvalid || void 0,
+        className: cn(
+          field3({ invalid: isInvalid }),
+          autoResize && "resize-none overflow-hidden"
+        ),
+        onChange: (e) => {
+          onChange?.(e);
+          resize();
+        },
+        ...props
+      }
+    ),
+    hint && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-xs",
+          error ? "text-[var(--color-input-error)]" : "text-text-muted"
+        ),
+        children: hint
+      }
+    )
+  ] });
+}
+var track = cva(
+  "peer relative inline-flex shrink-0 cursor-pointer appearance-none items-center rounded-full bg-border transition-colors checked:bg-primary focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        "2xs": "h-4 w-7",
+        xs: "h-6 w-11",
+        sm: "h-8 w-[60px]"
+      }
+    },
+    defaultVariants: { size: "xs" }
+  }
+);
+var thumb = cva(
+  "pointer-events-none absolute left-0.5 rounded-full bg-surface transition-transform",
+  {
+    variants: {
+      size: {
+        "2xs": "size-3 peer-checked:translate-x-3",
+        xs: "size-5 peer-checked:translate-x-5",
+        sm: "size-7 peer-checked:translate-x-7"
+      }
+    },
+    defaultVariants: { size: "xs" }
+  }
+);
+function Switch({
+  size = "xs",
+  label,
+  className,
+  disabled,
+  ...props
+}) {
+  const control = /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        role: "switch",
+        disabled,
+        className: cn(track({ size }), className),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: thumb({ size }), "aria-hidden": true })
+  ] });
+  if (!label) return control;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 text-sm text-text",
+        disabled && "cursor-not-allowed opacity-50"
+      ),
+      children: [
+        control,
+        label
+      ]
+    }
+  );
+}
+var cell2 = cva("px-3 text-left text-sm text-text", {
+  variants: {
+    size: {
+      xs: "h-6",
+      sm: "h-8",
+      md: "h-10",
+      lg: "h-12",
+      xl: "h-14",
+      "2xl": "h-16"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function Table({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "table",
+    {
+      className: cn("w-full border-collapse text-text", className),
+      ...props
+    }
+  );
+}
+function TableHead({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("thead", { className: cn("border-b border-border", className), ...props });
+}
+function TableBody(props) {
+  return /* @__PURE__ */ jsx("tbody", { ...props });
+}
+function TableRow({
+  zebra,
+  hover = true,
+  selected,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "aria-selected": selected || void 0,
+      className: cn(
+        "border-b border-border",
+        zebra && "even:bg-background",
+        hover && "hover:bg-hover",
+        selected && "bg-primary-tint",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({
+  size = "md",
+  header,
+  className,
+  ...props
+}) {
+  const Tag2 = header ? "th" : "td";
+  return /* @__PURE__ */ jsx(
+    Tag2,
+    {
+      className: cn(
+        cell2({ size }),
+        header && "font-bold text-text-muted",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function selectionState(selectedCount, total) {
+  return {
+    checked: total > 0 && selectedCount === total,
+    indeterminate: selectedCount > 0 && selectedCount < total
+  };
+}
+function DataTable({
+  columns,
+  data,
+  rowKey,
+  size = "md",
+  zebra,
+  selectable,
+  selected = [],
+  onSelectedChange,
+  className
+}) {
+  const allKeys = data.map(rowKey);
+  const { checked, indeterminate } = selectionState(
+    selected.length,
+    allKeys.length
+  );
+  const toggleAll = () => onSelectedChange?.(checked ? [] : allKeys);
+  const toggleRow = (key) => onSelectedChange?.(
+    selected.includes(key) ? selected.filter((k) => k !== key) : [...selected, key]
+  );
+  return /* @__PURE__ */ jsxs(Table, { className, children: [
+    /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
+      selectable && /* @__PURE__ */ jsx(TableCell, { header: true, size, className: "w-px", children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked,
+          indeterminate,
+          onChange: toggleAll,
+          "aria-label": "Select all rows"
+        }
+      ) }),
+      columns.map((col) => /* @__PURE__ */ jsx(TableCell, { header: true, size, children: col.header }, col.key))
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: data.map((row) => {
+      const key = rowKey(row);
+      const isSelected = selected.includes(key);
+      return /* @__PURE__ */ jsxs(TableRow, { zebra, selected: isSelected, children: [
+        selectable && /* @__PURE__ */ jsx(TableCell, { size, className: "w-px", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: isSelected,
+            onChange: () => toggleRow(key),
+            "aria-label": `Select row`
+          }
+        ) }),
+        columns.map((col) => /* @__PURE__ */ jsx(TableCell, { size, children: col.cell(row) }, col.key))
+      ] }, key);
+    }) })
+  ] });
+}
+var ToastContext = createContext(null);
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
+var POSITION_CLASS = {
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "top-right": "top-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end"
+};
+function ToastProvider({
+  children,
+  position = "bottom-center",
+  defaultDuration = 5e3
+}) {
+  const [toasts, setToasts] = useState([]);
+  const counter = useRef(0);
+  const dismiss = useCallback((id) => {
+    setToasts((list2) => list2.filter((t) => t.id !== id));
+  }, []);
+  const toast = useCallback(
+    (options) => {
+      const id = ++counter.current;
+      setToasts((list2) => [...list2, { ...options, id }]);
+      const duration = options.duration ?? defaultDuration;
+      if (duration > 0 && !options.closable) {
+        setTimeout(() => dismiss(id), duration);
+      }
+      return id;
+    },
+    [defaultDuration, dismiss]
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast, dismiss }, children: [
+    children,
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "pointer-events-none fixed z-[100] flex flex-col gap-2",
+            POSITION_CLASS[position]
+          ),
+          children: toasts.map((t) => /* @__PURE__ */ jsx(
+            Snackbar,
+            {
+              icon: t.icon,
+              onClose: t.closable ? () => dismiss(t.id) : void 0,
+              className: "pointer-events-auto",
+              children: t.message
+            },
+            t.id
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function Snackbar({
+  icon,
+  onClose,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: cn(
+        "flex min-w-48 max-w-sm items-center gap-3 rounded-[8px] bg-surface px-4 py-3 text-sm text-text shadow-lg",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-5", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: onClose,
+            className: "-mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded-full text-text-muted hover:bg-hover hover:text-text",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "size-4",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var bubble = cva(
+  "pointer-events-none absolute z-50 w-max max-w-xs rounded-[4px] bg-surface px-3 py-3 text-xs leading-4 text-text opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
+  {
+    variants: {
+      placement: {
+        top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
+        "top-start": "bottom-full left-0 mb-2",
+        "top-end": "bottom-full right-0 mb-2",
+        bottom: "top-full left-1/2 mt-2 -translate-x-1/2",
+        "bottom-start": "top-full left-0 mt-2",
+        "bottom-end": "top-full right-0 mt-2",
+        left: "right-full top-1/2 mr-2 -translate-y-1/2",
+        right: "left-full top-1/2 ml-2 -translate-y-1/2"
+      },
+      shadow: {
+        true: "shadow-[0_0_1px_rgba(0,0,0,0.4),0_6px_6px_-6px_rgba(0,0,0,0.16)]",
+        false: ""
+      }
+    },
+    defaultVariants: { placement: "top", shadow: true }
+  }
+);
+var arrow = cva("absolute size-2 rotate-45 bg-surface", {
+  variants: {
+    placement: {
+      top: "bottom-[-4px] left-1/2 -translate-x-1/2",
+      "top-start": "bottom-[-4px] left-3",
+      "top-end": "bottom-[-4px] right-3",
+      bottom: "top-[-4px] left-1/2 -translate-x-1/2",
+      "bottom-start": "top-[-4px] left-3",
+      "bottom-end": "top-[-4px] right-3",
+      left: "right-[-4px] top-1/2 -translate-y-1/2",
+      right: "left-[-4px] top-1/2 -translate-y-1/2"
+    }
+  },
+  defaultVariants: { placement: "top" }
+});
+function Tooltip({
+  content,
+  placement = "top",
+  shadow = true,
+  pointer = true,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("group relative inline-flex", className), children: [
+    children,
+    /* @__PURE__ */ jsxs("span", { role: "tooltip", className: bubble({ placement, shadow }), children: [
+      content,
+      pointer && /* @__PURE__ */ jsx("span", { className: arrow({ placement }), "aria-hidden": true })
+    ] })
+  ] });
+}
+var SidebarContext = createContext({
+  collapsed: false
+});
+function Sidebar({
+  collapsed = false,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-collapsed": collapsed || void 0,
+      className: cn(
+        "flex h-full flex-col gap-4 bg-surface text-text transition-[width] duration-200",
+        collapsed ? "w-16 p-2" : "w-[280px] p-6",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function SidebarSection({
+  title,
+  divider,
+  className,
+  children,
+  ...props
+}) {
+  const { collapsed } = useContext(SidebarContext);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    divider && /* @__PURE__ */ jsx("hr", { className: "border-t border-border" }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), ...props, children: [
+      title && !collapsed && /* @__PURE__ */ jsx("span", { className: "px-2 text-sm text-text-muted", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children })
+    ] })
+  ] });
+}
+function SidebarItem({
+  icon,
+  active,
+  label,
+  href,
+  className,
+  ...props
+}) {
+  const { collapsed } = useContext(SidebarContext);
+  const row = /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      "aria-current": active ? "page" : void 0,
+      className: cn(
+        "flex items-center gap-3 rounded-[8px] px-2 py-2 text-sm transition-colors outline-none focus-visible:outline-2 focus-visible:outline-primary",
+        collapsed && "justify-center",
+        active ? "bg-primary-tint font-bold text-primary" : "text-text hover:bg-hover",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center [&_svg]:size-6", children: icon }),
+        !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: label })
+      ]
+    }
+  );
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: label,
+        placement: "right",
+        className: "w-full [&>a]:w-full",
+        children: row
+      }
+    );
+  }
+  return row;
+}
+function Calendar({ className, classNames, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      className: cn(
+        "rounded-[12px] bg-surface p-4 text-text [--rdp-day-width:40px] [--rdp-day-height:40px]",
+        className
+      ),
+      classNames: {
+        months: "relative flex flex-col gap-4 sm:flex-row",
+        month: "flex flex-col gap-2",
+        month_caption: "relative flex h-10 items-center justify-center",
+        caption_label: "text-sm font-semibold text-text",
+        nav: "absolute inset-x-0 top-0 flex h-10 items-center justify-between px-1",
+        button_previous: "inline-flex size-8 items-center justify-center rounded-[8px] text-text-muted transition-colors hover:bg-hover hover:text-text disabled:opacity-40",
+        button_next: "inline-flex size-8 items-center justify-center rounded-[8px] text-text-muted transition-colors hover:bg-hover hover:text-text disabled:opacity-40",
+        month_grid: "border-collapse",
+        weekdays: "flex",
+        weekday: "flex size-10 items-center justify-center text-xs font-semibold text-text-muted",
+        week: "flex",
+        day: "p-0 text-center text-sm",
+        day_button: "inline-flex size-10 items-center justify-center rounded-full text-text transition-colors hover:bg-hover focus-visible:outline-2 focus-visible:outline-primary aria-selected:font-semibold",
+        today: "font-semibold text-primary",
+        selected: "[&_button]:bg-text [&_button]:text-background [&_button]:hover:bg-text",
+        range_start: "rounded-l-full bg-primary-tint [&_button]:bg-text [&_button]:text-background",
+        range_end: "rounded-r-full bg-primary-tint [&_button]:bg-text [&_button]:text-background",
+        range_middle: "bg-primary-tint [&_button]:rounded-none [&_button]:bg-transparent [&_button]:text-text [&_button]:hover:bg-primary-tint",
+        outside: "text-text-muted opacity-50",
+        disabled: "text-text-muted opacity-40",
+        hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        Chevron: ({ orientation, className: cls }) => /* @__PURE__ */ jsx(ChevronIcon, { orientation, className: cls })
+      },
+      ...props
+    }
+  );
+}
+function ChevronIcon({
+  orientation,
+  className
+}) {
+  const d = orientation === "left" ? "m15 18-6-6 6-6" : orientation === "right" ? "m9 18 6-6-6-6" : orientation === "up" ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6";
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("size-5", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d })
+    }
+  );
+}
+var pad = (n) => String(n).padStart(2, "0");
+function TimePicker({
+  value,
+  onChange,
+  minuteStep = 1,
+  className
+}) {
+  const hours = useMemo(() => Array.from({ length: 24 }, (_, i) => i), []);
+  const minutes = useMemo(
+    () => Array.from(
+      { length: Math.ceil(60 / minuteStep) },
+      (_, i) => i * minuteStep
+    ),
+    [minuteStep]
+  );
+  const set = (next) => onChange?.({
+    hours: next.hours ?? value?.hours ?? 0,
+    minutes: next.minutes ?? value?.minutes ?? 0
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-[280px] gap-px overflow-hidden rounded-[16px] bg-background p-1",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Column,
+          {
+            items: hours,
+            selected: value?.hours,
+            onSelect: (h) => set({ hours: h }),
+            label: "Hours"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Column,
+          {
+            items: minutes,
+            selected: value?.minutes,
+            onSelect: (m) => set({ minutes: m }),
+            label: "Minutes"
+          }
+        )
+      ]
+    }
+  );
+}
+function Column({
+  items,
+  selected,
+  onSelect,
+  label
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "aria-label": label,
+      className: "flex w-12 flex-col gap-1 overflow-y-auto scroll-smooth py-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      children: items.map((n) => {
+        const active = selected === n;
+        return /* @__PURE__ */ jsx("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": active,
+            onClick: () => onSelect(n),
+            className: cn(
+              "flex size-9 items-center justify-center rounded-full text-xs font-semibold transition-colors",
+              active ? "bg-text text-background" : "text-text hover:bg-hover"
+            ),
+            children: pad(n)
+          }
+        ) }, n);
+      })
+    }
+  );
+}
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var addDays = (d, n) => {
+  const r = startOfDay(d);
+  r.setDate(r.getDate() + n);
+  return r;
+};
+var startOfWeek = (d) => addDays(d, -((d.getDay() + 6) % 7));
+var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+var endOfMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0);
+function presetRanges(now) {
+  const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+  return {
+    today: { from: startOfDay(now), to: startOfDay(now) },
+    yesterday: { from: addDays(now, -1), to: addDays(now, -1) },
+    thisWeek: { from: startOfWeek(now), to: startOfDay(now) },
+    lastWeek: {
+      from: addDays(startOfWeek(now), -7),
+      to: addDays(startOfWeek(now), -1)
+    },
+    thisMonth: { from: startOfMonth(now), to: startOfDay(now) },
+    lastMonth: { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) }
+  };
+}
+var defaultPresets = [
+  { label: "Today", range: () => presetRanges(/* @__PURE__ */ new Date()).today },
+  { label: "Yesterday", range: () => presetRanges(/* @__PURE__ */ new Date()).yesterday },
+  { label: "This week", range: () => presetRanges(/* @__PURE__ */ new Date()).thisWeek },
+  { label: "Last week", range: () => presetRanges(/* @__PURE__ */ new Date()).lastWeek },
+  { label: "This month", range: () => presetRanges(/* @__PURE__ */ new Date()).thisMonth },
+  { label: "Last month", range: () => presetRanges(/* @__PURE__ */ new Date()).lastMonth }
+];
+function DateRangePicker({
+  value,
+  onApply,
+  presets = defaultPresets,
+  numberOfMonths = 2,
+  className
+}) {
+  const [range, setRange] = useState(value);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex flex-col overflow-hidden rounded-[12px] bg-surface shadow-[0_0_1px_rgba(0,0,0,0.4),0_6px_6px_-6px_rgba(0,0,0,0.16)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+          /* @__PURE__ */ jsx("ul", { className: "flex w-40 shrink-0 flex-col gap-1 border-r border-border p-2", children: presets.map((preset, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setRange(preset.range()),
+              className: "w-full rounded-[8px] px-3 py-2 text-left text-sm text-text transition-colors hover:bg-hover",
+              children: preset.label
+            }
+          ) }, i)) }),
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "range",
+              numberOfMonths,
+              selected: range,
+              onSelect: setRange,
+              className: "p-3 shadow-none"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end border-t border-border p-3", children: /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => onApply?.(range), children: "Apply" }) })
+      ]
+    }
+  );
+}
+var quarters = [1, 2, 3, 4];
+var monthsOf = (q) => ["Jan\u2013Mar", "Apr\u2013Jun", "Jul\u2013Sep", "Oct\u2013Dec"][q - 1];
+function QuarterPicker({
+  value,
+  onChange,
+  year = value?.year ?? (/* @__PURE__ */ new Date()).getFullYear(),
+  onYearChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-[280px] rounded-[12px] bg-surface p-4 text-text",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex h-10 items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            NavButton,
+            {
+              label: "Previous year",
+              onClick: () => onYearChange?.(year - 1),
+              children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: year }),
+          /* @__PURE__ */ jsx(NavButton, { label: "Next year", onClick: () => onYearChange?.(year + 1), children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: quarters.map((q) => {
+          const active = value?.year === year && value?.quarter === q;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": active,
+              onClick: () => onChange?.({ year, quarter: q }),
+              className: cn(
+                "flex flex-col items-center justify-center rounded-[8px] py-4 transition-colors",
+                active ? "bg-text text-background" : "hover:bg-hover"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold", children: [
+                  "Q",
+                  q
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-xs",
+                      active ? "text-background/70" : "text-text-muted"
+                    ),
+                    children: monthsOf(q)
+                  }
+                )
+              ]
+            },
+            q
+          );
+        }) })
+      ]
+    }
+  );
+}
+function NavButton({
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      onClick,
+      className: "inline-flex size-8 items-center justify-center rounded-[8px] text-text-muted transition-colors hover:bg-hover hover:text-text",
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "size-5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": true,
+          children
+        }
+      )
+    }
+  );
+}
+var drawer = cva(
+  "fixed bg-surface p-1 shadow-lg backdrop:bg-overlay open:flex flex-col m-0",
+  {
+    variants: {
+      side: {
+        right: "inset-y-0 right-0 h-full w-[448px] max-w-full rounded-l-[8px]",
+        left: "inset-y-0 left-0 h-full w-[448px] max-w-full rounded-r-[8px]",
+        top: "inset-x-0 top-0 h-auto max-h-full w-full rounded-b-[8px]",
+        bottom: "inset-x-0 bottom-0 h-auto max-h-full w-full rounded-t-[8px]"
+      }
+    },
+    defaultVariants: { side: "right" }
+  }
+);
+function Drawer({
+  open,
+  onClose,
+  side = "right",
+  className,
+  children,
+  ...props
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref,
+      className: cn(drawer({ side }), className),
+      onClose,
+      onClick: (e) => {
+        if (e.target === ref.current) onClose?.();
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex size-full flex-col overflow-auto",
+          onClick: (e) => e.stopPropagation(),
+          children
+        }
+      )
+    }
+  );
+}
+var modal = cva(
+  "m-auto w-full rounded-[12px] bg-surface p-0 shadow-lg backdrop:bg-overlay open:flex flex-col",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-4xl",
+        xl: "max-w-7xl"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function Modal({
+  open,
+  onClose,
+  size = "md",
+  title,
+  className,
+  children,
+  ...props
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref,
+      className: cn(modal({ size }), className),
+      onClose,
+      onClick: (e) => {
+        if (e.target === ref.current) onClose?.();
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", onClick: (e) => e.stopPropagation(), children: [
+        (title || onClose) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 border-b border-border px-6 py-4", children: [
+          title ? /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-text", children: title }) : /* @__PURE__ */ jsx("span", {}),
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close",
+              onClick: onClose,
+              className: "-mr-2 inline-flex size-8 shrink-0 items-center justify-center rounded-full text-text-muted hover:bg-hover hover:text-text focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2",
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  className: "size-5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-6", children })
+      ] })
+    }
+  );
+}
+var DOTS = "\u2026";
+function paginationRange(current, total, siblings = 1) {
+  const totalShown = siblings * 2 + 5;
+  if (total <= totalShown) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const left = Math.max(current - siblings, 1);
+  const right = Math.min(current + siblings, total);
+  const showLeftDots = left > 2;
+  const showRightDots = right < total - 1;
+  if (!showLeftDots && showRightDots) {
+    const len = siblings * 2 + 3;
+    return [...Array.from({ length: len }, (_, i) => i + 1), DOTS, total];
+  }
+  if (showLeftDots && !showRightDots) {
+    const len = siblings * 2 + 3;
+    return [
+      1,
+      DOTS,
+      ...Array.from({ length: len }, (_, i) => total - len + 1 + i)
+    ];
+  }
+  return [
+    1,
+    DOTS,
+    ...Array.from({ length: right - left + 1 }, (_, i) => left + i),
+    DOTS,
+    total
+  ];
+}
+function Pagination({
+  page,
+  total,
+  siblings = 1,
+  onPageChange,
+  className,
+  ...props
+}) {
+  const range = paginationRange(page, total, siblings);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "Pagination",
+      className: cn("flex items-center gap-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          PageButton,
+          {
+            "aria-label": "Previous page",
+            disabled: page <= 1,
+            onClick: () => onPageChange(page - 1),
+            children: /* @__PURE__ */ jsx(Chevron, { dir: "left" })
+          }
+        ),
+        range.map(
+          (item, i) => item === DOTS ? /* @__PURE__ */ jsx("span", { className: "px-2 text-sm text-text-muted", children: DOTS }, `dots-${i}`) : /* @__PURE__ */ jsx(
+            PageButton,
+            {
+              "aria-label": `Page ${item}`,
+              "aria-current": item === page ? "page" : void 0,
+              selected: item === page,
+              onClick: () => onPageChange(item),
+              children: item
+            },
+            item
+          )
+        ),
+        /* @__PURE__ */ jsx(
+          PageButton,
+          {
+            "aria-label": "Next page",
+            disabled: page >= total,
+            onClick: () => onPageChange(page + 1),
+            children: /* @__PURE__ */ jsx(Chevron, { dir: "right" })
+          }
+        )
+      ]
+    }
+  );
+}
+function PageButton({
+  selected,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "inline-flex size-8 items-center justify-center rounded-[8px] text-sm transition-colors",
+        "focus-visible:outline-2 focus-visible:outline-text focus-visible:outline-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        selected ? "bg-primary font-bold text-white" : "text-text hover:bg-hover",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Chevron({ dir }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("size-4", dir === "left" && "rotate-180"),
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 4 4 4-4 4" })
+    }
+  );
+}
+function clampPercent(value) {
+  return Math.max(0, Math.min(100, value));
+}
+var LINEAR_THICKNESS = {
+  "6xs": "h-0.5",
+  "5xs": "h-1",
+  "4xs": "h-2",
+  "3xs": "h-3",
+  "2xs": "h-4"
+};
+var CIRCULAR_SIZE = {
+  "2xs": 16,
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48
+};
+function Progress({
+  value,
+  className,
+  label = "Progress",
+  ...rest
+}) {
+  const pct = clampPercent(value);
+  const common = {
+    role: "progressbar",
+    "aria-label": label,
+    "aria-valuenow": Math.round(pct),
+    "aria-valuemin": 0,
+    "aria-valuemax": 100
+  };
+  if (rest.variant === "circular") {
+    const px = CIRCULAR_SIZE[rest.size ?? "md"];
+    const stroke = Math.max(2, Math.round(px / 8));
+    const r = (px - stroke) / 2;
+    const circumference = 2 * Math.PI * r;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...common,
+        width: px,
+        height: px,
+        viewBox: `0 0 ${px} ${px}`,
+        className: cn("-rotate-90", className),
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: px / 2,
+              cy: px / 2,
+              r,
+              fill: "none",
+              strokeWidth: stroke,
+              className: "stroke-background"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: px / 2,
+              cy: px / 2,
+              r,
+              fill: "none",
+              strokeWidth: stroke,
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: circumference * (1 - pct / 100),
+              className: "stroke-primary transition-[stroke-dashoffset]"
+            }
+          )
+        ]
+      }
+    );
+  }
+  const thickness = LINEAR_THICKNESS[rest.size ?? "4xs"];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...common,
+      className: cn(
+        "w-full overflow-hidden rounded-full bg-background",
+        thickness,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full rounded-full bg-primary transition-[width]",
+          style: { width: `${pct}%` }
+        }
+      )
+    }
+  );
+}
+var DropdownContext = createContext(null);
+function Dropdown({
+  trigger,
+  children,
+  align = "start",
+  className
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { close: () => setOpen(false) }, children: /* @__PURE__ */ jsx(
+    Popover,
+    {
+      trigger,
+      open,
+      onOpenChange: setOpen,
+      align,
+      className: cn("min-w-40", className),
+      children: /* @__PURE__ */ jsx("div", { role: "menu", className: "flex flex-col", children })
+    }
+  ) });
+}
+function DropdownItem({
+  leading,
+  trailing,
+  description,
+  selected,
+  children,
+  className,
+  onClick,
+  disabled,
+  ...props
+}) {
+  const ctx = useContext(DropdownContext);
+  const end = trailing ?? (selected ? /* @__PURE__ */ jsx(CheckMark, {}) : null);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      "aria-current": selected || void 0,
+      disabled,
+      onClick: (e) => {
+        onClick?.(e);
+        ctx?.close();
+      },
+      className: cn(
+        "flex w-full gap-2 rounded-[8px] px-3 py-2 text-left text-sm text-text",
+        description ? "items-start" : "items-center",
+        "hover:bg-hover focus-visible:bg-hover focus-visible:outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        leading && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leading }),
+        /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { children }),
+          description && /* @__PURE__ */ jsx("span", { className: "text-xs text-text-muted", children: description })
+        ] }),
+        end && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: end })
+      ]
+    }
+  );
+}
+function CheckMark() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-4 text-primary",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function filterOptions(options, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return options;
+  return options.filter((o) => o.label.toLowerCase().includes(q));
+}
+function Combobox(props) {
+  const {
+    options,
+    placeholder = "Select\u2026",
+    disabled,
+    className,
+    emptyMessage = "No results"
+  } = props;
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const filtered = useMemo(
+    () => filterOptions(options, query),
+    [options, query]
+  );
+  const selectedValues = props.multiple ? props.value : props.value ? [props.value] : [];
+  const labelFor = (v) => options.find((o) => o.value === v)?.label ?? v;
+  const isSelected = (v) => selectedValues.includes(v);
+  const commit = (v) => {
+    if (props.multiple) {
+      const set = new Set(props.value);
+      if (set.has(v)) set.delete(v);
+      else set.add(v);
+      props.onChange([...set]);
+      setQuery("");
+    } else {
+      props.onChange(v);
+      setQuery("");
+      setOpen(false);
+    }
+  };
+  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.value);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    } else if (e.key === "Backspace" && !query && props.multiple && props.value.length) {
+      props.onChange(props.value.slice(0, -1));
+    }
+  };
+  const singleSelectedLabel = !props.multiple && props.value ? labelFor(props.value) : "";
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-h-10 w-full flex-wrap items-center gap-1 rounded-[8px] border border-border bg-surface px-2 py-1 text-sm",
+          "focus-within:border-[1.5px] focus-within:border-primary",
+          disabled && "pointer-events-none opacity-50"
+        ),
+        onClick: () => setOpen(true),
+        children: [
+          props.multiple && props.value.map((v) => /* @__PURE__ */ jsx(
+            Chip,
+            {
+              size: "sm",
+              onDismiss: () => props.onChange(props.value.filter((x) => x !== v)),
+              children: labelFor(v)
+            },
+            v
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "min-w-[60px] flex-1 bg-transparent text-text outline-none placeholder:text-text-muted",
+              value: query || (!open ? singleSelectedLabel : ""),
+              placeholder: selectedValues.length ? "" : placeholder,
+              disabled,
+              role: "combobox",
+              "aria-expanded": open,
+              "aria-autocomplete": "list",
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setOpen(true);
+                setActiveIndex(0);
+              },
+              onFocus: () => setOpen(true),
+              onBlur: () => setTimeout(() => setOpen(false), 120),
+              onKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDown4,
+            {
+              className: cn(
+                "size-5 shrink-0 text-text-muted transition-transform",
+                open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        role: "listbox",
+        className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-[12px] border border-border bg-surface p-1 shadow-lg",
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-text-muted", children: emptyMessage }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            role: "option",
+            "aria-selected": isSelected(opt.value),
+            onMouseEnter: () => setActiveIndex(i),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              commit(opt.value);
+            },
+            className: cn(
+              "flex cursor-pointer items-center justify-between rounded-[8px] px-3 py-2 text-sm text-text",
+              i === activeIndex && "bg-hover"
+            ),
+            children: [
+              opt.label,
+              isSelected(opt.value) && /* @__PURE__ */ jsx(Check, { className: "size-4 text-primary" })
+            ]
+          },
+          opt.value
+        ))
+      }
+    )
+  ] });
+}
+function ChevronDown4({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function Check({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+
+export { Accordion, Alert, AuthCode, Avatar, Breadcrumbs, Button, Calendar, Carousel, Checkbox, Chip, Combobox, Container, DataTable, DateRangePicker, Drawer, Dropdown, DropdownItem, EmptyState, GroupField, Loader, Modal, Pagination, Popover, Progress, QuarterPicker, Radio, Search, SegmentedControl, Select, Sidebar, SidebarItem, SidebarSection, Snackbar, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Tag, TextInput, TextInputGroup, Textarea, TimePicker, ToastProvider, Tooltip, buttonVariants, clampPercent, cn, defaultPresets, filterOptions, paginationRange, presetRanges, selectionState, useToast };