impact-nova 1.7.39 → 1.7.40

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

@@ -1,21 +1,21 @@
-import { jsx as i, jsxs as D } from "react/jsx-runtime";
-import { useState as l, useRef as O, useCallback as H, useMemo as b, useEffect as y, memo as E } from "react";
-import { AgGridWrapper as F } from "../ag-grid-react/index.js";
-import { cn as _ } from "../../../lib/utils.js";
-import { DataTableContext as N, DataTableSheetPortalContext as M, useDataTable as z, useDataTableSheetPortal as I } from "./data-table-context.js";
-import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as j } from "./data-table-constants.js";
+import { jsx as i, jsxs as E } from "react/jsx-runtime";
+import { useState as l, useRef as F, useCallback as _, useMemo as S, useEffect as A, memo as N } from "react";
+import { AgGridWrapper as M } from "../ag-grid-react/index.js";
+import { cn as y } from "../../../lib/utils.js";
+import { DataTableContext as z, DataTableSheetPortalContext as I, useDataTable as j, useDataTableSheetPortal as P } from "./data-table-context.js";
+import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as R } from "./data-table-constants.js";
 import { AG_GRID_VALUE_FORMATTERS as k } from "../ag-grid-react/value-formatters.js";
-const w = {
+const C = {
   default: 46,
   compact: 30,
   comfort: 52
-}, P = (o) => {
+}, G = (o) => {
   if (o)
     return o.map((e) => {
       if ("children" in e && e.children)
         return {
           ...e,
-          children: P(e.children)
+          children: G(e.children)
         };
       const t = e;
       return !t.valueFormatter && (t.type === "numericColumn" || t.type === "number") ? {
@@ -27,65 +27,65 @@ const w = {
   children: o,
   className: e
 }) => {
-  const [t, r] = l(null), [n, p] = l(null), [s, h] = l("medium"), [c, d] = l("full"), [u, f] = l("default"), [g, S] = l(!1), m = O(0), x = H((v) => {
-    m.current = Math.max(0, m.current + v), S(m.current > 0);
-  }, []), T = H((v) => {
-    r(v);
-  }, []), a = {
+  const [t, r] = l(null), [n, p] = l(null), [c, d] = l("medium"), [h, u] = l("full"), [s, f] = l("default"), [g, b] = l(!1), m = F(0), x = _((H) => {
+    m.current = Math.max(0, m.current + H), b(m.current > 0);
+  }, []), T = _((H) => {
+    r(H);
+  }, []), v = {
     small: "12px",
     medium: "14px",
     large: "16px"
-  }[s], R = `${w[u]}px`, C = b(() => ({
+  }[c], a = `${C[s]}px`, O = S(() => ({
     gridApi: t,
     registerApi: T,
     registerScopedSheetDepth: x,
-    fontSize: s,
-    setFontSize: h,
-    numericFormat: c,
-    setNumericFormat: d,
-    rowHeight: u,
+    fontSize: c,
+    setFontSize: d,
+    numericFormat: h,
+    setNumericFormat: u,
+    rowHeight: s,
     setRowHeight: f
   }), [
     t,
     T,
     x,
-    s,
-    h,
     c,
     d,
+    h,
     u,
+    s,
     f
-  ]), G = b(() => ({
+  ]), D = S(() => ({
     sheetTarget: n,
     setSheetTarget: p,
     scopedSheetOpen: g
   }), [n, p, g]);
-  return /* @__PURE__ */ i(N.Provider, { value: C, children: /* @__PURE__ */ i(M.Provider, { value: G, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(z.Provider, { value: O, children: /* @__PURE__ */ i(I.Provider, { value: D, children: /* @__PURE__ */ i(
     "div",
     {
       "data-component": "data-table",
-      className: _("flex flex-col w-full min-h-0 rounded-[inherit]", e),
+      className: y("flex flex-col w-full min-h-0 rounded-[inherit]", e),
       style: {
-        "--ag-font-size": a,
-        "--ag-row-height": R
+        "--ag-font-size": v,
+        "--ag-row-height": a
       },
       children: o
     }
   ) }) });
-}, A = {
+}, w = {
   full: "full_no",
   k: "thou",
   m: "mil",
   b: "bil",
   full_precision: "full_precision"
-}, L = E(function() {
-  const { setSheetTarget: e, scopedSheetOpen: t } = I();
+}, L = N(function() {
+  const { setSheetTarget: e, scopedSheetOpen: t } = P();
   return /* @__PURE__ */ i(
     "div",
     {
       ref: e,
       className: "absolute inset-0 pointer-events-none z-[39] flex overflow-x-hidden overflow-y-visible",
-      style: t ? { minHeight: j } : void 0
+      style: t ? { minHeight: R } : void 0
     }
   );
 });
@@ -95,49 +95,50 @@ function J(o) {
     rowHeight: t,
     gridApi: r,
     numericFormat: n
-  } = z(), {
-    className: p,
-    onGridReady: s,
+  } = j(), { scopedSheetOpen: p } = P(), {
+    className: c,
+    onGridReady: d,
     rowHeight: h,
-    context: c,
-    columnDefs: d,
-    maintainColumnOrder: u = !0,
-    ...f
-  } = o, g = w[t], S = h ?? g, m = b(() => P(d), [d]), x = b(() => ({
-    ...c,
-    formatType: A[n]
-  }), [c, n]);
-  y(() => {
+    context: u,
+    columnDefs: s,
+    maintainColumnOrder: f = !0,
+    ...g
+  } = o, b = C[t], m = h ?? b, x = S(() => G(s), [s]), T = S(() => ({
+    ...u,
+    formatType: w[n]
+  }), [u, n]);
+  A(() => {
     r?.resetRowHeights();
-  }, [t, r]), y(() => {
+  }, [t, r]), A(() => {
     if (r) {
       const a = r.getGridOption("context") || {};
       r.setGridOption("context", {
         ...a,
-        formatType: A[n]
+        formatType: w[n]
       }), r.refreshCells({ force: !0 });
     }
   }, [n, r]);
-  const T = H((a) => {
-    e(a.api), s?.(a);
-  }, [e, s]);
-  return /* @__PURE__ */ D(
+  const v = _((a) => {
+    e(a.api), d?.(a);
+  }, [e, d]);
+  return /* @__PURE__ */ E(
     "div",
     {
-      className: _(
+      className: y(
         "relative flex-1 min-h-0 w-full bg-canvas-elevated rounded-b-[inherit] grid-rounded-bottom",
-        p
+        c
       ),
+      style: p ? { minHeight: R } : void 0,
       children: [
         /* @__PURE__ */ i(
-          F,
+          M,
           {
-            ...f,
-            columnDefs: m,
-            rowHeight: S,
-            onGridReady: T,
-            context: x,
-            maintainColumnOrder: u
+            ...g,
+            columnDefs: x,
+            rowHeight: m,
+            onGridReady: v,
+            context: T,
+            maintainColumnOrder: f
           }
         ),
         /* @__PURE__ */ i(L, {})
@@ -148,7 +149,7 @@ function J(o) {
 const K = ({
   children: o,
   className: e
-}) => /* @__PURE__ */ i("div", { "data-component": "data-table-toolbar", className: _("flex items-center justify-between px-4 py-3 shrink-0 bg-canvas-elevated rounded-t-[inherit]", e), children: o });
+}) => /* @__PURE__ */ i("div", { "data-component": "data-table-toolbar", className: y("flex items-center justify-between px-4 py-3 shrink-0 bg-canvas-elevated rounded-t-[inherit]", e), children: o });
 export {
   q as DataTable,
   J as DataTableContent,

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

@@ -6,4 +6,7 @@ export * from './data-table-format-options';
 export * from './data-table-sheet';
 export * from './data-table-view-menu';
 export * from './data-table-saved-views';
+export * from './pin-switch';
+export * from './column-indicator';
+export * from './indicator-legend';
 export type { SavedTableViewItem, TableViewTypeOption, DataTableSavedViewsProps, DataTableSavedViewsActionContext, DataTableSavedViewsCancelContext, } from '../types/data-table-saved-views.types';

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
 };