@konstructio/ui 0.1.2-alpha.99 → 0.1.4

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 { t as x } from "../../x-C8O1IsaM.js";
+import { LoaderIcon as D } from "../../assets/icons/components/Loader.js";
+import { t as u } from "../../utils-DnIJruo0.js";
+import { badgeVariants as V, buttonDismissVariants as j } from "./Badge.variants.js";
+import { t as f } from "../../dist-CK8FUUUn.js";
+import { useEffect as E, useRef as L, useState as P } 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();
-    }, { signal: t.signal }), () => t.abort();
-  }, []), /* @__PURE__ */ p("span", {
-    ref: a,
-    className: c(x({
-      variant: m,
-      size: l,
+var q = ({ className: b, dismissible: v = !1, isSelectable: g = !0, label: i, leftIcon: n, loading: o = !1, rightIcon: l, size: m, variant: c, onClick: e, onDismiss: h }) => {
+  const d = L(null), [r, N] = P("visible"), y = (a) => {
+    a.stopPropagation(), h?.(), N("hidden");
+  };
+  return E(() => {
+    if (r !== "hidden") return;
+    const a = new AbortController(), t = d.current;
+    return t?.addEventListener("animationend", (w) => {
+      w.target === t && (t.style.setProperty("display", "none"), t.remove());
+    }, { signal: a.signal }), () => a.abort();
+  }, [r]), /* @__PURE__ */ p("span", {
+    ref: d,
+    className: u(V({
+      variant: c,
+      size: m,
       className: b
     }), {
-      "select-none": !h,
-      "cursor-pointer": e
+      "select-none": !g,
+      "cursor-pointer tap-target outline-none focus-visible:ring-1 focus-visible:ring-aurora-500 active:scale-95 motion-reduce:active:scale-100": 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(f, {
         className: "h-3 w-3",
-        children: i
+        children: n
       }) : null,
-      r,
-      f ? /* @__PURE__ */ p("button", {
+      i,
+      v ? /* @__PURE__ */ p("button", {
         type: "button",
-        className: c(V({
-          size: l,
-          variant: m
+        className: u(j({
+          size: m,
+          variant: c
         })),
         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(f, {
         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",
@@ -69,7 +69,12 @@ var a = e([
   "inline-flex",
   "items-center",
   "justify-center",
+  "relative",
+  "tap-target",
+  "touch-hit-area",
   "focus:outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-aurora-500",
   "text-inherit",
   "cursor-pointer",
   "text-gray-700"

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-BiiOnn0p.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",
@@ -12,7 +12,7 @@ var r = t([
   "dark:hover:text-gray-300",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
-  "focus-visible:outline-gray-500"
+  "focus-visible:outline-aurora-500"
 ]);
 export {
   r as backButtonVariants

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

@@ -0,0 +1,4 @@
+import { t as p } from "../../../../CollapsedSteps-Dy2I7XDd.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",
@@ -17,7 +17,7 @@ var s = e([
       "group-[&:has(:focus-visible)]:no-underline",
       "group-[&:has(:focus-visible)]:outline-2",
       "group-[&:has(:focus-visible)]:outline-offset-6",
-      "group-[&:has(:focus-visible)]:outline-gray-500",
+      "group-[&:has(:focus-visible)]:outline-aurora-500",
       "group-[&:has(:focus-visible)]:text-gray-500",
       "group-[&:has(:focus-visible)]:rounded-xs",
       "group-hover:rounded-xs",
@@ -31,7 +31,7 @@ var s = e([
       "group-[&:has(:focus-visible)]:no-underline",
       "group-[&:has(:focus-visible)]:outline-2",
       "group-[&:has(:focus-visible)]:outline-offset-6",
-      "group-[&:has(:focus-visible)]:outline-gray-500",
+      "group-[&:has(:focus-visible)]:outline-aurora-500",
       "group-[&:has(:focus-visible)]:text-gray-500",
       "group-[&:has(:focus-visible)]:rounded-xs",
       "group-hover:rounded-xs",

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-Dy2I7XDd.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,22 +1,30 @@
-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",
   "flex",
   "focus-visible:outline-none",
   "focus-visible:ring-1",
-  "focus-visible:ring-ring",
+  "focus-visible:ring-aurora-500",
+  "kubefirst:focus-visible:ring-kubefirst-primary",
   "font-semibold",
   "gap-2",
   "inline-flex",
   "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 +68,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,97 @@
-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,
-    disabled: s ?? void 0,
+import { n as R, t as u } from "../../utils-DnIJruo0.js";
+import { buttonGroupPillVariants as T, buttonGroupVariants as U, buttonGroupWrapperVariants as X } from "./ButtonGroup.variants.js";
+import { ButtonGroupItem as Y } from "./components/ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupLabel as Z } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
+import { ButtonGroupMessage as _ } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
+import { useButtonGroup as ee } from "./hooks/useButtonGroup.js";
+import { useMemo as te } from "react";
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { motion as ae } from "motion/react";
+var re = ({ className: B, contentClassName: I, defaultValue: N, descriptionAlign: x, descriptionClassName: D, disabled: o, duration: m, error: s, errorClassName: $, helperText: p, helperTextClassName: w, isRequired: f, itemClassName: K, itemLabelClassName: S, label: i, labelAlign: V, labelClassName: j, name: L, options: t, pillClassName: M, requiredClassName: C, theme: E, value: F, variant: n, wrapperClassName: O, onValueChange: P }) => {
+  const { animationDirection: W, groupRef: k, id: l, selected: r, handleKeyDown: q, handleSelect: z } = ee({
+    defaultValue: N,
+    disabled: o ?? 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: F,
+    onValueChange: P
+  }), v = `${l}-label`, h = `${l}-error`, b = `${l}-helper-text`, d = typeof s == "string" && s.length > 0, A = R(d && h, !d && !!p && b), y = t.length, G = te(() => t.findIndex((e) => e.value === r), [t, r]);
+  return /* @__PURE__ */ g("div", {
+    className: u(X(), O),
+    "data-theme": E,
     children: [
-      i && /* @__PURE__ */ a(H, {
-        className: I,
-        htmlFor: m,
-        isRequired: D,
+      i && /* @__PURE__ */ a(Z, {
+        className: j,
+        id: v,
+        isRequired: f,
         label: i,
-        requiredClassName: V
+        requiredClassName: C
       }),
-      /* @__PURE__ */ d("div", {
-        ref: C,
+      /* @__PURE__ */ g("div", {
+        ref: k,
         role: "radiogroup",
-        "aria-labelledby": i ? m : void 0,
-        className: n(z({ disabled: s }), p),
-        children: [c >= 0 && /* @__PURE__ */ a(k.div, {
+        "aria-labelledby": i ? v : void 0,
+        "aria-invalid": d || void 0,
+        "aria-describedby": A,
+        "aria-required": f || void 0,
+        className: u(U({
+          disabled: o,
+          variant: n
+        }), B),
+        children: [n !== "outline" && G >= 0 && /* @__PURE__ */ a(ae.div, {
           "aria-hidden": "true",
-          className: n(q(), S),
+          className: u(T(), M),
           initial: !1,
           animate: {
-            left: `calc(${c} * (100% / ${u}) + 8px)`,
-            width: `calc(100% / ${u} - 16px)`
+            left: `calc(${G} * (100% / ${y}) + 8px)`,
+            width: `calc(100% / ${y} - 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, c) => {
+          const H = r === e.value, J = o || e.disabled, Q = !!e.description;
+          return /* @__PURE__ */ a(Y, {
+            animationDirection: W,
+            className: K,
+            contentClassName: I,
+            descriptionAlign: x,
+            descriptionClassName: D,
+            duration: m,
+            hasDescription: Q,
+            index: c,
+            isDisabled: !!J,
+            isFirst: c === 0,
+            isLast: c === t.length - 1,
+            isSelected: H,
+            labelAlign: V,
+            labelClassName: S,
             option: e,
             value: e.value,
-            onKeyDown: O,
-            onSelect: P
+            variant: n ?? void 0,
+            onKeyDown: q,
+            onSelect: z
           }, e.value);
         })]
       }),
       /* @__PURE__ */ a("input", {
         type: "hidden",
-        name: K,
+        name: L,
         value: r ?? ""
       }),
-      /* @__PURE__ */ a(J, {
-        error: b,
-        errorClassName: N,
-        helperText: y,
-        helperTextClassName: B
+      /* @__PURE__ */ a(_, {
+        error: s,
+        errorClassName: $,
+        errorId: h,
+        helperText: p,
+        helperTextClassName: w,
+        helperTextId: b
       })
     ]
   });
 };
-U.displayName = "KonstructButtonGroup";
+re.displayName = "KonstructButtonGroup";
 export {
-  U as ButtonGroup
+  re 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",
@@ -19,11 +19,24 @@ var e = t([
   "bg-metal-900",
   "rounded-lg"
 ], {
-  variants: { disabled: {
-    true: "opacity-50 cursor-not-allowed",
-    false: ""
-  } },
-  defaultVariants: { disabled: !1 }
+  variants: {
+    variant: {
+      pill: "",
+      outline: [
+        "w-fit",
+        "bg-transparent",
+        "rounded"
+      ]
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    variant: "pill",
+    disabled: !1
+  }
 });
 export {
   e as buttonGroupPillVariants,