impact-nova 1.7.2 → 1.7.3

package/dist/components/ui/expandable-sku/expandable-sku.js

@@ -0,0 +1,244 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import * as B from "react";
+import { ChevronDown as E } from "lucide-react";
+import { Accordion as P, AccordionItem as V, AccordionTrigger as _, AccordionContent as R } from "../accordion.js";
+import { Badge as I } from "../badge.js";
+import { Checkbox as z } from "../checkbox.js";
+import { FilterPopoverContent as D } from "../filter-strip/filter-tag-list.js";
+import { Popover as M, PopoverTrigger as j } from "../popover.js";
+import { Tag as K } from "../tag.js";
+import { Tooltip as L, TooltipTrigger as O, TooltipContent as U } from "../tooltip.js";
+import { cn as p } from "../../../lib/utils.js";
+function W({ section: a }) {
+  return a.columns.length === 0 ? null : /* @__PURE__ */ e("div", { className: "min-w-0 bg-transparent", children: /* @__PURE__ */ e("div", { className: "scrollbar-hide overflow-x-auto overscroll-x-contain [-webkit-overflow-scrolling:touch]", children: /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-nowrap divide-x divide-stroke-hairline px-4 py-4 sm:px-5", children: a.columns.map((l, s) => /* @__PURE__ */ t(
+    "div",
+    {
+      className: "flex min-w-[7.5rem] flex-1 basis-0 flex-col gap-1 overflow-hidden px-3 first:pl-0 last:pr-0 sm:min-w-[8rem] sm:px-4",
+      children: [
+        /* @__PURE__ */ e("p", { className: "truncate text-xs font-semibold leading-5 text-content-heading", title: l.label, children: l.label }),
+        /* @__PURE__ */ e("p", { className: "truncate text-sm font-semibold leading-5 text-content", title: String(l.value), children: l.value })
+      ]
+    },
+    `${a.id}-metric-${s}`
+  )) }) }) });
+}
+function X({ section: a }) {
+  const i = a.maxVisibleTags ?? 4, l = a.tags, s = l.slice(0, i), n = l.slice(i), o = n.length, d = a.formatOverflow?.(o) ?? (o > 0 ? `+${o}` : null);
+  return /* @__PURE__ */ t("div", { className: "px-4 py-4 pt-0 sm:px-5", children: [
+    /* @__PURE__ */ e("p", { className: "text-xs font-semibold leading-5 text-content-heading", children: a.title ?? "Attributes" }),
+    /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+      s.map((c, u) => /* @__PURE__ */ e(
+        I,
+        {
+          variant: "subtle",
+          color: "neutral",
+          size: "sm",
+          shape: "circle",
+          className: "max-w-full",
+          children: c
+        },
+        `${u}-${c}`
+      )),
+      n.length > 0 ? /* @__PURE__ */ t(M, { children: [
+        /* @__PURE__ */ t(L, { children: [
+          /* @__PURE__ */ e(O, { asChild: !0, children: /* @__PURE__ */ e(j, { asChild: !0, children: /* @__PURE__ */ e(
+            K,
+            {
+              variant: "secondary",
+              size: "md",
+              shape: "rounded",
+              className: "whitespace-nowrap border-0 bg-[#eceefd] px-2 font-['Manrope'] text-xs font-medium text-[#4259ee] hover:bg-[#dce1fc] h-6 cursor-pointer",
+              tabIndex: 0,
+              role: "button",
+              "aria-label": `${n.length} more attributes for ${a.title ?? "Attributes"}`,
+              children: d
+            }
+          ) }) }),
+          /* @__PURE__ */ t(U, { variant: "tertiary", side: "top", children: [
+            n.length,
+            " more"
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          D,
+          {
+            remainingValues: n,
+            onItemRemove: () => {
+            },
+            isRemovable: !1
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}
+function q({ section: a }) {
+  return /* @__PURE__ */ e("div", { className: "px-4 py-4 sm:px-5", children: a.content });
+}
+const h = "expandable-sku-row-item";
+function G(a) {
+  switch (a.type) {
+    case "metrics":
+      return /* @__PURE__ */ e(W, { section: a }, a.id);
+    case "attributes":
+      return /* @__PURE__ */ e(X, { section: a }, a.id);
+    case "custom":
+      return /* @__PURE__ */ e(q, { section: a }, a.id);
+    default:
+      return null;
+  }
+}
+const H = B.forwardRef(
+  ({
+    className: a,
+    sku: i,
+    subtitle: l,
+    badge: s,
+    selection: n,
+    selected: o,
+    expanded: d,
+    defaultExpanded: c = !1,
+    onExpandedChange: u,
+    disabled: x,
+    sections: f,
+    panelFooter: v,
+    expandAriaLabel: A = "Expand details",
+    collapseAriaLabel: T = "Collapse details",
+    ...b
+  }, g) => {
+    const w = d !== void 0, S = w ? d ? h : "" : void 0, m = !!(o || n?.checked), $ = f != null && f.length > 0 || v != null, N = (r) => /* @__PURE__ */ t(
+      "div",
+      {
+        className: p(
+          "min-w-0 flex-1",
+          r && "pointer-events-none opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: p(
+                  "text-sm font-semibold leading-6 text-content",
+                  m && "tracking-tight"
+                ),
+                children: i
+              }
+            ),
+            s
+          ] }),
+          l ? /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium leading-4 text-[#60697d]", children: l }) : null
+        ]
+      }
+    ), k = p(
+      "rounded-xl transition-[background-color,border-color,box-shadow] duration-200",
+      m ? "border-stroke-accent/40 bg-canvas-accent shadow-sm" : "border-stroke bg-canvas-elevated",
+      a
+    ), C = n ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: "pt-0.5",
+        onClick: (r) => r.stopPropagation(),
+        onKeyDown: (r) => r.stopPropagation(),
+        children: /* @__PURE__ */ e(
+          z,
+          {
+            checked: n.checked,
+            disabled: n.disabled,
+            onCheckedChange: (r) => {
+              const y = r === !0;
+              y !== n.checked && n.onCheckedChange(y);
+            },
+            "aria-label": n["aria-label"] ?? `Select ${i}`
+          }
+        )
+      }
+    ) : null;
+    return $ ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: g,
+        "data-component": "expandable-sku-row",
+        "data-expandable": "true",
+        "data-expanded": d ?? void 0,
+        "data-selected": o ? "" : void 0,
+        "data-selection-chrome": m ? "" : void 0,
+        className: k,
+        ...b,
+        children: /* @__PURE__ */ e(
+          P,
+          {
+            type: "single",
+            collapsible: !0,
+            disabled: x,
+            ...w ? { value: S } : {
+              defaultValue: c ? h : void 0
+            },
+            onValueChange: (r) => u?.(r === h),
+            children: /* @__PURE__ */ t(
+              V,
+              {
+                value: h,
+                className: "border-0 bg-transparent p-0 shadow-none rounded-none overflow-visible",
+                children: [
+                  /* @__PURE__ */ t("div", { className: "flex items-start gap-3 px-3 py-3", children: [
+                    C,
+                    /* @__PURE__ */ t(
+                      _,
+                      {
+                        variant: "plain",
+                        className: p(
+                          "min-w-0 gap-2 text-left items-center ",
+                          x && "pointer-events-none opacity-50"
+                        ),
+                        children: [
+                          N(!1),
+                          /* @__PURE__ */ e(
+                            "span",
+                            {
+                              className: "expandable-sku-row__chev mt-0.5 inline-flex shrink-0 text-content-muted transition-transform duration-200 group-data-[state=open]:rotate-180",
+                              "aria-hidden": !0,
+                              children: /* @__PURE__ */ e(E, { className: "size-4" })
+                            }
+                          ),
+                          /* @__PURE__ */ t("span", { className: "sr-only", children: [
+                            A,
+                            " / ",
+                            T
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(R, { className: "border-0 bg-transparent p-0 pb-[0.01rem]", children: /* @__PURE__ */ t("div", { className: "mx-2 mb-2 overflow-hidden  bg-[#f8f9fb] pt-2 rounded-lg", children: [
+                    f?.map((r) => G(r)),
+                    v ? /* @__PURE__ */ e("div", { className: "px-4 py-3 sm:px-5", children: v }) : null
+                  ] }) })
+                ]
+              }
+            )
+          }
+        )
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        ref: g,
+        "data-component": "expandable-sku-row",
+        "data-expandable": "false",
+        "data-selected": o ? "" : void 0,
+        "data-selection-chrome": m ? "" : void 0,
+        className: k,
+        ...b,
+        children: /* @__PURE__ */ t("div", { className: "flex items-start gap-3 px-3 py-3", children: [
+          C,
+          N(!!x)
+        ] })
+      }
+    );
+  }
+);
+H.displayName = "ExpandableSku";
+export {
+  H as ExpandableSku
+};

package/dist/components/ui/expandable-sku/expandable-sku.types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export type SkuRowMetricColumn = {
+    label: string;
+    value: string;
+};
+/** Horizontal metrics row (any column count). */
+export type SkuRowMetricsSection = {
+    id: string;
+    type: "metrics";
+    columns: ReadonlyArray<SkuRowMetricColumn>;
+};
+/** Tag pills with optional overflow summary (e.g. `+64`). */
+export type SkuRowAttributesSection = {
+    id: string;
+    type: "attributes";
+    title?: string;
+    tags: ReadonlyArray<string>;
+    /** Max tags before overflow pill (default 4). */
+    maxVisibleTags?: number;
+    /** Default: `(n) => \`+\${n}\``. */
+    formatOverflow?: (hiddenCount: number) => string;
+};
+/** Arbitrary block inside the expanded panel. */
+export type SkuRowCustomSection = {
+    id: string;
+    type: "custom";
+    content: ReactNode;
+};
+export type SkuRowSection = SkuRowMetricsSection | SkuRowAttributesSection | SkuRowCustomSection;
+export type SkuRowSelection = {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    "aria-label"?: string;
+};

package/dist/components/ui/expandable-sku/index.d.ts

@@ -0,0 +1,2 @@
+export { ExpandableSku, type ExpandableSkuProps, } from './expandable-sku';
+export type { SkuRowAttributesSection, SkuRowCustomSection, SkuRowMetricColumn, SkuRowMetricsSection, SkuRowSelection, SkuRowSection, } from './expandable-sku.types';

package/dist/components/ui/expandable-sku/index.js

@@ -0,0 +1,4 @@
+import { ExpandableSku as o } from "./expandable-sku.js";
+export {
+  o as ExpandableSku
+};

package/dist/components/ui/filter-strip/filter-tag-list.d.ts

@@ -5,5 +5,12 @@ interface FilterTagListProps {
     onOverflowClick?: (id: string) => void;
     onViewAll?: () => void;
 }
+declare const FilterPopoverContent: ({ remainingValues, viewAllTrigger, onViewAll, onItemRemove, isRemovable }: {
+    remainingValues: (string | number)[];
+    viewAllTrigger?: "expand" | "custom";
+    onViewAll?: () => void;
+    onItemRemove: (val: string | number) => void;
+    isRemovable?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 declare const FilterTagList: ({ filters, onFilterRemove: _onFilterRemove, onOverflowClick, onViewAll, }: FilterTagListProps) => import("react/jsx-runtime").JSX.Element;
-export { FilterTagList };
+export { FilterTagList, FilterPopoverContent };

package/dist/components/ui/filter-strip/filter-tag-list.js

@@ -155,5 +155,6 @@ const j = ({
   }
 ) });
 export {
+  j as FilterPopoverContent,
   M as FilterTagList
 };