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

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

@@ -1,13 +1,13 @@
-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 { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { Search as s, CardView as m, ListFilter as u, Sorting as h, Back as b } 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 { ButtonIconTooltip as c } 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 { Button as i } from "../../primitives/button/button.js";
 import { cn as N } from "../../../lib/utils.js";
-const d = "picker";
+const o = "picker";
 function S(e) {
   return N(
     e && "border-brand bg-accent text-brand hover:bg-accent hover:text-brand"
@@ -16,25 +16,25 @@ function S(e) {
 function y(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: [
+  const l = Math.max(0, e.selectedCount - e.previewCodes.length);
+  return /* @__PURE__ */ a("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: [
+    l > 0 ? /* @__PURE__ */ a(v, { variant: "subtle", color: "primary", size: "sm", shape: "square", children: [
       "+",
-      a
+      l
     ] }) : null
   ] });
 }
-function V(e) {
-  const a = e.title ?? "SKU", n = /* @__PURE__ */ t(
+function U(e) {
+  const l = e.title ?? "SKU", n = /* @__PURE__ */ t(
     y,
     {
       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: [
-    /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+  ), r = /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ t(
         f,
         {
@@ -42,13 +42,13 @@ function V(e) {
           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,26 +60,37 @@ 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: S(e.sortDirection !== "none"),
+              onClick: e.onToggleSort,
+              children: /* @__PURE__ */ t(
+                h,
+                {
+                  className: e.sortDirection === "desc" ? "rotate-180" : void 0
+                }
+              )
+            }
+          )
         }
-      ) })
+      )
     ] }),
-    /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ t(
         i,
         {
@@ -109,36 +120,36 @@ function V(e) {
     {
       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: [
-          a,
+      children: /* @__PURE__ */ a(g, { value: o, className: "border border-stroke-subtle", children: [
+        /* @__PURE__ */ t(w, { headingLevel: 3, rightActions: n, children: /* @__PURE__ */ a("span", { className: "truncate text-sm font-semibold leading-6 text-content-title", children: [
+          l,
           e.required ? /* @__PURE__ */ t("span", { className: "text-destructive", children: " *" }) : null
         ] }) }),
-        /* @__PURE__ */ l(C, { className: "flex flex-col gap-3", children: [
-          c,
+        /* @__PURE__ */ a(C, { className: "flex flex-col gap-3", children: [
+          r,
           e.children,
           e.footer
         ] })
       ] })
     }
-  ) : /* @__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: [
+  ) : /* @__PURE__ */ a("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__ */ a("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ a("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, {}) }),
-        /* @__PURE__ */ l("p", { className: "text-sm font-semibold leading-6 text-content-title", children: [
-          a,
+        /* @__PURE__ */ a("p", { className: "text-sm font-semibold leading-6 text-content-title", children: [
+          l,
           e.required ? /* @__PURE__ */ t("span", { className: "text-destructive", children: " *" }) : null
         ] })
       ] }),
       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;
@@ -8,7 +9,7 @@ export declare const SKU_CARD_COLUMN_GAP = 12;
 export declare const SKU_CARD_HEIGHT = 66;
 export declare const SKU_LIST_MINIMUM_WIDTH = 155;
 export declare const SKU_LIST_COLUMN_GAP = 80;
-export declare const SKU_LIST_ROW_HEIGHT = 24;
+export declare const SKU_LIST_ROW_HEIGHT = 36;
 export declare const SKU_LIST_ROW_GAP = 16;
 export declare const SKU_STRIP_OVERSCAN = 12;
 export declare const BY_ITEM_VISUAL_GRID_COLUMN_COUNT = 4;
@@ -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/data-display/chart/chart-scatter3d.d.ts

@@ -0,0 +1,39 @@
+import { default as Highcharts, Chart3dOptions } from 'highcharts';
+import { ChartProps } from './chart.types';
+type DragChart = {
+    container: object;
+    pointer: {
+        normalize: (event: unknown) => {
+            chartX: number;
+            chartY: number;
+        };
+    };
+    options: {
+        chart?: {
+            options3d?: {
+                alpha?: number;
+                beta?: number;
+            };
+        };
+    };
+    update: (options: {
+        chart: {
+            options3d: {
+                alpha: number;
+                beta: number;
+            };
+        };
+    }, redraw?: boolean, oneToOne?: boolean, animation?: boolean) => void;
+};
+type Unbind = () => void;
+type AddEvent = (element: object, type: string, handler: (event: unknown) => void) => Unbind | void;
+/** Drag-to-rotate for Highcharts 3D charts (bound from `chart.events.load`). */
+export declare function attach3dDragRotation(chart: DragChart, addEvent: AddEvent): void;
+export declare function enable3dDragRotation(this: DragChart): void;
+export declare function chartUsesScatter3d(props: Pick<ChartProps, 'is3D' | 'type' | 'series'>): boolean;
+type Chart3dFrame = NonNullable<Chart3dOptions['frame']>;
+export declare function mergeScatter3dChartLoadHandlers(userLoad: Highcharts.ChartLoadCallbackFunction | undefined): Highcharts.ChartLoadCallbackFunction;
+export declare function mergeScatter3dOptions3dFrame(base: Chart3dFrame | undefined, override: Chart3dFrame | undefined): Chart3dFrame | undefined;
+/** Design-system defaults for 3D scatter (axes, frame, markers, drag rotation). */
+export declare function getScatter3dHighchartsOptions(props: Pick<ChartProps, 'xAxisTitle' | 'yAxisTitle' | 'options'>): Highcharts.Options;
+export {};

package/dist/components/data-display/chart/chart-scatter3d.js

@@ -0,0 +1,180 @@
+import L from "highcharts";
+import { getInitializedHighcharts as v } from "./initializeHighcharts.js";
+const c = "var(--color-surface-muted)", g = 5;
+function n(t) {
+  return typeof t == "function" ? t : void 0;
+}
+function S(t, e) {
+  let i;
+  const o = (l) => {
+    const h = t.pointer.normalize(l), y = h.chartX, x = h.chartY, A = t.options.chart?.options3d?.alpha ?? 0, z = t.options.chart?.options3d?.beta ?? 0, r = [], p = (d) => {
+      const m = t.pointer.normalize(d);
+      t.update(
+        {
+          chart: {
+            options3d: {
+              alpha: A + (m.chartY - x) / g,
+              beta: z + (y - m.chartX) / g
+            }
+          }
+        },
+        void 0,
+        void 0,
+        !1
+      );
+    }, f = () => {
+      r.forEach((d) => d?.()), r.length = 0, i = void 0;
+    };
+    i = f, r.push(n(e(document, "mousemove", p))), r.push(n(e(document, "touchmove", p))), r.push(n(e(document, "mouseup", f))), r.push(n(e(document, "touchend", f)));
+  }, s = [
+    n(e(t.container, "mousedown", o)),
+    n(e(t.container, "touchstart", o))
+  ];
+  n(e(t, "destroy", () => {
+    i?.(), s.forEach((l) => l?.());
+  }));
+}
+function T() {
+  v();
+  const t = L.addEvent;
+  typeof t == "function" && S(this, t);
+}
+function F(t) {
+  return t.is3D ? t.type === "scatter3d" || t.series?.some((e) => "type" in e && e.type === "scatter3d") ? !0 : t.type === "scatter" : !1;
+}
+const k = {
+  color: "var(--color-foreground-tertiary)",
+  fontFamily: '"Manrope", sans-serif',
+  fontSize: "12px",
+  fontWeight: "500"
+}, u = {
+  color: "var(--color-foreground-tertiary)",
+  fontFamily: '"Manrope", sans-serif',
+  fontSize: "14px",
+  fontWeight: "500",
+  lineHeight: "20px"
+};
+function D() {
+  return {
+    type: "linear",
+    categories: void 0,
+    startOnTick: !0,
+    endOnTick: !0,
+    showFirstLabel: !0,
+    showLastLabel: !0,
+    gridLineWidth: 1,
+    gridLineColor: "var(--color-border)",
+    gridLineDashStyle: "Solid",
+    minorGridLineWidth: 0,
+    lineWidth: 1,
+    lineColor: "var(--color-border)",
+    tickWidth: 0,
+    tickLength: 0,
+    labels: {
+      style: k,
+      position3d: "offset",
+      skew3d: !1
+    }
+  };
+}
+function b(t, e) {
+  if (!e)
+    return t;
+  const i = ["bottom", "back", "left", "right", "top", "front"], o = { ...t, ...e };
+  for (const s of i)
+    e[s] && (o[s] = { ...t?.[s], ...e[s] });
+  return o;
+}
+function O(t) {
+  return function(...i) {
+    T.call(this), typeof t == "function" && t.apply(this, i);
+  };
+}
+function R(t, e) {
+  return b(t, e);
+}
+function W(t) {
+  const i = t.options?.chart?.options3d, o = Array.isArray(t.options?.zAxis) ? t.options?.zAxis[0] : t.options?.zAxis, s = {
+    size: 1,
+    bottom: { color: c, size: 1, visible: !0 },
+    back: { color: c, size: 1, visible: !0 },
+    left: { color: c, size: 1, visible: !0 },
+    right: { color: c, size: 1, visible: !1 },
+    top: { color: "transparent", size: 0, visible: !1 },
+    front: { color: "transparent", size: 0, visible: !1 }
+  }, a = D();
+  return {
+    chart: {
+      type: "scatter3d",
+      spacingLeft: 0,
+      spacingRight: 0,
+      marginLeft: 24,
+      marginRight: 8,
+      options3d: {
+        enabled: !0,
+        alpha: 16,
+        beta: 22,
+        depth: 320,
+        viewDistance: 18,
+        fitToPlot: !0,
+        ...i,
+        frame: b(s, i?.frame)
+      }
+    },
+    xAxis: {
+      ...a,
+      crosshair: !1,
+      title: t.xAxisTitle ? {
+        text: t.xAxisTitle,
+        style: u,
+        position3d: "offset",
+        skew3d: !1
+      } : void 0
+    },
+    yAxis: {
+      ...a,
+      title: t.yAxisTitle ? {
+        text: t.yAxisTitle,
+        style: u,
+        position3d: "offset",
+        skew3d: !1,
+        reserveSpace: !0,
+        margin: 18,
+        x: 0
+      } : void 0
+    },
+    zAxis: {
+      ...a,
+      showFirstLabel: !1,
+      labels: {
+        ...a.labels,
+        step: 5,
+        y: 14
+      },
+      title: {
+        text: o?.title?.text ?? "",
+        style: u,
+        position3d: "offset",
+        skew3d: !1
+      },
+      ...o
+    },
+    plotOptions: {
+      scatter3d: {
+        marker: {
+          radius: 5,
+          symbol: "circle",
+          lineWidth: 0
+        }
+      }
+    }
+  };
+}
+export {
+  S as attach3dDragRotation,
+  F as chartUsesScatter3d,
+  T as enable3dDragRotation,
+  W as getScatter3dHighchartsOptions,
+  O as mergeScatter3dChartLoadHandlers,
+  R as mergeScatter3dOptions3dFrame
+};