@saas-ui/react 3.0.0-alpha.18 → 3.0.0-alpha.19
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/CHANGELOG.md +12 -0
- package/dist/chunk-QVFJV6HJ.js +8 -0
- package/dist/{chunk-ULAJ3JEO.js → chunk-S5J6REMC.js} +9 -1
- package/dist/components/card/index.cjs +31 -0
- package/dist/components/card/index.d.cts +1 -0
- package/dist/components/card/index.d.ts +1 -0
- package/dist/components/card/index.js +8 -0
- package/dist/components/command/index.d.cts +2 -5
- package/dist/components/command/index.d.ts +2 -5
- package/dist/components/grid-list/index.d.cts +65 -3
- package/dist/components/grid-list/index.d.ts +65 -3
- package/dist/components/icon-button/index.cjs +31 -0
- package/dist/components/icon-button/index.d.cts +1 -0
- package/dist/components/icon-button/index.d.ts +1 -0
- package/dist/components/icon-button/index.js +8 -0
- package/dist/components/number-input/index.cjs +9 -1
- package/dist/components/number-input/index.js +1 -1
- package/dist/index.cjs +460 -310
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +264 -123
- package/dist/types-DnFoUudY.d.cts +10 -0
- package/dist/types-DnFoUudY.d.ts +10 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -1,29 +1,40 @@
|
|
1
1
|
import {
|
2
|
-
|
3
|
-
} from "./chunk-
|
2
|
+
steps_exports
|
3
|
+
} from "./chunk-VZG7EJ64.js";
|
4
|
+
import {
|
5
|
+
Switch
|
6
|
+
} from "./chunk-SA3OGTOO.js";
|
4
7
|
import {
|
5
8
|
Toaster,
|
6
9
|
toast
|
7
10
|
} from "./chunk-HELHPHIQ.js";
|
11
|
+
import {
|
12
|
+
Tooltip
|
13
|
+
} from "./chunk-QSNSWCTM.js";
|
8
14
|
import {
|
9
15
|
colors
|
10
16
|
} from "./chunk-3MO37LYW.js";
|
17
|
+
import {
|
18
|
+
Persona,
|
19
|
+
PersonaAvatar,
|
20
|
+
defaultPresenceOptions
|
21
|
+
} from "./chunk-4VH4IGVF.js";
|
22
|
+
import {
|
23
|
+
PinInput
|
24
|
+
} from "./chunk-2EUACKRH.js";
|
11
25
|
import {
|
12
26
|
Radio,
|
13
27
|
RadioGroup
|
14
28
|
} from "./chunk-WYLMBMAH.js";
|
15
|
-
import {
|
16
|
-
SegmentedControl
|
17
|
-
} from "./chunk-SKXSBAOS.js";
|
18
29
|
import {
|
19
30
|
SearchInput
|
20
31
|
} from "./chunk-46ISJZBS.js";
|
32
|
+
import {
|
33
|
+
SegmentedControl
|
34
|
+
} from "./chunk-SKXSBAOS.js";
|
21
35
|
import {
|
22
36
|
namespace_exports as namespace_exports3
|
23
37
|
} from "./chunk-BU7QENBQ.js";
|
24
|
-
import {
|
25
|
-
steps_exports
|
26
|
-
} from "./chunk-VZG7EJ64.js";
|
27
38
|
import {
|
28
39
|
sidebar_exports,
|
29
40
|
useSidebar,
|
@@ -31,8 +42,15 @@ import {
|
|
31
42
|
useSidebarStyles
|
32
43
|
} from "./chunk-GGAKUS66.js";
|
33
44
|
import {
|
34
|
-
|
35
|
-
} from "./chunk-
|
45
|
+
Link
|
46
|
+
} from "./chunk-TZBAM4AD.js";
|
47
|
+
import {
|
48
|
+
loading_overlay_exports,
|
49
|
+
useLoadingOverlayStyles
|
50
|
+
} from "./chunk-7VSTNV2B.js";
|
51
|
+
import {
|
52
|
+
Spinner
|
53
|
+
} from "./chunk-32JGENDB.js";
|
36
54
|
import {
|
37
55
|
menu_exports
|
38
56
|
} from "./chunk-C7B3ELC4.js";
|
@@ -40,29 +58,29 @@ import {
|
|
40
58
|
navbar_exports
|
41
59
|
} from "./chunk-Q6SNJJO2.js";
|
42
60
|
import {
|
43
|
-
|
44
|
-
|
61
|
+
SuiContext,
|
62
|
+
SuiProvider,
|
63
|
+
useLink,
|
64
|
+
useSui
|
65
|
+
} from "./chunk-O2WVT2BP.js";
|
45
66
|
import {
|
46
|
-
|
47
|
-
|
48
|
-
} from "./chunk-7VSTNV2B.js";
|
67
|
+
NumberInput
|
68
|
+
} from "./chunk-S5J6REMC.js";
|
49
69
|
import {
|
50
|
-
|
51
|
-
} from "./chunk-
|
70
|
+
pagination_exports
|
71
|
+
} from "./chunk-MLJN6IOJ.js";
|
52
72
|
import {
|
53
73
|
PasswordInput
|
54
74
|
} from "./chunk-CD2JUFI2.js";
|
55
75
|
import {
|
56
|
-
|
57
|
-
} from "./chunk-
|
76
|
+
InputGroup
|
77
|
+
} from "./chunk-PKI6YH2V.js";
|
58
78
|
import {
|
59
|
-
|
60
|
-
|
61
|
-
defaultPresenceOptions
|
62
|
-
} from "./chunk-4VH4IGVF.js";
|
79
|
+
Command
|
80
|
+
} from "./chunk-UASXI64E.js";
|
63
81
|
import {
|
64
|
-
|
65
|
-
} from "./chunk-
|
82
|
+
namespace_exports
|
83
|
+
} from "./chunk-72LEGXHY.js";
|
66
84
|
import {
|
67
85
|
namespace_exports as namespace_exports2
|
68
86
|
} from "./chunk-WS5XGFSL.js";
|
@@ -76,21 +94,9 @@ import {
|
|
76
94
|
IconBadge
|
77
95
|
} from "./chunk-I2RXEKTB.js";
|
78
96
|
import {
|
79
|
-
|
80
|
-
} from "./chunk-
|
97
|
+
IconButton
|
98
|
+
} from "./chunk-QVFJV6HJ.js";
|
81
99
|
import "./chunk-KTLWEUNW.js";
|
82
|
-
import {
|
83
|
-
InputGroup
|
84
|
-
} from "./chunk-PKI6YH2V.js";
|
85
|
-
import {
|
86
|
-
Link
|
87
|
-
} from "./chunk-TZBAM4AD.js";
|
88
|
-
import {
|
89
|
-
SuiContext,
|
90
|
-
SuiProvider,
|
91
|
-
useLink,
|
92
|
-
useSui
|
93
|
-
} from "./chunk-O2WVT2BP.js";
|
94
100
|
import {
|
95
101
|
AppShell
|
96
102
|
} from "./chunk-6ZNR6N2K.js";
|
@@ -111,9 +117,6 @@ import {
|
|
111
117
|
CloseButton
|
112
118
|
} from "./chunk-BKYGKH3L.js";
|
113
119
|
import "./chunk-4TPVIHNO.js";
|
114
|
-
import {
|
115
|
-
Command
|
116
|
-
} from "./chunk-UASXI64E.js";
|
117
120
|
import "./chunk-RTMS5TJN.js";
|
118
121
|
|
119
122
|
// src/preset.ts
|
@@ -200,7 +203,8 @@ var conditions = defineConditions({
|
|
200
203
|
groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &, [role=group]:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &",
|
201
204
|
groupExpanded: ".group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &, [role=group]:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &",
|
202
205
|
groupInvalid: ".group:invalid &, [role=group]:invalid &",
|
203
|
-
parentHover: "button:hover
|
206
|
+
parentHover: "button:hover &, a:hover &, [role=button]:hover &",
|
207
|
+
pressable: "&:is(a, button, [role=button])"
|
204
208
|
});
|
205
209
|
|
206
210
|
// src/theme/global-css.ts
|
@@ -454,7 +458,7 @@ var buttonRecipe = defineRecipe({
|
|
454
458
|
sm: {
|
455
459
|
gap: "2",
|
456
460
|
h: "7",
|
457
|
-
minW: "
|
461
|
+
minW: "7",
|
458
462
|
textStyle: "sm",
|
459
463
|
borderRadius: "md",
|
460
464
|
px: "2.5"
|
@@ -567,10 +571,10 @@ var buttonRecipe = defineRecipe({
|
|
567
571
|
ghost: {
|
568
572
|
color: "colorPalette.fg",
|
569
573
|
_hover: {
|
570
|
-
bg: "colorPalette.
|
574
|
+
bg: "colorPalette.subtle"
|
571
575
|
},
|
572
576
|
_expanded: {
|
573
|
-
bg: "colorPalette.
|
577
|
+
bg: "colorPalette.subtle"
|
574
578
|
}
|
575
579
|
},
|
576
580
|
plain: {
|
@@ -578,6 +582,14 @@ var buttonRecipe = defineRecipe({
|
|
578
582
|
}
|
579
583
|
}
|
580
584
|
},
|
585
|
+
compoundVariants: [
|
586
|
+
{
|
587
|
+
variant: "plain",
|
588
|
+
css: {
|
589
|
+
px: 0
|
590
|
+
}
|
591
|
+
}
|
592
|
+
],
|
581
593
|
defaultVariants: {
|
582
594
|
size: "md",
|
583
595
|
variant: "solid",
|
@@ -989,7 +1001,14 @@ var inputRecipe = defineRecipe10({
|
|
989
1001
|
bg: "transparent",
|
990
1002
|
borderWidth: "1px",
|
991
1003
|
borderColor: "border",
|
992
|
-
focusVisibleRing: "inside"
|
1004
|
+
focusVisibleRing: "inside",
|
1005
|
+
focusRingWidth: "0",
|
1006
|
+
_hover: {
|
1007
|
+
borderColor: "border.emphasized",
|
1008
|
+
_focusVisible: {
|
1009
|
+
borderColor: "var(--focus-ring-color)"
|
1010
|
+
}
|
1011
|
+
}
|
993
1012
|
},
|
994
1013
|
subtle: {
|
995
1014
|
borderWidth: "1px",
|
@@ -1192,9 +1211,7 @@ var radiomarkRecipe = defineRecipe15({
|
|
1192
1211
|
borderRadius: "full",
|
1193
1212
|
cursor: "radio",
|
1194
1213
|
_focusVisible: {
|
1195
|
-
|
1196
|
-
outlineColor: "colorPalette.focusRing",
|
1197
|
-
outlineOffset: "2px"
|
1214
|
+
focusVisibleRing: "outside"
|
1198
1215
|
},
|
1199
1216
|
_invalid: {
|
1200
1217
|
colorPalette: "red",
|
@@ -1470,29 +1487,29 @@ var textareaRecipe = defineRecipe20({
|
|
1470
1487
|
borderRadius: "sm",
|
1471
1488
|
textStyle: "xs",
|
1472
1489
|
px: "2",
|
1473
|
-
py: "1
|
1474
|
-
scrollPaddingBottom: "1
|
1490
|
+
py: "1",
|
1491
|
+
scrollPaddingBottom: "1"
|
1475
1492
|
},
|
1476
1493
|
sm: {
|
1477
1494
|
borderRadius: "sm",
|
1478
1495
|
textStyle: "sm",
|
1479
1496
|
px: "2.5",
|
1480
|
-
py: "
|
1481
|
-
scrollPaddingBottom: "
|
1497
|
+
py: "1.5",
|
1498
|
+
scrollPaddingBottom: "1.5"
|
1482
1499
|
},
|
1483
1500
|
md: {
|
1484
1501
|
borderRadius: "md",
|
1485
1502
|
textStyle: "sm",
|
1486
1503
|
px: "3",
|
1487
|
-
py: "
|
1488
|
-
scrollPaddingBottom: "
|
1504
|
+
py: "1.5",
|
1505
|
+
scrollPaddingBottom: "1.5"
|
1489
1506
|
},
|
1490
1507
|
lg: {
|
1491
1508
|
borderRadius: "md",
|
1492
1509
|
textStyle: "md",
|
1493
1510
|
px: "4",
|
1494
|
-
py: "
|
1495
|
-
scrollPaddingBottom: "
|
1511
|
+
py: "2",
|
1512
|
+
scrollPaddingBottom: "2"
|
1496
1513
|
},
|
1497
1514
|
xl: {
|
1498
1515
|
borderRadius: "lg",
|
@@ -1507,7 +1524,8 @@ var textareaRecipe = defineRecipe20({
|
|
1507
1524
|
bg: "transparent",
|
1508
1525
|
borderWidth: "1px",
|
1509
1526
|
borderColor: "border",
|
1510
|
-
focusVisibleRing: "inside"
|
1527
|
+
focusVisibleRing: "inside",
|
1528
|
+
focusRingWidth: 0
|
1511
1529
|
},
|
1512
1530
|
subtle: {
|
1513
1531
|
borderWidth: "1px",
|
@@ -1582,7 +1600,7 @@ var semanticColors = defineSemanticTokens.colors({
|
|
1582
1600
|
},
|
1583
1601
|
sidebar: {
|
1584
1602
|
bg: {
|
1585
|
-
value: { _light: "{colors.gray.
|
1603
|
+
value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
|
1586
1604
|
},
|
1587
1605
|
fg: {
|
1588
1606
|
value: { _light: "{colors.gray.900}", _dark: "{colors.gray.200}" }
|
@@ -1592,7 +1610,7 @@ var semanticColors = defineSemanticTokens.colors({
|
|
1592
1610
|
},
|
1593
1611
|
accent: {
|
1594
1612
|
bg: {
|
1595
|
-
value: { _light: "{colors.gray.200/
|
1613
|
+
value: { _light: "{colors.gray.200/80}", _dark: "{colors.gray.900}" }
|
1596
1614
|
},
|
1597
1615
|
fg: {
|
1598
1616
|
value: { _light: "{colors.gray.900}", _dark: "{colors.gray.200}" }
|
@@ -1689,9 +1707,6 @@ var semanticColors = defineSemanticTokens.colors({
|
|
1689
1707
|
value: { _light: "{colors.blue.500}", _dark: "{colors.blue.400}" }
|
1690
1708
|
}
|
1691
1709
|
},
|
1692
|
-
focusRing: {
|
1693
|
-
value: { _light: "{colors.blue.600/50}", _dark: "{colors.blue.500/50}" }
|
1694
|
-
},
|
1695
1710
|
accent: {
|
1696
1711
|
contrast: {
|
1697
1712
|
value: { _light: "white", _dark: "white" }
|
@@ -2236,44 +2251,50 @@ import { defineSemanticTokens as defineSemanticTokens3 } from "@chakra-ui/react"
|
|
2236
2251
|
var semanticShadows = defineSemanticTokens3.shadows({
|
2237
2252
|
xs: {
|
2238
2253
|
value: {
|
2239
|
-
|
2240
|
-
_dark: "0px 1px 1px {
|
2254
|
+
_light: "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
|
2255
|
+
_dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
|
2241
2256
|
}
|
2242
2257
|
},
|
2243
2258
|
sm: {
|
2244
2259
|
value: {
|
2245
|
-
|
2246
|
-
_dark: "0px 2px 4px {
|
2260
|
+
_light: "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
|
2261
|
+
_dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
|
2247
2262
|
}
|
2248
2263
|
},
|
2249
2264
|
md: {
|
2250
2265
|
value: {
|
2251
|
-
|
2252
|
-
_dark: "0px 4px 8px {
|
2266
|
+
_light: "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
|
2267
|
+
_dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
|
2253
2268
|
}
|
2254
2269
|
},
|
2255
2270
|
lg: {
|
2256
2271
|
value: {
|
2257
|
-
|
2258
|
-
_dark: "0px 8px 16px {
|
2272
|
+
_light: "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
|
2273
|
+
_dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
|
2259
2274
|
}
|
2260
2275
|
},
|
2261
2276
|
xl: {
|
2262
2277
|
value: {
|
2263
|
-
|
2264
|
-
_dark: "0px 16px 24px {
|
2278
|
+
_light: "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
|
2279
|
+
_dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
|
2265
2280
|
}
|
2266
2281
|
},
|
2267
2282
|
"2xl": {
|
2268
2283
|
value: {
|
2269
|
-
|
2270
|
-
_dark: "0px 24px 40px {
|
2284
|
+
_light: "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
|
2285
|
+
_dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
|
2286
|
+
}
|
2287
|
+
},
|
2288
|
+
inner: {
|
2289
|
+
value: {
|
2290
|
+
_light: "inset 0 2px 4px 0 {black/5}",
|
2291
|
+
_dark: "inset 0 2px 4px 0 black"
|
2271
2292
|
}
|
2272
2293
|
},
|
2273
2294
|
inset: {
|
2274
2295
|
value: {
|
2275
|
-
|
2276
|
-
_dark: "inset 0
|
2296
|
+
_light: "inset 0 1px 2px 0 {black/5}",
|
2297
|
+
_dark: "inset 0 1px 2px 0 {colors.gray.300/5}"
|
2277
2298
|
}
|
2278
2299
|
}
|
2279
2300
|
});
|
@@ -2640,7 +2661,8 @@ var baseStyleLabel = defineStyle({
|
|
2640
2661
|
overflow: "hidden",
|
2641
2662
|
whiteSpace: "nowrap",
|
2642
2663
|
textOverflow: "ellipsis",
|
2643
|
-
minW: 0
|
2664
|
+
minW: 0,
|
2665
|
+
color: "fg"
|
2644
2666
|
});
|
2645
2667
|
var personaSlotRecipe = defineSlotRecipe5({
|
2646
2668
|
className: "sui-persona",
|
@@ -2683,11 +2705,11 @@ var personaSlotRecipe = defineSlotRecipe5({
|
|
2683
2705
|
label: baseStyleLabel,
|
2684
2706
|
secondaryLabel: {
|
2685
2707
|
...baseStyleLabel,
|
2686
|
-
color: "fg
|
2708
|
+
color: "fg/60"
|
2687
2709
|
},
|
2688
2710
|
tertiaryLabel: {
|
2689
2711
|
...baseStyleLabel,
|
2690
|
-
color: "fg
|
2712
|
+
color: "fg/60"
|
2691
2713
|
}
|
2692
2714
|
},
|
2693
2715
|
variants: {
|
@@ -2764,7 +2786,8 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
|
|
2764
2786
|
cursor: "button",
|
2765
2787
|
transitionProperty: "common",
|
2766
2788
|
transitionDuration: "fast",
|
2767
|
-
focusVisibleRing: "
|
2789
|
+
focusVisibleRing: "inside",
|
2790
|
+
focusRingWidth: "1px",
|
2768
2791
|
"& > svg": {
|
2769
2792
|
boxSize: 4,
|
2770
2793
|
color: "var(--sidebar-item-icon-color)"
|
@@ -2776,7 +2799,12 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
|
|
2776
2799
|
endElement: {
|
2777
2800
|
display: "flex",
|
2778
2801
|
gap: "1px",
|
2779
|
-
ms: "auto"
|
2802
|
+
ms: "auto",
|
2803
|
+
"& button": {
|
2804
|
+
_hover: {
|
2805
|
+
bg: "transparent"
|
2806
|
+
}
|
2807
|
+
}
|
2780
2808
|
}
|
2781
2809
|
},
|
2782
2810
|
variants: {
|
@@ -2920,7 +2948,10 @@ var sidebarSlotRecipe = defineSlotRecipe7({
|
|
2920
2948
|
},
|
2921
2949
|
groupEndElement: {
|
2922
2950
|
"& > button": {
|
2923
|
-
boxSize: 6
|
2951
|
+
boxSize: 6,
|
2952
|
+
_hover: {
|
2953
|
+
bg: "transparent"
|
2954
|
+
}
|
2924
2955
|
}
|
2925
2956
|
},
|
2926
2957
|
groupContent: {
|
@@ -3031,11 +3062,6 @@ var sidebarSlotRecipe = defineSlotRecipe7({
|
|
3031
3062
|
},
|
3032
3063
|
compact: {}
|
3033
3064
|
},
|
3034
|
-
variant: {
|
3035
|
-
muted: {},
|
3036
|
-
solid: {},
|
3037
|
-
subtle: {}
|
3038
|
-
},
|
3039
3065
|
size: {
|
3040
3066
|
md: {
|
3041
3067
|
header: {
|
@@ -3055,7 +3081,6 @@ var sidebarSlotRecipe = defineSlotRecipe7({
|
|
3055
3081
|
},
|
3056
3082
|
defaultVariants: {
|
3057
3083
|
mode: "collapsible",
|
3058
|
-
variant: "muted",
|
3059
3084
|
size: "md"
|
3060
3085
|
}
|
3061
3086
|
});
|
@@ -3723,7 +3748,7 @@ var cardSlotRecipe = defineSlotRecipe14({
|
|
3723
3748
|
position: "relative",
|
3724
3749
|
minWidth: "0",
|
3725
3750
|
wordWrap: "break-word",
|
3726
|
-
borderRadius: "
|
3751
|
+
borderRadius: "lg",
|
3727
3752
|
color: "fg",
|
3728
3753
|
textAlign: "start"
|
3729
3754
|
},
|
@@ -3735,14 +3760,15 @@ var cardSlotRecipe = defineSlotRecipe14({
|
|
3735
3760
|
fontSize: "sm"
|
3736
3761
|
},
|
3737
3762
|
header: {
|
3738
|
-
|
3739
|
-
|
3763
|
+
padding: "var(--card-padding)",
|
3764
|
+
paddingBlock: "calc(var(--card-padding) / 1.5)",
|
3740
3765
|
display: "flex",
|
3741
3766
|
flexDirection: "column",
|
3742
3767
|
gap: "1.5"
|
3743
3768
|
},
|
3744
3769
|
body: {
|
3745
3770
|
padding: "var(--card-padding)",
|
3771
|
+
paddingBlock: "calc(var(--card-padding) / 1.5)",
|
3746
3772
|
flex: "1",
|
3747
3773
|
display: "flex",
|
3748
3774
|
flexDirection: "column"
|
@@ -3751,15 +3777,15 @@ var cardSlotRecipe = defineSlotRecipe14({
|
|
3751
3777
|
display: "flex",
|
3752
3778
|
alignItems: "center",
|
3753
3779
|
gap: "2",
|
3754
|
-
|
3755
|
-
|
3780
|
+
padding: "var(--card-padding)",
|
3781
|
+
paddingBlock: "calc(var(--card-padding) / 1.5)"
|
3756
3782
|
}
|
3757
3783
|
},
|
3758
3784
|
variants: {
|
3759
3785
|
size: {
|
3760
3786
|
sm: {
|
3761
3787
|
root: {
|
3762
|
-
"--card-padding": "spacing.
|
3788
|
+
"--card-padding": "spacing.2"
|
3763
3789
|
},
|
3764
3790
|
title: {
|
3765
3791
|
textStyle: "md"
|
@@ -3767,7 +3793,7 @@ var cardSlotRecipe = defineSlotRecipe14({
|
|
3767
3793
|
},
|
3768
3794
|
md: {
|
3769
3795
|
root: {
|
3770
|
-
"--card-padding": "spacing.
|
3796
|
+
"--card-padding": "spacing.3"
|
3771
3797
|
},
|
3772
3798
|
title: {
|
3773
3799
|
textStyle: "lg"
|
@@ -3775,7 +3801,7 @@ var cardSlotRecipe = defineSlotRecipe14({
|
|
3775
3801
|
},
|
3776
3802
|
lg: {
|
3777
3803
|
root: {
|
3778
|
-
"--card-padding": "spacing.
|
3804
|
+
"--card-padding": "spacing.6"
|
3779
3805
|
},
|
3780
3806
|
title: {
|
3781
3807
|
textStyle: "xl"
|
@@ -3786,19 +3812,41 @@ var cardSlotRecipe = defineSlotRecipe14({
|
|
3786
3812
|
elevated: {
|
3787
3813
|
root: {
|
3788
3814
|
bg: "bg.panel",
|
3789
|
-
boxShadow: "md"
|
3815
|
+
boxShadow: "md",
|
3816
|
+
borderWidth: "0.5px",
|
3817
|
+
borderColor: "border",
|
3818
|
+
_pressable: {
|
3819
|
+
transitionProperty: "common",
|
3820
|
+
transitionDuration: "fast",
|
3821
|
+
_hover: {
|
3822
|
+
borderColor: "border.emphasized"
|
3823
|
+
}
|
3824
|
+
}
|
3790
3825
|
}
|
3791
3826
|
},
|
3792
3827
|
outline: {
|
3793
3828
|
root: {
|
3794
3829
|
bg: "bg.panel",
|
3795
3830
|
borderWidth: "1px",
|
3796
|
-
borderColor: "border"
|
3831
|
+
borderColor: "border",
|
3832
|
+
_pressable: {
|
3833
|
+
transitionProperty: "common",
|
3834
|
+
transitionDuration: "fast",
|
3835
|
+
_hover: {
|
3836
|
+
borderColor: "border.emphasized"
|
3837
|
+
}
|
3838
|
+
}
|
3797
3839
|
}
|
3798
3840
|
},
|
3799
3841
|
subtle: {
|
3800
3842
|
root: {
|
3801
|
-
bg: "
|
3843
|
+
bg: "colorPalette.muted"
|
3844
|
+
}
|
3845
|
+
},
|
3846
|
+
solid: {
|
3847
|
+
root: {
|
3848
|
+
bg: "colorPalette.solid",
|
3849
|
+
color: "colorPalette.contrast"
|
3802
3850
|
}
|
3803
3851
|
}
|
3804
3852
|
}
|
@@ -4085,14 +4133,14 @@ var collapsibleSlotRecipe = defineSlotRecipe17({
|
|
4085
4133
|
className: "chakra-collapsible",
|
4086
4134
|
base: {
|
4087
4135
|
content: {
|
4088
|
-
overflow: "hidden",
|
4089
4136
|
_open: {
|
4090
4137
|
animationName: "expand-height, fade-in",
|
4091
4138
|
animationDuration: "moderate"
|
4092
4139
|
},
|
4093
4140
|
_closed: {
|
4094
4141
|
animationName: "collapse-height, fade-out",
|
4095
|
-
animationDuration: "moderate"
|
4142
|
+
animationDuration: "moderate",
|
4143
|
+
overflow: "hidden"
|
4096
4144
|
}
|
4097
4145
|
}
|
4098
4146
|
}
|
@@ -4687,7 +4735,12 @@ var emptyStateSlotRecipe = defineSlotRecipe22({
|
|
4687
4735
|
className: "chakra-empty-state",
|
4688
4736
|
base: {
|
4689
4737
|
root: {
|
4690
|
-
width: "full"
|
4738
|
+
width: "full",
|
4739
|
+
height: "full",
|
4740
|
+
display: "flex",
|
4741
|
+
flexDirection: "column",
|
4742
|
+
alignItems: "center",
|
4743
|
+
justifyContent: "center"
|
4691
4744
|
},
|
4692
4745
|
content: {
|
4693
4746
|
display: "flex",
|
@@ -4818,12 +4871,21 @@ var fieldSlotRecipe = defineSlotRecipe23({
|
|
4818
4871
|
},
|
4819
4872
|
horizontal: {
|
4820
4873
|
root: {
|
4821
|
-
|
4874
|
+
display: "grid",
|
4875
|
+
gridTemplateColumns: "var(--field-label-width, 8rem) 1fr",
|
4822
4876
|
alignItems: "center",
|
4823
|
-
|
4877
|
+
"&:has(textarea)": {
|
4878
|
+
alignItems: "flex-start",
|
4879
|
+
"& label": {
|
4880
|
+
pt: 1.5
|
4881
|
+
}
|
4882
|
+
}
|
4824
4883
|
},
|
4825
|
-
|
4826
|
-
|
4884
|
+
helperText: {
|
4885
|
+
gridColumn: 2
|
4886
|
+
},
|
4887
|
+
errorText: {
|
4888
|
+
gridColumn: 2
|
4827
4889
|
}
|
4828
4890
|
}
|
4829
4891
|
}
|
@@ -5210,6 +5272,7 @@ var selectSlotRecipe = defineSlotRecipe28({
|
|
5210
5272
|
userSelect: "none",
|
5211
5273
|
textAlign: "start",
|
5212
5274
|
focusVisibleRing: "inside",
|
5275
|
+
focusRingWidth: 0,
|
5213
5276
|
_placeholderShown: {
|
5214
5277
|
color: "fg.muted"
|
5215
5278
|
},
|
@@ -5218,6 +5281,12 @@ var selectSlotRecipe = defineSlotRecipe28({
|
|
5218
5281
|
},
|
5219
5282
|
_invalid: {
|
5220
5283
|
borderColor: "border.error"
|
5284
|
+
},
|
5285
|
+
_hover: {
|
5286
|
+
borderColor: "border.emphasized",
|
5287
|
+
_focusVisible: {
|
5288
|
+
borderColor: "var(--focus-ring-color)"
|
5289
|
+
}
|
5221
5290
|
}
|
5222
5291
|
},
|
5223
5292
|
indicatorGroup: {
|
@@ -5652,7 +5721,8 @@ var numberInputSlotRecipe = defineSlotRecipe30({
|
|
5652
5721
|
root: {
|
5653
5722
|
position: "relative",
|
5654
5723
|
zIndex: "0",
|
5655
|
-
isolation: "isolate"
|
5724
|
+
isolation: "isolate",
|
5725
|
+
width: "full"
|
5656
5726
|
},
|
5657
5727
|
input: {
|
5658
5728
|
...inputRecipe.base,
|
@@ -6429,15 +6499,16 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
|
|
6429
6499
|
slots: segmentGroupAnatomy.keys(),
|
6430
6500
|
base: {
|
6431
6501
|
root: {
|
6432
|
-
"--segment-radius": "radii.
|
6433
|
-
borderRadius: "
|
6502
|
+
"--segment-radius": "radii.md",
|
6503
|
+
borderRadius: "md",
|
6434
6504
|
display: "inline-flex",
|
6435
6505
|
boxShadow: "inset",
|
6436
6506
|
minW: "max-content",
|
6437
6507
|
textAlign: "center",
|
6438
6508
|
position: "relative",
|
6439
6509
|
isolation: "isolate",
|
6440
|
-
bg: "bg.muted"
|
6510
|
+
bg: "bg.muted",
|
6511
|
+
borderWidth: "1px"
|
6441
6512
|
},
|
6442
6513
|
item: {
|
6443
6514
|
display: "flex",
|
@@ -6445,23 +6516,31 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
|
|
6445
6516
|
userSelect: "none",
|
6446
6517
|
fontSize: "sm",
|
6447
6518
|
position: "relative",
|
6448
|
-
color: "fg",
|
6519
|
+
color: "fg.subtle",
|
6520
|
+
cursor: "button",
|
6449
6521
|
borderRadius: "var(--segment-radius)",
|
6450
6522
|
_disabled: {
|
6451
6523
|
opacity: "0.5"
|
6452
6524
|
},
|
6525
|
+
_hover: {
|
6526
|
+
color: "fg"
|
6527
|
+
},
|
6453
6528
|
"&:has(input:focus-visible)": {
|
6454
|
-
focusRing: "
|
6529
|
+
focusRing: "inside",
|
6530
|
+
focusRingWidth: "1px"
|
6455
6531
|
},
|
6456
6532
|
_before: {
|
6457
6533
|
content: '""',
|
6458
6534
|
position: "absolute",
|
6459
6535
|
insetInlineStart: 0,
|
6460
|
-
insetBlock: "
|
6536
|
+
insetBlock: "0",
|
6461
6537
|
bg: "border",
|
6462
6538
|
width: "1px",
|
6463
6539
|
transition: "opacity 0.2s"
|
6464
6540
|
},
|
6541
|
+
_checked: {
|
6542
|
+
color: "fg"
|
6543
|
+
},
|
6465
6544
|
"& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
|
6466
6545
|
_before: {
|
6467
6546
|
opacity: "0"
|
@@ -6470,13 +6549,17 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
|
|
6470
6549
|
"&[data-state=checked][data-ssr]": {
|
6471
6550
|
shadow: "sm",
|
6472
6551
|
bg: "bg",
|
6552
|
+
color: "fg",
|
6473
6553
|
borderRadius: "var(--segment-radius)"
|
6474
6554
|
}
|
6475
6555
|
},
|
6476
6556
|
indicator: {
|
6477
6557
|
shadow: "sm",
|
6478
6558
|
pos: "absolute",
|
6479
|
-
bg: {
|
6559
|
+
bg: {
|
6560
|
+
base: "bg",
|
6561
|
+
_dark: "bg.emphasized"
|
6562
|
+
},
|
6480
6563
|
width: "var(--width)",
|
6481
6564
|
height: "var(--height)",
|
6482
6565
|
top: "var(--top)",
|
@@ -6499,7 +6582,7 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
|
|
6499
6582
|
},
|
6500
6583
|
sm: {
|
6501
6584
|
root: {
|
6502
|
-
height: "
|
6585
|
+
height: "7"
|
6503
6586
|
},
|
6504
6587
|
item: {
|
6505
6588
|
textStyle: "sm",
|
@@ -6509,7 +6592,7 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
|
|
6509
6592
|
},
|
6510
6593
|
md: {
|
6511
6594
|
root: {
|
6512
|
-
height: "
|
6595
|
+
height: "8"
|
6513
6596
|
},
|
6514
6597
|
item: {
|
6515
6598
|
textStyle: "sm",
|
@@ -7108,9 +7191,7 @@ var switchSlotRecipe = defineSlotRecipe43({
|
|
7108
7191
|
cursor: "not-allowed"
|
7109
7192
|
},
|
7110
7193
|
_invalid: {
|
7111
|
-
|
7112
|
-
outlineColor: "border.error",
|
7113
|
-
outlineOffset: "2px"
|
7194
|
+
focusRingColor: "border.error"
|
7114
7195
|
}
|
7115
7196
|
},
|
7116
7197
|
thumb: {
|
@@ -7415,8 +7496,7 @@ var tabsSlotRecipe = defineSlotRecipe45({
|
|
7415
7496
|
gap: "2",
|
7416
7497
|
_focusVisible: {
|
7417
7498
|
zIndex: 1,
|
7418
|
-
|
7419
|
-
outlineColor: "colorPalette.focusRing"
|
7499
|
+
focusVisibleRing: "outside"
|
7420
7500
|
},
|
7421
7501
|
_disabled: {
|
7422
7502
|
cursor: "not-allowed",
|
@@ -8624,12 +8704,67 @@ var zIndices = defineTokens16.zIndex({
|
|
8624
8704
|
max: { value: 2147483647 }
|
8625
8705
|
});
|
8626
8706
|
|
8707
|
+
// src/theme/utilities.ts
|
8708
|
+
var createFocusRing = (selector) => {
|
8709
|
+
return {
|
8710
|
+
values: ["outside", "inside", "mixed", "none"],
|
8711
|
+
transform(value, { token }) {
|
8712
|
+
var _a8;
|
8713
|
+
const focusRingColor = token("colors.colorPalette.focusRing");
|
8714
|
+
const styles = {
|
8715
|
+
inside: {
|
8716
|
+
"--focus-ring-color": focusRingColor,
|
8717
|
+
[selector]: {
|
8718
|
+
outlineOffset: "0px",
|
8719
|
+
outlineWidth: "var(--focus-ring-width, 0)",
|
8720
|
+
outlineColor: "var(--focus-ring-color)",
|
8721
|
+
outlineStyle: "var(--focus-ring-style, solid)",
|
8722
|
+
borderColor: "var(--focus-ring-color)"
|
8723
|
+
}
|
8724
|
+
},
|
8725
|
+
outside: {
|
8726
|
+
"--focus-ring-color": focusRingColor,
|
8727
|
+
[selector]: {
|
8728
|
+
outlineWidth: "var(--focus-ring-width, 1px)",
|
8729
|
+
outlineOffset: "var(--focus-ring-offset, 2px)",
|
8730
|
+
outlineStyle: "var(--focus-ring-style, solid)",
|
8731
|
+
outlineColor: "var(--focus-ring-color)"
|
8732
|
+
}
|
8733
|
+
},
|
8734
|
+
mixed: {
|
8735
|
+
"--focus-ring-color": focusRingColor,
|
8736
|
+
[selector]: {
|
8737
|
+
outlineWidth: "var(--focus-ring-width, 3px)",
|
8738
|
+
outlineStyle: "var(--focus-ring-style, solid)",
|
8739
|
+
outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
|
8740
|
+
borderColor: "var(--focus-ring-color)"
|
8741
|
+
}
|
8742
|
+
},
|
8743
|
+
none: {
|
8744
|
+
"--focus-ring-color": focusRingColor,
|
8745
|
+
[selector]: {
|
8746
|
+
outline: "none"
|
8747
|
+
}
|
8748
|
+
}
|
8749
|
+
};
|
8750
|
+
return (_a8 = styles[value]) != null ? _a8 : {};
|
8751
|
+
}
|
8752
|
+
};
|
8753
|
+
};
|
8754
|
+
var utilities = {
|
8755
|
+
focusRing: createFocusRing("&:is(:focus, [data-focus])"),
|
8756
|
+
focusVisibleRing: createFocusRing(
|
8757
|
+
"&:is(:focus-visible, [data-focus-visible])"
|
8758
|
+
)
|
8759
|
+
};
|
8760
|
+
|
8627
8761
|
// src/theme/index.ts
|
8628
8762
|
var defaultThemeConfig = defineConfig({
|
8629
8763
|
preflight: true,
|
8630
8764
|
cssVarsPrefix: "chakra",
|
8631
8765
|
cssVarsRoot: ":where(html, .chakra-theme)",
|
8632
8766
|
globalCss,
|
8767
|
+
utilities,
|
8633
8768
|
theme: {
|
8634
8769
|
breakpoints,
|
8635
8770
|
keyframes,
|
@@ -8668,6 +8803,11 @@ var defaultThemeConfig = defineConfig({
|
|
8668
8803
|
|
8669
8804
|
// src/preset.ts
|
8670
8805
|
var defaultConfig = mergeConfigs(defaultBaseConfig, defaultThemeConfig);
|
8806
|
+
var _a7;
|
8807
|
+
defaultConfig.utilities = Object.assign(
|
8808
|
+
(_a7 = defaultConfig.utilities) != null ? _a7 : {},
|
8809
|
+
utilities
|
8810
|
+
);
|
8671
8811
|
var defaultSystem = createSystem(defaultConfig);
|
8672
8812
|
|
8673
8813
|
// src/index.ts
|
@@ -8686,6 +8826,7 @@ export {
|
|
8686
8826
|
EmptyState,
|
8687
8827
|
grid_list_exports as GridList,
|
8688
8828
|
IconBadge,
|
8829
|
+
IconButton,
|
8689
8830
|
InputGroup,
|
8690
8831
|
Link,
|
8691
8832
|
loading_overlay_exports as LoadingOverlay,
|