@saas-ui/react 3.0.0-next.37 → 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/persona/index.d.ts

@@ -1,4 +1,3 @@
-export { Persona, PersonaAvatar } from './persona.tsx';
-export type { PersonaProps, PersonaAvatarProps } from './persona.tsx';
+export * as Persona from './persona.tsx';
 export { defaultPersonaPresenceOptions } from './presence.ts';
 export type { PersonaPresence, PersonaPresenceConfig } from './presence.ts';

package/dist/components/persona/index.js

@@ -1,2 +1,2 @@
-export { Persona, PersonaAvatar } from "./persona.js";
+export * as Persona from "./persona.js";
 export { defaultPersonaPresenceOptions } from "./presence.js";

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import * as PersonaPrimitive from './persona.tsx';
+import type { PersonaVariantProps } from './persona.recipe.ts';
+import type { PersonaPresence } from './presence.ts';
+interface PersonaOptions {
+    /**
+     * 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;
+    /**
+     * The presence status of the person
+     *
+     * If set will add an AvatarBadge with color configured in `Presence`
+     * Default presence options:
+     * - online
+     * - offline
+     * - busy
+     * - dnd
+     * - away
+     */
+    presence?: PersonaPresence;
+    /**
+     * The icon shown in the AvatarBadge
+     */
+    presenceIcon?: React.ReactNode;
+    /**
+     * Indicates that a person is out of office. Changes the presence badge style.
+     */
+    isOutOfOffice?: boolean;
+    /**
+     * Primary label of the persona, defaults to the name
+     */
+    label?: React.ReactNode;
+    /**
+     * Secondary label, usually the role of the person
+     * Only visible from md size and up.
+     */
+    secondaryLabel?: React.ReactNode;
+    /**
+     * Tertiary label, usually the status of the person.
+     * Only visible from lg size and up.
+     */
+    tertiaryLabel?: React.ReactNode;
+    /**
+     * Hide the persona details next to the avatar.
+     */
+    hideDetails?: boolean;
+}
+export interface PersonaProps extends PersonaOptions, Omit<PersonaPrimitive.AvatarProps, 'size'>, Omit<PersonaPrimitive.RootProps, 'presence'>, PersonaVariantProps {
+}
+/**
+ * The wrapper component that handles default composition.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export declare const Persona: React.ForwardRefExoticComponent<PersonaProps & React.RefAttributes<HTMLDivElement>>;
+export interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'children'> {
+}
+export declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as PersonaPrimitive from "./persona.js";
+/**
+ * The wrapper component that handles default composition.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export const Persona = React.forwardRef((props, ref) => {
+    const { name, presence, presenceIcon, isOutOfOffice, label, secondaryLabel, tertiaryLabel, size, hideDetails, children, 
+    /** Avatar props */
+    getInitials, icon, loading, onError, src, srcSet, fallback, ...rest } = props;
+    return (_jsxs(PersonaPrimitive.Root, { ref: ref, outOfOffice: isOutOfOffice, presence: presence, size: size, ...rest, children: [_jsx(PersonaPrimitive.Avatar, { name: name, size: size, getInitials: getInitials, icon: icon, loading: loading, onError: onError, src: src, srcSet: srcSet, fallback: fallback, children: presence ? (_jsx(PersonaPrimitive.PresenceBadge, { children: presenceIcon })) : null }), !hideDetails && (_jsxs(PersonaPrimitive.Details, { children: [_jsx(PersonaPrimitive.Label, { children: label || name }), secondaryLabel && (_jsx(PersonaPrimitive.SecondaryLabel, { children: secondaryLabel })), tertiaryLabel && (_jsx(PersonaPrimitive.TertiaryLabel, { children: tertiaryLabel })), children] }))] }));
+});
+Persona.displayName = 'Persona';
+export const PersonaAvatar = React.forwardRef(function PersonaAvatar(props, ref) {
+    return _jsx(Persona, { ref: ref, ...props, hideDetails: true });
+});

package/dist/components/persona/persona.context.d.ts

@@ -1 +1,9 @@
-export declare const usePersonaStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>, withProvider: <T, P>(Component: React.ElementType<any>, slot: string, options?: import("@chakra-ui/react").WithProviderOptions<P> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<T>>, withContext: <T, P_1>(Component: React.ElementType<any>, slot?: string | undefined, options?: import("@chakra-ui/react").WithContextOptions<P_1> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P_1> & import("react").RefAttributes<T>>;
+export declare const usePersonaStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>, useRecipeResult: (props: any) => {
+    styles: Record<string, import("@chakra-ui/react").SystemStyleObject>;
+    classNames: Record<string, string>;
+    props: {
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    };
+}, usePropsContext: () => Record<string, any>, withProvider: <T, P>(Component: React.ElementType<any>, slot: string, options?: import("@chakra-ui/react").WithProviderOptions<P> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<T>>, withContext: <T, P_1>(Component: React.ElementType<any>, slot?: string | undefined, options?: import("@chakra-ui/react").WithContextOptions<P_1> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P_1> & import("react").RefAttributes<T>>, ClassNamesProvider: import("react").Provider<Record<string, string>>, PropsProvider: import("react").Provider<Record<string, any>>, StylesProvider: import("react").Provider<Record<string, import("@chakra-ui/react").SystemStyleObject>>;

package/dist/components/persona/persona.context.js

@@ -1,4 +1,4 @@
 import { createSlotRecipeContext } from '@chakra-ui/react';
-export const { useStyles: usePersonaStyles, withProvider, withContext, } = createSlotRecipeContext({
+export const { useStyles: usePersonaStyles, useRecipeResult, usePropsContext, withProvider, withContext, ClassNamesProvider, PropsProvider, StylesProvider, } = createSlotRecipeContext({
     key: 'suiPersona',
 });

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

@@ -1,63 +1,77 @@
-import * as React from 'react';
-import * as PersonaPrimitive from './persona-primitive.tsx';
+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 PersonaOptions {
+interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
     /**
-     * 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
+     * Indicates that a person is out of office. Changes the presence badge style.
      */
-    name?: string;
+    outOfOffice?: boolean;
     /**
      * The presence status of the person
-     *
-     * If set will add an AvatarBadge with color configured in `Presence`
-     * Default presence options:
-     * - online
-     * - offline
-     * - busy
-     * - dnd
-     * - away
      */
     presence?: PersonaPresence;
+}
+/**
+ * The root component that provides context and styles.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaRoot: React.ForwardRefExoticComponent<PersonaRootProps & React.RefAttributes<HTMLDivElement>>;
+interface PersonaAvatarOptions {
     /**
-     * The icon shown in the AvatarBadge
-     */
-    presenceIcon?: React.ReactNode;
-    /**
-     * Indicates that a person is out of office. Changes the presence badge style.
-     */
-    isOutOfOffice?: boolean;
-    /**
-     * Primary label of the persona, defaults to the name
-     */
-    label?: React.ReactNode;
-    /**
-     * Secondary label, usually the role of the person
-     * Only visible from md size and up.
-     */
-    secondaryLabel?: React.ReactNode;
-    /**
-     * Tertiary label, usually the status of the person.
-     * Only visible from lg size and up.
-     */
-    tertiaryLabel?: React.ReactNode;
-    /**
-     * Hide the persona details next to the avatar.
+     * 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
      */
-    hideDetails?: boolean;
+    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/persona
+ */
+declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
+interface PersonaPresenceBadgeProps extends HTMLChakraProps<'span'> {
 }
-export interface PersonaProps extends PersonaOptions, Omit<PersonaPrimitive.AvatarProps, 'size'>, Omit<PersonaPrimitive.RootProps, 'presence'>, PersonaVariantProps {
+declare const PersonaPresenceBadge: React.ForwardRefExoticComponent<PersonaPresenceBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+interface PersonaDetailsProps extends HTMLChakraProps<'div'> {
 }
 /**
- * The wrapper component that handles default composition.
+ * Wrapper component for the labels.
  *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ * @see Docs https://saas-ui.dev/docs/components/persona
  */
-export declare const Persona: React.ForwardRefExoticComponent<PersonaProps & React.RefAttributes<HTMLDivElement>>;
-export interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'children'> {
+declare const PersonaDetails: React.ForwardRefExoticComponent<PersonaDetailsProps & React.RefAttributes<HTMLDivElement>>;
+interface PersonaLabelProps extends HTMLChakraProps<'span'> {
 }
-export declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+/**
+ * The main label, usually a name.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/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/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/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.js

@@ -1,18 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import * as PersonaPrimitive from "./persona-primitive.js";
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { AvatarPropsProvider, chakra, mergeProps, } from '@chakra-ui/react';
+import { dataAttr } from '@saas-ui/core/utils';
+import { cx } from '@saas-ui/core/utils';
+import { Avatar } from "../avatar/avatar.js";
+import { ClassNamesProvider, StylesProvider, usePropsContext, useRecipeResult, withContext, } from "./persona.context.js";
 /**
- * The wrapper component that handles default composition.
+ * The root component that provides context and styles.
  *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ * @see Docs https://saas-ui.dev/docs/components/persona
  */
-export const Persona = React.forwardRef((props, ref) => {
-    const { name, presence, presenceIcon, isOutOfOffice, label, secondaryLabel, tertiaryLabel, size, hideDetails, children, 
-    /** Avatar props */
-    getInitials, icon, loading, onError, src, srcSet, fallback, ...rest } = props;
-    return (_jsxs(PersonaPrimitive.Root, { ref: ref, outOfOffice: isOutOfOffice, presence: presence, size: size, ...rest, children: [_jsx(PersonaPrimitive.Avatar, { name: name, size: size, getInitials: getInitials, icon: icon, loading: loading, onError: onError, src: src, srcSet: srcSet, fallback: fallback, children: presence ? (_jsx(PersonaPrimitive.PresenceBadge, { children: presenceIcon })) : null }), !hideDetails && (_jsxs(PersonaPrimitive.Details, { children: [_jsx(PersonaPrimitive.Label, { children: label || name }), secondaryLabel && (_jsx(PersonaPrimitive.SecondaryLabel, { children: secondaryLabel })), tertiaryLabel && (_jsx(PersonaPrimitive.TertiaryLabel, { children: tertiaryLabel })), children] }))] }));
+const PersonaRoot = forwardRef((props, ref) => {
+    const propsContext = usePropsContext();
+    const mergedProps = useMemo(() => mergeProps(propsContext, props), [propsContext, props]);
+    const { styles, props: rootProps, classNames, } = useRecipeResult(mergedProps);
+    const className = classNames['root'];
+    const { outOfOffice, presence, ...rest } = rootProps;
+    return (_jsx(StylesProvider, { value: styles, children: _jsx(ClassNamesProvider, { value: classNames, children: _jsx(AvatarPropsProvider, { value: {
+                    size: props.size,
+                }, children: _jsx(chakra.div, { ref: ref, ...rest, "data-out-of-office": dataAttr(outOfOffice), "data-presence": presence, css: [
+                        presence
+                            ? {
+                                '--persona-presence': `colors.presence.${presence}`,
+                            }
+                            : undefined,
+                        styles['root'],
+                        rest.css,
+                    ], className: cx(className, rest.className) }) }) }) }));
 });
-Persona.displayName = 'Persona';
-export const PersonaAvatar = React.forwardRef(function PersonaAvatar(props, ref) {
-    return _jsx(Persona, { ref: ref, ...props, hideDetails: true });
+/**
+ * An avatar with optional status badge.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/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/persona
+ */
+const PersonaDetails = withContext('div', 'details');
+/**
+ * The main label, usually a name.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/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/persona
+ */
+const PersonaSecondaryLabel = withContext('span', 'secondaryLabel');
+/**
+ * The tertiary label, typically a status message.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/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, };

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';
@@ -63,7 +63,7 @@ export { Menu } from './components/menu/index.ts';
 export { Page, usePageStyles } from './components/page/index.ts';
 export { Pagination } from './components/pagination/index.ts';
 export { PasswordInput, type PasswordInputProps, } from './components/password-input/index.ts';
-export { Persona, PersonaAvatar, type PersonaPresence, type PersonaAvatarProps, type PersonaPresenceConfig, type PersonaProps, defaultPersonaPresenceOptions, } from './components/persona/index.ts';
+export { Persona, type PersonaPresence, type PersonaPresenceConfig, defaultPersonaPresenceOptions, } from './components/persona/index.ts';
 export { PinInput, type PinInputProps } from './components/pin-input/index.ts';
 export { Popover } from './components/popover/index.ts';
 export { Progress } from './components/progress/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";
@@ -58,7 +58,7 @@ export { Menu } from "./components/menu/index.js";
 export { Page, usePageStyles } from "./components/page/index.js";
 export { Pagination } from "./components/pagination/index.js";
 export { PasswordInput, } from "./components/password-input/index.js";
-export { Persona, PersonaAvatar, defaultPersonaPresenceOptions, } from "./components/persona/index.js";
+export { Persona, defaultPersonaPresenceOptions, } from "./components/persona/index.js";
 export { PinInput } from "./components/pin-input/index.js";
 export { Popover } from "./components/popover/index.js";
 export { Progress } from "./components/progress/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}',
+        },
+    },
 });