impact-nova 1.7.38 → 1.7.40

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

@@ -1,33 +1,39 @@
-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 i, DataTableSheetPortalContext as p, useDataTable as m, useDataTableSheetPortal as x } from "./data-table-context.js";
-import { DataTableFormatOptions as _ } from "./data-table-format-options.js";
-import { DataTableSheet as s, DataTableSheetContent as f, DataTableSheetHeader as h, DataTableSheetTrigger as C, useDataTableSheet as V, useDataTableSheetApi as w } from "./data-table-sheet.js";
-import { DataTableViewMenuContent as H, DataTableViewMenuDensity as L, DataTableViewMenuSettingsItem as M, DataTableViewMenuTrigger as P, DataTableViewMenuViewportExpand as g } from "./data-table-view-menu.js";
-import { DataTableSavedViews as O } from "./data-table-saved-views.js";
+import { DataTable as t, DataTableContent as o, DataTableToolbar as r } from "./data-table.js";
+import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as l, TABLE_VIEWPORT_SHELL_EXPANDED_CLASS as D } from "./data-table-constants.js";
+import { DataTableColumnList as b } from "./data-table-column-list.js";
+import { DataTableContext as S, DataTableSheetPortalContext as m, useDataTable as p, useDataTableSheetPortal as x } from "./data-table-context.js";
+import { DataTableFormatOptions as u } from "./data-table-format-options.js";
+import { DataTableSheet as _, DataTableSheetContent as h, DataTableSheetHeader as s, DataTableSheetTrigger as C, useDataTableSheet as w, useDataTableSheetApi as V } from "./data-table-sheet.js";
+import { DataTableViewMenuContent as L, DataTableViewMenuDensity as P, DataTableViewMenuSettingsItem as d, DataTableViewMenuTrigger as g, DataTableViewMenuViewportExpand as H } from "./data-table-view-menu.js";
+import { DataTableSavedViews as M } from "./data-table-saved-views.js";
+import { PinSwitch as c } from "./pin-switch.js";
+import { ColumnIndicator as N } from "./column-indicator.js";
+import { IndicatorLegend as v } from "./indicator-legend.js";
 export {
-  D as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
+  N as ColumnIndicator,
+  l as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
   t as DataTable,
-  n as DataTableColumnList,
-  T as DataTableContent,
-  i as DataTableContext,
-  _ as DataTableFormatOptions,
-  O as DataTableSavedViews,
-  s as DataTableSheet,
-  f as DataTableSheetContent,
-  h as DataTableSheetHeader,
-  p as DataTableSheetPortalContext,
+  b as DataTableColumnList,
+  o as DataTableContent,
+  S as DataTableContext,
+  u as DataTableFormatOptions,
+  M as DataTableSavedViews,
+  _ as DataTableSheet,
+  h as DataTableSheetContent,
+  s as DataTableSheetHeader,
+  m as DataTableSheetPortalContext,
   C as DataTableSheetTrigger,
-  o as DataTableToolbar,
-  H as DataTableViewMenuContent,
-  L as DataTableViewMenuDensity,
-  M as DataTableViewMenuSettingsItem,
-  P as DataTableViewMenuTrigger,
-  g as DataTableViewMenuViewportExpand,
-  l as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
-  m as useDataTable,
-  V as useDataTableSheet,
-  w as useDataTableSheetApi,
+  r as DataTableToolbar,
+  L as DataTableViewMenuContent,
+  P as DataTableViewMenuDensity,
+  d as DataTableViewMenuSettingsItem,
+  g as DataTableViewMenuTrigger,
+  H as DataTableViewMenuViewportExpand,
+  v as IndicatorLegend,
+  c as PinSwitch,
+  D as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
+  p as useDataTable,
+  w as useDataTableSheet,
+  V as useDataTableSheetApi,
   x as useDataTableSheetPortal
 };

package/dist/components/ui/data-table/indicator-legend.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Legend showing the meaning of sort/filter indicator colors.
+ * Displayed in the Frozen Columns section header.
+ *
+ * @example
+ * <IndicatorLegend />
+ */
+export declare const IndicatorLegend: React.FC;

package/dist/components/ui/data-table/indicator-legend.js

@@ -0,0 +1,20 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { ColumnIndicator as r } from "./column-indicator.js";
+import { useImpactNovaI18n as n } from "../../../i18n/ImpactNovaI18nContext.js";
+const i = () => {
+  const { t: a } = n();
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-3 text-[10px] text-content-muted", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e(r, { type: "sort" }),
+      /* @__PURE__ */ e("span", { children: a("dataTable.indicatorSort") })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e(r, { type: "filter" }),
+      /* @__PURE__ */ e("span", { children: a("dataTable.indicatorSearch") })
+    ] })
+  ] });
+};
+i.displayName = "IndicatorLegend";
+export {
+  i as IndicatorLegend
+};

package/dist/components/ui/data-table/pin-switch.d.ts

@@ -0,0 +1,30 @@
+export type PinPosition = 'left' | 'right' | null;
+interface PinSwitchProps {
+    /** Current pin position */
+    value: PinPosition;
+    /** Callback when pin position changes */
+    onChange: (value: PinPosition) => void;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Custom pin switch component for column pinning control.
+ * Displays L | [toggle switch with pin] | R where the pin slides left/right.
+ *
+ * Design specs:
+ * - Switch: 44px width, 24px height
+ * - Switch box (sliding part): 20px x 20px
+ * - Icon: 12px x 12px
+ * - Border radius: 4px
+ * - Uses shadow-elevation-pin-switch token
+ *
+ * @example
+ * <PinSwitch value="left" onChange={(pos) => console.log(pos)} />
+ */
+export declare const PinSwitch: {
+    ({ value, onChange, disabled, className }: PinSwitchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/ui/data-table/pin-switch.js

@@ -0,0 +1,75 @@
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { useCallback as s } from "react";
+import { cn as n } from "../../../lib/utils.js";
+import { Pin as w } from "../../../icons/index.js";
+import { useImpactNovaI18n as u } from "../../../i18n/ImpactNovaI18nContext.js";
+const d = ({
+  value: e,
+  onChange: r,
+  disabled: t = !1,
+  className: l
+}) => {
+  const { t: o } = u(), c = s(() => {
+    t || r(e === "left" ? "right" : "left");
+  }, [t, e, r]), f = s(
+    (a) => {
+      t || (a.key === " " || a.key === "Enter") && (a.preventDefault(), c());
+    },
+    [t, c]
+  ), p = () => o(e === "left" ? "dataTable.pinSwitchPinnedLeft" : e === "right" ? "dataTable.pinSwitchPinnedRight" : "dataTable.pinSwitchNotPinned"), h = e === "right";
+  return /* @__PURE__ */ m("div", { className: n("inline-flex items-center gap-2", l), children: [
+    /* @__PURE__ */ i(
+      "span",
+      {
+        className: n(
+          "text-[10px] font-medium leading-[14px] font-[Manrope]",
+          e === "left" ? "text-pinSwitch-label-active" : "text-pinSwitch-label-inactive"
+        ),
+        children: "L"
+      }
+    ),
+    /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": h,
+        "aria-label": p(),
+        "aria-disabled": t,
+        tabIndex: t ? -1 : 0,
+        onClick: c,
+        onKeyDown: f,
+        disabled: t,
+        className: n(
+          "relative flex w-[44px] h-6 items-center rounded-md border border-pinSwitch-track-border bg-pinSwitch-track-bg p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-canvas",
+          t && "opacity-50 cursor-not-allowed",
+          !t && "cursor-pointer hover:bg-pinSwitch-track-hover"
+        ),
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            className: n(
+              "absolute flex w-5 h-5 p-0.5 justify-center items-center rounded bg-white shadow-elevation-pin-switch transition-all duration-200 ease-in-out",
+              e === "right" ? "left-[calc(100%-22px)]" : "left-0.5"
+            ),
+            children: /* @__PURE__ */ i(w, { className: "w-3 h-3 text-content" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ i(
+      "span",
+      {
+        className: n(
+          "text-[10px] font-medium leading-[14px] font-[Manrope]",
+          e === "right" ? "text-pinSwitch-label-active" : "text-pinSwitch-label-inactive"
+        ),
+        children: "R"
+      }
+    )
+  ] });
+};
+d.displayName = "PinSwitch";
+export {
+  d as PinSwitch
+};

package/dist/components/ui/date-picker/date-picker.js

@@ -1,33 +1,34 @@
 import { jsxs as C, jsx as c } from "react/jsx-runtime";
 import * as o from "react";
-import { X as Y } from "lucide-react";
-import { CalendarMonth as Z } from "../../../icons/index.js";
+import { X as Z } from "lucide-react";
+import { CalendarMonth as _ } from "../../../icons/index.js";
 import { format as u, isValid as x, parse as I } from "date-fns";
-import { cn as _, padValidDateString as $, maskDate as F } from "../../../lib/utils.js";
-import { Input as ee } from "../input.js";
-import { Popover as te, PopoverTrigger as ne, PopoverContent as re } from "../popover.js";
-import { Calendar as oe } from "../calendar.js";
-import { Tooltip as M, TooltipTrigger as T, TooltipContent as A } from "../tooltip.js";
-import { getDateFnsLocale as ce } from "../../../i18n/getDateFnsLocale.js";
-import { useImpactNovaI18n as ie } from "../../../i18n/ImpactNovaI18nContext.js";
-const le = o.forwardRef(
+import { cn as $, padValidDateString as F, maskDate as ee } from "../../../lib/utils.js";
+import { Input as te } from "../input.js";
+import { Popover as ne, PopoverTrigger as re, PopoverContent as oe } from "../popover.js";
+import { Calendar as ce } from "../calendar.js";
+import { Tooltip as T, TooltipTrigger as A, TooltipContent as E } from "../tooltip.js";
+import { getDateFnsLocale as ie } from "../../../i18n/getDateFnsLocale.js";
+import { useImpactNovaI18n as le } from "../../../i18n/ImpactNovaI18nContext.js";
+const ae = o.forwardRef(
   ({
     value: t,
     onChange: f,
     format: n = "MM/dd/yyyy",
-    placeholder: E,
-    minDate: L,
-    maxDate: j,
-    startMonth: K,
+    placeholder: L,
+    minDate: j,
+    maxDate: K,
+    startMonth: B,
     endMonth: O,
     showFooter: d = !0,
-    disabled: R,
-    className: B,
-    ...H
-  }, X) => {
-    const { locale: b, t: m } = ie(), i = o.useMemo(() => ce(b), [b]), q = E ?? m("datePicker.selectDate"), g = o.useRef(null), y = o.useRef(null);
-    o.useImperativeHandle(X, () => g.current);
-    const [r, l] = o.useState(!1), D = o.useRef(!1), [N, a] = o.useState(t), [s, p] = o.useState(t ? u(t, n, { locale: i }) : ""), [z, w] = o.useState(t || /* @__PURE__ */ new Date());
+    weekStartsOn: R,
+    disabled: b,
+    className: H,
+    ...X
+  }, q) => {
+    const { locale: v, t: m } = le(), i = o.useMemo(() => ie(v), [v]), z = L ?? m("datePicker.selectDate"), g = o.useRef(null), y = o.useRef(null);
+    o.useImperativeHandle(q, () => g.current);
+    const [r, l] = o.useState(!1), D = o.useRef(!1), [N, a] = o.useState(t), [s, p] = o.useState(t ? u(t, n, { locale: i }) : ""), [G, w] = o.useState(t || /* @__PURE__ */ new Date());
     o.useEffect(() => {
       g.current && y.current !== null && (g.current.setSelectionRange(y.current, y.current), y.current = null);
     }, [s]), o.useEffect(() => {
@@ -35,74 +36,74 @@ const le = o.forwardRef(
     }, [t, n, r, i]), o.useEffect(() => {
       r && (a(t), w(t || /* @__PURE__ */ new Date()));
     }, [r, t]);
-    const G = (e) => {
+    const J = (e) => {
       a(e), e && p(u(e, n, { locale: i })), d || (f?.(e), l(!1));
-    }, J = (e) => {
+    }, Q = (e) => {
       f?.(e !== void 0 ? e : N), l(!1);
-    }, S = () => {
-      a(t), p(t ? u(t, n, { locale: i }) : ""), l(!1);
     }, V = () => {
+      a(t), p(t ? u(t, n, { locale: i }) : ""), l(!1);
+    }, M = () => {
       a(void 0), p(""), f?.(void 0), d || l(!1);
-    }, Q = (e) => {
-      const h = e.target.value, k = F(h, n, s);
+    }, U = (e) => {
+      const h = e.target.value, k = ee(h, n, s);
       if (p(k), k === "") {
         a(void 0), d || f?.(void 0);
         return;
       }
       const P = I(k, n, /* @__PURE__ */ new Date(), { locale: i });
       x(P) && k.length === n.length && (a(P), w(P), d || f?.(P));
-    }, U = () => {
+    }, W = () => {
       if (r) return;
-      const e = $(s, n), h = I(e, n, /* @__PURE__ */ new Date(), { locale: i });
+      const e = F(s, n), h = I(e, n, /* @__PURE__ */ new Date(), { locale: i });
       !x(h) || e.length !== n.length ? (p(t ? u(t, n, { locale: i }) : ""), a(t)) : (p(e), d || f?.(h));
-    }, v = (t ? u(t, n, { locale: i }) : "") !== s, W = s.length === n.length && !x(I(s, n, /* @__PURE__ */ new Date(), { locale: i }));
-    return /* @__PURE__ */ C(te, { open: r, onOpenChange: l, children: [
-      /* @__PURE__ */ c(ne, { asChild: !0, children: /* @__PURE__ */ c("div", { "data-component": "date-picker", "data-state": r ? "open" : "closed", "data-pending": v || void 0, children: /* @__PURE__ */ c(
-        ee,
+    }, S = (t ? u(t, n, { locale: i }) : "") !== s, Y = s.length === n.length && !x(I(s, n, /* @__PURE__ */ new Date(), { locale: i }));
+    return /* @__PURE__ */ C(ne, { open: r, onOpenChange: l, children: [
+      /* @__PURE__ */ c(re, { asChild: !0, children: /* @__PURE__ */ c("div", { "data-component": "date-picker", "data-state": r ? "open" : "closed", "data-pending": S || void 0, children: /* @__PURE__ */ c(
+        te,
         {
           ref: g,
           value: s,
-          onChange: Q,
-          onBlur: U,
+          onChange: U,
+          onBlur: W,
           onClick: (e) => r && e.stopPropagation(),
           onKeyDown: (e) => {
-            (e.key === "Enter" || e.key === "ArrowDown") && !r && (e.preventDefault(), D.current = !0, l(!0)), e.key === "Escape" && r && (e.preventDefault(), S());
+            (e.key === "Enter" || e.key === "ArrowDown") && !r && (e.preventDefault(), D.current = !0, l(!0)), e.key === "Escape" && r && (e.preventDefault(), V());
           },
-          placeholder: r ? n : q,
-          disabled: R,
+          placeholder: r ? n : z,
+          disabled: b,
           "data-form-control": "input",
-          className: _(
+          className: $(
             "cursor-pointer",
-            W ? "text-destructive" : v ? "text-content-muted" : "",
-            B
+            Y ? "text-destructive" : S ? "text-content-muted" : "",
+            H
           ),
           suffix: /* @__PURE__ */ C("div", { className: "flex items-center gap-1", children: [
-            t && !R && /* @__PURE__ */ C(M, { children: [
-              /* @__PURE__ */ c(T, { asChild: !0, children: /* @__PURE__ */ c(
-                Y,
+            t && !b && /* @__PURE__ */ C(T, { children: [
+              /* @__PURE__ */ c(A, { asChild: !0, children: /* @__PURE__ */ c(
+                Z,
                 {
                   className: "h-4 w-4 cursor-pointer hover:text-content",
                   onClick: (e) => {
-                    e.stopPropagation(), V();
+                    e.stopPropagation(), M();
                   }
                 }
               ) }),
-              /* @__PURE__ */ c(A, { variant: "tertiary", side: "top", children: m("calendar.clear") })
+              /* @__PURE__ */ c(E, { variant: "tertiary", side: "top", children: m("calendar.clear") })
             ] }),
-            /* @__PURE__ */ C(M, { children: [
-              /* @__PURE__ */ c(T, { asChild: !0, children: /* @__PURE__ */ c("button", { type: "button", tabIndex: 0, "aria-label": m("datePicker.selectDate"), onClick: (e) => {
+            /* @__PURE__ */ C(T, { children: [
+              /* @__PURE__ */ c(A, { asChild: !0, children: /* @__PURE__ */ c("button", { type: "button", tabIndex: 0, "aria-label": m("datePicker.selectDate"), onClick: (e) => {
                 e.stopPropagation(), l(!r);
               }, onKeyDown: (e) => {
                 (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), D.current = !0, l(!r));
-              }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ c(Z, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
-              /* @__PURE__ */ c(A, { variant: "tertiary", side: "top", children: m("datePicker.selectDate") })
+              }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ c(_, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+              /* @__PURE__ */ c(E, { variant: "tertiary", side: "top", children: m("datePicker.selectDate") })
             ] })
           ] }),
-          ...H
+          ...X
         }
       ) }) }),
       /* @__PURE__ */ c(
-        re,
+        oe,
         {
           className: "w-auto p-0",
           align: "start",
@@ -110,21 +111,22 @@ const le = o.forwardRef(
             D.current || e.preventDefault(), D.current = !1;
           },
           children: /* @__PURE__ */ c(
-            oe,
+            ce,
             {
               mode: "single",
               selected: N,
-              onSelect: G,
-              month: z,
+              onSelect: J,
+              month: G,
               onMonthChange: w,
-              disabled: { before: L, after: j },
-              startMonth: K,
+              disabled: { before: j, after: K },
+              startMonth: B,
               endMonth: O,
               showFooter: d,
-              onApply: J,
-              onCancel: S,
-              onClear: V,
-              captionLayout: "dropdown"
+              onApply: Q,
+              onCancel: V,
+              onClear: M,
+              captionLayout: "dropdown",
+              ...R !== void 0 ? { weekStartsOn: R } : {}
             }
           )
         }
@@ -132,7 +134,7 @@ const le = o.forwardRef(
     ] });
   }
 );
-le.displayName = "DatePicker";
+ae.displayName = "DatePicker";
 export {
-  le as DatePicker
+  ae as DatePicker
 };