@keboola/design 9.1.0 → 10.1.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/AGENTS.md +117 -40
- package/COMPONENT-API.md +31 -9
- package/README.md +3 -3
- package/dist/MermaidDiagram-EOKJHQQV.js +10 -0
- package/dist/MermaidDiagram-EOKJHQQV.js.map +1 -0
- package/dist/charts.d.ts +31 -2
- package/dist/charts.js +6 -9
- package/dist/charts.js.map +1 -1
- package/dist/chunk-63NSN2VL.js +274 -0
- package/dist/chunk-63NSN2VL.js.map +1 -0
- package/dist/{rjsf.cjs → chunk-6FPEI4EM.js} +1491 -5701
- package/dist/chunk-6FPEI4EM.js.map +1 -0
- package/dist/chunk-7PUUHEJQ.js +1313 -0
- package/dist/chunk-7PUUHEJQ.js.map +1 -0
- package/dist/chunk-BOHNXTMM.js +606 -0
- package/dist/chunk-BOHNXTMM.js.map +1 -0
- package/dist/{testing.cjs → chunk-C3L3TBBT.js} +33 -164
- package/dist/chunk-C3L3TBBT.js.map +1 -0
- package/dist/chunk-CTCFYWJC.js +407 -0
- package/dist/chunk-CTCFYWJC.js.map +1 -0
- package/dist/chunk-ESBL3IPF.js +23 -0
- package/dist/chunk-ESBL3IPF.js.map +1 -0
- package/dist/chunk-IJTHFNNJ.js +261 -0
- package/dist/chunk-IJTHFNNJ.js.map +1 -0
- package/dist/chunk-JP7PNHLH.js +40 -0
- package/dist/chunk-JP7PNHLH.js.map +1 -0
- package/dist/chunk-KPNAW5MU.js +229 -0
- package/dist/chunk-KPNAW5MU.js.map +1 -0
- package/dist/chunk-L37JJ6MR.js +152 -0
- package/dist/chunk-L37JJ6MR.js.map +1 -0
- package/dist/chunk-Q7NWXLCT.js +90 -0
- package/dist/chunk-Q7NWXLCT.js.map +1 -0
- package/dist/chunk-SYIEF644.js +1016 -0
- package/dist/chunk-SYIEF644.js.map +1 -0
- package/dist/chunk-VMFSRV5H.js +16 -0
- package/dist/chunk-VMFSRV5H.js.map +1 -0
- package/dist/chunk-VPPM7UUQ.js +47 -0
- package/dist/chunk-VPPM7UUQ.js.map +1 -0
- package/dist/chunk-XV3UUOYF.js +845 -0
- package/dist/chunk-XV3UUOYF.js.map +1 -0
- package/dist/editors.d.ts +27 -3
- package/dist/editors.js +85 -2081
- package/dist/editors.js.map +1 -1
- package/dist/icons.d.ts +29 -8
- package/dist/icons.js +2 -361
- package/dist/icons.js.map +1 -1
- package/dist/index.d.ts +709 -425
- package/dist/index.js +5042 -13885
- package/dist/index.js.map +1 -1
- package/dist/markdown-editor.js +41 -3426
- package/dist/markdown-editor.js.map +1 -1
- package/dist/mermaid.js +8 -1129
- package/dist/mermaid.js.map +1 -1
- package/dist/rjsf.js +180 -9381
- package/dist/rjsf.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/testing.js +5 -357
- package/dist/testing.js.map +1 -1
- package/package.json +28 -73
- package/src/styles.css +60 -3
- package/src/theme.css +1 -0
- package/dist/charts.cjs +0 -268
- package/dist/charts.cjs.map +0 -1
- package/dist/charts.d.cts +0 -181
- package/dist/constants-D3gaMY-W.d.cts +0 -39
- package/dist/editors.cjs +0 -2440
- package/dist/editors.cjs.map +0 -1
- package/dist/editors.d.cts +0 -165
- package/dist/icons.cjs +0 -23888
- package/dist/icons.cjs.map +0 -1
- package/dist/icons.d.cts +0 -20
- package/dist/index.cjs +0 -24894
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.cts +0 -10438
- package/dist/markdown-editor.cjs +0 -4636
- package/dist/markdown-editor.cjs.map +0 -1
- package/dist/markdown-editor.d.cts +0 -75
- package/dist/mermaid.cjs +0 -1138
- package/dist/mermaid.cjs.map +0 -1
- package/dist/mermaid.d.cts +0 -15
- package/dist/rjsf.cjs.map +0 -1
- package/dist/rjsf.d.cts +0 -55
- package/dist/testing.cjs.map +0 -1
- package/dist/testing.d.cts +0 -25
|
@@ -0,0 +1,407 @@
|
|
|
1
|
+
import { Loader2 } from './chunk-BOHNXTMM.js';
|
|
2
|
+
import { useArgoDesign } from './chunk-63NSN2VL.js';
|
|
3
|
+
import { cn } from './chunk-JP7PNHLH.js';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { Root, Slottable } from '@radix-ui/react-slot';
|
|
6
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
var variants = cva(
|
|
9
|
+
[
|
|
10
|
+
"tailwindcss-preflight",
|
|
11
|
+
"tw:group/button",
|
|
12
|
+
"tw:border-box",
|
|
13
|
+
// layout
|
|
14
|
+
"tw:relative",
|
|
15
|
+
"tw:flex",
|
|
16
|
+
"tw:items-center",
|
|
17
|
+
"tw:justify-center",
|
|
18
|
+
"tw:gap-2",
|
|
19
|
+
// text — chrome weight/tracking are brand-overridable tokens
|
|
20
|
+
// (`--font-weight-medium` / `--letter-spacing-chrome`). Casing: standard case is
|
|
21
|
+
// the default; only legacy brands (`keboola-legacy-*`) uppercase the chrome, so
|
|
22
|
+
// modern brands (incl. Keboola V2) read naturally. Mirrors the V2 standard-case
|
|
23
|
+
// treatment shipped for Tooltip/Badge (PR 7629).
|
|
24
|
+
"tw:text-xs",
|
|
25
|
+
"tw:leading-5",
|
|
26
|
+
"tw:font-medium",
|
|
27
|
+
"tw:[[data-brand^=keboola-legacy]_&]:tracking-chrome",
|
|
28
|
+
"tw:[[data-brand^=keboola-legacy]_&]:uppercase",
|
|
29
|
+
// border — legacy (non-argo) chrome uses a fixed radius, not the brand token.
|
|
30
|
+
"tw:rounded",
|
|
31
|
+
"tw:border",
|
|
32
|
+
"tw:border-transparent",
|
|
33
|
+
// styling
|
|
34
|
+
"tw:shadow-none",
|
|
35
|
+
"tw:[a]:cursor-pointer",
|
|
36
|
+
// explicitly set for anchor
|
|
37
|
+
"tw:focus-visible:outline",
|
|
38
|
+
"tw:focus-visible:outline-1",
|
|
39
|
+
"tw:focus-visible:-outline-offset-1",
|
|
40
|
+
"tw:focus-visible:outline-ring",
|
|
41
|
+
"tw:focus-visible:ring-4",
|
|
42
|
+
"tw:focus-visible:ring-ring/30",
|
|
43
|
+
// disabled
|
|
44
|
+
"tw:disabled:opacity-40",
|
|
45
|
+
"tw:disabled:cursor-not-allowed",
|
|
46
|
+
// anchor support
|
|
47
|
+
"tw:!no-underline",
|
|
48
|
+
"tw:aria-disabled:opacity-40",
|
|
49
|
+
"tw:aria-disabled:cursor-not-allowed",
|
|
50
|
+
"tw:[&_svg]:shrink-0"
|
|
51
|
+
],
|
|
52
|
+
{
|
|
53
|
+
defaultVariants: {
|
|
54
|
+
size: "medium",
|
|
55
|
+
variant: "primary",
|
|
56
|
+
block: false
|
|
57
|
+
},
|
|
58
|
+
variants: {
|
|
59
|
+
block: {
|
|
60
|
+
true: ["tw:w-full"]
|
|
61
|
+
},
|
|
62
|
+
variant: {
|
|
63
|
+
primary: [
|
|
64
|
+
"tw:text-white",
|
|
65
|
+
"tw:bg-primary-500",
|
|
66
|
+
"tw:focus:text-white",
|
|
67
|
+
"tw:hover:text-white",
|
|
68
|
+
"tw:hover:not-disabled:bg-primary-600",
|
|
69
|
+
"tw:active:not-disabled:bg-primary-800",
|
|
70
|
+
// anchor disabled override
|
|
71
|
+
"tw:aria-disabled:!bg-primary-500"
|
|
72
|
+
],
|
|
73
|
+
secondary: [
|
|
74
|
+
"tw:text-white",
|
|
75
|
+
"tw:bg-secondary-500",
|
|
76
|
+
"tw:focus:text-white",
|
|
77
|
+
"tw:hover:text-white",
|
|
78
|
+
"tw:hover:not-disabled:bg-secondary-700",
|
|
79
|
+
"tw:active:not-disabled:bg-secondary-800",
|
|
80
|
+
// anchor disabled override
|
|
81
|
+
"tw:aria-disabled:!bg-secondary-500"
|
|
82
|
+
],
|
|
83
|
+
danger: [
|
|
84
|
+
"tw:text-white",
|
|
85
|
+
"tw:bg-error-500",
|
|
86
|
+
"tw:focus:text-white",
|
|
87
|
+
"tw:hover:text-white",
|
|
88
|
+
"tw:hover:not-disabled:bg-error-600",
|
|
89
|
+
"tw:active:not-disabled:bg-error-700",
|
|
90
|
+
// anchor disabled override
|
|
91
|
+
"tw:aria-disabled:!bg-error-500"
|
|
92
|
+
],
|
|
93
|
+
// The label and the hover/active fills read tokens rather than the fixed
|
|
94
|
+
// neutral scale, so the variant follows the active brand and colour scheme
|
|
95
|
+
// (argo's `invisible` already did). A transparent button inherits whatever
|
|
96
|
+
// surface it is dropped on, so it is the one legacy variant that cannot
|
|
97
|
+
// assume a light page — pinning it forced every dark-scheme call site to
|
|
98
|
+
// re-declare the colour by hand.
|
|
99
|
+
invisible: [
|
|
100
|
+
"tw:text-foreground",
|
|
101
|
+
"tw:bg-transparent",
|
|
102
|
+
"tw:focus:text-foreground",
|
|
103
|
+
"tw:hover:not-disabled:bg-muted",
|
|
104
|
+
"tw:hover:text-foreground",
|
|
105
|
+
"tw:active:not-disabled:bg-secondary",
|
|
106
|
+
// contrasting icon on hover/active
|
|
107
|
+
"tw:[&_svg]:text-neutral-400",
|
|
108
|
+
"tw:hover:not-disabled:[&_svg]:text-secondary-600",
|
|
109
|
+
"tw:active:not-disabled:[&_svg]:text-secondary-600",
|
|
110
|
+
// anchor disabled override
|
|
111
|
+
"tw:aria-disabled:!bg-transparent"
|
|
112
|
+
],
|
|
113
|
+
outline: [
|
|
114
|
+
"tw:text-neutral-800",
|
|
115
|
+
"tw:bg-white",
|
|
116
|
+
// border
|
|
117
|
+
"tw:!border-neutral-200",
|
|
118
|
+
"tw:hover:text-neutral-800",
|
|
119
|
+
"tw:focus:text-neutral-800",
|
|
120
|
+
"tw:hover:not-disabled:!border-neutral-300",
|
|
121
|
+
"tw:hover:not-disabled:bg-neutral-100",
|
|
122
|
+
"tw:active:not-disabled:bg-neutral-200",
|
|
123
|
+
// contrasting icon hover, same as invisible
|
|
124
|
+
"tw:[&_svg]:text-neutral-400",
|
|
125
|
+
"tw:not-disabled:hover:[&_svg]:text-secondary-600",
|
|
126
|
+
"tw:active:not-disabled:[&_svg]:text-secondary-600",
|
|
127
|
+
// anchor disabled override
|
|
128
|
+
"tw:aria-disabled:!bg-white",
|
|
129
|
+
"tw:aria-disabled:!border-neutral-200"
|
|
130
|
+
],
|
|
131
|
+
inline: [
|
|
132
|
+
"tw:text-neutral-800",
|
|
133
|
+
"tw:bg-transparent",
|
|
134
|
+
"tw:rounded-full",
|
|
135
|
+
"tw:[&_svg]:text-neutral-400",
|
|
136
|
+
"tw:not-disabled:hover:[&_svg]:text-secondary-600",
|
|
137
|
+
"tw:not-disabled:focus:[&_svg]:text-secondary-600"
|
|
138
|
+
]
|
|
139
|
+
},
|
|
140
|
+
size: {
|
|
141
|
+
medium: [
|
|
142
|
+
"tw:max-h-10",
|
|
143
|
+
"tw:min-h-10",
|
|
144
|
+
"tw:px-4",
|
|
145
|
+
"tw:py-2.5",
|
|
146
|
+
'tw:[&_svg:not([class*="tw:size-"])]:size-4'
|
|
147
|
+
],
|
|
148
|
+
small: [
|
|
149
|
+
"tw:max-h-8",
|
|
150
|
+
"tw:min-h-8",
|
|
151
|
+
"tw:px-4",
|
|
152
|
+
"tw:py-1.5",
|
|
153
|
+
'tw:[&_svg:not([class*="tw:size-"])]:size-4'
|
|
154
|
+
],
|
|
155
|
+
large: [
|
|
156
|
+
"tw:max-h-12",
|
|
157
|
+
"tw:min-h-12",
|
|
158
|
+
"tw:px-4",
|
|
159
|
+
"tw:py-3.5",
|
|
160
|
+
'tw:[&_svg:not([class*="tw:size-"])]:size-4'
|
|
161
|
+
],
|
|
162
|
+
"icon-lg": ["tw:size-12", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-6'],
|
|
163
|
+
icon: ["tw:size-10", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-4'],
|
|
164
|
+
"icon-sm": ["tw:size-8", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-4'],
|
|
165
|
+
"icon-xs": ["tw:size-6", "tw:p-0", 'tw:[&_svg:not([class*="tw:size-"])]:size-4'],
|
|
166
|
+
"icon-2xs": [
|
|
167
|
+
"tw:!inline-flex",
|
|
168
|
+
"tw:size-5",
|
|
169
|
+
"tw:max-h-5",
|
|
170
|
+
'tw:[&_svg:not([class*="tw:size-"])]:size-3'
|
|
171
|
+
],
|
|
172
|
+
"icon-3xs": ["tw:h-fit", "tw:w-fit", 'tw:[&_svg:not([class*="tw:size-"])]:size-4']
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
);
|
|
177
|
+
var argoVariants = cva(
|
|
178
|
+
[
|
|
179
|
+
"tailwindcss-preflight",
|
|
180
|
+
// layout
|
|
181
|
+
"tw:relative",
|
|
182
|
+
"tw:inline-flex",
|
|
183
|
+
"tw:items-center",
|
|
184
|
+
"tw:justify-center",
|
|
185
|
+
"tw:whitespace-nowrap",
|
|
186
|
+
"tw:gap-2",
|
|
187
|
+
// border
|
|
188
|
+
"tw:border",
|
|
189
|
+
"tw:border-transparent",
|
|
190
|
+
"tw:rounded-[var(--radius-lg,0.25rem)]",
|
|
191
|
+
// text
|
|
192
|
+
"tw:font-medium",
|
|
193
|
+
"tw:select-none",
|
|
194
|
+
// focus visible
|
|
195
|
+
"tw:!outline-hidden",
|
|
196
|
+
"tw:focus-visible:ring-2",
|
|
197
|
+
// disabled
|
|
198
|
+
"tw:disabled:cursor-not-allowed",
|
|
199
|
+
"tw:disabled:opacity-50",
|
|
200
|
+
"tw:active:opacity-60",
|
|
201
|
+
"tw:transition-all",
|
|
202
|
+
"tw:bg-clip-padding",
|
|
203
|
+
// anchor support
|
|
204
|
+
"tw:!no-underline",
|
|
205
|
+
"tw:aria-disabled:cursor-not-allowed",
|
|
206
|
+
"tw:aria-disabled:opacity-50",
|
|
207
|
+
// icon
|
|
208
|
+
"tw:shrink-0",
|
|
209
|
+
"tw:[&_svg]:pointer-events-none",
|
|
210
|
+
"tw:[&_svg]:shrink-0",
|
|
211
|
+
"tw:[&_svg:not([class*='tw:size-'])]:size-4"
|
|
212
|
+
],
|
|
213
|
+
{
|
|
214
|
+
defaultVariants: {
|
|
215
|
+
variant: "primary",
|
|
216
|
+
size: "medium"
|
|
217
|
+
},
|
|
218
|
+
variants: {
|
|
219
|
+
block: {
|
|
220
|
+
true: ["tw:w-full"]
|
|
221
|
+
},
|
|
222
|
+
variant: {
|
|
223
|
+
primary: [
|
|
224
|
+
"tw:bg-primary",
|
|
225
|
+
"tw:text-primary-foreground",
|
|
226
|
+
"tw:[a]:hover:bg-primary/80",
|
|
227
|
+
"tw:hover:not-disabled:bg-primary/90",
|
|
228
|
+
"tw:hover:text-primary-foreground",
|
|
229
|
+
"tw:focus:text-primary-foreground",
|
|
230
|
+
"tw:focus-visible:border-primary",
|
|
231
|
+
"tw:focus-visible:ring-ring/50"
|
|
232
|
+
],
|
|
233
|
+
secondary: [
|
|
234
|
+
"tw:bg-primary/10",
|
|
235
|
+
"tw:text-primary",
|
|
236
|
+
"tw:hover:not-disabled:bg-primary/20",
|
|
237
|
+
"tw:focus-visible:border-primary",
|
|
238
|
+
"tw:focus-visible:ring-ring/50"
|
|
239
|
+
],
|
|
240
|
+
// should be called "destructive" by Figma
|
|
241
|
+
danger: [
|
|
242
|
+
"tw:bg-destructive",
|
|
243
|
+
"tw:text-destructive-foreground",
|
|
244
|
+
"tw:hover:not-disabled:bg-destructive/90",
|
|
245
|
+
"tw:hover:text-destructive-foreground",
|
|
246
|
+
"tw:focus:text-destructive-foreground",
|
|
247
|
+
"tw:focus-visible:border-destructive",
|
|
248
|
+
"tw:focus-visible:ring-destructive/20"
|
|
249
|
+
],
|
|
250
|
+
outline: [
|
|
251
|
+
"tw:!border-input",
|
|
252
|
+
"tw:bg-background",
|
|
253
|
+
// Semantic base text color so the label/icon flips in dark mode
|
|
254
|
+
// (matches `invisible`); previously unset → inherited a fixed dark color.
|
|
255
|
+
"tw:text-foreground",
|
|
256
|
+
// Hover follows the brand primary (translucent tint), matching the
|
|
257
|
+
// `secondary` variant — not the fixed `accent` blue.
|
|
258
|
+
"tw:hover:not-disabled:bg-primary/10",
|
|
259
|
+
"tw:hover:not-disabled:text-primary",
|
|
260
|
+
"tw:hover:active:bg-background",
|
|
261
|
+
"tw:focus-visible:!border-primary",
|
|
262
|
+
"tw:focus-visible:ring-ring/50"
|
|
263
|
+
],
|
|
264
|
+
// should be called "ghost" by Figma
|
|
265
|
+
invisible: [
|
|
266
|
+
"tw:bg-transparent",
|
|
267
|
+
"tw:text-foreground",
|
|
268
|
+
"tw:hover:not-disabled:bg-primary/10",
|
|
269
|
+
"tw:hover:not-disabled:text-primary",
|
|
270
|
+
"tw:hover:not-disabled:border-primary/10",
|
|
271
|
+
"tw:focus-visible:ring-ring/50"
|
|
272
|
+
],
|
|
273
|
+
// should be called "link" by Figma
|
|
274
|
+
inline: [
|
|
275
|
+
"tw:bg-transparent",
|
|
276
|
+
"tw:text-primary",
|
|
277
|
+
"tw:hover:underline",
|
|
278
|
+
"tw:hover:active:bg-transparent",
|
|
279
|
+
"tw:focus-visible:ring-ring/50"
|
|
280
|
+
]
|
|
281
|
+
},
|
|
282
|
+
size: {
|
|
283
|
+
// should be called "default" by Figma
|
|
284
|
+
medium: ["tw:max-h-9", "tw:py-2", "tw:px-4", "tw:text-sm"],
|
|
285
|
+
// should be called "small" by Figma
|
|
286
|
+
small: ["tw:max-h-8", "tw:py-2", "tw:px-3", "tw:text-xs"],
|
|
287
|
+
// should be called "large" by Figma
|
|
288
|
+
large: ["tw:max-h-10", "tw:py-2.5", "tw:px-6", "tw:text-sm"],
|
|
289
|
+
"icon-lg": ["tw:size-10"],
|
|
290
|
+
icon: ["tw:size-9"],
|
|
291
|
+
"icon-sm": ["tw:size-8"],
|
|
292
|
+
"icon-xs": ["tw:size-6"],
|
|
293
|
+
// unsupported in ARGO, remove when old design is gone
|
|
294
|
+
"icon-2xs": [],
|
|
295
|
+
"icon-3xs": []
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
);
|
|
300
|
+
var Button = ({
|
|
301
|
+
ref,
|
|
302
|
+
children,
|
|
303
|
+
disabled = false,
|
|
304
|
+
className,
|
|
305
|
+
type = "button",
|
|
306
|
+
isLoading = false,
|
|
307
|
+
asChild = false,
|
|
308
|
+
onClick,
|
|
309
|
+
variant = "primary",
|
|
310
|
+
size = "medium",
|
|
311
|
+
block = false,
|
|
312
|
+
...buttonProps
|
|
313
|
+
}) => {
|
|
314
|
+
const renderArgo = useArgoDesign();
|
|
315
|
+
const Comp = asChild ? Root : "button";
|
|
316
|
+
const isIconOnly = String(size).startsWith("icon");
|
|
317
|
+
const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
|
|
318
|
+
const handleClick = (event) => {
|
|
319
|
+
const isAnchor = event.currentTarget.tagName === "A";
|
|
320
|
+
if (isAnchor && disabled) {
|
|
321
|
+
event.preventDefault();
|
|
322
|
+
return;
|
|
323
|
+
}
|
|
324
|
+
onClick?.(event);
|
|
325
|
+
};
|
|
326
|
+
return /* @__PURE__ */ jsxs(
|
|
327
|
+
Comp,
|
|
328
|
+
{
|
|
329
|
+
...buttonProps,
|
|
330
|
+
ref,
|
|
331
|
+
disabled,
|
|
332
|
+
"aria-disabled": disabled,
|
|
333
|
+
"data-variant": variant,
|
|
334
|
+
"data-icon-only": isIconOnly,
|
|
335
|
+
type,
|
|
336
|
+
onClick: handleClick,
|
|
337
|
+
className: cn(classNames),
|
|
338
|
+
children: [
|
|
339
|
+
isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:shrink-0 tw:animate-spin" }),
|
|
340
|
+
/* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })
|
|
341
|
+
]
|
|
342
|
+
}
|
|
343
|
+
);
|
|
344
|
+
};
|
|
345
|
+
var buttonInlineVariants = cva(
|
|
346
|
+
[
|
|
347
|
+
"tailwindcss-preflight",
|
|
348
|
+
"tw:inline-flex",
|
|
349
|
+
"tw:items-center",
|
|
350
|
+
"tw:gap-2",
|
|
351
|
+
"tw:underline-offset-2",
|
|
352
|
+
"tw:disabled:opacity-40",
|
|
353
|
+
"tw:disabled:cursor-not-allowed",
|
|
354
|
+
"tw:disabled:text-neutral-500",
|
|
355
|
+
"tw:disabled:no-underline",
|
|
356
|
+
"tw:disabled:[&_svg]:text-neutral-400",
|
|
357
|
+
// Default size for nested Lucide icons; callers can override on the icon.
|
|
358
|
+
"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4",
|
|
359
|
+
"tw:[&_svg]:shrink-0"
|
|
360
|
+
],
|
|
361
|
+
{
|
|
362
|
+
defaultVariants: {
|
|
363
|
+
variant: "link",
|
|
364
|
+
color: "link"
|
|
365
|
+
},
|
|
366
|
+
variants: {
|
|
367
|
+
color: {
|
|
368
|
+
link: ["tw:text-primary", "tw:hover:text-primary/90", "tw:[&_svg]:text-primary"],
|
|
369
|
+
dark: ["tw:text-neutral-800 tw:[&_svg]:text-neutral-400"],
|
|
370
|
+
danger: ["tw:text-error-500 tw:[&_svg]:text-error-500"],
|
|
371
|
+
muted: ["tw:text-muted-foreground tw:[&_svg]:text-muted-foreground"],
|
|
372
|
+
custom: []
|
|
373
|
+
},
|
|
374
|
+
variant: {
|
|
375
|
+
link: ["tw:underline", "tw:hover:no-underline"],
|
|
376
|
+
"link-reverse": ["tw:no-underline", "", "tw:hover:underline"],
|
|
377
|
+
custom: []
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
);
|
|
382
|
+
var ButtonInline = ({
|
|
383
|
+
ref,
|
|
384
|
+
children,
|
|
385
|
+
className,
|
|
386
|
+
variant,
|
|
387
|
+
color,
|
|
388
|
+
type = "button",
|
|
389
|
+
asChild = false,
|
|
390
|
+
...buttonProps
|
|
391
|
+
}) => {
|
|
392
|
+
const Comp = asChild ? Root : "button";
|
|
393
|
+
return /* @__PURE__ */ jsx(
|
|
394
|
+
Comp,
|
|
395
|
+
{
|
|
396
|
+
...buttonProps,
|
|
397
|
+
ref,
|
|
398
|
+
type: asChild ? void 0 : type,
|
|
399
|
+
className: buttonInlineVariants({ variant, color, className }),
|
|
400
|
+
children
|
|
401
|
+
}
|
|
402
|
+
);
|
|
403
|
+
};
|
|
404
|
+
|
|
405
|
+
export { Button, ButtonInline, argoVariants };
|
|
406
|
+
//# sourceMappingURL=chunk-CTCFYWJC.js.map
|
|
407
|
+
//# sourceMappingURL=chunk-CTCFYWJC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/styles.ts","../src/components/Button/Button.tsx","../src/components/Button/ButtonInline.tsx"],"names":["cva","Root","jsx"],"mappings":";;;;;;;AAEO,IAAM,QAAA,GAAW,GAAA;AAAA,EACtB;AAAA,IACE,uBAAA;AAAA,IACA,iBAAA;AAAA,IACA,eAAA;AAAA;AAAA,IAGA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAA;AAAA,IACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,qDAAA;AAAA,IACA,+CAAA;AAAA;AAAA,IAGA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,uBAAA;AAAA;AAAA,IAGA,gBAAA;AAAA,IACA,uBAAA;AAAA;AAAA,IAEA,0BAAA;AAAA,IACA,4BAAA;AAAA,IACA,oCAAA;AAAA,IACA,+BAAA;AAAA,IACA,yBAAA;AAAA,IACA,+BAAA;AAAA;AAAA,IAGA,wBAAA;AAAA,IACA,gCAAA;AAAA;AAAA,IAGA,kBAAA;AAAA,IACA,6BAAA;AAAA,IACA,qCAAA;AAAA,IAEA;AAAA,GACF;AAAA,EACA;AAAA,IACE,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,QAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,KAAA,EAAO;AAAA,KACT;AAAA,IACA,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,CAAC,WAAW;AAAA,OACpB;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,eAAA;AAAA,UACA,mBAAA;AAAA,UAEA,qBAAA;AAAA,UACA,qBAAA;AAAA,UACA,sCAAA;AAAA,UACA,uCAAA;AAAA;AAAA,UAGA;AAAA,SACF;AAAA,QACA,SAAA,EAAW;AAAA,UACT,eAAA;AAAA,UACA,qBAAA;AAAA,UAEA,qBAAA;AAAA,UACA,qBAAA;AAAA,UACA,wCAAA;AAAA,UACA,yCAAA;AAAA;AAAA,UAGA;AAAA,SACF;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,eAAA;AAAA,UACA,iBAAA;AAAA,UAEA,qBAAA;AAAA,UACA,qBAAA;AAAA,UACA,oCAAA;AAAA,UACA,qCAAA;AAAA;AAAA,UAGA;AAAA,SACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOA,SAAA,EAAW;AAAA,UACT,oBAAA;AAAA,UACA,mBAAA;AAAA,UAEA,0BAAA;AAAA,UACA,gCAAA;AAAA,UACA,0BAAA;AAAA,UACA,qCAAA;AAAA;AAAA,UAGA,6BAAA;AAAA,UACA,kDAAA;AAAA,UACA,mDAAA;AAAA;AAAA,UAGA;AAAA,SACF;AAAA,QACA,OAAA,EAAS;AAAA,UACP,qBAAA;AAAA,UACA,aAAA;AAAA;AAAA,UAEA,wBAAA;AAAA,UACA,2BAAA;AAAA,UACA,2BAAA;AAAA,UACA,2CAAA;AAAA,UACA,sCAAA;AAAA,UACA,uCAAA;AAAA;AAAA,UAGA,6BAAA;AAAA,UACA,kDAAA;AAAA,UACA,mDAAA;AAAA;AAAA,UAGA,4BAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,MAAA,EAAQ;AAAA,UACN,qBAAA;AAAA,UACA,mBAAA;AAAA,UACA,iBAAA;AAAA,UAEA,6BAAA;AAAA,UACA,kDAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,MAAA,EAAQ;AAAA,UACN,aAAA;AAAA,UACA,aAAA;AAAA,UACA,SAAA;AAAA,UACA,WAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,YAAA;AAAA,UACA,YAAA;AAAA,UACA,SAAA;AAAA,UACA,WAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA,UACL,aAAA;AAAA,UACA,aAAA;AAAA,UACA,SAAA;AAAA,UACA,WAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,SAAA,EAAW,CAAC,YAAA,EAAc,QAAA,EAAU,4CAA4C,CAAA;AAAA,QAChF,IAAA,EAAM,CAAC,YAAA,EAAc,QAAA,EAAU,4CAA4C,CAAA;AAAA,QAC3E,SAAA,EAAW,CAAC,WAAA,EAAa,QAAA,EAAU,4CAA4C,CAAA;AAAA,QAC/E,SAAA,EAAW,CAAC,WAAA,EAAa,QAAA,EAAU,4CAA4C,CAAA;AAAA,QAC/E,UAAA,EAAY;AAAA,UACV,iBAAA;AAAA,UACA,WAAA;AAAA,UACA,YAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,UAAA,EAAY,CAAC,UAAA,EAAY,UAAA,EAAY,4CAA4C;AAAA;AACnF;AACF;AAEJ,CAAA;AAEO,IAAM,YAAA,GAAe,GAAA;AAAA,EAC1B;AAAA,IACE,uBAAA;AAAA;AAAA,IAGA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA;AAAA,IAGA,WAAA;AAAA,IACA,uBAAA;AAAA,IACA,uCAAA;AAAA;AAAA,IAGA,gBAAA;AAAA,IACA,gBAAA;AAAA;AAAA,IAGA,oBAAA;AAAA,IACA,yBAAA;AAAA;AAAA,IAGA,gCAAA;AAAA,IACA,wBAAA;AAAA,IACA,sBAAA;AAAA,IAEA,mBAAA;AAAA,IACA,oBAAA;AAAA;AAAA,IAGA,kBAAA;AAAA,IACA,qCAAA;AAAA,IACA,6BAAA;AAAA;AAAA,IAGA,aAAA;AAAA,IACA,gCAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA,KACR;AAAA,IACA,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,CAAC,WAAW;AAAA,OACpB;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,eAAA;AAAA,UACA,4BAAA;AAAA,UACA,4BAAA;AAAA,UACA,qCAAA;AAAA,UACA,kCAAA;AAAA,UACA,kCAAA;AAAA,UAEA,iCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,SAAA,EAAW;AAAA,UACT,kBAAA;AAAA,UACA,iBAAA;AAAA,UACA,qCAAA;AAAA,UAEA,iCAAA;AAAA,UACA;AAAA,SACF;AAAA;AAAA,QAGA,MAAA,EAAQ;AAAA,UACN,mBAAA;AAAA,UACA,gCAAA;AAAA,UACA,yCAAA;AAAA,UACA,sCAAA;AAAA,UACA,sCAAA;AAAA,UAEA,qCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,OAAA,EAAS;AAAA,UACP,kBAAA;AAAA,UACA,kBAAA;AAAA;AAAA;AAAA,UAGA,oBAAA;AAAA;AAAA;AAAA,UAGA,qCAAA;AAAA,UACA,oCAAA;AAAA,UACA,+BAAA;AAAA,UACA,kCAAA;AAAA,UACA;AAAA,SACF;AAAA;AAAA,QAGA,SAAA,EAAW;AAAA,UACT,mBAAA;AAAA,UACA,oBAAA;AAAA,UACA,qCAAA;AAAA,UACA,oCAAA;AAAA,UACA,yCAAA;AAAA,UAEA;AAAA,SACF;AAAA;AAAA,QAEA,MAAA,EAAQ;AAAA,UACN,mBAAA;AAAA,UACA,iBAAA;AAAA,UACA,oBAAA;AAAA,UACA,gCAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA;AAAA,QAEJ,MAAA,EAAQ,CAAC,YAAA,EAAc,SAAA,EAAW,WAAW,YAAY,CAAA;AAAA;AAAA,QAEzD,KAAA,EAAO,CAAC,YAAA,EAAc,SAAA,EAAW,WAAW,YAAY,CAAA;AAAA;AAAA,QAExD,KAAA,EAAO,CAAC,aAAA,EAAe,WAAA,EAAa,WAAW,YAAY,CAAA;AAAA,QAE3D,SAAA,EAAW,CAAC,YAAY,CAAA;AAAA,QACxB,IAAA,EAAM,CAAC,WAAW,CAAA;AAAA,QAClB,SAAA,EAAW,CAAC,WAAW,CAAA;AAAA,QACvB,SAAA,EAAW,CAAC,WAAW,CAAA;AAAA;AAAA,QAEvB,YAAY,EAAC;AAAA,QACb,YAAY;AAAC;AACf;AACF;AAEJ;ACpSO,IAAM,SAAS,CAAC;AAAA,EACrB,GAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,SAAA,GAAY,KAAA;AAAA,EACZ,OAAA,GAAU,KAAA;AAAA,EACV,OAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,QAAA;AAAA,EACP,KAAA,GAAQ,KAAA;AAAA,EACR,GAAG;AACL,CAAA,KAAa;AACX,EAAA,MAAM,aAAa,aAAA,EAAc;AACjC,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,QAAA;AAC9B,EAAA,MAAM,UAAA,GAAa,MAAA,CAAO,IAAI,CAAA,CAAE,WAAW,MAAM,CAAA;AACjD,EAAA,MAAM,aAAa,UAAA,GACf,YAAA,CAAa,EAAE,OAAA,EAAS,MAAM,KAAA,EAAO,SAAA,EAAW,CAAA,GAChD,SAAS,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,WAAW,CAAA;AAEhD,EAAA,MAAM,WAAA,GAAmD,CAAC,KAAA,KAAU;AAClE,IAAA,MAAM,QAAA,GAAW,KAAA,CAAM,aAAA,CAAc,OAAA,KAAY,GAAA;AAGjD,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,GAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,GAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA,EAAe,QAAA;AAAA,MACf,cAAA,EAAc,OAAA;AAAA,MAId,gBAAA,EAAgB,UAAA;AAAA,MAChB,IAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,SAAA,EAAW,GAAG,UAAU,CAAA;AAAA,MAEvB,QAAA,EAAA;AAAA,QAAA,SAAA,oBAAa,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,uCAAA,EAAwC,CAAA;AAAA,wBACzE,GAAA,CAAC,SAAA,EAAA,EAAW,QAAA,EAAA,SAAA,IAAa,UAAA,GAAa,OAAO,QAAA,EAAS;AAAA;AAAA;AAAA,GACxD;AAEJ;ACrFA,IAAM,oBAAA,GAAuBA,GAAAA;AAAA,EAC3B;AAAA,IACE,uBAAA;AAAA,IAEA,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IAEA,uBAAA;AAAA,IAEA,wBAAA;AAAA,IACA,gCAAA;AAAA,IACA,8BAAA;AAAA,IACA,0BAAA;AAAA,IACA,sCAAA;AAAA;AAAA,IAGA,mDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,MAAA;AAAA,MACT,KAAA,EAAO;AAAA,KACT;AAAA,IACA,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,CAAC,iBAAA,EAAmB,0BAAA,EAA4B,yBAAyB,CAAA;AAAA,QAC/E,IAAA,EAAM,CAAC,iDAAiD,CAAA;AAAA,QACxD,MAAA,EAAQ,CAAC,6CAA6C,CAAA;AAAA,QACtD,KAAA,EAAO,CAAC,2DAA2D,CAAA;AAAA,QACnE,QAAQ;AAAC,OACX;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,CAAC,cAAA,EAAgB,uBAAuB,CAAA;AAAA,QAC9C,cAAA,EAAgB,CAAC,iBAAA,EAAmB,EAAA,EAAI,oBAAoB,CAAA;AAAA,QAC5D,QAAQ;AAAC;AACX;AACF;AAEJ,CAAA;AAKO,IAAM,eAAe,CAAC;AAAA,EAC3B,GAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,KAAa;AACX,EAAA,MAAM,IAAA,GAAO,UAAUC,IAAAA,GAAO,QAAA;AAE9B,EAAA,uBACEC,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,GAAA;AAAA,MACA,IAAA,EAAM,UAAU,MAAA,GAAY,IAAA;AAAA,MAC5B,WAAW,oBAAA,CAAqB,EAAE,OAAA,EAAS,KAAA,EAAO,WAAW,CAAA;AAAA,MAE5D;AAAA;AAAA,GACH;AAEJ","file":"chunk-CTCFYWJC.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const variants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group/button',\n 'tw:border-box',\n\n // layout\n 'tw:relative',\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:gap-2',\n\n // text — chrome weight/tracking are brand-overridable tokens\n // (`--font-weight-medium` / `--letter-spacing-chrome`). Casing: standard case is\n // the default; only legacy brands (`keboola-legacy-*`) uppercase the chrome, so\n // modern brands (incl. Keboola V2) read naturally. Mirrors the V2 standard-case\n // treatment shipped for Tooltip/Badge (PR 7629).\n 'tw:text-xs',\n 'tw:leading-5',\n 'tw:font-medium',\n 'tw:[[data-brand^=keboola-legacy]_&]:tracking-chrome',\n 'tw:[[data-brand^=keboola-legacy]_&]:uppercase',\n\n // border — legacy (non-argo) chrome uses a fixed radius, not the brand token.\n 'tw:rounded',\n 'tw:border',\n 'tw:border-transparent',\n\n // styling\n 'tw:shadow-none',\n 'tw:[a]:cursor-pointer', // explicitly set for anchor\n\n 'tw:focus-visible:outline',\n 'tw:focus-visible:outline-1',\n 'tw:focus-visible:-outline-offset-1',\n 'tw:focus-visible:outline-ring',\n 'tw:focus-visible:ring-4',\n 'tw:focus-visible:ring-ring/30',\n\n // disabled\n 'tw:disabled:opacity-40',\n 'tw:disabled:cursor-not-allowed',\n\n // anchor support\n 'tw:!no-underline',\n 'tw:aria-disabled:opacity-40',\n 'tw:aria-disabled:cursor-not-allowed',\n\n 'tw:[&_svg]:shrink-0',\n ],\n {\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n block: false,\n },\n variants: {\n block: {\n true: ['tw:w-full'],\n },\n variant: {\n primary: [\n 'tw:text-white',\n 'tw:bg-primary-500',\n\n 'tw:focus:text-white',\n 'tw:hover:text-white',\n 'tw:hover:not-disabled:bg-primary-600',\n 'tw:active:not-disabled:bg-primary-800',\n\n // anchor disabled override\n 'tw:aria-disabled:!bg-primary-500',\n ],\n secondary: [\n 'tw:text-white',\n 'tw:bg-secondary-500',\n\n 'tw:focus:text-white',\n 'tw:hover:text-white',\n 'tw:hover:not-disabled:bg-secondary-700',\n 'tw:active:not-disabled:bg-secondary-800',\n\n // anchor disabled override\n 'tw:aria-disabled:!bg-secondary-500',\n ],\n danger: [\n 'tw:text-white',\n 'tw:bg-error-500',\n\n 'tw:focus:text-white',\n 'tw:hover:text-white',\n 'tw:hover:not-disabled:bg-error-600',\n 'tw:active:not-disabled:bg-error-700',\n\n // anchor disabled override\n 'tw:aria-disabled:!bg-error-500',\n ],\n // The label and the hover/active fills read tokens rather than the fixed\n // neutral scale, so the variant follows the active brand and colour scheme\n // (argo's `invisible` already did). A transparent button inherits whatever\n // surface it is dropped on, so it is the one legacy variant that cannot\n // assume a light page — pinning it forced every dark-scheme call site to\n // re-declare the colour by hand.\n invisible: [\n 'tw:text-foreground',\n 'tw:bg-transparent',\n\n 'tw:focus:text-foreground',\n 'tw:hover:not-disabled:bg-muted',\n 'tw:hover:text-foreground',\n 'tw:active:not-disabled:bg-secondary',\n\n // contrasting icon on hover/active\n 'tw:[&_svg]:text-neutral-400',\n 'tw:hover:not-disabled:[&_svg]:text-secondary-600',\n 'tw:active:not-disabled:[&_svg]:text-secondary-600',\n\n // anchor disabled override\n 'tw:aria-disabled:!bg-transparent',\n ],\n outline: [\n 'tw:text-neutral-800',\n 'tw:bg-white',\n // border\n 'tw:!border-neutral-200',\n 'tw:hover:text-neutral-800',\n 'tw:focus:text-neutral-800',\n 'tw:hover:not-disabled:!border-neutral-300',\n 'tw:hover:not-disabled:bg-neutral-100',\n 'tw:active:not-disabled:bg-neutral-200',\n\n // contrasting icon hover, same as invisible\n 'tw:[&_svg]:text-neutral-400',\n 'tw:not-disabled:hover:[&_svg]:text-secondary-600',\n 'tw:active:not-disabled:[&_svg]:text-secondary-600',\n\n // anchor disabled override\n 'tw:aria-disabled:!bg-white',\n 'tw:aria-disabled:!border-neutral-200',\n ],\n\n inline: [\n 'tw:text-neutral-800',\n 'tw:bg-transparent',\n 'tw:rounded-full',\n\n 'tw:[&_svg]:text-neutral-400',\n 'tw:not-disabled:hover:[&_svg]:text-secondary-600',\n 'tw:not-disabled:focus:[&_svg]:text-secondary-600',\n ],\n },\n size: {\n medium: [\n 'tw:max-h-10',\n 'tw:min-h-10',\n 'tw:px-4',\n 'tw:py-2.5',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n ],\n small: [\n 'tw:max-h-8',\n 'tw:min-h-8',\n 'tw:px-4',\n 'tw:py-1.5',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n ],\n large: [\n 'tw:max-h-12',\n 'tw:min-h-12',\n 'tw:px-4',\n 'tw:py-3.5',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n ],\n\n 'icon-lg': ['tw:size-12', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-6'],\n icon: ['tw:size-10', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n 'icon-sm': ['tw:size-8', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n 'icon-xs': ['tw:size-6', 'tw:p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n 'icon-2xs': [\n 'tw:!inline-flex',\n 'tw:size-5',\n 'tw:max-h-5',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n ],\n 'icon-3xs': ['tw:h-fit', 'tw:w-fit', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n },\n },\n },\n);\n\nexport const argoVariants = cva(\n [\n 'tailwindcss-preflight',\n\n // layout\n 'tw:relative',\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:whitespace-nowrap',\n 'tw:gap-2',\n\n // border\n 'tw:border',\n 'tw:border-transparent',\n 'tw:rounded-[var(--radius-lg,0.25rem)]',\n\n // text\n 'tw:font-medium',\n 'tw:select-none',\n\n // focus visible\n 'tw:!outline-hidden',\n 'tw:focus-visible:ring-2',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n 'tw:disabled:opacity-50',\n 'tw:active:opacity-60',\n\n 'tw:transition-all',\n 'tw:bg-clip-padding',\n\n // anchor support\n 'tw:!no-underline',\n 'tw:aria-disabled:cursor-not-allowed',\n 'tw:aria-disabled:opacity-50',\n\n // icon\n 'tw:shrink-0',\n 'tw:[&_svg]:pointer-events-none',\n 'tw:[&_svg]:shrink-0',\n \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n ],\n {\n defaultVariants: {\n variant: 'primary',\n size: 'medium',\n },\n variants: {\n block: {\n true: ['tw:w-full'],\n },\n variant: {\n primary: [\n 'tw:bg-primary',\n 'tw:text-primary-foreground',\n 'tw:[a]:hover:bg-primary/80',\n 'tw:hover:not-disabled:bg-primary/90',\n 'tw:hover:text-primary-foreground',\n 'tw:focus:text-primary-foreground',\n\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-ring/50',\n ],\n secondary: [\n 'tw:bg-primary/10',\n 'tw:text-primary',\n 'tw:hover:not-disabled:bg-primary/20',\n\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-ring/50',\n ],\n\n // should be called \"destructive\" by Figma\n danger: [\n 'tw:bg-destructive',\n 'tw:text-destructive-foreground',\n 'tw:hover:not-disabled:bg-destructive/90',\n 'tw:hover:text-destructive-foreground',\n 'tw:focus:text-destructive-foreground',\n\n 'tw:focus-visible:border-destructive',\n 'tw:focus-visible:ring-destructive/20',\n ],\n outline: [\n 'tw:!border-input',\n 'tw:bg-background',\n // Semantic base text color so the label/icon flips in dark mode\n // (matches `invisible`); previously unset → inherited a fixed dark color.\n 'tw:text-foreground',\n // Hover follows the brand primary (translucent tint), matching the\n // `secondary` variant — not the fixed `accent` blue.\n 'tw:hover:not-disabled:bg-primary/10',\n 'tw:hover:not-disabled:text-primary',\n 'tw:hover:active:bg-background',\n 'tw:focus-visible:!border-primary',\n 'tw:focus-visible:ring-ring/50',\n ],\n\n // should be called \"ghost\" by Figma\n invisible: [\n 'tw:bg-transparent',\n 'tw:text-foreground',\n 'tw:hover:not-disabled:bg-primary/10',\n 'tw:hover:not-disabled:text-primary',\n 'tw:hover:not-disabled:border-primary/10',\n\n 'tw:focus-visible:ring-ring/50',\n ],\n // should be called \"link\" by Figma\n inline: [\n 'tw:bg-transparent',\n 'tw:text-primary',\n 'tw:hover:underline',\n 'tw:hover:active:bg-transparent',\n 'tw:focus-visible:ring-ring/50',\n ],\n },\n size: {\n // should be called \"default\" by Figma\n medium: ['tw:max-h-9', 'tw:py-2', 'tw:px-4', 'tw:text-sm'],\n // should be called \"small\" by Figma\n small: ['tw:max-h-8', 'tw:py-2', 'tw:px-3', 'tw:text-xs'],\n // should be called \"large\" by Figma\n large: ['tw:max-h-10', 'tw:py-2.5', 'tw:px-6', 'tw:text-sm'],\n\n 'icon-lg': ['tw:size-10'],\n icon: ['tw:size-9'],\n 'icon-sm': ['tw:size-8'],\n 'icon-xs': ['tw:size-6'],\n // unsupported in ARGO, remove when old design is gone\n 'icon-2xs': [],\n 'icon-3xs': [],\n },\n },\n },\n);\n","import type { ComponentProps } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { Loader2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { argoVariants, variants } from './styles';\n\n/**\n * Props for the `Button` component.\n *\n * Pass `variant` for primary/secondary/danger/outline/invisible looks, `size`\n * for height (including `icon-*` sizes when rendering icon-only). Icons are\n * composed as children — `<Button><Trash2 className=\"tw:size-4\" /> Delete</Button>`.\n */\ntype Props = {\n /** Replaces the leading content with a spinner and disables the button visually. The caller still controls `disabled`. */\n isLoading?: boolean;\n /** Render as a Radix `Slot` so the parent JSX (e.g. a `react-router` `<Link>`) becomes the button element. */\n asChild?: boolean;\n} & ComponentProps<'button'> &\n VariantProps<typeof variants>;\n\n/**\n * Primary action surface for the design system — covers all clickable controls except inline text links.\n *\n * **When to use:** any user-initiated action (submit, save, open modal, run job). Use `size=\"icon-*\"` with no\n * children for an icon-only button; there is no separate `IconButton` component.\n * **When NOT to use:** for inline text-link actions inside body copy use `ButtonInline`; for navigation that\n * opens a URL use `Link`; for \"primary action + dropdown of related actions\" use `SplitButton`.\n * **Composition:** wrap in `Tooltip` when icon-only or when disabled state needs an explanation; pair with\n * `Popconfirm` for destructive confirmations; pass through `Modal.Trigger` / `DropdownMenu.Trigger` via `asChild`.\n *\n * @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern\n * @see RECIPES.md#confirm-dialog — for destructive-action confirmation\n */\nexport const Button = ({\n ref,\n children,\n disabled = false,\n className,\n type = 'button',\n isLoading = false,\n asChild = false,\n onClick,\n variant = 'primary',\n size = 'medium',\n block = false,\n ...buttonProps\n}: Props) => {\n const renderArgo = useArgoDesign();\n const Comp = asChild ? Root : 'button';\n const isIconOnly = String(size).startsWith('icon');\n const classNames = renderArgo\n ? argoVariants({ variant, size, block, className })\n : variants({ size, variant, block, className });\n\n const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n const isAnchor = event.currentTarget.tagName === 'A';\n\n // <a/> does not support disabled by default, and we cannot use pointer-events: none because cursor-not-allowed would not work.\n if (isAnchor && disabled) {\n event.preventDefault();\n return;\n }\n\n onClick?.(event);\n };\n\n return (\n <Comp\n {...buttonProps}\n ref={ref}\n disabled={disabled}\n aria-disabled={disabled}\n data-variant={variant}\n // `size=\"icon\"` / `size=\"icon-*\"` flags the button as icon-only — needed\n // by `ButtonGroup space=\"block\"` which stretches non-icon children to\n // equal width.\n data-icon-only={isIconOnly}\n type={type}\n onClick={handleClick}\n className={cn(classNames)}\n >\n {isLoading && <Loader2 className=\"tw:size-4 tw:shrink-0 tw:animate-spin\" />}\n <Slottable>{isLoading && isIconOnly ? null : children}</Slottable>\n </Comp>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Root } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst buttonInlineVariants = cva(\n [\n 'tailwindcss-preflight',\n\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:gap-2',\n\n 'tw:underline-offset-2',\n\n 'tw:disabled:opacity-40',\n 'tw:disabled:cursor-not-allowed',\n 'tw:disabled:text-neutral-500',\n 'tw:disabled:no-underline',\n 'tw:disabled:[&_svg]:text-neutral-400',\n\n // Default size for nested Lucide icons; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n ],\n {\n defaultVariants: {\n variant: 'link',\n color: 'link',\n },\n variants: {\n color: {\n link: ['tw:text-primary', 'tw:hover:text-primary/90', 'tw:[&_svg]:text-primary'],\n dark: ['tw:text-neutral-800 tw:[&_svg]:text-neutral-400'],\n danger: ['tw:text-error-500 tw:[&_svg]:text-error-500'],\n muted: ['tw:text-muted-foreground tw:[&_svg]:text-muted-foreground'],\n custom: [],\n },\n variant: {\n link: ['tw:underline', 'tw:hover:no-underline'],\n 'link-reverse': ['tw:no-underline', '', 'tw:hover:underline'],\n custom: [],\n },\n },\n },\n);\n\ntype Props = ComponentProps<'button'> &\n VariantProps<typeof buttonInlineVariants> & { asChild?: boolean };\n\nexport const ButtonInline = ({\n ref,\n children,\n className,\n variant,\n color,\n type = 'button',\n asChild = false,\n ...buttonProps\n}: Props) => {\n const Comp = asChild ? Root : 'button';\n\n return (\n <Comp\n {...buttonProps}\n ref={ref}\n type={asChild ? undefined : type}\n className={buttonInlineVariants({ variant, color, className })}\n >\n {children}\n </Comp>\n );\n};\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
// src/components/HelpBlock/HelpBlock.tsx
|
|
5
|
+
var helpVariants = cva(["tw:m-0", "tw:text-xs"], {
|
|
6
|
+
defaultVariants: {
|
|
7
|
+
state: "default"
|
|
8
|
+
},
|
|
9
|
+
variants: {
|
|
10
|
+
state: {
|
|
11
|
+
default: ["tw:text-muted-foreground"],
|
|
12
|
+
warning: ["tw:text-warning"]
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
var HelpBlock = ({ children, className, state = "default", ...rest }) => {
|
|
17
|
+
if (!children) return null;
|
|
18
|
+
return /* @__PURE__ */ jsx("p", { ...rest, className: helpVariants({ state, className }), children });
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { HelpBlock };
|
|
22
|
+
//# sourceMappingURL=chunk-ESBL3IPF.js.map
|
|
23
|
+
//# sourceMappingURL=chunk-ESBL3IPF.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/HelpBlock/HelpBlock.tsx"],"names":[],"mappings":";;;;AAGA,IAAM,YAAA,GAAe,GAAA,CAAI,CAAC,QAAA,EAAU,YAAY,CAAA,EAAG;AAAA,EACjD,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,CAAC,0BAA0B,CAAA;AAAA,MACpC,OAAA,EAAS,CAAC,iBAAiB;AAAA;AAC7B;AAEJ,CAAC,CAAA;AAIM,IAAM,SAAA,GAAY,CAAC,EAAE,QAAA,EAAU,WAAW,KAAA,GAAQ,SAAA,EAAW,GAAG,IAAA,EAAK,KAAa;AACvF,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AAEtB,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAG,GAAG,IAAA,EAAM,SAAA,EAAW,YAAA,CAAa,EAAE,KAAA,EAAO,SAAA,EAAW,CAAA,EACtD,QAAA,EACH,CAAA;AAEJ","file":"chunk-ESBL3IPF.js","sourcesContent":["import type { ComponentPropsWithRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst helpVariants = cva(['tw:m-0', 'tw:text-xs'], {\n defaultVariants: {\n state: 'default',\n },\n variants: {\n state: {\n default: ['tw:text-muted-foreground'],\n warning: ['tw:text-warning'],\n },\n },\n});\n\ntype Props = ComponentPropsWithRef<'p'> & VariantProps<typeof helpVariants>;\n\nexport const HelpBlock = ({ children, className, state = 'default', ...rest }: Props) => {\n if (!children) return null;\n\n return (\n <p {...rest} className={helpVariants({ state, className })}>\n {children}\n </p>\n );\n};\n"]}
|