@saas-ui/react 3.0.0-next.44 → 3.0.0-next.48

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

@@ -1,202 +0,0 @@
-import { drawerAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const drawerSlotRecipe = defineSlotRecipe({
-    slots: drawerAnatomy.keys(),
-    className: 'chakra-drawer',
-    base: {
-        backdrop: {
-            layerStyle: 'backdrop',
-            pos: 'fixed',
-            insetInlineStart: 0,
-            top: 0,
-            w: '100vw',
-            h: '100dvh',
-            zIndex: 'layer-4',
-            _open: {
-                animationName: 'fade-in',
-                animationDuration: 'slow',
-            },
-            _closed: {
-                animationName: 'fade-out',
-                animationDuration: 'moderate',
-            },
-        },
-        positioner: {
-            '--drawer-z-index': 'zIndex.layer-4',
-            display: 'flex',
-            width: '100vw',
-            height: '100dvh',
-            position: 'fixed',
-            padding: 2,
-            insetInlineStart: 0,
-            top: 0,
-            zIndex: 'calc(var(--drawer-z-index) + var(--layer-index, 0))',
-            overscrollBehaviorY: 'none',
-        },
-        content: {
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'relative',
-            width: '100%',
-            outline: 0,
-            zIndex: 'calc(var(--drawer-z-index) + var(--layer-index, 0))',
-            textStyle: 'sm',
-            maxH: '100dvh',
-            color: 'inherit',
-            layerStyle: 'overlay',
-            _open: {
-                animationDuration: 'slowest',
-                animationTimingFunction: 'ease-in-smooth',
-            },
-            _closed: {
-                animationDuration: 'slower',
-                animationTimingFunction: 'ease-in-smooth',
-            },
-        },
-        header: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            flex: 0,
-            px: '6',
-            py: '4',
-        },
-        body: {
-            px: '6',
-            py: '2',
-            flex: '1',
-            overflow: 'auto',
-        },
-        footer: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            gap: '3',
-            px: '6',
-            pt: '2',
-            pb: '4',
-        },
-        title: {
-            textStyle: 'lg',
-            fontWeight: 'semibold',
-        },
-        description: {
-            color: 'fg.muted',
-        },
-        closeTrigger: {
-            position: 'absolute',
-            top: '4',
-            right: '4',
-        },
-    },
-    variants: {
-        size: {
-            xs: {
-                content: {
-                    maxW: 'xs',
-                },
-            },
-            sm: {
-                content: {
-                    maxW: 'md',
-                },
-            },
-            md: {
-                content: {
-                    maxW: 'lg',
-                },
-            },
-            lg: {
-                content: {
-                    maxW: '2xl',
-                },
-            },
-            xl: {
-                content: {
-                    maxW: '4xl',
-                },
-            },
-            full: {
-                content: {
-                    maxW: '100vw',
-                    h: '100dvh',
-                },
-            },
-        },
-        placement: {
-            start: {
-                positioner: {
-                    justifyContent: 'flex-start',
-                },
-                content: {
-                    _open: {
-                        animationName: {
-                            base: 'slide-from-left-full, fade-in',
-                            _rtl: 'slide-from-right-full, fade-in',
-                        },
-                    },
-                    _closed: {
-                        animationName: {
-                            base: 'slide-to-left-full, fade-out',
-                            _rtl: 'slide-to-right-full, fade-out',
-                        },
-                    },
-                },
-            },
-            end: {
-                positioner: {
-                    justifyContent: 'flex-end',
-                },
-                content: {
-                    _open: {
-                        animationName: {
-                            base: 'slide-from-right-full, fade-in',
-                            _rtl: 'slide-from-left-full, fade-in',
-                        },
-                    },
-                    _closed: {
-                        animationName: {
-                            base: 'slide-to-right-full, fade-out',
-                            _rtl: 'slide-to-right-full, fade-out',
-                        },
-                    },
-                },
-            },
-            top: {
-                positioner: {
-                    alignItems: 'flex-start',
-                },
-                content: {
-                    maxW: '100%',
-                    _open: { animationName: 'slide-from-top-full, fade-in' },
-                    _closed: { animationName: 'slide-to-top-full, fade-out' },
-                },
-            },
-            bottom: {
-                positioner: {
-                    alignItems: 'flex-end',
-                },
-                content: {
-                    maxW: '100%',
-                    _open: { animationName: 'slide-from-bottom-full, fade-in' },
-                    _closed: { animationName: 'slide-to-bottom-full, fade-out' },
-                },
-            },
-        },
-        attached: {
-            true: {
-                positioner: {
-                    padding: 0,
-                },
-                content: {
-                    borderRadius: 'none',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'xs',
-        placement: 'end',
-    },
-});

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

@@ -1,37 +0,0 @@
-export declare const editableSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "textarea" | "control" | "root" | "input" | "area" | "preview" | "editTrigger" | "submitTrigger" | "cancelTrigger", {
-    size: {
-        sm: {
-            root: {
-                textStyle: "sm";
-            };
-            preview: {
-                minH: "8";
-            };
-            input: {
-                minH: "8";
-            };
-        };
-        md: {
-            root: {
-                textStyle: "sm";
-            };
-            preview: {
-                minH: "9";
-            };
-            input: {
-                minH: "9";
-            };
-        };
-        lg: {
-            root: {
-                textStyle: "md";
-            };
-            preview: {
-                minH: "10";
-            };
-            input: {
-                minH: "10";
-            };
-        };
-    };
-}>;

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

@@ -1,89 +0,0 @@
-import { editableAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe, defineStyle } from '@chakra-ui/react/styled-system';
-const sharedStyles = defineStyle({
-    fontSize: 'inherit',
-    fontWeight: 'inherit',
-    textAlign: 'inherit',
-    bg: 'transparent',
-    borderRadius: 'control.md',
-});
-export const editableSlotRecipe = defineSlotRecipe({
-    slots: editableAnatomy.keys(),
-    className: 'chakra-editable',
-    base: {
-        root: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            position: 'relative',
-            gap: '1.5',
-            width: 'full',
-        },
-        preview: {
-            ...sharedStyles,
-            py: '1',
-            px: '1',
-            display: 'inline-flex',
-            alignItems: 'center',
-            transitionProperty: 'common',
-            transitionDuration: 'moderate',
-            cursor: 'text',
-            _hover: {
-                bg: 'bg.muted',
-            },
-            _disabled: {
-                userSelect: 'none',
-            },
-        },
-        input: {
-            ...sharedStyles,
-            outline: '0',
-            py: '1',
-            px: '1',
-            transitionProperty: 'common',
-            transitionDuration: 'moderate',
-            width: 'full',
-            focusVisibleRing: 'inside',
-            focusRingWidth: '1px',
-            _placeholder: { opacity: 0.6 },
-            '--focus-color': 'colors.colorPalette.focusRing',
-            '--error-color': 'colors.border.error',
-            _invalid: {
-                focusRingColor: 'var(--error-color)',
-                borderColor: 'var(--error-color)',
-            },
-        },
-        control: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: '1.5',
-        },
-    },
-    variants: {
-        size: {
-            sm: {
-                root: {
-                    textStyle: 'sm',
-                },
-                preview: { minH: '8' },
-                input: { minH: '8' },
-            },
-            md: {
-                root: {
-                    textStyle: 'sm',
-                },
-                preview: { minH: '9' },
-                input: { minH: '9' },
-            },
-            lg: {
-                root: {
-                    textStyle: 'md',
-                },
-                preview: { minH: '10' },
-                input: { minH: '10' },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-    },
-});

package/dist/components/empty-state/empty-state.recipe.d.ts

@@ -1,83 +0,0 @@
-export declare const emptyStateSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "indicator" | "root" | "title" | "actions", {
-    size: {
-        sm: {
-            root: {
-                px: "4";
-                py: "6";
-            };
-            indicator: {
-                textStyle: "3xl";
-                mb: "2";
-            };
-            title: {
-                textStyle: "md";
-            };
-            description: {
-                textStyle: "xs";
-            };
-            content: {
-                textStyle: "xs";
-            };
-            actions: {
-                mt: "2";
-            };
-        };
-        md: {
-            root: {
-                px: "8";
-                py: "12";
-            };
-            indicator: {
-                textStyle: "4xl";
-                mb: "3";
-            };
-            title: {
-                textStyle: "lg";
-            };
-            description: {
-                textStyle: "sm";
-            };
-            content: {
-                textStyle: "sm";
-            };
-            actions: {
-                mt: "3";
-            };
-        };
-        lg: {
-            root: {
-                px: "12";
-                py: "16";
-            };
-            indicator: {
-                textStyle: "6xl";
-                mb: "4";
-            };
-            title: {
-                textStyle: "xl";
-            };
-            description: {
-                textStyle: "md";
-            };
-            content: {
-                textStyle: "md";
-            };
-            actions: {
-                mt: "4";
-            };
-        };
-    };
-    align: {
-        start: {
-            content: {
-                alignItems: "flex-start";
-            };
-        };
-        center: {
-            content: {
-                alignItems: "center";
-                textAlign: "center";
-            };
-        };
-    };
-}>;

package/dist/components/empty-state/empty-state.recipe.js

@@ -1,137 +0,0 @@
-import { emptyStateAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const emptyStateSlotRecipe = defineSlotRecipe({
-    slots: emptyStateAnatomy.extendWith('actions').keys(),
-    className: 'chakra-empty-state',
-    base: {
-        root: {
-            colorPalette: 'accent',
-            width: 'full',
-            height: 'full',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        content: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '0.25rem',
-        },
-        indicator: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: 'colorPalette.solid',
-            _icon: {
-                boxSize: '1em',
-            },
-        },
-        title: {
-            fontWeight: 'semibold',
-        },
-        description: {
-            textStyle: 'sm',
-            color: 'fg.muted',
-            '&:is(div)': {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '0.5rem',
-            },
-        },
-        actions: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: '2',
-        },
-    },
-    variants: {
-        size: {
-            sm: {
-                root: {
-                    px: '4',
-                    py: '6',
-                },
-                indicator: {
-                    textStyle: '3xl',
-                    mb: '2',
-                },
-                title: {
-                    textStyle: 'md',
-                },
-                description: {
-                    textStyle: 'xs',
-                },
-                content: {
-                    textStyle: 'xs',
-                },
-                actions: {
-                    mt: '2',
-                },
-            },
-            md: {
-                root: {
-                    px: '8',
-                    py: '12',
-                },
-                indicator: {
-                    textStyle: '4xl',
-                    mb: '3',
-                },
-                title: {
-                    textStyle: 'lg',
-                },
-                description: {
-                    textStyle: 'sm',
-                },
-                content: {
-                    textStyle: 'sm',
-                },
-                actions: {
-                    mt: '3',
-                },
-            },
-            lg: {
-                root: {
-                    px: '12',
-                    py: '16',
-                },
-                indicator: {
-                    textStyle: '6xl',
-                    mb: '4',
-                },
-                title: {
-                    textStyle: 'xl',
-                },
-                description: {
-                    textStyle: 'md',
-                },
-                content: {
-                    textStyle: 'md',
-                },
-                actions: {
-                    mt: '4',
-                },
-            },
-        },
-        align: {
-            start: {
-                content: {
-                    alignItems: 'flex-start',
-                },
-            },
-            center: {
-                content: {
-                    alignItems: 'center',
-                    textAlign: 'center',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        align: 'center',
-    },
-});

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

@@ -1,29 +0,0 @@
-export declare const fieldSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "textarea" | "root" | "input" | "errorText" | "helperText" | "select" | "requiredIndicator", {
-    orientation: {
-        vertical: {
-            root: {
-                flexDirection: "column";
-                alignItems: "flex-start";
-            };
-        };
-        horizontal: {
-            root: {
-                display: "grid";
-                gridTemplateColumns: "var(--field-label-width, 8rem) 1fr";
-                alignItems: "center";
-                '&:has(textarea)': {
-                    alignItems: "flex-start";
-                    '& label': {
-                        pt: number;
-                    };
-                };
-            };
-            helperText: {
-                gridColumn: number;
-            };
-            errorText: {
-                gridColumn: number;
-            };
-        };
-    };
-}>;

package/dist/components/field/field.recipe.js

@@ -1,74 +0,0 @@
-import { fieldAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const fieldSlotRecipe = defineSlotRecipe({
-    className: 'chakra-field',
-    slots: fieldAnatomy.keys(),
-    base: {
-        requiredIndicator: {
-            color: 'fg.error',
-            lineHeight: '1',
-        },
-        root: {
-            display: 'flex',
-            width: '100%',
-            position: 'relative',
-            gap: '1.5',
-        },
-        label: {
-            display: 'flex',
-            alignItems: 'center',
-            textAlign: 'start',
-            textStyle: 'sm',
-            fontWeight: 'medium',
-            gap: '1',
-            userSelect: 'none',
-            _disabled: {
-                opacity: '0.5',
-            },
-        },
-        errorText: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            fontWeight: 'medium',
-            gap: '1',
-            color: 'fg.error',
-            textStyle: 'xs',
-        },
-        helperText: {
-            color: 'fg.muted',
-            textStyle: 'xs',
-        },
-    },
-    variants: {
-        orientation: {
-            vertical: {
-                root: {
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
-                },
-            },
-            horizontal: {
-                root: {
-                    display: 'grid',
-                    gridTemplateColumns: 'var(--field-label-width, 8rem) 1fr',
-                    alignItems: 'center',
-                    '&:has(textarea)': {
-                        alignItems: 'flex-start',
-                        '& label': {
-                            pt: 1.5,
-                        },
-                    },
-                },
-                helperText: {
-                    gridColumn: 2,
-                },
-                errorText: {
-                    gridColumn: 2,
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        orientation: 'vertical',
-    },
-});

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

@@ -1,37 +0,0 @@
-export declare const fieldsetSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "errorText" | "helperText" | "legend", {
-    size: {
-        sm: {
-            root: {
-                spaceY: "2";
-            };
-            content: {
-                gap: "1.5";
-            };
-            legend: {
-                textStyle: "sm";
-            };
-        };
-        md: {
-            root: {
-                spaceY: "4";
-            };
-            content: {
-                gap: "4";
-            };
-            legend: {
-                textStyle: "sm";
-            };
-        };
-        lg: {
-            root: {
-                spaceY: "6";
-            };
-            content: {
-                gap: "4";
-            };
-            legend: {
-                textStyle: "md";
-            };
-        };
-    };
-}>;