@gridui/button 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,80 @@
-# Temporary Holding Version
+# Button
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@gridui/button` owns native buttons, button-styled links, shared button classes,
+async action scheduling, and browser download lifecycle. It has no domain,
+route, locale, or Layout dependency. Load `@gridui/button/styles.css` after
+the theme styles.
+
+```tsx
+import { Button, ButtonLink } from "@gridui/button";
+import "@gridui/button/styles.css";
+
+<Button type="submit" loading={saving}>Save changes</Button>;
+<ButtonLink href="/guide" variant="text" endIcon={<ArrowUpRight />}>
+    Read the guide
+</ButtonLink>;
+```
+
+## Native behavior
+
+`Button` forwards native button props and refs. It defaults to `type="button"`;
+use `type="submit"` for a form action. `loading` disables the native button and
+exposes `aria-busy` without replacing the visible action name. Native `disabled`
+remains available independently of loading.
+
+`ButtonLink` forwards native anchor props and refs and requires `href`. It
+defaults to the secondary variant and retains navigation, modified-click,
+download, target, and rel behavior. It has no loading or disabled button API.
+Use a real button when the action needs native disabled behavior.
+
+## Appearance and icons
+
+The variants are `primary`, `secondary`, `quiet`, and `text`. Sizes are
+`standard` (2.75rem minimum height) and `small` (2.25rem). The existing `standard`,
+`icon`, `entry`, and `rail` layouts remain available for non-text variants.
+Small icon controls retain a 2.75rem touch target on coarse pointers.
+
+`text` accepts only `layout="standard"`, which may be omitted. Give it a visible
+label in `children`; use a non-text icon layout for an icon-only action. Its
+transparent surface has a fixed bottom underline and no inline padding. The
+underline does not appear or move on hover. Text uses the surrounding region's
+foreground and all variants retain the theme's native keyboard focus treatment.
+There are no application colors or implicit icon transforms.
+
+`startIcon` and `endIcon` accept decorative React nodes before and after the
+existing `children`. Their wrappers are hidden from assistive technology and
+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.
+
+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.
+Disabled buttons keep their base fill and reduced opacity. Standard and small
+sizes scale with the consumer's root font size.
+
+`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.
+Callers using the class helper own native semantics, icon accessibility, and
+loading behavior.
+
+## Action helpers
+
+`useAsyncAction({ action, onStart?, disabled? })` returns `pending` and `run`.
+It publishes pending state and optional start feedback before yielding to the
+browser event loop, runs the action, and releases pending state on success or
+failure. Disabled actions and repeated activation while pending are ignored.
+Callers own business error handling and generated bytes.
+
+`downloadBlob(blob, filename)` creates the download anchor and object URL,
+activates the native download, removes the anchor, and releases the URL after
+the browser has had time to consume it. Callers own the Blob contents and name.
+
+## 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/icon-layout combinations, missing link destinations, and icon
+nodes passed as style variants. Storybook includes text actions and links,
+decorative icon slots, long labels, loading, and the existing variants.

package/dist/async-action.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @author WMXPY
+ * @package Button
+ * @namespace Root
+ * @description Async Action
+ */
+type Action = () => void | Promise<void>;
+export declare const performAsyncAction: ({ action, onStart, onPendingChange }: {
+    readonly action: Action;
+    readonly onStart?: Action;
+    readonly onPendingChange: (pending: boolean) => void;
+}) => Promise<void>;
+export declare const useAsyncAction: ({ action, onStart, disabled }: {
+    readonly action: Action;
+    readonly onStart?: Action;
+    readonly disabled?: boolean;
+}) => {
+    pending: boolean;
+    run(): Promise<void>;
+};
+export {};

package/dist/button.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @author WMXPY
+ * @package Button
+ * @namespace Root
+ * @description Button
+ */
+import type { ButtonVariants } from "./style";
+import type { ComponentPropsWithRef, FC, ReactNode } from "react";
+export type ButtonProps = ComponentPropsWithRef<"button"> & ButtonVariants & {
+    readonly loading?: boolean;
+    readonly startIcon?: ReactNode;
+    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

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

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Button
+ * @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";

package/dist/index.js

@@ -0,0 +1,253 @@
+// src/async-action.ts
+import { useRef, useState } from "react";
+var performAsyncAction = async ({ action, onStart, onPendingChange }) => {
+  onPendingChange(true);
+  try {
+    await onStart?.();
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+    await action();
+  } finally {
+    onPendingChange(false);
+  }
+};
+var useAsyncAction = ({ action, onStart, disabled = false }) => {
+  const [
+    pending,
+    setPending
+  ] = useState(false);
+  const active = useRef(false);
+  return {
+    pending,
+    async run() {
+      if (disabled || active.current) {
+        return;
+      }
+      active.current = true;
+      try {
+        await performAsyncAction({
+          action,
+          ...onStart ? { onStart } : {},
+          onPendingChange: setPending
+        });
+      } finally {
+        active.current = false;
+      }
+    }
+  };
+};
+
+// src/style.ts
+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"
+));
+var buttonStandardStyles = cva(cn(
+  "gridui-button-standard",
+  "min-h-11 py-gridui-8 px-gridui-16"
+));
+var buttonSmallStyles = cva(cn(
+  "gridui-button-small",
+  "min-h-9 py-gridui-4 px-gridui-8"
+));
+var buttonPrimaryStyles = cva(cn(
+  "gridui-button-primary",
+  "text-accent-foreground bg-accent-background border-accent-background"
+));
+var buttonSecondaryStyles = cva(cn(
+  "gridui-button-secondary",
+  "text-foreground bg-transparent border-border",
+  "[&:hover:not(:disabled)]:bg-surface-hover"
+));
+var buttonQuietStyles = cva(cn(
+  "gridui-button-quiet",
+  "text-foreground bg-transparent",
+  "[&:hover:not(:disabled)]:bg-surface-hover"
+));
+var buttonTextStyles = cva(cn(
+  "gridui-button-text",
+  "text-foreground bg-transparent border-0 border-b border-foreground rounded-none"
+));
+var buttonEntryStyles = cva(cn(
+  "gridui-button-entry",
+  "justify-between w-full py-gridui-16 px-gridui-24 bg-background"
+));
+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"
+));
+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"
+));
+var buttonVariants = cva(buttonStyles(), {
+  variants: {
+    variant: {
+      primary: buttonPrimaryStyles(),
+      secondary: buttonSecondaryStyles(),
+      quiet: buttonQuietStyles(),
+      text: buttonTextStyles()
+    },
+    size: {
+      small: buttonSmallStyles(),
+      standard: buttonStandardStyles()
+    },
+    layout: {
+      standard: "",
+      icon: buttonIconStyles(),
+      entry: buttonEntryStyles(),
+      rail: buttonRailStyles()
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "standard"
+  }
+});
+var buttonClass = (variants = {}, className) => {
+  return cn(buttonVariants({
+    variant: variants.variant,
+    size: variants.size,
+    layout: variants.layout
+  }), variants.variant === "text" && "px-0", className);
+};
+
+// src/button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = (props) => {
+  const {
+    variant,
+    size,
+    layout,
+    loading = false,
+    disabled,
+    type = "button",
+    className,
+    children,
+    startIcon,
+    endIcon,
+    ...restProps
+  } = props;
+  const variants = variant === "text" ? {
+    variant,
+    size,
+    layout: "standard"
+  } : {
+    variant,
+    size,
+    layout
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...restProps,
+      type,
+      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
+          }
+        )
+      ]
+    }
+  );
+};
+var ButtonLink = (props) => {
+  const {
+    variant = "secondary",
+    size,
+    layout,
+    className,
+    children,
+    startIcon,
+    endIcon,
+    ...restProps
+  } = props;
+  const variants = variant === "text" ? {
+    variant,
+    size,
+    layout: "standard"
+  } : {
+    variant,
+    size,
+    layout
+  };
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...restProps,
+      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
+          }
+        )
+      ]
+    }
+  );
+};
+
+// 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,
+  buttonClass,
+  downloadBlob,
+  useAsyncAction
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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 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        },\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\";\n        readonly layout?: \"standard\" | null | undefined;\n    }\n    | {\n        readonly variant?: Exclude<ButtonStyleVariants[\"variant\"], \"text\">;\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\" && \"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\" ? {\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\" ? {\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": []
+}

package/dist/style.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @author WMXPY
+ * @package Button
+ * @namespace Root
+ * @description Style
+ */
+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 buttonTextStyles: (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 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" | null | undefined;
+    size?: "small" | "standard" | null | undefined;
+    layout?: "standard" | "icon" | "entry" | "rail" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonStyleVariants = VariantProps<typeof buttonVariants>;
+export type ButtonVariants = Omit<ButtonStyleVariants, "variant" | "layout"> & ({
+    readonly variant: "text";
+    readonly layout?: "standard" | null | undefined;
+} | {
+    readonly variant?: Exclude<ButtonStyleVariants["variant"], "text">;
+    readonly layout?: ButtonStyleVariants["layout"];
+});
+export declare const buttonClass: (variants?: ButtonVariants, className?: string) => string;
+export {};

package/dist/styles.css

@@ -0,0 +1,239 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --spacing: 0.25rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
+  .w-fit {
+    width: fit-content;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .min-w-0 {
+    min-width: 0px;
+  }
+  .min-w-gridui-24 {
+    min-width: var(--gridui-space-24);
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-gridui-8 {
+    gap: var(--gridui-space-8);
+  }
+  .rounded-control {
+    border-radius: var(--gridui-control-radius);
+  }
+  .rounded-none {
+    border-radius: 0;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-accent-background {
+    border-color: var(--gridui-accent-background);
+  }
+  .border-border {
+    border-color: var(--gridui-border);
+  }
+  .border-foreground {
+    border-color: var(--gridui-foreground);
+  }
+  .border-transparent {
+    border-color: transparent;
+  }
+  .bg-accent-background {
+    background-color: var(--gridui-accent-background);
+  }
+  .bg-background {
+    background-color: var(--gridui-background);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .p-0 {
+    padding: 0px;
+  }
+  .px-0 {
+    padding-inline: 0px;
+  }
+  .px-gridui-8 {
+    padding-inline: var(--gridui-space-8);
+  }
+  .px-gridui-16 {
+    padding-inline: var(--gridui-space-16);
+  }
+  .px-gridui-24 {
+    padding-inline: var(--gridui-space-24);
+  }
+  .py-gridui-4 {
+    padding-block: var(--gridui-space-4);
+  }
+  .py-gridui-8 {
+    padding-block: var(--gridui-space-8);
+  }
+  .py-gridui-16 {
+    padding-block: var(--gridui-space-16);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .type-ui {
+    font: var(--gridui-type-ui);
+    letter-spacing: normal;
+  }
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
+  }
+  .text-accent-foreground {
+    color: var(--gridui-accent-foreground);
+  }
+  .text-foreground {
+    color: var(--gridui-foreground);
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
+  .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\) {
+    --tw-duration: var(--gridui-motion-duration-quick);
+    transition-duration: var(--gridui-motion-duration-quick);
+  }
+  .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 {
+    cursor: not-allowed;
+  }
+  .disabled\:opacity-50:disabled {
+    opacity: 50%;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .motion-reduce\:transition-none {
+      transition-property: none;
+    }
+  }
+  .\[\&_\>_span\]\:whitespace-nowrap > span {
+    white-space: nowrap;
+  }
+  .\[\&_\>_span\]\:\[writing-mode\:vertical-rl\] > span {
+    writing-mode: vertical-rl;
+  }
+  .\[\&_svg\]\:pointer-events-none svg {
+    pointer-events: none;
+  }
+  .\[\&_svg\]\:h-gridui-16 svg {
+    height: var(--gridui-space-16);
+  }
+  .\[\&_svg\]\:w-gridui-16 svg {
+    width: var(--gridui-space-16);
+  }
+  .\[\&_svg\]\:shrink-0 svg {
+    flex-shrink: 0;
+  }
+  .\[\&\.gridui-button-small\]\:h-9.gridui-button-small {
+    height: calc(var(--spacing) * 9);
+  }
+  .\[\&\.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 {
+      height: calc(var(--spacing) * 11);
+    }
+    .pointer-coarse\:\[\&\.gridui-button-small\]\:w-11.gridui-button-small {
+      width: calc(var(--spacing) * 11);
+    }
+  }
+  .\[\&\:active\:not\(\:disabled\)\]\:opacity-\[0\.8\]:active:not(:disabled) {
+    opacity: 0.8;
+  }
+  .\[\&\:hover\:not\(\:disabled\)\]\:border-foreground:hover:not(:disabled) {
+    border-color: var(--gridui-foreground);
+  }
+  .\[\&\:hover\:not\(\:disabled\)\]\:bg-surface-hover:hover:not(:disabled) {
+    background-color: var(--gridui-surface-hover);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  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)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-duration: initial;
+      --tw-ease: initial;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@gridui/button",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "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"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@gridui/style-utils": "^2.1.1",
+    "@gridui/theme": "^2.1.1",
+    "class-variance-authority": "0.7.1"
+  },
+  "devDependencies": {
+    "@gridui-internal/configuration": "0.0.0",
+    "@jest/globals": "30.5.2",
+    "@storybook/react-vite": "10.6.3",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jest": "30.5.2",
+    "lucide-react": "1.61.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "6.0.3"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "scripts": {
+    "build": "node ../../scripts/compilation/package.ts",
+    "compile": "tsc --project tsconfig.json",
+    "test": "jest",
+    "coverage": "jest --coverage"
+  }
 }