@wow-two-beta/ui 0.0.13 → 0.0.15

package/dist/{chunk-PRRVOVUC.js → chunk-W7LQZKTH.js}

@@ -1,12 +1,12 @@
 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 { Slot, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner } from './chunk-NC2CBGX2.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 { forwardRef, useState, Children, isValidElement, Fragment as Fragment$1, createContext, useId, useMemo, useCallback, useContext, useEffect, useRef, cloneElement } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { X, TrendingUp, TrendingDown, Check, Copy, ChevronDown } from 'lucide-react';
+import { TrendingUp, TrendingDown, Check, Copy, ChevronDown, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
 
 // src/display/heading/Heading.variants.ts
 var headingVariants = tv({
@@ -41,9 +41,9 @@ var headingVariants = tv({
 });
 var Heading = forwardRef(
   ({ level = 2, className, size, weight, align, ...props }, ref) => {
-    const Tag2 = `h${level}`;
+    const Tag = `h${level}`;
     return /* @__PURE__ */ jsx(
-      Tag2,
+      Tag,
       {
         ref,
         className: cn(headingVariants({ size, weight, align }), className),
@@ -241,40 +241,6 @@ 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",
@@ -1145,6 +1111,764 @@ Tabs.List = TabsList;
 Tabs.Tab = TabsTab;
 Tabs.Panel = TabsPanel;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarGroup, Badge, BadgeOverlay, Card, Code, Collapsible, CollapsibleContent, CollapsibleTrigger, CountBadge, DescriptionList, EmptyState, Heading, Highlight, Image, InfoRow, Kbd, KeyboardShortcut, Mark, NotificationDot, Quote, SectionHeader, Separator, Snippet, Stat, Status, Tabs, TabsList, TabsPanel, TabsTab, Tag, Text, Tooltip, avatarVariants, badgeVariants, codeVariants, headingVariants, tagVariants, textVariants };
-//# sourceMappingURL=chunk-PRRVOVUC.js.map
-//# sourceMappingURL=chunk-PRRVOVUC.js.map
+// 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
+          );
+        }) })
+      ]
+    }
+  );
+}
+var CarouselContext = createContext(null);
+function useCarouselContext() {
+  const ctx = useContext(CarouselContext);
+  if (!ctx) throw new Error("Carousel.* must be used inside <Carousel>");
+  return ctx;
+}
+var Carousel = forwardRef(function Carousel2({
+  index: indexProp,
+  defaultIndex = 0,
+  onIndexChange,
+  loop = false,
+  autoPlay,
+  slidesCount,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const [index, setIndexState] = useControlled({
+    controlled: indexProp,
+    default: defaultIndex,
+    onChange: onIndexChange
+  });
+  const [count, setCount] = useState(slidesCount ?? 0);
+  const [paused, setPaused] = useState(false);
+  useEffect(() => {
+    if (slidesCount != null) setCount(slidesCount);
+  }, [slidesCount]);
+  const setIndex = useCallback(
+    (i) => {
+      if (count === 0) {
+        setIndexState(0);
+        return;
+      }
+      let next2 = i;
+      if (loop) {
+        next2 = (i % count + count) % count;
+      } else {
+        next2 = Math.max(0, Math.min(count - 1, i));
+      }
+      setIndexState(next2);
+    },
+    [count, loop, setIndexState]
+  );
+  const prev = useCallback(() => setIndex(index - 1), [index, setIndex]);
+  const next = useCallback(() => setIndex(index + 1), [index, setIndex]);
+  useEffect(() => {
+    if (!autoPlay || paused || count === 0) return;
+    const handle = window.setInterval(() => {
+      setIndex(loop ? index + 1 : Math.min(count - 1, index + 1));
+    }, autoPlay);
+    return () => window.clearInterval(handle);
+  }, [autoPlay, paused, count, index, loop, setIndex]);
+  const ctx = useMemo(
+    () => ({ index, setIndex, count, setCount, loop, prev, next, paused, setPaused, autoPlay }),
+    [index, setIndex, count, loop, prev, next, paused, autoPlay]
+  );
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: () => setPaused(false),
+      className: cn("relative", className),
+      ...rest,
+      children
+    }
+  ) });
+});
+var CarouselViewport = forwardRef(
+  function CarouselViewport2({ "aria-label": ariaLabel = "Carousel", className, onKeyDown, children, ...rest }, forwardedRef) {
+    const ctx = useCarouselContext();
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        ctx.prev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        ctx.next();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: forwardedRef,
+        role: "group",
+        "aria-roledescription": "carousel",
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "relative overflow-hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var CarouselSlides = forwardRef(
+  function CarouselSlides2({ className, children, ...rest }, forwardedRef) {
+    const ctx = useCarouselContext();
+    const childArray = Children.toArray(children).filter(isValidElement);
+    useEffect(() => {
+      ctx.setCount(childArray.length);
+    }, [childArray.length, ctx]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: forwardedRef,
+        "aria-live": ctx.autoPlay ? "off" : "polite",
+        className: cn("flex transition-transform duration-300 ease-out", className),
+        style: { transform: `translateX(-${ctx.index * 100}%)` },
+        ...rest,
+        children: childArray.map((child, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "group",
+            "aria-roledescription": "slide",
+            "aria-label": `${idx + 1} of ${childArray.length}`,
+            "aria-hidden": idx !== ctx.index || void 0,
+            className: "w-full shrink-0",
+            children: child
+          },
+          idx
+        ))
+      }
+    );
+  }
+);
+var CarouselSlide = forwardRef(
+  function CarouselSlide2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("h-full w-full", className), ...rest });
+  }
+);
+var CarouselPrev = forwardRef(
+  function CarouselPrev2({ "aria-label": ariaLabel = "Previous slide", className, onClick, type = "button", children, ...rest }, forwardedRef) {
+    const ctx = useCarouselContext();
+    const disabled = !ctx.loop && ctx.index === 0;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: forwardedRef,
+        type,
+        "aria-label": ariaLabel,
+        disabled,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.prev();
+        },
+        className: cn(
+          "absolute left-2 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-background/80 text-foreground shadow ring-1 ring-border transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
+          className
+        ),
+        ...rest,
+        children: children ?? /* @__PURE__ */ jsx(Icon, { icon: ChevronLeft, size: 16 })
+      }
+    );
+  }
+);
+var CarouselNext = forwardRef(
+  function CarouselNext2({ "aria-label": ariaLabel = "Next slide", className, onClick, type = "button", children, ...rest }, forwardedRef) {
+    const ctx = useCarouselContext();
+    const disabled = !ctx.loop && ctx.index === ctx.count - 1;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: forwardedRef,
+        type,
+        "aria-label": ariaLabel,
+        disabled,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.next();
+        },
+        className: cn(
+          "absolute right-2 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-background/80 text-foreground shadow ring-1 ring-border transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
+          className
+        ),
+        ...rest,
+        children: children ?? /* @__PURE__ */ jsx(Icon, { icon: ChevronRight, size: 16 })
+      }
+    );
+  }
+);
+var CarouselDots = forwardRef(
+  function CarouselDots2({ className, ...rest }, forwardedRef) {
+    const ctx = useCarouselContext();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cn("mt-3 flex items-center justify-center gap-1.5", className),
+        ...rest,
+        children: Array.from({ length: ctx.count }, (_, i) => /* @__PURE__ */ jsx(CarouselDot, { slideIndex: i }, i))
+      }
+    );
+  }
+);
+var CarouselDot = forwardRef(
+  function CarouselDot2({ slideIndex, className, onClick, type = "button", ...rest }, forwardedRef) {
+    const ctx = useCarouselContext();
+    const isActive = ctx.index === slideIndex;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: forwardedRef,
+        type,
+        "aria-label": `Go to slide ${slideIndex + 1}`,
+        "aria-current": isActive || void 0,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.setIndex(slideIndex);
+        },
+        className: cn(
+          "h-1.5 rounded-full bg-border transition-all hover:bg-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isActive ? "w-6 bg-primary hover:bg-primary" : "w-1.5",
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+Carousel.Viewport = CarouselViewport;
+Carousel.Slides = CarouselSlides;
+Carousel.Slide = CarouselSlide;
+Carousel.Prev = CarouselPrev;
+Carousel.Next = CarouselNext;
+Carousel.Dots = CarouselDots;
+Carousel.Dot = CarouselDot;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarGroup, Badge, BadgeOverlay, Card, Carousel, CarouselDot, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, CarouselSlides, CarouselViewport, 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, Text, Timeline, TimelineDescription, TimelineItem, TimelineTitle, Tooltip, Tree, TreeGroup, TreeItem, avatarVariants, badgeVariants, codeVariants, headingVariants, textVariants };
+//# sourceMappingURL=chunk-W7LQZKTH.js.map
+//# sourceMappingURL=chunk-W7LQZKTH.js.map