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

package/dist/components/loading-overlay/loading-overlay.recipe.js

@@ -1,51 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-export const loadingOverlaySlotRecipe = defineSlotRecipe({
-    className: 'sui-loading-overlay',
-    slots: ['root', 'text'],
-    base: {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            p: 4,
-            transitionProperty: 'opacity',
-            transitionDuration: 'slower',
-            _open: {
-                opacity: 1,
-            },
-            _closed: {
-                opacity: 0,
-            },
-        },
-    },
-    variants: {
-        variant: {
-            fill: {
-                root: {
-                    flex: 1,
-                    height: '100%',
-                    bg: 'currentBg',
-                },
-            },
-            fullscreen: {
-                root: {
-                    position: 'fixed',
-                    inset: 0,
-                    zIndex: 'modal',
-                    bg: 'bg',
-                },
-            },
-            overlay: {
-                root: {
-                    position: 'absolute',
-                    inset: 0,
-                    bg: 'currentBg/50',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'fill',
-    },
-});

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

@@ -1,16 +0,0 @@
-export declare const markRecipe: import("@chakra-ui/react").RecipeDefinition<{
-    variant: {
-        subtle: {
-            bg: "colorPalette.subtle";
-            color: "inherit";
-        };
-        solid: {
-            bg: "colorPalette.solid";
-            color: "colorPalette.contrast";
-        };
-        text: {
-            fontWeight: "medium";
-        };
-        plain: {};
-    };
-}>;

package/dist/components/mark/mark.recipe.js

@@ -1,25 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react/styled-system';
-export const markRecipe = defineRecipe({
-    className: 'chakra-mark',
-    base: {
-        bg: 'transparent',
-        color: 'inherit',
-        whiteSpace: 'nowrap',
-    },
-    variants: {
-        variant: {
-            subtle: {
-                bg: 'colorPalette.subtle',
-                color: 'inherit',
-            },
-            solid: {
-                bg: 'colorPalette.solid',
-                color: 'colorPalette.contrast',
-            },
-            text: {
-                fontWeight: 'medium',
-            },
-            plain: {},
-        },
-    },
-});

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

@@ -1,58 +0,0 @@
-export declare const menuSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "item" | "itemIndicator" | "positioner" | "separator" | "trigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "arrow" | "arrowTip" | "contextTrigger" | "triggerItem" | "itemCommand", {
-    variant: {
-        subtle: {
-            item: {
-                _highlighted: {
-                    bg: "bg.emphasized";
-                };
-            };
-        };
-        solid: {
-            item: {
-                _highlighted: {
-                    bg: "colorPalette.solid";
-                    color: "colorPalette.contrast";
-                };
-            };
-        };
-    };
-    size: {
-        sm: {
-            content: {
-                minW: "8rem";
-                padding: "1";
-                borderRadius: "panel.md";
-            };
-            item: {
-                gap: "1";
-                textStyle: "xs";
-                minH: "6";
-                px: "1.5";
-                ps: "var(--menu-item-inset, {sizes.1.5})";
-            };
-            itemGroupLabel: {
-                textStyle: "xs";
-                minH: "6";
-                px: "1.5";
-            };
-        };
-        md: {
-            content: {
-                minW: "8rem";
-                padding: "1";
-            };
-            item: {
-                gap: "2";
-                textStyle: "sm";
-                minH: "7";
-                px: "2";
-                ps: "var(--menu-item-inset, {sizes.2})";
-            };
-            itemGroupLabel: {
-                textStyle: "sm";
-                minH: "7";
-                px: "2";
-            };
-        };
-    };
-}>;

package/dist/components/menu/menu.recipe.js

@@ -1,133 +0,0 @@
-import { menuAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const menuSlotRecipe = defineSlotRecipe({
-    className: 'chakra-menu',
-    slots: menuAnatomy.keys(),
-    base: {
-        content: {
-            layerStyle: 'overlay',
-            outline: 0,
-            color: 'fg',
-            maxHeight: 'var(--available-height)',
-            '--menu-z-index': 'zIndex.layer-3',
-            zIndex: 'calc(var(--menu-z-index) + var(--layer-index, 0))',
-            overflowY: 'auto',
-            _open: {
-                animationStyle: 'slide-fade-in',
-                animationDuration: 'fastest',
-            },
-            _closed: {
-                animationStyle: 'slide-fade-out',
-                animationDuration: 'fastest',
-            },
-            scrollbar: 'thin',
-        },
-        item: {
-            textDecoration: 'none',
-            color: 'fg',
-            userSelect: 'none',
-            borderRadius: 'control.md',
-            width: '100%',
-            display: 'flex',
-            cursor: 'menuitem',
-            alignItems: 'center',
-            textAlign: 'start',
-            position: 'relative',
-            flex: '0 0 auto',
-            outline: 0,
-            _disabled: {
-                layerStyle: 'disabled',
-            },
-        },
-        itemText: {
-            flex: '1',
-        },
-        itemGroupLabel: {
-            display: 'flex',
-            alignItems: 'center',
-            textStyle: 'sm',
-            color: 'fg.subtle',
-        },
-        indicator: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: '0',
-        },
-        itemCommand: {
-            opacity: '0.6',
-            textStyle: 'xs',
-            ms: 'auto',
-            ps: '4',
-            letterSpacing: 'widest',
-        },
-        separator: {
-            height: '1px',
-            bg: 'bg.muted',
-            my: '1',
-            mx: '-1',
-        },
-    },
-    variants: {
-        variant: {
-            subtle: {
-                item: {
-                    _highlighted: {
-                        bg: 'bg.emphasized',
-                    },
-                },
-            },
-            solid: {
-                item: {
-                    _highlighted: {
-                        bg: 'colorPalette.solid',
-                        color: 'colorPalette.contrast',
-                    },
-                },
-            },
-        },
-        size: {
-            sm: {
-                content: {
-                    minW: '8rem',
-                    padding: '1',
-                    borderRadius: 'panel.md',
-                },
-                item: {
-                    gap: '1',
-                    textStyle: 'xs',
-                    minH: '6',
-                    px: '1.5',
-                    ps: 'var(--menu-item-inset, {sizes.1.5})',
-                },
-                itemGroupLabel: {
-                    textStyle: 'xs',
-                    minH: '6',
-                    px: '1.5',
-                },
-            },
-            md: {
-                content: {
-                    minW: '8rem',
-                    padding: '1',
-                },
-                item: {
-                    gap: '2',
-                    textStyle: 'sm',
-                    minH: '7',
-                    px: '2',
-                    ps: 'var(--menu-item-inset, {sizes.2})',
-                },
-                itemGroupLabel: {
-                    textStyle: 'sm',
-                    minH: '7',
-                    px: '2',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'solid',
-    },
-});

package/dist/components/native-select/native-select.recipe.d.ts

@@ -1,90 +0,0 @@
-export declare const nativeSelectSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "root" | "field", {
-    variant: {
-        outline: {
-            field: {
-                bg: "transparent";
-                borderWidth: "1px";
-                borderColor: "border";
-                _expanded: {
-                    borderColor: "border.emphasized";
-                };
-            } | undefined;
-        };
-        subtle: {
-            field: {
-                borderWidth: "1px";
-                borderColor: "transparent";
-                bg: "bg.muted";
-            } | undefined;
-        };
-        plain: {
-            field: {
-                bg: "transparent";
-                color: "fg";
-                focusRingWidth: "2px";
-            };
-        };
-    };
-    size: {
-        xs: {
-            field: {
-                textStyle: "xs";
-                ps: "2";
-                pe: "6";
-                height: "6";
-            };
-            indicator: {
-                textStyle: "sm";
-                insetEnd: "1.5";
-            };
-        };
-        sm: {
-            field: {
-                textStyle: "sm";
-                ps: "2.5";
-                pe: "8";
-                height: "8";
-            };
-            indicator: {
-                textStyle: "md";
-                insetEnd: "2";
-            };
-        };
-        md: {
-            field: {
-                textStyle: "sm";
-                ps: "3";
-                pe: "8";
-                height: "10";
-            };
-            indicator: {
-                textStyle: "lg";
-                insetEnd: "2";
-            };
-        };
-        lg: {
-            field: {
-                textStyle: "md";
-                ps: "4";
-                pe: "8";
-                height: "11";
-            };
-            indicator: {
-                textStyle: "xl";
-                insetEnd: "3";
-            };
-        };
-        xl: {
-            field: {
-                textStyle: "md";
-                ps: "4.5";
-                pe: "10";
-                height: "12";
-            };
-            indicator: {
-                textStyle: "xl";
-                insetEnd: "3";
-            };
-        };
-    };
-}>;

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

@@ -1,134 +0,0 @@
-import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-import { selectSlotRecipe } from "../select/select.recipe.js";
-export const nativeSelectSlotRecipe = defineSlotRecipe({
-    className: 'chakra-native-select',
-    slots: nativeSelectAnatomy.keys(),
-    base: {
-        root: {
-            height: 'fit-content',
-            display: 'flex',
-            width: '100%',
-            position: 'relative',
-        },
-        field: {
-            width: '100%',
-            minWidth: '0',
-            outline: '0',
-            appearance: 'none',
-            borderRadius: 'control.md',
-            _disabled: {
-                layerStyle: 'disabled',
-            },
-            _invalid: {
-                borderColor: 'border.error',
-            },
-            focusVisibleRing: 'inside',
-            lineHeight: 'normal',
-            '& > option, & > optgroup': {
-                bg: 'inherit',
-            },
-        },
-        indicator: {
-            position: 'absolute',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            pointerEvents: 'none',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            height: '100%',
-            color: 'fg.muted',
-            _disabled: {
-                opacity: '0.5',
-            },
-            _invalid: {
-                color: 'fg.error',
-            },
-            _icon: {
-                width: '1em',
-                height: '1em',
-            },
-        },
-    },
-    variants: {
-        variant: {
-            outline: {
-                field: selectSlotRecipe.variants?.variant.outline.trigger,
-            },
-            subtle: {
-                field: selectSlotRecipe.variants?.variant.subtle.trigger,
-            },
-            plain: {
-                field: {
-                    bg: 'transparent',
-                    color: 'fg',
-                    focusRingWidth: '2px',
-                },
-            },
-        },
-        size: {
-            xs: {
-                field: {
-                    textStyle: 'xs',
-                    ps: '2',
-                    pe: '6',
-                    height: '6',
-                },
-                indicator: {
-                    textStyle: 'sm',
-                    insetEnd: '1.5',
-                },
-            },
-            sm: {
-                field: {
-                    textStyle: 'sm',
-                    ps: '2.5',
-                    pe: '8',
-                    height: '8',
-                },
-                indicator: {
-                    textStyle: 'md',
-                    insetEnd: '2',
-                },
-            },
-            md: {
-                field: {
-                    textStyle: 'sm',
-                    ps: '3',
-                    pe: '8',
-                    height: '10',
-                },
-                indicator: {
-                    textStyle: 'lg',
-                    insetEnd: '2',
-                },
-            },
-            lg: {
-                field: {
-                    textStyle: 'md',
-                    ps: '4',
-                    pe: '8',
-                    height: '11',
-                },
-                indicator: {
-                    textStyle: 'xl',
-                    insetEnd: '3',
-                },
-            },
-            xl: {
-                field: {
-                    textStyle: 'md',
-                    ps: '4.5',
-                    pe: '10',
-                    height: '12',
-                },
-                indicator: {
-                    textStyle: 'xl',
-                    insetEnd: '3',
-                },
-            },
-        },
-    },
-    defaultVariants: selectSlotRecipe.defaultVariants,
-});

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

@@ -1,46 +0,0 @@
-export declare const navbarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "link" | "root" | "item" | "itemGroup" | "brand", {
-    variant: {
-        neutral: {
-            root: {
-                bg: "bg.panel";
-                color: "fg";
-            };
-        };
-        solid: {
-            root: {
-                bg: "colorPalette.solid";
-                color: "colorPalette.contrast";
-            };
-            link: {
-                _hover: {
-                    bg: "colorPalette.contrast/10";
-                };
-            };
-        };
-        glass: {
-            root: {
-                bg: "bg.overlay";
-                backdropFilter: "var(--overlay-effect)";
-                color: "fg";
-            };
-        };
-    };
-    size: {
-        md: {
-            root: {
-                fontSize: "sm";
-            };
-            content: {
-                px: {
-                    base: number;
-                    lg: number;
-                };
-                gap: number;
-            };
-            link: {
-                px: number;
-                h: number;
-            };
-        };
-    };
-}>;

package/dist/components/navbar/navbar.recipe.js

@@ -1,124 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-export const navbarSlotRecipe = defineSlotRecipe({
-    className: 'sui-navbar',
-    slots: ['root', 'content', 'brand', 'itemGroup', 'item', 'link'],
-    base: {
-        root: {
-            display: 'flex',
-            zIndex: 'layer-3',
-            width: 'full',
-            height: 'auto',
-            alignItems: 'center',
-            justifyContent: 'center',
-            top: 0,
-            insetX: 0,
-            transitionProperty: 'common',
-            transitionDuration: 'moderate',
-            transitionTimingFunction: 'ease-in-out',
-            _hidden: {
-                transform: 'translateY(-100%)',
-            },
-        },
-        content: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            width: 'full',
-            height: 'var(--navbar-height)',
-            flexWrap: 'nowrap',
-        },
-        brand: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-start',
-            height: 'full',
-            bg: 'transparent',
-            textDecoration: 'none',
-            color: 'inherit',
-            whiteSpace: 'nowrap',
-            boxSizing: 'border-box',
-        },
-        itemGroup: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-start',
-            height: 'full',
-            bg: 'transparent',
-        },
-        link: {
-            bg: 'transparent',
-            color: 'currentColor',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            textDecoration: 'none',
-            whiteSpace: 'nowrap',
-            boxSizing: 'border-box',
-            borderRadius: 'control.md',
-            transitionProperty: 'common',
-            transitionDuration: 'moderate',
-            lineHeight: 1,
-            _focusVisible: {
-                outline: 'none',
-                boxShadow: 'outline',
-            },
-            _hover: {
-                bg: 'bg.muted',
-                textDecoration: 'none',
-            },
-            _active: {
-                fontWeight: 'semibold',
-            },
-        },
-    },
-    variants: {
-        variant: {
-            neutral: {
-                root: {
-                    bg: 'bg.panel',
-                    color: 'fg',
-                },
-            },
-            solid: {
-                root: {
-                    bg: 'colorPalette.solid',
-                    color: 'colorPalette.contrast',
-                },
-                link: {
-                    _hover: {
-                        bg: 'colorPalette.contrast/10',
-                    },
-                },
-            },
-            glass: {
-                root: {
-                    bg: 'bg.overlay',
-                    backdropFilter: 'var(--overlay-effect)',
-                    color: 'fg',
-                },
-            },
-        },
-        size: {
-            md: {
-                root: {
-                    fontSize: 'sm',
-                },
-                content: {
-                    px: {
-                        base: 4,
-                        lg: 6,
-                    },
-                    gap: 4,
-                },
-                link: {
-                    px: 3,
-                    h: 8,
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'neutral',
-        size: 'md',
-    },
-});