@g4rcez/components 0.0.67 → 0.0.69

package/dist/src/hooks/use-form.js

@@ -1,9 +1,92 @@
 import { parse } from "qs";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Is, setPath } from "sidekicker";
-import { formReset } from "../components/form/form";
+import { getPath, Is } from "sidekicker";
+import { LocalStorage } from "storage-manager-js";
+import { ZodNumber } from "zod";
+import { formReset } from "../components";
 import { path } from "../lib/fns";
+const isValidJSON = (value) => {
+    if (typeof value !== "string") {
+        try {
+            value = JSON.stringify(value);
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch (error) {
+        return false;
+    }
+};
+const setHelper = (obj, path, value) => {
+    const lastIndex = path.length - 1;
+    for (let i = 0; i < path.length; i++) {
+        const key = path[i];
+        if (i === lastIndex) {
+            obj[key] = value;
+        }
+        else {
+            if (!(key in obj) || typeof obj[key] !== "object") {
+                const nextKey = path[i + 1];
+                obj[key] = isNaN(Number(nextKey)) ? {} : [];
+            }
+            obj = obj[key];
+        }
+    }
+};
+const convertPath = (path) => path.replace(/\[(\d+)]/g, ".$1").split(".");
+const setPath = (o, path, value) => {
+    const pathArr = Array.isArray(path) ? path.map(String) : convertPath(path);
+    const obj = structuredClone(o);
+    setHelper(obj, pathArr, value);
+    return obj;
+};
 const sort = (a, b) => a.localeCompare(b);
+const noop = {};
+const getDefaultValue = (inner) => {
+    const instanceName = inner._def.typeName;
+    if (instanceName === "ZodDefault")
+        return inner._def.defaultValue();
+    if (instanceName === "ZodObject")
+        return getDefaults(inner);
+    if (instanceName === "ZodArray")
+        return [];
+    if ("innerType" in inner._def) {
+        const defaults = getDefaultValue(inner._def.innerType);
+        if (instanceName === "ZodArray")
+            return defaults ?? [];
+        return defaults;
+    }
+    return undefined;
+};
+const getDefaults = (schema) => Object.fromEntries(Object.entries(schema.shape).map(([key, value]) => {
+    return [key, getDefaultValue(value)];
+}));
+const deepMerge = (a, b) => {
+    const result = structuredClone(a);
+    for (const key in b) {
+        const bValue = b[key];
+        const aValue = a[key];
+        if (bValue !== undefined) {
+            if (typeof bValue === "object" &&
+                bValue !== null &&
+                !Array.isArray(bValue) &&
+                typeof aValue === "object" &&
+                aValue !== null &&
+                !Array.isArray(aValue)) {
+                result[key] = deepMerge(aValue, bValue);
+            }
+            else {
+                result[key] = bValue ? bValue : aValue;
+            }
+        }
+    }
+    return result;
+};
 const options = {
     sort,
     allowDots: true,
@@ -21,13 +104,14 @@ export const formToJson = (form) => {
     const urlSearchParams = new URLSearchParams(formData);
     return parse(urlSearchParams.toString(), options);
 };
-export const convertPath = (path) => path.replace("[", ".").replace("]", "").split(".");
-export const getSchemaShape = (name, schema) => convertPath(name).reduce((acc, el) => {
-    if (el === "")
-        return acc;
-    const shape = acc.shape?.[el] || acc;
-    return shape._def.typeName === "ZodArray" ? shape.element : shape;
-}, schema);
+export const getSchemaShape = (name, schema) => {
+    return convertPath(name).reduce((acc, el) => {
+        if (el === "")
+            return acc;
+        const shape = acc.shape?.[el] || acc;
+        return shape._def.typeName === "ZodArray" ? shape.element : shape;
+    }, schema);
+};
 const getValueByType = (e) => {
     if (e.dataset.value)
         return e.dataset.value;
@@ -37,18 +121,94 @@ const getValueByType = (e) => {
         return e.valueAsNumber;
     return e.value || e.getAttribute("value");
 };
-export const useForm = (schema, formName) => {
+const getDataTarget = (e) => {
+    const target = e.dataset.target;
+    if (!target)
+        return getValueByType(e);
+    const element = document.querySelector(`[data-origin="${target}"]`);
+    if (!element)
+        return getValueByType(e);
+    return getValueByType(element);
+};
+const defaultOptions = {
+    state: {},
+    loading: false,
+    useOnChange: false,
+};
+const getName = (e) => e.dataset.target || e.name;
+export const createFormStorage = (name) => {
+    const key = `@use-form/${name}`;
+    return {
+        get: () => {
+            const state = LocalStorage.get(key);
+            return isValidJSON(state) ? state : {};
+        },
+        clear: () => void LocalStorage.delete(key),
+        set: (s) => LocalStorage.set(key, s),
+    };
+};
+export const useForm = (schema, formName, opts = defaultOptions) => {
     const [errors, setErrors] = useState(null);
     const ref = useRef({});
-    const [state, setState] = useState({});
-    const datepicker = (name, props) => {
+    const [state, setState] = useState(() => {
+        if (Is.function(opts?.state))
+            return opts.state();
+        return opts?.state ?? getDefaults(schema) ?? {};
+    });
+    const onInvalidField = useCallback((e) => {
+        const target = e.target;
+        const related = e.currentTarget;
+        const isOptional = target.dataset.optional === "true";
+        if (isOptional) {
+            return;
+        }
+        const path = getName(target);
+        const value = getDataTarget(target) || (related ? getValueByType(related) : "");
+        const partialSchema = getSchemaShape(path, schema);
+        target.setAttribute("data-initialized", "true");
+        if (partialSchema) {
+            const validation = partialSchema.safeParse(value);
+            const message = validation.success ? undefined : (validation.error.issues[0]?.message ?? "");
+            setErrors((prev) => setPath(prev ?? {}, path, message));
+        }
+    }, []);
+    const onInvalid = useCallback((exec) => (event) => {
+        const form = event.currentTarget;
+        const validationErrors = Object.values(ref.current).reduce((acc, input) => {
+            const field = input.element;
+            const validation = input.schema.safeParse(getValueByType(field));
+            if (field.dataset.ignore === "ignore")
+                return acc;
+            if (validation.success)
+                return acc;
+            const errorMessage = validation.error.issues[0]?.message;
+            field.setAttribute("data-initialized", "true");
+            const name = field.dataset.name || field.name || "";
+            return setPath(acc, name, errorMessage);
+        }, {});
+        const e = Is.empty(validationErrors) ? null : validationErrors;
+        setErrors(e);
+        console.error(e);
+        exec?.({ form, errors: e || {} });
+    }, []);
+    const datepicker = (name, props = noop) => {
         const validator = getSchemaShape(name, schema);
+        const onChange = (e) => {
+            if (!e)
+                return;
+            const value = e instanceof Date ? e.toISOString() : e.target.value;
+            setState((prev) => setPath(prev, name, value));
+            props?.onChange?.(e);
+        };
         return {
             ...props,
+            loading: opts.loading,
             name,
             id: name,
+            onChange,
             form: formName,
-            required: !validator.isOptional(),
+            date: Is.string(state[name]) ? new Date(state[name]) : state[name],
+            required: props.required ?? !validator.isOptional(),
             error: errors?.[name],
             ref: (e) => {
                 if (e === null)
@@ -57,53 +217,112 @@ export const useForm = (schema, formName) => {
             },
         };
     };
-    const select = (name, props) => {
+    const select = (name, props = noop) => {
         const validator = getSchemaShape(name, schema);
+        const onChange = (e) => {
+            const value = e.target.value;
+            setState((prev) => setPath(prev, name, value));
+            props?.onChange?.(e);
+        };
         return {
             ...props,
             name,
             id: name,
+            onChange,
             form: formName,
-            required: !validator.isOptional(),
-            error: errors?.[name],
-            ref: (e) => {
-                if (e === null)
-                    return;
-                ref.current[name] = { element: e, schema: validator };
-            },
+            loading: opts.loading,
+            onInvalid: onInvalidField,
+            error: getPath(errors, name, undefined),
+            value: getPath(state, name, undefined) || "",
+            required: props.required ?? !validator.isOptional(),
+            ref: (e) => e !== null
+                ? (ref.current[name] = {
+                    element: e,
+                    schema: validator,
+                })
+                : undefined,
         };
     };
-    const checkbox = (name, props) => {
+    const checkbox = (name, props = noop) => {
         const validator = getSchemaShape(name, schema);
+        const onChange = (e) => {
+            const value = e.target.checked;
+            setState((prev) => setPath(prev ?? {}, name, value));
+            props?.onChange?.(e);
+        };
         return {
             ...props,
             name,
             id: name,
+            onChange,
             form: formName,
-            required: !validator.isOptional(),
-            error: errors?.[name],
-            ref: (e) => {
-                if (e === null)
-                    return;
-                ref.current[name] = { element: e, schema: validator };
-            },
+            loading: opts.loading,
+            onInvalid: onInvalidField,
+            error: getPath(errors, name, undefined),
+            required: props.required ?? !validator.isOptional(),
+            ref: (e) => e !== null
+                ? void (ref.current[name] = {
+                    element: e,
+                    schema: validator,
+                })
+                : undefined,
         };
     };
-    const input = (name, props) => {
+    const textarea = (name, props = noop) => {
         const validator = getSchemaShape(name, schema);
+        const onChange = (e) => {
+            e.persist?.();
+            const value = e.target.value;
+            props?.onChange?.(e);
+            setState((prev) => setPath(prev, name, value));
+        };
         return {
             ...props,
+            loading: opts.loading,
             name,
             id: name,
-            required: !validator.isOptional(),
+            onChange,
             form: formName,
-            type: validator._def.typeName === "ZodNumber" ? "number" : (props?.type ?? "text"),
-            error: errors?.[name],
-            ref: (e) => {
-                if (e === null)
-                    return;
-                ref.current[name] = { element: e, schema: validator };
-            },
+            onInvalid: onInvalidField,
+            error: getPath(errors, name, undefined),
+            required: props.required ?? !validator.isOptional(),
+            value: getPath(state, name, undefined) || props?.value || "",
+            type: Is.instance(validator, ZodNumber) ? "number" : (props?.type ?? "text"),
+            ref: (e) => e === null
+                ? undefined
+                : (ref.current[name] = {
+                    element: e,
+                    schema: validator,
+                }),
+        };
+    };
+    const input = (name, props = noop) => {
+        const validator = getSchemaShape(name, schema);
+        const isNumber = validator._def.typeName === "ZodNumber";
+        const onChange = (e) => {
+            e.persist?.();
+            const value = isNumber ? e.target.valueAsNumber : e.target.value;
+            props?.onChange?.(e);
+            setState((prev) => setPath(prev, name, value));
+        };
+        return {
+            ...props,
+            name,
+            id: name,
+            onChange,
+            form: formName,
+            loading: opts.loading,
+            onInvalid: onInvalidField,
+            error: getPath(errors, name, undefined),
+            required: props.required ?? !validator.isOptional(),
+            type: isNumber ? "number" : (props?.type ?? "text"),
+            value: getPath(state, name, undefined) || props?.value || "",
+            ref: (e) => e === null
+                ? undefined
+                : void (ref.current[name] = {
+                    element: e,
+                    schema: validator,
+                }),
         };
     };
     useEffect(() => {
@@ -113,37 +332,45 @@ export const useForm = (schema, formName) => {
                 : input.element;
             const validation = input.schema.safeParse(getValueByType(element));
             const onBlurField = (e) => {
-                const name = element.dataset.target || element.name;
+                const name = getName(e.target);
                 if (!name)
-                    return;
-                const value = getValueByType(e.target) || (e.relatedTarget ? getValueByType(e.relatedTarget) : "");
+                    return false;
+                const current = e.target;
+                const value = getDataTarget(e.target) || (e.relatedTarget ? getValueByType(e.relatedTarget) : "");
                 const validation = input.schema.safeParse(value);
+                current.setAttribute("value", value);
                 if (validation.success) {
                     element.setCustomValidity("");
-                    setState((prev) => setPath(prev, name, validation.data));
-                    return setErrors((prev) => {
-                        const { [name]: removed, ...rest } = prev || {};
-                        return rest === null || Is.empty(rest) ? null : rest;
+                    setErrors((prev) => {
+                        if (Is.null(prev))
+                            return null;
+                        const newErrors = setPath(prev, name, undefined);
+                        if (Is.empty(prev) || Is.nil(prev))
+                            return null;
+                        return Is.empty(newErrors) ? null : newErrors;
                     });
+                    return false;
                 }
                 if (element.required) {
                     const errorMessage = validation.error.issues[0]?.message || "";
                     element.setCustomValidity(errorMessage);
-                    setErrors((prev) => ({ ...prev, [name]: errorMessage }));
+                    setErrors((prev) => {
+                        if (Is.null(prev))
+                            return null;
+                        const newErrors = setPath(prev, name, errorMessage || undefined);
+                        return Is.empty(newErrors) ? null : newErrors;
+                    });
                 }
+                return false;
             };
+            const controller = new AbortController();
             const trigger = element.getAttribute("data-trigger") || "blur";
-            element.addEventListener(trigger, onBlurField);
-            if (element.tagName === "SELECT")
-                element.addEventListener("change", onBlurField);
+            element.addEventListener(trigger, onBlurField, { signal: controller.signal });
+            const hasInitialError = element.dataset.shadow ? false : element.required ? !validation.success : false;
             return {
                 input,
-                hasInitialError: element.required ? !validation.success : false,
-                unsubscribe: () => {
-                    element.removeEventListener(trigger, onBlurField);
-                    if (element.tagName === "SELECT")
-                        element.addEventListener("change", onBlurField);
-                },
+                hasInitialError,
+                unsubscribe: () => controller.abort(),
             };
         });
         const hasErrors = events.some((x) => x.hasInitialError);
@@ -151,25 +378,7 @@ export const useForm = (schema, formName) => {
             setErrors((prev) => (prev === null ? {} : prev));
         return () => events.forEach((item) => item.unsubscribe());
     });
-    const onInvalid = useCallback((exec) => (event) => {
-        const form = event.currentTarget;
-        const validationErrors = Object.values(ref.current).reduce((acc, input) => {
-            const field = input.element;
-            const validation = input.schema.safeParse(getValueByType(field));
-            if (field.dataset.ignore === "ignore")
-                return acc;
-            if (validation.success)
-                return acc;
-            const errorMessage = validation.error.issues[0]?.message;
-            field.setAttribute("data-initialized", "true");
-            const name = field.dataset.name || field.name || "";
-            return { ...acc, [name]: errorMessage };
-        }, {});
-        const e = Is.empty(validationErrors) ? null : validationErrors;
-        setErrors(e);
-        exec?.({ form, errors: e || {} });
-    }, []);
-    const onSubmit = useCallback((exec) => (event) => {
+    const onSubmit = (exec) => (event) => {
         event.preventDefault();
         const form = event.currentTarget;
         let json = formToJson(form);
@@ -181,43 +390,71 @@ export const useForm = (schema, formName) => {
             }
             if (field.tagName === "INPUT") {
                 const input = field;
-                json = setPath(json, input.name, getValueByType(input));
+                const value = getDataTarget(input) || (input ? getValueByType(input) : "");
+                json = setPath(json, input.dataset.target || input.name, value);
             }
         });
-        const result = schema.safeParse(state);
+        const input = deepMerge(json, state);
+        const result = schema.safeParse(input);
+        const reset = () => {
+            formReset(form);
+            opts.interceptor?.clear();
+        };
         if (result.success) {
-            return exec({
+            const jsonString = JSON.stringify(result.data);
+            form.setAttribute("data-json", jsonString);
+            opts.interceptor?.clear();
+            return exec?.(event, {
                 form,
-                json,
-                data: result.data,
                 event,
-                reset: () => formReset(form),
-                success: true,
+                reset,
                 errors: [],
+                success: true,
+                data: result.data,
+                json: result.data,
             });
         }
-        return exec({
+        console.group("useForm error");
+        console.info(result);
+        console.info(result.error.issues);
+        console.error(result.error);
+        console.groupEnd();
+        form.reportValidity();
+        return exec?.(event, {
             form,
             json,
             event,
+            reset,
             data: json,
             success: false,
-            reset: () => formReset(form),
             errors: result.error.issues.map((x) => ({ message: x.message, path: x.path.map((x) => String(x)) })),
         });
-    }, [formName]);
+    };
     const get = (p) => path(state, p) || "";
+    const controller = (props) => ({
+        ...props,
+        id: formName,
+        name: formName,
+    });
+    useEffect(() => {
+        if (opts.interceptor)
+            opts.interceptor?.set(state);
+    }, [state]);
     return {
-        state,
+        get,
         input,
-        datepicker,
-        checkbox,
+        state,
+        errors,
         select,
+        checkbox,
         onSubmit,
-        errors,
+        setState,
+        textarea,
         onInvalid,
-        disabled: errors !== null,
+        controller,
+        datepicker,
         name: formName,
-        get,
+        disabled: errors !== null,
     };
 };
+export const getJsonForm = (form) => !form ? {} : JSON.parse(form.getAttribute("data-json"));

package/dist/src/index.d.ts

@@ -1,12 +1,13 @@
+export * from "./lib/dom";
+export * from "./lib/fns";
 export * from "./components";
+export type * from "./types";
+export * from "./styles/theme";
 export * from "./hooks/use-form";
 export * from "./hooks/use-previous";
 export * from "./hooks/use-reactive";
-export { ComponentsProvider, useTranslations, type Translations, useLocale, useColorParser } from "./hooks/use-components-provider";
-export * from "./lib/dom";
-export * from "./lib/fns";
-export * from "./styles/theme";
+export * from "./styles/theme.types";
 export * from "./styles/design-tokens";
-export type * from "./types";
 export { createColumns, createOptionCols, ColType, useTablePreferences } from "./components/table/table-lib";
+export { ComponentsProvider, useTranslations, type Translations, useLocale, useColorParser } from "./hooks/use-components-provider";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACpI,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,mBAAmB,SAAS,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,mBAAmB,SAAS,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC7G,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/src/index.js

@@ -1,10 +1,11 @@
+export * from "./lib/dom";
+export * from "./lib/fns";
 export * from "./components";
+export * from "./styles/theme";
 export * from "./hooks/use-form";
 export * from "./hooks/use-previous";
 export * from "./hooks/use-reactive";
-export { ComponentsProvider, useTranslations, useLocale, useColorParser } from "./hooks/use-components-provider";
-export * from "./lib/dom";
-export * from "./lib/fns";
-export * from "./styles/theme";
+export * from "./styles/theme.types";
 export * from "./styles/design-tokens";
 export { createColumns, createOptionCols, ColType, useTablePreferences } from "./components/table/table-lib";
+export { ComponentsProvider, useTranslations, useLocale, useColorParser } from "./hooks/use-components-provider";

package/dist/src/styles/dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../../src/styles/dark.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,YAsLxB,CAAC"}
+{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../../src/styles/dark.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,YAwLxB,CAAC"}

package/dist/src/styles/dark.js

@@ -69,6 +69,7 @@ export const DARK_THEME = {
             border: "hsla(240, 7%, 27%)",
         },
         floating: {
+            foreground: "hsla(210, 40%, 98%)",
             background: "hsla(0, 0%, 14%)",
             border: "hsla(240, 7%, 27%)",
             overlay: "hsla(0, 0%, 0%)",
@@ -77,11 +78,12 @@ export const DARK_THEME = {
             foreground: "hsla(210, 40%, 98%)",
             background: "hsla(0, 0%, 8%)",
             border: "hsla(0, 0%, 19%)",
+            overlay: "hsla(0, 0%, 0%)",
         },
         table: {
             header: "hsla(0, 0%, 12%)",
-            background: "hsla(0, 0%, 15%)",
             border: "hsla(240, 4%, 33%)",
+            background: "hsla(0, 0%, 15%)",
         },
         button: {
             primary: {

package/dist/src/styles/design-tokens.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { DesignTokens, DesignTokensBuilder, DesignTokensParser, GeneralTokens, Token } from "./theme.types";
 export declare const parsers: {
     cssVariable: (_: string, __: string, k: string) => `var(--${string})`;
@@ -15,5 +16,13 @@ export declare const createStyles: {
     default: (tokens: Token[]) => string;
     dark: (tokens: Token[]) => string;
 };
+type TokenParsersType = "colors" | "spacing" | "rounded" | "customTokens";
+type TokenCustomParser = (token: Token) => Token;
+export type TokenRemap = Partial<Record<TokenParsersType, TokenCustomParser> & {
+    name: string;
+}>;
 export declare const createTheme: (theme: DesignTokens, name?: string) => string;
+export declare const createCssProperties: (theme: DesignTokens, map?: TokenRemap) => CSSProperties;
+export declare const createTokenStyles: (theme: DesignTokens, map?: TokenRemap) => string;
+export {};
 //# sourceMappingURL=design-tokens.d.ts.map

package/dist/src/styles/design-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;;cAEN,MAAM;aACP,MAAM;aACN,MAAM;cACL,MAAM;aACP,MAAM;aACN,MAAM;4BACS,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,UAAU,CAAC,SAAS,mBAAmB,WAAU,MAAM,WAAe,MAAM,KAAQ,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,UAC7E,CAAC,SACF,EAAE,WACD,MAAM,WACN,MAAM,KACf,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,YAAY,SAAS,MAAM,WAa7D,CAAC"}
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;;cAEN,MAAM;aACP,MAAM;aACN,MAAM;cACL,MAAM;aACP,MAAM;aACN,MAAM;4BACS,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,UAAU,CAAC,SAAS,mBAAmB,WAAU,MAAM,WAAe,MAAM,KAAQ,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,UAC7E,CAAC,SACF,EAAE,WACD,MAAM,WACN,MAAM,KACf,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC;AAE1E,KAAK,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAgBjG,eAAO,MAAM,WAAW,UAAW,YAAY,SAAS,MAAM,WAIxD,CAAC;AAEP,eAAO,MAAM,mBAAmB,UAAW,YAAY,QAAQ,UAAU,KAAG,aAG3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,YAAY,QAAQ,UAAU,WAIjE,CAAC"}

package/dist/src/styles/design-tokens.js

@@ -40,17 +40,26 @@ export const createStyles = {
     default: (tokens) => createStyleContent(tokens, { result: modifiers.default }),
     dark: (tokens) => createStyleContent(tokens, { result: modifiers.dark }),
 };
-export const createTheme = (theme, name) => {
-    const fn = (value, _, key) => ({
-        key: `--${key}`,
-        value: `${value}`,
-    });
-    const colors = reduceTokens(theme.colors, fn);
-    const spacing = reduceTokens(theme.spacing, fn);
-    const rounded = reduceTokens(theme.rounded, fn);
-    const customTokens = theme.custom ? reduceTokens(theme.custom, fn) : [];
-    return createStyleContent(colors.concat(spacing, rounded, customTokens), {
-        result: (variables) => `html${name ? `.${name}` : ""} {${variables}}`,
-        value: (_, v) => v.replace("hsla(", "").replace(")", ""),
-    });
+const createTokens = (theme, map) => {
+    const fn = (p) => (value, _, key) => {
+        const r = { key: `--${key}`, value: `${value}` };
+        return p ? p(r) : r;
+    };
+    const colors = reduceTokens(theme.colors, fn(map?.colors));
+    const spacing = reduceTokens(theme.spacing, fn(map?.spacing));
+    const rounded = reduceTokens(theme.rounded, fn(map?.rounded));
+    const customTokens = theme.custom ? reduceTokens(theme.custom, fn(map?.customTokens)) : [];
+    return colors.concat(spacing, rounded, customTokens);
+};
+export const createTheme = (theme, name) => createStyleContent(createTokens(theme), {
+    result: (variables) => `html${name ? `.${name}` : ""} {${variables}}`,
+    value: (_, v) => v.replace("hsla(", "").replace(")", ""),
+});
+export const createCssProperties = (theme, map) => {
+    const tokens = createTokens(theme, map);
+    return tokens.reduce((acc, el) => ({ ...acc, [el.key]: el.value }), {});
 };
+export const createTokenStyles = (theme, map) => createStyleContent(createTokens(theme, map), {
+    result: (variables) => `html${map?.name ? `.${map.name}` : ""} {${variables}}`,
+    value: (_, v) => v,
+});