@xanui/core 1.1.2 → 1.1.3

package/theme/core.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/theme/core.ts"],
+  "sourcesContent": ["import React from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext(\"light\")\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\nexport const useTheme = (): ThemeOptions => ThemeFactory.get(React.useContext(ThemeContex)) as any\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"],
+  "mappings": "AAAA,OAAOA,MAAW,QAGX,MAAMC,EAAe,IAAI,IACnBC,EAAcF,EAAM,cAAc,OAAO,EACzCG,EAAYC,GAAkBH,EAAa,IAAIG,CAAK,EACpDC,EAAW,IAAoBJ,EAAa,IAAID,EAAM,WAAWE,CAAW,CAAC,EAE7EI,EAAc,CAACC,EAAeC,IAAkB,CAC1DD,EAAI,CAAE,GAAGA,CAAE,EACXC,EAAI,CAAE,GAAGA,CAAE,EACX,UAAWC,KAAOD,EAAG,CAClB,MAAME,EAAKF,EAAUC,CAAG,EACpB,OAAOC,GAAM,UAAY,CAAC,MAAM,QAAQA,CAAC,GAAK,CAACV,EAAM,eAAeU,CAAC,EACtEH,EAAEE,CAAG,EAAIH,EAAYC,EAAEE,CAAG,EAAGD,EAAEC,CAAG,CAAC,EAEnCF,EAAEE,CAAG,EAAIC,CAEf,CACA,OAAOH,CACV",
+  "names": ["React", "ThemeFactory", "ThemeContex", "getTheme", "theme", "useTheme", "mergeObject", "a", "b", "key", "v"]
+}

package/theme/createColor.d.ts

@@ -0,0 +1,41 @@
+import { ThemeOptions, ThemeColor } from "./types";
+declare const createColor: (theme: ThemeOptions, name: keyof ThemeColor) => {
+    alpha: string;
+    template: {
+        outline: {
+            bgcolor: string;
+            color: any;
+            border: number;
+            borderColor: any;
+            hover: {
+                color: any;
+                borderColor: any;
+            };
+        };
+        fill: {
+            bgcolor: any;
+            color: any;
+            hover: {
+                bgcolor: any;
+                color: any;
+            };
+        };
+        text: {
+            bgcolor: string;
+            color: any;
+            hover: {
+                bgcolor: any;
+                color: any;
+            };
+        };
+        alpha: {
+            bgcolor: any;
+            color: any;
+            hover: {
+                bgcolor: any;
+                color: any;
+            };
+        };
+    };
+};
+export default createColor;

package/theme/createColor.js

@@ -0,0 +1,2 @@
+import{alpha as l}from"../css";const b=(a,c)=>{let n=a.colors[c],{primary:o,secondary:t}=n,e=n.text||a.colors.text.primary,p=l(o,.1);const r=(i,s)=>c==="background"?i:s;return{alpha:p,template:{outline:{bgcolor:"transparent",color:r(e,o),border:1,borderColor:r("divider",l(o,.4)),hover:{color:r(e,o),borderColor:r("divider",l(o,.8))}},fill:{bgcolor:r(t,o),color:e,hover:{bgcolor:r(l(t,.6),t),color:e}},text:{bgcolor:"transparent",color:r(e,o),hover:{bgcolor:r(l(t,.6),l(o,.1)),color:r(e,o)}},alpha:{bgcolor:r(l(t,.5),l(o,.1)),color:r(e,o),hover:{bgcolor:r(l(t,.8),l(o,.15)),color:r(e,o)}}}}};var y=b;export{y as default};
+//# sourceMappingURL=createColor.js.map

package/theme/createColor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/theme/createColor.ts"],
+  "sourcesContent": ["import { ThemeOptions, ThemeColor } from \"./types\"\nimport { alpha } from \"../css\"\n\nconst createColor = (theme: ThemeOptions, name: keyof ThemeColor) => {\n   let color = theme.colors[name]\n   let { primary, secondary } = color as any\n   let text = (color as any).text || theme.colors.text.primary\n   let _alpha = alpha(primary, .1)\n\n   const isBag = (a: any, b: any) => name === \"background\" ? a : b\n\n   return {\n      alpha: _alpha,\n      template: {\n         outline: {\n            bgcolor: \"transparent\",\n            color: isBag(text, primary),\n            border: 1,\n            borderColor: isBag(\"divider\", alpha(primary, .4)),\n            hover: {\n               color: isBag(text, primary),\n               borderColor: isBag(\"divider\", alpha(primary, .8)),\n            }\n         },\n         fill: {\n            bgcolor: isBag(secondary, primary),\n            color: text,\n            hover: {\n               bgcolor: isBag(alpha(secondary, .6), secondary),\n               color: text,\n            }\n         },\n         text: {\n            bgcolor: \"transparent\",\n            color: isBag(text, primary),\n            hover: {\n               bgcolor: isBag(alpha(secondary, .6), alpha(primary, .1)),\n               color: isBag(text, primary),\n            }\n         },\n         alpha: {\n            bgcolor: isBag(alpha(secondary, .5), alpha(primary, .1)),\n            color: isBag(text, primary),\n            hover: {\n               bgcolor: isBag(alpha(secondary, .8), alpha(primary, .15)),\n               color: isBag(text, primary),\n            }\n         }\n      }\n   }\n}\n\nexport default createColor"],
+  "mappings": "AACA,OAAS,SAAAA,MAAa,SAEtB,MAAMC,EAAc,CAACC,EAAqBC,IAA2B,CAClE,IAAIC,EAAQF,EAAM,OAAOC,CAAI,EACzB,CAAE,QAAAE,EAAS,UAAAC,CAAU,EAAIF,EACzBG,EAAQH,EAAc,MAAQF,EAAM,OAAO,KAAK,QAChDM,EAASR,EAAMK,EAAS,EAAE,EAE9B,MAAMI,EAAQ,CAACC,EAAQC,IAAWR,IAAS,aAAeO,EAAIC,EAE9D,MAAO,CACJ,MAAOH,EACP,SAAU,CACP,QAAS,CACN,QAAS,cACT,MAAOC,EAAMF,EAAMF,CAAO,EAC1B,OAAQ,EACR,YAAaI,EAAM,UAAWT,EAAMK,EAAS,EAAE,CAAC,EAChD,MAAO,CACJ,MAAOI,EAAMF,EAAMF,CAAO,EAC1B,YAAaI,EAAM,UAAWT,EAAMK,EAAS,EAAE,CAAC,CACnD,CACH,EACA,KAAM,CACH,QAASI,EAAMH,EAAWD,CAAO,EACjC,MAAOE,EACP,MAAO,CACJ,QAASE,EAAMT,EAAMM,EAAW,EAAE,EAAGA,CAAS,EAC9C,MAAOC,CACV,CACH,EACA,KAAM,CACH,QAAS,cACT,MAAOE,EAAMF,EAAMF,CAAO,EAC1B,MAAO,CACJ,QAASI,EAAMT,EAAMM,EAAW,EAAE,EAAGN,EAAMK,EAAS,EAAE,CAAC,EACvD,MAAOI,EAAMF,EAAMF,CAAO,CAC7B,CACH,EACA,MAAO,CACJ,QAASI,EAAMT,EAAMM,EAAW,EAAE,EAAGN,EAAMK,EAAS,EAAE,CAAC,EACvD,MAAOI,EAAMF,EAAMF,CAAO,EAC1B,MAAO,CACJ,QAASI,EAAMT,EAAMM,EAAW,EAAE,EAAGN,EAAMK,EAAS,GAAG,CAAC,EACxD,MAAOI,EAAMF,EAAMF,CAAO,CAC7B,CACH,CACH,CACH,CACH,EAEA,IAAOO,EAAQX",
+  "names": ["alpha", "createColor", "theme", "name", "color", "primary", "secondary", "text", "_alpha", "isBag", "a", "b", "createColor_default"]
+}

package/theme/createTheme.d.ts

@@ -0,0 +1,2 @@
+import { ThemeOptions, ThemeOptionInput } from "./types";
+export declare const createTheme: (name: string, options: ThemeOptionInput, darkMode?: boolean) => ThemeOptions;

package/theme/createTheme.js

@@ -0,0 +1,2 @@
+import s,{darkColorPallete as m}from"./ThemeDefaultOptions";import{mergeObject as n,ThemeFactory as t}from"./core";import r from"./createColor";import{breakpoints as c}from"../css";const u=(o,a,i)=>{if(t.has(o))throw new Error(`theme "${o}" already exists!`);{let e=n(s,{...i?m:{},...a,name:o,breakpoints:c});e=n(e,{colors:{background:r(e,"background"),brand:r(e,"brand"),accent:r(e,"accent"),info:r(e,"info"),success:r(e,"success"),warning:r(e,"warning"),danger:r(e,"danger")}}),t.set(o,e)}return t.get(o)};export{u as createTheme};
+//# sourceMappingURL=createTheme.js.map

package/theme/createTheme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/theme/createTheme.ts"],
+  "sourcesContent": ["import { ThemeOptions, ThemeOptionInput } from \"./types\"\nimport defaultThemeOption, { darkColorPallete } from './ThemeDefaultOptions'\nimport { mergeObject, ThemeFactory } from \"./core\"\nimport createColor from \"./createColor\"\nimport { breakpoints } from \"../css\"\n\nexport const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {\n   if (!ThemeFactory.has(name)) {\n      let theme: any = mergeObject(defaultThemeOption, {\n         ...(darkMode ? darkColorPallete : {}),\n         ...options,\n         name,\n         breakpoints: breakpoints\n      })\n\n      theme = mergeObject(theme, {\n         colors: {\n            background: createColor(theme, \"background\"),\n            brand: createColor(theme, \"brand\"),\n            accent: createColor(theme, \"accent\"),\n            info: createColor(theme, \"info\"),\n            success: createColor(theme, \"success\"),\n            warning: createColor(theme, \"warning\"),\n            danger: createColor(theme, \"danger\")\n         }\n      })\n      ThemeFactory.set(name, theme)\n   } else {\n      throw new Error(`theme \"${name}\" already exists!`);\n   }\n\n   return ThemeFactory.get(name) as ThemeOptions\n}\n"],
+  "mappings": "AACA,OAAOA,GAAsB,oBAAAC,MAAwB,wBACrD,OAAS,eAAAC,EAAa,gBAAAC,MAAoB,SAC1C,OAAOC,MAAiB,gBACxB,OAAS,eAAAC,MAAmB,SAErB,MAAMC,EAAc,CAACC,EAAcC,EAA2BC,IAAqC,CACvG,GAAKN,EAAa,IAAII,CAAI,EAqBvB,MAAM,IAAI,MAAM,UAAUA,CAAI,mBAAmB,EArBvB,CAC1B,IAAIG,EAAaR,EAAYF,EAAoB,CAC9C,GAAIS,EAAWR,EAAmB,CAAC,EACnC,GAAGO,EACH,KAAAD,EACA,YAAaF,CAChB,CAAC,EAEDK,EAAQR,EAAYQ,EAAO,CACxB,OAAQ,CACL,WAAYN,EAAYM,EAAO,YAAY,EAC3C,MAAON,EAAYM,EAAO,OAAO,EACjC,OAAQN,EAAYM,EAAO,QAAQ,EACnC,KAAMN,EAAYM,EAAO,MAAM,EAC/B,QAASN,EAAYM,EAAO,SAAS,EACrC,QAASN,EAAYM,EAAO,SAAS,EACrC,OAAQN,EAAYM,EAAO,QAAQ,CACtC,CACH,CAAC,EACDP,EAAa,IAAII,EAAMG,CAAK,CAC/B,CAIA,OAAOP,EAAa,IAAII,CAAI,CAC/B",
+  "names": ["defaultThemeOption", "darkColorPallete", "mergeObject", "ThemeFactory", "createColor", "breakpoints", "createTheme", "name", "options", "darkMode", "theme"]
+}

package/theme/createThemeSwitcher.d.ts

@@ -0,0 +1,6 @@
+declare const createThemeSwitcher: (defaultTheme: string, store?: "session" | "local") => () => {
+    name: string;
+    theme: import("./types").ThemeOptions | undefined;
+    change: (theme: string) => void;
+};
+export default createThemeSwitcher;

package/theme/createThemeSwitcher.js

@@ -0,0 +1,2 @@
+import{createBucket as s}from"react-state-bucket";import{getTheme as a}from"./core";const c=(t,r)=>{const m=s({name:t},{store:r});return()=>{const e=m();return{name:e.get("name"),theme:a(e.get("name")),change:n=>e.set("name",n)}}};var u=c;export{u as default};
+//# sourceMappingURL=createThemeSwitcher.js.map

package/theme/createThemeSwitcher.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/theme/createThemeSwitcher.ts"],
+  "sourcesContent": ["import { createBucket } from \"react-state-bucket\"\nimport { getTheme } from \"./core\"\n\nconst createThemeSwitcher = (defaultTheme: string, store?: \"session\" | \"local\") => {\n   const useThemeState = createBucket({ name: defaultTheme }, { store })\n   const useThemeSwitcher = () => {\n      const state = useThemeState()\n      return {\n         name: state.get(\"name\"),\n         theme: getTheme(state.get(\"name\")),\n         change: (theme: string) => state.set(\"name\", theme)\n      }\n   }\n   return useThemeSwitcher\n}\n\n\nexport default createThemeSwitcher"],
+  "mappings": "AAAA,OAAS,gBAAAA,MAAoB,qBAC7B,OAAS,YAAAC,MAAgB,SAEzB,MAAMC,EAAsB,CAACC,EAAsBC,IAAgC,CAChF,MAAMC,EAAgBL,EAAa,CAAE,KAAMG,CAAa,EAAG,CAAE,MAAAC,CAAM,CAAC,EASpE,MARyB,IAAM,CAC5B,MAAME,EAAQD,EAAc,EAC5B,MAAO,CACJ,KAAMC,EAAM,IAAI,MAAM,EACtB,MAAOL,EAASK,EAAM,IAAI,MAAM,CAAC,EACjC,OAASC,GAAkBD,EAAM,IAAI,OAAQC,CAAK,CACrD,CACH,CAEH,EAGA,IAAOC,EAAQN",
+  "names": ["createBucket", "getTheme", "createThemeSwitcher", "defaultTheme", "store", "useThemeState", "state", "theme", "createThemeSwitcher_default"]
+}

package/theme/index.d.ts

@@ -0,0 +1,5 @@
+import ThemeProvider from './ThemeProvider';
+import createThemeSwitcher from './createThemeSwitcher';
+import { getTheme, useTheme } from './core';
+export type { ThemeProviderProps } from './ThemeProvider';
+export { ThemeProvider, createThemeSwitcher, getTheme, useTheme };

package/theme/index.js

@@ -0,0 +1,2 @@
+import{lightColorPallete as r,darkColorPallete as o}from"./ThemeDefaultOptions";import{createTheme as e}from"./createTheme";import m from"./ThemeProvider";import t from"./createThemeSwitcher";import{getTheme as i,useTheme as h}from"./core";e("light",{colors:r}),e("dark",{colors:o});export{m as ThemeProvider,t as createThemeSwitcher,i as getTheme,h as useTheme};
+//# sourceMappingURL=index.js.map

package/theme/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/theme/index.tsx"],
+  "sourcesContent": ["import { lightColorPallete, darkColorPallete } from './ThemeDefaultOptions'\nimport { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport createThemeSwitcher from './createThemeSwitcher'\nimport { getTheme, useTheme } from './core'\nexport type { ThemeProviderProps } from './ThemeProvider'\n\nexport {\n    ThemeProvider,\n    createThemeSwitcher,\n    getTheme,\n    useTheme\n}\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\n"],
+  "mappings": "AAAA,OAAS,qBAAAA,EAAmB,oBAAAC,MAAwB,wBACpD,OAAS,eAAAC,MAAmB,gBAC5B,OAAOC,MAAmB,kBAC1B,OAAOC,MAAyB,wBAChC,OAAS,YAAAC,EAAU,YAAAC,MAAgB,SAUnCJ,EAAY,QAAS,CAAE,OAAQF,CAAkB,CAAC,EAClDE,EAAY,OAAQ,CAAE,OAAQD,CAAiB,CAAC",
+  "names": ["lightColorPallete", "darkColorPallete", "createTheme", "ThemeProvider", "createThemeSwitcher", "getTheme", "useTheme"]
+}

package/{src/theme/types.ts → theme/types.d.ts}

@@ -1,7 +1,7 @@
 import { BreakpointKeys, GlobalCSS } from "../css/types";
-
-export type ObjectType = { [key: string]: any }
-
+export type ObjectType = {
+    [key: string]: any;
+};
 export type ThemeColorItem = {
     primary: string;
     secondary: string;
@@ -14,57 +14,54 @@ export type ThemeColorItem = {
             border: number;
             borderColor: string;
             hover: {
-                bgcolor: string,
-                color: string,
-            }
-        },
+                bgcolor: string;
+                color: string;
+            };
+        };
         fill: {
             bgcolor: string;
-            color: string,
+            color: string;
             hover: {
                 bgcolor: string;
                 color: string;
-            }
-        },
+            };
+        };
         text: {
             bgcolor: string;
             color: string;
             hover: {
                 bgcolor: string;
                 color: string;
-            }
-        },
+            };
+        };
         alpha: {
-            bgcolor: string
+            bgcolor: string;
             color: string;
             hover: {
                 bgcolor: string;
                 color: string;
-            }
-        }
-    }
-}
-
+            };
+        };
+    };
+};
 export type ThemeTypographyItem = {
     fontSize: number;
     lineHeight: number;
     fontWeight: number;
-}
-
+};
 export type ThemeColor = {
     background: Omit<ThemeColorItem, "text">;
     text: Omit<ThemeColorItem, "text" | "alpha" | "template">;
     divider: string;
     brand: ThemeColorItem;
     accent: ThemeColorItem;
-    success: ThemeColorItem
-    info: ThemeColorItem
-    warning: ThemeColorItem
-    danger: ThemeColorItem
+    success: ThemeColorItem;
+    info: ThemeColorItem;
+    warning: ThemeColorItem;
+    danger: ThemeColorItem;
 };
-
 export type ThemeTypographyType = {
-    fontFamily: string,
+    fontFamily: string;
     h1: ThemeTypographyItem;
     h2: ThemeTypographyItem;
     h3: ThemeTypographyItem;
@@ -74,35 +71,36 @@ export type ThemeTypographyType = {
     text: ThemeTypographyItem;
     button: ThemeTypographyItem;
     small: ThemeTypographyItem;
-}
-
+};
 export interface ThemeOptions {
     name: string;
     rtl: boolean;
-    globalStyle: GlobalCSS,
-    breakpoints: { [key in BreakpointKeys]: number };
+    globalStyle: GlobalCSS;
+    breakpoints: {
+        [key in BreakpointKeys]: number;
+    };
     shadow: string[];
-    interfaces: { [name: string]: <P extends object>(defaultProps: P, theme: ThemeOptions) => P };
+    interfaces: {
+        [name: string]: <P extends object>(defaultProps: P, theme: ThemeOptions) => P;
+    };
     colors: ThemeColor;
     typography: ThemeTypographyType;
 }
-
-// Theme Input
-export type ThemeColorItemInput = Partial<Omit<ThemeColorItem, "alpha">>
-export type ThemeTypographyItemInput = Partial<ThemeTypographyItem>
+export type ThemeColorItemInput = Partial<Omit<ThemeColorItem, "alpha">>;
+export type ThemeTypographyItemInput = Partial<ThemeTypographyItem>;
 export type ThemeColorInput = {
-    background?: Omit<ThemeColorItemInput, "text">
-    text?: Omit<ThemeColorItemInput, "text">
+    background?: Omit<ThemeColorItemInput, "text">;
+    text?: Omit<ThemeColorItemInput, "text">;
     divider?: string;
     brand?: ThemeColorItemInput;
     accent?: ThemeColorItemInput;
-    success?: ThemeColorItemInput
-    info?: ThemeColorItemInput
-    warning?: ThemeColorItemInput
-    danger?: ThemeColorItemInput
+    success?: ThemeColorItemInput;
+    info?: ThemeColorItemInput;
+    warning?: ThemeColorItemInput;
+    danger?: ThemeColorItemInput;
 };
 export type ThemeTypographyInputType = {
-    fontFamily?: string,
+    fontFamily?: string;
     h1?: ThemeTypographyItemInput;
     h2?: ThemeTypographyItemInput;
     h3?: ThemeTypographyItemInput;
@@ -115,67 +113,12 @@ export type ThemeTypographyInputType = {
 };
 export interface ThemeOptionInput {
     rtl?: boolean;
-    globalStyle?: GlobalCSS,
-    interfaces?: { [name: string]: <P extends object>(defaultProps: P, theme: ThemeOptions) => P };
+    globalStyle?: GlobalCSS;
+    interfaces?: {
+        [name: string]: <P extends object>(defaultProps: P, theme: ThemeOptions) => P;
+    };
     colors?: ThemeColorInput;
     typography?: ThemeTypographyInputType;
 }
-
-// ============ Reference Types
-
-export type TypographyRefTypes =
-    | "h1"
-    | "h2"
-    | "h3"
-    | "h4"
-    | "h5"
-    | "h6"
-    | "text"
-    | "button"
-    | "small"
-
-export type ColorsRefTypes =
-    | "text"
-    | "text.primary"
-    | "text.secondary"
-
-    | "background"
-    | "background.primary"
-    | "background.secondary"
-    | "background.alpha"
-
-    | "brand"
-    | "brand.primary"
-    | "brand.secondary"
-    | "brand.alpha"
-    | "brand.text"
-
-    | "accent"
-    | "accent.primary"
-    | "accent.secondary"
-    | "accent.alpha"
-    | "accent.text"
-
-    | "info"
-    | "info.primary"
-    | "info.secondary"
-    | "info.alpha"
-    | "info.text"
-
-    | "success"
-    | "success.primary"
-    | "success.secondary"
-    | "success.alpha"
-    | "success.text"
-
-    | "warning"
-    | "warning.primary"
-    | "warning.secondary"
-    | "warning.alpha"
-    | "warning.text"
-
-    | "danger"
-    | "danger.primary"
-    | "danger.secondary"
-    | "danger.alpha"
-    | "danger.text"
+export type TypographyRefTypes = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "text" | "button" | "small";
+export type ColorsRefTypes = "text" | "text.primary" | "text.secondary" | "background" | "background.primary" | "background.secondary" | "background.alpha" | "brand" | "brand.primary" | "brand.secondary" | "brand.alpha" | "brand.text" | "accent" | "accent.primary" | "accent.secondary" | "accent.alpha" | "accent.text" | "info" | "info.primary" | "info.secondary" | "info.alpha" | "info.text" | "success" | "success.primary" | "success.secondary" | "success.alpha" | "success.text" | "warning" | "warning.primary" | "warning.secondary" | "warning.alpha" | "warning.text" | "danger" | "danger.primary" | "danger.secondary" | "danger.alpha" | "danger.text";

package/theme/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/theme/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/useAnimation.d.ts

@@ -0,0 +1,18 @@
+import { CSSProps } from './css/types';
+export declare const animationEases: {
+    easeInOut: string;
+    easeOut: string;
+    easeIn: string;
+    sharp: string;
+    linear: string;
+    easeBounceOut: string;
+};
+export interface UseAnimationProps {
+    delay?: number;
+    duration?: number;
+    from: CSSProps;
+    to: CSSProps;
+    ease?: keyof typeof animationEases;
+}
+declare const useAnimation: ({ from, to, delay, ease, duration }: UseAnimationProps) => string;
+export default useAnimation;

package/useAnimation.js

@@ -0,0 +1,2 @@
+import{css as u}from"./css";import{useId as b}from"react";const a={easeInOut:"cubic-bezier(0.4, 0, 0.2, 1)",easeOut:"cubic-bezier(0.0, 0, 0.2, 1)",easeIn:"cubic-bezier(0.4, 0, 1, 1)",sharp:"cubic-bezier(0.4, 0, 0.6, 1)",linear:"cubic-bezier(0, 0, 1, 1)",easeBounceOut:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"},p=({from:i,to:n,delay:o,ease:t,duration:s})=>{let r=o||0,m=s||600,c=t||"easeBounceOut";const e="anim"+b().replace(/:/g,"");return u({animationName:e,animationDelay:r+"ms",animationDuration:m+"ms",animationTimingFunction:a[c]||a.easeBounceOut,[`@keyframes ${e}`]:{from:i,to:n}}).classname};var S=p;export{a as animationEases,S as default};
+//# sourceMappingURL=useAnimation.js.map

package/useAnimation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/useAnimation.ts"],
+  "sourcesContent": ["import { css } from './css'\nimport { useId } from 'react'\nimport { CSSProps } from './css/types'\n\nexport const animationEases = {\n    easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n    easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n    sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\n    easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n}\n\nexport interface UseAnimationProps {\n    delay?: number;\n    duration?: number;\n    from: CSSProps;\n    to: CSSProps;\n    ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n    let _delay = delay || 0;\n    let _duration = duration || 600;\n    let _ease = ease || \"easeBounceOut\"\n    const id = \"anim\" + useId().replace(/:/g, \"\")\n    const anim = css({\n        animationName: id,\n        animationDelay: _delay + \"ms\",\n        animationDuration: _duration + \"ms\",\n        animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\n        [`@keyframes ${id}`]: {\n            from: from as any,\n            to: to as any\n        }\n    })\n    return anim.classname\n}\n\nexport default useAnimation"],
+  "mappings": "AAAA,OAAS,OAAAA,MAAW,QACpB,OAAS,SAAAC,MAAa,QAGf,MAAMC,EAAiB,CAC1B,UAAW,+BACX,QAAS,+BACT,OAAQ,6BACR,MAAO,+BACP,OAAQ,2BACR,cAAe,wCACnB,EAUMC,EAAe,CAAC,CAAE,KAAAC,EAAM,GAAAC,EAAI,MAAAC,EAAO,KAAAC,EAAM,SAAAC,CAAS,IAAyB,CAC7E,IAAIC,EAASH,GAAS,EAClBI,EAAYF,GAAY,IACxBG,EAAQJ,GAAQ,gBACpB,MAAMK,EAAK,OAASX,EAAM,EAAE,QAAQ,KAAM,EAAE,EAW5C,OAVaD,EAAI,CACb,cAAeY,EACf,eAAgBH,EAAS,KACzB,kBAAmBC,EAAY,KAC/B,wBAAyBR,EAAeS,CAAK,GAAKT,EAAe,cACjE,CAAC,cAAcU,CAAE,EAAE,EAAG,CAClB,KAAMR,EACN,GAAIC,CACR,CACJ,CAAC,EACW,SAChB,EAEA,IAAOQ,EAAQV",
+  "names": ["css", "useId", "animationEases", "useAnimation", "from", "to", "delay", "ease", "duration", "_delay", "_duration", "_ease", "id", "useAnimation_default"]
+}

package/useColorTemplate.d.ts

@@ -0,0 +1,4 @@
+export type ColorTemplateColors = "default" | "brand" | "accent" | "info" | "success" | "warning" | "danger";
+export type ColorTemplateType = "fill" | "outline" | "text" | "alpha";
+declare const useColorTemplate: (color: ColorTemplateColors, type: ColorTemplateType) => any;
+export default useColorTemplate;

package/useColorTemplate.js

@@ -0,0 +1,2 @@
+import{useTheme as a}from"./theme";const r=(e,o)=>{const t=a();let l=e==="default"?"background":e;return t.colors[l]?.template[o]};var n=r;export{n as default};
+//# sourceMappingURL=useColorTemplate.js.map

package/useColorTemplate.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/useColorTemplate.ts"],
+  "sourcesContent": ["import { useTheme } from \"./theme\"\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\n\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\n    const theme: any = useTheme()\n    let _color = color === 'default' ? \"background\" : color as any\n    return theme.colors[_color]?.template[type]\n}\n\nexport default useColorTemplate"],
+  "mappings": "AAAA,OAAS,YAAAA,MAAgB,UAIzB,MAAMC,EAAmB,CAACC,EAA4BC,IAA4B,CAC9E,MAAMC,EAAaJ,EAAS,EAC5B,IAAIK,EAASH,IAAU,UAAY,aAAeA,EAClD,OAAOE,EAAM,OAAOC,CAAM,GAAG,SAASF,CAAI,CAC9C,EAEA,IAAOG,EAAQL",
+  "names": ["useTheme", "useColorTemplate", "color", "type", "theme", "_color", "useColorTemplate_default"]
+}

package/useInterface.d.ts

@@ -0,0 +1,2 @@
+declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => (import(".").ThemeOptions | P)[];
+export default useInterface;

package/useInterface.js

@@ -0,0 +1,2 @@
+import{useTheme as r}from"./theme";const f=(i,n,e)=>{const t=r(),c=t.interfaces[i];return c&&(e=c({...e,...n},t)),[{...e,...n},t]};var o=f;export{o as default};
+//# sourceMappingURL=useInterface.js.map

package/useInterface.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/useInterface.ts"],
+  "sourcesContent": ["import { useTheme } from \"./theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n    const theme = useTheme()\n    const _interface = theme.interfaces[name]\n\n    if (_interface) {\n        defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\n    }\n    return [{ ...defaultProps, ...userPorps }, theme]\n}\n\nexport default useInterface"],
+  "mappings": "AAAA,OAAS,YAAAA,MAAgB,UAEzB,MAAMC,EAAe,CAAmBC,EAAcC,EAAcC,IAAoB,CACpF,MAAMC,EAAQL,EAAS,EACjBM,EAAaD,EAAM,WAAWH,CAAI,EAExC,OAAII,IACAF,EAAeE,EAAc,CAAE,GAAGF,EAAc,GAAGD,CAAU,EAAGE,CAAK,GAElE,CAAC,CAAE,GAAGD,EAAc,GAAGD,CAAU,EAAGE,CAAK,CACpD,EAEA,IAAOE,EAAQN",
+  "names": ["useTheme", "useInterface", "name", "userPorps", "defaultProps", "theme", "_interface", "useInterface_default"]
+}

package/main.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { createThemeSwitcher, ThemeProvider, useTheme } from './src/theme'
-import { Tag, Transition } from './src';
-
-const useThemeSwitcher = createThemeSwitcher("light")
-
-const ThemeBox = () => {
-  const themeSwitcher = useThemeSwitcher()
-  return (
-    <button
-      onClick={() => {
-        themeSwitcher.change(themeSwitcher.name === 'light' ? "dark" : "light")
-      }}
-    >
-      change
-    </button>
-  )
-}
-
-const Trans = () => {
-  const theme = useTheme()
-  const [v, setV] = React.useState<any>('zoom')
-  const [open, setOpen] = React.useState(true)
-  return (
-    <Tag>
-      <button onClick={() => setOpen(!open)}>Click</button>
-      <button onClick={() => setV(v === 'zoom' ? { from: {}, to: { transform: "scale(.5)" } } : "zoom")}>change</button>
-      <Transition open={open} variant="fade" >
-        <Tag
-          component="div"
-          width={300}
-          bgcolor="green"
-          radius={2}
-          p={2}
-        >
-          <Transition open={open} variant={v}  >
-            <Tag
-              component="div"
-              width={100}
-              bgcolor="red"
-              radius={2}
-              px={2}
-            >
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            </Tag>
-          </Transition>
-        </Tag>
-      </Transition>
-    </Tag>
-  )
-}
-
-
-const App = () => {
-  return (
-    <ThemeProvider theme="light">
-      <Tag
-        flexBox
-        flexRow
-        flexWrap="wrap"
-        gap={1}
-        p={2}
-      >
-        <Trans />
-        {
-          Array.from({ length: 1 }).map((_, i) => (
-            <Tag
-              key={i}
-              hover={{
-                background: 'green'
-              }}
-              id="asdasd"
-              width={100}
-              height={100}
-              background='red'
-              radius={2}
-              baseClass='hello'
-              className='world'
-              classNames={['world2']}
-              onClick={() => {
-                alert('asd')
-              }}
-            >Tagas</Tag>
-          ))
-        }
-      </Tag>
-    </ThemeProvider>
-  );
-}
-const rootEle = document.getElementById('root')
-
-if (rootEle) {
-
-  const root = createRoot(rootEle);
-  root.render(<App />);
-}

package/src/ServerStyleTags.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react'
-import { CSSFactory } from 'oncss'
-
-const ServerStyleTags = () => {
-    return Array.from(CSSFactory.values()).map((c, idx) => <style
-        key={c.classname + idx}
-        data-oncss={c.classname}
-        dangerouslySetInnerHTML={{ __html: c.css }}
-    />)
-}
-
-export default ServerStyleTags