@gridui/button 2.2.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -9
- package/dist/index.d.ts +0 -1
- package/dist/index.js +6 -24
- package/dist/index.js.map +3 -3
- package/dist/styles.css +17 -14
- package/package.json +3 -3
- package/dist/button/download.d.ts +0 -7
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Button
|
|
2
2
|
|
|
3
3
|
`@gridui/button` owns native buttons, button-styled links, shared button classes,
|
|
4
|
-
async action scheduling
|
|
4
|
+
and async action scheduling. It has no domain,
|
|
5
5
|
route, locale, or Layout dependency. Load `@gridui/button/styles.css` after
|
|
6
6
|
the theme styles.
|
|
7
7
|
|
|
@@ -20,7 +20,9 @@ import "@gridui/button/styles.css";
|
|
|
20
20
|
`Button` forwards native button props and refs. It defaults to `type="button"`;
|
|
21
21
|
use `type="submit"` for a form action. `loading` disables the native button and
|
|
22
22
|
exposes `aria-busy` without replacing the visible action name. Native `disabled`
|
|
23
|
-
remains available independently of loading.
|
|
23
|
+
remains available independently of loading. For a focusable unavailable action,
|
|
24
|
+
supply `aria-disabled` and guard activation in its owner. ARIA/data-disabled
|
|
25
|
+
attributes share the disabled appearance; native `disabled` blocks activation.
|
|
24
26
|
|
|
25
27
|
`ButtonLink` forwards native anchor props and refs and requires `href`. It
|
|
26
28
|
defaults to the secondary variant and retains navigation, modified-click,
|
|
@@ -72,11 +74,13 @@ direction matches the action and locale.
|
|
|
72
74
|
|
|
73
75
|
Primary buttons use `accent-background` and `accent-foreground`. Secondary
|
|
74
76
|
buttons use a transparent fill, foreground text, and a border; quiet buttons
|
|
75
|
-
omit the border.
|
|
76
|
-
|
|
77
|
+
omit the border. All variants use Theme's shared hover and keyboard-focus outlines. Pressing
|
|
78
|
+
overlays the existing background without fading the label or icon. Highlight
|
|
79
|
+
buttons use `brand-tint` for persistent selection. Disabled buttons keep their
|
|
80
|
+
base fill and reduced opacity. Standard and small
|
|
77
81
|
sizes scale with the consumer's root font size.
|
|
78
82
|
|
|
79
|
-
`highlight` uses the
|
|
83
|
+
`highlight` uses the local `brand-tint` fill and normal foreground. Use it for a
|
|
80
84
|
persistent selected action, with `quiet` for its unselected peers. Choose the
|
|
81
85
|
variant from application state and supply the matching native semantics, such as
|
|
82
86
|
`aria-pressed` for a toggle or `aria-current="page"` for navigation. The variant
|
|
@@ -138,10 +142,6 @@ browser event loop, runs the action, and releases pending state on success or
|
|
|
138
142
|
failure. Disabled actions and repeated activation while pending are ignored.
|
|
139
143
|
Callers own business error handling and generated bytes.
|
|
140
144
|
|
|
141
|
-
`downloadBlob(blob, filename)` creates the download anchor and object URL,
|
|
142
|
-
activates the native download, removes the anchor, and releases the URL after
|
|
143
|
-
the browser has had time to consume it. Callers own the Blob contents and name.
|
|
144
|
-
|
|
145
145
|
## Verification
|
|
146
146
|
|
|
147
147
|
Package unit tests cover native action/link semantics, decorative icon isolation,
|
package/dist/index.d.ts
CHANGED
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
export { useAsyncAction } from "./button/async-action";
|
|
8
8
|
export type { ButtonProps } from "./button/button";
|
|
9
9
|
export { Button } from "./button/button";
|
|
10
|
-
export { downloadBlob } from "./button/download";
|
|
11
10
|
export type { ButtonLinkProps } from "./button-link/button-link";
|
|
12
11
|
export { ButtonLink } from "./button-link/button-link";
|
|
13
12
|
export type { ButtonVariants } from "./shared/style";
|
package/dist/index.js
CHANGED
|
@@ -46,8 +46,8 @@ var buttonStyles = cva(cn(
|
|
|
46
46
|
"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)",
|
|
47
47
|
"gridui-u-[&_svg]:w-gridui-16 gridui-u-[&_svg]:h-gridui-16 gridui-u-[&_svg]:shrink-0 gridui-u-[&_svg]:pointer-events-none",
|
|
48
48
|
"gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed",
|
|
49
|
-
"gridui-u-
|
|
50
|
-
"gridui-u-
|
|
49
|
+
"gridui-u-aria-disabled:opacity-50 gridui-u-aria-disabled:cursor-not-allowed",
|
|
50
|
+
"gridui-u-data-disabled:opacity-50 gridui-u-data-disabled:cursor-not-allowed",
|
|
51
51
|
"gridui-u-motion-reduce:transition-none"
|
|
52
52
|
));
|
|
53
53
|
var buttonStandardStyles = cva(cn(
|
|
@@ -72,17 +72,15 @@ var buttonPrimaryStyles = cva(cn(
|
|
|
72
72
|
));
|
|
73
73
|
var buttonSecondaryStyles = cva(cn(
|
|
74
74
|
"gridui-button-secondary",
|
|
75
|
-
"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-border"
|
|
76
|
-
"gridui-u-[&:hover:not(:disabled)]:bg-surface-hover"
|
|
75
|
+
"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-border"
|
|
77
76
|
));
|
|
78
77
|
var buttonQuietStyles = cva(cn(
|
|
79
78
|
"gridui-button-quiet",
|
|
80
|
-
"gridui-u-text-foreground gridui-u-bg-transparent"
|
|
81
|
-
"gridui-u-[&:hover:not(:disabled)]:bg-surface-hover"
|
|
79
|
+
"gridui-u-text-foreground gridui-u-bg-transparent"
|
|
82
80
|
));
|
|
83
81
|
var buttonHighlightStyles = cva(cn(
|
|
84
82
|
"gridui-button-highlight",
|
|
85
|
-
"gridui-u-text-foreground gridui-u-bg-
|
|
83
|
+
"gridui-u-text-foreground gridui-u-bg-brand-tint"
|
|
86
84
|
));
|
|
87
85
|
var buttonTextStyles = cva(cn(
|
|
88
86
|
"gridui-button-text",
|
|
@@ -194,13 +192,12 @@ var buttonVariants = cva(buttonStyles(), {
|
|
|
194
192
|
});
|
|
195
193
|
var buttonClass = (variants = {}, className) => {
|
|
196
194
|
const textVariant = variants.variant === "text" || variants.variant === "underlined";
|
|
197
|
-
const boundaryLayout = variants.layout === "cell" || variants.layout === "rail";
|
|
198
195
|
return cn(buttonVariants({
|
|
199
196
|
variant: variants.variant,
|
|
200
197
|
size: variants.size,
|
|
201
198
|
layout: variants.layout,
|
|
202
199
|
iconMotion: variants.iconMotion
|
|
203
|
-
}), textVariant && "gridui-u-px-0",
|
|
200
|
+
}), textVariant && "gridui-u-px-0", className);
|
|
204
201
|
};
|
|
205
202
|
|
|
206
203
|
// src/shared/content.tsx
|
|
@@ -300,20 +297,6 @@ var Button = (props) => {
|
|
|
300
297
|
);
|
|
301
298
|
};
|
|
302
299
|
|
|
303
|
-
// src/button/download.ts
|
|
304
|
-
var downloadBlob = (blob, filename) => {
|
|
305
|
-
const url = URL.createObjectURL(blob);
|
|
306
|
-
const link = document.createElement("a");
|
|
307
|
-
link.href = url;
|
|
308
|
-
link.download = filename;
|
|
309
|
-
document.body.appendChild(link);
|
|
310
|
-
link.click();
|
|
311
|
-
link.remove();
|
|
312
|
-
window.setTimeout(() => {
|
|
313
|
-
URL.revokeObjectURL(url);
|
|
314
|
-
}, 3e4);
|
|
315
|
-
};
|
|
316
|
-
|
|
317
300
|
// src/button-link/button-link.tsx
|
|
318
301
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
319
302
|
var ButtonLink = (props) => {
|
|
@@ -362,7 +345,6 @@ export {
|
|
|
362
345
|
Button,
|
|
363
346
|
ButtonLink,
|
|
364
347
|
buttonClass,
|
|
365
|
-
downloadBlob,
|
|
366
348
|
useAsyncAction
|
|
367
349
|
};
|
|
368
350
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/button/async-action.ts", "../src/shared/style.ts", "../src/shared/content.tsx", "../src/button/button.tsx", "../src/button
|
|
4
|
-
"sourcesContent": ["/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Async Action\n */\n\nimport { useRef, useState } from \"react\";\n\ntype Action = () => void | Promise<void>;\n\nexport const performAsyncAction = async ({ action, onStart, onPendingChange }: {\n readonly action: Action;\n readonly onStart?: Action;\n readonly onPendingChange: (pending: boolean) => void;\n}): Promise<void> => {\n onPendingChange(true);\n try {\n await onStart?.();\n await new Promise<void>((resolve) => {\n setTimeout(resolve, 0);\n });\n await action();\n } finally {\n onPendingChange(false);\n }\n};\n\nexport const useAsyncAction = ({ action, onStart, disabled = false }: {\n readonly action: Action;\n readonly onStart?: Action;\n readonly disabled?: boolean;\n}) => {\n const [\n pending,\n setPending,\n ] = useState(false);\n const active = useRef(false);\n return {\n pending,\n async run(): Promise<void> {\n if (disabled || active.current) {\n return;\n }\n active.current = true;\n try {\n await performAsyncAction({\n action,\n ...(onStart ? { onStart } : {}),\n onPendingChange: setPending,\n });\n } finally {\n active.current = false;\n }\n },\n };\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const buttonStyles = cva(cn(\n \"gridui-button\",\n \"gridui-u-inline-flex gridui-u-w-fit gridui-u-max-w-full gridui-u-min-w-0 gridui-u-items-center gridui-u-justify-center gridui-u-gap-gridui-8 gridui-u-border gridui-u-border-solid gridui-u-border-transparent gridui-u-rounded-control gridui-u-type-ui gridui-u-text-center gridui-u-no-underline gridui-u-wrap-anywhere gridui-u-cursor-pointer gridui-u-transition-colors gridui-u-duration-(--gridui-motion-duration-quick) gridui-u-ease-(--gridui-motion-ease-out)\",\n \"gridui-u-[&_svg]:w-gridui-16 gridui-u-[&_svg]:h-gridui-16 gridui-u-[&_svg]:shrink-0 gridui-u-[&_svg]:pointer-events-none\",\n \"gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed\",\n \"gridui-u-[&:hover:not(:disabled)]:border-foreground\",\n \"gridui-u-[&:active:not(:disabled)]:opacity-[0.8]\",\n \"gridui-u-motion-reduce:transition-none\",\n));\n\nexport const buttonStandardStyles = cva(cn(\n \"gridui-button-standard\",\n \"gridui-u-min-h-11 gridui-u-py-gridui-8 gridui-u-px-gridui-16\",\n));\n\nexport const buttonSmallStyles = cva(cn(\n \"gridui-button-small\",\n \"gridui-u-min-h-9 gridui-u-py-gridui-4 gridui-u-px-gridui-8\",\n));\n\nexport const buttonLargeStyles = cva(cn(\n \"gridui-button-large\",\n \"gridui-u-min-h-12 gridui-u-py-gridui-8 gridui-u-px-gridui-24 gridui-u-[&_svg]:w-5 gridui-u-[&_svg]:h-5\",\n));\n\nexport const buttonExtraLargeStyles = cva(cn(\n \"gridui-button-extra-large\",\n \"gridui-u-min-h-18 gridui-u-py-gridui-16 gridui-u-px-gridui-24 gridui-u-[&_svg]:w-5 gridui-u-[&_svg]:h-5\",\n));\n\nexport const buttonPrimaryStyles = cva(cn(\n \"gridui-button-primary\",\n \"gridui-u-text-accent-foreground gridui-u-bg-accent-background gridui-u-border-accent-background\",\n));\n\nexport const buttonSecondaryStyles = cva(cn(\n \"gridui-button-secondary\",\n \"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-border\",\n \"gridui-u-[&:hover:not(:disabled)]:bg-surface-hover\",\n));\n\nexport const buttonQuietStyles = cva(cn(\n \"gridui-button-quiet\",\n \"gridui-u-text-foreground gridui-u-bg-transparent\",\n \"gridui-u-[&:hover:not(:disabled)]:bg-surface-hover\",\n));\n\nexport const buttonHighlightStyles = cva(cn(\n \"gridui-button-highlight\",\n \"gridui-u-text-foreground gridui-u-bg-surface\",\n));\n\nexport const buttonTextStyles = cva(cn(\n \"gridui-button-text\",\n \"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-rounded-none\",\n));\n\nexport const buttonUnderlinedStyles = cva(cn(\n \"gridui-button-underlined\",\n \"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-border-b gridui-u-border-foreground gridui-u-rounded-none\",\n));\n\nexport const buttonEntryStyles = cva(cn(\n \"gridui-button-entry\",\n \"gridui-u-justify-between gridui-u-w-full gridui-u-py-gridui-16 gridui-u-px-gridui-24\",\n));\n\nexport const buttonCellStyles = cva(cn(\n \"gridui-button-cell gridui-interaction-boundary\",\n \"gridui-u-w-full gridui-u-h-full gridui-u-justify-start gridui-u-rounded-none gridui-u-border-0 gridui-u-py-gridui-16 gridui-u-px-gridui-24 gridui-u-text-left\",\n));\n\nexport const buttonRailStyles = cva(cn(\n \"gridui-button-rail gridui-interaction-boundary\",\n \"gridui-u-w-full gridui-u-min-w-gridui-24 gridui-u-flex-col gridui-u-py-gridui-8 gridui-u-px-0\",\n \"gridui-u-[&_>_span]:[writing-mode:vertical-rl] gridui-u-[&_>_span]:whitespace-nowrap\",\n));\n\nexport const buttonIconStyles = cva(cn(\n \"gridui-button-icon\",\n \"gridui-u-w-11 gridui-u-h-11 gridui-u-shrink-0 gridui-u-p-0\",\n \"gridui-u-[&.gridui-button-small]:w-9 gridui-u-[&.gridui-button-small]:h-9\",\n \"gridui-u-[&.gridui-button-large]:w-12 gridui-u-[&.gridui-button-large]:h-12\",\n \"gridui-u-[&.gridui-button-extra-large]:w-18 gridui-u-[&.gridui-button-extra-large]:h-18\",\n \"gridui-u-pointer-coarse:[&.gridui-button-small]:w-11 gridui-u-pointer-coarse:[&.gridui-button-small]:h-11\",\n));\n\nexport const buttonDividedStyles = cva(cn(\n \"gridui-button-divided\",\n \"gridui-u-w-full gridui-u-items-stretch gridui-u-justify-between gridui-u-gap-0 gridui-u-rounded-none gridui-u-p-0 gridui-u-text-start\",\n));\n\nexport const buttonLabelStyles = cva(cn(\n \"gridui-button-label\",\n \"gridui-u-inline-flex gridui-u-min-w-0 gridui-u-flex-1 gridui-u-items-center gridui-u-gap-gridui-8\",\n), {\n variants: {\n size: {\n small: \"gridui-u-py-gridui-4 gridui-u-px-gridui-8\",\n standard: \"gridui-u-py-gridui-8 gridui-u-px-gridui-16\",\n large: \"gridui-u-py-gridui-8 gridui-u-px-gridui-24\",\n \"extra-large\": \"gridui-u-py-gridui-16 gridui-u-px-gridui-24\",\n },\n },\n defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonEndRegionStyles = cva(cn(\n \"gridui-button-end-region\",\n \"gridui-u-justify-center gridui-u-self-stretch gridui-u-border-s gridui-u-border-solid gridui-u-border-current/25\",\n), {\n variants: {\n size: {\n small: \"gridui-u-w-9\",\n standard: \"gridui-u-w-11\",\n large: \"gridui-u-w-12\",\n \"extra-large\": \"gridui-u-w-gridui-64\",\n },\n },\n defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonVariants = cva(buttonStyles(), {\n variants: {\n variant: {\n primary: buttonPrimaryStyles(),\n secondary: buttonSecondaryStyles(),\n quiet: buttonQuietStyles(),\n highlight: buttonHighlightStyles(),\n text: buttonTextStyles(),\n underlined: buttonUnderlinedStyles(),\n },\n size: {\n small: buttonSmallStyles(),\n standard: buttonStandardStyles(),\n large: buttonLargeStyles(),\n \"extra-large\": buttonExtraLargeStyles(),\n },\n layout: {\n standard: \"\",\n icon: buttonIconStyles(),\n entry: buttonEntryStyles(),\n cell: buttonCellStyles(),\n rail: buttonRailStyles(),\n divided: buttonDividedStyles(),\n },\n iconMotion: {\n none: \"\",\n outward: \"gridui-button-icon-motion-outward\",\n },\n },\n compoundVariants: [\n {\n variant: [\n \"text\",\n \"underlined\",\n ],\n size: [\n \"large\",\n \"extra-large\",\n ],\n className: \"gridui-u-gap-gridui-32 gridui-u-type-supporting\",\n },\n ],\n defaultVariants: {\n variant: \"primary\",\n size: \"standard\",\n },\n});\n\ntype ButtonStyleVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonVariants = Omit<ButtonStyleVariants, \"variant\" | \"layout\"> & (\n | {\n readonly variant: \"text\" | \"underlined\";\n readonly layout?: \"standard\" | null | undefined;\n }\n | {\n readonly variant?: Exclude<ButtonStyleVariants[\"variant\"], \"text\" | \"underlined\">;\n readonly layout?: ButtonStyleVariants[\"layout\"];\n }\n);\n\nexport const buttonClass = (variants: ButtonVariants = {}, className?: string): string => {\n const textVariant = variants.variant === \"text\" || variants.variant === \"underlined\";\n const boundaryLayout = variants.layout === \"cell\" || variants.layout === \"rail\";\n return cn(buttonVariants({\n variant: variants.variant,\n size: variants.size,\n layout: variants.layout,\n iconMotion: variants.iconMotion,\n }), textVariant && \"gridui-u-px-0\", !textVariant && !boundaryLayout && \"gridui-hover-surface\", className);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Content\n */\n\nimport { buttonEndRegionStyles, buttonLabelStyles, type ButtonVariants } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC, ReactNode } from \"react\";\n\nexport type ButtonContentProps = {\n readonly children?: ReactNode;\n readonly startIcon?: ReactNode;\n readonly endIcon?: ReactNode;\n readonly layout?: ButtonVariants[\"layout\"];\n readonly size?: ButtonVariants[\"size\"];\n readonly iconMotion?: ButtonVariants[\"iconMotion\"];\n};\n\nexport const ButtonContent: FC<ButtonContentProps> = (props: ButtonContentProps) => {\n const { children, startIcon, endIcon, layout, size, iconMotion } = props;\n const label = (<>\n {startIcon !== undefined && startIcon !== null && typeof startIcon !== \"boolean\" && (<span\n className=\"gridui-button-adornment gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none\"\n aria-hidden=\"true\"\n inert\n >\n {startIcon}\n </span>)}\n {children}\n </>);\n\n return (<>\n {layout === \"divided\" ? (<span\n className={buttonLabelStyles({ size })}\n >\n {label}\n </span>) : label}\n {endIcon !== undefined && endIcon !== null && typeof endIcon !== \"boolean\" && (<span\n className={cn(\n \"gridui-button-adornment gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none\",\n layout === \"divided\" && buttonEndRegionStyles({ size }),\n )}\n aria-hidden=\"true\"\n inert\n >\n {iconMotion === \"outward\" ? (<span\n className=\"gridui-button-end-icon gridui-u-inline-flex\"\n >\n {endIcon}\n </span>) : endIcon}\n </span>)}\n </>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Button\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type ButtonProps = ComponentPropsWithRef<\"button\"> & ButtonVariants & {\n readonly loading?: boolean;\n readonly startIcon?: ReactNode;\n readonly endIcon?: ReactNode;\n};\n\nexport const Button: FC<ButtonProps> = (props: ButtonProps) => {\n const {\n variant,\n size,\n layout,\n iconMotion,\n loading = false,\n disabled,\n type = \"button\",\n className,\n children,\n startIcon,\n endIcon,\n ...restProps\n } = props;\n const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n variant,\n size,\n layout: \"standard\",\n iconMotion,\n } : {\n variant,\n size,\n layout,\n iconMotion,\n };\n return (<button\n {...restProps}\n type={type}\n disabled={disabled || loading}\n aria-busy={loading || restProps[\"aria-busy\"]}\n className={buttonClass(variants, className)}\n >\n <ButtonContent\n layout={variants.layout}\n size={size}\n iconMotion={iconMotion}\n startIcon={startIcon}\n endIcon={endIcon}\n >\n {children}\n </ButtonContent>\n </button>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Download\n */\n\nexport const downloadBlob = (blob: Blob, filename: string): void => {\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = filename;\n document.body.appendChild(link);\n link.click();\n link.remove();\n window.setTimeout(() => {\n URL.revokeObjectURL(url);\n }, 30000);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace ButtonLink\n * @description Button Link\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type ButtonLinkProps = ComponentPropsWithRef<\"a\"> & ButtonVariants & {\n readonly href: string;\n readonly startIcon?: ReactNode;\n readonly endIcon?: ReactNode;\n};\n\nexport const ButtonLink: FC<ButtonLinkProps> = (props: ButtonLinkProps) => {\n const {\n variant = \"secondary\",\n size,\n layout,\n iconMotion,\n className,\n children,\n startIcon,\n endIcon,\n ...restProps\n } = props;\n const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n variant,\n size,\n layout: \"standard\",\n iconMotion,\n } : {\n variant,\n size,\n layout,\n iconMotion,\n };\n return (<a\n {...restProps}\n className={buttonClass(variants, className)}\n >\n <ButtonContent\n layout={variants.layout}\n size={size}\n iconMotion={iconMotion}\n startIcon={startIcon}\n endIcon={endIcon}\n >\n {children}\n </ButtonContent>\n </a>);\n};\n"],
|
|
5
|
-
"mappings": ";AAOA,SAAS,QAAQ,gBAAgB;AAI1B,IAAM,qBAAqB,OAAO,EAAE,QAAQ,SAAS,gBAAgB,MAIvD;AACjB,kBAAgB,IAAI;AACpB,MAAI;AACA,UAAM,UAAU;AAChB,UAAM,IAAI,QAAc,CAAC,YAAY;AACjC,iBAAW,SAAS,CAAC;AAAA,IACzB,CAAC;AACD,UAAM,OAAO;AAAA,EACjB,UAAE;AACE,oBAAgB,KAAK;AAAA,EACzB;AACJ;AAEO,IAAM,iBAAiB,CAAC,EAAE,QAAQ,SAAS,WAAW,MAAM,MAI7D;AACF,QAAM;AAAA,IACF;AAAA,IACA;AAAA,EACJ,IAAI,SAAS,KAAK;AAClB,QAAM,SAAS,OAAO,KAAK;AAC3B,SAAO;AAAA,IACH;AAAA,IACA,MAAM,MAAqB;AACvB,UAAI,YAAY,OAAO,SAAS;AAC5B;AAAA,MACJ;AACA,aAAO,UAAU;AACjB,UAAI;AACA,cAAM,mBAAmB;AAAA,UACrB;AAAA,UACA,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;AAAA,UAC7B,iBAAiB;AAAA,QACrB,CAAC;AAAA,MACL,UAAE;AACE,eAAO,UAAU;AAAA,MACrB;AAAA,IACJ;AAAA,EACJ;AACJ;;;ACjDA,SAAS,UAAU;AACnB,SAAS,WAA8B;AAEhC,IAAM,eAAe,IAAI;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,uBAAuB,IAAI;AAAA,EACpC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,oBAAoB,IAAI;AAAA,EACjC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,oBAAoB,IAAI;AAAA,EACjC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,yBAAyB,IAAI;AAAA,EACtC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,sBAAsB,IAAI;AAAA,EACnC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,wBAAwB,IAAI;AAAA,EACrC;AAAA,EACA;
|
|
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"],
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["cn", "jsx", "jsx"]
|
|
7
7
|
}
|
package/dist/styles.css
CHANGED
|
@@ -146,8 +146,8 @@
|
|
|
146
146
|
.gridui-u-bg-accent-background {
|
|
147
147
|
background-color: var(--gridui-accent-background);
|
|
148
148
|
}
|
|
149
|
-
.gridui-u-bg-
|
|
150
|
-
background-color: var(--gridui-
|
|
149
|
+
.gridui-u-bg-brand-tint {
|
|
150
|
+
background-color: var(--gridui-brand-tint);
|
|
151
151
|
}
|
|
152
152
|
.gridui-u-bg-transparent {
|
|
153
153
|
background-color: transparent;
|
|
@@ -224,6 +224,18 @@
|
|
|
224
224
|
.gridui-u-disabled\:opacity-50:disabled {
|
|
225
225
|
opacity: 50%;
|
|
226
226
|
}
|
|
227
|
+
.gridui-u-aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
|
|
228
|
+
cursor: not-allowed;
|
|
229
|
+
}
|
|
230
|
+
.gridui-u-aria-disabled\:opacity-50[aria-disabled="true"] {
|
|
231
|
+
opacity: 50%;
|
|
232
|
+
}
|
|
233
|
+
.gridui-u-data-disabled\:cursor-not-allowed[data-disabled] {
|
|
234
|
+
cursor: not-allowed;
|
|
235
|
+
}
|
|
236
|
+
.gridui-u-data-disabled\:opacity-50[data-disabled] {
|
|
237
|
+
opacity: 50%;
|
|
238
|
+
}
|
|
227
239
|
@media (prefers-reduced-motion: reduce) {
|
|
228
240
|
.gridui-u-motion-reduce\:transition-none {
|
|
229
241
|
transition-property: none;
|
|
@@ -279,25 +291,16 @@
|
|
|
279
291
|
width: calc(var(--spacing) * 11);
|
|
280
292
|
}
|
|
281
293
|
}
|
|
282
|
-
.gridui-u-\[\&\:active\:not\(\:disabled\)\]\:opacity-\[0\.8\]:active:not(:disabled) {
|
|
283
|
-
opacity: 0.8;
|
|
284
|
-
}
|
|
285
|
-
.gridui-u-\[\&\:hover\:not\(\:disabled\)\]\:border-foreground:hover:not(:disabled) {
|
|
286
|
-
border-color: var(--gridui-foreground);
|
|
287
|
-
}
|
|
288
|
-
.gridui-u-\[\&\:hover\:not\(\:disabled\)\]\:bg-surface-hover:hover:not(:disabled) {
|
|
289
|
-
background-color: var(--gridui-surface-hover);
|
|
290
|
-
}
|
|
291
294
|
}
|
|
292
295
|
@layer components {
|
|
293
296
|
@media (prefers-reduced-motion: no-preference) {
|
|
294
|
-
.gridui-button-icon-motion-outward:not(:disabled) .gridui-button-end-icon {
|
|
297
|
+
.gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"], [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]) .gridui-button-end-icon {
|
|
295
298
|
transition: transform var(--gridui-motion-duration-quick) var(--gridui-motion-ease-out);
|
|
296
299
|
}
|
|
297
|
-
.gridui-button-icon-motion-outward:
|
|
300
|
+
.gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"], [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]):hover .gridui-button-end-icon {
|
|
298
301
|
transform: translate(var(--gridui-space-4), calc(-1 * var(--gridui-space-4)));
|
|
299
302
|
}
|
|
300
|
-
.gridui-button-icon-motion-outward:dir(rtl):hover
|
|
303
|
+
.gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"], [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]):dir(rtl):hover .gridui-button-end-icon {
|
|
301
304
|
transform: translate(calc(-1 * var(--gridui-space-4)), calc(-1 * var(--gridui-space-4)));
|
|
302
305
|
}
|
|
303
306
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridui/button",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "GridUI React buttons and action helpers",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@gridui/style-utils": "^2.1.4",
|
|
26
|
-
"@gridui/theme": "^2.
|
|
26
|
+
"@gridui/theme": "^2.4.0",
|
|
27
27
|
"class-variance-authority": "0.7.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@types/react": "19.3.0",
|
|
36
36
|
"@types/react-dom": "19.3.0",
|
|
37
37
|
"jest": "30.5.2",
|
|
38
|
-
"lucide-react": "1.
|
|
38
|
+
"lucide-react": "1.66.0",
|
|
39
39
|
"react": "19.3.1",
|
|
40
40
|
"react-dom": "19.3.1",
|
|
41
41
|
"typescript": "6.0.3"
|