@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

package/dist/components/data-table/data-table-column-order.js

@@ -1,16 +1,17 @@
 import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import * as A from "react";
-import { useCallback as N } from "react";
-import { useSensors as M, useSensor as O, DndContext as E, closestCenter as L, KeyboardSensor as R, PointerSensor as k } from "../../vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js";
-import { arrayMove as B, SortableContext as _, verticalListSortingStrategy as G, sortableKeyboardCoordinates as z, useSortable as Z } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
-import { CSS as j } from "../../vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js";
-import { SLOT_ATTR as x, shorthands as d, mergeClasses as F } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as K } from "../../styles/make-styles.js";
-import { accentA8 as V, grayA12 as W, grayA8 as X, grayA3 as H, leadingSm as P, textSm as $, spacingElement2 as C, radiusSm as q } from "../../tokens/index.js";
-import { Button as J } from "../button/button.js";
-import { DropdownMenu as Q, DropdownMenuTrigger as U, DropdownMenuContent as Y, DropdownMenuLabel as ee, DropdownMenuSeparator as te } from "../dropdown-menu/dropdown-menu.js";
-import { useDataTable as re } from "./hooks/use-data-table.js";
-const ne = (t) => /* @__PURE__ */ e(
+import * as N from "react";
+import { useCallback as M } from "react";
+import { useSensors as E, useSensor as T, DndContext as L, closestCenter as R, KeyboardSensor as k, PointerSensor as B } from "../../vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js";
+import { arrayMove as _, SortableContext as G, verticalListSortingStrategy as z, sortableKeyboardCoordinates as Z, useSortable as j } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS as F } from "../../vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js";
+import { SLOT_ATTR as x, shorthands as d, mergeClasses as K } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as V } from "../../styles/make-styles.js";
+import { nativeControl as W, boxModel as C } from "../../styles/host-reset.js";
+import { accentA8 as X, grayA12 as H, grayA8 as P, grayA3 as $, leadingSm as q, textSm as J, spacingElement2 as w, radiusSm as Q } from "../../tokens/index.js";
+import { Button as U } from "../button/button.js";
+import { DropdownMenu as Y, DropdownMenuTrigger as ee, DropdownMenuContent as te, DropdownMenuLabel as re, DropdownMenuSeparator as oe } from "../dropdown-menu/dropdown-menu.js";
+import { useDataTable as ne } from "./hooks/use-data-table.js";
+const ae = (t) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -21,7 +22,7 @@ const ne = (t) => /* @__PURE__ */ e(
     ...t,
     children: /* @__PURE__ */ e("path", { d: "M320-440v-287l-76 76-44-44 150-150 150 150-44 44-76-76v287h-60ZM560-155 410-305l44-44 76 76v-287h60v287l76-76 44 44L560-155Z" })
   }
-), oe = (t) => /* @__PURE__ */ b(
+), ie = (t) => /* @__PURE__ */ b(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -39,16 +40,19 @@ const ne = (t) => /* @__PURE__ */ e(
       /* @__PURE__ */ e("circle", { cx: "15", cy: "19", r: "1.5" })
     ]
   }
-), T = K({
+), I = V({
   icon: {
+    ...C,
     width: "1rem",
     height: "1rem"
   },
   gripIcon: {
+    ...C,
     width: "14px",
     height: "14px"
   },
   srOnly: {
+    ...C,
     position: "absolute",
     width: "1px",
     height: "1px",
@@ -59,40 +63,42 @@ const ne = (t) => /* @__PURE__ */ e(
     whiteSpace: "nowrap"
   },
   item: {
+    ...C,
     display: "flex",
     alignItems: "center",
-    ...d.gap(C),
-    ...d.borderRadius(q),
-    paddingLeft: C,
-    paddingRight: C,
+    ...d.gap(w),
+    ...d.borderRadius(Q),
+    paddingLeft: w,
+    paddingRight: w,
     paddingTop: "6px",
     paddingBottom: "6px",
-    fontSize: $,
-    lineHeight: P
+    fontSize: J,
+    lineHeight: q
   },
   itemDragging: {
     zIndex: 50,
-    backgroundColor: H,
+    backgroundColor: $,
     opacity: 0.8
   },
   dragHandle: {
+    ...W,
     display: "inline-flex",
     flexShrink: 0,
     cursor: "grab",
     touchAction: "none",
     alignItems: "center",
-    color: X,
+    color: P,
     backgroundColor: "transparent",
     ...d.borderWidth(0),
     ...d.padding(0),
     "&:hover": {
-      color: W
+      color: H
     },
     "&:focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: V
+      outlineColor: X
     },
     "&:active": {
       cursor: "grabbing"
@@ -102,27 +108,27 @@ const ne = (t) => /* @__PURE__ */ e(
     userSelect: "none"
   }
 });
-function ae({
+function le({
   column: t,
   dragHandleLabel: r
 }) {
-  const n = T(), {
+  const o = I(), {
     attributes: c,
     listeners: u,
     setNodeRef: g,
     transform: p,
     transition: f,
-    isDragging: o
-  } = Z({ id: t.id }), i = t.columnDef.meta, a = (i == null ? void 0 : i.visibilityLabel) ?? (typeof t.columnDef.header == "string" ? t.columnDef.header : t.id), s = r ? typeof r == "function" ? r(a) : r : `Drag to reorder ${a}`;
+    isDragging: n
+  } = j({ id: t.id }), i = t.columnDef.meta, a = (i == null ? void 0 : i.visibilityLabel) ?? (typeof t.columnDef.header == "string" ? t.columnDef.header : t.id), s = r ? typeof r == "function" ? r(a) : r : `Drag to reorder ${a}`;
   return /* @__PURE__ */ b(
     "div",
     {
       ref: g,
       style: {
-        transform: j.Transform.toString(p),
+        transform: F.Transform.toString(p),
         transition: f
       },
-      className: F(n.item, o && n.itemDragging),
+      className: K(o.item, n && o.itemDragging),
       "data-slot": "data-table-column-order-item",
       [x]: "data-table-column-order-item",
       "data-fs-element": "DataTable-ColumnOrder-Item",
@@ -131,19 +137,19 @@ function ae({
           "button",
           {
             type: "button",
-            className: n.dragHandle,
+            className: o.dragHandle,
             "data-slot": "data-table-column-order-drag-handle",
             [x]: "data-table-column-order-drag-handle",
             "aria-label": s,
             ...c,
             ...u,
-            children: /* @__PURE__ */ e(oe, { className: n.gripIcon })
+            children: /* @__PURE__ */ e(ie, { className: o.gripIcon })
           }
         ),
         /* @__PURE__ */ e(
           "span",
           {
-            className: n.itemLabel,
+            className: o.itemLabel,
             "data-slot": "data-table-column-order-item-label",
             [x]: "data-table-column-order-item-label",
             children: a
@@ -153,85 +159,85 @@ function ae({
     }
   );
 }
-function ie({
+function se({
   columns: t,
   currentOrder: r,
-  table: n,
+  table: o,
   dragHandleLabel: c,
   announcements: u,
   screenReaderInstructions: g
 }) {
-  const p = M(
-    O(k, {
+  const p = E(
+    T(B, {
       activationConstraint: { distance: 3 }
     }),
-    O(R, {
-      coordinateGetter: z
+    T(k, {
+      coordinateGetter: Z
     })
-  ), f = N(
-    (o) => {
-      const { active: i, over: a } = o;
+  ), f = M(
+    (n) => {
+      const { active: i, over: a } = n;
       if (!a || i.id === a.id) return;
       const s = r.indexOf(i.id), l = r.indexOf(a.id);
       if (s === -1 || l === -1) return;
-      const y = B(r, s, l);
-      n.setColumnOrder(y);
+      const y = _(r, s, l);
+      o.setColumnOrder(y);
     },
-    [r, n]
+    [r, o]
   );
   return /* @__PURE__ */ e(
-    E,
+    L,
     {
       sensors: p,
-      collisionDetection: L,
+      collisionDetection: R,
       onDragEnd: f,
       accessibility: {
         announcements: u,
         screenReaderInstructions: g
       },
       children: /* @__PURE__ */ e(
-        _,
+        G,
         {
-          items: t.map((o) => o.id),
-          strategy: G,
-          children: t.map((o) => /* @__PURE__ */ e(
-            ae,
+          items: t.map((n) => n.id),
+          strategy: z,
+          children: t.map((n) => /* @__PURE__ */ e(
+            le,
             {
-              column: o,
+              column: n,
               dragHandleLabel: c
             },
-            o.id
+            n.id
           ))
         }
       )
     }
   );
 }
-const xe = A.forwardRef(function({
+const Se = N.forwardRef(function({
   icon: r,
-  trigger: n,
+  trigger: o,
   label: c,
   dragHandleLabel: u,
   announcements: g,
   screenReaderInstructions: p,
   contentClassName: f,
-  align: o = "end",
+  align: n = "end",
   ...i
 }, a) {
-  const s = T(), { table: l } = re(), y = l.getAllLeafColumns(), w = y.filter((m) => {
+  const s = I(), { table: l } = ne(), y = l.getAllLeafColumns(), D = y.filter((m) => {
     if (m.id === "select") return !1;
     const h = m.columnDef.meta;
     return (h == null ? void 0 : h.enableOrdering) !== !1;
   });
-  if (w.length === 0)
+  if (D.length === 0)
     return null;
-  const S = l.getState().columnOrder && l.getState().columnOrder.length > 0 ? l.getState().columnOrder : y.map((m) => m.id), I = [...w].sort((m, h) => {
-    const D = S.indexOf(m.id), v = S.indexOf(h.id);
-    return (D === -1 ? Number.MAX_SAFE_INTEGER : D) - (v === -1 ? Number.MAX_SAFE_INTEGER : v);
+  const S = l.getState().columnOrder && l.getState().columnOrder.length > 0 ? l.getState().columnOrder : y.map((m) => m.id), A = [...D].sort((m, h) => {
+    const v = S.indexOf(m.id), O = S.indexOf(h.id);
+    return (v === -1 ? Number.MAX_SAFE_INTEGER : v) - (O === -1 ? Number.MAX_SAFE_INTEGER : O);
   });
-  return /* @__PURE__ */ b(Q, { ref: a, ...i, children: [
-    /* @__PURE__ */ e(U, { asChild: !0, children: n ?? /* @__PURE__ */ b(
-      J,
+  return /* @__PURE__ */ b(Y, { ref: a, ...i, children: [
+    /* @__PURE__ */ e(ee, { asChild: !0, children: o ?? /* @__PURE__ */ b(
+      U,
       {
         variant: "tertiary",
         size: "sm",
@@ -239,26 +245,26 @@ const xe = A.forwardRef(function({
         [x]: "data-table-column-order-trigger",
         "data-fs-element": "DataTable-ColumnOrder-Trigger",
         children: [
-          r ?? /* @__PURE__ */ e(ne, { className: s.icon }),
+          r ?? /* @__PURE__ */ e(ae, { className: s.icon }),
           /* @__PURE__ */ e("span", { className: s.srOnly, children: c })
         ]
       }
     ) }),
     /* @__PURE__ */ b(
-      Y,
+      te,
       {
-        align: o,
+        align: n,
         className: f,
         "data-slot": "data-table-column-order-content",
         [x]: "data-table-column-order-content",
         "data-fs-element": "DataTable-ColumnOrder-Content",
         children: [
-          /* @__PURE__ */ e(ee, { children: c }),
-          /* @__PURE__ */ e(te, {}),
+          /* @__PURE__ */ e(re, { children: c }),
+          /* @__PURE__ */ e(oe, {}),
           /* @__PURE__ */ e(
-            ie,
+            se,
             {
-              columns: I,
+              columns: A,
               currentOrder: S,
               table: l,
               dragHandleLabel: u,
@@ -272,6 +278,6 @@ const xe = A.forwardRef(function({
   ] });
 });
 export {
-  xe as DataTableColumnOrder
+  Se as DataTableColumnOrder
 };
 //# sourceMappingURL=data-table-column-order.js.map

package/dist/components/data-table/data-table-column-order.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-column-order.js","sources":["../../../src/components/data-table/data-table-column-order.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback } from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { type Column } from \"@tanstack/react-table\"\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type Announcements,\n  type DragEndEvent,\n  type ScreenReaderInstructions,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n  arrayMove,\n  useSortable,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Button } from \"../button/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Swap vertical icon (default trigger icon)\nconst IconSwapVertical = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M320-440v-287l-76 76-44-44 150-150 150 150-44 44-76-76v287h-60ZM560-155 410-305l44-44 76 76v-287h60v287l76-76 44 44L560-155Z\" />\n  </svg>\n)\n\n// Grip vertical icon (drag handle)\nconst IconGripVertical = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  icon: {\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  gripIcon: {\n    width: \"14px\",\n    height: \"14px\",\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    ...shorthands.padding(0),\n    ...shorthands.margin(\"-1px\"),\n    ...shorthands.overflow(\"hidden\"),\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusSm),\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n    paddingTop: \"6px\",\n    paddingBottom: \"6px\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  itemDragging: {\n    zIndex: 50,\n    backgroundColor: tokens.grayA3,\n    opacity: 0.8,\n  },\n  dragHandle: {\n    display: \"inline-flex\",\n    flexShrink: 0,\n    cursor: \"grab\",\n    touchAction: \"none\",\n    alignItems: \"center\",\n    color: tokens.grayA8,\n    backgroundColor: \"transparent\",\n    ...shorthands.borderWidth(0),\n    ...shorthands.padding(0),\n    \"&:hover\": {\n      color: tokens.grayA12,\n    },\n    \"&:focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&:active\": {\n      cursor: \"grabbing\",\n    },\n  },\n  itemLabel: {\n    userSelect: \"none\",\n  },\n})\n\nexport type DataTableColumnOrderProps = {\n  /** Custom icon for the default trigger button. Falls back to swap-vertical icon. */\n  icon?: ReactNode\n  /** Custom trigger element. Defaults to an icon button. */\n  trigger?: ReactNode\n  /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n  label: string\n  /** Accessible label for the drag handle buttons. Recommended for i18n and accessibility. Receives column label as parameter. */\n  dragHandleLabel?: string | ((columnLabel: string) => string)\n  /** Custom screen reader announcements for drag-and-drop operations. */\n  announcements?: Announcements\n  /** Custom screen reader instructions for draggable items. */\n  screenReaderInstructions?: ScreenReaderInstructions\n  /** Additional class name for the dropdown content */\n  contentClassName?: string\n  /** Alignment of dropdown relative to trigger. Default: \"end\" */\n  align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/** Sortable item inside the column order dropdown */\nfunction DataTableColumnOrderItem({\n  column,\n  dragHandleLabel,\n}: {\n  column: Column<unknown, unknown>\n  dragHandleLabel?: string | ((columnLabel: string) => string)\n}) {\n  const styles = useStyles()\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: column.id })\n\n  const meta = column.columnDef.meta as { visibilityLabel?: string } | undefined\n  const label =\n    meta?.visibilityLabel ??\n    (typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : column.id)\n\n  const resolvedDragHandleLabel = dragHandleLabel\n    ? typeof dragHandleLabel === \"function\"\n      ? dragHandleLabel(label)\n      : dragHandleLabel\n    : `Drag to reorder ${label}`\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n      }}\n      className={mergeClasses(styles.item, isDragging && styles.itemDragging)}\n      data-slot=\"data-table-column-order-item\"\n      {...{ [SLOT_ATTR]: \"data-table-column-order-item\" }}\n      data-fs-element=\"DataTable-ColumnOrder-Item\"\n    >\n      <button\n        type=\"button\"\n        className={styles.dragHandle}\n        data-slot=\"data-table-column-order-drag-handle\"\n        {...{ [SLOT_ATTR]: \"data-table-column-order-drag-handle\" }}\n        aria-label={resolvedDragHandleLabel}\n        {...attributes}\n        {...listeners}\n      >\n        <IconGripVertical className={styles.gripIcon} />\n      </button>\n      <span\n        className={styles.itemLabel}\n        data-slot=\"data-table-column-order-item-label\"\n        {...{ [SLOT_ATTR]: \"data-table-column-order-item-label\" }}\n      >\n        {label}\n      </span>\n    </div>\n  )\n}\n\n/**\n * Inner list component that provides the DnD context.\n * Separated to avoid hook rules issues with early returns.\n */\nfunction DataTableColumnOrderList({\n  columns,\n  currentOrder,\n  table,\n  dragHandleLabel,\n  announcements,\n  screenReaderInstructions,\n}: {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columns: Column<any, unknown>[]\n  currentOrder: string[]\n  table: { setColumnOrder: (order: string[]) => void }\n  dragHandleLabel?: string | ((columnLabel: string) => string)\n  announcements?: Announcements\n  screenReaderInstructions?: ScreenReaderInstructions\n}) {\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { distance: 3 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n      if (!over || active.id === over.id) return\n\n      const oldIndex = currentOrder.indexOf(active.id as string)\n      const newIndex = currentOrder.indexOf(over.id as string)\n\n      if (oldIndex === -1 || newIndex === -1) return\n\n      const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n      table.setColumnOrder(newOrder)\n    },\n    [currentOrder, table]\n  )\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n      accessibility={{\n        announcements,\n        screenReaderInstructions,\n      }}\n    >\n      <SortableContext\n        items={columns.map((c) => c.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        {columns.map((col) => (\n          <DataTableColumnOrderItem\n            key={col.id}\n            column={col}\n            dragHandleLabel={dragHandleLabel}\n          />\n        ))}\n      </SortableContext>\n    </DndContext>\n  )\n}\n\n/**\n * A dropdown menu for reordering columns in DataTable via drag-and-drop.\n * Shows a draggable list of columns that can be rearranged.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnOrder = React.forwardRef<\n  HTMLElement,\n  DataTableColumnOrderProps\n>(function DataTableColumnOrder(\n  {\n    icon,\n    trigger,\n    label,\n    dragHandleLabel,\n    announcements,\n    screenReaderInstructions,\n    contentClassName,\n    align = \"end\",\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const { table } = useDataTable()\n\n  // Get reorderable columns (exclude selection column, respect meta.enableOrdering)\n  const allColumns = table.getAllLeafColumns()\n  const reorderableColumns = allColumns.filter((col) => {\n    if (col.id === \"select\") return false\n    const meta = col.columnDef.meta as { enableOrdering?: boolean } | undefined\n    return meta?.enableOrdering !== false\n  })\n\n  // If no reorderable columns, don't render\n  if (reorderableColumns.length === 0) {\n    return null\n  }\n\n  // Current order (derive from columns if columnOrder state is empty)\n  const currentOrder =\n    table.getState().columnOrder && table.getState().columnOrder.length > 0\n      ? table.getState().columnOrder\n      : allColumns.map((c) => c.id)\n\n  // Sort reorderable columns by their position in currentOrder\n  const orderedColumns = [...reorderableColumns].sort((a, b) => {\n    const indexA = currentOrder.indexOf(a.id)\n    const indexB = currentOrder.indexOf(b.id)\n    return (\n      (indexA === -1 ? Number.MAX_SAFE_INTEGER : indexA) -\n      (indexB === -1 ? Number.MAX_SAFE_INTEGER : indexB)\n    )\n  })\n\n  return (\n    <DropdownMenu ref={ref} {...props}>\n      <DropdownMenuTrigger asChild>\n        {trigger ?? (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            data-slot=\"data-table-column-order-trigger\"\n            {...{ [SLOT_ATTR]: \"data-table-column-order-trigger\" }}\n            data-fs-element=\"DataTable-ColumnOrder-Trigger\"\n          >\n            {icon ?? <IconSwapVertical className={styles.icon} />}\n            <span className={styles.srOnly}>{label}</span>\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align={align}\n        className={contentClassName}\n        data-slot=\"data-table-column-order-content\"\n        {...{ [SLOT_ATTR]: \"data-table-column-order-content\" }}\n        data-fs-element=\"DataTable-ColumnOrder-Content\"\n      >\n        <DropdownMenuLabel>{label}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DataTableColumnOrderList\n          columns={orderedColumns}\n          currentOrder={currentOrder}\n          table={table}\n          dragHandleLabel={dragHandleLabel}\n          announcements={announcements}\n          screenReaderInstructions={screenReaderInstructions}\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n})\n"],"names":["IconSwapVertical","props","jsx","IconGripVertical","jsxs","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","tokens.radiusSm","tokens.textSm","tokens.leadingSm","tokens.grayA3","tokens.grayA8","tokens.grayA12","tokens.accentA8","DataTableColumnOrderItem","column","dragHandleLabel","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","meta","label","resolvedDragHandleLabel","CSS","mergeClasses","SLOT_ATTR","DataTableColumnOrderList","columns","currentOrder","table","announcements","screenReaderInstructions","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","oldIndex","newIndex","newOrder","arrayMove","DndContext","closestCenter","SortableContext","c","verticalListSortingStrategy","col","DataTableColumnOrder","React","icon","trigger","contentClassName","align","ref","useDataTable","allColumns","reorderableColumns","orderedColumns","a","b","indexA","indexB","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator"],"mappings":"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"}
+{"version":3,"file":"data-table-column-order.js","sources":["../../../src/components/data-table/data-table-column-order.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback } from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { type Column } from \"@tanstack/react-table\"\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type Announcements,\n  type DragEndEvent,\n  type ScreenReaderInstructions,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n  arrayMove,\n  useSortable,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Button } from \"../button/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Swap vertical icon (default trigger icon)\nconst IconSwapVertical = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M320-440v-287l-76 76-44-44 150-150 150 150-44 44-76-76v287h-60ZM560-155 410-305l44-44 76 76v-287h60v287l76-76 44 44L560-155Z\" />\n  </svg>\n)\n\n// Grip vertical icon (drag handle)\nconst IconGripVertical = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  icon: {\n    ...boxModel,\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  gripIcon: {\n    ...boxModel,\n    width: \"14px\",\n    height: \"14px\",\n  },\n  srOnly: {\n    ...boxModel,\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    ...shorthands.padding(0),\n    ...shorthands.margin(\"-1px\"),\n    ...shorthands.overflow(\"hidden\"),\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {\n    ...boxModel,\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusSm),\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n    paddingTop: \"6px\",\n    paddingBottom: \"6px\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  itemDragging: {\n    zIndex: 50,\n    backgroundColor: tokens.grayA3,\n    opacity: 0.8,\n  },\n  dragHandle: {\n    ...nativeControl,\n    display: \"inline-flex\",\n    flexShrink: 0,\n    cursor: \"grab\",\n    touchAction: \"none\",\n    alignItems: \"center\",\n    color: tokens.grayA8,\n    backgroundColor: \"transparent\",\n    ...shorthands.borderWidth(0),\n    ...shorthands.padding(0),\n    \"&:hover\": {\n      color: tokens.grayA12,\n    },\n    \"&:focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&:active\": {\n      cursor: \"grabbing\",\n    },\n  },\n  itemLabel: {\n    userSelect: \"none\",\n  },\n})\n\nexport type DataTableColumnOrderProps = {\n  /** Custom icon for the default trigger button. Falls back to swap-vertical icon. */\n  icon?: ReactNode\n  /** Custom trigger element. Defaults to an icon button. */\n  trigger?: ReactNode\n  /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n  label: string\n  /** Accessible label for the drag handle buttons. Recommended for i18n and accessibility. Receives column label as parameter. */\n  dragHandleLabel?: string | ((columnLabel: string) => string)\n  /** Custom screen reader announcements for drag-and-drop operations. */\n  announcements?: Announcements\n  /** Custom screen reader instructions for draggable items. */\n  screenReaderInstructions?: ScreenReaderInstructions\n  /** Additional class name for the dropdown content */\n  contentClassName?: string\n  /** Alignment of dropdown relative to trigger. Default: \"end\" */\n  align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/** Sortable item inside the column order dropdown */\nfunction DataTableColumnOrderItem({\n  column,\n  dragHandleLabel,\n}: {\n  column: Column<unknown, unknown>\n  dragHandleLabel?: string | ((columnLabel: string) => string)\n}) {\n  const styles = useStyles()\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: column.id })\n\n  const meta = column.columnDef.meta as { visibilityLabel?: string } | undefined\n  const label =\n    meta?.visibilityLabel ??\n    (typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : column.id)\n\n  const resolvedDragHandleLabel = dragHandleLabel\n    ? typeof dragHandleLabel === \"function\"\n      ? dragHandleLabel(label)\n      : dragHandleLabel\n    : `Drag to reorder ${label}`\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n      }}\n      className={mergeClasses(styles.item, isDragging && styles.itemDragging)}\n      data-slot=\"data-table-column-order-item\"\n      {...{ [SLOT_ATTR]: \"data-table-column-order-item\" }}\n      data-fs-element=\"DataTable-ColumnOrder-Item\"\n    >\n      <button\n        type=\"button\"\n        className={styles.dragHandle}\n        data-slot=\"data-table-column-order-drag-handle\"\n        {...{ [SLOT_ATTR]: \"data-table-column-order-drag-handle\" }}\n        aria-label={resolvedDragHandleLabel}\n        {...attributes}\n        {...listeners}\n      >\n        <IconGripVertical className={styles.gripIcon} />\n      </button>\n      <span\n        className={styles.itemLabel}\n        data-slot=\"data-table-column-order-item-label\"\n        {...{ [SLOT_ATTR]: \"data-table-column-order-item-label\" }}\n      >\n        {label}\n      </span>\n    </div>\n  )\n}\n\n/**\n * Inner list component that provides the DnD context.\n * Separated to avoid hook rules issues with early returns.\n */\nfunction DataTableColumnOrderList({\n  columns,\n  currentOrder,\n  table,\n  dragHandleLabel,\n  announcements,\n  screenReaderInstructions,\n}: {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columns: Column<any, unknown>[]\n  currentOrder: string[]\n  table: { setColumnOrder: (order: string[]) => void }\n  dragHandleLabel?: string | ((columnLabel: string) => string)\n  announcements?: Announcements\n  screenReaderInstructions?: ScreenReaderInstructions\n}) {\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { distance: 3 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n      if (!over || active.id === over.id) return\n\n      const oldIndex = currentOrder.indexOf(active.id as string)\n      const newIndex = currentOrder.indexOf(over.id as string)\n\n      if (oldIndex === -1 || newIndex === -1) return\n\n      const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n      table.setColumnOrder(newOrder)\n    },\n    [currentOrder, table]\n  )\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n      accessibility={{\n        announcements,\n        screenReaderInstructions,\n      }}\n    >\n      <SortableContext\n        items={columns.map((c) => c.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        {columns.map((col) => (\n          <DataTableColumnOrderItem\n            key={col.id}\n            column={col}\n            dragHandleLabel={dragHandleLabel}\n          />\n        ))}\n      </SortableContext>\n    </DndContext>\n  )\n}\n\n/**\n * A dropdown menu for reordering columns in DataTable via drag-and-drop.\n * Shows a draggable list of columns that can be rearranged.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnOrder = React.forwardRef<\n  HTMLElement,\n  DataTableColumnOrderProps\n>(function DataTableColumnOrder(\n  {\n    icon,\n    trigger,\n    label,\n    dragHandleLabel,\n    announcements,\n    screenReaderInstructions,\n    contentClassName,\n    align = \"end\",\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const { table } = useDataTable()\n\n  // Get reorderable columns (exclude selection column, respect meta.enableOrdering)\n  const allColumns = table.getAllLeafColumns()\n  const reorderableColumns = allColumns.filter((col) => {\n    if (col.id === \"select\") return false\n    const meta = col.columnDef.meta as { enableOrdering?: boolean } | undefined\n    return meta?.enableOrdering !== false\n  })\n\n  // If no reorderable columns, don't render\n  if (reorderableColumns.length === 0) {\n    return null\n  }\n\n  // Current order (derive from columns if columnOrder state is empty)\n  const currentOrder =\n    table.getState().columnOrder && table.getState().columnOrder.length > 0\n      ? table.getState().columnOrder\n      : allColumns.map((c) => c.id)\n\n  // Sort reorderable columns by their position in currentOrder\n  const orderedColumns = [...reorderableColumns].sort((a, b) => {\n    const indexA = currentOrder.indexOf(a.id)\n    const indexB = currentOrder.indexOf(b.id)\n    return (\n      (indexA === -1 ? Number.MAX_SAFE_INTEGER : indexA) -\n      (indexB === -1 ? Number.MAX_SAFE_INTEGER : indexB)\n    )\n  })\n\n  return (\n    <DropdownMenu ref={ref} {...props}>\n      <DropdownMenuTrigger asChild>\n        {trigger ?? (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            data-slot=\"data-table-column-order-trigger\"\n            {...{ [SLOT_ATTR]: \"data-table-column-order-trigger\" }}\n            data-fs-element=\"DataTable-ColumnOrder-Trigger\"\n          >\n            {icon ?? <IconSwapVertical className={styles.icon} />}\n            <span className={styles.srOnly}>{label}</span>\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align={align}\n        className={contentClassName}\n        data-slot=\"data-table-column-order-content\"\n        {...{ [SLOT_ATTR]: \"data-table-column-order-content\" }}\n        data-fs-element=\"DataTable-ColumnOrder-Content\"\n      >\n        <DropdownMenuLabel>{label}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DataTableColumnOrderList\n          columns={orderedColumns}\n          currentOrder={currentOrder}\n          table={table}\n          dragHandleLabel={dragHandleLabel}\n          announcements={announcements}\n          screenReaderInstructions={screenReaderInstructions}\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n})\n"],"names":["IconSwapVertical","props","jsx","IconGripVertical","jsxs","useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingElement2","tokens.radiusSm","tokens.textSm","tokens.leadingSm","tokens.grayA3","nativeControl","tokens.grayA8","tokens.grayA12","tokens.accentA8","DataTableColumnOrderItem","column","dragHandleLabel","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","meta","label","resolvedDragHandleLabel","CSS","mergeClasses","SLOT_ATTR","DataTableColumnOrderList","columns","currentOrder","table","announcements","screenReaderInstructions","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","oldIndex","newIndex","newOrder","arrayMove","DndContext","closestCenter","SortableContext","c","verticalListSortingStrategy","col","DataTableColumnOrder","React","icon","trigger","contentClassName","align","ref","useDataTable","allColumns","reorderableColumns","orderedColumns","a","b","indexA","indexB","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator"],"mappings":"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"}

package/dist/components/data-table/data-table-column-visibility.js

@@ -1,11 +1,12 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as b from "react";
+import * as w from "react";
 import { shorthands as n } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as w } from "../../styles/make-styles.js";
-import { Button as D } from "../button/button.js";
-import { DropdownMenu as y, DropdownMenuTrigger as C, DropdownMenuContent as x, DropdownMenuLabel as T, DropdownMenuSeparator as M, DropdownMenuCheckboxItem as V } from "../dropdown-menu/dropdown-menu.js";
-import { useDataTable as v } from "./hooks/use-data-table.js";
-const S = (r) => /* @__PURE__ */ t(
+import { makeZenithStyles as D } from "../../styles/make-styles.js";
+import { boxModel as d } from "../../styles/host-reset.js";
+import { Button as y } from "../button/button.js";
+import { DropdownMenu as C, DropdownMenuTrigger as x, DropdownMenuContent as M, DropdownMenuLabel as T, DropdownMenuSeparator as V, DropdownMenuCheckboxItem as v } from "../dropdown-menu/dropdown-menu.js";
+import { useDataTable as S } from "./hooks/use-data-table.js";
+const Z = (r) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -16,12 +17,14 @@ const S = (r) => /* @__PURE__ */ t(
     ...r,
     children: /* @__PURE__ */ t("path", { d: "M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z" })
   }
-), Z = w({
+), k = D({
   icon: {
+    ...d,
     width: "1rem",
     height: "1rem"
   },
   srOnly: {
+    ...d,
     position: "absolute",
     width: "1px",
     height: "1px",
@@ -31,39 +34,39 @@ const S = (r) => /* @__PURE__ */ t(
     clip: "rect(0, 0, 0, 0)",
     whiteSpace: "nowrap"
   }
-}), H = b.forwardRef(function({ icon: d, trigger: h, label: o, contentClassName: m, align: c = "end", ...p }, q) {
-  const { table: f } = v(), a = Z(), s = f.getAllColumns().filter((e) => e.getCanHide());
-  return s.length === 0 ? null : /* @__PURE__ */ l(y, { ref: q, ...p, children: [
-    /* @__PURE__ */ t(C, { asChild: !0, children: h ?? /* @__PURE__ */ l(
-      D,
+}), Q = w.forwardRef(function({ icon: h, trigger: m, label: o, contentClassName: c, align: p = "end", ...q }, f) {
+  const { table: g } = S(), a = k(), s = g.getAllColumns().filter((e) => e.getCanHide());
+  return s.length === 0 ? null : /* @__PURE__ */ l(C, { ref: f, ...q, children: [
+    /* @__PURE__ */ t(x, { asChild: !0, children: m ?? /* @__PURE__ */ l(
+      y,
       {
         variant: "tertiary",
         size: "sm",
         "data-fs-element": "DataTable-ColumnVisibility-Trigger",
         children: [
-          d ?? /* @__PURE__ */ t(S, { className: a.icon }),
+          h ?? /* @__PURE__ */ t(Z, { className: a.icon }),
           /* @__PURE__ */ t("span", { className: a.srOnly, children: o })
         ]
       }
     ) }),
     /* @__PURE__ */ l(
-      x,
+      M,
       {
-        align: c,
-        className: m,
+        align: p,
+        className: c,
         "data-fs-element": "DataTable-ColumnVisibility-Content",
         children: [
           /* @__PURE__ */ t(T, { children: o }),
-          /* @__PURE__ */ t(M, {}),
+          /* @__PURE__ */ t(V, {}),
           s.map((e) => {
-            const i = e.columnDef.meta, g = (i == null ? void 0 : i.visibilityLabel) ?? (typeof e.columnDef.header == "string" ? e.columnDef.header : e.id);
+            const i = e.columnDef.meta, u = (i == null ? void 0 : i.visibilityLabel) ?? (typeof e.columnDef.header == "string" ? e.columnDef.header : e.id);
             return /* @__PURE__ */ t(
-              V,
+              v,
               {
                 checked: e.getIsVisible(),
-                onCheckedChange: (u) => e.toggleVisibility(!!u),
+                onCheckedChange: (b) => e.toggleVisibility(!!b),
                 "data-fs-element": "DataTable-ColumnVisibility-Item",
-                children: g
+                children: u
               },
               e.id
             );
@@ -74,6 +77,6 @@ const S = (r) => /* @__PURE__ */ t(
   ] });
 });
 export {
-  H as DataTableColumnVisibility
+  Q as DataTableColumnVisibility
 };
 //# sourceMappingURL=data-table-column-visibility.js.map

package/dist/components/data-table/data-table-column-visibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-column-visibility.js","sources":["../../../src/components/data-table/data-table-column-visibility.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { Button } from \"../button/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Settings/gear icon (default)\nconst IconSettings = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  icon: {\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    ...shorthands.padding(0),\n    ...shorthands.margin(\"-1px\"),\n    ...shorthands.overflow(\"hidden\"),\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nexport type DataTableColumnVisibilityProps = {\n  /** Custom icon for the default trigger button. Falls back to settings gear icon. */\n  icon?: ReactNode\n  /** Custom trigger element. Defaults to a settings icon button. */\n  trigger?: ReactNode\n  /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n  label: string\n  /** Additional class name for the dropdown content */\n  contentClassName?: string\n  /** Alignment of dropdown relative to trigger. Default: \"end\" */\n  align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/**\n * A dropdown menu for toggling column visibility in DataTable.\n * Shows checkboxes for each column that can be hidden.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnVisibility = React.forwardRef<\n  HTMLElement,\n  DataTableColumnVisibilityProps\n>(function DataTableColumnVisibility(\n  { icon, trigger, label, contentClassName, align = \"end\", ...props },\n  ref\n) {\n  const { table } = useDataTable()\n  const styles = useStyles()\n\n  // Get columns that can be hidden (excludes selection column, etc.)\n  const columns = table.getAllColumns().filter((column) => column.getCanHide())\n\n  // If no hideable columns, don't render anything\n  if (columns.length === 0) {\n    return null\n  }\n\n  return (\n    <DropdownMenu ref={ref} {...props}>\n      <DropdownMenuTrigger asChild>\n        {trigger ?? (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            data-fs-element=\"DataTable-ColumnVisibility-Trigger\"\n          >\n            {icon ?? <IconSettings className={styles.icon} />}\n            <span className={styles.srOnly}>{label}</span>\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align={align}\n        className={contentClassName}\n        data-fs-element=\"DataTable-ColumnVisibility-Content\"\n      >\n        <DropdownMenuLabel>{label}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {columns.map((column) => {\n          // Get column header text for display\n          // Priority: meta.visibilityLabel > string header > column.id\n          const columnMeta = column.columnDef.meta as\n            { visibilityLabel?: string } | undefined\n          const headerText =\n            columnMeta?.visibilityLabel ??\n            (typeof column.columnDef.header === \"string\"\n              ? column.columnDef.header\n              : column.id)\n\n          return (\n            <DropdownMenuCheckboxItem\n              key={column.id}\n              checked={column.getIsVisible()}\n              onCheckedChange={(value) => column.toggleVisibility(!!value)}\n              data-fs-element=\"DataTable-ColumnVisibility-Item\"\n            >\n              {headerText}\n            </DropdownMenuCheckboxItem>\n          )\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n})\n"],"names":["IconSettings","props","jsx","useStyles","makeZenithStyles","shorthands","DataTableColumnVisibility","React","icon","trigger","label","contentClassName","align","ref","table","useDataTable","styles","columns","column","jsxs","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","columnMeta","headerText","DropdownMenuCheckboxItem","value"],"mappings":";;;;;;;AAiBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,iqDAAA,CAAiqD;AAAA,EAAA;AAC3qD,GAGIC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAGC,EAAW,QAAQ,CAAC;AAAA,IACvB,GAAGA,EAAW,OAAO,MAAM;AAAA,IAC3B,GAAGA,EAAW,SAAS,QAAQ;AAAA,IAC/B,MAAM;AAAA,IACN,YAAY;AAAA,EAAA;AAEhB,CAAC,GAoBYC,IAA4BC,EAAM,WAG7C,SACA,EAAE,MAAAC,GAAM,SAAAC,GAAS,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,IAAQ,OAAO,GAAGX,EAAA,GAC5DY,GACA;AACA,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZC,IAASb,EAAA,GAGTc,IAAUH,EAAM,cAAA,EAAgB,OAAO,CAACI,MAAWA,EAAO,YAAY;AAG5E,SAAID,EAAQ,WAAW,IACd,OAIP,gBAAAE,EAACC,GAAA,EAAa,KAAAP,GAAW,GAAGZ,GAC1B,UAAA;AAAA,IAAA,gBAAAC,EAACmB,GAAA,EAAoB,SAAO,IACzB,UAAAZ,KACC,gBAAAU;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,mBAAgB;AAAA,QAEf,UAAA;AAAA,UAAAd,KAAQ,gBAAAN,EAACF,GAAA,EAAa,WAAWgB,EAAO,MAAM;AAAA,UAC/C,gBAAAd,EAAC,QAAA,EAAK,WAAWc,EAAO,QAAS,UAAAN,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAG7C;AAAA,IACA,gBAAAS;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,OAAAX;AAAA,QACA,WAAWD;AAAA,QACX,mBAAgB;AAAA,QAEhB,UAAA;AAAA,UAAA,gBAAAT,EAACsB,KAAmB,UAAAd,EAAA,CAAM;AAAA,4BACzBe,GAAA,EAAsB;AAAA,UACtBR,EAAQ,IAAI,CAACC,MAAW;AAGvB,kBAAMQ,IAAaR,EAAO,UAAU,MAE9BS,KACJD,KAAA,gBAAAA,EAAY,qBACX,OAAOR,EAAO,UAAU,UAAW,WAChCA,EAAO,UAAU,SACjBA,EAAO;AAEb,mBACE,gBAAAhB;AAAA,cAAC0B;AAAA,cAAA;AAAA,gBAEC,SAASV,EAAO,aAAA;AAAA,gBAChB,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,gBAC3D,mBAAgB;AAAA,gBAEf,UAAAF;AAAA,cAAA;AAAA,cALIT,EAAO;AAAA,YAAA;AAAA,UAQlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"data-table-column-visibility.js","sources":["../../../src/components/data-table/data-table-column-visibility.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { Button } from \"../button/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Settings/gear icon (default)\nconst IconSettings = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  icon: {\n    ...boxModel,\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  srOnly: {\n    ...boxModel,\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    ...shorthands.padding(0),\n    ...shorthands.margin(\"-1px\"),\n    ...shorthands.overflow(\"hidden\"),\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nexport type DataTableColumnVisibilityProps = {\n  /** Custom icon for the default trigger button. Falls back to settings gear icon. */\n  icon?: ReactNode\n  /** Custom trigger element. Defaults to a settings icon button. */\n  trigger?: ReactNode\n  /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n  label: string\n  /** Additional class name for the dropdown content */\n  contentClassName?: string\n  /** Alignment of dropdown relative to trigger. Default: \"end\" */\n  align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/**\n * A dropdown menu for toggling column visibility in DataTable.\n * Shows checkboxes for each column that can be hidden.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnVisibility = React.forwardRef<\n  HTMLElement,\n  DataTableColumnVisibilityProps\n>(function DataTableColumnVisibility(\n  { icon, trigger, label, contentClassName, align = \"end\", ...props },\n  ref\n) {\n  const { table } = useDataTable()\n  const styles = useStyles()\n\n  // Get columns that can be hidden (excludes selection column, etc.)\n  const columns = table.getAllColumns().filter((column) => column.getCanHide())\n\n  // If no hideable columns, don't render anything\n  if (columns.length === 0) {\n    return null\n  }\n\n  return (\n    <DropdownMenu ref={ref} {...props}>\n      <DropdownMenuTrigger asChild>\n        {trigger ?? (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            data-fs-element=\"DataTable-ColumnVisibility-Trigger\"\n          >\n            {icon ?? <IconSettings className={styles.icon} />}\n            <span className={styles.srOnly}>{label}</span>\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align={align}\n        className={contentClassName}\n        data-fs-element=\"DataTable-ColumnVisibility-Content\"\n      >\n        <DropdownMenuLabel>{label}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {columns.map((column) => {\n          // Get column header text for display\n          // Priority: meta.visibilityLabel > string header > column.id\n          const columnMeta = column.columnDef.meta as\n            { visibilityLabel?: string } | undefined\n          const headerText =\n            columnMeta?.visibilityLabel ??\n            (typeof column.columnDef.header === \"string\"\n              ? column.columnDef.header\n              : column.id)\n\n          return (\n            <DropdownMenuCheckboxItem\n              key={column.id}\n              checked={column.getIsVisible()}\n              onCheckedChange={(value) => column.toggleVisibility(!!value)}\n              data-fs-element=\"DataTable-ColumnVisibility-Item\"\n            >\n              {headerText}\n            </DropdownMenuCheckboxItem>\n          )\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n})\n"],"names":["IconSettings","props","jsx","useStyles","makeZenithStyles","boxModel","shorthands","DataTableColumnVisibility","React","icon","trigger","label","contentClassName","align","ref","table","useDataTable","styles","columns","column","jsxs","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","columnMeta","headerText","DropdownMenuCheckboxItem","value"],"mappings":";;;;;;;;AAkBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,iqDAAA,CAAiqD;AAAA,EAAA;AAC3qD,GAGIC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,GAAGA;AAAA,IACH,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAGC,EAAW,QAAQ,CAAC;AAAA,IACvB,GAAGA,EAAW,OAAO,MAAM;AAAA,IAC3B,GAAGA,EAAW,SAAS,QAAQ;AAAA,IAC/B,MAAM;AAAA,IACN,YAAY;AAAA,EAAA;AAEhB,CAAC,GAoBYC,IAA4BC,EAAM,WAG7C,SACA,EAAE,MAAAC,GAAM,SAAAC,GAAS,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,IAAQ,OAAO,GAAGZ,EAAA,GAC5Da,GACA;AACA,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZC,IAASd,EAAA,GAGTe,IAAUH,EAAM,cAAA,EAAgB,OAAO,CAACI,MAAWA,EAAO,YAAY;AAG5E,SAAID,EAAQ,WAAW,IACd,OAIP,gBAAAE,EAACC,GAAA,EAAa,KAAAP,GAAW,GAAGb,GAC1B,UAAA;AAAA,IAAA,gBAAAC,EAACoB,GAAA,EAAoB,SAAO,IACzB,UAAAZ,KACC,gBAAAU;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,mBAAgB;AAAA,QAEf,UAAA;AAAA,UAAAd,KAAQ,gBAAAP,EAACF,GAAA,EAAa,WAAWiB,EAAO,MAAM;AAAA,UAC/C,gBAAAf,EAAC,QAAA,EAAK,WAAWe,EAAO,QAAS,UAAAN,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAG7C;AAAA,IACA,gBAAAS;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,OAAAX;AAAA,QACA,WAAWD;AAAA,QACX,mBAAgB;AAAA,QAEhB,UAAA;AAAA,UAAA,gBAAAV,EAACuB,KAAmB,UAAAd,EAAA,CAAM;AAAA,4BACzBe,GAAA,EAAsB;AAAA,UACtBR,EAAQ,IAAI,CAACC,MAAW;AAGvB,kBAAMQ,IAAaR,EAAO,UAAU,MAE9BS,KACJD,KAAA,gBAAAA,EAAY,qBACX,OAAOR,EAAO,UAAU,UAAW,WAChCA,EAAO,UAAU,SACjBA,EAAO;AAEb,mBACE,gBAAAjB;AAAA,cAAC2B;AAAA,cAAA;AAAA,gBAEC,SAASV,EAAO,aAAA;AAAA,gBAChB,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,gBAC3D,mBAAgB;AAAA,gBAEf,UAAAF;AAAA,cAAA;AAAA,cALIT,EAAO;AAAA,YAAA;AAAA,UAQlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}