@alfadocs/ui-kit 0.0.12

package/dist/_chunks/button-CXL8bA8G.js

@@ -0,0 +1,119 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as x, useEffect as w } from "react";
+import { Slot as z, Slottable as k } from "@radix-ui/react-slot";
+import { c as B } from "./index-D2ZczOXr.js";
+const N = B(
+  // `forced-colors:*` — under Windows High Contrast Mode the OS strips our
+  // bg/text tokens, so `ghost` / `outline` / `link` would lose their shape.
+  // We repaint a `ButtonBorder` edge + swap the focus ring to `CanvasText`
+  // so the control and its focused state both survive HCM.
+  "inline-flex items-center justify-center gap-[var(--spacing-xs)] font-medium transition-colors rounded-[var(--radius-md)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-solid focus-visible:outline-ring focus-visible:outline-offset-[length:var(--focus-ring-offset)] forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:focus-visible:outline-[CanvasText] disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed aria-busy:cursor-wait relative",
+  {
+    variants: {
+      intent: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:opacity-90 shadow-sm",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover active:opacity-90",
+        outline: "bg-transparent text-foreground border border-border hover:bg-muted/10 active:bg-muted/20",
+        ghost: "bg-transparent text-foreground hover:bg-muted/10 active:bg-muted/20",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover active:opacity-90 shadow-sm",
+        link: "bg-transparent text-primary underline-offset-4 hover:underline active:opacity-80 p-0 h-auto rounded-none",
+        // `tonal` is a container-contextual intent. The button carries a
+        // `data-intent="tonal"` hook + baseline chrome (hover/active/shadow).
+        // The ambient container (e.g. `Alert`) paints the colour via a
+        // descendant selector — `[&_[data-intent=tonal]]:bg-…` — so the
+        // button picks up the surrounding tint (amber on `warning`, red on
+        // `error`, etc.). Outside such a container the button falls back to
+        // the primary palette so a loose `<Button intent="tonal">` is never
+        // invisible.
+        tonal: "bg-primary text-primary-foreground hover:opacity-90 active:opacity-80 shadow-sm"
+      },
+      size: {
+        sm: 'h-8 ps-3 pe-3 text-[var(--font-size-sm)] min-h-[var(--min-target-size)] sm:min-h-0 before:absolute before:inset-x-[calc((var(--min-target-size)-100%)/-2)] before:inset-y-[calc((var(--min-target-size)-100%)/-2)] before:content-[""] sm:before:hidden',
+        md: "h-10 ps-4 pe-4 text-[var(--font-size-base)]",
+        lg: "h-12 ps-6 pe-6 text-[var(--font-size-lg)]"
+      }
+    },
+    defaultVariants: {
+      intent: "primary",
+      size: "md"
+    }
+  }
+), C = x(
+  ({
+    intent: s,
+    size: r,
+    className: f,
+    asChild: n = !1,
+    loading: e = !1,
+    startIcon: o,
+    endIcon: i,
+    flipIconInRtl: b = !1,
+    disabled: v,
+    children: a,
+    ...c
+  }, p) => {
+    const h = n ? z : "button", g = !a && (o || i), y = c["aria-label"];
+    w(() => {
+    }, [g, y]);
+    const d = r === "sm" ? 16 : r === "lg" ? 20 : 18, l = r === "sm" ? "size-4" : r === "lg" ? "size-5" : "size-[18px]", u = b ? "rtl:rotate-180" : "";
+    return /* @__PURE__ */ m(
+      h,
+      {
+        ref: p,
+        className: N({ intent: s, size: r, className: f }),
+        disabled: v || e,
+        "aria-busy": e || void 0,
+        "data-component": "button",
+        "data-intent": s ?? void 0,
+        ...c,
+        children: [
+          e && /* @__PURE__ */ m(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "animate-spin",
+              width: d,
+              height: d,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              children: [
+                /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "3" }),
+                /* @__PURE__ */ t(
+                  "path",
+                  {
+                    d: "M22 12a10 10 0 0 1-10 10",
+                    stroke: "currentColor",
+                    strokeWidth: "3",
+                    strokeLinecap: "round"
+                  }
+                )
+              ]
+            }
+          ),
+          !e && o && /* @__PURE__ */ t(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `inline-flex items-center ${l} ${u}`.trim(),
+              children: o
+            }
+          ),
+          n ? /* @__PURE__ */ t(k, { children: a }) : /* @__PURE__ */ t("span", { className: e ? "sr-only" : "inline-flex", children: a }),
+          !e && i && /* @__PURE__ */ t(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `inline-flex items-center ${l} ${u}`.trim(),
+              children: i
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+C.displayName = "Button";
+export {
+  C as B
+};
+//# sourceMappingURL=button-CXL8bA8G.js.map

package/dist/_chunks/button-CXL8bA8G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-CXL8bA8G.js","sources":["../../src/components/button/button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, useEffect } from 'react';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst buttonVariants = cva(\n  // `forced-colors:*` — under Windows High Contrast Mode the OS strips our\n  // bg/text tokens, so `ghost` / `outline` / `link` would lose their shape.\n  // We repaint a `ButtonBorder` edge + swap the focus ring to `CanvasText`\n  // so the control and its focused state both survive HCM.\n  'inline-flex items-center justify-center gap-[var(--spacing-xs)] font-medium transition-colors rounded-[var(--radius-md)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-solid focus-visible:outline-ring focus-visible:outline-offset-[length:var(--focus-ring-offset)] forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:focus-visible:outline-[CanvasText] disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed aria-busy:cursor-wait relative',\n  {\n    variants: {\n      intent: {\n        primary:\n          'bg-primary text-primary-foreground hover:bg-primary-hover active:opacity-90 shadow-sm',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:opacity-90',\n        outline:\n          'bg-transparent text-foreground border border-border hover:bg-muted/10 active:bg-muted/20',\n        ghost:\n          'bg-transparent text-foreground hover:bg-muted/10 active:bg-muted/20',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive-hover active:opacity-90 shadow-sm',\n        link: 'bg-transparent text-primary underline-offset-4 hover:underline active:opacity-80 p-0 h-auto rounded-none',\n        // `tonal` is a container-contextual intent. The button carries a\n        // `data-intent=\"tonal\"` hook + baseline chrome (hover/active/shadow).\n        // The ambient container (e.g. `Alert`) paints the colour via a\n        // descendant selector — `[&_[data-intent=tonal]]:bg-…` — so the\n        // button picks up the surrounding tint (amber on `warning`, red on\n        // `error`, etc.). Outside such a container the button falls back to\n        // the primary palette so a loose `<Button intent=\"tonal\">` is never\n        // invisible.\n        tonal:\n          'bg-primary text-primary-foreground hover:opacity-90 active:opacity-80 shadow-sm',\n      },\n      size: {\n        sm: 'h-8 ps-3 pe-3 text-[var(--font-size-sm)] min-h-[var(--min-target-size)] sm:min-h-0 before:absolute before:inset-x-[calc((var(--min-target-size)-100%)/-2)] before:inset-y-[calc((var(--min-target-size)-100%)/-2)] before:content-[\"\"] sm:before:hidden',\n        md: 'h-10 ps-4 pe-4 text-[var(--font-size-base)]',\n        lg: 'h-12 ps-6 pe-6 text-[var(--font-size-lg)]',\n      },\n    },\n    defaultVariants: {\n      intent: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  loading?: boolean;\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  /**\n   * Mirror directional icons (arrows, chevrons) horizontally when the\n   * interface renders in RTL. Default `false` — most icons (trash, calendar,\n   * plus) must NOT flip. Opt in per call-site for arrow / chevron glyphs.\n   */\n  flipIconInRtl?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      intent,\n      size,\n      className,\n      asChild = false,\n      loading = false,\n      startIcon,\n      endIcon,\n      flipIconInRtl = false,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button';\n    const isIconButton = !children && (startIcon || endIcon);\n\n    const ariaLabel = props['aria-label'];\n    useEffect(() => {\n      if (import.meta.env.DEV && isIconButton && !ariaLabel) {\n        console.warn(\n          'Button: Use IconButton for icon-only triggers to ensure accessibility and proper square sizing.',\n        );\n      }\n    }, [isIconButton, ariaLabel]);\n\n    const iconSize = size === 'sm' ? 16 : size === 'lg' ? 20 : 18;\n    const iconSizeClass =\n      size === 'sm' ? 'size-4' : size === 'lg' ? 'size-5' : 'size-[18px]';\n    const iconFlipClass = flipIconInRtl ? 'rtl:rotate-180' : '';\n\n    return (\n      <Comp\n        ref={ref}\n        className={buttonVariants({ intent, size, className })}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        data-component=\"button\"\n        data-intent={intent ?? undefined}\n        {...props}\n      >\n        {loading && (\n          <svg\n            aria-hidden=\"true\"\n            className=\"animate-spin\"\n            width={iconSize}\n            height={iconSize}\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeOpacity=\"0.25\" strokeWidth=\"3\" />\n            <path\n              d=\"M22 12a10 10 0 0 1-10 10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\n        )}\n        {!loading && startIcon && (\n          <span\n            aria-hidden=\"true\"\n            className={`inline-flex items-center ${iconSizeClass} ${iconFlipClass}`.trim()}\n          >\n            {startIcon}\n          </span>\n        )}\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span className={loading ? 'sr-only' : 'inline-flex'}>{children}</span>\n        )}\n        {!loading && endIcon && (\n          <span\n            aria-hidden=\"true\"\n            className={`inline-flex items-center ${iconSizeClass} ${iconFlipClass}`.trim()}\n          >\n            {endIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["buttonVariants","cva","Button","forwardRef","intent","size","className","asChild","loading","startIcon","endIcon","flipIconInRtl","disabled","children","props","ref","Comp","Slot","isIconButton","ariaLabel","useEffect","iconSize","iconSizeClass","iconFlipClass","jsxs","jsx","Slottable"],"mappings":"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"}

package/dist/_chunks/button-group-CI7LFxt3.js

@@ -0,0 +1,120 @@
+import { jsx as G } from "react/jsx-runtime";
+import { forwardRef as K, useRef as R, useState as g, useLayoutEffect as T, useCallback as V, Children as C, isValidElement as F, cloneElement as N } from "react";
+import { c as S } from "./index-D2ZczOXr.js";
+import { useTranslation as H } from "react-i18next";
+const M = S(
+  "inline-flex isolate [&>*]:relative [&>*:focus-visible]:z-10",
+  {
+    variants: {
+      orientation: {
+        horizontal: [
+          "flex-row",
+          "[&>*:not(:first-child)]:rounded-s-none",
+          "[&>*:not(:last-child)]:rounded-e-none",
+          "[&>*:not(:first-child)]:-ms-px"
+        ].join(" "),
+        vertical: [
+          "flex-col",
+          "[&>*:not(:first-child)]:rounded-t-none",
+          "[&>*:not(:last-child)]:rounded-b-none",
+          "[&>*:not(:first-child)]:-mt-px"
+        ].join(" ")
+      },
+      separator: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        separator: !0,
+        class: "[&>*:not(:last-child)]:border-e [&>*:not(:last-child)]:border-border"
+      },
+      {
+        orientation: "vertical",
+        separator: !0,
+        class: "[&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-border"
+      }
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      separator: !1
+    }
+  }
+), U = K(
+  ({
+    className: x,
+    orientation: l = "horizontal",
+    separator: k = !1,
+    toolbar: p = !1,
+    intent: v = "outline",
+    label: A,
+    children: z,
+    ...E
+  }, a) => {
+    const { t: L } = H(), j = A ?? L("ui.buttonGroup.label", "Button group"), c = p, u = R([]), [f, h] = g(0), w = R(null), [b, B] = g(!1);
+    T(() => {
+      if (typeof window > "u") return;
+      const t = w.current;
+      t && B(window.getComputedStyle(t).direction === "rtl");
+    }, []);
+    const I = V(
+      (t) => {
+        var y;
+        if (!c) return;
+        const e = u.current.filter(Boolean).length;
+        if (e === 0) return;
+        const s = l === "vertical" ? "ArrowDown" : b ? "ArrowLeft" : "ArrowRight", d = l === "vertical" ? "ArrowUp" : b ? "ArrowRight" : "ArrowLeft";
+        let n = null;
+        if (t.key === s ? n = (f + 1) % e : t.key === d ? n = (f - 1 + e) % e : t.key === "Home" ? n = 0 : t.key === "End" && (n = e - 1), n === null) return;
+        const i = e;
+        let o = 0, r = n;
+        for (; o < i; ) {
+          const m = u.current[r];
+          if (m && m.getAttribute("aria-disabled") !== "true" && !m.disabled)
+            break;
+          r = t.key === d || t.key === "End" ? (r - 1 + e) % e : (r + 1) % e, o += 1;
+        }
+        t.preventDefault(), h(r), (y = u.current[r]) == null || y.focus();
+      },
+      [c, l, b, f]
+    ), D = C.map(z, (t, e) => {
+      if (!F(t)) return t;
+      const s = t, d = (i) => {
+        u.current[e] = i;
+        const o = s.ref;
+        typeof o == "function" ? o(i) : o != null && typeof o == "object" && (o.current = i);
+      }, n = {
+        intent: s.props.intent ?? v,
+        tabIndex: c ? e === f ? 0 : -1 : s.props.tabIndex,
+        onFocus: (i) => {
+          var o, r;
+          c && h(e), (r = (o = s.props).onFocus) == null || r.call(o, i);
+        },
+        ref: d
+      };
+      return N(s, n);
+    });
+    return /* @__PURE__ */ G(
+      "div",
+      {
+        ref: (t) => {
+          w.current = t, typeof a == "function" ? a(t) : a && typeof a == "object" && (a.current = t);
+        },
+        role: p ? "toolbar" : "group",
+        "aria-label": j,
+        "aria-orientation": p ? l ?? "horizontal" : void 0,
+        onKeyDown: I,
+        className: M({ orientation: l, separator: k, className: x }),
+        ...E,
+        children: D
+      }
+    );
+  }
+);
+U.displayName = "ButtonGroup";
+export {
+  U as B
+};
+//# sourceMappingURL=button-group-CI7LFxt3.js.map

package/dist/_chunks/button-group-CI7LFxt3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-CI7LFxt3.js","sources":["../../src/components/button-group/button-group.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactElement,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport type { ButtonProps } from '../button/button';\n\ntype ButtonIntent = NonNullable<ButtonProps['intent']>;\n\nconst buttonGroupVariants = cva(\n  'inline-flex isolate [&>*]:relative [&>*:focus-visible]:z-10',\n  {\n    variants: {\n      orientation: {\n        horizontal: [\n          'flex-row',\n          '[&>*:not(:first-child)]:rounded-s-none',\n          '[&>*:not(:last-child)]:rounded-e-none',\n          '[&>*:not(:first-child)]:-ms-px',\n        ].join(' '),\n        vertical: [\n          'flex-col',\n          '[&>*:not(:first-child)]:rounded-t-none',\n          '[&>*:not(:last-child)]:rounded-b-none',\n          '[&>*:not(:first-child)]:-mt-px',\n        ].join(' '),\n      },\n      separator: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      {\n        orientation: 'horizontal',\n        separator: true,\n        class:\n          '[&>*:not(:last-child)]:border-e [&>*:not(:last-child)]:border-border',\n      },\n      {\n        orientation: 'vertical',\n        separator: true,\n        class:\n          '[&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-border',\n      },\n    ],\n    defaultVariants: {\n      orientation: 'horizontal',\n      separator: false,\n    },\n  },\n);\n\nexport interface ButtonGroupProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof buttonGroupVariants> {\n  /**\n   * Accessible label for the group. Falls back to the translated\n   * `ui.buttonGroup.label` string when not provided.\n   */\n  label?: string;\n  /**\n   * When the children are interactive toolbar-style controls (e.g. toggles),\n   * set this to render `role=\"toolbar\"` instead of `role=\"group\"`.\n   */\n  toolbar?: boolean;\n  /**\n   * Intent applied to every Button / IconButton child that does not set\n   * its own `intent`. Defaults to `outline` — grouped buttons are peers,\n   * not three solid-primary CTAs.\n   */\n  intent?: ButtonIntent;\n}\n\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      className,\n      orientation = 'horizontal',\n      separator = false,\n      toolbar = false,\n      intent = 'outline',\n      label,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const accessibleLabel = label ?? t('ui.buttonGroup.label', 'Button group');\n\n    // Roving tabindex — required by the WAI-ARIA toolbar pattern.\n    // When `toolbar` is true, one child owns `tabIndex=0` and the rest are\n    // `-1`. Arrow keys / Home / End move focus between children, respecting\n    // orientation and RTL. Plain `group` mode keeps every child natively\n    // tabbable.\n    const rovingTabindex = toolbar;\n    const buttonsRef = useRef<Array<HTMLButtonElement | null>>([]);\n    const [focusIndex, setFocusIndex] = useState(0);\n\n    const rootRef = useRef<HTMLDivElement | null>(null);\n    const [isRTL, setIsRTL] = useState(false);\n    useLayoutEffect(() => {\n      if (typeof window === 'undefined') return;\n      const node = rootRef.current;\n      if (!node) return;\n      setIsRTL(window.getComputedStyle(node).direction === 'rtl');\n    }, []);\n\n    const handleRootKeyDown = useCallback(\n      (event: ReactKeyboardEvent<HTMLDivElement>) => {\n        if (!rovingTabindex) return;\n        const count = buttonsRef.current.filter(Boolean).length;\n        if (count === 0) return;\n\n        const forwardKey =\n          orientation === 'vertical'\n            ? 'ArrowDown'\n            : isRTL\n              ? 'ArrowLeft'\n              : 'ArrowRight';\n        const backwardKey =\n          orientation === 'vertical'\n            ? 'ArrowUp'\n            : isRTL\n              ? 'ArrowRight'\n              : 'ArrowLeft';\n\n        let next: number | null = null;\n        if (event.key === forwardKey) next = (focusIndex + 1) % count;\n        else if (event.key === backwardKey)\n          next = (focusIndex - 1 + count) % count;\n        else if (event.key === 'Home') next = 0;\n        else if (event.key === 'End') next = count - 1;\n        if (next === null) return;\n\n        // Skip over disabled children.\n        const maxAttempts = count;\n        let attempts = 0;\n        let candidate = next;\n        while (attempts < maxAttempts) {\n          const el = buttonsRef.current[candidate];\n          if (el && el.getAttribute('aria-disabled') !== 'true' && !el.disabled) {\n            break;\n          }\n          candidate =\n            event.key === backwardKey || event.key === 'End'\n              ? (candidate - 1 + count) % count\n              : (candidate + 1) % count;\n          attempts += 1;\n        }\n        event.preventDefault();\n        setFocusIndex(candidate);\n        buttonsRef.current[candidate]?.focus();\n      },\n      [rovingTabindex, orientation, isRTL, focusIndex],\n    );\n\n    const enhanced = Children.map(children, (child, index) => {\n      if (!isValidElement(child)) return child;\n      const childEl = child as ReactElement<{\n        intent?: ButtonIntent;\n        tabIndex?: number;\n        onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n        ref?: React.Ref<HTMLButtonElement>;\n      }>;\n\n      const setMergedRef = (node: HTMLButtonElement | null) => {\n        buttonsRef.current[index] = node;\n        const originalRef = (\n          childEl as unknown as { ref?: React.Ref<HTMLButtonElement> }\n        ).ref;\n        if (typeof originalRef === 'function') originalRef(node);\n        else if (\n          originalRef !== null &&\n          originalRef !== undefined &&\n          typeof originalRef === 'object'\n        ) {\n          (\n            originalRef as React.MutableRefObject<HTMLButtonElement | null>\n          ).current = node;\n        }\n      };\n\n      const overrides = {\n        intent: childEl.props.intent ?? intent,\n        tabIndex: rovingTabindex\n          ? index === focusIndex\n            ? 0\n            : -1\n          : childEl.props.tabIndex,\n        onFocus: (ev: React.FocusEvent<HTMLButtonElement>) => {\n          if (rovingTabindex) setFocusIndex(index);\n          childEl.props.onFocus?.(ev);\n        },\n        ref: setMergedRef,\n      } as unknown as Partial<{ intent?: ButtonIntent }>;\n\n      return cloneElement(childEl, overrides);\n    });\n\n    const mergedRootRef = (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref && typeof ref === 'object') {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    };\n\n    return (\n      <div\n        ref={mergedRootRef}\n        role={toolbar ? 'toolbar' : 'group'}\n        aria-label={accessibleLabel}\n        aria-orientation={toolbar ? (orientation ?? 'horizontal') : undefined}\n        onKeyDown={handleRootKeyDown}\n        className={buttonGroupVariants({ orientation, separator, className })}\n        {...props}\n      >\n        {enhanced}\n      </div>\n    );\n  },\n);\n\nButtonGroup.displayName = 'ButtonGroup';\n"],"names":["buttonGroupVariants","cva","ButtonGroup","forwardRef","className","orientation","separator","toolbar","intent","label","children","props","ref","t","useTranslation","accessibleLabel","rovingTabindex","buttonsRef","useRef","focusIndex","setFocusIndex","useState","rootRef","isRTL","setIsRTL","useLayoutEffect","node","handleRootKeyDown","useCallback","event","count","forwardKey","backwardKey","next","maxAttempts","attempts","candidate","el","_a","enhanced","Children","child","index","isValidElement","childEl","setMergedRef","originalRef","overrides","ev","_b","cloneElement","jsx"],"mappings":"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"}

package/dist/_chunks/button.agent-BuGZBktn.js

@@ -0,0 +1,17 @@
+const t = {
+  id: "button",
+  capabilities: [],
+  state: {},
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "button",
+      description: "Marks the element as a kit Button. Safety is declared by the host pattern, not the button. Buttons inherit native `id` from props, which is what agents address them by."
+    }
+  }
+};
+export {
+  t as b
+};
+//# sourceMappingURL=button.agent-BuGZBktn.js.map

package/dist/_chunks/button.agent-BuGZBktn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.agent-BuGZBktn.js","sources":["../../src/components/button/button.agent.ts"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — Button.                                                */\n/*                                                                        */\n/* Button is stateless and context-dependent: a button used to submit a   */\n/* form has safety `write`; one used to navigate has safety `read`; one   */\n/* used to delete has safety `destructive`. The kit cannot decide that    */\n/* in advance, so this adapter declares NO actions and NO state — it      */\n/* exists solely to register the canonical `data-component=\"button\"` DOM  */\n/* hook in the build catalog.                                             */\n/*                                                                        */\n/* Pattern adapters that compose Button declare the workflow's safety,    */\n/* not the button itself.                                                 */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\n\nexport const buttonAgent: AgentAdapter = {\n  id: 'button',\n  capabilities: [],\n  state: {},\n  actions: {},\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'button',\n      description: 'Marks the element as a kit Button. Safety is declared by the host pattern, not the button. Buttons inherit native `id` from props, which is what agents address them by.',\n    },\n  },\n};\n"],"names":["buttonAgent"],"mappings":"AAgBO,MAAMA,IAA4B;AAAA,EACvC,IAAI;AAAA,EACJ,cAAc,CAAA;AAAA,EACd,OAAO,CAAA;AAAA,EACP,SAAS,CAAA;AAAA,EACT,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;"}