@gridui/button 2.1.2 → 2.2.0

package/README.md

@@ -29,10 +29,19 @@ Use a real button when the action needs native disabled behavior.
 
 ## Appearance and icons
 
-The variants are `primary`, `secondary`, `quiet`, `highlight`, `text`, and `underlined`. Sizes are
-`standard` (2.75rem minimum height) and `small` (2.25rem). The existing `standard`,
-`icon`, `entry`, and `rail` layouts, plus the full-region `cell` layout, are
-available for non-text/non-underlined variants.
+The variants are `primary`, `secondary`, `quiet`, `highlight`, `text`, and `underlined`.
+Sizes scale with the consumer's root font size:
+
+| Size | Minimum height | Inline padding | Icon size |
+| --- | --- | --- | --- |
+| `small` | 2.25rem | 0.5rem | 1rem |
+| `standard` | 2.75rem | 1rem | 1rem |
+| `large` | 3rem | 1.5rem | 1.25rem |
+| `extra-large` | 4.5rem | 1.5rem | 1.25rem |
+
+The `standard`, `icon`, `entry`, `cell`, `rail`, and `divided` layouts are
+available for non-text/non-underlined variants. Layouts own their structural
+padding; the size table describes standalone controls and divided labels.
 Small icon controls retain a 2.75rem touch target on coarse pointers.
 
 `text` and `underlined` accept only `layout="standard"`, which may be omitted.
@@ -44,7 +53,9 @@ retain the theme's native keyboard focus treatment.
 
 Consumers that previously used `text` for a permanent underline must switch to
 `underlined`. Keep `text` for unlined actions and navigation links.
-There are no application colors or implicit icon transforms.
+There are no application colors or implicit icon transforms. Large and
+extra-large text/underlined actions use supporting typography and a 2rem gap
+between the label and decorative icons. Smaller sizes retain the normal 0.5rem gap.
 
 `startIcon` and `endIcon` accept decorative React nodes before and after the
 existing `children`. Their wrappers are hidden from assistive technology and
@@ -52,6 +63,13 @@ inert, so the visible label remains the accessible name. Do not put interactive
 content in these slots. Existing icons passed directly in `children` keep their
 original rendering and accessibility responsibilities.
 
+`iconMotion="outward"` opts the `endIcon` into a small hover translation upward
+and toward the inline end. It follows inherited text direction, leaves any
+dividing line fixed, and does not animate disabled or loading buttons. Reduced
+motion removes both the translation and transition. The default is `none`;
+keyboard focus never requires motion to remain visible. Supply an icon whose
+direction matches the action and locale.
+
 Primary buttons use `accent-background` and `accent-foreground`. Secondary
 buttons use a transparent fill, foreground text, and a border; quiet buttons
 omit the border. Secondary and quiet surfaces use `surface-hover` while enabled.
@@ -70,7 +88,7 @@ not replace the chosen variant's background. `cell` fills both the width and
 height of its containing region, uses square corners and no button border, and
 keeps content padding inside the hit area. Grid or another structural parent
 owns any surrounding seams. Put a cell button in `GridItem padding={0}` to avoid
-an inset selected surface. See the [composition recipe](../../docs/usage/composition.md#full-region-actions).
+an inset selected surface. See the [composition recipe](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/usage/composition.md#full-region-actions).
 
 `buttonClass(variants, className?)` exposes the same appearance and text-layout
 constraints for caller-owned native elements. `startIcon` and `endIcon` are
@@ -78,6 +96,40 @@ 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.
 
+## Divided actions
+
+`layout="divided"` fills its available width, uses square corners, and keeps
+the label and trailing decorative icon in separate visual regions. Both regions
+remain inside one native button or anchor. The trailing region is inert and
+hidden from assistive technology; it never introduces another action or tab stop.
+Omitting an empty or conditional `endIcon` removes that region and its separator.
+
+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
+still comes from `variant`; the layout does not choose a brand, fill, or route.
+The containing page owns its maximum width.
+
+```tsx
+<ButtonLink href="/projects" variant="secondary" layout="divided"
+    size="extra-large" endIcon={<ArrowUpRight />}>
+    View projects
+</ButtonLink>;
+
+<Button variant="underlined" size="large" iconMotion="outward"
+    endIcon={<ArrowUpRight />} onClick={reviewProject}>
+    Review project
+</Button>;
+```
+
+These forms work in public pages, dashboards, and tools. Use Tabs for switching
+content panels, Choice or RadioGroup for choices, Collection for structured
+multi-line entries, and Sidebar for application navigation. Keep brand artwork,
+identity lookup, routes, and selection state with their application owners.
+Use `Button` and `ButtonLink` to construct divided regions; `buttonClass` styles
+the outer native control and does not construct content or decorative slots.
+
 ## Action helpers
 
 `useAsyncAction({ action, onStart?, disabled? })` returns `pending` and `run`.
@@ -97,4 +149,7 @@ busy-state scheduling and failure cleanup. Type fixtures compile with the packag
 and reject text and underlined/icon-layout combinations, missing link destinations, and icon
 nodes passed as style variants. Storybook includes standalone, icon, full-cell,
 and disabled highlight states, text and underlined actions and links, decorative
-icon slots, long labels, loading, and the existing variants.
+icon slots, long labels, loading, and the existing variants. Divided-layout browser
+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.

package/dist/index.js

@@ -43,66 +43,108 @@ import { cn } from "@gridui/style-utils";
 import { cva } from "class-variance-authority";
 var buttonStyles = cva(cn(
   "gridui-button",
-  "inline-flex w-fit max-w-full min-w-0 items-center justify-center gap-gridui-8 border border-solid border-transparent rounded-control type-ui text-center no-underline wrap-anywhere cursor-pointer transition-colors duration-(--gridui-motion-duration-quick) ease-(--gridui-motion-ease-out)",
-  "[&_svg]:w-gridui-16 [&_svg]:h-gridui-16 [&_svg]:shrink-0 [&_svg]:pointer-events-none",
-  "disabled:opacity-50 disabled:cursor-not-allowed",
-  "[&:hover:not(:disabled)]:border-foreground",
-  "[&:active:not(:disabled)]:opacity-[0.8]",
-  "motion-reduce:transition-none"
+  "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-[&_svg]:w-gridui-16 gridui-u-[&_svg]:h-gridui-16 gridui-u-[&_svg]:shrink-0 gridui-u-[&_svg]:pointer-events-none",
+  "gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed",
+  "gridui-u-[&:hover:not(:disabled)]:border-foreground",
+  "gridui-u-[&:active:not(:disabled)]:opacity-[0.8]",
+  "gridui-u-motion-reduce:transition-none"
 ));
 var buttonStandardStyles = cva(cn(
   "gridui-button-standard",
-  "min-h-11 py-gridui-8 px-gridui-16"
+  "gridui-u-min-h-11 gridui-u-py-gridui-8 gridui-u-px-gridui-16"
 ));
 var buttonSmallStyles = cva(cn(
   "gridui-button-small",
-  "min-h-9 py-gridui-4 px-gridui-8"
+  "gridui-u-min-h-9 gridui-u-py-gridui-4 gridui-u-px-gridui-8"
+));
+var buttonLargeStyles = cva(cn(
+  "gridui-button-large",
+  "gridui-u-min-h-12 gridui-u-py-gridui-8 gridui-u-px-gridui-24 gridui-u-[&_svg]:w-5 gridui-u-[&_svg]:h-5"
+));
+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-[&_svg]:w-5 gridui-u-[&_svg]:h-5"
 ));
 var buttonPrimaryStyles = cva(cn(
   "gridui-button-primary",
-  "text-accent-foreground bg-accent-background border-accent-background"
+  "gridui-u-text-accent-foreground gridui-u-bg-accent-background gridui-u-border-accent-background"
 ));
 var buttonSecondaryStyles = cva(cn(
   "gridui-button-secondary",
-  "text-foreground bg-transparent border-border",
-  "[&:hover:not(:disabled)]:bg-surface-hover"
+  "gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-border",
+  "gridui-u-[&:hover:not(:disabled)]:bg-surface-hover"
 ));
 var buttonQuietStyles = cva(cn(
   "gridui-button-quiet",
-  "text-foreground bg-transparent",
-  "[&:hover:not(:disabled)]:bg-surface-hover"
+  "gridui-u-text-foreground gridui-u-bg-transparent",
+  "gridui-u-[&:hover:not(:disabled)]:bg-surface-hover"
 ));
 var buttonHighlightStyles = cva(cn(
   "gridui-button-highlight",
-  "text-foreground bg-surface"
+  "gridui-u-text-foreground gridui-u-bg-surface"
 ));
 var buttonTextStyles = cva(cn(
   "gridui-button-text",
-  "text-foreground bg-transparent border-0 rounded-none"
+  "gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-rounded-none"
 ));
 var buttonUnderlinedStyles = cva(cn(
   "gridui-button-underlined",
-  "text-foreground bg-transparent border-0 border-b border-foreground rounded-none"
+  "gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-border-b gridui-u-border-foreground gridui-u-rounded-none"
 ));
 var buttonEntryStyles = cva(cn(
   "gridui-button-entry",
-  "justify-between w-full py-gridui-16 px-gridui-24"
+  "gridui-u-justify-between gridui-u-w-full gridui-u-py-gridui-16 gridui-u-px-gridui-24"
 ));
 var buttonCellStyles = cva(cn(
-  "gridui-button-cell",
-  "w-full h-full justify-start rounded-none border-0 py-gridui-16 px-gridui-24 text-left"
+  "gridui-button-cell gridui-interaction-boundary",
+  "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"
 ));
 var buttonRailStyles = cva(cn(
-  "gridui-button-rail",
-  "w-full min-w-gridui-24 flex-col py-gridui-8 px-0",
-  "[&_>_span]:[writing-mode:vertical-rl] [&_>_span]:whitespace-nowrap"
+  "gridui-button-rail gridui-interaction-boundary",
+  "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"
 ));
 var buttonIconStyles = cva(cn(
   "gridui-button-icon",
-  "w-11 h-11 shrink-0 p-0",
-  "[&.gridui-button-small]:w-9 [&.gridui-button-small]:h-9",
-  "pointer-coarse:[&.gridui-button-small]:w-11 pointer-coarse:[&.gridui-button-small]:h-11"
+  "gridui-u-w-11 gridui-u-h-11 gridui-u-shrink-0 gridui-u-p-0",
+  "gridui-u-[&.gridui-button-small]:w-9 gridui-u-[&.gridui-button-small]:h-9",
+  "gridui-u-[&.gridui-button-large]:w-12 gridui-u-[&.gridui-button-large]:h-12",
+  "gridui-u-[&.gridui-button-extra-large]:w-18 gridui-u-[&.gridui-button-extra-large]:h-18",
+  "gridui-u-pointer-coarse:[&.gridui-button-small]:w-11 gridui-u-pointer-coarse:[&.gridui-button-small]:h-11"
+));
+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"
 ));
+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"
+), {
+  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"
+    }
+  },
+  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"
+), {
+  variants: {
+    size: {
+      small: "gridui-u-w-9",
+      standard: "gridui-u-w-11",
+      large: "gridui-u-w-12",
+      "extra-large": "gridui-u-w-gridui-64"
+    }
+  },
+  defaultVariants: { size: "standard" }
+});
 var buttonVariants = cva(buttonStyles(), {
   variants: {
     variant: {
@@ -115,36 +157,106 @@ var buttonVariants = cva(buttonStyles(), {
     },
     size: {
       small: buttonSmallStyles(),
-      standard: buttonStandardStyles()
+      standard: buttonStandardStyles(),
+      large: buttonLargeStyles(),
+      "extra-large": buttonExtraLargeStyles()
     },
     layout: {
       standard: "",
       icon: buttonIconStyles(),
       entry: buttonEntryStyles(),
       cell: buttonCellStyles(),
-      rail: buttonRailStyles()
+      rail: buttonRailStyles(),
+      divided: buttonDividedStyles()
+    },
+    iconMotion: {
+      none: "",
+      outward: "gridui-button-icon-motion-outward"
     }
   },
+  compoundVariants: [
+    {
+      variant: [
+        "text",
+        "underlined"
+      ],
+      size: [
+        "large",
+        "extra-large"
+      ],
+      className: "gridui-u-gap-gridui-32 gridui-u-type-supporting"
+    }
+  ],
   defaultVariants: {
     variant: "primary",
     size: "standard"
   }
 });
 var buttonClass = (variants = {}, className) => {
+  const textVariant = variants.variant === "text" || variants.variant === "underlined";
+  const boundaryLayout = variants.layout === "cell" || variants.layout === "rail";
   return cn(buttonVariants({
     variant: variants.variant,
     size: variants.size,
-    layout: variants.layout
-  }), (variants.variant === "text" || variants.variant === "underlined") && "px-0", className);
+    layout: variants.layout,
+    iconMotion: variants.iconMotion
+  }), textVariant && "gridui-u-px-0", !textVariant && !boundaryLayout && "gridui-hover-surface", className);
+};
+
+// src/shared/content.tsx
+import { cn as cn2 } from "@gridui/style-utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ButtonContent = (props) => {
+  const { children, startIcon, endIcon, layout, size, iconMotion } = props;
+  const label = /* @__PURE__ */ jsxs(Fragment, { children: [
+    startIcon !== void 0 && startIcon !== null && typeof startIcon !== "boolean" && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "gridui-button-adornment gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none",
+        "aria-hidden": "true",
+        inert: true,
+        children: startIcon
+      }
+    ),
+    children
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    layout === "divided" ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: buttonLabelStyles({ size }),
+        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 })
+        ),
+        "aria-hidden": "true",
+        inert: true,
+        children: iconMotion === "outward" ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "gridui-button-end-icon gridui-u-inline-flex",
+            children: endIcon
+          }
+        ) : endIcon
+      }
+    )
+  ] });
 };
 
 // src/button/button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var Button = (props) => {
   const {
     variant,
     size,
     layout,
+    iconMotion,
     loading = false,
     disabled,
     type = "button",
@@ -157,13 +269,15 @@ var Button = (props) => {
   const variants = variant === "text" || variant === "underlined" ? {
     variant,
     size,
-    layout: "standard"
+    layout: "standard",
+    iconMotion
   } : {
     variant,
     size,
-    layout
+    layout,
+    iconMotion
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       ...restProps,
@@ -171,27 +285,17 @@ var Button = (props) => {
       disabled: disabled || loading,
       "aria-busy": loading || restProps["aria-busy"],
       className: buttonClass(variants, className),
-      children: [
-        startIcon !== void 0 && startIcon !== null && typeof startIcon !== "boolean" && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none",
-            "aria-hidden": "true",
-            inert: true,
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon !== void 0 && endIcon !== null && typeof endIcon !== "boolean" && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none",
-            "aria-hidden": "true",
-            inert: true,
-            children: endIcon
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx2(
+        ButtonContent,
+        {
+          layout: variants.layout,
+          size,
+          iconMotion,
+          startIcon,
+          endIcon,
+          children
+        }
+      )
     }
   );
 };
@@ -211,12 +315,13 @@ var downloadBlob = (blob, filename) => {
 };
 
 // src/button-link/button-link.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var ButtonLink = (props) => {
   const {
     variant = "secondary",
     size,
     layout,
+    iconMotion,
     className,
     children,
     startIcon,
@@ -226,38 +331,30 @@ var ButtonLink = (props) => {
   const variants = variant === "text" || variant === "underlined" ? {
     variant,
     size,
-    layout: "standard"
+    layout: "standard",
+    iconMotion
   } : {
     variant,
     size,
-    layout
+    layout,
+    iconMotion
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(
     "a",
     {
       ...restProps,
       className: buttonClass(variants, className),
-      children: [
-        startIcon !== void 0 && startIcon !== null && typeof startIcon !== "boolean" && /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: "gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none",
-            "aria-hidden": "true",
-            inert: true,
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon !== void 0 && endIcon !== null && typeof endIcon !== "boolean" && /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: "gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none",
-            "aria-hidden": "true",
-            inert: true,
-            children: endIcon
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx3(
+        ButtonContent,
+        {
+          layout: variants.layout,
+          size,
+          iconMotion,
+          startIcon,
+          endIcon,
+          children
+        }
+      )
     }
   );
 };

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/button/async-action.ts", "../src/shared/style.ts", "../src/button/button.tsx", "../src/button/download.ts", "../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    \"inline-flex w-fit max-w-full min-w-0 items-center justify-center gap-gridui-8 border border-solid border-transparent rounded-control type-ui text-center no-underline wrap-anywhere cursor-pointer transition-colors duration-(--gridui-motion-duration-quick) ease-(--gridui-motion-ease-out)\",\n    \"[&_svg]:w-gridui-16 [&_svg]:h-gridui-16 [&_svg]:shrink-0 [&_svg]:pointer-events-none\",\n    \"disabled:opacity-50 disabled:cursor-not-allowed\",\n    \"[&:hover:not(:disabled)]:border-foreground\",\n    \"[&:active:not(:disabled)]:opacity-[0.8]\",\n    \"motion-reduce:transition-none\",\n));\n\nexport const buttonStandardStyles = cva(cn(\n    \"gridui-button-standard\",\n    \"min-h-11 py-gridui-8 px-gridui-16\",\n));\n\nexport const buttonSmallStyles = cva(cn(\n    \"gridui-button-small\",\n    \"min-h-9 py-gridui-4 px-gridui-8\",\n));\n\nexport const buttonPrimaryStyles = cva(cn(\n    \"gridui-button-primary\",\n    \"text-accent-foreground bg-accent-background border-accent-background\",\n));\n\nexport const buttonSecondaryStyles = cva(cn(\n    \"gridui-button-secondary\",\n    \"text-foreground bg-transparent border-border\",\n    \"[&:hover:not(:disabled)]:bg-surface-hover\",\n));\n\nexport const buttonQuietStyles = cva(cn(\n    \"gridui-button-quiet\",\n    \"text-foreground bg-transparent\",\n    \"[&:hover:not(:disabled)]:bg-surface-hover\",\n));\n\nexport const buttonHighlightStyles = cva(cn(\n    \"gridui-button-highlight\",\n    \"text-foreground bg-surface\",\n));\n\nexport const buttonTextStyles = cva(cn(\n    \"gridui-button-text\",\n    \"text-foreground bg-transparent border-0 rounded-none\",\n));\n\nexport const buttonUnderlinedStyles = cva(cn(\n    \"gridui-button-underlined\",\n    \"text-foreground bg-transparent border-0 border-b border-foreground rounded-none\",\n));\n\nexport const buttonEntryStyles = cva(cn(\n    \"gridui-button-entry\",\n    \"justify-between w-full py-gridui-16 px-gridui-24\",\n));\n\nexport const buttonCellStyles = cva(cn(\n    \"gridui-button-cell\",\n    \"w-full h-full justify-start rounded-none border-0 py-gridui-16 px-gridui-24 text-left\",\n));\n\nexport const buttonRailStyles = cva(cn(\n    \"gridui-button-rail\",\n    \"w-full min-w-gridui-24 flex-col py-gridui-8 px-0\",\n    \"[&_>_span]:[writing-mode:vertical-rl] [&_>_span]:whitespace-nowrap\",\n));\n\nexport const buttonIconStyles = cva(cn(\n    \"gridui-button-icon\",\n    \"w-11 h-11 shrink-0 p-0\",\n    \"[&.gridui-button-small]:w-9 [&.gridui-button-small]:h-9\",\n    \"pointer-coarse:[&.gridui-button-small]:w-11 pointer-coarse:[&.gridui-button-small]:h-11\",\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        },\n        layout: {\n            standard: \"\",\n            icon: buttonIconStyles(),\n            entry: buttonEntryStyles(),\n            cell: buttonCellStyles(),\n            rail: buttonRailStyles(),\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    return cn(buttonVariants({\n        variant: variants.variant,\n        size: variants.size,\n        layout: variants.layout,\n    }), (variants.variant === \"text\" || variants.variant === \"underlined\") && \"px-0\", className);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Button\n */\n\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type ButtonProps = ComponentPropsWithRef<\"button\"> & ButtonVariants & {\n    readonly loading?: boolean;\n    readonly startIcon?: ReactNode;\n    readonly endIcon?: ReactNode;\n};\n\nexport const Button: FC<ButtonProps> = (props: ButtonProps) => {\n    const {\n        variant,\n        size,\n        layout,\n        loading = false,\n        disabled,\n        type = \"button\",\n        className,\n        children,\n        startIcon,\n        endIcon,\n        ...restProps\n    } = props;\n    const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n        variant,\n        size,\n        layout: \"standard\",\n    } : {\n        variant,\n        size,\n        layout,\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        {startIcon !== undefined && startIcon !== null && typeof startIcon !== \"boolean\" && (<span\n            className=\"gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none\"\n            aria-hidden=\"true\"\n            inert\n        >\n            {startIcon}\n        </span>)}\n        {children}\n        {endIcon !== undefined && endIcon !== null && typeof endIcon !== \"boolean\" && (<span\n            className=\"gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none\"\n            aria-hidden=\"true\"\n            inert\n        >\n            {endIcon}\n        </span>)}\n    </button>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Download\n */\n\nexport const downloadBlob = (blob: Blob, filename: string): void => {\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = filename;\n    document.body.appendChild(link);\n    link.click();\n    link.remove();\n    window.setTimeout(() => {\n        URL.revokeObjectURL(url);\n    }, 30000);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace ButtonLink\n * @description Button Link\n */\n\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type ButtonLinkProps = ComponentPropsWithRef<\"a\"> & ButtonVariants & {\n    readonly href: string;\n    readonly startIcon?: ReactNode;\n    readonly endIcon?: ReactNode;\n};\n\nexport const ButtonLink: FC<ButtonLinkProps> = (props: ButtonLinkProps) => {\n    const {\n        variant = \"secondary\",\n        size,\n        layout,\n        className,\n        children,\n        startIcon,\n        endIcon,\n        ...restProps\n    } = props;\n    const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n        variant,\n        size,\n        layout: \"standard\",\n    } : {\n        variant,\n        size,\n        layout,\n    };\n    return (<a\n        {...restProps}\n        className={buttonClass(variants, className)}\n    >\n        {startIcon !== undefined && startIcon !== null && typeof startIcon !== \"boolean\" && (<span\n            className=\"gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none\"\n            aria-hidden=\"true\"\n            inert\n        >\n            {startIcon}\n        </span>)}\n        {children}\n        {endIcon !== undefined && endIcon !== null && typeof endIcon !== \"boolean\" && (<span\n            className=\"gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none\"\n            aria-hidden=\"true\"\n            inert\n        >\n            {endIcon}\n        </span>)}\n    </a>);\n};\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs"]
+  "sources": ["../src/button/async-action.ts", "../src/shared/style.ts", "../src/shared/content.tsx", "../src/button/button.tsx", "../src/button/download.ts", "../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-[&_svg]:w-gridui-16 gridui-u-[&_svg]:h-gridui-16 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-[&:hover:not(:disabled)]:border-foreground\",\n    \"gridui-u-[&:active:not(:disabled)]:opacity-[0.8]\",\n    \"gridui-u-motion-reduce:transition-none\",\n));\n\nexport const buttonStandardStyles = cva(cn(\n    \"gridui-button-standard\",\n    \"gridui-u-min-h-11 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-9 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-12 gridui-u-py-gridui-8 gridui-u-px-gridui-24 gridui-u-[&_svg]:w-5 gridui-u-[&_svg]:h-5\",\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-[&_svg]:w-5 gridui-u-[&_svg]:h-5\",\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    \"gridui-u-[&:hover:not(:disabled)]:bg-surface-hover\",\n));\n\nexport const buttonQuietStyles = cva(cn(\n    \"gridui-button-quiet\",\n    \"gridui-u-text-foreground gridui-u-bg-transparent\",\n    \"gridui-u-[&:hover:not(:disabled)]:bg-surface-hover\",\n));\n\nexport const buttonHighlightStyles = cva(cn(\n    \"gridui-button-highlight\",\n    \"gridui-u-text-foreground gridui-u-bg-surface\",\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 gridui-interaction-boundary\",\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 gridui-interaction-boundary\",\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-11 gridui-u-h-11 gridui-u-shrink-0 gridui-u-p-0\",\n    \"gridui-u-[&.gridui-button-small]:w-9 gridui-u-[&.gridui-button-small]:h-9\",\n    \"gridui-u-[&.gridui-button-large]:w-12 gridui-u-[&.gridui-button-large]:h-12\",\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-11 gridui-u-pointer-coarse:[&.gridui-button-small]:h-11\",\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 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-9\",\n            standard: \"gridui-u-w-11\",\n            large: \"gridui-u-w-12\",\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    const boundaryLayout = variants.layout === \"cell\" || variants.layout === \"rail\";\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\", !textVariant && !boundaryLayout && \"gridui-hover-surface\", className);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Content\n */\n\nimport { buttonEndRegionStyles, buttonLabelStyles, type ButtonVariants } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC, ReactNode } from \"react\";\n\nexport type ButtonContentProps = {\n    readonly children?: ReactNode;\n    readonly startIcon?: ReactNode;\n    readonly endIcon?: 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, endIcon, layout, size, iconMotion } = props;\n    const label = (<>\n        {startIcon !== undefined && startIcon !== null && typeof startIcon !== \"boolean\" && (<span\n            className=\"gridui-button-adornment gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none\"\n            aria-hidden=\"true\"\n            inert\n        >\n            {startIcon}\n        </span>)}\n        {children}\n    </>);\n\n    return (<>\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 { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type ButtonProps = ComponentPropsWithRef<\"button\"> & ButtonVariants & {\n    readonly loading?: boolean;\n    readonly startIcon?: ReactNode;\n    readonly endIcon?: ReactNode;\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        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            endIcon={endIcon}\n        >\n            {children}\n        </ButtonContent>\n    </button>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Download\n */\n\nexport const downloadBlob = (blob: Blob, filename: string): void => {\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = filename;\n    document.body.appendChild(link);\n    link.click();\n    link.remove();\n    window.setTimeout(() => {\n        URL.revokeObjectURL(url);\n    }, 30000);\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 { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type ButtonLinkProps = ComponentPropsWithRef<\"a\"> & ButtonVariants & {\n    readonly href: string;\n    readonly startIcon?: ReactNode;\n    readonly endIcon?: ReactNode;\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        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            endIcon={endIcon}\n        >\n            {children}\n        </ButtonContent>\n    </a>);\n};\n"],
+  "mappings": "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",
+  "names": ["cn", "jsx", "jsx"]
 }

package/dist/shared/content.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @author WMXPY
+ * @package Button
+ * @namespace Shared
+ * @description Content
+ */
+import { type ButtonVariants } from "./style";
+import type { FC, ReactNode } from "react";
+export type ButtonContentProps = {
+    readonly children?: ReactNode;
+    readonly startIcon?: ReactNode;
+    readonly endIcon?: ReactNode;
+    readonly layout?: ButtonVariants["layout"];
+    readonly size?: ButtonVariants["size"];
+    readonly iconMotion?: ButtonVariants["iconMotion"];
+};
+export declare const ButtonContent: FC<ButtonContentProps>;

package/dist/shared/style.d.ts

@@ -8,6 +8,8 @@ import { type VariantProps } from "class-variance-authority";
 export declare const buttonStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonStandardStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonSmallStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const buttonLargeStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const buttonExtraLargeStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonPrimaryStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonSecondaryStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonQuietStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
@@ -18,10 +20,18 @@ export declare const buttonEntryStyles: (props?: import("class-variance-authorit
 export declare const buttonCellStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonRailStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonIconStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const buttonDividedStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const buttonLabelStyles: (props?: ({
+    size?: "small" | "standard" | "large" | "extra-large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const buttonEndRegionStyles: (props?: ({
+    size?: "small" | "standard" | "large" | "extra-large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "quiet" | "highlight" | "text" | "underlined" | null | undefined;
-    size?: "small" | "standard" | null | undefined;
-    layout?: "standard" | "icon" | "entry" | "cell" | "rail" | null | undefined;
+    size?: "small" | "standard" | "large" | "extra-large" | null | undefined;
+    layout?: "standard" | "icon" | "entry" | "cell" | "rail" | "divided" | null | undefined;
+    iconMotion?: "none" | "outward" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonStyleVariants = VariantProps<typeof buttonVariants>;
 export type ButtonVariants = Omit<ButtonStyleVariants, "variant" | "layout"> & ({

package/dist/styles.css

@@ -9,221 +9,299 @@
   }
 }
 @layer utilities {
-  .pointer-events-none {
+  .gridui-u-pointer-events-none {
     pointer-events: none;
   }
-  .inline-flex {
+  .gridui-u-inline-flex {
     display: inline-flex;
   }
-  .h-11 {
+  .gridui-u-h-11 {
     height: calc(var(--spacing) * 11);
   }
-  .h-full {
+  .gridui-u-h-full {
     height: 100%;
   }
-  .min-h-9 {
+  .gridui-u-min-h-9 {
     min-height: calc(var(--spacing) * 9);
   }
-  .min-h-11 {
+  .gridui-u-min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
-  .w-11 {
+  .gridui-u-min-h-12 {
+    min-height: calc(var(--spacing) * 12);
+  }
+  .gridui-u-min-h-18 {
+    min-height: calc(var(--spacing) * 18);
+  }
+  .gridui-u-w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+  .gridui-u-w-11 {
     width: calc(var(--spacing) * 11);
   }
-  .w-fit {
+  .gridui-u-w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+  .gridui-u-w-fit {
     width: fit-content;
   }
-  .w-full {
+  .gridui-u-w-full {
     width: 100%;
   }
-  .max-w-full {
+  .gridui-u-w-gridui-64 {
+    width: var(--gridui-space-64);
+  }
+  .gridui-u-max-w-full {
     max-width: 100%;
   }
-  .min-w-0 {
+  .gridui-u-min-w-0 {
     min-width: 0px;
   }
-  .min-w-gridui-24 {
+  .gridui-u-min-w-gridui-24 {
     min-width: var(--gridui-space-24);
   }
-  .shrink-0 {
+  .gridui-u-flex-1 {
+    flex: 1;
+  }
+  .gridui-u-shrink-0 {
     flex-shrink: 0;
   }
-  .cursor-pointer {
+  .gridui-u-cursor-pointer {
     cursor: pointer;
   }
-  .flex-col {
+  .gridui-u-flex-col {
     flex-direction: column;
   }
-  .items-center {
+  .gridui-u-items-center {
     align-items: center;
   }
-  .justify-between {
+  .gridui-u-items-stretch {
+    align-items: stretch;
+  }
+  .gridui-u-justify-between {
     justify-content: space-between;
   }
-  .justify-center {
+  .gridui-u-justify-center {
     justify-content: center;
   }
-  .justify-start {
+  .gridui-u-justify-start {
     justify-content: flex-start;
   }
-  .gap-gridui-8 {
+  .gridui-u-gap-0 {
+    gap: 0px;
+  }
+  .gridui-u-gap-gridui-8 {
     gap: var(--gridui-space-8);
   }
-  .rounded-control {
+  .gridui-u-gap-gridui-32 {
+    gap: var(--gridui-space-32);
+  }
+  .gridui-u-self-stretch {
+    align-self: stretch;
+  }
+  .gridui-u-rounded-control {
     border-radius: var(--gridui-control-radius);
   }
-  .rounded-none {
+  .gridui-u-rounded-none {
     border-radius: 0;
   }
-  .border {
+  .gridui-u-border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-0 {
+  .gridui-u-border-0 {
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
-  .border-b {
+  .gridui-u-border-s {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+  }
+  .gridui-u-border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-solid {
+  .gridui-u-border-solid {
     --tw-border-style: solid;
     border-style: solid;
   }
-  .border-accent-background {
+  .gridui-u-border-accent-background {
     border-color: var(--gridui-accent-background);
   }
-  .border-border {
+  .gridui-u-border-border {
     border-color: var(--gridui-border);
   }
-  .border-foreground {
+  .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 {
     border-color: var(--gridui-foreground);
   }
-  .border-transparent {
+  .gridui-u-border-transparent {
     border-color: transparent;
   }
-  .bg-accent-background {
+  .gridui-u-bg-accent-background {
     background-color: var(--gridui-accent-background);
   }
-  .bg-surface {
+  .gridui-u-bg-surface {
     background-color: var(--gridui-surface);
   }
-  .bg-transparent {
+  .gridui-u-bg-transparent {
     background-color: transparent;
   }
-  .p-0 {
+  .gridui-u-p-0 {
     padding: 0px;
   }
-  .px-0 {
+  .gridui-u-px-0 {
     padding-inline: 0px;
   }
-  .px-gridui-8 {
+  .gridui-u-px-gridui-8 {
     padding-inline: var(--gridui-space-8);
   }
-  .px-gridui-16 {
+  .gridui-u-px-gridui-16 {
     padding-inline: var(--gridui-space-16);
   }
-  .px-gridui-24 {
+  .gridui-u-px-gridui-24 {
     padding-inline: var(--gridui-space-24);
   }
-  .py-gridui-4 {
+  .gridui-u-py-gridui-4 {
     padding-block: var(--gridui-space-4);
   }
-  .py-gridui-8 {
+  .gridui-u-py-gridui-8 {
     padding-block: var(--gridui-space-8);
   }
-  .py-gridui-16 {
+  .gridui-u-py-gridui-16 {
     padding-block: var(--gridui-space-16);
   }
-  .text-center {
+  .gridui-u-text-center {
     text-align: center;
   }
-  .text-left {
+  .gridui-u-text-left {
     text-align: left;
   }
-  .type-ui {
+  .gridui-u-text-start {
+    text-align: start;
+  }
+  .gridui-u-type-supporting {
+    font: var(--gridui-type-supporting);
+    letter-spacing: normal;
+  }
+  .gridui-u-type-ui {
     font: var(--gridui-type-ui);
     letter-spacing: normal;
   }
-  .wrap-anywhere {
+  .gridui-u-wrap-anywhere {
     overflow-wrap: anywhere;
   }
-  .text-accent-foreground {
+  .gridui-u-text-accent-foreground {
     color: var(--gridui-accent-foreground);
   }
-  .text-foreground {
+  .gridui-u-text-foreground {
     color: var(--gridui-foreground);
   }
-  .no-underline {
+  .gridui-u-no-underline {
     text-decoration-line: none;
   }
-  .transition-colors {
+  .gridui-u-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));
   }
-  .duration-\(--gridui-motion-duration-quick\) {
+  .gridui-u-duration-\(--gridui-motion-duration-quick\) {
     --tw-duration: var(--gridui-motion-duration-quick);
     transition-duration: var(--gridui-motion-duration-quick);
   }
-  .ease-\(--gridui-motion-ease-out\) {
+  .gridui-u-ease-\(--gridui-motion-ease-out\) {
     --tw-ease: var(--gridui-motion-ease-out);
     transition-timing-function: var(--gridui-motion-ease-out);
   }
-  .disabled\:cursor-not-allowed:disabled {
+  .gridui-u-disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
-  .disabled\:opacity-50:disabled {
+  .gridui-u-disabled\:opacity-50:disabled {
     opacity: 50%;
   }
   @media (prefers-reduced-motion: reduce) {
-    .motion-reduce\:transition-none {
+    .gridui-u-motion-reduce\:transition-none {
       transition-property: none;
     }
   }
-  .\[\&_\>_span\]\:whitespace-nowrap > span {
+  .gridui-u-\[\&_\>_span\]\:whitespace-nowrap > span {
     white-space: nowrap;
   }
-  .\[\&_\>_span\]\:\[writing-mode\:vertical-rl\] > span {
+  .gridui-u-\[\&_\>_span\]\:\[writing-mode\:vertical-rl\] > span {
     writing-mode: vertical-rl;
   }
-  .\[\&_svg\]\:pointer-events-none svg {
+  .gridui-u-\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }
-  .\[\&_svg\]\:h-gridui-16 svg {
+  .gridui-u-\[\&_svg\]\:h-5 svg {
+    height: calc(var(--spacing) * 5);
+  }
+  .gridui-u-\[\&_svg\]\:h-gridui-16 svg {
     height: var(--gridui-space-16);
   }
-  .\[\&_svg\]\:w-gridui-16 svg {
+  .gridui-u-\[\&_svg\]\:w-5 svg {
+    width: calc(var(--spacing) * 5);
+  }
+  .gridui-u-\[\&_svg\]\:w-gridui-16 svg {
     width: var(--gridui-space-16);
   }
-  .\[\&_svg\]\:shrink-0 svg {
+  .gridui-u-\[\&_svg\]\:shrink-0 svg {
     flex-shrink: 0;
   }
-  .\[\&\.gridui-button-small\]\:h-9.gridui-button-small {
+  .gridui-u-\[\&\.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 {
+    width: calc(var(--spacing) * 18);
+  }
+  .gridui-u-\[\&\.gridui-button-large\]\:h-12.gridui-button-large {
+    height: calc(var(--spacing) * 12);
+  }
+  .gridui-u-\[\&\.gridui-button-large\]\:w-12.gridui-button-large {
+    width: calc(var(--spacing) * 12);
+  }
+  .gridui-u-\[\&\.gridui-button-small\]\:h-9.gridui-button-small {
     height: calc(var(--spacing) * 9);
   }
-  .\[\&\.gridui-button-small\]\:w-9.gridui-button-small {
+  .gridui-u-\[\&\.gridui-button-small\]\:w-9.gridui-button-small {
     width: calc(var(--spacing) * 9);
   }
   @media (pointer: coarse) {
-    .pointer-coarse\:\[\&\.gridui-button-small\]\:h-11.gridui-button-small {
+    .gridui-u-pointer-coarse\:\[\&\.gridui-button-small\]\:h-11.gridui-button-small {
       height: calc(var(--spacing) * 11);
     }
-    .pointer-coarse\:\[\&\.gridui-button-small\]\:w-11.gridui-button-small {
+    .gridui-u-pointer-coarse\:\[\&\.gridui-button-small\]\:w-11.gridui-button-small {
       width: calc(var(--spacing) * 11);
     }
   }
-  .\[\&\:active\:not\(\:disabled\)\]\:opacity-\[0\.8\]:active:not(:disabled) {
+  .gridui-u-\[\&\:active\:not\(\:disabled\)\]\:opacity-\[0\.8\]:active:not(:disabled) {
     opacity: 0.8;
   }
-  .\[\&\:hover\:not\(\:disabled\)\]\:border-foreground:hover:not(:disabled) {
+  .gridui-u-\[\&\:hover\:not\(\:disabled\)\]\:border-foreground:hover:not(:disabled) {
     border-color: var(--gridui-foreground);
   }
-  .\[\&\:hover\:not\(\:disabled\)\]\:bg-surface-hover:hover:not(:disabled) {
+  .gridui-u-\[\&\:hover\:not\(\:disabled\)\]\:bg-surface-hover:hover:not(:disabled) {
     background-color: var(--gridui-surface-hover);
   }
 }
+@layer components {
+  @media (prefers-reduced-motion: no-preference) {
+    .gridui-button-icon-motion-outward:not(:disabled) .gridui-button-end-icon {
+      transition: transform var(--gridui-motion-duration-quick) var(--gridui-motion-ease-out);
+    }
+    .gridui-button-icon-motion-outward:hover:not(:disabled) .gridui-button-end-icon {
+      transform: translate(var(--gridui-space-4), calc(-1 * var(--gridui-space-4)));
+    }
+    .gridui-button-icon-motion-outward:dir(rtl):hover:not(:disabled) .gridui-button-end-icon {
+      transform: translate(calc(-1 * var(--gridui-space-4)), calc(-1 * var(--gridui-space-4)));
+    }
+  }
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/button",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "GridUI React buttons and action helpers",
   "license": "UNLICENSED",
   "type": "module",
@@ -22,8 +22,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@gridui/style-utils": "^2.1.3",
-    "@gridui/theme": "^2.2.1",
+    "@gridui/style-utils": "^2.1.4",
+    "@gridui/theme": "^2.3.2",
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {
@@ -35,7 +35,7 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "jest": "30.5.2",
-    "lucide-react": "1.63.0",
+    "lucide-react": "1.65.0",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "typescript": "6.0.3"