@gridui/button 4.0.0 → 5.0.0

package/README.md

@@ -1,7 +1,7 @@
 # Button
 
 `@gridui/button` owns native buttons, button-styled links, shared button classes,
-and async action scheduling. It has no domain,
+ButtonGroup layouts, and async action scheduling. It has no domain,
 route, locale, or Layout dependency. Load `@gridui/button/styles.css` after
 the theme styles.
 
@@ -18,11 +18,17 @@ import "@gridui/button/styles.css";
 ## Native behavior
 
 `Button` forwards native button props and refs. It defaults to `type="button"`;
-use `type="submit"` for a form action. `loading` disables the native button and
-exposes `aria-busy` without replacing the visible action name. Native `disabled`
-remains available independently of loading. For a focusable unavailable action,
-supply `aria-disabled` and guard activation in its owner. ARIA/data-disabled
-attributes share the disabled appearance; native `disabled` blocks activation.
+use `type="submit"` for a form action. `loading` exposes `aria-busy` and
+`aria-disabled`, preserves focus, label geometry, content opacity, and hover paint,
+and blocks pointer, keyboard, and programmatic click activation. A busy submit
+button also cancels form submissions that name it as the submitter. The form's
+action owner must guard other submission paths, such as `requestSubmit()` without
+a submitter, with its own in-flight lock.
+
+Native `disabled` means unavailable and takes precedence over loading. Explicit
+`aria-disabled` also blocks button activation while preserving focusability;
+ARIA/data-disabled attributes share the unavailable appearance. Loading does not
+set the native `disabled` property or remove the submitter from form data.
 
 `ButtonLink` forwards native anchor props and refs and requires `href`. It
 defaults to the secondary variant and retains navigation, modified-click,
@@ -72,7 +78,7 @@ retains its normal size. Graphical content remains caller-owned.
 
 `iconMotion="outward"` opts the `endIcon` into a small hover translation upward
 and toward the inline end. It follows inherited text direction, leaves any
-dividing line fixed, and does not animate disabled or loading buttons. Reduced
+dividing line fixed, and does not animate unavailable buttons. Loading preserves the existing hover motion. Reduced
 motion removes both the translation and transition. The default is `none`;
 keyboard focus never requires motion to remain visible. Supply an icon whose
 direction matches the action and locale.
@@ -180,3 +186,31 @@ icon slots, long labels, loading, and the existing variants. Divided-layout brow
 checks cover one-action hit areas, native keyboard activation, busy-state
 transitions, RTL seams and motion, long labels at text zoom, and the
 viewport/theme/reduced-motion matrix.
+
+[Component reference](docs/reference/README.md) contains focused API pages for each public component.
+
+## Grouped actions
+
+`ButtonGroup` composes independent `Button` and `ButtonLink` controls. `layout="standard"`
+keeps separate controls with an 8px gap; `layout="cells"` removes their outer borders
+and corner radii, fills equal-width cells, and owns one separator between visible
+actions. Groups stack at 20rem or less of their own width, including in narrow
+panels on wide screens. Actions retain native Tab order and event semantics.
+The group has no selected value or toolbar keyboard model.
+
+Context passes through non-DOM wrappers such as `DrawerClose asChild`. Render each
+action as a direct DOM child of the group's owned grid. Nested groups reset their
+own layout context. A surrounding Footer owns the outer frame, content boundary,
+and safe area; groups draw internal seams only. Give groups available width from
+their parent layout or explicitly size them in intrinsic flex/inline containers.
+
+Cells default to 24px padding. `--gridui-button-group-padding-block` customizes
+block padding; `--gridui-button-group-border` customizes internal separator color.
+ModalActions connects its existing responsive footer spacing to this shared token.
+
+```tsx
+<ButtonGroup layout="cells" aria-label="Project actions">
+    <Button variant="secondary" onClick={cancel}>Cancel</Button>
+    <Button loading={saving} onClick={save}>Save</Button>
+</ButtonGroup>
+```

package/dist/button/button.d.ts

@@ -6,7 +6,7 @@
  */
 import { type ButtonVariants } from "../shared/style";
 import type { ButtonAdornmentProps } from "../shared/types";
-import type { ComponentPropsWithRef, FC } from "react";
+import { type ComponentPropsWithRef, type FC } from "react";
 export type ButtonProps = ComponentPropsWithRef<"button"> & ButtonVariants & ButtonAdornmentProps & {
     readonly loading?: boolean;
 };

package/dist/button-group/button-group.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Button
+ * @namespace ButtonGroup
+ * @description Button Group
+ */
+import { type ButtonGroupLayout } from "../shared/group-context";
+import type { ComponentPropsWithRef, FC } from "react";
+export type ButtonGroupProps = ComponentPropsWithRef<"div"> & {
+    readonly layout?: ButtonGroupLayout;
+};
+export declare const ButtonGroup: FC<ButtonGroupProps>;

package/dist/button-link/button-link.d.ts

@@ -6,7 +6,7 @@
  */
 import { type ButtonVariants } from "../shared/style";
 import type { ButtonAdornmentProps } from "../shared/types";
-import type { ComponentPropsWithRef, FC } from "react";
+import { type ComponentPropsWithRef, type FC } from "react";
 export type ButtonLinkProps = ComponentPropsWithRef<"a"> & ButtonVariants & ButtonAdornmentProps & {
     readonly href: string;
 };

package/dist/index.d.ts

@@ -7,6 +7,8 @@
 export { useAsyncAction } from "./button/async-action";
 export type { ButtonProps } from "./button/button";
 export { Button } from "./button/button";
+export type { ButtonGroupProps } from "./button-group/button-group";
+export { ButtonGroup } from "./button-group/button-group";
 export type { ButtonLinkProps } from "./button-link/button-link";
 export { ButtonLink } from "./button-link/button-link";
 export type { ButtonVariants } from "./shared/style";

package/dist/index.js

@@ -48,6 +48,7 @@ var buttonStyles = cva(cn(
   "gridui-u-button--disabled:cursor-not-allowed",
   "gridui-u-button--aria-disabled:cursor-not-allowed",
   "gridui-u-button--data-disabled:cursor-not-allowed",
+  "gridui-u-button--data-gridui-busy:cursor-wait",
   "gridui-u-button--motion-reduce:transition-none"
 ));
 var buttonStandardStyles = cva(cn(
@@ -240,6 +241,8 @@ var ButtonContent = (props) => {
         buttonStartIconStyles({ iconSize: startIconSize }),
         dividedStart ? buttonStartRegionStyles({ size }) : "gridui-button-content"
       ),
+      "data-gridui-part": "icon",
+      "data-gridui-draw": "graphic",
       "aria-hidden": "true",
       inert: true,
       children: dividedStart ? /* @__PURE__ */ jsx(
@@ -253,7 +256,15 @@ var ButtonContent = (props) => {
   ) : null;
   const label = /* @__PURE__ */ jsxs(Fragment, { children: [
     !dividedStart && startAdornment,
-    children
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "gridui-button-label-content",
+        "data-gridui-part": "label",
+        "data-gridui-draw": layout === "icon" ? "graphic" : "text",
+        children
+      }
+    )
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     dividedStart && startAdornment,
@@ -261,6 +272,8 @@ var ButtonContent = (props) => {
       "span",
       {
         className: cn2("gridui-button-content", layout === "divided" ? buttonLabelStyles({ size }) : "gridui-button-body"),
+        "data-gridui-part": "content",
+        "data-gridui-draw": "group",
         children: label
       }
     ),
@@ -271,6 +284,8 @@ var ButtonContent = (props) => {
           "gridui-button-adornment gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none",
           layout === "divided" ? buttonEndRegionStyles({ size }) : "gridui-button-content"
         ),
+        "data-gridui-part": "icon",
+        "data-gridui-draw": "graphic",
         "aria-hidden": "true",
         inert: true,
         children: layout === "divided" || iconMotion === "outward" ? /* @__PURE__ */ jsx(
@@ -285,7 +300,12 @@ var ButtonContent = (props) => {
   ] });
 };
 
+// src/shared/group-context.ts
+import { createContext } from "react";
+var ButtonGroupContext = createContext(void 0);
+
 // src/button/button.tsx
+import { useContext, useImperativeHandle, useLayoutEffect, useRef as useRef2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Button = (props) => {
   const {
@@ -295,6 +315,9 @@ var Button = (props) => {
     iconMotion,
     loading = false,
     disabled,
+    ref: forwardedRef,
+    onClick,
+    onClickCapture,
     type = "button",
     className,
     children,
@@ -304,6 +327,30 @@ var Button = (props) => {
     endIcon,
     ...restProps
   } = props;
+  const button = useRef2(null);
+  useImperativeHandle(forwardedRef, () => {
+    return button.current;
+  }, []);
+  const unavailable = disabled || restProps["aria-disabled"] === true || restProps["aria-disabled"] === "true";
+  const busy = loading && !unavailable;
+  useLayoutEffect(() => {
+    const element = button.current;
+    const form = element?.form;
+    if (!loading || type !== "submit" || !form) {
+      return;
+    }
+    const preventBusySubmit = (event) => {
+      if (event.submitter === element) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    form.addEventListener("submit", preventBusySubmit, true);
+    return () => {
+      form.removeEventListener("submit", preventBusySubmit, true);
+    };
+  });
+  const groupLayout = useContext(ButtonGroupContext);
   const variants = variant === "text" || variant === "underlined" ? {
     variant,
     size,
@@ -315,12 +362,40 @@ var Button = (props) => {
     layout,
     iconMotion
   };
+  let drawing = "surface";
+  if (variant === "underlined") {
+    drawing = "atomic";
+  } else if (variant === "text" || variant === "quiet") {
+    drawing = "group";
+  }
   return /* @__PURE__ */ jsx2(
     "button",
     {
       ...restProps,
+      "data-gridui-component": "button",
+      "data-gridui-draw": drawing,
+      "data-gridui-button-group-item": groupLayout,
       type,
-      disabled: disabled || loading,
+      ref: button,
+      disabled,
+      "aria-disabled": loading || restProps["aria-disabled"],
+      "data-gridui-busy": busy || void 0,
+      onClickCapture: (event) => {
+        if (loading || unavailable) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        onClickCapture?.(event);
+      },
+      onClick: (event) => {
+        if (loading || unavailable) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        onClick?.(event);
+      },
       "aria-busy": loading || restProps["aria-busy"],
       className: buttonClass(variants, className),
       children: /* @__PURE__ */ jsx2(
@@ -340,8 +415,39 @@ var Button = (props) => {
   );
 };
 
-// src/button-link/button-link.tsx
+// src/button-group/button-group.tsx
+import { cn as cn3 } from "@gridui/style-utils";
 import { jsx as jsx3 } from "react/jsx-runtime";
+var ButtonGroup = (props) => {
+  const { layout = "standard", className, children, role = "group", ...restProps } = props;
+  return /* @__PURE__ */ jsx3(
+    ButtonGroupContext,
+    {
+      value: layout,
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ...restProps,
+          role,
+          "data-layout": layout,
+          className: cn3("gridui-button-group", className),
+          children: /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: "gridui-button-group-items",
+              "data-layout": layout,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+// src/button-link/button-link.tsx
+import { useContext as useContext2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ButtonLink = (props) => {
   const {
     variant = "secondary",
@@ -356,6 +462,7 @@ var ButtonLink = (props) => {
     endIcon,
     ...restProps
   } = props;
+  const groupLayout = useContext2(ButtonGroupContext);
   const variants = variant === "text" || variant === "underlined" ? {
     variant,
     size,
@@ -367,12 +474,21 @@ var ButtonLink = (props) => {
     layout,
     iconMotion
   };
-  return /* @__PURE__ */ jsx3(
+  let drawing = "surface";
+  if (variant === "underlined") {
+    drawing = "atomic";
+  } else if (variant === "text" || variant === "quiet") {
+    drawing = "group";
+  }
+  return /* @__PURE__ */ jsx4(
     "a",
     {
       ...restProps,
+      "data-gridui-component": "button-link",
+      "data-gridui-draw": drawing,
+      "data-gridui-button-group-item": groupLayout,
       className: buttonClass(variants, className),
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx4(
         ButtonContent,
         {
           layout: variants.layout,
@@ -390,6 +506,7 @@ var ButtonLink = (props) => {
 };
 export {
   Button,
+  ButtonGroup,
   ButtonLink,
   buttonClass,
   useAsyncAction

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/button/async-action.ts", "../src/shared/style.ts", "../src/shared/content.tsx", "../src/button/button.tsx", "../src/button-link/button-link.tsx"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Async Action\n */\n\nimport { useRef, useState } from \"react\";\n\ntype Action = () => void | Promise<void>;\n\nexport const performAsyncAction = async ({ action, onStart, onPendingChange }: {\n    readonly action: Action;\n    readonly onStart?: Action;\n    readonly onPendingChange: (pending: boolean) => void;\n}): Promise<void> => {\n    onPendingChange(true);\n    try {\n        await onStart?.();\n        await new Promise<void>((resolve) => {\n            setTimeout(resolve, 0);\n        });\n        await action();\n    } finally {\n        onPendingChange(false);\n    }\n};\n\nexport const useAsyncAction = ({ action, onStart, disabled = false }: {\n    readonly action: Action;\n    readonly onStart?: Action;\n    readonly disabled?: boolean;\n}) => {\n    const [\n        pending,\n        setPending,\n    ] = useState(false);\n    const active = useRef(false);\n    return {\n        pending,\n        async run(): Promise<void> {\n            if (disabled || active.current) {\n                return;\n            }\n            active.current = true;\n            try {\n                await performAsyncAction({\n                    action,\n                    ...(onStart ? { onStart } : {}),\n                    onPendingChange: setPending,\n                });\n            } finally {\n                active.current = false;\n            }\n        },\n    };\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const buttonStyles = cva(cn(\n    \"gridui-button\",\n    \"gridui-u-button--inline-flex gridui-u-button--w-fit gridui-u-button--max-w-full gridui-u-button--min-w-0 gridui-u-button--items-center gridui-u-button--justify-center gridui-u-button--gap-gridui-8 gridui-u-button--rounded-control gridui-u-button--type-ui gridui-u-button--text-center gridui-u-button--no-underline gridui-u-button--wrap-anywhere gridui-u-button--cursor-pointer gridui-u-button--transition-colors gridui-u-button--duration-(--gridui-motion-duration-quick) gridui-u-button--ease-(--gridui-motion-ease-out)\",\n    \"gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size)] gridui-u-button--[&_svg]:w-(--gridui-button-icon-size) gridui-u-button--[&_svg]:h-(--gridui-button-icon-size) gridui-u-button--[&_svg]:shrink-0 gridui-u-button--[&_svg]:pointer-events-none\",\n    \"gridui-u-button--disabled:cursor-not-allowed\",\n    \"gridui-u-button--aria-disabled:cursor-not-allowed\",\n    \"gridui-u-button--data-disabled:cursor-not-allowed\",\n    \"gridui-u-button--motion-reduce:transition-none\",\n));\n\nexport const buttonStandardStyles = cva(cn(\n    \"gridui-button-standard\",\n    \"gridui-u-button--min-h-gridui-control gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16\",\n));\n\nexport const buttonSmallStyles = cva(cn(\n    \"gridui-button-small\",\n    \"gridui-u-button--min-h-gridui-control-small gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8\",\n));\n\nexport const buttonLargeStyles = cva(cn(\n    \"gridui-button-large\",\n    \"gridui-u-button--min-h-gridui-control-large gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24 gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonExtraLargeStyles = cva(cn(\n    \"gridui-button-extra-large\",\n    \"gridui-u-button--min-h-18 gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24 gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonPrimaryStyles = cva(cn(\n    \"gridui-button-primary\",\n    \"gridui-u-button--text-accent-foreground gridui-u-button--bg-accent-background gridui-u-button--border-accent-background\",\n));\n\nexport const buttonSecondaryStyles = cva(cn(\n    \"gridui-button-secondary\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-border\",\n));\n\nexport const buttonQuietStyles = cva(cn(\n    \"gridui-button-quiet\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-transparent\",\n));\n\nexport const buttonHighlightStyles = cva(cn(\n    \"gridui-button-highlight\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-brand-tint\",\n));\n\nexport const buttonTextStyles = cva(cn(\n    \"gridui-button-text\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-0 gridui-u-button--rounded-none\",\n));\n\nexport const buttonUnderlinedStyles = cva(cn(\n    \"gridui-button-underlined\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-0 gridui-u-button--border-b gridui-u-button--border-foreground gridui-u-button--rounded-none\",\n));\n\nexport const buttonEntryStyles = cva(cn(\n    \"gridui-button-entry\",\n    \"gridui-u-button--justify-between gridui-u-button--w-full gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24\",\n));\n\nexport const buttonCellStyles = cva(cn(\n    \"gridui-button-cell\",\n    \"gridui-u-button--w-full gridui-u-button--h-full gridui-u-button--justify-start gridui-u-button--rounded-none gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24 gridui-u-button--text-left\",\n));\n\nexport const buttonRailStyles = cva(cn(\n    \"gridui-button-rail\",\n    \"gridui-u-button--w-full gridui-u-button--min-w-gridui-24 gridui-u-button--flex-col gridui-u-button--py-gridui-8 gridui-u-button--px-0\",\n    \"gridui-u-button--[&_>_span]:[writing-mode:vertical-rl] gridui-u-button--[&_>_span]:whitespace-nowrap\",\n));\n\nexport const buttonIconStyles = cva(cn(\n    \"gridui-button-icon\",\n    \"gridui-u-button--w-gridui-control gridui-u-button--h-gridui-control gridui-u-button--shrink-0 gridui-u-button--p-0\",\n    \"gridui-u-button--[&.gridui-button-small]:w-gridui-control-small gridui-u-button--[&.gridui-button-small]:h-gridui-control-small\",\n    \"gridui-u-button--[&.gridui-button-large]:w-gridui-control-large gridui-u-button--[&.gridui-button-large]:h-gridui-control-large\",\n    \"gridui-u-button--[&.gridui-button-extra-large]:w-18 gridui-u-button--[&.gridui-button-extra-large]:h-18\",\n    \"gridui-u-button--pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-button--pointer-coarse:[&.gridui-button-small]:h-gridui-control\",\n));\n\nexport const buttonDividedStyles = cva(cn(\n    \"gridui-button-divided\",\n    \"gridui-u-button--w-full gridui-u-button--items-stretch gridui-u-button--justify-between gridui-u-button--gap-0 gridui-u-button--rounded-none gridui-u-button--p-0 gridui-u-button--text-start\",\n));\n\nexport const buttonLabelStyles = cva(cn(\n    \"gridui-button-label\",\n    \"gridui-u-button--inline-flex gridui-u-button--min-w-0 gridui-u-button--flex-1 gridui-u-button--items-center gridui-u-button--gap-gridui-8\",\n), {\n    variants: {\n        size: {\n            small: \"gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8\",\n            standard: \"gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16\",\n            large: \"gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24\",\n            \"extra-large\": \"gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24\",\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonStartIconStyles = cva(cn(\n    \"gridui-button-adornment gridui-button-start-icon\",\n    \"gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none\",\n), {\n    variants: {\n        iconSize: {\n            standard: \"\",\n            large: \"gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-32)]\",\n            \"extra-large\": \"gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-48)]\",\n        },\n    },\n    defaultVariants: { iconSize: \"standard\" },\n});\n\nexport const buttonStartRegionStyles = cva(cn(\n    \"gridui-button-start-region\",\n    \"gridui-u-button--justify-center gridui-u-button--self-stretch gridui-u-button--py-gridui-8\",\n), {\n    variants: {\n        size: {\n            small: \"gridui-u-button--w-gridui-control-small\",\n            standard: \"gridui-u-button--w-gridui-control\",\n            large: \"gridui-u-button--w-gridui-control-large\",\n            \"extra-large\": \"gridui-u-button--w-gridui-64\",\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonEndRegionStyles = cva(cn(\n    \"gridui-button-end-region\",\n    \"gridui-u-button--justify-center gridui-u-button--self-stretch\",\n), {\n    variants: {\n        size: {\n            small: \"gridui-u-button--w-gridui-control-small\",\n            standard: \"gridui-u-button--w-gridui-control\",\n            large: \"gridui-u-button--w-gridui-control-large\",\n            \"extra-large\": \"gridui-u-button--w-gridui-64\",\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonVariants = cva(buttonStyles(), {\n    variants: {\n        variant: {\n            primary: buttonPrimaryStyles(),\n            secondary: buttonSecondaryStyles(),\n            quiet: buttonQuietStyles(),\n            highlight: buttonHighlightStyles(),\n            text: buttonTextStyles(),\n            underlined: buttonUnderlinedStyles(),\n        },\n        size: {\n            small: buttonSmallStyles(),\n            standard: buttonStandardStyles(),\n            large: buttonLargeStyles(),\n            \"extra-large\": buttonExtraLargeStyles(),\n        },\n        layout: {\n            standard: \"\",\n            icon: buttonIconStyles(),\n            entry: buttonEntryStyles(),\n            cell: buttonCellStyles(),\n            rail: buttonRailStyles(),\n            divided: buttonDividedStyles(),\n        },\n        iconMotion: {\n            none: \"\",\n            outward: \"gridui-button-icon-motion-outward\",\n        },\n    },\n    compoundVariants: [\n        {\n            variant: [\n                \"text\",\n                \"underlined\",\n            ],\n            size: [\n                \"large\",\n                \"extra-large\",\n            ],\n            className: \"gridui-u-button--gap-gridui-32 gridui-u-button--type-supporting\",\n        },\n    ],\n    defaultVariants: {\n        variant: \"primary\",\n        size: \"standard\",\n    },\n});\n\ntype ButtonStyleVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonVariants = Omit<ButtonStyleVariants, \"variant\" | \"layout\"> & (\n    | {\n        readonly variant: \"text\" | \"underlined\";\n        readonly layout?: \"standard\" | null | undefined;\n    }\n    | {\n        readonly variant?: Exclude<ButtonStyleVariants[\"variant\"], \"text\" | \"underlined\">;\n        readonly layout?: ButtonStyleVariants[\"layout\"];\n    }\n);\n\nexport const buttonClass = (variants: ButtonVariants = {}, className?: string): string => {\n    const textVariant = variants.variant === \"text\" || variants.variant === \"underlined\";\n    return cn(buttonVariants({\n        variant: variants.variant,\n        size: variants.size,\n        layout: variants.layout,\n        iconMotion: variants.iconMotion,\n    }), textVariant && \"gridui-u-button--px-0\", className);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Content\n */\n\nimport { buttonEndRegionStyles, buttonLabelStyles, buttonStartIconStyles, buttonStartRegionStyles, type ButtonVariants } from \"./style\";\nimport type { ButtonAdornmentProps } from \"./types\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC, ReactNode } from \"react\";\n\nexport type ButtonContentProps = ButtonAdornmentProps & {\n    readonly children?: ReactNode;\n    readonly layout?: ButtonVariants[\"layout\"];\n    readonly size?: ButtonVariants[\"size\"];\n    readonly iconMotion?: ButtonVariants[\"iconMotion\"];\n};\n\nexport const ButtonContent: FC<ButtonContentProps> = (props: ButtonContentProps) => {\n    const { children, startIcon, startIconLayout, startIconSize, endIcon, layout, size, iconMotion } = props;\n    const dividedStart = layout === \"divided\" && startIconLayout === \"divided\";\n    const startAdornment = startIcon !== undefined && startIcon !== null && typeof startIcon !== \"boolean\" ? (<span\n        className={cn(\n            buttonStartIconStyles({ iconSize: startIconSize }),\n            dividedStart ? buttonStartRegionStyles({ size }) : \"gridui-button-content\",\n        )}\n        aria-hidden=\"true\"\n        inert\n    >\n        {dividedStart ? (<span\n            className=\"gridui-button-content gridui-u-button--inline-flex\"\n        >\n            {startIcon}\n        </span>) : startIcon}\n    </span>) : null;\n    const label = (<>\n        {!dividedStart && startAdornment}\n        {children}\n    </>);\n\n    return (<>\n        {dividedStart && startAdornment}\n        <span\n            className={cn(\"gridui-button-content\", layout === \"divided\" ? buttonLabelStyles({ size }) : \"gridui-button-body\")}\n        >\n            {label}\n        </span>\n        {endIcon !== undefined && endIcon !== null && typeof endIcon !== \"boolean\" && (<span\n            className={cn(\n                \"gridui-button-adornment gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none\",\n                layout === \"divided\" ? buttonEndRegionStyles({ size }) : \"gridui-button-content\",\n            )}\n            aria-hidden=\"true\"\n            inert\n        >\n            {layout === \"divided\" || iconMotion === \"outward\" ? (<span\n                className={cn(\"gridui-u-button--inline-flex\", layout === \"divided\" && \"gridui-button-content\", iconMotion === \"outward\" && \"gridui-button-end-icon\")}\n            >\n                {endIcon}\n            </span>) : endIcon}\n        </span>)}\n    </>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Button\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ButtonProps = ComponentPropsWithRef<\"button\"> & ButtonVariants & ButtonAdornmentProps & {\n    readonly loading?: boolean;\n};\n\nexport const Button: FC<ButtonProps> = (props: ButtonProps) => {\n    const {\n        variant,\n        size,\n        layout,\n        iconMotion,\n        loading = false,\n        disabled,\n        type = \"button\",\n        className,\n        children,\n        startIcon,\n        startIconLayout = \"inline\",\n        startIconSize = \"standard\",\n        endIcon,\n        ...restProps\n    } = props;\n    const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n        variant,\n        size,\n        layout: \"standard\",\n        iconMotion,\n    } : {\n        variant,\n        size,\n        layout,\n        iconMotion,\n    };\n    return (<button\n        {...restProps}\n        type={type}\n        disabled={disabled || loading}\n        aria-busy={loading || restProps[\"aria-busy\"]}\n        className={buttonClass(variants, className)}\n    >\n        <ButtonContent\n            layout={variants.layout}\n            size={size}\n            iconMotion={iconMotion}\n            startIcon={startIcon}\n            startIconLayout={startIconLayout}\n            startIconSize={startIconSize}\n            endIcon={endIcon}\n        >\n            {children}\n        </ButtonContent>\n    </button>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace ButtonLink\n * @description Button Link\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ButtonLinkProps = ComponentPropsWithRef<\"a\"> & ButtonVariants & ButtonAdornmentProps & {\n    readonly href: string;\n};\n\nexport const ButtonLink: FC<ButtonLinkProps> = (props: ButtonLinkProps) => {\n    const {\n        variant = \"secondary\",\n        size,\n        layout,\n        iconMotion,\n        className,\n        children,\n        startIcon,\n        startIconLayout = \"inline\",\n        startIconSize = \"standard\",\n        endIcon,\n        ...restProps\n    } = props;\n    const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n        variant,\n        size,\n        layout: \"standard\",\n        iconMotion,\n    } : {\n        variant,\n        size,\n        layout,\n        iconMotion,\n    };\n    return (<a\n        {...restProps}\n        className={buttonClass(variants, className)}\n    >\n        <ButtonContent\n            layout={variants.layout}\n            size={size}\n            iconMotion={iconMotion}\n            startIcon={startIcon}\n            startIconLayout={startIconLayout}\n            startIconSize={startIconSize}\n            endIcon={endIcon}\n        >\n            {children}\n        </ButtonContent>\n    </a>);\n};\n"],
-  "mappings": "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",
-  "names": ["cn", "jsx", "jsx"]
+  "sources": ["../src/button/async-action.ts", "../src/shared/style.ts", "../src/shared/content.tsx", "../src/shared/group-context.ts", "../src/button/button.tsx", "../src/button-group/button-group.tsx", "../src/button-link/button-link.tsx"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Async Action\n */\n\nimport { useRef, useState } from \"react\";\n\ntype Action = () => void | Promise<void>;\n\nexport const performAsyncAction = async ({ action, onStart, onPendingChange }: {\n    readonly action: Action;\n    readonly onStart?: Action;\n    readonly onPendingChange: (pending: boolean) => void;\n}): Promise<void> => {\n    onPendingChange(true);\n    try {\n        await onStart?.();\n        await new Promise<void>((resolve) => {\n            setTimeout(resolve, 0);\n        });\n        await action();\n    } finally {\n        onPendingChange(false);\n    }\n};\n\nexport const useAsyncAction = ({ action, onStart, disabled = false }: {\n    readonly action: Action;\n    readonly onStart?: Action;\n    readonly disabled?: boolean;\n}) => {\n    const [\n        pending,\n        setPending,\n    ] = useState(false);\n    const active = useRef(false);\n    return {\n        pending,\n        async run(): Promise<void> {\n            if (disabled || active.current) {\n                return;\n            }\n            active.current = true;\n            try {\n                await performAsyncAction({\n                    action,\n                    ...(onStart ? { onStart } : {}),\n                    onPendingChange: setPending,\n                });\n            } finally {\n                active.current = false;\n            }\n        },\n    };\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const buttonStyles = cva(cn(\n    \"gridui-button\",\n    \"gridui-u-button--inline-flex gridui-u-button--w-fit gridui-u-button--max-w-full gridui-u-button--min-w-0 gridui-u-button--items-center gridui-u-button--justify-center gridui-u-button--gap-gridui-8 gridui-u-button--rounded-control gridui-u-button--type-ui gridui-u-button--text-center gridui-u-button--no-underline gridui-u-button--wrap-anywhere gridui-u-button--cursor-pointer gridui-u-button--transition-colors gridui-u-button--duration-(--gridui-motion-duration-quick) gridui-u-button--ease-(--gridui-motion-ease-out)\",\n    \"gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size)] gridui-u-button--[&_svg]:w-(--gridui-button-icon-size) gridui-u-button--[&_svg]:h-(--gridui-button-icon-size) gridui-u-button--[&_svg]:shrink-0 gridui-u-button--[&_svg]:pointer-events-none\",\n    \"gridui-u-button--disabled:cursor-not-allowed\",\n    \"gridui-u-button--aria-disabled:cursor-not-allowed\",\n    \"gridui-u-button--data-disabled:cursor-not-allowed\",\n    \"gridui-u-button--data-gridui-busy:cursor-wait\",\n    \"gridui-u-button--motion-reduce:transition-none\",\n));\n\nexport const buttonStandardStyles = cva(cn(\n    \"gridui-button-standard\",\n    \"gridui-u-button--min-h-gridui-control gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16\",\n));\n\nexport const buttonSmallStyles = cva(cn(\n    \"gridui-button-small\",\n    \"gridui-u-button--min-h-gridui-control-small gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8\",\n));\n\nexport const buttonLargeStyles = cva(cn(\n    \"gridui-button-large\",\n    \"gridui-u-button--min-h-gridui-control-large gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24 gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonExtraLargeStyles = cva(cn(\n    \"gridui-button-extra-large\",\n    \"gridui-u-button--min-h-18 gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24 gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonPrimaryStyles = cva(cn(\n    \"gridui-button-primary\",\n    \"gridui-u-button--text-accent-foreground gridui-u-button--bg-accent-background gridui-u-button--border-accent-background\",\n));\n\nexport const buttonSecondaryStyles = cva(cn(\n    \"gridui-button-secondary\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-border\",\n));\n\nexport const buttonQuietStyles = cva(cn(\n    \"gridui-button-quiet\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-transparent\",\n));\n\nexport const buttonHighlightStyles = cva(cn(\n    \"gridui-button-highlight\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-brand-tint\",\n));\n\nexport const buttonTextStyles = cva(cn(\n    \"gridui-button-text\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-0 gridui-u-button--rounded-none\",\n));\n\nexport const buttonUnderlinedStyles = cva(cn(\n    \"gridui-button-underlined\",\n    \"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-0 gridui-u-button--border-b gridui-u-button--border-foreground gridui-u-button--rounded-none\",\n));\n\nexport const buttonEntryStyles = cva(cn(\n    \"gridui-button-entry\",\n    \"gridui-u-button--justify-between gridui-u-button--w-full gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24\",\n));\n\nexport const buttonCellStyles = cva(cn(\n    \"gridui-button-cell\",\n    \"gridui-u-button--w-full gridui-u-button--h-full gridui-u-button--justify-start gridui-u-button--rounded-none gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24 gridui-u-button--text-left\",\n));\n\nexport const buttonRailStyles = cva(cn(\n    \"gridui-button-rail\",\n    \"gridui-u-button--w-full gridui-u-button--min-w-gridui-24 gridui-u-button--flex-col gridui-u-button--py-gridui-8 gridui-u-button--px-0\",\n    \"gridui-u-button--[&_>_span]:[writing-mode:vertical-rl] gridui-u-button--[&_>_span]:whitespace-nowrap\",\n));\n\nexport const buttonIconStyles = cva(cn(\n    \"gridui-button-icon\",\n    \"gridui-u-button--w-gridui-control gridui-u-button--h-gridui-control gridui-u-button--shrink-0 gridui-u-button--p-0\",\n    \"gridui-u-button--[&.gridui-button-small]:w-gridui-control-small gridui-u-button--[&.gridui-button-small]:h-gridui-control-small\",\n    \"gridui-u-button--[&.gridui-button-large]:w-gridui-control-large gridui-u-button--[&.gridui-button-large]:h-gridui-control-large\",\n    \"gridui-u-button--[&.gridui-button-extra-large]:w-18 gridui-u-button--[&.gridui-button-extra-large]:h-18\",\n    \"gridui-u-button--pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-button--pointer-coarse:[&.gridui-button-small]:h-gridui-control\",\n));\n\nexport const buttonDividedStyles = cva(cn(\n    \"gridui-button-divided\",\n    \"gridui-u-button--w-full gridui-u-button--items-stretch gridui-u-button--justify-between gridui-u-button--gap-0 gridui-u-button--rounded-none gridui-u-button--p-0 gridui-u-button--text-start\",\n));\n\nexport const buttonLabelStyles = cva(cn(\n    \"gridui-button-label\",\n    \"gridui-u-button--inline-flex gridui-u-button--min-w-0 gridui-u-button--flex-1 gridui-u-button--items-center gridui-u-button--gap-gridui-8\",\n), {\n    variants: {\n        size: {\n            small: \"gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8\",\n            standard: \"gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16\",\n            large: \"gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24\",\n            \"extra-large\": \"gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24\",\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonStartIconStyles = cva(cn(\n    \"gridui-button-adornment gridui-button-start-icon\",\n    \"gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none\",\n), {\n    variants: {\n        iconSize: {\n            standard: \"\",\n            large: \"gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-32)]\",\n            \"extra-large\": \"gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-48)]\",\n        },\n    },\n    defaultVariants: { iconSize: \"standard\" },\n});\n\nexport const buttonStartRegionStyles = cva(cn(\n    \"gridui-button-start-region\",\n    \"gridui-u-button--justify-center gridui-u-button--self-stretch gridui-u-button--py-gridui-8\",\n), {\n    variants: {\n        size: {\n            small: \"gridui-u-button--w-gridui-control-small\",\n            standard: \"gridui-u-button--w-gridui-control\",\n            large: \"gridui-u-button--w-gridui-control-large\",\n            \"extra-large\": \"gridui-u-button--w-gridui-64\",\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonEndRegionStyles = cva(cn(\n    \"gridui-button-end-region\",\n    \"gridui-u-button--justify-center gridui-u-button--self-stretch\",\n), {\n    variants: {\n        size: {\n            small: \"gridui-u-button--w-gridui-control-small\",\n            standard: \"gridui-u-button--w-gridui-control\",\n            large: \"gridui-u-button--w-gridui-control-large\",\n            \"extra-large\": \"gridui-u-button--w-gridui-64\",\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonVariants = cva(buttonStyles(), {\n    variants: {\n        variant: {\n            primary: buttonPrimaryStyles(),\n            secondary: buttonSecondaryStyles(),\n            quiet: buttonQuietStyles(),\n            highlight: buttonHighlightStyles(),\n            text: buttonTextStyles(),\n            underlined: buttonUnderlinedStyles(),\n        },\n        size: {\n            small: buttonSmallStyles(),\n            standard: buttonStandardStyles(),\n            large: buttonLargeStyles(),\n            \"extra-large\": buttonExtraLargeStyles(),\n        },\n        layout: {\n            standard: \"\",\n            icon: buttonIconStyles(),\n            entry: buttonEntryStyles(),\n            cell: buttonCellStyles(),\n            rail: buttonRailStyles(),\n            divided: buttonDividedStyles(),\n        },\n        iconMotion: {\n            none: \"\",\n            outward: \"gridui-button-icon-motion-outward\",\n        },\n    },\n    compoundVariants: [\n        {\n            variant: [\n                \"text\",\n                \"underlined\",\n            ],\n            size: [\n                \"large\",\n                \"extra-large\",\n            ],\n            className: \"gridui-u-button--gap-gridui-32 gridui-u-button--type-supporting\",\n        },\n    ],\n    defaultVariants: {\n        variant: \"primary\",\n        size: \"standard\",\n    },\n});\n\ntype ButtonStyleVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonVariants = Omit<ButtonStyleVariants, \"variant\" | \"layout\"> & (\n    | {\n        readonly variant: \"text\" | \"underlined\";\n        readonly layout?: \"standard\" | null | undefined;\n    }\n    | {\n        readonly variant?: Exclude<ButtonStyleVariants[\"variant\"], \"text\" | \"underlined\">;\n        readonly layout?: ButtonStyleVariants[\"layout\"];\n    }\n);\n\nexport const buttonClass = (variants: ButtonVariants = {}, className?: string): string => {\n    const textVariant = variants.variant === \"text\" || variants.variant === \"underlined\";\n    return cn(buttonVariants({\n        variant: variants.variant,\n        size: variants.size,\n        layout: variants.layout,\n        iconMotion: variants.iconMotion,\n    }), textVariant && \"gridui-u-button--px-0\", className);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Content\n */\n\nimport { buttonEndRegionStyles, buttonLabelStyles, buttonStartIconStyles, buttonStartRegionStyles, type ButtonVariants } from \"./style\";\nimport type { ButtonAdornmentProps } from \"./types\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC, ReactNode } from \"react\";\n\nexport type ButtonContentProps = ButtonAdornmentProps & {\n    readonly children?: ReactNode;\n    readonly layout?: ButtonVariants[\"layout\"];\n    readonly size?: ButtonVariants[\"size\"];\n    readonly iconMotion?: ButtonVariants[\"iconMotion\"];\n};\n\nexport const ButtonContent: FC<ButtonContentProps> = (props: ButtonContentProps) => {\n    const { children, startIcon, startIconLayout, startIconSize, endIcon, layout, size, iconMotion } = props;\n    const dividedStart = layout === \"divided\" && startIconLayout === \"divided\";\n    const startAdornment = startIcon !== undefined && startIcon !== null && typeof startIcon !== \"boolean\" ? (<span\n        className={cn(\n            buttonStartIconStyles({ iconSize: startIconSize }),\n            dividedStart ? buttonStartRegionStyles({ size }) : \"gridui-button-content\",\n        )}\n        data-gridui-part=\"icon\"\n        data-gridui-draw=\"graphic\"\n        aria-hidden=\"true\"\n        inert\n    >\n        {dividedStart ? (<span\n            className=\"gridui-button-content gridui-u-button--inline-flex\"\n        >\n            {startIcon}\n        </span>) : startIcon}\n    </span>) : null;\n    const label = (<>\n        {!dividedStart && startAdornment}\n        <span\n            className=\"gridui-button-label-content\"\n            data-gridui-part=\"label\"\n            data-gridui-draw={layout === \"icon\" ? \"graphic\" : \"text\"}\n        >\n            {children}\n        </span>\n    </>);\n\n    return (<>\n        {dividedStart && startAdornment}\n        <span\n            className={cn(\"gridui-button-content\", layout === \"divided\" ? buttonLabelStyles({ size }) : \"gridui-button-body\")}\n            data-gridui-part=\"content\"\n            data-gridui-draw=\"group\"\n        >\n            {label}\n        </span>\n        {endIcon !== undefined && endIcon !== null && typeof endIcon !== \"boolean\" && (<span\n            className={cn(\n                \"gridui-button-adornment gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none\",\n                layout === \"divided\" ? buttonEndRegionStyles({ size }) : \"gridui-button-content\",\n            )}\n            data-gridui-part=\"icon\"\n            data-gridui-draw=\"graphic\"\n            aria-hidden=\"true\"\n            inert\n        >\n            {layout === \"divided\" || iconMotion === \"outward\" ? (<span\n                className={cn(\"gridui-u-button--inline-flex\", layout === \"divided\" && \"gridui-button-content\", iconMotion === \"outward\" && \"gridui-button-end-icon\")}\n            >\n                {endIcon}\n            </span>) : endIcon}\n        </span>)}\n    </>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Group Context\n */\n\nimport { createContext } from \"react\";\n\nexport type ButtonGroupLayout = \"standard\" | \"cells\";\nexport const ButtonGroupContext = createContext<ButtonGroupLayout | undefined>(undefined);\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Button\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { ButtonGroupContext } from \"../shared/group-context\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport { type ComponentPropsWithRef, type FC, useContext, useImperativeHandle, useLayoutEffect, useRef } from \"react\";\n\nexport type ButtonProps = ComponentPropsWithRef<\"button\"> & ButtonVariants & ButtonAdornmentProps & {\n    readonly loading?: boolean;\n};\n\nexport const Button: FC<ButtonProps> = (props: ButtonProps) => {\n    const {\n        variant,\n        size,\n        layout,\n        iconMotion,\n        loading = false,\n        disabled,\n        ref: forwardedRef,\n        onClick,\n        onClickCapture,\n        type = \"button\",\n        className,\n        children,\n        startIcon,\n        startIconLayout = \"inline\",\n        startIconSize = \"standard\",\n        endIcon,\n        ...restProps\n    } = props;\n    const button = useRef<HTMLButtonElement>(null);\n    useImperativeHandle(forwardedRef, () => {\n        return button.current!;\n    }, []);\n    const unavailable = disabled || restProps[\"aria-disabled\"] === true || restProps[\"aria-disabled\"] === \"true\";\n    const busy = loading && !unavailable;\n    useLayoutEffect(() => {\n        const element = button.current;\n        const form = element?.form;\n        if (!loading || type !== \"submit\" || !form) {\n            return;\n        }\n        const preventBusySubmit = (event: SubmitEvent) => {\n            if (event.submitter === element) {\n                event.preventDefault();\n                event.stopImmediatePropagation();\n            }\n        };\n        form.addEventListener(\"submit\", preventBusySubmit, true);\n        return () => {\n            form.removeEventListener(\"submit\", preventBusySubmit, true);\n        };\n    });\n    const groupLayout = useContext(ButtonGroupContext);\n    const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n        variant,\n        size,\n        layout: \"standard\",\n        iconMotion,\n    } : {\n        variant,\n        size,\n        layout,\n        iconMotion,\n    };\n    let drawing = \"surface\";\n    if (variant === \"underlined\") {\n        drawing = \"atomic\";\n    } else if (variant === \"text\" || variant === \"quiet\") {\n        drawing = \"group\";\n    }\n    return (<button\n        {...restProps}\n        data-gridui-component=\"button\"\n        data-gridui-draw={drawing}\n        data-gridui-button-group-item={groupLayout}\n        type={type}\n        ref={button}\n        disabled={disabled}\n        aria-disabled={loading || restProps[\"aria-disabled\"]}\n        data-gridui-busy={busy || undefined}\n        onClickCapture={(event) => {\n            if (loading || unavailable) {\n                event.preventDefault();\n                event.stopPropagation();\n                return;\n            }\n            onClickCapture?.(event);\n        }}\n        onClick={(event) => {\n            if (loading || unavailable) {\n                event.preventDefault();\n                event.stopPropagation();\n                return;\n            }\n            onClick?.(event);\n        }}\n        aria-busy={loading || restProps[\"aria-busy\"]}\n        className={buttonClass(variants, className)}\n    >\n        <ButtonContent\n            layout={variants.layout}\n            size={size}\n            iconMotion={iconMotion}\n            startIcon={startIcon}\n            startIconLayout={startIconLayout}\n            startIconSize={startIconSize}\n            endIcon={endIcon}\n        >\n            {children}\n        </ButtonContent>\n    </button>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace ButtonGroup\n * @description Button Group\n */\n\nimport { ButtonGroupContext, type ButtonGroupLayout } from \"../shared/group-context\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ButtonGroupProps = ComponentPropsWithRef<\"div\"> & {\n    readonly layout?: ButtonGroupLayout;\n};\n\nexport const ButtonGroup: FC<ButtonGroupProps> = (props: ButtonGroupProps) => {\n    const { layout = \"standard\", className, children, role = \"group\", ...restProps } = props;\n    return (<ButtonGroupContext\n        value={layout}\n    >\n        <div\n            {...restProps}\n            role={role}\n            data-layout={layout}\n            className={cn(\"gridui-button-group\", className)}\n        >\n            <div\n                className=\"gridui-button-group-items\"\n                data-layout={layout}\n            >\n                {children}\n            </div>\n        </div>\n    </ButtonGroupContext>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace ButtonLink\n * @description Button Link\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { ButtonGroupContext } from \"../shared/group-context\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport { type ComponentPropsWithRef, type FC, useContext } from \"react\";\n\nexport type ButtonLinkProps = ComponentPropsWithRef<\"a\"> & ButtonVariants & ButtonAdornmentProps & {\n    readonly href: string;\n};\n\nexport const ButtonLink: FC<ButtonLinkProps> = (props: ButtonLinkProps) => {\n    const {\n        variant = \"secondary\",\n        size,\n        layout,\n        iconMotion,\n        className,\n        children,\n        startIcon,\n        startIconLayout = \"inline\",\n        startIconSize = \"standard\",\n        endIcon,\n        ...restProps\n    } = props;\n    const groupLayout = useContext(ButtonGroupContext);\n    const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n        variant,\n        size,\n        layout: \"standard\",\n        iconMotion,\n    } : {\n        variant,\n        size,\n        layout,\n        iconMotion,\n    };\n    let drawing = \"surface\";\n    if (variant === \"underlined\") {\n        drawing = \"atomic\";\n    } else if (variant === \"text\" || variant === \"quiet\") {\n        drawing = \"group\";\n    }\n    return (<a\n        {...restProps}\n        data-gridui-component=\"button-link\"\n        data-gridui-draw={drawing}\n        data-gridui-button-group-item={groupLayout}\n        className={buttonClass(variants, className)}\n    >\n        <ButtonContent\n            layout={variants.layout}\n            size={size}\n            iconMotion={iconMotion}\n            startIcon={startIcon}\n            startIconLayout={startIconLayout}\n            startIconSize={startIconSize}\n            endIcon={endIcon}\n        >\n            {children}\n        </ButtonContent>\n    </a>);\n};\n"],
+  "mappings": "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",
+  "names": ["cn", "useRef", "jsx", "cn", "jsx", "useContext", "jsx"]
 }

package/dist/shared/group-context.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Button
+ * @namespace Shared
+ * @description Group Context
+ */
+export type ButtonGroupLayout = "standard" | "cells";
+export declare const ButtonGroupContext: import("react").Context<ButtonGroupLayout | undefined>;

package/dist/styles.css

@@ -218,6 +218,9 @@
   .gridui-u-button--data-disabled\:cursor-not-allowed[data-disabled] {
     cursor: not-allowed;
   }
+  .gridui-u-button--data-gridui-busy\:cursor-wait[data-gridui-busy] {
+    cursor: wait;
+  }
   @media (prefers-reduced-motion: reduce) {
     .gridui-u-button--motion-reduce\:transition-none {
       transition-property: none;
@@ -275,6 +278,14 @@
   .gridui-button-cell {
     border: 0;
   }
+  .gridui-button-label-content {
+    display: inline-flex;
+    min-width: 0;
+    flex-direction: inherit;
+    align-items: inherit;
+    justify-content: inherit;
+    gap: inherit;
+  }
   .gridui-button-body {
     display: inline-flex;
     flex: 1;
@@ -284,7 +295,7 @@
     justify-content: inherit;
     gap: inherit;
   }
-  .gridui-button:is(:disabled, [aria-disabled="true"], [data-disabled]) > .gridui-button-content, .gridui-button:is(:disabled, [aria-disabled="true"], [data-disabled])  > .gridui-button-start-region > .gridui-button-content, .gridui-button:is(:disabled, [aria-disabled="true"], [data-disabled])  > .gridui-button-end-region > .gridui-button-content {
+  .gridui-button:is(:disabled, [aria-disabled="true"]:not([data-gridui-busy]), [data-disabled]) > .gridui-button-content, .gridui-button:is(:disabled, [aria-disabled="true"]:not([data-gridui-busy]), [data-disabled])  > .gridui-button-start-region > .gridui-button-content, .gridui-button:is(:disabled, [aria-disabled="true"]:not([data-gridui-busy]), [data-disabled])  > .gridui-button-end-region > .gridui-button-content {
     opacity: 0.5;
   }
   .gridui-button-start-region {
@@ -297,16 +308,65 @@
     border-color: inherit;
   }
   @media (prefers-reduced-motion: no-preference) {
-    .gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"], [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]) .gridui-button-end-icon {
+    .gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"]:not([data-gridui-busy]), [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]) .gridui-button-end-icon {
       transition: transform var(--gridui-motion-duration-quick) var(--gridui-motion-ease-out);
     }
-    .gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"], [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]):hover .gridui-button-end-icon {
+    .gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"]:not([data-gridui-busy]), [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]):hover .gridui-button-end-icon {
       transform: translate(var(--gridui-space-4), calc(-1 * var(--gridui-space-4)));
     }
-    .gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"], [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]):dir(rtl):hover .gridui-button-end-icon {
+    .gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"]:not([data-gridui-busy]), [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]):dir(rtl):hover .gridui-button-end-icon {
       transform: translate(calc(-1 * var(--gridui-space-4)), calc(-1 * var(--gridui-space-4)));
     }
   }
+  .gridui-button-group {
+    --gridui-button-group-padding-block: var(--gridui-space-24);
+    container: gridui-button-group / inline-size;
+    min-width: 0;
+  }
+  .gridui-button-group-items {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    align-items: stretch;
+  }
+  .gridui-button-group-items[data-layout="standard"] {
+    gap: var(--gridui-space-8);
+  }
+  .gridui-button-group-items[data-layout="cells"] > [data-gridui-button-group-item]:not([hidden]) ~ [data-gridui-button-group-item]:not([hidden])::before {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 1px;
+    background: var(--gridui-button-group-border, var(--gridui-border));
+    pointer-events: none;
+    content: "";
+  }
+  @container gridui-button-group (max-width: 20rem) {
+    .gridui-button-group-items {
+      grid-auto-flow: row;
+      grid-auto-rows: 1fr;
+    }
+    .gridui-button-group-items[data-layout="cells"] > [data-gridui-button-group-item]:not([hidden]) ~ [data-gridui-button-group-item]:not([hidden])::before {
+      inset-block: 0 auto;
+      inset-inline: 0;
+      width: auto;
+      height: 1px;
+    }
+  }
+}
+@layer utilities {
+  .gridui-button-group-items > [data-gridui-button-group-item] {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+  }
+  .gridui-button-group-items[data-layout="cells"] > [data-gridui-button-group-item] {
+    min-height: 2.75rem;
+    padding: var(--gridui-button-group-padding-block) var(--gridui-space-24);
+    border: 0;
+    border-radius: 0;
+  }
 }
 @property --tw-border-style {
   syntax: "*";

package/docs/catalog.json

@@ -1,12 +1,16 @@
 {
   "schemaVersion": 1,
   "name": "@gridui/button",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "category": "core",
   "description": "GridUI React buttons and action helpers",
-  "usage": "`@gridui/button` owns native buttons, button-styled links, shared button classes, and async action scheduling. It has no domain, route, locale, or Layout dependency. Load `@gridui/button/styles.css` after the theme styles.",
+  "usage": "`@gridui/button` owns native buttons, button-styled links, shared button classes, ButtonGroup layouts, and async action scheduling. It has no domain, route, locale, or Layout dependency. Load `@gridui/button/styles.css` after the theme styles.",
   "documentation": [
-    "README.md"
+    "README.md",
+    "docs/reference/README.md",
+    "docs/reference/button-group.md",
+    "docs/reference/button-link.md",
+    "docs/reference/button.md"
   ],
   "exports": [
     {
@@ -19,6 +23,16 @@
       "kind": "function",
       "importPath": "@gridui/button"
     },
+    {
+      "name": "ButtonGroup",
+      "kind": "component",
+      "importPath": "@gridui/button"
+    },
+    {
+      "name": "ButtonGroupProps",
+      "kind": "type",
+      "importPath": "@gridui/button"
+    },
     {
       "name": "ButtonLink",
       "kind": "component",
@@ -50,6 +64,13 @@
     "@gridui/button/styles.css"
   ],
   "examples": [
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/actions.mdx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/async-actions.mdx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/button-groups.mdx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/full-width-actions.mdx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/getting-started.mdx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/navigation.mdx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/button-group.stories.tsx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/button-link.stories.tsx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/button.stories.tsx"
   ]

package/docs/reference/README.md

@@ -0,0 +1,6 @@
+<!-- Generated by pnpm docs:storybook. -->
+# Component reference
+
+- [Button](button.md)
+- [ButtonGroup](button-group.md)
+- [ButtonLink](button-link.md)

package/docs/reference/button-group.md

@@ -0,0 +1,71 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# ButtonGroup
+
+Arranges independent actions with shared height, responsive columns, and optional cell separators. Each action retains native keyboard and activation behavior.
+
+Import from ``@gridui/button`` and load Theme before this family's stylesheet.
+
+```tsx
+import { ButtonGroup } from "@gridui/button";
+import "@gridui/theme/styles.css";
+import "@gridui/button/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/button-group.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### role
+
+``AriaRole | undefined`` · Optional
+
+Default: ``"group"``
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLDivElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLDivElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLDivElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLDivElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLDivElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### layout
+
+``ButtonGroupLayout | undefined`` · Optional
+
+Default: ``"standard"``
+
+Layout within the containing region.
+

package/docs/reference/button-link.md

@@ -0,0 +1,107 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# ButtonLink
+
+Styles a native link as a button while preserving navigation behavior. Use Button for actions that do not navigate.
+
+Import from ``@gridui/button`` and load Theme before this family's stylesheet.
+
+```tsx
+import { ButtonLink } from "@gridui/button";
+import "@gridui/theme/styles.css";
+import "@gridui/button/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/button-link.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### href
+
+``string`` · Required
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLAnchorElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLAnchorElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLAnchorElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLAnchorElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLAnchorElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### size
+
+``"small" | "standard" | "large" | "extra-large" | null | undefined`` · Optional
+
+Default: ``"standard"``
+
+Component size preset.
+
+### iconMotion
+
+``"none" | "outward" | null | undefined`` · Optional
+
+### variant
+
+``"text" | "primary" | "secondary" | "quiet" | "highlight" | "underlined" | null | undefined`` · Optional
+
+Default: ``"secondary"``
+
+Visual variant.
+
+### layout
+
+``"cell" | "standard" | "icon" | "entry" | "rail" | "divided" | null | undefined`` · Optional
+
+Layout within the containing region.
+
+### startIcon
+
+``ReactNode`` · Optional
+
+### startIconLayout
+
+``"divided" | "inline" | undefined`` · Optional
+
+Default: ``"inline"``
+
+### startIconSize
+
+``"standard" | "large" | "extra-large" | undefined`` · Optional
+
+Default: ``"standard"``
+
+### endIcon
+
+``ReactNode`` · Optional
+

package/docs/reference/button.md

@@ -0,0 +1,115 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# Button
+
+Triggers an action such as saving, submitting, or opening a dialog. Choose a variant that reflects the action's importance.
+
+Import from ``@gridui/button`` and load Theme before this family's stylesheet.
+
+```tsx
+import { Button } from "@gridui/button";
+import "@gridui/theme/styles.css";
+import "@gridui/button/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/button.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### type
+
+``"button" | "submit" | "reset" | undefined`` · Optional
+
+Default: ``"button"``
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLButtonElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLButtonElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLButtonElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLButtonElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLButtonElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### size
+
+``"small" | "standard" | "large" | "extra-large" | null | undefined`` · Optional
+
+Default: ``"standard"``
+
+Component size preset.
+
+### iconMotion
+
+``"none" | "outward" | null | undefined`` · Optional
+
+### variant
+
+``"text" | "primary" | "secondary" | "quiet" | "highlight" | "underlined" | null | undefined`` · Optional
+
+Default: ``"primary"``
+
+Visual variant.
+
+### layout
+
+``"cell" | "standard" | "icon" | "entry" | "rail" | "divided" | null | undefined`` · Optional
+
+Layout within the containing region.
+
+### startIcon
+
+``ReactNode`` · Optional
+
+### startIconLayout
+
+``"divided" | "inline" | undefined`` · Optional
+
+Default: ``"inline"``
+
+### startIconSize
+
+``"standard" | "large" | "extra-large" | undefined`` · Optional
+
+Default: ``"standard"``
+
+### endIcon
+
+``ReactNode`` · Optional
+
+### loading
+
+``boolean | undefined`` · Optional
+
+Default: ``false``
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/button",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "GridUI React buttons and action helpers",
   "license": "UNLICENSED",
   "type": "module",
@@ -23,8 +23,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@gridui/style-utils": "^3.0.0",
-    "@gridui/theme": "^2.5.3",
+    "@gridui/style-utils": "^4.0.0",
+    "@gridui/theme": "^2.5.4",
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {