@saas-ui/react 3.0.0-next.44 → 3.0.0-next.47

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 (223) hide show
  1. package/dist/.tsbuildinfo.json +1 -1
  2. package/dist/colors.d.ts +1 -1
  3. package/dist/colors.js +1 -1
  4. package/dist/components/command/command.d.ts +1 -1
  5. package/dist/components/grid-list/grid-list.d.ts +1 -1
  6. package/dist/components/persona/persona-composed.d.ts +1 -1
  7. package/dist/components/persona/persona.d.ts +1 -1
  8. package/dist/index.d.ts +1 -1
  9. package/dist/preset.d.ts +1 -3
  10. package/dist/preset.js +1 -10
  11. package/package.json +3 -2
  12. package/dist/components/accordion/accordion.recipe.d.ts +0 -84
  13. package/dist/components/accordion/accordion.recipe.js +0 -148
  14. package/dist/components/action-bar/action-bar.recipe.d.ts +0 -1
  15. package/dist/components/action-bar/action-bar.recipe.js +0 -56
  16. package/dist/components/alert/alert.recipe.d.ts +0 -120
  17. package/dist/components/alert/alert.recipe.js +0 -149
  18. package/dist/components/app-shell/app-shell.recipe.d.ts +0 -13
  19. package/dist/components/app-shell/app-shell.recipe.js +0 -41
  20. package/dist/components/avatar/avatar.recipe.d.ts +0 -88
  21. package/dist/components/avatar/avatar.recipe.js +0 -129
  22. package/dist/components/badge/badge.recipe.d.ts +0 -48
  23. package/dist/components/badge/badge.recipe.js +0 -66
  24. package/dist/components/blockquote/blockquote.recipe.d.ts +0 -52
  25. package/dist/components/blockquote/blockquote.recipe.js +0 -77
  26. package/dist/components/breadcrumb/breadcrumb.recipe.d.ts +0 -46
  27. package/dist/components/breadcrumb/breadcrumb.recipe.js +0 -90
  28. package/dist/components/button/button.recipe.d.ts +0 -141
  29. package/dist/components/button/button.recipe.js +0 -185
  30. package/dist/components/card/card.recipe.d.ts +0 -78
  31. package/dist/components/card/card.recipe.js +0 -133
  32. package/dist/components/checkbox/checkbox.recipe.d.ts +0 -80
  33. package/dist/components/checkbox/checkbox.recipe.js +0 -64
  34. package/dist/components/checkbox-card/checkbox-card.recipe.d.ts +0 -188
  35. package/dist/components/checkbox-card/checkbox-card.recipe.js +0 -202
  36. package/dist/components/checkmark/checkmark.recipe.d.ts +0 -54
  37. package/dist/components/checkmark/checkmark.recipe.js +0 -80
  38. package/dist/components/code/code.recipe.d.ts +0 -48
  39. package/dist/components/code/code.recipe.js +0 -14
  40. package/dist/components/collapsible/collapsible.recipe.d.ts +0 -1
  41. package/dist/components/collapsible/collapsible.recipe.js +0 -19
  42. package/dist/components/combobox/combobox.recipe.d.ts +0 -144
  43. package/dist/components/combobox/combobox.recipe.js +0 -292
  44. package/dist/components/command/command.recipe.d.ts +0 -15
  45. package/dist/components/command/command.recipe.js +0 -34
  46. package/dist/components/container/container.recipe.d.ts +0 -14
  47. package/dist/components/container/container.recipe.js +0 -25
  48. package/dist/components/data-list/data-list.recipe.d.ts +0 -55
  49. package/dist/components/data-list/data-list.recipe.js +0 -78
  50. package/dist/components/dialog/dialog.recipe.d.ts +0 -166
  51. package/dist/components/dialog/dialog.recipe.js +0 -256
  52. package/dist/components/drawer/drawer.recipe.d.ts +0 -113
  53. package/dist/components/drawer/drawer.recipe.js +0 -202
  54. package/dist/components/editable/editable.recipe.d.ts +0 -37
  55. package/dist/components/editable/editable.recipe.js +0 -89
  56. package/dist/components/empty-state/empty-state.recipe.d.ts +0 -83
  57. package/dist/components/empty-state/empty-state.recipe.js +0 -137
  58. package/dist/components/field/field.recipe.d.ts +0 -29
  59. package/dist/components/field/field.recipe.js +0 -74
  60. package/dist/components/fieldset/fieldset.recipe.d.ts +0 -37
  61. package/dist/components/fieldset/fieldset.recipe.js +0 -59
  62. package/dist/components/file-upload/file-upload.recipe.d.ts +0 -1
  63. package/dist/components/file-upload/file-upload.recipe.js +0 -90
  64. package/dist/components/grid-list/grid-list.recipe.d.ts +0 -60
  65. package/dist/components/grid-list/grid-list.recipe.js +0 -131
  66. package/dist/components/heading/heading.recipe.d.ts +0 -59
  67. package/dist/components/heading/heading.recipe.js +0 -70
  68. package/dist/components/hover-card/hover-card.recipe.d.ts +0 -28
  69. package/dist/components/hover-card/hover-card.recipe.js +0 -70
  70. package/dist/components/icon/icon.recipe.d.ts +0 -25
  71. package/dist/components/icon/icon.recipe.js +0 -27
  72. package/dist/components/icon-badge/icon-badge.recipe.d.ts +0 -43
  73. package/dist/components/icon-badge/icon-badge.recipe.js +0 -57
  74. package/dist/components/input/input.recipe.d.ts +0 -66
  75. package/dist/components/input/input.recipe.js +0 -93
  76. package/dist/components/input-addon/input-addon.recipe.d.ts +0 -56
  77. package/dist/components/input-addon/input-addon.recipe.js +0 -36
  78. package/dist/components/kbd/kbd.recipe.d.ts +0 -36
  79. package/dist/components/kbd/kbd.recipe.js +0 -56
  80. package/dist/components/link/link.recipe.d.ts +0 -18
  81. package/dist/components/link/link.recipe.js +0 -34
  82. package/dist/components/list/list.recipe.d.ts +0 -38
  83. package/dist/components/list/list.recipe.js +0 -62
  84. package/dist/components/loading-overlay/loading-overlay.recipe.d.ts +0 -26
  85. package/dist/components/loading-overlay/loading-overlay.recipe.js +0 -51
  86. package/dist/components/mark/mark.recipe.d.ts +0 -16
  87. package/dist/components/mark/mark.recipe.js +0 -25
  88. package/dist/components/menu/menu.recipe.d.ts +0 -58
  89. package/dist/components/menu/menu.recipe.js +0 -133
  90. package/dist/components/native-select/native-select.recipe.d.ts +0 -90
  91. package/dist/components/native-select/native-select.recipe.js +0 -134
  92. package/dist/components/navbar/navbar.recipe.d.ts +0 -46
  93. package/dist/components/navbar/navbar.recipe.js +0 -124
  94. package/dist/components/number-input/number-input.recipe.d.ts +0 -144
  95. package/dist/components/number-input/number-input.recipe.js +0 -111
  96. package/dist/components/page/page.recipe.d.ts +0 -61
  97. package/dist/components/page/page.recipe.js +0 -99
  98. package/dist/components/persona/persona.recipe.d.ts +0 -104
  99. package/dist/components/persona/persona.recipe.js +0 -106
  100. package/dist/components/pin-input/pin-input.recipe.d.ts +0 -236
  101. package/dist/components/pin-input/pin-input.recipe.js +0 -32
  102. package/dist/components/popover/popover.recipe.d.ts +0 -24
  103. package/dist/components/popover/popover.recipe.js +0 -84
  104. package/dist/components/progress/progress.recipe.d.ts +0 -82
  105. package/dist/components/progress/progress.recipe.js +0 -121
  106. package/dist/components/progress-circle/progress-circle.recipe.d.ts +0 -49
  107. package/dist/components/progress-circle/progress-circle.recipe.js +0 -91
  108. package/dist/components/radio/radiomark.recipe.d.ts +0 -56
  109. package/dist/components/radio/radiomark.recipe.js +0 -95
  110. package/dist/components/radio-card/radio-card.recipe.d.ts +0 -191
  111. package/dist/components/radio-card/radio-card.recipe.js +0 -209
  112. package/dist/components/radio-group/radio-group.recipe.d.ts +0 -77
  113. package/dist/components/radio-group/radio-group.recipe.js +0 -61
  114. package/dist/components/rating-group/rating-group.recipe.d.ts +0 -24
  115. package/dist/components/rating-group/rating-group.recipe.js +0 -83
  116. package/dist/components/section/section.recipe.d.ts +0 -27
  117. package/dist/components/section/section.recipe.js +0 -63
  118. package/dist/components/segmented-control/segment-group.recipe.d.ts +0 -48
  119. package/dist/components/segmented-control/segment-group.recipe.js +0 -127
  120. package/dist/components/select/select.recipe.d.ts +0 -155
  121. package/dist/components/select/select.recipe.js +0 -285
  122. package/dist/components/separator/separator.recipe.d.ts +0 -37
  123. package/dist/components/separator/separator.recipe.js +0 -50
  124. package/dist/components/sidebar/sidebar-nav-item.recipe.d.ts +0 -67
  125. package/dist/components/sidebar/sidebar-nav-item.recipe.js +0 -118
  126. package/dist/components/sidebar/sidebar.recipe.d.ts +0 -108
  127. package/dist/components/sidebar/sidebar.recipe.js +0 -280
  128. package/dist/components/skeleton/skeleton.recipe.d.ts +0 -41
  129. package/dist/components/skeleton/skeleton.recipe.js +0 -50
  130. package/dist/components/skip-nav-link/skip-nav-link.recipe.d.ts +0 -1
  131. package/dist/components/skip-nav-link/skip-nav-link.recipe.js +0 -31
  132. package/dist/components/slider/slider.recipe.d.ts +0 -101
  133. package/dist/components/slider/slider.recipe.js +0 -175
  134. package/dist/components/spinner/spinner.recipe.d.ts +0 -22
  135. package/dist/components/spinner/spinner.recipe.js +0 -31
  136. package/dist/components/stat/stat.recipe.d.ts +0 -19
  137. package/dist/components/stat/stat.recipe.js +0 -76
  138. package/dist/components/status/status.recipe.d.ts +0 -19
  139. package/dist/components/status/status.recipe.js +0 -44
  140. package/dist/components/steps/steps.recipe.d.ts +0 -142
  141. package/dist/components/steps/steps.recipe.js +0 -213
  142. package/dist/components/switch/switch.recipe.d.ts +0 -77
  143. package/dist/components/switch/switch.recipe.js +0 -157
  144. package/dist/components/table/table.recipe.d.ts +0 -121
  145. package/dist/components/table/table.recipe.js +0 -161
  146. package/dist/components/tabs/tabs.recipe.d.ts +0 -263
  147. package/dist/components/tabs/tabs.recipe.js +0 -332
  148. package/dist/components/tag/tag.recipe.d.ts +0 -95
  149. package/dist/components/tag/tag.recipe.js +0 -154
  150. package/dist/components/textarea/textarea.recipe.d.ts +0 -65
  151. package/dist/components/textarea/textarea.recipe.js +0 -90
  152. package/dist/components/timeline/timeline.recipe.d.ts +0 -62
  153. package/dist/components/timeline/timeline.recipe.js +0 -134
  154. package/dist/components/toaster/toast.recipe.d.ts +0 -1
  155. package/dist/components/toaster/toast.recipe.js +0 -90
  156. package/dist/components/tooltip/tooltip.recipe.d.ts +0 -10
  157. package/dist/components/tooltip/tooltip.recipe.js +0 -52
  158. package/dist/theme/animation-styles.d.ts +0 -1
  159. package/dist/theme/animation-styles.js +0 -49
  160. package/dist/theme/breakpoints.d.ts +0 -10
  161. package/dist/theme/breakpoints.js +0 -8
  162. package/dist/theme/conditions.d.ts +0 -18
  163. package/dist/theme/conditions.js +0 -19
  164. package/dist/theme/fluid-font-sizes.d.ts +0 -0
  165. package/dist/theme/fluid-font-sizes.js +0 -61
  166. package/dist/theme/global-css.d.ts +0 -1
  167. package/dist/theme/global-css.js +0 -56
  168. package/dist/theme/index.d.ts +0 -1
  169. package/dist/theme/index.js +0 -72
  170. package/dist/theme/layer-styles.d.ts +0 -1
  171. package/dist/theme/layer-styles.js +0 -133
  172. package/dist/theme/recipes.d.ts +0 -861
  173. package/dist/theme/recipes.js +0 -44
  174. package/dist/theme/semantic-tokens/colors.d.ts +0 -1298
  175. package/dist/theme/semantic-tokens/colors.js +0 -687
  176. package/dist/theme/semantic-tokens/radii.d.ts +0 -44
  177. package/dist/theme/semantic-tokens/radii.js +0 -39
  178. package/dist/theme/semantic-tokens/shadows.d.ts +0 -56
  179. package/dist/theme/semantic-tokens/shadows.js +0 -57
  180. package/dist/theme/slot-recipes.d.ts +0 -4030
  181. package/dist/theme/slot-recipes.js +0 -108
  182. package/dist/theme/text-styles.d.ts +0 -1
  183. package/dist/theme/text-styles.js +0 -82
  184. package/dist/theme/tokens/animations.d.ts +0 -14
  185. package/dist/theme/tokens/animations.js +0 -7
  186. package/dist/theme/tokens/aspect-ratios.d.ts +0 -20
  187. package/dist/theme/tokens/aspect-ratios.js +0 -9
  188. package/dist/theme/tokens/blurs.d.ts +0 -26
  189. package/dist/theme/tokens/blurs.js +0 -11
  190. package/dist/theme/tokens/borders.d.ts +0 -17
  191. package/dist/theme/tokens/borders.js +0 -8
  192. package/dist/theme/tokens/colors.d.ts +0 -820
  193. package/dist/theme/tokens/colors.js +0 -306
  194. package/dist/theme/tokens/cursor.d.ts +0 -26
  195. package/dist/theme/tokens/cursor.js +0 -11
  196. package/dist/theme/tokens/durations.d.ts +0 -23
  197. package/dist/theme/tokens/durations.js +0 -10
  198. package/dist/theme/tokens/easings.d.ts +0 -20
  199. package/dist/theme/tokens/easings.js +0 -9
  200. package/dist/theme/tokens/font-sizes.d.ts +0 -44
  201. package/dist/theme/tokens/font-sizes.js +0 -18
  202. package/dist/theme/tokens/font-weights.d.ts +0 -29
  203. package/dist/theme/tokens/font-weights.js +0 -12
  204. package/dist/theme/tokens/fonts.d.ts +0 -11
  205. package/dist/theme/tokens/fonts.js +0 -13
  206. package/dist/theme/tokens/keyframes.d.ts +0 -1
  207. package/dist/theme/tokens/keyframes.js +0 -157
  208. package/dist/theme/tokens/letter-spacing.d.ts +0 -56
  209. package/dist/theme/tokens/letter-spacing.js +0 -21
  210. package/dist/theme/tokens/line-heights.d.ts +0 -77
  211. package/dist/theme/tokens/line-heights.js +0 -29
  212. package/dist/theme/tokens/radius.d.ts +0 -32
  213. package/dist/theme/tokens/radius.js +0 -15
  214. package/dist/theme/tokens/sizes.d.ts +0 -257
  215. package/dist/theme/tokens/sizes.js +0 -66
  216. package/dist/theme/tokens/spacing.d.ts +0 -101
  217. package/dist/theme/tokens/spacing.js +0 -37
  218. package/dist/theme/tokens/z-indices.d.ts +0 -53
  219. package/dist/theme/tokens/z-indices.js +0 -32
  220. package/dist/theme/utilities.d.ts +0 -10
  221. package/dist/theme/utilities.js +0 -49
  222. package/dist/theme/utils.d.ts +0 -19
  223. package/dist/theme/utils.js +0 -34
@@ -1,58 +0,0 @@
1
- export declare const menuSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "item" | "itemIndicator" | "positioner" | "separator" | "trigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "arrow" | "arrowTip" | "contextTrigger" | "triggerItem" | "itemCommand", {
2
- variant: {
3
- subtle: {
4
- item: {
5
- _highlighted: {
6
- bg: "bg.emphasized";
7
- };
8
- };
9
- };
10
- solid: {
11
- item: {
12
- _highlighted: {
13
- bg: "colorPalette.solid";
14
- color: "colorPalette.contrast";
15
- };
16
- };
17
- };
18
- };
19
- size: {
20
- sm: {
21
- content: {
22
- minW: "8rem";
23
- padding: "1";
24
- borderRadius: "panel.md";
25
- };
26
- item: {
27
- gap: "1";
28
- textStyle: "xs";
29
- minH: "6";
30
- px: "1.5";
31
- ps: "var(--menu-item-inset, {sizes.1.5})";
32
- };
33
- itemGroupLabel: {
34
- textStyle: "xs";
35
- minH: "6";
36
- px: "1.5";
37
- };
38
- };
39
- md: {
40
- content: {
41
- minW: "8rem";
42
- padding: "1";
43
- };
44
- item: {
45
- gap: "2";
46
- textStyle: "sm";
47
- minH: "7";
48
- px: "2";
49
- ps: "var(--menu-item-inset, {sizes.2})";
50
- };
51
- itemGroupLabel: {
52
- textStyle: "sm";
53
- minH: "7";
54
- px: "2";
55
- };
56
- };
57
- };
58
- }>;
@@ -1,133 +0,0 @@
1
- import { menuAnatomy } from '@chakra-ui/react/anatomy';
2
- import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
3
- export const menuSlotRecipe = defineSlotRecipe({
4
- className: 'chakra-menu',
5
- slots: menuAnatomy.keys(),
6
- base: {
7
- content: {
8
- layerStyle: 'overlay',
9
- outline: 0,
10
- color: 'fg',
11
- maxHeight: 'var(--available-height)',
12
- '--menu-z-index': 'zIndex.layer-3',
13
- zIndex: 'calc(var(--menu-z-index) + var(--layer-index, 0))',
14
- overflowY: 'auto',
15
- _open: {
16
- animationStyle: 'slide-fade-in',
17
- animationDuration: 'fastest',
18
- },
19
- _closed: {
20
- animationStyle: 'slide-fade-out',
21
- animationDuration: 'fastest',
22
- },
23
- scrollbar: 'thin',
24
- },
25
- item: {
26
- textDecoration: 'none',
27
- color: 'fg',
28
- userSelect: 'none',
29
- borderRadius: 'control.md',
30
- width: '100%',
31
- display: 'flex',
32
- cursor: 'menuitem',
33
- alignItems: 'center',
34
- textAlign: 'start',
35
- position: 'relative',
36
- flex: '0 0 auto',
37
- outline: 0,
38
- _disabled: {
39
- layerStyle: 'disabled',
40
- },
41
- },
42
- itemText: {
43
- flex: '1',
44
- },
45
- itemGroupLabel: {
46
- display: 'flex',
47
- alignItems: 'center',
48
- textStyle: 'sm',
49
- color: 'fg.subtle',
50
- },
51
- indicator: {
52
- display: 'inline-flex',
53
- alignItems: 'center',
54
- justifyContent: 'center',
55
- flexShrink: '0',
56
- },
57
- itemCommand: {
58
- opacity: '0.6',
59
- textStyle: 'xs',
60
- ms: 'auto',
61
- ps: '4',
62
- letterSpacing: 'widest',
63
- },
64
- separator: {
65
- height: '1px',
66
- bg: 'bg.muted',
67
- my: '1',
68
- mx: '-1',
69
- },
70
- },
71
- variants: {
72
- variant: {
73
- subtle: {
74
- item: {
75
- _highlighted: {
76
- bg: 'bg.emphasized',
77
- },
78
- },
79
- },
80
- solid: {
81
- item: {
82
- _highlighted: {
83
- bg: 'colorPalette.solid',
84
- color: 'colorPalette.contrast',
85
- },
86
- },
87
- },
88
- },
89
- size: {
90
- sm: {
91
- content: {
92
- minW: '8rem',
93
- padding: '1',
94
- borderRadius: 'panel.md',
95
- },
96
- item: {
97
- gap: '1',
98
- textStyle: 'xs',
99
- minH: '6',
100
- px: '1.5',
101
- ps: 'var(--menu-item-inset, {sizes.1.5})',
102
- },
103
- itemGroupLabel: {
104
- textStyle: 'xs',
105
- minH: '6',
106
- px: '1.5',
107
- },
108
- },
109
- md: {
110
- content: {
111
- minW: '8rem',
112
- padding: '1',
113
- },
114
- item: {
115
- gap: '2',
116
- textStyle: 'sm',
117
- minH: '7',
118
- px: '2',
119
- ps: 'var(--menu-item-inset, {sizes.2})',
120
- },
121
- itemGroupLabel: {
122
- textStyle: 'sm',
123
- minH: '7',
124
- px: '2',
125
- },
126
- },
127
- },
128
- },
129
- defaultVariants: {
130
- size: 'md',
131
- variant: 'solid',
132
- },
133
- });
@@ -1,90 +0,0 @@
1
- export declare const nativeSelectSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "root" | "field", {
2
- variant: {
3
- outline: {
4
- field: {
5
- bg: "transparent";
6
- borderWidth: "1px";
7
- borderColor: "border";
8
- _expanded: {
9
- borderColor: "border.emphasized";
10
- };
11
- } | undefined;
12
- };
13
- subtle: {
14
- field: {
15
- borderWidth: "1px";
16
- borderColor: "transparent";
17
- bg: "bg.muted";
18
- } | undefined;
19
- };
20
- plain: {
21
- field: {
22
- bg: "transparent";
23
- color: "fg";
24
- focusRingWidth: "2px";
25
- };
26
- };
27
- };
28
- size: {
29
- xs: {
30
- field: {
31
- textStyle: "xs";
32
- ps: "2";
33
- pe: "6";
34
- height: "6";
35
- };
36
- indicator: {
37
- textStyle: "sm";
38
- insetEnd: "1.5";
39
- };
40
- };
41
- sm: {
42
- field: {
43
- textStyle: "sm";
44
- ps: "2.5";
45
- pe: "8";
46
- height: "8";
47
- };
48
- indicator: {
49
- textStyle: "md";
50
- insetEnd: "2";
51
- };
52
- };
53
- md: {
54
- field: {
55
- textStyle: "sm";
56
- ps: "3";
57
- pe: "8";
58
- height: "10";
59
- };
60
- indicator: {
61
- textStyle: "lg";
62
- insetEnd: "2";
63
- };
64
- };
65
- lg: {
66
- field: {
67
- textStyle: "md";
68
- ps: "4";
69
- pe: "8";
70
- height: "11";
71
- };
72
- indicator: {
73
- textStyle: "xl";
74
- insetEnd: "3";
75
- };
76
- };
77
- xl: {
78
- field: {
79
- textStyle: "md";
80
- ps: "4.5";
81
- pe: "10";
82
- height: "12";
83
- };
84
- indicator: {
85
- textStyle: "xl";
86
- insetEnd: "3";
87
- };
88
- };
89
- };
90
- }>;
@@ -1,134 +0,0 @@
1
- import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy';
2
- import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
3
- import { selectSlotRecipe } from "../select/select.recipe.js";
4
- export const nativeSelectSlotRecipe = defineSlotRecipe({
5
- className: 'chakra-native-select',
6
- slots: nativeSelectAnatomy.keys(),
7
- base: {
8
- root: {
9
- height: 'fit-content',
10
- display: 'flex',
11
- width: '100%',
12
- position: 'relative',
13
- },
14
- field: {
15
- width: '100%',
16
- minWidth: '0',
17
- outline: '0',
18
- appearance: 'none',
19
- borderRadius: 'control.md',
20
- _disabled: {
21
- layerStyle: 'disabled',
22
- },
23
- _invalid: {
24
- borderColor: 'border.error',
25
- },
26
- focusVisibleRing: 'inside',
27
- lineHeight: 'normal',
28
- '& > option, & > optgroup': {
29
- bg: 'inherit',
30
- },
31
- },
32
- indicator: {
33
- position: 'absolute',
34
- display: 'inline-flex',
35
- alignItems: 'center',
36
- justifyContent: 'center',
37
- pointerEvents: 'none',
38
- top: '50%',
39
- transform: 'translateY(-50%)',
40
- height: '100%',
41
- color: 'fg.muted',
42
- _disabled: {
43
- opacity: '0.5',
44
- },
45
- _invalid: {
46
- color: 'fg.error',
47
- },
48
- _icon: {
49
- width: '1em',
50
- height: '1em',
51
- },
52
- },
53
- },
54
- variants: {
55
- variant: {
56
- outline: {
57
- field: selectSlotRecipe.variants?.variant.outline.trigger,
58
- },
59
- subtle: {
60
- field: selectSlotRecipe.variants?.variant.subtle.trigger,
61
- },
62
- plain: {
63
- field: {
64
- bg: 'transparent',
65
- color: 'fg',
66
- focusRingWidth: '2px',
67
- },
68
- },
69
- },
70
- size: {
71
- xs: {
72
- field: {
73
- textStyle: 'xs',
74
- ps: '2',
75
- pe: '6',
76
- height: '6',
77
- },
78
- indicator: {
79
- textStyle: 'sm',
80
- insetEnd: '1.5',
81
- },
82
- },
83
- sm: {
84
- field: {
85
- textStyle: 'sm',
86
- ps: '2.5',
87
- pe: '8',
88
- height: '8',
89
- },
90
- indicator: {
91
- textStyle: 'md',
92
- insetEnd: '2',
93
- },
94
- },
95
- md: {
96
- field: {
97
- textStyle: 'sm',
98
- ps: '3',
99
- pe: '8',
100
- height: '10',
101
- },
102
- indicator: {
103
- textStyle: 'lg',
104
- insetEnd: '2',
105
- },
106
- },
107
- lg: {
108
- field: {
109
- textStyle: 'md',
110
- ps: '4',
111
- pe: '8',
112
- height: '11',
113
- },
114
- indicator: {
115
- textStyle: 'xl',
116
- insetEnd: '3',
117
- },
118
- },
119
- xl: {
120
- field: {
121
- textStyle: 'md',
122
- ps: '4.5',
123
- pe: '10',
124
- height: '12',
125
- },
126
- indicator: {
127
- textStyle: 'xl',
128
- insetEnd: '3',
129
- },
130
- },
131
- },
132
- },
133
- defaultVariants: selectSlotRecipe.defaultVariants,
134
- });
@@ -1,46 +0,0 @@
1
- export declare const navbarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "link" | "root" | "item" | "itemGroup" | "brand", {
2
- variant: {
3
- neutral: {
4
- root: {
5
- bg: "bg.panel";
6
- color: "fg";
7
- };
8
- };
9
- solid: {
10
- root: {
11
- bg: "colorPalette.solid";
12
- color: "colorPalette.contrast";
13
- };
14
- link: {
15
- _hover: {
16
- bg: "colorPalette.contrast/10";
17
- };
18
- };
19
- };
20
- glass: {
21
- root: {
22
- bg: "bg.overlay";
23
- backdropFilter: "var(--overlay-effect)";
24
- color: "fg";
25
- };
26
- };
27
- };
28
- size: {
29
- md: {
30
- root: {
31
- fontSize: "sm";
32
- };
33
- content: {
34
- px: {
35
- base: number;
36
- lg: number;
37
- };
38
- gap: number;
39
- };
40
- link: {
41
- px: number;
42
- h: number;
43
- };
44
- };
45
- };
46
- }>;
@@ -1,124 +0,0 @@
1
- import { defineSlotRecipe } from '@chakra-ui/react';
2
- export const navbarSlotRecipe = defineSlotRecipe({
3
- className: 'sui-navbar',
4
- slots: ['root', 'content', 'brand', 'itemGroup', 'item', 'link'],
5
- base: {
6
- root: {
7
- display: 'flex',
8
- zIndex: 'layer-3',
9
- width: 'full',
10
- height: 'auto',
11
- alignItems: 'center',
12
- justifyContent: 'center',
13
- top: 0,
14
- insetX: 0,
15
- transitionProperty: 'common',
16
- transitionDuration: 'moderate',
17
- transitionTimingFunction: 'ease-in-out',
18
- _hidden: {
19
- transform: 'translateY(-100%)',
20
- },
21
- },
22
- content: {
23
- display: 'flex',
24
- alignItems: 'center',
25
- justifyContent: 'space-between',
26
- width: 'full',
27
- height: 'var(--navbar-height)',
28
- flexWrap: 'nowrap',
29
- },
30
- brand: {
31
- display: 'flex',
32
- alignItems: 'center',
33
- justifyContent: 'flex-start',
34
- height: 'full',
35
- bg: 'transparent',
36
- textDecoration: 'none',
37
- color: 'inherit',
38
- whiteSpace: 'nowrap',
39
- boxSizing: 'border-box',
40
- },
41
- itemGroup: {
42
- display: 'flex',
43
- alignItems: 'center',
44
- justifyContent: 'flex-start',
45
- height: 'full',
46
- bg: 'transparent',
47
- },
48
- link: {
49
- bg: 'transparent',
50
- color: 'currentColor',
51
- display: 'inline-flex',
52
- alignItems: 'center',
53
- justifyContent: 'center',
54
- textDecoration: 'none',
55
- whiteSpace: 'nowrap',
56
- boxSizing: 'border-box',
57
- borderRadius: 'control.md',
58
- transitionProperty: 'common',
59
- transitionDuration: 'moderate',
60
- lineHeight: 1,
61
- _focusVisible: {
62
- outline: 'none',
63
- boxShadow: 'outline',
64
- },
65
- _hover: {
66
- bg: 'bg.muted',
67
- textDecoration: 'none',
68
- },
69
- _active: {
70
- fontWeight: 'semibold',
71
- },
72
- },
73
- },
74
- variants: {
75
- variant: {
76
- neutral: {
77
- root: {
78
- bg: 'bg.panel',
79
- color: 'fg',
80
- },
81
- },
82
- solid: {
83
- root: {
84
- bg: 'colorPalette.solid',
85
- color: 'colorPalette.contrast',
86
- },
87
- link: {
88
- _hover: {
89
- bg: 'colorPalette.contrast/10',
90
- },
91
- },
92
- },
93
- glass: {
94
- root: {
95
- bg: 'bg.overlay',
96
- backdropFilter: 'var(--overlay-effect)',
97
- color: 'fg',
98
- },
99
- },
100
- },
101
- size: {
102
- md: {
103
- root: {
104
- fontSize: 'sm',
105
- },
106
- content: {
107
- px: {
108
- base: 4,
109
- lg: 6,
110
- },
111
- gap: 4,
112
- },
113
- link: {
114
- px: 3,
115
- h: 8,
116
- },
117
- },
118
- },
119
- },
120
- defaultVariants: {
121
- variant: 'neutral',
122
- size: 'md',
123
- },
124
- });