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

package/dist/components/data/expandable-list-item/expandable-list-item-attributes.js

@@ -3,7 +3,8 @@ import { Badge as s } from "../../data-display/badge/badge.js";
 import { FilterPopoverContent as u } from "../../flows/filter-strip/filter-tag-list.js";
 import { Popover as b, PopoverTrigger as f } from "../../feedback/popover/popover.js";
 import { Tooltip as g, TooltipTrigger as v, TooltipContent as x } from "../../feedback/tooltip/tooltip.js";
-function w({
+import "react";
+function I({
   tags: o,
   title: l = "Attributes",
   maxVisibleTags: n = 4,
@@ -70,5 +71,5 @@ function w({
   );
 }
 export {
-  w as ExpandableListItemAttributes
+  I as ExpandableListItemAttributes
 };

package/dist/components/data/expandable-list-item/expandable-list-item-metrics.js

@@ -1,8 +1,9 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { ScrollOverflowAffordance as o } from "../../layout/horizontal-scroller/scroll-overflow-affordance.js";
+import "react";
 import { OverflowTooltip as r } from "../../feedback/tooltip/overflow-tooltip.js";
 const m = 128;
-function x({
+function f({
   columns: i,
   sectionId: l = "metrics"
 }) {
@@ -50,5 +51,5 @@ function x({
   );
 }
 export {
-  x as ExpandableListItemMetrics
+  f as ExpandableListItemMetrics
 };

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

@@ -1,42 +1,42 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { Search as s, CardView as m, ListFilter as u, SortZa as h, SortAz as b, Back as v } 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 f } from "../../data-display/badge/badge.js";
+import { Badge as v } 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 { 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 o = "picker";
-function y(e) {
+function S(e) {
   return N(
     e && "border-brand bg-accent text-brand hover:bg-accent hover:text-brand"
   );
 }
-function k(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(f, { 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 U(e) {
-  const a = e.title ?? "SKU", n = /* @__PURE__ */ t(
-    k,
+  const l = e.title ?? "SKU", n = /* @__PURE__ */ t(
+    y,
     {
       selectedCount: e.selectedCount,
       previewCodes: e.previewCodes,
       emptyLabel: e.emptyLabel ?? "No SKUs selected"
     }
-  ), r = /* @__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(
-        x,
+        f,
         {
           size: "default",
           className: "w-[200px]",
@@ -77,15 +77,20 @@ function U(e) {
               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"),
+              className: S(e.sortDirection !== "none"),
               onClick: e.onToggleSort,
-              children: e.sortDirection === "desc" ? /* @__PURE__ */ t(h, {}) : /* @__PURE__ */ t(b, {})
+              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,
         {
@@ -111,30 +116,30 @@ function U(e) {
     ] })
   ] });
   return e.collapsible ? /* @__PURE__ */ t(
-    g,
+    x,
     {
       type: "single",
       collapsible: !0,
       defaultValue: e.defaultCollapsed ? void 0 : o,
       className: "w-full",
-      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,
+      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: [
+        /* @__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: [
-        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,
+  ) : /* @__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__ */ a("p", { className: "text-sm font-semibold leading-6 text-content-title", children: [
+          l,
           e.required ? /* @__PURE__ */ t("span", { className: "text-destructive", children: " *" }) : null
         ] })
       ] }),

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

@@ -9,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;

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