@saas-ui/react 3.0.0-next.33 → 3.0.0-next.35

package/dist/components/sidebar/sidebar.js

@@ -68,6 +68,12 @@ const SidebarFooter = withContext(Sidebar.Footer, 'footer');
 const SidebarTrack = withContext(Sidebar.Track, 'track', {
     forwardAsChild: true,
 });
+/**
+ * Sidebar inset.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarInset = withContext('div', 'inset');
 const SidebarGroup = withContext(Sidebar.Group, 'group', {
     defaultProps: {
         role: 'group',
@@ -87,4 +93,4 @@ const SidebarNavButtonEndElement = withItemContext(Sidebar.NavItemEndElement, 'e
     },
 });
 const SidebarContext = Sidebar.Context;
-export { SidebarProvider as Provider, SidebarContext as Context, SidebarRoot as Root, SidebarTrigger as Trigger, SidebarFlyoutTrigger as FlyoutTrigger, SidebarBackdrop as Backdrop, SidebarHeader as Header, SidebarBody as Body, SidebarFooter as Footer, SidebarTrack as Track, SidebarGroup as Group, SidebarGroupHeader as GroupHeader, SidebarGroupTitle as GroupTitle, SidebarGroupEndElement as GroupEndElement, SidebarGroupContent as GroupContent, SidebarNavItem as NavItem, SidebarNavButton as NavButton, SidebarNavButtonEndElement as NavButtonEndElement, };
+export { SidebarProvider as Provider, SidebarContext as Context, SidebarRoot as Root, SidebarTrigger as Trigger, SidebarFlyoutTrigger as FlyoutTrigger, SidebarBackdrop as Backdrop, SidebarHeader as Header, SidebarBody as Body, SidebarFooter as Footer, SidebarTrack as Track, SidebarInset as Inset, SidebarGroup as Group, SidebarGroupHeader as GroupHeader, SidebarGroupTitle as GroupTitle, SidebarGroupEndElement as GroupEndElement, SidebarGroupContent as GroupContent, SidebarNavItem as NavItem, SidebarNavButton as NavButton, SidebarNavButtonEndElement as NavButtonEndElement, };

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

@@ -1,4 +1,23 @@
-export declare const sidebarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"body" | "backdrop" | "root" | "header" | "footer" | "group" | "trigger" | "track" | "flyoutTrigger" | "groupHeader" | "groupTitle" | "groupEndElement" | "groupContent", {
+export declare const sidebarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"inset" | "body" | "backdrop" | "root" | "header" | "footer" | "group" | "trigger" | "track" | "flyoutTrigger" | "groupHeader" | "groupTitle" | "groupEndElement" | "groupContent", {
+    variant: {
+        sidebar: {
+            root: {
+                borderRightWidth: "1px";
+                borderLeftColor: "sidebar.border";
+            };
+            inset: {};
+        };
+        inset: {
+            inset: {
+                borderColor: "sidebar.border";
+                borderWidth: "1px";
+                borderRadius: "panel.md";
+                marginBlock: "var(--inset-gap, {spacing.2})";
+                marginEnd: "var(--inset-gap, {spacing.2})";
+                overflow: "clip";
+            };
+        };
+    };
     mode: {
         collapsible: {
             root: {

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

@@ -15,6 +15,7 @@ export const sidebarSlotRecipe = defineSlotRecipe({
         'groupEndElement',
         'groupContent',
         'track',
+        'inset',
     ],
     base: {
         root: {
@@ -139,8 +140,34 @@ export const sidebarSlotRecipe = defineSlotRecipe({
         flyoutTrigger: {
             display: 'none',
         },
+        inset: {
+            height: '100%',
+            minHeight: '0',
+            display: 'flex',
+            flexDirection: 'column',
+            bg: 'bg.content',
+        },
     },
     variants: {
+        variant: {
+            sidebar: {
+                root: {
+                    borderRightWidth: '1px',
+                    borderLeftColor: 'sidebar.border',
+                },
+                inset: {},
+            },
+            inset: {
+                inset: {
+                    borderColor: 'sidebar.border',
+                    borderWidth: '1px',
+                    borderRadius: 'panel.md',
+                    marginBlock: 'var(--inset-gap, {spacing.2})',
+                    marginEnd: 'var(--inset-gap, {spacing.2})',
+                    overflow: 'clip',
+                },
+            },
+        },
         mode: {
             collapsible: {
                 root: {
@@ -229,7 +256,24 @@ 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',
         size: 'md',
     },

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

@@ -33,10 +33,10 @@ export const semanticColors = defineSemanticTokens.colors({
     },
     sidebar: {
         bg: {
-            value: { _light: '{colors.gray.100}', _dark: '{colors.gray.900}' },
+            value: { _light: '{colors.gray.100}', _dark: '{colors.black}' },
         },
         fg: {
-            value: { _light: '{colors.gray.900}', _dark: '{colors.gray.200}' },
+            value: { _light: '{colors.gray.900}', _dark: '{colors.gray.100}' },
         },
         border: {
             value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
@@ -66,13 +66,16 @@ 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.950}' },
+            value: { _light: '{colors.white}', _dark: '{colors.gray.900}' },
         },
         overlay: {
             value: {
                 _light: 'color-mix(in oklch, {colors.white} var(--overlay-translucency), transparent)',
-                _dark: 'color-mix(in oklch, {colors.gray.800} var(--overlay-translucency), transparent)',
+                _dark: 'color-mix(in oklch, {colors.gray.900} var(--overlay-translucency), transparent)',
             },
         },
         backdrop: {

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}',
         },
     },
 });