npm - @gridui/button - Versions diffs - 3.1.2 → 4.1.0 - Mend

@gridui/button 3.1.2 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +8 -4
package/dist/index.js +92 -56
package/dist/index.js.map +2 -2
package/dist/styles.css +115 -117
package/docs/catalog.json +9 -2
package/docs/reference/README.md +5 -0
package/docs/reference/button-link.md +107 -0
package/docs/reference/button.md +115 -0
package/package.json +3 -3

package/README.md CHANGED Viewed

@@ -82,7 +82,7 @@ buttons use a transparent fill, foreground text, and a border; quiet buttons
 omit the border. All variants use Theme's shared hover and keyboard-focus outlines. Pressing
 overlays the existing background without fading the label or icon. Highlight
 buttons use `brand-tint` for persistent selection. Disabled buttons keep their
-base fill and reduced opacity. Standard and small
+base fill, outer border, and internal separators; only their content is dimmed. Standard and small
 sizes scale with the consumer's root font size.
 `highlight` uses the local `brand-tint` fill and normal foreground. Use it for a
@@ -103,7 +103,9 @@ an inset selected surface. See the [composition recipe](https://github.com/sudo-
 constraints for caller-owned native elements. `startIcon` and `endIcon` are
 component props, not styling variants. It uses `cn` for consumer class overrides.
 Callers using the class helper own native semantics, icon accessibility, and
-loading behavior.
+loading behavior. The helper does not wrap content. Custom controls must dim
+their owned content elements for disabled states while leaving structural
+boundaries fully opaque.
 ## Divided actions
@@ -129,8 +131,8 @@ giving the containing region a consistent responsive width.
 The label uses the selected size's padding. The trailing region is 2.25rem,
 2.75rem, 3rem, or 4rem wide for small through extra-large sizes. Both regions
-stretch together when a long label wraps. The separator uses the inherited
-foreground with reduced opacity and follows logical text direction. Appearance
+stretch together when a long label wraps. The separators inherit the control’s border color, including variant and caller
+overrides, and follow logical text direction. Appearance
 still comes from `variant`; the layout does not choose a brand, fill, or route.
 The containing page owns its maximum width.
@@ -178,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 CHANGED Viewed

@@ -43,129 +43,129 @@ import { cn } from "@gridui/style-utils";
 import { cva } from "class-variance-authority";
 var buttonStyles = cva(cn(
   "gridui-button",
-  "gridui-u-inline-flex gridui-u-w-fit gridui-u-max-w-full gridui-u-min-w-0 gridui-u-items-center gridui-u-justify-center gridui-u-gap-gridui-8 gridui-u-border gridui-u-border-solid gridui-u-border-transparent gridui-u-rounded-control gridui-u-type-ui gridui-u-text-center gridui-u-no-underline gridui-u-wrap-anywhere gridui-u-cursor-pointer gridui-u-transition-colors gridui-u-duration-(--gridui-motion-duration-quick) gridui-u-ease-(--gridui-motion-ease-out)",
-  "gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size)] gridui-u-[&_svg]:w-(--gridui-button-icon-size) gridui-u-[&_svg]:h-(--gridui-button-icon-size) gridui-u-[&_svg]:shrink-0 gridui-u-[&_svg]:pointer-events-none",
-  "gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed",
-  "gridui-u-aria-disabled:opacity-50 gridui-u-aria-disabled:cursor-not-allowed",
-  "gridui-u-data-disabled:opacity-50 gridui-u-data-disabled:cursor-not-allowed",
-  "gridui-u-motion-reduce:transition-none"
+  "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)",
+  "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",
+  "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--motion-reduce:transition-none"
 ));
 var buttonStandardStyles = cva(cn(
   "gridui-button-standard",
-  "gridui-u-min-h-gridui-control gridui-u-py-gridui-8 gridui-u-px-gridui-16"
+  "gridui-u-button--min-h-gridui-control gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16"
 ));
 var buttonSmallStyles = cva(cn(
   "gridui-button-small",
-  "gridui-u-min-h-gridui-control-small gridui-u-py-gridui-4 gridui-u-px-gridui-8"
+  "gridui-u-button--min-h-gridui-control-small gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8"
 ));
 var buttonLargeStyles = cva(cn(
   "gridui-button-large",
-  "gridui-u-min-h-gridui-control-large gridui-u-py-gridui-8 gridui-u-px-gridui-24 gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size-large)]"
+  "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)]"
 ));
 var buttonExtraLargeStyles = cva(cn(
   "gridui-button-extra-large",
-  "gridui-u-min-h-18 gridui-u-py-gridui-16 gridui-u-px-gridui-24 gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size-large)]"
+  "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)]"
 ));
 var buttonPrimaryStyles = cva(cn(
   "gridui-button-primary",
-  "gridui-u-text-accent-foreground gridui-u-bg-accent-background gridui-u-border-accent-background"
+  "gridui-u-button--text-accent-foreground gridui-u-button--bg-accent-background gridui-u-button--border-accent-background"
 ));
 var buttonSecondaryStyles = cva(cn(
   "gridui-button-secondary",
-  "gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-border"
+  "gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-border"
 ));
 var buttonQuietStyles = cva(cn(
   "gridui-button-quiet",
-  "gridui-u-text-foreground gridui-u-bg-transparent"
+  "gridui-u-button--text-foreground gridui-u-button--bg-transparent"
 ));
 var buttonHighlightStyles = cva(cn(
   "gridui-button-highlight",
-  "gridui-u-text-foreground gridui-u-bg-brand-tint"
+  "gridui-u-button--text-foreground gridui-u-button--bg-brand-tint"
 ));
 var buttonTextStyles = cva(cn(
   "gridui-button-text",
-  "gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-rounded-none"
+  "gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-0 gridui-u-button--rounded-none"
 ));
 var buttonUnderlinedStyles = cva(cn(
   "gridui-button-underlined",
-  "gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-border-b gridui-u-border-foreground gridui-u-rounded-none"
+  "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"
 ));
 var buttonEntryStyles = cva(cn(
   "gridui-button-entry",
-  "gridui-u-justify-between gridui-u-w-full gridui-u-py-gridui-16 gridui-u-px-gridui-24"
+  "gridui-u-button--justify-between gridui-u-button--w-full gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24"
 ));
 var buttonCellStyles = cva(cn(
   "gridui-button-cell",
-  "gridui-u-w-full gridui-u-h-full gridui-u-justify-start gridui-u-rounded-none gridui-u-border-0 gridui-u-py-gridui-16 gridui-u-px-gridui-24 gridui-u-text-left"
+  "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"
 ));
 var buttonRailStyles = cva(cn(
   "gridui-button-rail",
-  "gridui-u-w-full gridui-u-min-w-gridui-24 gridui-u-flex-col gridui-u-py-gridui-8 gridui-u-px-0",
-  "gridui-u-[&_>_span]:[writing-mode:vertical-rl] gridui-u-[&_>_span]:whitespace-nowrap"
+  "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",
+  "gridui-u-button--[&_>_span]:[writing-mode:vertical-rl] gridui-u-button--[&_>_span]:whitespace-nowrap"
 ));
 var buttonIconStyles = cva(cn(
   "gridui-button-icon",
-  "gridui-u-w-gridui-control gridui-u-h-gridui-control gridui-u-shrink-0 gridui-u-p-0",
-  "gridui-u-[&.gridui-button-small]:w-gridui-control-small gridui-u-[&.gridui-button-small]:h-gridui-control-small",
-  "gridui-u-[&.gridui-button-large]:w-gridui-control-large gridui-u-[&.gridui-button-large]:h-gridui-control-large",
-  "gridui-u-[&.gridui-button-extra-large]:w-18 gridui-u-[&.gridui-button-extra-large]:h-18",
-  "gridui-u-pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-pointer-coarse:[&.gridui-button-small]:h-gridui-control"
+  "gridui-u-button--w-gridui-control gridui-u-button--h-gridui-control gridui-u-button--shrink-0 gridui-u-button--p-0",
+  "gridui-u-button--[&.gridui-button-small]:w-gridui-control-small gridui-u-button--[&.gridui-button-small]:h-gridui-control-small",
+  "gridui-u-button--[&.gridui-button-large]:w-gridui-control-large gridui-u-button--[&.gridui-button-large]:h-gridui-control-large",
+  "gridui-u-button--[&.gridui-button-extra-large]:w-18 gridui-u-button--[&.gridui-button-extra-large]:h-18",
+  "gridui-u-button--pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-button--pointer-coarse:[&.gridui-button-small]:h-gridui-control"
 ));
 var buttonDividedStyles = cva(cn(
   "gridui-button-divided",
-  "gridui-u-w-full gridui-u-items-stretch gridui-u-justify-between gridui-u-gap-0 gridui-u-rounded-none gridui-u-p-0 gridui-u-text-start"
+  "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"
 ));
 var buttonLabelStyles = cva(cn(
   "gridui-button-label",
-  "gridui-u-inline-flex gridui-u-min-w-0 gridui-u-flex-1 gridui-u-items-center gridui-u-gap-gridui-8"
+  "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"
 ), {
   variants: {
     size: {
-      small: "gridui-u-py-gridui-4 gridui-u-px-gridui-8",
-      standard: "gridui-u-py-gridui-8 gridui-u-px-gridui-16",
-      large: "gridui-u-py-gridui-8 gridui-u-px-gridui-24",
-      "extra-large": "gridui-u-py-gridui-16 gridui-u-px-gridui-24"
+      small: "gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8",
+      standard: "gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16",
+      large: "gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24",
+      "extra-large": "gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24"
     }
   },
   defaultVariants: { size: "standard" }
 });
 var buttonStartIconStyles = cva(cn(
   "gridui-button-adornment gridui-button-start-icon",
-  "gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none"
+  "gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none"
 ), {
   variants: {
     iconSize: {
       standard: "",
-      large: "gridui-u-[--gridui-button-icon-size:var(--gridui-space-32)]",
-      "extra-large": "gridui-u-[--gridui-button-icon-size:var(--gridui-space-48)]"
+      large: "gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-32)]",
+      "extra-large": "gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-48)]"
     }
   },
   defaultVariants: { iconSize: "standard" }
 });
 var buttonStartRegionStyles = cva(cn(
   "gridui-button-start-region",
-  "gridui-u-justify-center gridui-u-self-stretch gridui-u-py-gridui-8 gridui-u-border-e gridui-u-border-solid gridui-u-border-current/25"
+  "gridui-u-button--justify-center gridui-u-button--self-stretch gridui-u-button--py-gridui-8"
 ), {
   variants: {
     size: {
-      small: "gridui-u-w-gridui-control-small",
-      standard: "gridui-u-w-gridui-control",
-      large: "gridui-u-w-gridui-control-large",
-      "extra-large": "gridui-u-w-gridui-64"
+      small: "gridui-u-button--w-gridui-control-small",
+      standard: "gridui-u-button--w-gridui-control",
+      large: "gridui-u-button--w-gridui-control-large",
+      "extra-large": "gridui-u-button--w-gridui-64"
     }
   },
   defaultVariants: { size: "standard" }
 });
 var buttonEndRegionStyles = cva(cn(
   "gridui-button-end-region",
-  "gridui-u-justify-center gridui-u-self-stretch gridui-u-border-s gridui-u-border-solid gridui-u-border-current/25"
+  "gridui-u-button--justify-center gridui-u-button--self-stretch"
 ), {
   variants: {
     size: {
-      small: "gridui-u-w-gridui-control-small",
-      standard: "gridui-u-w-gridui-control",
-      large: "gridui-u-w-gridui-control-large",
-      "extra-large": "gridui-u-w-gridui-64"
+      small: "gridui-u-button--w-gridui-control-small",
+      standard: "gridui-u-button--w-gridui-control",
+      large: "gridui-u-button--w-gridui-control-large",
+      "extra-large": "gridui-u-button--w-gridui-64"
     }
   },
   defaultVariants: { size: "standard" }
@@ -209,7 +209,7 @@ var buttonVariants = cva(buttonStyles(), {
         "large",
         "extra-large"
       ],
-      className: "gridui-u-gap-gridui-32 gridui-u-type-supporting"
+      className: "gridui-u-button--gap-gridui-32 gridui-u-button--type-supporting"
     }
   ],
   defaultVariants: {
@@ -224,7 +224,7 @@ var buttonClass = (variants = {}, className) => {
     size: variants.size,
     layout: variants.layout,
     iconMotion: variants.iconMotion
-  }), textVariant && "gridui-u-px-0", className);
+  }), textVariant && "gridui-u-button--px-0", className);
 };
 // src/shared/content.tsx
@@ -238,39 +238,59 @@ var ButtonContent = (props) => {
     {
       className: cn2(
         buttonStartIconStyles({ iconSize: startIconSize }),
-        dividedStart && buttonStartRegionStyles({ size })
+        dividedStart ? buttonStartRegionStyles({ size }) : "gridui-button-content"
       ),
+      "data-gridui-part": "icon",
+      "data-gridui-draw": "graphic",
       "aria-hidden": "true",
       inert: true,
-      children: startIcon
+      children: dividedStart ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "gridui-button-content gridui-u-button--inline-flex",
+          children: startIcon
+        }
+      ) : startIcon
     }
   ) : 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,
-    layout === "divided" ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       "span",
       {
-        className: buttonLabelStyles({ size }),
+        className: cn2("gridui-button-content", layout === "divided" ? buttonLabelStyles({ size }) : "gridui-button-body"),
+        "data-gridui-part": "content",
+        "data-gridui-draw": "group",
         children: label
       }
-    ) : label,
+    ),
     endIcon !== void 0 && endIcon !== null && typeof endIcon !== "boolean" && /* @__PURE__ */ jsx(
       "span",
       {
         className: cn2(
-          "gridui-button-adornment gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none",
-          layout === "divided" && buttonEndRegionStyles({ size })
+          "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: iconMotion === "outward" ? /* @__PURE__ */ jsx(
+        children: layout === "divided" || iconMotion === "outward" ? /* @__PURE__ */ jsx(
           "span",
           {
-            className: "gridui-button-end-icon gridui-u-inline-flex",
+            className: cn2("gridui-u-button--inline-flex", layout === "divided" && "gridui-button-content", iconMotion === "outward" && "gridui-button-end-icon"),
             children: endIcon
           }
         ) : endIcon
@@ -309,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"],
@@ -361,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 CHANGED Viewed

@@ -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-inline-flex gridui-u-w-fit gridui-u-max-w-full gridui-u-min-w-0 gridui-u-items-center gridui-u-justify-center gridui-u-gap-gridui-8 gridui-u-border gridui-u-border-solid gridui-u-border-transparent gridui-u-rounded-control gridui-u-type-ui gridui-u-text-center gridui-u-no-underline gridui-u-wrap-anywhere gridui-u-cursor-pointer gridui-u-transition-colors gridui-u-duration-(--gridui-motion-duration-quick) gridui-u-ease-(--gridui-motion-ease-out)\",\n    \"gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size)] gridui-u-[&_svg]:w-(--gridui-button-icon-size) gridui-u-[&_svg]:h-(--gridui-button-icon-size) gridui-u-[&_svg]:shrink-0 gridui-u-[&_svg]:pointer-events-none\",\n    \"gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed\",\n    \"gridui-u-aria-disabled:opacity-50 gridui-u-aria-disabled:cursor-not-allowed\",\n    \"gridui-u-data-disabled:opacity-50 gridui-u-data-disabled:cursor-not-allowed\",\n    \"gridui-u-motion-reduce:transition-none\",\n));\n\nexport const buttonStandardStyles = cva(cn(\n    \"gridui-button-standard\",\n    \"gridui-u-min-h-gridui-control gridui-u-py-gridui-8 gridui-u-px-gridui-16\",\n));\n\nexport const buttonSmallStyles = cva(cn(\n    \"gridui-button-small\",\n    \"gridui-u-min-h-gridui-control-small gridui-u-py-gridui-4 gridui-u-px-gridui-8\",\n));\n\nexport const buttonLargeStyles = cva(cn(\n    \"gridui-button-large\",\n    \"gridui-u-min-h-gridui-control-large gridui-u-py-gridui-8 gridui-u-px-gridui-24 gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonExtraLargeStyles = cva(cn(\n    \"gridui-button-extra-large\",\n    \"gridui-u-min-h-18 gridui-u-py-gridui-16 gridui-u-px-gridui-24 gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonPrimaryStyles = cva(cn(\n    \"gridui-button-primary\",\n    \"gridui-u-text-accent-foreground gridui-u-bg-accent-background gridui-u-border-accent-background\",\n));\n\nexport const buttonSecondaryStyles = cva(cn(\n    \"gridui-button-secondary\",\n    \"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-border\",\n));\n\nexport const buttonQuietStyles = cva(cn(\n    \"gridui-button-quiet\",\n    \"gridui-u-text-foreground gridui-u-bg-transparent\",\n));\n\nexport const buttonHighlightStyles = cva(cn(\n    \"gridui-button-highlight\",\n    \"gridui-u-text-foreground gridui-u-bg-brand-tint\",\n));\n\nexport const buttonTextStyles = cva(cn(\n    \"gridui-button-text\",\n    \"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-rounded-none\",\n));\n\nexport const buttonUnderlinedStyles = cva(cn(\n    \"gridui-button-underlined\",\n    \"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-border-b gridui-u-border-foreground gridui-u-rounded-none\",\n));\n\nexport const buttonEntryStyles = cva(cn(\n    \"gridui-button-entry\",\n    \"gridui-u-justify-between gridui-u-w-full gridui-u-py-gridui-16 gridui-u-px-gridui-24\",\n));\n\nexport const buttonCellStyles = cva(cn(\n    \"gridui-button-cell\",\n    \"gridui-u-w-full gridui-u-h-full gridui-u-justify-start gridui-u-rounded-none gridui-u-border-0 gridui-u-py-gridui-16 gridui-u-px-gridui-24 gridui-u-text-left\",\n));\n\nexport const buttonRailStyles = cva(cn(\n    \"gridui-button-rail\",\n    \"gridui-u-w-full gridui-u-min-w-gridui-24 gridui-u-flex-col gridui-u-py-gridui-8 gridui-u-px-0\",\n    \"gridui-u-[&_>_span]:[writing-mode:vertical-rl] gridui-u-[&_>_span]:whitespace-nowrap\",\n));\n\nexport const buttonIconStyles = cva(cn(\n    \"gridui-button-icon\",\n    \"gridui-u-w-gridui-control gridui-u-h-gridui-control gridui-u-shrink-0 gridui-u-p-0\",\n    \"gridui-u-[&.gridui-button-small]:w-gridui-control-small gridui-u-[&.gridui-button-small]:h-gridui-control-small\",\n    \"gridui-u-[&.gridui-button-large]:w-gridui-control-large gridui-u-[&.gridui-button-large]:h-gridui-control-large\",\n    \"gridui-u-[&.gridui-button-extra-large]:w-18 gridui-u-[&.gridui-button-extra-large]:h-18\",\n    \"gridui-u-pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-pointer-coarse:[&.gridui-button-small]:h-gridui-control\",\n));\n\nexport const buttonDividedStyles = cva(cn(\n    \"gridui-button-divided\",\n    \"gridui-u-w-full gridui-u-items-stretch gridui-u-justify-between gridui-u-gap-0 gridui-u-rounded-none gridui-u-p-0 gridui-u-text-start\",\n));\n\nexport const buttonLabelStyles = cva(cn(\n    \"gridui-button-label\",\n    \"gridui-u-inline-flex gridui-u-min-w-0 gridui-u-flex-1 gridui-u-items-center gridui-u-gap-gridui-8\",\n), {\n    variants: {\n        size: {\n            small: \"gridui-u-py-gridui-4 gridui-u-px-gridui-8\",\n            standard: \"gridui-u-py-gridui-8 gridui-u-px-gridui-16\",\n            large: \"gridui-u-py-gridui-8 gridui-u-px-gridui-24\",\n            \"extra-large\": \"gridui-u-py-gridui-16 gridui-u-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-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none\",\n), {\n    variants: {\n        iconSize: {\n            standard: \"\",\n            large: \"gridui-u-[--gridui-button-icon-size:var(--gridui-space-32)]\",\n            \"extra-large\": \"gridui-u-[--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-justify-center gridui-u-self-stretch gridui-u-py-gridui-8 gridui-u-border-e gridui-u-border-solid gridui-u-border-current/25\",\n), {\n    variants: {\n        size: {\n            small: \"gridui-u-w-gridui-control-small\",\n            standard: \"gridui-u-w-gridui-control\",\n            large: \"gridui-u-w-gridui-control-large\",\n            \"extra-large\": \"gridui-u-w-gridui-64\",\n        },\n    },\n    defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonEndRegionStyles = cva(cn(\n    \"gridui-button-end-region\",\n    \"gridui-u-justify-center gridui-u-self-stretch gridui-u-border-s gridui-u-border-solid gridui-u-border-current/25\",\n), {\n    variants: {\n        size: {\n            small: \"gridui-u-w-gridui-control-small\",\n            standard: \"gridui-u-w-gridui-control\",\n            large: \"gridui-u-w-gridui-control-large\",\n            \"extra-large\": \"gridui-u-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-gap-gridui-32 gridui-u-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-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 }),\n        )}\n        aria-hidden=\"true\"\n        inert\n    >\n        {startIcon}\n    </span>) : null;\n    const label = (<>\n        {!dividedStart && startAdornment}\n        {children}\n    </>);\n\n    return (<>\n        {dividedStart && startAdornment}\n        {layout === \"divided\" ? (<span\n            className={buttonLabelStyles({ size })}\n        >\n            {label}\n        </span>) : label}\n        {endIcon !== undefined && endIcon !== null && typeof endIcon !== \"boolean\" && (<span\n            className={cn(\n                \"gridui-button-adornment gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none\",\n                layout === \"divided\" && buttonEndRegionStyles({ size }),\n            )}\n            aria-hidden=\"true\"\n            inert\n        >\n            {iconMotion === \"outward\" ? (<span\n                className=\"gridui-button-end-icon gridui-u-inline-flex\"\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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -9,302 +9,300 @@
   }
 }
 @layer utilities {
-  .gridui-u-pointer-events-none {
+  .gridui-u-button--pointer-events-none {
     pointer-events: none;
   }
-  .gridui-u-inline-flex {
+  .gridui-u-button--inline-flex {
     display: inline-flex;
   }
-  .gridui-u-h-full {
+  .gridui-u-button--h-full {
     height: 100%;
   }
-  .gridui-u-h-gridui-control {
+  .gridui-u-button--h-gridui-control {
     height: var(--gridui-control-min-height);
   }
-  .gridui-u-min-h-18 {
+  .gridui-u-button--min-h-18 {
     min-height: calc(var(--spacing) * 18);
   }
-  .gridui-u-min-h-gridui-control {
+  .gridui-u-button--min-h-gridui-control {
     min-height: var(--gridui-control-min-height);
   }
-  .gridui-u-min-h-gridui-control-large {
+  .gridui-u-button--min-h-gridui-control-large {
     min-height: var(--gridui-control-min-height-large);
   }
-  .gridui-u-min-h-gridui-control-small {
+  .gridui-u-button--min-h-gridui-control-small {
     min-height: var(--gridui-control-min-height-small);
   }
-  .gridui-u-w-fit {
+  .gridui-u-button--w-fit {
     width: fit-content;
   }
-  .gridui-u-w-full {
+  .gridui-u-button--w-full {
     width: 100%;
   }
-  .gridui-u-w-gridui-64 {
+  .gridui-u-button--w-gridui-64 {
     width: var(--gridui-space-64);
   }
-  .gridui-u-w-gridui-control {
+  .gridui-u-button--w-gridui-control {
     width: var(--gridui-control-min-height);
   }
-  .gridui-u-w-gridui-control-large {
+  .gridui-u-button--w-gridui-control-large {
     width: var(--gridui-control-min-height-large);
   }
-  .gridui-u-w-gridui-control-small {
+  .gridui-u-button--w-gridui-control-small {
     width: var(--gridui-control-min-height-small);
   }
-  .gridui-u-max-w-full {
+  .gridui-u-button--max-w-full {
     max-width: 100%;
   }
-  .gridui-u-min-w-0 {
+  .gridui-u-button--min-w-0 {
     min-width: 0px;
   }
-  .gridui-u-min-w-gridui-24 {
+  .gridui-u-button--min-w-gridui-24 {
     min-width: var(--gridui-space-24);
   }
-  .gridui-u-flex-1 {
+  .gridui-u-button--flex-1 {
     flex: 1;
   }
-  .gridui-u-shrink-0 {
+  .gridui-u-button--shrink-0 {
     flex-shrink: 0;
   }
-  .gridui-u-cursor-pointer {
+  .gridui-u-button--cursor-pointer {
     cursor: pointer;
   }
-  .gridui-u-flex-col {
+  .gridui-u-button--flex-col {
     flex-direction: column;
   }
-  .gridui-u-items-center {
+  .gridui-u-button--items-center {
     align-items: center;
   }
-  .gridui-u-items-stretch {
+  .gridui-u-button--items-stretch {
     align-items: stretch;
   }
-  .gridui-u-justify-between {
+  .gridui-u-button--justify-between {
     justify-content: space-between;
   }
-  .gridui-u-justify-center {
+  .gridui-u-button--justify-center {
     justify-content: center;
   }
-  .gridui-u-justify-start {
+  .gridui-u-button--justify-start {
     justify-content: flex-start;
   }
-  .gridui-u-gap-0 {
+  .gridui-u-button--gap-0 {
     gap: 0px;
   }
-  .gridui-u-gap-gridui-8 {
+  .gridui-u-button--gap-gridui-8 {
     gap: var(--gridui-space-8);
   }
-  .gridui-u-gap-gridui-32 {
+  .gridui-u-button--gap-gridui-32 {
     gap: var(--gridui-space-32);
   }
-  .gridui-u-self-stretch {
+  .gridui-u-button--self-stretch {
     align-self: stretch;
   }
-  .gridui-u-rounded-control {
+  .gridui-u-button--rounded-control {
     border-radius: var(--gridui-control-radius);
   }
-  .gridui-u-rounded-none {
+  .gridui-u-button--rounded-none {
     border-radius: 0;
   }
-  .gridui-u-border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-  .gridui-u-border-0 {
+  .gridui-u-button--border-0 {
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
-  .gridui-u-border-s {
-    border-inline-start-style: var(--tw-border-style);
-    border-inline-start-width: 1px;
-  }
-  .gridui-u-border-e {
-    border-inline-end-style: var(--tw-border-style);
-    border-inline-end-width: 1px;
-  }
-  .gridui-u-border-b {
+  .gridui-u-button--border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .gridui-u-border-solid {
-    --tw-border-style: solid;
-    border-style: solid;
-  }
-  .gridui-u-border-accent-background {
+  .gridui-u-button--border-accent-background {
     border-color: var(--gridui-accent-background);
   }
-  .gridui-u-border-border {
+  .gridui-u-button--border-border {
     border-color: var(--gridui-border);
   }
-  .gridui-u-border-current\/25 {
-    border-color: currentcolor;
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, currentcolor 25%, transparent);
-    }
-  }
-  .gridui-u-border-foreground {
+  .gridui-u-button--border-foreground {
     border-color: var(--gridui-foreground);
   }
-  .gridui-u-border-transparent {
-    border-color: transparent;
-  }
-  .gridui-u-bg-accent-background {
+  .gridui-u-button--bg-accent-background {
     background-color: var(--gridui-accent-background);
   }
-  .gridui-u-bg-brand-tint {
+  .gridui-u-button--bg-brand-tint {
     background-color: var(--gridui-brand-tint);
   }
-  .gridui-u-bg-transparent {
+  .gridui-u-button--bg-transparent {
     background-color: transparent;
   }
-  .gridui-u-p-0 {
+  .gridui-u-button--p-0 {
     padding: 0px;
   }
-  .gridui-u-px-0 {
+  .gridui-u-button--px-0 {
     padding-inline: 0px;
   }
-  .gridui-u-px-gridui-8 {
+  .gridui-u-button--px-gridui-8 {
     padding-inline: var(--gridui-space-8);
   }
-  .gridui-u-px-gridui-16 {
+  .gridui-u-button--px-gridui-16 {
     padding-inline: var(--gridui-space-16);
   }
-  .gridui-u-px-gridui-24 {
+  .gridui-u-button--px-gridui-24 {
     padding-inline: var(--gridui-space-24);
   }
-  .gridui-u-py-gridui-4 {
+  .gridui-u-button--py-gridui-4 {
     padding-block: var(--gridui-space-4);
   }
-  .gridui-u-py-gridui-8 {
+  .gridui-u-button--py-gridui-8 {
     padding-block: var(--gridui-space-8);
   }
-  .gridui-u-py-gridui-16 {
+  .gridui-u-button--py-gridui-16 {
     padding-block: var(--gridui-space-16);
   }
-  .gridui-u-text-center {
+  .gridui-u-button--text-center {
     text-align: center;
   }
-  .gridui-u-text-left {
+  .gridui-u-button--text-left {
     text-align: left;
   }
-  .gridui-u-text-start {
+  .gridui-u-button--text-start {
     text-align: start;
   }
-  .gridui-u-type-supporting {
+  .gridui-u-button--type-supporting {
     font: var(--gridui-type-supporting);
     letter-spacing: normal;
   }
-  .gridui-u-type-ui {
+  .gridui-u-button--type-ui {
     font: var(--gridui-type-ui);
     letter-spacing: normal;
   }
-  .gridui-u-wrap-anywhere {
+  .gridui-u-button--wrap-anywhere {
     overflow-wrap: anywhere;
   }
-  .gridui-u-text-accent-foreground {
+  .gridui-u-button--text-accent-foreground {
     color: var(--gridui-accent-foreground);
   }
-  .gridui-u-text-foreground {
+  .gridui-u-button--text-foreground {
     color: var(--gridui-foreground);
   }
-  .gridui-u-no-underline {
+  .gridui-u-button--no-underline {
     text-decoration-line: none;
   }
-  .gridui-u-transition-colors {
+  .gridui-u-button--transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .gridui-u-duration-\(--gridui-motion-duration-quick\) {
+  .gridui-u-button--duration-\(--gridui-motion-duration-quick\) {
     --tw-duration: var(--gridui-motion-duration-quick);
     transition-duration: var(--gridui-motion-duration-quick);
   }
-  .gridui-u-ease-\(--gridui-motion-ease-out\) {
+  .gridui-u-button--ease-\(--gridui-motion-ease-out\) {
     --tw-ease: var(--gridui-motion-ease-out);
     transition-timing-function: var(--gridui-motion-ease-out);
   }
-  .gridui-u-\[--gridui-button-icon-size\:var\(--gridui-icon-size\)\] {
+  .gridui-u-button--\[--gridui-button-icon-size\:var\(--gridui-icon-size\)\] {
     --gridui-button-icon-size: var(--gridui-icon-size);
   }
-  .gridui-u-\[--gridui-button-icon-size\:var\(--gridui-icon-size-large\)\] {
+  .gridui-u-button--\[--gridui-button-icon-size\:var\(--gridui-icon-size-large\)\] {
     --gridui-button-icon-size: var(--gridui-icon-size-large);
   }
-  .gridui-u-\[--gridui-button-icon-size\:var\(--gridui-space-32\)\] {
+  .gridui-u-button--\[--gridui-button-icon-size\:var\(--gridui-space-32\)\] {
     --gridui-button-icon-size: var(--gridui-space-32);
   }
-  .gridui-u-\[--gridui-button-icon-size\:var\(--gridui-space-48\)\] {
+  .gridui-u-button--\[--gridui-button-icon-size\:var\(--gridui-space-48\)\] {
     --gridui-button-icon-size: var(--gridui-space-48);
   }
-  .gridui-u-disabled\:cursor-not-allowed:disabled {
+  .gridui-u-button--disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
-  .gridui-u-disabled\:opacity-50:disabled {
-    opacity: 50%;
-  }
-  .gridui-u-aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
+  .gridui-u-button--aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
     cursor: not-allowed;
   }
-  .gridui-u-aria-disabled\:opacity-50[aria-disabled="true"] {
-    opacity: 50%;
-  }
-  .gridui-u-data-disabled\:cursor-not-allowed[data-disabled] {
+  .gridui-u-button--data-disabled\:cursor-not-allowed[data-disabled] {
     cursor: not-allowed;
   }
-  .gridui-u-data-disabled\:opacity-50[data-disabled] {
-    opacity: 50%;
-  }
   @media (prefers-reduced-motion: reduce) {
-    .gridui-u-motion-reduce\:transition-none {
+    .gridui-u-button--motion-reduce\:transition-none {
       transition-property: none;
     }
   }
-  .gridui-u-\[\&_\>_span\]\:whitespace-nowrap > span {
+  .gridui-u-button--\[\&_\>_span\]\:whitespace-nowrap > span {
     white-space: nowrap;
   }
-  .gridui-u-\[\&_\>_span\]\:\[writing-mode\:vertical-rl\] > span {
+  .gridui-u-button--\[\&_\>_span\]\:\[writing-mode\:vertical-rl\] > span {
     writing-mode: vertical-rl;
   }
-  .gridui-u-\[\&_svg\]\:pointer-events-none svg {
+  .gridui-u-button--\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }
-  .gridui-u-\[\&_svg\]\:h-\(--gridui-button-icon-size\) svg {
+  .gridui-u-button--\[\&_svg\]\:h-\(--gridui-button-icon-size\) svg {
     height: var(--gridui-button-icon-size);
   }
-  .gridui-u-\[\&_svg\]\:w-\(--gridui-button-icon-size\) svg {
+  .gridui-u-button--\[\&_svg\]\:w-\(--gridui-button-icon-size\) svg {
     width: var(--gridui-button-icon-size);
   }
-  .gridui-u-\[\&_svg\]\:shrink-0 svg {
+  .gridui-u-button--\[\&_svg\]\:shrink-0 svg {
     flex-shrink: 0;
   }
-  .gridui-u-\[\&\.gridui-button-extra-large\]\:h-18.gridui-button-extra-large {
+  .gridui-u-button--\[\&\.gridui-button-extra-large\]\:h-18.gridui-button-extra-large {
     height: calc(var(--spacing) * 18);
   }
-  .gridui-u-\[\&\.gridui-button-extra-large\]\:w-18.gridui-button-extra-large {
+  .gridui-u-button--\[\&\.gridui-button-extra-large\]\:w-18.gridui-button-extra-large {
     width: calc(var(--spacing) * 18);
   }
-  .gridui-u-\[\&\.gridui-button-large\]\:h-gridui-control-large.gridui-button-large {
+  .gridui-u-button--\[\&\.gridui-button-large\]\:h-gridui-control-large.gridui-button-large {
     height: var(--gridui-control-min-height-large);
   }
-  .gridui-u-\[\&\.gridui-button-large\]\:w-gridui-control-large.gridui-button-large {
+  .gridui-u-button--\[\&\.gridui-button-large\]\:w-gridui-control-large.gridui-button-large {
     width: var(--gridui-control-min-height-large);
   }
-  .gridui-u-\[\&\.gridui-button-small\]\:h-gridui-control-small.gridui-button-small {
+  .gridui-u-button--\[\&\.gridui-button-small\]\:h-gridui-control-small.gridui-button-small {
     height: var(--gridui-control-min-height-small);
   }
-  .gridui-u-\[\&\.gridui-button-small\]\:w-gridui-control-small.gridui-button-small {
+  .gridui-u-button--\[\&\.gridui-button-small\]\:w-gridui-control-small.gridui-button-small {
     width: var(--gridui-control-min-height-small);
   }
   @media (pointer: coarse) {
-    .gridui-u-pointer-coarse\:\[\&\.gridui-button-small\]\:h-gridui-control.gridui-button-small {
+    .gridui-u-button--pointer-coarse\:\[\&\.gridui-button-small\]\:h-gridui-control.gridui-button-small {
       height: var(--gridui-control-min-height);
     }
-    .gridui-u-pointer-coarse\:\[\&\.gridui-button-small\]\:w-gridui-control.gridui-button-small {
+    .gridui-u-button--pointer-coarse\:\[\&\.gridui-button-small\]\:w-gridui-control.gridui-button-small {
       width: var(--gridui-control-min-height);
     }
   }
 }
 @layer components {
+  .gridui-button {
+    border: 1px solid transparent;
+  }
+  .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;
+    min-width: 0;
+    flex-direction: inherit;
+    align-items: inherit;
+    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 {
+    opacity: 0.5;
+  }
   .gridui-button-start-region {
     min-width: calc(var(--gridui-button-icon-size) + var(--gridui-space-16));
+    border-inline-end: 1px solid;
+    border-color: inherit;
+  }
+  .gridui-button-end-region {
+    border-inline-start: 1px solid;
+    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 {

package/docs/catalog.json CHANGED Viewed

@@ -1,12 +1,15 @@
 {
   "schemaVersion": 1,
   "name": "@gridui/button",
-  "version": "3.1.2",
+  "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 ADDED Viewed

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

package/docs/reference/button-link.md ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/button",
-  "version": "3.1.2",
+  "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": "^2.2.2",
+    "@gridui/style-utils": "^4.0.0",
     "@gridui/theme": "^2.5.3",
     "class-variance-authority": "0.7.1"
   },
@@ -36,7 +36,7 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "jest": "30.5.2",
-    "lucide-react": "1.69.0",
+    "lucide-react": "1.70.0",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "typescript": "6.0.3"