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

package/dist/components/switch/switch.recipe.js

@@ -1,157 +0,0 @@
-import { switchAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const switchSlotRecipe = defineSlotRecipe({
-    slots: switchAnatomy.keys(),
-    className: 'chakra-switch',
-    base: {
-        root: {
-            colorPalette: 'accent',
-            display: 'inline-flex',
-            gap: '2.5',
-            alignItems: 'center',
-            position: 'relative',
-            verticalAlign: 'middle',
-            '--switch-diff': 'calc(var(--switch-width) - var(--switch-height))',
-            '--switch-x': {
-                base: 'var(--switch-diff)',
-                _rtl: 'calc(var(--switch-diff) * -1)',
-            },
-        },
-        label: {
-            lineHeight: '1',
-            userSelect: 'none',
-            fontSize: 'sm',
-            fontWeight: 'medium',
-            _disabled: {
-                opacity: '0.5',
-            },
-        },
-        indicator: {
-            position: 'absolute',
-            height: 'var(--switch-height)',
-            width: 'var(--switch-height)',
-            fontSize: 'var(--switch-indicator-font-size)',
-            fontWeight: 'medium',
-            flexShrink: 0,
-            userSelect: 'none',
-            display: 'grid',
-            placeContent: 'center',
-            transition: 'inset-inline-start 0.12s ease',
-            insetInlineStart: 'calc(var(--switch-x) - 2px)',
-            _checked: {
-                insetInlineStart: '2px',
-            },
-        },
-        control: {
-            display: 'inline-flex',
-            gap: '0.5rem',
-            flexShrink: 0,
-            justifyContent: 'flex-start',
-            cursor: 'switch',
-            borderRadius: 'full',
-            position: 'relative',
-            width: 'var(--switch-width)',
-            height: 'var(--switch-height)',
-            _disabled: {
-                opacity: '0.5',
-                cursor: 'not-allowed',
-            },
-            _invalid: {
-                focusRingColor: 'border.error',
-            },
-        },
-        thumb: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            transitionProperty: 'translate',
-            transitionDuration: 'fast',
-            borderRadius: 'inherit',
-            _checked: {
-                translate: 'var(--switch-x) 0',
-            },
-        },
-    },
-    variants: {
-        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',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'solid',
-        size: 'md',
-    },
-});

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

@@ -1,121 +0,0 @@
-export declare const tableSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"body" | "cell" | "row" | "root" | "caption" | "header" | "footer" | "columnHeader", {
-    interactive: {
-        true: {
-            body: {
-                '& tr': {
-                    _hover: {
-                        bg: "colorPalette.subtle";
-                    };
-                };
-            };
-        };
-    };
-    stickyHeader: {
-        true: {
-            header: {
-                '& :where(tr)': {
-                    top: "var(--table-sticky-offset, 0)";
-                    position: "sticky";
-                    zIndex: number;
-                };
-            };
-        };
-    };
-    striped: {
-        true: {
-            row: {
-                '&:nth-of-type(odd) td': {
-                    bg: "bg.muted";
-                };
-            };
-        };
-    };
-    showColumnBorder: {
-        true: {
-            columnHeader: {
-                '&:not(:last-of-type)': {
-                    borderInlineEndWidth: "1px";
-                };
-            };
-            cell: {
-                '&:not(:last-of-type)': {
-                    borderInlineEndWidth: "1px";
-                };
-            };
-        };
-    };
-    variant: {
-        line: {
-            columnHeader: {
-                borderBottomWidth: "1px";
-            };
-            cell: {
-                borderBottomWidth: "1px";
-            };
-            row: {
-                bg: "bg";
-            };
-        };
-        outline: {
-            root: {
-                boxShadow: "0 0 0 1px {colors.border}";
-                overflow: "hidden";
-            };
-            columnHeader: {
-                borderBottomWidth: "1px";
-            };
-            header: {
-                bg: "bg.muted";
-            };
-            row: {
-                '&:not(:last-of-type)': {
-                    borderBottomWidth: "1px";
-                };
-            };
-            footer: {
-                borderTopWidth: "1px";
-            };
-        };
-    };
-    size: {
-        sm: {
-            root: {
-                textStyle: "sm";
-            };
-            columnHeader: {
-                px: "2";
-                py: "2";
-            };
-            cell: {
-                px: "2";
-                py: "2";
-            };
-        };
-        md: {
-            root: {
-                textStyle: "sm";
-            };
-            columnHeader: {
-                px: "3";
-                py: "3";
-            };
-            cell: {
-                px: "3";
-                py: "3";
-            };
-        };
-        lg: {
-            root: {
-                textStyle: "md";
-            };
-            columnHeader: {
-                px: "4";
-                py: "3";
-            };
-            cell: {
-                px: "4";
-                py: "3";
-            };
-        };
-    };
-}>;

package/dist/components/table/table.recipe.js

@@ -1,161 +0,0 @@
-import { tableAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const tableSlotRecipe = defineSlotRecipe({
-    className: 'chakra-table',
-    slots: tableAnatomy.keys(),
-    base: {
-        root: {
-            fontVariantNumeric: 'lining-nums tabular-nums',
-            borderCollapse: 'collapse',
-            width: 'full',
-            textAlign: 'start',
-            verticalAlign: 'top',
-        },
-        row: {
-            _selected: {
-                bg: 'colorPalette.subtle',
-            },
-        },
-        cell: {
-            textAlign: 'start',
-            alignItems: 'center',
-        },
-        columnHeader: {
-            fontWeight: 'medium',
-            textAlign: 'start',
-            color: 'fg',
-        },
-        caption: {
-            fontWeight: 'medium',
-            textStyle: 'xs',
-        },
-        footer: {
-            fontWeight: 'medium',
-        },
-    },
-    variants: {
-        interactive: {
-            true: {
-                body: {
-                    '& tr': {
-                        _hover: {
-                            bg: 'colorPalette.subtle',
-                        },
-                    },
-                },
-            },
-        },
-        stickyHeader: {
-            true: {
-                header: {
-                    '& :where(tr)': {
-                        top: 'var(--table-sticky-offset, 0)',
-                        position: 'sticky',
-                        zIndex: 1,
-                    },
-                },
-            },
-        },
-        striped: {
-            true: {
-                row: {
-                    '&:nth-of-type(odd) td': {
-                        bg: 'bg.muted',
-                    },
-                },
-            },
-        },
-        showColumnBorder: {
-            true: {
-                columnHeader: {
-                    '&:not(:last-of-type)': {
-                        borderInlineEndWidth: '1px',
-                    },
-                },
-                cell: {
-                    '&:not(:last-of-type)': {
-                        borderInlineEndWidth: '1px',
-                    },
-                },
-            },
-        },
-        variant: {
-            line: {
-                columnHeader: {
-                    borderBottomWidth: '1px',
-                },
-                cell: {
-                    borderBottomWidth: '1px',
-                },
-                row: {
-                    bg: 'bg',
-                },
-            },
-            outline: {
-                root: {
-                    boxShadow: '0 0 0 1px {colors.border}',
-                    overflow: 'hidden',
-                },
-                columnHeader: {
-                    borderBottomWidth: '1px',
-                },
-                header: {
-                    bg: 'bg.muted',
-                },
-                row: {
-                    '&:not(:last-of-type)': {
-                        borderBottomWidth: '1px',
-                    },
-                },
-                footer: {
-                    borderTopWidth: '1px',
-                },
-            },
-        },
-        size: {
-            sm: {
-                root: {
-                    textStyle: 'sm',
-                },
-                columnHeader: {
-                    px: '2',
-                    py: '2',
-                },
-                cell: {
-                    px: '2',
-                    py: '2',
-                },
-            },
-            md: {
-                root: {
-                    textStyle: 'sm',
-                },
-                columnHeader: {
-                    px: '3',
-                    py: '3',
-                },
-                cell: {
-                    px: '3',
-                    py: '3',
-                },
-            },
-            lg: {
-                root: {
-                    textStyle: 'md',
-                },
-                columnHeader: {
-                    px: '4',
-                    py: '3',
-                },
-                cell: {
-                    px: '4',
-                    py: '3',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'line',
-        size: 'md',
-    },
-});

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

@@ -1,263 +0,0 @@
-export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "root" | "list" | "trigger" | "contentGroup", {
-    fitted: {
-        true: {
-            list: {
-                display: "flex";
-            };
-            trigger: {
-                flex: number;
-                textAlign: "center";
-                justifyContent: "center";
-            };
-        };
-    };
-    justify: {
-        start: {
-            list: {
-                justifyContent: "flex-start";
-            };
-        };
-        center: {
-            list: {
-                justifyContent: "center";
-            };
-        };
-        end: {
-            list: {
-                justifyContent: "flex-end";
-            };
-        };
-    };
-    size: {
-        xs: {
-            root: {
-                '--tabs-height': "sizes.6";
-                '--tabs-content-padding': "spacing.2";
-                '--tabs-trigger-radius': "radii.control.sm";
-            };
-            trigger: {
-                py: "1";
-                px: "2";
-                textStyle: "xs";
-            };
-        };
-        sm: {
-            root: {
-                '--tabs-height': "sizes.7";
-                '--tabs-content-padding': "spacing.3";
-                '--tabs-trigger-radius': "radii.control.md";
-            };
-            trigger: {
-                py: "1";
-                px: "3";
-                textStyle: "sm";
-            };
-        };
-        md: {
-            root: {
-                '--tabs-height': "sizes.8";
-                '--tabs-content-padding': "spacing.4";
-                '--tabs-trigger-radius': "radii.control.md";
-            };
-            trigger: {
-                py: "2";
-                px: "4";
-                textStyle: "sm";
-            };
-        };
-        lg: {
-            root: {
-                '--tabs-height': "sizes.10";
-                '--tabs-content-padding': "spacing.4.5";
-                '--tabs-trigger-radius': "radii.control.lg";
-            };
-            trigger: {
-                py: "2";
-                px: "4.5";
-                textStyle: "md";
-            };
-        };
-    };
-    variant: {
-        line: {
-            list: {
-                display: "flex";
-                borderColor: "border";
-                _horizontal: {
-                    borderBottomWidth: "1px";
-                };
-                _vertical: {
-                    borderEndWidth: "1px";
-                };
-            };
-            trigger: {
-                color: "fg.muted";
-                _hover: {
-                    color: "fg.subtle";
-                };
-                _disabled: {
-                    _active: {
-                        bg: "initial";
-                    };
-                };
-                _selected: {
-                    color: "fg";
-                    _horizontal: {
-                        layerStyle: "indicator.bottom";
-                        borderTopRadius: "3px";
-                        '--indicator-offset-x': "spacing.3";
-                        '--indicator-offset-y': "-1px";
-                        '--indicator-color': "colors.colorPalette.solid";
-                    };
-                    _vertical: {
-                        layerStyle: "indicator.end";
-                        '--indicator-offset-x': "-1px";
-                    };
-                };
-            };
-        };
-        pills: {
-            list: {
-                gap: number;
-            };
-            trigger: {
-                borderRadius: "var(--tabs-trigger-radius)";
-                color: "fg.muted";
-                borderWidth: "1px";
-                borderColor: "border.emphasized";
-                _hover: {
-                    bg: "bg.muted";
-                    color: "fg.subtle";
-                };
-                _selected: {
-                    bg: "colorPalette.subtle";
-                    color: "colorPalette.fg";
-                    borderColor: "colorPalette.solid/40";
-                    _hover: {
-                        bg: "colorPalette.subtle";
-                        color: "colorPalette.fg";
-                    };
-                };
-            };
-        };
-        ghost: {
-            list: {
-                gap: number;
-            };
-            trigger: {
-                borderRadius: "var(--tabs-trigger-radius)";
-                color: "fg.subtle";
-                _hover: {
-                    bg: "colorPalette.muted";
-                    color: "colorPalette.fg";
-                };
-                _selected: {
-                    bg: "colorPalette.subtle";
-                    color: "colorPalette.fg";
-                    _hover: {
-                        bg: "colorPalette.subtle";
-                        color: "colorPalette.fg";
-                    };
-                };
-            };
-        };
-        enclosed: {
-            list: {
-                bg: "bg.muted";
-                boxShadow: "inset";
-                borderRadius: "md";
-                borderWidth: "1px";
-                minH: "calc(var(--tabs-height) - 4px)";
-            };
-            trigger: {
-                justifyContent: "center";
-                color: "fg.muted";
-                borderRadius: "calc({radii.md} - 1px)";
-                _hover: {
-                    color: "fg.subtle";
-                };
-                _selected: {
-                    bg: "bg";
-                    color: "colorPalette.fg";
-                    shadow: "sm";
-                };
-            };
-        };
-        outline: {
-            list: {
-                '--line-thickness': "1px";
-                '--line-offset': "calc(var(--line-thickness) * -1)";
-                borderColor: "border";
-                display: "flex";
-                _horizontal: {
-                    _before: {
-                        content: "\"\"";
-                        position: "absolute";
-                        bottom: "0px";
-                        width: "100%";
-                        borderBottomWidth: "var(--line-thickness)";
-                        borderBottomColor: "border";
-                    };
-                };
-                _vertical: {
-                    _before: {
-                        content: "\"\"";
-                        position: "absolute";
-                        insetInline: "var(--line-offset)";
-                        height: "calc(100% - calc(var(--line-thickness) * 2))";
-                        borderEndWidth: "var(--line-thickness)";
-                        borderEndColor: "border";
-                    };
-                };
-            };
-            trigger: {
-                color: "fg.muted";
-                borderWidth: "1px";
-                borderColor: "transparent";
-                _hover: {
-                    color: "fg.subtle";
-                };
-                _selected: {
-                    bg: "currentBg";
-                    color: "colorPalette.fg";
-                };
-                _horizontal: {
-                    borderTopRadius: "var(--tabs-trigger-radius)";
-                    marginBottom: "var(--line-offset)";
-                    marginEnd: {
-                        _notLast: "var(--line-offset)";
-                    };
-                    _selected: {
-                        borderColor: "border";
-                        borderBottomColor: "transparent";
-                    };
-                };
-                _vertical: {
-                    borderStartRadius: "var(--tabs-trigger-radius)";
-                    marginEnd: "var(--line-offset)";
-                    marginBottom: {
-                        _notLast: "var(--line-offset)";
-                    };
-                    _selected: {
-                        borderColor: "border";
-                        borderEndColor: "transparent";
-                    };
-                };
-            };
-        };
-        plain: {
-            trigger: {
-                color: "fg.muted";
-                _selected: {
-                    color: "colorPalette.fg";
-                };
-                borderRadius: "var(--tabs-trigger-radius)";
-                '&[data-selected][data-ssr]': {
-                    bg: "var(--tabs-indicator-bg)";
-                    shadow: "var(--tabs-indicator-shadow)";
-                    borderRadius: "var(--tabs-indicator-radius)";
-                };
-            };
-        };
-    };
-}>;