@gridui/button 2.0.0 → 2.1.2

package/README.md

@@ -29,9 +29,10 @@ Use a real button when the action needs native disabled behavior.
 
 ## Appearance and icons
 
-The variants are `primary`, `secondary`, `quiet`, `text`, and `underlined`. Sizes are
+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 remain available for non-text/non-underlined variants.
+`icon`, `entry`, and `rail` layouts, plus the full-region `cell` layout, are
+available for non-text/non-underlined variants.
 Small icon controls retain a 2.75rem touch target on coarse pointers.
 
 `text` and `underlined` accept only `layout="standard"`, which may be omitted.
@@ -57,6 +58,20 @@ omit the border. Secondary and quiet surfaces use `surface-hover` while enabled.
 Disabled buttons keep their base fill and reduced opacity. Standard and small
 sizes scale with the consumer's root font size.
 
+`highlight` uses the neutral `surface` fill and normal foreground. Use it for a
+persistent selected action, with `quiet` for its unselected peers. Choose the
+variant from application state and supply the matching native semantics, such as
+`aria-pressed` for a toggle or `aria-current="page"` for navigation. The variant
+does not create selection behavior, and ARIA attributes do not choose a variant.
+
+Appearance and layout are independent. `standard` and `icon` retain standalone
+control geometry. `entry` fills the available width with entry spacing; it does
+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).
+
 `buttonClass(variants, className?)` exposes the same appearance and text-layout
 constraints for caller-owned native elements. `startIcon` and `endIcon` are
 component props, not styling variants. It uses `cn` for consumer class overrides.
@@ -80,5 +95,6 @@ the browser has had time to consume it. Callers own the Blob contents and name.
 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 text and underlined actions and links,
-decorative icon slots, long labels, loading, and the existing variants.
+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.

package/dist/{async-action.d.ts → button/async-action.d.ts}

@@ -1,7 +1,7 @@
 /**
  * @author WMXPY
  * @package Button
- * @namespace Root
+ * @namespace Button
  * @description Async Action
  */
 type Action = () => void | Promise<void>;

package/dist/{button.d.ts → button/button.d.ts}

@@ -1,10 +1,10 @@
 /**
  * @author WMXPY
  * @package Button
- * @namespace Root
+ * @namespace Button
  * @description Button
  */
-import type { ButtonVariants } from "./style";
+import { type ButtonVariants } from "../shared/style";
 import type { ComponentPropsWithRef, FC, ReactNode } from "react";
 export type ButtonProps = ComponentPropsWithRef<"button"> & ButtonVariants & {
     readonly loading?: boolean;
@@ -12,9 +12,3 @@ export type ButtonProps = ComponentPropsWithRef<"button"> & ButtonVariants & {
     readonly endIcon?: ReactNode;
 };
 export declare const Button: FC<ButtonProps>;
-export type ButtonLinkProps = ComponentPropsWithRef<"a"> & ButtonVariants & {
-    readonly href: string;
-    readonly startIcon?: ReactNode;
-    readonly endIcon?: ReactNode;
-};
-export declare const ButtonLink: FC<ButtonLinkProps>;

package/dist/{download.d.ts → button/download.d.ts}

@@ -1,7 +1,7 @@
 /**
  * @author WMXPY
  * @package Button
- * @namespace Root
+ * @namespace Button
  * @description Download
  */
 export declare const downloadBlob: (blob: Blob, filename: string) => void;

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

@@ -0,0 +1,14 @@
+/**
+ * @author WMXPY
+ * @package Button
+ * @namespace ButtonLink
+ * @description Button Link
+ */
+import { type ButtonVariants } from "../shared/style";
+import type { ComponentPropsWithRef, FC, ReactNode } from "react";
+export type ButtonLinkProps = ComponentPropsWithRef<"a"> & ButtonVariants & {
+    readonly href: string;
+    readonly startIcon?: ReactNode;
+    readonly endIcon?: ReactNode;
+};
+export declare const ButtonLink: FC<ButtonLinkProps>;

package/dist/index.d.ts

@@ -4,9 +4,11 @@
  * @namespace Root
  * @description Index
  */
-export { useAsyncAction } from "./async-action";
-export type { ButtonLinkProps, ButtonProps } from "./button";
-export { Button, ButtonLink } from "./button";
-export { downloadBlob } from "./download";
-export type { ButtonVariants } from "./style";
-export { buttonClass } from "./style";
+export { useAsyncAction } from "./button/async-action";
+export type { ButtonProps } from "./button/button";
+export { Button } from "./button/button";
+export { downloadBlob } from "./button/download";
+export type { ButtonLinkProps } from "./button-link/button-link";
+export { ButtonLink } from "./button-link/button-link";
+export type { ButtonVariants } from "./shared/style";
+export { buttonClass } from "./shared/style";

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/async-action.ts
+// src/button/async-action.ts
 import { useRef, useState } from "react";
 var performAsyncAction = async ({ action, onStart, onPendingChange }) => {
   onPendingChange(true);
@@ -38,7 +38,7 @@ var useAsyncAction = ({ action, onStart, disabled = false }) => {
   };
 };
 
-// src/style.ts
+// src/shared/style.ts
 import { cn } from "@gridui/style-utils";
 import { cva } from "class-variance-authority";
 var buttonStyles = cva(cn(
@@ -72,6 +72,10 @@ var buttonQuietStyles = cva(cn(
   "text-foreground bg-transparent",
   "[&:hover:not(:disabled)]:bg-surface-hover"
 ));
+var buttonHighlightStyles = cva(cn(
+  "gridui-button-highlight",
+  "text-foreground bg-surface"
+));
 var buttonTextStyles = cva(cn(
   "gridui-button-text",
   "text-foreground bg-transparent border-0 rounded-none"
@@ -82,7 +86,11 @@ var buttonUnderlinedStyles = cva(cn(
 ));
 var buttonEntryStyles = cva(cn(
   "gridui-button-entry",
-  "justify-between w-full py-gridui-16 px-gridui-24 bg-background"
+  "justify-between w-full py-gridui-16 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"
 ));
 var buttonRailStyles = cva(cn(
   "gridui-button-rail",
@@ -101,6 +109,7 @@ var buttonVariants = cva(buttonStyles(), {
       primary: buttonPrimaryStyles(),
       secondary: buttonSecondaryStyles(),
       quiet: buttonQuietStyles(),
+      highlight: buttonHighlightStyles(),
       text: buttonTextStyles(),
       underlined: buttonUnderlinedStyles()
     },
@@ -112,6 +121,7 @@ var buttonVariants = cva(buttonStyles(), {
       standard: "",
       icon: buttonIconStyles(),
       entry: buttonEntryStyles(),
+      cell: buttonCellStyles(),
       rail: buttonRailStyles()
     }
   },
@@ -128,7 +138,7 @@ var buttonClass = (variants = {}, className) => {
   }), (variants.variant === "text" || variants.variant === "underlined") && "px-0", className);
 };
 
-// src/button.tsx
+// src/button/button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var Button = (props) => {
   const {
@@ -185,6 +195,23 @@ var Button = (props) => {
     }
   );
 };
+
+// src/button/download.ts
+var downloadBlob = (blob, filename) => {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.setTimeout(() => {
+    URL.revokeObjectURL(url);
+  }, 3e4);
+};
+
+// src/button-link/button-link.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ButtonLink = (props) => {
   const {
     variant = "secondary",
@@ -205,13 +232,13 @@ var ButtonLink = (props) => {
     size,
     layout
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "a",
     {
       ...restProps,
       className: buttonClass(variants, className),
       children: [
-        startIcon !== void 0 && startIcon !== null && typeof startIcon !== "boolean" && /* @__PURE__ */ jsx(
+        startIcon !== void 0 && startIcon !== null && typeof startIcon !== "boolean" && /* @__PURE__ */ jsx2(
           "span",
           {
             className: "gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none",
@@ -221,7 +248,7 @@ var ButtonLink = (props) => {
           }
         ),
         children,
-        endIcon !== void 0 && endIcon !== null && typeof endIcon !== "boolean" && /* @__PURE__ */ jsx(
+        endIcon !== void 0 && endIcon !== null && typeof endIcon !== "boolean" && /* @__PURE__ */ jsx2(
           "span",
           {
             className: "gridui-button-adornment inline-flex shrink-0 items-center pointer-events-none",
@@ -234,20 +261,6 @@ var ButtonLink = (props) => {
     }
   );
 };
-
-// src/download.ts
-var downloadBlob = (blob, filename) => {
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = filename;
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  window.setTimeout(() => {
-    URL.revokeObjectURL(url);
-  }, 3e4);
-};
 export {
   Button,
   ButtonLink,

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/async-action.ts", "../src/style.ts", "../src/button.tsx", "../src/download.ts"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Button\n * @namespace Root\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 Root\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { cva } 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 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 bg-background\",\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            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            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 Root\n * @description Button\n */\n\nimport type { ButtonVariants } from \"./style\";\nimport { buttonClass } from \"./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\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", "/**\n * @author WMXPY\n * @package Button\n * @namespace Root\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"],
-  "mappings": "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",
-  "names": []
+  "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"]
 }

package/dist/{style.d.ts → shared/style.d.ts}

@@ -1,25 +1,27 @@
 /**
  * @author WMXPY
  * @package Button
- * @namespace Root
+ * @namespace Shared
  * @description Style
  */
-import type { VariantProps } from "class-variance-authority";
+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 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;
+export declare const buttonHighlightStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonTextStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonUnderlinedStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonEntryStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+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 buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "quiet" | "text" | "underlined" | null | undefined;
+    variant?: "primary" | "secondary" | "quiet" | "highlight" | "text" | "underlined" | null | undefined;
     size?: "small" | "standard" | null | undefined;
-    layout?: "standard" | "icon" | "entry" | "rail" | null | undefined;
+    layout?: "standard" | "icon" | "entry" | "cell" | "rail" | 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

@@ -18,6 +18,9 @@
   .h-11 {
     height: calc(var(--spacing) * 11);
   }
+  .h-full {
+    height: 100%;
+  }
   .min-h-9 {
     min-height: calc(var(--spacing) * 9);
   }
@@ -60,6 +63,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-gridui-8 {
     gap: var(--gridui-space-8);
   }
@@ -100,8 +106,8 @@
   .bg-accent-background {
     background-color: var(--gridui-accent-background);
   }
-  .bg-background {
-    background-color: var(--gridui-background);
+  .bg-surface {
+    background-color: var(--gridui-surface);
   }
   .bg-transparent {
     background-color: transparent;
@@ -133,6 +139,9 @@
   .text-center {
     text-align: center;
   }
+  .text-left {
+    text-align: left;
+  }
   .type-ui {
     font: var(--gridui-type-ui);
     letter-spacing: normal;

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@gridui/button",
-  "version": "2.0.0",
+  "version": "2.1.2",
   "description": "GridUI React buttons and action helpers",
   "license": "UNLICENSED",
   "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sudo-ui/GridUI-React-Monorepo.git",
-    "directory": "packages/button"
-  },
   "files": [
     "dist",
     "README.md"
@@ -27,20 +22,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@gridui/style-utils": "^2.1.1",
-    "@gridui/theme": "^2.1.1",
+    "@gridui/style-utils": "^2.1.3",
+    "@gridui/theme": "^2.2.1",
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {
-    "@gridui-internal/configuration": "0.0.0",
+    "@gridui-internal/configuration": "0.0.0-internal",
     "@jest/globals": "30.5.2",
-    "@storybook/react-vite": "10.6.4",
+    "@storybook/react-vite": "10.6.5",
     "@types/jest": "30.0.0",
-    "@types/node": "26.6.5",
+    "@types/node": "26.6.6",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "jest": "30.5.2",
-    "lucide-react": "1.61.0",
+    "lucide-react": "1.63.0",
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "typescript": "6.0.3"