@gridui/button 3.0.0 → 3.1.0

package/README.md

@@ -65,6 +65,11 @@ 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.
 
+`startIconSize="standard"` keeps the leading SVG at the size shown above.
+`large` uses 2rem and `extra-large` uses 3rem. These presets affect only the
+leading slot, including SVGs inside a caller-owned component; the trailing icon
+retains its normal size. Graphical content remains caller-owned.
+
 `iconMotion="outward"` opts the `endIcon` into a small hover translation upward
 and toward the inline end. It follows inherited text direction, leaves any
 dividing line fixed, and does not animate disabled or loading buttons. Reduced
@@ -108,6 +113,20 @@ 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.
 
+Set `startIconLayout="divided"` to place a nonempty `startIcon` in its own leading
+region, outside the label. The default is `inline`, which keeps the icon beside
+the text within the label. This option applies only to `layout="divided"`.
+Both icon regions remain decorative parts of the same native action. Missing,
+null, or boolean leading content removes its region and separator.
+
+The leading region starts at the same width as the trailing region and expands
+when necessary to fit a larger leading SVG with inline space. It stretches with
+wrapped labels and uses a logical end separator, including in RTL. Oversized
+graphics can increase the control above its nominal minimum height. The outer
+width remains owned by the containing page; changing a mark does not change the
+slot's preset dimensions. Applications can keep project switches stable by
+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
@@ -121,6 +140,12 @@ The containing page owns its maximum width.
     View projects
 </ButtonLink>;
 
+<ButtonLink href="/project" variant="secondary" layout="divided"
+    size="extra-large" startIcon={<ProjectMark />}
+    startIconLayout="divided" startIconSize="large" endIcon={<ArrowUpRight />}>
+    Open project
+</ButtonLink>;
+
 <Button variant="underlined" size="large" iconMotion="outward"
     endIcon={<ArrowUpRight />} onClick={reviewProject}>
     Review project
@@ -145,9 +170,9 @@ Callers own business error handling and generated bytes.
 ## Verification
 
 Package unit tests cover native action/link semantics, decorative icon isolation,
-busy-state scheduling and failure cleanup. Type fixtures compile with the package
-and reject text and underlined/icon-layout combinations, missing link destinations, and icon
-nodes passed as style variants. Storybook includes standalone, icon, full-cell,
+busy-state scheduling and failure cleanup. Type fixtures compile real consumer
+compositions and protect native anchor semantics, required link destinations,
+and the public icon options. 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. Divided-layout browser
 checks cover one-action hit areas, native keyboard activation, busy-state

package/dist/button/button.d.ts

@@ -5,10 +5,9 @@
  * @description Button
  */
 import { type ButtonVariants } from "../shared/style";
-import type { ComponentPropsWithRef, FC, ReactNode } from "react";
-export type ButtonProps = ComponentPropsWithRef<"button"> & ButtonVariants & {
+import type { ButtonAdornmentProps } from "../shared/types";
+import type { ComponentPropsWithRef, FC } from "react";
+export type ButtonProps = ComponentPropsWithRef<"button"> & ButtonVariants & ButtonAdornmentProps & {
     readonly loading?: boolean;
-    readonly startIcon?: ReactNode;
-    readonly endIcon?: ReactNode;
 };
 export declare const Button: FC<ButtonProps>;

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

@@ -5,10 +5,9 @@
  * @description Button Link
  */
 import { type ButtonVariants } from "../shared/style";
-import type { ComponentPropsWithRef, FC, ReactNode } from "react";
-export type ButtonLinkProps = ComponentPropsWithRef<"a"> & ButtonVariants & {
+import type { ButtonAdornmentProps } from "../shared/types";
+import type { ComponentPropsWithRef, FC } from "react";
+export type ButtonLinkProps = ComponentPropsWithRef<"a"> & ButtonVariants & ButtonAdornmentProps & {
     readonly href: string;
-    readonly startIcon?: ReactNode;
-    readonly endIcon?: ReactNode;
 };
 export declare const ButtonLink: FC<ButtonLinkProps>;

package/dist/index.js

@@ -44,7 +44,7 @@ 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-[&_svg]:w-gridui-16 gridui-u-[&_svg]:h-gridui-16 gridui-u-[&_svg]:shrink-0 gridui-u-[&_svg]:pointer-events-none",
+  "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",
@@ -52,19 +52,19 @@ var buttonStyles = cva(cn(
 ));
 var buttonStandardStyles = cva(cn(
   "gridui-button-standard",
-  "gridui-u-min-h-11 gridui-u-py-gridui-8 gridui-u-px-gridui-16"
+  "gridui-u-min-h-gridui-control gridui-u-py-gridui-8 gridui-u-px-gridui-16"
 ));
 var buttonSmallStyles = cva(cn(
   "gridui-button-small",
-  "gridui-u-min-h-9 gridui-u-py-gridui-4 gridui-u-px-gridui-8"
+  "gridui-u-min-h-gridui-control-small 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"
+  "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)]"
 ));
 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"
+  "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)]"
 ));
 var buttonPrimaryStyles = cva(cn(
   "gridui-button-primary",
@@ -95,21 +95,21 @@ var buttonEntryStyles = cva(cn(
   "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 gridui-interaction-boundary",
+  "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"
 ));
 var buttonRailStyles = cva(cn(
-  "gridui-button-rail gridui-interaction-boundary",
+  "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"
 ));
 var buttonIconStyles = cva(cn(
   "gridui-button-icon",
-  "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-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-11 gridui-u-pointer-coarse:[&.gridui-button-small]:h-11"
+  "gridui-u-pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-pointer-coarse:[&.gridui-button-small]:h-gridui-control"
 ));
 var buttonDividedStyles = cva(cn(
   "gridui-button-divided",
@@ -129,15 +129,42 @@ var buttonLabelStyles = cva(cn(
   },
   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"
+), {
+  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)]"
+    }
+  },
+  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"
+), {
+  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"
+    }
+  },
+  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",
+      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"
     }
   },
@@ -204,20 +231,26 @@ var buttonClass = (variants = {}, className) => {
 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 { children, startIcon, startIconLayout, startIconSize, endIcon, layout, size, iconMotion } = props;
+  const dividedStart = layout === "divided" && startIconLayout === "divided";
+  const startAdornment = startIcon !== void 0 && startIcon !== null && typeof startIcon !== "boolean" ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn2(
+        buttonStartIconStyles({ iconSize: startIconSize }),
+        dividedStart && buttonStartRegionStyles({ size })
+      ),
+      "aria-hidden": "true",
+      inert: true,
+      children: startIcon
+    }
+  ) : null;
   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
-      }
-    ),
+    !dividedStart && startAdornment,
     children
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    dividedStart && startAdornment,
     layout === "divided" ? /* @__PURE__ */ jsx(
       "span",
       {
@@ -260,6 +293,8 @@ var Button = (props) => {
     className,
     children,
     startIcon,
+    startIconLayout = "inline",
+    startIconSize = "standard",
     endIcon,
     ...restProps
   } = props;
@@ -289,6 +324,8 @@ var Button = (props) => {
           size,
           iconMotion,
           startIcon,
+          startIconLayout,
+          startIconSize,
           endIcon,
           children
         }
@@ -308,6 +345,8 @@ var ButtonLink = (props) => {
     className,
     children,
     startIcon,
+    startIconLayout = "inline",
+    startIconSize = "standard",
     endIcon,
     ...restProps
   } = props;
@@ -334,6 +373,8 @@ var ButtonLink = (props) => {
           size,
           iconMotion,
           startIcon,
+          startIconLayout,
+          startIconSize,
           endIcon,
           children
         }

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/button/async-action.ts", "../src/shared/style.ts", "../src/shared/content.tsx", "../src/button/button.tsx", "../src/button-link/button-link.tsx"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Async Action\n */\n\nimport { useRef, useState } from \"react\";\n\ntype Action = () => void | Promise<void>;\n\nexport const performAsyncAction = async ({ action, onStart, onPendingChange }: {\n    readonly action: Action;\n    readonly onStart?: Action;\n    readonly onPendingChange: (pending: boolean) => void;\n}): Promise<void> => {\n    onPendingChange(true);\n    try {\n        await onStart?.();\n        await new Promise<void>((resolve) => {\n            setTimeout(resolve, 0);\n        });\n        await action();\n    } finally {\n        onPendingChange(false);\n    }\n};\n\nexport const useAsyncAction = ({ action, onStart, disabled = false }: {\n    readonly action: Action;\n    readonly onStart?: Action;\n    readonly disabled?: boolean;\n}) => {\n    const [\n        pending,\n        setPending,\n    ] = useState(false);\n    const active = useRef(false);\n    return {\n        pending,\n        async run(): Promise<void> {\n            if (disabled || active.current) {\n                return;\n            }\n            active.current = true;\n            try {\n                await performAsyncAction({\n                    action,\n                    ...(onStart ? { onStart } : {}),\n                    onPendingChange: setPending,\n                });\n            } finally {\n                active.current = false;\n            }\n        },\n    };\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const buttonStyles = cva(cn(\n    \"gridui-button\",\n    \"gridui-u-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-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-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));\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 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    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, 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 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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",
+  "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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",
   "names": ["cn", "jsx", "jsx"]
 }

package/dist/shared/content.d.ts

@@ -5,11 +5,10 @@
  * @description Content
  */
 import { type ButtonVariants } from "./style";
+import type { ButtonAdornmentProps } from "./types";
 import type { FC, ReactNode } from "react";
-export type ButtonContentProps = {
+export type ButtonContentProps = ButtonAdornmentProps & {
     readonly children?: ReactNode;
-    readonly startIcon?: ReactNode;
-    readonly endIcon?: ReactNode;
     readonly layout?: ButtonVariants["layout"];
     readonly size?: ButtonVariants["size"];
     readonly iconMotion?: ButtonVariants["iconMotion"];

package/dist/shared/style.d.ts

@@ -24,6 +24,12 @@ export declare const buttonDividedStyles: (props?: import("class-variance-author
 export declare const buttonLabelStyles: (props?: ({
     size?: "small" | "standard" | "large" | "extra-large" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const buttonStartIconStyles: (props?: ({
+    iconSize?: "standard" | "large" | "extra-large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const buttonStartRegionStyles: (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;

package/dist/shared/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @author WMXPY
+ * @package Button
+ * @namespace Shared
+ * @description Types
+ */
+import type { ReactNode } from "react";
+export type ButtonAdornmentProps = {
+    readonly startIcon?: ReactNode;
+    readonly startIconLayout?: "inline" | "divided";
+    readonly startIconSize?: "standard" | "large" | "extra-large";
+    readonly endIcon?: ReactNode;
+};

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -15,32 +15,23 @@
   .gridui-u-inline-flex {
     display: inline-flex;
   }
-  .gridui-u-h-11 {
-    height: calc(var(--spacing) * 11);
-  }
   .gridui-u-h-full {
     height: 100%;
   }
-  .gridui-u-min-h-9 {
-    min-height: calc(var(--spacing) * 9);
-  }
-  .gridui-u-min-h-11 {
-    min-height: calc(var(--spacing) * 11);
-  }
-  .gridui-u-min-h-12 {
-    min-height: calc(var(--spacing) * 12);
+  .gridui-u-h-gridui-control {
+    height: var(--gridui-control-min-height);
   }
   .gridui-u-min-h-18 {
     min-height: calc(var(--spacing) * 18);
   }
-  .gridui-u-w-9 {
-    width: calc(var(--spacing) * 9);
+  .gridui-u-min-h-gridui-control {
+    min-height: var(--gridui-control-min-height);
   }
-  .gridui-u-w-11 {
-    width: calc(var(--spacing) * 11);
+  .gridui-u-min-h-gridui-control-large {
+    min-height: var(--gridui-control-min-height-large);
   }
-  .gridui-u-w-12 {
-    width: calc(var(--spacing) * 12);
+  .gridui-u-min-h-gridui-control-small {
+    min-height: var(--gridui-control-min-height-small);
   }
   .gridui-u-w-fit {
     width: fit-content;
@@ -51,6 +42,15 @@
   .gridui-u-w-gridui-64 {
     width: var(--gridui-space-64);
   }
+  .gridui-u-w-gridui-control {
+    width: var(--gridui-control-min-height);
+  }
+  .gridui-u-w-gridui-control-large {
+    width: var(--gridui-control-min-height-large);
+  }
+  .gridui-u-w-gridui-control-small {
+    width: var(--gridui-control-min-height-small);
+  }
   .gridui-u-max-w-full {
     max-width: 100%;
   }
@@ -117,6 +117,10 @@
     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 {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -218,6 +222,18 @@
     --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-button-icon-size: var(--gridui-icon-size);
+  }
+  .gridui-u-\[--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-button-icon-size: var(--gridui-space-32);
+  }
+  .gridui-u-\[--gridui-button-icon-size\:var\(--gridui-space-48\)\] {
+    --gridui-button-icon-size: var(--gridui-space-48);
+  }
   .gridui-u-disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
@@ -250,17 +266,11 @@
   .gridui-u-\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }
-  .gridui-u-\[\&_svg\]\:h-5 svg {
-    height: calc(var(--spacing) * 5);
+  .gridui-u-\[\&_svg\]\:h-\(--gridui-button-icon-size\) svg {
+    height: var(--gridui-button-icon-size);
   }
-  .gridui-u-\[\&_svg\]\:h-gridui-16 svg {
-    height: var(--gridui-space-16);
-  }
-  .gridui-u-\[\&_svg\]\:w-5 svg {
-    width: calc(var(--spacing) * 5);
-  }
-  .gridui-u-\[\&_svg\]\:w-gridui-16 svg {
-    width: var(--gridui-space-16);
+  .gridui-u-\[\&_svg\]\:w-\(--gridui-button-icon-size\) svg {
+    width: var(--gridui-button-icon-size);
   }
   .gridui-u-\[\&_svg\]\:shrink-0 svg {
     flex-shrink: 0;
@@ -271,28 +281,31 @@
   .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\]\:h-gridui-control-large.gridui-button-large {
+    height: var(--gridui-control-min-height-large);
   }
-  .gridui-u-\[\&\.gridui-button-large\]\:w-12.gridui-button-large {
-    width: calc(var(--spacing) * 12);
+  .gridui-u-\[\&\.gridui-button-large\]\:w-gridui-control-large.gridui-button-large {
+    width: var(--gridui-control-min-height-large);
   }
-  .gridui-u-\[\&\.gridui-button-small\]\:h-9.gridui-button-small {
-    height: calc(var(--spacing) * 9);
+  .gridui-u-\[\&\.gridui-button-small\]\:h-gridui-control-small.gridui-button-small {
+    height: var(--gridui-control-min-height-small);
   }
-  .gridui-u-\[\&\.gridui-button-small\]\:w-9.gridui-button-small {
-    width: calc(var(--spacing) * 9);
+  .gridui-u-\[\&\.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-11.gridui-button-small {
-      height: calc(var(--spacing) * 11);
+    .gridui-u-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-11.gridui-button-small {
-      width: calc(var(--spacing) * 11);
+    .gridui-u-pointer-coarse\:\[\&\.gridui-button-small\]\:w-gridui-control.gridui-button-small {
+      width: var(--gridui-control-min-height);
     }
   }
 }
 @layer components {
+  .gridui-button-start-region {
+    min-width: calc(var(--gridui-button-icon-size) + var(--gridui-space-16));
+  }
   @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 {
       transition: transform var(--gridui-motion-duration-quick) var(--gridui-motion-ease-out);
@@ -319,7 +332,7 @@
   inherits: false;
 }
 @layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-border-style: solid;
       --tw-duration: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/button",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "GridUI React buttons and action helpers",
   "license": "UNLICENSED",
   "type": "module",
@@ -22,8 +22,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@gridui/style-utils": "^2.1.4",
-    "@gridui/theme": "^2.4.0",
+    "@gridui/style-utils": "^2.2.0",
+    "@gridui/theme": "^2.5.1",
     "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.66.0",
+    "lucide-react": "1.68.0",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "typescript": "6.0.3"