@saas-ui/react 3.0.0-next.38 → 3.0.0-next.39

package/dist/components/navbar/navbar.recipe.js

@@ -1,7 +1,7 @@
 import { defineSlotRecipe } from '@chakra-ui/react';
 export const navbarSlotRecipe = defineSlotRecipe({
     className: 'sui-navbar',
-    slots: ['root', 'content', 'brand', 'item', 'link'],
+    slots: ['root', 'content', 'brand', 'itemGroup', 'item', 'link'],
     base: {
         root: {
             display: 'flex',
@@ -38,6 +38,13 @@ export const navbarSlotRecipe = defineSlotRecipe({
             whiteSpace: 'nowrap',
             boxSizing: 'border-box',
         },
+        itemGroup: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            height: 'full',
+            bg: 'transparent',
+        },
         link: {
             bg: 'transparent',
             color: 'currentColor',
@@ -47,7 +54,7 @@ export const navbarSlotRecipe = defineSlotRecipe({
             textDecoration: 'none',
             whiteSpace: 'nowrap',
             boxSizing: 'border-box',
-            borderRadius: 'md',
+            borderRadius: 'control.md',
             transitionProperty: 'common',
             transitionDuration: 'moderate',
             lineHeight: 1,
@@ -74,9 +81,21 @@ export const navbarSlotRecipe = defineSlotRecipe({
             },
             solid: {
                 root: {
-                    bg: 'colorPalette.500',
+                    bg: 'colorPalette.solid',
                     color: 'colorPalette.contrast',
                 },
+                link: {
+                    _hover: {
+                        bg: 'colorPalette.contrast/10',
+                    },
+                },
+            },
+            glass: {
+                root: {
+                    bg: 'bg.overlay',
+                    backdropFilter: 'var(--overlay-effect)',
+                    color: 'fg',
+                },
             },
         },
         size: {

package/dist/components/radio/radiomark.recipe.js

@@ -2,6 +2,7 @@ import { defineRecipe } from '@chakra-ui/react/styled-system';
 export const radiomarkRecipe = defineRecipe({
     className: 'chakra-radiomark',
     base: {
+        colorPalette: 'accent',
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',

package/dist/components/sidebar/sidebar-nav-item.recipe.js

@@ -22,6 +22,9 @@ export const sidebarNavItemSlotRecipe = defineSlotRecipe({
             transitionDuration: 'fast',
             focusVisibleRing: 'inside',
             focusRingWidth: '1px',
+            _disabled: {
+                layerStyle: 'disabled',
+            },
             '& > svg': {
                 boxSize: 4,
                 color: 'var(--sidebar-item-icon-color)',

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

@@ -35,6 +35,7 @@ export declare const skeletonRecipe: import("@chakra-ui/react").RecipeDefinition
         };
         none: {
             animation: "none";
+            background: "bg.muted";
         };
     };
 }>;

package/dist/components/skeleton/skeleton.recipe.js

@@ -39,6 +39,7 @@ export const skeletonRecipe = defineRecipe({
             },
             none: {
                 animation: 'none',
+                background: 'bg.muted',
             },
         },
     },

package/dist/components/switch/switch.recipe.js

@@ -5,6 +5,7 @@ export const switchSlotRecipe = defineSlotRecipe({
     className: 'chakra-switch',
     base: {
         root: {
+            colorPalette: 'accent',
             display: 'inline-flex',
             gap: '2.5',
             alignItems: 'center',

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { Command } from './components/command/index.ts';
 export { DataList, useDataListStyles } from './components/data-list/index.ts';
 export { Dialog } from './components/dialog/index.ts';
 export { Drawer } from './components/drawer/index.ts';
-export { Editable } from './components/editable/index.ts';
+export { Editable, useEditable, useEditableContext, } from './components/editable/index.ts';
 export { EmptyState, type EmptyStateProps, } from './components/empty-state/index.ts';
 export { FileUpload, useFileUploadContext, } from './components/file-upload/index.ts';
 export { Field, useFieldContext, useFieldStyles, } from './components/field/index.ts';

package/dist/index.js

@@ -29,7 +29,7 @@ export { Command } from "./components/command/index.js";
 export { DataList, useDataListStyles } from "./components/data-list/index.js";
 export { Dialog } from "./components/dialog/index.js";
 export { Drawer } from "./components/drawer/index.js";
-export { Editable } from "./components/editable/index.js";
+export { Editable, useEditable, useEditableContext, } from "./components/editable/index.js";
 export { EmptyState, } from "./components/empty-state/index.js";
 export { FileUpload, useFileUploadContext, } from "./components/file-upload/index.js";
 export { Field, useFieldContext, useFieldStyles, } from "./components/field/index.js";

package/dist/theme/global-css.js

@@ -35,16 +35,12 @@ export const globalCss = defineGlobalStyles({
         '--cursor-button': 'default',
         '--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%',
-    },
     body: {
         color: 'fg',
         bg: 'bg',

package/dist/theme/layer-styles.js

@@ -121,7 +121,7 @@ export const layerStyles = defineLayerStyles({
             bg: 'bg.overlay',
             backdropFilter: 'var(--overlay-effect)',
             borderRadius: 'panel.lg',
-            boxShadow: 'lg',
+            boxShadow: 'overlay',
         },
     },
     backdrop: {

package/dist/theme/recipes.d.ts

@@ -253,37 +253,59 @@ export declare const recipes: {
     heading: import("@chakra-ui/react").RecipeDefinition<{
         size: {
             xs: {
-                textStyle: "xs";
+                fontSize: "xs";
+                lineHeight: "heading.xs";
+                letterSpacing: "heading.xs";
             };
             sm: {
-                textStyle: "sm";
+                fontSize: "sm";
+                lineHeight: "heading.sm";
+                letterSpacing: "heading.sm";
             };
             md: {
-                textStyle: "md";
+                fontSize: "md";
+                lineHeight: "heading.md";
+                letterSpacing: "heading.md";
             };
             lg: {
-                textStyle: "lg";
+                fontSize: "lg";
+                lineHeight: "heading.lg";
+                letterSpacing: "heading.lg";
             };
             xl: {
-                textStyle: "xl";
+                fontSize: "xl";
+                lineHeight: "heading.xl";
+                letterSpacing: "heading.xl";
             };
             '2xl': {
-                textStyle: "2xl";
+                fontSize: "2xl";
+                lineHeight: "heading.2xl";
+                letterSpacing: "heading.2xl";
             };
             '3xl': {
-                textStyle: "3xl";
+                fontSize: "3xl";
+                lineHeight: "heading.3xl";
+                letterSpacing: "heading.3xl";
             };
             '4xl': {
-                textStyle: "4xl";
+                fontSize: "4xl";
+                lineHeight: "heading.4xl";
+                letterSpacing: "heading.4xl";
             };
             '5xl': {
-                textStyle: "5xl";
+                fontSize: "5xl";
+                lineHeight: "heading.5xl";
+                letterSpacing: "heading.5xl";
             };
             '6xl': {
-                textStyle: "6xl";
+                fontSize: "6xl";
+                lineHeight: "heading.6xl";
+                letterSpacing: "heading.6xl";
             };
             '7xl': {
-                textStyle: "7xl";
+                fontSize: "7xl";
+                lineHeight: "heading.7xl";
+                letterSpacing: "heading.7xl";
             };
         };
     }>;
@@ -553,6 +575,7 @@ export declare const recipes: {
             };
             none: {
                 animation: "none";
+                background: "bg.muted";
             };
         };
     }>;

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

@@ -74,8 +74,8 @@ export const semanticColors = defineSemanticTokens.colors({
         },
         overlay: {
             value: {
-                _light: 'color-mix(in oklch, {colors.white} var(--overlay-translucency), transparent)',
-                _dark: 'color-mix(in oklch, {colors.gray.900} var(--overlay-translucency), transparent)',
+                _light: 'color-mix(in oklch, {colors.white} var(--overlay-translucency, 95%), transparent)',
+                _dark: 'color-mix(in oklch, {colors.gray.900} var(--overlay-translucency, 85%), transparent)',
             },
         },
         backdrop: {

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

@@ -47,4 +47,10 @@ export declare const semanticShadows: {
             _dark: string;
         };
     };
+    overlay: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
 };

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

@@ -48,4 +48,10 @@ export const semanticShadows = defineSemanticTokens.shadows({
             _dark: 'inset 0 -1px 2px 0 {colors.gray.300/4}, inset 0 0 0 1px {colors.gray.300/4}',
         },
     },
+    overlay: {
+        value: {
+            _light: '0px 8px 16px {colors.gray.900/5}, 0px 0px 4px {colors.gray.900/5}, 0px 0px 1px {colors.gray.500/80}',
+            _dark: '0px 8px 16px {black/20}, 0px 0px 3px {colors.gray.900/20}, 0px 0px 1px {colors.gray.100/80}',
+        },
+    },
 });

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

@@ -1419,7 +1419,7 @@ export declare const slotRecipes: {
             subtle: {
                 item: {
                     _highlighted: {
-                        bg: "bg.subtle";
+                        bg: "bg.emphasized";
                     };
                 };
             };
@@ -1436,18 +1436,19 @@ export declare const slotRecipes: {
             sm: {
                 content: {
                     minW: "8rem";
-                    padding: "0.5";
+                    padding: "1";
+                    borderRadius: "panel.md";
                 };
                 item: {
                     gap: "1";
                     textStyle: "xs";
-                    py: "1";
+                    minH: "6";
                     px: "1.5";
                     ps: "var(--menu-item-inset, {sizes.1.5})";
                 };
                 itemGroupLabel: {
                     textStyle: "xs";
-                    py: "1";
+                    minH: "6";
                     px: "1.5";
                 };
             };
@@ -1459,13 +1460,13 @@ export declare const slotRecipes: {
                 item: {
                     gap: "2";
                     textStyle: "sm";
-                    py: "1.5";
+                    minH: "7";
                     px: "2";
                     ps: "var(--menu-item-inset, {sizes.2})";
                 };
                 itemGroupLabel: {
                     textStyle: "sm";
-                    py: "1.5";
+                    minH: "7";
                     px: "2";
                 };
             };
@@ -3700,7 +3701,7 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    suiNavbar: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "link" | "root" | "item" | "brand", {
+    suiNavbar: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "link" | "root" | "item" | "itemGroup" | "brand", {
         variant: {
             neutral: {
                 root: {
@@ -3710,9 +3711,21 @@ export declare const slotRecipes: {
             };
             solid: {
                 root: {
-                    bg: "colorPalette.500";
+                    bg: "colorPalette.solid";
                     color: "colorPalette.contrast";
                 };
+                link: {
+                    _hover: {
+                        bg: "colorPalette.contrast/10";
+                    };
+                };
+            };
+            glass: {
+                root: {
+                    bg: "bg.overlay";
+                    backdropFilter: "var(--overlay-effect)";
+                    color: "fg";
+                };
             };
         };
         size: {

package/dist/theme/text-styles.js

@@ -1,35 +1,79 @@
 import { defineTextStyles } from '@chakra-ui/react';
 export const textStyles = defineTextStyles({
-    '2xs': { value: { fontSize: '2xs', lineHeight: '0.75rem' } },
-    xs: { value: { fontSize: 'xs', lineHeight: '1rem' } },
-    sm: { value: { fontSize: 'sm', lineHeight: '1.25rem' } },
-    md: { value: { fontSize: 'md', lineHeight: '1.5rem' } },
-    lg: { value: { fontSize: 'lg', lineHeight: '1.75rem' } },
-    xl: { value: { fontSize: 'xl', lineHeight: '1.875rem' } },
-    '2xl': { value: { fontSize: '2xl', lineHeight: '2rem' } },
-    '3xl': { value: { fontSize: '3xl', lineHeight: '2.375rem' } },
+    '2xs': {
+        value: {
+            fontSize: '2xs',
+            lineHeight: '2xs',
+        },
+    },
+    xs: {
+        value: {
+            fontSize: 'xs',
+            lineHeight: 'xs',
+        },
+    },
+    sm: {
+        value: {
+            fontSize: 'sm',
+            lineHeight: 'sm',
+        },
+    },
+    md: {
+        value: {
+            fontSize: 'md',
+            lineHeight: 'md',
+        },
+    },
+    lg: {
+        value: {
+            fontSize: 'lg',
+            lineHeight: 'lg',
+        },
+    },
+    xl: {
+        value: {
+            fontSize: 'xl',
+            lineHeight: 'xl',
+        },
+    },
+    '2xl': {
+        value: {
+            fontSize: '2xl',
+            lineHeight: '2xl',
+        },
+    },
+    '3xl': {
+        value: {
+            fontSize: '3xl',
+            lineHeight: '3xl',
+        },
+    },
     '4xl': {
         value: {
             fontSize: '4xl',
-            lineHeight: '2.75rem',
-            letterSpacing: '-0.025em',
+            lineHeight: '4xl',
+            letterSpacing: 'tight',
         },
     },
     '5xl': {
         value: {
             fontSize: '5xl',
-            lineHeight: '3.75rem',
-            letterSpacing: '-0.025em',
+            lineHeight: '5xl',
+            letterSpacing: 'tight',
         },
     },
     '6xl': {
-        value: { fontSize: '6xl', lineHeight: '4.5rem', letterSpacing: '-0.025em' },
+        value: {
+            fontSize: '6xl',
+            lineHeight: '6xl',
+            letterSpacing: 'tighter',
+        },
     },
     '7xl': {
         value: {
             fontSize: '7xl',
-            lineHeight: '5.75rem',
-            letterSpacing: '-0.025em',
+            lineHeight: '7xl',
+            letterSpacing: 'tightest',
         },
     },
     none: {

package/dist/theme/tokens/letter-spacing.d.ts

@@ -1,10 +1,16 @@
 export declare const letterSpacings: {
+    tightest: {
+        value: string;
+    };
     tighter: {
         value: string;
     };
     tight: {
         value: string;
     };
+    normal: {
+        value: string;
+    };
     wide: {
         value: string;
     };
@@ -14,4 +20,37 @@ export declare const letterSpacings: {
     widest: {
         value: string;
     };
+    'heading.xs': {
+        value: string;
+    };
+    'heading.sm': {
+        value: string;
+    };
+    'heading.md': {
+        value: string;
+    };
+    'heading.lg': {
+        value: string;
+    };
+    'heading.xl': {
+        value: string;
+    };
+    'heading.2xl': {
+        value: string;
+    };
+    'heading.3xl': {
+        value: string;
+    };
+    'heading.4xl': {
+        value: string;
+    };
+    'heading.5xl': {
+        value: string;
+    };
+    'heading.6xl': {
+        value: string;
+    };
+    'heading.7xl': {
+        value: string;
+    };
 };

package/dist/theme/tokens/letter-spacing.js

@@ -1,8 +1,21 @@
 import { defineTokens } from '@chakra-ui/react';
 export const letterSpacings = defineTokens.letterSpacings({
-    tighter: { value: '-0.05em' },
-    tight: { value: '-0.025em' },
-    wide: { value: '0.025em' },
-    wider: { value: '0.05em' },
-    widest: { value: '0.1em' },
+    tightest: { value: '-0.05em' },
+    tighter: { value: '-0.025em' },
+    tight: { value: '-0.0125em' },
+    normal: { value: '0' },
+    wide: { value: '0.0125em' },
+    wider: { value: '0.025em' },
+    widest: { value: '0.05em' },
+    'heading.xs': { value: '0.0025em' },
+    'heading.sm': { value: '0' },
+    'heading.md': { value: '0' },
+    'heading.lg': { value: '-0.0025em' },
+    'heading.xl': { value: '-0.005' },
+    'heading.2xl': { value: '-0.00625em' },
+    'heading.3xl': { value: '-0.0075em' },
+    'heading.4xl': { value: '-0.01em' },
+    'heading.5xl': { value: '-0.025em' },
+    'heading.6xl': { value: '-0.03em' },
+    'heading.7xl': { value: '-0.035em' },
 });

package/dist/theme/tokens/line-heights.d.ts

@@ -1,41 +1,77 @@
 export declare const lineHeights: {
-    shorter: {
+    '2xs': {
         value: string;
     };
-    short: {
+    xs: {
         value: string;
     };
-    moderate: {
+    sm: {
         value: string;
     };
-    tall: {
+    md: {
         value: string;
     };
-    taller: {
+    lg: {
         value: string;
     };
-    '3': {
+    xl: {
         value: string;
     };
-    '4': {
+    '2xl': {
         value: string;
     };
-    '5': {
+    '3xl': {
         value: string;
     };
-    '6': {
+    '4xl': {
         value: string;
     };
-    '7': {
+    '5xl': {
         value: string;
     };
-    '8': {
+    '6xl': {
         value: string;
     };
-    '9': {
+    '7xl': {
         value: string;
     };
-    '10': {
+    '8xl': {
+        value: string;
+    };
+    '9xl': {
+        value: string;
+    };
+    'heading.xs': {
+        value: string;
+    };
+    'heading.sm': {
+        value: string;
+    };
+    'heading.md': {
+        value: string;
+    };
+    'heading.lg': {
+        value: string;
+    };
+    'heading.xl': {
+        value: string;
+    };
+    'heading.2xl': {
+        value: string;
+    };
+    'heading.3xl': {
+        value: string;
+    };
+    'heading.4xl': {
+        value: string;
+    };
+    'heading.5xl': {
+        value: string;
+    };
+    'heading.6xl': {
+        value: string;
+    };
+    'heading.7xl': {
         value: string;
     };
 };

package/dist/theme/tokens/line-heights.js

@@ -1,17 +1,29 @@
 import { defineTokens } from '@chakra-ui/react';
 import { scaleToken } from "../utils.js";
 export const lineHeights = defineTokens.lineHeights({
-    shorter: { value: scaleToken('1.25') },
-    short: { value: scaleToken('1.375') },
-    moderate: { value: scaleToken('1.5') },
-    tall: { value: scaleToken('1.625') },
-    taller: { value: scaleToken('2') },
-    '3': { value: scaleToken('0.75rem') },
-    '4': { value: scaleToken('1rem') },
-    '5': { value: scaleToken('1.25rem') },
-    '6': { value: scaleToken('1.5rem') },
-    '7': { value: scaleToken('1.75rem') },
-    '8': { value: scaleToken('2rem') },
-    '9': { value: scaleToken('2.25rem') },
-    '10': { value: scaleToken('2.5rem') },
+    '2xs': { value: scaleToken('0.845rem') }, // 1.25
+    xs: { value: scaleToken('1rem') }, //1.33
+    sm: { value: scaleToken('1.1375rem') }, // 1.4
+    md: { value: scaleToken('1.26rem') }, // 1.44
+    lg: { value: scaleToken('1.5rem') }, // 1.5
+    xl: { value: scaleToken('1.62rem') }, // 1.44
+    '2xl': { value: scaleToken('1.75rem') }, // 1.4
+    '3xl': { value: scaleToken('1.95rem') }, // 1.3
+    '4xl': { value: scaleToken('2.345rem') }, // 1.25
+    '5xl': { value: scaleToken('2.7rem') }, // 1.2
+    '6xl': { value: scaleToken('3.45rem') }, // 1.15
+    '7xl': { value: scaleToken('4.125rem') }, // 1.1
+    '8xl': { value: scaleToken('4.5rem') }, // 1
+    '9xl': { value: scaleToken('6rem') }, // 1
+    'heading.xs': { value: scaleToken('0.95rem') }, // 1.33
+    'heading.sm': { value: scaleToken('1rem') }, // 1.28
+    'heading.md': { value: scaleToken('1.20rem') }, // 1.375
+    'heading.lg': { value: scaleToken('1.33rem') }, // 1.33
+    'heading.xl': { value: scaleToken('1.46rem') }, // 1.3
+    'heading.2xl': { value: scaleToken('1.55rem') }, // 1.25
+    'heading.3xl': { value: scaleToken('1.8rem') }, // 1.2
+    'heading.4xl': { value: scaleToken('2.15rem') }, // 1.15
+    'heading.5xl': { value: scaleToken('2.475rem') }, // 1.1
+    'heading.6xl': { value: scaleToken('3rem') }, // 1
+    'heading.7xl': { value: scaleToken('3.75rem') }, // 1
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-next.38",
+  "version": "3.0.0-next.39",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {