impact-nova 2.1.0-alpha.4 → 2.1.0-alpha.5

package/dist/components/data/data-table/data-table-saved-views.js

@@ -26,8 +26,8 @@ const Ae = ["default", "active", "system"], Ye = ({
   isLoadingViews: L = !1,
   customListContent: _,
   disableApply: ie = !1,
-  className: le,
-  onSaveViewClick: re,
+  className: re,
+  onSaveViewClick: le,
   onApply: se,
   onCancel: oe,
   onEditView: de,
@@ -55,26 +55,26 @@ const Ae = ["default", "active", "system"], Ye = ({
   n.useEffect(() => {
     const e = u && !K.current;
     if (K.current = u, e) {
-      const l = o.find((c) => c.isActive);
-      M(l?.id ?? null), S("All"), z(""), D("");
+      const r = o.find((c) => c.isActive);
+      M(r?.id ?? null), S("All"), z(""), D("");
     }
   }, [u, o]);
   const g = n.useMemo(() => v === "All" ? o : o.filter((e) => e.viewType === v), [o, v]), f = w.trim().toLowerCase(), T = n.useCallback(
-    (e, l) => l ? (e.viewName ?? "").trim().toLowerCase().includes(l) : !0,
+    (e, r) => r ? (e.viewName ?? "").trim().toLowerCase().includes(r) : !0,
     []
   ), A = n.useMemo(() => {
     let e = g;
-    return f && (e = e.filter((l) => T(l, f))), e;
+    return f && (e = e.filter((r) => T(r, f))), e;
   }, [g, f, T]), h = n.useMemo(() => {
     if (g.length === 0) return [];
     const e = Object.groupBy(g, Me);
-    return Ae.flatMap((l) => {
-      const c = e[l]?.[0];
+    return Ae.flatMap((r) => {
+      const c = e[r]?.[0];
       return c ? f && !T(c, f) ? [] : [c] : [];
     });
   }, [g, f, T]), P = n.useMemo(() => {
-    const e = new Set(h.map((l) => l.id));
-    return A.filter((l) => !e.has(l.id));
+    const e = new Set(h.map((r) => r.id));
+    return A.filter((r) => !e.has(r.id));
   }, [A, h]), G = N === null ? null : o.find((e) => e.id === N) ?? null, fe = () => {
     se?.(G, { activeView: d }), p(!1);
   }, he = () => {
@@ -84,23 +84,23 @@ const Ae = ["default", "active", "system"], Ye = ({
   };
   if (!b)
     return null;
-  const ve = o.length > 0, H = (e, l, c) => {
-    const O = N === e.id, s = me === e.id, J = l === "priority" && !!e.isActive, xe = l === "list" && !!e.isActive;
+  const ve = o.length > 0, H = (e, r, c) => {
+    const O = N === e.id, s = me === e.id, J = r === "priority" && !!e.isActive, xe = r === "list" && !!e.isActive;
     return /* @__PURE__ */ i(
       "div",
       {
         tabIndex: 0,
         className: k(
           "mb-1 flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-left text-sm font-medium font-['Manrope'] transition-all duration-300 relative overflow-hidden",
-          !s && "hover:bg-muted",
+          !s && "hover:bg-canvas-muted",
           !s && J && !O && "bg-primary/10 dark:bg-primary/15",
           !s && O && "bg-badge-info-muted text-badge-info-foreground",
           !s && !O && !J && "text-foreground",
           s && "pointer-events-none"
         ),
         onClick: () => !s && M(e.id),
-        onKeyDown: (r) => {
-          (r.key === "Enter" || r.key === " ") && (r.preventDefault(), s || M(e.id));
+        onKeyDown: (l) => {
+          (l.key === "Enter" || l.key === " ") && (l.preventDefault(), s || M(e.id));
         },
         children: [
           s && /* @__PURE__ */ t(
@@ -135,8 +135,8 @@ const Ae = ["default", "active", "system"], Ye = ({
                 size: "iconSm",
                 className: "text-foreground hover:text-content-charcoal",
                 "aria-label": a("dataTable.savedViewsEdit"),
-                onClick: (r) => {
-                  r.stopPropagation(), r.preventDefault(), p(!1), de?.(e, { activeView: d });
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), p(!1), de?.(e, { activeView: d });
                 },
                 children: /* @__PURE__ */ t(Ne, { className: "size-3.5" })
               }
@@ -149,8 +149,8 @@ const Ae = ["default", "active", "system"], Ye = ({
                 size: "iconSm",
                 className: "text-foreground hover:text-destructive",
                 "aria-label": a("dataTable.savedViewsDelete"),
-                onClick: (r) => {
-                  r.stopPropagation(), r.preventDefault(), p(!1), $(e);
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), p(!1), $(e);
                 },
                 children: /* @__PURE__ */ t(Te, { className: "size-3.5" })
               }
@@ -164,8 +164,8 @@ const Ae = ["default", "active", "system"], Ye = ({
                 className: "text-yellow-500 hover:text-yellow-600 disabled:opacity-50",
                 "aria-label": a("dataTable.savedViewsDefaultAction"),
                 disabled: s,
-                onClick: (r) => {
-                  r.stopPropagation(), r.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), U?.(e, { activeView: d }));
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), U?.(e, { activeView: d }));
                 },
                 children: s ? /* @__PURE__ */ t("div", { className: "size-3.5 animate-spin motion-reduce:animate-none rounded-full border-2 border-yellow-500 border-t-transparent" }) : /* @__PURE__ */ t(I, { className: "size-3.5 fill-current text-yellow-500" })
               }
@@ -178,8 +178,8 @@ const Ae = ["default", "active", "system"], Ye = ({
                 className: "text-yellow-500 hover:text-yellow-600 disabled:opacity-50",
                 "aria-label": a("dataTable.savedViewsSetDefault"),
                 disabled: s,
-                onClick: (r) => {
-                  r.stopPropagation(), r.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), U?.(e, { activeView: d }));
+                onClick: (l) => {
+                  l.stopPropagation(), l.preventDefault(), s || (y(e.id), setTimeout(() => y(null), 1200), U?.(e, { activeView: d }));
                 },
                 children: s ? /* @__PURE__ */ t("div", { className: "size-3.5 animate-spin motion-reduce:animate-none rounded-full border-2 border-yellow-500 border-t-transparent" }) : /* @__PURE__ */ t(I, { className: "size-3.5 text-yellow-500" })
               }
@@ -197,7 +197,7 @@ const Ae = ["default", "active", "system"], Ye = ({
         "data-component": "data-table-saved-views",
         className: k(
           "mb-2 mx-4 flex min-w-0 flex-nowrap items-center justify-between gap-2 rounded-lg bg-feedback-success-surface px-2 py-3",
-          le
+          re
         ),
         children: [
           L ? /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: [
@@ -302,7 +302,7 @@ const Ae = ["default", "active", "system"], Ye = ({
                       prefix: /* @__PURE__ */ t(
                         ye,
                         {
-                          className: "size-4 shrink-0 text-content-muted",
+                          className: "size-4 shrink-0 text-secondary-foreground",
                           "aria-hidden": !0
                         }
                       ),
@@ -369,7 +369,7 @@ const Ae = ["default", "active", "system"], Ye = ({
               size: "sm",
               className: "shrink-0 font-['Manrope']",
               onClick: () => {
-                p(!1), re?.({ activeView: d });
+                p(!1), le?.({ activeView: d });
               },
               children: a("dataTable.savedViewsSave")
             }

package/dist/components/data/data-table/data-table-sheet-portal-store.d.ts

@@ -0,0 +1,13 @@
+export interface DataTableSheetPortalSnapshot {
+    sheetTarget: HTMLDivElement | null;
+    scopedSheetOpen: boolean;
+}
+export interface DataTableSheetPortalStore {
+    getSnapshot: () => DataTableSheetPortalSnapshot;
+    subscribe: (listener: () => void) => () => void;
+    setSheetTarget: (sheetTarget: HTMLDivElement | null) => void;
+    registerScopedSheetDepth: (delta: 1 | -1) => void;
+    reset: () => void;
+}
+export declare function createDataTableSheetPortalStore(): DataTableSheetPortalStore;
+export declare function useDataTableSheetPortalSnapshot(store: DataTableSheetPortalStore): DataTableSheetPortalSnapshot;

package/dist/components/data/data-table/data-table-sheet-portal-store.js

@@ -0,0 +1,36 @@
+import { useSyncExternalStore as o } from "react";
+function p() {
+  let t = 0, n = {
+    sheetTarget: null,
+    scopedSheetOpen: !1
+  };
+  const r = /* @__PURE__ */ new Set(), a = () => {
+    r.forEach((e) => e());
+  };
+  return {
+    getSnapshot: () => n,
+    subscribe: (e) => (r.add(e), () => r.delete(e)),
+    setSheetTarget: (e) => {
+      n.sheetTarget !== e && (n = { ...n, sheetTarget: e }, a());
+    },
+    registerScopedSheetDepth: (e) => {
+      t = Math.max(0, t + e);
+      const s = t > 0;
+      n.scopedSheetOpen !== s && (n = { ...n, scopedSheetOpen: s }, a());
+    },
+    reset: () => {
+      t = 0, n = { sheetTarget: null, scopedSheetOpen: !1 }, a();
+    }
+  };
+}
+function S(t) {
+  return o(
+    t.subscribe,
+    t.getSnapshot,
+    t.getSnapshot
+  );
+}
+export {
+  p as createDataTableSheetPortalStore,
+  S as useDataTableSheetPortalSnapshot
+};

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

@@ -1,10 +1,7 @@
 import { default as React } from 'react';
-export declare const DataTableSheet: ({ children, defaultOpen, open: controlledOpen, onOpenChange, }: {
-    children: React.ReactNode;
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+import { DataTableSheetProps } from './data-table.types';
+export type { DataTableSheetProps } from './data-table.types';
+export declare const DataTableSheet: ({ children, defaultOpen, open: controlledOpen, onOpenChange, }: DataTableSheetProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DataTableSheetTrigger: ({ children, asChild, }: {
     children: React.ReactNode;
     asChild?: boolean;

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

@@ -67,7 +67,7 @@ const I = ({
               className: "close_icon h-6 w-6 rounded-full hover:bg-muted/50",
               "aria-label": "Close",
               onClick: () => o(!1),
-              children: /* @__PURE__ */ t(C, { className: "!h-3 !w-3 text-content-muted" })
+              children: /* @__PURE__ */ t(C, { className: "!h-3 !w-3 text-content-icon" })
             }
           )
         ] })

package/dist/components/data/data-table/data-table-view-menu.js

@@ -1,102 +1,102 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
 import * as c from "react";
-import { DropdownMenuContent as m, DropdownMenuSub as p, DropdownMenuSubTrigger as d, DropdownMenuSubContent as u, DropdownMenuRadioGroup as g, DropdownMenuRadioItem as l, DropdownMenuItem as i, DropdownMenuTrigger as f } from "../../feedback/dropdown-menu/dropdown-menu.js";
+import { DropdownMenuContent as p, DropdownMenuSub as m, DropdownMenuSubTrigger as d, DropdownMenuSubContent as u, DropdownMenuRadioGroup as g, DropdownMenuRadioItem as r, DropdownMenuItem as l, DropdownMenuTrigger as f } from "../../feedback/dropdown-menu/dropdown-menu.js";
 import { Button as h } from "../../primitives/button/button.js";
 import { cn as b } from "../../../lib/utils.js";
 import { Density as x, Stack as T, StackCompact as w, StackComfort as D, Settings as N, ThreeDots as C, Collapse as M, Expand as S } from "impact-nova-icons";
-import { useImpactNovaI18n as r } from "../../../i18n/use-impact-nova-i18n.js";
+import { useImpactNovaI18n as i } from "../../../i18n/use-impact-nova-i18n.js";
 import { useDataTable as v } from "./data-table-context.js";
 import { DataTableSheetTrigger as P } from "./data-table-sheet.js";
 const y = ({
-  children: a,
+  children: t,
   ...n
 }) => {
-  const { t: o } = r();
-  return /* @__PURE__ */ t(f, { asChild: !0, ...n, children: a ?? /* @__PURE__ */ s(h, { variant: "secondary", size: "icon", "aria-label": o("dataTable.more"), children: [
-    /* @__PURE__ */ t(C, { size: "sm" }),
-    /* @__PURE__ */ t("span", { className: "sr-only", children: o("dataTable.openMenu") })
+  const { t: o } = i();
+  return /* @__PURE__ */ a(f, { asChild: !0, ...n, children: t ?? /* @__PURE__ */ s(h, { variant: "secondary", size: "icon", "aria-label": o("dataTable.more"), children: [
+    /* @__PURE__ */ a(C, { size: "sm" }),
+    /* @__PURE__ */ a("span", { className: "sr-only", children: o("dataTable.openMenu") })
   ] }) });
 };
 y.displayName = "DataTableViewMenuTrigger";
-const k = c.forwardRef(({ className: a, align: n = "end", ...o }, e) => /* @__PURE__ */ t(
-  m,
+const k = c.forwardRef(({ className: t, align: n = "end", ...o }, e) => /* @__PURE__ */ a(
+  p,
   {
     ref: e,
     align: n,
     "data-component": "data-table-view-menu",
-    className: b("w-[240px] flex flex-col gap-[2px]", a),
+    className: b("w-[240px] flex flex-col gap-[2px]", t),
     ...o
   }
 ));
 k.displayName = "DataTableViewMenuContent";
 const G = () => {
-  const { t: a } = r();
-  return /* @__PURE__ */ t(P, { asChild: !0, children: /* @__PURE__ */ t(
-    i,
+  const { t } = i();
+  return /* @__PURE__ */ a(P, { asChild: !0, children: /* @__PURE__ */ a(
+    l,
     {
       className: "flex cursor-pointer gap-2",
       onClick: (n) => n.stopPropagation(),
       onSelect: (n) => n.stopPropagation(),
       children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ t(N, { size: "sm", className: "text-content-muted" }),
-        /* @__PURE__ */ t("span", { children: a("dataTable.tableSettings") })
+        /* @__PURE__ */ a(N, { size: "sm", className: "text-content-icon" }),
+        /* @__PURE__ */ a("span", { children: t("dataTable.tableSettings") })
       ] })
     }
   ) });
 }, q = () => {
-  const { t: a } = r(), { rowHeight: n, setRowHeight: o } = v();
-  return /* @__PURE__ */ s(p, { children: [
+  const { t } = i(), { rowHeight: n, setRowHeight: o } = v();
+  return /* @__PURE__ */ s(m, { children: [
     /* @__PURE__ */ s(
       d,
       {
         className: "flex items-center gap-2 cursor-pointer",
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ t(x, { size: "sm", className: "text-content-muted" }),
-          /* @__PURE__ */ t("span", { children: a("dataTable.contentDensity") })
+          /* @__PURE__ */ a(x, { size: "sm", className: "text-content-icon" }),
+          /* @__PURE__ */ a("span", { children: t("dataTable.contentDensity") })
         ]
       }
     ),
-    /* @__PURE__ */ t(u, { className: "w-[190px]", children: /* @__PURE__ */ s(
+    /* @__PURE__ */ a(u, { className: "w-[190px]", children: /* @__PURE__ */ s(
       g,
       {
         value: n,
         onValueChange: (e) => o(e),
         className: "flex flex-col gap-0.5",
         children: [
-          /* @__PURE__ */ t(
-            l,
+          /* @__PURE__ */ a(
+            r,
             {
               value: "default",
               onClick: (e) => e.stopPropagation(),
               onSelect: (e) => e.stopPropagation(),
               children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ t(T, { size: "sm", className: "text-content-muted" }),
-                a("dataTable.densityDefault")
+                /* @__PURE__ */ a(T, { size: "sm", className: "text-content-icon" }),
+                t("dataTable.densityDefault")
               ] })
             }
           ),
-          /* @__PURE__ */ t(
-            l,
+          /* @__PURE__ */ a(
+            r,
             {
               value: "compact",
               onClick: (e) => e.stopPropagation(),
               onSelect: (e) => e.stopPropagation(),
               children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ t(w, { size: "sm", className: "text-content-muted" }),
-                a("dataTable.densityCompact")
+                /* @__PURE__ */ a(w, { size: "sm", className: "text-content-icon" }),
+                t("dataTable.densityCompact")
               ] })
             }
           ),
-          /* @__PURE__ */ t(
-            l,
+          /* @__PURE__ */ a(
+            r,
             {
               value: "comfort",
               onClick: (e) => e.stopPropagation(),
               onSelect: (e) => e.stopPropagation(),
               children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ t(D, { size: "sm", className: "text-content-muted" }),
-                a("dataTable.densityComfort")
+                /* @__PURE__ */ a(D, { size: "sm", className: "text-content-icon" }),
+                t("dataTable.densityComfort")
               ] })
             }
           )
@@ -105,21 +105,21 @@ const G = () => {
     ) })
   ] });
 }, A = ({
-  expanded: a,
+  expanded: t,
   onExpandedChange: n
 }) => {
-  const { t: o } = r();
-  return /* @__PURE__ */ t(
-    i,
+  const { t: o } = i();
+  return /* @__PURE__ */ a(
+    l,
     {
       className: "flex cursor-pointer gap-2",
       onClick: (e) => e.stopPropagation(),
       onSelect: (e) => {
-        e.stopPropagation(), n(!a);
+        e.stopPropagation(), n(!t);
       },
       children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-        a ? /* @__PURE__ */ t(M, { size: "sm", className: "text-content-muted" }) : /* @__PURE__ */ t(S, { size: "sm", className: "text-content-muted" }),
-        /* @__PURE__ */ t("span", { children: o(a ? "dataTable.tableCollapse" : "dataTable.tableExpand") })
+        t ? /* @__PURE__ */ a(M, { size: "sm", className: "text-content-icon" }) : /* @__PURE__ */ a(S, { size: "sm", className: "text-content-icon" }),
+        /* @__PURE__ */ a("span", { children: o(t ? "dataTable.tableCollapse" : "dataTable.tableExpand") })
       ] })
     }
   );

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

@@ -1,18 +1,16 @@
-import { default as React } from 'react';
-import { DataTableProps, DataTableContentProps } from './data-table.types';
-export type { DataTableProps, DataTableContentProps } from './data-table.types';
+import { DataTableProps, DataTableContentProps, DataTableToolbarProps } from './data-table.types';
+export type { DataTableProps, DataTableContentProps, DataTableToolbarProps, } from './data-table.types';
 /**
  * DataTable Root
  * Provides context and structural container.
  */
 export declare const DataTable: ({ children, className, }: DataTableProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * DataTable Content — does not subscribe to sheet open/close; only the frame
+ * and sheet UI re-render when the scoped settings panel toggles.
+ */
 export declare function DataTableContent<TData>(props: DataTableContentProps<TData>): import("react/jsx-runtime").JSX.Element;
 /**
- * DataTable Toolbar
- * Generic container for top-bar actions.
- * Users can conditionally render this component to remove it from DOM.
+ * Top bar above the grid. Optional — omit to remove the toolbar from the DOM.
  */
-export declare const DataTableToolbar: ({ children, className, }: {
-    children: React.ReactNode;
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableToolbar: ({ children, className, }: DataTableToolbarProps) => import("react/jsx-runtime").JSX.Element;