@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/dist/index.js CHANGED
@@ -1,29 +1,40 @@
1
1
  import {
2
- Tooltip
3
- } from "./chunk-QSNSWCTM.js";
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
- Switch
35
- } from "./chunk-SA3OGTOO.js";
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
- NumberInput
44
- } from "./chunk-ULAJ3JEO.js";
61
+ SuiContext,
62
+ SuiProvider,
63
+ useLink,
64
+ useSui
65
+ } from "./chunk-O2WVT2BP.js";
45
66
  import {
46
- loading_overlay_exports,
47
- useLoadingOverlayStyles
48
- } from "./chunk-7VSTNV2B.js";
67
+ NumberInput
68
+ } from "./chunk-S5J6REMC.js";
49
69
  import {
50
- Spinner
51
- } from "./chunk-32JGENDB.js";
70
+ pagination_exports
71
+ } from "./chunk-MLJN6IOJ.js";
52
72
  import {
53
73
  PasswordInput
54
74
  } from "./chunk-CD2JUFI2.js";
55
75
  import {
56
- pagination_exports
57
- } from "./chunk-MLJN6IOJ.js";
76
+ InputGroup
77
+ } from "./chunk-PKI6YH2V.js";
58
78
  import {
59
- Persona,
60
- PersonaAvatar,
61
- defaultPresenceOptions
62
- } from "./chunk-4VH4IGVF.js";
79
+ Command
80
+ } from "./chunk-UASXI64E.js";
63
81
  import {
64
- PinInput
65
- } from "./chunk-2EUACKRH.js";
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
- namespace_exports
80
- } from "./chunk-72LEGXHY.js";
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 > &, a: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: "8",
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.muted"
574
+ bg: "colorPalette.subtle"
571
575
  },
572
576
  _expanded: {
573
- bg: "colorPalette.muted"
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
- outline: "2px solid",
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.5",
1474
- scrollPaddingBottom: "1.5"
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: "2",
1481
- scrollPaddingBottom: "2"
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: "2",
1488
- scrollPaddingBottom: "2"
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: "3",
1495
- scrollPaddingBottom: "3"
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.50}", _dark: "{colors.gray.950}" }
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/40}", _dark: "{colors.gray.900}" }
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
- base: "0px 1px 2px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.100}",
2240
- _dark: "0px 1px 1px {colors.blackAlpha.800}, 0px 0px 1px inset {colors.whiteAlpha.300}"
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
- base: "0px 4px 4px -1px {colors.blackAlpha.50}, 0px 0px 1px 1px {colors.blackAlpha.100}",
2246
- _dark: "0px 2px 4px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
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
- base: "0px 4px 8px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
2252
- _dark: "0px 4px 8px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
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
- base: "0px 8px 16px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
2258
- _dark: "0px 8px 16px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
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
- base: "0px 16px 24px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
2264
- _dark: "0px 16px 24px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
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
- base: "0px 24px 40px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}",
2270
- _dark: "0px 24px 40px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}"
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
- base: "inset 0 0 0 1px {colors.blackAlpha.100}",
2276
- _dark: "inset 0 0 0 1px {colors.whiteAlpha.100}"
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.muted"
2708
+ color: "fg/60"
2687
2709
  },
2688
2710
  tertiaryLabel: {
2689
2711
  ...baseStyleLabel,
2690
- color: "fg.muted"
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: "outside",
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: "l3",
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
- paddingInline: "var(--card-padding)",
3739
- paddingTop: "var(--card-padding)",
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
- paddingInline: "var(--card-padding)",
3755
- paddingBottom: "var(--card-padding)"
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.4"
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.6"
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.7"
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: "bg.muted"
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
- flexDirection: "row",
4874
+ display: "grid",
4875
+ gridTemplateColumns: "var(--field-label-width, 8rem) 1fr",
4822
4876
  alignItems: "center",
4823
- justifyContent: "space-between"
4877
+ "&:has(textarea)": {
4878
+ alignItems: "flex-start",
4879
+ "& label": {
4880
+ pt: 1.5
4881
+ }
4882
+ }
4824
4883
  },
4825
- label: {
4826
- flex: "0 0 var(--field-label-width, 80px)"
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.l2",
6433
- borderRadius: "l2",
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: "outside"
6529
+ focusRing: "inside",
6530
+ focusRingWidth: "1px"
6455
6531
  },
6456
6532
  _before: {
6457
6533
  content: '""',
6458
6534
  position: "absolute",
6459
6535
  insetInlineStart: 0,
6460
- insetBlock: "1.5",
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: { _light: "bg", _dark: "bg.emphasized" },
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: "8"
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: "10"
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
- outline: "2px solid",
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
- outline: "2px solid",
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,