@saas-ui/react 3.0.0-next.5 → 3.0.0-next.50

package/dist/preset.js

@@ -1,12 +1 @@
-'use client'
-import {
-  defaultConfig,
-  defaultSystem
-} from "./chunk-NKUBVRXY.js";
-import "./chunk-QAAKAKP7.js";
-import "./chunk-RTMS5TJN.js";
-export {
-  defaultConfig,
-  defaultSystem,
-  defaultSystem as system
-};
+export * from '@saas-ui/chakra-preset';

package/dist/provider/index.d.ts

@@ -0,0 +1,3 @@
+export { SuiContext, SuiProvider, useSui } from './sui-provider.tsx';
+export type { SuiContextValue, SuiProviderProps } from './sui-provider.tsx';
+export { useLink } from './use-link.tsx';

package/dist/provider/index.js

@@ -0,0 +1,2 @@
+export { SuiContext, SuiProvider, useSui } from "./sui-provider.js";
+export { useLink } from "./use-link.js";

package/dist/provider/sui-provider.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ChakraProviderProps } from '@chakra-ui/react';
+export interface SuiContextValue {
+    linkComponent?: React.ElementType<any>;
+}
+export declare const SuiContext: React.Context<SuiContextValue>;
+export interface SuiProviderProps extends ChakraProviderProps {
+    linkComponent?: React.ElementType<any>;
+    children: React.ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+export declare function SuiProvider(props: SuiProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useSui: () => SuiContextValue;

package/dist/provider/sui-provider.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
+export const SuiContext = React.createContext({});
+export function SuiProvider(props) {
+    const { linkComponent, onError, children, ...rest } = props;
+    const context = React.useMemo(() => ({
+        linkComponent,
+    }), []);
+    return (_jsx(SuiContext.Provider, { value: context, children: _jsx(ChakraProvider, { ...rest, children: children }) }));
+}
+export const useSui = () => React.useContext(SuiContext);

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,93 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } 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] = useMemo(() => slotRecipe.splitVariantProps(restProps), [restProps, slotRecipe]);
+        const styles = useMemo(() => (unstyled ? EMPTY_SLOT_STYLES : slotRecipe(variantProps)), [unstyled, variantProps, slotRecipe]);
+        return {
+            styles: styles,
+            classNames: slotRecipe.classNameMap,
+            props: otherProps,
+        };
+    }
+    function withRootProvider(Component, options = {}) {
+        const { defaultProps } = options;
+        const StyledComponent = (inProps) => {
+            const propsContext = usePropsContext();
+            const props = useMemo(() => mergeProps(defaultProps, propsContext, inProps), [propsContext, 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 propsContext = usePropsContext();
+            const props = useMemo(() => mergeProps(defaultProps ?? {}, propsContext, inProps), [propsContext, 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) }) }) }));
+            // @ts-expect-error
+            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/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 {};

package/package.json

@@ -1,54 +1,33 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-next.5",
+  "version": "3.0.0-next.50",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {
     ".": {
       "sui": "./src/index.ts",
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
       "import": "./dist/index.js"
     },
     "./preset": {
       "sui": "./src/preset.ts",
       "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.cjs",
       "import": "./dist/preset.js"
     },
     "./colors": {
       "sui": "./src/colors.ts",
       "types": "./dist/colors.d.ts",
-      "require": "./dist/colors.cjs",
       "import": "./dist/colors.js"
     },
     "./*": {
       "sui": "./src/components/*/index.ts",
       "types": "./dist/components/*/index.d.ts",
-      "require": "./dist/components/*/index.cjs",
       "import": "./dist/components/*/index.js"
     }
   },
-  "imports": {
-    "#components/*": [
-      "./src/components/*",
-      "./src/components/*/index.ts",
-      "./dist/components/*/index.cjs",
-      "./dist/components/*/index.js"
-    ]
-  },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "scripts": {
-    "clean": "rimraf --no-glob ./dist",
-    "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup --config tsup.config.ts ",
-    "build:components": "tsup --config tsup.components.config.ts --dts-only",
-    "build:types": "tsc --emitDeclarationOnly --outDir dist --project tsconfig.json",
-    "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
-    "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
-    "typecheck": "tsc --noEmit"
-  },
   "files": [
     "dist"
   ],
@@ -81,20 +60,37 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.1.0",
-    "@saas-ui/core": "3.0.0-next.1",
-    "@saas-ui/hooks": "3.0.0-next.0"
+    "@ark-ui/react": "^5.30.0",
+    "next-themes": "^0.4.6",
+    "@saas-ui/chakra-preset": "3.0.0-next.5",
+    "@saas-ui/hooks": "3.0.0-next.3",
+    "@saas-ui/core": "3.0.0-next.12"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^3.13.0",
+    "@chakra-ui/react": "^3.28.0",
     "@emotion/react": "^11",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
+    "@types/react": "19.2.0",
+    "@types/react-dom": "19.2.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-icons": "^5.5.0",
     "rimraf": "^6.0.1",
-    "tsup": "^8.4.0",
-    "typescript": "^5.8.2"
+    "tsup": "^8.5.0",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "clean": "rimraf --no-glob ./dist",
+    "build:tsup": "NODE_OPTIONS='--max-old-space-size=16384' tsup --config tsup.config.ts ",
+    "build:components": "tsup --config tsup.components.config.ts --dts-only",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist --project tsconfig.json",
+    "prebuild": "pnpm clean",
+    "build": "tsc --outDir dist --project tsconfig.json",
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../eslint.config.js",
+    "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
+    "typecheck": "tsc --noEmit"
   }
 }