@gridui/button 5.0.0 → 5.0.1
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/dist/index.js +141 -33
- package/dist/index.js.map +2 -2
- package/dist/shared/style.d.ts +8 -1
- package/docs/catalog.json +1 -1
- package/package.json +5 -6
package/dist/index.js
CHANGED
|
@@ -116,19 +116,45 @@ var buttonDividedStyles = cva(cn(
|
|
|
116
116
|
"gridui-button-divided",
|
|
117
117
|
"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"
|
|
118
118
|
));
|
|
119
|
-
var buttonLabelStyles = cva(
|
|
120
|
-
"gridui-button-label",
|
|
121
|
-
"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"
|
|
122
|
-
), {
|
|
119
|
+
var buttonLabelStyles = cva("gridui-button-content", {
|
|
123
120
|
variants: {
|
|
121
|
+
divided: {
|
|
122
|
+
true: "gridui-button-label 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",
|
|
123
|
+
false: "gridui-button-body"
|
|
124
|
+
},
|
|
124
125
|
size: {
|
|
125
|
-
small: "
|
|
126
|
-
standard: "
|
|
127
|
-
large: "
|
|
128
|
-
"extra-large": "
|
|
126
|
+
small: "",
|
|
127
|
+
standard: "",
|
|
128
|
+
large: "",
|
|
129
|
+
"extra-large": ""
|
|
129
130
|
}
|
|
130
131
|
},
|
|
131
|
-
|
|
132
|
+
compoundVariants: [
|
|
133
|
+
{
|
|
134
|
+
divided: true,
|
|
135
|
+
size: "small",
|
|
136
|
+
className: "gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
divided: true,
|
|
140
|
+
size: "standard",
|
|
141
|
+
className: "gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
divided: true,
|
|
145
|
+
size: "large",
|
|
146
|
+
className: "gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
divided: true,
|
|
150
|
+
size: "extra-large",
|
|
151
|
+
className: "gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24"
|
|
152
|
+
}
|
|
153
|
+
],
|
|
154
|
+
defaultVariants: {
|
|
155
|
+
divided: false,
|
|
156
|
+
size: "standard"
|
|
157
|
+
}
|
|
132
158
|
});
|
|
133
159
|
var buttonStartIconStyles = cva(cn(
|
|
134
160
|
"gridui-button-adornment gridui-button-start-icon",
|
|
@@ -143,33 +169,97 @@ var buttonStartIconStyles = cva(cn(
|
|
|
143
169
|
},
|
|
144
170
|
defaultVariants: { iconSize: "standard" }
|
|
145
171
|
});
|
|
146
|
-
var buttonStartRegionStyles = cva(
|
|
147
|
-
"gridui-button-start-region",
|
|
148
|
-
"gridui-u-button--justify-center gridui-u-button--self-stretch gridui-u-button--py-gridui-8"
|
|
149
|
-
), {
|
|
172
|
+
var buttonStartRegionStyles = cva("", {
|
|
150
173
|
variants: {
|
|
174
|
+
divided: {
|
|
175
|
+
true: "gridui-button-start-region gridui-u-button--justify-center gridui-u-button--self-stretch gridui-u-button--py-gridui-8",
|
|
176
|
+
false: "gridui-button-content"
|
|
177
|
+
},
|
|
151
178
|
size: {
|
|
152
|
-
small: "
|
|
153
|
-
standard: "
|
|
154
|
-
large: "
|
|
155
|
-
"extra-large": "
|
|
179
|
+
small: "",
|
|
180
|
+
standard: "",
|
|
181
|
+
large: "",
|
|
182
|
+
"extra-large": ""
|
|
156
183
|
}
|
|
157
184
|
},
|
|
158
|
-
|
|
185
|
+
compoundVariants: [
|
|
186
|
+
{
|
|
187
|
+
divided: true,
|
|
188
|
+
size: "small",
|
|
189
|
+
className: "gridui-u-button--w-gridui-control-small"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
divided: true,
|
|
193
|
+
size: "standard",
|
|
194
|
+
className: "gridui-u-button--w-gridui-control"
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
divided: true,
|
|
198
|
+
size: "large",
|
|
199
|
+
className: "gridui-u-button--w-gridui-control-large"
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
divided: true,
|
|
203
|
+
size: "extra-large",
|
|
204
|
+
className: "gridui-u-button--w-gridui-64"
|
|
205
|
+
}
|
|
206
|
+
],
|
|
207
|
+
defaultVariants: {
|
|
208
|
+
divided: false,
|
|
209
|
+
size: "standard"
|
|
210
|
+
}
|
|
159
211
|
});
|
|
160
|
-
var buttonEndRegionStyles = cva(
|
|
161
|
-
"gridui-button-end-region",
|
|
162
|
-
"gridui-u-button--justify-center gridui-u-button--self-stretch"
|
|
163
|
-
), {
|
|
212
|
+
var buttonEndRegionStyles = cva("", {
|
|
164
213
|
variants: {
|
|
214
|
+
divided: {
|
|
215
|
+
true: "gridui-button-end-region gridui-u-button--justify-center gridui-u-button--self-stretch",
|
|
216
|
+
false: "gridui-button-content"
|
|
217
|
+
},
|
|
165
218
|
size: {
|
|
166
|
-
small: "
|
|
167
|
-
standard: "
|
|
168
|
-
large: "
|
|
169
|
-
"extra-large": "
|
|
219
|
+
small: "",
|
|
220
|
+
standard: "",
|
|
221
|
+
large: "",
|
|
222
|
+
"extra-large": ""
|
|
170
223
|
}
|
|
171
224
|
},
|
|
172
|
-
|
|
225
|
+
compoundVariants: [
|
|
226
|
+
{
|
|
227
|
+
divided: true,
|
|
228
|
+
size: "small",
|
|
229
|
+
className: "gridui-u-button--w-gridui-control-small"
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
divided: true,
|
|
233
|
+
size: "standard",
|
|
234
|
+
className: "gridui-u-button--w-gridui-control"
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
divided: true,
|
|
238
|
+
size: "large",
|
|
239
|
+
className: "gridui-u-button--w-gridui-control-large"
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
divided: true,
|
|
243
|
+
size: "extra-large",
|
|
244
|
+
className: "gridui-u-button--w-gridui-64"
|
|
245
|
+
}
|
|
246
|
+
],
|
|
247
|
+
defaultVariants: {
|
|
248
|
+
divided: false,
|
|
249
|
+
size: "standard"
|
|
250
|
+
}
|
|
251
|
+
});
|
|
252
|
+
var buttonEndIconStyles = cva("gridui-u-button--inline-flex", {
|
|
253
|
+
variants: {
|
|
254
|
+
divided: {
|
|
255
|
+
true: "gridui-button-content",
|
|
256
|
+
false: ""
|
|
257
|
+
},
|
|
258
|
+
iconMotion: {
|
|
259
|
+
none: "",
|
|
260
|
+
outward: "gridui-button-end-icon"
|
|
261
|
+
}
|
|
262
|
+
}
|
|
173
263
|
});
|
|
174
264
|
var buttonVariants = cva(buttonStyles(), {
|
|
175
265
|
variants: {
|
|
@@ -201,6 +291,13 @@ var buttonVariants = cva(buttonStyles(), {
|
|
|
201
291
|
}
|
|
202
292
|
},
|
|
203
293
|
compoundVariants: [
|
|
294
|
+
{
|
|
295
|
+
variant: [
|
|
296
|
+
"text",
|
|
297
|
+
"underlined"
|
|
298
|
+
],
|
|
299
|
+
className: "gridui-u-button--px-0"
|
|
300
|
+
},
|
|
204
301
|
{
|
|
205
302
|
variant: [
|
|
206
303
|
"text",
|
|
@@ -219,13 +316,12 @@ var buttonVariants = cva(buttonStyles(), {
|
|
|
219
316
|
}
|
|
220
317
|
});
|
|
221
318
|
var buttonClass = (variants = {}, className) => {
|
|
222
|
-
const textVariant = variants.variant === "text" || variants.variant === "underlined";
|
|
223
319
|
return cn(buttonVariants({
|
|
224
320
|
variant: variants.variant,
|
|
225
321
|
size: variants.size,
|
|
226
322
|
layout: variants.layout,
|
|
227
323
|
iconMotion: variants.iconMotion
|
|
228
|
-
}),
|
|
324
|
+
}), className);
|
|
229
325
|
};
|
|
230
326
|
|
|
231
327
|
// src/shared/content.tsx
|
|
@@ -239,7 +335,10 @@ var ButtonContent = (props) => {
|
|
|
239
335
|
{
|
|
240
336
|
className: cn2(
|
|
241
337
|
buttonStartIconStyles({ iconSize: startIconSize }),
|
|
242
|
-
|
|
338
|
+
buttonStartRegionStyles({
|
|
339
|
+
divided: dividedStart,
|
|
340
|
+
size
|
|
341
|
+
})
|
|
243
342
|
),
|
|
244
343
|
"data-gridui-part": "icon",
|
|
245
344
|
"data-gridui-draw": "graphic",
|
|
@@ -271,7 +370,10 @@ var ButtonContent = (props) => {
|
|
|
271
370
|
/* @__PURE__ */ jsx(
|
|
272
371
|
"span",
|
|
273
372
|
{
|
|
274
|
-
className: cn2(
|
|
373
|
+
className: cn2(buttonLabelStyles({
|
|
374
|
+
divided: layout === "divided",
|
|
375
|
+
size
|
|
376
|
+
})),
|
|
275
377
|
"data-gridui-part": "content",
|
|
276
378
|
"data-gridui-draw": "group",
|
|
277
379
|
children: label
|
|
@@ -282,7 +384,10 @@ var ButtonContent = (props) => {
|
|
|
282
384
|
{
|
|
283
385
|
className: cn2(
|
|
284
386
|
"gridui-button-adornment gridui-u-button--inline-flex gridui-u-button--shrink-0 gridui-u-button--items-center gridui-u-button--pointer-events-none",
|
|
285
|
-
|
|
387
|
+
buttonEndRegionStyles({
|
|
388
|
+
divided: layout === "divided",
|
|
389
|
+
size
|
|
390
|
+
})
|
|
286
391
|
),
|
|
287
392
|
"data-gridui-part": "icon",
|
|
288
393
|
"data-gridui-draw": "graphic",
|
|
@@ -291,7 +396,10 @@ var ButtonContent = (props) => {
|
|
|
291
396
|
children: layout === "divided" || iconMotion === "outward" ? /* @__PURE__ */ jsx(
|
|
292
397
|
"span",
|
|
293
398
|
{
|
|
294
|
-
className: cn2(
|
|
399
|
+
className: cn2(buttonEndIconStyles({
|
|
400
|
+
divided: layout === "divided",
|
|
401
|
+
iconMotion
|
|
402
|
+
})),
|
|
295
403
|
children: endIcon
|
|
296
404
|
}
|
|
297
405
|
) : 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/shared/group-context.ts", "../src/button/button.tsx", "../src/button-group/button-group.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-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--data-gridui-busy:cursor-wait\",\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 data-gridui-part=\"icon\"\n data-gridui-draw=\"graphic\"\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 <span\n className=\"gridui-button-label-content\"\n data-gridui-part=\"label\"\n data-gridui-draw={layout === \"icon\" ? \"graphic\" : \"text\"}\n >\n {children}\n </span>\n </>);\n\n return (<>\n {dividedStart && startAdornment}\n <span\n className={cn(\"gridui-button-content\", layout === \"divided\" ? buttonLabelStyles({ size }) : \"gridui-button-body\")}\n data-gridui-part=\"content\"\n data-gridui-draw=\"group\"\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 data-gridui-part=\"icon\"\n data-gridui-draw=\"graphic\"\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 Shared\n * @description Group Context\n */\n\nimport { createContext } from \"react\";\n\nexport type ButtonGroupLayout = \"standard\" | \"cells\";\nexport const ButtonGroupContext = createContext<ButtonGroupLayout | undefined>(undefined);\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Button\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { ButtonGroupContext } from \"../shared/group-context\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport { type ComponentPropsWithRef, type FC, useContext, useImperativeHandle, useLayoutEffect, useRef } 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 ref: forwardedRef,\n onClick,\n onClickCapture,\n type = \"button\",\n className,\n children,\n startIcon,\n startIconLayout = \"inline\",\n startIconSize = \"standard\",\n endIcon,\n ...restProps\n } = props;\n const button = useRef<HTMLButtonElement>(null);\n useImperativeHandle(forwardedRef, () => {\n return button.current!;\n }, []);\n const unavailable = disabled || restProps[\"aria-disabled\"] === true || restProps[\"aria-disabled\"] === \"true\";\n const busy = loading && !unavailable;\n useLayoutEffect(() => {\n const element = button.current;\n const form = element?.form;\n if (!loading || type !== \"submit\" || !form) {\n return;\n }\n const preventBusySubmit = (event: SubmitEvent) => {\n if (event.submitter === element) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n };\n form.addEventListener(\"submit\", preventBusySubmit, true);\n return () => {\n form.removeEventListener(\"submit\", preventBusySubmit, true);\n };\n });\n const groupLayout = useContext(ButtonGroupContext);\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 let drawing = \"surface\";\n if (variant === \"underlined\") {\n drawing = \"atomic\";\n } else if (variant === \"text\" || variant === \"quiet\") {\n drawing = \"group\";\n }\n return (<button\n {...restProps}\n data-gridui-component=\"button\"\n data-gridui-draw={drawing}\n data-gridui-button-group-item={groupLayout}\n type={type}\n ref={button}\n disabled={disabled}\n aria-disabled={loading || restProps[\"aria-disabled\"]}\n data-gridui-busy={busy || undefined}\n onClickCapture={(event) => {\n if (loading || unavailable) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n onClickCapture?.(event);\n }}\n onClick={(event) => {\n if (loading || unavailable) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n onClick?.(event);\n }}\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 ButtonGroup\n * @description Button Group\n */\n\nimport { ButtonGroupContext, type ButtonGroupLayout } from \"../shared/group-context\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ButtonGroupProps = ComponentPropsWithRef<\"div\"> & {\n readonly layout?: ButtonGroupLayout;\n};\n\nexport const ButtonGroup: FC<ButtonGroupProps> = (props: ButtonGroupProps) => {\n const { layout = \"standard\", className, children, role = \"group\", ...restProps } = props;\n return (<ButtonGroupContext\n value={layout}\n >\n <div\n {...restProps}\n role={role}\n data-layout={layout}\n className={cn(\"gridui-button-group\", className)}\n >\n <div\n className=\"gridui-button-group-items\"\n data-layout={layout}\n >\n {children}\n </div>\n </div>\n </ButtonGroupContext>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace ButtonLink\n * @description Button Link\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { ButtonGroupContext } from \"../shared/group-context\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport { type ComponentPropsWithRef, type FC, useContext } 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 groupLayout = useContext(ButtonGroupContext);\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 let drawing = \"surface\";\n if (variant === \"underlined\") {\n drawing = \"atomic\";\n } else if (variant === \"text\" || variant === \"quiet\") {\n drawing = \"group\";\n }\n return (<a\n {...restProps}\n data-gridui-component=\"button-link\"\n data-gridui-draw={drawing}\n data-gridui-button-group-item={groupLayout}\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": ";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;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;AACJ,CAAC;AAEM,IAAM,oBAAoB,IAAI;AAAA,EACjC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,wBAAwB,IAAI;AAAA,EACrC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,mBAAmB,IAAI;AAAA,EAChC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,yBAAyB,IAAI;AAAA,EACtC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,oBAAoB,IAAI;AAAA,EACjC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,mBAAmB,IAAI;AAAA,EAChC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,mBAAmB,IAAI;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,mBAAmB,IAAI;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,sBAAsB,IAAI;AAAA,EACnC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,oBAAoB,IAAI;AAAA,
|
|
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--data-gridui-busy:cursor-wait\",\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(\"gridui-button-content\", {\n variants: {\n divided: {\n true: \"gridui-button-label 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 false: \"gridui-button-body\",\n },\n size: {\n small: \"\",\n standard: \"\",\n large: \"\",\n \"extra-large\": \"\",\n },\n },\n compoundVariants: [\n {\n divided: true,\n size: \"small\",\n className: \"gridui-u-button--py-gridui-4 gridui-u-button--px-gridui-8\",\n },\n {\n divided: true,\n size: \"standard\",\n className: \"gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-16\",\n },\n {\n divided: true,\n size: \"large\",\n className: \"gridui-u-button--py-gridui-8 gridui-u-button--px-gridui-24\",\n },\n {\n divided: true,\n size: \"extra-large\",\n className: \"gridui-u-button--py-gridui-16 gridui-u-button--px-gridui-24\",\n },\n ],\n defaultVariants: {\n divided: false,\n size: \"standard\",\n },\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(\"\", {\n variants: {\n divided: {\n true: \"gridui-button-start-region gridui-u-button--justify-center gridui-u-button--self-stretch gridui-u-button--py-gridui-8\",\n false: \"gridui-button-content\",\n },\n size: {\n small: \"\",\n standard: \"\",\n large: \"\",\n \"extra-large\": \"\",\n },\n },\n compoundVariants: [\n {\n divided: true,\n size: \"small\",\n className: \"gridui-u-button--w-gridui-control-small\",\n },\n {\n divided: true,\n size: \"standard\",\n className: \"gridui-u-button--w-gridui-control\",\n },\n {\n divided: true,\n size: \"large\",\n className: \"gridui-u-button--w-gridui-control-large\",\n },\n {\n divided: true,\n size: \"extra-large\",\n className: \"gridui-u-button--w-gridui-64\",\n },\n ],\n defaultVariants: {\n divided: false,\n size: \"standard\",\n },\n});\n\nexport const buttonEndRegionStyles = cva(\"\", {\n variants: {\n divided: {\n true: \"gridui-button-end-region gridui-u-button--justify-center gridui-u-button--self-stretch\",\n false: \"gridui-button-content\",\n },\n size: {\n small: \"\",\n standard: \"\",\n large: \"\",\n \"extra-large\": \"\",\n },\n },\n compoundVariants: [\n {\n divided: true,\n size: \"small\",\n className: \"gridui-u-button--w-gridui-control-small\",\n },\n {\n divided: true,\n size: \"standard\",\n className: \"gridui-u-button--w-gridui-control\",\n },\n {\n divided: true,\n size: \"large\",\n className: \"gridui-u-button--w-gridui-control-large\",\n },\n {\n divided: true,\n size: \"extra-large\",\n className: \"gridui-u-button--w-gridui-64\",\n },\n ],\n defaultVariants: {\n divided: false,\n size: \"standard\",\n },\n});\n\nexport const buttonEndIconStyles = cva(\"gridui-u-button--inline-flex\", {\n variants: {\n divided: {\n true: \"gridui-button-content\",\n false: \"\",\n },\n iconMotion: {\n none: \"\",\n outward: \"gridui-button-end-icon\",\n },\n },\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 className: \"gridui-u-button--px-0\",\n },\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 return cn(buttonVariants({\n variant: variants.variant,\n size: variants.size,\n layout: variants.layout,\n iconMotion: variants.iconMotion,\n }), className);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Content\n */\n\nimport { buttonEndIconStyles, 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 buttonStartRegionStyles({\n divided: dividedStart,\n size,\n }),\n )}\n data-gridui-part=\"icon\"\n data-gridui-draw=\"graphic\"\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 <span\n className=\"gridui-button-label-content\"\n data-gridui-part=\"label\"\n data-gridui-draw={layout === \"icon\" ? \"graphic\" : \"text\"}\n >\n {children}\n </span>\n </>);\n\n return (<>\n {dividedStart && startAdornment}\n <span\n className={cn(buttonLabelStyles({\n divided: layout === \"divided\",\n size,\n }))}\n data-gridui-part=\"content\"\n data-gridui-draw=\"group\"\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 buttonEndRegionStyles({\n divided: layout === \"divided\",\n size,\n }),\n )}\n data-gridui-part=\"icon\"\n data-gridui-draw=\"graphic\"\n aria-hidden=\"true\"\n inert\n >\n {layout === \"divided\" || iconMotion === \"outward\" ? (<span\n className={cn(buttonEndIconStyles({\n divided: layout === \"divided\",\n iconMotion,\n }))}\n >\n {endIcon}\n </span>) : endIcon}\n </span>)}\n </>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Shared\n * @description Group Context\n */\n\nimport { createContext } from \"react\";\n\nexport type ButtonGroupLayout = \"standard\" | \"cells\";\nexport const ButtonGroupContext = createContext<ButtonGroupLayout | undefined>(undefined);\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace Button\n * @description Button\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { ButtonGroupContext } from \"../shared/group-context\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport { type ComponentPropsWithRef, type FC, useContext, useImperativeHandle, useLayoutEffect, useRef } 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 ref: forwardedRef,\n onClick,\n onClickCapture,\n type = \"button\",\n className,\n children,\n startIcon,\n startIconLayout = \"inline\",\n startIconSize = \"standard\",\n endIcon,\n ...restProps\n } = props;\n const button = useRef<HTMLButtonElement>(null);\n useImperativeHandle(forwardedRef, () => {\n return button.current!;\n }, []);\n const unavailable = disabled || restProps[\"aria-disabled\"] === true || restProps[\"aria-disabled\"] === \"true\";\n const busy = loading && !unavailable;\n useLayoutEffect(() => {\n const element = button.current;\n const form = element?.form;\n if (!loading || type !== \"submit\" || !form) {\n return;\n }\n const preventBusySubmit = (event: SubmitEvent) => {\n if (event.submitter === element) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n };\n form.addEventListener(\"submit\", preventBusySubmit, true);\n return () => {\n form.removeEventListener(\"submit\", preventBusySubmit, true);\n };\n });\n const groupLayout = useContext(ButtonGroupContext);\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 let drawing = \"surface\";\n if (variant === \"underlined\") {\n drawing = \"atomic\";\n } else if (variant === \"text\" || variant === \"quiet\") {\n drawing = \"group\";\n }\n return (<button\n {...restProps}\n data-gridui-component=\"button\"\n data-gridui-draw={drawing}\n data-gridui-button-group-item={groupLayout}\n type={type}\n ref={button}\n disabled={disabled}\n aria-disabled={loading || restProps[\"aria-disabled\"]}\n data-gridui-busy={busy || undefined}\n onClickCapture={(event) => {\n if (loading || unavailable) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n onClickCapture?.(event);\n }}\n onClick={(event) => {\n if (loading || unavailable) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n onClick?.(event);\n }}\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 ButtonGroup\n * @description Button Group\n */\n\nimport { ButtonGroupContext, type ButtonGroupLayout } from \"../shared/group-context\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type ButtonGroupProps = ComponentPropsWithRef<\"div\"> & {\n readonly layout?: ButtonGroupLayout;\n};\n\nexport const ButtonGroup: FC<ButtonGroupProps> = (props: ButtonGroupProps) => {\n const { layout = \"standard\", className, children, role = \"group\", ...restProps } = props;\n return (<ButtonGroupContext\n value={layout}\n >\n <div\n {...restProps}\n role={role}\n data-layout={layout}\n className={cn(\"gridui-button-group\", className)}\n >\n <div\n className=\"gridui-button-group-items\"\n data-layout={layout}\n >\n {children}\n </div>\n </div>\n </ButtonGroupContext>);\n};\n", "/**\n * @author WMXPY\n * @package Button\n * @namespace ButtonLink\n * @description Button Link\n */\n\nimport { ButtonContent } from \"../shared/content\";\nimport { ButtonGroupContext } from \"../shared/group-context\";\nimport { buttonClass, type ButtonVariants } from \"../shared/style\";\nimport type { ButtonAdornmentProps } from \"../shared/types\";\nimport { type ComponentPropsWithRef, type FC, useContext } 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 groupLayout = useContext(ButtonGroupContext);\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 let drawing = \"surface\";\n if (variant === \"underlined\") {\n drawing = \"atomic\";\n } else if (variant === \"text\" || variant === \"quiet\") {\n drawing = \"group\";\n }\n return (<a\n {...restProps}\n data-gridui-component=\"button-link\"\n data-gridui-draw={drawing}\n data-gridui-button-group-item={groupLayout}\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": ";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;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;AACJ,CAAC;AAEM,IAAM,oBAAoB,IAAI;AAAA,EACjC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,wBAAwB,IAAI;AAAA,EACrC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,mBAAmB,IAAI;AAAA,EAChC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,yBAAyB,IAAI;AAAA,EACtC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,oBAAoB,IAAI;AAAA,EACjC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,mBAAmB,IAAI;AAAA,EAChC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,mBAAmB,IAAI;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,mBAAmB,IAAI;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,sBAAsB,IAAI;AAAA,EACnC;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,oBAAoB,IAAI,yBAAyB;AAAA,EAC1D,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,eAAe;AAAA,IACnB;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,MAAM;AAAA,EACV;AACJ,CAAC;AAEM,IAAM,wBAAwB,IAAI;AAAA,EACrC;AAAA,EACA;AACJ,GAAG;AAAA,EACC,UAAU;AAAA,IACN,UAAU;AAAA,MACN,UAAU;AAAA,MACV,OAAO;AAAA,MACP,eAAe;AAAA,IACnB;AAAA,EACJ;AAAA,EACA,iBAAiB,EAAE,UAAU,WAAW;AAC5C,CAAC;AAEM,IAAM,0BAA0B,IAAI,IAAI;AAAA,EAC3C,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,eAAe;AAAA,IACnB;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,MAAM;AAAA,EACV;AACJ,CAAC;AAEM,IAAM,wBAAwB,IAAI,IAAI;AAAA,EACzC,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,eAAe;AAAA,IACnB;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACf;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,MAAM;AAAA,EACV;AACJ,CAAC;AAEM,IAAM,sBAAsB,IAAI,gCAAgC;AAAA,EACnE,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACb;AAAA,EACJ;AACJ,CAAC;AAEM,IAAM,iBAAiB,IAAI,aAAa,GAAG;AAAA,EAC9C,UAAU;AAAA,IACN,SAAS;AAAA,MACL,SAAS,oBAAoB;AAAA,MAC7B,WAAW,sBAAsB;AAAA,MACjC,OAAO,kBAAkB;AAAA,MACzB,WAAW,sBAAsB;AAAA,MACjC,MAAM,iBAAiB;AAAA,MACvB,YAAY,uBAAuB;AAAA,IACvC;AAAA,IACA,MAAM;AAAA,MACF,OAAO,kBAAkB;AAAA,MACzB,UAAU,qBAAqB;AAAA,MAC/B,OAAO,kBAAkB;AAAA,MACzB,eAAe,uBAAuB;AAAA,IAC1C;AAAA,IACA,QAAQ;AAAA,MACJ,UAAU;AAAA,MACV,MAAM,iBAAiB;AAAA,MACvB,OAAO,kBAAkB;AAAA,MACzB,MAAM,iBAAiB;AAAA,MACvB,MAAM,iBAAiB;AAAA,MACvB,SAAS,oBAAoB;AAAA,IACjC;AAAA,IACA,YAAY;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACb;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,SAAS;AAAA,QACL;AAAA,QACA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,IACf;AAAA,IACA;AAAA,MACI,SAAS;AAAA,QACL;AAAA,QACA;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,QACF;AAAA,QACA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,IACf;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,MAAM;AAAA,EACV;AACJ,CAAC;AAeM,IAAM,cAAc,CAAC,WAA2B,CAAC,GAAG,cAA+B;AACtF,SAAO,GAAG,eAAe;AAAA,IACrB,SAAS,SAAS;AAAA,IAClB,MAAM,SAAS;AAAA,IACf,QAAQ,SAAS;AAAA,IACjB,YAAY,SAAS;AAAA,EACzB,CAAC,GAAG,SAAS;AACjB;;;AC7TA,SAAS,MAAAA,WAAU;AA0BM,SAMN,UANM,KAMN,YANM;AAhBlB,IAAM,gBAAwC,CAAC,UAA8B;AAChF,QAAM,EAAE,UAAU,WAAW,iBAAiB,eAAe,SAAS,QAAQ,MAAM,WAAW,IAAI;AACnG,QAAM,eAAe,WAAW,aAAa,oBAAoB;AACjE,QAAM,iBAAiB,cAAc,UAAa,cAAc,QAAQ,OAAO,cAAc,YAAa;AAAA,IAAC;AAAA;AAAA,MACvG,WAAWA;AAAA,QACP,sBAAsB,EAAE,UAAU,cAAc,CAAC;AAAA,QACjD,wBAAwB;AAAA,UACpB,SAAS;AAAA,UACT;AAAA,QACJ,CAAC;AAAA,MACL;AAAA,MACA,oBAAiB;AAAA,MACjB,oBAAiB;AAAA,MACjB,eAAY;AAAA,MACZ,OAAK;AAAA,MAEJ,yBAAgB;AAAA,QAAC;AAAA;AAAA,UACd,WAAU;AAAA,UAET;AAAA;AAAA,MACL,IAAW;AAAA;AAAA,EACf,IAAW;AACX,QAAM,QAAS,iCACV;AAAA,KAAC,gBAAgB;AAAA,IAClB;AAAA,MAAC;AAAA;AAAA,QACG,WAAU;AAAA,QACV,oBAAiB;AAAA,QACjB,oBAAkB,WAAW,SAAS,YAAY;AAAA,QAEjD;AAAA;AAAA,IACL;AAAA,KACJ;AAEA,SAAQ,iCACH;AAAA,oBAAgB;AAAA,IACjB;AAAA,MAAC;AAAA;AAAA,QACG,WAAWA,IAAG,kBAAkB;AAAA,UAC5B,SAAS,WAAW;AAAA,UACpB;AAAA,QACJ,CAAC,CAAC;AAAA,QACF,oBAAiB;AAAA,QACjB,oBAAiB;AAAA,QAEhB;AAAA;AAAA,IACL;AAAA,IACC,YAAY,UAAa,YAAY,QAAQ,OAAO,YAAY,aAAc;AAAA,MAAC;AAAA;AAAA,QAC5E,WAAWA;AAAA,UACP;AAAA,UACA,sBAAsB;AAAA,YAClB,SAAS,WAAW;AAAA,YACpB;AAAA,UACJ,CAAC;AAAA,QACL;AAAA,QACA,oBAAiB;AAAA,QACjB,oBAAiB;AAAA,QACjB,eAAY;AAAA,QACZ,OAAK;AAAA,QAEJ,qBAAW,aAAa,eAAe,YAAa;AAAA,UAAC;AAAA;AAAA,YAClD,WAAWA,IAAG,oBAAoB;AAAA,cAC9B,SAAS,WAAW;AAAA,cACpB;AAAA,YACJ,CAAC,CAAC;AAAA,YAED;AAAA;AAAA,QACL,IAAW;AAAA;AAAA,IACf;AAAA,KACJ;AACJ;;;AChFA,SAAS,qBAAqB;AAGvB,IAAM,qBAAqB,cAA6C,MAAS;;;ACCxF,SAA8C,YAAY,qBAAqB,iBAAiB,UAAAC,eAAc;AAgGtG,gBAAAC,YAAA;AA1FD,IAAM,SAA0B,CAAC,UAAuB;AAC3D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,SAASD,QAA0B,IAAI;AAC7C,sBAAoB,cAAc,MAAM;AACpC,WAAO,OAAO;AAAA,EAClB,GAAG,CAAC,CAAC;AACL,QAAM,cAAc,YAAY,UAAU,eAAe,MAAM,QAAQ,UAAU,eAAe,MAAM;AACtG,QAAM,OAAO,WAAW,CAAC;AACzB,kBAAgB,MAAM;AAClB,UAAM,UAAU,OAAO;AACvB,UAAM,OAAO,SAAS;AACtB,QAAI,CAAC,WAAW,SAAS,YAAY,CAAC,MAAM;AACxC;AAAA,IACJ;AACA,UAAM,oBAAoB,CAAC,UAAuB;AAC9C,UAAI,MAAM,cAAc,SAAS;AAC7B,cAAM,eAAe;AACrB,cAAM,yBAAyB;AAAA,MACnC;AAAA,IACJ;AACA,SAAK,iBAAiB,UAAU,mBAAmB,IAAI;AACvD,WAAO,MAAM;AACT,WAAK,oBAAoB,UAAU,mBAAmB,IAAI;AAAA,IAC9D;AAAA,EACJ,CAAC;AACD,QAAM,cAAc,WAAW,kBAAkB;AACjD,QAAM,WAA4B,YAAY,UAAU,YAAY,eAAgB;AAAA,IAChF;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACJ,IAAI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACA,MAAI,UAAU;AACd,MAAI,YAAY,cAAc;AAC1B,cAAU;AAAA,EACd,WAAW,YAAY,UAAU,YAAY,SAAS;AAClD,cAAU;AAAA,EACd;AACA,SAAQ,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,yBAAsB;AAAA,MACtB,oBAAkB;AAAA,MAClB,iCAA+B;AAAA,MAC/B;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,iBAAe,WAAW,UAAU,eAAe;AAAA,MACnD,oBAAkB,QAAQ;AAAA,MAC1B,gBAAgB,CAAC,UAAU;AACvB,YAAI,WAAW,aAAa;AACxB,gBAAM,eAAe;AACrB,gBAAM,gBAAgB;AACtB;AAAA,QACJ;AACA,yBAAiB,KAAK;AAAA,MAC1B;AAAA,MACA,SAAS,CAAC,UAAU;AAChB,YAAI,WAAW,aAAa;AACxB,gBAAM,eAAe;AACrB,gBAAM,gBAAgB;AACtB;AAAA,QACJ;AACA,kBAAU,KAAK;AAAA,MACnB;AAAA,MACA,aAAW,WAAW,UAAU,WAAW;AAAA,MAC3C,WAAW,YAAY,UAAU,SAAS;AAAA,MAE1C,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACG,QAAQ,SAAS;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,MACL;AAAA;AAAA,EACJ;AACJ;;;AC/GA,SAAS,MAAAC,WAAU;AAkBP,gBAAAC,YAAA;AAXL,IAAM,cAAoC,CAAC,UAA4B;AAC1E,QAAM,EAAE,SAAS,YAAY,WAAW,UAAU,OAAO,SAAS,GAAG,UAAU,IAAI;AACnF,SAAQ,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACL,OAAO;AAAA,MAEP,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACI,GAAG;AAAA,UACJ;AAAA,UACA,eAAa;AAAA,UACb,WAAWD,IAAG,uBAAuB,SAAS;AAAA,UAE9C,0BAAAC;AAAA,YAAC;AAAA;AAAA,cACG,WAAU;AAAA,cACV,eAAa;AAAA,cAEZ;AAAA;AAAA,UACL;AAAA;AAAA,MACJ;AAAA;AAAA,EACJ;AACJ;;;ACvBA,SAA8C,cAAAC,mBAAkB;AA6CxD,gBAAAC,YAAA;AAvCD,IAAM,aAAkC,CAAC,UAA2B;AACvE,QAAM;AAAA,IACF,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,cAAcD,YAAW,kBAAkB;AACjD,QAAM,WAA4B,YAAY,UAAU,YAAY,eAAgB;AAAA,IAChF;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACJ,IAAI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACA,MAAI,UAAU;AACd,MAAI,YAAY,cAAc;AAC1B,cAAU;AAAA,EACd,WAAW,YAAY,UAAU,YAAY,SAAS;AAClD,cAAU;AAAA,EACd;AACA,SAAQ,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,yBAAsB;AAAA,MACtB,oBAAkB;AAAA,MAClB,iCAA+B;AAAA,MAC/B,WAAW,YAAY,UAAU,SAAS;AAAA,MAE1C,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACG,QAAQ,SAAS;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,MACL;AAAA;AAAA,EACJ;AACJ;",
|
|
6
6
|
"names": ["cn", "useRef", "jsx", "cn", "jsx", "useContext", "jsx"]
|
|
7
7
|
}
|
package/dist/shared/style.d.ts
CHANGED
|
@@ -22,21 +22,28 @@ export declare const buttonRailStyles: (props?: import("class-variance-authority
|
|
|
22
22
|
export declare const buttonIconStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
23
23
|
export declare const buttonDividedStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
24
24
|
export declare const buttonLabelStyles: (props?: ({
|
|
25
|
+
divided?: boolean | null | undefined;
|
|
25
26
|
size?: "small" | "standard" | "large" | "extra-large" | null | undefined;
|
|
26
27
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
27
28
|
export declare const buttonStartIconStyles: (props?: ({
|
|
28
29
|
iconSize?: "standard" | "large" | "extra-large" | null | undefined;
|
|
29
30
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
30
31
|
export declare const buttonStartRegionStyles: (props?: ({
|
|
32
|
+
divided?: boolean | null | undefined;
|
|
31
33
|
size?: "small" | "standard" | "large" | "extra-large" | null | undefined;
|
|
32
34
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
33
35
|
export declare const buttonEndRegionStyles: (props?: ({
|
|
36
|
+
divided?: boolean | null | undefined;
|
|
34
37
|
size?: "small" | "standard" | "large" | "extra-large" | null | undefined;
|
|
35
38
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
39
|
+
export declare const buttonEndIconStyles: (props?: ({
|
|
40
|
+
divided?: boolean | null | undefined;
|
|
41
|
+
iconMotion?: "none" | "outward" | null | undefined;
|
|
42
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
36
43
|
export declare const buttonVariants: (props?: ({
|
|
37
44
|
variant?: "primary" | "secondary" | "quiet" | "highlight" | "text" | "underlined" | null | undefined;
|
|
38
45
|
size?: "small" | "standard" | "large" | "extra-large" | null | undefined;
|
|
39
|
-
layout?: "standard" | "icon" | "entry" | "cell" | "rail" |
|
|
46
|
+
layout?: "divided" | "standard" | "icon" | "entry" | "cell" | "rail" | null | undefined;
|
|
40
47
|
iconMotion?: "none" | "outward" | null | undefined;
|
|
41
48
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
42
49
|
type ButtonStyleVariants = VariantProps<typeof buttonVariants>;
|
package/docs/catalog.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
3
|
"name": "@gridui/button",
|
|
4
|
-
"version": "5.0.
|
|
4
|
+
"version": "5.0.1",
|
|
5
5
|
"category": "core",
|
|
6
6
|
"description": "GridUI React buttons and action helpers",
|
|
7
7
|
"usage": "`@gridui/button` owns native buttons, button-styled links, shared button classes, ButtonGroup layouts, and async action scheduling. It has no domain, route, locale, or Layout dependency. Load `@gridui/button/styles.css` after the theme styles.",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridui/button",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.1",
|
|
4
4
|
"description": "GridUI React buttons and action helpers",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
@@ -24,19 +24,19 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@gridui/style-utils": "^4.0.0",
|
|
27
|
-
"@gridui/theme": "^2.
|
|
27
|
+
"@gridui/theme": "^2.6.0",
|
|
28
28
|
"class-variance-authority": "0.7.1"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@gridui-internal/configuration": "0.0.0-internal",
|
|
32
32
|
"@jest/globals": "30.5.2",
|
|
33
|
-
"@storybook/react-vite": "10.6.
|
|
33
|
+
"@storybook/react-vite": "10.6.7",
|
|
34
34
|
"@types/jest": "30.0.0",
|
|
35
35
|
"@types/node": "26.6.6",
|
|
36
36
|
"@types/react": "19.3.0",
|
|
37
37
|
"@types/react-dom": "19.3.0",
|
|
38
38
|
"jest": "30.5.2",
|
|
39
|
-
"lucide-react": "1.
|
|
39
|
+
"lucide-react": "1.72.0",
|
|
40
40
|
"react": "19.3.1",
|
|
41
41
|
"react-dom": "19.3.1",
|
|
42
42
|
"typescript": "6.0.3"
|
|
@@ -48,7 +48,6 @@
|
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "node ../../scripts/compilation/package.ts",
|
|
50
50
|
"compile": "tsc --project tsconfig.json",
|
|
51
|
-
"test": "jest"
|
|
52
|
-
"coverage": "jest --coverage"
|
|
51
|
+
"test": "jest"
|
|
53
52
|
}
|
|
54
53
|
}
|