impact-nova 2.2.5 → 2.2.7

package/dist/components/layout/horizontal-scroller/use-horizontal-scroll-overflow.js

@@ -0,0 +1,40 @@
+import * as t from "react";
+function m({
+  scrollStep: r = 200,
+  contentDependency: i
+} = {}) {
+  const l = t.useRef(null), [a, f] = t.useState(!1), [u, h] = t.useState(!1), s = t.useCallback(() => {
+    const e = l.current;
+    e && (f(e.scrollLeft > 0), h(
+      Math.ceil(e.scrollLeft + e.clientWidth) < e.scrollWidth
+    ));
+  }, []);
+  t.useEffect(() => {
+    const e = l.current;
+    if (!e) return;
+    s();
+    const o = () => s();
+    e.addEventListener("scroll", o, { passive: !0 });
+    const c = new ResizeObserver(() => s());
+    c.observe(e);
+    const n = e.firstElementChild;
+    return n && c.observe(n), () => {
+      e.removeEventListener("scroll", o), c.disconnect();
+    };
+  }, [s, i]);
+  const v = t.useCallback(() => {
+    l.current?.scrollBy({ left: -r, behavior: "smooth" });
+  }, [r]), b = t.useCallback(() => {
+    l.current?.scrollBy({ left: r, behavior: "smooth" });
+  }, [r]);
+  return {
+    scrollRef: l,
+    canScrollLeft: a,
+    canScrollRight: u,
+    scrollLeft: v,
+    scrollRight: b
+  };
+}
+export {
+  m as useHorizontalScrollOverflow
+};

package/dist/components/primitives/stepper/stepper.js

@@ -1,71 +1,90 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import * as y from "react";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import * as k from "react";
 import { Checkmark as I } from "impact-nova-icons";
 import { createComponent as j } from "../../../lib/primitives/create-component.js";
-import { cn as a } from "../../../lib/utils.js";
-import { useImpactNovaI18n as k } from "../../../i18n/use-impact-nova-i18n.js";
-import { iconVariants as z, stepVariants as D, stepperVariants as V } from "./stepper.variants.js";
+import { cn as o } from "../../../lib/utils.js";
+import { OverflowTooltip as u } from "../../feedback/tooltip/overflow-tooltip.js";
+import { useImpactNovaI18n as z } from "../../../i18n/use-impact-nova-i18n.js";
+import { iconVariants as D, stepVariants as V, stepperVariants as A } from "./stepper.variants.js";
 const R = j(
   "Stepper",
-  ({ className: u, currentStep: x, steps: n, orientation: e = "horizontal", onStepClick: s, ...v }, b) => {
-    const { t: N } = k(), g = n.length;
-    return /* @__PURE__ */ t(
+  ({ className: v, currentStep: f, steps: n, orientation: r = "horizontal", onStepClick: s, ...b }, g) => {
+    const { t: w } = z(), y = n.length;
+    return /* @__PURE__ */ e(
       "div",
       {
-        ref: b,
-        className: a(V({ orientation: e }), u),
-        "data-orientation": e,
+        ref: g,
+        className: o(A({ orientation: r }), v),
+        "data-orientation": r,
         "data-component": "stepper",
         role: "list",
-        ...v,
-        children: n.map((d, o) => {
-          const c = typeof d == "string" ? { label: d } : d, l = o + 1, f = l === x, h = l < x, i = c.disabled, r = h ? "completed" : f ? "active" : "default", w = N("stepper.stepOfTotal", { current: l, total: g });
-          return /* @__PURE__ */ p(y.Fragment, { children: [
+        ...b,
+        children: n.map((d, i) => {
+          const t = typeof d == "string" ? { label: d } : d, l = i + 1, x = l === f, h = l < f, c = t.disabled, a = h ? "completed" : x ? "active" : "default", N = w("stepper.stepOfTotal", { current: l, total: y });
+          return /* @__PURE__ */ p(k.Fragment, { children: [
             /* @__PURE__ */ p(
               "div",
               {
                 role: "listitem",
-                onClick: () => !i && s?.(o),
-                "aria-label": w,
-                "aria-current": f ? "step" : void 0,
-                tabIndex: s && !i ? 0 : void 0,
-                onKeyDown: s && !i ? (m) => {
-                  (m.key === "Enter" || m.key === " ") && (m.preventDefault(), s(o));
+                onClick: () => !c && s?.(i),
+                "aria-label": N,
+                "aria-current": x ? "step" : void 0,
+                tabIndex: s && !c ? 0 : void 0,
+                onKeyDown: s && !c ? (m) => {
+                  (m.key === "Enter" || m.key === " ") && (m.preventDefault(), s(i));
                 } : void 0,
                 "data-step": l,
-                "data-status": r,
-                "data-disabled": i || void 0,
-                className: a(
-                  D({ orientation: e, status: r }),
-                  e === "horizontal" && "min-w-[140px]",
-                  i ? "opacity-80 cursor-not-allowed" : s ? "cursor-pointer" : "cursor-default"
+                "data-status": a,
+                "data-disabled": c || void 0,
+                className: o(
+                  V({ orientation: r, status: a }),
+                  r === "horizontal" && "min-w-[140px]",
+                  c ? "opacity-80 cursor-not-allowed" : s ? "cursor-pointer" : "cursor-default"
                 ),
                 children: [
-                  /* @__PURE__ */ t("div", { className: a(z({ status: r }), "mr-2"), children: h ? /* @__PURE__ */ t(I, { className: "h-5 w-5 stroke-[3px]" }) : /* @__PURE__ */ t("span", { children: c.icon || l }) }),
-                  /* @__PURE__ */ p("div", { className: "flex flex-col justify-center overflow-hidden", children: [
-                    /* @__PURE__ */ t("div", { className: a(
-                      "text-[14px] leading-tight font-medium truncate max-w-[200px]",
-                      r === "completed" ? "text-success" : "text-content",
-                      r === "active" && e === "vertical" ? "text-brand" : ""
-                    ), children: c.label }),
-                    c.description && /* @__PURE__ */ t("div", { className: a(
-                      "text-[12px] leading-tight mt-0.5 truncate max-w-[200px]",
-                      r === "completed" ? "text-success" : "text-secondary-foreground"
-                    ), children: c.description })
+                  /* @__PURE__ */ e("div", { className: o(D({ status: a }), "mr-2"), children: h ? /* @__PURE__ */ e(I, { className: "h-5 w-5 stroke-[3px]" }) : /* @__PURE__ */ e("span", { children: t.icon || l }) }),
+                  /* @__PURE__ */ p("div", { className: "flex flex-col justify-center overflow-hidden min-w-0", children: [
+                    /* @__PURE__ */ e(
+                      u,
+                      {
+                        triggerClassName: o(
+                          "text-[14px] leading-tight font-medium truncate max-w-[200px] block",
+                          a === "completed" ? "text-success" : "text-content",
+                          a === "active" && r === "vertical" ? "text-brand" : ""
+                        ),
+                        content: t.label,
+                        side: "top",
+                        variant: "tertiary",
+                        children: t.label
+                      }
+                    ),
+                    t.description && /* @__PURE__ */ e(
+                      u,
+                      {
+                        triggerClassName: o(
+                          "text-[12px] leading-tight mt-0.5 truncate max-w-[200px] block",
+                          a === "completed" ? "text-success" : "text-secondary-foreground"
+                        ),
+                        content: t.description,
+                        side: "top",
+                        variant: "tertiary",
+                        children: t.description
+                      }
+                    )
                   ] })
                 ]
               }
             ),
-            o < n.length - 1 && /* @__PURE__ */ t(
+            i < n.length - 1 && /* @__PURE__ */ e(
               "div",
               {
-                className: a(
+                className: o(
                   "border-t border-dashed border-stroke-hairline transition-colors",
-                  e === "horizontal" ? "flex-1 min-w-[24px] mx-1 self-center" : "h-6 w-0 border-l ml-[12px] my-[-4px]"
+                  r === "horizontal" ? "flex-1 min-w-[24px] mx-1 self-center" : "h-6 w-0 border-l ml-[12px] my-[-4px]"
                 )
               }
             )
-          ] }, o);
+          ] }, i);
         })
       }
     );

package/dist/components/primitives/tag/tag.variants.d.ts

@@ -1,5 +1,5 @@
 export declare const tagVariants: (props?: ({
-    variant?: "default" | "secondary" | "tertiary" | "outline" | "destructive" | "ghost" | "info" | "warning" | "success" | "choice" | null | undefined;
+    variant?: "default" | "secondary" | "tertiary" | "outline" | "success" | "warning" | "destructive" | "ghost" | "info" | "choice" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     shape?: "rounded" | "pill" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;