@gridui/button 3.1.0 → 4.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 +6 -4
- package/dist/index.js +61 -55
- package/dist/index.js.map +2 -2
- package/dist/styles.css +107 -117
- package/docs/catalog.json +56 -0
- package/package.json +7 -6
package/README.md
CHANGED
|
@@ -82,7 +82,7 @@ buttons use a transparent fill, foreground text, and a border; quiet buttons
|
|
|
82
82
|
omit the border. All variants use Theme's shared hover and keyboard-focus outlines. Pressing
|
|
83
83
|
overlays the existing background without fading the label or icon. Highlight
|
|
84
84
|
buttons use `brand-tint` for persistent selection. Disabled buttons keep their
|
|
85
|
-
base fill and
|
|
85
|
+
base fill, outer border, and internal separators; only their content is dimmed. Standard and small
|
|
86
86
|
sizes scale with the consumer's root font size.
|
|
87
87
|
|
|
88
88
|
`highlight` uses the local `brand-tint` fill and normal foreground. Use it for a
|
|
@@ -103,7 +103,9 @@ an inset selected surface. See the [composition recipe](https://github.com/sudo-
|
|
|
103
103
|
constraints for caller-owned native elements. `startIcon` and `endIcon` are
|
|
104
104
|
component props, not styling variants. It uses `cn` for consumer class overrides.
|
|
105
105
|
Callers using the class helper own native semantics, icon accessibility, and
|
|
106
|
-
loading behavior.
|
|
106
|
+
loading behavior. The helper does not wrap content. Custom controls must dim
|
|
107
|
+
their owned content elements for disabled states while leaving structural
|
|
108
|
+
boundaries fully opaque.
|
|
107
109
|
|
|
108
110
|
## Divided actions
|
|
109
111
|
|
|
@@ -129,8 +131,8 @@ giving the containing region a consistent responsive width.
|
|
|
129
131
|
|
|
130
132
|
The label uses the selected size's padding. The trailing region is 2.25rem,
|
|
131
133
|
2.75rem, 3rem, or 4rem wide for small through extra-large sizes. Both regions
|
|
132
|
-
stretch together when a long label wraps. The
|
|
133
|
-
|
|
134
|
+
stretch together when a long label wraps. The separators inherit the control’s border color, including variant and caller
|
|
135
|
+
overrides, and follow logical text direction. Appearance
|
|
134
136
|
still comes from `variant`; the layout does not choose a brand, fill, or route.
|
|
135
137
|
The containing page owns its maximum width.
|
|
136
138
|
|
package/dist/index.js
CHANGED
|
@@ -43,129 +43,129 @@ import { cn } from "@gridui/style-utils";
|
|
|
43
43
|
import { cva } from "class-variance-authority";
|
|
44
44
|
var buttonStyles = cva(cn(
|
|
45
45
|
"gridui-button",
|
|
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-
|
|
47
|
-
"gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size)] gridui-u-[&_svg]:w-(--gridui-button-icon-size) gridui-u-[&_svg]:h-(--gridui-button-icon-size) gridui-u-[&_svg]:shrink-0 gridui-u-[&_svg]:pointer-events-none",
|
|
48
|
-
"gridui-u-disabled:
|
|
49
|
-
"gridui-u-aria-disabled:
|
|
50
|
-
"gridui-u-data-disabled:
|
|
51
|
-
"gridui-u-motion-reduce:transition-none"
|
|
46
|
+
"gridui-u-button--inline-flex gridui-u-button--w-fit gridui-u-button--max-w-full gridui-u-button--min-w-0 gridui-u-button--items-center gridui-u-button--justify-center gridui-u-button--gap-gridui-8 gridui-u-button--rounded-control gridui-u-button--type-ui gridui-u-button--text-center gridui-u-button--no-underline gridui-u-button--wrap-anywhere gridui-u-button--cursor-pointer gridui-u-button--transition-colors gridui-u-button--duration-(--gridui-motion-duration-quick) gridui-u-button--ease-(--gridui-motion-ease-out)",
|
|
47
|
+
"gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size)] gridui-u-button--[&_svg]:w-(--gridui-button-icon-size) gridui-u-button--[&_svg]:h-(--gridui-button-icon-size) gridui-u-button--[&_svg]:shrink-0 gridui-u-button--[&_svg]:pointer-events-none",
|
|
48
|
+
"gridui-u-button--disabled:cursor-not-allowed",
|
|
49
|
+
"gridui-u-button--aria-disabled:cursor-not-allowed",
|
|
50
|
+
"gridui-u-button--data-disabled:cursor-not-allowed",
|
|
51
|
+
"gridui-u-button--motion-reduce:transition-none"
|
|
52
52
|
));
|
|
53
53
|
var buttonStandardStyles = cva(cn(
|
|
54
54
|
"gridui-button-standard",
|
|
55
|
-
"gridui-u-min-h-gridui-control gridui-u-py-gridui-8 gridui-u-px-gridui-16"
|
|
55
|
+
"gridui-u-button--min-h-gridui-control gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16"
|
|
56
56
|
));
|
|
57
57
|
var buttonSmallStyles = cva(cn(
|
|
58
58
|
"gridui-button-small",
|
|
59
|
-
"gridui-u-min-h-gridui-control-small gridui-u-py-gridui-4 gridui-u-px-gridui-8"
|
|
59
|
+
"gridui-u-button--min-h-gridui-control-small gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8"
|
|
60
60
|
));
|
|
61
61
|
var buttonLargeStyles = cva(cn(
|
|
62
62
|
"gridui-button-large",
|
|
63
|
-
"gridui-u-min-h-gridui-control-large gridui-u-py-gridui-8 gridui-u-px-gridui-24 gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size-large)]"
|
|
63
|
+
"gridui-u-button--min-h-gridui-control-large gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24 gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size-large)]"
|
|
64
64
|
));
|
|
65
65
|
var buttonExtraLargeStyles = cva(cn(
|
|
66
66
|
"gridui-button-extra-large",
|
|
67
|
-
"gridui-u-min-h-18 gridui-u-py-gridui-16 gridui-u-px-gridui-24 gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size-large)]"
|
|
67
|
+
"gridui-u-button--min-h-18 gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24 gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size-large)]"
|
|
68
68
|
));
|
|
69
69
|
var buttonPrimaryStyles = cva(cn(
|
|
70
70
|
"gridui-button-primary",
|
|
71
|
-
"gridui-u-text-accent-foreground gridui-u-bg-accent-background gridui-u-border-accent-background"
|
|
71
|
+
"gridui-u-button--text-accent-foreground gridui-u-button--bg-accent-background gridui-u-button--border-accent-background"
|
|
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"
|
|
75
|
+
"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-border"
|
|
76
76
|
));
|
|
77
77
|
var buttonQuietStyles = cva(cn(
|
|
78
78
|
"gridui-button-quiet",
|
|
79
|
-
"gridui-u-text-foreground gridui-u-bg-transparent"
|
|
79
|
+
"gridui-u-button--text-foreground gridui-u-button--bg-transparent"
|
|
80
80
|
));
|
|
81
81
|
var buttonHighlightStyles = cva(cn(
|
|
82
82
|
"gridui-button-highlight",
|
|
83
|
-
"gridui-u-text-foreground gridui-u-bg-brand-tint"
|
|
83
|
+
"gridui-u-button--text-foreground gridui-u-button--bg-brand-tint"
|
|
84
84
|
));
|
|
85
85
|
var buttonTextStyles = cva(cn(
|
|
86
86
|
"gridui-button-text",
|
|
87
|
-
"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-rounded-none"
|
|
87
|
+
"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-0 gridui-u-button--rounded-none"
|
|
88
88
|
));
|
|
89
89
|
var buttonUnderlinedStyles = cva(cn(
|
|
90
90
|
"gridui-button-underlined",
|
|
91
|
-
"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-border-b gridui-u-border-foreground gridui-u-rounded-none"
|
|
91
|
+
"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-0 gridui-u-button--border-b gridui-u-button--border-foreground gridui-u-button--rounded-none"
|
|
92
92
|
));
|
|
93
93
|
var buttonEntryStyles = cva(cn(
|
|
94
94
|
"gridui-button-entry",
|
|
95
|
-
"gridui-u-justify-between gridui-u-w-full gridui-u-py-gridui-16 gridui-u-px-gridui-24"
|
|
95
|
+
"gridui-u-button--justify-between gridui-u-button--w-full gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24"
|
|
96
96
|
));
|
|
97
97
|
var buttonCellStyles = cva(cn(
|
|
98
98
|
"gridui-button-cell",
|
|
99
|
-
"gridui-u-w-full gridui-u-h-full gridui-u-justify-start gridui-u-rounded-none gridui-u-
|
|
99
|
+
"gridui-u-button--w-full gridui-u-button--h-full gridui-u-button--justify-start gridui-u-button--rounded-none gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24 gridui-u-button--text-left"
|
|
100
100
|
));
|
|
101
101
|
var buttonRailStyles = cva(cn(
|
|
102
102
|
"gridui-button-rail",
|
|
103
|
-
"gridui-u-w-full gridui-u-min-w-gridui-24 gridui-u-flex-col gridui-u-py-gridui-8 gridui-u-px-0",
|
|
104
|
-
"gridui-u-[&_>_span]:[writing-mode:vertical-rl] gridui-u-[&_>_span]:whitespace-nowrap"
|
|
103
|
+
"gridui-u-button--w-full gridui-u-button--min-w-gridui-24 gridui-u-button--flex-col gridui-u-button--py-gridui-8 gridui-u-button--px-0",
|
|
104
|
+
"gridui-u-button--[&_>_span]:[writing-mode:vertical-rl] gridui-u-button--[&_>_span]:whitespace-nowrap"
|
|
105
105
|
));
|
|
106
106
|
var buttonIconStyles = cva(cn(
|
|
107
107
|
"gridui-button-icon",
|
|
108
|
-
"gridui-u-w-gridui-control gridui-u-h-gridui-control gridui-u-shrink-0 gridui-u-p-0",
|
|
109
|
-
"gridui-u-[&.gridui-button-small]:w-gridui-control-small gridui-u-[&.gridui-button-small]:h-gridui-control-small",
|
|
110
|
-
"gridui-u-[&.gridui-button-large]:w-gridui-control-large gridui-u-[&.gridui-button-large]:h-gridui-control-large",
|
|
111
|
-
"gridui-u-[&.gridui-button-extra-large]:w-18 gridui-u-[&.gridui-button-extra-large]:h-18",
|
|
112
|
-
"gridui-u-pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-pointer-coarse:[&.gridui-button-small]:h-gridui-control"
|
|
108
|
+
"gridui-u-button--w-gridui-control gridui-u-button--h-gridui-control gridui-u-button--shrink-0 gridui-u-button--p-0",
|
|
109
|
+
"gridui-u-button--[&.gridui-button-small]:w-gridui-control-small gridui-u-button--[&.gridui-button-small]:h-gridui-control-small",
|
|
110
|
+
"gridui-u-button--[&.gridui-button-large]:w-gridui-control-large gridui-u-button--[&.gridui-button-large]:h-gridui-control-large",
|
|
111
|
+
"gridui-u-button--[&.gridui-button-extra-large]:w-18 gridui-u-button--[&.gridui-button-extra-large]:h-18",
|
|
112
|
+
"gridui-u-button--pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-button--pointer-coarse:[&.gridui-button-small]:h-gridui-control"
|
|
113
113
|
));
|
|
114
114
|
var buttonDividedStyles = cva(cn(
|
|
115
115
|
"gridui-button-divided",
|
|
116
|
-
"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"
|
|
116
|
+
"gridui-u-button--w-full gridui-u-button--items-stretch gridui-u-button--justify-between gridui-u-button--gap-0 gridui-u-button--rounded-none gridui-u-button--p-0 gridui-u-button--text-start"
|
|
117
117
|
));
|
|
118
118
|
var buttonLabelStyles = cva(cn(
|
|
119
119
|
"gridui-button-label",
|
|
120
|
-
"gridui-u-inline-flex gridui-u-min-w-0 gridui-u-flex-1 gridui-u-items-center gridui-u-gap-gridui-8"
|
|
120
|
+
"gridui-u-button--inline-flex gridui-u-button--min-w-0 gridui-u-button--flex-1 gridui-u-button--items-center gridui-u-button--gap-gridui-8"
|
|
121
121
|
), {
|
|
122
122
|
variants: {
|
|
123
123
|
size: {
|
|
124
|
-
small: "gridui-u-py-gridui-4 gridui-u-px-gridui-8",
|
|
125
|
-
standard: "gridui-u-py-gridui-8 gridui-u-px-gridui-16",
|
|
126
|
-
large: "gridui-u-py-gridui-8 gridui-u-px-gridui-24",
|
|
127
|
-
"extra-large": "gridui-u-py-gridui-16 gridui-u-px-gridui-24"
|
|
124
|
+
small: "gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8",
|
|
125
|
+
standard: "gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16",
|
|
126
|
+
large: "gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24",
|
|
127
|
+
"extra-large": "gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24"
|
|
128
128
|
}
|
|
129
129
|
},
|
|
130
130
|
defaultVariants: { size: "standard" }
|
|
131
131
|
});
|
|
132
132
|
var buttonStartIconStyles = cva(cn(
|
|
133
133
|
"gridui-button-adornment gridui-button-start-icon",
|
|
134
|
-
"gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none"
|
|
134
|
+
"gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none"
|
|
135
135
|
), {
|
|
136
136
|
variants: {
|
|
137
137
|
iconSize: {
|
|
138
138
|
standard: "",
|
|
139
|
-
large: "gridui-u-[--gridui-button-icon-size:var(--gridui-space-32)]",
|
|
140
|
-
"extra-large": "gridui-u-[--gridui-button-icon-size:var(--gridui-space-48)]"
|
|
139
|
+
large: "gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-32)]",
|
|
140
|
+
"extra-large": "gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-48)]"
|
|
141
141
|
}
|
|
142
142
|
},
|
|
143
143
|
defaultVariants: { iconSize: "standard" }
|
|
144
144
|
});
|
|
145
145
|
var buttonStartRegionStyles = cva(cn(
|
|
146
146
|
"gridui-button-start-region",
|
|
147
|
-
"gridui-u-justify-center gridui-u-self-stretch gridui-u-py-gridui-8
|
|
147
|
+
"gridui-u-button--justify-center gridui-u-button--self-stretch gridui-u-button--py-gridui-8"
|
|
148
148
|
), {
|
|
149
149
|
variants: {
|
|
150
150
|
size: {
|
|
151
|
-
small: "gridui-u-w-gridui-control-small",
|
|
152
|
-
standard: "gridui-u-w-gridui-control",
|
|
153
|
-
large: "gridui-u-w-gridui-control-large",
|
|
154
|
-
"extra-large": "gridui-u-w-gridui-64"
|
|
151
|
+
small: "gridui-u-button--w-gridui-control-small",
|
|
152
|
+
standard: "gridui-u-button--w-gridui-control",
|
|
153
|
+
large: "gridui-u-button--w-gridui-control-large",
|
|
154
|
+
"extra-large": "gridui-u-button--w-gridui-64"
|
|
155
155
|
}
|
|
156
156
|
},
|
|
157
157
|
defaultVariants: { size: "standard" }
|
|
158
158
|
});
|
|
159
159
|
var buttonEndRegionStyles = cva(cn(
|
|
160
160
|
"gridui-button-end-region",
|
|
161
|
-
"gridui-u-justify-center gridui-u-self-stretch
|
|
161
|
+
"gridui-u-button--justify-center gridui-u-button--self-stretch"
|
|
162
162
|
), {
|
|
163
163
|
variants: {
|
|
164
164
|
size: {
|
|
165
|
-
small: "gridui-u-w-gridui-control-small",
|
|
166
|
-
standard: "gridui-u-w-gridui-control",
|
|
167
|
-
large: "gridui-u-w-gridui-control-large",
|
|
168
|
-
"extra-large": "gridui-u-w-gridui-64"
|
|
165
|
+
small: "gridui-u-button--w-gridui-control-small",
|
|
166
|
+
standard: "gridui-u-button--w-gridui-control",
|
|
167
|
+
large: "gridui-u-button--w-gridui-control-large",
|
|
168
|
+
"extra-large": "gridui-u-button--w-gridui-64"
|
|
169
169
|
}
|
|
170
170
|
},
|
|
171
171
|
defaultVariants: { size: "standard" }
|
|
@@ -209,7 +209,7 @@ var buttonVariants = cva(buttonStyles(), {
|
|
|
209
209
|
"large",
|
|
210
210
|
"extra-large"
|
|
211
211
|
],
|
|
212
|
-
className: "gridui-u-gap-gridui-32 gridui-u-type-supporting"
|
|
212
|
+
className: "gridui-u-button--gap-gridui-32 gridui-u-button--type-supporting"
|
|
213
213
|
}
|
|
214
214
|
],
|
|
215
215
|
defaultVariants: {
|
|
@@ -224,7 +224,7 @@ var buttonClass = (variants = {}, className) => {
|
|
|
224
224
|
size: variants.size,
|
|
225
225
|
layout: variants.layout,
|
|
226
226
|
iconMotion: variants.iconMotion
|
|
227
|
-
}), textVariant && "gridui-u-px-0", className);
|
|
227
|
+
}), textVariant && "gridui-u-button--px-0", className);
|
|
228
228
|
};
|
|
229
229
|
|
|
230
230
|
// src/shared/content.tsx
|
|
@@ -238,11 +238,17 @@ var ButtonContent = (props) => {
|
|
|
238
238
|
{
|
|
239
239
|
className: cn2(
|
|
240
240
|
buttonStartIconStyles({ iconSize: startIconSize }),
|
|
241
|
-
dividedStart
|
|
241
|
+
dividedStart ? buttonStartRegionStyles({ size }) : "gridui-button-content"
|
|
242
242
|
),
|
|
243
243
|
"aria-hidden": "true",
|
|
244
244
|
inert: true,
|
|
245
|
-
children:
|
|
245
|
+
children: dividedStart ? /* @__PURE__ */ jsx(
|
|
246
|
+
"span",
|
|
247
|
+
{
|
|
248
|
+
className: "gridui-button-content gridui-u-button--inline-flex",
|
|
249
|
+
children: startIcon
|
|
250
|
+
}
|
|
251
|
+
) : startIcon
|
|
246
252
|
}
|
|
247
253
|
) : null;
|
|
248
254
|
const label = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -251,26 +257,26 @@ var ButtonContent = (props) => {
|
|
|
251
257
|
] });
|
|
252
258
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
253
259
|
dividedStart && startAdornment,
|
|
254
|
-
|
|
260
|
+
/* @__PURE__ */ jsx(
|
|
255
261
|
"span",
|
|
256
262
|
{
|
|
257
|
-
className: buttonLabelStyles({ size }),
|
|
263
|
+
className: cn2("gridui-button-content", layout === "divided" ? buttonLabelStyles({ size }) : "gridui-button-body"),
|
|
258
264
|
children: label
|
|
259
265
|
}
|
|
260
|
-
)
|
|
266
|
+
),
|
|
261
267
|
endIcon !== void 0 && endIcon !== null && typeof endIcon !== "boolean" && /* @__PURE__ */ jsx(
|
|
262
268
|
"span",
|
|
263
269
|
{
|
|
264
270
|
className: cn2(
|
|
265
|
-
"gridui-button-adornment gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none",
|
|
266
|
-
layout === "divided"
|
|
271
|
+
"gridui-button-adornment gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none",
|
|
272
|
+
layout === "divided" ? buttonEndRegionStyles({ size }) : "gridui-button-content"
|
|
267
273
|
),
|
|
268
274
|
"aria-hidden": "true",
|
|
269
275
|
inert: true,
|
|
270
|
-
children: iconMotion === "outward" ? /* @__PURE__ */ jsx(
|
|
276
|
+
children: layout === "divided" || iconMotion === "outward" ? /* @__PURE__ */ jsx(
|
|
271
277
|
"span",
|
|
272
278
|
{
|
|
273
|
-
className: "gridui-button-
|
|
279
|
+
className: cn2("gridui-u-button--inline-flex", layout === "divided" && "gridui-button-content", iconMotion === "outward" && "gridui-button-end-icon"),
|
|
274
280
|
children: endIcon
|
|
275
281
|
}
|
|
276
282
|
) : endIcon
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
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-[--gridui-button-icon-size:var(--gridui-icon-size)] gridui-u-[&_svg]:w-(--gridui-button-icon-size) gridui-u-[&_svg]:h-(--gridui-button-icon-size) gridui-u-[&_svg]:shrink-0 gridui-u-[&_svg]:pointer-events-none\",\n \"gridui-u-disabled:opacity-50 gridui-u-disabled:cursor-not-allowed\",\n \"gridui-u-aria-disabled:opacity-50 gridui-u-aria-disabled:cursor-not-allowed\",\n \"gridui-u-data-disabled:opacity-50 gridui-u-data-disabled:cursor-not-allowed\",\n \"gridui-u-motion-reduce:transition-none\",\n));\n\nexport const buttonStandardStyles = cva(cn(\n \"gridui-button-standard\",\n \"gridui-u-min-h-gridui-control gridui-u-py-gridui-8 gridui-u-px-gridui-16\",\n));\n\nexport const buttonSmallStyles = cva(cn(\n \"gridui-button-small\",\n \"gridui-u-min-h-gridui-control-small gridui-u-py-gridui-4 gridui-u-px-gridui-8\",\n));\n\nexport const buttonLargeStyles = cva(cn(\n \"gridui-button-large\",\n \"gridui-u-min-h-gridui-control-large gridui-u-py-gridui-8 gridui-u-px-gridui-24 gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonExtraLargeStyles = cva(cn(\n \"gridui-button-extra-large\",\n \"gridui-u-min-h-18 gridui-u-py-gridui-16 gridui-u-px-gridui-24 gridui-u-[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonPrimaryStyles = cva(cn(\n \"gridui-button-primary\",\n \"gridui-u-text-accent-foreground gridui-u-bg-accent-background gridui-u-border-accent-background\",\n));\n\nexport const buttonSecondaryStyles = cva(cn(\n \"gridui-button-secondary\",\n \"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-border\",\n));\n\nexport const buttonQuietStyles = cva(cn(\n \"gridui-button-quiet\",\n \"gridui-u-text-foreground gridui-u-bg-transparent\",\n));\n\nexport const buttonHighlightStyles = cva(cn(\n \"gridui-button-highlight\",\n \"gridui-u-text-foreground gridui-u-bg-brand-tint\",\n));\n\nexport const buttonTextStyles = cva(cn(\n \"gridui-button-text\",\n \"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-rounded-none\",\n));\n\nexport const buttonUnderlinedStyles = cva(cn(\n \"gridui-button-underlined\",\n \"gridui-u-text-foreground gridui-u-bg-transparent gridui-u-border-0 gridui-u-border-b gridui-u-border-foreground gridui-u-rounded-none\",\n));\n\nexport const buttonEntryStyles = cva(cn(\n \"gridui-button-entry\",\n \"gridui-u-justify-between gridui-u-w-full gridui-u-py-gridui-16 gridui-u-px-gridui-24\",\n));\n\nexport const buttonCellStyles = cva(cn(\n \"gridui-button-cell\",\n \"gridui-u-w-full gridui-u-h-full gridui-u-justify-start gridui-u-rounded-none gridui-u-border-0 gridui-u-py-gridui-16 gridui-u-px-gridui-24 gridui-u-text-left\",\n));\n\nexport const buttonRailStyles = cva(cn(\n \"gridui-button-rail\",\n \"gridui-u-w-full gridui-u-min-w-gridui-24 gridui-u-flex-col gridui-u-py-gridui-8 gridui-u-px-0\",\n \"gridui-u-[&_>_span]:[writing-mode:vertical-rl] gridui-u-[&_>_span]:whitespace-nowrap\",\n));\n\nexport const buttonIconStyles = cva(cn(\n \"gridui-button-icon\",\n \"gridui-u-w-gridui-control gridui-u-h-gridui-control gridui-u-shrink-0 gridui-u-p-0\",\n \"gridui-u-[&.gridui-button-small]:w-gridui-control-small gridui-u-[&.gridui-button-small]:h-gridui-control-small\",\n \"gridui-u-[&.gridui-button-large]:w-gridui-control-large gridui-u-[&.gridui-button-large]:h-gridui-control-large\",\n \"gridui-u-[&.gridui-button-extra-large]:w-18 gridui-u-[&.gridui-button-extra-large]:h-18\",\n \"gridui-u-pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-pointer-coarse:[&.gridui-button-small]:h-gridui-control\",\n));\n\nexport const buttonDividedStyles = cva(cn(\n \"gridui-button-divided\",\n \"gridui-u-w-full gridui-u-items-stretch gridui-u-justify-between gridui-u-gap-0 gridui-u-rounded-none gridui-u-p-0 gridui-u-text-start\",\n));\n\nexport const buttonLabelStyles = cva(cn(\n \"gridui-button-label\",\n \"gridui-u-inline-flex gridui-u-min-w-0 gridui-u-flex-1 gridui-u-items-center gridui-u-gap-gridui-8\",\n), {\n variants: {\n size: {\n small: \"gridui-u-py-gridui-4 gridui-u-px-gridui-8\",\n standard: \"gridui-u-py-gridui-8 gridui-u-px-gridui-16\",\n large: \"gridui-u-py-gridui-8 gridui-u-px-gridui-24\",\n \"extra-large\": \"gridui-u-py-gridui-16 gridui-u-px-gridui-24\",\n },\n },\n defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonStartIconStyles = cva(cn(\n \"gridui-button-adornment gridui-button-start-icon\",\n \"gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none\",\n), {\n variants: {\n iconSize: {\n standard: \"\",\n large: \"gridui-u-[--gridui-button-icon-size:var(--gridui-space-32)]\",\n \"extra-large\": \"gridui-u-[--gridui-button-icon-size:var(--gridui-space-48)]\",\n },\n },\n defaultVariants: { iconSize: \"standard\" },\n});\n\nexport const buttonStartRegionStyles = cva(cn(\n \"gridui-button-start-region\",\n \"gridui-u-justify-center gridui-u-self-stretch gridui-u-py-gridui-8 gridui-u-border-e gridui-u-border-solid gridui-u-border-current/25\",\n), {\n variants: {\n size: {\n small: \"gridui-u-w-gridui-control-small\",\n standard: \"gridui-u-w-gridui-control\",\n large: \"gridui-u-w-gridui-control-large\",\n \"extra-large\": \"gridui-u-w-gridui-64\",\n },\n },\n defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonEndRegionStyles = cva(cn(\n \"gridui-button-end-region\",\n \"gridui-u-justify-center gridui-u-self-stretch gridui-u-border-s gridui-u-border-solid gridui-u-border-current/25\",\n), {\n variants: {\n size: {\n small: \"gridui-u-w-gridui-control-small\",\n standard: \"gridui-u-w-gridui-control\",\n large: \"gridui-u-w-gridui-control-large\",\n \"extra-large\": \"gridui-u-w-gridui-64\",\n },\n },\n defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonVariants = cva(buttonStyles(), {\n variants: {\n variant: {\n primary: buttonPrimaryStyles(),\n secondary: buttonSecondaryStyles(),\n quiet: buttonQuietStyles(),\n highlight: buttonHighlightStyles(),\n text: buttonTextStyles(),\n underlined: buttonUnderlinedStyles(),\n },\n size: {\n small: buttonSmallStyles(),\n standard: buttonStandardStyles(),\n large: buttonLargeStyles(),\n \"extra-large\": buttonExtraLargeStyles(),\n },\n layout: {\n standard: \"\",\n icon: buttonIconStyles(),\n entry: buttonEntryStyles(),\n cell: buttonCellStyles(),\n rail: buttonRailStyles(),\n divided: buttonDividedStyles(),\n },\n iconMotion: {\n none: \"\",\n outward: \"gridui-button-icon-motion-outward\",\n },\n },\n compoundVariants: [\n {\n variant: [\n \"text\",\n \"underlined\",\n ],\n size: [\n \"large\",\n \"extra-large\",\n ],\n className: \"gridui-u-gap-gridui-32 gridui-u-type-supporting\",\n },\n ],\n defaultVariants: {\n variant: \"primary\",\n size: \"standard\",\n },\n});\n\ntype ButtonStyleVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonVariants = Omit<ButtonStyleVariants, \"variant\" | \"layout\"> & (\n | {\n readonly variant: \"text\" | \"underlined\";\n readonly layout?: \"standard\" | null | undefined;\n }\n | {\n readonly variant?: Exclude<ButtonStyleVariants[\"variant\"], \"text\" | \"underlined\">;\n readonly layout?: ButtonStyleVariants[\"layout\"];\n }\n);\n\nexport const buttonClass = (variants: ButtonVariants = {}, className?: string): string => {\n const textVariant = variants.variant === \"text\" || variants.variant === \"underlined\";\n return cn(buttonVariants({\n variant: variants.variant,\n size: variants.size,\n layout: variants.layout,\n iconMotion: variants.iconMotion,\n }), textVariant && \"gridui-u-px-0\", className);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Content\n */\n\nimport { buttonEndRegionStyles, buttonLabelStyles, buttonStartIconStyles, buttonStartRegionStyles, type ButtonVariants } from \"./style\";\nimport type { ButtonAdornmentProps } from \"./types\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC, ReactNode } from \"react\";\n\nexport type ButtonContentProps = ButtonAdornmentProps & {\n readonly children?: ReactNode;\n readonly layout?: ButtonVariants[\"layout\"];\n readonly size?: ButtonVariants[\"size\"];\n readonly iconMotion?: ButtonVariants[\"iconMotion\"];\n};\n\nexport const ButtonContent: FC<ButtonContentProps> = (props: ButtonContentProps) => {\n const { children, startIcon, startIconLayout, startIconSize, endIcon, layout, size, iconMotion } = props;\n const dividedStart = layout === \"divided\" && startIconLayout === \"divided\";\n const startAdornment = startIcon !== undefined && startIcon !== null && typeof startIcon !== \"boolean\" ? (<span\n className={cn(\n buttonStartIconStyles({ iconSize: startIconSize }),\n dividedStart && buttonStartRegionStyles({ size }),\n )}\n aria-hidden=\"true\"\n inert\n >\n {startIcon}\n </span>) : null;\n const label = (<>\n {!dividedStart && startAdornment}\n {children}\n </>);\n\n return (<>\n {dividedStart && startAdornment}\n {layout === \"divided\" ? (<span\n className={buttonLabelStyles({ size })}\n >\n {label}\n </span>) : label}\n {endIcon !== undefined && endIcon !== null && typeof endIcon !== \"boolean\" && (<span\n className={cn(\n \"gridui-button-adornment gridui-u-inline-flex gridui-u-shrink-0 gridui-u-items-center gridui-u-pointer-events-none\",\n layout === \"divided\" && buttonEndRegionStyles({ size }),\n )}\n aria-hidden=\"true\"\n inert\n >\n {iconMotion === \"outward\" ? (<span\n className=\"gridui-button-end-icon gridui-u-inline-flex\"\n >\n {endIcon}\n </span>) : endIcon}\n </span>)}\n </>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Button\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ButtonProps = ComponentPropsWithRef<\"button\"> & ButtonVariants & ButtonAdornmentProps & {\n readonly loading?: boolean;\n};\n\nexport const Button: FC<ButtonProps> = (props: ButtonProps) => {\n const {\n variant,\n size,\n layout,\n iconMotion,\n loading = false,\n disabled,\n type = \"button\",\n className,\n children,\n startIcon,\n startIconLayout = \"inline\",\n startIconSize = \"standard\",\n endIcon,\n ...restProps\n } = props;\n const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n variant,\n size,\n layout: \"standard\",\n iconMotion,\n } : {\n variant,\n size,\n layout,\n iconMotion,\n };\n return (<button\n {...restProps}\n type={type}\n disabled={disabled || loading}\n aria-busy={loading || restProps[\"aria-busy\"]}\n className={buttonClass(variants, className)}\n >\n <ButtonContent\n layout={variants.layout}\n size={size}\n iconMotion={iconMotion}\n startIcon={startIcon}\n startIconLayout={startIconLayout}\n startIconSize={startIconSize}\n endIcon={endIcon}\n >\n {children}\n </ButtonContent>\n </button>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace ButtonLink\n * @description Button Link\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ButtonLinkProps = ComponentPropsWithRef<\"a\"> & ButtonVariants & ButtonAdornmentProps & {\n readonly href: string;\n};\n\nexport const ButtonLink: FC<ButtonLinkProps> = (props: ButtonLinkProps) => {\n const {\n variant = \"secondary\",\n size,\n layout,\n iconMotion,\n className,\n children,\n startIcon,\n startIconLayout = \"inline\",\n startIconSize = \"standard\",\n endIcon,\n ...restProps\n } = props;\n const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n variant,\n size,\n layout: \"standard\",\n iconMotion,\n } : {\n variant,\n size,\n layout,\n iconMotion,\n };\n return (<a\n {...restProps}\n className={buttonClass(variants, className)}\n >\n <ButtonContent\n layout={variants.layout}\n size={size}\n iconMotion={iconMotion}\n startIcon={startIcon}\n startIconLayout={startIconLayout}\n startIconSize={startIconSize}\n endIcon={endIcon}\n >\n {children}\n </ButtonContent>\n </a>);\n};\n"],
|
|
5
|
-
"mappings": "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
|
|
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-button--inline-flex gridui-u-button--w-fit gridui-u-button--max-w-full gridui-u-button--min-w-0 gridui-u-button--items-center gridui-u-button--justify-center gridui-u-button--gap-gridui-8 gridui-u-button--rounded-control gridui-u-button--type-ui gridui-u-button--text-center gridui-u-button--no-underline gridui-u-button--wrap-anywhere gridui-u-button--cursor-pointer gridui-u-button--transition-colors gridui-u-button--duration-(--gridui-motion-duration-quick) gridui-u-button--ease-(--gridui-motion-ease-out)\",\n \"gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size)] gridui-u-button--[&_svg]:w-(--gridui-button-icon-size) gridui-u-button--[&_svg]:h-(--gridui-button-icon-size) gridui-u-button--[&_svg]:shrink-0 gridui-u-button--[&_svg]:pointer-events-none\",\n \"gridui-u-button--disabled:cursor-not-allowed\",\n \"gridui-u-button--aria-disabled:cursor-not-allowed\",\n \"gridui-u-button--data-disabled:cursor-not-allowed\",\n \"gridui-u-button--motion-reduce:transition-none\",\n));\n\nexport const buttonStandardStyles = cva(cn(\n \"gridui-button-standard\",\n \"gridui-u-button--min-h-gridui-control gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16\",\n));\n\nexport const buttonSmallStyles = cva(cn(\n \"gridui-button-small\",\n \"gridui-u-button--min-h-gridui-control-small gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8\",\n));\n\nexport const buttonLargeStyles = cva(cn(\n \"gridui-button-large\",\n \"gridui-u-button--min-h-gridui-control-large gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24 gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonExtraLargeStyles = cva(cn(\n \"gridui-button-extra-large\",\n \"gridui-u-button--min-h-18 gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24 gridui-u-button--[--gridui-button-icon-size:var(--gridui-icon-size-large)]\",\n));\n\nexport const buttonPrimaryStyles = cva(cn(\n \"gridui-button-primary\",\n \"gridui-u-button--text-accent-foreground gridui-u-button--bg-accent-background gridui-u-button--border-accent-background\",\n));\n\nexport const buttonSecondaryStyles = cva(cn(\n \"gridui-button-secondary\",\n \"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-border\",\n));\n\nexport const buttonQuietStyles = cva(cn(\n \"gridui-button-quiet\",\n \"gridui-u-button--text-foreground gridui-u-button--bg-transparent\",\n));\n\nexport const buttonHighlightStyles = cva(cn(\n \"gridui-button-highlight\",\n \"gridui-u-button--text-foreground gridui-u-button--bg-brand-tint\",\n));\n\nexport const buttonTextStyles = cva(cn(\n \"gridui-button-text\",\n \"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-0 gridui-u-button--rounded-none\",\n));\n\nexport const buttonUnderlinedStyles = cva(cn(\n \"gridui-button-underlined\",\n \"gridui-u-button--text-foreground gridui-u-button--bg-transparent gridui-u-button--border-0 gridui-u-button--border-b gridui-u-button--border-foreground gridui-u-button--rounded-none\",\n));\n\nexport const buttonEntryStyles = cva(cn(\n \"gridui-button-entry\",\n \"gridui-u-button--justify-between gridui-u-button--w-full gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24\",\n));\n\nexport const buttonCellStyles = cva(cn(\n \"gridui-button-cell\",\n \"gridui-u-button--w-full gridui-u-button--h-full gridui-u-button--justify-start gridui-u-button--rounded-none gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24 gridui-u-button--text-left\",\n));\n\nexport const buttonRailStyles = cva(cn(\n \"gridui-button-rail\",\n \"gridui-u-button--w-full gridui-u-button--min-w-gridui-24 gridui-u-button--flex-col gridui-u-button--py-gridui-8 gridui-u-button--px-0\",\n \"gridui-u-button--[&_>_span]:[writing-mode:vertical-rl] gridui-u-button--[&_>_span]:whitespace-nowrap\",\n));\n\nexport const buttonIconStyles = cva(cn(\n \"gridui-button-icon\",\n \"gridui-u-button--w-gridui-control gridui-u-button--h-gridui-control gridui-u-button--shrink-0 gridui-u-button--p-0\",\n \"gridui-u-button--[&.gridui-button-small]:w-gridui-control-small gridui-u-button--[&.gridui-button-small]:h-gridui-control-small\",\n \"gridui-u-button--[&.gridui-button-large]:w-gridui-control-large gridui-u-button--[&.gridui-button-large]:h-gridui-control-large\",\n \"gridui-u-button--[&.gridui-button-extra-large]:w-18 gridui-u-button--[&.gridui-button-extra-large]:h-18\",\n \"gridui-u-button--pointer-coarse:[&.gridui-button-small]:w-gridui-control gridui-u-button--pointer-coarse:[&.gridui-button-small]:h-gridui-control\",\n));\n\nexport const buttonDividedStyles = cva(cn(\n \"gridui-button-divided\",\n \"gridui-u-button--w-full gridui-u-button--items-stretch gridui-u-button--justify-between gridui-u-button--gap-0 gridui-u-button--rounded-none gridui-u-button--p-0 gridui-u-button--text-start\",\n));\n\nexport const buttonLabelStyles = cva(cn(\n \"gridui-button-label\",\n \"gridui-u-button--inline-flex gridui-u-button--min-w-0 gridui-u-button--flex-1 gridui-u-button--items-center gridui-u-button--gap-gridui-8\",\n), {\n variants: {\n size: {\n small: \"gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8\",\n standard: \"gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16\",\n large: \"gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24\",\n \"extra-large\": \"gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24\",\n },\n },\n defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonStartIconStyles = cva(cn(\n \"gridui-button-adornment gridui-button-start-icon\",\n \"gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none\",\n), {\n variants: {\n iconSize: {\n standard: \"\",\n large: \"gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-32)]\",\n \"extra-large\": \"gridui-u-button--[--gridui-button-icon-size:var(--gridui-space-48)]\",\n },\n },\n defaultVariants: { iconSize: \"standard\" },\n});\n\nexport const buttonStartRegionStyles = cva(cn(\n \"gridui-button-start-region\",\n \"gridui-u-button--justify-center gridui-u-button--self-stretch gridui-u-button--py-gridui-8\",\n), {\n variants: {\n size: {\n small: \"gridui-u-button--w-gridui-control-small\",\n standard: \"gridui-u-button--w-gridui-control\",\n large: \"gridui-u-button--w-gridui-control-large\",\n \"extra-large\": \"gridui-u-button--w-gridui-64\",\n },\n },\n defaultVariants: { size: \"standard\" },\n});\n\nexport const buttonEndRegionStyles = cva(cn(\n \"gridui-button-end-region\",\n \"gridui-u-button--justify-center gridui-u-button--self-stretch\",\n), {\n variants: {\n size: {\n small: \"gridui-u-button--w-gridui-control-small\",\n standard: \"gridui-u-button--w-gridui-control\",\n large: \"gridui-u-button--w-gridui-control-large\",\n \"extra-large\": \"gridui-u-button--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-button--gap-gridui-32 gridui-u-button--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-button--px-0\", className);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Content\n */\n\nimport { buttonEndRegionStyles, buttonLabelStyles, buttonStartIconStyles, buttonStartRegionStyles, type ButtonVariants } from \"./style\";\nimport type { ButtonAdornmentProps } from \"./types\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { FC, ReactNode } from \"react\";\n\nexport type ButtonContentProps = ButtonAdornmentProps & {\n readonly children?: ReactNode;\n readonly layout?: ButtonVariants[\"layout\"];\n readonly size?: ButtonVariants[\"size\"];\n readonly iconMotion?: ButtonVariants[\"iconMotion\"];\n};\n\nexport const ButtonContent: FC<ButtonContentProps> = (props: ButtonContentProps) => {\n const { children, startIcon, startIconLayout, startIconSize, endIcon, layout, size, iconMotion } = props;\n const dividedStart = layout === \"divided\" && startIconLayout === \"divided\";\n const startAdornment = startIcon !== undefined && startIcon !== null && typeof startIcon !== \"boolean\" ? (<span\n className={cn(\n buttonStartIconStyles({ iconSize: startIconSize }),\n dividedStart ? buttonStartRegionStyles({ size }) : \"gridui-button-content\",\n )}\n aria-hidden=\"true\"\n inert\n >\n {dividedStart ? (<span\n className=\"gridui-button-content gridui-u-button--inline-flex\"\n >\n {startIcon}\n </span>) : startIcon}\n </span>) : null;\n const label = (<>\n {!dividedStart && startAdornment}\n {children}\n </>);\n\n return (<>\n {dividedStart && startAdornment}\n <span\n className={cn(\"gridui-button-content\", layout === \"divided\" ? buttonLabelStyles({ size }) : \"gridui-button-body\")}\n >\n {label}\n </span>\n {endIcon !== undefined && endIcon !== null && typeof endIcon !== \"boolean\" && (<span\n className={cn(\n \"gridui-button-adornment gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none\",\n layout === \"divided\" ? buttonEndRegionStyles({ size }) : \"gridui-button-content\",\n )}\n aria-hidden=\"true\"\n inert\n >\n {layout === \"divided\" || iconMotion === \"outward\" ? (<span\n className={cn(\"gridui-u-button--inline-flex\", layout === \"divided\" && \"gridui-button-content\", iconMotion === \"outward\" && \"gridui-button-end-icon\")}\n >\n {endIcon}\n </span>) : endIcon}\n </span>)}\n </>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Button\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ButtonProps = ComponentPropsWithRef<\"button\"> & ButtonVariants & ButtonAdornmentProps & {\n readonly loading?: boolean;\n};\n\nexport const Button: FC<ButtonProps> = (props: ButtonProps) => {\n const {\n variant,\n size,\n layout,\n iconMotion,\n loading = false,\n disabled,\n type = \"button\",\n className,\n children,\n startIcon,\n startIconLayout = \"inline\",\n startIconSize = \"standard\",\n endIcon,\n ...restProps\n } = props;\n const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n variant,\n size,\n layout: \"standard\",\n iconMotion,\n } : {\n variant,\n size,\n layout,\n iconMotion,\n };\n return (<button\n {...restProps}\n type={type}\n disabled={disabled || loading}\n aria-busy={loading || restProps[\"aria-busy\"]}\n className={buttonClass(variants, className)}\n >\n <ButtonContent\n layout={variants.layout}\n size={size}\n iconMotion={iconMotion}\n startIcon={startIcon}\n startIconLayout={startIconLayout}\n startIconSize={startIconSize}\n endIcon={endIcon}\n >\n {children}\n </ButtonContent>\n </button>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace ButtonLink\n * @description Button Link\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ButtonLinkProps = ComponentPropsWithRef<\"a\"> & ButtonVariants & ButtonAdornmentProps & {\n readonly href: string;\n};\n\nexport const ButtonLink: FC<ButtonLinkProps> = (props: ButtonLinkProps) => {\n const {\n variant = \"secondary\",\n size,\n layout,\n iconMotion,\n className,\n children,\n startIcon,\n startIconLayout = \"inline\",\n startIconSize = \"standard\",\n endIcon,\n ...restProps\n } = props;\n const variants: ButtonVariants = (variant === \"text\" || variant === \"underlined\") ? {\n variant,\n size,\n layout: \"standard\",\n iconMotion,\n } : {\n variant,\n size,\n layout,\n iconMotion,\n };\n return (<a\n {...restProps}\n className={buttonClass(variants, className)}\n >\n <ButtonContent\n layout={variants.layout}\n size={size}\n iconMotion={iconMotion}\n startIcon={startIcon}\n startIconLayout={startIconLayout}\n startIconSize={startIconSize}\n endIcon={endIcon}\n >\n {children}\n </ButtonContent>\n </a>);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["cn", "jsx", "jsx"]
|
|
7
7
|
}
|
package/dist/styles.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.
|
|
1
|
+
/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
@layer theme, base, components, utilities;
|
|
4
4
|
@layer theme {
|
|
@@ -9,302 +9,292 @@
|
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
@layer utilities {
|
|
12
|
-
.gridui-u-pointer-events-none {
|
|
12
|
+
.gridui-u-button--pointer-events-none {
|
|
13
13
|
pointer-events: none;
|
|
14
14
|
}
|
|
15
|
-
.gridui-u-inline-flex {
|
|
15
|
+
.gridui-u-button--inline-flex {
|
|
16
16
|
display: inline-flex;
|
|
17
17
|
}
|
|
18
|
-
.gridui-u-h-full {
|
|
18
|
+
.gridui-u-button--h-full {
|
|
19
19
|
height: 100%;
|
|
20
20
|
}
|
|
21
|
-
.gridui-u-h-gridui-control {
|
|
21
|
+
.gridui-u-button--h-gridui-control {
|
|
22
22
|
height: var(--gridui-control-min-height);
|
|
23
23
|
}
|
|
24
|
-
.gridui-u-min-h-18 {
|
|
24
|
+
.gridui-u-button--min-h-18 {
|
|
25
25
|
min-height: calc(var(--spacing) * 18);
|
|
26
26
|
}
|
|
27
|
-
.gridui-u-min-h-gridui-control {
|
|
27
|
+
.gridui-u-button--min-h-gridui-control {
|
|
28
28
|
min-height: var(--gridui-control-min-height);
|
|
29
29
|
}
|
|
30
|
-
.gridui-u-min-h-gridui-control-large {
|
|
30
|
+
.gridui-u-button--min-h-gridui-control-large {
|
|
31
31
|
min-height: var(--gridui-control-min-height-large);
|
|
32
32
|
}
|
|
33
|
-
.gridui-u-min-h-gridui-control-small {
|
|
33
|
+
.gridui-u-button--min-h-gridui-control-small {
|
|
34
34
|
min-height: var(--gridui-control-min-height-small);
|
|
35
35
|
}
|
|
36
|
-
.gridui-u-w-fit {
|
|
36
|
+
.gridui-u-button--w-fit {
|
|
37
37
|
width: fit-content;
|
|
38
38
|
}
|
|
39
|
-
.gridui-u-w-full {
|
|
39
|
+
.gridui-u-button--w-full {
|
|
40
40
|
width: 100%;
|
|
41
41
|
}
|
|
42
|
-
.gridui-u-w-gridui-64 {
|
|
42
|
+
.gridui-u-button--w-gridui-64 {
|
|
43
43
|
width: var(--gridui-space-64);
|
|
44
44
|
}
|
|
45
|
-
.gridui-u-w-gridui-control {
|
|
45
|
+
.gridui-u-button--w-gridui-control {
|
|
46
46
|
width: var(--gridui-control-min-height);
|
|
47
47
|
}
|
|
48
|
-
.gridui-u-w-gridui-control-large {
|
|
48
|
+
.gridui-u-button--w-gridui-control-large {
|
|
49
49
|
width: var(--gridui-control-min-height-large);
|
|
50
50
|
}
|
|
51
|
-
.gridui-u-w-gridui-control-small {
|
|
51
|
+
.gridui-u-button--w-gridui-control-small {
|
|
52
52
|
width: var(--gridui-control-min-height-small);
|
|
53
53
|
}
|
|
54
|
-
.gridui-u-max-w-full {
|
|
54
|
+
.gridui-u-button--max-w-full {
|
|
55
55
|
max-width: 100%;
|
|
56
56
|
}
|
|
57
|
-
.gridui-u-min-w-0 {
|
|
57
|
+
.gridui-u-button--min-w-0 {
|
|
58
58
|
min-width: 0px;
|
|
59
59
|
}
|
|
60
|
-
.gridui-u-min-w-gridui-24 {
|
|
60
|
+
.gridui-u-button--min-w-gridui-24 {
|
|
61
61
|
min-width: var(--gridui-space-24);
|
|
62
62
|
}
|
|
63
|
-
.gridui-u-flex-1 {
|
|
63
|
+
.gridui-u-button--flex-1 {
|
|
64
64
|
flex: 1;
|
|
65
65
|
}
|
|
66
|
-
.gridui-u-shrink-0 {
|
|
66
|
+
.gridui-u-button--shrink-0 {
|
|
67
67
|
flex-shrink: 0;
|
|
68
68
|
}
|
|
69
|
-
.gridui-u-cursor-pointer {
|
|
69
|
+
.gridui-u-button--cursor-pointer {
|
|
70
70
|
cursor: pointer;
|
|
71
71
|
}
|
|
72
|
-
.gridui-u-flex-col {
|
|
72
|
+
.gridui-u-button--flex-col {
|
|
73
73
|
flex-direction: column;
|
|
74
74
|
}
|
|
75
|
-
.gridui-u-items-center {
|
|
75
|
+
.gridui-u-button--items-center {
|
|
76
76
|
align-items: center;
|
|
77
77
|
}
|
|
78
|
-
.gridui-u-items-stretch {
|
|
78
|
+
.gridui-u-button--items-stretch {
|
|
79
79
|
align-items: stretch;
|
|
80
80
|
}
|
|
81
|
-
.gridui-u-justify-between {
|
|
81
|
+
.gridui-u-button--justify-between {
|
|
82
82
|
justify-content: space-between;
|
|
83
83
|
}
|
|
84
|
-
.gridui-u-justify-center {
|
|
84
|
+
.gridui-u-button--justify-center {
|
|
85
85
|
justify-content: center;
|
|
86
86
|
}
|
|
87
|
-
.gridui-u-justify-start {
|
|
87
|
+
.gridui-u-button--justify-start {
|
|
88
88
|
justify-content: flex-start;
|
|
89
89
|
}
|
|
90
|
-
.gridui-u-gap-0 {
|
|
90
|
+
.gridui-u-button--gap-0 {
|
|
91
91
|
gap: 0px;
|
|
92
92
|
}
|
|
93
|
-
.gridui-u-gap-gridui-8 {
|
|
93
|
+
.gridui-u-button--gap-gridui-8 {
|
|
94
94
|
gap: var(--gridui-space-8);
|
|
95
95
|
}
|
|
96
|
-
.gridui-u-gap-gridui-32 {
|
|
96
|
+
.gridui-u-button--gap-gridui-32 {
|
|
97
97
|
gap: var(--gridui-space-32);
|
|
98
98
|
}
|
|
99
|
-
.gridui-u-self-stretch {
|
|
99
|
+
.gridui-u-button--self-stretch {
|
|
100
100
|
align-self: stretch;
|
|
101
101
|
}
|
|
102
|
-
.gridui-u-rounded-control {
|
|
102
|
+
.gridui-u-button--rounded-control {
|
|
103
103
|
border-radius: var(--gridui-control-radius);
|
|
104
104
|
}
|
|
105
|
-
.gridui-u-rounded-none {
|
|
105
|
+
.gridui-u-button--rounded-none {
|
|
106
106
|
border-radius: 0;
|
|
107
107
|
}
|
|
108
|
-
.gridui-u-border {
|
|
109
|
-
border-style: var(--tw-border-style);
|
|
110
|
-
border-width: 1px;
|
|
111
|
-
}
|
|
112
|
-
.gridui-u-border-0 {
|
|
108
|
+
.gridui-u-button--border-0 {
|
|
113
109
|
border-style: var(--tw-border-style);
|
|
114
110
|
border-width: 0px;
|
|
115
111
|
}
|
|
116
|
-
.gridui-u-border-
|
|
117
|
-
border-inline-start-style: var(--tw-border-style);
|
|
118
|
-
border-inline-start-width: 1px;
|
|
119
|
-
}
|
|
120
|
-
.gridui-u-border-e {
|
|
121
|
-
border-inline-end-style: var(--tw-border-style);
|
|
122
|
-
border-inline-end-width: 1px;
|
|
123
|
-
}
|
|
124
|
-
.gridui-u-border-b {
|
|
112
|
+
.gridui-u-button--border-b {
|
|
125
113
|
border-bottom-style: var(--tw-border-style);
|
|
126
114
|
border-bottom-width: 1px;
|
|
127
115
|
}
|
|
128
|
-
.gridui-u-border-
|
|
129
|
-
--tw-border-style: solid;
|
|
130
|
-
border-style: solid;
|
|
131
|
-
}
|
|
132
|
-
.gridui-u-border-accent-background {
|
|
116
|
+
.gridui-u-button--border-accent-background {
|
|
133
117
|
border-color: var(--gridui-accent-background);
|
|
134
118
|
}
|
|
135
|
-
.gridui-u-border-border {
|
|
119
|
+
.gridui-u-button--border-border {
|
|
136
120
|
border-color: var(--gridui-border);
|
|
137
121
|
}
|
|
138
|
-
.gridui-u-border-
|
|
139
|
-
border-color: currentcolor;
|
|
140
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
141
|
-
border-color: color-mix(in oklab, currentcolor 25%, transparent);
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
.gridui-u-border-foreground {
|
|
122
|
+
.gridui-u-button--border-foreground {
|
|
145
123
|
border-color: var(--gridui-foreground);
|
|
146
124
|
}
|
|
147
|
-
.gridui-u-
|
|
148
|
-
border-color: transparent;
|
|
149
|
-
}
|
|
150
|
-
.gridui-u-bg-accent-background {
|
|
125
|
+
.gridui-u-button--bg-accent-background {
|
|
151
126
|
background-color: var(--gridui-accent-background);
|
|
152
127
|
}
|
|
153
|
-
.gridui-u-bg-brand-tint {
|
|
128
|
+
.gridui-u-button--bg-brand-tint {
|
|
154
129
|
background-color: var(--gridui-brand-tint);
|
|
155
130
|
}
|
|
156
|
-
.gridui-u-bg-transparent {
|
|
131
|
+
.gridui-u-button--bg-transparent {
|
|
157
132
|
background-color: transparent;
|
|
158
133
|
}
|
|
159
|
-
.gridui-u-p-0 {
|
|
134
|
+
.gridui-u-button--p-0 {
|
|
160
135
|
padding: 0px;
|
|
161
136
|
}
|
|
162
|
-
.gridui-u-px-0 {
|
|
137
|
+
.gridui-u-button--px-0 {
|
|
163
138
|
padding-inline: 0px;
|
|
164
139
|
}
|
|
165
|
-
.gridui-u-px-gridui-8 {
|
|
140
|
+
.gridui-u-button--px-gridui-8 {
|
|
166
141
|
padding-inline: var(--gridui-space-8);
|
|
167
142
|
}
|
|
168
|
-
.gridui-u-px-gridui-16 {
|
|
143
|
+
.gridui-u-button--px-gridui-16 {
|
|
169
144
|
padding-inline: var(--gridui-space-16);
|
|
170
145
|
}
|
|
171
|
-
.gridui-u-px-gridui-24 {
|
|
146
|
+
.gridui-u-button--px-gridui-24 {
|
|
172
147
|
padding-inline: var(--gridui-space-24);
|
|
173
148
|
}
|
|
174
|
-
.gridui-u-py-gridui-4 {
|
|
149
|
+
.gridui-u-button--py-gridui-4 {
|
|
175
150
|
padding-block: var(--gridui-space-4);
|
|
176
151
|
}
|
|
177
|
-
.gridui-u-py-gridui-8 {
|
|
152
|
+
.gridui-u-button--py-gridui-8 {
|
|
178
153
|
padding-block: var(--gridui-space-8);
|
|
179
154
|
}
|
|
180
|
-
.gridui-u-py-gridui-16 {
|
|
155
|
+
.gridui-u-button--py-gridui-16 {
|
|
181
156
|
padding-block: var(--gridui-space-16);
|
|
182
157
|
}
|
|
183
|
-
.gridui-u-text-center {
|
|
158
|
+
.gridui-u-button--text-center {
|
|
184
159
|
text-align: center;
|
|
185
160
|
}
|
|
186
|
-
.gridui-u-text-left {
|
|
161
|
+
.gridui-u-button--text-left {
|
|
187
162
|
text-align: left;
|
|
188
163
|
}
|
|
189
|
-
.gridui-u-text-start {
|
|
164
|
+
.gridui-u-button--text-start {
|
|
190
165
|
text-align: start;
|
|
191
166
|
}
|
|
192
|
-
.gridui-u-type-supporting {
|
|
167
|
+
.gridui-u-button--type-supporting {
|
|
193
168
|
font: var(--gridui-type-supporting);
|
|
194
169
|
letter-spacing: normal;
|
|
195
170
|
}
|
|
196
|
-
.gridui-u-type-ui {
|
|
171
|
+
.gridui-u-button--type-ui {
|
|
197
172
|
font: var(--gridui-type-ui);
|
|
198
173
|
letter-spacing: normal;
|
|
199
174
|
}
|
|
200
|
-
.gridui-u-wrap-anywhere {
|
|
175
|
+
.gridui-u-button--wrap-anywhere {
|
|
201
176
|
overflow-wrap: anywhere;
|
|
202
177
|
}
|
|
203
|
-
.gridui-u-text-accent-foreground {
|
|
178
|
+
.gridui-u-button--text-accent-foreground {
|
|
204
179
|
color: var(--gridui-accent-foreground);
|
|
205
180
|
}
|
|
206
|
-
.gridui-u-text-foreground {
|
|
181
|
+
.gridui-u-button--text-foreground {
|
|
207
182
|
color: var(--gridui-foreground);
|
|
208
183
|
}
|
|
209
|
-
.gridui-u-no-underline {
|
|
184
|
+
.gridui-u-button--no-underline {
|
|
210
185
|
text-decoration-line: none;
|
|
211
186
|
}
|
|
212
|
-
.gridui-u-transition-colors {
|
|
187
|
+
.gridui-u-button--transition-colors {
|
|
213
188
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
214
189
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
215
190
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
216
191
|
}
|
|
217
|
-
.gridui-u-duration-\(--gridui-motion-duration-quick\) {
|
|
192
|
+
.gridui-u-button--duration-\(--gridui-motion-duration-quick\) {
|
|
218
193
|
--tw-duration: var(--gridui-motion-duration-quick);
|
|
219
194
|
transition-duration: var(--gridui-motion-duration-quick);
|
|
220
195
|
}
|
|
221
|
-
.gridui-u-ease-\(--gridui-motion-ease-out\) {
|
|
196
|
+
.gridui-u-button--ease-\(--gridui-motion-ease-out\) {
|
|
222
197
|
--tw-ease: var(--gridui-motion-ease-out);
|
|
223
198
|
transition-timing-function: var(--gridui-motion-ease-out);
|
|
224
199
|
}
|
|
225
|
-
.gridui-u
|
|
200
|
+
.gridui-u-button--\[--gridui-button-icon-size\:var\(--gridui-icon-size\)\] {
|
|
226
201
|
--gridui-button-icon-size: var(--gridui-icon-size);
|
|
227
202
|
}
|
|
228
|
-
.gridui-u
|
|
203
|
+
.gridui-u-button--\[--gridui-button-icon-size\:var\(--gridui-icon-size-large\)\] {
|
|
229
204
|
--gridui-button-icon-size: var(--gridui-icon-size-large);
|
|
230
205
|
}
|
|
231
|
-
.gridui-u
|
|
206
|
+
.gridui-u-button--\[--gridui-button-icon-size\:var\(--gridui-space-32\)\] {
|
|
232
207
|
--gridui-button-icon-size: var(--gridui-space-32);
|
|
233
208
|
}
|
|
234
|
-
.gridui-u
|
|
209
|
+
.gridui-u-button--\[--gridui-button-icon-size\:var\(--gridui-space-48\)\] {
|
|
235
210
|
--gridui-button-icon-size: var(--gridui-space-48);
|
|
236
211
|
}
|
|
237
|
-
.gridui-u-disabled\:cursor-not-allowed:disabled {
|
|
212
|
+
.gridui-u-button--disabled\:cursor-not-allowed:disabled {
|
|
238
213
|
cursor: not-allowed;
|
|
239
214
|
}
|
|
240
|
-
.gridui-u-disabled\:
|
|
241
|
-
opacity: 50%;
|
|
242
|
-
}
|
|
243
|
-
.gridui-u-aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
|
|
215
|
+
.gridui-u-button--aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
|
|
244
216
|
cursor: not-allowed;
|
|
245
217
|
}
|
|
246
|
-
.gridui-u-
|
|
247
|
-
opacity: 50%;
|
|
248
|
-
}
|
|
249
|
-
.gridui-u-data-disabled\:cursor-not-allowed[data-disabled] {
|
|
218
|
+
.gridui-u-button--data-disabled\:cursor-not-allowed[data-disabled] {
|
|
250
219
|
cursor: not-allowed;
|
|
251
220
|
}
|
|
252
|
-
.gridui-u-data-disabled\:opacity-50[data-disabled] {
|
|
253
|
-
opacity: 50%;
|
|
254
|
-
}
|
|
255
221
|
@media (prefers-reduced-motion: reduce) {
|
|
256
|
-
.gridui-u-motion-reduce\:transition-none {
|
|
222
|
+
.gridui-u-button--motion-reduce\:transition-none {
|
|
257
223
|
transition-property: none;
|
|
258
224
|
}
|
|
259
225
|
}
|
|
260
|
-
.gridui-u
|
|
226
|
+
.gridui-u-button--\[\&_\>_span\]\:whitespace-nowrap > span {
|
|
261
227
|
white-space: nowrap;
|
|
262
228
|
}
|
|
263
|
-
.gridui-u
|
|
229
|
+
.gridui-u-button--\[\&_\>_span\]\:\[writing-mode\:vertical-rl\] > span {
|
|
264
230
|
writing-mode: vertical-rl;
|
|
265
231
|
}
|
|
266
|
-
.gridui-u
|
|
232
|
+
.gridui-u-button--\[\&_svg\]\:pointer-events-none svg {
|
|
267
233
|
pointer-events: none;
|
|
268
234
|
}
|
|
269
|
-
.gridui-u
|
|
235
|
+
.gridui-u-button--\[\&_svg\]\:h-\(--gridui-button-icon-size\) svg {
|
|
270
236
|
height: var(--gridui-button-icon-size);
|
|
271
237
|
}
|
|
272
|
-
.gridui-u
|
|
238
|
+
.gridui-u-button--\[\&_svg\]\:w-\(--gridui-button-icon-size\) svg {
|
|
273
239
|
width: var(--gridui-button-icon-size);
|
|
274
240
|
}
|
|
275
|
-
.gridui-u
|
|
241
|
+
.gridui-u-button--\[\&_svg\]\:shrink-0 svg {
|
|
276
242
|
flex-shrink: 0;
|
|
277
243
|
}
|
|
278
|
-
.gridui-u
|
|
244
|
+
.gridui-u-button--\[\&\.gridui-button-extra-large\]\:h-18.gridui-button-extra-large {
|
|
279
245
|
height: calc(var(--spacing) * 18);
|
|
280
246
|
}
|
|
281
|
-
.gridui-u
|
|
247
|
+
.gridui-u-button--\[\&\.gridui-button-extra-large\]\:w-18.gridui-button-extra-large {
|
|
282
248
|
width: calc(var(--spacing) * 18);
|
|
283
249
|
}
|
|
284
|
-
.gridui-u
|
|
250
|
+
.gridui-u-button--\[\&\.gridui-button-large\]\:h-gridui-control-large.gridui-button-large {
|
|
285
251
|
height: var(--gridui-control-min-height-large);
|
|
286
252
|
}
|
|
287
|
-
.gridui-u
|
|
253
|
+
.gridui-u-button--\[\&\.gridui-button-large\]\:w-gridui-control-large.gridui-button-large {
|
|
288
254
|
width: var(--gridui-control-min-height-large);
|
|
289
255
|
}
|
|
290
|
-
.gridui-u
|
|
256
|
+
.gridui-u-button--\[\&\.gridui-button-small\]\:h-gridui-control-small.gridui-button-small {
|
|
291
257
|
height: var(--gridui-control-min-height-small);
|
|
292
258
|
}
|
|
293
|
-
.gridui-u
|
|
259
|
+
.gridui-u-button--\[\&\.gridui-button-small\]\:w-gridui-control-small.gridui-button-small {
|
|
294
260
|
width: var(--gridui-control-min-height-small);
|
|
295
261
|
}
|
|
296
262
|
@media (pointer: coarse) {
|
|
297
|
-
.gridui-u-pointer-coarse\:\[\&\.gridui-button-small\]\:h-gridui-control.gridui-button-small {
|
|
263
|
+
.gridui-u-button--pointer-coarse\:\[\&\.gridui-button-small\]\:h-gridui-control.gridui-button-small {
|
|
298
264
|
height: var(--gridui-control-min-height);
|
|
299
265
|
}
|
|
300
|
-
.gridui-u-pointer-coarse\:\[\&\.gridui-button-small\]\:w-gridui-control.gridui-button-small {
|
|
266
|
+
.gridui-u-button--pointer-coarse\:\[\&\.gridui-button-small\]\:w-gridui-control.gridui-button-small {
|
|
301
267
|
width: var(--gridui-control-min-height);
|
|
302
268
|
}
|
|
303
269
|
}
|
|
304
270
|
}
|
|
305
271
|
@layer components {
|
|
272
|
+
.gridui-button {
|
|
273
|
+
border: 1px solid transparent;
|
|
274
|
+
}
|
|
275
|
+
.gridui-button-cell {
|
|
276
|
+
border: 0;
|
|
277
|
+
}
|
|
278
|
+
.gridui-button-body {
|
|
279
|
+
display: inline-flex;
|
|
280
|
+
flex: 1;
|
|
281
|
+
min-width: 0;
|
|
282
|
+
flex-direction: inherit;
|
|
283
|
+
align-items: inherit;
|
|
284
|
+
justify-content: inherit;
|
|
285
|
+
gap: inherit;
|
|
286
|
+
}
|
|
287
|
+
.gridui-button:is(:disabled, [aria-disabled="true"], [data-disabled]) > .gridui-button-content, .gridui-button:is(:disabled, [aria-disabled="true"], [data-disabled]) > .gridui-button-start-region > .gridui-button-content, .gridui-button:is(:disabled, [aria-disabled="true"], [data-disabled]) > .gridui-button-end-region > .gridui-button-content {
|
|
288
|
+
opacity: 0.5;
|
|
289
|
+
}
|
|
306
290
|
.gridui-button-start-region {
|
|
307
291
|
min-width: calc(var(--gridui-button-icon-size) + var(--gridui-space-16));
|
|
292
|
+
border-inline-end: 1px solid;
|
|
293
|
+
border-color: inherit;
|
|
294
|
+
}
|
|
295
|
+
.gridui-button-end-region {
|
|
296
|
+
border-inline-start: 1px solid;
|
|
297
|
+
border-color: inherit;
|
|
308
298
|
}
|
|
309
299
|
@media (prefers-reduced-motion: no-preference) {
|
|
310
300
|
.gridui-button-icon-motion-outward:not(:disabled, [aria-disabled="true"], [data-disabled], [aria-readonly="true"], [data-readonly], [readonly]) .gridui-button-end-icon {
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"name": "@gridui/button",
|
|
4
|
+
"version": "4.0.0",
|
|
5
|
+
"category": "core",
|
|
6
|
+
"description": "GridUI React buttons and action helpers",
|
|
7
|
+
"usage": "`@gridui/button` owns native buttons, button-styled links, shared button classes, and async action scheduling. It has no domain, route, locale, or Layout dependency. Load `@gridui/button/styles.css` after the theme styles.",
|
|
8
|
+
"documentation": [
|
|
9
|
+
"README.md"
|
|
10
|
+
],
|
|
11
|
+
"exports": [
|
|
12
|
+
{
|
|
13
|
+
"name": "Button",
|
|
14
|
+
"kind": "component",
|
|
15
|
+
"importPath": "@gridui/button"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"name": "buttonClass",
|
|
19
|
+
"kind": "function",
|
|
20
|
+
"importPath": "@gridui/button"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "ButtonLink",
|
|
24
|
+
"kind": "component",
|
|
25
|
+
"importPath": "@gridui/button"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "ButtonLinkProps",
|
|
29
|
+
"kind": "type",
|
|
30
|
+
"importPath": "@gridui/button"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "ButtonProps",
|
|
34
|
+
"kind": "type",
|
|
35
|
+
"importPath": "@gridui/button"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"name": "ButtonVariants",
|
|
39
|
+
"kind": "type",
|
|
40
|
+
"importPath": "@gridui/button"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"name": "useAsyncAction",
|
|
44
|
+
"kind": "function",
|
|
45
|
+
"importPath": "@gridui/button"
|
|
46
|
+
}
|
|
47
|
+
],
|
|
48
|
+
"styles": [
|
|
49
|
+
"@gridui/theme/styles.css",
|
|
50
|
+
"@gridui/button/styles.css"
|
|
51
|
+
],
|
|
52
|
+
"examples": [
|
|
53
|
+
"https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/button-link.stories.tsx",
|
|
54
|
+
"https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/stories/button.stories.tsx"
|
|
55
|
+
]
|
|
56
|
+
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridui/button",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "GridUI React buttons and action helpers",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist",
|
|
9
|
-
"README.md"
|
|
9
|
+
"README.md",
|
|
10
|
+
"docs"
|
|
10
11
|
],
|
|
11
12
|
"sideEffects": [
|
|
12
13
|
"**/*.css"
|
|
@@ -22,20 +23,20 @@
|
|
|
22
23
|
"access": "public"
|
|
23
24
|
},
|
|
24
25
|
"dependencies": {
|
|
25
|
-
"@gridui/style-utils": "^
|
|
26
|
-
"@gridui/theme": "^2.5.
|
|
26
|
+
"@gridui/style-utils": "^3.0.0",
|
|
27
|
+
"@gridui/theme": "^2.5.3",
|
|
27
28
|
"class-variance-authority": "0.7.1"
|
|
28
29
|
},
|
|
29
30
|
"devDependencies": {
|
|
30
31
|
"@gridui-internal/configuration": "0.0.0-internal",
|
|
31
32
|
"@jest/globals": "30.5.2",
|
|
32
|
-
"@storybook/react-vite": "10.6.
|
|
33
|
+
"@storybook/react-vite": "10.6.6",
|
|
33
34
|
"@types/jest": "30.0.0",
|
|
34
35
|
"@types/node": "26.6.6",
|
|
35
36
|
"@types/react": "19.3.0",
|
|
36
37
|
"@types/react-dom": "19.3.0",
|
|
37
38
|
"jest": "30.5.2",
|
|
38
|
-
"lucide-react": "1.
|
|
39
|
+
"lucide-react": "1.70.0",
|
|
39
40
|
"react": "19.3.1",
|
|
40
41
|
"react-dom": "19.3.1",
|
|
41
42
|
"typescript": "6.0.3"
|