@wow-two-beta/ui 0.0.13 → 0.0.14

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

@@ -6,7 +6,7 @@ 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 } from 'lucide-react';
+import { X, TrendingUp, TrendingDown, Check, Copy, ChevronDown, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
 
 // src/display/heading/Heading.variants.ts
 var headingVariants = tv({
@@ -1145,6 +1145,526 @@ 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
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+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