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

package/dist/provider/use-link.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function useLink(): React.ElementType;

package/dist/provider/use-link.js

@@ -0,0 +1,9 @@
+import { chakra } from '@chakra-ui/react';
+import { useSui } from "./sui-provider.js";
+export function useLink() {
+    const context = useSui();
+    if (context?.linkComponent) {
+        return context.linkComponent;
+    }
+    return chakra.a;
+}

package/dist/styled-system/create-recipe-context.d.ts

@@ -0,0 +1,17 @@
+import { type RecipeKey, type UseRecipeOptions } from '@chakra-ui/react';
+import type { JsxFactoryOptions } from './factory.types.ts';
+export declare function createRecipeContext<K extends RecipeKey>(options: UseRecipeOptions<K>): {
+    withContext: <T, P>(Component: React.ElementType<any>, options?: JsxFactoryOptions<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    PropsProvider: import("react").Provider<Record<string, any>>;
+    withPropsProvider: <P>() => React.Provider<Partial<P>>;
+    usePropsContext: () => Record<string, any>;
+    useRecipeResult: (props: any) => {
+        styles: Readonly<import("@chakra-ui/react").SystemStyleObject>;
+        className: string;
+        props: {
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+        };
+    };
+};

package/dist/styled-system/create-recipe-context.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { chakra, createContext, mergeProps, useRecipe, } from '@chakra-ui/react';
+import { cx } from '@saas-ui/core/utils';
+import { EMPTY_STYLES } from "./empty.js";
+const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+export function createRecipeContext(options) {
+    const { key: recipeKey, recipe: recipeConfig } = options;
+    const contextName = upperFirst(recipeKey || recipeConfig.className || 'Component');
+    const [PropsProvider, usePropsContext] = createContext({
+        strict: false,
+        name: `${contextName}PropsContext`,
+        providerName: `${contextName}PropsContext`,
+    });
+    function useRecipeResult(props) {
+        const { unstyled, ...restProps } = props;
+        const recipe = useRecipe({
+            key: recipeKey,
+            recipe: restProps.recipe || recipeConfig,
+        });
+        // @ts-ignore
+        const [variantProps, otherProps] = recipe.splitVariantProps(restProps);
+        const styles = unstyled ? EMPTY_STYLES : recipe(variantProps);
+        return {
+            styles,
+            className: recipe.className,
+            props: otherProps,
+        };
+    }
+    const withContext = (Component, options) => {
+        const SuperComponent = chakra(Component, {}, options);
+        const StyledComponent = forwardRef((inProps, ref) => {
+            const props = mergeProps(usePropsContext(), inProps);
+            const { styles, className, props: localProps } = useRecipeResult(props);
+            return (_jsx(SuperComponent, { ...localProps, ref: ref, css: [styles, props.css], className: cx(className, props.className) }));
+        });
+        // @ts-expect-error
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    function withPropsProvider() {
+        return PropsProvider;
+    }
+    return {
+        withContext,
+        PropsProvider,
+        withPropsProvider,
+        usePropsContext,
+        useRecipeResult,
+    };
+}

package/dist/styled-system/create-slot-recipe-context.d.ts

@@ -0,0 +1,35 @@
+import { type SlotRecipeKey, type UseSlotRecipeOptions } from '@chakra-ui/react';
+import type { SystemStyleObject } from '@chakra-ui/react';
+import type { JsxFactoryOptions } from './factory.types.ts';
+type ConfigRecipeSlots = any;
+interface WrapElementProps<P> {
+    wrapElement?(element: React.ReactElement, props: P): React.ReactElement;
+}
+interface WithRootProviderOptions<P> extends WrapElementProps<P> {
+    defaultProps?: Partial<P>;
+}
+interface WithProviderOptions<P> extends JsxFactoryOptions<P>, WrapElementProps<P> {
+}
+interface WithContextOptions<P> extends JsxFactoryOptions<P> {
+}
+export declare const createSlotRecipeContext: <R extends SlotRecipeKey>(options: UseSlotRecipeOptions<R>) => {
+    StylesProvider: import("react").Provider<Record<string, SystemStyleObject>>;
+    ClassNamesProvider: import("react").Provider<Record<string, string>>;
+    PropsProvider: import("react").Provider<Record<string, any>>;
+    usePropsContext: () => Record<string, any>;
+    useRecipeResult: (props: any) => {
+        styles: Record<string, SystemStyleObject>;
+        classNames: Record<string, string>;
+        props: {
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+        };
+    };
+    withProvider: <T, P>(Component: React.ElementType<any>, slot: R extends keyof ConfigRecipeSlots ? ConfigRecipeSlots[R] : string, options?: WithProviderOptions<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    withContext: <T, P_1>(Component: React.ElementType<any>, slot?: R extends keyof ConfigRecipeSlots ? ConfigRecipeSlots[R] : string, options?: WithContextOptions<P_1>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P_1> & React.RefAttributes<T>>;
+    withRootProvider: <P_2>(Component: React.ElementType<any>, options?: WithRootProviderOptions<P_2>) => React.FC<React.PropsWithoutRef<P_2>>;
+    useStyles: () => Record<string, SystemStyleObject>;
+    useClassNames: () => Record<string, string>;
+};
+export {};

package/dist/styled-system/create-slot-recipe-context.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { chakra, createContext, mergeProps, useSlotRecipe, } from '@chakra-ui/react';
+import { cx } from '@saas-ui/core/utils';
+import { EMPTY_SLOT_STYLES } from "./empty.js";
+const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+export const createSlotRecipeContext = (options) => {
+    const { key: recipeKey, recipe: recipeConfig } = options;
+    const contextName = upperFirst(recipeKey || recipeConfig.className || 'Component');
+    const [StylesProvider, useStyles] = createContext({
+        name: `${contextName}StylesContext`,
+        errorMessage: `use${contextName}Styles returned is 'undefined'. Seems you forgot to wrap the components in "<${contextName}.Root />" `,
+    });
+    const [ClassNamesProvider, useClassNames] = createContext({
+        name: `${contextName}ClassNameContext`,
+        errorMessage: `use${contextName}ClassNames returned is 'undefined'. Seems you forgot to wrap the components in "<${contextName}.Root />" `,
+        strict: false,
+    });
+    const [PropsProvider, usePropsContext] = createContext({
+        strict: false,
+        name: `${contextName}PropsContext`,
+        providerName: `${contextName}PropsContext`,
+        defaultValue: {},
+    });
+    function useRecipeResult(props) {
+        const { unstyled, ...restProps } = props;
+        const slotRecipe = useSlotRecipe({
+            key: recipeKey,
+            recipe: restProps.recipe || recipeConfig,
+        });
+        // @ts-ignore
+        const [variantProps, otherProps] = slotRecipe.splitVariantProps(restProps);
+        const styles = unstyled ? EMPTY_SLOT_STYLES : slotRecipe(variantProps);
+        return {
+            styles: styles,
+            classNames: slotRecipe.classNameMap,
+            props: otherProps,
+        };
+    }
+    function withRootProvider(Component, options = {}) {
+        const { defaultProps } = options;
+        const StyledComponent = (inProps) => {
+            const props = mergeProps(defaultProps, usePropsContext(), inProps);
+            const { styles, classNames, props: rootProps } = useRecipeResult(props);
+            return (_jsx(StylesProvider, { value: styles, children: _jsx(ClassNamesProvider, { value: classNames, children: _jsx(Component, { ...rootProps }) }) }));
+        };
+        // @ts-expect-error
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    }
+    const withProvider = (Component, slot, options) => {
+        const { defaultProps, ...restOptions } = options ?? {};
+        const SuperComponent = chakra(Component, {}, restOptions);
+        const StyledComponent = forwardRef((inProps, ref) => {
+            const props = mergeProps(defaultProps ?? {}, usePropsContext(), inProps);
+            const { styles, props: rootProps, classNames } = useRecipeResult(props);
+            const className = classNames[slot];
+            const element = (_jsx(StylesProvider, { value: styles, children: _jsx(ClassNamesProvider, { value: classNames, children: _jsx(SuperComponent, { ref: ref, ...rootProps, css: [styles[slot], props.css], className: cx(props.className, className) }) }) }));
+            return options?.wrapElement?.(element, props) ?? element;
+        });
+        // @ts-expect-error
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    const withContext = (Component, slot, options) => {
+        const SuperComponent = chakra(Component, {}, options);
+        const StyledComponent = forwardRef((props, ref) => {
+            const styles = useStyles();
+            const classNames = useClassNames();
+            const className = classNames?.[slot];
+            return (_jsx(SuperComponent, { ...props, css: [slot ? styles[slot] : undefined, props.css], ref: ref, className: cx(props.className, className) }));
+        });
+        // @ts-expect-error
+        StyledComponent.displayName = Component.displayName || Component.name;
+        return StyledComponent;
+    };
+    return {
+        StylesProvider,
+        ClassNamesProvider,
+        PropsProvider,
+        usePropsContext,
+        useRecipeResult,
+        withProvider,
+        withContext,
+        withRootProvider,
+        useStyles,
+        useClassNames,
+    };
+};

package/dist/styled-system/empty.d.ts

@@ -0,0 +1,3 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+export declare const EMPTY_STYLES: Readonly<SystemStyleObject>;
+export declare const EMPTY_SLOT_STYLES: Readonly<Record<string, SystemStyleObject>>;

package/dist/styled-system/empty.js

@@ -0,0 +1,2 @@
+export const EMPTY_STYLES = Object.freeze({});
+export const EMPTY_SLOT_STYLES = Object.freeze({});

package/dist/styled-system/factory.types.d.ts

@@ -0,0 +1,7 @@
+export type DataAttr = Record<`data-${string}`, string | number | undefined | null | boolean>;
+export interface JsxFactoryOptions<TProps> {
+    forwardProps?: string[];
+    defaultProps?: Partial<TProps> & DataAttr;
+    forwardAsChild?: boolean;
+    shouldForwardProp?(prop: string, variantKeys: string[]): boolean;
+}

package/dist/styled-system/factory.types.js

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

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

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

package/dist/theme/animation-styles.js

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,61 @@
+"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

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

package/dist/theme/global-css.js

@@ -0,0 +1,61 @@
+import { defineGlobalStyles } from '@chakra-ui/react';
+const empty = 'var(--chakra-empty,/*!*/ /*!*/)';
+export const globalCss = defineGlobalStyles({
+    '*': {
+        '--ring-inset': empty,
+        '--ring-offset-width': '0px',
+        '--ring-offset-color': '#fff',
+        '--ring-color': 'rgba(66, 153, 225, 0.6)',
+        '--ring-offset-shadow': '0 0 #0000',
+        '--ring-shadow': '0 0 #0000',
+        ...Object.fromEntries([
+            'brightness',
+            'contrast',
+            'grayscale',
+            'hue-rotate',
+            'invert',
+            'saturate',
+            'sepia',
+            'drop-shadow',
+        ].map((prop) => [`--${prop}`, empty])),
+        ...Object.fromEntries([
+            'blur',
+            'brightness',
+            'contrast',
+            'grayscale',
+            'hue-rotate',
+            'invert',
+            'opacity',
+            'saturate',
+            'sepia',
+        ].map((prop) => [`--backdrop-${prop}`, empty])),
+        '--global-font-mono': 'fonts.mono',
+        '--global-font-body': 'fonts.body',
+        '--global-color-border': 'colors.border',
+        '--cursor-button': 'default',
+        // '--radius-factor': '1',
+        // '--radius-control': '1',
+        // '--radius-panel': '1',
+        // '--radius-indicator': '1',
+        '--radius-full': '9999px',
+        '--scale-factor': '1',
+        '--overlay-translucency': '95%',
+        '--overlay-effect': 'blur({blurs.lg})',
+        '--backdrop-effect': 'none',
+    },
+    '.dark *': {
+        '--overlay-translucency': '85%',
+    },
+    body: {
+        color: 'fg',
+        bg: 'bg',
+        lineHeight: '1.5',
+        colorPalette: 'accent',
+    },
+    '*::placeholder, *[data-placeholder]': {
+        color: 'fg.muted/90',
+    },
+    '*::selection': {
+        bg: 'colorPalette.solid/20',
+    },
+});

package/dist/theme/index.d.ts

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

package/dist/theme/index.js

@@ -0,0 +1,72 @@
+import { defineConfig } from '@chakra-ui/react';
+import { animationStyles } from "./animation-styles.js";
+import { breakpoints } from "./breakpoints.js";
+import { conditions } from "./conditions.js";
+import { globalCss } from "./global-css.js";
+import { layerStyles } from "./layer-styles.js";
+import { recipes } from "./recipes.js";
+import { semanticColors } from "./semantic-tokens/colors.js";
+import { semanticRadii } from "./semantic-tokens/radii.js";
+import { semanticShadows } from "./semantic-tokens/shadows.js";
+import { slotRecipes } from "./slot-recipes.js";
+import { textStyles } from "./text-styles.js";
+import { animations } from "./tokens/animations.js";
+import { aspectRatios } from "./tokens/aspect-ratios.js";
+import { blurs } from "./tokens/blurs.js";
+import { borders } from "./tokens/borders.js";
+import { colors } from "./tokens/colors.js";
+import { cursor } from "./tokens/cursor.js";
+import { durations } from "./tokens/durations.js";
+import { easings } from "./tokens/easings.js";
+import { fontSizes } from "./tokens/font-sizes.js";
+import { fontWeights } from "./tokens/font-weights.js";
+import { fonts } from "./tokens/fonts.js";
+import { keyframes } from "./tokens/keyframes.js";
+import { letterSpacings } from "./tokens/letter-spacing.js";
+import { lineHeights } from "./tokens/line-heights.js";
+import { radii } from "./tokens/radius.js";
+import { sizes } from "./tokens/sizes.js";
+import { spacing } from "./tokens/spacing.js";
+import { zIndices } from "./tokens/z-indices.js";
+import { utilities } from "./utilities.js";
+export const defaultThemeConfig = defineConfig({
+    preflight: true,
+    cssVarsPrefix: 'chakra',
+    cssVarsRoot: ':where(html, .chakra-theme)',
+    globalCss: globalCss,
+    utilities: utilities,
+    theme: {
+        breakpoints: breakpoints,
+        keyframes: keyframes,
+        tokens: {
+            animations,
+            aspectRatios,
+            blurs,
+            borders,
+            colors,
+            durations,
+            easings,
+            fonts,
+            fontSizes,
+            fontWeights,
+            letterSpacings,
+            lineHeights,
+            radii,
+            spacing,
+            sizes,
+            zIndex: zIndices,
+            cursor,
+        },
+        semanticTokens: {
+            colors: semanticColors,
+            radii: semanticRadii,
+            shadows: semanticShadows,
+        },
+        recipes: recipes,
+        slotRecipes: slotRecipes,
+        textStyles: textStyles,
+        layerStyles: layerStyles,
+        animationStyles: animationStyles,
+    },
+    conditions,
+});

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

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