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

package/dist/components/select/select.recipe.js

@@ -1,285 +0,0 @@
-import { selectAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const selectSlotRecipe = defineSlotRecipe({
-    className: 'chakra-select',
-    slots: selectAnatomy.keys(),
-    base: {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '1.5',
-            width: 'full',
-        },
-        trigger: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: 'full',
-            minH: 'var(--select-trigger-height)',
-            px: 'var(--select-trigger-padding-x)',
-            userSelect: 'none',
-            textAlign: 'start',
-            focusVisibleRing: 'inside',
-            focusRingWidth: 0,
-            _placeholderShown: {
-                color: 'fg.muted',
-            },
-            _disabled: {
-                layerStyle: 'disabled',
-            },
-            _invalid: {
-                borderColor: 'border.error',
-            },
-            _hover: {
-                borderColor: 'border.emphasized',
-                _focusVisible: {
-                    borderColor: 'var(--focus-ring-color)',
-                },
-            },
-        },
-        indicatorGroup: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: '1',
-            pos: 'absolute',
-            right: '0',
-            top: '0',
-            bottom: '0',
-            px: 'var(--select-trigger-padding-x)',
-            pointerEvents: 'none',
-        },
-        indicator: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: { base: 'fg.muted', _disabled: 'fg.subtle', _invalid: 'fg.error' },
-        },
-        content: {
-            layerStyle: 'overlay',
-            boxShadow: 'md',
-            borderWidth: '1px',
-            borderColor: 'border',
-            display: 'flex',
-            flexDirection: 'column',
-            zIndex: 'dropdown',
-            outline: 0,
-            maxH: '96',
-            overflowY: 'auto',
-            _open: {
-                animationStyle: 'slide-fade-in',
-                animationDuration: 'fast',
-            },
-            _closed: {
-                animationStyle: 'slide-fade-out',
-                animationDuration: 'fastest',
-            },
-        },
-        item: {
-            position: 'relative',
-            userSelect: 'none',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '2',
-            cursor: 'option',
-            justifyContent: 'space-between',
-            flex: '1',
-            textAlign: 'start',
-            borderRadius: 'control.md',
-            _highlighted: {
-                bg: 'bg.subtle',
-            },
-            _disabled: {
-                pointerEvents: 'none',
-                opacity: '0.5',
-            },
-            _icon: {
-                width: '4',
-                height: '4',
-            },
-        },
-        control: {
-            pos: 'relative',
-        },
-        itemText: {
-            flex: '1',
-        },
-        itemGroup: {
-            _first: { mt: '0' },
-        },
-        itemGroupLabel: {
-            py: '1',
-            fontWeight: 'medium',
-        },
-        label: {
-            fontWeight: 'medium',
-            userSelect: 'none',
-            textStyle: 'sm',
-            _disabled: {
-                layerStyle: 'disabled',
-            },
-        },
-        valueText: {
-            lineClamp: '1',
-            maxW: '80%',
-        },
-    },
-    variants: {
-        variant: {
-            outline: {
-                trigger: {
-                    bg: 'transparent',
-                    borderWidth: '1px',
-                    borderColor: 'border',
-                    _expanded: {
-                        borderColor: 'border.emphasized',
-                    },
-                },
-            },
-            subtle: {
-                trigger: {
-                    borderWidth: '1px',
-                    borderColor: 'transparent',
-                    bg: 'bg.muted',
-                },
-            },
-        },
-        size: {
-            xs: {
-                root: {
-                    '--select-trigger-height': 'sizes.6',
-                    '--select-trigger-padding-x': 'spacing.2',
-                },
-                content: {
-                    p: '1',
-                    gap: '1',
-                    textStyle: 'xs',
-                },
-                trigger: {
-                    borderRadius: 'sm',
-                    textStyle: 'xs',
-                    gap: '1',
-                },
-                item: {
-                    py: '1',
-                    px: '2',
-                },
-                itemGroupLabel: {
-                    py: '1',
-                    px: '2',
-                },
-                indicator: {
-                    _icon: {
-                        width: '3.5',
-                        height: '3.5',
-                    },
-                },
-            },
-            sm: {
-                root: {
-                    '--select-trigger-height': 'sizes.7',
-                    '--select-trigger-padding-x': 'spacing.2.5',
-                },
-                content: {
-                    p: '1',
-                    textStyle: 'sm',
-                },
-                trigger: {
-                    borderRadius: 'sm',
-                    textStyle: 'sm',
-                    gap: '1',
-                },
-                indicator: {
-                    _icon: {
-                        width: '4',
-                        height: '4',
-                    },
-                },
-                item: {
-                    py: '1',
-                    px: '1.5',
-                },
-                itemGroup: {
-                    mt: '1',
-                },
-                itemGroupLabel: {
-                    py: '1',
-                    px: '1.5',
-                },
-            },
-            md: {
-                root: {
-                    '--select-trigger-height': 'sizes.8',
-                    '--select-trigger-padding-x': 'spacing.3',
-                },
-                content: {
-                    p: '1',
-                    textStyle: 'sm',
-                },
-                itemGroup: {
-                    mt: '1.5',
-                },
-                item: {
-                    py: '1.5',
-                    px: '2',
-                },
-                itemIndicator: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                },
-                itemGroupLabel: {
-                    py: '1.5',
-                    px: '2',
-                },
-                trigger: {
-                    borderRadius: 'md',
-                    textStyle: 'sm',
-                    gap: '2',
-                },
-                indicator: {
-                    _icon: {
-                        width: '4',
-                        height: '4',
-                    },
-                },
-            },
-            lg: {
-                root: {
-                    '--select-trigger-height': 'sizes.10',
-                    '--select-trigger-padding-x': 'spacing.4',
-                },
-                content: {
-                    p: '1.5',
-                    textStyle: 'md',
-                },
-                itemGroup: {
-                    mt: '2',
-                },
-                item: {
-                    py: '2',
-                    px: '3',
-                },
-                itemGroupLabel: {
-                    py: '2',
-                    px: '3',
-                },
-                trigger: {
-                    borderRadius: 'md',
-                    textStyle: 'md',
-                    py: '3',
-                    gap: '2',
-                },
-                indicator: {
-                    _icon: {
-                        width: '5',
-                        height: '5',
-                    },
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'outline',
-    },
-});

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

@@ -1,37 +0,0 @@
-export declare const separatorRecipe: import("@chakra-ui/react").RecipeDefinition<{
-    variant: {
-        solid: {
-            borderStyle: "solid";
-        };
-        dashed: {
-            borderStyle: "dashed";
-        };
-        dotted: {
-            borderStyle: "dotted";
-        };
-    };
-    orientation: {
-        vertical: {
-            height: "100%";
-            borderInlineStartWidth: "var(--separator-thickness)";
-        };
-        horizontal: {
-            width: "100%";
-            borderTopWidth: "var(--separator-thickness)";
-        };
-    };
-    size: {
-        xs: {
-            '--separator-thickness': "0.5px";
-        };
-        sm: {
-            '--separator-thickness': "1px";
-        };
-        md: {
-            '--separator-thickness': "2px";
-        };
-        lg: {
-            '--separator-thickness': "3px";
-        };
-    };
-}>;

package/dist/components/separator/separator.recipe.js

@@ -1,50 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react/styled-system';
-export const separatorRecipe = defineRecipe({
-    className: 'chakra-separator',
-    base: {
-        display: 'block',
-        borderColor: 'border',
-    },
-    variants: {
-        variant: {
-            solid: {
-                borderStyle: 'solid',
-            },
-            dashed: {
-                borderStyle: 'dashed',
-            },
-            dotted: {
-                borderStyle: 'dotted',
-            },
-        },
-        orientation: {
-            vertical: {
-                height: '100%',
-                borderInlineStartWidth: 'var(--separator-thickness)',
-            },
-            horizontal: {
-                width: '100%',
-                borderTopWidth: 'var(--separator-thickness)',
-            },
-        },
-        size: {
-            xs: {
-                '--separator-thickness': '0.5px',
-            },
-            sm: {
-                '--separator-thickness': '1px',
-            },
-            md: {
-                '--separator-thickness': '2px',
-            },
-            lg: {
-                '--separator-thickness': '3px',
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'sm',
-        variant: 'solid',
-        orientation: 'horizontal',
-    },
-});

package/dist/components/sidebar/sidebar-nav-item.recipe.d.ts

@@ -1,67 +0,0 @@
-export declare const sidebarNavItemSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"button" | "item" | "endElement", {
-    variant: {
-        muted: {
-            button: {
-                bg: "transparent";
-                color: "sidebar.accent.fg/85";
-                '--sidebar-item-icon-color': "sidebar.accent.fg/85";
-                _hover: {
-                    bg: "sidebar.accent.bg/90";
-                    color: "sidebar.accent.fg";
-                    '--sidebar-item-icon-color': "sidebar.accent.fg";
-                };
-                _active: {
-                    bg: "sidebar.accent.bg";
-                    color: "sidebar.accent.fg";
-                    '--sidebar-item-icon-color': "sidebar.accent.fg";
-                };
-                _currentPage: {
-                    bg: "sidebar.accent.bg";
-                    color: "sidebar.accent.fg";
-                    '--sidebar-item-icon-color': "sidebar.accent.fg";
-                };
-            };
-        };
-    };
-    size: {
-        sm: {
-            item: {
-                textStyle: "sm";
-            };
-            button: {
-                borderRadius: "control.md";
-                px: number;
-                height: number;
-            };
-            endElement: {
-                pe: "1";
-            };
-        };
-        md: {
-            item: {
-                textStyle: "sm";
-            };
-            button: {
-                borderRadius: "control.md";
-                px: number;
-                height: number;
-            };
-            endElement: {
-                pe: "1";
-            };
-        };
-        lg: {
-            item: {
-                textStyle: "sm";
-            };
-            button: {
-                borderRadius: "control.lg";
-                px: number;
-                height: number;
-            };
-            endElement: {
-                pe: "1";
-            };
-        };
-    };
-}>;

package/dist/components/sidebar/sidebar-nav-item.recipe.js

@@ -1,118 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-export const sidebarNavItemSlotRecipe = defineSlotRecipe({
-    className: 'sui-sidebar-nav-item',
-    slots: ['item', 'button', 'endElement'],
-    base: {
-        item: {
-            position: 'relative',
-            fontSize: 'sm',
-            py: '1px',
-        },
-        button: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 2,
-            isolation: 'isolate',
-            width: '100%',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            cursor: 'button',
-            transitionProperty: 'common',
-            transitionDuration: 'fast',
-            focusVisibleRing: 'inside',
-            focusRingWidth: '1px',
-            _disabled: {
-                layerStyle: 'disabled',
-            },
-            '& > svg': {
-                boxSize: 4,
-                color: 'var(--sidebar-item-icon-color)',
-            },
-            '&:has([data-slot="endElement"])': {
-                pe: 0,
-            },
-        },
-        endElement: {
-            display: 'flex',
-            gap: '1px',
-            ms: 'auto',
-            '& button': {
-                _hover: {
-                    bg: 'transparent',
-                },
-            },
-        },
-    },
-    variants: {
-        variant: {
-            muted: {
-                button: {
-                    bg: 'transparent',
-                    color: 'sidebar.accent.fg/85',
-                    '--sidebar-item-icon-color': 'sidebar.accent.fg/85',
-                    _hover: {
-                        bg: 'sidebar.accent.bg/90',
-                        color: 'sidebar.accent.fg',
-                        '--sidebar-item-icon-color': 'sidebar.accent.fg',
-                    },
-                    _active: {
-                        bg: 'sidebar.accent.bg',
-                        color: 'sidebar.accent.fg',
-                        '--sidebar-item-icon-color': 'sidebar.accent.fg',
-                    },
-                    _currentPage: {
-                        bg: 'sidebar.accent.bg',
-                        color: 'sidebar.accent.fg',
-                        '--sidebar-item-icon-color': 'sidebar.accent.fg',
-                    },
-                },
-            },
-        },
-        size: {
-            sm: {
-                item: {
-                    textStyle: 'sm',
-                },
-                button: {
-                    borderRadius: 'control.md',
-                    px: 2,
-                    height: 7,
-                },
-                endElement: {
-                    pe: '1',
-                },
-            },
-            md: {
-                item: {
-                    textStyle: 'sm',
-                },
-                button: {
-                    borderRadius: 'control.md',
-                    px: 2.5,
-                    height: 8,
-                },
-                endElement: {
-                    pe: '1',
-                },
-            },
-            lg: {
-                item: {
-                    textStyle: 'sm',
-                },
-                button: {
-                    borderRadius: 'control.lg',
-                    px: 3,
-                    height: 10,
-                },
-                endElement: {
-                    pe: '1',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'muted',
-        size: 'md',
-    },
-});

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

@@ -1,108 +0,0 @@
-export declare const sidebarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"inset" | "body" | "backdrop" | "root" | "header" | "footer" | "group" | "trigger" | "track" | "flyoutTrigger" | "groupHeader" | "groupTitle" | "groupEndElement" | "groupContent", {
-    variant: {
-        sidebar: {
-            root: {
-                borderRightWidth: "1px";
-                borderLeftColor: "sidebar.border";
-            };
-            inset: {};
-        };
-        inset: {
-            inset: {
-                borderColor: "sidebar.border";
-                borderWidth: "1px";
-                borderRadius: "panel.md";
-                marginBlock: "var(--inset-gap, {spacing.2})";
-                marginEnd: "var(--inset-gap, {spacing.2})";
-                overflow: "clip";
-            };
-        };
-    };
-    mode: {
-        collapsible: {
-            root: {
-                base: {
-                    position: "fixed";
-                    height: "100dvh";
-                    zIndex: "layer-3";
-                };
-                md: {
-                    position: "relative";
-                    height: "auto";
-                    zIndex: "unset";
-                };
-                width: "var(--sidebar-width, 280px)";
-                maxWidth: ("100vw" | "var(--sidebar-max-width, 320px)")[];
-                minWidth: "var(--sidebar-min-width, 220px)";
-                bg: "sidebar.bg";
-                transitionProperty: "margin-left";
-                _open: {
-                    marginLeft: number;
-                    transitionDuration: "moderate";
-                    transitionTimingFunction: "bounce-in";
-                };
-                _closed: {
-                    marginLeft: "calc(var(--sidebar-width, 280px) * -1)";
-                    transitionDuration: "fast";
-                    transitionTimingFunction: "bounce-out";
-                };
-            };
-        };
-        flyout: {
-            root: {
-                position: "fixed";
-                top: number;
-                left: number;
-                bottom: number;
-                zIndex: "var(--sidebar-z-index)";
-                width: "var(--sidebar-width, 280px)";
-                maxWidth: ("100vw" | "var(--sidebar-max-width, 320px)")[];
-                minWidth: "var(--sidebar-min-width, 220px)";
-                bg: "sidebar.bg";
-                borderColor: "sidebar.border";
-                boxShadow: "none";
-                borderWidth: "1px";
-                borderRadius: "lg";
-                _open: {
-                    transitionDuration: "moderate";
-                    transitionTimingFunction: "ease-out";
-                    boxShadow: "lg";
-                };
-                _closed: {
-                    left: "calc(var(--sidebar-width, 280px) * -1)";
-                    transitionDuration: "fast";
-                    transitionTimingFunction: "ease-in-out";
-                };
-            };
-            flyoutTrigger: {
-                display: "block";
-                position: "absolute";
-                '--sidebar-flyout-trigger-z-index': "zIndex.layer-3";
-                zIndex: "calc(var(--sidebar-flyout-trigger-z-index) - 1)";
-                height: "100%";
-                width: "8px";
-            };
-            track: {
-                top: "8px";
-                bottom: "8px";
-            };
-        };
-        compact: {};
-    };
-    size: {
-        md: {
-            header: {
-                px: number;
-            };
-            body: {
-                px: number;
-            };
-            footer: {
-                px: number;
-            };
-            groupEndElement: {
-                pe: "1";
-            };
-        };
-    };
-}>;