@konstructio/ui 0.1.2-alpha.55 → 0.1.2-alpha.57

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

@@ -1,263 +1,114 @@
-import { jsx as x, Fragment as X, jsxs as E } from "react/jsx-runtime";
-import * as N from "react";
-import { useId as D, useRef as I, useContext as O, useInsertionEffect as _, useMemo as k, Children as F, isValidElement as q, useState as H, memo as J } from "react";
-import { cn as v } from "../../../../utils/index.js";
-import { buttonGroupPillVariants as Q, buttonGroupLabelVariants as K, buttonGroupDescriptionVariants as Z, buttonGroupItemContentVariants as S, buttonGroupItemVariants as ee } from "./ButtonGroupItem.variants.js";
-import { M as te, i as T, u as W, P as ne, a as se, b as re, L as oe, m as j } from "../../../../proxy-i19-YB39.js";
-function A(e, s) {
-  if (typeof e == "function")
-    return e(s);
-  e != null && (e.current = s);
-}
-function ie(...e) {
-  return (s) => {
-    let t = !1;
-    const r = e.map((i) => {
-      const o = A(i, s);
-      return !t && typeof o == "function" && (t = !0), o;
-    });
-    if (t)
-      return () => {
-        for (let i = 0; i < r.length; i++) {
-          const o = r[i];
-          typeof o == "function" ? o() : A(e[i], null);
-        }
-      };
-  };
-}
-function ae(...e) {
-  return N.useCallback(ie(...e), e);
-}
-class ce extends N.Component {
-  getSnapshotBeforeUpdate(s) {
-    const t = this.props.childRef.current;
-    if (t && s.isPresent && !this.props.isPresent) {
-      const r = t.offsetParent, i = T(r) && r.offsetWidth || 0, o = T(r) && r.offsetHeight || 0, n = this.props.sizeRef.current;
-      n.height = t.offsetHeight || 0, n.width = t.offsetWidth || 0, n.top = t.offsetTop, n.left = t.offsetLeft, n.right = i - n.width - n.left, n.bottom = o - n.height - n.top;
-    }
-    return null;
-  }
-  /**
-   * Required with getSnapshotBeforeUpdate to stop React complaining.
-   */
-  componentDidUpdate() {
-  }
-  render() {
-    return this.props.children;
-  }
-}
-function le({ children: e, isPresent: s, anchorX: t, anchorY: r, root: i }) {
-  const o = D(), n = I(null), m = I({
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }), { nonce: h } = O(te), b = e.props?.ref ?? e?.ref, l = ae(n, b);
-  return _(() => {
-    const { width: u, height: a, top: f, left: d, right: C, bottom: g } = m.current;
-    if (s || !n.current || !u || !a)
-      return;
-    const P = t === "left" ? `left: ${d}` : `right: ${C}`, $ = r === "bottom" ? `bottom: ${g}` : `top: ${f}`;
-    n.current.dataset.motionPopId = o;
-    const w = document.createElement("style");
-    h && (w.nonce = h);
-    const p = i ?? document.head;
-    return p.appendChild(w), w.sheet && w.sheet.insertRule(`
-          [data-motion-pop-id="${o}"] {
-            position: absolute !important;
-            width: ${u}px !important;
-            height: ${a}px !important;
-            ${P}px !important;
-            ${$}px !important;
-          }
-        `), () => {
-      p.contains(w) && p.removeChild(w);
-    };
-  }, [s]), x(ce, { isPresent: s, childRef: n, sizeRef: m, children: N.cloneElement(e, { ref: l }) });
-}
-const ue = ({ children: e, initial: s, isPresent: t, onExitComplete: r, custom: i, presenceAffectsLayout: o, mode: n, anchorX: m, anchorY: h, root: b }) => {
-  const l = W(fe), u = D();
-  let a = !0, f = k(() => (a = !1, {
-    id: u,
-    initial: s,
-    isPresent: t,
-    custom: i,
-    onExitComplete: (d) => {
-      l.set(d, !0);
-      for (const C of l.values())
-        if (!C)
-          return;
-      r && r();
-    },
-    register: (d) => (l.set(d, !1), () => l.delete(d))
-  }), [t, l, r]);
-  return o && a && (f = { ...f }), k(() => {
-    l.forEach((d, C) => l.set(C, !1));
-  }, [t]), N.useEffect(() => {
-    !t && !l.size && r && r();
-  }, [t]), n === "popLayout" && (e = x(le, { isPresent: t, anchorX: m, anchorY: h, root: b, children: e })), x(ne.Provider, { value: f, children: e });
-};
-function fe() {
-  return /* @__PURE__ */ new Map();
-}
-const L = (e) => e.key || "";
-function B(e) {
-  const s = [];
-  return F.forEach(e, (t) => {
-    q(t) && s.push(t);
-  }), s;
-}
-const de = ({ children: e, custom: s, initial: t = !0, onExitComplete: r, presenceAffectsLayout: i = !0, mode: o = "sync", propagate: n = !1, anchorX: m = "left", anchorY: h = "top", root: b }) => {
-  const [l, u] = se(n), a = k(() => B(e), [e]), f = n && !l ? [] : a.map(L), d = I(!0), C = I(a), g = W(() => /* @__PURE__ */ new Map()), P = I(/* @__PURE__ */ new Set()), [$, w] = H(a), [p, V] = H(a);
-  re(() => {
-    d.current = !1, C.current = a;
-    for (let y = 0; y < p.length; y++) {
-      const c = L(p[y]);
-      f.includes(c) ? (g.delete(c), P.current.delete(c)) : g.get(c) !== !0 && g.set(c, !1);
-    }
-  }, [p, f.length, f.join("-")]);
-  const G = [];
-  if (a !== $) {
-    let y = [...a];
-    for (let c = 0; c < p.length; c++) {
-      const R = p[c], M = L(R);
-      f.includes(M) || (y.splice(c, 0, R), G.push(R));
-    }
-    return o === "wait" && G.length && (y = G), V(B(y)), w(a), null;
-  }
-  process.env.NODE_ENV !== "production" && o === "wait" && p.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
-  const { forceRender: Y } = O(oe);
-  return x(X, { children: p.map((y) => {
-    const c = L(y), R = n && !l ? !1 : a === p || f.includes(c), M = () => {
-      if (P.current.has(c))
-        return;
-      if (P.current.add(c), g.has(c))
-        g.set(c, !0);
-      else
-        return;
-      let z = !0;
-      g.forEach((U) => {
-        U || (z = !1);
-      }), z && (Y?.(), V(C.current), n && u?.(), r && r());
-    };
-    return x(ue, { isPresent: R, initial: !d.current || t ? void 0 : !1, custom: s, presenceAffectsLayout: i, mode: o, root: b, onExitComplete: R ? void 0 : M, anchorX: m, anchorY: h, children: y }, c);
-  }) });
-}, pe = (e, s) => s === "none" ? e ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : e ? "inset(0 0 0 0)" : s === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", he = J(
+import { jsx as s, jsxs as a } from "react/jsx-runtime";
+import { memo as x } from "react";
+import { cn as t } from "../../../../utils/index.js";
+import { buttonGroupLabelVariants as o, buttonGroupDescriptionVariants as I, buttonGroupItemContentVariants as L, buttonGroupItemVariants as g } from "./ButtonGroupItem.variants.js";
+import { m as V } from "../../../../proxy-BhEKW5n7.js";
+const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : r ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", j = x(
   ({
-    animationDirection: e,
-    className: s,
-    contentClassName: t,
-    descriptionClassName: r,
-    duration: i = 0.3,
-    hasDescription: o,
-    index: n,
-    isDisabled: m,
-    isSelected: h,
-    labelClassName: b,
-    layoutId: l,
-    option: u,
-    pillClassName: a,
-    value: f,
-    onKeyDown: d,
-    onSelect: C
-  }) => /* @__PURE__ */ E(
+    animationDirection: r,
+    className: n,
+    contentClassName: u,
+    descriptionClassName: d,
+    duration: p = 0.3,
+    hasDescription: h,
+    index: c,
+    isDisabled: l,
+    isFirst: b,
+    isLast: f,
+    isSelected: i,
+    labelClassName: m,
+    option: e,
+    value: y,
+    onKeyDown: N,
+    onSelect: v
+  }) => /* @__PURE__ */ s(
     "button",
     {
       type: "button",
       role: "radio",
-      "aria-checked": h,
-      "data-value": u.value,
-      disabled: m,
-      tabIndex: h || n === 0 ? 0 : -1,
-      onClick: () => !m && C(f),
-      onKeyDown: (g) => d(g, n),
-      className: v(
-        ee({ disabled: m }),
+      "aria-checked": i,
+      "data-value": e.value,
+      disabled: l,
+      tabIndex: i || c === 0 ? 0 : -1,
+      onClick: () => !l && v(y),
+      onKeyDown: (G) => N(G, c),
+      className: t(
+        g({ disabled: l, isFirst: b, isLast: f }),
         "relative",
-        s
+        n
       ),
-      children: [
-        /* @__PURE__ */ x(de, { mode: "popLayout", initial: !1, children: h && /* @__PURE__ */ x(
-          j.div,
-          {
-            layoutId: l,
-            className: v(Q(), a),
-            transition: {
-              type: "tween",
-              ease: "easeInOut",
-              duration: i
-            }
-          }
-        ) }),
-        /* @__PURE__ */ E(
-          "div",
-          {
-            className: v(
-              S({ hasDescription: o }),
-              "relative z-10",
-              t
-            ),
-            children: [
-              /* @__PURE__ */ E("span", { className: "relative", children: [
-                /* @__PURE__ */ E(
-                  "span",
-                  {
-                    className: v(
-                      K({ selected: !1 }),
-                      b
-                    ),
-                    children: [
-                      u.icon,
-                      u.label
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ E(
-                  j.span,
-                  {
-                    className: v(
-                      K({ selected: !0 }),
-                      "absolute inset-0",
-                      b
-                    ),
-                    "aria-hidden": "true",
-                    initial: !1,
-                    animate: {
-                      clipPath: pe(h, e)
-                    },
-                    transition: {
-                      type: "tween",
-                      ease: "easeInOut",
-                      duration: i
-                    },
-                    children: [
-                      u.icon,
-                      u.label
-                    ]
-                  }
-                )
-              ] }),
-              u.description && /* @__PURE__ */ x(
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          className: t(
+            L({ hasDescription: h }),
+            "relative",
+            u
+          ),
+          children: [
+            /* @__PURE__ */ a("span", { className: "relative w-full", children: [
+              /* @__PURE__ */ a(
                 "span",
                 {
-                  className: v(
-                    Z(),
-                    r
+                  className: t(
+                    o({ selected: !1 }),
+                    m
                   ),
-                  children: u.description
+                  children: [
+                    /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
+                      e.icon,
+                      e.label
+                    ] }),
+                    e.secondaryLabel && /* @__PURE__ */ s("span", { children: e.secondaryLabel })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ a(
+                V.span,
+                {
+                  className: t(
+                    o({ selected: !0 }),
+                    "absolute inset-0",
+                    m
+                  ),
+                  "aria-hidden": "true",
+                  initial: !1,
+                  animate: {
+                    clipPath: w(i, r)
+                  },
+                  transition: {
+                    type: "tween",
+                    ease: "linear",
+                    duration: p
+                  },
+                  children: [
+                    /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
+                      e.icon,
+                      e.label
+                    ] }),
+                    e.secondaryLabel && /* @__PURE__ */ s("span", { children: e.secondaryLabel })
+                  ]
                 }
               )
-            ]
-          }
-        )
-      ]
+            ] }),
+            e.description && /* @__PURE__ */ s(
+              "span",
+              {
+                className: t(
+                  I(),
+                  d
+                ),
+                children: e.description
+              }
+            )
+          ]
+        }
+      )
     },
-    u.value
+    e.value
   )
 );
-he.displayName = "KonstructButtonGroupItem";
+j.displayName = "KonstructButtonGroupItem";
 export {
-  he as ButtonGroupItem
+  j as ButtonGroupItem
 };

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.types.d.ts

@@ -10,11 +10,11 @@ export type Props = {
     hasDescription: boolean;
     index: number;
     isDisabled: boolean;
+    isFirst: boolean;
+    isLast: boolean;
     isSelected: boolean;
     labelClassName?: string;
-    layoutId: string;
     option: ButtonGroupOption;
-    pillClassName?: string;
     value: string;
     onKeyDown: (event: KeyboardEvent<HTMLButtonElement>, index: number) => void;
     onSelect: (value: string) => void;

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.variants.d.ts

@@ -3,11 +3,9 @@
  */
 export declare const buttonGroupItemVariants: (props?: ({
     disabled?: boolean | null | undefined;
+    isFirst?: boolean | null | undefined;
+    isLast?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Animated pill background (selected state indicator)
- */
-export declare const buttonGroupPillVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 /**
  * Inner content container (the content layer above the pill)
  */

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

@@ -1,5 +1,5 @@
 import { c as t } from "../../../../index-D29mdTf5.js";
-const r = t(
+const s = t(
   [
     "flex",
     "flex-1",
@@ -11,11 +11,7 @@ const r = t(
     "border-metal-700",
     "border-t",
     "border-b",
-    "bg-metal-900",
-    "first:border-l",
-    "first:rounded-l-lg",
-    "last:border-r",
-    "last:rounded-r-lg",
+    "bg-transparent",
     "focus:outline-none",
     "focus-visible:ring-2",
     "focus-visible:ring-aurora-500",
@@ -26,18 +22,23 @@ const r = t(
       disabled: {
         true: "pointer-events-none opacity-50",
         false: ""
+      },
+      isFirst: {
+        true: "border-l rounded-l-lg",
+        false: ""
+      },
+      isLast: {
+        true: "border-r rounded-r-lg",
+        false: ""
       }
     },
     defaultVariants: {
-      disabled: !1
+      disabled: !1,
+      isFirst: !1,
+      isLast: !1
     }
   }
-), s = t([
-  "absolute",
-  "inset-2",
-  "bg-metal-800",
-  "rounded-lg"
-]), a = t(
+), r = t(
   ["flex", "flex-col", "flex-1", "rounded-lg", "px-4", "py-2"],
   {
     variants: {
@@ -50,7 +51,7 @@ const r = t(
       hasDescription: !1
     }
   }
-), n = t(
+), a = t(
   [
     "text-sm",
     "font-medium",
@@ -59,6 +60,8 @@ const r = t(
     "flex",
     "items-center",
     "gap-2",
+    "w-full",
+    "justify-between",
     "transition-colors",
     "ease-in-out"
   ],
@@ -73,7 +76,7 @@ const r = t(
       selected: !1
     }
   }
-), o = t([
+), n = t([
   "text-sm",
   "font-normal",
   "leading-5",
@@ -81,9 +84,8 @@ const r = t(
   "text-metal-300"
 ]);
 export {
-  o as buttonGroupDescriptionVariants,
-  a as buttonGroupItemContentVariants,
-  r as buttonGroupItemVariants,
-  n as buttonGroupLabelVariants,
-  s as buttonGroupPillVariants
+  n as buttonGroupDescriptionVariants,
+  r as buttonGroupItemContentVariants,
+  s as buttonGroupItemVariants,
+  a as buttonGroupLabelVariants
 };