@saas-ui/react 3.0.0-next.34 → 3.0.0-next.36

package/dist/components/sidebar/sidebar.recipe.d.ts

@@ -12,8 +12,8 @@ export declare const sidebarSlotRecipe: import("@chakra-ui/react").SlotRecipeDef
                 borderColor: "sidebar.border";
                 borderWidth: "1px";
                 borderRadius: "panel.md";
-                marginBlock: number;
-                marginEnd: number;
+                marginBlock: "var(--inset-gap, {spacing.2})";
+                marginEnd: "var(--inset-gap, {spacing.2})";
                 overflow: "clip";
             };
         };

package/dist/components/sidebar/sidebar.recipe.js

@@ -145,6 +145,7 @@ export const sidebarSlotRecipe = defineSlotRecipe({
             minHeight: '0',
             display: 'flex',
             flexDirection: 'column',
+            bg: 'bg.content',
         },
     },
     variants: {
@@ -161,8 +162,8 @@ export const sidebarSlotRecipe = defineSlotRecipe({
                     borderColor: 'sidebar.border',
                     borderWidth: '1px',
                     borderRadius: 'panel.md',
-                    marginBlock: 2,
-                    marginEnd: 2,
+                    marginBlock: 'var(--inset-gap, {spacing.2})',
+                    marginEnd: 'var(--inset-gap, {spacing.2})',
                     overflow: 'clip',
                 },
             },
@@ -255,6 +256,22 @@ export const sidebarSlotRecipe = defineSlotRecipe({
             },
         },
     },
+    compoundVariants: [
+        {
+            variant: 'inset',
+            mode: 'collapsible',
+            css: {
+                root: {
+                    py: 'var(--inset-gap, {spacing.2})',
+                    _closed: {
+                        '& [class*="__inset"]': {
+                            ps: 'var(--inset-gap, {spacing.2})',
+                        },
+                    },
+                },
+            },
+        },
+    ],
     defaultVariants: {
         variant: 'sidebar',
         mode: 'collapsible',

package/dist/components/toaster/toaster.d.ts

@@ -1,5 +1,6 @@
-import { type CreateToasterProps } from '@chakra-ui/react/toast';
-export declare let toast: import("@zag-js/toast").Store<any>;
+import { type CreateToasterProps, CreateToasterReturn } from '@chakra-ui/react/toast';
+export type { CreateToasterProps, CreateToasterReturn };
+export declare let toast: CreateToasterReturn;
 export interface ToasterProps extends Partial<CreateToasterProps> {
     closable?: boolean;
 }

package/dist/index.d.ts

@@ -27,6 +27,9 @@ export { CloseButton, type CloseButtonProps, } from './components/close-button/i
 export { Container, type ContainerProps } from './components/container/index.ts';
 export { Code, type CodeProps } from './components/code/index.ts';
 export { Collapsible } from './components/collapsible/index.ts';
+export { ColorModeProvider, DarkMode, LightMode, useColorMode, useColorModeValue, ColorModeTrigger, } from './components/color-mode/index.ts';
+export type { ColorMode, UseColorModeReturn, } from './components/color-mode/index.ts';
+export { Combobox, useCombobox, useComboboxContext, useComboboxItemContext, useComboboxStyles, } from './components/combobox/index.ts';
 export { Command } from './components/command/index.ts';
 export { DataList, useDataListStyles } from './components/data-list/index.ts';
 export { Dialog } from './components/dialog/index.ts';

package/dist/index.js

@@ -23,6 +23,8 @@ export { CloseButton, } from "./components/close-button/index.js";
 export { Container } from "./components/container/index.js";
 export { Code } from "./components/code/index.js";
 export { Collapsible } from "./components/collapsible/index.js";
+export { ColorModeProvider, DarkMode, LightMode, useColorMode, useColorModeValue, ColorModeTrigger, } from "./components/color-mode/index.js";
+export { Combobox, useCombobox, useComboboxContext, useComboboxItemContext, useComboboxStyles, } from "./components/combobox/index.js";
 export { Command } from "./components/command/index.js";
 export { DataList, useDataListStyles } from "./components/data-list/index.js";
 export { Dialog } from "./components/dialog/index.js";

package/dist/theme/global-css.js

@@ -33,15 +33,14 @@ export const globalCss = defineGlobalStyles({
         '--global-font-body': 'fonts.body',
         '--global-color-border': 'colors.border',
         '--cursor-button': 'default',
-        // '--radius-factor': '1',
-        // '--radius-control': '1',
-        // '--radius-panel': '1',
-        // '--radius-indicator': '1',
         '--radius-full': '9999px',
         '--scale-factor': '1',
         '--overlay-translucency': '95%',
         '--overlay-effect': 'blur({blurs.lg})',
         '--backdrop-effect': 'none',
+        '--scrollbar-color': 'colors.border.emphasized',
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'var(--scrollbar-color) transparent',
     },
     '.dark *': {
         '--overlay-translucency': '85%',

package/dist/theme/semantic-tokens/colors.d.ts

@@ -122,6 +122,12 @@ export declare const semanticColors: {
                 _dark: string;
             };
         };
+        content: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
         panel: {
             value: {
                 _light: string;

package/dist/theme/semantic-tokens/colors.js

@@ -66,6 +66,9 @@ export const semanticColors = defineSemanticTokens.colors({
         inverted: {
             value: { _light: '{colors.black}', _dark: '{colors.white}' },
         },
+        content: {
+            value: { _light: '{colors.gray.50}', _dark: '{colors.gray.950}' },
+        },
         panel: {
             value: { _light: '{colors.white}', _dark: '{colors.gray.900}' },
         },

package/dist/theme/semantic-tokens/shadows.js

@@ -3,37 +3,37 @@ export const semanticShadows = defineSemanticTokens.shadows({
     xs: {
         value: {
             _light: '0px 1px 2px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/5}',
-            _dark: '0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}',
+            _dark: '0px 1px 1px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
         },
     },
     sm: {
         value: {
             _light: '0px 2px 4px {colors.gray.900/5}, 0px 0px 2px {colors.gray.900/5}',
-            _dark: '0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+            _dark: '0px 2px 4px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
         },
     },
     md: {
         value: {
             _light: '0px 4px 8px {colors.gray.900/5}, 0px 0px 3px {colors.gray.900/5}',
-            _dark: '0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+            _dark: '0px 4px 8px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
         },
     },
     lg: {
         value: {
             _light: '0px 8px 16px {colors.gray.900/5}, 0px 0px 4px {colors.gray.900/5}',
-            _dark: '0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+            _dark: '0px 8px 16px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
         },
     },
     xl: {
         value: {
             _light: '0px 16px 24px {colors.gray.900/5}, 0px 0px 5px {colors.gray.900/5}',
-            _dark: '0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+            _dark: '0px 16px 24px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
         },
     },
     '2xl': {
         value: {
             _light: '0px 24px 40px {colors.gray.900/10}, 0px 0px 6px {colors.gray.900/5}',
-            _dark: '0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+            _dark: '0px 24px 40px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
         },
     },
     inner: {
@@ -45,7 +45,7 @@ export const semanticShadows = defineSemanticTokens.shadows({
     inset: {
         value: {
             _light: 'inset 0 1px 2px 0 {black/5}',
-            _dark: 'inset 0 -1px 2px 0 {colors.gray.300/8}, inset 0 0 0 1px {colors.gray.300/8}',
+            _dark: 'inset 0 -1px 2px 0 {colors.gray.300/4}, inset 0 0 0 1px {colors.gray.300/4}',
         },
     },
 });

package/dist/theme/slot-recipes.d.ts

@@ -51,6 +51,9 @@ export declare const slotRecipes: {
                     textStyle: "sm";
                     py: "var(--accordion-padding-y)";
                 };
+                itemContent: {
+                    textStyle: "sm";
+                };
             };
             md: {
                 root: {
@@ -61,6 +64,9 @@ export declare const slotRecipes: {
                     textStyle: "md";
                     py: "var(--accordion-padding-y)";
                 };
+                itemContent: {
+                    textStyle: "md";
+                };
             };
             lg: {
                 root: {
@@ -71,6 +77,9 @@ export declare const slotRecipes: {
                     textStyle: "lg";
                     py: "var(--accordion-padding-y)";
                 };
+                itemContent: {
+                    textStyle: "lg";
+                };
             };
         };
     }>;
@@ -459,7 +468,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    checkbox: import("@chakra-ui/react").SlotRecipeDefinition<"control" | "indicator" | "label" | "root" | "group", {
+    checkbox: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "indicator" | "root" | "group", {
         size: {
             xs: {
                 root: {
@@ -539,7 +548,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    checkboxCard: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "control" | "indicator" | "label" | "root" | "addon", {
+    checkboxCard: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "label" | "control" | "indicator" | "root" | "addon", {
         size: {
             sm: {
                 root: {
@@ -728,6 +737,134 @@ export declare const slotRecipes: {
         };
     }>;
     collapsible: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "root" | "trigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "indicator" | "root" | "trigger">>;
+    combobox: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "label" | "control" | "root" | "item" | "itemIndicator" | "positioner" | "list" | "trigger" | "input" | "itemGroup" | "clearTrigger" | "itemGroupLabel" | "itemText" | "indicatorGroup" | "empty", {
+        variant: {
+            outline: {
+                input: {
+                    bg: "transparent";
+                    borderWidth: "1px";
+                    borderColor: "border";
+                    focusVisibleRing: "inside";
+                };
+            };
+            subtle: {
+                input: {
+                    borderWidth: "1px";
+                    borderColor: "transparent";
+                    bg: "bg.muted";
+                    focusVisibleRing: "inside";
+                };
+            };
+            flushed: {
+                input: {
+                    bg: "transparent";
+                    borderBottomWidth: "1px";
+                    borderBottomColor: "border";
+                    borderRadius: "0";
+                    px: "0";
+                    _focusVisible: {
+                        borderColor: "var(--focus-color)";
+                        boxShadow: "0px 1px 0px 0px var(--focus-color)";
+                    };
+                };
+                indicatorGroup: {
+                    px: "0";
+                };
+            };
+        };
+        size: {
+            xs: {
+                root: {
+                    '--combobox-input-height': "sizes.6";
+                    '--combobox-input-padding-x': "spacing.2";
+                    '--combobox-indicator-size': "sizes.3.5";
+                };
+                input: {
+                    textStyle: "xs";
+                };
+                content: {
+                    '--combobox-item-padding-x': "spacing.1";
+                    '--combobox-item-padding-y': "spacing.0.5";
+                    '--combobox-indicator-size': "sizes.3.5";
+                    p: "0.5";
+                    textStyle: "xs";
+                };
+                trigger: {
+                    textStyle: "xs";
+                    gap: "1";
+                };
+            };
+            sm: {
+                root: {
+                    '--combobox-input-height': "sizes.7";
+                    '--combobox-input-padding-x': "spacing.2.5";
+                    '--combobox-indicator-size': "sizes.4";
+                };
+                input: {
+                    textStyle: "sm";
+                };
+                content: {
+                    '--combobox-item-padding-x': "spacing.1.5";
+                    '--combobox-item-padding-y': "spacing.1";
+                    '--combobox-indicator-size': "sizes.4";
+                    p: "0.5";
+                    textStyle: "xs";
+                };
+                trigger: {
+                    textStyle: "xs";
+                    gap: "1";
+                };
+            };
+            md: {
+                root: {
+                    '--combobox-input-height': "sizes.8";
+                    '--combobox-input-padding-x': "spacing.3";
+                    '--combobox-indicator-size': "sizes.4";
+                };
+                input: {
+                    textStyle: "sm";
+                };
+                content: {
+                    '--combobox-item-padding-x': "spacing.2";
+                    '--combobox-item-padding-y': "spacing.1.5";
+                    '--combobox-indicator-size': "sizes.4";
+                    p: "1";
+                    textStyle: "sm";
+                };
+                itemIndicator: {
+                    display: "flex";
+                    alignItems: "center";
+                    justifyContent: "center";
+                };
+                trigger: {
+                    textStyle: "sm";
+                    gap: "2";
+                };
+            };
+            lg: {
+                root: {
+                    '--combobox-input-height': "sizes.10";
+                    '--combobox-input-padding-x': "spacing.4";
+                    '--combobox-indicator-size': "sizes.5";
+                };
+                input: {
+                    textStyle: "md";
+                };
+                content: {
+                    '--combobox-item-padding-y': "spacing.2";
+                    '--combobox-item-padding-x': "spacing.3";
+                    '--combobox-indicator-size': "sizes.5";
+                    p: "1.5";
+                    textStyle: "md";
+                };
+                trigger: {
+                    textStyle: "md";
+                    py: "3";
+                    gap: "2";
+                };
+            };
+        };
+    }>;
     dataList: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "itemLabel" | "itemValue", {
         orientation: {
             horizontal: {
@@ -1062,7 +1199,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    editable: import("@chakra-ui/react").SlotRecipeDefinition<"control" | "label" | "textarea" | "root" | "input" | "area" | "preview" | "editTrigger" | "submitTrigger" | "cancelTrigger", {
+    editable: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "textarea" | "control" | "root" | "input" | "area" | "preview" | "editTrigger" | "submitTrigger" | "cancelTrigger", {
         size: {
             sm: {
                 root: {
@@ -1210,7 +1347,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    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">>;
+    fileUpload: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "itemGroup" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "dropzoneContent" | "fileText", import("@chakra-ui/react").SlotRecipeVariantRecord<"label" | "root" | "item" | "itemContent" | "trigger" | "itemGroup" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "dropzoneContent" | "fileText">>;
     hoverCard: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "trigger" | "arrow" | "arrowTip", {
         size: {
             xs: {
@@ -1277,7 +1414,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    menu: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "item" | "itemIndicator" | "positioner" | "separator" | "trigger" | "itemGroup" | "arrow" | "arrowTip" | "contextTrigger" | "itemGroupLabel" | "itemText" | "triggerItem" | "itemCommand", {
+    menu: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "item" | "itemIndicator" | "positioner" | "separator" | "trigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "arrow" | "arrowTip" | "contextTrigger" | "triggerItem" | "itemCommand", {
         variant: {
             subtle: {
                 item: {
@@ -1424,7 +1561,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    numberInput: import("@chakra-ui/react").SlotRecipeDefinition<"control" | "label" | "root" | "input" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
+    numberInput: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "root" | "input" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
         size: {
             xs: {
                 input: {
@@ -1568,7 +1705,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    pinInput: import("@chakra-ui/react").SlotRecipeDefinition<"control" | "label" | "root" | "input", {
+    pinInput: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "root" | "input", {
         size: {
             sm: {
                 input: {
@@ -1914,8 +2051,8 @@ export declare const slotRecipes: {
         size: {
             xs: {
                 circle: {
-                    '--size': "24px";
-                    '--thickness': "4px";
+                    '--size': "6";
+                    '--thickness': "3px";
                 };
                 valueText: {
                     textStyle: "2xs";
@@ -1959,7 +2096,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    radioCard: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "label" | "root" | "item" | "itemContent" | "itemIndicator" | "itemText" | "itemControl" | "itemAddon" | "itemDescription", {
+    radioCard: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "indicator" | "root" | "item" | "itemContent" | "itemIndicator" | "itemText" | "itemControl" | "itemAddon" | "itemDescription", {
         size: {
             sm: {
                 item: {
@@ -2150,7 +2287,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    radioGroup: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "label" | "root" | "item" | "itemIndicator" | "itemText" | "itemControl" | "itemAddon", {
+    radioGroup: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "indicator" | "root" | "item" | "itemIndicator" | "itemText" | "itemControl" | "itemAddon", {
         variant: {
             outline: {
                 itemControl: {
@@ -2227,7 +2364,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    ratingGroup: import("@chakra-ui/react").SlotRecipeDefinition<"control" | "label" | "root" | "item" | "itemIndicator", {
+    ratingGroup: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "root" | "item" | "itemIndicator", {
         size: {
             xs: {
                 item: {
@@ -2251,7 +2388,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    segmentGroup: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "label" | "root" | "item" | "itemText" | "itemControl", {
+    segmentGroup: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "indicator" | "root" | "item" | "itemText" | "itemControl", {
         size: {
             xs: {
                 root: {
@@ -2299,7 +2436,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    select: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "control" | "indicator" | "label" | "root" | "item" | "itemIndicator" | "positioner" | "list" | "trigger" | "itemGroup" | "clearTrigger" | "itemGroupLabel" | "itemText" | "valueText" | "indicatorGroup", {
+    select: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "label" | "control" | "indicator" | "root" | "item" | "itemIndicator" | "positioner" | "list" | "trigger" | "itemGroup" | "clearTrigger" | "itemGroupLabel" | "itemText" | "indicatorGroup" | "valueText", {
         variant: {
             outline: {
                 trigger: {
@@ -2454,7 +2591,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    slider: import("@chakra-ui/react").SlotRecipeDefinition<"marker" | "control" | "label" | "root" | "valueText" | "track" | "range" | "thumb" | "markerGroup" | "draggingIndicator" | "markerIndicator", {
+    slider: import("@chakra-ui/react").SlotRecipeDefinition<"marker" | "label" | "control" | "root" | "valueText" | "track" | "range" | "thumb" | "markerGroup" | "draggingIndicator" | "markerIndicator", {
         size: {
             sm: {
                 root: {
@@ -2555,7 +2692,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    stat: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "label" | "root" | "valueText" | "helpText" | "valueUnit", {
+    stat: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "indicator" | "root" | "valueText" | "helpText" | "valueUnit", {
         size: {
             sm: {
                 valueText: {
@@ -2574,7 +2711,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    steps: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "indicator" | "progress" | "root" | "item" | "separator" | "title" | "list" | "trigger" | "nextTrigger" | "prevTrigger", {
+    steps: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "progress" | "indicator" | "root" | "item" | "separator" | "title" | "list" | "trigger" | "nextTrigger" | "prevTrigger", {
         orientation: {
             vertical: {
                 root: {
@@ -2716,7 +2853,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    switch: import("@chakra-ui/react").SlotRecipeDefinition<"control" | "indicator" | "label" | "root" | "thumb", {
+    switch: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "indicator" | "root" | "thumb", {
         variant: {
             solid: {
                 control: {
@@ -3177,7 +3314,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    tag: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
+    tag: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "endElement" | "startElement", {
         size: {
             sm: {
                 root: {
@@ -3403,7 +3540,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    suiPersona: import("@chakra-ui/react").SlotRecipeDefinition<"presence" | "label" | "root" | "avatar" | "details" | "secondaryLabel" | "tertiaryLabel", {
+    suiPersona: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "presence" | "root" | "avatar" | "details" | "secondaryLabel" | "tertiaryLabel", {
         size: {
             '2xs': {
                 details: {
@@ -3611,8 +3748,8 @@ export declare const slotRecipes: {
                     borderColor: "sidebar.border";
                     borderWidth: "1px";
                     borderRadius: "panel.md";
-                    marginBlock: number;
-                    marginEnd: number;
+                    marginBlock: "var(--inset-gap, {spacing.2})";
+                    marginEnd: "var(--inset-gap, {spacing.2})";
                     overflow: "clip";
                 };
             };
@@ -3722,6 +3859,11 @@ export declare const slotRecipes: {
                         color: "sidebar.accent.fg";
                         '--sidebar-item-icon-color': "sidebar.accent.fg";
                     };
+                    _currentPage: {
+                        bg: "sidebar.accent.bg";
+                        color: "sidebar.accent.fg";
+                        '--sidebar-item-icon-color': "sidebar.accent.fg";
+                    };
                 };
             };
         };
@@ -3771,7 +3913,7 @@ export declare const slotRecipes: {
         variant: {
             panel: {
                 root: {
-                    bg: "var(--page-bg-color, {colors.bg.muted})";
+                    bg: "var(--page-bg-color)";
                     zIndex: number;
                 };
                 header: {

package/dist/theme/slot-recipes.js

@@ -9,6 +9,7 @@ import { cardSlotRecipe } from "../components/card/card.recipe.js";
 import { checkboxCardSlotRecipe } from "../components/checkbox-card/checkbox-card.recipe.js";
 import { checkboxSlotRecipe } from "../components/checkbox/checkbox.recipe.js";
 import { collapsibleSlotRecipe } from "../components/collapsible/collapsible.recipe.js";
+import { comboboxSlotRecipe } from "../components/combobox/combobox.recipe.js";
 import { dataListSlotRecipe } from "../components/data-list/data-list.recipe.js";
 import { dialogSlotRecipe } from "../components/dialog/dialog.recipe.js";
 import { drawerSlotRecipe } from "../components/drawer/drawer.recipe.js";
@@ -61,6 +62,7 @@ export const slotRecipes = {
     checkbox: checkboxSlotRecipe,
     checkboxCard: checkboxCardSlotRecipe,
     collapsible: collapsibleSlotRecipe,
+    combobox: comboboxSlotRecipe,
     dataList: dataListSlotRecipe,
     dialog: dialogSlotRecipe,
     drawer: drawerSlotRecipe,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-next.34",
+  "version": "3.0.0-next.36",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {
@@ -28,17 +28,6 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "scripts": {
-    "clean": "rimraf --no-glob ./dist",
-    "build:tsup": "NODE_OPTIONS='--max-old-space-size=16384' tsup --config tsup.config.ts ",
-    "build:components": "tsup --config tsup.components.config.ts --dts-only",
-    "build:types": "tsc --emitDeclarationOnly --outDir dist --project tsconfig.json",
-    "prebuild": "yarn clean",
-    "build": "tsc --outDir dist --project tsconfig.json",
-    "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../eslint.config.js",
-    "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
-    "typecheck": "tsc --noEmit"
-  },
   "files": [
     "dist"
   ],
@@ -71,12 +60,13 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.2.0",
-    "@saas-ui/core": "3.0.0-next.9",
-    "@saas-ui/hooks": "3.0.0-next.2"
+    "@ark-ui/react": "^5.9.1",
+    "next-themes": "^0.4.6",
+    "@saas-ui/hooks": "3.0.0-next.3",
+    "@saas-ui/core": "3.0.0-next.10"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^3.13.0",
+    "@chakra-ui/react": "^3.20.0",
     "@emotion/react": "^11",
     "react": ">=18",
     "react-dom": ">=18"
@@ -85,6 +75,21 @@
     "react-icons": "^5.5.0",
     "rimraf": "^6.0.1",
     "tsup": "^8.4.0",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4"
+  },
+  "scripts": {
+    "clean": "rimraf --no-glob ./dist",
+    "build:tsup": "NODE_OPTIONS='--max-old-space-size=16384' tsup --config tsup.config.ts ",
+    "build:components": "tsup --config tsup.components.config.ts --dts-only",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist --project tsconfig.json",
+    "prebuild": "pnpm clean",
+    "build": "tsc --outDir dist --project tsconfig.json",
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../eslint.config.js",
+    "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
+    "typecheck": "tsc --noEmit"
   }
 }