@saas-ui/react 3.0.0-next.27 → 3.0.0-next.29

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 (52) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/.tsbuildinfo.json +1 -1
  3. package/dist/components/action-bar/action-bar.recipe.js +1 -1
  4. package/dist/components/app-shell/app-shell.d.ts +5 -7
  5. package/dist/components/app-shell/app-shell.recipe.d.ts +3 -8
  6. package/dist/components/app-shell/app-shell.recipe.js +4 -8
  7. package/dist/components/breadcrumb/breadcrumb.recipe.js +1 -1
  8. package/dist/components/button/button.recipe.d.ts +4 -1
  9. package/dist/components/button/button.recipe.js +4 -1
  10. package/dist/components/card/card.recipe.d.ts +1 -1
  11. package/dist/components/checkbox/checkbox.recipe.d.ts +1 -1
  12. package/dist/components/checkbox-card/checkbox-card.recipe.d.ts +1 -1
  13. package/dist/components/checkbox-card/checkbox-card.recipe.js +3 -2
  14. package/dist/components/code/code.recipe.js +1 -1
  15. package/dist/components/collapsible/collapsible.recipe.d.ts +1 -1
  16. package/dist/components/dialog/dialog.recipe.d.ts +1 -1
  17. package/dist/components/drawer/drawer.recipe.js +5 -0
  18. package/dist/components/editable/editable.recipe.js +1 -1
  19. package/dist/components/kbd/kbd.recipe.js +1 -1
  20. package/dist/components/link/link.recipe.js +1 -1
  21. package/dist/components/menu/menu.js +2 -1
  22. package/dist/components/menu/menu.recipe.d.ts +2 -0
  23. package/dist/components/menu/menu.recipe.js +2 -0
  24. package/dist/components/native-select/native-select.recipe.js +1 -1
  25. package/dist/components/navbar/navbar.d.ts +3 -3
  26. package/dist/components/navbar/navbar.recipe.d.ts +1 -1
  27. package/dist/components/page/page.d.ts +3 -3
  28. package/dist/components/progress/progress.recipe.d.ts +2 -2
  29. package/dist/components/progress/progress.recipe.js +3 -2
  30. package/dist/components/radio-card/radio-card.recipe.js +1 -1
  31. package/dist/components/section/section.d.ts +2 -2
  32. package/dist/components/select/select.recipe.js +5 -4
  33. package/dist/components/sidebar/sidebar.d.ts +13 -13
  34. package/dist/components/sidebar/sidebar.js +2 -2
  35. package/dist/components/sidebar/sidebar.recipe.js +1 -1
  36. package/dist/components/skeleton/skeleton.recipe.d.ts +1 -1
  37. package/dist/components/skeleton/skeleton.recipe.js +1 -1
  38. package/dist/components/skip-nav-link/skip-nav-link.recipe.js +1 -1
  39. package/dist/components/stat/stat.recipe.js +1 -1
  40. package/dist/components/steps/steps.recipe.js +1 -1
  41. package/dist/components/tabs/tabs.recipe.d.ts +2 -1
  42. package/dist/components/tabs/tabs.recipe.js +1 -0
  43. package/dist/components/tag/tag.recipe.d.ts +1 -1
  44. package/dist/components/tooltip/tooltip.recipe.js +1 -1
  45. package/dist/theme/conditions.d.ts +1 -0
  46. package/dist/theme/conditions.js +1 -0
  47. package/dist/theme/global-css.js +5 -2
  48. package/dist/theme/recipes.d.ts +5 -2
  49. package/dist/theme/semantic-tokens/colors.js +1 -1
  50. package/dist/theme/semantic-tokens/shadows.js +1 -1
  51. package/dist/theme/slot-recipes.d.ts +47 -49
  52. package/package.json +2 -2
@@ -1,9 +1,9 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Sidebar, useSidebar } from '@saas-ui/core/sidebar';
3
3
  import { ClassNamesProvider, StylesProvider, useRecipeResult, withContext, withItemContext, withItemProvider, } from "./sidebar.context.js";
4
- const SidebarProvider = function SidebarProvider(props) {
4
+ function SidebarProvider(props) {
5
5
  return (_jsx(Sidebar.Provider, { ...props, children: _jsx(RecipeProvider, { ...props, children: props.children }) }));
6
- };
6
+ }
7
7
  function RecipeProvider(props) {
8
8
  const { mode } = useSidebar();
9
9
  const { styles, classNames } = useRecipeResult({
@@ -24,7 +24,7 @@ export const sidebarSlotRecipe = defineSlotRecipe({
24
24
  flexDirection: 'column',
25
25
  },
26
26
  backdrop: {
27
- bg: 'blackAlpha.200',
27
+ layerStyle: 'backdrop',
28
28
  position: 'fixed',
29
29
  inset: 0,
30
30
  '--sidebar-backdrop-z-index': 'zIndex.layer-3',
@@ -1,7 +1,7 @@
1
1
  export declare const skeletonRecipe: import("@chakra-ui/react").RecipeDefinition<{
2
2
  loading: {
3
3
  true: {
4
- borderRadius: "l2";
4
+ borderRadius: "panel.md";
5
5
  boxShadow: "none";
6
6
  backgroundClip: "padding-box";
7
7
  cursor: "default";
@@ -5,7 +5,7 @@ export const skeletonRecipe = defineRecipe({
5
5
  variants: {
6
6
  loading: {
7
7
  true: {
8
- borderRadius: 'l2',
8
+ borderRadius: 'panel.md',
9
9
  boxShadow: 'none',
10
10
  backgroundClip: 'padding-box',
11
11
  cursor: 'default',
@@ -5,7 +5,7 @@ export const skipNavLinkRecipe = defineRecipe({
5
5
  display: 'inline-flex',
6
6
  bg: 'bg.panel',
7
7
  padding: '2.5',
8
- borderRadius: 'l2',
8
+ borderRadius: 'control.md',
9
9
  fontWeight: 'semibold',
10
10
  focusVisibleRing: 'outside',
11
11
  textStyle: 'sm',
@@ -7,7 +7,7 @@ export const statSlotRecipe = defineSlotRecipe({
7
7
  root: {
8
8
  display: 'flex',
9
9
  flexDirection: 'column',
10
- gap: '1',
10
+ gap: '0',
11
11
  position: 'relative',
12
12
  flex: '1',
13
13
  },
@@ -57,7 +57,7 @@ export const stepsSlotRecipe = defineSlotRecipe({
57
57
  gap: '3',
58
58
  textAlign: 'start',
59
59
  focusVisibleRing: 'outside',
60
- borderRadius: 'l2',
60
+ borderRadius: 'control.md',
61
61
  },
62
62
  content: {
63
63
  focusVisibleRing: 'outside',
@@ -1,4 +1,4 @@
1
- export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "indicator" | "list" | "trigger" | "contentGroup", {
1
+ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "root" | "list" | "trigger" | "contentGroup", {
2
2
  fitted: {
3
3
  true: {
4
4
  list: {
@@ -105,6 +105,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
105
105
  _horizontal: {
106
106
  layerStyle: "indicator.bottom";
107
107
  borderTopRadius: "3px";
108
+ '--indicator-offset-x': "spacing.3";
108
109
  '--indicator-offset-y': "-1px";
109
110
  '--indicator-color': "colors.colorPalette.solid";
110
111
  };
@@ -173,6 +173,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
173
173
  _horizontal: {
174
174
  layerStyle: 'indicator.bottom',
175
175
  borderTopRadius: '3px',
176
+ '--indicator-offset-x': 'spacing.3',
176
177
  '--indicator-offset-y': '-1px',
177
178
  '--indicator-color': 'colors.colorPalette.solid',
178
179
  },
@@ -1,4 +1,4 @@
1
- export declare const tagSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
1
+ export declare const tagSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "endElement" | "startElement", {
2
2
  size: {
3
3
  sm: {
4
4
  root: {
@@ -12,7 +12,7 @@ export const tooltipSlotRecipe = defineSlotRecipe({
12
12
  color: 'fg',
13
13
  px: '2.5',
14
14
  py: '1',
15
- borderRadius: 'l2',
15
+ borderRadius: 'panel.sm',
16
16
  fontWeight: 'medium',
17
17
  textStyle: 'xs',
18
18
  boxShadow: 'md',
@@ -14,4 +14,5 @@ export declare const conditions: {
14
14
  parentHover: string;
15
15
  pressable: string;
16
16
  popupExpanded: string;
17
+ rowHover: string;
17
18
  };
@@ -15,4 +15,5 @@ export const conditions = defineConditions({
15
15
  parentHover: 'button:hover &, a:hover &, [role=button]:hover &',
16
16
  pressable: '&:is(a, button, [role=button])',
17
17
  popupExpanded: '&:is([aria-haspopup][aria-expanded=true], [aria-haspopup][data-expanded], [aria-haspopup][data-state=expanded])',
18
+ rowHover: 'tr:hover &, [role=row]:hover &',
18
19
  });
@@ -43,14 +43,17 @@ export const globalCss = defineGlobalStyles({
43
43
  '--overlay-effect': 'blur({blurs.lg})',
44
44
  '--backdrop-effect': 'none',
45
45
  },
46
+ '.dark *': {
47
+ '--overlay-translucency': '85%',
48
+ },
46
49
  body: {
47
50
  color: 'fg',
48
51
  bg: 'bg',
49
52
  lineHeight: '1.5',
50
53
  colorPalette: 'accent',
51
54
  },
52
- '*::placeholder': {
53
- color: 'fg.subtle',
55
+ '*::placeholder, *[data-placeholder]': {
56
+ color: 'fg.muted/90',
54
57
  },
55
58
  '*::selection': {
56
59
  bg: 'colorPalette.solid/20',
@@ -116,7 +116,10 @@ export declare const recipes: {
116
116
  bg: "colorPalette.solid";
117
117
  color: "colorPalette.contrast";
118
118
  '--btn-shadow': "shadows.sm";
119
- boxShadow: "0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
119
+ boxShadow: {
120
+ base: "0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
121
+ _dark: " 0px 1px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
122
+ };
120
123
  textShadow: "0 1px 2px rgba(0,0,0,0.3)";
121
124
  overflow: "clip";
122
125
  _after: {
@@ -516,7 +519,7 @@ export declare const recipes: {
516
519
  skeleton: import("@chakra-ui/react").RecipeDefinition<{
517
520
  loading: {
518
521
  true: {
519
- borderRadius: "l2";
522
+ borderRadius: "panel.md";
520
523
  boxShadow: "none";
521
524
  backgroundClip: "padding-box";
522
525
  cursor: "default";
@@ -72,7 +72,7 @@ export const semanticColors = defineSemanticTokens.colors({
72
72
  overlay: {
73
73
  value: {
74
74
  _light: 'color-mix(in oklch, {colors.white} var(--overlay-translucency), transparent)',
75
- _dark: 'color-mix(in srgb, var(--overlay-translucency), {colors.gray.950} 100%)',
75
+ _dark: 'color-mix(in oklch, {colors.gray.800} var(--overlay-translucency), transparent)',
76
76
  },
77
77
  },
78
78
  backdrop: {
@@ -45,7 +45,7 @@ export const semanticShadows = defineSemanticTokens.shadows({
45
45
  inset: {
46
46
  value: {
47
47
  _light: 'inset 0 1px 2px 0 {black/5}',
48
- _dark: 'inset 0 1px 2px 0 {colors.gray.300/5}',
48
+ _dark: 'inset 0 -1px 2px 0 {colors.gray.300/8}, inset 0 0 0 1px {colors.gray.300/8}',
49
49
  },
50
50
  },
51
51
  });
@@ -75,7 +75,7 @@ export declare const slotRecipes: {
75
75
  };
76
76
  }>;
77
77
  actionBar: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "separator" | "selectionTrigger" | "closeTrigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "positioner" | "separator" | "selectionTrigger" | "closeTrigger">>;
78
- alert: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "root" | "indicator" | "title", {
78
+ alert: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "title" | "description" | "indicator", {
79
79
  status: {
80
80
  info: {
81
81
  root: {
@@ -283,7 +283,7 @@ export declare const slotRecipes: {
283
283
  };
284
284
  };
285
285
  }>;
286
- blockquote: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "icon" | "caption", {
286
+ blockquote: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "icon" | "caption", {
287
287
  justify: {
288
288
  start: {
289
289
  root: {
@@ -381,7 +381,7 @@ export declare const slotRecipes: {
381
381
  };
382
382
  };
383
383
  }>;
384
- card: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "root" | "title" | "header" | "body" | "footer", {
384
+ card: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "title" | "description" | "header" | "body" | "footer", {
385
385
  size: {
386
386
  sm: {
387
387
  root: {
@@ -459,7 +459,7 @@ export declare const slotRecipes: {
459
459
  };
460
460
  };
461
461
  }>;
462
- checkbox: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "group" | "indicator" | "control", {
462
+ checkbox: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "indicator" | "group" | "control", {
463
463
  size: {
464
464
  xs: {
465
465
  root: {
@@ -539,7 +539,7 @@ export declare const slotRecipes: {
539
539
  };
540
540
  };
541
541
  }>;
542
- checkboxCard: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "label" | "root" | "indicator" | "control" | "addon", {
542
+ checkboxCard: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "label" | "description" | "indicator" | "control" | "addon", {
543
543
  size: {
544
544
  sm: {
545
545
  root: {
@@ -727,7 +727,7 @@ export declare const slotRecipes: {
727
727
  };
728
728
  };
729
729
  }>;
730
- collapsible: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "trigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "root" | "trigger">>;
730
+ collapsible: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "indicator" | "trigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"root" | "content" | "indicator" | "trigger">>;
731
731
  dataList: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "itemLabel" | "itemValue", {
732
732
  orientation: {
733
733
  horizontal: {
@@ -783,7 +783,7 @@ export declare const slotRecipes: {
783
783
  };
784
784
  };
785
785
  }>;
786
- dialog: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "backdrop" | "positioner" | "closeTrigger" | "title" | "header" | "body" | "footer" | "trigger", {
786
+ dialog: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "closeTrigger" | "title" | "description" | "header" | "body" | "footer" | "trigger" | "backdrop", {
787
787
  variant: {
788
788
  dialog: {};
789
789
  confirm: {
@@ -949,7 +949,7 @@ export declare const slotRecipes: {
949
949
  none: {};
950
950
  };
951
951
  }>;
952
- drawer: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "backdrop" | "positioner" | "closeTrigger" | "title" | "header" | "body" | "footer" | "trigger", {
952
+ drawer: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "closeTrigger" | "title" | "description" | "header" | "body" | "footer" | "trigger" | "backdrop", {
953
953
  size: {
954
954
  xs: {
955
955
  content: {
@@ -1062,7 +1062,7 @@ export declare const slotRecipes: {
1062
1062
  };
1063
1063
  };
1064
1064
  }>;
1065
- editable: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "control" | "input" | "area" | "preview" | "editTrigger" | "submitTrigger" | "cancelTrigger" | "textarea", {
1065
+ editable: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "control" | "input" | "area" | "preview" | "editTrigger" | "submitTrigger" | "cancelTrigger" | "textarea", {
1066
1066
  size: {
1067
1067
  sm: {
1068
1068
  root: {
@@ -1099,7 +1099,7 @@ export declare const slotRecipes: {
1099
1099
  };
1100
1100
  };
1101
1101
  }>;
1102
- emptyState: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "root" | "indicator" | "title" | "actions", {
1102
+ emptyState: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "title" | "description" | "indicator" | "actions", {
1103
1103
  size: {
1104
1104
  sm: {
1105
1105
  root: {
@@ -1181,7 +1181,7 @@ export declare const slotRecipes: {
1181
1181
  };
1182
1182
  };
1183
1183
  }>;
1184
- field: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "input" | "textarea" | "select" | "errorText" | "helperText" | "requiredIndicator", {
1184
+ field: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "input" | "textarea" | "select" | "errorText" | "helperText" | "requiredIndicator", {
1185
1185
  orientation: {
1186
1186
  vertical: {
1187
1187
  root: {
@@ -1210,7 +1210,7 @@ export declare const slotRecipes: {
1210
1210
  };
1211
1211
  };
1212
1212
  }>;
1213
- fileUpload: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemGroup" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "clearTrigger" | "dropzoneContent" | "fileText", import("@chakra-ui/react").SlotRecipeVariantRecord<"label" | "root" | "item" | "itemContent" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemGroup" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "clearTrigger" | "dropzoneContent" | "fileText">>;
1213
+ fileUpload: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "itemContent" | "label" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemGroup" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "clearTrigger" | "dropzoneContent" | "fileText", import("@chakra-ui/react").SlotRecipeVariantRecord<"root" | "item" | "itemContent" | "label" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemGroup" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "clearTrigger" | "dropzoneContent" | "fileText">>;
1214
1214
  hoverCard: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "trigger" | "arrow" | "arrowTip", {
1215
1215
  size: {
1216
1216
  xs: {
@@ -1239,7 +1239,7 @@ export declare const slotRecipes: {
1239
1239
  };
1240
1240
  };
1241
1241
  }>;
1242
- list: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "indicator" | "item", {
1242
+ list: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "indicator", {
1243
1243
  variant: {
1244
1244
  marker: {
1245
1245
  root: {
@@ -1277,7 +1277,7 @@ export declare const slotRecipes: {
1277
1277
  };
1278
1278
  };
1279
1279
  }>;
1280
- menu: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "item" | "itemIndicator" | "positioner" | "separator" | "trigger" | "itemGroup" | "arrow" | "arrowTip" | "contextTrigger" | "itemGroupLabel" | "itemText" | "triggerItem" | "itemCommand", {
1280
+ menu: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "item" | "itemIndicator" | "positioner" | "separator" | "indicator" | "trigger" | "itemGroup" | "arrow" | "arrowTip" | "contextTrigger" | "itemGroupLabel" | "itemText" | "triggerItem" | "itemCommand", {
1281
1281
  variant: {
1282
1282
  subtle: {
1283
1283
  item: {
@@ -1306,6 +1306,7 @@ export declare const slotRecipes: {
1306
1306
  textStyle: "xs";
1307
1307
  py: "1";
1308
1308
  px: "1.5";
1309
+ ps: "var(--menu-item-inset, {sizes.1.5})";
1309
1310
  };
1310
1311
  itemGroupLabel: {
1311
1312
  textStyle: "xs";
@@ -1323,6 +1324,7 @@ export declare const slotRecipes: {
1323
1324
  textStyle: "sm";
1324
1325
  py: "1.5";
1325
1326
  px: "2";
1327
+ ps: "var(--menu-item-inset, {sizes.2})";
1326
1328
  };
1327
1329
  itemGroupLabel: {
1328
1330
  textStyle: "sm";
@@ -1422,7 +1424,7 @@ export declare const slotRecipes: {
1422
1424
  };
1423
1425
  };
1424
1426
  }>;
1425
- numberInput: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "control" | "input" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
1427
+ numberInput: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "control" | "input" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
1426
1428
  size: {
1427
1429
  xs: {
1428
1430
  input: {
@@ -1566,7 +1568,7 @@ export declare const slotRecipes: {
1566
1568
  };
1567
1569
  };
1568
1570
  }>;
1569
- pinInput: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "control" | "input", {
1571
+ pinInput: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "control" | "input", {
1570
1572
  size: {
1571
1573
  sm: {
1572
1574
  input: {
@@ -1802,7 +1804,7 @@ export declare const slotRecipes: {
1802
1804
  };
1803
1805
  };
1804
1806
  }>;
1805
- popover: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "indicator" | "positioner" | "closeTrigger" | "title" | "header" | "body" | "footer" | "trigger" | "anchor" | "arrow" | "arrowTip", {
1807
+ popover: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "closeTrigger" | "title" | "description" | "indicator" | "header" | "body" | "footer" | "trigger" | "anchor" | "arrow" | "arrowTip", {
1806
1808
  size: {
1807
1809
  xs: {
1808
1810
  content: {
@@ -1826,12 +1828,12 @@ export declare const slotRecipes: {
1826
1828
  };
1827
1829
  };
1828
1830
  }>;
1829
- progress: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "valueText" | "circle" | "track" | "range" | "view" | "circleTrack" | "circleRange", {
1831
+ progress: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "valueText" | "circle" | "track" | "range" | "view" | "circleTrack" | "circleRange", {
1830
1832
  variant: {
1831
1833
  outline: {
1832
1834
  track: {
1833
1835
  shadow: "inset";
1834
- bgColor: "bg.muted";
1836
+ bgColor: "bg.subtle";
1835
1837
  };
1836
1838
  range: {
1837
1839
  bgColor: "colorPalette.solid";
@@ -1850,7 +1852,7 @@ export declare const slotRecipes: {
1850
1852
  square: {};
1851
1853
  rounded: {
1852
1854
  track: {
1853
- borderRadius: "l1";
1855
+ borderRadius: "control.sm";
1854
1856
  };
1855
1857
  };
1856
1858
  full: {
@@ -1908,7 +1910,7 @@ export declare const slotRecipes: {
1908
1910
  };
1909
1911
  };
1910
1912
  }>;
1911
- progressCircle: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "valueText" | "circle" | "track" | "range" | "view" | "circleTrack" | "circleRange", {
1913
+ progressCircle: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "valueText" | "circle" | "track" | "range" | "view" | "circleTrack" | "circleRange", {
1912
1914
  size: {
1913
1915
  xs: {
1914
1916
  circle: {
@@ -1957,7 +1959,7 @@ export declare const slotRecipes: {
1957
1959
  };
1958
1960
  };
1959
1961
  }>;
1960
- radioCard: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "indicator" | "item" | "itemContent" | "itemIndicator" | "itemText" | "itemControl" | "itemAddon" | "itemDescription", {
1962
+ radioCard: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "itemContent" | "itemIndicator" | "label" | "indicator" | "itemText" | "itemControl" | "itemAddon" | "itemDescription", {
1961
1963
  size: {
1962
1964
  sm: {
1963
1965
  item: {
@@ -2148,7 +2150,7 @@ export declare const slotRecipes: {
2148
2150
  };
2149
2151
  };
2150
2152
  }>;
2151
- radioGroup: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "indicator" | "item" | "itemIndicator" | "itemText" | "itemControl" | "itemAddon", {
2153
+ radioGroup: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "itemIndicator" | "label" | "indicator" | "itemText" | "itemControl" | "itemAddon", {
2152
2154
  variant: {
2153
2155
  outline: {
2154
2156
  itemControl: {
@@ -2225,7 +2227,7 @@ export declare const slotRecipes: {
2225
2227
  };
2226
2228
  };
2227
2229
  }>;
2228
- ratingGroup: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "control" | "item" | "itemIndicator", {
2230
+ ratingGroup: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "itemIndicator" | "label" | "control", {
2229
2231
  size: {
2230
2232
  xs: {
2231
2233
  item: {
@@ -2249,7 +2251,7 @@ export declare const slotRecipes: {
2249
2251
  };
2250
2252
  };
2251
2253
  }>;
2252
- segmentGroup: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl", {
2254
+ segmentGroup: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "label" | "indicator" | "itemText" | "itemControl", {
2253
2255
  size: {
2254
2256
  xs: {
2255
2257
  root: {
@@ -2297,7 +2299,7 @@ export declare const slotRecipes: {
2297
2299
  };
2298
2300
  };
2299
2301
  }>;
2300
- select: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "label" | "root" | "indicator" | "control" | "item" | "itemIndicator" | "positioner" | "list" | "trigger" | "itemGroup" | "clearTrigger" | "itemGroupLabel" | "itemText" | "valueText" | "indicatorGroup", {
2302
+ select: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "item" | "itemIndicator" | "label" | "positioner" | "indicator" | "list" | "control" | "trigger" | "itemGroup" | "clearTrigger" | "itemGroupLabel" | "itemText" | "valueText" | "indicatorGroup", {
2301
2303
  variant: {
2302
2304
  outline: {
2303
2305
  trigger: {
@@ -2452,7 +2454,7 @@ export declare const slotRecipes: {
2452
2454
  };
2453
2455
  };
2454
2456
  }>;
2455
- slider: import("@chakra-ui/react").SlotRecipeDefinition<"marker" | "label" | "root" | "control" | "valueText" | "track" | "range" | "thumb" | "markerGroup" | "draggingIndicator" | "markerIndicator", {
2457
+ slider: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "marker" | "label" | "control" | "valueText" | "track" | "range" | "thumb" | "markerGroup" | "draggingIndicator" | "markerIndicator", {
2456
2458
  size: {
2457
2459
  sm: {
2458
2460
  root: {
@@ -2553,7 +2555,7 @@ export declare const slotRecipes: {
2553
2555
  };
2554
2556
  };
2555
2557
  }>;
2556
- stat: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "indicator" | "valueText" | "helpText" | "valueUnit", {
2558
+ stat: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "indicator" | "valueText" | "helpText" | "valueUnit", {
2557
2559
  size: {
2558
2560
  sm: {
2559
2561
  valueText: {
@@ -2572,7 +2574,7 @@ export declare const slotRecipes: {
2572
2574
  };
2573
2575
  };
2574
2576
  }>;
2575
- steps: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "progress" | "root" | "indicator" | "item" | "separator" | "title" | "list" | "trigger" | "nextTrigger" | "prevTrigger", {
2577
+ steps: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "item" | "separator" | "title" | "description" | "indicator" | "list" | "trigger" | "progress" | "nextTrigger" | "prevTrigger", {
2576
2578
  orientation: {
2577
2579
  vertical: {
2578
2580
  root: {
@@ -2714,7 +2716,7 @@ export declare const slotRecipes: {
2714
2716
  };
2715
2717
  };
2716
2718
  }>;
2717
- switch: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
2719
+ switch: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "indicator" | "control" | "thumb", {
2718
2720
  variant: {
2719
2721
  solid: {
2720
2722
  control: {
@@ -2791,7 +2793,7 @@ export declare const slotRecipes: {
2791
2793
  };
2792
2794
  };
2793
2795
  }>;
2794
- table: import("@chakra-ui/react").SlotRecipeDefinition<"cell" | "root" | "row" | "caption" | "header" | "body" | "footer" | "columnHeader", {
2796
+ table: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "row" | "caption" | "header" | "body" | "footer" | "cell" | "columnHeader", {
2795
2797
  interactive: {
2796
2798
  true: {
2797
2799
  body: {
@@ -2912,7 +2914,7 @@ export declare const slotRecipes: {
2912
2914
  };
2913
2915
  };
2914
2916
  }>;
2915
- tabs: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "indicator" | "list" | "trigger" | "contentGroup", {
2917
+ tabs: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "indicator" | "list" | "trigger" | "contentGroup", {
2916
2918
  fitted: {
2917
2919
  true: {
2918
2920
  list: {
@@ -3019,6 +3021,7 @@ export declare const slotRecipes: {
3019
3021
  _horizontal: {
3020
3022
  layerStyle: "indicator.bottom";
3021
3023
  borderTopRadius: "3px";
3024
+ '--indicator-offset-x': "spacing.3";
3022
3025
  '--indicator-offset-y': "-1px";
3023
3026
  '--indicator-color': "colors.colorPalette.solid";
3024
3027
  };
@@ -3174,7 +3177,7 @@ export declare const slotRecipes: {
3174
3177
  };
3175
3178
  };
3176
3179
  }>;
3177
- tag: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
3180
+ tag: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "closeTrigger" | "startElement" | "endElement", {
3178
3181
  size: {
3179
3182
  sm: {
3180
3183
  root: {
@@ -3269,7 +3272,7 @@ export declare const slotRecipes: {
3269
3272
  };
3270
3273
  };
3271
3274
  }>;
3272
- toast: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "root" | "indicator" | "closeTrigger" | "title" | "actionTrigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"description" | "root" | "indicator" | "closeTrigger" | "title" | "actionTrigger">>;
3275
+ toast: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "closeTrigger" | "title" | "description" | "indicator" | "actionTrigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"root" | "closeTrigger" | "title" | "description" | "indicator" | "actionTrigger">>;
3273
3276
  tooltip: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "trigger" | "arrow" | "arrowTip", {
3274
3277
  variant: {
3275
3278
  inverted: {
@@ -3299,7 +3302,7 @@ export declare const slotRecipes: {
3299
3302
  };
3300
3303
  };
3301
3304
  }>;
3302
- timeline: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "root" | "indicator" | "item" | "separator" | "title" | "connector", {
3305
+ timeline: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "item" | "separator" | "title" | "description" | "indicator" | "connector", {
3303
3306
  variant: {
3304
3307
  subtle: {
3305
3308
  indicator: {
@@ -3361,14 +3364,9 @@ export declare const slotRecipes: {
3361
3364
  };
3362
3365
  };
3363
3366
  }>;
3364
- suiAppShell: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "main", {
3365
- position: {
3366
- static: {
3367
- root: {
3368
- height: "100dvh";
3369
- };
3370
- };
3371
- fullscreen: {
3367
+ suiAppShell: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "main", {
3368
+ fullscreen: {
3369
+ true: {
3372
3370
  root: {
3373
3371
  position: "fixed";
3374
3372
  inset: number;
@@ -3379,7 +3377,7 @@ export declare const slotRecipes: {
3379
3377
  plain: {};
3380
3378
  };
3381
3379
  }>;
3382
- suiLoadingOverlay: import("@chakra-ui/react").SlotRecipeDefinition<"text" | "root", {
3380
+ suiLoadingOverlay: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "text", {
3383
3381
  variant: {
3384
3382
  fill: {
3385
3383
  root: {
@@ -3405,7 +3403,7 @@ export declare const slotRecipes: {
3405
3403
  };
3406
3404
  };
3407
3405
  }>;
3408
- suiPersona: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "avatar" | "presence" | "details" | "secondaryLabel" | "tertiaryLabel", {
3406
+ suiPersona: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "label" | "avatar" | "presence" | "details" | "secondaryLabel" | "tertiaryLabel", {
3409
3407
  size: {
3410
3408
  '2xs': {
3411
3409
  details: {
@@ -3507,7 +3505,7 @@ export declare const slotRecipes: {
3507
3505
  };
3508
3506
  };
3509
3507
  }>;
3510
- suiGridList: import("@chakra-ui/react").SlotRecipeDefinition<"cell" | "root" | "item" | "header", {
3508
+ suiGridList: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "header" | "cell", {
3511
3509
  interactive: {
3512
3510
  true: {
3513
3511
  item: {
@@ -3565,7 +3563,7 @@ export declare const slotRecipes: {
3565
3563
  };
3566
3564
  };
3567
3565
  }>;
3568
- suiNavbar: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "item" | "link" | "brand", {
3566
+ suiNavbar: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "item" | "link" | "brand", {
3569
3567
  variant: {
3570
3568
  neutral: {
3571
3569
  root: {
@@ -3599,7 +3597,7 @@ export declare const slotRecipes: {
3599
3597
  };
3600
3598
  };
3601
3599
  }>;
3602
- suiSidebar: import("@chakra-ui/react").SlotRecipeDefinition<"backdrop" | "root" | "group" | "header" | "body" | "footer" | "trigger" | "track" | "flyoutTrigger" | "groupHeader" | "groupTitle" | "groupEndElement" | "groupContent", {
3600
+ suiSidebar: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "header" | "body" | "footer" | "group" | "trigger" | "backdrop" | "track" | "flyoutTrigger" | "groupHeader" | "groupTitle" | "groupEndElement" | "groupContent", {
3603
3601
  mode: {
3604
3602
  collapsible: {
3605
3603
  root: {
@@ -3688,7 +3686,7 @@ export declare const slotRecipes: {
3688
3686
  };
3689
3687
  };
3690
3688
  }>;
3691
- suiSidebarNavItem: import("@chakra-ui/react").SlotRecipeDefinition<"button" | "item" | "endElement", {
3689
+ suiSidebarNavItem: import("@chakra-ui/react").SlotRecipeDefinition<"item" | "button" | "endElement", {
3692
3690
  variant: {
3693
3691
  muted: {
3694
3692
  button: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saas-ui/react",
3
- "version": "3.0.0-next.27",
3
+ "version": "3.0.0-next.29",
4
4
  "description": "Saas UI - The React component library for startups.",
5
5
  "type": "module",
6
6
  "exports": {
@@ -72,7 +72,7 @@
72
72
  },
73
73
  "dependencies": {
74
74
  "@ark-ui/react": "^5.2.0",
75
- "@saas-ui/core": "3.0.0-next.4",
75
+ "@saas-ui/core": "3.0.0-next.5",
76
76
  "@saas-ui/hooks": "3.0.0-next.1"
77
77
  },
78
78
  "peerDependencies": {