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

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

@@ -179,7 +179,13 @@ const a = r(
           "text-red-700",
           "border-red-700",
           "bg-white",
-          "hover:bg-red-50"
+          "hover:bg-red-50",
+          "dark:bg-transparent",
+          "dark:border-rose-400",
+          "dark:text-rose-400",
+          "dark:hover:bg-rose-950",
+          "dark:hover:border-rose-400",
+          "dark:focus-visible:bg-rose-950"
         ]
       },
       {

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

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { Props } from './ButtonGroup.types';
+/**
+ * A segmented toggle button group for single selection among options.
+ *
+ * @example
+ * ```tsx
+ * // Simple button group
+ * <ButtonGroup
+ *   name="processor"
+ *   options={[
+ *     { value: 'cpu', label: 'CPU' },
+ *     { value: 'gpu', label: 'GPU' },
+ *   ]}
+ *   defaultValue="cpu"
+ *   onValueChange={(value) => setProcessor(value)}
+ * />
+ *
+ * // With descriptions
+ * <ButtonGroup
+ *   name="instance-type"
+ *   label="Instance Type"
+ *   isRequired
+ *   options={[
+ *     { value: 'standard', label: 'Standard', description: 'Balanced compute resources' },
+ *     { value: 'spot', label: 'Spot', description: 'Cost-effective for flexible workloads' },
+ *   ]}
+ *   onValueChange={setInstanceType}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-buttongroup--docs Storybook}
+ */
+export declare const ButtonGroup: FC<Props>;

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,118 @@
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import { cn as u } from "../../utils/index.js";
+import { buttonGroupVariants as q, buttonGroupWrapperVariants as z } from "./ButtonGroup.variants.js";
+import { useButtonGroup as A } from "./hooks/useButtonGroup.js";
+import { ButtonGroupLabel as E } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
+import { ButtonGroupItem as H } from "./components/ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupMessage as J } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
+const O = ({
+  className: l,
+  contentClassName: m,
+  defaultValue: p,
+  descriptionClassName: c,
+  disabled: t,
+  duration: d,
+  error: v,
+  errorClassName: f,
+  fullWidth: s,
+  helperText: G,
+  helperTextClassName: h,
+  isRequired: b,
+  itemClassName: y,
+  itemLabelClassName: B,
+  label: o,
+  labelClassName: D,
+  name: N,
+  options: i,
+  pillClassName: g,
+  requiredClassName: x,
+  theme: K,
+  value: S,
+  wrapperClassName: j,
+  onValueChange: w
+}) => {
+  const {
+    animationDirection: I,
+    groupRef: V,
+    id: a,
+    selected: n,
+    handleKeyDown: C,
+    handleSelect: F
+  } = A({
+    defaultValue: p,
+    disabled: t ?? void 0,
+    options: i,
+    value: S,
+    onValueChange: w
+  });
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      className: u(
+        z({ fullWidth: s }),
+        j
+      ),
+      "data-theme": K,
+      children: [
+        o && /* @__PURE__ */ r(
+          E,
+          {
+            className: D,
+            htmlFor: a,
+            isRequired: b,
+            label: o,
+            requiredClassName: x
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            ref: V,
+            role: "radiogroup",
+            "aria-labelledby": o ? a : void 0,
+            className: u(q({ fullWidth: s, disabled: t }), l),
+            children: i.map((e, L) => {
+              const M = n === e.value, R = t || e.disabled, $ = !!e.description;
+              return /* @__PURE__ */ r(
+                H,
+                {
+                  animationDirection: I,
+                  className: y,
+                  contentClassName: m,
+                  descriptionClassName: c,
+                  duration: d,
+                  hasDescription: $,
+                  index: L,
+                  isDisabled: !!R,
+                  isSelected: M,
+                  labelClassName: B,
+                  layoutId: `${a}-pill`,
+                  option: e,
+                  pillClassName: g,
+                  value: e.value,
+                  onKeyDown: C,
+                  onSelect: F
+                },
+                e.value
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ r("input", { type: "hidden", name: N, value: n ?? "" }),
+        /* @__PURE__ */ r(
+          J,
+          {
+            error: v,
+            errorClassName: f,
+            helperText: G,
+            helperTextClassName: h
+          }
+        )
+      ]
+    }
+  );
+};
+O.displayName = "KonstructButtonGroup";
+export {
+  O as ButtonGroup
+};

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

@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { buttonGroupVariants } from './ButtonGroup.variants';
+/**
+ * Configuration for a single button option in the ButtonGroup.
+ */
+export type ButtonGroupOption = {
+    /** Optional description displayed below the label */
+    description?: string;
+    /** Whether this specific option is disabled */
+    disabled?: boolean;
+    /** Optional icon to display before the label */
+    icon?: ReactNode;
+    /** The label text displayed for this option */
+    label: string;
+    /** The value associated with this option */
+    value: string;
+};
+/**
+ * Props for the ButtonGroup component.
+ *
+ * @example
+ * ```tsx
+ * // Simple button group
+ * <ButtonGroup
+ *   name="processor"
+ *   options={[
+ *     { value: 'cpu', label: 'CPU' },
+ *     { value: 'gpu', label: 'GPU' },
+ *   ]}
+ *   defaultValue="cpu"
+ *   onValueChange={(value) => setProcessor(value)}
+ * />
+ *
+ * // With descriptions
+ * <ButtonGroup
+ *   name="instance-type"
+ *   options={[
+ *     { value: 'standard', label: 'Standard', description: 'Balanced compute resources' },
+ *     { value: 'spot', label: 'Spot', description: 'Cost-effective for flexible workloads' },
+ *   ]}
+ *   onValueChange={setInstanceType}
+ * />
+ * ```
+ */
+export type Props = VariantProps<typeof buttonGroupVariants> & {
+    /** CSS classes for the button group container */
+    className?: string;
+    /** CSS classes for the content wrapper inside each item */
+    contentClassName?: string;
+    /** Initially selected value (uncontrolled mode) */
+    defaultValue?: string;
+    /** CSS classes for description text */
+    descriptionClassName?: string;
+    /** Animation duration in seconds (default: 0.3) */
+    duration?: number;
+    /** Error message to display */
+    error?: string;
+    /** CSS classes for error message */
+    errorClassName?: string;
+    /** Helper text displayed below the button group */
+    helperText?: string;
+    /** CSS classes for helper text */
+    helperTextClassName?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** CSS classes for individual button items */
+    itemClassName?: string;
+    /** CSS classes for the label text inside items */
+    itemLabelClassName?: string;
+    /** Label displayed above the button group */
+    label?: string | ReactNode;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** Form field name (required for form submission) */
+    name: string;
+    /** Array of button options */
+    options: ButtonGroupOption[];
+    /** CSS classes for the animated pill */
+    pillClassName?: string;
+    /** CSS classes for the required asterisk */
+    requiredClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Currently selected value (controlled mode) */
+    value?: string;
+    /** CSS classes for the outer wrapper */
+    wrapperClassName?: string;
+    /** Callback when selection changes */
+    onValueChange?: (value: string) => void;
+};

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

@@ -0,0 +1,13 @@
+/**
+ * Wrapper variants for the outer container with label
+ */
+export declare const buttonGroupWrapperVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Group container variants - no outer border, just flex container
+ */
+export declare const buttonGroupVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,31 @@
+import { c as t } from "../../index-D29mdTf5.js";
+const a = t(["flex", "flex-col", "gap-2"], {
+  variants: {
+    fullWidth: {
+      true: "w-full",
+      false: "w-fit"
+    }
+  },
+  defaultVariants: {
+    fullWidth: !1
+  }
+}), e = t(["inline-flex", "items-stretch"], {
+  variants: {
+    fullWidth: {
+      true: "w-full",
+      false: "w-fit"
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    fullWidth: !1,
+    disabled: !1
+  }
+});
+export {
+  e as buttonGroupVariants,
+  a as buttonGroupWrapperVariants
+};

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './ButtonGroupItem.types';
+export declare const ButtonGroupItem: FC<Props>;

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

@@ -0,0 +1,263 @@
+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(
+  ({
+    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(
+    "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 }),
+        "relative",
+        s
+      ),
+      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(
+                "span",
+                {
+                  className: v(
+                    Z(),
+                    r
+                  ),
+                  children: u.description
+                }
+              )
+            ]
+          }
+        )
+      ]
+    },
+    u.value
+  )
+);
+he.displayName = "KonstructButtonGroupItem";
+export {
+  he as ButtonGroupItem
+};

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

@@ -0,0 +1,21 @@
+import { KeyboardEvent } from 'react';
+import { ButtonGroupOption } from '../../ButtonGroup.types';
+import { AnimationDirection } from '../../hooks';
+export type Props = {
+    animationDirection: AnimationDirection;
+    className?: string;
+    contentClassName?: string;
+    descriptionClassName?: string;
+    duration?: number;
+    hasDescription: boolean;
+    index: number;
+    isDisabled: 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

@@ -0,0 +1,26 @@
+/**
+ * Individual button item variants - outer container with borders
+ */
+export declare const buttonGroupItemVariants: (props?: ({
+    disabled?: 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)
+ */
+export declare const buttonGroupItemContentVariants: (props?: ({
+    hasDescription?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Label text variants inside button item
+ */
+export declare const buttonGroupLabelVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Description text variants inside button item
+ */
+export declare const buttonGroupDescriptionVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;