@saas-ui/react 3.0.0-next.3 → 3.0.0-next.30

package/dist/theme/tokens/keyframes.js

@@ -0,0 +1,157 @@
+import { defineKeyframes } from '@chakra-ui/react';
+export const keyframes = defineKeyframes({
+    spin: {
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' },
+    },
+    pulse: {
+        '50%': { opacity: '0.5' },
+    },
+    ping: {
+        '75%, 100%': {
+            transform: 'scale(2)',
+            opacity: '0',
+        },
+    },
+    bounce: {
+        '0%, 100%': {
+            transform: 'translateY(-25%)',
+            animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
+        },
+        '50%': {
+            transform: 'none',
+            animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
+        },
+    },
+    'bg-position': {
+        from: { backgroundPosition: 'var(--animate-from, 1rem) 0' },
+        to: { backgroundPosition: 'var(--animate-to, 0) 0' },
+    },
+    position: {
+        from: {
+            insetInlineStart: 'var(--animate-from-x)',
+            insetBlockStart: 'var(--animate-from-y)',
+        },
+        to: {
+            insetInlineStart: 'var(--animate-to-x)',
+            insetBlockStart: 'var(--animate-to-y)',
+        },
+    },
+    'circular-progress': {
+        '0%': {
+            strokeDasharray: '1, 400',
+            strokeDashoffset: '0',
+        },
+        '50%': {
+            strokeDasharray: '400, 400',
+            strokeDashoffset: '-100%',
+        },
+        '100%': {
+            strokeDasharray: '400, 400',
+            strokeDashoffset: '-260%',
+        },
+    },
+    // collapse
+    'expand-height': {
+        from: { height: '0' },
+        to: { height: 'var(--height)' },
+    },
+    'collapse-height': {
+        from: { height: 'var(--height)' },
+        to: { height: '0' },
+    },
+    'expand-width': {
+        from: { width: '0' },
+        to: { width: 'var(--width)' },
+    },
+    'collapse-width': {
+        from: { height: 'var(--width)' },
+        to: { height: '0' },
+    },
+    // fade
+    'fade-in': {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+    },
+    'fade-out': {
+        from: { opacity: 1 },
+        to: { opacity: 0 },
+    },
+    // slide from (full)
+    'slide-from-left-full': {
+        from: { translate: '-100% 0' },
+        to: { translate: '0 0' },
+    },
+    'slide-from-right-full': {
+        from: { translate: '100% 0' },
+        to: { translate: '0 0' },
+    },
+    'slide-from-top-full': {
+        from: { translate: '0 -100%' },
+        to: { translate: '0 0' },
+    },
+    'slide-from-bottom-full': {
+        from: { translate: '0 100%' },
+        to: { translate: '0 0' },
+    },
+    // slide to (full)
+    'slide-to-left-full': {
+        from: { translate: '0 0' },
+        to: { translate: '-100% 0' },
+    },
+    'slide-to-right-full': {
+        from: { translate: '0 0' },
+        to: { translate: '100% 0' },
+    },
+    'slide-to-top-full': {
+        from: { translate: '0 0' },
+        to: { translate: '0 -100%' },
+    },
+    'slide-to-bottom-full': {
+        from: { translate: '0 0' },
+        to: { translate: '0 100%' },
+    },
+    // slide from
+    'slide-from-top': {
+        '0%': { translate: '0 -0.5rem' },
+        to: { translate: '0' },
+    },
+    'slide-from-bottom': {
+        '0%': { translate: '0 0.5rem' },
+        to: { translate: '0' },
+    },
+    'slide-from-left': {
+        '0%': { translate: '-0.5rem 0' },
+        to: { translate: '0' },
+    },
+    'slide-from-right': {
+        '0%': { translate: '0.5rem 0' },
+        to: { translate: '0' },
+    },
+    // slide to
+    'slide-to-top': {
+        '0%': { translate: '0' },
+        to: { translate: '0 -0.5rem' },
+    },
+    'slide-to-bottom': {
+        '0%': { translate: '0' },
+        to: { translate: '0 0.5rem' },
+    },
+    'slide-to-left': {
+        '0%': { translate: '0' },
+        to: { translate: '-0.5rem 0' },
+    },
+    'slide-to-right': {
+        '0%': { translate: '0' },
+        to: { translate: '0.5rem 0' },
+    },
+    // scale
+    'scale-in': {
+        from: { scale: '0.95' },
+        to: { scale: '1' },
+    },
+    'scale-out': {
+        from: { scale: '1' },
+        to: { scale: '0.95' },
+    },
+});

package/dist/theme/tokens/letter-spacing.d.ts

@@ -0,0 +1,17 @@
+export declare const letterSpacings: {
+    tighter: {
+        value: string;
+    };
+    tight: {
+        value: string;
+    };
+    wide: {
+        value: string;
+    };
+    wider: {
+        value: string;
+    };
+    widest: {
+        value: string;
+    };
+};

package/dist/theme/tokens/letter-spacing.js

@@ -0,0 +1,8 @@
+import { defineTokens } from '@chakra-ui/react';
+export const letterSpacings = defineTokens.letterSpacings({
+    tighter: { value: '-0.05em' },
+    tight: { value: '-0.025em' },
+    wide: { value: '0.025em' },
+    wider: { value: '0.05em' },
+    widest: { value: '0.1em' },
+});

package/dist/theme/tokens/line-heights.d.ts

@@ -0,0 +1,41 @@
+export declare const lineHeights: {
+    shorter: {
+        value: string;
+    };
+    short: {
+        value: string;
+    };
+    moderate: {
+        value: string;
+    };
+    tall: {
+        value: string;
+    };
+    taller: {
+        value: string;
+    };
+    '3': {
+        value: string;
+    };
+    '4': {
+        value: string;
+    };
+    '5': {
+        value: string;
+    };
+    '6': {
+        value: string;
+    };
+    '7': {
+        value: string;
+    };
+    '8': {
+        value: string;
+    };
+    '9': {
+        value: string;
+    };
+    '10': {
+        value: string;
+    };
+};

package/dist/theme/tokens/line-heights.js

@@ -0,0 +1,17 @@
+import { defineTokens } from '@chakra-ui/react';
+import { scaleToken } from "../utils.js";
+export const lineHeights = defineTokens.lineHeights({
+    shorter: { value: scaleToken('1.25') },
+    short: { value: scaleToken('1.375') },
+    moderate: { value: scaleToken('1.5') },
+    tall: { value: scaleToken('1.625') },
+    taller: { value: scaleToken('2') },
+    '3': { value: scaleToken('0.75rem') },
+    '4': { value: scaleToken('1rem') },
+    '5': { value: scaleToken('1.25rem') },
+    '6': { value: scaleToken('1.5rem') },
+    '7': { value: scaleToken('1.75rem') },
+    '8': { value: scaleToken('2rem') },
+    '9': { value: scaleToken('2.25rem') },
+    '10': { value: scaleToken('2.5rem') },
+});

package/dist/theme/tokens/radius.d.ts

@@ -0,0 +1,32 @@
+export declare const radii: {
+    '2xs': {
+        value: string;
+    };
+    xs: {
+        value: string;
+    };
+    sm: {
+        value: string;
+    };
+    md: {
+        value: string;
+    };
+    lg: {
+        value: string;
+    };
+    xl: {
+        value: string;
+    };
+    '2xl': {
+        value: string;
+    };
+    '3xl': {
+        value: string;
+    };
+    '4xl': {
+        value: string;
+    };
+    full: {
+        value: string;
+    };
+};

package/dist/theme/tokens/radius.js

@@ -0,0 +1,15 @@
+import { defineTokens } from '@chakra-ui/react';
+export const radii = defineTokens.radii({
+    '2xs': {
+        value: '0.15rem',
+    },
+    xs: { value: '0.2rem' },
+    sm: { value: '0.25rem' },
+    md: { value: '0.375rem' },
+    lg: { value: '0.5rem' },
+    xl: { value: '0.75rem' },
+    '2xl': { value: '1rem' },
+    '3xl': { value: '1.5rem' },
+    '4xl': { value: '2rem' },
+    full: { value: '9999px' },
+});

package/dist/theme/tokens/sizes.d.ts

@@ -0,0 +1,257 @@
+export declare const sizes: {
+    max: {
+        value: string;
+    };
+    min: {
+        value: string;
+    };
+    fit: {
+        value: string;
+    };
+    prose: {
+        value: string;
+    };
+    full: {
+        value: string;
+    };
+    dvh: {
+        value: string;
+    };
+    svh: {
+        value: string;
+    };
+    lvh: {
+        value: string;
+    };
+    dvw: {
+        value: string;
+    };
+    svw: {
+        value: string;
+    };
+    lvw: {
+        value: string;
+    };
+    vw: {
+        value: string;
+    };
+    vh: {
+        value: string;
+    };
+    '1/2': {
+        value: string;
+    };
+    '1/3': {
+        value: string;
+    };
+    '2/3': {
+        value: string;
+    };
+    '1/4': {
+        value: string;
+    };
+    '3/4': {
+        value: string;
+    };
+    '1/5': {
+        value: string;
+    };
+    '2/5': {
+        value: string;
+    };
+    '3/5': {
+        value: string;
+    };
+    '4/5': {
+        value: string;
+    };
+    '1/6': {
+        value: string;
+    };
+    '2/6': {
+        value: string;
+    };
+    '3/6': {
+        value: string;
+    };
+    '4/6': {
+        value: string;
+    };
+    '5/6': {
+        value: string;
+    };
+    '1/12': {
+        value: string;
+    };
+    '2/12': {
+        value: string;
+    };
+    '3/12': {
+        value: string;
+    };
+    '4/12': {
+        value: string;
+    };
+    '5/12': {
+        value: string;
+    };
+    '6/12': {
+        value: string;
+    };
+    '7/12': {
+        value: string;
+    };
+    '8/12': {
+        value: string;
+    };
+    '9/12': {
+        value: string;
+    };
+    '10/12': {
+        value: string;
+    };
+    '11/12': {
+        value: string;
+    };
+    0.5: {
+        value: string;
+    };
+    1: {
+        value: string;
+    };
+    1.5: {
+        value: string;
+    };
+    2: {
+        value: string;
+    };
+    2.5: {
+        value: string;
+    };
+    3: {
+        value: string;
+    };
+    3.5: {
+        value: string;
+    };
+    4: {
+        value: string;
+    };
+    4.5: {
+        value: string;
+    };
+    5: {
+        value: string;
+    };
+    6: {
+        value: string;
+    };
+    7: {
+        value: string;
+    };
+    8: {
+        value: string;
+    };
+    9: {
+        value: string;
+    };
+    10: {
+        value: string;
+    };
+    12: {
+        value: string;
+    };
+    14: {
+        value: string;
+    };
+    16: {
+        value: string;
+    };
+    20: {
+        value: string;
+    };
+    24: {
+        value: string;
+    };
+    28: {
+        value: string;
+    };
+    32: {
+        value: string;
+    };
+    36: {
+        value: string;
+    };
+    40: {
+        value: string;
+    };
+    44: {
+        value: string;
+    };
+    48: {
+        value: string;
+    };
+    52: {
+        value: string;
+    };
+    56: {
+        value: string;
+    };
+    60: {
+        value: string;
+    };
+    64: {
+        value: string;
+    };
+    72: {
+        value: string;
+    };
+    80: {
+        value: string;
+    };
+    96: {
+        value: string;
+    };
+    '3xs': {
+        value: string;
+    };
+    '2xs': {
+        value: string;
+    };
+    xs: {
+        value: string;
+    };
+    sm: {
+        value: string;
+    };
+    md: {
+        value: string;
+    };
+    lg: {
+        value: string;
+    };
+    xl: {
+        value: string;
+    };
+    '2xl': {
+        value: string;
+    };
+    '3xl': {
+        value: string;
+    };
+    '4xl': {
+        value: string;
+    };
+    '5xl': {
+        value: string;
+    };
+    '6xl': {
+        value: string;
+    };
+    '7xl': {
+        value: string;
+    };
+    '8xl': {
+        value: string;
+    };
+};

package/dist/theme/tokens/sizes.js

@@ -0,0 +1,66 @@
+import { defineTokens } from '@chakra-ui/react';
+import { spacing } from "./spacing.js";
+const largeSizes = defineTokens.sizes({
+    '3xs': { value: '14rem' },
+    '2xs': { value: '16rem' },
+    xs: { value: '20rem' },
+    sm: { value: '24rem' },
+    md: { value: '28rem' },
+    lg: { value: '32rem' },
+    xl: { value: '36rem' },
+    '2xl': { value: '42rem' },
+    '3xl': { value: '48rem' },
+    '4xl': { value: '56rem' },
+    '5xl': { value: '64rem' },
+    '6xl': { value: '72rem' },
+    '7xl': { value: '80rem' },
+    '8xl': { value: '90rem' },
+});
+const namedSizes = defineTokens.sizes({
+    max: { value: 'max-content' },
+    min: { value: 'min-content' },
+    fit: { value: 'fit-content' },
+    prose: { value: '60ch' },
+    full: { value: '100%' },
+    dvh: { value: '100dvh' },
+    svh: { value: '100svh' },
+    lvh: { value: '100lvh' },
+    dvw: { value: '100dvw' },
+    svw: { value: '100svw' },
+    lvw: { value: '100lvw' },
+    vw: { value: '100vw' },
+    vh: { value: '100vh' },
+});
+const fractionalSizes = defineTokens.sizes({
+    '1/2': { value: '50%' },
+    '1/3': { value: '33.333333%' },
+    '2/3': { value: '66.666667%' },
+    '1/4': { value: '25%' },
+    '3/4': { value: '75%' },
+    '1/5': { value: '20%' },
+    '2/5': { value: '40%' },
+    '3/5': { value: '60%' },
+    '4/5': { value: '80%' },
+    '1/6': { value: '16.666667%' },
+    '2/6': { value: '33.333333%' },
+    '3/6': { value: '50%' },
+    '4/6': { value: '66.666667%' },
+    '5/6': { value: '83.333333%' },
+    '1/12': { value: '8.333333%' },
+    '2/12': { value: '16.666667%' },
+    '3/12': { value: '25%' },
+    '4/12': { value: '33.333333%' },
+    '5/12': { value: '41.666667%' },
+    '6/12': { value: '50%' },
+    '7/12': { value: '58.333333%' },
+    '8/12': { value: '66.666667%' },
+    '9/12': { value: '75%' },
+    '10/12': { value: '83.333333%' },
+    '11/12': { value: '91.666667%' },
+});
+export const sizes = defineTokens.sizes({
+    ...largeSizes,
+    ...spacing,
+    ...fractionalSizes,
+    ...namedSizes,
+});

package/dist/theme/tokens/spacing.d.ts

@@ -0,0 +1,101 @@
+export declare const spacing: {
+    0.5: {
+        value: string;
+    };
+    1: {
+        value: string;
+    };
+    1.5: {
+        value: string;
+    };
+    2: {
+        value: string;
+    };
+    2.5: {
+        value: string;
+    };
+    3: {
+        value: string;
+    };
+    3.5: {
+        value: string;
+    };
+    4: {
+        value: string;
+    };
+    4.5: {
+        value: string;
+    };
+    5: {
+        value: string;
+    };
+    6: {
+        value: string;
+    };
+    7: {
+        value: string;
+    };
+    8: {
+        value: string;
+    };
+    9: {
+        value: string;
+    };
+    10: {
+        value: string;
+    };
+    12: {
+        value: string;
+    };
+    14: {
+        value: string;
+    };
+    16: {
+        value: string;
+    };
+    20: {
+        value: string;
+    };
+    24: {
+        value: string;
+    };
+    28: {
+        value: string;
+    };
+    32: {
+        value: string;
+    };
+    36: {
+        value: string;
+    };
+    40: {
+        value: string;
+    };
+    44: {
+        value: string;
+    };
+    48: {
+        value: string;
+    };
+    52: {
+        value: string;
+    };
+    56: {
+        value: string;
+    };
+    60: {
+        value: string;
+    };
+    64: {
+        value: string;
+    };
+    72: {
+        value: string;
+    };
+    80: {
+        value: string;
+    };
+    96: {
+        value: string;
+    };
+};