@saas-ui/react 3.0.0-alpha.23 → 3.0.0-alpha.25

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.
Files changed (65) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/{chunk-BU7QENBQ.js → chunk-3JZ42NYM.js} +1 -1
  3. package/dist/chunk-52XM5VXJ.js +9 -0
  4. package/dist/chunk-6MMPBMKN.js +54 -0
  5. package/dist/chunk-CZVNG73V.js +63 -0
  6. package/dist/chunk-GRUMUCSL.js +109 -0
  7. package/dist/chunk-IVLUAUU5.js +10 -0
  8. package/dist/chunk-JMYI6YXR.js +1 -0
  9. package/dist/{chunk-CD2JUFI2.js → chunk-K2SPPLAY.js} +2 -2
  10. package/dist/chunk-KE5AC3TZ.js +63 -0
  11. package/dist/{chunk-FJFNGSPL.js → chunk-NGGISORT.js} +12 -6
  12. package/dist/chunk-RLIAFHVM.js +66 -0
  13. package/dist/components/badge/index.d.cts +2 -0
  14. package/dist/components/badge/index.d.ts +2 -0
  15. package/dist/components/close-button/index.js +2 -1
  16. package/dist/components/data-list/index.cjs +33 -0
  17. package/dist/components/data-list/index.d.cts +1 -0
  18. package/dist/components/data-list/index.d.ts +1 -0
  19. package/dist/components/data-list/index.js +10 -0
  20. package/dist/components/dialog/index.cjs +35 -35
  21. package/dist/components/dialog/index.d.cts +35 -17
  22. package/dist/components/dialog/index.d.ts +35 -17
  23. package/dist/components/dialog/index.js +5 -4
  24. package/dist/components/drawer/index.cjs +34 -36
  25. package/dist/components/drawer/index.d.cts +33 -18
  26. package/dist/components/drawer/index.d.ts +33 -18
  27. package/dist/components/drawer/index.js +5 -4
  28. package/dist/components/empty-state/index.cjs +12 -10
  29. package/dist/components/empty-state/index.js +1 -1
  30. package/dist/components/file-upload/index.cjs +254 -0
  31. package/dist/components/file-upload/index.d.cts +43 -0
  32. package/dist/components/file-upload/index.d.ts +43 -0
  33. package/dist/components/file-upload/index.js +10 -0
  34. package/dist/components/grid-list/index.d.cts +1 -1
  35. package/dist/components/grid-list/index.d.ts +1 -1
  36. package/dist/components/navbar/index.d.cts +3 -3
  37. package/dist/components/navbar/index.d.ts +3 -3
  38. package/dist/components/password-input/index.cjs +2 -2
  39. package/dist/components/password-input/index.js +1 -1
  40. package/dist/components/persona/index.d.cts +4 -9
  41. package/dist/components/persona/index.d.ts +4 -9
  42. package/dist/components/popover/index.cjs +214 -0
  43. package/dist/components/popover/index.d.cts +37 -0
  44. package/dist/components/popover/index.d.ts +37 -0
  45. package/dist/components/popover/index.js +11 -0
  46. package/dist/components/select/index.js +3 -2
  47. package/dist/components/sidebar/index.d.cts +11 -11
  48. package/dist/components/sidebar/index.d.ts +11 -11
  49. package/dist/components/tabs/index.cjs +35 -0
  50. package/dist/components/tabs/index.d.cts +1 -0
  51. package/dist/components/tabs/index.d.ts +1 -0
  52. package/dist/components/tabs/index.js +12 -0
  53. package/dist/components/toaster/index.cjs +161 -11
  54. package/dist/components/toaster/index.d.cts +6 -5
  55. package/dist/components/toaster/index.d.ts +6 -5
  56. package/dist/components/toaster/index.js +3 -1
  57. package/dist/index.cjs +2253 -1968
  58. package/dist/index.d.cts +5 -1
  59. package/dist/index.d.ts +5 -1
  60. package/dist/index.js +1531 -1415
  61. package/package.json +2 -2
  62. package/dist/chunk-EQ7Q6HRE.js +0 -63
  63. package/dist/chunk-HELHPHIQ.js +0 -35
  64. package/dist/chunk-VJ4NCA6R.js +0 -56
  65. /package/dist/{chunk-BKYGKH3L.js → chunk-YXGJOOMM.js} +0 -0
package/dist/index.js CHANGED
@@ -1,28 +1,51 @@
1
1
  import {
2
2
  Status
3
3
  } from "./chunk-YKSY7UOM.js";
4
+ import {
5
+ Toaster,
6
+ toast
7
+ } from "./chunk-RLIAFHVM.js";
8
+ import {
9
+ Tooltip
10
+ } from "./chunk-QSNSWCTM.js";
11
+ import {
12
+ colors
13
+ } from "./chunk-3MO37LYW.js";
14
+ import {
15
+ namespace_exports
16
+ } from "./chunk-3JZ42NYM.js";
17
+ import {
18
+ SegmentedControl
19
+ } from "./chunk-SKXSBAOS.js";
20
+ import {
21
+ sidebar_exports,
22
+ useSidebar,
23
+ useSidebarItemStyles,
24
+ useSidebarStyles
25
+ } from "./chunk-U23VDAWJ.js";
4
26
  import {
5
27
  steps_exports
6
28
  } from "./chunk-VZG7EJ64.js";
7
29
  import {
8
30
  Switch
9
31
  } from "./chunk-SA3OGTOO.js";
32
+ import {
33
+ Tabs,
34
+ useTabsContext,
35
+ useTabsStyles
36
+ } from "./chunk-IVLUAUU5.js";
10
37
  import {
11
38
  Tag
12
39
  } from "./chunk-IEWHAXXU.js";
13
40
  import {
14
- Toaster,
15
- toast
16
- } from "./chunk-HELHPHIQ.js";
17
- import {
18
- Tooltip
19
- } from "./chunk-QSNSWCTM.js";
41
+ NumberInput
42
+ } from "./chunk-S5J6REMC.js";
20
43
  import {
21
- colors
22
- } from "./chunk-3MO37LYW.js";
44
+ pagination_exports
45
+ } from "./chunk-MLJN6IOJ.js";
23
46
  import {
24
47
  PasswordInput
25
- } from "./chunk-CD2JUFI2.js";
48
+ } from "./chunk-K2SPPLAY.js";
26
49
  import {
27
50
  Persona,
28
51
  PersonaAvatar,
@@ -31,6 +54,9 @@ import {
31
54
  import {
32
55
  PinInput
33
56
  } from "./chunk-2EUACKRH.js";
57
+ import {
58
+ popover_exports
59
+ } from "./chunk-KE5AC3TZ.js";
34
60
  import {
35
61
  Radio,
36
62
  RadioGroup
@@ -39,17 +65,14 @@ import {
39
65
  SearchInput
40
66
  } from "./chunk-46ISJZBS.js";
41
67
  import {
42
- SegmentedControl
43
- } from "./chunk-SKXSBAOS.js";
68
+ IconButton
69
+ } from "./chunk-MS2ELLDY.js";
44
70
  import {
45
- namespace_exports as namespace_exports3
46
- } from "./chunk-BU7QENBQ.js";
71
+ IconBadge
72
+ } from "./chunk-I2RXEKTB.js";
47
73
  import {
48
- sidebar_exports,
49
- useSidebar,
50
- useSidebarItemStyles,
51
- useSidebarStyles
52
- } from "./chunk-U23VDAWJ.js";
74
+ InputGroup
75
+ } from "./chunk-PKI6YH2V.js";
53
76
  import {
54
77
  Link
55
78
  } from "./chunk-TZBAM4AD.js";
@@ -74,50 +97,43 @@ import {
74
97
  useSui
75
98
  } from "./chunk-O2WVT2BP.js";
76
99
  import {
77
- NumberInput
78
- } from "./chunk-S5J6REMC.js";
100
+ Command
101
+ } from "./chunk-UASXI64E.js";
79
102
  import {
80
- InputGroup
81
- } from "./chunk-PKI6YH2V.js";
103
+ DataList,
104
+ useDataListStyles
105
+ } from "./chunk-52XM5VXJ.js";
82
106
  import {
83
- pagination_exports
84
- } from "./chunk-MLJN6IOJ.js";
107
+ drawer_exports
108
+ } from "./chunk-6MMPBMKN.js";
85
109
  import {
86
- Command
87
- } from "./chunk-UASXI64E.js";
110
+ EmptyState
111
+ } from "./chunk-NGGISORT.js";
88
112
  import {
89
- namespace_exports
90
- } from "./chunk-EQ7Q6HRE.js";
113
+ dialog_exports
114
+ } from "./chunk-CZVNG73V.js";
115
+ import "./chunk-JMYI6YXR.js";
91
116
  import {
92
- namespace_exports as namespace_exports2
93
- } from "./chunk-VJ4NCA6R.js";
117
+ file_upload_exports
118
+ } from "./chunk-GRUMUCSL.js";
94
119
  import {
95
120
  CloseButton
96
- } from "./chunk-BKYGKH3L.js";
121
+ } from "./chunk-YXGJOOMM.js";
97
122
  import "./chunk-4TPVIHNO.js";
98
- import {
99
- EmptyState
100
- } from "./chunk-FJFNGSPL.js";
101
123
  import {
102
124
  grid_list_exports
103
125
  } from "./chunk-NSD5HRIP.js";
104
- import {
105
- IconBadge
106
- } from "./chunk-I2RXEKTB.js";
107
- import {
108
- IconButton
109
- } from "./chunk-MS2ELLDY.js";
110
126
  import {
111
127
  AppShell
112
128
  } from "./chunk-6ZNR6N2K.js";
113
- import {
114
- Badge
115
- } from "./chunk-INV6RT5B.js";
116
129
  import "./chunk-YHQ5JGCC.js";
117
130
  import {
118
131
  Avatar,
119
132
  AvatarGroup
120
133
  } from "./chunk-JO4WJVYO.js";
134
+ import {
135
+ Badge
136
+ } from "./chunk-INV6RT5B.js";
121
137
  import {
122
138
  breadcrumb_exports
123
139
  } from "./chunk-TT4C5VXB.js";
@@ -222,7 +238,6 @@ import { defineGlobalStyles } from "@chakra-ui/react";
222
238
  var empty = "var(--chakra-empty,/*!*/ /*!*/)";
223
239
  var globalCss = defineGlobalStyles({
224
240
  "*": {
225
- fontFeatureSettings: '"cv11"',
226
241
  "--ring-inset": empty,
227
242
  "--ring-offset-width": "0px",
228
243
  "--ring-offset-color": "#fff",
@@ -259,8 +274,14 @@ var globalCss = defineGlobalStyles({
259
274
  "--global-color-border": "colors.border",
260
275
  "--cursor-button": "default",
261
276
  "--radius-factor": "1",
277
+ "--radius-control": "1",
278
+ "--radius-panel": "1",
279
+ "--radius-indicator": "1",
262
280
  "--radius-full": "9999px",
263
- "--scale-factor": "1"
281
+ "--scale-factor": "1",
282
+ "--overlay-translucency": "90%",
283
+ "--overlay-effect": "blur({blurs.lg})",
284
+ "--backdrop-effect": "none"
264
285
  },
265
286
  body: {
266
287
  color: "fg",
@@ -273,41 +294,6 @@ var globalCss = defineGlobalStyles({
273
294
  },
274
295
  "*::selection": {
275
296
  bg: "colorPalette.muted/80"
276
- },
277
- '[data-radius="none"]': {
278
- "--radius-factor": "0",
279
- "--radius-full": "0"
280
- },
281
- '[data-radius="sm"]': {
282
- "--radius-factor": "0.9",
283
- "--radius-full": "0"
284
- },
285
- '[data-radius="md"]': {
286
- "--radius-factor": "1",
287
- "--radius-full": "0"
288
- },
289
- '[data-radius="lg"]': {
290
- "--radius-factor": "1.5",
291
- "--radius-full": "0"
292
- },
293
- '[data-radius="full"]': {
294
- "--radius-factor": "1.5",
295
- "--radius-full": "9999px"
296
- },
297
- '[data-scale="xs"]': {
298
- "--scale-factor": "0.9"
299
- },
300
- '[data-scale="sm"]': {
301
- "--scale-factor": "0.95"
302
- },
303
- '[data-scale="md"]': {
304
- "--scale-factor": "1"
305
- },
306
- '[data-scale="lg"]': {
307
- "--scale-factor": "1.05"
308
- },
309
- '[data-scale="xl"]': {
310
- "--scale-factor": "1.1"
311
297
  }
312
298
  });
313
299
 
@@ -421,6 +407,20 @@ var layerStyles = defineLayerStyles({
421
407
  },
422
408
  none: {
423
409
  value: {}
410
+ },
411
+ overlay: {
412
+ value: {
413
+ bg: "bg.overlay",
414
+ backdropFilter: "var(--overlay-effect)",
415
+ borderRadius: "panel.lg",
416
+ boxShadow: "lg"
417
+ }
418
+ },
419
+ backdrop: {
420
+ value: {
421
+ bg: "bg.backdrop",
422
+ backdropFilter: "var(--backdrop-effect)"
423
+ }
424
424
  }
425
425
  });
426
426
 
@@ -1661,6 +1661,18 @@ var semanticColors = defineSemanticTokens.colors({
1661
1661
  panel: {
1662
1662
  value: { _light: "{colors.white}", _dark: "{colors.gray.950}" }
1663
1663
  },
1664
+ overlay: {
1665
+ value: {
1666
+ _light: "color-mix(in oklch, {colors.white} var(--overlay-translucency), transparent)",
1667
+ _dark: "color-mix(in srgb, var(--overlay-translucency), {colors.gray.950} 100%)"
1668
+ }
1669
+ },
1670
+ backdrop: {
1671
+ value: {
1672
+ _light: "{colors.black/30}",
1673
+ _dark: "{colors.black/30}"
1674
+ }
1675
+ },
1664
1676
  error: {
1665
1677
  value: { _light: "{colors.red.50}", _dark: "{colors.red.950}" }
1666
1678
  },
@@ -2268,7 +2280,40 @@ import { defineSemanticTokens as defineSemanticTokens2 } from "@chakra-ui/react"
2268
2280
  var semanticRadii = defineSemanticTokens2.radii({
2269
2281
  l1: { value: "{radii.xs}" },
2270
2282
  l2: { value: "{radii.sm}" },
2271
- l3: { value: "{radii.md}" }
2283
+ l3: { value: "{radii.md}" },
2284
+ control: {
2285
+ sm: {
2286
+ value: "calc({radii.xs} * var(--scale-factor) * var(--radius-control))"
2287
+ },
2288
+ md: {
2289
+ value: "calc({radii.sm} * var(--scale-factor) * var(--radius-control))"
2290
+ },
2291
+ lg: {
2292
+ value: "calc({radii.md} * var(--scale-factor) * var(--radius-control))"
2293
+ }
2294
+ },
2295
+ panel: {
2296
+ sm: {
2297
+ value: "calc({radii.sm} * var(--scale-factor) * var(--radius-panel))"
2298
+ },
2299
+ md: {
2300
+ value: "calc({radii.md} * var(--scale-factor) * var(--radius-panel))"
2301
+ },
2302
+ lg: {
2303
+ value: "calc({radii.lg} * var(--scale-factor) * var(--radius-panel))"
2304
+ }
2305
+ },
2306
+ indicator: {
2307
+ sm: {
2308
+ value: "calc({radii.xs} * var(--scale-factor) * var(--radius-indicator))"
2309
+ },
2310
+ md: {
2311
+ value: "calc({radii.sm} * var(--scale-factor) * var(--radius-indicator))"
2312
+ },
2313
+ lg: {
2314
+ value: "calc({radii.md} * var(--scale-factor) * var(--radius-indicator))"
2315
+ }
2316
+ }
2272
2317
  });
2273
2318
 
2274
2319
  // src/theme/semantic-tokens/shadows.ts
@@ -2276,37 +2321,37 @@ import { defineSemanticTokens as defineSemanticTokens3 } from "@chakra-ui/react"
2276
2321
  var semanticShadows = defineSemanticTokens3.shadows({
2277
2322
  xs: {
2278
2323
  value: {
2279
- _light: "0px 1px 2px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/20}",
2324
+ _light: "0px 1px 2px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/5}",
2280
2325
  _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
2281
2326
  }
2282
2327
  },
2283
2328
  sm: {
2284
2329
  value: {
2285
- _light: "0px 2px 4px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/30}",
2330
+ _light: "0px 2px 4px {colors.gray.900/5}, 0px 0px 2px {colors.gray.900/5}",
2286
2331
  _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2287
2332
  }
2288
2333
  },
2289
2334
  md: {
2290
2335
  value: {
2291
- _light: "0px 4px 8px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/30}",
2336
+ _light: "0px 4px 8px {colors.gray.900/5}, 0px 0px 3px {colors.gray.900/5}",
2292
2337
  _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2293
2338
  }
2294
2339
  },
2295
2340
  lg: {
2296
2341
  value: {
2297
- _light: "0px 8px 16px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/30}",
2342
+ _light: "0px 8px 16px {colors.gray.900/5}, 0px 0px 4px {colors.gray.900/5}",
2298
2343
  _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2299
2344
  }
2300
2345
  },
2301
2346
  xl: {
2302
2347
  value: {
2303
- _light: "0px 16px 24px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/30}",
2348
+ _light: "0px 16px 24px {colors.gray.900/5}, 0px 0px 5px {colors.gray.900/5}",
2304
2349
  _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2305
2350
  }
2306
2351
  },
2307
2352
  "2xl": {
2308
2353
  value: {
2309
- _light: "0px 24px 40px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
2354
+ _light: "0px 24px 40px {colors.gray.900/10}, 0px 0px 6px {colors.gray.900/5}",
2310
2355
  _dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
2311
2356
  }
2312
2357
  },
@@ -2503,15 +2548,95 @@ var avatarSlotRecipe = defineSlotRecipe2({
2503
2548
  }
2504
2549
  });
2505
2550
 
2506
- // src/components/dialog/dialog.recipe.ts
2551
+ // src/components/data-list/data-list.recipe.ts
2507
2552
  import { defineSlotRecipe as defineSlotRecipe3 } from "@chakra-ui/react";
2553
+ import { dataListAnatomy } from "@chakra-ui/react/anatomy";
2554
+ var dataListSlotRecipe = defineSlotRecipe3({
2555
+ slots: dataListAnatomy.keys(),
2556
+ className: "chakra-data-list",
2557
+ base: {
2558
+ itemLabel: {
2559
+ color: "fg.muted",
2560
+ display: "flex",
2561
+ alignItems: "center",
2562
+ gap: "1"
2563
+ },
2564
+ itemValue: {
2565
+ display: "flex",
2566
+ minWidth: "0",
2567
+ flex: "1"
2568
+ }
2569
+ },
2570
+ variants: {
2571
+ orientation: {
2572
+ horizontal: {
2573
+ root: {
2574
+ display: "flex",
2575
+ flexDirection: "column"
2576
+ },
2577
+ item: {
2578
+ display: "inline-flex",
2579
+ alignItems: "center",
2580
+ gap: "4"
2581
+ },
2582
+ itemLabel: {
2583
+ minWidth: "120px"
2584
+ }
2585
+ },
2586
+ vertical: {
2587
+ root: {
2588
+ display: "flex",
2589
+ flexDirection: "column"
2590
+ },
2591
+ item: {
2592
+ display: "flex",
2593
+ flexDirection: "column",
2594
+ gap: "1"
2595
+ }
2596
+ }
2597
+ },
2598
+ size: {
2599
+ sm: {
2600
+ root: {
2601
+ gap: "3"
2602
+ },
2603
+ item: {
2604
+ textStyle: "xs"
2605
+ }
2606
+ },
2607
+ md: {
2608
+ root: {
2609
+ gap: "4"
2610
+ },
2611
+ item: {
2612
+ textStyle: "sm"
2613
+ }
2614
+ },
2615
+ lg: {
2616
+ root: {
2617
+ gap: "5"
2618
+ },
2619
+ item: {
2620
+ textStyle: "md"
2621
+ }
2622
+ }
2623
+ }
2624
+ },
2625
+ defaultVariants: {
2626
+ size: "md",
2627
+ orientation: "vertical"
2628
+ }
2629
+ });
2630
+
2631
+ // src/components/dialog/dialog.recipe.ts
2632
+ import { defineSlotRecipe as defineSlotRecipe4 } from "@chakra-ui/react";
2508
2633
  import { dialogAnatomy } from "@chakra-ui/react/anatomy";
2509
- var dialogSlotRecipe = defineSlotRecipe3({
2634
+ var dialogSlotRecipe = defineSlotRecipe4({
2510
2635
  slots: dialogAnatomy.keys(),
2511
2636
  className: "chakra-dialog",
2512
2637
  base: {
2513
2638
  backdrop: {
2514
- bg: "blackAlpha.500",
2639
+ layerStyle: "backdrop",
2515
2640
  pos: "fixed",
2516
2641
  left: 0,
2517
2642
  top: 0,
@@ -2534,7 +2659,7 @@ var dialogSlotRecipe = defineSlotRecipe3({
2534
2659
  position: "fixed",
2535
2660
  left: 0,
2536
2661
  top: 0,
2537
- "--dialog-z-index": "zIndex.modal",
2662
+ "--dialog-z-index": "zIndex.layer-4",
2538
2663
  zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
2539
2664
  justifyContent: "center",
2540
2665
  overscrollBehaviorY: "none"
@@ -2545,13 +2670,11 @@ var dialogSlotRecipe = defineSlotRecipe3({
2545
2670
  position: "relative",
2546
2671
  width: "100%",
2547
2672
  outline: 0,
2548
- borderRadius: "l3",
2549
2673
  textStyle: "sm",
2550
2674
  my: "var(--dialog-margin, var(--dialog-base-margin))",
2551
- "--dialog-z-index": "zIndex.modal",
2675
+ "--dialog-z-index": "zIndex.layer-4",
2552
2676
  zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
2553
- bg: "bg.panel",
2554
- boxShadow: "lg",
2677
+ layerStyle: "overlay",
2555
2678
  _open: {
2556
2679
  animationDuration: "moderate"
2557
2680
  },
@@ -2728,14 +2851,14 @@ var dialogSlotRecipe = defineSlotRecipe3({
2728
2851
  });
2729
2852
 
2730
2853
  // src/components/drawer/drawer.recipe.ts
2731
- import { defineSlotRecipe as defineSlotRecipe4 } from "@chakra-ui/react";
2854
+ import { defineSlotRecipe as defineSlotRecipe5 } from "@chakra-ui/react";
2732
2855
  import { drawerAnatomy } from "@chakra-ui/react/anatomy";
2733
- var drawerSlotRecipe = defineSlotRecipe4({
2856
+ var drawerSlotRecipe = defineSlotRecipe5({
2734
2857
  slots: drawerAnatomy.keys(),
2735
2858
  className: "chakra-drawer",
2736
2859
  base: {
2737
2860
  backdrop: {
2738
- bg: "blackAlpha.500",
2861
+ layerStyle: "backdrop",
2739
2862
  pos: "fixed",
2740
2863
  insetInlineStart: 0,
2741
2864
  top: 0,
@@ -2756,6 +2879,7 @@ var drawerSlotRecipe = defineSlotRecipe4({
2756
2879
  width: "100vw",
2757
2880
  height: "100dvh",
2758
2881
  position: "fixed",
2882
+ padding: 2,
2759
2883
  insetInlineStart: 0,
2760
2884
  top: 0,
2761
2885
  zIndex: "modal",
@@ -2767,12 +2891,12 @@ var drawerSlotRecipe = defineSlotRecipe4({
2767
2891
  position: "relative",
2768
2892
  width: "100%",
2769
2893
  outline: 0,
2770
- zIndex: "modal",
2894
+ "--drawer-z-index": "zIndex.layer-4",
2895
+ zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
2771
2896
  textStyle: "sm",
2772
2897
  maxH: "100dvh",
2773
2898
  color: "inherit",
2774
- bg: "bg.panel",
2775
- boxShadow: "lg",
2899
+ layerStyle: "overlay",
2776
2900
  _open: {
2777
2901
  animationDuration: "slowest",
2778
2902
  animationTimingFunction: "ease-in-smooth"
@@ -2908,72 +3032,288 @@ var drawerSlotRecipe = defineSlotRecipe4({
2908
3032
  }
2909
3033
  }
2910
3034
  },
2911
- contained: {
3035
+ attached: {
2912
3036
  true: {
2913
3037
  positioner: {
2914
- padding: "2"
3038
+ padding: 0
2915
3039
  },
2916
3040
  content: {
2917
- borderRadius: "md"
3041
+ borderRadius: "none"
2918
3042
  }
2919
3043
  }
2920
3044
  }
2921
3045
  },
2922
3046
  defaultVariants: {
2923
3047
  size: "xs",
2924
- placement: "end",
2925
- contained: true
3048
+ placement: "end"
2926
3049
  }
2927
3050
  });
2928
3051
 
2929
- // src/components/grid-list/grid-list.recipe.ts
2930
- import { defineSlotRecipe as defineSlotRecipe5 } from "@chakra-ui/react";
2931
- var gridListSlotRecipe = defineSlotRecipe5({
2932
- className: "sui-grid-list",
2933
- slots: ["root", "item", "header", "cell"],
3052
+ // src/components/empty-state/empty-state.recipe.ts
3053
+ import { defineSlotRecipe as defineSlotRecipe6 } from "@chakra-ui/react";
3054
+ import { emptyStateAnatomy } from "@chakra-ui/react/anatomy";
3055
+ var emptyStateSlotRecipe = defineSlotRecipe6({
3056
+ slots: emptyStateAnatomy.extendWith("actions").keys(),
3057
+ className: "chakra-empty-state",
2934
3058
  base: {
2935
3059
  root: {
2936
- position: "relative"
3060
+ width: "full",
3061
+ height: "full",
3062
+ display: "flex",
3063
+ flexDirection: "column",
3064
+ alignItems: "center",
3065
+ justifyContent: "center"
2937
3066
  },
2938
- item: {
3067
+ content: {
2939
3068
  display: "flex",
2940
- flexDirection: "row",
3069
+ flexDirection: "column",
2941
3070
  alignItems: "center",
2942
- justifyContent: "space-between",
2943
- flex: 1,
2944
- userSelect: "none",
2945
- borderRadius: "inherit",
2946
- outline: "none",
2947
- _focusVisible: {
2948
- boxShadow: "outline"
2949
- },
2950
- _disabled: {
2951
- cursor: "disabled",
2952
- opacity: 0.5,
2953
- _hover: {
2954
- bg: "transparent",
2955
- _dark: {
2956
- bg: "transparent"
2957
- }
2958
- },
2959
- _active: {
2960
- bg: "transparent",
2961
- _dark: {
2962
- bg: "transparent"
2963
- }
2964
- }
2965
- }
3071
+ justifyContent: "center"
2966
3072
  },
2967
- header: {
3073
+ indicator: {
2968
3074
  display: "flex",
2969
- flexDirection: "row",
2970
- position: "sticky",
2971
- fontSize: "md",
2972
- fontWeight: "semibold",
3075
+ alignItems: "center",
3076
+ justifyContent: "center",
3077
+ color: "colorPalette.solid",
3078
+ _icon: {
3079
+ boxSize: "1em"
3080
+ }
3081
+ },
3082
+ title: {
3083
+ fontWeight: "semibold"
3084
+ },
3085
+ description: {
3086
+ textStyle: "sm",
2973
3087
  color: "fg.muted"
2974
3088
  },
2975
- cell: {
2976
- flexShrink: 0
3089
+ actions: {
3090
+ display: "flex",
3091
+ flexDirection: "row",
3092
+ gap: "2"
3093
+ }
3094
+ },
3095
+ variants: {
3096
+ size: {
3097
+ sm: {
3098
+ root: {
3099
+ px: "4",
3100
+ py: "6"
3101
+ },
3102
+ indicator: {
3103
+ textStyle: "3xl",
3104
+ mb: "2"
3105
+ },
3106
+ title: {
3107
+ textStyle: "md"
3108
+ },
3109
+ description: {
3110
+ textStyle: "xs"
3111
+ },
3112
+ content: {},
3113
+ actions: {
3114
+ mt: "2"
3115
+ }
3116
+ },
3117
+ md: {
3118
+ root: {
3119
+ px: "8",
3120
+ py: "12"
3121
+ },
3122
+ indicator: {
3123
+ textStyle: "4xl",
3124
+ mb: "3"
3125
+ },
3126
+ title: {
3127
+ textStyle: "lg"
3128
+ },
3129
+ description: {
3130
+ textStyle: "sm"
3131
+ },
3132
+ content: {},
3133
+ actions: {
3134
+ mt: "3"
3135
+ }
3136
+ },
3137
+ lg: {
3138
+ root: {
3139
+ px: "12",
3140
+ py: "16"
3141
+ },
3142
+ indicator: {
3143
+ textStyle: "6xl",
3144
+ mb: "4"
3145
+ },
3146
+ title: {
3147
+ textStyle: "xl"
3148
+ },
3149
+ description: {
3150
+ textStyle: "md"
3151
+ },
3152
+ content: {},
3153
+ actions: {
3154
+ mt: "4"
3155
+ }
3156
+ }
3157
+ },
3158
+ align: {
3159
+ start: {
3160
+ content: {
3161
+ alignItems: "flex-start"
3162
+ }
3163
+ },
3164
+ center: {
3165
+ content: {
3166
+ alignItems: "center"
3167
+ }
3168
+ }
3169
+ }
3170
+ },
3171
+ defaultVariants: {
3172
+ size: "md",
3173
+ align: "center"
3174
+ }
3175
+ });
3176
+
3177
+ // src/components/file-upload/file-upload.recipe.ts
3178
+ import { defineSlotRecipe as defineSlotRecipe7 } from "@chakra-ui/react";
3179
+ import { fileUploadAnatomy } from "@chakra-ui/react/anatomy";
3180
+ var fileUploadSlotRecipe = defineSlotRecipe7({
3181
+ className: "chakra-file-upload",
3182
+ slots: fileUploadAnatomy.keys(),
3183
+ base: {
3184
+ root: {
3185
+ display: "flex",
3186
+ flexDirection: "column",
3187
+ gap: "4",
3188
+ width: "100%",
3189
+ alignItems: "flex-start"
3190
+ },
3191
+ label: {
3192
+ fontWeight: "medium",
3193
+ textStyle: "sm"
3194
+ },
3195
+ dropzone: {
3196
+ background: "bg",
3197
+ borderRadius: "panel.md",
3198
+ borderWidth: "1px",
3199
+ borderStyle: "dashed",
3200
+ display: "flex",
3201
+ alignItems: "center",
3202
+ flexDirection: "column",
3203
+ gap: "4",
3204
+ justifyContent: "center",
3205
+ p: "4",
3206
+ transition: "backgrounds",
3207
+ focusVisibleRing: "outside",
3208
+ _dragging: {
3209
+ bg: "colorPalette.subtle",
3210
+ borderStyle: "solid",
3211
+ borderColor: "colorPalette.solid"
3212
+ }
3213
+ },
3214
+ dropzoneContent: {
3215
+ display: "flex",
3216
+ flexDirection: "column",
3217
+ alignItems: "center",
3218
+ textAlign: "center",
3219
+ gap: "4",
3220
+ textStyle: "sm"
3221
+ },
3222
+ item: {
3223
+ textStyle: "sm",
3224
+ animationName: "fade-in",
3225
+ animationDuration: "moderate",
3226
+ background: "bg",
3227
+ borderRadius: "panel.md",
3228
+ borderWidth: "1px",
3229
+ width: "100%",
3230
+ display: "flex",
3231
+ alignItems: "center",
3232
+ gap: "3",
3233
+ px: "4",
3234
+ py: "2"
3235
+ },
3236
+ itemGroup: {
3237
+ width: "100%",
3238
+ display: "flex",
3239
+ flexDirection: "column",
3240
+ gap: "3"
3241
+ },
3242
+ itemName: {
3243
+ color: "fg",
3244
+ fontWeight: "medium",
3245
+ lineClamp: "1"
3246
+ },
3247
+ itemContent: {
3248
+ display: "flex",
3249
+ flexDirection: "column",
3250
+ gap: "0.5",
3251
+ flex: "1"
3252
+ },
3253
+ itemSizeText: {
3254
+ color: "fg.muted",
3255
+ textStyle: "xs"
3256
+ },
3257
+ itemDeleteTrigger: {
3258
+ alignSelf: "flex-start"
3259
+ },
3260
+ itemPreviewImage: {
3261
+ width: "10",
3262
+ height: "10",
3263
+ objectFit: "scale-down"
3264
+ }
3265
+ },
3266
+ defaultVariants: {}
3267
+ });
3268
+
3269
+ // src/components/grid-list/grid-list.recipe.ts
3270
+ import { defineSlotRecipe as defineSlotRecipe8 } from "@chakra-ui/react";
3271
+ var gridListSlotRecipe = defineSlotRecipe8({
3272
+ className: "sui-grid-list",
3273
+ slots: ["root", "item", "header", "cell"],
3274
+ base: {
3275
+ root: {
3276
+ position: "relative"
3277
+ },
3278
+ item: {
3279
+ display: "flex",
3280
+ flexDirection: "row",
3281
+ alignItems: "center",
3282
+ justifyContent: "space-between",
3283
+ flex: 1,
3284
+ userSelect: "none",
3285
+ borderRadius: "inherit",
3286
+ outline: "none",
3287
+ _focusVisible: {
3288
+ boxShadow: "outline"
3289
+ },
3290
+ _disabled: {
3291
+ cursor: "disabled",
3292
+ opacity: 0.5,
3293
+ _hover: {
3294
+ bg: "transparent",
3295
+ _dark: {
3296
+ bg: "transparent"
3297
+ }
3298
+ },
3299
+ _active: {
3300
+ bg: "transparent",
3301
+ _dark: {
3302
+ bg: "transparent"
3303
+ }
3304
+ }
3305
+ }
3306
+ },
3307
+ header: {
3308
+ display: "flex",
3309
+ flexDirection: "row",
3310
+ position: "sticky",
3311
+ fontSize: "md",
3312
+ fontWeight: "semibold",
3313
+ color: "fg.muted"
3314
+ },
3315
+ cell: {
3316
+ flexShrink: 0
2977
3317
  }
2978
3318
  },
2979
3319
  variants: {
@@ -3061,8 +3401,8 @@ var gridListSlotRecipe = defineSlotRecipe5({
3061
3401
  });
3062
3402
 
3063
3403
  // src/components/loading-overlay/loading-overlay.recipe.ts
3064
- import { defineSlotRecipe as defineSlotRecipe6 } from "@chakra-ui/react";
3065
- var loadingOverlaySlotRecipe = defineSlotRecipe6({
3404
+ import { defineSlotRecipe as defineSlotRecipe9 } from "@chakra-ui/react";
3405
+ var loadingOverlaySlotRecipe = defineSlotRecipe9({
3066
3406
  className: "sui-loading-overlay",
3067
3407
  slots: ["root", "text"],
3068
3408
  base: {
@@ -3122,9 +3462,133 @@ var loadingOverlaySlotRecipe = defineSlotRecipe6({
3122
3462
  }
3123
3463
  });
3124
3464
 
3465
+ // src/components/menu/menu.recipe.ts
3466
+ import { defineSlotRecipe as defineSlotRecipe10 } from "@chakra-ui/react";
3467
+ import { menuAnatomy } from "@chakra-ui/react/anatomy";
3468
+ var menuSlotRecipe = defineSlotRecipe10({
3469
+ className: "chakra-menu",
3470
+ slots: menuAnatomy.keys(),
3471
+ base: {
3472
+ content: {
3473
+ layerStyle: "overlay",
3474
+ boxShadow: "md",
3475
+ borderWidth: "1px",
3476
+ borderColor: "border",
3477
+ outline: 0,
3478
+ color: "fg",
3479
+ maxHeight: "var(--available-height)",
3480
+ "--menu-z-index": "zIndex.layer-3",
3481
+ zIndex: "calc(var(--menu-z-index) + var(--layer-index, 0))",
3482
+ overflow: "hidden",
3483
+ _open: {
3484
+ animationStyle: "slide-fade-in",
3485
+ animationDuration: "fast"
3486
+ },
3487
+ _closed: {
3488
+ animationStyle: "slide-fade-out",
3489
+ animationDuration: "faster"
3490
+ }
3491
+ },
3492
+ item: {
3493
+ textDecoration: "none",
3494
+ color: "fg",
3495
+ userSelect: "none",
3496
+ borderRadius: "control.md",
3497
+ width: "100%",
3498
+ display: "flex",
3499
+ cursor: "menuitem",
3500
+ alignItems: "center",
3501
+ textAlign: "start",
3502
+ position: "relative",
3503
+ flex: "0 0 auto",
3504
+ outline: 0,
3505
+ _disabled: {
3506
+ layerStyle: "disabled"
3507
+ }
3508
+ },
3509
+ itemText: {
3510
+ flex: "1"
3511
+ },
3512
+ itemGroupLabel: {
3513
+ px: "2",
3514
+ py: "1.5",
3515
+ fontWeight: "semibold",
3516
+ textStyle: "sm"
3517
+ },
3518
+ indicator: {
3519
+ display: "inline-flex",
3520
+ alignItems: "center",
3521
+ justifyContent: "center",
3522
+ flexShrink: "0"
3523
+ },
3524
+ itemCommand: {
3525
+ opacity: "0.6",
3526
+ textStyle: "xs",
3527
+ ms: "auto",
3528
+ ps: "4",
3529
+ letterSpacing: "widest"
3530
+ },
3531
+ separator: {
3532
+ height: "1px",
3533
+ bg: "bg.muted",
3534
+ my: "1",
3535
+ mx: "-1"
3536
+ }
3537
+ },
3538
+ variants: {
3539
+ variant: {
3540
+ subtle: {
3541
+ item: {
3542
+ _highlighted: {
3543
+ bg: "bg.subtle"
3544
+ }
3545
+ }
3546
+ },
3547
+ solid: {
3548
+ item: {
3549
+ _highlighted: {
3550
+ bg: "colorPalette.solid",
3551
+ color: "colorPalette.contrast"
3552
+ }
3553
+ }
3554
+ }
3555
+ },
3556
+ size: {
3557
+ sm: {
3558
+ content: {
3559
+ minW: "8rem",
3560
+ padding: "0.5"
3561
+ },
3562
+ item: {
3563
+ gap: "1",
3564
+ textStyle: "xs",
3565
+ py: "1",
3566
+ px: "1.5"
3567
+ }
3568
+ },
3569
+ md: {
3570
+ content: {
3571
+ minW: "8rem",
3572
+ padding: "1"
3573
+ },
3574
+ item: {
3575
+ gap: "2",
3576
+ textStyle: "sm",
3577
+ py: "1.5",
3578
+ px: "2"
3579
+ }
3580
+ }
3581
+ }
3582
+ },
3583
+ defaultVariants: {
3584
+ size: "md",
3585
+ variant: "subtle"
3586
+ }
3587
+ });
3588
+
3125
3589
  // src/components/navbar/navbar.recipe.ts
3126
- import { defineSlotRecipe as defineSlotRecipe7 } from "@chakra-ui/react";
3127
- var navbarSlotRecipe = defineSlotRecipe7({
3590
+ import { defineSlotRecipe as defineSlotRecipe11 } from "@chakra-ui/react";
3591
+ var navbarSlotRecipe = defineSlotRecipe11({
3128
3592
  className: "sui-navbar",
3129
3593
  slots: ["root", "content", "brand", "item", "link"],
3130
3594
  base: {
@@ -3234,7 +3698,7 @@ var navbarSlotRecipe = defineSlotRecipe7({
3234
3698
 
3235
3699
  // src/components/persona/persona.recipe.ts
3236
3700
  import {
3237
- defineSlotRecipe as defineSlotRecipe8,
3701
+ defineSlotRecipe as defineSlotRecipe12,
3238
3702
  defineStyle
3239
3703
  } from "@chakra-ui/react";
3240
3704
  var baseStyleLabel = defineStyle({
@@ -3244,7 +3708,7 @@ var baseStyleLabel = defineStyle({
3244
3708
  minW: 0,
3245
3709
  color: "fg"
3246
3710
  });
3247
- var personaSlotRecipe = defineSlotRecipe8({
3711
+ var personaSlotRecipe = defineSlotRecipe12({
3248
3712
  className: "sui-persona",
3249
3713
  slots: [
3250
3714
  "root",
@@ -3287,54 +3751,267 @@ var personaSlotRecipe = defineSlotRecipe8({
3287
3751
  ...baseStyleLabel,
3288
3752
  color: "fg/60"
3289
3753
  },
3290
- tertiaryLabel: {
3291
- ...baseStyleLabel,
3292
- color: "fg/60"
3754
+ tertiaryLabel: {
3755
+ ...baseStyleLabel,
3756
+ color: "fg/60"
3757
+ }
3758
+ },
3759
+ variants: {
3760
+ size: {
3761
+ "2xs": {
3762
+ details: { ms: 1 },
3763
+ label: { fontSize: "xs" },
3764
+ secondaryLabel: { display: "none" },
3765
+ tertiaryLabel: { display: "none" }
3766
+ },
3767
+ xs: {
3768
+ details: { ms: 1.5 },
3769
+ label: { fontSize: "xs" },
3770
+ secondaryLabel: { display: "none" },
3771
+ tertiaryLabel: { display: "none" }
3772
+ },
3773
+ sm: {
3774
+ details: { ms: 2 },
3775
+ label: { fontSize: "sm" },
3776
+ secondaryLabel: { fontSize: "xs" },
3777
+ tertiaryLabel: { display: "none" }
3778
+ },
3779
+ md: {
3780
+ details: { ms: 2 },
3781
+ label: { fontSize: "sm" },
3782
+ secondaryLabel: { fontSize: "xs" },
3783
+ tertiaryLabel: { display: "none" }
3784
+ },
3785
+ lg: {
3786
+ details: { ms: 3 },
3787
+ label: { fontSize: "md" },
3788
+ secondaryLabel: { fontSize: "sm" },
3789
+ tertiaryLabel: { fontSize: "sm" }
3790
+ },
3791
+ xl: {
3792
+ details: { ms: 4 },
3793
+ label: { fontSize: "lg" },
3794
+ secondaryLabel: { fontSize: "md" },
3795
+ tertiaryLabel: { fontSize: "md" }
3796
+ },
3797
+ "2xl": {
3798
+ details: { ms: 4 },
3799
+ label: { fontSize: "xl" },
3800
+ secondaryLabel: { fontSize: "lg" },
3801
+ tertiaryLabel: { fontSize: "lg" }
3802
+ }
3803
+ }
3804
+ },
3805
+ defaultVariants: {
3806
+ size: "md"
3807
+ }
3808
+ });
3809
+
3810
+ // src/components/popover/popover.recipe.ts
3811
+ import { defineSlotRecipe as defineSlotRecipe13 } from "@chakra-ui/react";
3812
+ import { popoverAnatomy } from "@chakra-ui/react/anatomy";
3813
+ var popoverSlotRecipe = defineSlotRecipe13({
3814
+ className: "chakra-popover",
3815
+ slots: popoverAnatomy.keys(),
3816
+ base: {
3817
+ content: {
3818
+ layerStyle: "overlay",
3819
+ position: "relative",
3820
+ display: "flex",
3821
+ flexDirection: "column",
3822
+ textStyle: "sm",
3823
+ "--popover-bg": "colors.bg.panel",
3824
+ bg: "var(--popover-bg)",
3825
+ "--popover-size": "sizes.xs",
3826
+ "--popover-mobile-size": "calc(100dvw - 1rem)",
3827
+ width: {
3828
+ base: "min(var(--popover-mobile-size), var(--popover-size))",
3829
+ sm: "var(--popover-size)"
3830
+ },
3831
+ "--popover-z-index": "zIndex.layer-2",
3832
+ zIndex: "calc(var(--popover-z-index) + var(--layer-index, 0))",
3833
+ borderWidth: "1px",
3834
+ outline: "0",
3835
+ transformOrigin: "var(--transform-origin)",
3836
+ _open: {
3837
+ animationStyle: "scale-fade-in",
3838
+ animationDuration: "fast"
3839
+ },
3840
+ _closed: {
3841
+ animationStyle: "scale-fade-out",
3842
+ animationDuration: "faster"
3843
+ }
3844
+ },
3845
+ header: {
3846
+ paddingInline: "var(--popover-padding)",
3847
+ paddingTop: "var(--popover-padding)"
3848
+ },
3849
+ body: {
3850
+ padding: "var(--popover-padding)",
3851
+ flex: "1"
3852
+ },
3853
+ footer: {
3854
+ display: "flex",
3855
+ alignItems: "center",
3856
+ paddingInline: "var(--popover-padding)",
3857
+ paddingBottom: "var(--popover-padding)"
3858
+ },
3859
+ arrow: {
3860
+ "--arrow-size": "sizes.3",
3861
+ "--arrow-background": "var(--popover-bg)"
3862
+ },
3863
+ arrowTip: {
3864
+ borderTopWidth: "1px",
3865
+ borderInlineStartWidth: "1px"
3866
+ }
3867
+ },
3868
+ variants: {
3869
+ size: {
3870
+ xs: {
3871
+ content: {
3872
+ "--popover-padding": "spacing.3"
3873
+ }
3874
+ },
3875
+ sm: {
3876
+ content: {
3877
+ "--popover-padding": "spacing.4"
3878
+ }
3879
+ },
3880
+ md: {
3881
+ content: {
3882
+ "--popover-padding": "spacing.5"
3883
+ }
3884
+ },
3885
+ lg: {
3886
+ content: {
3887
+ "--popover-padding": "spacing.6"
3888
+ }
3889
+ }
3890
+ }
3891
+ },
3892
+ defaultVariants: {
3893
+ size: "md"
3894
+ }
3895
+ });
3896
+
3897
+ // src/components/segmented-control/segment-group.recipe.ts
3898
+ import { defineSlotRecipe as defineSlotRecipe14 } from "@chakra-ui/react";
3899
+ import { segmentGroupAnatomy } from "@chakra-ui/react/anatomy";
3900
+ var segmentGroupSlotRecipe = defineSlotRecipe14({
3901
+ className: "chakra-segment-group",
3902
+ slots: segmentGroupAnatomy.keys(),
3903
+ base: {
3904
+ root: {
3905
+ "--segment-radius": "radii.md",
3906
+ borderRadius: "md",
3907
+ display: "inline-flex",
3908
+ boxShadow: "inset",
3909
+ minW: "max-content",
3910
+ textAlign: "center",
3911
+ position: "relative",
3912
+ isolation: "isolate",
3913
+ bg: "bg.muted",
3914
+ borderWidth: "1px"
3915
+ },
3916
+ item: {
3917
+ display: "flex",
3918
+ alignItems: "center",
3919
+ userSelect: "none",
3920
+ fontSize: "sm",
3921
+ position: "relative",
3922
+ color: "fg.subtle",
3923
+ cursor: "button",
3924
+ borderRadius: "var(--segment-radius)",
3925
+ _disabled: {
3926
+ opacity: "0.5"
3927
+ },
3928
+ _hover: {
3929
+ color: "fg"
3930
+ },
3931
+ "&:has(input:focus-visible)": {
3932
+ focusRing: "inside",
3933
+ focusRingWidth: "1px"
3934
+ },
3935
+ _before: {
3936
+ content: '""',
3937
+ position: "absolute",
3938
+ insetInlineStart: 0,
3939
+ insetBlock: "0",
3940
+ bg: "border",
3941
+ width: "1px",
3942
+ transition: "opacity 0.2s"
3943
+ },
3944
+ _checked: {
3945
+ color: "fg"
3946
+ },
3947
+ "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
3948
+ _before: {
3949
+ opacity: "0"
3950
+ }
3951
+ },
3952
+ "&[data-state=checked][data-ssr]": {
3953
+ shadow: "sm",
3954
+ bg: "bg",
3955
+ color: "fg",
3956
+ borderRadius: "var(--segment-radius)"
3957
+ }
3958
+ },
3959
+ indicator: {
3960
+ shadow: "sm",
3961
+ pos: "absolute",
3962
+ bg: {
3963
+ base: "bg",
3964
+ _dark: "bg.emphasized"
3965
+ },
3966
+ width: "var(--width)",
3967
+ height: "var(--height)",
3968
+ top: "var(--top)",
3969
+ left: "var(--left)",
3970
+ zIndex: -1,
3971
+ borderRadius: "var(--segment-radius)"
3293
3972
  }
3294
3973
  },
3295
3974
  variants: {
3296
3975
  size: {
3297
- "2xs": {
3298
- details: { ms: 1 },
3299
- label: { fontSize: "xs" },
3300
- secondaryLabel: { display: "none" },
3301
- tertiaryLabel: { display: "none" }
3302
- },
3303
3976
  xs: {
3304
- details: { ms: 1.5 },
3305
- label: { fontSize: "xs" },
3306
- secondaryLabel: { display: "none" },
3307
- tertiaryLabel: { display: "none" }
3977
+ root: {
3978
+ height: "6"
3979
+ },
3980
+ item: {
3981
+ textStyle: "xs",
3982
+ px: "3",
3983
+ gap: "1"
3984
+ }
3308
3985
  },
3309
3986
  sm: {
3310
- details: { ms: 2 },
3311
- label: { fontSize: "sm" },
3312
- secondaryLabel: { fontSize: "xs" },
3313
- tertiaryLabel: { display: "none" }
3987
+ root: {
3988
+ height: "7"
3989
+ },
3990
+ item: {
3991
+ textStyle: "sm",
3992
+ px: "4",
3993
+ gap: "2"
3994
+ }
3314
3995
  },
3315
3996
  md: {
3316
- details: { ms: 2 },
3317
- label: { fontSize: "sm" },
3318
- secondaryLabel: { fontSize: "xs" },
3319
- tertiaryLabel: { display: "none" }
3997
+ root: {
3998
+ height: "8"
3999
+ },
4000
+ item: {
4001
+ textStyle: "md",
4002
+ px: "4",
4003
+ gap: "2"
4004
+ }
3320
4005
  },
3321
4006
  lg: {
3322
- details: { ms: 3 },
3323
- label: { fontSize: "md" },
3324
- secondaryLabel: { fontSize: "sm" },
3325
- tertiaryLabel: { fontSize: "sm" }
3326
- },
3327
- xl: {
3328
- details: { ms: 4 },
3329
- label: { fontSize: "lg" },
3330
- secondaryLabel: { fontSize: "md" },
3331
- tertiaryLabel: { fontSize: "md" }
3332
- },
3333
- "2xl": {
3334
- details: { ms: 4 },
3335
- label: { fontSize: "xl" },
3336
- secondaryLabel: { fontSize: "lg" },
3337
- tertiaryLabel: { fontSize: "lg" }
4007
+ root: {
4008
+ height: "10"
4009
+ },
4010
+ item: {
4011
+ textStyle: "md",
4012
+ px: "5",
4013
+ gap: "3"
4014
+ }
3338
4015
  }
3339
4016
  }
3340
4017
  },
@@ -3344,8 +4021,8 @@ var personaSlotRecipe = defineSlotRecipe8({
3344
4021
  });
3345
4022
 
3346
4023
  // src/components/sidebar/sidebar-item.recipe.ts
3347
- import { defineSlotRecipe as defineSlotRecipe9 } from "@chakra-ui/react";
3348
- var sidebarNavItemSlotRecipe = defineSlotRecipe9({
4024
+ import { defineSlotRecipe as defineSlotRecipe15 } from "@chakra-ui/react";
4025
+ var sidebarNavItemSlotRecipe = defineSlotRecipe15({
3349
4026
  className: "sui-sidebar-nav-item",
3350
4027
  slots: ["item", "button", "endElement"],
3351
4028
  base: {
@@ -3430,8 +4107,8 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe9({
3430
4107
  });
3431
4108
 
3432
4109
  // src/components/sidebar/sidebar.recipe.ts
3433
- import { defineSlotRecipe as defineSlotRecipe10 } from "@chakra-ui/react";
3434
- var sidebarSlotRecipe = defineSlotRecipe10({
4110
+ import { defineSlotRecipe as defineSlotRecipe16 } from "@chakra-ui/react";
4111
+ var sidebarSlotRecipe = defineSlotRecipe16({
3435
4112
  className: "sui-sidebar",
3436
4113
  slots: [
3437
4114
  "root",
@@ -3667,9 +4344,9 @@ var sidebarSlotRecipe = defineSlotRecipe10({
3667
4344
  });
3668
4345
 
3669
4346
  // src/components/status/status.recipe.ts
3670
- import { defineSlotRecipe as defineSlotRecipe11 } from "@chakra-ui/react";
4347
+ import { defineSlotRecipe as defineSlotRecipe17 } from "@chakra-ui/react";
3671
4348
  import { statusAnatomy } from "@chakra-ui/react/anatomy";
3672
- var statusSlotRecipe = defineSlotRecipe11({
4349
+ var statusSlotRecipe = defineSlotRecipe17({
3673
4350
  className: "chakra-status",
3674
4351
  slots: statusAnatomy.keys(),
3675
4352
  base: {
@@ -3679,45 +4356,359 @@ var statusSlotRecipe = defineSlotRecipe11({
3679
4356
  alignItems: "center",
3680
4357
  gap: "2"
3681
4358
  },
3682
- indicator: {
3683
- width: "0.64em",
3684
- height: "0.64em",
3685
- flexShrink: 0,
3686
- borderRadius: "full",
3687
- forcedColorAdjust: "none",
3688
- bg: "colorPalette.solid"
3689
- }
3690
- },
3691
- variants: {
4359
+ indicator: {
4360
+ width: "0.64em",
4361
+ height: "0.64em",
4362
+ flexShrink: 0,
4363
+ borderRadius: "full",
4364
+ forcedColorAdjust: "none",
4365
+ bg: "colorPalette.solid"
4366
+ }
4367
+ },
4368
+ variants: {
4369
+ size: {
4370
+ sm: {
4371
+ root: {
4372
+ textStyle: "xs"
4373
+ }
4374
+ },
4375
+ md: {
4376
+ root: {
4377
+ textStyle: "sm"
4378
+ }
4379
+ },
4380
+ lg: {
4381
+ root: {
4382
+ textStyle: "md"
4383
+ }
4384
+ }
4385
+ }
4386
+ },
4387
+ defaultVariants: {
4388
+ size: "md"
4389
+ }
4390
+ });
4391
+
4392
+ // src/components/tabs/tabs.recipe.ts
4393
+ import { defineSlotRecipe as defineSlotRecipe18 } from "@chakra-ui/react";
4394
+ import { tabsAnatomy } from "@chakra-ui/react/anatomy";
4395
+ var tabsSlotRecipe = defineSlotRecipe18({
4396
+ slots: tabsAnatomy.keys(),
4397
+ className: "chakra-tabs",
4398
+ base: {
4399
+ root: {
4400
+ colorPalette: "gray",
4401
+ "--tabs-trigger-radius": "radii.control.md",
4402
+ position: "relative",
4403
+ _horizontal: {
4404
+ display: "block"
4405
+ },
4406
+ _vertical: {
4407
+ display: "flex"
4408
+ }
4409
+ },
4410
+ list: {
4411
+ display: "inline-flex",
4412
+ position: "relative",
4413
+ isolation: "isolate",
4414
+ "--tabs-indicator-shadow": "shadows.xs",
4415
+ "--tabs-indicator-bg": "colors.bg",
4416
+ minH: "var(--tabs-height)",
4417
+ _horizontal: {
4418
+ flexDirection: "row"
4419
+ },
4420
+ _vertical: {
4421
+ flexDirection: "column"
4422
+ }
4423
+ },
4424
+ trigger: {
4425
+ outline: "0",
4426
+ minW: "var(--tabs-height)",
4427
+ height: "var(--tabs-height)",
4428
+ display: "flex",
4429
+ alignItems: "center",
4430
+ fontWeight: "medium",
4431
+ position: "relative",
4432
+ cursor: "button",
4433
+ gap: "2",
4434
+ _focusVisible: {
4435
+ zIndex: 1,
4436
+ focusVisibleRing: "outside"
4437
+ },
4438
+ _disabled: {
4439
+ cursor: "not-allowed",
4440
+ opacity: 0.5
4441
+ }
4442
+ },
4443
+ content: {
4444
+ focusVisibleRing: "inside",
4445
+ _horizontal: {
4446
+ width: "100%",
4447
+ pt: "var(--tabs-content-padding)"
4448
+ },
4449
+ _vertical: {
4450
+ height: "100%",
4451
+ ps: "var(--tabs-content-padding)"
4452
+ }
4453
+ },
4454
+ indicator: {
4455
+ width: "var(--width)",
4456
+ height: "var(--height)",
4457
+ borderRadius: "var(--tabs-indicator-radius)",
4458
+ bg: "var(--tabs-indicator-bg)",
4459
+ shadow: "var(--tabs-indicator-shadow)",
4460
+ zIndex: -1
4461
+ }
4462
+ },
4463
+ variants: {
4464
+ fitted: {
4465
+ true: {
4466
+ list: {
4467
+ display: "flex"
4468
+ },
4469
+ trigger: {
4470
+ flex: 1,
4471
+ textAlign: "center",
4472
+ justifyContent: "center"
4473
+ }
4474
+ }
4475
+ },
4476
+ justify: {
4477
+ start: {
4478
+ list: {
4479
+ justifyContent: "flex-start"
4480
+ }
4481
+ },
4482
+ center: {
4483
+ list: {
4484
+ justifyContent: "center"
4485
+ }
4486
+ },
4487
+ end: {
4488
+ list: {
4489
+ justifyContent: "flex-end"
4490
+ }
4491
+ }
4492
+ },
3692
4493
  size: {
3693
- sm: {
4494
+ xs: {
3694
4495
  root: {
4496
+ "--tabs-height": "sizes.6",
4497
+ "--tabs-content-padding": "spacing.2"
4498
+ },
4499
+ trigger: {
4500
+ py: "1",
4501
+ px: "2",
3695
4502
  textStyle: "xs"
3696
4503
  }
3697
4504
  },
4505
+ sm: {
4506
+ root: {
4507
+ "--tabs-height": "sizes.7",
4508
+ "--tabs-content-padding": "spacing.3"
4509
+ },
4510
+ trigger: {
4511
+ py: "1",
4512
+ px: "3",
4513
+ textStyle: "sm"
4514
+ }
4515
+ },
3698
4516
  md: {
3699
4517
  root: {
4518
+ "--tabs-height": "sizes.8",
4519
+ "--tabs-content-padding": "spacing.4"
4520
+ },
4521
+ trigger: {
4522
+ py: "2",
4523
+ px: "4",
3700
4524
  textStyle: "sm"
3701
4525
  }
3702
4526
  },
3703
4527
  lg: {
3704
4528
  root: {
4529
+ "--tabs-height": "sizes.10",
4530
+ "--tabs-content-padding": "spacing.4.5"
4531
+ },
4532
+ trigger: {
4533
+ py: "2",
4534
+ px: "4.5",
3705
4535
  textStyle: "md"
3706
4536
  }
3707
4537
  }
4538
+ },
4539
+ variant: {
4540
+ line: {
4541
+ list: {
4542
+ display: "flex",
4543
+ borderColor: "border",
4544
+ _horizontal: {
4545
+ borderBottomWidth: "1px"
4546
+ },
4547
+ _vertical: {
4548
+ borderEndWidth: "1px"
4549
+ }
4550
+ },
4551
+ trigger: {
4552
+ color: "fg.muted",
4553
+ _hover: {
4554
+ color: "fg.subtle"
4555
+ },
4556
+ _disabled: {
4557
+ _active: { bg: "initial" }
4558
+ },
4559
+ _selected: {
4560
+ color: "fg !important",
4561
+ _horizontal: {
4562
+ layerStyle: "indicator.bottom",
4563
+ "--indicator-offset-y": "-1px",
4564
+ "--indicator-color": "colors.colorPalette.solid"
4565
+ },
4566
+ _vertical: {
4567
+ layerStyle: "indicator.end",
4568
+ "--indicator-offset-x": "-1px"
4569
+ }
4570
+ }
4571
+ }
4572
+ },
4573
+ pills: {
4574
+ list: {
4575
+ gap: 2
4576
+ },
4577
+ trigger: {
4578
+ borderRadius: "var(--tabs-trigger-radius)",
4579
+ color: "fg.muted",
4580
+ borderWidth: "1px",
4581
+ borderColor: "border.emphasized",
4582
+ _hover: {
4583
+ bg: "bg.muted",
4584
+ color: "fg.subtle"
4585
+ },
4586
+ _selected: {
4587
+ bg: "colorPalette.subtle !important",
4588
+ color: "colorPalette.fg !important",
4589
+ borderColor: "colorPalette.solid/50"
4590
+ }
4591
+ }
4592
+ },
4593
+ ghost: {
4594
+ list: {
4595
+ gap: 2
4596
+ },
4597
+ trigger: {
4598
+ borderRadius: "var(--tabs-trigger-radius)",
4599
+ color: "fg.muted",
4600
+ _hover: {
4601
+ bg: "bg.muted",
4602
+ color: "fg.subtle"
4603
+ },
4604
+ _selected: {
4605
+ bg: "colorPalette.subtle !important",
4606
+ color: "colorPalette.fg !important"
4607
+ }
4608
+ }
4609
+ },
4610
+ enclosed: {
4611
+ list: {
4612
+ bg: "bg.muted",
4613
+ boxShadow: "inset",
4614
+ borderRadius: "md",
4615
+ borderWidth: "1px",
4616
+ minH: "calc(var(--tabs-height) - 4px)"
4617
+ },
4618
+ trigger: {
4619
+ justifyContent: "center",
4620
+ color: "fg.muted",
4621
+ borderRadius: "var(--tabs-trigger-radius)",
4622
+ _selected: {
4623
+ bg: "bg",
4624
+ color: "colorPalette.fg",
4625
+ shadow: "sm"
4626
+ }
4627
+ }
4628
+ },
4629
+ outline: {
4630
+ list: {
4631
+ "--line-thickness": "1px",
4632
+ "--line-offset": "calc(var(--line-thickness) * -1)",
4633
+ borderColor: "border",
4634
+ display: "flex",
4635
+ _horizontal: {
4636
+ _before: {
4637
+ content: '""',
4638
+ position: "absolute",
4639
+ bottom: "0px",
4640
+ width: "100%",
4641
+ borderBottomWidth: "var(--line-thickness)",
4642
+ borderBottomColor: "border"
4643
+ }
4644
+ },
4645
+ _vertical: {
4646
+ _before: {
4647
+ content: '""',
4648
+ position: "absolute",
4649
+ insetInline: "var(--line-offset)",
4650
+ height: "calc(100% - calc(var(--line-thickness) * 2))",
4651
+ borderEndWidth: "var(--line-thickness)",
4652
+ borderEndColor: "border"
4653
+ }
4654
+ }
4655
+ },
4656
+ trigger: {
4657
+ color: "fg.muted",
4658
+ borderWidth: "1px",
4659
+ borderColor: "transparent",
4660
+ _selected: {
4661
+ bg: "currentBg",
4662
+ color: "colorPalette.fg"
4663
+ },
4664
+ _horizontal: {
4665
+ borderTopRadius: "var(--tabs-trigger-radius)",
4666
+ marginBottom: "var(--line-offset)",
4667
+ marginEnd: { _notLast: "var(--line-offset)" },
4668
+ _selected: {
4669
+ borderColor: "border",
4670
+ borderBottomColor: "transparent"
4671
+ }
4672
+ },
4673
+ _vertical: {
4674
+ borderStartRadius: "var(--tabs-trigger-radius)",
4675
+ marginEnd: "var(--line-offset)",
4676
+ marginBottom: { _notLast: "var(--line-offset)" },
4677
+ _selected: {
4678
+ borderColor: "border",
4679
+ borderEndColor: "transparent"
4680
+ }
4681
+ }
4682
+ }
4683
+ },
4684
+ plain: {
4685
+ trigger: {
4686
+ color: "fg.muted",
4687
+ _selected: {
4688
+ color: "colorPalette.fg"
4689
+ },
4690
+ borderRadius: "var(--tabs-trigger-radius)",
4691
+ "&[data-selected][data-ssr]": {
4692
+ bg: "var(--tabs-indicator-bg)",
4693
+ shadow: "var(--tabs-indicator-shadow)",
4694
+ borderRadius: "var(--tabs-indicator-radius)"
4695
+ }
4696
+ }
4697
+ }
3708
4698
  }
3709
4699
  },
3710
4700
  defaultVariants: {
3711
- size: "md"
4701
+ size: "md",
4702
+ variant: "line"
3712
4703
  }
3713
4704
  });
3714
4705
 
3715
4706
  // src/components/tag/tag.recipe.ts
3716
- import { defineSlotRecipe as defineSlotRecipe12 } from "@chakra-ui/react";
4707
+ import { defineSlotRecipe as defineSlotRecipe19 } from "@chakra-ui/react";
3717
4708
  import { tagAnatomy } from "@chakra-ui/react/anatomy";
3718
4709
  var _a;
3719
4710
  var badgeVariant = (_a = badgeRecipe.variants) == null ? void 0 : _a.variant;
3720
- var tagSlotRecipe = defineSlotRecipe12({
4711
+ var tagSlotRecipe = defineSlotRecipe19({
3721
4712
  slots: tagAnatomy.keys(),
3722
4713
  className: "chakra-tag",
3723
4714
  base: {
@@ -3847,31 +4838,177 @@ var tagSlotRecipe = defineSlotRecipe12({
3847
4838
  }
3848
4839
  }
3849
4840
  },
3850
- variant: {
3851
- subtle: {
3852
- root: badgeVariant == null ? void 0 : badgeVariant.subtle
3853
- },
3854
- solid: {
3855
- root: badgeVariant == null ? void 0 : badgeVariant.solid
3856
- },
3857
- outline: {
3858
- root: badgeVariant == null ? void 0 : badgeVariant.outline
4841
+ variant: {
4842
+ subtle: {
4843
+ root: badgeVariant == null ? void 0 : badgeVariant.subtle
4844
+ },
4845
+ solid: {
4846
+ root: badgeVariant == null ? void 0 : badgeVariant.solid
4847
+ },
4848
+ outline: {
4849
+ root: badgeVariant == null ? void 0 : badgeVariant.outline
4850
+ },
4851
+ surface: {
4852
+ root: badgeVariant == null ? void 0 : badgeVariant.surface
4853
+ }
4854
+ }
4855
+ },
4856
+ defaultVariants: {
4857
+ size: "md",
4858
+ variant: "surface"
4859
+ }
4860
+ });
4861
+
4862
+ // src/components/toaster/toast.recipe.ts
4863
+ import { defineSlotRecipe as defineSlotRecipe20 } from "@chakra-ui/react";
4864
+ import { toastAnatomy } from "@chakra-ui/react/anatomy";
4865
+ var toastSlotRecipe = defineSlotRecipe20({
4866
+ slots: toastAnatomy.keys(),
4867
+ className: "chakra-toast",
4868
+ base: {
4869
+ root: {
4870
+ width: "full",
4871
+ display: "flex",
4872
+ alignItems: "flex-start",
4873
+ position: "relative",
4874
+ gap: "2",
4875
+ py: "3",
4876
+ ps: "3",
4877
+ pe: "6",
4878
+ borderRadius: "md",
4879
+ borderWidth: "1px",
4880
+ translate: "var(--x) var(--y)",
4881
+ scale: "var(--scale)",
4882
+ zIndex: "var(--z-index)",
4883
+ height: "var(--height, var(--toast-height))",
4884
+ opacity: "var(--opacity)",
4885
+ willChange: "translate, opacity, scale, height",
4886
+ transition: "translate 400ms, scale 400ms, opacity 400ms, height 200ms, box-shadow 200ms",
4887
+ transitionTimingFunction: "bounce-in",
4888
+ _closed: {
4889
+ transition: "translate 400ms, scale 400ms, height 200ms, opacity 200ms",
4890
+ transitionTimingFunction: "bounce-out"
4891
+ },
4892
+ bg: "bg.panel",
4893
+ color: "fg",
4894
+ boxShadow: "lg",
4895
+ overflow: "hidden",
4896
+ "--toast-indicated-color": "colors.fg.muted",
4897
+ "&[data-type=warning]": {
4898
+ "--toast-indicated-color": "colors.fg.warning"
4899
+ },
4900
+ "&[data-type=success]": {
4901
+ "--toast-indicated-color": "colors.fg.success"
4902
+ },
4903
+ "&[data-type=error]": {
4904
+ "--toast-indicated-color": "colors.fg.error"
4905
+ },
4906
+ "&[data-overlap]": {
4907
+ _before: {
4908
+ content: '""',
4909
+ position: "absolute",
4910
+ inset: "0",
4911
+ maskImage: "linear-gradient(to bottom, transparent, black 50%)"
4912
+ }
4913
+ }
4914
+ },
4915
+ title: {
4916
+ fontWeight: "medium",
4917
+ textStyle: "sm",
4918
+ marginEnd: "2"
4919
+ },
4920
+ description: {
4921
+ display: "inline",
4922
+ textStyle: "sm",
4923
+ opacity: "0.8"
4924
+ },
4925
+ indicator: {
4926
+ flexShrink: "0",
4927
+ boxSize: "5",
4928
+ color: "var(--toast-indicated-color)"
4929
+ },
4930
+ actionTrigger: {
4931
+ cursor: "button",
4932
+ textStyle: "sm",
4933
+ fontWeight: "medium",
4934
+ height: "6",
4935
+ px: "3",
4936
+ ms: "-3",
4937
+ borderRadius: "sm",
4938
+ alignSelf: "flex-start",
4939
+ transition: "background 200ms",
4940
+ color: "colorPalette.solid/80",
4941
+ _hover: {
4942
+ bg: "bg.subtle",
4943
+ color: "colorPalette.solid"
4944
+ }
4945
+ },
4946
+ closeTrigger: {
4947
+ position: "absolute",
4948
+ top: "2",
4949
+ insetEnd: "2"
4950
+ }
4951
+ }
4952
+ });
4953
+
4954
+ // src/components/tooltip/tooltip.recipe.ts
4955
+ import { defineSlotRecipe as defineSlotRecipe21 } from "@chakra-ui/react";
4956
+ import { tooltipAnatomy } from "@chakra-ui/react/anatomy";
4957
+ var tooltipSlotRecipe = defineSlotRecipe21({
4958
+ slots: tooltipAnatomy.keys(),
4959
+ className: "chakra-tooltip",
4960
+ base: {
4961
+ content: {
4962
+ "--tooltip-bg": "colors.bg",
4963
+ display: "flex",
4964
+ alignItems: "center",
4965
+ bg: "var(--tooltip-bg)",
4966
+ color: "fg",
4967
+ px: "2.5",
4968
+ py: "1",
4969
+ borderRadius: "l2",
4970
+ fontWeight: "medium",
4971
+ textStyle: "xs",
4972
+ boxShadow: "md",
4973
+ maxW: "xs",
4974
+ zIndex: "tooltip",
4975
+ transformOrigin: "var(--transform-origin)",
4976
+ _open: {
4977
+ animationStyle: "scale-fade-in",
4978
+ animationDuration: "fast"
3859
4979
  },
3860
- surface: {
3861
- root: badgeVariant == null ? void 0 : badgeVariant.surface
4980
+ _closed: {
4981
+ animationStyle: "scale-fade-out",
4982
+ animationDuration: "fast"
3862
4983
  }
4984
+ },
4985
+ arrow: {
4986
+ "--arrow-size": "sizes.2",
4987
+ "--arrow-background": "var(--tooltip-bg)",
4988
+ zIndex: "-1"
4989
+ },
4990
+ arrowTip: {
4991
+ borderTopWidth: "1px",
4992
+ borderInlineStartWidth: "1px",
4993
+ borderColor: "var(--tooltip-bg)"
3863
4994
  }
3864
4995
  },
3865
- defaultVariants: {
3866
- size: "md",
3867
- variant: "surface"
4996
+ variants: {
4997
+ variant: {
4998
+ inverted: {
4999
+ content: {
5000
+ "--tooltip-bg": "colors.bg.inverted",
5001
+ color: "fg.inverted"
5002
+ }
5003
+ }
5004
+ }
3868
5005
  }
3869
5006
  });
3870
5007
 
3871
5008
  // src/theme/recipes/chakra/accordion.ts
3872
- import { defineSlotRecipe as defineSlotRecipe13 } from "@chakra-ui/react";
5009
+ import { defineSlotRecipe as defineSlotRecipe22 } from "@chakra-ui/react";
3873
5010
  import { accordionAnatomy } from "@chakra-ui/react/anatomy";
3874
- var accordionSlotRecipe = defineSlotRecipe13({
5011
+ var accordionSlotRecipe = defineSlotRecipe22({
3875
5012
  className: "chakra-accordion",
3876
5013
  slots: accordionAnatomy.keys(),
3877
5014
  base: {
@@ -4009,9 +5146,9 @@ var accordionSlotRecipe = defineSlotRecipe13({
4009
5146
  });
4010
5147
 
4011
5148
  // src/theme/recipes/chakra/action-bar.ts
4012
- import { defineSlotRecipe as defineSlotRecipe14 } from "@chakra-ui/react";
5149
+ import { defineSlotRecipe as defineSlotRecipe23 } from "@chakra-ui/react";
4013
5150
  import { actionBarAnatomy } from "@chakra-ui/react/anatomy";
4014
- var actionBarSlotRecipe = defineSlotRecipe14({
5151
+ var actionBarSlotRecipe = defineSlotRecipe23({
4015
5152
  className: "chakra-action-bar",
4016
5153
  slots: actionBarAnatomy.keys(),
4017
5154
  base: {
@@ -4067,9 +5204,9 @@ var actionBarSlotRecipe = defineSlotRecipe14({
4067
5204
  });
4068
5205
 
4069
5206
  // src/theme/recipes/chakra/alert.ts
4070
- import { defineSlotRecipe as defineSlotRecipe15 } from "@chakra-ui/react";
5207
+ import { defineSlotRecipe as defineSlotRecipe24 } from "@chakra-ui/react";
4071
5208
  import { alertAnatomy } from "@chakra-ui/react/anatomy";
4072
- var alertSlotRecipe = defineSlotRecipe15({
5209
+ var alertSlotRecipe = defineSlotRecipe24({
4073
5210
  slots: alertAnatomy.keys(),
4074
5211
  className: "chakra-alert",
4075
5212
  base: {
@@ -4216,9 +5353,9 @@ var alertSlotRecipe = defineSlotRecipe15({
4216
5353
  });
4217
5354
 
4218
5355
  // src/theme/recipes/chakra/blockquote.ts
4219
- import { defineSlotRecipe as defineSlotRecipe16 } from "@chakra-ui/react";
5356
+ import { defineSlotRecipe as defineSlotRecipe25 } from "@chakra-ui/react";
4220
5357
  import { blockquoteAnatomy } from "@chakra-ui/react/anatomy";
4221
- var blockquoteSlotRecipe = defineSlotRecipe16({
5358
+ var blockquoteSlotRecipe = defineSlotRecipe25({
4222
5359
  className: "chakra-blockquote",
4223
5360
  slots: blockquoteAnatomy.keys(),
4224
5361
  base: {
@@ -4295,9 +5432,9 @@ var blockquoteSlotRecipe = defineSlotRecipe16({
4295
5432
  });
4296
5433
 
4297
5434
  // src/theme/recipes/chakra/breadcrumb.ts
4298
- import { defineSlotRecipe as defineSlotRecipe17 } from "@chakra-ui/react";
5435
+ import { defineSlotRecipe as defineSlotRecipe26 } from "@chakra-ui/react";
4299
5436
  import { breadcrumbAnatomy } from "@chakra-ui/react/anatomy";
4300
- var breadcrumbSlotRecipe = defineSlotRecipe17({
5437
+ var breadcrumbSlotRecipe = defineSlotRecipe26({
4301
5438
  className: "chakra-breadcrumb",
4302
5439
  slots: breadcrumbAnatomy.keys(),
4303
5440
  base: {
@@ -4387,9 +5524,9 @@ var breadcrumbSlotRecipe = defineSlotRecipe17({
4387
5524
  });
4388
5525
 
4389
5526
  // src/theme/recipes/chakra/card.ts
4390
- import { defineSlotRecipe as defineSlotRecipe18 } from "@chakra-ui/react";
5527
+ import { defineSlotRecipe as defineSlotRecipe27 } from "@chakra-ui/react";
4391
5528
  import { cardAnatomy } from "@chakra-ui/react/anatomy";
4392
- var cardSlotRecipe = defineSlotRecipe18({
5529
+ var cardSlotRecipe = defineSlotRecipe27({
4393
5530
  className: "chakra-card",
4394
5531
  slots: cardAnatomy.keys(),
4395
5532
  base: {
@@ -4509,10 +5646,10 @@ var cardSlotRecipe = defineSlotRecipe18({
4509
5646
  });
4510
5647
 
4511
5648
  // src/theme/recipes/chakra/checkbox.ts
4512
- import { defineSlotRecipe as defineSlotRecipe19 } from "@chakra-ui/react";
5649
+ import { defineSlotRecipe as defineSlotRecipe28 } from "@chakra-ui/react";
4513
5650
  import { checkboxAnatomy } from "@chakra-ui/react/anatomy";
4514
5651
  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
4515
- var checkboxSlotRecipe = defineSlotRecipe19({
5652
+ var checkboxSlotRecipe = defineSlotRecipe28({
4516
5653
  slots: checkboxAnatomy.keys(),
4517
5654
  className: "chakra-checkbox",
4518
5655
  base: {
@@ -4574,10 +5711,10 @@ var checkboxSlotRecipe = defineSlotRecipe19({
4574
5711
  });
4575
5712
 
4576
5713
  // src/theme/recipes/chakra/checkbox-card.ts
4577
- import { defineSlotRecipe as defineSlotRecipe20 } from "@chakra-ui/react";
5714
+ import { defineSlotRecipe as defineSlotRecipe29 } from "@chakra-ui/react";
4578
5715
  import { checkboxCardAnatomy } from "@chakra-ui/react/anatomy";
4579
5716
  var _a3, _b2, _c2, _d2, _e2, _f2, _g2;
4580
- var checkboxCardSlotRecipe = defineSlotRecipe20({
5717
+ var checkboxCardSlotRecipe = defineSlotRecipe29({
4581
5718
  slots: checkboxCardAnatomy.keys(),
4582
5719
  className: "chakra-checkbox-card",
4583
5720
  base: {
@@ -4777,9 +5914,9 @@ var checkboxCardSlotRecipe = defineSlotRecipe20({
4777
5914
  });
4778
5915
 
4779
5916
  // src/theme/recipes/chakra/collapsible.ts
4780
- import { defineSlotRecipe as defineSlotRecipe21 } from "@chakra-ui/react";
5917
+ import { defineSlotRecipe as defineSlotRecipe30 } from "@chakra-ui/react";
4781
5918
  import { collapsibleAnatomy } from "@chakra-ui/react/anatomy";
4782
- var collapsibleSlotRecipe = defineSlotRecipe21({
5919
+ var collapsibleSlotRecipe = defineSlotRecipe30({
4783
5920
  slots: collapsibleAnatomy.keys(),
4784
5921
  className: "chakra-collapsible",
4785
5922
  base: {
@@ -4797,88 +5934,8 @@ var collapsibleSlotRecipe = defineSlotRecipe21({
4797
5934
  }
4798
5935
  });
4799
5936
 
4800
- // src/theme/recipes/chakra/data-list.ts
4801
- import { defineSlotRecipe as defineSlotRecipe22 } from "@chakra-ui/react";
4802
- import { dataListAnatomy } from "@chakra-ui/react/anatomy";
4803
- var dataListSlotRecipe = defineSlotRecipe22({
4804
- slots: dataListAnatomy.keys(),
4805
- className: "chakra-data-list",
4806
- base: {
4807
- itemLabel: {
4808
- color: "fg.muted",
4809
- display: "flex",
4810
- alignItems: "center",
4811
- gap: "1"
4812
- },
4813
- itemValue: {
4814
- display: "flex",
4815
- minWidth: "0",
4816
- flex: "1"
4817
- }
4818
- },
4819
- variants: {
4820
- orientation: {
4821
- horizontal: {
4822
- root: {
4823
- display: "flex",
4824
- flexDirection: "column"
4825
- },
4826
- item: {
4827
- display: "inline-flex",
4828
- alignItems: "center",
4829
- gap: "4"
4830
- },
4831
- itemLabel: {
4832
- minWidth: "120px"
4833
- }
4834
- },
4835
- vertical: {
4836
- root: {
4837
- display: "flex",
4838
- flexDirection: "column"
4839
- },
4840
- item: {
4841
- display: "flex",
4842
- flexDirection: "column",
4843
- gap: "1"
4844
- }
4845
- }
4846
- },
4847
- size: {
4848
- sm: {
4849
- root: {
4850
- gap: "3"
4851
- },
4852
- item: {
4853
- textStyle: "xs"
4854
- }
4855
- },
4856
- md: {
4857
- root: {
4858
- gap: "4"
4859
- },
4860
- item: {
4861
- textStyle: "sm"
4862
- }
4863
- },
4864
- lg: {
4865
- root: {
4866
- gap: "5"
4867
- },
4868
- item: {
4869
- textStyle: "md"
4870
- }
4871
- }
4872
- }
4873
- },
4874
- defaultVariants: {
4875
- size: "md",
4876
- orientation: "vertical"
4877
- }
4878
- });
4879
-
4880
5937
  // src/theme/recipes/chakra/editable.ts
4881
- import { defineSlotRecipe as defineSlotRecipe23, defineStyle as defineStyle2 } from "@chakra-ui/react";
5938
+ import { defineSlotRecipe as defineSlotRecipe31, defineStyle as defineStyle2 } from "@chakra-ui/react";
4882
5939
  import { editableAnatomy } from "@chakra-ui/react/anatomy";
4883
5940
  var sharedStyles = defineStyle2({
4884
5941
  fontSize: "inherit",
@@ -4887,7 +5944,7 @@ var sharedStyles = defineStyle2({
4887
5944
  bg: "transparent",
4888
5945
  borderRadius: "l2"
4889
5946
  });
4890
- var editableSlotRecipe = defineSlotRecipe23({
5947
+ var editableSlotRecipe = defineSlotRecipe31({
4891
5948
  slots: editableAnatomy.keys(),
4892
5949
  className: "chakra-editable",
4893
5950
  base: {
@@ -4930,122 +5987,30 @@ var editableSlotRecipe = defineSlotRecipe23({
4930
5987
  display: "inline-flex",
4931
5988
  alignItems: "center",
4932
5989
  gap: "1.5"
4933
- }
4934
- },
4935
- variants: {
4936
- size: {
4937
- sm: {
4938
- root: {
4939
- textStyle: "sm"
4940
- },
4941
- preview: { minH: "8" },
4942
- input: { minH: "8" }
4943
- },
4944
- md: {
4945
- root: {
4946
- textStyle: "sm"
4947
- },
4948
- preview: { minH: "9" },
4949
- input: { minH: "9" }
4950
- },
4951
- lg: {
4952
- root: {
4953
- textStyle: "md"
4954
- },
4955
- preview: { minH: "10" },
4956
- input: { minH: "10" }
4957
- }
4958
- }
4959
- },
4960
- defaultVariants: {
4961
- size: "md"
4962
- }
4963
- });
4964
-
4965
- // src/theme/recipes/chakra/empty-state.ts
4966
- import { defineSlotRecipe as defineSlotRecipe24 } from "@chakra-ui/react";
4967
- import { emptyStateAnatomy } from "@chakra-ui/react/anatomy";
4968
- var emptyStateSlotRecipe = defineSlotRecipe24({
4969
- slots: emptyStateAnatomy.keys(),
4970
- className: "chakra-empty-state",
4971
- base: {
4972
- root: {
4973
- width: "full",
4974
- height: "full",
4975
- display: "flex",
4976
- flexDirection: "column",
4977
- alignItems: "center",
4978
- justifyContent: "center"
4979
- },
4980
- content: {
4981
- display: "flex",
4982
- flexDirection: "column",
4983
- alignItems: "center",
4984
- justifyContent: "center"
4985
- },
4986
- indicator: {
4987
- display: "flex",
4988
- alignItems: "center",
4989
- justifyContent: "center",
4990
- color: "fg.subtle",
4991
- _icon: {
4992
- boxSize: "1em"
4993
- }
4994
- },
4995
- title: {
4996
- fontWeight: "semibold"
4997
- },
4998
- description: {
4999
- textStyle: "sm",
5000
- color: "fg.muted"
5001
- }
5002
- },
5003
- variants: {
5004
- size: {
5005
- sm: {
5006
- root: {
5007
- px: "4",
5008
- py: "6"
5009
- },
5010
- title: {
5011
- textStyle: "md"
5012
- },
5013
- content: {
5014
- gap: "4"
5990
+ }
5991
+ },
5992
+ variants: {
5993
+ size: {
5994
+ sm: {
5995
+ root: {
5996
+ textStyle: "sm"
5015
5997
  },
5016
- indicator: {
5017
- textStyle: "2xl"
5018
- }
5998
+ preview: { minH: "8" },
5999
+ input: { minH: "8" }
5019
6000
  },
5020
6001
  md: {
5021
6002
  root: {
5022
- px: "8",
5023
- py: "12"
5024
- },
5025
- title: {
5026
- textStyle: "lg"
5027
- },
5028
- content: {
5029
- gap: "6"
6003
+ textStyle: "sm"
5030
6004
  },
5031
- indicator: {
5032
- textStyle: "4xl"
5033
- }
6005
+ preview: { minH: "9" },
6006
+ input: { minH: "9" }
5034
6007
  },
5035
6008
  lg: {
5036
6009
  root: {
5037
- px: "12",
5038
- py: "16"
5039
- },
5040
- title: {
5041
- textStyle: "xl"
5042
- },
5043
- content: {
5044
- gap: "8"
6010
+ textStyle: "md"
5045
6011
  },
5046
- indicator: {
5047
- textStyle: "6xl"
5048
- }
6012
+ preview: { minH: "10" },
6013
+ input: { minH: "10" }
5049
6014
  }
5050
6015
  }
5051
6016
  },
@@ -5055,9 +6020,9 @@ var emptyStateSlotRecipe = defineSlotRecipe24({
5055
6020
  });
5056
6021
 
5057
6022
  // src/theme/recipes/chakra/field.ts
5058
- import { defineSlotRecipe as defineSlotRecipe25 } from "@chakra-ui/react";
6023
+ import { defineSlotRecipe as defineSlotRecipe32 } from "@chakra-ui/react";
5059
6024
  import { fieldAnatomy } from "@chakra-ui/react/anatomy";
5060
- var fieldSlotRecipe = defineSlotRecipe25({
6025
+ var fieldSlotRecipe = defineSlotRecipe32({
5061
6026
  className: "chakra-field",
5062
6027
  slots: fieldAnatomy.keys(),
5063
6028
  base: {
@@ -5130,106 +6095,10 @@ var fieldSlotRecipe = defineSlotRecipe25({
5130
6095
  }
5131
6096
  });
5132
6097
 
5133
- // src/theme/recipes/chakra/file-upload.ts
5134
- import { defineSlotRecipe as defineSlotRecipe26 } from "@chakra-ui/react";
5135
- import { fileUploadAnatomy } from "@chakra-ui/react/anatomy";
5136
- var fileUploadSlotRecipe = defineSlotRecipe26({
5137
- className: "chakra-file-upload",
5138
- slots: fileUploadAnatomy.keys(),
5139
- base: {
5140
- root: {
5141
- display: "flex",
5142
- flexDirection: "column",
5143
- gap: "4",
5144
- width: "100%",
5145
- alignItems: "flex-start"
5146
- },
5147
- label: {
5148
- fontWeight: "medium",
5149
- textStyle: "sm"
5150
- },
5151
- dropzone: {
5152
- background: "bg",
5153
- borderRadius: "l3",
5154
- borderWidth: "2px",
5155
- borderStyle: "dashed",
5156
- display: "flex",
5157
- alignItems: "center",
5158
- flexDirection: "column",
5159
- gap: "4",
5160
- justifyContent: "center",
5161
- minHeight: "2xs",
5162
- px: "3",
5163
- py: "2",
5164
- transition: "backgrounds",
5165
- focusVisibleRing: "outside",
5166
- _hover: {
5167
- bg: "bg.subtle"
5168
- },
5169
- _dragging: {
5170
- bg: "colorPalette.subtle",
5171
- borderStyle: "solid",
5172
- borderColor: "colorPalette.solid"
5173
- }
5174
- },
5175
- dropzoneContent: {
5176
- display: "flex",
5177
- flexDirection: "column",
5178
- alignItems: "center",
5179
- textAlign: "center",
5180
- gap: "1",
5181
- textStyle: "sm"
5182
- },
5183
- item: {
5184
- textStyle: "sm",
5185
- animationName: "fade-in",
5186
- animationDuration: "moderate",
5187
- background: "bg",
5188
- borderRadius: "l2",
5189
- borderWidth: "1px",
5190
- width: "100%",
5191
- display: "flex",
5192
- alignItems: "center",
5193
- gap: "3",
5194
- p: "4"
5195
- },
5196
- itemGroup: {
5197
- width: "100%",
5198
- display: "flex",
5199
- flexDirection: "column",
5200
- gap: "3"
5201
- },
5202
- itemName: {
5203
- color: "fg",
5204
- fontWeight: "medium",
5205
- lineClamp: "1"
5206
- },
5207
- itemContent: {
5208
- display: "flex",
5209
- flexDirection: "column",
5210
- gap: "0.5",
5211
- flex: "1"
5212
- },
5213
- itemSizeText: {
5214
- color: "fg.muted",
5215
- textStyle: "xs"
5216
- },
5217
- itemDeleteTrigger: {
5218
- alignSelf: "flex-start"
5219
- },
5220
- itemPreviewImage: {
5221
- width: "10",
5222
- height: "10",
5223
- objectFit: "scale-down"
5224
- }
5225
- },
5226
- defaultVariants: {}
5227
- });
5228
-
5229
6098
  // src/theme/recipes/chakra/hover-card.ts
5230
- import { defineSlotRecipe as defineSlotRecipe27 } from "@chakra-ui/react";
6099
+ import { defineSlotRecipe as defineSlotRecipe33 } from "@chakra-ui/react";
5231
6100
  import { hoverCardAnatomy } from "@chakra-ui/react/anatomy";
5232
- var hoverCardSlotRecipe = defineSlotRecipe27({
6101
+ var hoverCardSlotRecipe = defineSlotRecipe33({
5233
6102
  className: "chakra-hover-card",
5234
6103
  slots: hoverCardAnatomy.keys(),
5235
6104
  base: {
@@ -5294,9 +6163,9 @@ var hoverCardSlotRecipe = defineSlotRecipe27({
5294
6163
  });
5295
6164
 
5296
6165
  // src/theme/recipes/chakra/list.ts
5297
- import { defineSlotRecipe as defineSlotRecipe28 } from "@chakra-ui/react";
6166
+ import { defineSlotRecipe as defineSlotRecipe34 } from "@chakra-ui/react";
5298
6167
  import { listAnatomy } from "@chakra-ui/react/anatomy";
5299
- var listSlotRecipe = defineSlotRecipe28({
6168
+ var listSlotRecipe = defineSlotRecipe34({
5300
6169
  className: "chakra-list",
5301
6170
  slots: listAnatomy.keys(),
5302
6171
  base: {
@@ -5328,166 +6197,43 @@ var listSlotRecipe = defineSlotRecipe28({
5328
6197
  listStylePosition: "inside"
5329
6198
  },
5330
6199
  item: {
5331
- _marker: {
5332
- color: "fg.subtle"
5333
- }
5334
- }
5335
- },
5336
- plain: {
5337
- item: {
5338
- alignItems: "flex-start",
5339
- display: "inline-flex"
5340
- }
5341
- }
5342
- },
5343
- align: {
5344
- center: {
5345
- item: { alignItems: "center" }
5346
- },
5347
- start: {
5348
- item: { alignItems: "flex-start" }
5349
- },
5350
- end: {
5351
- item: { alignItems: "flex-end" }
5352
- }
5353
- }
5354
- },
5355
- defaultVariants: {
5356
- variant: "marker"
5357
- }
5358
- });
5359
-
5360
- // src/theme/recipes/chakra/menu.ts
5361
- import { defineSlotRecipe as defineSlotRecipe29 } from "@chakra-ui/react";
5362
- import { menuAnatomy } from "@chakra-ui/react/anatomy";
5363
- var menuSlotRecipe = defineSlotRecipe29({
5364
- className: "chakra-menu",
5365
- slots: menuAnatomy.keys(),
5366
- base: {
5367
- content: {
5368
- outline: 0,
5369
- bg: "bg.panel",
5370
- boxShadow: "lg",
5371
- color: "fg",
5372
- maxHeight: "var(--available-height)",
5373
- "--menu-z-index": "zIndex.dropdown",
5374
- zIndex: "calc(var(--menu-z-index) + var(--layer-index, 0))",
5375
- borderRadius: "l2",
5376
- overflow: "hidden",
5377
- _open: {
5378
- animationStyle: "slide-fade-in",
5379
- animationDuration: "fast"
5380
- },
5381
- _closed: {
5382
- animationStyle: "slide-fade-out",
5383
- animationDuration: "faster"
5384
- }
5385
- },
5386
- item: {
5387
- textDecoration: "none",
5388
- color: "fg",
5389
- userSelect: "none",
5390
- borderRadius: "l3",
5391
- width: "100%",
5392
- display: "flex",
5393
- cursor: "menuitem",
5394
- alignItems: "center",
5395
- textAlign: "start",
5396
- position: "relative",
5397
- flex: "0 0 auto",
5398
- outline: 0,
5399
- _disabled: {
5400
- layerStyle: "disabled"
5401
- }
5402
- },
5403
- itemText: {
5404
- flex: "1"
5405
- },
5406
- itemGroupLabel: {
5407
- px: "2",
5408
- py: "1.5",
5409
- fontWeight: "semibold",
5410
- textStyle: "sm"
5411
- },
5412
- indicator: {
5413
- display: "inline-flex",
5414
- alignItems: "center",
5415
- justifyContent: "center",
5416
- flexShrink: "0"
5417
- },
5418
- itemCommand: {
5419
- opacity: "0.6",
5420
- textStyle: "xs",
5421
- ms: "auto",
5422
- ps: "4",
5423
- letterSpacing: "widest"
5424
- },
5425
- separator: {
5426
- height: "1px",
5427
- bg: "bg.muted",
5428
- my: "1",
5429
- mx: "-1"
5430
- }
5431
- },
5432
- variants: {
5433
- variant: {
5434
- subtle: {
5435
- item: {
5436
- _highlighted: {
5437
- bg: "bg.subtle"
5438
- }
5439
- }
5440
- },
5441
- solid: {
5442
- item: {
5443
- _highlighted: {
5444
- bg: "colorPalette.solid",
5445
- color: "colorPalette.contrast"
5446
- }
5447
- }
5448
- }
5449
- },
5450
- size: {
5451
- sm: {
5452
- content: {
5453
- minW: "8rem",
5454
- padding: "1"
5455
- },
5456
- item: {
5457
- gap: "1",
5458
- textStyle: "xs",
5459
- py: "1",
5460
- px: "1.5"
6200
+ _marker: {
6201
+ color: "fg.subtle"
6202
+ }
5461
6203
  }
5462
6204
  },
5463
- md: {
5464
- content: {
5465
- minW: "8rem",
5466
- padding: "1.5"
5467
- },
6205
+ plain: {
5468
6206
  item: {
5469
- gap: "2",
5470
- textStyle: "sm",
5471
- py: "1.5",
5472
- px: "2"
6207
+ alignItems: "flex-start",
6208
+ display: "inline-flex"
5473
6209
  }
5474
6210
  }
6211
+ },
6212
+ align: {
6213
+ center: {
6214
+ item: { alignItems: "center" }
6215
+ },
6216
+ start: {
6217
+ item: { alignItems: "flex-start" }
6218
+ },
6219
+ end: {
6220
+ item: { alignItems: "flex-end" }
6221
+ }
5475
6222
  }
5476
6223
  },
5477
6224
  defaultVariants: {
5478
- size: "md",
5479
- variant: "subtle"
6225
+ variant: "marker"
5480
6226
  }
5481
6227
  });
5482
6228
 
5483
6229
  // src/theme/recipes/chakra/native-select.ts
5484
- import { defineSlotRecipe as defineSlotRecipe31 } from "@chakra-ui/react";
6230
+ import { defineSlotRecipe as defineSlotRecipe36 } from "@chakra-ui/react";
5485
6231
  import { nativeSelectAnatomy } from "@chakra-ui/react/anatomy";
5486
6232
 
5487
6233
  // src/theme/recipes/chakra/select.ts
5488
- import { defineSlotRecipe as defineSlotRecipe30 } from "@chakra-ui/react";
6234
+ import { defineSlotRecipe as defineSlotRecipe35 } from "@chakra-ui/react";
5489
6235
  import { selectAnatomy } from "@chakra-ui/react/anatomy";
5490
- var selectSlotRecipe = defineSlotRecipe30({
6236
+ var selectSlotRecipe = defineSlotRecipe35({
5491
6237
  className: "chakra-select",
5492
6238
  slots: selectAnatomy.keys(),
5493
6239
  base: {
@@ -5772,7 +6518,7 @@ var selectSlotRecipe = defineSlotRecipe30({
5772
6518
 
5773
6519
  // src/theme/recipes/chakra/native-select.ts
5774
6520
  var _a4, _b3;
5775
- var nativeSelectSlotRecipe = defineSlotRecipe31({
6521
+ var nativeSelectSlotRecipe = defineSlotRecipe36({
5776
6522
  className: "chakra-native-select",
5777
6523
  slots: nativeSelectAnatomy.keys(),
5778
6524
  base: {
@@ -5905,7 +6651,7 @@ var nativeSelectSlotRecipe = defineSlotRecipe31({
5905
6651
  });
5906
6652
 
5907
6653
  // src/theme/recipes/chakra/number-input.ts
5908
- import { defineSlotRecipe as defineSlotRecipe32, defineStyle as defineStyle3 } from "@chakra-ui/react";
6654
+ import { defineSlotRecipe as defineSlotRecipe37, defineStyle as defineStyle3 } from "@chakra-ui/react";
5909
6655
  import { numberInputAnatomy } from "@chakra-ui/react/anatomy";
5910
6656
 
5911
6657
  // src/theme/utils.ts
@@ -5920,9 +6666,6 @@ function mapEntries(obj, f) {
5920
6666
  function scaleToken(value) {
5921
6667
  return `calc(${value} * var(--scale-factor))`;
5922
6668
  }
5923
- function radiusToken(value) {
5924
- return `calc(${value} * var(--scale-factor) * var(--radius-factor))`;
5925
- }
5926
6669
 
5927
6670
  // src/theme/recipes/chakra/number-input.ts
5928
6671
  var triggerStyle = defineStyle3({
@@ -5949,7 +6692,7 @@ var triggerStyle = defineStyle3({
5949
6692
  bg: "bg.emphasized"
5950
6693
  }
5951
6694
  });
5952
- var numberInputSlotRecipe = defineSlotRecipe32({
6695
+ var numberInputSlotRecipe = defineSlotRecipe37({
5953
6696
  className: "chakra-number-input",
5954
6697
  slots: numberInputAnatomy.keys(),
5955
6698
  base: {
@@ -6034,10 +6777,10 @@ var numberInputSlotRecipe = defineSlotRecipe32({
6034
6777
  });
6035
6778
 
6036
6779
  // src/theme/recipes/chakra/pin-input.ts
6037
- import { defineSlotRecipe as defineSlotRecipe33 } from "@chakra-ui/react";
6780
+ import { defineSlotRecipe as defineSlotRecipe38 } from "@chakra-ui/react";
6038
6781
  import { pinInputAnatomy } from "@chakra-ui/react/anatomy";
6039
6782
  var { variants: variants2, defaultVariants: defaultVariants2 } = inputRecipe;
6040
- var pinInputSlotRecipe = defineSlotRecipe33({
6783
+ var pinInputSlotRecipe = defineSlotRecipe38({
6041
6784
  className: "chakra-pin-input",
6042
6785
  slots: pinInputAnatomy.keys(),
6043
6786
  base: {
@@ -6065,97 +6808,10 @@ var pinInputSlotRecipe = defineSlotRecipe33({
6065
6808
  defaultVariants: defaultVariants2
6066
6809
  });
6067
6810
 
6068
- // src/theme/recipes/chakra/popover.ts
6069
- import { defineSlotRecipe as defineSlotRecipe34 } from "@chakra-ui/react";
6070
- import { popoverAnatomy } from "@chakra-ui/react/anatomy";
6071
- var popoverSlotRecipe = defineSlotRecipe34({
6072
- className: "chakra-popover",
6073
- slots: popoverAnatomy.keys(),
6074
- base: {
6075
- content: {
6076
- position: "relative",
6077
- display: "flex",
6078
- flexDirection: "column",
6079
- textStyle: "sm",
6080
- "--popover-bg": "colors.bg.panel",
6081
- bg: "var(--popover-bg)",
6082
- boxShadow: "lg",
6083
- "--popover-size": "sizes.xs",
6084
- "--popover-mobile-size": "calc(100dvw - 1rem)",
6085
- width: {
6086
- base: "min(var(--popover-mobile-size), var(--popover-size))",
6087
- sm: "var(--popover-size)"
6088
- },
6089
- borderRadius: "l3",
6090
- "--popover-z-index": "zIndex.popover",
6091
- zIndex: "calc(var(--popover-z-index) + var(--layer-index, 0))",
6092
- outline: "0",
6093
- transformOrigin: "var(--transform-origin)",
6094
- _open: {
6095
- animationStyle: "scale-fade-in",
6096
- animationDuration: "fast"
6097
- },
6098
- _closed: {
6099
- animationStyle: "scale-fade-out",
6100
- animationDuration: "faster"
6101
- }
6102
- },
6103
- header: {
6104
- paddingInline: "var(--popover-padding)",
6105
- paddingTop: "var(--popover-padding)"
6106
- },
6107
- body: {
6108
- padding: "var(--popover-padding)",
6109
- flex: "1"
6110
- },
6111
- footer: {
6112
- display: "flex",
6113
- alignItems: "center",
6114
- paddingInline: "var(--popover-padding)",
6115
- paddingBottom: "var(--popover-padding)"
6116
- },
6117
- arrow: {
6118
- "--arrow-size": "sizes.3",
6119
- "--arrow-background": "var(--popover-bg)"
6120
- },
6121
- arrowTip: {
6122
- borderTopWidth: "1px",
6123
- borderInlineStartWidth: "1px"
6124
- }
6125
- },
6126
- variants: {
6127
- size: {
6128
- xs: {
6129
- content: {
6130
- "--popover-padding": "spacing.3"
6131
- }
6132
- },
6133
- sm: {
6134
- content: {
6135
- "--popover-padding": "spacing.4"
6136
- }
6137
- },
6138
- md: {
6139
- content: {
6140
- "--popover-padding": "spacing.5"
6141
- }
6142
- },
6143
- lg: {
6144
- content: {
6145
- "--popover-padding": "spacing.6"
6146
- }
6147
- }
6148
- }
6149
- },
6150
- defaultVariants: {
6151
- size: "md"
6152
- }
6153
- });
6154
-
6155
6811
  // src/theme/recipes/chakra/progress.ts
6156
- import { defineSlotRecipe as defineSlotRecipe35 } from "@chakra-ui/react";
6812
+ import { defineSlotRecipe as defineSlotRecipe39 } from "@chakra-ui/react";
6157
6813
  import { progressAnatomy } from "@chakra-ui/react/anatomy";
6158
- var progressSlotRecipe = defineSlotRecipe35({
6814
+ var progressSlotRecipe = defineSlotRecipe39({
6159
6815
  slots: progressAnatomy.keys(),
6160
6816
  className: "chakra-progress",
6161
6817
  base: {
@@ -6275,9 +6931,9 @@ var progressSlotRecipe = defineSlotRecipe35({
6275
6931
  });
6276
6932
 
6277
6933
  // src/theme/recipes/chakra/progress-circle.ts
6278
- import { defineSlotRecipe as defineSlotRecipe36 } from "@chakra-ui/react";
6934
+ import { defineSlotRecipe as defineSlotRecipe40 } from "@chakra-ui/react";
6279
6935
  import { progressAnatomy as progressAnatomy2 } from "@chakra-ui/react/anatomy";
6280
- var progressCircleSlotRecipe = defineSlotRecipe36({
6936
+ var progressCircleSlotRecipe = defineSlotRecipe40({
6281
6937
  className: "chakra-progress-circle",
6282
6938
  slots: progressAnatomy2.keys(),
6283
6939
  base: {
@@ -6368,10 +7024,10 @@ var progressCircleSlotRecipe = defineSlotRecipe36({
6368
7024
  });
6369
7025
 
6370
7026
  // src/theme/recipes/chakra/radio-card.ts
6371
- import { defineSlotRecipe as defineSlotRecipe37 } from "@chakra-ui/react";
7027
+ import { defineSlotRecipe as defineSlotRecipe41 } from "@chakra-ui/react";
6372
7028
  import { radioCardAnatomy } from "@chakra-ui/react/anatomy";
6373
7029
  var _a5, _b4, _c3, _d3, _e3, _f3, _g3;
6374
- var radioCardSlotRecipe = defineSlotRecipe37({
7030
+ var radioCardSlotRecipe = defineSlotRecipe41({
6375
7031
  className: "chakra-radio-card",
6376
7032
  slots: radioCardAnatomy.keys(),
6377
7033
  base: {
@@ -6579,10 +7235,10 @@ var radioCardSlotRecipe = defineSlotRecipe37({
6579
7235
  });
6580
7236
 
6581
7237
  // src/theme/recipes/chakra/radio-group.ts
6582
- import { defineSlotRecipe as defineSlotRecipe38 } from "@chakra-ui/react";
7238
+ import { defineSlotRecipe as defineSlotRecipe42 } from "@chakra-ui/react";
6583
7239
  import { radioGroupAnatomy } from "@chakra-ui/react/anatomy";
6584
7240
  var _a6, _b5, _c4, _d4, _e4, _f4, _g4, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
6585
- var radioGroupSlotRecipe = defineSlotRecipe38({
7241
+ var radioGroupSlotRecipe = defineSlotRecipe42({
6586
7242
  className: "chakra-radio-group",
6587
7243
  slots: radioGroupAnatomy.keys(),
6588
7244
  base: {
@@ -6642,9 +7298,9 @@ var radioGroupSlotRecipe = defineSlotRecipe38({
6642
7298
  });
6643
7299
 
6644
7300
  // src/theme/recipes/chakra/rating-group.ts
6645
- import { defineSlotRecipe as defineSlotRecipe39 } from "@chakra-ui/react";
7301
+ import { defineSlotRecipe as defineSlotRecipe43 } from "@chakra-ui/react";
6646
7302
  import { ratingGroupAnatomy } from "@chakra-ui/react/anatomy";
6647
- var ratingGroupSlotRecipe = defineSlotRecipe39({
7303
+ var ratingGroupSlotRecipe = defineSlotRecipe43({
6648
7304
  className: "chakra-rating-group",
6649
7305
  slots: ratingGroupAnatomy.keys(),
6650
7306
  base: {
@@ -6716,133 +7372,7 @@ var ratingGroupSlotRecipe = defineSlotRecipe39({
6716
7372
  },
6717
7373
  lg: {
6718
7374
  item: {
6719
- textStyle: "2xl"
6720
- }
6721
- }
6722
- }
6723
- },
6724
- defaultVariants: {
6725
- size: "md"
6726
- }
6727
- });
6728
-
6729
- // src/theme/recipes/chakra/segment-group.ts
6730
- import { defineSlotRecipe as defineSlotRecipe40 } from "@chakra-ui/react";
6731
- import { segmentGroupAnatomy } from "@chakra-ui/react/anatomy";
6732
- var segmentGroupSlotRecipe = defineSlotRecipe40({
6733
- className: "chakra-segment-group",
6734
- slots: segmentGroupAnatomy.keys(),
6735
- base: {
6736
- root: {
6737
- "--segment-radius": "radii.md",
6738
- borderRadius: "md",
6739
- display: "inline-flex",
6740
- boxShadow: "inset",
6741
- minW: "max-content",
6742
- textAlign: "center",
6743
- position: "relative",
6744
- isolation: "isolate",
6745
- bg: "bg.muted",
6746
- borderWidth: "1px"
6747
- },
6748
- item: {
6749
- display: "flex",
6750
- alignItems: "center",
6751
- userSelect: "none",
6752
- fontSize: "sm",
6753
- position: "relative",
6754
- color: "fg.subtle",
6755
- cursor: "button",
6756
- borderRadius: "var(--segment-radius)",
6757
- _disabled: {
6758
- opacity: "0.5"
6759
- },
6760
- _hover: {
6761
- color: "fg"
6762
- },
6763
- "&:has(input:focus-visible)": {
6764
- focusRing: "inside",
6765
- focusRingWidth: "1px"
6766
- },
6767
- _before: {
6768
- content: '""',
6769
- position: "absolute",
6770
- insetInlineStart: 0,
6771
- insetBlock: "0",
6772
- bg: "border",
6773
- width: "1px",
6774
- transition: "opacity 0.2s"
6775
- },
6776
- _checked: {
6777
- color: "fg"
6778
- },
6779
- "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
6780
- _before: {
6781
- opacity: "0"
6782
- }
6783
- },
6784
- "&[data-state=checked][data-ssr]": {
6785
- shadow: "sm",
6786
- bg: "bg",
6787
- color: "fg",
6788
- borderRadius: "var(--segment-radius)"
6789
- }
6790
- },
6791
- indicator: {
6792
- shadow: "sm",
6793
- pos: "absolute",
6794
- bg: {
6795
- base: "bg",
6796
- _dark: "bg.emphasized"
6797
- },
6798
- width: "var(--width)",
6799
- height: "var(--height)",
6800
- top: "var(--top)",
6801
- left: "var(--left)",
6802
- zIndex: -1,
6803
- borderRadius: "var(--segment-radius)"
6804
- }
6805
- },
6806
- variants: {
6807
- size: {
6808
- xs: {
6809
- root: {
6810
- height: "6"
6811
- },
6812
- item: {
6813
- textStyle: "xs",
6814
- px: "3",
6815
- gap: "1"
6816
- }
6817
- },
6818
- sm: {
6819
- root: {
6820
- height: "7"
6821
- },
6822
- item: {
6823
- textStyle: "sm",
6824
- px: "4",
6825
- gap: "2"
6826
- }
6827
- },
6828
- md: {
6829
- root: {
6830
- height: "8"
6831
- },
6832
- item: {
6833
- textStyle: "sm",
6834
- px: "4",
6835
- gap: "2"
6836
- }
6837
- },
6838
- lg: {
6839
- root: {
6840
- height: "10"
6841
- },
6842
- item: {
6843
- textStyle: "md",
6844
- px: "5",
6845
- gap: "3"
7375
+ textStyle: "2xl"
6846
7376
  }
6847
7377
  }
6848
7378
  }
@@ -6853,9 +7383,9 @@ var segmentGroupSlotRecipe = defineSlotRecipe40({
6853
7383
  });
6854
7384
 
6855
7385
  // src/theme/recipes/chakra/slider.ts
6856
- import { defineSlotRecipe as defineSlotRecipe41 } from "@chakra-ui/react";
7386
+ import { defineSlotRecipe as defineSlotRecipe44 } from "@chakra-ui/react";
6857
7387
  import { sliderAnatomy } from "@chakra-ui/react/anatomy";
6858
- var sliderSlotRecipe = defineSlotRecipe41({
7388
+ var sliderSlotRecipe = defineSlotRecipe44({
6859
7389
  className: "chakra-slider",
6860
7390
  slots: sliderAnatomy.keys(),
6861
7391
  base: {
@@ -7030,9 +7560,9 @@ var sliderSlotRecipe = defineSlotRecipe41({
7030
7560
  });
7031
7561
 
7032
7562
  // src/theme/recipes/chakra/stat.ts
7033
- import { defineSlotRecipe as defineSlotRecipe42 } from "@chakra-ui/react";
7563
+ import { defineSlotRecipe as defineSlotRecipe45 } from "@chakra-ui/react";
7034
7564
  import { statAnatomy } from "@chakra-ui/react/anatomy";
7035
- var statSlotRecipe = defineSlotRecipe42({
7565
+ var statSlotRecipe = defineSlotRecipe45({
7036
7566
  className: "chakra-stat",
7037
7567
  slots: statAnatomy.keys(),
7038
7568
  base: {
@@ -7108,9 +7638,9 @@ var statSlotRecipe = defineSlotRecipe42({
7108
7638
  });
7109
7639
 
7110
7640
  // src/theme/recipes/chakra/steps.ts
7111
- import { defineSlotRecipe as defineSlotRecipe43 } from "@chakra-ui/react";
7641
+ import { defineSlotRecipe as defineSlotRecipe46 } from "@chakra-ui/react";
7112
7642
  import { stepsAnatomy } from "@chakra-ui/react/anatomy";
7113
- var stepsSlotRecipe = defineSlotRecipe43({
7643
+ var stepsSlotRecipe = defineSlotRecipe46({
7114
7644
  className: "chakra-steps",
7115
7645
  slots: stepsAnatomy.keys(),
7116
7646
  base: {
@@ -7323,9 +7853,9 @@ var stepsSlotRecipe = defineSlotRecipe43({
7323
7853
  });
7324
7854
 
7325
7855
  // src/theme/recipes/chakra/switch.ts
7326
- import { defineSlotRecipe as defineSlotRecipe44 } from "@chakra-ui/react";
7856
+ import { defineSlotRecipe as defineSlotRecipe47 } from "@chakra-ui/react";
7327
7857
  import { switchAnatomy } from "@chakra-ui/react/anatomy";
7328
- var switchSlotRecipe = defineSlotRecipe44({
7858
+ var switchSlotRecipe = defineSlotRecipe47({
7329
7859
  slots: switchAnatomy.keys(),
7330
7860
  className: "chakra-switch",
7331
7861
  base: {
@@ -7481,9 +8011,9 @@ var switchSlotRecipe = defineSlotRecipe44({
7481
8011
  });
7482
8012
 
7483
8013
  // src/theme/recipes/chakra/table.ts
7484
- import { defineSlotRecipe as defineSlotRecipe45 } from "@chakra-ui/react";
8014
+ import { defineSlotRecipe as defineSlotRecipe48 } from "@chakra-ui/react";
7485
8015
  import { tableAnatomy } from "@chakra-ui/react/anatomy";
7486
- var tableSlotRecipe = defineSlotRecipe45({
8016
+ var tableSlotRecipe = defineSlotRecipe48({
7487
8017
  className: "chakra-table",
7488
8018
  slots: tableAnatomy.keys(),
7489
8019
  base: {
@@ -7566,358 +8096,87 @@ var tableSlotRecipe = defineSlotRecipe45({
7566
8096
  line: {
7567
8097
  columnHeader: {
7568
8098
  borderBottomWidth: "1px"
7569
- },
7570
- cell: {
7571
- borderBottomWidth: "1px"
7572
- },
7573
- row: {
7574
- bg: "bg"
7575
- }
7576
- },
7577
- outline: {
7578
- root: {
7579
- boxShadow: "0 0 0 1px {colors.border}",
7580
- overflow: "hidden"
7581
- },
7582
- columnHeader: {
7583
- borderBottomWidth: "1px"
7584
- },
7585
- header: {
7586
- bg: "bg.muted"
7587
- },
7588
- row: {
7589
- "&:not(:last-of-type)": {
7590
- borderBottomWidth: "1px"
7591
- }
7592
- },
7593
- footer: {
7594
- borderTopWidth: "1px"
7595
- }
7596
- }
7597
- },
7598
- size: {
7599
- sm: {
7600
- root: {
7601
- textStyle: "sm"
7602
- },
7603
- columnHeader: {
7604
- px: "2",
7605
- py: "2"
7606
- },
7607
- cell: {
7608
- px: "2",
7609
- py: "2"
7610
- }
7611
- },
7612
- md: {
7613
- root: {
7614
- textStyle: "sm"
7615
- },
7616
- columnHeader: {
7617
- px: "3",
7618
- py: "3"
7619
- },
7620
- cell: {
7621
- px: "3",
7622
- py: "3"
7623
- }
7624
- },
7625
- lg: {
7626
- root: {
7627
- textStyle: "md"
7628
- },
7629
- columnHeader: {
7630
- px: "4",
7631
- py: "3"
7632
- },
7633
- cell: {
7634
- px: "4",
7635
- py: "3"
7636
- }
7637
- }
7638
- }
7639
- },
7640
- defaultVariants: {
7641
- variant: "line",
7642
- size: "md"
7643
- }
7644
- });
7645
-
7646
- // src/theme/recipes/chakra/tabs.ts
7647
- import { defineSlotRecipe as defineSlotRecipe46 } from "@chakra-ui/react";
7648
- import { tabsAnatomy } from "@chakra-ui/react/anatomy";
7649
- var tabsSlotRecipe = defineSlotRecipe46({
7650
- slots: tabsAnatomy.keys(),
7651
- className: "chakra-tabs",
7652
- base: {
7653
- root: {
7654
- "--tabs-trigger-radius": "radii.l2",
7655
- position: "relative",
7656
- _horizontal: {
7657
- display: "block"
7658
- },
7659
- _vertical: {
7660
- display: "flex"
7661
- }
7662
- },
7663
- list: {
7664
- display: "inline-flex",
7665
- position: "relative",
7666
- isolation: "isolate",
7667
- "--tabs-indicator-shadow": "shadows.xs",
7668
- "--tabs-indicator-bg": "colors.bg",
7669
- minH: "var(--tabs-height)",
7670
- _horizontal: {
7671
- flexDirection: "row"
7672
- },
7673
- _vertical: {
7674
- flexDirection: "column"
7675
- }
7676
- },
7677
- trigger: {
7678
- outline: "0",
7679
- minW: "var(--tabs-height)",
7680
- height: "var(--tabs-height)",
7681
- display: "flex",
7682
- alignItems: "center",
7683
- fontWeight: "medium",
7684
- position: "relative",
7685
- cursor: "button",
7686
- gap: "2",
7687
- _focusVisible: {
7688
- zIndex: 1,
7689
- focusVisibleRing: "outside"
7690
- },
7691
- _disabled: {
7692
- cursor: "not-allowed",
7693
- opacity: 0.5
7694
- }
7695
- },
7696
- content: {
7697
- focusVisibleRing: "inside",
7698
- _horizontal: {
7699
- width: "100%",
7700
- pt: "var(--tabs-content-padding)"
7701
- },
7702
- _vertical: {
7703
- height: "100%",
7704
- ps: "var(--tabs-content-padding)"
7705
- }
7706
- },
7707
- indicator: {
7708
- width: "var(--width)",
7709
- height: "var(--height)",
7710
- borderRadius: "var(--tabs-indicator-radius)",
7711
- bg: "var(--tabs-indicator-bg)",
7712
- shadow: "var(--tabs-indicator-shadow)",
7713
- zIndex: -1
7714
- }
7715
- },
7716
- variants: {
7717
- fitted: {
7718
- true: {
7719
- list: {
7720
- display: "flex"
7721
- },
7722
- trigger: {
7723
- flex: 1,
7724
- textAlign: "center",
7725
- justifyContent: "center"
7726
- }
7727
- }
7728
- },
7729
- justify: {
7730
- start: {
7731
- list: {
7732
- justifyContent: "flex-start"
7733
- }
7734
- },
7735
- center: {
7736
- list: {
7737
- justifyContent: "center"
7738
- }
7739
- },
7740
- end: {
7741
- list: {
7742
- justifyContent: "flex-end"
7743
- }
7744
- }
7745
- },
7746
- size: {
7747
- sm: {
7748
- root: {
7749
- "--tabs-height": "sizes.9",
7750
- "--tabs-content-padding": "spacing.3"
7751
- },
7752
- trigger: {
7753
- py: "1",
7754
- px: "3",
7755
- textStyle: "sm"
7756
- }
7757
- },
7758
- md: {
7759
- root: {
7760
- "--tabs-height": "sizes.10",
7761
- "--tabs-content-padding": "spacing.4"
7762
- },
7763
- trigger: {
7764
- py: "2",
7765
- px: "4",
7766
- textStyle: "sm"
7767
- }
7768
- },
7769
- lg: {
7770
- root: {
7771
- "--tabs-height": "sizes.11",
7772
- "--tabs-content-padding": "spacing.4.5"
7773
- },
7774
- trigger: {
7775
- py: "2",
7776
- px: "4.5",
7777
- textStyle: "md"
7778
- }
7779
- }
7780
- },
7781
- variant: {
7782
- line: {
7783
- list: {
7784
- display: "flex",
7785
- borderColor: "border",
7786
- _horizontal: {
7787
- borderBottomWidth: "1px"
7788
- },
7789
- _vertical: {
7790
- borderEndWidth: "1px"
7791
- }
7792
- },
7793
- trigger: {
7794
- color: "fg.muted",
7795
- _disabled: {
7796
- _active: { bg: "initial" }
7797
- },
7798
- _selected: {
7799
- color: "fg",
7800
- _horizontal: {
7801
- layerStyle: "indicator.bottom",
7802
- "--indicator-offset-y": "-1px",
7803
- "--indicator-color": "colors.colorPalette.solid"
7804
- },
7805
- _vertical: {
7806
- layerStyle: "indicator.end",
7807
- "--indicator-offset-x": "-1px"
7808
- }
7809
- }
7810
- }
7811
- },
7812
- subtle: {
7813
- trigger: {
7814
- borderRadius: "var(--tabs-trigger-radius)",
7815
- color: "fg.muted",
7816
- _selected: {
7817
- bg: "colorPalette.subtle",
7818
- color: "colorPalette.fg"
7819
- }
8099
+ },
8100
+ cell: {
8101
+ borderBottomWidth: "1px"
8102
+ },
8103
+ row: {
8104
+ bg: "bg"
7820
8105
  }
7821
8106
  },
7822
- enclosed: {
7823
- list: {
7824
- bg: "bg.muted",
7825
- padding: "1",
7826
- borderRadius: "l3",
7827
- minH: "calc(var(--tabs-height) - 4px)"
8107
+ outline: {
8108
+ root: {
8109
+ boxShadow: "0 0 0 1px {colors.border}",
8110
+ overflow: "hidden"
7828
8111
  },
7829
- trigger: {
7830
- justifyContent: "center",
7831
- color: "fg.muted",
7832
- borderRadius: "var(--tabs-trigger-radius)",
7833
- _selected: {
7834
- bg: "bg",
7835
- color: "colorPalette.fg",
7836
- shadow: "xs"
8112
+ columnHeader: {
8113
+ borderBottomWidth: "1px"
8114
+ },
8115
+ header: {
8116
+ bg: "bg.muted"
8117
+ },
8118
+ row: {
8119
+ "&:not(:last-of-type)": {
8120
+ borderBottomWidth: "1px"
7837
8121
  }
8122
+ },
8123
+ footer: {
8124
+ borderTopWidth: "1px"
8125
+ }
8126
+ }
8127
+ },
8128
+ size: {
8129
+ sm: {
8130
+ root: {
8131
+ textStyle: "sm"
8132
+ },
8133
+ columnHeader: {
8134
+ px: "2",
8135
+ py: "2"
8136
+ },
8137
+ cell: {
8138
+ px: "2",
8139
+ py: "2"
7838
8140
  }
7839
8141
  },
7840
- outline: {
7841
- list: {
7842
- "--line-thickness": "1px",
7843
- "--line-offset": "calc(var(--line-thickness) * -1)",
7844
- borderColor: "border",
7845
- display: "flex",
7846
- _horizontal: {
7847
- _before: {
7848
- content: '""',
7849
- position: "absolute",
7850
- bottom: "0px",
7851
- width: "100%",
7852
- borderBottomWidth: "var(--line-thickness)",
7853
- borderBottomColor: "border"
7854
- }
7855
- },
7856
- _vertical: {
7857
- _before: {
7858
- content: '""',
7859
- position: "absolute",
7860
- insetInline: "var(--line-offset)",
7861
- height: "calc(100% - calc(var(--line-thickness) * 2))",
7862
- borderEndWidth: "var(--line-thickness)",
7863
- borderEndColor: "border"
7864
- }
7865
- }
8142
+ md: {
8143
+ root: {
8144
+ textStyle: "sm"
7866
8145
  },
7867
- trigger: {
7868
- color: "fg.muted",
7869
- borderWidth: "1px",
7870
- borderColor: "transparent",
7871
- _selected: {
7872
- bg: "currentBg",
7873
- color: "colorPalette.fg"
7874
- },
7875
- _horizontal: {
7876
- borderTopRadius: "var(--tabs-trigger-radius)",
7877
- marginBottom: "var(--line-offset)",
7878
- marginEnd: { _notLast: "var(--line-offset)" },
7879
- _selected: {
7880
- borderColor: "border",
7881
- borderBottomColor: "transparent"
7882
- }
7883
- },
7884
- _vertical: {
7885
- borderStartRadius: "var(--tabs-trigger-radius)",
7886
- marginEnd: "var(--line-offset)",
7887
- marginBottom: { _notLast: "var(--line-offset)" },
7888
- _selected: {
7889
- borderColor: "border",
7890
- borderEndColor: "transparent"
7891
- }
7892
- }
8146
+ columnHeader: {
8147
+ px: "3",
8148
+ py: "3"
8149
+ },
8150
+ cell: {
8151
+ px: "3",
8152
+ py: "3"
7893
8153
  }
7894
8154
  },
7895
- plain: {
7896
- trigger: {
7897
- color: "fg.muted",
7898
- _selected: {
7899
- color: "colorPalette.fg"
7900
- },
7901
- borderRadius: "var(--tabs-trigger-radius)",
7902
- "&[data-selected][data-ssr]": {
7903
- bg: "var(--tabs-indicator-bg)",
7904
- shadow: "var(--tabs-indicator-shadow)",
7905
- borderRadius: "var(--tabs-indicator-radius)"
7906
- }
8155
+ lg: {
8156
+ root: {
8157
+ textStyle: "md"
8158
+ },
8159
+ columnHeader: {
8160
+ px: "4",
8161
+ py: "3"
8162
+ },
8163
+ cell: {
8164
+ px: "4",
8165
+ py: "3"
7907
8166
  }
7908
8167
  }
7909
8168
  }
7910
8169
  },
7911
8170
  defaultVariants: {
7912
- size: "md",
7913
- variant: "line"
8171
+ variant: "line",
8172
+ size: "md"
7914
8173
  }
7915
8174
  });
7916
8175
 
7917
8176
  // src/theme/recipes/chakra/timeline.ts
7918
- import { defineSlotRecipe as defineSlotRecipe47 } from "@chakra-ui/react";
8177
+ import { defineSlotRecipe as defineSlotRecipe49 } from "@chakra-ui/react";
7919
8178
  import { timelineAnatomy } from "@chakra-ui/react/anatomy";
7920
- var timelineSlotRecipe = defineSlotRecipe47({
8179
+ var timelineSlotRecipe = defineSlotRecipe49({
7921
8180
  slots: timelineAnatomy.keys(),
7922
8181
  className: "chakra-timeline",
7923
8182
  base: {
@@ -8050,156 +8309,6 @@ var timelineSlotRecipe = defineSlotRecipe47({
8050
8309
  }
8051
8310
  });
8052
8311
 
8053
- // src/theme/recipes/chakra/toast.ts
8054
- import { defineSlotRecipe as defineSlotRecipe48 } from "@chakra-ui/react";
8055
- import { toastAnatomy } from "@chakra-ui/react/anatomy";
8056
- var toastSlotRecipe = defineSlotRecipe48({
8057
- slots: toastAnatomy.keys(),
8058
- className: "chakra-toast",
8059
- base: {
8060
- root: {
8061
- width: "full",
8062
- display: "flex",
8063
- alignItems: "flex-start",
8064
- position: "relative",
8065
- gap: "3",
8066
- py: "4",
8067
- ps: "4",
8068
- pe: "6",
8069
- borderRadius: "l2",
8070
- translate: "var(--x) var(--y)",
8071
- scale: "var(--scale)",
8072
- zIndex: "var(--z-index)",
8073
- height: "var(--height)",
8074
- opacity: "var(--opacity)",
8075
- willChange: "translate, opacity, scale",
8076
- transition: "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
8077
- transitionTimingFunction: "cubic-bezier(0.21, 1.02, 0.73, 1)",
8078
- _closed: {
8079
- transition: "translate 400ms, scale 400ms, opacity 200ms",
8080
- transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)"
8081
- },
8082
- bg: "bg.panel",
8083
- color: "fg",
8084
- boxShadow: "xl",
8085
- "--toast-trigger-bg": "colors.bg.muted",
8086
- "&[data-type=warning]": {
8087
- bg: "orange.solid",
8088
- color: "orange.contrast",
8089
- "--toast-trigger-bg": "{white/10}",
8090
- "--toast-border-color": "{white/40}"
8091
- },
8092
- "&[data-type=success]": {
8093
- bg: "green.solid",
8094
- color: "green.contrast",
8095
- "--toast-trigger-bg": "{white/10}",
8096
- "--toast-border-color": "{white/40}"
8097
- },
8098
- "&[data-type=error]": {
8099
- bg: "red.solid",
8100
- color: "red.contrast",
8101
- "--toast-trigger-bg": "{white/10}",
8102
- "--toast-border-color": "{white/40}"
8103
- }
8104
- },
8105
- title: {
8106
- fontWeight: "medium",
8107
- textStyle: "sm",
8108
- marginEnd: "2"
8109
- },
8110
- description: {
8111
- display: "inline",
8112
- textStyle: "sm",
8113
- opacity: "0.8"
8114
- },
8115
- indicator: {
8116
- flexShrink: "0",
8117
- boxSize: "5"
8118
- },
8119
- actionTrigger: {
8120
- textStyle: "sm",
8121
- fontWeight: "medium",
8122
- height: "8",
8123
- px: "3",
8124
- borderRadius: "l2",
8125
- alignSelf: "center",
8126
- borderWidth: "1px",
8127
- borderColor: "var(--toast-border-color, inherit)",
8128
- transition: "background 200ms",
8129
- _hover: {
8130
- bg: "var(--toast-trigger-bg)"
8131
- }
8132
- },
8133
- closeTrigger: {
8134
- position: "absolute",
8135
- top: "1",
8136
- insetEnd: "1",
8137
- padding: "1",
8138
- display: "inline-flex",
8139
- alignItems: "center",
8140
- justifyContent: "center",
8141
- color: "{currentColor/60}",
8142
- borderRadius: "l2",
8143
- textStyle: "md",
8144
- transition: "background 200ms"
8145
- }
8146
- }
8147
- });
8148
-
8149
- // src/theme/recipes/chakra/tooltip.ts
8150
- import { defineSlotRecipe as defineSlotRecipe49 } from "@chakra-ui/react";
8151
- import { tooltipAnatomy } from "@chakra-ui/react/anatomy";
8152
- var tooltipSlotRecipe = defineSlotRecipe49({
8153
- slots: tooltipAnatomy.keys(),
8154
- className: "chakra-tooltip",
8155
- base: {
8156
- content: {
8157
- "--tooltip-bg": "colors.bg",
8158
- display: "flex",
8159
- alignItems: "center",
8160
- bg: "var(--tooltip-bg)",
8161
- color: "fg",
8162
- px: "2.5",
8163
- py: "1",
8164
- borderRadius: "l2",
8165
- fontWeight: "medium",
8166
- textStyle: "xs",
8167
- boxShadow: "md",
8168
- maxW: "xs",
8169
- zIndex: "tooltip",
8170
- transformOrigin: "var(--transform-origin)",
8171
- _open: {
8172
- animationStyle: "scale-fade-in",
8173
- animationDuration: "fast"
8174
- },
8175
- _closed: {
8176
- animationStyle: "scale-fade-out",
8177
- animationDuration: "fast"
8178
- }
8179
- },
8180
- arrow: {
8181
- "--arrow-size": "sizes.2",
8182
- "--arrow-background": "var(--tooltip-bg)",
8183
- zIndex: "-1"
8184
- },
8185
- arrowTip: {
8186
- borderTopWidth: "1px",
8187
- borderInlineStartWidth: "1px",
8188
- borderColor: "var(--tooltip-bg)"
8189
- }
8190
- },
8191
- variants: {
8192
- variant: {
8193
- inverted: {
8194
- content: {
8195
- "--tooltip-bg": "colors.bg.inverted",
8196
- color: "fg.inverted"
8197
- }
8198
- }
8199
- }
8200
- }
8201
- });
8202
-
8203
8312
  // src/theme/slot-recipes.ts
8204
8313
  var slotRecipes = {
8205
8314
  // Chakra UI Recipes
@@ -8613,17 +8722,17 @@ var lineHeights = defineTokens12.lineHeights({
8613
8722
  import { defineTokens as defineTokens13 } from "@chakra-ui/react";
8614
8723
  var radii = defineTokens13.radii({
8615
8724
  "2xs": {
8616
- value: radiusToken("0.0625rem")
8617
- },
8618
- xs: { value: radiusToken("0.125rem") },
8619
- sm: { value: radiusToken("0.25rem") },
8620
- md: { value: radiusToken("0.375rem") },
8621
- lg: { value: radiusToken("0.5rem") },
8622
- xl: { value: radiusToken("0.75rem") },
8623
- "2xl": { value: radiusToken("1rem") },
8624
- "3xl": { value: radiusToken("1.5rem") },
8625
- "4xl": { value: radiusToken("2rem") },
8626
- full: { value: "var(--radius-full)" }
8725
+ value: "0.0625rem"
8726
+ },
8727
+ xs: { value: "0.125rem" },
8728
+ sm: { value: "0.25rem" },
8729
+ md: { value: "0.375rem" },
8730
+ lg: { value: "0.5rem" },
8731
+ xl: { value: "0.75rem" },
8732
+ "2xl": { value: "1rem" },
8733
+ "3xl": { value: "1.5rem" },
8734
+ "4xl": { value: "2rem" },
8735
+ full: { value: "9999px" }
8627
8736
  });
8628
8737
 
8629
8738
  // src/theme/tokens/sizes.ts
@@ -8885,9 +8994,11 @@ export {
8885
8994
  Checkbox,
8886
8995
  CloseButton,
8887
8996
  Command,
8888
- namespace_exports as Dialog,
8889
- namespace_exports2 as Drawer,
8997
+ DataList,
8998
+ dialog_exports as Dialog,
8999
+ drawer_exports as Drawer,
8890
9000
  EmptyState,
9001
+ file_upload_exports as FileUpload,
8891
9002
  grid_list_exports as GridList,
8892
9003
  IconBadge,
8893
9004
  IconButton,
@@ -8902,11 +9013,12 @@ export {
8902
9013
  Persona,
8903
9014
  PersonaAvatar,
8904
9015
  PinInput,
9016
+ popover_exports as Popover,
8905
9017
  Radio,
8906
9018
  RadioGroup,
8907
9019
  SearchInput,
8908
9020
  SegmentedControl,
8909
- namespace_exports3 as Select,
9021
+ namespace_exports as Select,
8910
9022
  sidebar_exports as Sidebar,
8911
9023
  Spinner,
8912
9024
  Status,
@@ -8914,6 +9026,7 @@ export {
8914
9026
  SuiContext,
8915
9027
  SuiProvider,
8916
9028
  Switch,
9029
+ Tabs,
8917
9030
  Tag,
8918
9031
  Toaster,
8919
9032
  Tooltip,
@@ -8922,10 +9035,13 @@ export {
8922
9035
  defaultPresenceOptions,
8923
9036
  defaultSystem,
8924
9037
  toast,
9038
+ useDataListStyles,
8925
9039
  useLink,
8926
9040
  useLoadingOverlayStyles,
8927
9041
  useSidebar,
8928
9042
  useSidebarItemStyles,
8929
9043
  useSidebarStyles,
8930
- useSui
9044
+ useSui,
9045
+ useTabsContext,
9046
+ useTabsStyles
8931
9047
  };