@konstructio/ui 0.1.2-alpha.98 → 0.1.3

package/dist/components/Badge/Badge.js

@@ -1,65 +1,66 @@
-import { t as u } from "../../dist-CMPkuWNy.js";
-import { t as c } from "../../utils-COaoD3PI.js";
-import { LoaderIcon as g } from "../../assets/icons/components/Loader.js";
-import { t as w } from "../../x-DBIZFfaM.js";
-import { badgeVariants as x, buttonDismissVariants as V } from "./Badge.variants.js";
-import { useCallback as D, useEffect as j, useRef as E, useState as L } from "react";
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
-var $ = ({ className: b, dismissible: f = !1, isSelectable: h = !0, label: r, leftIcon: i, loading: n = !1, rightIcon: o, size: l, variant: m, onClick: e, onDismiss: d }) => {
-  const a = E(null), [v, N] = L("visible"), y = D((t) => {
-    t.stopPropagation(), d?.(), N("hidden");
-  }, [d]);
-  return j(() => {
-    const t = new AbortController();
-    return a.current?.addEventListener("animationend", () => {
-      a.current?.style.setProperty("display", "none"), a.current?.remove();
+import { t as x } from "../../x-C8O1IsaM.js";
+import { LoaderIcon as D } from "../../assets/icons/components/Loader.js";
+import { t as c } from "../../utils-DnIJruo0.js";
+import { badgeVariants as V, buttonDismissVariants as j } from "./Badge.variants.js";
+import { t as p } from "../../dist-CK8FUUUn.js";
+import { useEffect as E, useRef as L, useState as P } from "react";
+import { jsx as s, jsxs as f } from "react/jsx-runtime";
+var q = ({ className: b, dismissible: h = !1, isSelectable: g = !0, label: i, leftIcon: n, loading: o = !1, rightIcon: l, size: m, variant: d, onClick: e, onDismiss: v }) => {
+  const u = L(null), [r, N] = P("visible"), y = (t) => {
+    t.stopPropagation(), v?.(), N("hidden");
+  };
+  return E(() => {
+    if (r !== "hidden") return;
+    const t = new AbortController(), a = u.current;
+    return a?.addEventListener("animationend", (w) => {
+      w.target === a && (a.style.setProperty("display", "none"), a.remove());
     }, { signal: t.signal }), () => t.abort();
-  }, []), /* @__PURE__ */ p("span", {
-    ref: a,
-    className: c(x({
-      variant: m,
-      size: l,
+  }, [r]), /* @__PURE__ */ f("span", {
+    ref: u,
+    className: c(V({
+      variant: d,
+      size: m,
       className: b
     }), {
-      "select-none": !h,
+      "select-none": !g,
       "cursor-pointer": e
     }),
     role: e ? "button" : void 0,
     onClick: e,
     tabIndex: e ? 0 : void 0,
-    "aria-label": e ? `${r} badge` : void 0,
-    "aria-busy": n,
+    "aria-label": e ? `${i} badge` : void 0,
+    "aria-busy": o,
     "aria-live": "polite",
-    "data-state": v,
+    "data-state": r,
     children: [
-      n && /* @__PURE__ */ s(g, {
+      o && /* @__PURE__ */ s(D, {
         size: 12,
         className: "animate-spin animate-duration-time-2"
       }),
-      i ? /* @__PURE__ */ s(u, {
+      n ? /* @__PURE__ */ s(p, {
         className: "h-3 w-3",
-        children: i
+        children: n
       }) : null,
-      r,
-      f ? /* @__PURE__ */ p("button", {
+      i,
+      h ? /* @__PURE__ */ f("button", {
         type: "button",
-        className: c(V({
-          size: l,
-          variant: m
+        className: c(j({
+          size: m,
+          variant: d
         })),
         onClick: y,
         "aria-label": "Dismiss",
-        children: [/* @__PURE__ */ s(w, { className: "h-full w-full" }), /* @__PURE__ */ s("span", {
+        children: [/* @__PURE__ */ s(x, { className: "h-full w-full" }), /* @__PURE__ */ s("span", {
           className: "sr-only",
           children: "Dismiss"
         })]
-      }) : o ? /* @__PURE__ */ s(u, {
+      }) : l ? /* @__PURE__ */ s(p, {
         className: "h-3 w-3",
-        children: o
+        children: l
       }) : null
     ]
   });
 };
 export {
-  $ as Badge
+  q as Badge
 };

package/dist/components/Badge/Badge.variants.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../dist-Bcn6lMQe.js";
+import { t as e } from "../../dist-B9GE4SXf.js";
 var a = e([
   "flex",
   "items-center",

package/dist/components/BadgeGroup/BadgeGroup.js

@@ -0,0 +1,62 @@
+import { t as c } from "../../utils-DnIJruo0.js";
+import { Badge as f } from "../Badge/Badge.js";
+import { Tooltip as w } from "../Tooltip/Tooltip.js";
+import { useVisibleBadgeCount as _ } from "./hooks/use-visible-badge-count/use-visible-badge-count.js";
+import { useRef as v } from "react";
+import { Fragment as T, jsx as l, jsxs as u } from "react/jsx-runtime";
+var k = 8, A = 16, B = 4, E = (a, t) => {
+  const e = [];
+  for (let r = 0; r < a.length; r += t) e.push(a.slice(r, r + t));
+  return e;
+}, G = ({ badgeClassName: a, className: t, items: e, itemsPerTooltipLine: r = B, maxVisible: b, maxWidth: i, overflowLabel: g = (s) => `Show ${s} more`, renderOverflow: N, size: d, variant: p }) => {
+  const s = v(null), h = v(null), x = _({
+    containerRef: s,
+    gapPx: k,
+    horizontalPaddingPx: A,
+    items: e,
+    maxWidth: i,
+    probeRef: h
+  });
+  if (e.length === 0) return null;
+  const m = Math.max(1, Math.min(x, b ?? e.length)), I = e.slice(0, m), o = e.slice(m);
+  return /* @__PURE__ */ u("div", {
+    ref: s,
+    className: c("relative min-w-0", t),
+    style: i !== void 0 ? { maxWidth: i } : void 0,
+    children: [/* @__PURE__ */ l("span", {
+      ref: h,
+      "aria-hidden": "true",
+      className: "invisible absolute text-xs leading-4"
+    }), /* @__PURE__ */ u("div", {
+      className: "flex items-center gap-2 overflow-hidden",
+      children: [I.map((n) => /* @__PURE__ */ l(f, {
+        label: n.label,
+        leftIcon: n.leftIcon,
+        size: d,
+        variant: n.variant ?? p,
+        className: c("shrink-0 whitespace-nowrap", a)
+      }, n.id)), o.length > 0 ? /* @__PURE__ */ u(T, { children: [/* @__PURE__ */ l("span", {
+        className: "sr-only",
+        children: e.map((n) => n.label).join(", ")
+      }), /* @__PURE__ */ l(w, {
+        className: "max-w-80 text-center",
+        content: N?.(o) ?? E(o, r).map((n) => /* @__PURE__ */ l("div", { children: n.map((P) => P.label).join(", ") }, n[0].id)),
+        children: /* @__PURE__ */ l("button", {
+          type: "button",
+          "aria-label": g(o.length),
+          className: "shrink-0 cursor-pointer rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aurora-500",
+          children: /* @__PURE__ */ l(f, {
+            label: `+${o.length}`,
+            size: d,
+            variant: p,
+            className: c("shrink-0 whitespace-nowrap", a)
+          })
+        })
+      })] }) : null]
+    })]
+  });
+};
+G.displayName = "KonstructBadgeGroup";
+export {
+  G as BadgeGroup
+};

package/dist/components/BadgeGroup/hooks/index.js

@@ -0,0 +1,4 @@
+import { useVisibleBadgeCount as o } from "./use-visible-badge-count/use-visible-badge-count.js";
+export {
+  o as useVisibleBadgeCount
+};

package/dist/components/BadgeGroup/hooks/use-visible-badge-count/use-visible-badge-count.js

@@ -0,0 +1,50 @@
+import { useLayoutEffect as p, useState as E } from "react";
+var d = null, T = () => (d || (d = document.createElement("canvas")?.getContext("2d")), d), V = (t) => !t.fontSize || !t.fontFamily ? "" : `${t.fontStyle} ${t.fontWeight} ${t.fontSize} ${t.fontFamily}`, x = ({ containerRef: t, gapPx: r, horizontalPaddingPx: f, items: e, maxWidth: o, probeRef: h }) => {
+  const [$, u] = E(e.length);
+  return p(() => {
+    const v = h.current, i = t.current, c = T();
+    if (o === void 0 || !v || !i || !c || e.length === 0) {
+      u(e.length);
+      return;
+    }
+    const l = () => {
+      const C = V(getComputedStyle(v));
+      if (!C) {
+        u(e.length);
+        return;
+      }
+      c.font = C;
+      const m = Math.min(i.offsetWidth || o, o), w = e.map((n) => c.measureText(n.label).width + f), F = c.measureText(`+${e.length}`).width + f;
+      if (w.reduce((n, s, W) => n + s + (W > 0 ? r : 0), 0) <= m) {
+        u(e.length);
+        return;
+      }
+      const M = m - F - r;
+      let S = 0, a = 0;
+      for (const n of w) {
+        const s = S + n + (a > 0 ? r : 0);
+        if (s > M) break;
+        S = s, a += 1;
+      }
+      u(Math.max(1, a));
+    };
+    l();
+    let b = !1;
+    const g = new ResizeObserver(l);
+    return g.observe(i), document.fonts?.ready.then(() => {
+      b || l();
+    }), () => {
+      b = !0, g.disconnect();
+    };
+  }, [
+    t,
+    r,
+    f,
+    e,
+    o,
+    h
+  ]), $;
+};
+export {
+  x as useVisibleBadgeCount
+};

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,4 +1,4 @@
-import { t as m } from "../../Breadcrumb-xLKDl92B.js";
+import { t as m } from "../../Breadcrumb-DzavonoC.js";
 export {
   m as Breadcrumb
 };

package/dist/components/Breadcrumb/Breadcrumb.variants.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../dist-Bcn6lMQe.js";
+import { t as r } from "../../dist-B9GE4SXf.js";
 var e = r([
   "text-gray-600",
   "text-md",

package/dist/components/Breadcrumb/components/BackButton/BackButton.js

@@ -1,16 +1,16 @@
-import { t as o } from "../../../../utils-COaoD3PI.js";
-import { ArrowBackIcon as h } from "../../../../assets/icons/components/ArrowBack.js";
-import { n as k, t as b } from "../../../../useBreadcrumb-mrkCWjS0.js";
+import { n as h, t as k } from "../../../../useBreadcrumb-Ta3_czcd.js";
+import { ArrowBackIcon as b } from "../../../../assets/icons/components/ArrowBack.js";
+import { t as o } from "../../../../utils-DnIJruo0.js";
 import { backButtonVariants as c } from "./BackButton.variants.js";
 import { jsx as e } from "react/jsx-runtime";
 var C = ({ icon: d, onClick: s, to: a, target: m, label: t = "Go back", theme: n, component: f = "a" }) => {
-  const { isInsideRouter: u } = b(), l = (p) => {
+  const { isInsideRouter: u } = k(), l = (p) => {
     a === "#" && p.preventDefault(), s?.();
   }, r = /* @__PURE__ */ e("span", {
     className: "w-5 h-5 inline-flex items-center justify-center",
-    children: d ?? /* @__PURE__ */ e(h, { className: "w-5 h-5" })
+    children: d ?? /* @__PURE__ */ e(b, { className: "w-5 h-5" })
   }), i = f;
-  return a ? u ? /* @__PURE__ */ e(k, {
+  return a ? u ? /* @__PURE__ */ e(h, {
     to: a,
     target: m,
     "aria-label": t,

package/dist/components/Breadcrumb/components/BackButton/BackButton.variants.js

@@ -1,4 +1,4 @@
-import { t } from "../../../../dist-Bcn6lMQe.js";
+import { t } from "../../../../dist-B9GE4SXf.js";
 var r = t([
   "inline-flex",
   "items-center",

package/dist/components/Breadcrumb/components/CollapsedSteps/CollapsedSteps.js

@@ -0,0 +1,4 @@
+import { t as p } from "../../../../CollapsedSteps-CkMuzOHx.js";
+export {
+  p as CollapsedSteps
+};

package/dist/components/Breadcrumb/components/Item/Item.js

@@ -1,5 +1,5 @@
-import { t as m } from "../../../../utils-COaoD3PI.js";
-import { n as N, t as b } from "../../../../useBreadcrumb-mrkCWjS0.js";
+import { n as N, t as b } from "../../../../useBreadcrumb-Ta3_czcd.js";
+import { t as m } from "../../../../utils-DnIJruo0.js";
 import { breadcrumbLabelVariants as k, breadcrumbLinkVariants as o } from "./Item.variants.js";
 import { Fragment as C, jsx as e, jsxs as L } from "react/jsx-runtime";
 var v = ({ isActive: a, isLast: p, label: t, leftIcon: s, rightIcon: n, target: c, theme: f, to: r, component: h = "a" }) => {

package/dist/components/Breadcrumb/components/Item/Item.variants.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../../dist-Bcn6lMQe.js";
+import { t as e } from "../../../../dist-B9GE4SXf.js";
 var s = e([
   "text-sm",
   "leading-5",

package/dist/components/Breadcrumb/components/index.js

@@ -1,6 +1,8 @@
 import { BackButton as t } from "./BackButton/BackButton.js";
 import { Item as r } from "./Item/Item.js";
+import { t as e } from "../../../CollapsedSteps-CkMuzOHx.js";
 export {
   t as BackButton,
+  e as CollapsedSteps,
   r as Item
 };

package/dist/components/Breadcrumb/hooks/useBreadcrumb.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../useBreadcrumb-mrkCWjS0.js";
+import { t as e } from "../../../useBreadcrumb-Ta3_czcd.js";
 export {
   e as useBreadcrumb
 };

package/dist/components/Button/Button.js

@@ -1,23 +1,29 @@
-import { t as u } from "../../dist-CMPkuWNy.js";
-import { t as l } from "../../utils-COaoD3PI.js";
-import { buttonVariants as c } from "./Button.variants.js";
-import { forwardRef as x } from "react";
+import { t as x } from "../../dist-CK8FUUUn.js";
+import { t as b } from "../../utils-DnIJruo0.js";
+import { buttonVariants as l } from "./Button.variants.js";
+import { forwardRef as v } from "react";
 import { jsx as B } from "react/jsx-runtime";
-var N = x(({ appearance: o, asChild: r = !1, className: a, disabled: t = !1, shape: m, size: f, theme: s, variant: e, version: n, ...p }, i) => /* @__PURE__ */ B(r ? u : "button", {
-  ref: i,
-  "data-theme": s,
-  className: l(c({
-    appearance: o,
-    className: a,
-    disabled: t,
-    shape: m,
-    size: f,
-    variant: e,
-    version: n
-  })),
-  disabled: t,
-  ...p
-}));
+var N = v(({ appearance: r, asChild: o = !1, className: n, disabled: t = !1, shape: a, size: e, theme: m, variant: s, version: p, ...f }, u) => {
+  const i = o ? x : "button", c = o && t ? {
+    "aria-disabled": !0,
+    tabIndex: -1
+  } : { disabled: t };
+  return /* @__PURE__ */ B(i, {
+    ref: u,
+    "data-theme": m,
+    className: b(l({
+      appearance: r,
+      className: n,
+      disabled: t,
+      shape: a,
+      size: e,
+      variant: s,
+      version: p
+    }), o && t && "pointer-events-none"),
+    ...c,
+    ...f
+  });
+});
 N.displayName = "KonstructButton";
 export {
   N as Button

package/dist/components/Button/Button.variants.js

@@ -1,6 +1,9 @@
-import { t as r } from "../../dist-Bcn6lMQe.js";
+import { t as r } from "../../dist-B9GE4SXf.js";
 var a = r([
   "select-none",
+  "tap-target",
+  "touch-hit-area",
+  "relative",
   "border",
   "cursor-pointer",
   "disabled:pointer-events-none",
@@ -14,9 +17,13 @@ var a = r([
   "items-center",
   "justify-center",
   "rounded",
-  "transition-colors",
+  "transition-[color,background-color,border-color,transform]",
+  "duration-150",
+  "active:scale-[0.97]",
+  "motion-reduce:active:scale-100",
   "whitespace-nowrap",
   "h-10",
+  "pointer-coarse:min-h-11",
   "px-4",
   "py-2",
   "text-sm",
@@ -60,7 +67,10 @@ var a = r([
         "focus-visible:bg-transparent"
       ]
     },
-    shape: { circle: ["rounded-full", "p-1"] },
+    shape: {
+      circle: ["rounded-full", "p-1"],
+      pill: ["rounded-full", "px-6"]
+    },
     version: {
       default: "",
       alternate: ""

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -1,88 +1,93 @@
-import { t as n } from "../../utils-COaoD3PI.js";
-import { t as k } from "../../proxy-Cx8v8fok.js";
-import { buttonGroupPillVariants as q, buttonGroupVariants as z, buttonGroupWrapperVariants as A } from "./ButtonGroup.variants.js";
-import { ButtonGroupItem as E } from "./components/ButtonGroupItem/ButtonGroupItem.js";
-import { ButtonGroupLabel as H } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
-import { ButtonGroupMessage as J } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
-import { useButtonGroup as Q } from "./hooks/useButtonGroup.js";
-import { useMemo as T } from "react";
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
-var U = ({ className: p, contentClassName: f, defaultValue: h, descriptionAlign: v, descriptionClassName: G, disabled: s, duration: l, error: b, errorClassName: N, helperText: y, helperTextClassName: B, isRequired: D, itemClassName: g, itemLabelClassName: x, label: i, labelAlign: w, labelClassName: I, name: K, options: t, pillClassName: S, requiredClassName: V, theme: $, value: j, wrapperClassName: F, onValueChange: L }) => {
-  const { animationDirection: M, groupRef: C, id: m, selected: r, handleKeyDown: O, handleSelect: P } = Q({
-    defaultValue: h,
+import { n as Q, t as c } from "../../utils-DnIJruo0.js";
+import { buttonGroupPillVariants as R, buttonGroupVariants as T, buttonGroupWrapperVariants as U } from "./ButtonGroup.variants.js";
+import { ButtonGroupItem as X } from "./components/ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupLabel as Y } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
+import { ButtonGroupMessage as Z } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
+import { useButtonGroup as _ } from "./hooks/useButtonGroup.js";
+import { useMemo as ee } from "react";
+import { jsx as a, jsxs as G } from "react/jsx-runtime";
+import { motion as te } from "motion/react";
+var ae = ({ className: g, contentClassName: B, defaultValue: I, descriptionAlign: N, descriptionClassName: x, disabled: s, duration: m, error: o, errorClassName: D, helperText: u, helperTextClassName: $, isRequired: p, itemClassName: w, itemLabelClassName: K, label: i, labelAlign: S, labelClassName: V, name: j, options: t, pillClassName: L, requiredClassName: M, theme: C, value: E, wrapperClassName: F, onValueChange: O }) => {
+  const { animationDirection: P, groupRef: W, id: n, selected: r, handleKeyDown: k, handleSelect: q } = _({
+    defaultValue: I,
     disabled: s ?? void 0,
     options: t,
-    value: j,
-    onValueChange: L
-  }), u = t.length, c = T(() => t.findIndex((e) => e.value === r), [t, r]);
-  return /* @__PURE__ */ d("div", {
-    className: n(A(), F),
-    "data-theme": $,
+    value: E,
+    onValueChange: O
+  }), f = `${n}-label`, v = `${n}-error`, h = `${n}-helper-text`, l = typeof o == "string" && o.length > 0, z = Q(l && v, !l && !!u && h), b = t.length, y = ee(() => t.findIndex((e) => e.value === r), [t, r]);
+  return /* @__PURE__ */ G("div", {
+    className: c(U(), F),
+    "data-theme": C,
     children: [
-      i && /* @__PURE__ */ a(H, {
-        className: I,
-        htmlFor: m,
-        isRequired: D,
+      i && /* @__PURE__ */ a(Y, {
+        className: V,
+        id: f,
+        isRequired: p,
         label: i,
-        requiredClassName: V
+        requiredClassName: M
       }),
-      /* @__PURE__ */ d("div", {
-        ref: C,
+      /* @__PURE__ */ G("div", {
+        ref: W,
         role: "radiogroup",
-        "aria-labelledby": i ? m : void 0,
-        className: n(z({ disabled: s }), p),
-        children: [c >= 0 && /* @__PURE__ */ a(k.div, {
+        "aria-labelledby": i ? f : void 0,
+        "aria-invalid": l || void 0,
+        "aria-describedby": z,
+        "aria-required": p || void 0,
+        className: c(T({ disabled: s }), g),
+        children: [y >= 0 && /* @__PURE__ */ a(te.div, {
           "aria-hidden": "true",
-          className: n(q(), S),
+          className: c(R(), L),
           initial: !1,
           animate: {
-            left: `calc(${c} * (100% / ${u}) + 8px)`,
-            width: `calc(100% / ${u} - 16px)`
+            left: `calc(${y} * (100% / ${b}) + 8px)`,
+            width: `calc(100% / ${b} - 16px)`
           },
           transition: {
             type: "tween",
             ease: "linear",
-            duration: l ?? 0.3
+            duration: m ?? 0.3
           }
-        }), t.map((e, o) => {
-          const R = r === e.value, W = s || e.disabled;
-          return /* @__PURE__ */ a(E, {
-            animationDirection: M,
-            className: g,
-            contentClassName: f,
-            descriptionAlign: v,
-            descriptionClassName: G,
-            duration: l,
-            hasDescription: !!e.description,
-            index: o,
-            isDisabled: !!W,
-            isFirst: o === 0,
-            isLast: o === t.length - 1,
-            isSelected: R,
-            labelAlign: w,
-            labelClassName: x,
+        }), t.map((e, d) => {
+          const A = r === e.value, H = s || e.disabled, J = !!e.description;
+          return /* @__PURE__ */ a(X, {
+            animationDirection: P,
+            className: w,
+            contentClassName: B,
+            descriptionAlign: N,
+            descriptionClassName: x,
+            duration: m,
+            hasDescription: J,
+            index: d,
+            isDisabled: !!H,
+            isFirst: d === 0,
+            isLast: d === t.length - 1,
+            isSelected: A,
+            labelAlign: S,
+            labelClassName: K,
             option: e,
             value: e.value,
-            onKeyDown: O,
-            onSelect: P
+            onKeyDown: k,
+            onSelect: q
           }, e.value);
         })]
       }),
       /* @__PURE__ */ a("input", {
         type: "hidden",
-        name: K,
+        name: j,
         value: r ?? ""
       }),
-      /* @__PURE__ */ a(J, {
-        error: b,
-        errorClassName: N,
-        helperText: y,
-        helperTextClassName: B
+      /* @__PURE__ */ a(Z, {
+        error: o,
+        errorClassName: D,
+        errorId: v,
+        helperText: u,
+        helperTextClassName: $,
+        helperTextId: h
       })
     ]
   });
 };
-U.displayName = "KonstructButtonGroup";
+ae.displayName = "KonstructButtonGroup";
 export {
-  U as ButtonGroup
+  ae as ButtonGroup
 };

package/dist/components/ButtonGroup/ButtonGroup.variants.js

@@ -1,4 +1,4 @@
-import { t } from "../../dist-Bcn6lMQe.js";
+import { t } from "../../dist-B9GE4SXf.js";
 var e = t([
   "absolute",
   "top-2",

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.js

@@ -1,9 +1,9 @@
-import { t as r } from "../../../../utils-COaoD3PI.js";
-import { t as L } from "../../../../proxy-Cx8v8fok.js";
-import { buttonGroupDescriptionVariants as V, buttonGroupItemContentVariants as g, buttonGroupItemVariants as w, buttonGroupLabelVariants as o } from "./ButtonGroupItem.variants.js";
-import { memo as j } from "react";
+import { t as r } from "../../../../utils-DnIJruo0.js";
+import { buttonGroupDescriptionVariants as L, buttonGroupItemContentVariants as V, buttonGroupItemVariants as g, buttonGroupLabelVariants as o } from "./ButtonGroupItem.variants.js";
+import { memo as w } from "react";
 import { jsx as s, jsxs as a } from "react/jsx-runtime";
-var k = (t, n) => n === "none" ? t ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : t ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", B = j(({ animationDirection: t, className: n, contentClassName: d, descriptionAlign: p, descriptionClassName: h, duration: b = 0.3, hasDescription: f, index: c, isDisabled: l, isFirst: v, isLast: y, isSelected: i, labelAlign: m, labelClassName: u, option: e, value: N, onKeyDown: G, onSelect: x }) => /* @__PURE__ */ s("button", {
+import { motion as j } from "motion/react";
+var k = (t, n) => n === "none" ? t ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : t ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", B = w(({ animationDirection: t, className: n, contentClassName: d, descriptionAlign: p, descriptionClassName: h, duration: b = 0.3, hasDescription: f, index: c, isDisabled: l, isFirst: v, isLast: y, isSelected: i, labelAlign: m, labelClassName: u, option: e, value: N, onKeyDown: G, onSelect: x }) => /* @__PURE__ */ s("button", {
   type: "button",
   role: "radio",
   "aria-checked": i,
@@ -12,13 +12,13 @@ var k = (t, n) => n === "none" ? t ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : t
   tabIndex: i || c === 0 ? 0 : -1,
   onClick: () => !l && x(N),
   onKeyDown: (I) => G(I, c),
-  className: r(w({
+  className: r(g({
     disabled: l,
     isFirst: v,
     isLast: y
   }), "relative", n),
   children: /* @__PURE__ */ a("div", {
-    className: r(g({ hasDescription: f }), "relative", d),
+    className: r(V({ hasDescription: f }), "relative", d),
     children: [/* @__PURE__ */ a("span", {
       className: "relative w-full",
       children: [/* @__PURE__ */ a("span", {
@@ -30,7 +30,7 @@ var k = (t, n) => n === "none" ? t ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : t
           className: "flex items-center gap-2",
           children: [e.icon, e.label]
         }), e.secondaryLabel && /* @__PURE__ */ s("span", { children: e.secondaryLabel })]
-      }), /* @__PURE__ */ a(L.span, {
+      }), /* @__PURE__ */ a(j.span, {
         className: r(o({
           selected: !0,
           labelAlign: m
@@ -49,7 +49,7 @@ var k = (t, n) => n === "none" ? t ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : t
         }), e.secondaryLabel && /* @__PURE__ */ s("span", { children: e.secondaryLabel })]
       })]
     }), e.description && /* @__PURE__ */ s("span", {
-      className: r(V({ descriptionAlign: p }), h),
+      className: r(L({ descriptionAlign: p }), h),
       children: e.description
     })]
   })

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.variants.js

@@ -1,4 +1,4 @@
-import { t } from "../../../../dist-Bcn6lMQe.js";
+import { t } from "../../../../dist-B9GE4SXf.js";
 var r = t([
   "flex",
   "flex-1",