impact-nova 0.1.13 → 1.0.0

package/dist/components/ui/card.js

@@ -5,6 +5,7 @@ const s = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
+    "data-component": "card",
     className: t(
       "rounded-xl border bg-card text-card-foreground shadow",
       a
@@ -31,7 +32,7 @@ const c = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   }
 ));
 c.displayName = "CardTitle";
-const m = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+const n = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
@@ -39,9 +40,9 @@ const m = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
     ...e
   }
 ));
-m.displayName = "CardDescription";
-const n = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d("div", { ref: r, className: t("p-6 pt-0", a), ...e }));
-n.displayName = "CardContent";
+n.displayName = "CardDescription";
+const m = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d("div", { ref: r, className: t("p-6 pt-0", a), ...e }));
+m.displayName = "CardContent";
 const f = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
@@ -53,8 +54,8 @@ const f = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
 f.displayName = "CardFooter";
 export {
   s as Card,
-  n as CardContent,
-  m as CardDescription,
+  m as CardContent,
+  n as CardDescription,
   f as CardFooter,
   i as CardHeader,
   c as CardTitle

package/dist/components/ui/checkbox.js

@@ -1,54 +1,70 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import * as l from "react";
-import * as o from "@radix-ui/react-checkbox";
-import { Check as b, Minus as u } from "lucide-react";
-import { cn as a } from "../../lib/utils.js";
-const h = l.forwardRef(({ className: n, label: r, helperText: d, isError: i, disabled: s, ...c }, m) => /* @__PURE__ */ t("div", { className: "flex items-center", children: [
-  /* @__PURE__ */ e(
-    o.Root,
-    {
-      ref: m,
-      className: a(
-        "peer h-4 w-4 shrink-0 rounded-[4px] border border-tertiary-border bg-white ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-accent data-[state=checked]:text-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-primary mr-[7px]",
-        i && "border-destructive focus-visible:ring-destructive",
-        s && "border-border text-disabled-text data-[state=checked]:bg-disabled-secondary-bg data-[state=checked]:text-disabled-text",
-        n
-      ),
-      disabled: s,
-      ...c,
-      children: /* @__PURE__ */ t(
-        o.Indicator,
-        {
-          className: a("flex items-center justify-center text-current group"),
-          children: [
-            /* @__PURE__ */ e(b, { className: "h-3 w-3 hidden group-data-[state=checked]:block", strokeWidth: 3 }),
-            /* @__PURE__ */ e(u, { className: "h-3 w-3 hidden group-data-[state=indeterminate]:block", strokeWidth: 3 })
-          ]
-        }
-      )
-    }
-  ),
-  (r || d) && /* @__PURE__ */ t("div", { className: "grid gap-1.5 leading-none", children: [
-    r && /* @__PURE__ */ t(
-      "label",
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import * as m from "@radix-ui/react-checkbox";
+import { Check as y, Minus as N } from "lucide-react";
+import { cn as r } from "../../lib/utils.js";
+const w = i.forwardRef(({ className: f, label: s, helperText: c, isError: n, disabled: a, checked: e, defaultChecked: u, onCheckedChange: g, ...o }, p) => {
+  const k = i.useId(), h = o.id || k, [b, l] = i.useState(
+    e !== void 0 ? e : u || !1
+  );
+  i.useEffect(() => {
+    e !== void 0 && l(e);
+  }, [e]);
+  const v = (x) => {
+    e === void 0 && l(x), g?.(x);
+  };
+  return /* @__PURE__ */ d("div", { className: "flex items-center", "data-component": "checkbox", "data-state": b === "indeterminate" ? "indeterminate" : b ? "checked" : "unchecked", "data-disabled": a || void 0, children: [
+    /* @__PURE__ */ t(
+      m.Root,
       {
-        htmlFor: c.id,
-        className: a(
-          "text-sm font-medium leading-[20px] text-secondary-foreground peer-data-[state=checked]:text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-          i && "text-destructive",
-          s && "text-disabled-text"
+        ref: p,
+        id: h,
+        className: r(
+          "peer h-4 w-4 shrink-0 rounded-[4px] border border-tertiary-border bg-white ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-accent data-[state=checked]:text-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-primary mr-[7px]",
+          n && "border-destructive focus-visible:ring-destructive",
+          a && "border-border text-disabled-text data-[state=checked]:bg-disabled-secondary-bg data-[state=checked]:text-disabled-text",
+          f
         ),
-        children: [
-          r,
-          " ",
-          c.required && /* @__PURE__ */ e("span", { className: "text-destructive", children: "*" })
-        ]
+        checked: e,
+        defaultChecked: u,
+        onCheckedChange: v,
+        disabled: a,
+        ...o,
+        children: /* @__PURE__ */ d(
+          m.Indicator,
+          {
+            "data-checkbox": "indicator",
+            className: r("flex items-center justify-center text-current group"),
+            children: [
+              /* @__PURE__ */ t(y, { className: "h-3 w-3 hidden group-data-[state=checked]:block", strokeWidth: 3 }),
+              /* @__PURE__ */ t(N, { className: "h-3 w-3 hidden group-data-[state=indeterminate]:block", strokeWidth: 3 })
+            ]
+          }
+        )
       }
     ),
-    d && /* @__PURE__ */ e("p", { className: a("text-sm text-muted-foreground", i && "text-destructive"), children: d })
-  ] })
-] }));
-h.displayName = o.Root.displayName;
+    (s || c) && /* @__PURE__ */ d("div", { className: "grid gap-1.5 leading-none", children: [
+      s && /* @__PURE__ */ d(
+        "label",
+        {
+          htmlFor: h,
+          className: r(
+            "text-sm font-medium leading-[20px] text-secondary-foreground peer-data-[state=checked]:text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            n && "text-destructive",
+            a && "text-disabled-text"
+          ),
+          children: [
+            s,
+            " ",
+            o.required && /* @__PURE__ */ t("span", { className: "text-destructive", children: "*" })
+          ]
+        }
+      ),
+      c && /* @__PURE__ */ t("p", { className: r("text-sm text-muted-foreground", n && "text-destructive"), children: c })
+    ] })
+  ] });
+});
+w.displayName = m.Root.displayName;
 export {
-  h as Checkbox
+  w as Checkbox
 };

package/dist/components/ui/chips.d.ts

@@ -8,6 +8,7 @@ declare const chipVariants: (props?: {
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chipVariants> {
     onRemove?: () => void;
     removable?: boolean;
+    asChild?: boolean;
 }
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 export { Chip, chipVariants };

package/dist/components/ui/chips.js

@@ -1,9 +1,10 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import * as p from "react";
-import { cva as f } from "class-variance-authority";
-import { Cross as l } from "../../icons/index.js";
-import { cn as m } from "../../lib/utils.js";
-const g = f(
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as m from "react";
+import { Slot as f } from "@radix-ui/react-slot";
+import { cva as g } from "class-variance-authority";
+import { Cross as x } from "../../icons/index.js";
+import { cn as b } from "../../lib/utils.js";
+const v = g(
   "inline-flex items-center gap-1.5 px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
@@ -30,31 +31,38 @@ const g = f(
       shape: "pill"
     }
   }
-), x = p.forwardRef(
-  ({ className: e, variant: o, size: t, shape: n, onRemove: i, removable: s, children: a, ...d }, u) => /* @__PURE__ */ c(
-    "div",
+), h = m.forwardRef(
+  ({ className: n, variant: r, size: e, shape: o, onRemove: a, removable: i, asChild: d = !1, children: s, ...p }, c) => /* @__PURE__ */ l(
+    d ? f : "div",
     {
-      ref: u,
-      className: m(g({ variant: o, size: t, shape: n }), e),
-      ...d,
+      ref: c,
+      className: b(v({ variant: r, size: e, shape: o }), n),
+      "data-component": "chip",
+      "data-variant": r ?? "default",
+      "data-size": e ?? "md",
+      "data-shape": o ?? "pill",
+      ...p,
       children: [
-        a,
-        s && /* @__PURE__ */ r(
+        s,
+        i && /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: i,
+            onClick: (u) => {
+              u.stopPropagation(), a?.();
+            },
             className: "ml-1 p-1 rounded-full hover:bg-black/20 focus:outline-none focus:ring-2 focus:ring-ring",
             "aria-label": "Remove",
-            children: /* @__PURE__ */ r(l, { size: 8 })
+            "data-component": "chip-remove",
+            children: /* @__PURE__ */ t(x, { size: 8 })
           }
         )
       ]
     }
   )
 );
-x.displayName = "Chip";
+h.displayName = "Chip";
 export {
-  x as Chip,
-  g as chipVariants
+  h as Chip,
+  v as chipVariants
 };

package/dist/components/ui/data-table/data-table-column-list.d.ts

@@ -1,6 +1,9 @@
 interface DataTableColumnListProps {
     enableApplyDiscard?: boolean;
     enableLazyHierarchy?: boolean;
+    showSearch?: boolean;
+    showSelectAll?: boolean;
+    showCollapse?: boolean;
 }
-export declare const DataTableColumnList: ({ enableApplyDiscard, enableLazyHierarchy }: DataTableColumnListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableColumnList: ({ enableApplyDiscard, enableLazyHierarchy, showSearch, showSelectAll, showCollapse }: DataTableColumnListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/data-table/data-table-column-list.js

@@ -1,41 +1,44 @@
-import { jsx as D } from "react/jsx-runtime";
-import { useState as w, useRef as C, useCallback as a, useEffect as N } from "react";
-import { useDataTable as V } from "./data-table-context.js";
-import { NestedList as z } from "../nested-list/nested-list.js";
-import { SelectionMode as A } from "../types/nested-list.types.js";
-function j(u) {
+import { jsx as y } from "react/jsx-runtime";
+import { useState as N, useRef as b, useCallback as a, useEffect as T } from "react";
+import { useDataTable as j } from "./data-table-context.js";
+import { NestedList as P } from "../nested-list/nested-list.js";
+import { SelectionMode as U } from "../types/nested-list.types.js";
+function W(u) {
   return "getChildren" in u && typeof u.getChildren == "function";
 }
-function P(u, h) {
-  let t = null;
-  return ((...b) => {
-    t && clearTimeout(t), t = setTimeout(() => u(...b), h);
+function _(u, h) {
+  let f = null;
+  return ((...S) => {
+    f && clearTimeout(f), f = setTimeout(() => u(...S), h);
   });
 }
-const B = ({
+const Q = ({
   enableApplyDiscard: u = !1,
-  enableLazyHierarchy: h = !1
+  enableLazyHierarchy: h = !1,
+  showSearch: f = !0,
+  showSelectAll: S = !0,
+  showCollapse: I = !0
 }) => {
-  const { gridApi: t } = V(), [b, y] = w([]), [T, I] = w(!1), S = C(!1), v = C(/* @__PURE__ */ new Set()), R = C(/* @__PURE__ */ new Map()), k = a((r, l) => {
+  const { gridApi: t } = j(), [L, v] = N([]), [M, F] = N(!1), G = b(!1), R = b(/* @__PURE__ */ new Set()), k = b(/* @__PURE__ */ new Map()), x = a((r, l) => {
     const n = (o, i) => {
-      if (j(o)) {
-        const e = o.getGroupId() || `${i.join("-")}-group`, c = [...i, e], d = v.current.has(e), s = !h || d, f = [];
+      if (W(o)) {
+        const e = o.getGroupId() || `${i.join("-")}-group`, c = [...i, e], d = R.current.has(e), s = !h || d, p = [];
         if (s) {
-          const g = o.getChildren();
-          g && g.forEach((O) => {
-            f.push(n(O, c));
+          const C = o.getChildren();
+          C && C.forEach((A) => {
+            p.push(n(A, c));
           });
         }
-        const F = f.length > 0 ? f.every((g) => g.checked) : !0;
+        const z = p.length > 0 ? p.every((C) => C.checked) : !0;
         return {
           id: e,
           label: o.getColGroupDef()?.headerName || "Column Group",
-          checked: F,
-          children: f.length > 0 ? f : h ? [] : void 0,
+          checked: z,
+          children: p.length > 0 ? p : h ? [] : void 0,
           category: "group"
         };
       } else {
-        const e = o.getColId(), c = R.current.get(e), d = c ? !c.hide : o.isVisible();
+        const e = o.getColId(), c = k.current.get(e), d = c ? !c.hide : o.isVisible();
         return {
           id: e,
           label: o.getColDef().headerName || o.getColDef().field || e,
@@ -44,19 +47,19 @@ const B = ({
       }
     };
     return n(r, l);
-  }, [h]), G = a((r, l) => r.map((n) => k(n, l)), [k]), m = a(() => {
-    if (!t || S.current)
+  }, [h]), D = a((r, l) => r.map((n) => x(n, l)), [x]), m = a(() => {
+    if (!t || G.current)
       return;
     const r = t.getColumnState();
-    R.current = new Map(r.map((s) => [s.colId, s]));
+    k.current = new Map(r.map((s) => [s.colId, s]));
     const l = t.getColumnGroupState();
-    v.current = new Set(
+    R.current = new Set(
       l.filter((s) => s.open).map((s) => s.groupId)
     );
-    const n = t.getLeftDisplayedColumnGroups() || [], o = t.getCenterDisplayedColumnGroups() || [], i = t.getRightDisplayedColumnGroups() || [], e = G(
+    const n = t.getLeftDisplayedColumnGroups() || [], o = t.getCenterDisplayedColumnGroups() || [], i = t.getRightDisplayedColumnGroups() || [], e = D(
       [...n, ...i],
       ["frozen"]
-    ), c = G(
+    ), c = D(
       o,
       ["scrollable"]
     ), d = [
@@ -77,11 +80,11 @@ const B = ({
         isDragDisabled: !0
       }
     ];
-    y(d), I(!0);
-  }, [t, G]), x = C(null);
-  N(() => {
-    x.current = P(m, 150);
-  }, [m]), N(() => {
+    v(d), F(!0);
+  }, [t, D]), E = b(null);
+  T(() => {
+    E.current = _(m, 150);
+  }, [m]), T(() => {
     if (!t) return;
     const r = setTimeout(() => m(), 0), l = [
       "columnVisible",
@@ -91,13 +94,13 @@ const B = ({
       "gridReady",
       "columnGroupOpened"
     ], n = () => {
-      x.current?.();
+      E.current?.();
     };
     return t.isDestroyed() || l.forEach((o) => t.addEventListener(o, n)), () => {
       clearTimeout(r), t.isDestroyed() || l.forEach((o) => t.removeEventListener(o, n));
     };
   }, [t, m]);
-  const E = a((r) => {
+  const w = a((r) => {
     const l = [], n = (o, i) => {
       o.forEach((e) => {
         if (e.id === "root-frozen") {
@@ -116,38 +119,39 @@ const B = ({
       });
     };
     return n(r, null), l;
-  }, [t]), p = a((r) => {
+  }, [t]), g = a((r) => {
     if (!t) return;
-    S.current = !0;
-    const l = E(r);
+    G.current = !0;
+    const l = w(r);
     l.length > 0 && t.applyColumnState({
       state: l,
       applyOrder: !0
     }), setTimeout(() => {
-      S.current = !1;
+      G.current = !1;
     }, 300);
-  }, [t, E]), L = a((r) => {
-    p(r);
-  }, [p]), M = a((r) => {
-    u || p(r), y(r);
-  }, [u, p]);
-  return T ? /* @__PURE__ */ D("div", { className: "flex flex-col h-full bg-white", children: /* @__PURE__ */ D(
-    z,
+  }, [t, w]), O = a((r) => {
+    g(r);
+  }, [g]), V = a((r) => {
+    u || g(r), v(r);
+  }, [u, g]);
+  return M ? /* @__PURE__ */ y("div", { className: "flex flex-col h-full bg-white", children: /* @__PURE__ */ y(
+    P,
     {
-      items: b,
-      onChange: M,
-      onSubmit: L,
+      items: L,
+      onChange: V,
+      onSubmit: O,
       enableApplyDiscard: u,
-      enableSearch: !0,
-      enableSelectAll: !0,
+      enableSearch: f,
+      enableSelectAll: S,
       enableDragDrop: !0,
       enableCollapse: !0,
-      selectionMode: A.CASCADE_DOWN,
+      enableGlobalCollapse: I,
+      selectionMode: U.CASCADE_DOWN,
       searchPlaceholder: "Search columns...",
       className: "h-full"
     }
-  ) }) : /* @__PURE__ */ D("div", { className: "p-4 text-[13px] text-slate-400", children: "Loading columns..." });
+  ) }) : /* @__PURE__ */ y("div", { className: "p-4 text-[13px] text-slate-400", children: "Loading columns..." });
 };
 export {
-  B as DataTableColumnList
+  Q as DataTableColumnList
 };

package/dist/components/ui/data-table/data-table-sheet.d.ts

@@ -17,4 +17,4 @@ export declare const DataTableSheetHeader: ({ title, children, className }: {
 export declare const DataTableSheetContent: ({ children, className }: {
     children: React.ReactNode;
     className?: string;
-}) => React.ReactPortal;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/data-table/data-table-sheet.js

@@ -1,77 +1,80 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import f, { useState as x, createContext as b, useContext as v } from "react";
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+import m, { useState as x, createContext as b, useContext as v } from "react";
 import { createPortal as w } from "react-dom";
 import { X as g } from "lucide-react";
-import { cn as m } from "../../../lib/utils.js";
+import { cn as c } from "../../../lib/utils.js";
 import { Button as C } from "../button.js";
 import { useDataTable as T } from "./data-table-context.js";
-const p = b(null), c = () => {
-  const e = v(p);
+const u = b(null), d = () => {
+  const e = v(u);
   if (!e)
     throw new Error("useDataTableSheet must be used within DataTableSheet");
   return e;
 }, O = ({
   children: e,
-  defaultOpen: o = !1,
-  open: n,
-  onOpenChange: a
+  defaultOpen: r = !1,
+  open: o,
+  onOpenChange: t
 }) => {
-  const [r, s] = x(o), l = n !== void 0, u = l ? n : r, h = (d) => {
-    l || s(d), a?.(d);
+  const [a, s] = x(r), l = o !== void 0, p = l ? o : a, h = (f) => {
+    l || s(f), t?.(f);
   };
-  return /* @__PURE__ */ t(p.Provider, { value: { open: u, setOpen: h }, children: e });
+  return /* @__PURE__ */ n(u.Provider, { value: { open: p, setOpen: h }, children: e });
 }, E = ({
   children: e,
-  asChild: o
+  asChild: r
 }) => {
-  const { setOpen: n, open: a } = c(), r = (s) => {
-    n(!a);
+  const { setOpen: o, open: t } = d(), a = (s) => {
+    o(!t);
   };
-  if (o) {
-    const s = f.Children.only(e);
-    return f.cloneElement(s, {
+  if (r) {
+    const s = m.Children.only(e);
+    return m.cloneElement(s, {
       onClick: (l) => {
-        s.props.onClick?.(l), r();
+        s.props.onClick?.(l), a();
       }
     });
   }
-  return /* @__PURE__ */ t(C, { variant: "outline", onClick: r, children: e });
+  return /* @__PURE__ */ n(C, { variant: "outline", onClick: a, children: e });
 }, P = ({
   title: e,
-  children: o,
-  className: n
+  children: r,
+  className: o
 }) => {
-  const { setOpen: a } = c();
-  return /* @__PURE__ */ i("div", { className: m("flex shrink-0 flex-row justify-between items-center px-4 py-3 mb-2 bg-[#eceefd]", n), children: [
-    /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: e && /* @__PURE__ */ t("h2", { className: "font-[Manrope] font-bold text-base text-[#0d152c]", children: e }) }),
+  const { setOpen: t } = d();
+  return /* @__PURE__ */ i("div", { className: c("flex shrink-0 flex-row justify-between items-center px-4 py-3 mb-2 bg-[#eceefd]", o), children: [
+    /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: e && /* @__PURE__ */ n("h2", { className: "font-[Manrope] font-bold text-base text-[#0d152c]", children: e }) }),
     /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-      o,
-      /* @__PURE__ */ t(
+      r,
+      /* @__PURE__ */ n(
         "span",
         {
           role: "button",
           className: "close_icon cursor-pointer flex items-center justify-center w-6 h-6 rounded-full hover:bg-slate-200/50 transition-colors",
-          onClick: () => a(!1),
-          children: /* @__PURE__ */ t(g, { className: "h-4 w-4 text-slate-500" })
+          onClick: () => t(!1),
+          children: /* @__PURE__ */ n(g, { className: "h-4 w-4 text-slate-500" })
         }
       )
     ] })
   ] });
 }, z = ({
   children: e,
-  className: o
+  className: r
 }) => {
-  const { open: n, setOpen: a } = c(), { sheetTarget: r } = T();
-  return !n || !r ? null : w(
-    /* @__PURE__ */ t("div", { className: "absolute inset-0 z-[100] flex justify-end overflow-hidden pointer-events-none", children: /* @__PURE__ */ i("div", { className: "flex h-[calc(100%+2px)] -my-px animate-in slide-in-from-right-[100%] duration-200 ease-in-out fade-in fill-mode-forwards", children: [
-      /* @__PURE__ */ t("div", { className: "w-[6px] bg-white border-l border-slate-200 shrink-0" }),
-      /* @__PURE__ */ t("div", { className: m(
-        "relative flex h-full w-[355px] flex-col overflow-y-auto bg-white border-t border-l border-slate-200 pointer-events-auto shadow-[0px_0px_4px_0px_rgba(0,0,0,0.12)]",
-        o
-      ), children: e })
-    ] }) }),
-    r
-  );
+  const { open: o } = d(), { sheetTarget: t } = T();
+  if (!o) return null;
+  const a = /* @__PURE__ */ n("div", { className: c(
+    "absolute inset-0 z-[35] flex justify-end overflow-hidden pointer-events-none",
+    !t && "fixed"
+    // Fallback to fixed if no target
+  ), children: /* @__PURE__ */ i("div", { className: "flex h-[calc(100%+2px)] -my-px animate-in slide-in-from-right-[100%] duration-200 ease-in-out fade-in fill-mode-forwards", children: [
+    /* @__PURE__ */ n("div", { className: "w-[6px] bg-white border-l border-slate-200 shrink-0" }),
+    /* @__PURE__ */ n("div", { className: c(
+      "relative flex h-full w-[355px] flex-col overflow-y-auto bg-white border-t border-l border-slate-200 pointer-events-auto shadow-[0px_0px_4px_0px_rgba(0,0,0,0.12)]",
+      r
+    ), children: e })
+  ] }) });
+  return t ? w(a, t) : a;
 };
 export {
   O as DataTableSheet,

package/dist/components/ui/data-table/data-table-view-options.js

@@ -3,33 +3,33 @@ import "react";
 import { DropdownMenu as c, DropdownMenuTrigger as m, DropdownMenuContent as d, DropdownMenuItem as p, DropdownMenuSub as u, DropdownMenuSubTrigger as h, DropdownMenuSubContent as f, DropdownMenuRadioGroup as x, DropdownMenuRadioItem as t } from "../dropdown-menu.js";
 import { Button as g } from "../button.js";
 import { ThreeDots as D, Settings as N, Density as w, Stack as C, StackCompact as M, StackComfort as v } from "../../../icons/index.js";
-import { useDataTable as z } from "./data-table-context.js";
-import { DataTableSheetTrigger as S } from "./data-table-sheet.js";
+import { useDataTable as S } from "./data-table-context.js";
+import { DataTableSheetTrigger as b } from "./data-table-sheet.js";
 const I = ({
   enableTableSettings: r = !0,
-  enableContentDensity: n = !0,
-  trigger: l
+  enableContentDensity: s = !0,
+  trigger: n
 }) => {
-  const { rowHeight: s, setRowHeight: o } = z();
+  const { rowHeight: l, setRowHeight: o } = S();
   return /* @__PURE__ */ a(c, { children: [
-    /* @__PURE__ */ e(m, { asChild: !0, children: l || /* @__PURE__ */ a(g, { variant: "secondary", size: "icon", "aria-label": "More", children: [
-      /* @__PURE__ */ e(D, { size: 14 }),
+    /* @__PURE__ */ e(m, { asChild: !0, children: n || /* @__PURE__ */ a(g, { variant: "secondary", size: "icon", "aria-label": "More", children: [
+      /* @__PURE__ */ e(D, { size: "sm" }),
       /* @__PURE__ */ e("span", { className: "sr-only", children: "Open menu" })
     ] }) }),
-    /* @__PURE__ */ a(d, { align: "end", className: "w-[240px] z-[100] flex flex-col gap-[2px]", children: [
-      r && /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ e(p, { className: "flex cursor-pointer gap-2", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(N, { size: 13, className: "text-slate-500" }),
+    /* @__PURE__ */ a(d, { align: "end", className: "w-[240px] flex flex-col gap-[2px]", children: [
+      r && /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(p, { className: "flex cursor-pointer gap-2", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(N, { size: "sm", className: "text-slate-500" }),
         /* @__PURE__ */ e("span", { children: "Table Settings" })
       ] }) }) }),
-      n && /* @__PURE__ */ a(u, { children: [
+      s && /* @__PURE__ */ a(u, { children: [
         /* @__PURE__ */ a(h, { className: "flex items-center gap-2 cursor-pointer", children: [
-          /* @__PURE__ */ e(w, { size: 13, className: "text-slate-500" }),
+          /* @__PURE__ */ e(w, { size: "sm", className: "text-slate-500" }),
           /* @__PURE__ */ e("span", { children: "Content density" })
         ] }),
-        /* @__PURE__ */ e(f, { className: "w-[190px] z-[100]", children: /* @__PURE__ */ a(
+        /* @__PURE__ */ e(f, { className: "w-[190px]", children: /* @__PURE__ */ a(
           x,
           {
-            value: s,
+            value: l,
             onValueChange: (i) => o(i),
             className: "flex flex-col gap-0.5",
             children: [
@@ -38,7 +38,7 @@ const I = ({
                 {
                   value: "default",
                   children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ e(C, { size: 13, className: "text-slate-500" }),
+                    /* @__PURE__ */ e(C, { size: "sm", className: "text-slate-500" }),
                     "Default"
                   ] })
                 }
@@ -48,7 +48,7 @@ const I = ({
                 {
                   value: "compact",
                   children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ e(M, { size: 13, className: "text-slate-500" }),
+                    /* @__PURE__ */ e(M, { size: "sm", className: "text-slate-500" }),
                     "Compact"
                   ] })
                 }
@@ -58,7 +58,7 @@ const I = ({
                 {
                   value: "comfort",
                   children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ e(v, { size: 13, className: "text-slate-500" }),
+                    /* @__PURE__ */ e(v, { size: "sm", className: "text-slate-500" }),
                     "Comfort"
                   ] })
                 }