impact-nova 1.7.4 → 1.7.5

package/dist/components/ui/data-table/data-table-saved-views.d.ts

@@ -0,0 +1,2 @@
+import { DataTableSavedViewsProps } from '../types/data-table-saved-views.types';
+export declare const DataTableSavedViews: ({ isSaveViewEnabled, views, activeViewSummary, viewTypeOptions, menuOpen: menuOpenControlled, defaultMenuOpen, onMenuOpenChange, onSearch, isLoadingViews, customListContent, disableApply, className, onSaveViewClick, onApply, onCancel, onEditView, onDeleteView, onSetDefaultView, }: DataTableSavedViewsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,348 @@
+import { jsxs as l, Fragment as ne, jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import { ChevronDown as le, Star as w, Search as ie, Pencil as se, Trash2 as re, Bookmark as oe } from "lucide-react";
+import { cn as T } from "../../../lib/utils.js";
+import { Popover as de, PopoverTrigger as ce, PopoverContent as me } from "../popover.js";
+import { Tooltip as I, TooltipTrigger as O, TooltipContent as _ } from "../tooltip.js";
+import { Button as o } from "../button.js";
+import { Badge as C } from "../badge.js";
+import { Input as pe } from "../input.js";
+import { Separator as ue } from "../separator.js";
+import { Skeleton as fe } from "../skeleton.js";
+import { Prompt as he } from "../prompt.js";
+import { useImpactNovaI18n as xe } from "../../../i18n/ImpactNovaI18nContext.js";
+const Se = ({
+  isSaveViewEnabled: L = !0,
+  views: s,
+  activeViewSummary: F,
+  viewTypeOptions: Q,
+  menuOpen: k,
+  defaultMenuOpen: q = !1,
+  onMenuOpenChange: V,
+  onSearch: m,
+  isLoadingViews: K = !1,
+  customListContent: D,
+  disableApply: R = !1,
+  className: Y,
+  onSaveViewClick: G,
+  onApply: H,
+  onCancel: J,
+  onEditView: U,
+  onDeleteView: W,
+  onSetDefaultView: z
+}) => {
+  const { t: a } = xe(), x = k !== void 0, [X, Z] = i.useState(
+    q
+  ), p = x ? !!k : X, d = i.useCallback(
+    (e) => {
+      x || Z(e), V?.(e);
+    },
+    [x, V]
+  ), [u, b] = i.useState("All"), [v, g] = i.useState(""), [f, S] = i.useState("");
+  i.useEffect(() => {
+    const e = window.setTimeout(() => S(v), 300);
+    return () => window.clearTimeout(e);
+  }, [v]), i.useEffect(() => {
+    m && m(f);
+  }, [f, m]);
+  const M = i.useMemo(
+    () => s.find((e) => e.isActive),
+    [s]
+  ), r = M ?? null, P = F ?? M?.viewName ?? a("dataTable.savedViewsNotApplicable"), [y, N] = i.useState(null), [h, A] = i.useState(null);
+  i.useEffect(() => {
+    if (p) {
+      const e = s.find((c) => c.isActive);
+      N(e?.id ?? null), b("All"), g(""), S("");
+    }
+  }, [p, s]);
+  const E = i.useMemo(() => u === "All" ? s : s.filter((e) => e.viewType === u), [s, u]), j = i.useMemo(() => {
+    let e = E;
+    if (!m && f.trim()) {
+      const c = f.trim().toLowerCase();
+      e = e.filter((n) => n.viewName.toLowerCase().includes(c));
+    }
+    return e;
+  }, [E, f, m]), B = y === null ? null : s.find((e) => e.id === y) ?? null, $ = () => {
+    H?.(B, { activeView: r }), d(!1);
+  }, ee = () => {
+    J?.({ activeView: r, pendingView: B }), d(!1);
+  }, te = (e) => {
+    d(e), e || g("");
+  };
+  if (!L)
+    return null;
+  const ae = s.length > 0;
+  return /* @__PURE__ */ l(ne, { children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        "data-component": "data-table-saved-views",
+        className: T(
+          "mb-2 mx-4 rounded-lg bg-[linear-gradient(83.74deg,#F5F9EC_72.68%,#D7E5B2_108.88%)] flex min-w-0 flex-wrap items-center justify-between gap-2 px-2 py-3",
+          Y
+        ),
+        children: [
+          ae ? /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-1 items-center gap-1 sm:flex-initial", children: /* @__PURE__ */ l(de, { open: p, onOpenChange: te, children: [
+            /* @__PURE__ */ t(ce, { asChild: !0, children: /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                className: "flex min-w-0 max-w-full cursor-pointer items-center gap-1 rounded-md border-none bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
+                "aria-expanded": p,
+                "aria-haspopup": "dialog",
+                "aria-label": a("dataTable.savedViewsOpenMenu"),
+                children: [
+                  /* @__PURE__ */ l(I, { children: [
+                    /* @__PURE__ */ t(O, { asChild: !0, children: /* @__PURE__ */ t(
+                      C,
+                      {
+                        color: "success",
+                        variant: "outline",
+                        className: "max-w-[min(100%,200px)] shrink font-['Manrope']",
+                        children: /* @__PURE__ */ t("span", { className: "truncate", children: P })
+                      }
+                    ) }),
+                    /* @__PURE__ */ t(_, { variant: "tertiary", side: "top", children: P })
+                  ] }),
+                  /* @__PURE__ */ t(
+                    "span",
+                    {
+                      className: T(
+                        "flex size-6 shrink-0 items-center justify-center rounded-md bg-white transition-transform duration-200",
+                        p && "rotate-180"
+                      ),
+                      "aria-hidden": !0,
+                      children: /* @__PURE__ */ t(le, { className: "size-3.5 text-content-charcoal" })
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              me,
+              {
+                align: "start",
+                className: "z-[110] w-[min(100vw-24px,280px)] p-0 shadow-[0_0_4px_0_rgba(0,0,0,0.12)]",
+                sideOffset: 8,
+                children: /* @__PURE__ */ l("div", { className: "flex flex-col py-2", children: [
+                  /* @__PURE__ */ l("div", { className: "flex items-start justify-between gap-2 px-3 pb-2", children: [
+                    /* @__PURE__ */ t("span", { className: "text-sm font-medium text-content-charcoal font-['Manrope']", children: a("dataTable.savedViewsTitle") }),
+                    /* @__PURE__ */ l("div", { className: "flex shrink-0 items-center gap-1 text-xs font-medium text-content-tertiary font-['Manrope']", children: [
+                      /* @__PURE__ */ t(w, { className: "size-3.5 text-badge-warning-ink" }),
+                      a("dataTable.savedViewsDefault")
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1.5 px-3 pb-2", children: [
+                    /* @__PURE__ */ t(
+                      "button",
+                      {
+                        type: "button",
+                        className: "border-none bg-transparent p-0",
+                        onClick: () => b("All"),
+                        children: /* @__PURE__ */ t(
+                          C,
+                          {
+                            color: u === "All" ? "primary" : "neutral",
+                            variant: "outline",
+                            size: "sm",
+                            className: "cursor-pointer font-['Manrope']",
+                            children: a("dataTable.savedViewsAll")
+                          }
+                        )
+                      }
+                    ),
+                    Q?.map((e) => /* @__PURE__ */ t(
+                      "button",
+                      {
+                        type: "button",
+                        className: "border-none bg-transparent p-0",
+                        onClick: () => b(e.value),
+                        children: /* @__PURE__ */ t(
+                          C,
+                          {
+                            color: u === e.value ? "primary" : "neutral",
+                            variant: "outline",
+                            size: "sm",
+                            className: "cursor-pointer font-['Manrope']",
+                            children: e.label
+                          }
+                        )
+                      },
+                      e.value
+                    ))
+                  ] }),
+                  /* @__PURE__ */ t("div", { className: "px-3 pb-2", children: /* @__PURE__ */ t(
+                    pe,
+                    {
+                      size: "sm",
+                      placeholder: a("dataTable.savedViewsSearchPlaceholder"),
+                      value: v,
+                      onChange: (e) => g(e.target.value),
+                      prefix: /* @__PURE__ */ t(
+                        ie,
+                        {
+                          className: "size-4 shrink-0 text-content-muted",
+                          "aria-hidden": !0
+                        }
+                      ),
+                      className: "border-none shadow-none my-2 rounded-none",
+                      "aria-label": a("dataTable.savedViewsSearchPlaceholder")
+                    }
+                  ) }),
+                  /* @__PURE__ */ t("div", { className: "min-h-[72px] px-1", children: D || (K ? /* @__PURE__ */ t("div", { className: "flex max-h-[160px] flex-col gap-2 overflow-y-auto px-2 py-1", children: [1, 2, 3, 4, 5].map((e) => /* @__PURE__ */ t(fe, { className: "h-9 w-full rounded-lg" }, e)) }) : j.length === 0 ? /* @__PURE__ */ t("div", { className: "flex min-h-[100px] flex-col items-center justify-center px-4 py-6 text-center", children: /* @__PURE__ */ t("span", { className: "text-sm leading-relaxed text-content-tertiary font-['Manrope']", children: a("dataTable.savedViewsEmptyList") }) }) : /* @__PURE__ */ t("div", { className: "flex max-h-[160px] flex-col overflow-y-auto", children: j.map((e) => {
+                    const c = y === e.id;
+                    return /* @__PURE__ */ l(
+                      "div",
+                      {
+                        role: "button",
+                        tabIndex: 0,
+                        className: T(
+                          "mb-1 flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-left text-sm font-medium font-['Manrope'] hover:bg-muted",
+                          c && "bg-badge-info-muted text-badge-info-foreground",
+                          !c && "text-foreground"
+                        ),
+                        onClick: () => N(e.id),
+                        onKeyDown: (n) => {
+                          (n.key === "Enter" || n.key === " ") && (n.preventDefault(), N(e.id));
+                        },
+                        children: [
+                          /* @__PURE__ */ l(I, { children: [
+                            /* @__PURE__ */ t(O, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: e.viewName }) }),
+                            /* @__PURE__ */ t(_, { variant: "tertiary", side: "right", children: e.viewName })
+                          ] }),
+                          /* @__PURE__ */ l("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+                            e.isEditable ? /* @__PURE__ */ t(
+                              o,
+                              {
+                                type: "button",
+                                variant: "ghost",
+                                size: "iconSm",
+                                className: "text-foreground hover:text-content-charcoal",
+                                "aria-label": a("dataTable.savedViewsEdit"),
+                                onClick: (n) => {
+                                  n.stopPropagation(), n.preventDefault(), d(!1), U?.(e, { activeView: r });
+                                },
+                                children: /* @__PURE__ */ t(se, { className: "size-3.5" })
+                              }
+                            ) : null,
+                            e.isDeletable ? /* @__PURE__ */ t(
+                              o,
+                              {
+                                type: "button",
+                                variant: "ghost",
+                                size: "iconSm",
+                                className: "text-foreground hover:text-destructive",
+                                "aria-label": a("dataTable.savedViewsDelete"),
+                                onClick: (n) => {
+                                  n.stopPropagation(), n.preventDefault(), d(!1), A(e);
+                                },
+                                children: /* @__PURE__ */ t(re, { className: "size-3.5" })
+                              }
+                            ) : null,
+                            e.hideDefaultStar ? null : e.isDefaultView ? /* @__PURE__ */ t(
+                              o,
+                              {
+                                type: "button",
+                                variant: "ghost",
+                                size: "iconSm",
+                                className: "text-yellow-500 hover:text-yellow-600",
+                                "aria-label": a(
+                                  "dataTable.savedViewsDefaultAction"
+                                ),
+                                onClick: (n) => {
+                                  n.stopPropagation(), n.preventDefault(), z?.(e, { activeView: r });
+                                },
+                                children: /* @__PURE__ */ t(w, { className: "size-3.5 fill-current" })
+                              }
+                            ) : /* @__PURE__ */ t(
+                              o,
+                              {
+                                type: "button",
+                                variant: "ghost",
+                                size: "iconSm",
+                                className: "text-yellow-500 hover:text-yellow-600",
+                                "aria-label": a(
+                                  "dataTable.savedViewsSetDefault"
+                                ),
+                                onClick: (n) => {
+                                  n.stopPropagation(), n.preventDefault(), z?.(e, { activeView: r });
+                                },
+                                children: /* @__PURE__ */ t(w, { className: "size-3.5" })
+                              }
+                            )
+                          ] })
+                        ]
+                      },
+                      e.id
+                    );
+                  }) })) }),
+                  /* @__PURE__ */ t(ue, { className: "my-1" }),
+                  /* @__PURE__ */ l("div", { className: "flex justify-end gap-2 px-3 pt-1", children: [
+                    /* @__PURE__ */ t(
+                      o,
+                      {
+                        type: "button",
+                        variant: "tertiary",
+                        size: "md",
+                        onClick: ee,
+                        children: a("dataTable.savedViewsCancel")
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      o,
+                      {
+                        type: "button",
+                        variant: "default",
+                        size: "md",
+                        disabled: R,
+                        onClick: $,
+                        children: a("dataTable.savedViewsApply")
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            )
+          ] }) }) : /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-content-tertiary", children: [
+            /* @__PURE__ */ t(oe, { className: "size-4 shrink-0", "aria-hidden": !0 }),
+            /* @__PURE__ */ t("span", { className: "text-sm font-medium font-['Manrope']", children: a("dataTable.savedViewsNoneYet") })
+          ] }),
+          /* @__PURE__ */ t(
+            o,
+            {
+              type: "button",
+              variant: "tertiary",
+              size: "sm",
+              className: "shrink-0 font-['Manrope']",
+              onClick: () => {
+                d(!1), G?.({ activeView: r });
+              },
+              children: a("dataTable.savedViewsSave")
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      he,
+      {
+        variant: "destructive",
+        open: h !== null,
+        onOpenChange: (e) => {
+          e || A(null);
+        },
+        title: a("dataTable.savedViewsDeleteConfirmTitle"),
+        description: h ? a("dataTable.savedViewsDeleteConfirmDescription", {
+          viewName: h.viewName
+        }) : void 0,
+        confirmLabel: a("dataTable.savedViewsDeleteConfirmButton"),
+        onConfirm: () => {
+          h && W?.(h, { activeView: r });
+        }
+      }
+    )
+  ] });
+};
+export {
+  Se as DataTableSavedViews
+};

package/dist/components/ui/data-table/data-table-view-options.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface DataTableViewOptionsProps {
+    enableTableSettings?: boolean;
+    enableContentDensity?: boolean;
+    trigger?: React.ReactNode;
+}
+export declare const DataTableViewOptions: ({ enableTableSettings, enableContentDensity, trigger, }: DataTableViewOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -5,3 +5,5 @@ export * from './data-table-context';
 export * from './data-table-format-options';
 export * from './data-table-sheet';
 export * from './data-table-view-menu';
+export * from './data-table-saved-views';
+export type { SavedTableViewItem, TableViewTypeOption, DataTableSavedViewsProps, DataTableSavedViewsActionContext, DataTableSavedViewsCancelContext, } from '../types/data-table-saved-views.types';

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

@@ -1,27 +1,29 @@
 import { DataTable as t, DataTableContent as T, DataTableToolbar as o } from "./data-table.js";
 import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as D, TABLE_VIEWPORT_SHELL_EXPANDED_CLASS as l } from "./data-table-constants.js";
 import { DataTableColumnList as n } from "./data-table-column-list.js";
-import { DataTableContext as E, useDataTable as S } from "./data-table-context.js";
-import { DataTableFormatOptions as m } from "./data-table-format-options.js";
-import { DataTableSheet as x, DataTableSheetContent as f, DataTableSheetHeader as u, DataTableSheetTrigger as C } from "./data-table-sheet.js";
-import { DataTableViewMenuContent as w, DataTableViewMenuDensity as A, DataTableViewMenuSettingsItem as H, DataTableViewMenuTrigger as L, DataTableViewMenuViewportExpand as M } from "./data-table-view-menu.js";
+import { DataTableContext as S, useDataTable as m } from "./data-table-context.js";
+import { DataTableFormatOptions as E } from "./data-table-format-options.js";
+import { DataTableSheet as x, DataTableSheetContent as f, DataTableSheetHeader as V, DataTableSheetTrigger as u } from "./data-table-sheet.js";
+import { DataTableViewMenuContent as C, DataTableViewMenuDensity as s, DataTableViewMenuSettingsItem as A, DataTableViewMenuTrigger as H, DataTableViewMenuViewportExpand as L } from "./data-table-view-menu.js";
+import { DataTableSavedViews as g } from "./data-table-saved-views.js";
 export {
   D as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
   t as DataTable,
   n as DataTableColumnList,
   T as DataTableContent,
-  E as DataTableContext,
-  m as DataTableFormatOptions,
+  S as DataTableContext,
+  E as DataTableFormatOptions,
+  g as DataTableSavedViews,
   x as DataTableSheet,
   f as DataTableSheetContent,
-  u as DataTableSheetHeader,
-  C as DataTableSheetTrigger,
+  V as DataTableSheetHeader,
+  u as DataTableSheetTrigger,
   o as DataTableToolbar,
-  w as DataTableViewMenuContent,
-  A as DataTableViewMenuDensity,
-  H as DataTableViewMenuSettingsItem,
-  L as DataTableViewMenuTrigger,
-  M as DataTableViewMenuViewportExpand,
+  C as DataTableViewMenuContent,
+  s as DataTableViewMenuDensity,
+  A as DataTableViewMenuSettingsItem,
+  H as DataTableViewMenuTrigger,
+  L as DataTableViewMenuViewportExpand,
   l as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
-  S as useDataTable
+  m as useDataTable
 };

package/dist/components/ui/sidebar.js

@@ -3,7 +3,7 @@ import * as n from "react";
 import * as k from "@radix-ui/react-collapsible";
 import { Slot as N } from "@radix-ui/react-slot";
 import { cva as H } from "class-variance-authority";
-import { ChevronRight as A, HamburgerClosed as L, HamburgerOpen as P } from "../../icons/index.js";
+import { ChevronRight as A, HamburgerOpen as L, HamburgerClosed as P } from "../../icons/index.js";
 import { cn as l } from "../../lib/utils.js";
 import { Button as j } from "./button.js";
 import { Input as W } from "./input.js";
@@ -227,7 +227,7 @@ const ne = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
     ref: e,
     "data-sidebar": "header",
     className: l(
-      "flex mt-4 mb-6 items-center px-3 transition-all duration-200 ease-linear",
+      "flex mt-3 mb-[34px] items-center px-3 transition-all duration-200 ease-linear",
       t
     ),
     ...r
@@ -240,7 +240,7 @@ const ie = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
     ref: e,
     "data-sidebar": "footer",
     className: l(
-      "flex shrink-0 flex-col gap-2 py-2 min-w-0 w-full overflow-x-hidden group-data-[state=collapsed]:px-0",
+      "flex shrink-0 flex-col gap-2 pt-2 min-w-0 w-full overflow-x-hidden group-data-[state=collapsed]:px-0",
       t
     ),
     ...r
@@ -252,7 +252,7 @@ const oe = n.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   {
     ref: e,
     "data-sidebar": "separator",
-    className: l("mx-2 w-auto bg-navigation-border", t),
+    className: l("w-auto bg-[#31416e]", t),
     ...r
   }
 ));
@@ -471,7 +471,7 @@ const D = n.forwardRef(
 );
 D.displayName = "SidebarMenuCollapsible";
 const pe = H(
-  "peer/menu-button flex w-full items-center gap-[22px] overflow-visible py-[14px] px-[22px] text-left text-[14px] outline-none ring-navigation-ring transition-[width,height,padding,background-color] hover:bg-navigation-item-active hover:text-navigation-on-hover focus-visible:ring-2 disabled:pointer-events-none disabled:text-navigation-muted group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:text-navigation-muted aria-disabled:opacity-50 hover:aria-disabled:bg-transparent data-[active=true]:bg-navigation-item-active data-[active=true]:font-medium data-[active=true]:text-navigation-on-hover cursor-pointer group-data-[state=collapsed]:!w-[var(--sidebar-width-icon)] group-data-[state=collapsed]:!h-12 group-data-[state=collapsed]:!p-0 group-data-[state=collapsed]:!pl-[22px] [&>span:last-child]:truncate [&>svg]:size-5 [&>img]:size-5 [&>svg]:shrink-0 [&>svg]:text-inherit group-data-[state=collapsed]:[&>span]:hidden group-data-[state=collapsed]:[&>svg:not(:first-of-type)]:hidden [&>[data-sidebar=menu-button-chevron]]:ml-auto [&>[data-sidebar=menu-button-chevron]]:size-4 [&>[data-sidebar=menu-button-chevron]]:transition-transform [&>[data-sidebar=menu-button-chevron]]:duration-200 [&>[data-sidebar=menu-button-chevron]]:rotate-90 data-[state=open]:[&>[data-sidebar=menu-button-chevron]]:rotate-[270deg] before:absolute before:left-0 before:top-0 before:w-1 before:bg-success before:rounded-r-[4px] before:transition-[height] before:duration-200 before:linear before:z-20 data-[active=false]:before:h-0 data-[active=true]:before:h-full",
+  "peer/menu-button flex w-full items-center gap-[22px] overflow-visible py-[14px] px-[20px] text-left text-[14px] outline-none ring-navigation-ring transition-[width,height,padding,background-color] hover:bg-navigation-item-active hover:text-navigation-on-hover focus-visible:ring-2 disabled:pointer-events-none disabled:text-navigation-muted group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:text-navigation-muted aria-disabled:opacity-50 hover:aria-disabled:bg-transparent data-[active=true]:bg-navigation-item-active data-[active=true]:font-medium data-[active=true]:text-navigation-on-hover cursor-pointer group-data-[state=collapsed]:!w-[var(--sidebar-width-icon)] group-data-[state=collapsed]:!h-12 group-data-[state=collapsed]:!p-0 group-data-[state=collapsed]:!pl-[20px] [&>span:last-child]:truncate [&>svg]:size-5 [&>img]:size-5 [&>svg]:shrink-0 [&>svg]:text-inherit group-data-[state=collapsed]:[&>span]:hidden group-data-[state=collapsed]:[&>svg:not(:first-of-type)]:hidden [&>[data-sidebar=menu-button-chevron]]:ml-auto [&>[data-sidebar=menu-button-chevron]]:size-4 [&>[data-sidebar=menu-button-chevron]]:transition-transform [&>[data-sidebar=menu-button-chevron]]:duration-200 [&>[data-sidebar=menu-button-chevron]]:rotate-90 data-[state=open]:[&>[data-sidebar=menu-button-chevron]]:rotate-[270deg] before:absolute before:left-0 before:top-0 before:w-1 before:bg-success before:rounded-r-[4px] before:transition-[height] before:duration-200 before:linear before:z-20 data-[active=false]:before:h-0 data-[active=true]:before:h-full",
   {
     variants: {
       variant: {

package/dist/components/ui/types/data-table-saved-views.types.d.ts

@@ -0,0 +1,71 @@
+import type * as React from "react";
+export interface SavedTableViewItem {
+    id: string;
+    viewName: string;
+    /** Used with view type badges (e.g. Personal / Global). */
+    viewType?: string;
+    isActive?: boolean;
+    isEditable?: boolean;
+    isDeletable?: boolean;
+    isDefaultView?: boolean;
+    /** When true, hide the default-view star control (legacy `notReqDefaultView`). */
+    hideDefaultStar?: boolean;
+}
+export interface TableViewTypeOption {
+    value: string;
+    label: string;
+}
+/** Passed to callbacks so hosts can correlate with the active badge view. */
+export interface DataTableSavedViewsActionContext {
+    /** View currently marked active in `views` (shown on the summary badge). */
+    activeView: SavedTableViewItem | null;
+}
+/** Passed to `onCancel` — includes pending row selection inside the menu. */
+export interface DataTableSavedViewsCancelContext extends DataTableSavedViewsActionContext {
+    /** Row highlighted for Apply before the user canceled. */
+    pendingView: SavedTableViewItem | null;
+}
+export interface DataTableSavedViewsProps {
+    /**
+     * When false, renders nothing (legacy `isSaveViewEnabled`).
+     * @default true
+     */
+    isSaveViewEnabled?: boolean;
+    /** Saved views to list in the menu. */
+    views: SavedTableViewItem[];
+    /**
+     * Summary label for the trigger badge when no active view is found in `views`.
+     * If omitted, uses the active view's `viewName` or i18n `notApplicable`.
+     */
+    activeViewSummary?: string;
+    /** Extra badge filters after "All" (legacy `saveViewCustomFilter.options`). */
+    viewTypeOptions?: TableViewTypeOption[];
+    /** Controlled menu open state. */
+    menuOpen?: boolean;
+    /** @default false */
+    defaultMenuOpen?: boolean;
+    onMenuOpenChange?: (open: boolean) => void;
+    /**
+     * Optional server-side search: receives debounced query; parent updates `views`.
+     * When provided, local client-side filtering by search text is skipped (see FilterSummary pattern).
+     */
+    onSearch?: (query: string) => void;
+    isLoadingViews?: boolean;
+    /** Replace the scrollable list body entirely (legacy `customRenderSaveViewContent`). */
+    customListContent?: React.ReactNode;
+    /** Disable the Apply button (typically when `customListContent` is used). */
+    disableApply?: boolean;
+    className?: string;
+    /** Create/save flow; `activeView` is the baseline view (badge) when opening save. */
+    onSaveViewClick?: (context: DataTableSavedViewsActionContext) => void;
+    /** Apply pending row; `selectedView` matches the highlighted row (may be null). */
+    onApply?: (selectedView: SavedTableViewItem | null, context: DataTableSavedViewsActionContext) => void;
+    /** User closed the menu without applying; includes pending selection. */
+    onCancel?: (context: DataTableSavedViewsCancelContext) => void;
+    onEditView?: (view: SavedTableViewItem, context: DataTableSavedViewsActionContext) => void;
+    /**
+     * Called after the user confirms delete in the destructive Prompt.
+     */
+    onDeleteView?: (view: SavedTableViewItem, context: DataTableSavedViewsActionContext) => void;
+    onSetDefaultView?: (view: SavedTableViewItem, context: DataTableSavedViewsActionContext) => void;
+}

package/dist/i18n/defaultMessages.d.ts

@@ -116,6 +116,25 @@ export interface DataTableMessages {
     numericK: string;
     numericM: string;
     numericB: string;
+    /** Saved table views (toolbar / settings sheet) */
+    savedViewsNotApplicable: string;
+    savedViewsOpenMenu: string;
+    savedViewsTitle: string;
+    savedViewsDefault: string;
+    savedViewsAll: string;
+    savedViewsSearchPlaceholder: string;
+    savedViewsEmptyList: string;
+    savedViewsCancel: string;
+    savedViewsApply: string;
+    savedViewsNoneYet: string;
+    savedViewsSave: string;
+    savedViewsEdit: string;
+    savedViewsDelete: string;
+    savedViewsDefaultAction: string;
+    savedViewsSetDefault: string;
+    savedViewsDeleteConfirmTitle: string;
+    savedViewsDeleteConfirmDescription: string;
+    savedViewsDeleteConfirmButton: string;
 }
 export interface AriaMessages {
     close: string;

package/dist/i18n/defaultMessages.js

@@ -68,7 +68,7 @@ const e = {
   unselectAll: "Unselect All",
   clear: "Clear",
   selectedCount: "Selected ({{count}})"
-}, r = {
+}, s = {
   searchPlaceholder: "Search...",
   apply: "Apply",
   reset: "Reset",
@@ -99,8 +99,26 @@ const e = {
   numericFull: "Full Number",
   numericK: "In K (Thousands)",
   numericM: "In M (Millions)",
-  numericB: "In B (Billions)"
-}, s = {
+  numericB: "In B (Billions)",
+  savedViewsNotApplicable: "Not applicable",
+  savedViewsOpenMenu: "Open saved views",
+  savedViewsTitle: "Saved views",
+  savedViewsDefault: "Default",
+  savedViewsAll: "All",
+  savedViewsSearchPlaceholder: "Search here...",
+  savedViewsEmptyList: "No saved views match your filters.",
+  savedViewsCancel: "Cancel",
+  savedViewsApply: "Apply",
+  savedViewsNoneYet: "No views saved yet",
+  savedViewsSave: "Save View",
+  savedViewsEdit: "Edit view",
+  savedViewsDelete: "Delete view",
+  savedViewsDefaultAction: "Default view",
+  savedViewsSetDefault: "Set as default view",
+  savedViewsDeleteConfirmTitle: "Delete saved view?",
+  savedViewsDeleteConfirmDescription: 'This will permanently delete "{{viewName}}". You cannot undo this action.',
+  savedViewsDeleteConfirmButton: "Delete"
+}, r = {
   close: "Close",
   breadcrumb: "breadcrumb",
   remove: "Remove",
@@ -129,23 +147,23 @@ const e = {
   deleteFilter: "Delete",
   setAsDefault: "Set as default",
   defaultFilter: "Default"
-}, u = {
+}, d = {
   filtersAppliedCount: "{{count}} filters applied",
   savedFiltersAvailableCount: "{{count}} Saved filters available",
   tabContainsErrors: "This tab contains errors",
   tabHasWarnings: "This tab has warnings",
   additionalInfoAvailable: "Additional information available"
-}, d = {
+}, u = {
   title: "Notifications",
   description: "Notifications"
 }, m = {
   scrollLeft: "Scroll left",
   scrollRight: "Scroll right"
-}, h = {
+}, f = {
   viewMore: "View More",
   viewLess: "View Less",
   logout: "Logout"
-}, f = {
+}, h = {
   stepOfTotal: "Step {{current}} of {{total}}"
 }, p = {
   title: "Advanced Filter",
@@ -191,24 +209,24 @@ const e = {
   clickForDetails: "Click for details",
   information: "Information",
   noInformationAvailable: "No information available for this column."
-}, g = {
+}, v = {
   calendar: e,
   datePicker: t,
   filter: a,
   select: o,
-  nestedList: r,
+  nestedList: s,
   dataTable: n,
-  aria: s,
+  aria: r,
   prompt: i,
   filterStrip: c,
-  filterPanel: u,
+  filterPanel: d,
   advancedFilter: p,
   gridHeader: S,
-  notificationPanel: d,
+  notificationPanel: u,
   horizontalScroller: m,
-  sidebar: h,
-  stepper: f
+  sidebar: f,
+  stepper: h
 };
 export {
-  g as defaultMessages
+  v as defaultMessages
 };