@xanui/core 1.2.63 → 1.2.65

package/theme/core.js

@@ -1,23 +1,8 @@
+"use client";
 import React__default, { useContext } from 'react';
+import { breakpoints, alpha } from '../css/index.js';
+import { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions.js';
 
-const ThemeFactory = new Map();
-const ThemeContex = React__default.createContext({
-    theme: "light",
-    onChange: () => { }
-});
-const getTheme = (theme) => ThemeFactory.get(theme);
-const useTheme = () => {
-    const ctx = useContext(ThemeContex);
-    const theme = ThemeFactory.get(ctx === null || ctx === void 0 ? void 0 : ctx.theme);
-    if (!theme) {
-        console.error("Theme not found, returning light theme as fallback");
-        return ThemeFactory.get("light");
-    }
-    theme.change = (theme) => {
-        ctx.onChange(theme);
-    };
-    return theme;
-};
 const mergeObject = (a, b) => {
     a = Object.assign({}, a);
     b = Object.assign({}, b);
@@ -32,6 +17,30 @@ const mergeObject = (a, b) => {
     }
     return a;
 };
+const createTheme = (name, options, mode = "light") => {
+    const defaultOptions = mode === 'light' ? lightThemeOptions : darkThemeOptions;
+    let theme = mergeObject(defaultOptions, Object.assign(Object.assign({}, options), { name, breakpoints: breakpoints }));
+    // add alpha colors
+    for (let color in theme.colors) {
+        const c = theme.colors[color];
+        const is_common = color === 'divider' || color === 'background' || color === 'text';
+        c.soft = {
+            primary: is_common ? alpha(c.primary, 0.60) : alpha(c.primary, 0.08),
+            secondary: is_common ? alpha(c.primary, 0.90) : alpha(c.primary, 0.12)
+        };
+    }
+    return theme;
+};
+const ThemeContex = React__default.createContext({
+    theme: createTheme("light", {}),
+    onChange(theme) { },
+});
+const useTheme = () => {
+    const ctx = useContext(ThemeContex);
+    const theme = ctx.theme;
+    theme.change = (theme) => ctx.onChange(theme);
+    return theme;
+};
 
-export { ThemeContex, ThemeFactory, getTheme, mergeObject, useTheme };
+export { ThemeContex, createTheme, mergeObject, useTheme };
 //# sourceMappingURL=core.js.map

package/theme/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["import React, { useContext } from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport type ThemeCntextProps = {\n   theme: string,\n   onChange: (theme: string) => void\n}\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\n   theme: \"light\",\n   onChange: () => { }\n})\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\n\nexport type UseThemeOptions = ThemeOptions & { change: (theme: string) => void }\nexport const useTheme = (): UseThemeOptions => {\n   const ctx = useContext(ThemeContex)\n   const theme = ThemeFactory.get(ctx?.theme) as any\n   if (!theme) {\n      console.error(\"Theme not found, returning light theme as fallback\")\n      return ThemeFactory.get(\"light\") as any\n   }\n\n   theme.change = (theme: string) => {\n      ctx.onChange(theme)\n   }\n   return theme as UseThemeOptions\n}\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n   a = { ...a }\n   b = { ...b }\n   for (const key in b) {\n      const v = (b as any)[key]\n      if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n         a[key] = mergeObject(a[key], b[key])\n      } else {\n         a[key] = v\n      }\n   }\n   return a\n}\n"],"names":["React"],"mappings":";;AAOO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAAmB;AAC9D,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,QAAQ,EAAE,MAAK,EAAG;AACpB,CAAA;AACM,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAG1D,MAAM,QAAQ,GAAG,MAAsB;AAC3C,IAAA,MAAM,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC;AACnC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,KAAK,CAAQ;IACjD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AAEA,IAAA,KAAK,CAAC,MAAM,GAAG,CAAC,KAAa,KAAI;AAC9B,QAAA,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC;AACD,IAAA,OAAO,KAAwB;AAClC;MAEa,WAAW,GAAG,CAAC,CAAa,EAAE,CAAa,KAAI;IACzD,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;IACZ,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;AACZ,IAAA,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;AAClB,QAAA,MAAM,CAAC,GAAI,CAAS,CAAC,GAAG,CAAC;QACzB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAACA,cAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;AACzE,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC;aAAO;AACJ,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACb;IACH;AACA,IAAA,OAAO,CAAC;AACX;;;;"}
+{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["\"use client\"\nimport React, { useContext } from \"react\"\nimport { ObjectType, ThemeOptions, ThemeOptionInput, ThemeOptionsColor } from \"./types\"\nimport { alpha, breakpoints } from \"../css\"\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n   a = { ...a }\n   b = { ...b }\n   for (const key in b) {\n      const v = (b as any)[key]\n      if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n         a[key] = mergeObject(a[key], b[key])\n      } else {\n         a[key] = v\n      }\n   }\n   return a\n}\n\n\nexport const createTheme = (name: string, options: ThemeOptionInput, mode: \"light\" | \"dark\" = \"light\"): ThemeOptions => {\n   const defaultOptions = mode === 'light' ? lightThemeOptions : darkThemeOptions\n   let theme: any = mergeObject(defaultOptions, {\n      ...options,\n      name,\n      breakpoints: breakpoints\n   })\n\n   // add alpha colors\n   for (let color in theme.colors) {\n      const c = theme.colors[color] as ThemeOptionsColor\n      const is_common = color === 'divider' || color === 'background' || color === 'text'\n      c.soft = {\n         primary: is_common ? alpha(c.primary, 0.60) : alpha(c.primary, 0.08),\n         secondary: is_common ? alpha(c.primary, 0.90) : alpha(c.primary, 0.12)\n      }\n   }\n\n   return theme as ThemeOptions\n}\n\nexport type ThemeCntextProps = {\n   theme: ThemeOptions,\n   onChange: (theme: ThemeOptions) => void\n}\n\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\n   theme: createTheme(\"light\", {}),\n   onChange(theme) { },\n})\n\nexport const useTheme = () => {\n   const ctx = useContext(ThemeContex)\n   const theme = ctx.theme\n   theme.change = (theme: ThemeOptions) => ctx.onChange(theme)\n   return theme\n}\n\n"],"names":[],"mappings":";;;;;;;;AASG;AACG;;AAEG;;;AAEA;;;AAGN;AACH;AAGO;AACJ;AACA;;AAOA;;AAEG;;;;;;AAOH;AACH;AAOO;AACJ;;AAEF;AAEM;AACJ;AACA;AACA;AACA;AACH;;"}

package/theme/index.cjs

@@ -1,15 +1,19 @@
 "use client";
 'use strict';
 
+require('tslib');
+require('react/jsx-runtime');
+require('react');
+require('../Tag/index.cjs');
 var core = require('./core.cjs');
 require('../css/getValue.cjs');
 require('oncss');
-var ThemeProvider = require('./ThemeProvider.cjs');
+require('../Document/index.cjs');
+require('../css/CSSCacheProvider.cjs');
 
 const themeRootClass = (theme) => `.xui-${theme}-theme-root`;
 
-exports.getTheme = core.getTheme;
+exports.createTheme = core.createTheme;
 exports.useTheme = core.useTheme;
-exports.ThemeProvider = ThemeProvider;
 exports.themeRootClass = themeRootClass;
 //# sourceMappingURL=index.cjs.map

package/theme/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\nimport { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport { getTheme, useTheme } from './core'\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\nexport type { ThemeProviderProps } from './ThemeProvider'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n    ThemeProvider,\n    createTheme,\n    getTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;;;;AAOO;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\nimport ThemeProvider from './ThemeProvider'\nimport { useTheme, createTheme } from './core'\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\nexport type { ThemeProviderProps } from './ThemeProvider'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n    ThemeProvider,\n    createTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;;;;;;;;;AAMO;;;;"}

package/theme/index.js

@@ -1,8 +1,13 @@
 "use client";
-export { getTheme, useTheme } from './core.js';
+import 'tslib';
+import 'react/jsx-runtime';
+import 'react';
+import '../Tag/index.js';
+export { createTheme, useTheme } from './core.js';
 import '../css/getValue.js';
 import 'oncss';
-export { default as ThemeProvider } from './ThemeProvider.js';
+import '../Document/index.js';
+import '../css/CSSCacheProvider.js';
 
 const themeRootClass = (theme) => `.xui-${theme}-theme-root`;
 

package/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\nimport { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport { getTheme, useTheme } from './core'\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\nexport type { ThemeProviderProps } from './ThemeProvider'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n    ThemeProvider,\n    createTheme,\n    getTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;;AAOO;;"}
+{"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\nimport ThemeProvider from './ThemeProvider'\nimport { useTheme, createTheme } from './core'\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\nexport type { ThemeProviderProps } from './ThemeProvider'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n    ThemeProvider,\n    createTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;;;;;;;AAMO;;"}

package/theme/types.d.ts

@@ -54,6 +54,7 @@ interface ThemeOptions {
         danger: ThemeOptionsColor;
     };
     typography: ThemeTypographyType;
+    change: (theme: ThemeOptions) => void;
 }
 type ThemeTypographyItemInput = Partial<ThemeTypographyItem>;
 type ThemeTypographyInputType = {

package/hooks/useTransition/index.cjs

@@ -1,108 +0,0 @@
-"use client";
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var useAnimation = require('../useAnimation.cjs');
-var index$1 = require('../../css/index.cjs');
-var oncss = require('oncss');
-var variants = require('./variants.cjs');
-var index = require('../../Document/index.cjs');
-var CSSCacheProvider = require('../../css/CSSCacheProvider.cjs');
-
-const style = (obj = {}, cacheId, doc) => {
-    return index$1.css(obj, { selector: "#", container: doc, cacheId }).classname;
-};
-const getVariant = (rect, variant) => {
-    let fn = typeof variant === 'string' ? variants[variant] : variant;
-    if (!fn)
-        throw new Error(`Transition variant "${variant}" not found.`);
-    return fn(rect);
-};
-const useTransition = (_a) => {
-    var { open } = _a, props = tslib.__rest(_a, ["open"]);
-    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = false, onOpen, onOpened, onClose, onClosed, onState } = props;
-    const doc = index.useDocument();
-    const cacheId = CSSCacheProvider.useCSSCacheId();
-    let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
-    const id = "xui-transition-" + React.useId();
-    const [state, setState] = React.useState({
-        initial: false,
-        classname: style({ visibility: "hidden" }, cacheId, doc === null || doc === void 0 ? void 0 : doc.document),
-        variant: variant,
-        rect: null,
-        stage: open ? "open" : "closed",
-        unmounted: false,
-    });
-    const getEle = () => doc === null || doc === void 0 ? void 0 : doc.document.querySelector(`[data-transition="${id}"]`);
-    const getBoundary = () => { var _a; return state.rect || ((_a = getEle()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || new DOMRect(0, 0, 0, 0); };
-    React.useEffect(() => {
-        if (exitOnUnmount && state.stage === 'closed') {
-            if (!open) {
-                setState(s => (Object.assign(Object.assign({}, s), { initial: false, classname: "", unmounted: true, variant: variant })));
-            }
-            else {
-                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, cacheId, doc === null || doc === void 0 ? void 0 : doc.document), stage: "open" })));
-            }
-        }
-    }, [open, state.stage, exitOnUnmount, variant]);
-    // initial effect
-    React.useLayoutEffect(() => {
-        const ele = getEle();
-        if (!ele)
-            return;
-        if (exitOnUnmount && state.stage === 'closed')
-            return;
-        const rect = getBoundary();
-        let { from } = getVariant(rect, state.variant);
-        if (open && !state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, cacheId, doc === null || doc === void 0 ? void 0 : doc.document) : "", initial: true, rect: rect })));
-            let stimer = null;
-            let etimer = null;
-            ele.ontransitionstart = () => {
-                clearTimeout(stimer);
-                stimer = setTimeout(() => {
-                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
-                    (onOpen && isOpen) && onOpen();
-                    (onClose && !isOpen) && onClose();
-                    onState && onState(isOpen ? "open" : "close");
-                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "open" : "close" })));
-                }, 1);
-            };
-            ele.ontransitionend = () => {
-                clearTimeout(etimer);
-                etimer = setTimeout(() => {
-                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
-                    (onOpened && isOpen) && onOpened();
-                    (onClosed && !isOpen) && onClosed();
-                    onState && onState(isOpen ? "opened" : "closed");
-                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "opened" : "closed" })));
-                }, 1);
-            };
-        }
-        else if (!state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, cacheId, doc === null || doc === void 0 ? void 0 : doc.document), rect: rect })));
-        }
-    }, [open, state.initial, state.stage, exitOnUnmount]);
-    React.useEffect(() => {
-        if (state.initial) {
-            let _variant = state.variant !== variant ? variant : state.variant;
-            const { from, to } = getVariant(state.rect, _variant);
-            let _css = open ? to : from;
-            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
-            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => oncss.formatCSSProp(k)).join(trans + ", ") + trans });
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, cacheId, doc === null || doc === void 0 ? void 0 : doc.document), variant: _variant })));
-        }
-    }, [open, state.initial, variant]);
-    return {
-        exited: exitOnUnmount && state.stage === 'closed',
-        props: {
-            'id': state.classname,
-            'data-transition': id,
-            'data-transition-state': open ? 'open' : 'close',
-        }
-    };
-};
-
-module.exports = useTransition;
-//# sourceMappingURL=index.cjs.map

package/hooks/useTransition/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\nimport { useState, useEffect, useId, useLayoutEffect } from 'react';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../../css/types';\nimport * as variants from './variants'\nimport { useDocument } from '../../Document';\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\n\nexport type UseTransitionVariantTypes = keyof typeof variants\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\n\nexport type UseTransitionProps = {\n   open: boolean;\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\n   ease?: string;\n   easing?: keyof typeof animationEases;\n   duration?: number;\n   delay?: number;\n   disableInitialTransition?: boolean;\n   exitOnUnmount?: boolean;\n   onOpen?: () => void;\n   onOpened?: () => void;\n   onClose?: () => void;\n   onClosed?: () => void;\n   onState?: (state: UseTransitionState) => void;\n}\n\n\nconst style = (obj = {}, cacheId: string, doc?: Document) => {\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\n}\n\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\n   let fn = typeof variant === 'string' ? variants[variant] : variant\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n   return fn(rect as DOMRect);\n}\n\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\n   let {\n      disableInitialTransition = false,\n      variant = \"fade\",\n      duration = 400,\n      delay,\n      ease,\n      easing,\n      exitOnUnmount = false,\n      onOpen,\n      onOpened,\n      onClose,\n      onClosed,\n      onState\n   } = props\n   const doc = useDocument();\n   const cacheId = useCSSCacheId()\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n   const id = \"xui-transition-\" + useId()\n   const [state, setState] = useState({\n      initial: false,\n      classname: style({ visibility: \"hidden\" }, cacheId, doc?.document),\n      variant: variant,\n      rect: null as DOMRect | null,\n      stage: open ? \"open\" : \"closed\",\n      unmounted: false,\n   })\n\n   const getEle = () => doc?.document.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\n\n   useEffect(() => {\n      if (exitOnUnmount && state.stage === 'closed') {\n         if (!open) {\n            setState(s => ({\n               ...s,\n               initial: false,\n               classname: \"\",\n               unmounted: true,\n               variant: variant,\n            }))\n         } else {\n            setState(s => ({\n               ...s,\n               variant: variant,\n               classname: style({ visibility: \"hidden\" }, cacheId, doc?.document),\n               stage: \"open\",\n            }))\n         }\n      }\n   }, [open, state.stage, exitOnUnmount, variant])\n\n   // initial effect\n   useLayoutEffect(() => {\n      const ele = getEle()\n      if (!ele) return\n      if (exitOnUnmount && state.stage === 'closed') return\n\n      const rect = getBoundary();\n      let { from } = getVariant(rect, state.variant)\n      if (open && !state.initial) {\n         setState(s => ({\n            ...s,\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, cacheId, doc?.document) : \"\",\n            initial: true,\n            rect: rect,\n         }))\n         let stimer: any = null\n         let etimer: any = null\n         ele.ontransitionstart = () => {\n            clearTimeout(stimer)\n            stimer = setTimeout(() => {\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\n               (onOpen && isOpen) && onOpen();\n               (onClose && !isOpen) && onClose()\n               onState && onState(isOpen ? \"open\" : \"close\")\n               setState(s => ({\n                  ...s,\n                  stage: isOpen ? \"open\" : \"close\"\n               }))\n            }, 1)\n         }\n\n         ele.ontransitionend = () => {\n            clearTimeout(etimer)\n            etimer = setTimeout(() => {\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\n               (onOpened && isOpen) && onOpened();\n               (onClosed && !isOpen) && onClosed();\n               onState && onState(isOpen ? \"opened\" : \"closed\")\n               setState(s => ({\n                  ...s,\n                  stage: isOpen ? \"opened\" : \"closed\"\n               }))\n            }, 1)\n         }\n      } else if (!state.initial) {\n         setState(s => ({\n            ...s,\n            classname: style(from, cacheId, doc?.document),\n            rect: rect,\n         }))\n      }\n   }, [open, state.initial, state.stage, exitOnUnmount])\n\n\n   useEffect(() => {\n      if (state.initial) {\n         let _variant = state.variant !== variant ? variant : state.variant\n         const { from, to } = getVariant(state.rect, _variant)\n         let _css: CSSProps = open ? to : from\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n         let _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n         }\n         setState(s => ({\n            ...s,\n            classname: style(_, cacheId, doc?.document),\n            variant: _variant\n         }))\n      }\n   }, [open, state.initial, variant])\n\n   return {\n      exited: exitOnUnmount && state.stage === 'closed',\n      props: {\n         'id': state.classname,\n         'data-transition': id,\n         'data-transition-state': open ? 'open' : 'close',\n      }\n   }\n}\n\n\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;;;;AASG;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;AACJ;;AAMN;;AAIG;AACG;AACA;;;AAGA;AAIA;;;;AASH;AACA;;AAEG;;AAEF;;AAEP;;"}

package/hooks/useTransition/index.d.ts

@@ -1,36 +0,0 @@
-import { animationEases } from '../useAnimation.js';
-import { CSSProps } from '../../css/types.js';
-import * as variants from './variants.js';
-
-type UseTransitionVariantTypes = keyof typeof variants;
-type UseTransitionState = "open" | "opened" | "close" | "closed";
-type UseTransitionVariant = (rect: DOMRect) => ({
-    from: CSSProps;
-    to: CSSProps;
-});
-type UseTransitionProps = {
-    open: boolean;
-    variant: UseTransitionVariant | UseTransitionVariantTypes;
-    ease?: string;
-    easing?: keyof typeof animationEases;
-    duration?: number;
-    delay?: number;
-    disableInitialTransition?: boolean;
-    exitOnUnmount?: boolean;
-    onOpen?: () => void;
-    onOpened?: () => void;
-    onClose?: () => void;
-    onClosed?: () => void;
-    onState?: (state: UseTransitionState) => void;
-};
-declare const useTransition: ({ open, ...props }: UseTransitionProps) => {
-    exited: boolean;
-    props: {
-        id: string;
-        'data-transition': string;
-        'data-transition-state': string;
-    };
-};
-
-export { useTransition as default };
-export type { UseTransitionProps, UseTransitionState, UseTransitionVariant, UseTransitionVariantTypes };

package/hooks/useTransition/index.js

@@ -1,106 +0,0 @@
-"use client";
-import { __rest } from 'tslib';
-import { useId, useState, useEffect, useLayoutEffect } from 'react';
-import { animationEases } from '../useAnimation.js';
-import { css } from '../../css/index.js';
-import { formatCSSProp } from 'oncss';
-import * as variants from './variants.js';
-import { useDocument } from '../../Document/index.js';
-import { useCSSCacheId } from '../../css/CSSCacheProvider.js';
-
-const style = (obj = {}, cacheId, doc) => {
-    return css(obj, { selector: "#", container: doc, cacheId }).classname;
-};
-const getVariant = (rect, variant) => {
-    let fn = typeof variant === 'string' ? variants[variant] : variant;
-    if (!fn)
-        throw new Error(`Transition variant "${variant}" not found.`);
-    return fn(rect);
-};
-const useTransition = (_a) => {
-    var { open } = _a, props = __rest(_a, ["open"]);
-    let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = false, onOpen, onOpened, onClose, onClosed, onState } = props;
-    const doc = useDocument();
-    const cacheId = useCSSCacheId();
-    let _ease = ease || animationEases[easing] || animationEases.bounce;
-    const id = "xui-transition-" + useId();
-    const [state, setState] = useState({
-        initial: false,
-        classname: style({ visibility: "hidden" }, cacheId, doc === null || doc === void 0 ? void 0 : doc.document),
-        variant: variant,
-        rect: null,
-        stage: open ? "open" : "closed",
-        unmounted: false,
-    });
-    const getEle = () => doc === null || doc === void 0 ? void 0 : doc.document.querySelector(`[data-transition="${id}"]`);
-    const getBoundary = () => { var _a; return state.rect || ((_a = getEle()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || new DOMRect(0, 0, 0, 0); };
-    useEffect(() => {
-        if (exitOnUnmount && state.stage === 'closed') {
-            if (!open) {
-                setState(s => (Object.assign(Object.assign({}, s), { initial: false, classname: "", unmounted: true, variant: variant })));
-            }
-            else {
-                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, cacheId, doc === null || doc === void 0 ? void 0 : doc.document), stage: "open" })));
-            }
-        }
-    }, [open, state.stage, exitOnUnmount, variant]);
-    // initial effect
-    useLayoutEffect(() => {
-        const ele = getEle();
-        if (!ele)
-            return;
-        if (exitOnUnmount && state.stage === 'closed')
-            return;
-        const rect = getBoundary();
-        let { from } = getVariant(rect, state.variant);
-        if (open && !state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, cacheId, doc === null || doc === void 0 ? void 0 : doc.document) : "", initial: true, rect: rect })));
-            let stimer = null;
-            let etimer = null;
-            ele.ontransitionstart = () => {
-                clearTimeout(stimer);
-                stimer = setTimeout(() => {
-                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
-                    (onOpen && isOpen) && onOpen();
-                    (onClose && !isOpen) && onClose();
-                    onState && onState(isOpen ? "open" : "close");
-                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "open" : "close" })));
-                }, 1);
-            };
-            ele.ontransitionend = () => {
-                clearTimeout(etimer);
-                etimer = setTimeout(() => {
-                    const isOpen = ele.getAttribute('data-transition-state') === 'open';
-                    (onOpened && isOpen) && onOpened();
-                    (onClosed && !isOpen) && onClosed();
-                    onState && onState(isOpen ? "opened" : "closed");
-                    setState(s => (Object.assign(Object.assign({}, s), { stage: isOpen ? "opened" : "closed" })));
-                }, 1);
-            };
-        }
-        else if (!state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, cacheId, doc === null || doc === void 0 ? void 0 : doc.document), rect: rect })));
-        }
-    }, [open, state.initial, state.stage, exitOnUnmount]);
-    useEffect(() => {
-        if (state.initial) {
-            let _variant = state.variant !== variant ? variant : state.variant;
-            const { from, to } = getVariant(state.rect, _variant);
-            let _css = open ? to : from;
-            let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
-            let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + ", ") + trans });
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, cacheId, doc === null || doc === void 0 ? void 0 : doc.document), variant: _variant })));
-        }
-    }, [open, state.initial, variant]);
-    return {
-        exited: exitOnUnmount && state.stage === 'closed',
-        props: {
-            'id': state.classname,
-            'data-transition': id,
-            'data-transition-state': open ? 'open' : 'close',
-        }
-    };
-};
-
-export { useTransition as default };
-//# sourceMappingURL=index.js.map

package/hooks/useTransition/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\nimport { useState, useEffect, useId, useLayoutEffect } from 'react';\nimport { animationEases } from '../useAnimation';\nimport { css } from '../../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../../css/types';\nimport * as variants from './variants'\nimport { useDocument } from '../../Document';\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\n\nexport type UseTransitionVariantTypes = keyof typeof variants\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\n\nexport type UseTransitionProps = {\n   open: boolean;\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\n   ease?: string;\n   easing?: keyof typeof animationEases;\n   duration?: number;\n   delay?: number;\n   disableInitialTransition?: boolean;\n   exitOnUnmount?: boolean;\n   onOpen?: () => void;\n   onOpened?: () => void;\n   onClose?: () => void;\n   onClosed?: () => void;\n   onState?: (state: UseTransitionState) => void;\n}\n\n\nconst style = (obj = {}, cacheId: string, doc?: Document) => {\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\n}\n\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\n   let fn = typeof variant === 'string' ? variants[variant] : variant\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\n   return fn(rect as DOMRect);\n}\n\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\n   let {\n      disableInitialTransition = false,\n      variant = \"fade\",\n      duration = 400,\n      delay,\n      ease,\n      easing,\n      exitOnUnmount = false,\n      onOpen,\n      onOpened,\n      onClose,\n      onClosed,\n      onState\n   } = props\n   const doc = useDocument();\n   const cacheId = useCSSCacheId()\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\n   const id = \"xui-transition-\" + useId()\n   const [state, setState] = useState({\n      initial: false,\n      classname: style({ visibility: \"hidden\" }, cacheId, doc?.document),\n      variant: variant,\n      rect: null as DOMRect | null,\n      stage: open ? \"open\" : \"closed\",\n      unmounted: false,\n   })\n\n   const getEle = () => doc?.document.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\n\n   useEffect(() => {\n      if (exitOnUnmount && state.stage === 'closed') {\n         if (!open) {\n            setState(s => ({\n               ...s,\n               initial: false,\n               classname: \"\",\n               unmounted: true,\n               variant: variant,\n            }))\n         } else {\n            setState(s => ({\n               ...s,\n               variant: variant,\n               classname: style({ visibility: \"hidden\" }, cacheId, doc?.document),\n               stage: \"open\",\n            }))\n         }\n      }\n   }, [open, state.stage, exitOnUnmount, variant])\n\n   // initial effect\n   useLayoutEffect(() => {\n      const ele = getEle()\n      if (!ele) return\n      if (exitOnUnmount && state.stage === 'closed') return\n\n      const rect = getBoundary();\n      let { from } = getVariant(rect, state.variant)\n      if (open && !state.initial) {\n         setState(s => ({\n            ...s,\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, cacheId, doc?.document) : \"\",\n            initial: true,\n            rect: rect,\n         }))\n         let stimer: any = null\n         let etimer: any = null\n         ele.ontransitionstart = () => {\n            clearTimeout(stimer)\n            stimer = setTimeout(() => {\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\n               (onOpen && isOpen) && onOpen();\n               (onClose && !isOpen) && onClose()\n               onState && onState(isOpen ? \"open\" : \"close\")\n               setState(s => ({\n                  ...s,\n                  stage: isOpen ? \"open\" : \"close\"\n               }))\n            }, 1)\n         }\n\n         ele.ontransitionend = () => {\n            clearTimeout(etimer)\n            etimer = setTimeout(() => {\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\n               (onOpened && isOpen) && onOpened();\n               (onClosed && !isOpen) && onClosed();\n               onState && onState(isOpen ? \"opened\" : \"closed\")\n               setState(s => ({\n                  ...s,\n                  stage: isOpen ? \"opened\" : \"closed\"\n               }))\n            }, 1)\n         }\n      } else if (!state.initial) {\n         setState(s => ({\n            ...s,\n            classname: style(from, cacheId, doc?.document),\n            rect: rect,\n         }))\n      }\n   }, [open, state.initial, state.stage, exitOnUnmount])\n\n\n   useEffect(() => {\n      if (state.initial) {\n         let _variant = state.variant !== variant ? variant : state.variant\n         const { from, to } = getVariant(state.rect, _variant)\n         let _css: CSSProps = open ? to : from\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n         let _ = {\n            ..._css,\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n         }\n         setState(s => ({\n            ...s,\n            classname: style(_, cacheId, doc?.document),\n            variant: _variant\n         }))\n      }\n   }, [open, state.initial, variant])\n\n   return {\n      exited: exitOnUnmount && state.stage === 'closed',\n      props: {\n         'id': state.classname,\n         'data-transition': id,\n         'data-transition-state': open ? 'open' : 'close',\n      }\n   }\n}\n\n\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;;;;AASG;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;AACJ;;AAMN;;AAIG;AACG;AACA;;;AAGA;AAIA;;;;AASH;AACA;;AAEG;;AAEF;;AAEP;;"}

package/hooks/useTransition/variants.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"variants.cjs","sources":["../../../src/hooks/useTransition/variants.ts"],"sourcesContent":["\nexport const slideDown = (rect: DOMRect) => {\n\n    return {\n        from: {\n            transform: `translateY(-${rect.height}px)`,\n        },\n        to: {\n            transform: `translateY(0)`,\n        }\n    }\n}\n\nexport const slideUp = (rect: DOMRect) => {\n    return {\n        from: {\n            transform: `translateY(${rect.height}px)`,\n        },\n        to: {\n            transform: `translateY(0)`,\n        }\n    }\n}\n\nexport const slideRight = (rect: DOMRect) => {\n    return {\n        from: {\n            transform: `translateX(-${rect.width}px)`,\n        },\n        to: {\n            transform: `translateX(0)`,\n        }\n    }\n}\n\nexport const slideLeft = (rect: DOMRect) => {\n    return {\n        from: {\n            transform: `translateX(${rect.width}px)`,\n        },\n        to: {\n            transform: `translateX(0)`,\n        }\n    }\n}\n\nexport const fade = () => {\n    return {\n        from: {\n            opacity: 0\n        },\n        to: {\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeDown = () => {\n    return {\n        from: {\n            transform: `translateY(-30px)`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateY(0)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeUp = () => {\n    return {\n        from: {\n            transform: `translateY(30px)`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateY(0)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeRight = () => {\n    return {\n        from: {\n            transform: `translateX(-30px)`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateX(0)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeLeft = () => {\n    return {\n        from: {\n            transform: `translateX(30px)`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateX(0)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const grow = () => {\n    return {\n        from: {\n            transform: \"scale(.8, .6)\",\n            opacity: 0\n        },\n        to: {\n            transform: \"scale(1)\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoom = () => {\n    return {\n        from: {\n            transform: \"scale(.8)\",\n            opacity: 0\n        },\n        to: {\n            transform: \"scale(1)\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoomOver = () => {\n    return {\n        from: {\n            transform: \"scale(1.2)\",\n            opacity: 0\n        },\n        to: {\n            transform: \"scale(1)\",\n            opacity: 1\n        }\n    }\n}\n\nexport const collapseVertical = (rect: DOMRect) => {\n\n    return {\n        from: {\n            maxHeight: 0 + \"px\",\n            overflow: \"hidden\"\n        },\n        to: {\n            maxHeight: rect.height,\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\nexport const collapseHorizontal = (rect: DOMRect) => {\n    return {\n        from: {\n            width: 0 + \"px\",\n            overflow: \"hidden\"\n        },\n        to: {\n            width: rect?.width ? rect?.width + \"px\" : \"auto\",\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\n\n\n"],"names":[],"mappings":"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"}

package/hooks/useTransition/variants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"variants.js","sources":["../../../src/hooks/useTransition/variants.ts"],"sourcesContent":["\nexport const slideDown = (rect: DOMRect) => {\n\n    return {\n        from: {\n            transform: `translateY(-${rect.height}px)`,\n        },\n        to: {\n            transform: `translateY(0)`,\n        }\n    }\n}\n\nexport const slideUp = (rect: DOMRect) => {\n    return {\n        from: {\n            transform: `translateY(${rect.height}px)`,\n        },\n        to: {\n            transform: `translateY(0)`,\n        }\n    }\n}\n\nexport const slideRight = (rect: DOMRect) => {\n    return {\n        from: {\n            transform: `translateX(-${rect.width}px)`,\n        },\n        to: {\n            transform: `translateX(0)`,\n        }\n    }\n}\n\nexport const slideLeft = (rect: DOMRect) => {\n    return {\n        from: {\n            transform: `translateX(${rect.width}px)`,\n        },\n        to: {\n            transform: `translateX(0)`,\n        }\n    }\n}\n\nexport const fade = () => {\n    return {\n        from: {\n            opacity: 0\n        },\n        to: {\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeDown = () => {\n    return {\n        from: {\n            transform: `translateY(-30px)`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateY(0)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeUp = () => {\n    return {\n        from: {\n            transform: `translateY(30px)`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateY(0)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeRight = () => {\n    return {\n        from: {\n            transform: `translateX(-30px)`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateX(0)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeLeft = () => {\n    return {\n        from: {\n            transform: `translateX(30px)`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateX(0)`,\n            opacity: 1\n        }\n    }\n}\n\nexport const grow = () => {\n    return {\n        from: {\n            transform: \"scale(.8, .6)\",\n            opacity: 0\n        },\n        to: {\n            transform: \"scale(1)\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoom = () => {\n    return {\n        from: {\n            transform: \"scale(.8)\",\n            opacity: 0\n        },\n        to: {\n            transform: \"scale(1)\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoomOver = () => {\n    return {\n        from: {\n            transform: \"scale(1.2)\",\n            opacity: 0\n        },\n        to: {\n            transform: \"scale(1)\",\n            opacity: 1\n        }\n    }\n}\n\nexport const collapseVertical = (rect: DOMRect) => {\n\n    return {\n        from: {\n            maxHeight: 0 + \"px\",\n            overflow: \"hidden\"\n        },\n        to: {\n            maxHeight: rect.height,\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\nexport const collapseHorizontal = (rect: DOMRect) => {\n    return {\n        from: {\n            width: 0 + \"px\",\n            overflow: \"hidden\"\n        },\n        to: {\n            width: rect?.width ? rect?.width + \"px\" : \"auto\",\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\n\n\n"],"names":[],"mappings":"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"}

package/theme/createTheme.cjs

@@ -1,29 +0,0 @@
-"use client";
-'use strict';
-
-var core = require('./core.cjs');
-var index = require('../css/index.cjs');
-var ThemeDefaultOptions = require('./ThemeDefaultOptions.cjs');
-
-const createTheme = (name, options, mode = "light") => {
-    if (core.ThemeFactory.has(name)) {
-        console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`);
-        return core.ThemeFactory.get(name);
-    }
-    const defaultOptions = mode === 'light' ? ThemeDefaultOptions.lightThemeOptions : ThemeDefaultOptions.darkThemeOptions;
-    let theme = core.mergeObject(defaultOptions, Object.assign(Object.assign({}, options), { name, breakpoints: index.breakpoints }));
-    // add alpha colors
-    for (let color in theme.colors) {
-        const c = theme.colors[color];
-        const is_common = color === 'divider' || color === 'background' || color === 'text';
-        c.soft = {
-            primary: is_common ? index.alpha(c.primary, 0.60) : index.alpha(c.primary, 0.08),
-            secondary: is_common ? index.alpha(c.primary, 0.90) : index.alpha(c.primary, 0.12)
-        };
-    }
-    core.ThemeFactory.set(name, theme);
-    return theme;
-};
-
-exports.createTheme = createTheme;
-//# sourceMappingURL=createTheme.cjs.map

package/theme/createTheme.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"createTheme.cjs","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["\"use client\"\nimport { ThemeOptions, ThemeOptionInput, ThemeOptionsColor } from \"./types\"\nimport { mergeObject, ThemeFactory } from \"./core\"\nimport { alpha, breakpoints } from \"../css\"\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\n\nexport const createTheme = (name: string, options: ThemeOptionInput, mode: \"light\" | \"dark\" = \"light\"): ThemeOptions => {\n   if (ThemeFactory.has(name)) {\n      console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`)\n      return ThemeFactory.get(name) as ThemeOptions\n   }\n   const defaultOptions = mode === 'light' ? lightThemeOptions : darkThemeOptions\n   let theme: any = mergeObject(defaultOptions, {\n      ...options,\n      name,\n      breakpoints: breakpoints\n   })\n\n   // add alpha colors\n   for (let color in theme.colors) {\n      const c = theme.colors[color] as ThemeOptionsColor\n      const is_common = color === 'divider' || color === 'background' || color === 'text'\n      c.soft = {\n         primary: is_common ? alpha(c.primary, 0.60) : alpha(c.primary, 0.08),\n         secondary: is_common ? alpha(c.primary, 0.90) : alpha(c.primary, 0.12)\n      }\n   }\n\n   ThemeFactory.set(name, theme)\n\n   return theme as ThemeOptions\n}\n"],"names":[],"mappings":";;;;;;;AAMO;AACJ;AACG;AACA;;AAEH;AACA;;AAOA;;AAEG;;;;;;AAOH;AAEA;AACH;;"}

package/theme/createTheme.d.ts

@@ -1,5 +0,0 @@
-import { ThemeOptionInput, ThemeOptions } from './types.js';
-
-declare const createTheme: (name: string, options: ThemeOptionInput, mode?: "light" | "dark") => ThemeOptions;
-
-export { createTheme };

package/theme/createTheme.js

@@ -1,27 +0,0 @@
-"use client";
-import { ThemeFactory, mergeObject } from './core.js';
-import { breakpoints, alpha } from '../css/index.js';
-import { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions.js';
-
-const createTheme = (name, options, mode = "light") => {
-    if (ThemeFactory.has(name)) {
-        console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`);
-        return ThemeFactory.get(name);
-    }
-    const defaultOptions = mode === 'light' ? lightThemeOptions : darkThemeOptions;
-    let theme = mergeObject(defaultOptions, Object.assign(Object.assign({}, options), { name, breakpoints: breakpoints }));
-    // add alpha colors
-    for (let color in theme.colors) {
-        const c = theme.colors[color];
-        const is_common = color === 'divider' || color === 'background' || color === 'text';
-        c.soft = {
-            primary: is_common ? alpha(c.primary, 0.60) : alpha(c.primary, 0.08),
-            secondary: is_common ? alpha(c.primary, 0.90) : alpha(c.primary, 0.12)
-        };
-    }
-    ThemeFactory.set(name, theme);
-    return theme;
-};
-
-export { createTheme };
-//# sourceMappingURL=createTheme.js.map

package/theme/createTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createTheme.js","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["\"use client\"\nimport { ThemeOptions, ThemeOptionInput, ThemeOptionsColor } from \"./types\"\nimport { mergeObject, ThemeFactory } from \"./core\"\nimport { alpha, breakpoints } from \"../css\"\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\n\nexport const createTheme = (name: string, options: ThemeOptionInput, mode: \"light\" | \"dark\" = \"light\"): ThemeOptions => {\n   if (ThemeFactory.has(name)) {\n      console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`)\n      return ThemeFactory.get(name) as ThemeOptions\n   }\n   const defaultOptions = mode === 'light' ? lightThemeOptions : darkThemeOptions\n   let theme: any = mergeObject(defaultOptions, {\n      ...options,\n      name,\n      breakpoints: breakpoints\n   })\n\n   // add alpha colors\n   for (let color in theme.colors) {\n      const c = theme.colors[color] as ThemeOptionsColor\n      const is_common = color === 'divider' || color === 'background' || color === 'text'\n      c.soft = {\n         primary: is_common ? alpha(c.primary, 0.60) : alpha(c.primary, 0.08),\n         secondary: is_common ? alpha(c.primary, 0.90) : alpha(c.primary, 0.12)\n      }\n   }\n\n   ThemeFactory.set(name, theme)\n\n   return theme as ThemeOptions\n}\n"],"names":[],"mappings":";;;;;AAMO;AACJ;AACG;AACA;;AAEH;AACA;;AAOA;;AAEG;;;;;;AAOH;AAEA;AACH;;"}