impact-nova 2.1.0-alpha.9 → 2.2.0

package/dist/components/data/nested-list/components/SortableItem.js

@@ -1,166 +1,168 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import R, { useMemo as $ } from "react";
-import { useSortable as H } from "@dnd-kit/sortable";
-import { useDroppable as S } from "@dnd-kit/core";
-import { Checkbox as z } from "../../../forms/checkbox/checkbox.js";
-import { ChevronRight as P, Drag as D } from "impact-nova-icons";
-import { cn as c } from "../../../../lib/utils.js";
-import { useImpactNovaI18n as v } from "../../../../i18n/use-impact-nova-i18n.js";
-const E = (e, r) => {
-  const n = "flex items-start gap-1 py-[3px] pr-2 rounded transition-colors duration-150 min-w-0";
-  return e ? c(n, "opacity-40 bg-canvas-muted") : r ? c(n, "bg-feedback-error-surface border border-destructive animate-pulse") : c(n, "hover:bg-canvas-muted");
-}, M = ({ item: e, isAnyDragging: r, renderActions: n }) => {
-  const { t: a } = v(), s = !e.children || e.children.length === 0, {
-    setNodeRef: i,
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import R, { useMemo as j } from "react";
+import { useSortable as _ } from "@dnd-kit/sortable";
+import { useDroppable as H } from "@dnd-kit/core";
+import { Checkbox as D } from "../../../forms/checkbox/checkbox.js";
+import { ChevronRight as $, Drag as E } from "impact-nova-icons";
+import { cn as d } from "../../../../lib/utils.js";
+import { useImpactNovaI18n as k } from "../../../../i18n/use-impact-nova-i18n.js";
+const z = "flex shrink-0 items-center h-5 gap-0.5", A = "flex h-5 w-4 shrink-0 items-center justify-center", O = "flex h-5 w-5 shrink-0 cursor-grab active:cursor-grabbing items-center justify-center rounded-sm text-content-icon transition-colors hover:bg-canvas-muted hover:text-content", P = (e, r) => {
+  const s = "group flex items-start gap-2 py-1 pr-2 rounded transition-colors duration-150 min-w-0";
+  return e ? d(s, "opacity-40 bg-canvas-muted") : r ? d(s, "bg-feedback-error-surface border border-destructive animate-pulse") : d(s, "hover:bg-canvas-muted");
+}, G = ({ item: e, isAnyDragging: r, renderActions: s }) => {
+  const { t: n } = k(), a = !e.children || e.children.length === 0, {
+    setNodeRef: l,
     isOver: o
-  } = S({
+  } = H({
     id: `droppable-${e.id}`,
     data: { sectionId: e.id },
-    disabled: !s
+    disabled: !a
   });
-  return /* @__PURE__ */ l("div", { ref: s ? i : void 0, children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ i("div", { ref: a ? l : void 0, children: [
+    /* @__PURE__ */ i(
       "div",
       {
-        className: c(
+        className: d(
           "flex items-center justify-between px-2 py-0 text-xs font-[500] leading-4 text-navigation-muted select-none",
           e.id === "root-scrollable" ? "mt-2 pt-2 pb-1 border-t border-solid border-stroke-subtle" : "mt-1 pb-1",
-          o && r && s && "bg-canvas-tint rounded"
+          o && r && a && "bg-canvas-tint rounded"
         ),
         children: [
-          /* @__PURE__ */ l("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ i("div", { className: "flex items-center", children: [
             e.label,
-            o && r && s && /* @__PURE__ */ t("span", { className: "ml-2 text-brand text-[11px]", children: a("nestedList.dropHere") })
+            o && r && a && /* @__PURE__ */ t("span", { className: "ml-2 text-brand text-[11px]", children: n("nestedList.dropHere") })
           ] }),
-          n?.(e, { isLeaf: !1, level: 0 })
+          s?.(e, { isLeaf: !1, level: 0 })
         ]
       }
     ),
-    s && /* @__PURE__ */ t(
+    a && /* @__PURE__ */ t(
       "div",
       {
-        className: c(
+        className: d(
           "mx-2 my-1 rounded border-2 border-dashed min-h-[36px] flex items-center justify-center text-[11px] transition-colors",
           o && r ? "border-brand bg-canvas-tint text-brand" : "border-stroke-hairline text-content-empty"
         ),
-        children: a(o && r ? "nestedList.releaseToDrop" : "nestedList.dragHere")
+        children: n(o && r ? "nestedList.releaseToDrop" : "nestedList.dragHere")
       }
     )
   ] });
-}, O = ({
+}, M = ({
   item: e,
   level: r,
-  indentLevel: n,
-  isCollapsed: a,
-  onToggle: s,
-  onToggleCollapse: i,
+  indentLevel: s,
+  isCollapsed: n,
+  onToggle: a,
+  onToggleCollapse: l,
   isAnyDragging: o = !1,
-  enableDragDrop: g = !0,
-  enableCollapse: k = !0,
-  shouldBlink: N = !1,
-  isDragDisabled: u = !1,
-  renderLabelExtras: y,
-  renderActions: f
+  enableDragDrop: N = !0,
+  enableCollapse: g = !0,
+  shouldBlink: y = !1,
+  isDragDisabled: f = !1,
+  renderLabelExtras: m,
+  renderActions: x
 }) => {
-  const { t: h } = v(), m = e.category === "structure", p = e.children && e.children.length > 0, x = !p && e.category !== "structure", w = $(() => !e.children || e.children.length === 0 || e.children.every((b) => b.checked) ? !1 : e.children.some((b) => b.checked), [e.children]), {
-    attributes: C,
-    listeners: I,
-    setNodeRef: L,
-    isDragging: j
-  } = H({
+  const { t: h } = k(), v = e.category === "structure", p = e.children && e.children.length > 0, b = !p && e.category !== "structure", C = j(() => !e.children || e.children.length === 0 || e.children.every((u) => u.checked) ? !1 : e.children.some((u) => u.checked), [e.children]), {
+    attributes: L,
+    listeners: w,
+    setNodeRef: S,
+    isDragging: I
+  } = _({
     id: e.id,
     data: {
       level: r,
       hasChildren: p,
-      isExpanded: !a
+      isExpanded: !n
     },
-    disabled: m || e.disabled || u
+    disabled: v || e.disabled || f
   });
-  return m ? /* @__PURE__ */ t(M, { item: e, isAnyDragging: o, renderActions: f }) : /* @__PURE__ */ t(
+  return v ? /* @__PURE__ */ t(G, { item: e, isAnyDragging: o, renderActions: x }) : /* @__PURE__ */ t(
     "div",
     {
-      ref: L,
+      ref: S,
       className: "relative",
       "data-item-id": e.id,
       "data-level": r,
       "data-checked": e.checked,
       "data-disabled": e.disabled,
-      "data-collapsed": a,
-      children: /* @__PURE__ */ l(
+      "data-collapsed": n,
+      children: /* @__PURE__ */ i(
         "div",
         {
-          className: E(j, N),
+          className: P(I, y),
           style: {
-            paddingLeft: `${8 + n * 20}px`
+            paddingLeft: `${8 + s * 20}px`
           },
           children: [
-            /* @__PURE__ */ t("div", { className: "shrink-0 w-4 h-4 flex items-center justify-center", children: k && p && /* @__PURE__ */ t(
-              "button",
-              {
-                type: "button",
-                onClick: (d) => {
-                  d.stopPropagation(), i(e.id);
-                },
-                onMouseDown: (d) => d.stopPropagation(),
-                className: "flex h-4 w-4 items-center justify-center rounded-full p-0 hover:bg-canvas-muted transition-colors text-content-icon hover:text-brand",
-                "aria-label": h(a ? "nestedList.expand" : "nestedList.collapse"),
-                children: /* @__PURE__ */ t(
-                  P,
-                  {
-                    size: "16px",
-                    className: c("transition-transform", !a && "rotate-90")
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ t("div", { className: "shrink-0 mt-0.5", children: /* @__PURE__ */ t(
-              z,
-              {
-                id: `checkbox-${e.id}`,
-                checked: w ? "indeterminate" : e.checked,
-                onCheckedChange: () => s(e.id),
-                disabled: e.disabled,
-                className: "mr-0",
-                "aria-label": e.label
-              }
-            ) }),
-            g && !u && /* @__PURE__ */ t(
-              "div",
-              {
-                ...C,
-                ...I,
-                "aria-label": `${h("aria.dragHandle")}: ${e.label}`,
-                className: "shrink-0 mt-0.5 cursor-grab active:cursor-grabbing p-0 hover:bg-canvas-muted rounded flex items-center h-4",
-                style: {
-                  pointerEvents: "auto",
-                  position: "relative",
-                  zIndex: 30,
-                  touchAction: "none"
-                },
-                onPointerDown: (d) => {
-                  d.stopPropagation();
-                },
-                children: /* @__PURE__ */ t(D, { size: "14px", className: "text-content-icon" })
-              }
-            ),
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ i("div", { className: z, children: [
+              /* @__PURE__ */ t("div", { className: A, children: g && p && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: (c) => {
+                    c.stopPropagation(), l(e.id);
+                  },
+                  onMouseDown: (c) => c.stopPropagation(),
+                  className: "flex h-4 w-4 items-center justify-center rounded-full p-0 hover:bg-canvas-muted transition-colors text-content-icon hover:text-brand",
+                  "aria-label": h(n ? "nestedList.expand" : "nestedList.collapse"),
+                  children: /* @__PURE__ */ t(
+                    $,
+                    {
+                      size: "16px",
+                      className: d("transition-transform", !n && "rotate-90")
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ t("div", { className: "flex h-5 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ t(
+                D,
+                {
+                  id: `checkbox-${e.id}`,
+                  checked: C ? "indeterminate" : e.checked,
+                  onCheckedChange: () => a(e.id),
+                  disabled: e.disabled,
+                  className: "mr-0",
+                  "aria-label": e.label
+                }
+              ) }),
+              N && !f ? /* @__PURE__ */ t(
+                "div",
+                {
+                  ...L,
+                  ...w,
+                  "aria-label": `${h("aria.dragHandle")}: ${e.label}`,
+                  className: O,
+                  style: {
+                    pointerEvents: "auto",
+                    position: "relative",
+                    zIndex: 30,
+                    touchAction: "none"
+                  },
+                  onPointerDown: (c) => {
+                    c.stopPropagation();
+                  },
+                  children: /* @__PURE__ */ t(E, { size: "14px" })
+                }
+              ) : /* @__PURE__ */ t("div", { className: "w-5 shrink-0", "aria-hidden": !0 })
+            ] }),
+            /* @__PURE__ */ t(
               "label",
               {
                 htmlFor: `checkbox-${e.id}`,
-                className: "min-w-0 flex-1 flex flex-wrap items-center gap-x-1.5 gap-y-0 text-[13px] leading-5 text-content capitalize cursor-pointer select-none",
-                children: [
-                  /* @__PURE__ */ t("span", { className: "break-words", children: e.label }),
-                  y?.(e, { isLeaf: x, level: r })
-                ]
+                className: "min-w-0 flex-1 min-h-5 text-[13px] leading-5 text-content capitalize cursor-pointer select-none",
+                children: /* @__PURE__ */ t("span", { className: "break-words", children: e.label })
               }
             ),
-            /* @__PURE__ */ t("div", { className: "shrink-0 mt-0.5", children: f?.(e, { isLeaf: x, level: r }) })
+            m?.(e, { isLeaf: b, level: r }) ? /* @__PURE__ */ t("div", { className: "shrink-0 self-center flex items-center", children: m(e, { isLeaf: b, level: r }) }) : null,
+            /* @__PURE__ */ t("div", { className: "shrink-0 self-center flex items-center", children: x?.(e, { isLeaf: b, level: r }) })
           ]
         }
       )
     }
   );
-}, U = R.memo(O);
+}, W = R.memo(M);
 export {
-  U as SortableItem
+  O as DRAG_HANDLE_CLASS,
+  z as LEADING_RAIL_CLASS,
+  W as SortableItem
 };

package/dist/components/data-display/calendar/calendar-footer-emphasis.d.ts

@@ -0,0 +1,28 @@
+import { DateRange } from 'react-day-picker';
+import { MonthRange, MonthSelection, WeekRange, WeekSelection } from './calendar.types';
+export type FooterButtonEmphasis = "apply" | "cancel" | "neutral";
+type RangeLike = {
+    from?: unknown;
+    to?: unknown;
+};
+export type FooterFlashTarget = "apply" | "cancel";
+export declare function resolveRangeFooterFlashTarget(range: RangeLike | undefined): FooterFlashTarget | null;
+export declare function resolveFooterFlashTarget(params: {
+    pickerType: "date" | "week" | "month";
+    mode: "single" | "multiple" | "range";
+    weekMode: "single" | "multiple" | "range";
+    monthMode: "single" | "multiple" | "range";
+    pendingSelection?: Date | Date[] | DateRange;
+    pendingWeekSelection?: WeekSelection | WeekSelection[] | WeekRange;
+    pendingMonthSelection?: MonthSelection | MonthSelection[] | MonthRange;
+}): FooterFlashTarget | null;
+export declare function resolveFooterButtonEmphasis(params: {
+    pickerType: "date" | "week" | "month";
+    mode: "single" | "multiple" | "range";
+    weekMode: "single" | "multiple" | "range";
+    monthMode: "single" | "multiple" | "range";
+    pendingSelection?: Date | Date[] | DateRange;
+    pendingWeekSelection?: WeekSelection | WeekSelection[] | WeekRange;
+    pendingMonthSelection?: MonthSelection | MonthSelection[] | MonthRange;
+}): FooterButtonEmphasis;
+export {};

package/dist/components/data-display/calendar/calendar-footer-emphasis.js

@@ -0,0 +1,8 @@
+function r(o) {
+  if (!o) return null;
+  const l = o.from !== void 0 && o.from !== null, t = o.to !== void 0 && o.to !== null;
+  return l && t ? "apply" : l || t ? "cancel" : null;
+}
+export {
+  r as resolveRangeFooterFlashTarget
+};

package/dist/components/data-display/calendar/calendar-footer.d.ts

@@ -1,5 +1,6 @@
 import { DateRange } from 'react-day-picker';
 import { FiscalMonthPattern } from '../../../lib/fiscal-calendar';
+import { FooterFlashTarget } from './calendar-footer-emphasis';
 import { MonthRange, MonthSelection, WeekRange, WeekSelection } from './calendar.types';
 export interface CalendarFooterProps {
     pickerType: "date" | "week" | "month";
@@ -14,6 +15,8 @@ export interface CalendarFooterProps {
     pendingMonthSelection?: MonthSelection | MonthSelection[] | MonthRange;
     disableApply: boolean;
     isApplyDisabled: boolean;
+    footerFlashKey?: number;
+    footerFlashTarget?: FooterFlashTarget;
     labels: {
         clear: string;
         cancel: string;
@@ -26,4 +29,4 @@ export interface CalendarFooterProps {
     onCancel: () => void;
     onApply: () => void;
 }
-export declare function CalendarFooter({ pickerType, mode, weekMode, monthMode, calendarType, selectionMode, resolvedFiscalPattern, pendingSelection, pendingWeekSelection, pendingMonthSelection, disableApply, isApplyDisabled, labels, onClear, onCancel, onApply, }: CalendarFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalendarFooter({ pickerType, mode, weekMode, monthMode, calendarType, selectionMode, resolvedFiscalPattern, pendingSelection, pendingWeekSelection, pendingMonthSelection, disableApply, isApplyDisabled, footerFlashKey, footerFlashTarget, labels, onClear, onCancel, onApply, }: CalendarFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/calendar/calendar-footer.js

@@ -1,65 +1,87 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { cn as N } from "../../../lib/utils.js";
-import { Button as l } from "../../primitives/button/button.js";
-import { formatDateRangeFooterSummary as y, formatWeekFooterSummary as S, formatMonthFooterSummary as j } from "./calendar-footer-summary.js";
-function D({
-  pickerType: r,
-  mode: m,
-  weekMode: i,
-  monthMode: a,
-  calendarType: o,
-  selectionMode: s,
-  resolvedFiscalPattern: c,
-  pendingSelection: d,
-  pendingWeekSelection: x,
-  pendingMonthSelection: f,
-  disableApply: u,
-  isApplyDisabled: p,
+import "react";
+import { cn as s } from "../../../lib/utils.js";
+import { Button as m } from "../../primitives/button/button.js";
+import { formatDateRangeFooterSummary as j, formatWeekFooterSummary as A, formatMonthFooterSummary as F } from "./calendar-footer-summary.js";
+const p = "relative isolate overflow-hidden animate-flash-highlight motion-reduce:animate-none", _ = {
+  "--flash-overlay": "color-mix(in srgb, white 55%, transparent)"
+};
+function $({
+  pickerType: a,
+  mode: d,
+  weekMode: l,
+  monthMode: o,
+  calendarType: x,
+  selectionMode: h,
+  resolvedFiscalPattern: u,
+  pendingSelection: g,
+  pendingWeekSelection: v,
+  pendingMonthSelection: y,
+  disableApply: N,
+  isApplyDisabled: S,
+  footerFlashKey: i = 0,
+  footerFlashTarget: f,
   labels: e,
-  onClear: g,
-  onCancel: h,
-  onApply: v
+  onClear: L,
+  onCancel: w,
+  onApply: C
 }) {
+  const H = a === "month" && o !== "single" || d === "range" || l === "range" || l === "multiple", c = i > 0 && f === "cancel", r = i > 0 && f === "apply";
   return /* @__PURE__ */ n(
     "div",
     {
-      className: N(
+      className: s(
         "flex items-center gap-2 border-t p-3 pt-3",
-        r === "month" && a !== "single" || m === "range" || i === "range" || i === "multiple" ? "justify-between" : "justify-end"
+        H ? "justify-between" : "justify-end"
       ),
       children: [
-        m === "range" && r === "date" ? /* @__PURE__ */ n("div", { className: "flex flex-row items-center gap-1 text-xs font-medium leading-[18px] text-content-tertiary", children: [
+        d === "range" && a === "date" ? /* @__PURE__ */ n("div", { className: "flex flex-row items-center gap-1 text-xs font-medium leading-[18px] text-content-tertiary", children: [
           e.selected,
-          /* @__PURE__ */ t("span", { className: "font-semibold text-content", children: y(d) })
+          /* @__PURE__ */ t("span", { className: "font-semibold text-content", children: j(g) })
         ] }) : null,
-        r === "week" && (i === "range" || i === "multiple") ? /* @__PURE__ */ n("div", { className: "flex flex-row items-center gap-1 text-xs font-medium leading-[18px] text-content-tertiary", children: [
+        a === "week" && (l === "range" || l === "multiple") ? /* @__PURE__ */ n("div", { className: "flex flex-row items-center gap-1 text-xs font-medium leading-[18px] text-content-tertiary", children: [
           e.selected,
-          /* @__PURE__ */ t("span", { className: "font-semibold text-content", children: S({
-            selection: x,
-            calendarType: o,
-            selectionMode: s,
-            resolvedFiscalPattern: c
+          /* @__PURE__ */ t("span", { className: "font-semibold text-content", children: A({
+            selection: v,
+            calendarType: x,
+            selectionMode: h,
+            resolvedFiscalPattern: u
           }) })
         ] }) : null,
-        r === "month" && (a === "range" || a === "multiple") ? /* @__PURE__ */ n("div", { className: "flex flex-row items-center gap-1 text-xs font-medium leading-[18px] text-content-tertiary", children: [
+        a === "month" && (o === "range" || o === "multiple") ? /* @__PURE__ */ n("div", { className: "flex flex-row items-center gap-1 text-xs font-medium leading-[18px] text-content-tertiary", children: [
           e.selected,
-          /* @__PURE__ */ t("span", { className: "font-semibold text-content", children: j(f, {
+          /* @__PURE__ */ t("span", { className: "font-semibold text-content", children: F(y, {
             single: e.monthSingle,
             plural: e.monthPlural
           }) })
         ] }) : null,
         /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ t(l, { variant: "link", size: "sm", onClick: g, children: e.clear }),
-          /* @__PURE__ */ t(l, { variant: "outline", size: "sm", onClick: h, children: e.cancel }),
+          /* @__PURE__ */ t(m, { variant: "link", size: "sm", onClick: L, children: e.clear }),
+          /* @__PURE__ */ t(
+            m,
+            {
+              variant: "outline",
+              size: "sm",
+              "data-footer-flash": c ? "cancel" : void 0,
+              className: s(c && p),
+              onClick: w,
+              children: e.cancel
+            },
+            c ? `footer-cancel-${i}` : "footer-cancel"
+          ),
           /* @__PURE__ */ t(
-            l,
+            m,
             {
               variant: "default",
               size: "sm",
-              onClick: v,
-              disabled: u || p,
+              "data-footer-flash": r ? "apply" : void 0,
+              style: r ? _ : void 0,
+              className: s(r && p),
+              onClick: C,
+              disabled: N || S,
               children: e.apply
-            }
+            },
+            r ? `footer-apply-${i}` : "footer-apply"
           )
         ] })
       ]
@@ -67,5 +89,5 @@ function D({
   );
 }
 export {
-  D as CalendarFooter
+  $ as CalendarFooter
 };