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

package/dist/components/app-shell/app-shell.recipe.js

@@ -1,41 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const appShellSlotRecipe = defineSlotRecipe({
-    className: 'sui-app-shell',
-    slots: ['root', 'content', 'main'],
-    base: {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100dvh',
-        },
-        content: {
-            display: 'flex',
-            flex: 1,
-            minWidth: 0,
-            minHeight: 0,
-        },
-        main: {
-            display: 'flex',
-            flex: 1,
-            flexDirection: 'column',
-            minWidth: 0,
-        },
-    },
-    variants: {
-        fullscreen: {
-            true: {
-                root: {
-                    position: 'fixed',
-                    inset: 0,
-                },
-            },
-        },
-        variant: {
-            plain: {},
-        },
-    },
-    defaultVariants: {
-        fullscreen: false,
-        variant: 'plain',
-    },
-});

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

@@ -1,88 +0,0 @@
-export declare const avatarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "image" | "fallback", {
-    size: {
-        full: {
-            root: {
-                '--avatar-size': "100%";
-                '--avatar-font-size': "calc(var(--tag-avatar-size) / 2)";
-            };
-        };
-        '2xs': {
-            root: {
-                '--avatar-size': "sizes.4";
-            };
-        };
-        xs: {
-            root: {
-                '--avatar-size': "sizes.5";
-            };
-        };
-        sm: {
-            root: {
-                '--avatar-size': "sizes.6";
-            };
-        };
-        md: {
-            root: {
-                '--avatar-size': "sizes.9";
-            };
-        };
-        lg: {
-            root: {
-                '--avatar-size': "sizes.12";
-            };
-        };
-        xl: {
-            root: {
-                '--avatar-size': "sizes.16";
-            };
-        };
-        '2xl': {
-            root: {
-                '--avatar-size': "sizes.20";
-            };
-        };
-    };
-    variant: {
-        solid: {
-            root: {
-                bg: "colorPalette.solid";
-                color: "colorPalette.contrast";
-            };
-        };
-        subtle: {
-            root: {
-                bg: "colorPalette.muted";
-                color: "colorPalette.fg";
-            };
-        };
-        outline: {
-            root: {
-                color: "colorPalette.fg";
-                borderWidth: "1px";
-                borderColor: "colorPalette.muted";
-            };
-        };
-    };
-    shape: {
-        square: {};
-        rounded: {
-            root: {
-                '--avatar-radius': "radii.indicator.md";
-            };
-        };
-        full: {
-            root: {
-                '--avatar-radius': "radii.full";
-            };
-        };
-    };
-    borderless: {
-        true: {
-            root: {
-                '&[data-group-item]': {
-                    borderWidth: "0px";
-                };
-            };
-        };
-    };
-}>;

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

@@ -1,129 +0,0 @@
-import { avatarAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const avatarSlotRecipe = defineSlotRecipe({
-    slots: avatarAnatomy.keys(),
-    className: 'chakra-avatar',
-    base: {
-        root: {
-            '--avatar-font-size': 'calc(var(--avatar-size) / 2)',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontWeight: 'medium',
-            position: 'relative',
-            verticalAlign: 'top',
-            flexShrink: '0',
-            userSelect: 'none',
-            width: 'var(--avatar-size)',
-            height: 'var(--avatar-size)',
-            fontSize: 'var(--avatar-font-size)',
-            borderRadius: 'var(--avatar-radius)',
-            '&[data-group-item]': {
-                borderWidth: '2px',
-                borderColor: 'bg',
-            },
-        },
-        image: {
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            borderRadius: 'var(--avatar-radius)',
-        },
-        fallback: {
-            lineHeight: '1',
-            textTransform: 'uppercase',
-            fontWeight: 'medium',
-            fontSize: 'var(--avatar-font-size)',
-            borderRadius: 'var(--avatar-radius)',
-        },
-    },
-    variants: {
-        size: {
-            full: {
-                root: {
-                    '--avatar-size': '100%',
-                    '--avatar-font-size': 'calc(var(--tag-avatar-size) / 2)',
-                },
-            },
-            '2xs': {
-                root: {
-                    '--avatar-size': 'sizes.4',
-                },
-            },
-            xs: {
-                root: {
-                    '--avatar-size': 'sizes.5',
-                },
-            },
-            sm: {
-                root: {
-                    '--avatar-size': 'sizes.6',
-                },
-            },
-            md: {
-                root: {
-                    '--avatar-size': 'sizes.9',
-                },
-            },
-            lg: {
-                root: {
-                    '--avatar-size': 'sizes.12',
-                },
-            },
-            xl: {
-                root: {
-                    '--avatar-size': 'sizes.16',
-                },
-            },
-            '2xl': {
-                root: {
-                    '--avatar-size': 'sizes.20',
-                },
-            },
-        },
-        variant: {
-            solid: {
-                root: {
-                    bg: 'colorPalette.solid',
-                    color: 'colorPalette.contrast',
-                },
-            },
-            subtle: {
-                root: {
-                    bg: 'colorPalette.muted',
-                    color: 'colorPalette.fg',
-                },
-            },
-            outline: {
-                root: {
-                    color: 'colorPalette.fg',
-                    borderWidth: '1px',
-                    borderColor: 'colorPalette.muted',
-                },
-            },
-        },
-        shape: {
-            square: {},
-            rounded: {
-                root: { '--avatar-radius': 'radii.indicator.md' },
-            },
-            full: {
-                root: { '--avatar-radius': 'radii.full' },
-            },
-        },
-        borderless: {
-            true: {
-                root: {
-                    '&[data-group-item]': {
-                        borderWidth: '0px',
-                    },
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        shape: 'full',
-        variant: 'solid',
-    },
-});

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

@@ -1,48 +0,0 @@
-export declare const badgeRecipe: import("@chakra-ui/react").RecipeDefinition<{
-    variant: {
-        solid: {
-            bg: "colorPalette.solid";
-            color: "colorPalette.contrast";
-        };
-        subtle: {
-            bg: "colorPalette.subtle";
-            color: "colorPalette.fg";
-        };
-        outline: {
-            color: "colorPalette.fg";
-            shadow: "inset 0 0 0px 1px var(--shadow-color)";
-            shadowColor: "colorPalette.subtle";
-        };
-        surface: {
-            bg: "colorPalette.muted/20";
-            color: "colorPalette.fg";
-            shadow: "inset 0 0 0px 1px var(--shadow-color)";
-            shadowColor: "colorPalette.subtle";
-        };
-        plain: {
-            color: "colorPalette.fg";
-        };
-    };
-    size: {
-        xs: {
-            textStyle: "2xs";
-            px: "1";
-            minH: "4";
-        };
-        sm: {
-            textStyle: "xs";
-            px: "1.5";
-            minH: "5";
-        };
-        md: {
-            textStyle: "sm";
-            px: "2";
-            minH: "6";
-        };
-        lg: {
-            textStyle: "sm";
-            px: "2.5";
-            minH: "7";
-        };
-    };
-}>;

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

@@ -1,66 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react/styled-system';
-export const badgeRecipe = defineRecipe({
-    className: 'chakra-badge',
-    base: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        borderRadius: 'full',
-        gap: '1',
-        fontWeight: 'medium',
-        fontVariantNumeric: 'tabular-nums',
-        whiteSpace: 'nowrap',
-        userSelect: 'none',
-    },
-    variants: {
-        variant: {
-            solid: {
-                bg: 'colorPalette.solid',
-                color: 'colorPalette.contrast',
-            },
-            subtle: {
-                bg: 'colorPalette.subtle',
-                color: 'colorPalette.fg',
-            },
-            outline: {
-                color: 'colorPalette.fg',
-                shadow: 'inset 0 0 0px 1px var(--shadow-color)',
-                shadowColor: 'colorPalette.subtle',
-            },
-            surface: {
-                bg: 'colorPalette.muted/20',
-                color: 'colorPalette.fg',
-                shadow: 'inset 0 0 0px 1px var(--shadow-color)',
-                shadowColor: 'colorPalette.subtle',
-            },
-            plain: {
-                color: 'colorPalette.fg',
-            },
-        },
-        size: {
-            xs: {
-                textStyle: '2xs',
-                px: '1',
-                minH: '4',
-            },
-            sm: {
-                textStyle: 'xs',
-                px: '1.5',
-                minH: '5',
-            },
-            md: {
-                textStyle: 'sm',
-                px: '2',
-                minH: '6',
-            },
-            lg: {
-                textStyle: 'sm',
-                px: '2.5',
-                minH: '7',
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'subtle',
-        size: 'sm',
-    },
-});

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

@@ -1,52 +0,0 @@
-export declare const blockquoteSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "icon" | "caption", {
-    justify: {
-        start: {
-            root: {
-                alignItems: "flex-start";
-                textAlign: "start";
-            };
-        };
-        center: {
-            root: {
-                alignItems: "center";
-                textAlign: "center";
-            };
-        };
-        end: {
-            root: {
-                alignItems: "flex-end";
-                textAlign: "end";
-            };
-        };
-    };
-    variant: {
-        subtle: {
-            root: {
-                paddingX: "5";
-                borderStartWidth: "4px";
-                borderStartColor: "colorPalette.muted";
-            };
-            icon: {
-                color: "colorPalette.fg";
-            };
-        };
-        solid: {
-            root: {
-                paddingX: "5";
-                borderStartWidth: "4px";
-                borderStartColor: "colorPalette.solid";
-            };
-            icon: {
-                color: "colorPalette.solid";
-            };
-        };
-        plain: {
-            root: {
-                paddingX: "5";
-            };
-            icon: {
-                color: "colorPalette.solid";
-            };
-        };
-    };
-}>;

package/dist/components/blockquote/blockquote.recipe.js

@@ -1,77 +0,0 @@
-import { blockquoteAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const blockquoteSlotRecipe = defineSlotRecipe({
-    className: 'chakra-blockquote',
-    slots: blockquoteAnatomy.keys(),
-    base: {
-        root: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '2',
-        },
-        caption: {
-            textStyle: 'sm',
-            color: 'fg.muted',
-        },
-        icon: {
-            boxSize: '5',
-        },
-    },
-    variants: {
-        justify: {
-            start: {
-                root: {
-                    alignItems: 'flex-start',
-                    textAlign: 'start',
-                },
-            },
-            center: {
-                root: {
-                    alignItems: 'center',
-                    textAlign: 'center',
-                },
-            },
-            end: {
-                root: {
-                    alignItems: 'flex-end',
-                    textAlign: 'end',
-                },
-            },
-        },
-        variant: {
-            subtle: {
-                root: {
-                    paddingX: '5',
-                    borderStartWidth: '4px',
-                    borderStartColor: 'colorPalette.muted',
-                },
-                icon: {
-                    color: 'colorPalette.fg',
-                },
-            },
-            solid: {
-                root: {
-                    paddingX: '5',
-                    borderStartWidth: '4px',
-                    borderStartColor: 'colorPalette.solid',
-                },
-                icon: {
-                    color: 'colorPalette.solid',
-                },
-            },
-            plain: {
-                root: {
-                    paddingX: '5',
-                },
-                icon: {
-                    color: 'colorPalette.solid',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'subtle',
-        justify: 'start',
-    },
-});

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

@@ -1,46 +0,0 @@
-export declare const breadcrumbSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"link" | "root" | "item" | "separator" | "currentLink" | "list" | "ellipsis", {
-    variant: {
-        underline: {
-            link: {
-                color: "colorPalette.fg";
-                textDecoration: "underline";
-                textUnderlineOffset: "0.2em";
-                textDecorationColor: "colorPalette.muted";
-            };
-            currentLink: {
-                color: "colorPalette.fg";
-            };
-        };
-        plain: {
-            link: {
-                color: "fg.muted";
-                _hover: {
-                    color: "fg";
-                };
-            };
-            currentLink: {
-                color: "fg";
-            };
-        };
-    };
-    size: {
-        sm: {
-            list: {
-                gap: "1";
-                textStyle: "xs";
-            };
-        };
-        md: {
-            list: {
-                gap: "1.5";
-                textStyle: "sm";
-            };
-        };
-        lg: {
-            list: {
-                gap: "2";
-                textStyle: "md";
-            };
-        };
-    };
-}>;

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

@@ -1,90 +0,0 @@
-import { breadcrumbAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const breadcrumbSlotRecipe = defineSlotRecipe({
-    className: 'chakra-breadcrumb',
-    slots: breadcrumbAnatomy.keys(),
-    base: {
-        list: {
-            display: 'flex',
-            alignItems: 'center',
-            wordBreak: 'break-word',
-            color: 'fg.muted',
-        },
-        link: {
-            outline: '0',
-            textDecoration: 'none',
-            borderRadius: 'control.sm',
-            focusRing: 'outside',
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: '2',
-        },
-        item: {
-            display: 'inline-flex',
-            alignItems: 'center',
-        },
-        separator: {
-            color: 'fg.muted',
-            opacity: '0.8',
-            _icon: {
-                boxSize: '1em',
-            },
-        },
-        ellipsis: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            _icon: {
-                boxSize: '1em',
-            },
-        },
-    },
-    variants: {
-        variant: {
-            underline: {
-                link: {
-                    color: 'colorPalette.fg',
-                    textDecoration: 'underline',
-                    textUnderlineOffset: '0.2em',
-                    textDecorationColor: 'colorPalette.muted',
-                },
-                currentLink: {
-                    color: 'colorPalette.fg',
-                },
-            },
-            plain: {
-                link: {
-                    color: 'fg.muted',
-                    _hover: { color: 'fg' },
-                },
-                currentLink: {
-                    color: 'fg',
-                },
-            },
-        },
-        size: {
-            sm: {
-                list: {
-                    gap: '1',
-                    textStyle: 'xs',
-                },
-            },
-            md: {
-                list: {
-                    gap: '1.5',
-                    textStyle: 'sm',
-                },
-            },
-            lg: {
-                list: {
-                    gap: '2',
-                    textStyle: 'md',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'plain',
-        size: 'md',
-    },
-});