@gridui/button 4.0.0 → 4.1.0

package/README.md

@@ -180,3 +180,5 @@ 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.

package/dist/index.js

@@ -240,6 +240,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 +255,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 +271,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 +283,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(
@@ -315,10 +329,18 @@ 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,
       type,
       disabled: disabled || loading,
       "aria-busy": loading || restProps["aria-busy"],
@@ -367,10 +389,18 @@ var ButtonLink = (props) => {
     layout,
     iconMotion
   };
+  let drawing = "surface";
+  if (variant === "underlined") {
+    drawing = "atomic";
+  } else if (variant === "text" || variant === "quiet") {
+    drawing = "group";
+  }
   return /* @__PURE__ */ jsx3(
     "a",
     {
       ...restProps,
+      "data-gridui-component": "button-link",
+      "data-gridui-draw": drawing,
       className: buttonClass(variants, className),
       children: /* @__PURE__ */ jsx3(
         ButtonContent,

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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",
+  "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        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 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    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        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    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        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"]
 }

package/dist/styles.css

@@ -275,6 +275,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;

package/docs/catalog.json

@@ -1,12 +1,15 @@
 {
   "schemaVersion": 1,
   "name": "@gridui/button",
-  "version": "4.0.0",
+  "version": "4.1.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.",
   "documentation": [
-    "README.md"
+    "README.md",
+    "docs/reference/README.md",
+    "docs/reference/button-link.md",
+    "docs/reference/button.md"
   ],
   "exports": [
     {
@@ -50,6 +53,10 @@
     "@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/full-width-actions.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-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,5 @@
+<!-- Generated by pnpm docs:storybook. -->
+# Component reference
+
+- [Button](button.md)
+- [ButtonLink](button-link.md)

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": "4.1.0",
   "description": "GridUI React buttons and action helpers",
   "license": "UNLICENSED",
   "type": "module",
@@ -23,7 +23,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@gridui/style-utils": "^3.0.0",
+    "@gridui/style-utils": "^4.0.0",
     "@gridui/theme": "^2.5.3",
     "class-variance-authority": "0.7.1"
   },