@craftzbay/ui 0.10.0 → 0.11.0

package/dist-lib/components/ui/Table.js

@@ -1,157 +1,179 @@
 "use client";
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { ArrowUp as g, ArrowDown as T, ArrowUpDown as N } from "../../icons/index.js";
+import { jsx as o, jsxs as T } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { ArrowUp as v, ArrowDown as x, ArrowUpDown as N } from "../../icons/index.js";
 import { cn as r } from "../../lib/utils.js";
-const x = s(
-  function({ className: a, ...e }, o) {
-    return /* @__PURE__ */ t("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ t(
-      "table",
+import { useStrings as h } from "../../hooks/use-strings.js";
+const y = l(function({ className: t, containerClassName: e, maxHeight: a, scrollLabel: s, ...n }, d) {
+  const u = h();
+  return (
+    // Whether the wrapper actually overflows is not knowable statically, so it
+    // is always a tab stop (WCAG 2.1.1 / axe scrollable-region-focusable).
+    /* @__PURE__ */ o(
+      "div",
       {
-        ref: o,
-        className: r("w-full caption-bottom text-sm border-collapse", a),
-        ...e
-      }
-    ) });
-  }
-);
-x.displayName = "Table";
-const h = s(
-  function({ className: a, ...e }, o) {
-    return /* @__PURE__ */ t(
-      "thead",
-      {
-        ref: o,
+        role: "group",
+        "aria-label": s ?? u.table.scrollRegion,
+        tabIndex: 0,
         className: r(
-          "sticky top-0 z-10 bg-background-subtle text-foreground-muted",
-          "[&_tr]:border-b [&_tr]:border-border",
-          a
+          "relative isolate w-full overflow-auto",
+          "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          e
         ),
-        ...e
-      }
-    );
-  }
-);
-h.displayName = "TableHeader";
-const v = s(
-  function({ className: a, ...e }, o) {
-    return /* @__PURE__ */ t(
-      "tbody",
-      {
-        ref: o,
-        className: r("[&_tr:last-child]:border-0", a),
-        ...e
-      }
-    );
-  }
-);
-v.displayName = "TableBody";
-const y = s(
-  function({ className: a, ...e }, o) {
-    return /* @__PURE__ */ t(
-      "tfoot",
-      {
-        ref: o,
-        className: r("border-t border-border bg-background-subtle font-medium", a),
-        ...e
+        style: a !== void 0 ? { maxHeight: a } : void 0,
+        children: /* @__PURE__ */ o(
+          "table",
+          {
+            ref: d,
+            className: r("w-full caption-bottom border-collapse text-sm", t),
+            ...n
+          }
+        )
       }
-    );
-  }
-);
-y.displayName = "TableFooter";
-const w = s(function({ className: a, selected: e, ...o }, n) {
-  return /* @__PURE__ */ t(
+    )
+  );
+});
+y.displayName = "Table";
+const w = l(function({ className: t, ...e }, a) {
+  return /* @__PURE__ */ o(
+    "thead",
+    {
+      ref: a,
+      className: r(
+        "bg-background-subtle text-foreground-muted sticky top-0 z-10",
+        "[&_tr]:border-border [&_tr]:border-b",
+        t
+      ),
+      ...e
+    }
+  );
+});
+w.displayName = "TableHeader";
+const k = l(function({ className: t, ...e }, a) {
+  return /* @__PURE__ */ o("tbody", { ref: a, className: r("[&_tr:last-child]:border-0", t), ...e });
+});
+k.displayName = "TableBody";
+const C = l(function({ className: t, ...e }, a) {
+  return /* @__PURE__ */ o(
+    "tfoot",
+    {
+      ref: a,
+      className: r("border-border bg-background-subtle border-t font-medium", t),
+      ...e
+    }
+  );
+});
+C.displayName = "TableFooter";
+const H = l(function({ className: t, selected: e, role: a, ...s }, n) {
+  return /* @__PURE__ */ o(
     "tr",
     {
       ref: n,
-      "data-selected": e || void 0,
-      "aria-selected": e || void 0,
+      role: a,
+      "data-state": e ? "selected" : void 0,
+      "aria-selected": e && a === "row" ? !0 : void 0,
       className: r(
-        "border-b border-border transition-colors duration-[var(--duration-fast)]",
+        "border-border border-b transition-colors duration-[var(--duration-fast)]",
         "hover:bg-background-subtle",
-        "data-[selected]:bg-accent-soft data-[selected]:hover:bg-accent-soft",
-        a
+        "data-[state=selected]:bg-accent-soft data-[state=selected]:hover:bg-accent-soft",
+        t
       ),
-      ...o
+      ...s
     }
   );
 });
-w.displayName = "TableRow";
-const c = s(function({ className: a, uppercase: e = !1, ...o }, n) {
-  return /* @__PURE__ */ t(
+H.displayName = "TableRow";
+const f = {
+  left: "text-left",
+  center: "text-center",
+  /* Numeric columns: right-aligned + tabular figures so digits line up. */
+  right: "text-right tabular"
+}, m = l(function({ className: t, uppercase: e = !1, align: a = "left", ...s }, n) {
+  return /* @__PURE__ */ o(
     "th",
     {
       ref: n,
       className: r(
-        "h-10 px-3 text-left align-middle text-xs font-medium text-foreground-subtle",
-        e && "uppercase tracking-wide",
+        "text-foreground-subtle h-10 px-3 align-middle text-xs font-medium",
+        f[a],
+        e && "tracking-wide uppercase",
         "[&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0",
-        a
+        t
       ),
-      ...o
+      ...s
     }
   );
 });
-c.displayName = "TableHead";
-const k = s(function({ className: a, ...e }, o) {
-  return /* @__PURE__ */ t(
+m.displayName = "TableHead";
+const R = l(function({ className: t, align: e = "left", ...a }, s) {
+  return /* @__PURE__ */ o(
     "td",
     {
-      ref: o,
-      className: r("px-3 py-3 align-middle text-foreground", a),
+      ref: s,
+      className: r("text-foreground px-3 py-3 align-middle", f[e], t),
+      ...a
+    }
+  );
+});
+R.displayName = "TableCell";
+const z = l(function({ className: t, ...e }, a) {
+  return /* @__PURE__ */ o(
+    "caption",
+    {
+      ref: a,
+      className: r("text-foreground-subtle mt-4 text-sm", t),
       ...e
     }
   );
 });
-k.displayName = "TableCell";
-const H = s(
-  function({ className: a, ...e }, o) {
-    return /* @__PURE__ */ t(
-      "caption",
-      {
-        ref: o,
-        className: r("mt-4 text-sm text-foreground-subtle", a),
-        ...e
-      }
-    );
-  }
-);
-H.displayName = "TableCaption";
-const C = s(
-  function({ sortKey: a, currentSort: e, onSortChange: o, children: n, className: b, ...u }, f) {
-    const i = (e == null ? void 0 : e.key) === a, d = i ? e == null ? void 0 : e.direction : void 0, m = () => {
-      o(a, i && d === "asc" ? "desc" : "asc");
+z.displayName = "TableCaption";
+const j = l(
+  function({ sortKey: t, currentSort: e, onSortChange: a, children: s, className: n, align: d = "left", ...u }, g) {
+    const c = (e == null ? void 0 : e.key) === t, b = c ? e == null ? void 0 : e.direction : void 0, p = () => {
+      a(t, c && b === "asc" ? "desc" : "asc");
     };
-    return /* @__PURE__ */ t(c, { ref: f, className: r("p-0", b), "aria-sort": i ? d === "asc" ? "ascending" : "descending" : "none", ...u, children: /* @__PURE__ */ p(
-      "button",
+    return /* @__PURE__ */ o(
+      m,
       {
-        type: "button",
-        onClick: m,
-        className: r(
-          "inline-flex h-10 w-full items-center gap-1.5 px-3 outline-none",
-          "transition-colors duration-[var(--duration-fast)]",
-          "hover:text-foreground focus-visible:text-foreground",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm",
-          i && "text-foreground"
-        ),
-        children: [
-          n,
-          d === "asc" ? /* @__PURE__ */ t(g, { className: "size-3.5", "aria-hidden": !0 }) : d === "desc" ? /* @__PURE__ */ t(T, { className: "size-3.5", "aria-hidden": !0 }) : /* @__PURE__ */ t(N, { className: "size-3.5 opacity-40", "aria-hidden": !0 })
-        ]
+        ref: g,
+        align: d,
+        className: r("p-0", n),
+        "aria-sort": c ? b === "asc" ? "ascending" : "descending" : void 0,
+        ...u,
+        children: /* @__PURE__ */ T(
+          "button",
+          {
+            type: "button",
+            onClick: p,
+            className: r(
+              "inline-flex h-10 w-full items-center gap-1.5 px-3 outline-none",
+              d === "right" && "flex-row-reverse",
+              d === "center" && "justify-center",
+              "transition-colors duration-[var(--duration-fast)]",
+              "hover:text-foreground focus-visible:text-foreground",
+              "focus-visible:ring-ring focus-visible:ring-offset-background rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2",
+              c && "text-foreground"
+            ),
+            children: [
+              s,
+              b === "asc" ? /* @__PURE__ */ o(v, { className: "size-3.5", "aria-hidden": !0 }) : b === "desc" ? /* @__PURE__ */ o(x, { className: "size-3.5", "aria-hidden": !0 }) : /* @__PURE__ */ o(N, { className: "size-3.5 opacity-40", "aria-hidden": !0 })
+            ]
+          }
+        )
       }
-    ) });
+    );
   }
 );
-C.displayName = "TableSortHeader";
+j.displayName = "TableSortHeader";
 export {
-  x as Table,
-  v as TableBody,
-  H as TableCaption,
-  k as TableCell,
-  y as TableFooter,
-  c as TableHead,
-  h as TableHeader,
-  w as TableRow,
-  C as TableSortHeader
+  y as Table,
+  k as TableBody,
+  z as TableCaption,
+  R as TableCell,
+  C as TableFooter,
+  m as TableHead,
+  w as TableHeader,
+  H as TableRow,
+  j as TableSortHeader
 };
 //# sourceMappingURL=Table.js.map

package/dist-lib/components/ui/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/ui/Table.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ThHTMLAttributes, type TdHTMLAttributes } from 'react';\nimport { ArrowDown, ArrowUp, ArrowUpDown } from '@/icons';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  Table primitives — minimal sugar over <table>. Pair with a sortable\n *  header helper (`TableSortHeader`) when you need built-in sort visuals.\n *  Empty + loading states are pure composition with the rest of the system.\n * --------------------------------------------------------------------------- */\n\nexport const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(\n  function Table({ className, ...props }, ref) {\n    return (\n      <div className=\"relative w-full overflow-auto\">\n        <table\n          ref={ref}\n          className={cn('w-full caption-bottom text-sm border-collapse', className)}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\nTable.displayName = 'Table';\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableHeader({ className, ...props }, ref) {\n    return (\n      <thead\n        ref={ref}\n        className={cn(\n          'sticky top-0 z-10 bg-background-subtle text-foreground-muted',\n          '[&_tr]:border-b [&_tr]:border-border',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableHeader.displayName = 'TableHeader';\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableBody({ className, ...props }, ref) {\n    return (\n      <tbody\n        ref={ref}\n        className={cn('[&_tr:last-child]:border-0', className)}\n        {...props}\n      />\n    );\n  },\n);\nTableBody.displayName = 'TableBody';\n\nexport const TableFooter = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  function TableFooter({ className, ...props }, ref) {\n    return (\n      <tfoot\n        ref={ref}\n        className={cn('border-t border-border bg-background-subtle font-medium', className)}\n        {...props}\n      />\n    );\n  },\n);\nTableFooter.displayName = 'TableFooter';\n\nexport const TableRow = forwardRef<\n  HTMLTableRowElement,\n  HTMLAttributes<HTMLTableRowElement> & { selected?: boolean }\n>(function TableRow({ className, selected, ...props }, ref) {\n  return (\n    <tr\n      ref={ref}\n      data-selected={selected || undefined}\n      aria-selected={selected || undefined}\n      className={cn(\n        'border-b border-border transition-colors duration-[var(--duration-fast)]',\n        'hover:bg-background-subtle',\n        'data-[selected]:bg-accent-soft data-[selected]:hover:bg-accent-soft',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableRow.displayName = 'TableRow';\n\nexport interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the header label in small caps (`uppercase tracking-wide`).\n   * Off by default — mixed case reads better for long / Cyrillic labels.\n   * @default false\n   */\n  uppercase?: boolean;\n}\n\nexport const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(function TableHead(\n  { className, uppercase = false, ...props },\n  ref,\n) {\n  return (\n    <th\n      ref={ref}\n      className={cn(\n        'h-10 px-3 text-left align-middle text-xs font-medium text-foreground-subtle',\n        uppercase && 'uppercase tracking-wide',\n        '[&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableHead.displayName = 'TableHead';\n\nexport const TableCell = forwardRef<\n  HTMLTableCellElement,\n  TdHTMLAttributes<HTMLTableCellElement>\n>(function TableCell({ className, ...props }, ref) {\n  return (\n    <td\n      ref={ref}\n      className={cn('px-3 py-3 align-middle text-foreground', className)}\n      {...props}\n    />\n  );\n});\nTableCell.displayName = 'TableCell';\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, HTMLAttributes<HTMLTableCaptionElement>>(\n  function TableCaption({ className, ...props }, ref) {\n    return (\n      <caption\n        ref={ref}\n        className={cn('mt-4 text-sm text-foreground-subtle', className)}\n        {...props}\n      />\n    );\n  },\n);\nTableCaption.displayName = 'TableCaption';\n\nexport interface TableSortHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  /** Stable column key used in `currentSort.key`. */\n  sortKey: string;\n  /** Currently sorted column + direction (or null). */\n  currentSort: { key: string; direction: 'asc' | 'desc' } | null;\n  /** Called when the user clicks the header. */\n  onSortChange: (key: string, direction: 'asc' | 'desc') => void;\n}\n\n/**\n * Sortable column header. Click toggles asc → desc → asc; the icon reflects\n * the current state.\n *\n * @example\n *   <TableSortHeader sortKey=\"name\" currentSort={sort} onSortChange={onSort}>\n *     Name\n *   </TableSortHeader>\n *\n * @do Sort by one column at a time. Multi-sort hides state from users.\n * @dont Sort silently — the icon must change so users see what changed.\n */\nexport const TableSortHeader = forwardRef<HTMLTableCellElement, TableSortHeaderProps>(\n  function TableSortHeader(\n    { sortKey, currentSort, onSortChange, children, className, ...props },\n    ref,\n  ) {\n    const active = currentSort?.key === sortKey;\n    const direction = active ? currentSort?.direction : undefined;\n    const handle = () => {\n      onSortChange(sortKey, active && direction === 'asc' ? 'desc' : 'asc');\n    };\n    return (\n      <TableHead ref={ref} className={cn('p-0', className)} aria-sort={active ? (direction === 'asc' ? 'ascending' : 'descending') : 'none'} {...props}>\n        <button\n          type=\"button\"\n          onClick={handle}\n          className={cn(\n            'inline-flex h-10 w-full items-center gap-1.5 px-3 outline-none',\n            'transition-colors duration-[var(--duration-fast)]',\n            'hover:text-foreground focus-visible:text-foreground',\n            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm',\n            active && 'text-foreground',\n          )}\n        >\n          {children}\n          {direction === 'asc' ? (\n            <ArrowUp className=\"size-3.5\" aria-hidden />\n          ) : direction === 'desc' ? (\n            <ArrowDown className=\"size-3.5\" aria-hidden />\n          ) : (\n            <ArrowUpDown className=\"size-3.5 opacity-40\" aria-hidden />\n          )}\n        </button>\n      </TableHead>\n    );\n  },\n);\nTableSortHeader.displayName = 'TableSortHeader';\n"],"names":["Table","forwardRef","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","TableHead","uppercase","TableCell","TableCaption","TableSortHeader","sortKey","currentSort","onSortChange","children","active","direction","handle","jsxs","ArrowUp","ArrowDown","ArrowUpDown"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/ui/Table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ThHTMLAttributes,\n  type TdHTMLAttributes,\n} from 'react';\nimport { ArrowDown, ArrowUp, ArrowUpDown } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/* -----------------------------------------------------------------------------\n *  Table primitives — minimal sugar over <table>. Pair with a sortable\n *  header helper (`TableSortHeader`) when you need built-in sort visuals.\n *  Empty + loading states are pure composition with the rest of the system.\n * --------------------------------------------------------------------------- */\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  /** Class for the scroll wrapper (border, radius, height). */\n  containerClassName?: string;\n  /**\n   * Max height of the scroll wrapper. Required for the sticky header to\n   * work — `<thead>` sticks to the nearest scroll container, so a wrapper\n   * with no height cap never scrolls. e.g. `maxHeight=\"24rem\"`.\n   */\n  maxHeight?: CSSProperties['maxHeight'];\n  /**\n   * Accessible name of the scroll wrapper (it is a focusable `group` so\n   * keyboard users can scroll wide / capped tables). Defaults to\n   * `strings.table.scrollRegion`; pass the table's own title when you have one.\n   */\n  scrollLabel?: string;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n  { className, containerClassName, maxHeight, scrollLabel, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  return (\n    // Whether the wrapper actually overflows is not knowable statically, so it\n    // is always a tab stop (WCAG 2.1.1 / axe scrollable-region-focusable).\n    <div\n      role=\"group\"\n      aria-label={scrollLabel ?? strings.table.scrollRegion}\n      tabIndex={0}\n      className={cn(\n        'relative isolate w-full overflow-auto',\n        'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n        containerClassName,\n      )}\n      style={maxHeight !== undefined ? { maxHeight } : undefined}\n    >\n      <table\n        ref={ref}\n        className={cn('w-full caption-bottom border-collapse text-sm', className)}\n        {...props}\n      />\n    </div>\n  );\n});\nTable.displayName = 'Table';\n\nexport const TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement>\n>(function TableHeader({ className, ...props }, ref) {\n  return (\n    <thead\n      ref={ref}\n      className={cn(\n        'bg-background-subtle text-foreground-muted sticky top-0 z-10',\n        '[&_tr]:border-border [&_tr]:border-b',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableHeader.displayName = 'TableHeader';\n\nexport const TableBody = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement>\n>(function TableBody({ className, ...props }, ref) {\n  return <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />;\n});\nTableBody.displayName = 'TableBody';\n\nexport const TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement>\n>(function TableFooter({ className, ...props }, ref) {\n  return (\n    <tfoot\n      ref={ref}\n      className={cn('border-border bg-background-subtle border-t font-medium', className)}\n      {...props}\n    />\n  );\n});\nTableFooter.displayName = 'TableFooter';\n\nexport const TableRow = forwardRef<\n  HTMLTableRowElement,\n  HTMLAttributes<HTMLTableRowElement> & {\n    /**\n     * Visual selected state (`data-state=\"selected\"`). `aria-selected` is only\n     * valid on rows of an ARIA grid, so it is emitted only when the row\n     * carries `role=\"row\"` (i.e. you opted into `role=\"grid\"` on the table).\n     */\n    selected?: boolean;\n  }\n>(function TableRow({ className, selected, role, ...props }, ref) {\n  return (\n    <tr\n      ref={ref}\n      role={role}\n      data-state={selected ? 'selected' : undefined}\n      aria-selected={selected && role === 'row' ? true : undefined}\n      className={cn(\n        'border-border border-b transition-colors duration-[var(--duration-fast)]',\n        'hover:bg-background-subtle',\n        'data-[state=selected]:bg-accent-soft data-[state=selected]:hover:bg-accent-soft',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableRow.displayName = 'TableRow';\n\nexport type TableCellAlign = 'left' | 'center' | 'right';\n\nconst alignClass: Record<TableCellAlign, string> = {\n  left: 'text-left',\n  center: 'text-center',\n  /* Numeric columns: right-aligned + tabular figures so digits line up. */\n  right: 'text-right tabular',\n};\n\nexport interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Horizontal alignment; `right` also applies tabular figures. */\n  align?: TableCellAlign;\n  /**\n   * Render the header label in small caps (`uppercase tracking-wide`).\n   * Off by default — mixed case reads better for long / Cyrillic labels.\n   * @default false\n   */\n  uppercase?: boolean;\n}\n\nexport const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(function TableHead(\n  { className, uppercase = false, align = 'left', ...props },\n  ref,\n) {\n  return (\n    <th\n      ref={ref}\n      className={cn(\n        'text-foreground-subtle h-10 px-3 align-middle text-xs font-medium',\n        alignClass[align],\n        uppercase && 'tracking-wide uppercase',\n        '[&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Horizontal alignment; `right` also applies tabular figures for numbers. */\n  align?: TableCellAlign;\n}\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(\n  { className, align = 'left', ...props },\n  ref,\n) {\n  return (\n    <td\n      ref={ref}\n      className={cn('text-foreground px-3 py-3 align-middle', alignClass[align], className)}\n      {...props}\n    />\n  );\n});\nTableCell.displayName = 'TableCell';\n\nexport const TableCaption = forwardRef<\n  HTMLTableCaptionElement,\n  HTMLAttributes<HTMLTableCaptionElement>\n>(function TableCaption({ className, ...props }, ref) {\n  return (\n    <caption\n      ref={ref}\n      className={cn('text-foreground-subtle mt-4 text-sm', className)}\n      {...props}\n    />\n  );\n});\nTableCaption.displayName = 'TableCaption';\n\nexport interface TableSortHeaderProps extends TableHeadProps {\n  /** Stable column key used in `currentSort.key`. */\n  sortKey: string;\n  /** Currently sorted column + direction (or null). */\n  currentSort: { key: string; direction: 'asc' | 'desc' } | null;\n  /** Called when the user clicks the header. */\n  onSortChange: (key: string, direction: 'asc' | 'desc') => void;\n}\n\n/**\n * Sortable column header. Click toggles asc → desc → asc; the icon reflects\n * the current state.\n *\n * @example\n *   <TableSortHeader sortKey=\"name\" currentSort={sort} onSortChange={onSort}>\n *     Name\n *   </TableSortHeader>\n *\n * @do Sort by one column at a time. Multi-sort hides state from users.\n * @dont Sort silently — the icon must change so users see what changed.\n */\nexport const TableSortHeader = forwardRef<HTMLTableCellElement, TableSortHeaderProps>(\n  function TableSortHeader(\n    { sortKey, currentSort, onSortChange, children, className, align = 'left', ...props },\n    ref,\n  ) {\n    const active = currentSort?.key === sortKey;\n    const direction = active ? currentSort?.direction : undefined;\n    const handle = () => {\n      onSortChange(sortKey, active && direction === 'asc' ? 'desc' : 'asc');\n    };\n    return (\n      <TableHead\n        ref={ref}\n        align={align}\n        className={cn('p-0', className)}\n        // aria-sort only on the sorted column — 'none' everywhere else is noise.\n        aria-sort={active ? (direction === 'asc' ? 'ascending' : 'descending') : undefined}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={handle}\n          className={cn(\n            'inline-flex h-10 w-full items-center gap-1.5 px-3 outline-none',\n            align === 'right' && 'flex-row-reverse',\n            align === 'center' && 'justify-center',\n            'transition-colors duration-[var(--duration-fast)]',\n            'hover:text-foreground focus-visible:text-foreground',\n            'focus-visible:ring-ring focus-visible:ring-offset-background rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2',\n            active && 'text-foreground',\n          )}\n        >\n          {children}\n          {direction === 'asc' ? (\n            <ArrowUp className=\"size-3.5\" aria-hidden />\n          ) : direction === 'desc' ? (\n            <ArrowDown className=\"size-3.5\" aria-hidden />\n          ) : (\n            <ArrowUpDown className=\"size-3.5 opacity-40\" aria-hidden />\n          )}\n        </button>\n      </TableHead>\n    );\n  },\n);\nTableSortHeader.displayName = 'TableSortHeader';\n"],"names":["Table","forwardRef","className","containerClassName","maxHeight","scrollLabel","props","ref","strings","useStrings","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","selected","role","alignClass","TableHead","uppercase","align","TableCell","TableCaption","TableSortHeader","sortKey","currentSort","onSortChange","children","active","direction","handle","jsxs","ArrowUp","ArrowDown","ArrowUpDown"],"mappings":"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"}

package/dist-lib/components/ui/Tabs.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
-import * as i from "@radix-ui/react-tabs";
-import { cn as s } from "../../lib/utils.js";
-import { cva as u } from "class-variance-authority";
-const _ = i.Root, v = u("inline-flex items-center", {
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as s, useContext as v, createContext as c } from "react";
+import * as n from "@radix-ui/react-tabs";
+import { cn as o } from "../../lib/utils.js";
+import { cva as f } from "class-variance-authority";
+const N = n.Root, l = c("underline"), g = f("inline-flex items-center", {
   variants: {
     variant: {
       underline: "gap-4 border-b border-border w-full",
@@ -17,73 +17,75 @@ const _ = i.Root, v = u("inline-flex items-center", {
     }
   },
   defaultVariants: { variant: "underline", size: "md" }
-}), f = r(
-  function({ className: t, variant: a = "underline", size: e, ...o }, l) {
-    return /* @__PURE__ */ n(
-      i.List,
+}), b = s(
+  function({ className: t, variant: a = "underline", size: e, ...r }, u) {
+    return /* @__PURE__ */ i(l.Provider, { value: a ?? "underline", children: /* @__PURE__ */ i(
+      n.List,
       {
-        ref: l,
+        ref: u,
         "data-variant": a,
-        className: s(v({ variant: a, size: e }), t),
-        ...o
+        className: o(g({ variant: a, size: e }), t),
+        ...r
       }
-    );
+    ) });
   }
 );
-f.displayName = "TabsList";
-const c = r(function({ className: t, ...a }, e) {
-  return /* @__PURE__ */ n(
-    i.Trigger,
+b.displayName = "TabsList";
+const m = s(function({ className: t, ...a }, e) {
+  const r = v(l);
+  return /* @__PURE__ */ i(
+    n.Trigger,
     {
       ref: e,
-      className: s(
-        "inline-flex items-center gap-2 whitespace-nowrap font-medium",
-        "outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      "data-variant": r,
+      className: o(
+        "inline-flex items-center gap-2 font-medium whitespace-nowrap",
+        "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)] outline-none",
+        "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2",
         "disabled:pointer-events-none disabled:opacity-50",
         // Underline variant
-        "[[data-variant=underline]_&]:relative [[data-variant=underline]_&]:h-full",
-        "[[data-variant=underline]_&]:px-1 [[data-variant=underline]_&]:text-foreground-muted",
-        "[[data-variant=underline]_&]:hover:text-foreground",
-        "[[data-variant=underline]_&]:data-[state=active]:text-foreground",
-        "[[data-variant=underline]_&]:data-[state=active]:after:absolute",
-        "[[data-variant=underline]_&]:data-[state=active]:after:inset-x-0",
-        "[[data-variant=underline]_&]:data-[state=active]:after:-bottom-px",
-        "[[data-variant=underline]_&]:data-[state=active]:after:h-0.5",
-        "[[data-variant=underline]_&]:data-[state=active]:after:bg-accent",
+        "data-[variant=underline]:relative data-[variant=underline]:h-full",
+        "data-[variant=underline]:text-foreground-muted data-[variant=underline]:px-1",
+        "data-[variant=underline]:hover:text-foreground",
+        "data-[variant=underline]:data-[state=active]:text-foreground",
+        "data-[variant=underline]:data-[state=active]:after:absolute",
+        "data-[variant=underline]:data-[state=active]:after:inset-x-0",
+        "data-[variant=underline]:data-[state=active]:after:-bottom-px",
+        "data-[variant=underline]:data-[state=active]:after:h-0.5",
+        "data-[variant=underline]:data-[state=active]:after:bg-accent",
         // Pills variant
-        "[[data-variant=pills]_&]:h-full [[data-variant=pills]_&]:rounded-md [[data-variant=pills]_&]:px-3",
-        "[[data-variant=pills]_&]:text-foreground-muted",
-        "[[data-variant=pills]_&]:hover:text-foreground",
-        "[[data-variant=pills]_&]:data-[state=active]:bg-card",
-        "[[data-variant=pills]_&]:data-[state=active]:text-foreground",
-        "[[data-variant=pills]_&]:data-[state=active]:shadow-xs",
+        "data-[variant=pills]:h-full data-[variant=pills]:rounded-md data-[variant=pills]:px-3",
+        "data-[variant=pills]:text-foreground-muted",
+        "data-[variant=pills]:hover:text-foreground",
+        "data-[variant=pills]:data-[state=active]:bg-card",
+        "data-[variant=pills]:data-[state=active]:text-foreground",
+        "data-[variant=pills]:data-[state=active]:shadow-xs",
         t
       ),
       ...a
     }
   );
 });
-c.displayName = "TabsTrigger";
-const g = r(function({ className: t, ...a }, e) {
-  return /* @__PURE__ */ n(
-    i.Content,
+m.displayName = "TabsTrigger";
+const p = s(function({ className: t, ...a }, e) {
+  return /* @__PURE__ */ i(
+    n.Content,
     {
       ref: e,
-      className: s(
+      className: o(
         "mt-4 outline-none",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2",
         t
       ),
       ...a
     }
   );
 });
-g.displayName = "TabsContent";
+p.displayName = "TabsContent";
 export {
-  _ as Tabs,
-  g as TabsContent,
-  f as TabsList,
-  c as TabsTrigger
+  N as Tabs,
+  p as TabsContent,
+  b as TabsList,
+  m as TabsTrigger
 };
 //# sourceMappingURL=Tabs.js.map

package/dist-lib/components/ui/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/ui/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n} from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\n/* -----------------------------------------------------------------------------\n *  Two visual variants — `underline` (refined-minimal default) and `pills`.\n *  Variant is set on `TabsList`; trigger styles auto-derive via data-attr.\n * --------------------------------------------------------------------------- */\n\nexport const Tabs = TabsPrimitive.Root;\n\nconst list = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      underline: 'gap-4 border-b border-border w-full',\n      pills: 'gap-1 rounded-lg bg-background-muted p-1',\n    },\n    size: {\n      sm: 'h-9 text-xs',\n      md: 'h-10 text-sm',\n      lg: 'h-11 text-sm',\n    },\n  },\n  defaultVariants: { variant: 'underline', size: 'md' },\n});\n\nexport interface TabsListProps\n  extends ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof list> {}\n\nexport const TabsList = forwardRef<ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  function TabsList({ className, variant = 'underline', size, ...props }, ref) {\n    return (\n      <TabsPrimitive.List\n        ref={ref}\n        data-variant={variant}\n        className={cn(list({ variant, size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nTabsList.displayName = 'TabsList';\n\nexport const TabsTrigger = forwardRef<\n  ElementRef<typeof TabsPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(function TabsTrigger({ className, ...props }, ref) {\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'inline-flex items-center gap-2 whitespace-nowrap font-medium',\n        'outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        'disabled:pointer-events-none disabled:opacity-50',\n        // Underline variant\n        '[[data-variant=underline]_&]:relative [[data-variant=underline]_&]:h-full',\n        '[[data-variant=underline]_&]:px-1 [[data-variant=underline]_&]:text-foreground-muted',\n        '[[data-variant=underline]_&]:hover:text-foreground',\n        '[[data-variant=underline]_&]:data-[state=active]:text-foreground',\n        '[[data-variant=underline]_&]:data-[state=active]:after:absolute',\n        '[[data-variant=underline]_&]:data-[state=active]:after:inset-x-0',\n        '[[data-variant=underline]_&]:data-[state=active]:after:-bottom-px',\n        '[[data-variant=underline]_&]:data-[state=active]:after:h-0.5',\n        '[[data-variant=underline]_&]:data-[state=active]:after:bg-accent',\n        // Pills variant\n        '[[data-variant=pills]_&]:h-full [[data-variant=pills]_&]:rounded-md [[data-variant=pills]_&]:px-3',\n        '[[data-variant=pills]_&]:text-foreground-muted',\n        '[[data-variant=pills]_&]:hover:text-foreground',\n        '[[data-variant=pills]_&]:data-[state=active]:bg-card',\n        '[[data-variant=pills]_&]:data-[state=active]:text-foreground',\n        '[[data-variant=pills]_&]:data-[state=active]:shadow-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTabsTrigger.displayName = 'TabsTrigger';\n\nexport const TabsContent = forwardRef<\n  ElementRef<typeof TabsPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(function TabsContent({ className, ...props }, ref) {\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'mt-4 outline-none',\n        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTabsContent.displayName = 'TabsContent';\n\n/**\n * @example Underline (default)\n *   <Tabs defaultValue=\"overview\">\n *     <TabsList>\n *       <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *       <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *     </TabsList>\n *     <TabsContent value=\"overview\">…</TabsContent>\n *     <TabsContent value=\"activity\">…</TabsContent>\n *   </Tabs>\n *\n * @example Pills\n *   <TabsList variant=\"pills\"><TabsTrigger value=\"all\">All</TabsTrigger>…</TabsList>\n *\n * @do Use `underline` at the top of a page or panel. Use `pills` inside a\n *      card or for filter-style switches.\n * @dont Mix variants on the same screen — pick one and commit.\n */\n"],"names":["Tabs","TabsPrimitive","list","cva","TabsList","forwardRef","className","variant","size","props","ref","jsx","cn","TabsTrigger","TabsContent"],"mappings":";;;;;;AAgBO,MAAMA,IAAOC,EAAc,MAE5BC,IAAOC,EAAI,4BAA4B;AAAA,EAC3C,UAAU;AAAA,IACR,SAAS;AAAA,MACP,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,IAET,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,SAAS,aAAa,MAAM,KAAA;AACjD,CAAC,GAMYC,IAAWC;AAAA,EACtB,SAAkB,EAAE,WAAAC,GAAW,SAAAC,IAAU,aAAa,MAAAC,GAAM,GAAGC,EAAA,GAASC,GAAK;AAC3E,WACE,gBAAAC;AAAA,MAACV,EAAc;AAAA,MAAd;AAAA,QACC,KAAAS;AAAA,QACA,gBAAcH;AAAA,QACd,WAAWK,EAAGV,EAAK,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAAA,QAC/C,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAL,EAAS,cAAc;AAEhB,MAAMS,IAAcR,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,SACE,gBAAAC;AAAA,IAACV,EAAc;AAAA,IAAd;AAAA,MACC,KAAAS;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDI,EAAY,cAAc;AAEnB,MAAMC,IAAcT,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,SACE,gBAAAC;AAAA,IAACV,EAAc;AAAA,IAAd;AAAA,MACC,KAAAS;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDK,EAAY,cAAc;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/ui/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n} from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\n/* -----------------------------------------------------------------------------\n *  Two visual variants — `underline` (refined-minimal default) and `pills`.\n *  Variant is set on `TabsList`; trigger styles auto-derive via data-attr.\n * --------------------------------------------------------------------------- */\n\nexport const Tabs = TabsPrimitive.Root;\n\ntype TabsVariant = 'underline' | 'pills';\n/* Triggers read the list variant from context and stamp their own\n   `data-variant`, so no ancestor selector can leak into nested Tabs. */\nconst TabsVariantContext = createContext<TabsVariant>('underline');\n\nconst list = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      underline: 'gap-4 border-b border-border w-full',\n      pills: 'gap-1 rounded-lg bg-background-muted p-1',\n    },\n    size: {\n      sm: 'h-9 text-xs',\n      md: 'h-10 text-sm',\n      lg: 'h-11 text-sm',\n    },\n  },\n  defaultVariants: { variant: 'underline', size: 'md' },\n});\n\nexport interface TabsListProps\n  extends ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof list> {}\n\nexport const TabsList = forwardRef<ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  function TabsList({ className, variant = 'underline', size, ...props }, ref) {\n    return (\n      <TabsVariantContext.Provider value={variant ?? 'underline'}>\n        <TabsPrimitive.List\n          ref={ref}\n          data-variant={variant}\n          className={cn(list({ variant, size }), className)}\n          {...props}\n        />\n      </TabsVariantContext.Provider>\n    );\n  },\n);\nTabsList.displayName = 'TabsList';\n\nexport const TabsTrigger = forwardRef<\n  ElementRef<typeof TabsPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(function TabsTrigger({ className, ...props }, ref) {\n  const variant = useContext(TabsVariantContext);\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-variant={variant}\n      className={cn(\n        'inline-flex items-center gap-2 font-medium whitespace-nowrap',\n        'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)] outline-none',\n        'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n        'disabled:pointer-events-none disabled:opacity-50',\n        // Underline variant\n        'data-[variant=underline]:relative data-[variant=underline]:h-full',\n        'data-[variant=underline]:text-foreground-muted data-[variant=underline]:px-1',\n        'data-[variant=underline]:hover:text-foreground',\n        'data-[variant=underline]:data-[state=active]:text-foreground',\n        'data-[variant=underline]:data-[state=active]:after:absolute',\n        'data-[variant=underline]:data-[state=active]:after:inset-x-0',\n        'data-[variant=underline]:data-[state=active]:after:-bottom-px',\n        'data-[variant=underline]:data-[state=active]:after:h-0.5',\n        'data-[variant=underline]:data-[state=active]:after:bg-accent',\n        // Pills variant\n        'data-[variant=pills]:h-full data-[variant=pills]:rounded-md data-[variant=pills]:px-3',\n        'data-[variant=pills]:text-foreground-muted',\n        'data-[variant=pills]:hover:text-foreground',\n        'data-[variant=pills]:data-[state=active]:bg-card',\n        'data-[variant=pills]:data-[state=active]:text-foreground',\n        'data-[variant=pills]:data-[state=active]:shadow-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTabsTrigger.displayName = 'TabsTrigger';\n\nexport const TabsContent = forwardRef<\n  ElementRef<typeof TabsPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(function TabsContent({ className, ...props }, ref) {\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'mt-4 outline-none',\n        'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nTabsContent.displayName = 'TabsContent';\n\n/**\n * @example Underline (default)\n *   <Tabs defaultValue=\"overview\">\n *     <TabsList>\n *       <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *       <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *     </TabsList>\n *     <TabsContent value=\"overview\">…</TabsContent>\n *     <TabsContent value=\"activity\">…</TabsContent>\n *   </Tabs>\n *\n * @example Pills\n *   <TabsList variant=\"pills\"><TabsTrigger value=\"all\">All</TabsTrigger>…</TabsList>\n *\n * @do Use `underline` at the top of a page or panel. Use `pills` inside a\n *      card or for filter-style switches.\n * @dont Mix variants on the same screen — pick one and commit.\n */\n"],"names":["Tabs","TabsPrimitive","TabsVariantContext","createContext","list","cva","TabsList","forwardRef","className","variant","size","props","ref","jsx","cn","TabsTrigger","useContext","TabsContent"],"mappings":";;;;;;AAkBO,MAAMA,IAAOC,EAAc,MAK5BC,IAAqBC,EAA2B,WAAW,GAE3DC,IAAOC,EAAI,4BAA4B;AAAA,EAC3C,UAAU;AAAA,IACR,SAAS;AAAA,MACP,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,IAET,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,SAAS,aAAa,MAAM,KAAA;AACjD,CAAC,GAKYC,IAAWC;AAAA,EACtB,SAAkB,EAAE,WAAAC,GAAW,SAAAC,IAAU,aAAa,MAAAC,GAAM,GAAGC,EAAA,GAASC,GAAK;AAC3E,6BACGV,EAAmB,UAAnB,EAA4B,OAAOO,KAAW,aAC7C,UAAA,gBAAAI;AAAA,MAACZ,EAAc;AAAA,MAAd;AAAA,QACC,KAAAW;AAAA,QACA,gBAAcH;AAAA,QACd,WAAWK,EAAGV,EAAK,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAAA,QAC/C,GAAGG;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAEJ;AACF;AACAL,EAAS,cAAc;AAEhB,MAAMS,IAAcR,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,QAAMH,IAAUO,EAAWd,CAAkB;AAC7C,SACE,gBAAAW;AAAA,IAACZ,EAAc;AAAA,IAAd;AAAA,MACC,KAAAW;AAAA,MACA,gBAAcH;AAAA,MACd,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDI,EAAY,cAAc;AAEnB,MAAME,IAAcV,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,SACE,gBAAAC;AAAA,IAACZ,EAAc;AAAA,IAAd;AAAA,MACC,KAAAW;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDM,EAAY,cAAc;"}