@saas-ui/react 3.0.0-next.2 → 3.0.0-next.20

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';
+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;
+    };
+};

package/dist/theme/tokens/spacing.js

@@ -0,0 +1,37 @@
+import { defineTokens } from '@chakra-ui/react';
+import { scaleToken } from '../utils';
+export const spacing = defineTokens.spacing({
+    0.5: { value: scaleToken('0.125rem') },
+    1: { value: scaleToken('0.25rem') },
+    1.5: { value: scaleToken('0.375rem') },
+    2: { value: scaleToken('0.5rem') },
+    2.5: { value: scaleToken('0.625rem') },
+    3: { value: scaleToken('0.75rem') },
+    3.5: { value: scaleToken('0.875rem') },
+    4: { value: scaleToken('1rem') },
+    4.5: { value: scaleToken('1.125rem') },
+    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') },
+    12: { value: scaleToken('3rem') },
+    14: { value: scaleToken('3.5rem') },
+    16: { value: scaleToken('4rem') },
+    20: { value: scaleToken('5rem') },
+    24: { value: scaleToken('6rem') },
+    28: { value: scaleToken('7rem') },
+    32: { value: scaleToken('8rem') },
+    36: { value: scaleToken('9rem') },
+    40: { value: scaleToken('10rem') },
+    44: { value: scaleToken('11rem') },
+    48: { value: scaleToken('12rem') },
+    52: { value: scaleToken('13rem') },
+    56: { value: scaleToken('14rem') },
+    60: { value: scaleToken('15rem') },
+    64: { value: scaleToken('16rem') },
+    72: { value: scaleToken('18rem') },
+    80: { value: scaleToken('20rem') },
+    96: { value: scaleToken('24rem') },
+});

package/dist/theme/tokens/z-indices.d.ts

@@ -0,0 +1,53 @@
+export declare const zIndices: {
+    'layer-1': {
+        value: number;
+    };
+    'layer-2': {
+        value: number;
+    };
+    'layer-3': {
+        value: number;
+    };
+    'layer-4': {
+        value: number;
+    };
+    hide: {
+        value: number;
+    };
+    base: {
+        value: number;
+    };
+    docked: {
+        value: number;
+    };
+    dropdown: {
+        value: number;
+    };
+    sticky: {
+        value: number;
+    };
+    banner: {
+        value: number;
+    };
+    overlay: {
+        value: number;
+    };
+    modal: {
+        value: number;
+    };
+    popover: {
+        value: number;
+    };
+    skipNav: {
+        value: number;
+    };
+    toast: {
+        value: number;
+    };
+    tooltip: {
+        value: number;
+    };
+    max: {
+        value: number;
+    };
+};

package/dist/theme/tokens/z-indices.js

@@ -0,0 +1,32 @@
+import { defineTokens } from '@chakra-ui/react';
+export const zIndices = defineTokens.zIndex({
+    // Local elements, eg a badge of an avatar.
+    'layer-1': {
+        value: 1,
+    },
+    // Overlay elements, popovers, tooltips, menus, etc.
+    'layer-2': {
+        value: 10,
+    },
+    // Elements that should render above main content, eg a sticky header.
+    'layer-3': {
+        value: 100,
+    },
+    // Elements not part of main content, eg dialogs.
+    'layer-4': {
+        value: 1000,
+    },
+    hide: { value: -1 },
+    base: { value: 0 },
+    docked: { value: 10 },
+    dropdown: { value: 1000 },
+    sticky: { value: 1100 },
+    banner: { value: 1200 },
+    overlay: { value: 1300 },
+    modal: { value: 1400 },
+    popover: { value: 1500 },
+    skipNav: { value: 1600 },
+    toast: { value: 1700 },
+    tooltip: { value: 1800 },
+    max: { value: 2147483647 },
+});

package/dist/theme/utilities.d.ts

@@ -0,0 +1,10 @@
+export declare const utilities: {
+    focusRing: {
+        values: string[];
+        transform(value: any, { token }: any): any;
+    };
+    focusVisibleRing: {
+        values: string[];
+        transform(value: any, { token }: any): any;
+    };
+};

package/dist/theme/utilities.js

@@ -0,0 +1,49 @@
+const createFocusRing = (selector) => {
+    return {
+        values: ['outside', 'inside', 'mixed', 'none'],
+        transform(value, { token }) {
+            const focusRingColor = token('colors.colorPalette.focusRing');
+            const styles = {
+                inside: {
+                    '--focus-ring-color': focusRingColor,
+                    [selector]: {
+                        outlineOffset: '0px',
+                        outlineWidth: 'var(--focus-ring-width, 0)',
+                        outlineColor: 'var(--focus-ring-color)',
+                        outlineStyle: 'var(--focus-ring-style, solid)',
+                        borderColor: 'var(--focus-ring-color)',
+                    },
+                },
+                outside: {
+                    '--focus-ring-color': focusRingColor,
+                    [selector]: {
+                        outlineWidth: 'var(--focus-ring-width, 1px)',
+                        outlineOffset: 'var(--focus-ring-offset, 2px)',
+                        outlineStyle: 'var(--focus-ring-style, solid)',
+                        outlineColor: 'var(--focus-ring-color)',
+                    },
+                },
+                mixed: {
+                    '--focus-ring-color': focusRingColor,
+                    [selector]: {
+                        outlineWidth: 'var(--focus-ring-width, 3px)',
+                        outlineStyle: 'var(--focus-ring-style, solid)',
+                        outlineColor: 'color-mix(in srgb, var(--focus-ring-color), transparent 60%)',
+                        borderColor: 'var(--focus-ring-color)',
+                    },
+                },
+                none: {
+                    '--focus-ring-color': focusRingColor,
+                    [selector]: {
+                        outline: 'none',
+                    },
+                },
+            };
+            return styles[value] ?? {};
+        },
+    };
+};
+export const utilities = {
+    focusRing: createFocusRing('&:is(:focus, [data-focus])'),
+    focusVisibleRing: createFocusRing('&:is(:focus-visible, [data-focus-visible])'),
+};

package/dist/theme/utils.d.ts

@@ -0,0 +1,19 @@
+export declare function mapEntries<A, B, K extends string | number | symbol>(obj: {
+    [key in K]: A;
+}, f: (key: K, val: A) => [K, B]): {
+    [key in K]: B;
+};
+export declare function scaleToken(value: string | number): string;
+export declare function radiusToken(value: string | number): string;
+export declare function fluid<P extends string, MinPx extends number, MaxPx extends number>(params: {
+    property: P;
+    from: MinPx;
+    to: MaxPx;
+    divider?: number;
+}): `
+    clamp(calc(var(---${P}-min) * 1rem), calc((var(---${P}-scope) * 100vw) + (var(---${P}-intercept) * 1rem)), calc(var(---${P}-max) * 1rem));
+    ---${P}-min: var(--${P}-min) / ${number};
+    ---${P}-max: var(--${P}-max) / ${number};
+    ---${P}-scope: (var(---${P}-max) - var(---${P}-min)) / ${number};
+    ---${P}-intercept: calc(var(---${P}-min) - (var(---${P}-scope) * ${number}));
+  `;

package/dist/theme/utils.js

@@ -0,0 +1,34 @@
+export function mapEntries(obj, f) {
+    const result = {};
+    for (const key in obj) {
+        const kv = f(key, obj[key]);
+        result[kv[0]] = kv[1];
+    }
+    return result;
+}
+export function scaleToken(value) {
+    return `calc(${value} * var(--scale-factor))`;
+}
+export function radiusToken(value) {
+    return `calc(${value} * var(--scale-factor) * var(--radius-factor))`;
+}
+const BASE_GRID_SIZE = 4;
+const BASE_FONT_SIZE = 16;
+export function fluid(params) {
+    const divider = params.divider ?? BASE_GRID_SIZE;
+    const breakpointMin = params.from / BASE_FONT_SIZE;
+    const breakpointMax = params.to / BASE_FONT_SIZE;
+    const breakpointScope = breakpointMax - breakpointMin;
+    return `
+    clamp(calc(var(---${params.property}-min) * 1rem), calc((var(---${params.property}-scope) * 100vw) + (var(---${params.property}-intercept) * 1rem)), calc(var(---${params.property}-max) * 1rem));
+    ---${params.property}-min: var(--${params.property}-min) / ${divider};
+    ---${params.property}-max: var(--${params.property}-max) / ${divider};
+    ---${params.property}-scope: (var(---${params.property}-max) - var(---${params.property}-min)) / ${breakpointScope};
+    ---${params.property}-intercept: calc(var(---${params.property}-min) - (var(---${params.property}-scope) * ${breakpointMin}));
+  `;
+}
+// fontSize: `clamp(calc(var(--${params.property}-min) * 1rem), calc((var(--${params.property}-scope) * 100vw) + (var(--${params.property}-intercept) * 1rem)), calc(var(--${params.property}-max) * 1rem))`,
+// [`--${params.property}-min`]: `var(--${params.property}-min) / ${divider}`,
+// [`--${params.property}-max`]: `var(--${params.property}-max) / ${divider}`,
+// [`--${params.property}-scope`]: `(var(--${params.property}-max) - var(---${params.property}-min)) / ${breakpointScope}`,
+// [`--${params.property}-intercept`]: `calc(var(--${params.property}-min) - (var(--${params.property}-scope) * ${breakpointMin}))`,

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import { RecipeProps as ChakraRecipeProps, SlotRecipeProps as ChakraSlotRecipeProps, type RecipeDefinition } from '@chakra-ui/react';
+export type RecipeProps<T, DefaultRecipe> = ChakraRecipeProps<T> extends {
+    recipe?: RecipeDefinition;
+} ? ChakraRecipeProps<T> & DefaultRecipe : ChakraRecipeProps<T>;
+export type SlotRecipeProps<T, DefaultSlotRecipe> = ChakraSlotRecipeProps<T> extends {
+    variant?: any;
+} ? ChakraSlotRecipeProps<T> : ChakraSlotRecipeProps<T> & DefaultSlotRecipe;

package/dist/types.js

@@ -0,0 +1 @@
+export {};