@wow-two-beta/ui 0.0.12 → 0.0.14

package/dist/chunk-ASXB42MH.js

@@ -0,0 +1,1670 @@
+import { useClipboard, useControlled } from './chunk-4P2TFUVW.js';
+import { Slot, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner } from './chunk-YMSAS7M7.js';
+import { tv, dataAttr } from './chunk-BMBIZLO4.js';
+import { Icon } from './chunk-TDX22OWF.js';
+import { composeRefs } from './chunk-DN7WBRIV.js';
+import { cn } from './chunk-KZ4VFY2T.js';
+import { forwardRef, useState, Children, isValidElement, Fragment as Fragment$1, createContext, useId, useMemo, useCallback, useContext, useRef, cloneElement } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { X, TrendingUp, TrendingDown, Check, Copy, ChevronDown, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
+
+// src/display/heading/Heading.variants.ts
+var headingVariants = tv({
+  base: "font-semibold tracking-tight text-foreground",
+  variants: {
+    size: {
+      xs: "text-sm",
+      sm: "text-base",
+      md: "text-lg",
+      lg: "text-xl",
+      xl: "text-2xl",
+      "2xl": "text-3xl",
+      "3xl": "text-4xl",
+      "4xl": "text-5xl"
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    }
+  },
+  defaultVariants: {
+    size: "lg",
+    weight: "semibold"
+  }
+});
+var Heading = forwardRef(
+  ({ level = 2, className, size, weight, align, ...props }, ref) => {
+    const Tag2 = `h${level}`;
+    return /* @__PURE__ */ jsx(
+      Tag2,
+      {
+        ref,
+        className: cn(headingVariants({ size, weight, align }), className),
+        ...props
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+
+// src/display/text/Text.variants.ts
+var textVariants = tv({
+  base: "",
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+      xl: "text-xl"
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    color: {
+      default: "text-foreground",
+      muted: "text-muted-foreground",
+      subtle: "text-subtle-foreground",
+      brand: "text-primary",
+      success: "text-success",
+      warning: "text-warning",
+      danger: "text-destructive"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    truncate: {
+      true: "truncate"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    weight: "normal",
+    color: "default"
+  }
+});
+var Text = forwardRef(
+  ({ as: Component = "p", className, size, weight, color, align, truncate, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(textVariants({ size, weight, color, align, truncate }), className),
+      ...props
+    }
+  )
+);
+Text.displayName = "Text";
+
+// src/display/code/Code.variants.ts
+var codeVariants = tv({
+  base: "font-mono text-sm",
+  variants: {
+    variant: {
+      inline: "rounded-sm bg-muted px-1 py-0.5 text-foreground",
+      block: "block w-full overflow-x-auto rounded-md bg-muted p-4 text-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "inline"
+  }
+});
+var Code = forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("code", { ref, className: cn(codeVariants({ variant }), className), ...props })
+);
+Code.displayName = "Code";
+var Kbd = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "kbd",
+  {
+    ref,
+    className: cn(
+      "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-border",
+      "bg-muted px-1.5 font-mono text-xs text-muted-foreground shadow-[inset_0_-1px_0_0_rgb(0_0_0/0.05)]",
+      className
+    ),
+    ...props
+  }
+));
+Kbd.displayName = "Kbd";
+var Image = forwardRef(
+  ({ fallback, onError, alt = "", className, ...props }, ref) => {
+    const [errored, setErrored] = useState(false);
+    if (errored && fallback !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        alt,
+        className: cn("block max-w-full", className),
+        onError: (e) => {
+          setErrored(true);
+          onError?.(e);
+        },
+        ...props
+      }
+    );
+  }
+);
+Image.displayName = "Image";
+
+// src/display/avatar/Avatar.variants.ts
+var avatarVariants = tv({
+  base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground font-medium",
+  variants: {
+    size: {
+      xs: "h-6 w-6 text-xs",
+      sm: "h-8 w-8 text-sm",
+      md: "h-10 w-10 text-base",
+      lg: "h-12 w-12 text-lg",
+      xl: "h-16 w-16 text-xl",
+      "2xl": "h-20 w-20 text-2xl"
+    },
+    shape: {
+      circle: "rounded-full",
+      square: "rounded-md"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "circle"
+  }
+});
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0) return "";
+  const first = parts[0]?.[0] ?? "";
+  const last = parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "";
+  return (first + last).toUpperCase();
+}
+var Avatar = forwardRef(
+  ({ src, name = "", fallback, alt, className, size, shape, ...props }, ref) => {
+    const [errored, setErrored] = useState(false);
+    const showImage = src && !errored;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(avatarVariants({ size, shape }), className),
+        ...props,
+        children: showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: alt ?? name,
+            className: "h-full w-full object-cover",
+            onError: () => setErrored(true)
+          }
+        ) : fallback ?? getInitials(name)
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/display/badge/Badge.variants.ts
+var badgeVariants = tv({
+  base: "inline-flex items-center rounded-full font-medium",
+  variants: {
+    variant: {
+      neutral: "bg-muted text-foreground",
+      brand: "bg-primary-soft text-primary-soft-foreground",
+      success: "bg-success-soft text-success-soft-foreground",
+      warning: "bg-warning-soft text-warning-soft-foreground",
+      danger: "bg-destructive-soft text-destructive-soft-foreground",
+      info: "bg-info-soft text-info-soft-foreground",
+      outline: "border border-border text-foreground"
+    },
+    size: {
+      sm: "h-5 px-2 text-xs",
+      md: "h-6 px-2.5 text-xs",
+      lg: "h-7 px-3 text-sm"
+    }
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "md"
+  }
+});
+var Badge = forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
+);
+Badge.displayName = "Badge";
+
+// src/display/tag/Tag.variants.ts
+var tagVariants = tv({
+  base: "inline-flex items-center gap-1 rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-card-foreground",
+  variants: {
+    variant: {
+      neutral: "",
+      brand: "border-transparent bg-primary-soft text-primary-soft-foreground",
+      success: "border-transparent bg-success-soft text-success-soft-foreground",
+      warning: "border-transparent bg-warning-soft text-warning-soft-foreground",
+      danger: "border-transparent bg-destructive-soft text-destructive-soft-foreground",
+      info: "border-transparent bg-info-soft text-info-soft-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "neutral"
+  }
+});
+var Tag = forwardRef(
+  ({ children, onClose, closeLabel = "Remove", variant, className, ...props }, ref) => /* @__PURE__ */ jsxs("span", { ref, className: cn(tagVariants({ variant }), className), ...props, children: [
+    children,
+    onClose && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": closeLabel,
+        onClick: onClose,
+        className: "-mr-1 inline-flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        children: /* @__PURE__ */ jsx(Icon, { icon: X, size: 12 })
+      }
+    )
+  ] })
+);
+Tag.displayName = "Tag";
+var Separator = forwardRef(
+  ({ orientation = "horizontal", decorative = true, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": decorative ? void 0 : orientation,
+      className: cn(
+        "bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+var Mark = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "mark",
+  {
+    ref,
+    className: cn("rounded-sm bg-warning-soft px-0.5 text-warning-soft-foreground", className),
+    ...props
+  }
+));
+Mark.displayName = "Mark";
+var Quote = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      ref,
+      className: cn(
+        "border-l-4 border-border pl-4 italic text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Quote.displayName = "Quote";
+var PADDING = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+var CardRoot = forwardRef(
+  ({ className, padding = "none", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-border bg-card text-card-foreground shadow-xs",
+        PADDING[padding],
+        className
+      ),
+      ...props
+    }
+  )
+);
+CardRoot.displayName = "Card";
+var CardHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1 p-4 pb-2", className), ...props }));
+CardHeader.displayName = "Card.Header";
+var CardTitle = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-lg font-semibold tracking-tight", className), ...props })
+);
+CardTitle.displayName = "Card.Title";
+var CardDescription = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "Card.Description";
+var CardBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-2", className), ...props }));
+CardBody.displayName = "Card.Body";
+var CardFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2 border-t border-border p-4", className), ...props }));
+CardFooter.displayName = "Card.Footer";
+var Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Body: CardBody,
+  Footer: CardFooter
+});
+var AvatarGroup = forwardRef(
+  ({ max, size = "md", overlap = "-ml-2", className, children, ...props }, ref) => {
+    const all = Children.toArray(children).filter(isValidElement);
+    const visible = max ? all.slice(0, max) : all;
+    const overflow = max ? Math.max(0, all.length - max) : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex items-center", className),
+        ...props,
+        children: [
+          visible.map((child, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("ring-2 ring-background rounded-full", i > 0 && overlap),
+              children: /* @__PURE__ */ jsx(Avatar, { ...child.props, size })
+            },
+            i
+          )),
+          overflow > 0 && /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              size,
+              name: `+${overflow}`,
+              className: cn(overlap, "ring-2 ring-background")
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+function Tooltip({
+  content,
+  children,
+  placement = "top",
+  openDelay = 700,
+  closeDelay = 0,
+  open: controlledOpen,
+  disabled
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const [anchor, setAnchor] = useState(null);
+  const openTimer = useRef(null);
+  const closeTimer = useRef(null);
+  const clear = () => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    openTimer.current = null;
+    closeTimer.current = null;
+  };
+  const show = () => {
+    clear();
+    openTimer.current = setTimeout(() => setUncontrolledOpen(true), openDelay);
+  };
+  const hide = () => {
+    clear();
+    closeTimer.current = setTimeout(() => setUncontrolledOpen(false), closeDelay);
+  };
+  if (!isValidElement(children)) return children;
+  const trigger = children;
+  const cloned = cloneElement(trigger, {
+    ref: composeRefs(setAnchor, trigger.ref),
+    onPointerEnter: (e) => {
+      trigger.props.onPointerEnter?.(e);
+      show();
+    },
+    onPointerLeave: (e) => {
+      trigger.props.onPointerLeave?.(e);
+      hide();
+    },
+    onFocus: (e) => {
+      trigger.props.onFocus?.(e);
+      show();
+    },
+    onBlur: (e) => {
+      trigger.props.onBlur?.(e);
+      hide();
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloned,
+    !disabled && open && content && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnchoredPositioner, { anchor, placement, offset: 6, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tooltip",
+        className: cn(
+          "z-tooltip rounded-md bg-inverse px-2.5 py-1.5 text-xs text-inverse-foreground shadow-md",
+          "animate-in fade-in-0 zoom-in-95"
+        ),
+        children: content
+      }
+    ) }) })
+  ] });
+}
+var SIZE = {
+  sm: { wrap: "gap-2 py-6", iconBox: "h-10 w-10" },
+  md: { wrap: "gap-3 py-10", iconBox: "h-14 w-14" },
+  lg: { wrap: "gap-4 py-16", iconBox: "h-20 w-20" }
+};
+var EmptyState = forwardRef(
+  ({ icon, title, description, actions, size = "md", className, ...props }, ref) => {
+    const sz = SIZE[size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center text-center", sz.wrap, className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center rounded-full bg-muted text-muted-foreground",
+                sz.iconBox
+              ),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx(Heading, { level: 3, size: size === "sm" ? "md" : size === "lg" ? "xl" : "lg", children: title }),
+          description && /* @__PURE__ */ jsx(Text, { color: "muted", size: size === "lg" ? "md" : "sm", children: description }),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: actions })
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+var VALUE_SIZE = {
+  sm: "2xl",
+  md: "3xl",
+  lg: "4xl"
+};
+var Stat = forwardRef(
+  ({ label, value, trend, helper, size = "md", className, ...props }, ref) => {
+    const trendUp = trend ? trend.value >= 0 : false;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", color: "muted", children: label }),
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: VALUE_SIZE[size], weight: "bold", children: value }),
+      (trend || helper) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+        trend && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-0.5 text-xs font-medium",
+              trendUp ? "text-success" : "text-destructive"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: trendUp ? TrendingUp : TrendingDown, size: 12 }),
+              trend.value > 0 ? "+" : "",
+              trend.value,
+              "%",
+              trend.label && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                " ",
+                trend.label
+              ] })
+            ]
+          }
+        ),
+        helper && !trend && /* @__PURE__ */ jsx(Text, { size: "xs", color: "muted", children: helper })
+      ] })
+    ] });
+  }
+);
+Stat.displayName = "Stat";
+var Snippet = forwardRef(
+  ({ text, variant = "inline", className, ...props }, ref) => {
+    const { copied, copy } = useClipboard();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group relative inline-flex w-full items-start",
+          variant === "inline" ? "gap-2" : "flex-col gap-0",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Code, { variant, className: "flex-1 pr-10", children: text }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": copied ? "Copied" : "Copy",
+              onClick: () => void copy(text),
+              className: cn(
+                "absolute right-2 grid h-7 w-7 place-items-center rounded text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                variant === "inline" ? "top-1/2 -translate-y-1/2" : "top-2"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { icon: copied ? Check : Copy, size: 14 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Snippet.displayName = "Snippet";
+var TONE = {
+  destructive: "bg-destructive",
+  success: "bg-success",
+  warning: "bg-warning",
+  info: "bg-info",
+  primary: "bg-primary",
+  neutral: "bg-muted-foreground"
+};
+var SIZE2 = {
+  xs: "h-1.5 w-1.5",
+  sm: "h-2 w-2",
+  md: "h-2.5 w-2.5"
+};
+var POS = {
+  "top-right": "absolute -top-0.5 -right-0.5",
+  "top-left": "absolute -top-0.5 -left-0.5",
+  "bottom-right": "absolute -bottom-0.5 -right-0.5",
+  "bottom-left": "absolute -bottom-0.5 -left-0.5"
+};
+var NotificationDot = forwardRef(
+  ({ tone = "destructive", size = "sm", pulse, position, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex rounded-full ring-2 ring-background",
+        TONE[tone],
+        SIZE2[size],
+        position && POS[position],
+        pulse && 'after:absolute after:inset-0 after:animate-ping after:rounded-full after:opacity-75 after:content-[""] ' + TONE[tone],
+        className
+      ),
+      ...props
+    }
+  )
+);
+NotificationDot.displayName = "NotificationDot";
+var CountBadge = forwardRef(
+  ({ value, max = 99, hideZero = true, variant = "danger", className, ...props }, ref) => {
+    if (value === 0 && hideZero) return null;
+    const display = value > max ? `${max}+` : `${value}`;
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        ref,
+        variant,
+        size: "sm",
+        className: cn("min-w-5 justify-center px-1.5", className),
+        ...props,
+        children: display
+      }
+    );
+  }
+);
+CountBadge.displayName = "CountBadge";
+var TONE2 = {
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  info: "bg-info",
+  neutral: "bg-muted-foreground"
+};
+var Status = forwardRef(
+  ({ tone = "success", pulse, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn("inline-flex items-center gap-2 text-sm text-foreground", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("inline-block h-2 w-2 rounded-full", TONE2[tone]) }),
+          pulse && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute inset-0 inline-block rounded-full opacity-75 animate-ping",
+                TONE2[tone]
+              )
+            }
+          )
+        ] }),
+        children
+      ]
+    }
+  )
+);
+Status.displayName = "Status";
+var KeyboardShortcut = forwardRef(
+  ({ keys, separator = "+", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("inline-flex items-center gap-1 text-muted-foreground", className),
+      ...props,
+      children: keys.map((key, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: separator }),
+        /* @__PURE__ */ jsx(Kbd, { children: key })
+      ] }, i))
+    }
+  )
+);
+KeyboardShortcut.displayName = "KeyboardShortcut";
+var ROW_GAP = {
+  sm: "gap-y-1",
+  md: "gap-y-2",
+  lg: "gap-y-3"
+};
+var DescriptionList = forwardRef(
+  ({ items, layout = "inline", density = "md", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "dl",
+    {
+      ref,
+      className: cn(
+        "text-sm",
+        layout === "inline" ? "grid grid-cols-[max-content_1fr] gap-x-4" : "flex flex-col gap-1",
+        ROW_GAP[density],
+        className
+      ),
+      ...props,
+      children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: cn("contents", layout === "stacked" && "flex flex-col gap-0.5"), children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: item.label }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: item.value })
+      ] }, i))
+    }
+  )
+);
+DescriptionList.displayName = "DescriptionList";
+var InfoRow = forwardRef(
+  ({ label, value, icon, layout = "inline", className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex text-sm",
+        layout === "inline" ? "items-center justify-between gap-3" : "flex-col gap-0.5",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+          icon,
+          label
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground", children: value })
+      ]
+    }
+  )
+);
+InfoRow.displayName = "InfoRow";
+var POS2 = {
+  "top-right": "top-0 right-0 -translate-y-1/2 translate-x-1/2",
+  "top-left": "top-0 left-0 -translate-y-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-0 right-0 translate-y-1/2 translate-x-1/2",
+  "bottom-left": "bottom-0 left-0 translate-y-1/2 -translate-x-1/2"
+};
+var BadgeOverlay = forwardRef(
+  ({ children, badge, position = "top-right", hidden, className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("relative inline-flex", className), ...props, children: [
+    children,
+    !hidden && /* @__PURE__ */ jsx("span", { className: cn("absolute z-10", POS2[position]), children: badge })
+  ] })
+);
+BadgeOverlay.displayName = "BadgeOverlay";
+var SectionHeader = forwardRef(
+  ({ title, description, actions, level = 2, size = "lg", bordered = true, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      className: cn(
+        "flex items-start justify-between gap-4 pb-3",
+        bordered && "border-b border-border",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(Heading, { level, size, children: title }),
+          description && /* @__PURE__ */ jsx(Text, { size: "sm", color: "muted", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+      ]
+    }
+  )
+);
+SectionHeader.displayName = "SectionHeader";
+function escape(re) {
+  return re.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var Highlight = forwardRef(
+  ({ children, query, wholeWord, className, ...props }, ref) => {
+    const queries = (Array.isArray(query) ? query : [query]).filter(Boolean);
+    if (queries.length === 0) return /* @__PURE__ */ jsx("span", { ref, className: cn(className), ...props, children });
+    const pattern = queries.map(escape).join("|");
+    const regex = new RegExp(wholeWord ? `\\b(${pattern})\\b` : `(${pattern})`, "gi");
+    const parts = children.split(regex);
+    const nodes = [];
+    parts.forEach((part, i) => {
+      if (queries.some((q) => part.toLowerCase() === q.toLowerCase())) {
+        nodes.push(/* @__PURE__ */ jsx(Mark, { children: part }, i));
+      } else if (part) {
+        nodes.push(/* @__PURE__ */ jsx(Fragment$1, { children: part }, i));
+      }
+    });
+    return /* @__PURE__ */ jsx("span", { ref, className: cn(className), ...props, children: nodes });
+  }
+);
+Highlight.displayName = "Highlight";
+var CollapsibleContext = createContext(null);
+function useCollapsibleContext() {
+  const ctx = useContext(CollapsibleContext);
+  if (!ctx) throw new Error("Collapsible.* must be used inside <Collapsible>");
+  return ctx;
+}
+var Collapsible = forwardRef(function Collapsible2({ open: openProp, defaultOpen = false, onOpenChange, disabled = false, className, children, ...rest }, ref) {
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const contentId = useId();
+  const triggerId = useId();
+  const ctx = useMemo(
+    () => ({ open, setOpen, contentId, triggerId, disabled }),
+    [open, setOpen, contentId, triggerId, disabled]
+  );
+  return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-state": open ? "open" : "closed",
+      "data-disabled": dataAttr(disabled),
+      className,
+      ...rest,
+      children
+    }
+  ) });
+});
+var CollapsibleTrigger = forwardRef(
+  function CollapsibleTrigger2({ asChild, onClick, children, ...rest }, ref) {
+    const ctx = useCollapsibleContext();
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        id: ctx.triggerId,
+        type: "button",
+        "aria-expanded": ctx.open,
+        "aria-controls": ctx.contentId,
+        "data-state": ctx.open ? "open" : "closed",
+        "data-disabled": dataAttr(ctx.disabled),
+        disabled: ctx.disabled,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented || ctx.disabled) return;
+          ctx.setOpen(!ctx.open);
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var CollapsibleContent = forwardRef(
+  function CollapsibleContent2({ forceMount, className, children, ...rest }, ref) {
+    const ctx = useCollapsibleContext();
+    if (!ctx.open && !forceMount) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: ctx.contentId,
+        role: "region",
+        "aria-labelledby": ctx.triggerId,
+        "data-state": ctx.open ? "open" : "closed",
+        hidden: !ctx.open,
+        className: cn(
+          "overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Collapsible.Trigger = CollapsibleTrigger;
+Collapsible.Content = CollapsibleContent;
+var AccordionContext = createContext(null);
+function useAccordionContext() {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion.* must be used inside <Accordion>");
+  return ctx;
+}
+var AccordionItemContext = createContext(null);
+function useAccordionItemContext() {
+  const ctx = useContext(AccordionItemContext);
+  if (!ctx) throw new Error("Accordion.Trigger / Content must be used inside <Accordion.Item>");
+  return ctx;
+}
+var Accordion = forwardRef(function Accordion2(props, ref) {
+  const {
+    type = "single",
+    value,
+    defaultValue,
+    onValueChange,
+    collapsible = false,
+    disabled = false,
+    className,
+    children,
+    ...rest
+  } = props;
+  const initial = defaultValue ?? (type === "multiple" ? [] : "");
+  const [current, setCurrent] = useControlled({
+    controlled: value,
+    default: initial,
+    onChange: onValueChange
+  });
+  const isOpen = useCallback(
+    (val) => Array.isArray(current) ? current.includes(val) : current === val,
+    [current]
+  );
+  const toggle = useCallback(
+    (val) => {
+      if (type === "multiple") {
+        const arr = Array.isArray(current) ? current : [];
+        setCurrent(arr.includes(val) ? arr.filter((v) => v !== val) : [...arr, val]);
+      } else {
+        if (current === val) {
+          if (collapsible) setCurrent("");
+        } else {
+          setCurrent(val);
+        }
+      }
+    },
+    [collapsible, current, setCurrent, type]
+  );
+  const ctx = useMemo(
+    () => ({ isOpen, toggle, disabled }),
+    [isOpen, toggle, disabled]
+  );
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    RovingFocusGroup,
+    {
+      ref,
+      orientation: "vertical",
+      loop: true,
+      className: cn("flex flex-col", className),
+      ...rest,
+      children
+    }
+  ) });
+});
+var AccordionItem = forwardRef(
+  function AccordionItem2({ value, disabled = false, className, children, ...rest }, ref) {
+    const accordion = useAccordionContext();
+    const open = accordion.isOpen(value);
+    const contentId = useId();
+    const triggerId = useId();
+    const itemDisabled = disabled || accordion.disabled;
+    const itemCtx = useMemo(
+      () => ({ value, open, contentId, triggerId, disabled: itemDisabled }),
+      [value, open, contentId, triggerId, itemDisabled]
+    );
+    return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-state": open ? "open" : "closed",
+        "data-disabled": dataAttr(itemDisabled),
+        className: cn("border-b border-border", className),
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+var AccordionTrigger = forwardRef(
+  function AccordionTrigger2({ className, onClick, children, ...rest }, ref) {
+    const accordion = useAccordionContext();
+    const item = useAccordionItemContext();
+    const roving = useRovingFocusItem();
+    return /* @__PURE__ */ jsx("h3", { className: "flex", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: (node) => {
+          roving.ref(node);
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id: item.triggerId,
+        type: "button",
+        "aria-expanded": item.open,
+        "aria-controls": item.contentId,
+        "data-state": item.open ? "open" : "closed",
+        "data-disabled": dataAttr(item.disabled),
+        disabled: item.disabled,
+        tabIndex: roving.tabIndex,
+        onFocus: roving.onFocus,
+        onKeyDown: roving.onKeyDown,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented || item.disabled) return;
+          accordion.toggle(item.value);
+        },
+        className: cn(
+          "flex w-full items-center justify-between gap-2 px-3 py-3 text-left text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
+                item.open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var AccordionContent = forwardRef(
+  function AccordionContent2({ className, children, ...rest }, ref) {
+    const item = useAccordionItemContext();
+    if (!item.open) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: item.contentId,
+        role: "region",
+        "aria-labelledby": item.triggerId,
+        "data-state": "open",
+        className: cn("overflow-hidden px-3 pb-3 text-sm text-foreground", className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Accordion.Item = AccordionItem;
+Accordion.Trigger = AccordionTrigger;
+Accordion.Content = AccordionContent;
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs.* must be used inside <Tabs>");
+  return ctx;
+}
+var Tabs = forwardRef(function Tabs2({
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  className,
+  children,
+  ...rest
+}, ref) {
+  const [active, setActive] = useControlled({
+    controlled: value,
+    default: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  const baseId = useId();
+  const ctx = useMemo(
+    () => ({ value: active, setValue: setActive, orientation, activationMode, baseId }),
+    [active, setActive, orientation, activationMode, baseId]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-orientation": orientation,
+      className: cn(
+        orientation === "vertical" ? "flex gap-2" : "flex flex-col gap-2",
+        className
+      ),
+      ...rest,
+      children
+    }
+  ) });
+});
+var TabsList = forwardRef(function TabsList2({ className, children, ...rest }, ref) {
+  const ctx = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    RovingFocusGroup,
+    {
+      ref,
+      orientation: ctx.orientation,
+      loop: true,
+      role: "tablist",
+      "aria-orientation": ctx.orientation,
+      "data-orientation": ctx.orientation,
+      className: cn(
+        "inline-flex border-border",
+        ctx.orientation === "vertical" ? "flex-col border-r" : "flex-row border-b",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var TabsTab = forwardRef(function TabsTab2({ value, disabled = false, className, onClick, onFocus, children, ...rest }, ref) {
+  const ctx = useTabsContext();
+  const roving = useRovingFocusItem();
+  const selected = ctx.value === value;
+  const tabId = `${ctx.baseId}-tab-${value}`;
+  const panelId = `${ctx.baseId}-panel-${value}`;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: (node) => {
+        roving.ref(node);
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      id: tabId,
+      role: "tab",
+      type: "button",
+      "aria-selected": selected,
+      "aria-controls": panelId,
+      "data-state": selected ? "active" : "inactive",
+      "data-disabled": dataAttr(disabled),
+      tabIndex: roving.tabIndex,
+      disabled,
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented || disabled) return;
+        ctx.setValue(value);
+      },
+      onFocus: (e) => {
+        onFocus?.(e);
+        roving.onFocus();
+        if (ctx.activationMode === "automatic" && !disabled) {
+          ctx.setValue(value);
+        }
+      },
+      onKeyDown: roving.onKeyDown,
+      className: cn(
+        "inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground transition-colors",
+        "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-[state=active]:text-foreground data-[state=active]:border-primary",
+        ctx.orientation === "vertical" ? "border-r-2 border-transparent data-[state=active]:border-primary" : "border-b-2 border-transparent data-[state=active]:border-primary",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var TabsPanel = forwardRef(function TabsPanel2({ value, className, children, ...rest }, ref) {
+  const ctx = useTabsContext();
+  if (ctx.value !== value) return null;
+  const tabId = `${ctx.baseId}-tab-${value}`;
+  const panelId = `${ctx.baseId}-panel-${value}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id: panelId,
+      role: "tabpanel",
+      "aria-labelledby": tabId,
+      tabIndex: 0,
+      className: cn(
+        "flex-1 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+Tabs.List = TabsList;
+Tabs.Tab = TabsTab;
+Tabs.Panel = TabsPanel;
+
+// src/display/list/List.variants.ts
+var listVariants = tv({
+  base: "list-outside",
+  variants: {
+    marker: {
+      none: "list-none pl-0",
+      disc: "list-disc pl-5",
+      decimal: "list-decimal pl-5",
+      check: "list-none pl-0"
+    },
+    spacing: {
+      tight: "[&>li]:py-0.5",
+      normal: "[&>li]:py-1",
+      loose: "[&>li]:py-2"
+    }
+  },
+  defaultVariants: {
+    marker: "none",
+    spacing: "normal"
+  }
+});
+var listItemVariants = tv({
+  base: "flex items-start gap-3 text-sm text-foreground"
+});
+var List = forwardRef(function List2({ ordered, marker, spacing, className, children, ...rest }, ref) {
+  const Component = ordered ? "ol" : "ul";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(listVariants({ marker, spacing }), className),
+      ...rest,
+      children
+    }
+  );
+});
+var ListItem = forwardRef(function ListItem2({ leading, trailing, showCheckMarker, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs("li", { ref, className: cn(listItemVariants(), className), ...rest, children: [
+    showCheckMarker && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mt-0.5 shrink-0 text-primary", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }),
+    leading && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mt-0.5 shrink-0 text-muted-foreground", children: leading }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+    trailing && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: trailing })
+  ] });
+});
+List.Item = ListItem;
+var TimelineContext = createContext(null);
+var Timeline = forwardRef(function Timeline2({ align = "left", className, children, ...rest }, ref) {
+  const total = Children.toArray(children).filter(isValidElement).length;
+  return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: { align, total }, children: /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: cn(
+        "flex list-none flex-col",
+        align === "right" && "items-end",
+        className
+      ),
+      ...rest,
+      children: Children.map(children, (child, idx) => {
+        if (!isValidElement(child)) return child;
+        return idx === total - 1 ? (
+          // mark the last item so the connector line is suppressed
+          { ...child, props: { ...child.props, "data-last": "" } }
+        ) : child;
+      })
+    }
+  ) });
+});
+var STATUS_BG = {
+  default: "bg-muted text-muted-foreground border-border",
+  primary: "bg-primary text-primary-foreground border-primary",
+  success: "bg-success text-success-foreground border-success",
+  warning: "bg-warning text-warning-foreground border-warning",
+  destructive: "bg-destructive text-destructive-foreground border-destructive",
+  info: "bg-info text-info-foreground border-info"
+};
+var TimelineItem = forwardRef(function TimelineItem2({ status = "default", icon, className, children, ...rest }, ref) {
+  const ctx = useContext(TimelineContext);
+  const isLast = rest["data-last"] !== void 0;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      "data-status": status,
+      className: cn("relative flex gap-3 pb-6 last:pb-0", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "relative z-10 grid h-7 w-7 place-items-center rounded-full border-2",
+                STATUS_BG[status]
+              ),
+              children: icon ?? /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current" })
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute left-1/2 top-7 h-full w-px -translate-x-1/2 bg-border"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex-1 pt-0.5", ctx?.align === "right" && "order-first text-right"), children })
+      ]
+    }
+  );
+});
+function TimelineTitle({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("h4", { className: cn("text-sm font-medium text-foreground", className), ...rest, children });
+}
+function TimelineDescription({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-muted-foreground", className), ...rest, children });
+}
+Timeline.Item = TimelineItem;
+Timeline.Title = TimelineTitle;
+Timeline.Description = TimelineDescription;
+var TreeContext = createContext(null);
+function useTreeContext() {
+  const ctx = useContext(TreeContext);
+  if (!ctx) throw new Error("Tree.* must be used inside <Tree>");
+  return ctx;
+}
+var TreeLevelContext = createContext({ level: 1 });
+function useTreeLevel() {
+  return useContext(TreeLevelContext).level;
+}
+var Tree = forwardRef(function Tree2({
+  selectedValue,
+  defaultSelectedValue,
+  onSelectionChange,
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const [selected, setSelected] = useControlled({
+    controlled: selectedValue,
+    default: defaultSelectedValue ?? null,
+    onChange: onSelectionChange
+  });
+  const [expandedList, setExpandedList] = useControlled({
+    controlled: expanded,
+    default: defaultExpanded ?? [],
+    onChange: onExpandedChange
+  });
+  const expandedSet = useMemo(() => new Set(expandedList), [expandedList]);
+  const toggleExpanded = useCallback(
+    (value) => {
+      const next = new Set(expandedSet);
+      if (next.has(value)) next.delete(value);
+      else next.add(value);
+      setExpandedList(Array.from(next));
+    },
+    [expandedSet, setExpandedList]
+  );
+  const ctx = useMemo(
+    () => ({
+      selectedValue: selected,
+      setSelectedValue: setSelected,
+      expanded: expandedSet,
+      toggleExpanded
+    }),
+    [selected, setSelected, expandedSet, toggleExpanded]
+  );
+  return /* @__PURE__ */ jsx(TreeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    RovingFocusGroup,
+    {
+      ref,
+      orientation: "vertical",
+      loop: true,
+      role: "tree",
+      className: cn("flex flex-col text-sm", className),
+      ...rest,
+      children
+    }
+  ) });
+});
+function NodeRow({
+  level,
+  selected,
+  expanded,
+  hasChildren,
+  disabled,
+  onActivate,
+  label
+}) {
+  const roving = useRovingFocusItem();
+  const handleKeyDown = useCallback(
+    (e) => {
+      roving.onKeyDown(e);
+      if (e.defaultPrevented || disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onActivate();
+      }
+    },
+    [roving, disabled, onActivate]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: roving.ref,
+      role: "treeitem",
+      "aria-level": level,
+      "aria-selected": selected || void 0,
+      "aria-expanded": hasChildren ? expanded : void 0,
+      "aria-disabled": disabled || void 0,
+      "data-selected": dataAttr(selected),
+      "data-disabled": dataAttr(disabled),
+      tabIndex: roving.tabIndex,
+      onFocus: roving.onFocus,
+      onKeyDown: handleKeyDown,
+      onClick: () => {
+        if (!disabled) onActivate();
+      },
+      style: { paddingLeft: `${(level - 1) * 16}px` },
+      className: cn(
+        "flex cursor-pointer items-center gap-1 rounded-sm px-2 py-1 transition-colors",
+        "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        selected && "bg-primary-soft text-primary-soft-foreground",
+        disabled && "pointer-events-none opacity-50"
+      ),
+      children: [
+        hasChildren ? /* @__PURE__ */ jsx(
+          ChevronRight,
+          {
+            className: cn(
+              "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
+              expanded && "rotate-90"
+            )
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: label })
+      ]
+    }
+  );
+}
+var TreeGroup = forwardRef(function TreeGroup2({ value, label, disabled = false, className, children, ...rest }, ref) {
+  const ctx = useTreeContext();
+  const level = useTreeLevel();
+  const expanded = ctx.expanded.has(value);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      "data-state": expanded ? "open" : "closed",
+      className: cn("list-none", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          NodeRow,
+          {
+            level,
+            selected: false,
+            expanded,
+            hasChildren: true,
+            disabled,
+            onActivate: () => ctx.toggleExpanded(value),
+            label
+          }
+        ),
+        expanded && /* @__PURE__ */ jsx(TreeLevelContext.Provider, { value: { level: level + 1 }, children: /* @__PURE__ */ jsx("ul", { role: "group", className: "flex flex-col", children }) })
+      ]
+    }
+  );
+});
+var TreeItem = forwardRef(function TreeItem2({ value, disabled = false, className, children, ...rest }, ref) {
+  const ctx = useTreeContext();
+  const level = useTreeLevel();
+  const selected = ctx.selectedValue === value;
+  return /* @__PURE__ */ jsx("li", { ref, role: "presentation", className: cn("list-none", className), ...rest, children: /* @__PURE__ */ jsx(
+    NodeRow,
+    {
+      level,
+      selected,
+      hasChildren: false,
+      disabled,
+      onActivate: () => ctx.setSelectedValue(value),
+      label: children
+    }
+  ) });
+});
+Tree.Group = TreeGroup;
+Tree.Item = TreeItem;
+var TableContext = createContext({
+  striped: false,
+  hoverable: false,
+  density: "cozy"
+});
+var DENSITY_CELL = {
+  compact: "px-2 py-1.5 text-sm",
+  cozy: "px-3 py-2 text-sm",
+  comfortable: "px-4 py-3 text-sm"
+};
+var Table = forwardRef(function Table2({ striped = false, hoverable = false, density = "cozy", bare = false, className, children, ...rest }, ref) {
+  const ctx = { striped, hoverable, density };
+  const tableEl = /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      className: cn("w-full caption-bottom border-collapse text-left", className),
+      ...rest,
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: ctx, children: bare ? tableEl : /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-x-auto rounded-md border border-border", children: tableEl }) });
+});
+var TableHead = forwardRef(
+  function TableHead2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        ref,
+        className: cn("border-b border-border bg-muted/50 text-xs font-semibold uppercase tracking-wide text-muted-foreground", className),
+        ...rest
+      }
+    );
+  }
+);
+var TableBody = forwardRef(
+  function TableBody2({ className, ...rest }, ref) {
+    const ctx = useContext(TableContext);
+    return /* @__PURE__ */ jsx(
+      "tbody",
+      {
+        ref,
+        className: cn(
+          ctx.striped && "[&>tr:nth-child(even)]:bg-muted/30",
+          ctx.hoverable && "[&>tr:hover]:bg-muted",
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var TableFooter = forwardRef(
+  function TableFooter2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "tfoot",
+      {
+        ref,
+        className: cn("border-t border-border bg-muted/50 font-medium", className),
+        ...rest
+      }
+    );
+  }
+);
+var TableRow = forwardRef(
+  function TableRow2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "tr",
+      {
+        ref,
+        className: cn("border-b border-border last:border-0 transition-colors data-[selected]:bg-primary-soft", className),
+        ...rest
+      }
+    );
+  }
+);
+var TableHeaderCell = forwardRef(
+  function TableHeaderCell2({ className, ...rest }, ref) {
+    const ctx = useContext(TableContext);
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        scope: "col",
+        className: cn(DENSITY_CELL[ctx.density], "font-semibold text-foreground", className),
+        ...rest
+      }
+    );
+  }
+);
+var TableCell = forwardRef(function TableCell2({ className, ...rest }, ref) {
+  const ctx = useContext(TableContext);
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(DENSITY_CELL[ctx.density], "align-middle", className),
+      ...rest
+    }
+  );
+});
+var TableCaption = forwardRef(function TableCaption2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      ref,
+      className: cn("mt-2 text-sm text-muted-foreground", className),
+      ...rest
+    }
+  );
+});
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Footer = TableFooter;
+Table.Row = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;
+Table.Caption = TableCaption;
+function defaultCompare(a, b) {
+  if (a === b) return 0;
+  if (a === null || a === void 0) return 1;
+  if (b === null || b === void 0) return -1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  return String(a).localeCompare(String(b));
+}
+function DataTable({
+  columns,
+  data,
+  rowKey,
+  onRowClick,
+  sortBy,
+  defaultSortBy,
+  onSortChange,
+  striped,
+  hoverable = !!onRowClick,
+  density,
+  bare,
+  emptyContent = "No results.",
+  className,
+  "aria-label": ariaLabel
+}) {
+  const [sort, setSort] = useControlled({
+    controlled: sortBy,
+    default: defaultSortBy ?? null,
+    onChange: onSortChange
+  });
+  const sortedData = useMemo(() => {
+    if (!sort) return data;
+    const col = columns.find((c) => c.key === sort.columnKey);
+    if (!col?.accessor) return data;
+    const accessor = col.accessor;
+    const sorted = [...data].sort((a, b) => {
+      const r = defaultCompare(accessor(a), accessor(b));
+      return sort.direction === "asc" ? r : -r;
+    });
+    return sorted;
+  }, [data, columns, sort]);
+  const cycleSort = (columnKey) => {
+    if (!sort || sort.columnKey !== columnKey) {
+      setSort({ columnKey, direction: "asc" });
+    } else if (sort.direction === "asc") {
+      setSort({ columnKey, direction: "desc" });
+    } else {
+      setSort(null);
+    }
+  };
+  const alignClass = (a) => a === "right" ? "text-right" : a === "center" ? "text-center" : "text-left";
+  return /* @__PURE__ */ jsxs(
+    Table,
+    {
+      striped,
+      hoverable,
+      density,
+      bare,
+      className,
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => {
+          const isSorted = sort?.columnKey === col.key;
+          const ariaSort = isSorted ? sort?.direction === "asc" ? "ascending" : "descending" : col.sortable ? "none" : void 0;
+          return /* @__PURE__ */ jsx(
+            TableHeaderCell,
+            {
+              "aria-sort": ariaSort,
+              style: col.width ? { width: col.width } : void 0,
+              className: alignClass(col.align),
+              children: col.sortable ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => cycleSort(col.key),
+                  className: cn(
+                    "inline-flex items-center gap-1 rounded-sm transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: col.header }),
+                    isSorted ? sort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 opacity-50" })
+                  ]
+                }
+              ) : col.header
+            },
+            col.key
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: sortedData.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "py-8 text-center text-muted-foreground", children: emptyContent }) }) : sortedData.map((row, rowIndex) => {
+          const key = rowKey ? rowKey(row, rowIndex) : rowIndex;
+          return /* @__PURE__ */ jsx(
+            TableRow,
+            {
+              onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+              className: cn(onRowClick && "cursor-pointer"),
+              children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { className: alignClass(col.align), children: col.cell ? col.cell(row, rowIndex) : col.accessor ? col.accessor(row) : null }, col.key))
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarGroup, Badge, BadgeOverlay, Card, Code, Collapsible, CollapsibleContent, CollapsibleTrigger, CountBadge, DataTable, DescriptionList, EmptyState, Heading, Highlight, Image, InfoRow, Kbd, KeyboardShortcut, List, ListItem, Mark, NotificationDot, Quote, SectionHeader, Separator, Snippet, Stat, Status, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Tag, Text, Timeline, TimelineDescription, TimelineItem, TimelineTitle, Tooltip, Tree, TreeGroup, TreeItem, avatarVariants, badgeVariants, codeVariants, headingVariants, tagVariants, textVariants };
+//# sourceMappingURL=chunk-ASXB42MH.js.map
+//# sourceMappingURL=chunk-ASXB42MH.js.map