@saas-ui/react 3.0.0-alpha.17 → 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,3 +1,9 @@
1
+ import {
2
+ steps_exports
3
+ } from "./chunk-VZG7EJ64.js";
4
+ import {
5
+ Switch
6
+ } from "./chunk-SA3OGTOO.js";
1
7
  import {
2
8
  Toaster,
3
9
  toast
@@ -8,6 +14,18 @@ import {
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";
25
+ import {
26
+ Radio,
27
+ RadioGroup
28
+ } from "./chunk-WYLMBMAH.js";
11
29
  import {
12
30
  SearchInput
13
31
  } from "./chunk-46ISJZBS.js";
@@ -17,23 +35,15 @@ import {
17
35
  import {
18
36
  namespace_exports as namespace_exports3
19
37
  } from "./chunk-BU7QENBQ.js";
20
- import {
21
- Persona,
22
- PersonaAvatar,
23
- defaultPresenceOptions
24
- } from "./chunk-4VH4IGVF.js";
25
- import {
26
- steps_exports
27
- } from "./chunk-VZG7EJ64.js";
28
- import {
29
- Switch
30
- } from "./chunk-SA3OGTOO.js";
31
38
  import {
32
39
  sidebar_exports,
33
40
  useSidebar,
34
41
  useSidebarItemStyles,
35
42
  useSidebarStyles
36
43
  } from "./chunk-GGAKUS66.js";
44
+ import {
45
+ Link
46
+ } from "./chunk-TZBAM4AD.js";
37
47
  import {
38
48
  loading_overlay_exports,
39
49
  useLoadingOverlayStyles
@@ -47,22 +57,27 @@ import {
47
57
  import {
48
58
  navbar_exports
49
59
  } from "./chunk-Q6SNJJO2.js";
60
+ import {
61
+ SuiContext,
62
+ SuiProvider,
63
+ useLink,
64
+ useSui
65
+ } from "./chunk-O2WVT2BP.js";
50
66
  import {
51
67
  NumberInput
52
- } from "./chunk-ULAJ3JEO.js";
68
+ } from "./chunk-S5J6REMC.js";
53
69
  import {
54
70
  pagination_exports
55
- } from "./chunk-5ILYOY27.js";
71
+ } from "./chunk-MLJN6IOJ.js";
56
72
  import {
57
73
  PasswordInput
58
74
  } from "./chunk-CD2JUFI2.js";
59
75
  import {
60
- PinInput
61
- } from "./chunk-2EUACKRH.js";
76
+ InputGroup
77
+ } from "./chunk-PKI6YH2V.js";
62
78
  import {
63
- Radio,
64
- RadioGroup
65
- } from "./chunk-WYLMBMAH.js";
79
+ Command
80
+ } from "./chunk-UASXI64E.js";
66
81
  import {
67
82
  namespace_exports
68
83
  } from "./chunk-72LEGXHY.js";
@@ -72,25 +87,16 @@ import {
72
87
  import {
73
88
  EmptyState
74
89
  } from "./chunk-FJFNGSPL.js";
75
- import {
76
- IconBadge
77
- } from "./chunk-I2RXEKTB.js";
78
90
  import {
79
91
  grid_list_exports
80
92
  } from "./chunk-NSD5HRIP.js";
81
- import "./chunk-KTLWEUNW.js";
82
- import {
83
- InputGroup
84
- } from "./chunk-PKI6YH2V.js";
85
93
  import {
86
- Link
87
- } from "./chunk-TZBAM4AD.js";
94
+ IconBadge
95
+ } from "./chunk-I2RXEKTB.js";
88
96
  import {
89
- SuiContext,
90
- SuiProvider,
91
- useLink,
92
- useSui
93
- } from "./chunk-O2WVT2BP.js";
97
+ IconButton
98
+ } from "./chunk-QVFJV6HJ.js";
99
+ import "./chunk-KTLWEUNW.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
  });
@@ -2305,7 +2326,7 @@ var appShellSlotRecipe = defineSlotRecipe({
2305
2326
  position: {
2306
2327
  static: {
2307
2328
  root: {
2308
- height: "100vh"
2329
+ height: "100dvh"
2309
2330
  }
2310
2331
  },
2311
2332
  fullscreen: {
@@ -2316,18 +2337,12 @@ var appShellSlotRecipe = defineSlotRecipe({
2316
2337
  }
2317
2338
  },
2318
2339
  variant: {
2319
- plain: {},
2320
- raised: {
2321
- main: {
2322
- boxShadow: "xs",
2323
- zIndex: "layer-1"
2324
- }
2325
- }
2340
+ plain: {}
2326
2341
  }
2327
2342
  },
2328
2343
  defaultVariants: {
2329
2344
  position: "static",
2330
- variant: "raised"
2345
+ variant: "plain"
2331
2346
  }
2332
2347
  });
2333
2348
 
@@ -2338,7 +2353,6 @@ var gridListSlotRecipe = defineSlotRecipe2({
2338
2353
  slots: ["root", "item", "header", "cell"],
2339
2354
  base: {
2340
2355
  root: {
2341
- py: 2,
2342
2356
  position: "relative"
2343
2357
  },
2344
2358
  item: {
@@ -2347,35 +2361,14 @@ var gridListSlotRecipe = defineSlotRecipe2({
2347
2361
  alignItems: "center",
2348
2362
  justifyContent: "space-between",
2349
2363
  flex: 1,
2350
- cursor: "pointer",
2351
2364
  userSelect: "none",
2352
- transitionProperty: "common",
2353
- transitionDuration: "normal",
2354
2365
  borderRadius: "inherit",
2355
2366
  outline: "none",
2356
- _hover: {
2357
- bg: "blackAlpha.50",
2358
- _dark: {
2359
- bg: "whiteAlpha.50"
2360
- }
2361
- },
2362
2367
  _focusVisible: {
2363
2368
  boxShadow: "outline"
2364
2369
  },
2365
- _focus: {
2366
- bg: "blackAlpha.50",
2367
- _dark: {
2368
- bg: "whiteAlpha.50"
2369
- }
2370
- },
2371
- _active: {
2372
- bg: "blackAlpha.100",
2373
- _dark: {
2374
- bg: "whiteAlpha.100"
2375
- }
2376
- },
2377
2370
  _disabled: {
2378
- cursor: "inherit",
2371
+ cursor: "disabled",
2379
2372
  opacity: 0.5,
2380
2373
  _hover: {
2381
2374
  bg: "transparent",
@@ -2397,50 +2390,92 @@ var gridListSlotRecipe = defineSlotRecipe2({
2397
2390
  position: "sticky",
2398
2391
  fontSize: "md",
2399
2392
  fontWeight: "semibold",
2400
- color: "muted"
2393
+ color: "fg.muted"
2401
2394
  },
2402
2395
  cell: {
2403
- display: "flex",
2404
2396
  flexShrink: 0
2405
2397
  }
2406
2398
  },
2407
2399
  variants: {
2400
+ interactive: {
2401
+ true: {
2402
+ item: {
2403
+ cursor: "button",
2404
+ transitionProperty: "bg",
2405
+ transitionDuration: "fast",
2406
+ _hover: {
2407
+ bg: "bg.subtle"
2408
+ },
2409
+ _active: {
2410
+ bg: "bg.subtle"
2411
+ }
2412
+ }
2413
+ }
2414
+ },
2415
+ variant: {
2416
+ simple: {},
2417
+ rounded: {
2418
+ item: {
2419
+ borderRadius: "md",
2420
+ mb: 0.5
2421
+ }
2422
+ }
2423
+ },
2408
2424
  size: {
2409
2425
  sm: {
2410
2426
  root: {
2411
- fontSize: "sm"
2427
+ textStyle: "sm",
2428
+ py: 0.5
2412
2429
  },
2413
2430
  item: {
2414
2431
  py: 1,
2415
- px: 1
2432
+ px: 2,
2433
+ gap: 1
2416
2434
  },
2417
2435
  header: {
2418
2436
  py: 1,
2419
- px: 1
2420
- },
2421
- cell: {
2422
- px: 1
2437
+ px: 2
2423
2438
  }
2424
2439
  },
2425
2440
  md: {
2426
2441
  root: {
2427
- fontSize: "md"
2442
+ textStyle: "md",
2443
+ py: 1
2428
2444
  },
2429
2445
  item: {
2430
2446
  py: 2,
2431
- px: 2
2447
+ px: 3,
2448
+ gap: 2
2432
2449
  },
2433
2450
  header: {
2434
2451
  py: 2,
2435
- px: 2
2436
- },
2437
- cell: {
2438
- px: 2
2452
+ px: 3
2439
2453
  }
2440
2454
  }
2441
2455
  }
2442
2456
  },
2457
+ compoundVariants: [
2458
+ {
2459
+ variant: "rounded",
2460
+ size: "sm",
2461
+ css: {
2462
+ root: {
2463
+ p: 1
2464
+ }
2465
+ }
2466
+ },
2467
+ {
2468
+ variant: "rounded",
2469
+ size: "md",
2470
+ css: {
2471
+ root: {
2472
+ p: 2
2473
+ }
2474
+ }
2475
+ }
2476
+ ],
2443
2477
  defaultVariants: {
2478
+ variant: "simple",
2444
2479
  size: "md"
2445
2480
  }
2446
2481
  });
@@ -2523,7 +2558,7 @@ var navbarSlotRecipe = defineSlotRecipe4({
2523
2558
  top: 0,
2524
2559
  insetX: 0,
2525
2560
  transitionProperty: "common",
2526
- transitionDuration: "normal",
2561
+ transitionDuration: "moderate",
2527
2562
  transitionTimingFunction: "ease-in-out",
2528
2563
  _hidden: {
2529
2564
  transform: "translateY(-100%)"
@@ -2559,7 +2594,7 @@ var navbarSlotRecipe = defineSlotRecipe4({
2559
2594
  boxSizing: "border-box",
2560
2595
  borderRadius: "md",
2561
2596
  transitionProperty: "common",
2562
- transitionDuration: "normal",
2597
+ transitionDuration: "moderate",
2563
2598
  lineHeight: 1,
2564
2599
  _focusVisible: {
2565
2600
  outline: "none",
@@ -2626,7 +2661,8 @@ var baseStyleLabel = defineStyle({
2626
2661
  overflow: "hidden",
2627
2662
  whiteSpace: "nowrap",
2628
2663
  textOverflow: "ellipsis",
2629
- minW: 0
2664
+ minW: 0,
2665
+ color: "fg"
2630
2666
  });
2631
2667
  var personaSlotRecipe = defineSlotRecipe5({
2632
2668
  className: "sui-persona",
@@ -2669,11 +2705,11 @@ var personaSlotRecipe = defineSlotRecipe5({
2669
2705
  label: baseStyleLabel,
2670
2706
  secondaryLabel: {
2671
2707
  ...baseStyleLabel,
2672
- color: "fg.muted"
2708
+ color: "fg/60"
2673
2709
  },
2674
2710
  tertiaryLabel: {
2675
2711
  ...baseStyleLabel,
2676
- color: "fg.muted"
2712
+ color: "fg/60"
2677
2713
  }
2678
2714
  },
2679
2715
  variants: {
@@ -2750,7 +2786,8 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
2750
2786
  cursor: "button",
2751
2787
  transitionProperty: "common",
2752
2788
  transitionDuration: "fast",
2753
- focusVisibleRing: "outside",
2789
+ focusVisibleRing: "inside",
2790
+ focusRingWidth: "1px",
2754
2791
  "& > svg": {
2755
2792
  boxSize: 4,
2756
2793
  color: "var(--sidebar-item-icon-color)"
@@ -2762,7 +2799,12 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
2762
2799
  endElement: {
2763
2800
  display: "flex",
2764
2801
  gap: "1px",
2765
- ms: "auto"
2802
+ ms: "auto",
2803
+ "& button": {
2804
+ _hover: {
2805
+ bg: "transparent"
2806
+ }
2807
+ }
2766
2808
  }
2767
2809
  },
2768
2810
  variants: {
@@ -2906,7 +2948,10 @@ var sidebarSlotRecipe = defineSlotRecipe7({
2906
2948
  },
2907
2949
  groupEndElement: {
2908
2950
  "& > button": {
2909
- boxSize: 6
2951
+ boxSize: 6,
2952
+ _hover: {
2953
+ bg: "transparent"
2954
+ }
2910
2955
  }
2911
2956
  },
2912
2957
  groupContent: {
@@ -3017,11 +3062,6 @@ var sidebarSlotRecipe = defineSlotRecipe7({
3017
3062
  },
3018
3063
  compact: {}
3019
3064
  },
3020
- variant: {
3021
- muted: {},
3022
- solid: {},
3023
- subtle: {}
3024
- },
3025
3065
  size: {
3026
3066
  md: {
3027
3067
  header: {
@@ -3041,7 +3081,6 @@ var sidebarSlotRecipe = defineSlotRecipe7({
3041
3081
  },
3042
3082
  defaultVariants: {
3043
3083
  mode: "collapsible",
3044
- variant: "muted",
3045
3084
  size: "md"
3046
3085
  }
3047
3086
  });
@@ -3709,7 +3748,7 @@ var cardSlotRecipe = defineSlotRecipe14({
3709
3748
  position: "relative",
3710
3749
  minWidth: "0",
3711
3750
  wordWrap: "break-word",
3712
- borderRadius: "l3",
3751
+ borderRadius: "lg",
3713
3752
  color: "fg",
3714
3753
  textAlign: "start"
3715
3754
  },
@@ -3721,14 +3760,15 @@ var cardSlotRecipe = defineSlotRecipe14({
3721
3760
  fontSize: "sm"
3722
3761
  },
3723
3762
  header: {
3724
- paddingInline: "var(--card-padding)",
3725
- paddingTop: "var(--card-padding)",
3763
+ padding: "var(--card-padding)",
3764
+ paddingBlock: "calc(var(--card-padding) / 1.5)",
3726
3765
  display: "flex",
3727
3766
  flexDirection: "column",
3728
3767
  gap: "1.5"
3729
3768
  },
3730
3769
  body: {
3731
3770
  padding: "var(--card-padding)",
3771
+ paddingBlock: "calc(var(--card-padding) / 1.5)",
3732
3772
  flex: "1",
3733
3773
  display: "flex",
3734
3774
  flexDirection: "column"
@@ -3737,15 +3777,15 @@ var cardSlotRecipe = defineSlotRecipe14({
3737
3777
  display: "flex",
3738
3778
  alignItems: "center",
3739
3779
  gap: "2",
3740
- paddingInline: "var(--card-padding)",
3741
- paddingBottom: "var(--card-padding)"
3780
+ padding: "var(--card-padding)",
3781
+ paddingBlock: "calc(var(--card-padding) / 1.5)"
3742
3782
  }
3743
3783
  },
3744
3784
  variants: {
3745
3785
  size: {
3746
3786
  sm: {
3747
3787
  root: {
3748
- "--card-padding": "spacing.4"
3788
+ "--card-padding": "spacing.2"
3749
3789
  },
3750
3790
  title: {
3751
3791
  textStyle: "md"
@@ -3753,7 +3793,7 @@ var cardSlotRecipe = defineSlotRecipe14({
3753
3793
  },
3754
3794
  md: {
3755
3795
  root: {
3756
- "--card-padding": "spacing.6"
3796
+ "--card-padding": "spacing.3"
3757
3797
  },
3758
3798
  title: {
3759
3799
  textStyle: "lg"
@@ -3761,7 +3801,7 @@ var cardSlotRecipe = defineSlotRecipe14({
3761
3801
  },
3762
3802
  lg: {
3763
3803
  root: {
3764
- "--card-padding": "spacing.7"
3804
+ "--card-padding": "spacing.6"
3765
3805
  },
3766
3806
  title: {
3767
3807
  textStyle: "xl"
@@ -3772,19 +3812,41 @@ var cardSlotRecipe = defineSlotRecipe14({
3772
3812
  elevated: {
3773
3813
  root: {
3774
3814
  bg: "bg.panel",
3775
- 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
+ }
3776
3825
  }
3777
3826
  },
3778
3827
  outline: {
3779
3828
  root: {
3780
3829
  bg: "bg.panel",
3781
3830
  borderWidth: "1px",
3782
- borderColor: "border"
3831
+ borderColor: "border",
3832
+ _pressable: {
3833
+ transitionProperty: "common",
3834
+ transitionDuration: "fast",
3835
+ _hover: {
3836
+ borderColor: "border.emphasized"
3837
+ }
3838
+ }
3783
3839
  }
3784
3840
  },
3785
3841
  subtle: {
3786
3842
  root: {
3787
- bg: "bg.muted"
3843
+ bg: "colorPalette.muted"
3844
+ }
3845
+ },
3846
+ solid: {
3847
+ root: {
3848
+ bg: "colorPalette.solid",
3849
+ color: "colorPalette.contrast"
3788
3850
  }
3789
3851
  }
3790
3852
  }
@@ -4071,14 +4133,14 @@ var collapsibleSlotRecipe = defineSlotRecipe17({
4071
4133
  className: "chakra-collapsible",
4072
4134
  base: {
4073
4135
  content: {
4074
- overflow: "hidden",
4075
4136
  _open: {
4076
4137
  animationName: "expand-height, fade-in",
4077
4138
  animationDuration: "moderate"
4078
4139
  },
4079
4140
  _closed: {
4080
4141
  animationName: "collapse-height, fade-out",
4081
- animationDuration: "moderate"
4142
+ animationDuration: "moderate",
4143
+ overflow: "hidden"
4082
4144
  }
4083
4145
  }
4084
4146
  }
@@ -4608,7 +4670,7 @@ var editableSlotRecipe = defineSlotRecipe21({
4608
4670
  display: "inline-flex",
4609
4671
  alignItems: "center",
4610
4672
  transitionProperty: "common",
4611
- transitionDuration: "normal",
4673
+ transitionDuration: "moderate",
4612
4674
  cursor: "text",
4613
4675
  _hover: {
4614
4676
  bg: "bg.muted"
@@ -4623,7 +4685,7 @@ var editableSlotRecipe = defineSlotRecipe21({
4623
4685
  py: "1",
4624
4686
  px: "1",
4625
4687
  transitionProperty: "common",
4626
- transitionDuration: "normal",
4688
+ transitionDuration: "moderate",
4627
4689
  width: "full",
4628
4690
  focusVisibleRing: "inside",
4629
4691
  focusRingWidth: "2px",
@@ -4673,7 +4735,12 @@ var emptyStateSlotRecipe = defineSlotRecipe22({
4673
4735
  className: "chakra-empty-state",
4674
4736
  base: {
4675
4737
  root: {
4676
- width: "full"
4738
+ width: "full",
4739
+ height: "full",
4740
+ display: "flex",
4741
+ flexDirection: "column",
4742
+ alignItems: "center",
4743
+ justifyContent: "center"
4677
4744
  },
4678
4745
  content: {
4679
4746
  display: "flex",
@@ -4804,12 +4871,21 @@ var fieldSlotRecipe = defineSlotRecipe23({
4804
4871
  },
4805
4872
  horizontal: {
4806
4873
  root: {
4807
- flexDirection: "row",
4874
+ display: "grid",
4875
+ gridTemplateColumns: "var(--field-label-width, 8rem) 1fr",
4808
4876
  alignItems: "center",
4809
- justifyContent: "space-between"
4877
+ "&:has(textarea)": {
4878
+ alignItems: "flex-start",
4879
+ "& label": {
4880
+ pt: 1.5
4881
+ }
4882
+ }
4810
4883
  },
4811
- label: {
4812
- flex: "0 0 var(--field-label-width, 80px)"
4884
+ helperText: {
4885
+ gridColumn: 2
4886
+ },
4887
+ errorText: {
4888
+ gridColumn: 2
4813
4889
  }
4814
4890
  }
4815
4891
  }
@@ -5196,6 +5272,7 @@ var selectSlotRecipe = defineSlotRecipe28({
5196
5272
  userSelect: "none",
5197
5273
  textAlign: "start",
5198
5274
  focusVisibleRing: "inside",
5275
+ focusRingWidth: 0,
5199
5276
  _placeholderShown: {
5200
5277
  color: "fg.muted"
5201
5278
  },
@@ -5204,6 +5281,12 @@ var selectSlotRecipe = defineSlotRecipe28({
5204
5281
  },
5205
5282
  _invalid: {
5206
5283
  borderColor: "border.error"
5284
+ },
5285
+ _hover: {
5286
+ borderColor: "border.emphasized",
5287
+ _focusVisible: {
5288
+ borderColor: "var(--focus-ring-color)"
5289
+ }
5207
5290
  }
5208
5291
  },
5209
5292
  indicatorGroup: {
@@ -5638,7 +5721,8 @@ var numberInputSlotRecipe = defineSlotRecipe30({
5638
5721
  root: {
5639
5722
  position: "relative",
5640
5723
  zIndex: "0",
5641
- isolation: "isolate"
5724
+ isolation: "isolate",
5725
+ width: "full"
5642
5726
  },
5643
5727
  input: {
5644
5728
  ...inputRecipe.base,
@@ -6415,15 +6499,16 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
6415
6499
  slots: segmentGroupAnatomy.keys(),
6416
6500
  base: {
6417
6501
  root: {
6418
- "--segment-radius": "radii.l2",
6419
- borderRadius: "l2",
6502
+ "--segment-radius": "radii.md",
6503
+ borderRadius: "md",
6420
6504
  display: "inline-flex",
6421
6505
  boxShadow: "inset",
6422
6506
  minW: "max-content",
6423
6507
  textAlign: "center",
6424
6508
  position: "relative",
6425
6509
  isolation: "isolate",
6426
- bg: "bg.muted"
6510
+ bg: "bg.muted",
6511
+ borderWidth: "1px"
6427
6512
  },
6428
6513
  item: {
6429
6514
  display: "flex",
@@ -6431,23 +6516,31 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
6431
6516
  userSelect: "none",
6432
6517
  fontSize: "sm",
6433
6518
  position: "relative",
6434
- color: "fg",
6519
+ color: "fg.subtle",
6520
+ cursor: "button",
6435
6521
  borderRadius: "var(--segment-radius)",
6436
6522
  _disabled: {
6437
6523
  opacity: "0.5"
6438
6524
  },
6525
+ _hover: {
6526
+ color: "fg"
6527
+ },
6439
6528
  "&:has(input:focus-visible)": {
6440
- focusRing: "outside"
6529
+ focusRing: "inside",
6530
+ focusRingWidth: "1px"
6441
6531
  },
6442
6532
  _before: {
6443
6533
  content: '""',
6444
6534
  position: "absolute",
6445
6535
  insetInlineStart: 0,
6446
- insetBlock: "1.5",
6536
+ insetBlock: "0",
6447
6537
  bg: "border",
6448
6538
  width: "1px",
6449
6539
  transition: "opacity 0.2s"
6450
6540
  },
6541
+ _checked: {
6542
+ color: "fg"
6543
+ },
6451
6544
  "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
6452
6545
  _before: {
6453
6546
  opacity: "0"
@@ -6456,13 +6549,17 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
6456
6549
  "&[data-state=checked][data-ssr]": {
6457
6550
  shadow: "sm",
6458
6551
  bg: "bg",
6552
+ color: "fg",
6459
6553
  borderRadius: "var(--segment-radius)"
6460
6554
  }
6461
6555
  },
6462
6556
  indicator: {
6463
6557
  shadow: "sm",
6464
6558
  pos: "absolute",
6465
- bg: { _light: "bg", _dark: "bg.emphasized" },
6559
+ bg: {
6560
+ base: "bg",
6561
+ _dark: "bg.emphasized"
6562
+ },
6466
6563
  width: "var(--width)",
6467
6564
  height: "var(--height)",
6468
6565
  top: "var(--top)",
@@ -6485,7 +6582,7 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
6485
6582
  },
6486
6583
  sm: {
6487
6584
  root: {
6488
- height: "8"
6585
+ height: "7"
6489
6586
  },
6490
6587
  item: {
6491
6588
  textStyle: "sm",
@@ -6495,7 +6592,7 @@ var segmentGroupSlotRecipe = defineSlotRecipe38({
6495
6592
  },
6496
6593
  md: {
6497
6594
  root: {
6498
- height: "10"
6595
+ height: "8"
6499
6596
  },
6500
6597
  item: {
6501
6598
  textStyle: "sm",
@@ -7094,9 +7191,7 @@ var switchSlotRecipe = defineSlotRecipe43({
7094
7191
  cursor: "not-allowed"
7095
7192
  },
7096
7193
  _invalid: {
7097
- outline: "2px solid",
7098
- outlineColor: "border.error",
7099
- outlineOffset: "2px"
7194
+ focusRingColor: "border.error"
7100
7195
  }
7101
7196
  },
7102
7197
  thumb: {
@@ -7401,8 +7496,7 @@ var tabsSlotRecipe = defineSlotRecipe45({
7401
7496
  gap: "2",
7402
7497
  _focusVisible: {
7403
7498
  zIndex: 1,
7404
- outline: "2px solid",
7405
- outlineColor: "colorPalette.focusRing"
7499
+ focusVisibleRing: "outside"
7406
7500
  },
7407
7501
  _disabled: {
7408
7502
  cursor: "not-allowed",
@@ -8610,12 +8704,67 @@ var zIndices = defineTokens16.zIndex({
8610
8704
  max: { value: 2147483647 }
8611
8705
  });
8612
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
+
8613
8761
  // src/theme/index.ts
8614
8762
  var defaultThemeConfig = defineConfig({
8615
8763
  preflight: true,
8616
8764
  cssVarsPrefix: "chakra",
8617
8765
  cssVarsRoot: ":where(html, .chakra-theme)",
8618
8766
  globalCss,
8767
+ utilities,
8619
8768
  theme: {
8620
8769
  breakpoints,
8621
8770
  keyframes,
@@ -8654,6 +8803,11 @@ var defaultThemeConfig = defineConfig({
8654
8803
 
8655
8804
  // src/preset.ts
8656
8805
  var defaultConfig = mergeConfigs(defaultBaseConfig, defaultThemeConfig);
8806
+ var _a7;
8807
+ defaultConfig.utilities = Object.assign(
8808
+ (_a7 = defaultConfig.utilities) != null ? _a7 : {},
8809
+ utilities
8810
+ );
8657
8811
  var defaultSystem = createSystem(defaultConfig);
8658
8812
 
8659
8813
  // src/index.ts
@@ -8672,6 +8826,7 @@ export {
8672
8826
  EmptyState,
8673
8827
  grid_list_exports as GridList,
8674
8828
  IconBadge,
8829
+ IconButton,
8675
8830
  InputGroup,
8676
8831
  Link,
8677
8832
  loading_overlay_exports as LoadingOverlay,