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

package/dist/components/textarea/textarea.recipe.js

@@ -1,90 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react/styled-system';
-export const textareaRecipe = defineRecipe({
-    className: 'chakra-textarea',
-    base: {
-        width: '100%',
-        minWidth: '0',
-        outline: '0',
-        position: 'relative',
-        appearance: 'none',
-        textAlign: 'start',
-        _disabled: {
-            layerStyle: 'disabled',
-        },
-        '--focus-color': 'colors.colorPalette.focusRing',
-        '--error-color': 'colors.border.error',
-        _invalid: {
-            focusRingColor: 'var(--error-color)',
-            borderColor: 'var(--error-color)',
-        },
-    },
-    variants: {
-        size: {
-            xs: {
-                borderRadius: 'control.sm',
-                textStyle: 'xs',
-                px: '2',
-                py: '1',
-                scrollPaddingBottom: '1',
-            },
-            sm: {
-                borderRadius: 'control.md',
-                textStyle: 'sm',
-                px: '2.5',
-                py: '1.5',
-                scrollPaddingBottom: '1.5',
-            },
-            md: {
-                borderRadius: 'control.md',
-                textStyle: 'sm',
-                px: '3',
-                py: '1.5',
-                scrollPaddingBottom: '1.5',
-            },
-            lg: {
-                borderRadius: 'control.lg',
-                textStyle: 'md',
-                px: '4',
-                py: '2',
-                scrollPaddingBottom: '2',
-            },
-            xl: {
-                borderRadius: 'control.lg',
-                textStyle: 'md',
-                px: '4.5',
-                py: '3.5',
-                scrollPaddingBottom: '3.5',
-            },
-        },
-        variant: {
-            outline: {
-                bg: 'transparent',
-                borderWidth: '1px',
-                borderColor: 'border',
-                focusVisibleRing: 'inside',
-                focusRingWidth: 0,
-            },
-            subtle: {
-                borderWidth: '1px',
-                borderColor: 'transparent',
-                bg: 'bg.muted',
-                focusVisibleRing: 'inside',
-            },
-            flushed: {
-                bg: 'transparent',
-                borderBottomWidth: '1px',
-                borderBottomColor: 'border',
-                borderRadius: '0',
-                px: '0',
-                _focusVisible: {
-                    borderColor: 'var(--focus-color)',
-                    boxShadow: '0px 1px 0px 0px var(--focus-color)',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'outline',
-    },
-});

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

@@ -1,62 +0,0 @@
-export declare const timelineSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "indicator" | "root" | "item" | "separator" | "title" | "connector", {
-    variant: {
-        subtle: {
-            indicator: {
-                bg: "bg.muted";
-            };
-        };
-        solid: {
-            indicator: {
-                bg: "bg.inverted";
-                color: "fg.inverted";
-            };
-        };
-        outline: {
-            indicator: {
-                bg: "bg";
-                borderWidth: "2px";
-            };
-        };
-        plain: {};
-    };
-    size: {
-        sm: {
-            root: {
-                '--timeline-indicator-size': "sizes.4";
-                '--timeline-font-size': "fontSizes.2xs";
-            };
-            title: {
-                textStyle: "xs";
-            };
-        };
-        md: {
-            root: {
-                '--timeline-indicator-size': "sizes.5";
-                '--timeline-font-size': "fontSizes.xs";
-            };
-            title: {
-                textStyle: "sm";
-            };
-        };
-        lg: {
-            root: {
-                '--timeline-indicator-size': "sizes.6";
-                '--timeline-font-size': "fontSizes.xs";
-            };
-            title: {
-                mt: "0.5";
-                textStyle: "sm";
-            };
-        };
-        xl: {
-            root: {
-                '--timeline-indicator-size': "sizes.8";
-                '--timeline-font-size': "fontSizes.sm";
-            };
-            title: {
-                mt: "1.5";
-                textStyle: "sm";
-            };
-        };
-    };
-}>;

package/dist/components/timeline/timeline.recipe.js

@@ -1,134 +0,0 @@
-import { timelineAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const timelineSlotRecipe = defineSlotRecipe({
-    slots: timelineAnatomy.keys(),
-    className: 'chakra-timeline',
-    base: {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: 'full',
-            '--timeline-thickness': '1px',
-            '--timeline-gutter': '4px',
-        },
-        item: {
-            display: 'flex',
-            position: 'relative',
-            alignItems: 'flex-start',
-            flexShrink: 0,
-            gap: '4',
-            _last: {
-                '& :where(.chakra-timeline__separator)': { display: 'none' },
-            },
-        },
-        separator: {
-            position: 'absolute',
-            borderStartWidth: 'var(--timeline-thickness)',
-            ms: 'calc(-1 * var(--timeline-thickness) / 2)',
-            insetInlineStart: 'calc(var(--timeline-indicator-size) / 2)',
-            insetBlock: '0',
-            borderColor: 'border',
-        },
-        indicator: {
-            outline: '2px solid {colors.bg}',
-            position: 'relative',
-            flexShrink: '0',
-            boxSize: 'var(--timeline-indicator-size)',
-            fontSize: 'var(--timeline-font-size)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 'full',
-            fontWeight: 'medium',
-        },
-        connector: {
-            alignSelf: 'stretch',
-            position: 'relative',
-        },
-        content: {
-            pb: '6',
-            display: 'flex',
-            flexDirection: 'column',
-            width: 'full',
-            gap: '2',
-        },
-        title: {
-            display: 'flex',
-            fontWeight: 'medium',
-            flexWrap: 'wrap',
-            gap: '1.5',
-            alignItems: 'center',
-            mt: 'var(--timeline-margin)',
-        },
-        description: {
-            color: 'fg.muted',
-            textStyle: 'xs',
-        },
-    },
-    variants: {
-        variant: {
-            subtle: {
-                indicator: {
-                    bg: 'bg.muted',
-                },
-            },
-            solid: {
-                indicator: {
-                    bg: 'bg.inverted',
-                    color: 'fg.inverted',
-                },
-            },
-            outline: {
-                indicator: {
-                    bg: 'bg',
-                    borderWidth: '2px',
-                },
-            },
-            plain: {},
-        },
-        size: {
-            sm: {
-                root: {
-                    '--timeline-indicator-size': 'sizes.4',
-                    '--timeline-font-size': 'fontSizes.2xs',
-                },
-                title: {
-                    textStyle: 'xs',
-                },
-            },
-            md: {
-                root: {
-                    '--timeline-indicator-size': 'sizes.5',
-                    '--timeline-font-size': 'fontSizes.xs',
-                },
-                title: {
-                    textStyle: 'sm',
-                },
-            },
-            lg: {
-                root: {
-                    '--timeline-indicator-size': 'sizes.6',
-                    '--timeline-font-size': 'fontSizes.xs',
-                },
-                title: {
-                    mt: '0.5',
-                    textStyle: 'sm',
-                },
-            },
-            xl: {
-                root: {
-                    '--timeline-indicator-size': 'sizes.8',
-                    '--timeline-font-size': 'fontSizes.sm',
-                },
-                title: {
-                    mt: '1.5',
-                    textStyle: 'sm',
-                },
-            },
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-        variant: 'solid',
-    },
-});

package/dist/components/toaster/toast.recipe.d.ts

@@ -1 +0,0 @@
-export declare const toastSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "indicator" | "root" | "closeTrigger" | "title" | "actionTrigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"description" | "indicator" | "root" | "closeTrigger" | "title" | "actionTrigger">>;

package/dist/components/toaster/toast.recipe.js

@@ -1,90 +0,0 @@
-import { toastAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const toastSlotRecipe = defineSlotRecipe({
-    slots: toastAnatomy.keys(),
-    className: 'chakra-toast',
-    base: {
-        root: {
-            width: 'full',
-            display: 'flex',
-            alignItems: 'flex-start',
-            position: 'relative',
-            gap: '2',
-            py: '3',
-            ps: '3',
-            pe: '6',
-            borderRadius: 'md',
-            borderWidth: '1px',
-            translate: 'var(--x) var(--y)',
-            scale: 'var(--scale)',
-            zIndex: 'var(--z-index)',
-            height: 'var(--height, var(--toast-height))',
-            opacity: 'var(--opacity)',
-            willChange: 'translate, opacity, scale, height',
-            transition: 'translate 400ms, scale 400ms, opacity 400ms, height 200ms, box-shadow 200ms',
-            transitionTimingFunction: 'bounce-in',
-            _closed: {
-                transition: 'translate 400ms, scale 400ms, height 200ms, opacity 200ms',
-                transitionTimingFunction: 'bounce-out',
-            },
-            bg: 'bg.panel',
-            color: 'fg',
-            boxShadow: 'lg',
-            overflow: 'hidden',
-            '--toast-indicated-color': 'colors.fg.muted',
-            '&[data-type=warning]': {
-                '--toast-indicated-color': 'colors.fg.warning',
-            },
-            '&[data-type=success]': {
-                '--toast-indicated-color': 'colors.fg.success',
-            },
-            '&[data-type=error]': {
-                '--toast-indicated-color': 'colors.fg.error',
-            },
-            '&[data-overlap]': {
-                _before: {
-                    content: '""',
-                    position: 'absolute',
-                    inset: '0',
-                    maskImage: 'linear-gradient(to bottom, transparent, black 50%)',
-                },
-            },
-        },
-        title: {
-            fontWeight: 'medium',
-            textStyle: 'sm',
-            marginEnd: '2',
-        },
-        description: {
-            display: 'inline',
-            textStyle: 'sm',
-            opacity: '0.8',
-        },
-        indicator: {
-            flexShrink: '0',
-            boxSize: '5',
-            color: 'var(--toast-indicated-color)',
-        },
-        actionTrigger: {
-            cursor: 'button',
-            textStyle: 'sm',
-            fontWeight: 'medium',
-            height: '6',
-            px: '3',
-            ms: '-3',
-            borderRadius: 'sm',
-            alignSelf: 'flex-start',
-            transition: 'background 200ms',
-            color: 'colorPalette.solid/80',
-            _hover: {
-                bg: 'bg.subtle',
-                color: 'colorPalette.solid',
-            },
-        },
-        closeTrigger: {
-            position: 'absolute',
-            top: '2',
-            insetEnd: '2',
-        },
-    },
-});

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

@@ -1,10 +0,0 @@
-export declare const tooltipSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "trigger" | "arrow" | "arrowTip", {
-    variant: {
-        inverted: {
-            content: {
-                '--tooltip-bg': "colors.bg.inverted";
-                color: "fg.inverted";
-            };
-        };
-    };
-}>;

package/dist/components/tooltip/tooltip.recipe.js

@@ -1,52 +0,0 @@
-import { tooltipAnatomy } from '@chakra-ui/react/anatomy';
-import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
-export const tooltipSlotRecipe = defineSlotRecipe({
-    slots: tooltipAnatomy.keys(),
-    className: 'chakra-tooltip',
-    base: {
-        content: {
-            '--tooltip-bg': 'colors.bg',
-            display: 'flex',
-            alignItems: 'center',
-            bg: 'var(--tooltip-bg)',
-            color: 'fg',
-            px: '2.5',
-            py: '1',
-            borderRadius: 'panel.sm',
-            fontWeight: 'medium',
-            textStyle: 'xs',
-            boxShadow: 'md',
-            maxW: 'xs',
-            zIndex: 'tooltip',
-            transformOrigin: 'var(--transform-origin)',
-            _open: {
-                animationStyle: 'scale-fade-in',
-                animationDuration: 'fast',
-            },
-            _closed: {
-                animationStyle: 'scale-fade-out',
-                animationDuration: 'fast',
-            },
-        },
-        arrow: {
-            '--arrow-size': 'sizes.2',
-            '--arrow-background': 'var(--tooltip-bg)',
-            zIndex: '-1',
-        },
-        arrowTip: {
-            borderTopWidth: '1px',
-            borderInlineStartWidth: '1px',
-            borderColor: 'var(--tooltip-bg)',
-        },
-    },
-    variants: {
-        variant: {
-            inverted: {
-                content: {
-                    '--tooltip-bg': 'colors.bg.inverted',
-                    color: 'fg.inverted',
-                },
-            },
-        },
-    },
-});

package/dist/theme/animation-styles.d.ts

@@ -1 +0,0 @@
-export declare const animationStyles: any;

package/dist/theme/animation-styles.js

@@ -1,49 +0,0 @@
-import { defineAnimationStyles } from '@chakra-ui/react';
-export const animationStyles = defineAnimationStyles({
-    'slide-fade-in': {
-        value: {
-            transformOrigin: 'var(--transform-origin)',
-            '&[data-placement^=top]': {
-                animationName: 'slide-from-bottom, fade-in',
-            },
-            '&[data-placement^=bottom]': {
-                animationName: 'slide-from-top, fade-in',
-            },
-            '&[data-placement^=left]': {
-                animationName: 'slide-from-right, fade-in',
-            },
-            '&[data-placement^=right]': {
-                animationName: 'slide-from-left, fade-in',
-            },
-        },
-    },
-    'slide-fade-out': {
-        value: {
-            transformOrigin: 'var(--transform-origin)',
-            '&[data-placement^=top]': {
-                animationName: 'slide-to-bottom, fade-out',
-            },
-            '&[data-placement^=bottom]': {
-                animationName: 'slide-to-top, fade-out',
-            },
-            '&[data-placement^=left]': {
-                animationName: 'slide-to-right, fade-out',
-            },
-            '&[data-placement^=right]': {
-                animationName: 'slide-to-left, fade-out',
-            },
-        },
-    },
-    'scale-fade-in': {
-        value: {
-            transformOrigin: 'var(--transform-origin)',
-            animationName: 'scale-in, fade-in',
-        },
-    },
-    'scale-fade-out': {
-        value: {
-            transformOrigin: 'var(--transform-origin)',
-            animationName: 'scale-out, fade-out',
-        },
-    },
-});

package/dist/theme/breakpoints.d.ts

@@ -1,10 +0,0 @@
-export declare const breakpointValues: {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-};
-export declare const breakpoints: {
-    [k: string]: string;
-};

package/dist/theme/breakpoints.js

@@ -1,8 +0,0 @@
-export const breakpointValues = {
-    sm: '480px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-};
-export const breakpoints = Object.fromEntries(Object.entries(breakpointValues).map(([key, value]) => [key, `${value}px`]));

package/dist/theme/conditions.d.ts

@@ -1,18 +0,0 @@
-export declare const conditions: {
-    collapsible: string;
-    groupCollapsible: string;
-    groupOpen: string;
-    groupFocus: string;
-    groupHover: string;
-    groupActive: string;
-    groupFocusWithin: string;
-    groupFocusVisible: string;
-    groupDisabled: string;
-    groupChecked: string;
-    groupExpanded: string;
-    groupInvalid: string;
-    parentHover: string;
-    pressable: string;
-    popupExpanded: string;
-    rowHover: string;
-};

package/dist/theme/conditions.js

@@ -1,19 +0,0 @@
-import { defineConditions } from '@chakra-ui/react';
-export const conditions = defineConditions({
-    collapsible: '&:is([data-scope=collapsible])',
-    groupCollapsible: '.group:is([data-scope=collapsible]) &, [role=group]:is([data-scope=collapsible]) &',
-    groupOpen: '.group:is([data-state=open]) &, [role=group]:is([data-state=open]) &',
-    groupFocus: '.group:is(:focus, [data-focus]) &, [role=group]:is(:focus, [data-focus]) &',
-    groupHover: '.group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &, [role=group]:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &',
-    groupActive: '.group:is(:active, [data-active]):not(:disabled, [data-disabled]) &, [role=group]:is(:active, [data-active]):not(:disabled, [data-disabled]) &',
-    groupFocusWithin: '.group:focus-within &, [role=group]:focus-within &',
-    groupFocusVisible: '.group:is(:focus-visible, [data-focus-visible]) &, [role=group]:is(:focus-visible, [data-focus-visible]) &',
-    groupDisabled: '.group:is(:disabled, [disabled], [data-disabled]) &, [role=group]:is(:disabled, [disabled], [data-disabled]) &',
-    groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &, [role=group]:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &',
-    groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &, [role=group]:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &',
-    groupInvalid: '.group:invalid &, [role=group]:invalid &',
-    parentHover: 'button:hover &, a:hover &, [role=button]:hover &',
-    pressable: '&:is(a, button, [role=button])',
-    popupExpanded: '&:is([aria-haspopup][aria-expanded=true], [aria-haspopup][data-expanded], [aria-haspopup][data-state=expanded])',
-    rowHover: 'tr:hover &, [role=row]:hover &',
-});

package/dist/theme/fluid-font-sizes.js

@@ -1,61 +0,0 @@
-"use strict";
-// const fluidFontSizes = {
-//   'min-max': fluid({
-//     property: 'fluid-text-size',
-//     from: breakpointValues.sm,
-//     to: breakpointValues['2xl'],
-//     divider: 1,
-//   }),
-// }
-// 'fluid-text-size': {
-//   'min-max': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_2XL, divider: 1 }),
-//   'sm-md': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_MD, divider: 1 }),
-//   'sm-lg': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_LG, divider: 1 }),
-//   'sm-xl': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_XL, divider: 1 }),
-//   'md-lg': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_LG, divider: 1 }),
-//   'md-xl': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_XL, divider: 1 }),
-//   'md-2xl': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_2XL, divider: 1 }),
-//   'lg-xl': fluid({ property: 'fluid-text-size', from: BP_LG, to: BP_XL, divider: 1 }),
-//   'lg-2xl': fluid({ property: 'fluid-text-size', from: BP_LG, to: BP_2XL, divider: 1 }),
-// },
-// {
-//   utilities: {
-//     fluidFontSize: {
-//       shorthand: ['fluidFontSize'],
-//       transform(value, args) {
-//         console.log(value, args)
-//         const val = 'min-max(sm, lg)'
-//         const match = val.match(/(\w+-\w+)\((\w+),\s*(\w+)\)/)
-//         if (!match) {
-//           return {}
-//         }
-//         const [, breakpoints, min, max] = match
-//         console.log(match)
-//         const minSize = args.token.raw(`fontSizes.${min}`)?.value
-//         const maxSize = args.token.raw(`fontSizes.${max}`)?.value
-//         console.log(minSize, maxSize)
-//         return {
-//           fontSize: `var(--fluid-text-size-${breakpoints})`,
-//           '--fluid-text-size-min': minSize,
-//           '--fluid-text-size-max': maxSize,
-//         }
-//       },
-//     },
-//     fluidFontSizeMin: {
-//       shorthand: ['fluidFontSizeMin'],
-//       transform(value, args) {
-//         return {
-//           '--fluid-text-size-min': value,
-//         }
-//       },
-//     },
-//     fluidFontSizeMax: {
-//       shorthand: ['fluidFontSizeMax'],
-//       transform(value, args) {
-//         return {
-//           '--fluid-text-size-max': value,
-//         }
-//       },
-//     },
-//   },
-// },

package/dist/theme/global-css.d.ts

@@ -1 +0,0 @@
-export declare const globalCss: import("@chakra-ui/react").GlobalStyleObject;