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

package/dist/components/data/expandable-list-item/sku-picker-chrome.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { AlphabeticalSortDirection } from '../../../lib/alphabetical-sort';
 export type SkuPickerView = "card" | "list";
 export type SkuPickerGridProps = {
     /** Fold the toolbar and choices behind the title row. */
@@ -12,7 +13,7 @@ export type SkuPickerGridProps = {
 export declare function SkuPickerChrome(props: {
     view: SkuPickerView;
     search: string;
-    sortAlphabetically: boolean;
+    sortDirection: AlphabeticalSortDirection;
     selectedCount: number;
     /** True when every choice Select All would touch is already selected. */
     allSelected?: boolean;

package/dist/components/data/expandable-list-item/sku-picker-chrome.js

@@ -1,54 +1,54 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { Search as s, CardView as m, ListFilter as h, TextFormat as u, Back as b } from "impact-nova-icons";
+import { Search as s, CardView as m, ListFilter as u, SortZa as h, SortAz as b, Back as v } from "impact-nova-icons";
 import "react";
-import { Badge as v } from "../../data-display/badge/badge.js";
-import { ButtonIconTooltip as r } from "../../feedback/tooltip/button-icon-tooltip.js";
-import { Input as f } from "../../forms/input/input.js";
-import { Accordion as x, AccordionItem as g, AccordionTrigger as w, AccordionContent as C } from "../../primitives/accordion/accordion.js";
+import { Badge as f } from "../../data-display/badge/badge.js";
+import { ButtonIconTooltip as c } from "../../feedback/tooltip/button-icon-tooltip.js";
+import { Input as x } from "../../forms/input/input.js";
+import { Accordion as g, AccordionItem as w, AccordionTrigger as S, AccordionContent as C } from "../../primitives/accordion/accordion.js";
 import { Button as i } from "../../primitives/button/button.js";
 import { cn as N } from "../../../lib/utils.js";
-const d = "picker";
-function S(e) {
+const o = "picker";
+function y(e) {
   return N(
     e && "border-brand bg-accent text-brand hover:bg-accent hover:text-brand"
   );
 }
-function y(e) {
+function k(e) {
   if (e.selectedCount === 0)
     return /* @__PURE__ */ t("p", { className: "text-xs font-medium text-content-muted", children: e.emptyLabel });
   const a = Math.max(0, e.selectedCount - e.previewCodes.length);
   return /* @__PURE__ */ l("div", { className: "flex min-w-0 items-center gap-1", children: [
     /* @__PURE__ */ t("p", { className: "truncate text-xs font-medium text-content-muted", children: e.previewCodes.join(", ") }),
-    a > 0 ? /* @__PURE__ */ l(v, { variant: "subtle", color: "primary", size: "sm", shape: "square", children: [
+    a > 0 ? /* @__PURE__ */ l(f, { variant: "subtle", color: "primary", size: "sm", shape: "square", children: [
       "+",
       a
     ] }) : null
   ] });
 }
-function V(e) {
+function U(e) {
   const a = e.title ?? "SKU", n = /* @__PURE__ */ t(
-    y,
+    k,
     {
       selectedCount: e.selectedCount,
       previewCodes: e.previewCodes,
       emptyLabel: e.emptyLabel ?? "No SKUs selected"
     }
-  ), c = /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
+  ), r = /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
     /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ t(
-        f,
+        x,
         {
           size: "default",
           className: "w-[200px]",
           placeholder: "Search",
           value: e.search,
-          onChange: (o) => e.onSearchChange(o.target.value),
+          onChange: (d) => e.onSearchChange(d.target.value),
           prefix: /* @__PURE__ */ t(s, { className: "size-4 text-content-placeholder", "aria-hidden": !0 }),
           "aria-label": e.searchLabel ?? "Search SKUs"
         }
       ),
       /* @__PURE__ */ t(
-        r,
+        c,
         {
           label: e.view === "card" ? "Switch to list view" : "Switch to card view",
           children: /* @__PURE__ */ t(
@@ -60,24 +60,30 @@ function V(e) {
               "aria-label": e.view === "card" ? "Switch to list view" : "Switch to card view",
               "aria-pressed": e.view === "list",
               onClick: () => e.onViewChange(e.view === "card" ? "list" : "card"),
-              children: e.view === "card" ? /* @__PURE__ */ t(m, {}) : /* @__PURE__ */ t(h, {})
+              children: e.view === "card" ? /* @__PURE__ */ t(m, {}) : /* @__PURE__ */ t(u, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ t(r, { label: "Sort Alphabetically", children: /* @__PURE__ */ t(
-        i,
+      /* @__PURE__ */ t(
+        c,
         {
-          type: "button",
-          size: "icon",
-          variant: "tertiary",
-          "aria-label": "Sort alphabetically",
-          "aria-pressed": e.sortAlphabetically,
-          className: S(e.sortAlphabetically),
-          onClick: e.onToggleSort,
-          children: /* @__PURE__ */ t(u, {})
+          label: e.sortDirection === "desc" ? "Sort Z to A" : "Sort A to Z",
+          children: /* @__PURE__ */ t(
+            i,
+            {
+              type: "button",
+              size: "icon",
+              variant: "tertiary",
+              "aria-label": e.sortDirection === "desc" ? "Sort Z to A" : "Sort A to Z",
+              "aria-pressed": e.sortDirection !== "none",
+              className: y(e.sortDirection !== "none"),
+              onClick: e.onToggleSort,
+              children: e.sortDirection === "desc" ? /* @__PURE__ */ t(h, {}) : /* @__PURE__ */ t(b, {})
+            }
+          )
         }
-      ) })
+      )
     ] }),
     /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ t(
@@ -105,19 +111,19 @@ function V(e) {
     ] })
   ] });
   return e.collapsible ? /* @__PURE__ */ t(
-    x,
+    g,
     {
       type: "single",
       collapsible: !0,
-      defaultValue: e.defaultCollapsed ? void 0 : d,
+      defaultValue: e.defaultCollapsed ? void 0 : o,
       className: "w-full",
-      children: /* @__PURE__ */ l(g, { value: d, className: "border border-stroke-subtle", children: [
-        /* @__PURE__ */ t(w, { headingLevel: 3, rightActions: n, children: /* @__PURE__ */ l("span", { className: "truncate text-sm font-semibold leading-6 text-content-title", children: [
+      children: /* @__PURE__ */ l(w, { value: o, className: "border border-stroke-subtle", children: [
+        /* @__PURE__ */ t(S, { headingLevel: 3, rightActions: n, children: /* @__PURE__ */ l("span", { className: "truncate text-sm font-semibold leading-6 text-content-title", children: [
           a,
           e.required ? /* @__PURE__ */ t("span", { className: "text-destructive", children: " *" }) : null
         ] }) }),
         /* @__PURE__ */ l(C, { className: "flex flex-col gap-3", children: [
-          c,
+          r,
           e.children,
           e.footer
         ] })
@@ -126,7 +132,7 @@ function V(e) {
   ) : /* @__PURE__ */ l("div", { className: "flex w-full flex-col gap-3 overflow-hidden rounded-lg border border-stroke-subtle bg-canvas-elevated px-4 py-2", children: [
     /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
-        e.showBack === !1 ? null : /* @__PURE__ */ t(i, { type: "button", size: "icon", variant: "ghost", "aria-label": "Back", children: /* @__PURE__ */ t(b, {}) }),
+        e.showBack === !1 ? null : /* @__PURE__ */ t(i, { type: "button", size: "icon", variant: "ghost", "aria-label": "Back", children: /* @__PURE__ */ t(v, {}) }),
         /* @__PURE__ */ l("p", { className: "text-sm font-semibold leading-6 text-content-title", children: [
           a,
           e.required ? /* @__PURE__ */ t("span", { className: "text-destructive", children: " *" }) : null
@@ -134,11 +140,11 @@ function V(e) {
       ] }),
       n
     ] }),
-    c,
+    r,
     e.children,
     e.footer
   ] });
 }
 export {
-  V as SkuPickerChrome
+  U as SkuPickerChrome
 };

package/dist/components/data/expandable-list-item/useServerSkuInfinitePages.d.ts

@@ -1,4 +1,5 @@
-export declare function useServerSkuInfinitePages(search: string, sortAlphabetically: boolean): {
+import { AlphabeticalSortDirection } from '../../../lib/alphabetical-sort';
+export declare function useServerSkuInfinitePages(search: string, sortDirection: AlphabeticalSortDirection): {
     debouncedSearch: string;
     query: import('@tanstack/react-query').UseInfiniteQueryResult<import('@tanstack/query-core').InfiniteData<import('./virtualized-responsive-grid.catalog').SkuServerPage, unknown>, Error>;
     loadedCatalogIndices: number[];

package/dist/components/data/expandable-list-item/virtualized-responsive-grid.catalog.d.ts

@@ -1,4 +1,5 @@
 import { ImageComponent } from 'impact-nova-icons';
+import { AlphabeticalSortDirection } from '../../../lib/alphabetical-sort';
 export declare const SKU_CATALOG_TOTAL = 50000;
 export declare const ITEM_CATALOG_TOTAL = 50000;
 export declare const SERVER_PAGE_SIZE = 200;
@@ -57,11 +58,11 @@ export type SkuServerPage = {
     nextStartIndex?: number;
 };
 /** Reuse the filtered catalog for later pages of the same search. Does not mutate cached arrays. */
-export declare function getCachedSkuMatchingIndices(searchQuery: string, sortAlphabetically: boolean): number[] | null;
+export declare function getCachedSkuMatchingIndices(searchQuery: string, sortDirection: AlphabeticalSortDirection): number[] | null;
 export declare function fetchSkuServerPage(options: {
     startIndex: number;
     searchQuery: string;
-    sortAlphabetically: boolean;
+    sortDirection: AlphabeticalSortDirection;
     pageSize?: number;
 }): Promise<SkuServerPage>;
 export declare function getItemCatalogRecord(catalogIndex: number): ItemCatalogRecord;
@@ -75,7 +76,7 @@ export declare function collectStripCatalogIndices(options: {
 export declare function filterAndSortCatalogIndices(options: {
     totalCount: number;
     searchQuery: string;
-    sortAlphabetically: boolean;
+    sortDirection: AlphabeticalSortDirection;
     getSearchText: (catalogIndex: number) => string;
     getSortKey: (catalogIndex: number) => string;
 }): number[] | null;

package/dist/components/feedback/tooltip/button-icon-tooltip.d.ts

@@ -1,9 +1,12 @@
 import { KeyBinding } from '../../primitives/kbd';
+import { TooltipContentProps } from './tooltip.types';
 import * as React from "react";
 export interface ButtonIconTooltipProps {
     children: React.ReactElement;
     label?: string;
     side?: "top" | "bottom" | "left" | "right";
+    align?: TooltipContentProps["align"];
+    variant?: TooltipContentProps["variant"];
     keybinding?: KeyBinding;
     disabled?: boolean;
 }
@@ -11,4 +14,4 @@ export interface ButtonIconTooltipProps {
  * Wraps icon buttons with tooltip + optional Kbd badge.
  * Use at app/feature layer — keeps Button free of feedback imports.
  */
-export declare function ButtonIconTooltip({ children, label, side, keybinding, disabled, }: ButtonIconTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonIconTooltip({ children, label, side, align, variant, keybinding, disabled, }: ButtonIconTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/feedback/tooltip/button-icon-tooltip.js

@@ -1,23 +1,25 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import "react";
-import { Kbd as s } from "../../primitives/kbd/kbd.js";
-import { Tooltip as m, TooltipTrigger as a, TooltipContent as l } from "./tooltip.js";
-function T({
+import { Kbd as c } from "../../primitives/kbd/kbd.js";
+import { Tooltip as l, TooltipTrigger as a, TooltipContent as f } from "./tooltip.js";
+function h({
   children: o,
   label: r,
-  side: e = "top",
-  keybinding: i,
-  disabled: p
+  side: n = "top",
+  align: p = "center",
+  variant: s = "tertiary",
+  keybinding: e,
+  disabled: m
 }) {
-  return r ? /* @__PURE__ */ n(m, { children: [
-    /* @__PURE__ */ t(a, { asChild: !0, children: p ? /* @__PURE__ */ t("span", { tabIndex: -1, className: "inline-block outline-none", children: o }) : o }),
-    /* @__PURE__ */ t(l, { variant: "tertiary", side: e, children: i ? /* @__PURE__ */ n("span", { className: "flex items-center gap-2", children: [
+  return r ? /* @__PURE__ */ i(l, { children: [
+    /* @__PURE__ */ t(a, { asChild: !0, children: m ? /* @__PURE__ */ t("span", { tabIndex: -1, className: "inline-block outline-none", children: o }) : o }),
+    /* @__PURE__ */ t(f, { variant: s, side: n, align: p, children: e ? /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
       r,
       " ",
-      /* @__PURE__ */ t(s, { keybinding: i, size: "sm" })
+      /* @__PURE__ */ t(c, { keybinding: e, size: "sm" })
     ] }) : r })
   ] }) : o;
 }
 export {
-  T as ButtonIconTooltip
+  h as ButtonIconTooltip
 };

package/dist/components/feedback/tooltip/use-overflow-tooltip.js

@@ -4,106 +4,114 @@ const H = 500;
 function N(o, s) {
   return o !== void 0 ? o : typeof s == "string" ? s : null;
 }
-function B(o, {
+function z(o, {
   content: s,
-  overflowMode: p = "ellipsis",
+  overflowMode: g = "ellipsis",
   alwaysShow: i = !1,
-  disabled: f = !1,
-  focusable: d = !1,
+  disabled: a = !1,
+  focusable: E = !1,
   contentDependency: h
 } = {}) {
-  const g = t.useRef(null), a = t.useRef(!1), u = t.useRef(
+  const m = t.useRef(null), T = t.useRef(!1), u = t.useRef(
     null
-  ), m = t.useRef(null), [D, r] = t.useState(!1), [I, n] = t.useState(!1), O = t.useRef(!1), v = t.useRef(!1), T = N(s, o), P = typeof T == "string" ? T.trim().length > 0 : T != null, l = () => {
+  ), O = t.useRef(null), [D, r] = t.useState(!1), [I, n] = t.useState(!1), v = t.useRef(!1), P = t.useRef(!1), p = N(s, o), C = typeof p == "string" ? p.trim().length > 0 : p != null, l = () => {
     u.current && (clearTimeout(u.current), u.current = null);
   }, c = () => {
-    const e = m.current;
-    e && (document.removeEventListener("scroll", e, !0), m.current = null);
+    const e = O.current;
+    e && (document.removeEventListener("scroll", e, !0), O.current = null);
   }, A = () => {
     l(), n(!1), r(!1);
   }, _ = () => {
     c();
     const e = () => {
-      a.current = !1, A(), c();
+      T.current = !1, A(), c();
     };
-    m.current = e, document.addEventListener("scroll", e, {
+    O.current = e, document.addEventListener("scroll", e, {
       capture: !0,
       passive: !0
     });
   };
   t.useEffect(() => {
     r(!1), n(!1), l(), c();
-  }, [h, s, o, i, f, p]), t.useEffect(
+  }, [h, s, o, i, a, g]), t.useEffect(
     () => () => {
       l(), c();
     },
     []
   );
   const k = t.useCallback((e) => {
-    g.current = e;
-  }, []), E = (e) => i || L(e, p), C = (e, R) => {
-    if (!(f || !P)) {
-      if (E(e)) {
+    m.current = e;
+  }, []), R = (e) => i || L(e, g), d = (e, f) => {
+    if (!(a || !C)) {
+      if (R(e)) {
         r(!0), n(!0);
         return;
       }
       r(!1), n(!1);
     }
   }, F = (e) => {
-    l(), u.current = setTimeout(() => {
-      u.current = null, a.current && C(e);
+    l();
+    const f = R(e);
+    u.current = setTimeout(() => {
+      if (u.current = null, !!T.current) {
+        if (f) {
+          r(!0), n(!0);
+          return;
+        }
+        d(e);
+      }
     }, H);
   };
   return {
     setTriggerRef: k,
     onTriggerPointerEnter: (e) => {
-      if (!(f || !P)) {
-        if (a.current = !0, _(), i) {
-          C(e.currentTarget);
+      if (!(a || !C)) {
+        if (T.current = !0, _(), i) {
+          d(e.currentTarget);
           return;
         }
         F(e.currentTarget);
       }
     },
     onTriggerPointerLeave: () => {
-      a.current = !1, l();
+      T.current = !1, l();
     },
-    onTriggerFocus: d ? (e) => {
-      C(e.currentTarget);
+    onTriggerFocus: E ? (e) => {
+      d(e.currentTarget);
     } : void 0,
     onContentPointerEnter: () => {
-      O.current = !0, n(!0);
+      v.current = !0, n(!0);
     },
     onContentPointerDown: () => {
-      v.current = !0, n(!0);
+      P.current = !0, n(!0);
     },
     onContentPointerLeave: () => {
-      O.current = !1;
+      v.current = !1;
     },
     onContentPointerUp: () => {
-      v.current = !1;
+      P.current = !1;
     },
-    triggerTabIndex: d ? 0 : void 0,
+    triggerTabIndex: E ? 0 : void 0,
     isTooltipArmed: D,
     isTooltipOpen: I,
-    tooltipContent: T,
+    tooltipContent: p,
     recheckOverflow: () => {
-      const e = g.current;
-      return !e || f || !P ? !1 : E(e) ? (r(!0), !0) : (r(!1), n(!1), !1);
+      const e = m.current;
+      return !e || a || !C ? !1 : R(e) ? (r(!0), !0) : (r(!1), n(!1), !1);
     },
     handleTooltipOpenChange: (e) => {
-      if (!e && (O.current || v.current) || e && !D && !i || (n(e), e))
+      if (!e && (v.current || P.current) || e && !D && !i || (n(e), e))
         return;
       c();
-      const R = g.current;
-      if (!R) {
+      const f = m.current;
+      if (!f) {
         r(!1);
         return;
       }
-      !i && !L(R, p) && r(!1);
+      !i && !L(f, g) && r(!1);
     }
   };
 }
 export {
-  B as useOverflowTooltip
+  z as useOverflowTooltip
 };