@saas-ui/react 3.0.0-next.26 → 3.0.0-next.28

package/dist/components/action-bar/action-bar.recipe.js

@@ -48,7 +48,7 @@ export const actionBarSlotRecipe = defineSlotRecipe({
             textStyle: 'sm',
             px: '4',
             py: '1',
-            borderRadius: 'l2',
+            borderRadius: 'control.md',
             borderWidth: '1px',
             borderStyle: 'dashed',
         },

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

@@ -8,27 +8,27 @@ export declare const avatarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefi
         };
         '2xs': {
             root: {
-                '--avatar-size': "sizes.5";
+                '--avatar-size': "sizes.4";
             };
         };
         xs: {
             root: {
-                '--avatar-size': "sizes.6";
+                '--avatar-size': "sizes.5";
             };
         };
         sm: {
             root: {
-                '--avatar-size': "sizes.9";
+                '--avatar-size': "sizes.6";
             };
         };
         md: {
             root: {
-                '--avatar-size': "sizes.12";
+                '--avatar-size': "sizes.9";
             };
         };
         lg: {
             root: {
-                '--avatar-size': "sizes.14";
+                '--avatar-size': "sizes.12";
             };
         };
         xl: {
@@ -38,7 +38,6 @@ export declare const avatarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefi
         };
         '2xl': {
             root: {
-                '--avatar-font-size': "calc(var(--avatar-size) / 2)";
                 '--avatar-size': "sizes.20";
             };
         };
@@ -68,7 +67,7 @@ export declare const avatarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefi
         square: {};
         rounded: {
             root: {
-                '--avatar-radius': "radii.l3";
+                '--avatar-radius': "radii.indicator.md";
             };
         };
         full: {

package/dist/components/avatar/avatar.recipe.js

@@ -47,27 +47,27 @@ export const avatarSlotRecipe = defineSlotRecipe({
             },
             '2xs': {
                 root: {
-                    '--avatar-size': 'sizes.5',
+                    '--avatar-size': 'sizes.4',
                 },
             },
             xs: {
                 root: {
-                    '--avatar-size': 'sizes.6',
+                    '--avatar-size': 'sizes.5',
                 },
             },
             sm: {
                 root: {
-                    '--avatar-size': 'sizes.9',
+                    '--avatar-size': 'sizes.6',
                 },
             },
             md: {
                 root: {
-                    '--avatar-size': 'sizes.12',
+                    '--avatar-size': 'sizes.9',
                 },
             },
             lg: {
                 root: {
-                    '--avatar-size': 'sizes.14',
+                    '--avatar-size': 'sizes.12',
                 },
             },
             xl: {
@@ -77,7 +77,6 @@ export const avatarSlotRecipe = defineSlotRecipe({
             },
             '2xl': {
                 root: {
-                    '--avatar-font-size': 'calc(var(--avatar-size) / 2)',
                     '--avatar-size': 'sizes.20',
                 },
             },
@@ -106,7 +105,7 @@ export const avatarSlotRecipe = defineSlotRecipe({
         shape: {
             square: {},
             rounded: {
-                root: { '--avatar-radius': 'radii.l3' },
+                root: { '--avatar-radius': 'radii.indicator.md' },
             },
             full: {
                 root: { '--avatar-radius': 'radii.full' },

package/dist/components/breadcrumb/breadcrumb.recipe.js

@@ -13,7 +13,7 @@ export const breadcrumbSlotRecipe = defineSlotRecipe({
         link: {
             outline: '0',
             textDecoration: 'none',
-            borderRadius: 'l1',
+            borderRadius: 'control.sm',
             focusRing: 'outside',
             display: 'inline-flex',
             alignItems: 'center',

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

@@ -67,7 +67,10 @@ export declare const buttonRecipe: import("@chakra-ui/react").RecipeDefinition<{
             bg: "colorPalette.solid";
             color: "colorPalette.contrast";
             '--btn-shadow': "shadows.sm";
-            boxShadow: "0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
+            boxShadow: {
+                base: "0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
+                _dark: " 0px 1px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
+            };
             textShadow: "0 1px 2px rgba(0,0,0,0.3)";
             overflow: "clip";
             _after: {

package/dist/components/button/button.recipe.js

@@ -97,7 +97,10 @@ export const buttonRecipe = defineRecipe({
                 bg: 'colorPalette.solid',
                 color: 'colorPalette.contrast',
                 '--btn-shadow': 'shadows.sm',
-                boxShadow: '0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)',
+                boxShadow: {
+                    base: '0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)',
+                    _dark: ' 0px 1px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)',
+                },
                 textShadow: '0 1px 2px rgba(0,0,0,0.3)',
                 overflow: 'clip',
                 _after: {

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

@@ -2,18 +2,18 @@ export declare const cardSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
     size: {
         sm: {
             root: {
-                '--card-padding': "spacing.2";
+                '--card-padding': "spacing.2.5";
             };
             title: {
-                textStyle: "md";
+                fontSize: "sm";
             };
         };
         md: {
             root: {
-                '--card-padding': "spacing.3";
+                '--card-padding': "spacing.4";
             };
             title: {
-                textStyle: "lg";
+                fontSize: "md";
             };
         };
         lg: {
@@ -21,7 +21,7 @@ export declare const cardSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
                 '--card-padding': "spacing.6";
             };
             title: {
-                textStyle: "xl";
+                fontSize: "lg";
             };
         };
     };
@@ -64,6 +64,14 @@ export declare const cardSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
             root: {
                 bg: "colorPalette.solid";
                 color: "colorPalette.contrast";
+                _pressable: {
+                    _hover: {
+                        bg: string;
+                    };
+                };
+            };
+            description: {
+                color: "colorPalette.contrast/80";
             };
         };
     };

package/dist/components/card/card.recipe.js

@@ -23,42 +23,43 @@ export const cardSlotRecipe = defineSlotRecipe({
         },
         header: {
             padding: 'var(--card-padding)',
-            paddingBlock: 'calc(var(--card-padding) / 1.5)',
             display: 'flex',
             flexDirection: 'column',
-            gap: '1.5',
+            gap: '1',
         },
         body: {
             padding: 'var(--card-padding)',
-            paddingBlock: 'calc(var(--card-padding) / 1.5)',
             flex: '1',
             display: 'flex',
             flexDirection: 'column',
+            '&:is(.chakra-card__header + &)': {
+                paddingTop: 0,
+            },
         },
         footer: {
             display: 'flex',
             alignItems: 'center',
             gap: '2',
             padding: 'var(--card-padding)',
-            paddingBlock: 'calc(var(--card-padding) / 1.5)',
+            paddingTop: 0,
         },
     },
     variants: {
         size: {
             sm: {
                 root: {
-                    '--card-padding': 'spacing.2',
+                    '--card-padding': 'spacing.2.5',
                 },
                 title: {
-                    textStyle: 'md',
+                    fontSize: 'sm',
                 },
             },
             md: {
                 root: {
-                    '--card-padding': 'spacing.3',
+                    '--card-padding': 'spacing.4',
                 },
                 title: {
-                    textStyle: 'lg',
+                    fontSize: 'md',
                 },
             },
             lg: {
@@ -66,7 +67,7 @@ export const cardSlotRecipe = defineSlotRecipe({
                     '--card-padding': 'spacing.6',
                 },
                 title: {
-                    textStyle: 'xl',
+                    fontSize: 'lg',
                 },
             },
         },
@@ -109,6 +110,14 @@ export const cardSlotRecipe = defineSlotRecipe({
                 root: {
                     bg: 'colorPalette.solid',
                     color: 'colorPalette.contrast',
+                    _pressable: {
+                        _hover: {
+                            bg: 'colorPalette.solid/80',
+                        },
+                    },
+                },
+                description: {
+                    color: 'colorPalette.contrast/80',
                 },
             },
         },

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

@@ -1,4 +1,4 @@
-export declare const checkboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "group" | "indicator" | "control", {
+export declare const checkboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "indicator" | "root" | "group", {
     size: {
         xs: {
             root: {
@@ -50,7 +50,7 @@ export declare const checkboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
     variant: {
         outline: {
             control: {
-                borderColor: "border";
+                borderColor: "border.emphasized";
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     color: "colorPalette.fg";
                     borderColor: "colorPalette.solid";
@@ -59,7 +59,7 @@ export declare const checkboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
         };
         solid: {
             control: {
-                borderColor: "border";
+                borderColor: "border.emphasized";
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     bg: "colorPalette.solid";
                     color: "colorPalette.contrast";
@@ -70,7 +70,7 @@ export declare const checkboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDe
         subtle: {
             control: {
                 bg: "colorPalette.muted";
-                borderColor: "colorPalette.muted";
+                borderColor: "colorPalette.emphasized";
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     color: "colorPalette.fg";
                 };

package/dist/components/checkbox-card/checkbox-card.recipe.d.ts

@@ -69,7 +69,7 @@ export declare const checkboxCardSlotRecipe: import("@chakra-ui/react").SlotReci
                 };
             };
             indicator: {
-                borderColor: "border";
+                borderColor: "border.emphasized";
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     bg: "colorPalette.solid";
                     color: "colorPalette.contrast";
@@ -104,7 +104,7 @@ export declare const checkboxCardSlotRecipe: import("@chakra-ui/react").SlotReci
                 };
             };
             indicator: {
-                borderColor: "border";
+                borderColor: "border.emphasized";
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     bg: "colorPalette.solid";
                     color: "colorPalette.contrast";

package/dist/components/checkbox-card/checkbox-card.recipe.js

@@ -6,11 +6,12 @@ export const checkboxCardSlotRecipe = defineSlotRecipe({
     className: 'chakra-checkbox-card',
     base: {
         root: {
+            colorPalette: 'accent',
             display: 'flex',
             flexDirection: 'column',
             userSelect: 'none',
             position: 'relative',
-            borderRadius: 'l2',
+            borderRadius: 'panel.md',
             flex: '1',
             focusVisibleRing: 'outside',
             _disabled: {
@@ -26,7 +27,7 @@ export const checkboxCardSlotRecipe = defineSlotRecipe({
             display: 'inline-flex',
             flex: '1',
             position: 'relative',
-            borderRadius: 'inherit',
+            borderRadius: 'panel.md',
             justifyContent: 'var(--checkbox-card-justify)',
             alignItems: 'var(--checkbox-card-align)',
         },

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

@@ -17,7 +17,7 @@ export declare const checkmarkRecipe: import("@chakra-ui/react").RecipeDefinitio
     };
     variant: {
         solid: {
-            borderColor: "border";
+            borderColor: "border.emphasized";
             '&:is([data-state=checked], [data-state=indeterminate])': {
                 bg: "colorPalette.solid";
                 color: "colorPalette.contrast";
@@ -25,7 +25,7 @@ export declare const checkmarkRecipe: import("@chakra-ui/react").RecipeDefinitio
             };
         };
         outline: {
-            borderColor: "border";
+            borderColor: "border.emphasized";
             '&:is([data-state=checked], [data-state=indeterminate])': {
                 color: "colorPalette.fg";
                 borderColor: "colorPalette.solid";
@@ -33,7 +33,7 @@ export declare const checkmarkRecipe: import("@chakra-ui/react").RecipeDefinitio
         };
         subtle: {
             bg: "colorPalette.muted";
-            borderColor: "colorPalette.muted";
+            borderColor: "colorPalette.emphasized";
             '&:is([data-state=checked], [data-state=indeterminate])': {
                 color: "colorPalette.fg";
             };

package/dist/components/checkmark/checkmark.recipe.js

@@ -9,7 +9,7 @@ export const checkmarkRecipe = defineRecipe({
         color: 'white',
         borderWidth: '1px',
         borderColor: 'transparent',
-        borderRadius: 'l1',
+        borderRadius: 'control.md',
         focusVisibleRing: 'outside',
         _invalid: {
             colorPalette: 'red',
@@ -38,7 +38,7 @@ export const checkmarkRecipe = defineRecipe({
         },
         variant: {
             solid: {
-                borderColor: 'border',
+                borderColor: 'border.emphasized',
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     bg: 'colorPalette.solid',
                     color: 'colorPalette.contrast',
@@ -46,7 +46,7 @@ export const checkmarkRecipe = defineRecipe({
                 },
             },
             outline: {
-                borderColor: 'border',
+                borderColor: 'border.emphasized',
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     color: 'colorPalette.fg',
                     borderColor: 'colorPalette.solid',
@@ -54,7 +54,7 @@ export const checkmarkRecipe = defineRecipe({
             },
             subtle: {
                 bg: 'colorPalette.muted',
-                borderColor: 'colorPalette.muted',
+                borderColor: 'colorPalette.emphasized',
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     color: 'colorPalette.fg',
                 },

package/dist/components/code/code.recipe.js

@@ -7,7 +7,7 @@ export const codeRecipe = defineRecipe({
         fontFamily: 'mono',
         alignItems: 'center',
         display: 'inline-flex',
-        borderRadius: 'l2',
+        borderRadius: 'indicator.md',
     },
     variants,
     defaultVariants,

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

@@ -1 +1 @@
-export declare const collapsibleSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "trigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "root" | "trigger">>;
+export declare const collapsibleSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "root" | "trigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "indicator" | "root" | "trigger">>;

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

@@ -1,4 +1,22 @@
 export declare const dialogSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "body" | "backdrop" | "positioner" | "closeTrigger" | "title" | "header" | "footer" | "trigger", {
+    variant: {
+        dialog: {};
+        confirm: {
+            content: {
+                textAlign: "center";
+            };
+            header: {
+                flexDirection: "column";
+                alignItems: "center";
+            };
+            footer: {
+                display: "flex";
+                flexDirection: "column-reverse";
+                justifyContent: "stretch";
+                alignItems: "stretch";
+            };
+        };
+    };
     placement: {
         center: {
             positioner: {

package/dist/components/dialog/dialog.recipe.js

@@ -52,9 +52,6 @@ export const dialogSlotRecipe = defineSlotRecipe({
         },
         header: {
             display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
             flex: 0,
             px: '6',
             py: '4',
@@ -81,8 +78,31 @@ export const dialogSlotRecipe = defineSlotRecipe({
         description: {
             color: 'fg.muted',
         },
+        closeTrigger: {
+            position: 'absolute',
+            top: '4',
+            right: '4',
+        },
     },
     variants: {
+        variant: {
+            dialog: {},
+            confirm: {
+                content: {
+                    textAlign: 'center',
+                },
+                header: {
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                },
+                footer: {
+                    display: 'flex',
+                    flexDirection: 'column-reverse',
+                    justifyContent: 'stretch',
+                    alignItems: 'stretch',
+                },
+            },
+        },
         placement: {
             center: {
                 positioner: {
@@ -210,10 +230,21 @@ export const dialogSlotRecipe = defineSlotRecipe({
             none: {},
         },
     },
+    compoundVariants: [
+        {
+            variant: 'confirm',
+            css: {
+                content: {
+                    maxW: 'xs',
+                },
+            },
+        },
+    ],
     defaultVariants: {
         size: 'md',
         scrollBehavior: 'outside',
         placement: 'top',
         motionPreset: 'scale',
+        variant: 'dialog',
     },
 });

package/dist/components/drawer/drawer.recipe.js

@@ -84,6 +84,11 @@ export const drawerSlotRecipe = defineSlotRecipe({
         description: {
             color: 'fg.muted',
         },
+        closeTrigger: {
+            position: 'absolute',
+            top: '4',
+            right: '4',
+        },
     },
     variants: {
         size: {

package/dist/components/editable/editable.recipe.js

@@ -5,7 +5,7 @@ const sharedStyles = defineStyle({
     fontWeight: 'inherit',
     textAlign: 'inherit',
     bg: 'transparent',
-    borderRadius: 'l2',
+    borderRadius: 'control.md',
 });
 export const editableSlotRecipe = defineSlotRecipe({
     slots: editableAnatomy.keys(),

package/dist/components/grid-list/grid-list.recipe.js

@@ -39,9 +39,8 @@ export const gridListSlotRecipe = defineSlotRecipe({
             display: 'flex',
             flexDirection: 'row',
             position: 'sticky',
-            fontSize: 'md',
-            fontWeight: 'semibold',
-            color: 'fg.muted',
+            fontWeight: 'medium',
+            color: 'fg.subtle',
         },
         cell: {
             flexShrink: 0,
@@ -84,7 +83,7 @@ export const gridListSlotRecipe = defineSlotRecipe({
                     gap: 1,
                 },
                 header: {
-                    py: 1,
+                    py: 0.5,
                     px: 2,
                 },
             },
@@ -99,7 +98,7 @@ export const gridListSlotRecipe = defineSlotRecipe({
                     gap: 2,
                 },
                 header: {
-                    py: 2,
+                    py: 1,
                     px: 3,
                 },
             },

package/dist/components/icon-badge/icon-badge.d.ts

@@ -4,7 +4,7 @@ export interface IconBadgeProps extends HTMLChakraProps<'div'>, RecipeProps<'sui
     /**
      * The icon to display
      */
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
     /**
      * A11y: A label that describes the icon
      */

package/dist/components/icon-badge/icon-badge.recipe.js

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

package/dist/components/input/input-addon.recipe.d.ts

@@ -42,7 +42,7 @@ export declare const inputAddonRecipe: import("@chakra-ui/react").RecipeDefiniti
             borderColor: "transparent";
             bg: {
                 _light: "gray.100";
-                _dark: "whiteAlpha.50";
+                _dark: "white/10";
             };
         };
         flushed: {

package/dist/components/input/input-addon.recipe.js

@@ -21,7 +21,7 @@ export const inputAddonRecipe = defineRecipe({
             subtle: {
                 border: '2px solid',
                 borderColor: 'transparent',
-                bg: { _light: 'gray.100', _dark: 'whiteAlpha.50' },
+                bg: { _light: 'gray.100', _dark: 'white/10' },
             },
             flushed: {
                 borderBottom: '1px solid',

package/dist/components/kbd/kbd.recipe.js

@@ -11,7 +11,7 @@ export const kbdRecipe = defineRecipe({
         wordSpacing: '-0.5em',
         userSelect: 'none',
         px: '1',
-        borderRadius: 'l2',
+        borderRadius: 'indicator.md',
     },
     variants: {
         variant: {

package/dist/components/link/link.recipe.js

@@ -7,7 +7,7 @@ export const linkRecipe = defineRecipe({
         outline: 'none',
         gap: '1.5',
         cursor: 'pointer',
-        borderRadius: 'l1',
+        borderRadius: 'control.sm',
         focusRing: 'outside',
     },
     variants: {

package/dist/components/loading-overlay/loading-overlay.recipe.d.ts

@@ -4,10 +4,7 @@ export declare const loadingOverlaySlotRecipe: import("@chakra-ui/react").SlotRe
             root: {
                 flex: number;
                 height: "100%";
-                bg: {
-                    base: "whiteAlpha.400";
-                    _dark: "blackAlpha.400";
-                };
+                bg: "currentBg";
             };
         };
         fullscreen: {
@@ -15,20 +12,14 @@ export declare const loadingOverlaySlotRecipe: import("@chakra-ui/react").SlotRe
                 position: "fixed";
                 inset: number;
                 zIndex: "modal";
-                bg: {
-                    base: "white";
-                    _dark: "gray.800";
-                };
+                bg: "bg";
             };
         };
         overlay: {
             root: {
                 position: "absolute";
                 inset: number;
-                bg: {
-                    base: "whiteAlpha.300";
-                    _dark: "blackAlpha.300";
-                };
+                bg: "currentBg/50";
             };
         };
     };