@konstructio/ui 0.1.2-alpha.112 → 0.1.2-alpha.113

package/dist/components/Alert/Alert.js

@@ -1,61 +1,65 @@
 "use client";
-import { t as h } from "../../x-Vur_9PXW.js";
-import { n as C } from "../../dist-DX0sBG3Q.js";
-import { t as n } from "../../utils-DnIJruo0.js";
-import { CheckCircleFilledIcon as v } from "../../assets/icons/components/CheckCircleFilled.js";
-import { ErrorIcon as I } from "../../assets/icons/components/Error.js";
-import { InfoCircleIcon as g } from "../../assets/icons/components/InfoCircle.js";
-import { WarningTriangleIcon as N } from "../../assets/icons/components/WarningTriangle.js";
-import { alertVariants as b, closeButtonVariants as x, descriptionVariants as V, iconVariants as w, titleVariants as A } from "./Alert.variants.js";
-import { useEffect as k, useRef as E, useState as j } from "react";
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-var P = {
-  success: v,
-  info: g,
-  warning: N,
-  danger: I
-}, W = ({ theme: m, type: r, title: i, description: l, isVisible: o = !0, showCloseButton: d = !1 }) => {
-  const a = E(null), [f, u] = j(o), p = () => {
-    const e = a.current;
-    e && e.setAttribute("data-state", "hidden");
+import { t as v } from "../../x-Vur_9PXW.js";
+import { t as I } from "../../dist-C_jtUTU9.js";
+import { t } from "../../utils-DnIJruo0.js";
+import { CheckCircleFilledIcon as N } from "../../assets/icons/components/CheckCircleFilled.js";
+import { ErrorIcon as g } from "../../assets/icons/components/Error.js";
+import { InfoCircleIcon as b } from "../../assets/icons/components/InfoCircle.js";
+import { WarningTriangleIcon as x } from "../../assets/icons/components/WarningTriangle.js";
+import { alertVariants as V, closeButtonVariants as k, descriptionVariants as w, iconVariants as A, titleVariants as E } from "./Alert.variants.js";
+import { useEffect as j, useRef as P, useState as R } from "react";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+var B = {
+  success: N,
+  info: b,
+  warning: x,
+  danger: g
+}, _ = ({ action: o, icon: d, theme: f, type: r, title: i, description: c, isVisible: s = !0, showCloseButton: u = !1 }) => {
+  const a = P(null), [p, h] = R(s), C = () => {
+    const n = a.current;
+    n && n.setAttribute("data-state", "hidden");
   };
-  if (k(() => {
-    const e = new AbortController();
+  if (j(() => {
+    const n = new AbortController();
     return a.current?.addEventListener("animationend", () => {
-      a.current?.style.setProperty("display", "none"), u(!1);
-    }, { signal: e.signal }), () => e.abort();
-  }, []), !f) return null;
-  const c = r ? P[r] : null;
-  return /* @__PURE__ */ s("div", {
+      a.current?.style.setProperty("display", "none"), h(!1);
+    }, { signal: n.signal }), () => n.abort();
+  }, []), !p) return null;
+  const m = r ? B[r] : null;
+  return /* @__PURE__ */ l("div", {
     ref: a,
-    className: n(b({
+    className: t(V({
       type: r,
-      isVisible: o
+      isVisible: s
     })),
-    "data-state": o ? "visible" : "hidden",
-    "data-theme": m,
+    "data-state": s ? "visible" : "hidden",
+    "data-theme": f,
     role: "alert",
     "aria-live": "polite",
     children: [
-      c && /* @__PURE__ */ t(c, { className: n(w({ type: r })) }),
-      /* @__PURE__ */ s("div", {
+      d ?? (m && /* @__PURE__ */ e(m, { className: t(A({ type: r })) })),
+      /* @__PURE__ */ l("div", {
         className: "flex flex-col gap-1 flex-1",
-        children: [i && /* @__PURE__ */ t("p", {
-          className: n(A({ type: r })),
+        children: [i && /* @__PURE__ */ e("p", {
+          className: t(E({ type: r })),
           children: i
-        }), l && /* @__PURE__ */ t("div", {
-          className: n(V({ type: r })),
-          children: l
+        }), c && /* @__PURE__ */ e("div", {
+          className: t(w({ type: r })),
+          children: c
         })]
       }),
-      d && /* @__PURE__ */ s("button", {
+      o ? /* @__PURE__ */ e("div", {
+        className: "shrink-0 self-center",
+        children: o
+      }) : null,
+      u && /* @__PURE__ */ l("button", {
         type: "button",
-        onClick: p,
-        children: [/* @__PURE__ */ t(h, { className: n(x({ type: r })) }), /* @__PURE__ */ t(C, { children: "Dismiss alert" })]
+        onClick: C,
+        children: [/* @__PURE__ */ e(v, { className: t(k({ type: r })) }), /* @__PURE__ */ e(I, { children: "Dismiss alert" })]
       })
     ]
   });
 };
 export {
-  W as Alert
+  _ as Alert
 };

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,63 +1,63 @@
 "use client";
-import { t as n } from "../../utils-DnIJruo0.js";
-import { a as T, c as z, i as B, l as E, n as P, o as S, r as q, s as F, t as G } from "../../AlertDialogTrigger-Cdw3C2Tv.js";
-import { Button as i } from "../Button/Button.js";
-import { useAlertDialog as H } from "./hooks/useAlertDialog.js";
-import { useEffect as I, useRef as J, useState as L } from "react";
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-var M = ({ buttonCancel: { className: o, text: c = "Cancel", ...d } = {}, buttonConfirm: { className: m, text: f = "OK", ...p } = {}, buttonTriggerClassName: u, buttonTriggerText: h, buttonTriggerVariant: x, description: b, isDescriptionChild: C, isTitleChild: g, showCancelButton: N = !0, theme: a, title: y, wrapperClassName: k, onClick: v, onConfirm: A, ...l }) => {
-  const r = J(null), [D, O] = L(null), { isOpen: j, handleCancel: R, handleConfirm: w, handleOpen: K } = H({ onConfirm: A });
-  return I(() => {
-    if (!r.current || a) return;
-    const s = r.current.closest("[data-theme]");
-    s && O(s);
-  }, []), /* @__PURE__ */ t(z, {
+import { t as l } from "../../utils-DnIJruo0.js";
+import { a as T, c as z, i as B, l as E, n as P, o as S, r as $, s as q, t as F } from "../../AlertDialogTrigger-C9xoCZrZ.js";
+import { Button as s } from "../Button/Button.js";
+import { useAlertDialog as G } from "./hooks/useAlertDialog.js";
+import { useEffect as H, useRef as I, useState as J } from "react";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+var L = ({ buttonCancel: { className: o, text: c = "Cancel", ...d } = {}, buttonConfirm: { className: m, text: f = "OK", ...p } = {}, buttonTriggerClassName: u, buttonTriggerText: g, buttonTriggerVariant: h, description: x, isDescriptionChild: b, isTitleChild: C, showCancelButton: A = !0, theme: t, title: D, wrapperClassName: N, onClick: y, onConfirm: k, ...n }) => {
+  const r = I(null), [v, O] = J(null), { isOpen: j, handleCancel: w, handleConfirm: K, handleOpen: R } = G({ onConfirm: k });
+  return H(() => {
+    if (!r.current || t) return;
+    const i = r.current.closest("[data-theme]");
+    i && O(i);
+  }, []), /* @__PURE__ */ a(P, {
     open: j,
-    ...l,
-    children: [/* @__PURE__ */ e(G, {
+    ...n,
+    children: [/* @__PURE__ */ e(F, {
       ref: r,
       className: u,
-      variant: x,
-      text: h,
-      "data-theme": a,
-      onOpen: K,
-      onClick: v,
-      ...l
-    }), /* @__PURE__ */ t(F, {
-      container: D,
-      children: [/* @__PURE__ */ e(S, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }), /* @__PURE__ */ t(B, {
-        "data-theme": a,
-        className: n("bg-white", "rounded-md", "fixed", "top-1/2", "left-1/2", "-translate-y-2/4", "-translate-x-2/4", "flex", "flex-col", "gap-6", "p-8", "animate-in", "fade-in-0", "zoom-in-85", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", "dark:border-slate-700", k),
+      variant: h,
+      text: g,
+      "data-theme": t,
+      onOpen: R,
+      onClick: y,
+      ...n
+    }), /* @__PURE__ */ a(z, {
+      container: v,
+      children: [/* @__PURE__ */ e(q, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }), /* @__PURE__ */ a(T, {
+        "data-theme": t,
+        className: l("bg-white", "rounded-md", "fixed", "top-1/2", "left-1/2", "-translate-y-2/4", "-translate-x-2/4", "flex", "flex-col", "gap-6", "p-8", "animate-in", "fade-in-0", "zoom-in-85", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", "dark:border-slate-700", N),
         children: [
           /* @__PURE__ */ e(E, {
-            asChild: g,
+            asChild: C,
             className: "text-base text-slate-700 font-semibold",
-            children: y
+            children: D
           }),
-          /* @__PURE__ */ e(T, {
-            asChild: C,
+          /* @__PURE__ */ e(S, {
+            asChild: b,
             className: "text-sm text-slate-800",
-            children: b
+            children: x
           }),
-          /* @__PURE__ */ t("div", {
+          /* @__PURE__ */ a("div", {
             className: "flex flex-row gap-2 justify-end",
-            children: [N && /* @__PURE__ */ e(q, {
+            children: [A && /* @__PURE__ */ e(B, {
               asChild: !0,
-              children: /* @__PURE__ */ e(i, {
+              children: /* @__PURE__ */ e(s, {
                 type: "button",
                 variant: "secondary",
-                className: n(o),
-                onClick: R,
+                className: l(o),
+                onClick: w,
                 ...d,
                 children: c
               })
-            }), /* @__PURE__ */ e(P, {
+            }), /* @__PURE__ */ e($, {
               asChild: !0,
-              children: /* @__PURE__ */ e(i, {
+              children: /* @__PURE__ */ e(s, {
                 type: "button",
                 variant: "primary",
-                className: n(m),
-                onClick: w,
+                className: l(m),
+                onClick: K,
                 ...p,
                 children: f
               })
@@ -68,7 +68,7 @@ var M = ({ buttonCancel: { className: o, text: c = "Cancel", ...d } = {}, button
     })]
   });
 };
-M.displayName = "KonstructAlertDialog";
+L.displayName = "KonstructAlertDialog";
 export {
-  M as AlertDialog
+  L as AlertDialog
 };

package/dist/components/AlertDialog/components/AlertDialogTrigger.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../AlertDialogTrigger-Cdw3C2Tv.js";
+import { t as o } from "../../../AlertDialogTrigger-C9xoCZrZ.js";
 export {
   o as AlertDialogTrigger
 };

package/dist/components/AlertDialog/components/index.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../AlertDialogTrigger-Cdw3C2Tv.js";
+import { t as o } from "../../../AlertDialogTrigger-C9xoCZrZ.js";
 export {
   o as AlertDialogTrigger
 };

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,37 @@
+import { t as u } from "../../utils-DnIJruo0.js";
+import { ProfileIcon as f } from "../../assets/icons/components/Profile.js";
+import { avatarVariants as g } from "./Avatar.variants.js";
+import { useGravatarUrl as h } from "./hooks/use-gravatar-url.js";
+import { useState as U } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var N = {
+  sm: 28,
+  md: 40,
+  lg: 56
+}, E = ({ alt: m, className: s, email: i, fallback: t, icon: l, size: e = "md", src: o, theme: n }) => {
+  const d = h(o ? void 0 : i, N[e ?? "md"] * 2), r = o ?? d, [c, p] = U(null), v = !!r && c !== r;
+  return /* @__PURE__ */ a("span", {
+    role: "img",
+    "aria-label": m,
+    "data-theme": n,
+    className: u(g({ size: e }), s),
+    children: v ? /* @__PURE__ */ a("img", {
+      src: r,
+      alt: "",
+      className: "size-full object-cover",
+      onError: () => {
+        p(r);
+      }
+    }) : t ? /* @__PURE__ */ a("span", {
+      "aria-hidden": "true",
+      children: t
+    }) : l ?? /* @__PURE__ */ a(f, {
+      "aria-hidden": "true",
+      className: "size-1/2"
+    })
+  });
+};
+E.displayName = "KonstructAvatar";
+export {
+  E as Avatar
+};

package/dist/components/Avatar/Avatar.variants.js

@@ -0,0 +1,25 @@
+import { t as e } from "../../dist-B9GE4SXf.js";
+var s = e([
+  "inline-flex",
+  "shrink-0",
+  "items-center",
+  "justify-center",
+  "overflow-hidden",
+  "rounded-full",
+  "bg-sky-400/15",
+  "font-medium",
+  "uppercase",
+  "text-sky-600",
+  "select-none",
+  "dark:text-sky-400"
+], {
+  variants: { size: {
+    sm: ["size-7", "text-[10px]"],
+    md: ["size-10", "text-sm"],
+    lg: ["size-14", "text-lg"]
+  } },
+  defaultVariants: { size: "md" }
+});
+export {
+  s as avatarVariants
+};

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

@@ -0,0 +1,5 @@
+import { buildGravatarUrl as a, useGravatarUrl as t } from "./use-gravatar-url.js";
+export {
+  a as buildGravatarUrl,
+  t as useGravatarUrl
+};

package/dist/components/Avatar/hooks/use-gravatar-url.js

@@ -0,0 +1,25 @@
+import { useEffect as s, useState as l } from "react";
+var u = "https://gravatar.com/avatar", c = (r) => Array.from(new Uint8Array(r)).map((t) => t.toString(16).padStart(2, "0")).join(""), i = async (r, t) => {
+  const a = globalThis.crypto?.subtle;
+  if (!a) return null;
+  const e = new TextEncoder().encode(r.trim().toLowerCase()), n = c(await a.digest("SHA-256", e));
+  return `${u}/${n}?d=404&s=${t}`;
+}, f = (r, t) => {
+  const [a, e] = l(null);
+  return s(() => {
+    if (!r) {
+      e(null);
+      return;
+    }
+    let n = !1;
+    return i(r, t).then((o) => {
+      n || e(o);
+    }), () => {
+      n = !0;
+    };
+  }, [r, t]), a;
+};
+export {
+  i as buildGravatarUrl,
+  f as useGravatarUrl
+};

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,40 @@
+import { t as r } from "../../utils-DnIJruo0.js";
+import { avatarVariants as i } from "../Avatar/Avatar.variants.js";
+import { Avatar as v } from "../Avatar/Avatar.js";
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+var x = 5, f = ({ className: s, emptyLabel: c = "No members yet", items: a, label: h = (e) => `${e} members`, max: g = x, overflowLabel: p = (e) => `${e} more members`, size: t = "sm", theme: d }) => {
+  if (a.length === 0) return /* @__PURE__ */ l("span", {
+    role: "img",
+    "aria-label": c,
+    "data-theme": d,
+    className: r(i({ size: t }), "border border-dashed border-metal-500 bg-metal-300/15 text-metal-400", s),
+    children: "?"
+  });
+  const e = a.slice(0, g), m = a.length - e.length;
+  return /* @__PURE__ */ b("ul", {
+    "aria-label": h(a.length),
+    "data-theme": d,
+    className: r("flex list-none items-center p-0", s),
+    children: [e.map((o, n) => /* @__PURE__ */ l("li", {
+      className: r("relative flex", n > 0 && "-ml-2"),
+      style: { zIndex: e.length - n },
+      children: /* @__PURE__ */ l(v, {
+        ...o,
+        size: t,
+        className: r("border-2 border-white dark:border-metal-800", o.className)
+      })
+    }, o.id)), m > 0 ? /* @__PURE__ */ l("li", {
+      className: "relative -ml-2 flex",
+      children: /* @__PURE__ */ b("span", {
+        role: "img",
+        "aria-label": p(m),
+        className: r(i({ size: t }), "border-2 border-white bg-gray-200 text-gray-600 dark:border-metal-800 dark:bg-metal-700 dark:text-metal-300"),
+        children: ["+", m]
+      })
+    }) : null]
+  });
+};
+f.displayName = "KonstructAvatarGroup";
+export {
+  f as AvatarGroup
+};

package/dist/components/Badge/Badge.js

@@ -1,4 +1,4 @@
-import { t as c } from "../../dist-xCbHbMLA.js";
+import { t as c } from "../../dist-CK8FUUUn.js";
 import { t as p } from "../../utils-DnIJruo0.js";
 import { LoaderIcon as x } from "../../assets/icons/components/Loader.js";
 import { t as D } from "../../x-C8O1IsaM.js";

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/components/CollapsedSteps/CollapsedSteps.js

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

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 } from "../../../CollapsedSteps-CR7oCTRC.js";
+import { BackButton as r } from "./BackButton/BackButton.js";
+import { Item as e } from "./Item/Item.js";
 export {
-  t as BackButton,
-  r as Item
+  r as BackButton,
+  t as CollapsedSteps,
+  e as Item
 };

package/dist/components/Button/Button.js

@@ -1,23 +1,29 @@
-import { t as u } from "../../dist-xCbHbMLA.js";
-import { t as l } from "../../utils-DnIJruo0.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

@@ -60,7 +60,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: ""