@xanui/core 1.0.0

package/theme/types.d.ts

@@ -0,0 +1,124 @@
+import { BreakpointKeys, GlobalCSS } from "../css/types";
+export type ObjectType = {
+    [key: string]: any;
+};
+export type ThemeColorItem = {
+    primary: string;
+    secondary: string;
+    text: string;
+    alpha: string;
+    template: {
+        outline: {
+            bgcolor: string;
+            color: string;
+            border: number;
+            borderColor: string;
+            hover: {
+                bgcolor: string;
+                color: string;
+            };
+        };
+        fill: {
+            bgcolor: string;
+            color: string;
+            hover: {
+                bgcolor: string;
+                color: string;
+            };
+        };
+        text: {
+            bgcolor: string;
+            color: string;
+            hover: {
+                bgcolor: string;
+                color: string;
+            };
+        };
+        alpha: {
+            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;
+};
+export type ThemeTypographyType = {
+    fontFamily: string;
+    h1: ThemeTypographyItem;
+    h2: ThemeTypographyItem;
+    h3: ThemeTypographyItem;
+    h4: ThemeTypographyItem;
+    h5: ThemeTypographyItem;
+    h6: ThemeTypographyItem;
+    text: ThemeTypographyItem;
+    button: ThemeTypographyItem;
+    small: ThemeTypographyItem;
+};
+export interface ThemeOptions {
+    name: string;
+    rtl: boolean;
+    globalStyle: GlobalCSS;
+    breakpoints: {
+        [key in BreakpointKeys]: number;
+    };
+    shadow: string[];
+    interfaces: {
+        [name: string]: <P extends object>(defaultProps: P, theme: ThemeOptions) => P;
+    };
+    colors: ThemeColor;
+    typography: ThemeTypographyType;
+}
+export type ThemeColorItemInput = Partial<Omit<ThemeColorItem, "alpha">>;
+export type ThemeTypographyItemInput = Partial<ThemeTypographyItem>;
+export type ThemeColorInput = {
+    background?: Omit<ThemeColorItemInput, "text">;
+    text?: Omit<ThemeColorItemInput, "text">;
+    divider?: string;
+    brand?: ThemeColorItemInput;
+    accent?: ThemeColorItemInput;
+    success?: ThemeColorItemInput;
+    info?: ThemeColorItemInput;
+    warning?: ThemeColorItemInput;
+    danger?: ThemeColorItemInput;
+};
+export type ThemeTypographyInputType = {
+    fontFamily?: string;
+    h1?: ThemeTypographyItemInput;
+    h2?: ThemeTypographyItemInput;
+    h3?: ThemeTypographyItemInput;
+    h4?: ThemeTypographyItemInput;
+    h5?: ThemeTypographyItemInput;
+    h6?: ThemeTypographyItemInput;
+    text?: ThemeTypographyItemInput;
+    button?: ThemeTypographyItemInput;
+    small?: ThemeTypographyItemInput;
+};
+export interface ThemeOptionInput {
+    rtl?: boolean;
+    globalStyle?: GlobalCSS;
+    interfaces?: {
+        [name: string]: <P extends object>(defaultProps: P, theme: ThemeOptions) => P;
+    };
+    colors?: ThemeColorInput;
+    typography?: ThemeTypographyInputType;
+}
+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,33 @@
+import { css } from "./css";
+import { useId } from "react";
+const animationEases = {
+  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)"
+};
+const useAnimation = ({ from, to, delay, ease, duration }) => {
+  let _delay = delay || 0;
+  let _duration = duration || 600;
+  let _ease = ease || "easeBounceOut";
+  const id = "anim" + useId().replaceAll(":", "");
+  const anim = css({
+    animationName: id,
+    animationDelay: _delay + "ms",
+    animationDuration: _duration + "ms",
+    animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,
+    [`@keyframes ${id}`]: {
+      from,
+      to
+    }
+  });
+  return anim.classname;
+};
+var useAnimation_default = useAnimation;
+export {
+  animationEases,
+  useAnimation_default 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().replaceAll(\":\", \"\")\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,SAAS,WAAW;AACpB,SAAS,aAAa;AAGf,MAAM,iBAAiB;AAAA,EAC1B,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AACnB;AAUA,MAAM,eAAe,CAAC,EAAE,MAAM,IAAI,OAAO,MAAM,SAAS,MAAyB;AAC7E,MAAI,SAAS,SAAS;AACtB,MAAI,YAAY,YAAY;AAC5B,MAAI,QAAQ,QAAQ;AACpB,QAAM,KAAK,SAAS,MAAM,EAAE,WAAW,KAAK,EAAE;AAC9C,QAAM,OAAO,IAAI;AAAA,IACb,eAAe;AAAA,IACf,gBAAgB,SAAS;AAAA,IACzB,mBAAmB,YAAY;AAAA,IAC/B,yBAAyB,eAAe,KAAK,KAAK,eAAe;AAAA,IACjE,CAAC,cAAc,EAAE,EAAE,GAAG;AAAA,MAClB;AAAA,MACA;AAAA,IACJ;AAAA,EACJ,CAAC;AACD,SAAO,KAAK;AAChB;AAEA,IAAO,uBAAQ;",
+  "names": []
+}

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,11 @@
+import { useTheme } from "./theme";
+const useColorTemplate = (color, type) => {
+  const theme = useTheme();
+  let _color = color === "default" ? "background" : color;
+  return theme.colors[_color]?.template[type];
+};
+var useColorTemplate_default = useColorTemplate;
+export {
+  useColorTemplate_default 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,SAAS,gBAAgB;AAIzB,MAAM,mBAAmB,CAAC,OAA4B,SAA4B;AAC9E,QAAM,QAAa,SAAS;AAC5B,MAAI,SAAS,UAAU,YAAY,eAAe;AAClD,SAAO,MAAM,OAAO,MAAM,GAAG,SAAS,IAAI;AAC9C;AAEA,IAAO,2BAAQ;",
+  "names": []
+}

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,14 @@
+import { useTheme } from "./theme";
+const useInterface = (name, userPorps, defaultProps) => {
+  const theme = useTheme();
+  const _interface = theme.interfaces[name];
+  if (_interface) {
+    defaultProps = _interface({ ...defaultProps, ...userPorps }, theme);
+  }
+  return [{ ...defaultProps, ...userPorps }, theme];
+};
+var useInterface_default = useInterface;
+export {
+  useInterface_default 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,SAAS,gBAAgB;AAEzB,MAAM,eAAe,CAAmB,MAAc,WAAc,iBAAoB;AACpF,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,MAAM,WAAW,IAAI;AAExC,MAAI,YAAY;AACZ,mBAAe,WAAc,EAAE,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK;AAAA,EACzE;AACA,SAAO,CAAC,EAAE,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK;AACpD;AAEA,IAAO,uBAAQ;",
+  "names": []
+}