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

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

@@ -1,22 +0,0 @@
-export declare const spinnerRecipe: import("@chakra-ui/react").RecipeDefinition<{
-    size: {
-        inherit: {
-            '--spinner-size': "1em";
-        };
-        xs: {
-            '--spinner-size': "sizes.3";
-        };
-        sm: {
-            '--spinner-size': "sizes.4";
-        };
-        md: {
-            '--spinner-size': "sizes.5";
-        };
-        lg: {
-            '--spinner-size': "sizes.8";
-        };
-        xl: {
-            '--spinner-size': "sizes.10";
-        };
-    };
-}>;

package/dist/components/spinner/spinner.recipe.js

@@ -1,31 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react/styled-system';
-export const spinnerRecipe = defineRecipe({
-    className: 'chakra-spinner',
-    base: {
-        display: 'inline-block',
-        borderColor: 'currentColor',
-        borderStyle: 'solid',
-        borderWidth: '2px',
-        borderRadius: 'full',
-        width: 'var(--spinner-size)',
-        height: 'var(--spinner-size)',
-        animation: 'spin',
-        animationDuration: 'slowest',
-        '--spinner-track-color': 'transparent',
-        borderBottomColor: 'var(--spinner-track-color)',
-        borderInlineStartColor: 'var(--spinner-track-color)',
-    },
-    variants: {
-        size: {
-            inherit: { '--spinner-size': '1em' },
-            xs: { '--spinner-size': 'sizes.3' },
-            sm: { '--spinner-size': 'sizes.4' },
-            md: { '--spinner-size': 'sizes.5' },
-            lg: { '--spinner-size': 'sizes.8' },
-            xl: { '--spinner-size': 'sizes.10' },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-    },
-});

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

@@ -1,19 +0,0 @@
-export declare const statSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "indicator" | "root" | "valueText" | "helpText" | "valueUnit", {
-    size: {
-        sm: {
-            valueText: {
-                textStyle: "xl";
-            };
-        };
-        md: {
-            valueText: {
-                textStyle: "2xl";
-            };
-        };
-        lg: {
-            valueText: {
-                textStyle: "3xl";
-            };
-        };
-    };
-}>;

package/dist/components/stat/stat.recipe.js

@@ -1,76 +0,0 @@
-import { statAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const statSlotRecipe = defineSlotRecipe({
-    className: 'chakra-stat',
-    slots: statAnatomy.keys(),
-    base: {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '0',
-            position: 'relative',
-            flex: '1',
-        },
-        label: {
-            color: 'fg.muted',
-            textStyle: 'sm',
-        },
-        helpText: {
-            color: 'fg.muted',
-            textStyle: 'xs',
-        },
-        valueUnit: {
-            color: 'fg.muted',
-            textStyle: 'xs',
-            fontWeight: 'initial',
-            letterSpacing: 'initial',
-        },
-        valueText: {
-            verticalAlign: 'baseline',
-            fontWeight: 'semibold',
-            letterSpacing: 'tight',
-            fontFeatureSettings: 'pnum',
-            fontVariantNumeric: 'proportional-nums',
-            display: 'inline-flex',
-            gap: '1',
-        },
-        indicator: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginEnd: 1,
-            '& :where(svg)': {
-                w: '1em',
-                h: '1em',
-            },
-            '&[data-type=up]': {
-                color: 'fg.success',
-            },
-            '&[data-type=down]': {
-                color: 'fg.error',
-            },
-        },
-    },
-    variants: {
-        size: {
-            sm: {
-                valueText: {
-                    textStyle: 'xl',
-                },
-            },
-            md: {
-                valueText: {
-                    textStyle: '2xl',
-                },
-            },
-            lg: {
-                valueText: {
-                    textStyle: '3xl',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-    },
-});

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

@@ -1,19 +0,0 @@
-export declare const statusSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "root", {
-    size: {
-        sm: {
-            root: {
-                textStyle: "xs";
-            };
-        };
-        md: {
-            root: {
-                textStyle: "sm";
-            };
-        };
-        lg: {
-            root: {
-                textStyle: "md";
-            };
-        };
-    };
-}>;

package/dist/components/status/status.recipe.js

@@ -1,44 +0,0 @@
-import { statusAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const statusSlotRecipe = defineSlotRecipe({
-    className: 'chakra-status',
-    slots: statusAnatomy.keys(),
-    base: {
-        root: {
-            colorPalette: 'gray',
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: '2',
-        },
-        indicator: {
-            width: '0.64em',
-            height: '0.64em',
-            flexShrink: 0,
-            borderRadius: 'full',
-            forcedColorAdjust: 'none',
-            bg: 'colorPalette.solid',
-        },
-    },
-    variants: {
-        size: {
-            sm: {
-                root: {
-                    textStyle: 'xs',
-                },
-            },
-            md: {
-                root: {
-                    textStyle: 'sm',
-                },
-            },
-            lg: {
-                root: {
-                    textStyle: 'md',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-    },
-});

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

@@ -1,142 +0,0 @@
-export declare const stepsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "progress" | "indicator" | "root" | "item" | "separator" | "title" | "list" | "trigger" | "nextTrigger" | "prevTrigger", {
-    orientation: {
-        vertical: {
-            root: {
-                flexDirection: "row";
-                height: "100%";
-            };
-            list: {
-                flexDirection: "column";
-                alignItems: "flex-start";
-            };
-            separator: {
-                position: "absolute";
-                width: "var(--steps-thickness)";
-                height: "100%";
-                maxHeight: "calc(100% - var(--steps-size) - var(--steps-gutter) * 2)";
-                top: "calc(var(--steps-size) + var(--steps-gutter))";
-                insetStart: "calc(var(--steps-size) / 2 - 1px)";
-            };
-            item: {
-                alignItems: "flex-start";
-            };
-        };
-        horizontal: {
-            root: {
-                flexDirection: "column";
-                width: "100%";
-            };
-            list: {
-                flexDirection: "row";
-                alignItems: "center";
-            };
-            separator: {
-                width: "100%";
-                height: "var(--steps-thickness)";
-                marginX: "var(--steps-gutter)";
-            };
-            item: {
-                alignItems: "center";
-            };
-        };
-    };
-    variant: {
-        solid: {
-            indicator: {
-                _incomplete: {
-                    borderWidth: "var(--steps-thickness)";
-                };
-                _current: {
-                    bg: "colorPalette.muted";
-                    borderWidth: "var(--steps-thickness)";
-                    borderColor: "colorPalette.solid";
-                    color: "colorPalette.fg";
-                };
-                _complete: {
-                    bg: "colorPalette.solid";
-                    borderColor: "colorPalette.solid";
-                    color: "colorPalette.contrast";
-                };
-            };
-            separator: {
-                _complete: {
-                    bg: "colorPalette.solid";
-                };
-            };
-        };
-        subtle: {
-            indicator: {
-                _incomplete: {
-                    bg: "bg.muted";
-                };
-                _current: {
-                    bg: "colorPalette.muted";
-                    color: "colorPalette.fg";
-                };
-                _complete: {
-                    bg: "colorPalette.emphasized";
-                    color: "colorPalette.fg";
-                };
-            };
-            separator: {
-                _complete: {
-                    bg: "colorPalette.emphasized";
-                };
-            };
-        };
-    };
-    size: {
-        xs: {
-            root: {
-                gap: "2.5";
-            };
-            list: {
-                '--steps-size': "sizes.6";
-                '--steps-icon-size': "sizes.3.5";
-                textStyle: "xs";
-            };
-            title: {
-                textStyle: "sm";
-            };
-        };
-        sm: {
-            root: {
-                gap: "3";
-            };
-            list: {
-                '--steps-size': "sizes.8";
-                '--steps-icon-size': "sizes.4";
-                textStyle: "xs";
-            };
-            title: {
-                textStyle: "sm";
-            };
-        };
-        md: {
-            root: {
-                gap: "4";
-            };
-            list: {
-                '--steps-size': "sizes.10";
-                '--steps-icon-size': "sizes.4";
-                textStyle: "sm";
-            };
-            title: {
-                textStyle: "sm";
-            };
-        };
-        lg: {
-            root: {
-                gap: "6";
-            };
-            list: {
-                '--steps-size': "sizes.11";
-                '--steps-icon-size': "sizes.5";
-                textStyle: "md";
-            };
-            title: {
-                textStyle: "md";
-            };
-        };
-    };
-}>;

package/dist/components/steps/steps.recipe.js

@@ -1,213 +0,0 @@
-import { stepsAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const stepsSlotRecipe = defineSlotRecipe({
-    className: 'chakra-steps',
-    slots: stepsAnatomy.keys(),
-    base: {
-        root: {
-            display: 'flex',
-            width: 'full',
-        },
-        list: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            '--steps-gutter': 'spacing.3',
-            '--steps-thickness': '2px',
-        },
-        title: {
-            fontWeight: 'medium',
-            color: 'fg',
-        },
-        description: {
-            color: 'fg.muted',
-        },
-        separator: {
-            bg: 'border',
-            flex: '1',
-        },
-        indicator: {
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexShrink: '0',
-            borderRadius: 'full',
-            fontWeight: 'medium',
-            width: 'var(--steps-size)',
-            height: 'var(--steps-size)',
-            _icon: {
-                flexShrink: '0',
-                width: 'var(--steps-icon-size)',
-                height: 'var(--steps-icon-size)',
-            },
-        },
-        item: {
-            position: 'relative',
-            display: 'flex',
-            flex: '1 0 0',
-            '&:last-of-type': {
-                flex: 'initial',
-                '& [data-part=separator]': {
-                    display: 'none',
-                },
-            },
-        },
-        trigger: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: '3',
-            textAlign: 'start',
-            focusVisibleRing: 'outside',
-            borderRadius: 'control.md',
-        },
-        content: {
-            focusVisibleRing: 'outside',
-        },
-    },
-    variants: {
-        orientation: {
-            vertical: {
-                root: {
-                    flexDirection: 'row',
-                    height: '100%',
-                },
-                list: {
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
-                },
-                separator: {
-                    position: 'absolute',
-                    width: 'var(--steps-thickness)',
-                    height: '100%',
-                    maxHeight: 'calc(100% - var(--steps-size) - var(--steps-gutter) * 2)',
-                    top: 'calc(var(--steps-size) + var(--steps-gutter))',
-                    insetStart: 'calc(var(--steps-size) / 2 - 1px)',
-                },
-                item: {
-                    alignItems: 'flex-start',
-                },
-            },
-            horizontal: {
-                root: {
-                    flexDirection: 'column',
-                    width: '100%',
-                },
-                list: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                },
-                separator: {
-                    width: '100%',
-                    height: 'var(--steps-thickness)',
-                    marginX: 'var(--steps-gutter)',
-                },
-                item: {
-                    alignItems: 'center',
-                },
-            },
-        },
-        variant: {
-            solid: {
-                indicator: {
-                    _incomplete: {
-                        borderWidth: 'var(--steps-thickness)',
-                    },
-                    _current: {
-                        bg: 'colorPalette.muted',
-                        borderWidth: 'var(--steps-thickness)',
-                        borderColor: 'colorPalette.solid',
-                        color: 'colorPalette.fg',
-                    },
-                    _complete: {
-                        bg: 'colorPalette.solid',
-                        borderColor: 'colorPalette.solid',
-                        color: 'colorPalette.contrast',
-                    },
-                },
-                separator: {
-                    _complete: {
-                        bg: 'colorPalette.solid',
-                    },
-                },
-            },
-            subtle: {
-                indicator: {
-                    _incomplete: {
-                        bg: 'bg.muted',
-                    },
-                    _current: {
-                        bg: 'colorPalette.muted',
-                        color: 'colorPalette.fg',
-                    },
-                    _complete: {
-                        bg: 'colorPalette.emphasized',
-                        color: 'colorPalette.fg',
-                    },
-                },
-                separator: {
-                    _complete: {
-                        bg: 'colorPalette.emphasized',
-                    },
-                },
-            },
-        },
-        size: {
-            xs: {
-                root: {
-                    gap: '2.5',
-                },
-                list: {
-                    '--steps-size': 'sizes.6',
-                    '--steps-icon-size': 'sizes.3.5',
-                    textStyle: 'xs',
-                },
-                title: {
-                    textStyle: 'sm',
-                },
-            },
-            sm: {
-                root: {
-                    gap: '3',
-                },
-                list: {
-                    '--steps-size': 'sizes.8',
-                    '--steps-icon-size': 'sizes.4',
-                    textStyle: 'xs',
-                },
-                title: {
-                    textStyle: 'sm',
-                },
-            },
-            md: {
-                root: {
-                    gap: '4',
-                },
-                list: {
-                    '--steps-size': 'sizes.10',
-                    '--steps-icon-size': 'sizes.4',
-                    textStyle: 'sm',
-                },
-                title: {
-                    textStyle: 'sm',
-                },
-            },
-            lg: {
-                root: {
-                    gap: '6',
-                },
-                list: {
-                    '--steps-size': 'sizes.11',
-                    '--steps-icon-size': 'sizes.5',
-                    textStyle: 'md',
-                },
-                title: {
-                    textStyle: 'md',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'solid',
-        orientation: 'horizontal',
-    },
-});

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

@@ -1,77 +0,0 @@
-export declare const switchSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "indicator" | "root" | "thumb", {
-    variant: {
-        solid: {
-            control: {
-                borderRadius: "full";
-                bg: "bg.emphasized";
-                focusVisibleRing: "outside";
-                _checked: {
-                    bg: "colorPalette.solid";
-                };
-            };
-            thumb: {
-                bg: "white";
-                width: "var(--switch-height)";
-                height: "var(--switch-height)";
-                scale: "0.8";
-                boxShadow: "sm";
-                _checked: {
-                    bg: "colorPalette.contrast";
-                };
-            };
-        };
-        raised: {
-            control: {
-                borderRadius: "full";
-                height: "calc(var(--switch-height) / 2)";
-                bg: "bg.muted";
-                boxShadow: "inset";
-                _checked: {
-                    bg: "colorPalette.solid/60";
-                };
-            };
-            thumb: {
-                width: "var(--switch-height)";
-                height: "var(--switch-height)";
-                position: "relative";
-                top: "calc(var(--switch-height) * -0.25)";
-                bg: "white";
-                boxShadow: "xs";
-                focusVisibleRing: "outside";
-                _checked: {
-                    bg: "colorPalette.solid";
-                };
-            };
-        };
-    };
-    size: {
-        xs: {
-            root: {
-                '--switch-width': "sizes.6";
-                '--switch-height': "sizes.3";
-                '--switch-indicator-font-size': "fontSizes.xs";
-            };
-        };
-        sm: {
-            root: {
-                '--switch-width': "sizes.8";
-                '--switch-height': "sizes.4";
-                '--switch-indicator-font-size': "fontSizes.xs";
-            };
-        };
-        md: {
-            root: {
-                '--switch-width': "sizes.10";
-                '--switch-height': "sizes.5";
-                '--switch-indicator-font-size': "fontSizes.sm";
-            };
-        };
-        lg: {
-            root: {
-                '--switch-width': "sizes.12";
-                '--switch-height': "sizes.6";
-                '--switch-indicator-font-size': "fontSizes.md";
-            };
-        };
-    };
-}>;