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

package/dist/components/number-input/number-input.recipe.d.ts

@@ -1,144 +0,0 @@
-export declare const numberInputSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "root" | "input" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", {
-    size: {
-        xs: {
-            input: {
-                borderRadius: "control.sm";
-                textStyle: "xs";
-                px: "2";
-                '--input-height': "sizes.6";
-            };
-            control: {
-                fontSize: "2xs";
-                '--stepper-width': "sizes.4";
-            };
-        };
-        sm: {
-            input: {
-                borderRadius: "control.md";
-                textStyle: "sm";
-                px: "2.5";
-                '--input-height': "sizes.7";
-            };
-            control: {
-                fontSize: "xs";
-                '--stepper-width': "sizes.5";
-            };
-        };
-        md: {
-            input: {
-                borderRadius: "control.md";
-                textStyle: "sm";
-                px: "3";
-                '--input-height': "sizes.8";
-            };
-            control: {
-                fontSize: "sm";
-                '--stepper-width': "sizes.6";
-            };
-        };
-        lg: {
-            input: {
-                borderRadius: "control.lg";
-                textStyle: "md";
-                px: "4.5";
-                '--input-height': "sizes.10";
-            };
-            control: {
-                fontSize: "sm";
-                '--stepper-width': "sizes.6";
-            };
-        };
-    };
-    variant: {
-        outline: {
-            input: {
-                bg: "transparent";
-                borderWidth: "1px";
-                borderColor: "border";
-                focusVisibleRing: "inside";
-                focusRingWidth: "0";
-                _hover: {
-                    borderColor: "border.emphasized";
-                    _focusVisible: {
-                        borderColor: "var(--focus-ring-color)";
-                    };
-                };
-            } | {
-                borderWidth: "1px";
-                borderColor: "transparent";
-                bg: "bg.muted";
-                focusVisibleRing: "inside";
-            } | {
-                bg: "transparent";
-                borderBottomWidth: "1px";
-                borderBottomColor: "border";
-                borderRadius: "0";
-                px: "0";
-                _focusVisible: {
-                    borderColor: "var(--focus-color)";
-                    boxShadow: "0px 1px 0px 0px var(--focus-color)";
-                };
-            };
-        };
-        subtle: {
-            input: {
-                bg: "transparent";
-                borderWidth: "1px";
-                borderColor: "border";
-                focusVisibleRing: "inside";
-                focusRingWidth: "0";
-                _hover: {
-                    borderColor: "border.emphasized";
-                    _focusVisible: {
-                        borderColor: "var(--focus-ring-color)";
-                    };
-                };
-            } | {
-                borderWidth: "1px";
-                borderColor: "transparent";
-                bg: "bg.muted";
-                focusVisibleRing: "inside";
-            } | {
-                bg: "transparent";
-                borderBottomWidth: "1px";
-                borderBottomColor: "border";
-                borderRadius: "0";
-                px: "0";
-                _focusVisible: {
-                    borderColor: "var(--focus-color)";
-                    boxShadow: "0px 1px 0px 0px var(--focus-color)";
-                };
-            };
-        };
-        flushed: {
-            input: {
-                bg: "transparent";
-                borderWidth: "1px";
-                borderColor: "border";
-                focusVisibleRing: "inside";
-                focusRingWidth: "0";
-                _hover: {
-                    borderColor: "border.emphasized";
-                    _focusVisible: {
-                        borderColor: "var(--focus-ring-color)";
-                    };
-                };
-            } | {
-                borderWidth: "1px";
-                borderColor: "transparent";
-                bg: "bg.muted";
-                focusVisibleRing: "inside";
-            } | {
-                bg: "transparent";
-                borderBottomWidth: "1px";
-                borderBottomColor: "border";
-                borderRadius: "0";
-                px: "0";
-                _focusVisible: {
-                    borderColor: "var(--focus-color)";
-                    boxShadow: "0px 1px 0px 0px var(--focus-color)";
-                };
-            };
-        };
-    };
-}>;

package/dist/components/number-input/number-input.recipe.js

@@ -1,111 +0,0 @@
-import { numberInputAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe, defineStyle } from '@chakra-ui/react/styled-system';
-import { mapEntries } from "../../theme/utils.js";
-import { inputRecipe } from "../input/input.recipe.js";
-const triggerStyle = defineStyle({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: '1',
-    userSelect: 'none',
-    cursor: 'button',
-    lineHeight: '1',
-    color: 'fg.muted',
-    '--stepper-base-radius': 'radii.xs',
-    '--stepper-radius': 'calc(var(--stepper-base-radius) + 1px)',
-    _icon: {
-        boxSize: '1em',
-    },
-    _disabled: {
-        opacity: '0.5',
-    },
-    _hover: {
-        bg: 'bg.muted',
-    },
-    _active: {
-        bg: 'bg.emphasized',
-    },
-});
-export const numberInputSlotRecipe = defineSlotRecipe({
-    className: 'chakra-number-input',
-    slots: numberInputAnatomy.keys(),
-    base: {
-        root: {
-            position: 'relative',
-            zIndex: '0',
-            isolation: 'isolate',
-            width: 'full',
-        },
-        input: {
-            ...inputRecipe.base,
-            verticalAlign: 'top',
-            pe: 'calc(var(--stepper-width) + 0.5rem)',
-        },
-        control: {
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'absolute',
-            top: '0',
-            insetEnd: '0px',
-            margin: '1px',
-            width: 'var(--stepper-width)',
-            height: 'calc(100% - 2px)',
-            zIndex: '1',
-            borderStartWidth: '1px',
-            divideY: '1px',
-        },
-        incrementTrigger: {
-            ...triggerStyle,
-            borderTopEndRadius: 'var(--stepper-radius)',
-        },
-        decrementTrigger: {
-            ...triggerStyle,
-            borderBottomEndRadius: 'var(--stepper-radius)',
-        },
-        valueText: {
-            fontWeight: 'medium',
-            fontFeatureSettings: 'pnum',
-            fontVariantNumeric: 'proportional-nums',
-        },
-    },
-    variants: {
-        size: {
-            xs: {
-                input: inputRecipe.variants.size.xs,
-                control: {
-                    fontSize: '2xs',
-                    '--stepper-width': 'sizes.4',
-                },
-            },
-            sm: {
-                input: inputRecipe.variants.size.sm,
-                control: {
-                    fontSize: 'xs',
-                    '--stepper-width': 'sizes.5',
-                },
-            },
-            md: {
-                input: inputRecipe.variants.size.md,
-                control: {
-                    fontSize: 'sm',
-                    '--stepper-width': 'sizes.6',
-                },
-            },
-            lg: {
-                input: inputRecipe.variants.size.lg,
-                control: {
-                    fontSize: 'sm',
-                    '--stepper-width': 'sizes.6',
-                },
-            },
-        },
-        variant: mapEntries(inputRecipe.variants.variant, (key, variantStyles) => [
-            key,
-            { input: variantStyles },
-        ]),
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'outline',
-    },
-});

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

@@ -1,61 +0,0 @@
-export declare const pageSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<string, {
-    variant: {
-        panel: {
-            root: {
-                bg: "var(--page-bg-color)";
-                zIndex: number;
-            };
-            header: {
-                '--page-header-row-height': "40px";
-                display: "grid";
-                gridTemplateAreas: "\"nav heading actions\"\n               \"footer footer footer\"";
-                gridTemplateColumns: "auto max-content 1fr";
-                gridTemplateRows: "minmax(var(--page-header-row-height), auto)";
-                columnGap: number;
-                alignItems: "center";
-                justifyContent: "stretch";
-                flexShrink: number;
-                px: number;
-                borderBottomWidth: "1px";
-            };
-            title: {
-                me: number;
-                textStyle: "sm";
-            };
-            description: {
-                textStyle: "xs";
-            };
-        };
-        settings: {
-            root: {
-                overflowY: "auto";
-                px: number;
-            };
-            header: {
-                flexDirection: "row";
-                alignItems: "center";
-                mb: {
-                    base: number;
-                    lg: number;
-                };
-                minH: number;
-            };
-            heading: {
-                py: {
-                    base: number;
-                    lg: number;
-                };
-            };
-            title: {
-                textStyle: "2xl";
-            };
-            description: {
-                textStyle: "md";
-            };
-            body: {
-                overflow: "visible";
-                p: number;
-            };
-        };
-    };
-}>;

package/dist/components/page/page.recipe.js

@@ -1,99 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-const slots = [
-    'root',
-    'header',
-    'headerContent',
-    'heading',
-    'headerFooter',
-    'title',
-    'description',
-    'body',
-];
-export const pageSlotRecipe = defineSlotRecipe({
-    className: 'sui-page',
-    slots,
-    base: {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            minH: 0,
-        },
-        title: {
-            fontWeight: 'medium',
-        },
-        description: {
-            color: 'fg.muted',
-        },
-        body: {
-            flex: 1,
-            overflowY: 'auto',
-            p: 4,
-        },
-    },
-    variants: {
-        variant: {
-            panel: {
-                root: {
-                    bg: 'var(--page-bg-color)',
-                    zIndex: 1,
-                },
-                header: {
-                    '--page-header-row-height': '40px',
-                    display: 'grid',
-                    gridTemplateAreas: `"nav heading actions"
-               "footer footer footer"`,
-                    gridTemplateColumns: 'auto max-content 1fr',
-                    gridTemplateRows: 'minmax(var(--page-header-row-height), auto)',
-                    columnGap: 2,
-                    alignItems: 'center',
-                    justifyContent: 'stretch',
-                    flexShrink: 0,
-                    px: 3,
-                    borderBottomWidth: '1px',
-                },
-                title: {
-                    me: 4,
-                    textStyle: 'sm',
-                },
-                description: {
-                    textStyle: 'xs',
-                },
-            },
-            settings: {
-                root: {
-                    overflowY: 'auto',
-                    px: 4,
-                },
-                header: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    mb: {
-                        base: 4,
-                        lg: 8,
-                    },
-                    minH: 24,
-                },
-                heading: {
-                    py: {
-                        base: 4,
-                        lg: 8,
-                    },
-                },
-                title: {
-                    textStyle: '2xl',
-                },
-                description: {
-                    textStyle: 'md',
-                },
-                body: {
-                    overflow: 'visible',
-                    p: 0,
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        variant: 'panel',
-    },
-});

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

@@ -1,104 +0,0 @@
-import { type RecipeVariantProps } from '@chakra-ui/react/styled-system';
-export declare const personaSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "presence" | "root" | "avatar" | "details" | "secondaryLabel" | "tertiaryLabel", {
-    size: {
-        '2xs': {
-            details: {
-                ms: number;
-            };
-            label: {
-                fontSize: "xs";
-            };
-            secondaryLabel: {
-                display: "none";
-            };
-            tertiaryLabel: {
-                display: "none";
-            };
-        };
-        xs: {
-            details: {
-                ms: number;
-            };
-            label: {
-                fontSize: "xs";
-            };
-            secondaryLabel: {
-                display: "none";
-            };
-            tertiaryLabel: {
-                display: "none";
-            };
-        };
-        sm: {
-            details: {
-                ms: number;
-            };
-            label: {
-                fontSize: "sm";
-            };
-            secondaryLabel: {
-                fontSize: "xs";
-            };
-            tertiaryLabel: {
-                display: "none";
-            };
-        };
-        md: {
-            details: {
-                ms: number;
-            };
-            label: {
-                fontSize: "sm";
-            };
-            secondaryLabel: {
-                fontSize: "xs";
-            };
-            tertiaryLabel: {
-                display: "none";
-            };
-        };
-        lg: {
-            details: {
-                ms: number;
-            };
-            label: {
-                fontSize: "md";
-            };
-            secondaryLabel: {
-                fontSize: "sm";
-            };
-            tertiaryLabel: {
-                fontSize: "sm";
-            };
-        };
-        xl: {
-            details: {
-                ms: number;
-            };
-            label: {
-                fontSize: "lg";
-            };
-            secondaryLabel: {
-                fontSize: "md";
-            };
-            tertiaryLabel: {
-                fontSize: "md";
-            };
-        };
-        '2xl': {
-            details: {
-                ms: number;
-            };
-            label: {
-                fontSize: "xl";
-            };
-            secondaryLabel: {
-                fontSize: "lg";
-            };
-            tertiaryLabel: {
-                fontSize: "lg";
-            };
-        };
-    };
-}>;
-export type PersonaVariantProps = RecipeVariantProps<typeof personaSlotRecipe>;

package/dist/components/persona/persona.recipe.js

@@ -1,106 +0,0 @@
-import { defineSlotRecipe, defineStyle, } from '@chakra-ui/react/styled-system';
-const baseStyleLabel = defineStyle({
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    minW: 0,
-    color: 'fg',
-});
-export const personaSlotRecipe = defineSlotRecipe({
-    className: 'sui-persona',
-    slots: [
-        'root',
-        'avatar',
-        'presence',
-        'details',
-        'label',
-        'secondaryLabel',
-        'tertiaryLabel',
-    ],
-    base: {
-        root: {
-            '--presence-border-color': 'var(--bg-currentcolor)',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-        },
-        presence: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'absolute',
-            bottom: 0,
-            right: 0,
-            boxSize: 'calc(var(--avatar-size) / 3)',
-            transform: 'translate(12%, 12%)',
-            borderWidth: '0.10em',
-            borderRadius: '50%',
-            borderColor: 'var(--presence-border-color)',
-            bg: 'var(--persona-presence)',
-        },
-        details: {
-            display: 'flex',
-            flexDirection: 'column',
-            minW: 0,
-            lineHeight: 'short',
-        },
-        label: baseStyleLabel,
-        secondaryLabel: {
-            ...baseStyleLabel,
-            color: 'fg/60',
-        },
-        tertiaryLabel: {
-            ...baseStyleLabel,
-            color: 'fg/60',
-        },
-    },
-    variants: {
-        size: {
-            '2xs': {
-                details: { ms: 1 },
-                label: { fontSize: 'xs' },
-                secondaryLabel: { display: 'none' },
-                tertiaryLabel: { display: 'none' },
-            },
-            xs: {
-                details: { ms: 1.5 },
-                label: { fontSize: 'xs' },
-                secondaryLabel: { display: 'none' },
-                tertiaryLabel: { display: 'none' },
-            },
-            sm: {
-                details: { ms: 2 },
-                label: { fontSize: 'sm' },
-                secondaryLabel: { fontSize: 'xs' },
-                tertiaryLabel: { display: 'none' },
-            },
-            md: {
-                details: { ms: 2 },
-                label: { fontSize: 'sm' },
-                secondaryLabel: { fontSize: 'xs' },
-                tertiaryLabel: { display: 'none' },
-            },
-            lg: {
-                details: { ms: 3 },
-                label: { fontSize: 'md' },
-                secondaryLabel: { fontSize: 'sm' },
-                tertiaryLabel: { fontSize: 'sm' },
-            },
-            xl: {
-                details: { ms: 4 },
-                label: { fontSize: 'lg' },
-                secondaryLabel: { fontSize: 'md' },
-                tertiaryLabel: { fontSize: 'md' },
-            },
-            '2xl': {
-                details: { ms: 4 },
-                label: { fontSize: 'xl' },
-                secondaryLabel: { fontSize: 'lg' },
-                tertiaryLabel: { fontSize: 'lg' },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-    },
-});