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

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

@@ -1,3 +1,5 @@
+export { ProductCardMetricsToggle, type ProductCardMetricsToggleProps, } from './product-card-metrics-toggle';
+export { ProductCardIrisInsightTrigger, type ProductCardIrisInsightTriggerProps, } from './product-card-iris-insight-trigger';
 export { ExpandableListItem, type ExpandableListItemProps, } from './expandable-list-item-preset';
 export { ExpandableListItemRoot, ExpandableListItemRow, ExpandableListItemCheckbox, ExpandableListItemTrigger, ExpandableListItemTitle, ExpandableListItemDescription, ExpandableListItemMedia, ExpandableListItemHeader, ExpandableListItemContent, ExpandableListItemFooter, type ExpandableListItemRootProps, type ExpandableListItemCheckboxProps, } from './expandable-list-item-parts';
 export { ExpandableListItemMetrics, type ExpandableListItemMetricsProps } from './expandable-list-item-metrics';

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

@@ -1,19 +1,23 @@
-import { ExpandableListItem as a } from "./expandable-list-item-preset.js";
-import { ExpandableListItemCheckbox as p, ExpandableListItemContent as x, ExpandableListItemDescription as m, ExpandableListItemFooter as n, ExpandableListItemHeader as o, ExpandableListItemMedia as s, ExpandableListItemRoot as b, ExpandableListItemRow as d, ExpandableListItemTitle as r, ExpandableListItemTrigger as l } from "./expandable-list-item-parts.js";
-import { ExpandableListItemMetrics as I } from "./expandable-list-item-metrics.js";
-import { ExpandableListItemAttributes as f } from "./expandable-list-item-attributes.js";
+import { ProductCardMetricsToggle as a } from "./product-card-metrics-toggle.js";
+import { ProductCardIrisInsightTrigger as i } from "./product-card-iris-insight-trigger.js";
+import { ExpandableListItem as p } from "./expandable-list-item-preset.js";
+import { ExpandableListItemCheckbox as d, ExpandableListItemContent as m, ExpandableListItemDescription as s, ExpandableListItemFooter as n, ExpandableListItemHeader as b, ExpandableListItemMedia as l, ExpandableListItemRoot as I, ExpandableListItemRow as E, ExpandableListItemTitle as L, ExpandableListItemTrigger as g } from "./expandable-list-item-parts.js";
+import { ExpandableListItemMetrics as f } from "./expandable-list-item-metrics.js";
+import { ExpandableListItemAttributes as T } from "./expandable-list-item-attributes.js";
 export {
-  a as ExpandableListItem,
-  f as ExpandableListItemAttributes,
-  p as ExpandableListItemCheckbox,
-  x as ExpandableListItemContent,
-  m as ExpandableListItemDescription,
+  p as ExpandableListItem,
+  T as ExpandableListItemAttributes,
+  d as ExpandableListItemCheckbox,
+  m as ExpandableListItemContent,
+  s as ExpandableListItemDescription,
   n as ExpandableListItemFooter,
-  o as ExpandableListItemHeader,
-  s as ExpandableListItemMedia,
-  I as ExpandableListItemMetrics,
-  b as ExpandableListItemRoot,
-  d as ExpandableListItemRow,
-  r as ExpandableListItemTitle,
-  l as ExpandableListItemTrigger
+  b as ExpandableListItemHeader,
+  l as ExpandableListItemMedia,
+  f as ExpandableListItemMetrics,
+  I as ExpandableListItemRoot,
+  E as ExpandableListItemRow,
+  L as ExpandableListItemTitle,
+  g as ExpandableListItemTrigger,
+  i as ProductCardIrisInsightTrigger,
+  a as ProductCardMetricsToggle
 };

package/dist/components/data/expandable-list-item/product-card-hero.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { ItemCatalogRecord } from './virtualized-responsive-grid.catalog';
+export type ProductCardHeroProps = {
+    item: ItemCatalogRecord;
+    selected: boolean;
+    thumbnail: ReactElement;
+    onFlip: () => void;
+    onSelect: () => void;
+};
+export declare function ProductCardHero(props: ProductCardHeroProps): ReactElement;
+export declare function ProductCardHeaderCheckbox(props: {
+    item: ItemCatalogRecord;
+    selected: boolean;
+    onSelect: () => void;
+}): ReactElement;

package/dist/components/data/expandable-list-item/product-card-iris-insight-trigger.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { ProductCardMetricsTogglePlacement } from './product-card-metrics-toggle';
+export type ProductCardIrisInsightTriggerProps = {
+    styleId: string;
+    title: string;
+    placement?: ProductCardMetricsTogglePlacement;
+};
+export declare function ProductCardIrisInsightTrigger(props: ProductCardIrisInsightTriggerProps): ReactElement;

package/dist/components/data/expandable-list-item/product-card-iris-insight-trigger.js

@@ -0,0 +1,41 @@
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useState as o, useRef as c, useEffect as l } from "react";
+import { IrisInsight as d } from "../../primitives/iris/iris.js";
+const m = 2200;
+function u(t) {
+  return t === "inline" ? "relative shrink-0" : "absolute right-2 top-2";
+}
+function I(t) {
+  const [s, n] = o("idle"), e = c(void 0);
+  l(
+    () => () => {
+      e.current && clearTimeout(e.current);
+    },
+    []
+  );
+  const r = u(t.placement);
+  return /* @__PURE__ */ i("div", { className: r, children: /* @__PURE__ */ i(
+    d,
+    {
+      status: s,
+      iconSize: "sm",
+      onTriggerClick: () => {
+        n("loading"), e.current = setTimeout(() => {
+          e.current = void 0, n("ready");
+        }, m);
+      },
+      onAskInChat: () => {
+      },
+      children: /* @__PURE__ */ a("p", { children: [
+        /* @__PURE__ */ i("span", { className: "font-bold", children: t.title }),
+        " is tracking",
+        " ",
+        /* @__PURE__ */ i("span", { className: "font-bold", children: t.styleId }),
+        " against plan this period."
+      ] })
+    }
+  ) });
+}
+export {
+  I as ProductCardIrisInsightTrigger
+};

package/dist/components/data/expandable-list-item/product-card-metrics-toggle.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement, ReactNode } from 'react';
+export type ProductCardMetricsTogglePlacement = "hero" | "inline";
+export type ProductCardMetricsToggleProps = {
+    isFlipped: boolean;
+    showMetricsLabel: string;
+    showPhotoLabel: string;
+    actionAriaLabel: string;
+    onShowMetrics: () => void;
+    onShowPhoto: () => void;
+    icon: ReactNode;
+    placement?: ProductCardMetricsTogglePlacement;
+};
+export declare function ProductCardMetricsToggle(props: ProductCardMetricsToggleProps): ReactElement;

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

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ButtonIconTooltip as l } from "../../feedback/tooltip/button-icon-tooltip.js";
+import { Button as r } from "../../primitives/button/button.js";
+function d(t) {
+  const o = t.isFlipped ? t.showPhotoLabel : t.showMetricsLabel, n = (i) => {
+    if (i.stopPropagation(), t.isFlipped) {
+      t.onShowPhoto();
+      return;
+    }
+    t.onShowMetrics();
+  }, a = t.placement === "inline" ? "relative z-20 shrink-0" : "absolute right-2 top-2 z-20";
+  return /* @__PURE__ */ e("div", { className: a, onClick: (i) => i.stopPropagation(), children: /* @__PURE__ */ e(l, { label: o, children: /* @__PURE__ */ e(
+    r,
+    {
+      type: "button",
+      size: "iconSm",
+      variant: "tertiary",
+      "aria-pressed": t.isFlipped,
+      "aria-label": t.actionAriaLabel,
+      onClick: n,
+      children: t.icon
+    }
+  ) }) });
+}
+export {
+  d as ProductCardMetricsToggle
+};

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export type SkuPickerView = "card" | "list";
+export type SkuPickerGridProps = {
+    /** Fold the toolbar and choices behind the title row. */
+    collapsible?: boolean;
+    /** Start folded. Ignored unless `collapsible` is set. */
+    defaultCollapsed?: boolean;
+    /** Title in the header. Default: SKU. */
+    title?: string;
+    required?: boolean;
+};
+export declare function SkuPickerChrome(props: {
+    view: SkuPickerView;
+    search: string;
+    sortAlphabetically: boolean;
+    selectedCount: number;
+    /** True when every choice Select All would touch is already selected. */
+    allSelected?: boolean;
+    previewCodes: string[];
+    onSearchChange: (value: string) => void;
+    onViewChange: (view: SkuPickerView) => void;
+    onToggleSort: () => void;
+    onSelectAll: () => void;
+    onClear: () => void;
+    children: ReactNode;
+    footer?: ReactNode;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    title?: string;
+    required?: boolean;
+    emptyLabel?: string;
+    searchLabel?: string;
+    /** Story picker keeps the back control. Form fields omit it. */
+    showBack?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,144 @@
+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 "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 { Button as i } from "../../primitives/button/button.js";
+import { cn as N } from "../../../lib/utils.js";
+const d = "picker";
+function S(e) {
+  return N(
+    e && "border-brand bg-accent text-brand hover:bg-accent hover:text-brand"
+  );
+}
+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: [
+    /* @__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
+    ] }) : null
+  ] });
+}
+function V(e) {
+  const a = 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: [
+      /* @__PURE__ */ t(
+        f,
+        {
+          size: "default",
+          className: "w-[200px]",
+          placeholder: "Search",
+          value: e.search,
+          onChange: (o) => e.onSearchChange(o.target.value),
+          prefix: /* @__PURE__ */ t(s, { className: "size-4 text-content-placeholder", "aria-hidden": !0 }),
+          "aria-label": e.searchLabel ?? "Search SKUs"
+        }
+      ),
+      /* @__PURE__ */ t(
+        r,
+        {
+          label: e.view === "card" ? "Switch to list view" : "Switch to card view",
+          children: /* @__PURE__ */ t(
+            i,
+            {
+              type: "button",
+              size: "icon",
+              variant: "tertiary",
+              "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, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t(r, { label: "Sort Alphabetically", children: /* @__PURE__ */ t(
+        i,
+        {
+          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, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ t(
+        i,
+        {
+          type: "button",
+          variant: "ghost",
+          className: "text-brand hover:text-brand",
+          onClick: e.onSelectAll,
+          disabled: e.allSelected === !0,
+          children: "Select All"
+        }
+      ),
+      /* @__PURE__ */ t(
+        i,
+        {
+          type: "button",
+          variant: "ghost",
+          className: "text-brand hover:text-brand",
+          onClick: e.onClear,
+          disabled: e.selectedCount === 0,
+          children: "Clear"
+        }
+      )
+    ] })
+  ] });
+  return e.collapsible ? /* @__PURE__ */ t(
+    x,
+    {
+      type: "single",
+      collapsible: !0,
+      defaultValue: e.defaultCollapsed ? void 0 : d,
+      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,
+          e.required ? /* @__PURE__ */ t("span", { className: "text-destructive", children: " *" }) : null
+        ] }) }),
+        /* @__PURE__ */ l(C, { className: "flex flex-col gap-3", children: [
+          c,
+          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(b, {}) }),
+        /* @__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
+        ] })
+      ] }),
+      n
+    ] }),
+    c,
+    e.children,
+    e.footer
+  ] });
+}
+export {
+  V as SkuPickerChrome
+};

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

@@ -1,2 +1,3 @@
-export declare function ClientSkuPickerGrid(): import("react/jsx-runtime").JSX.Element;
-export declare function ServerSkuPickerGrid(): import("react/jsx-runtime").JSX.Element;
+import { SkuPickerGridProps } from './sku-picker-chrome';
+export declare function ClientSkuPickerGrid(props?: SkuPickerGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ServerSkuPickerGrid(props?: SkuPickerGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/choice-card/choice-card.variants.js

@@ -1,5 +1,5 @@
 import { cva as e } from "class-variance-authority";
-const r = "border-stroke-subtle p-3 hover:border-brand", a = "border-brand border-l-[3px] border-l-brand bg-brand-tint py-3 pr-3 pl-2.5 shadow-elevation-header", s = e(
+const r = "border-stroke-subtle p-3 hover:border-stroke-field hover:bg-accent", a = "border-brand border-l-[3px] border-l-brand bg-brand-tint py-3 pr-3 pl-2.5 shadow-elevation-header hover:bg-brand-tint", o = e(
   [
     "group relative cursor-pointer select-none transition-[border-color,background-color,box-shadow] duration-150",
     "has-[[data-slot=choice-card-control]:focus-visible]:outline-none has-[[data-slot=choice-card-control]:focus-visible]:ring-1 has-[[data-slot=choice-card-control]:focus-visible]:ring-focus-ring"
@@ -7,7 +7,7 @@ const r = "border-stroke-subtle p-3 hover:border-brand", a = "border-brand borde
   {
     variants: {
       variant: {
-        default: "flex flex-row items-start justify-between gap-2 overflow-hidden rounded-xl border border-solid bg-canvas-elevated",
+        default: "flex flex-row items-center justify-between gap-2 overflow-hidden rounded-xl border border-solid bg-canvas-elevated",
         featured: "flex h-[116px] w-[215px] shrink-0 flex-col overflow-hidden rounded-2xl border border-solid bg-canvas-elevated p-0",
         compare: "flex flex-col items-stretch gap-4 overflow-visible rounded-xl border border-solid p-3"
       },
@@ -96,5 +96,5 @@ const r = "border-stroke-subtle p-3 hover:border-brand", a = "border-brand borde
   }
 );
 export {
-  s as choiceCardVariants
+  o as choiceCardVariants
 };

package/dist/components/primitives/iris/iris.d.ts

@@ -14,6 +14,7 @@ declare const IrisMenu: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     appearance?: import('./iris.types').IrisMenuAppearance;
     onAskInChat?: () => void;
     askInChatLabel?: string;
+    overflowTooltipContent?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const IrisInsight: React.ForwardRefExoticComponent<IrisInsightProps & React.RefAttributes<HTMLDivElement>>;
 export { IrisControlProvider, IrisControlRegion, } from './iris-control-region';