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

package/dist/components/sidebar/sidebar.recipe.js

@@ -1,280 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const sidebarSlotRecipe = defineSlotRecipe({
-    className: 'sui-sidebar',
-    slots: [
-        'root',
-        'backdrop',
-        'header',
-        'body',
-        'footer',
-        'trigger',
-        'flyoutTrigger',
-        'group',
-        'groupHeader',
-        'groupTitle',
-        'groupEndElement',
-        'groupContent',
-        'track',
-        'inset',
-    ],
-    base: {
-        root: {
-            '--sidebar-z-index': 'zIndex.layer-3',
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        backdrop: {
-            layerStyle: 'backdrop',
-            position: 'fixed',
-            inset: 0,
-            '--sidebar-backdrop-z-index': 'zIndex.layer-3',
-            zIndex: 'calc(var(--sidebar-backdrop-z-index) - 2)',
-            _open: {
-                animationName: 'fade-in',
-                animationDuration: 'slow',
-            },
-            _closed: {
-                animationName: 'fade-out',
-                animationDuration: 'moderate',
-            },
-        },
-        trigger: {
-            display: 'inline-flex',
-            appearance: 'none',
-            alignItems: 'center',
-            justifyContent: 'center',
-            userSelect: 'none',
-            whiteSpace: 'nowrap',
-            verticalAlign: 'middle',
-            outline: 'none',
-        },
-        header: {
-            display: 'flex',
-            flexDirection: 'row',
-            py: 2,
-        },
-        body: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-            flex: 1,
-            py: 3,
-            overflowY: 'auto',
-        },
-        footer: {
-            display: 'flex',
-            flexDirection: 'column',
-            py: 2,
-        },
-        group: {
-            position: 'relative',
-        },
-        groupHeader: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 1,
-            height: 6,
-            borderRadius: 'md',
-            fontSize: 'xs',
-            transitionProperty: 'common',
-            transitionDuration: 'fast',
-            // @ts-expect-error
-            _groupCollapsible: {
-                cursor: 'button',
-                userSelect: 'none',
-                _hover: {
-                    bg: 'sidebar.accent.bg/80',
-                },
-            },
-        },
-        groupTitle: {
-            display: 'flex',
-            alignItems: 'center',
-            flex: 1,
-            px: 2,
-            fontWeight: 'medium',
-            color: 'sidebar.fg/70',
-        },
-        groupEndElement: {
-            '& > button': {
-                boxSize: 6,
-                _hover: {
-                    bg: 'transparent',
-                },
-            },
-        },
-        groupContent: {
-            pt: 1,
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        track: {
-            display: 'flex',
-            justifyContent: 'center',
-            position: 'absolute',
-            top: 0,
-            right: '-4px',
-            bottom: 0,
-            width: '7px',
-            cursor: 'button',
-            _after: {
-                content: '""',
-                display: 'block',
-                height: '100%',
-                width: '2px',
-                opacity: 0,
-                transitionProperty: 'opacity',
-                transitionDuration: 'fast',
-                transitionDelay: '0.2s',
-                bg: 'sidebar.accent.fg/60',
-                pointerEvents: 'none',
-            },
-            _hover: {
-                _after: {
-                    opacity: 1,
-                },
-            },
-        },
-        flyoutTrigger: {
-            display: 'none',
-        },
-        inset: {
-            height: '100%',
-            minHeight: '0',
-            display: 'flex',
-            flexDirection: 'column',
-            bg: 'bg.content',
-        },
-    },
-    variants: {
-        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: 0,
-                        transitionDuration: 'moderate',
-                        transitionTimingFunction: 'bounce-in',
-                    },
-                    _closed: {
-                        marginLeft: 'calc(var(--sidebar-width, 280px) * -1)',
-                        transitionDuration: 'fast',
-                        transitionTimingFunction: 'bounce-out',
-                    },
-                },
-            },
-            flyout: {
-                root: {
-                    position: 'fixed',
-                    top: 2,
-                    left: 2,
-                    bottom: 2,
-                    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: 3,
-                },
-                body: {
-                    px: 3,
-                },
-                footer: {
-                    px: 3,
-                },
-                groupEndElement: {
-                    pe: '1',
-                },
-            },
-        },
-    },
-    compoundVariants: [
-        {
-            variant: 'inset',
-            mode: 'collapsible',
-            css: {
-                root: {
-                    py: 'var(--inset-gap, {spacing.2})',
-                    _closed: {
-                        '& [class*="__inset"]': {
-                            ps: 'var(--inset-gap, {spacing.2})',
-                        },
-                    },
-                },
-            },
-        },
-    ],
-    defaultVariants: {
-        variant: 'sidebar',
-        mode: 'collapsible',
-        size: 'md',
-    },
-});

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

@@ -1,41 +0,0 @@
-export declare const skeletonRecipe: import("@chakra-ui/react").RecipeDefinition<{
-    loading: {
-        true: {
-            borderRadius: "panel.md";
-            boxShadow: "none";
-            backgroundClip: "padding-box";
-            cursor: "default";
-            color: "transparent";
-            pointerEvents: "none";
-            userSelect: "none";
-            flexShrink: "0";
-            '&::before, &::after, *': {
-                visibility: "hidden";
-            };
-        };
-        false: {
-            background: "unset";
-            animation: "fade-in var(--fade-duration, 0.1s) ease-out !important";
-        };
-    };
-    variant: {
-        pulse: {
-            background: "bg.emphasized";
-            animation: "pulse";
-            animationDuration: "var(--duration, 1.2s)";
-        };
-        shine: {
-            '--animate-from': "200%";
-            '--animate-to': "-200%";
-            '--start-color': "colors.bg.muted";
-            '--end-color': "colors.bg.emphasized";
-            backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))";
-            backgroundSize: "400% 100%";
-            animation: "bg-position var(--duration, 5s) ease-in-out infinite";
-        };
-        none: {
-            animation: "none";
-            background: "bg.muted";
-        };
-    };
-}>;

package/dist/components/skeleton/skeleton.recipe.js

@@ -1,50 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react/styled-system';
-export const skeletonRecipe = defineRecipe({
-    className: 'chakra-skeleton',
-    base: {},
-    variants: {
-        loading: {
-            true: {
-                borderRadius: 'panel.md',
-                boxShadow: 'none',
-                backgroundClip: 'padding-box',
-                cursor: 'default',
-                color: 'transparent',
-                pointerEvents: 'none',
-                userSelect: 'none',
-                flexShrink: '0',
-                '&::before, &::after, *': {
-                    visibility: 'hidden',
-                },
-            },
-            false: {
-                background: 'unset',
-                animation: 'fade-in var(--fade-duration, 0.1s) ease-out !important',
-            },
-        },
-        variant: {
-            pulse: {
-                background: 'bg.emphasized',
-                animation: 'pulse',
-                animationDuration: 'var(--duration, 1.2s)',
-            },
-            shine: {
-                '--animate-from': '200%',
-                '--animate-to': '-200%',
-                '--start-color': 'colors.bg.muted',
-                '--end-color': 'colors.bg.emphasized',
-                backgroundImage: 'linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))',
-                backgroundSize: '400% 100%',
-                animation: 'bg-position var(--duration, 5s) ease-in-out infinite',
-            },
-            none: {
-                animation: 'none',
-                background: 'bg.muted',
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'pulse',
-        loading: true,
-    },
-});

package/dist/components/skip-nav-link/skip-nav-link.recipe.d.ts

@@ -1 +0,0 @@
-export declare const skipNavLinkRecipe: import("@chakra-ui/react").RecipeDefinition<import("@chakra-ui/react").RecipeVariantRecord>;

package/dist/components/skip-nav-link/skip-nav-link.recipe.js

@@ -1,31 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react/styled-system';
-export const skipNavLinkRecipe = defineRecipe({
-    className: 'chakra-skip-nav',
-    base: {
-        display: 'inline-flex',
-        bg: 'bg.panel',
-        padding: '2.5',
-        borderRadius: 'control.md',
-        fontWeight: 'semibold',
-        focusVisibleRing: 'outside',
-        textStyle: 'sm',
-        // visually hidden
-        userSelect: 'none',
-        border: '0',
-        height: '1px',
-        width: '1px',
-        margin: '-1px',
-        outline: '0',
-        overflow: 'hidden',
-        position: 'absolute',
-        clip: 'rect(0 0 0 0)',
-        _focusVisible: {
-            clip: 'auto',
-            width: 'auto',
-            height: 'auto',
-            position: 'fixed',
-            top: '6',
-            insetStart: '6',
-        },
-    },
-});

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

@@ -1,101 +0,0 @@
-export declare const sliderSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"marker" | "label" | "control" | "root" | "valueText" | "track" | "range" | "thumb" | "markerGroup" | "draggingIndicator" | "markerIndicator", {
-    size: {
-        sm: {
-            root: {
-                '--slider-thumb-size': "sizes.4";
-                '--slider-track-size': "sizes.1.5";
-                '--slider-marker-top': "6px";
-                '--slider-marker-size': "sizes.1";
-                '--slider-marker-inset': "3px";
-            };
-        };
-        md: {
-            root: {
-                '--slider-thumb-size': "sizes.5";
-                '--slider-track-size': "sizes.2";
-                '--slider-marker-top': "8px";
-                '--slider-marker-size': "sizes.1";
-                '--slider-marker-inset': "4px";
-            };
-        };
-        lg: {
-            root: {
-                '--slider-thumb-size': "sizes.6";
-                '--slider-track-size': "sizes.2.5";
-                '--slider-marker-top': "9px";
-                '--slider-marker-size': "sizes.1.5";
-                '--slider-marker-inset': "5px";
-            };
-        };
-    };
-    variant: {
-        outline: {
-            track: {
-                shadow: "inset";
-                bg: "bg.emphasized/72";
-            };
-            range: {
-                bg: "colorPalette.solid";
-            };
-            thumb: {
-                borderWidth: "2px";
-                borderColor: "colorPalette.solid";
-                bg: "bg";
-                _disabled: {
-                    bg: "border.emphasized";
-                    borderColor: "border.emphasized";
-                };
-            };
-        };
-        solid: {
-            track: {
-                bg: "colorPalette.subtle";
-                _disabled: {
-                    bg: "bg.muted";
-                };
-            };
-            range: {
-                bg: "colorPalette.solid";
-            };
-            thumb: {
-                bg: "colorPalette.solid";
-                _disabled: {
-                    bg: "border.emphasized";
-                };
-            };
-        };
-    };
-    orientation: {
-        vertical: {
-            root: {
-                display: "inline-flex";
-            };
-            control: {
-                flexDirection: "column";
-                height: "100%";
-                minWidth: "var(--slider-thumb-size)";
-            };
-            track: {
-                width: "var(--slider-track-size)";
-            };
-            thumb: {
-                left: "50%";
-                translate: "-50% 0";
-            };
-        };
-        horizontal: {
-            control: {
-                flexDirection: "row";
-                width: "100%";
-                minHeight: "var(--slider-thumb-size)";
-            };
-            track: {
-                height: "var(--slider-track-size)";
-            };
-            thumb: {
-                top: "50%";
-                translate: "0 -50%";
-            };
-        };
-    };
-}>;

package/dist/components/slider/slider.recipe.js

@@ -1,175 +0,0 @@
-import { sliderAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const sliderSlotRecipe = defineSlotRecipe({
-    className: 'chakra-slider',
-    slots: sliderAnatomy.keys(),
-    base: {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '1',
-            fontSize: 'sm',
-            position: 'relative',
-            isolation: 'isolate',
-            touchAction: 'none',
-        },
-        control: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            position: 'relative',
-        },
-        track: {
-            overflow: 'hidden',
-            borderRadius: 'full',
-            flex: '1',
-        },
-        range: {
-            width: 'inherit',
-            height: 'inherit',
-            _disabled: { bg: 'border.emphasized!' },
-        },
-        markerGroup: {
-            position: 'absolute!',
-            top: 'var(--slider-marker-top)',
-            insetInline: 'var(--slider-marker-inset)',
-            zIndex: '1',
-        },
-        marker: {
-            '--marker-bg': { base: 'white', _underValue: 'colors.bg' },
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '1.5',
-            color: 'fg.muted',
-            fontSize: 'xs',
-        },
-        markerIndicator: {
-            width: 'var(--slider-marker-size)',
-            height: 'var(--slider-marker-size)',
-            borderRadius: 'full',
-            bg: 'var(--marker-bg)',
-        },
-        thumb: {
-            width: 'var(--slider-thumb-size)',
-            height: 'var(--slider-thumb-size)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            outline: 0,
-            zIndex: '2',
-            borderRadius: 'full',
-            _focusVisible: {
-                ring: '2px',
-                ringColor: 'colorPalette.focusRing',
-                ringOffset: '2px',
-                ringOffsetColor: 'bg',
-            },
-        },
-    },
-    variants: {
-        size: {
-            sm: {
-                root: {
-                    '--slider-thumb-size': 'sizes.4',
-                    '--slider-track-size': 'sizes.1.5',
-                    '--slider-marker-top': '6px',
-                    '--slider-marker-size': 'sizes.1',
-                    '--slider-marker-inset': '3px',
-                },
-            },
-            md: {
-                root: {
-                    '--slider-thumb-size': 'sizes.5',
-                    '--slider-track-size': 'sizes.2',
-                    '--slider-marker-top': '8px',
-                    '--slider-marker-size': 'sizes.1',
-                    '--slider-marker-inset': '4px',
-                },
-            },
-            lg: {
-                root: {
-                    '--slider-thumb-size': 'sizes.6',
-                    '--slider-track-size': 'sizes.2.5',
-                    '--slider-marker-top': '9px',
-                    '--slider-marker-size': 'sizes.1.5',
-                    '--slider-marker-inset': '5px',
-                },
-            },
-        },
-        variant: {
-            outline: {
-                track: {
-                    shadow: 'inset',
-                    bg: 'bg.emphasized/72',
-                },
-                range: {
-                    bg: 'colorPalette.solid',
-                },
-                thumb: {
-                    borderWidth: '2px',
-                    borderColor: 'colorPalette.solid',
-                    bg: 'bg',
-                    _disabled: {
-                        bg: 'border.emphasized',
-                        borderColor: 'border.emphasized',
-                    },
-                },
-            },
-            solid: {
-                track: {
-                    bg: 'colorPalette.subtle',
-                    _disabled: {
-                        bg: 'bg.muted',
-                    },
-                },
-                range: {
-                    bg: 'colorPalette.solid',
-                },
-                thumb: {
-                    bg: 'colorPalette.solid',
-                    _disabled: {
-                        bg: 'border.emphasized',
-                    },
-                },
-            },
-        },
-        orientation: {
-            vertical: {
-                root: {
-                    display: 'inline-flex',
-                },
-                control: {
-                    flexDirection: 'column',
-                    height: '100%',
-                    minWidth: 'var(--slider-thumb-size)',
-                },
-                track: {
-                    width: 'var(--slider-track-size)',
-                },
-                thumb: {
-                    left: '50%',
-                    translate: '-50% 0',
-                },
-            },
-            horizontal: {
-                control: {
-                    flexDirection: 'row',
-                    width: '100%',
-                    minHeight: 'var(--slider-thumb-size)',
-                },
-                track: {
-                    height: 'var(--slider-track-size)',
-                },
-                thumb: {
-                    top: '50%',
-                    translate: '0 -50%',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'outline',
-        orientation: 'horizontal',
-    },
-});