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

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.37",
+  "version": "3.0.0-next.39",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {
@@ -62,7 +62,7 @@
   "dependencies": {
     "@ark-ui/react": "^5.9.1",
     "next-themes": "^0.4.6",
-    "@saas-ui/core": "3.0.0-next.10",
+    "@saas-ui/core": "3.0.0-next.11",
     "@saas-ui/hooks": "3.0.0-next.3"
   },
   "peerDependencies": {

package/dist/components/persona/persona-primitive.d.ts

@@ -1,77 +0,0 @@
-import React from 'react';
-import { HTMLChakraProps, type ImageProps, type SlotRecipeProps } from '@chakra-ui/react';
-import { type AvatarProps } from '../avatar/avatar.tsx';
-import type { PersonaVariantProps } from './persona.recipe.ts';
-import type { PersonaPresence } from './presence.ts';
-interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
-    /**
-     * Indicates that a person is out of office. Changes the presence badge style.
-     */
-    outOfOffice?: boolean;
-    /**
-     * The presence status of the person
-     */
-    presence?: PersonaPresence;
-}
-/**
- * The root component that provides context and styles.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaRoot: React.ForwardRefExoticComponent<PersonaRootProps & React.RefAttributes<HTMLDivElement>>;
-interface PersonaAvatarOptions {
-    /**
-     * The name of the person in the avatar.
-     *
-     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
-     * - If `src` is not loaded, the name will be used to create the initials
-     */
-    name?: string;
-}
-interface PersonaAvatarProps extends PersonaAvatarOptions, AvatarProps {
-    src?: string;
-    srcSet?: string;
-    loading?: ImageProps['loading'];
-    icon?: React.ReactElement;
-    fallback?: React.ReactNode;
-    getInitials?: (name?: string | null) => string | null;
-}
-/**
- * An avatar with optional status badge.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
-interface PersonaPresenceBadgeProps extends HTMLChakraProps<'span'> {
-}
-declare const PersonaPresenceBadge: React.ForwardRefExoticComponent<PersonaPresenceBadgeProps & React.RefAttributes<HTMLSpanElement>>;
-interface PersonaDetailsProps extends HTMLChakraProps<'div'> {
-}
-/**
- * Wrapper component for the labels.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaDetails: React.ForwardRefExoticComponent<PersonaDetailsProps & React.RefAttributes<HTMLDivElement>>;
-interface PersonaLabelProps extends HTMLChakraProps<'span'> {
-}
-/**
- * The main label, usually a name.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
-/**
- * The secondary label, usually the role of a person.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaSecondaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
-/**
- * The tertiary label, typically a status message.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaTertiaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
-export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };
-export type { PersonaRootProps as RootProps, PersonaAvatarProps as AvatarProps, PersonaPresenceBadgeProps as PresenceBadgeProps, PersonaDetailsProps as DetailsProps, PersonaLabelProps as LabelProps, };

package/dist/components/persona/persona-primitive.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { chakra, } from '@chakra-ui/react';
-import { dataAttr } from '@saas-ui/core/utils';
-import { Avatar } from "../avatar/avatar.js";
-import { withContext, withProvider } from "./persona.context.js";
-/**
- * The root component that provides context and styles.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaRoot = withProvider(forwardRef((props, ref) => {
-    const { outOfOffice, presence, ...rest } = props;
-    return (_jsx(chakra.div, { ref: ref, ...rest, "data-out-of-office": dataAttr(outOfOffice), "data-presence": presence, css: [
-            presence
-                ? {
-                    '--persona-presence': `colors.presence.${presence}`,
-                }
-                : undefined,
-            rest.css,
-        ] }));
-}), 'root');
-/**
- * An avatar with optional status badge.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaAvatar = forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    return (_jsx(Avatar, { ref: ref, ...rest, children: children }));
-});
-const PersonaPresenceBadge = withContext('span', 'presence');
-/**
- * Wrapper component for the labels.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaDetails = withContext('div', 'details');
-/**
- * The main label, usually a name.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaLabel = withContext('span', 'label');
-PersonaLabel.displayName = 'PersonaLabel';
-/**
- * The secondary label, usually the role of a person.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaSecondaryLabel = withContext('span', 'secondaryLabel');
-/**
- * The tertiary label, typically a status message.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaTertiaryLabel = withContext('span', 'tertiaryLabel');
-export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };