@xanui/core 1.0.10 → 1.0.12

package/theme/ThemeProvider.js

@@ -1,123 +0,0 @@
-import * as React from "react";
-import Tag from "../Tag";
-import { BreakpointProvider } from "../breakpoint";
-import { ThemeContex, ThemeFactory } from "./core";
-import ThemeCssVars from "./ThemeCssVars";
-import { css } from "../css";
-const ThemeProvider = ({ children, theme, resetCss, scrollbarCss, isRootProvider, renderIsRoot, ...props }) => {
-  const THEME = ThemeFactory.get(theme);
-  if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`);
-  resetCss ??= true;
-  scrollbarCss ??= true;
-  React.useMemo(() => {
-    if (!!Object.keys(THEME.globalStyle).length) {
-      css({
-        "@global": THEME.globalStyle
-      });
-    }
-    css({
-      "@global": {
-        [`.xui-${theme}-theme-root`]: ThemeCssVars(THEME)
-      }
-    });
-    if (scrollbarCss && typeof document !== "undefined") {
-      let thumbSize = 10;
-      let thumbColor = THEME.colors.divider;
-      let trackColor = THEME.colors.background.secondary;
-      css({
-        "@global": {
-          "*": {
-            scrollbarWidth: "thin",
-            scrollbarColor: `${thumbColor} ${trackColor}`
-          },
-          "::-webkit-scrollbar": {
-            width: thumbSize,
-            height: thumbSize
-          },
-          "::-webkit-scrollbar-thumb": {
-            backgroundColor: thumbColor,
-            borderRadius: "5px",
-            border: "2px solid #f4f4f4"
-          },
-          "::-webkit-scrollbar-thumb:hover": {
-            backgroundColor: thumbColor
-          },
-          "::-webkit-scrollbar-track": {
-            backgroundColor: trackColor,
-            borderRadius: "5px"
-          }
-        }
-      });
-    }
-    resetCss && css({
-      "@global": {
-        "*": {
-          m: 0,
-          p: 0,
-          outline: "none",
-          boxSizing: "border-box",
-          verticalAlign: "baseline"
-        },
-        "html, body": {
-          minHeight: "100%",
-          "-webkit-font-smoothing": "antialiased"
-        },
-        "img, picture, video, canvas, svg": {
-          maxWidth: "100%",
-          display: "block"
-        },
-        "input, button, textarea, select": {
-          font: "inherit"
-        },
-        "table": {
-          borderCollapse: "collapse",
-          borderSpacing: 0
-        },
-        "ol, ul": {
-          listStyle: "none"
-        },
-        "a": {
-          display: "inline-block"
-        },
-        "p, h1, h2, h3, h4, h5, h6": {
-          overflowWrap: "break-word"
-        }
-      }
-    });
-  }, [theme]);
-  return /* @__PURE__ */ React.createElement(ThemeContex.Provider, { value: theme }, isRootProvider ? /* @__PURE__ */ React.createElement(BreakpointProvider, null, /* @__PURE__ */ React.createElement(
-    Tag,
-    {
-      minHeight: "100%",
-      bgcolor: THEME.colors.background.primary,
-      fontFamily: THEME.typography.fontFamily,
-      fontSize: THEME.typography.text.fontSize,
-      fontWeight: THEME.typography.text.fontWeight,
-      lineHeight: THEME.typography.text.lineHeight,
-      ...props,
-      baseClass: `${theme}-theme-root`,
-      direction: THEME.rtl ? "rtl" : "ltr"
-    },
-    children,
-    renderIsRoot
-  )) : /* @__PURE__ */ React.createElement(
-    Tag,
-    {
-      minHeight: "100%",
-      bgcolor: THEME.colors.background.primary,
-      fontFamily: THEME.typography.fontFamily,
-      fontSize: THEME.typography.text.fontSize,
-      fontWeight: THEME.typography.text.fontWeight,
-      lineHeight: THEME.typography.text.lineHeight,
-      ...props,
-      baseClass: `${theme}-theme-root`,
-      direction: THEME.rtl ? "rtl" : "ltr"
-    },
-    children
-  ));
-};
-var ThemeProvider_default = ThemeProvider;
-export {
-  ThemeProvider_default as default
-};
-//# sourceMappingURL=ThemeProvider.js.map

package/theme/core.js

@@ -1,26 +0,0 @@
-import React from "react";
-const ThemeFactory = /* @__PURE__ */ new Map();
-const ThemeContex = React.createContext("light");
-const getTheme = (theme) => ThemeFactory.get(theme);
-const useTheme = () => ThemeFactory.get(React.useContext(ThemeContex));
-const mergeObject = (a, b) => {
-  a = { ...a };
-  b = { ...b };
-  for (const key in b) {
-    const v = b[key];
-    if (typeof v === "object" && !Array.isArray(v) && !React.isValidElement(v)) {
-      a[key] = mergeObject(a[key], b[key]);
-    } else {
-      a[key] = v;
-    }
-  }
-  return a;
-};
-export {
-  ThemeContex,
-  ThemeFactory,
-  getTheme,
-  mergeObject,
-  useTheme
-};
-//# sourceMappingURL=core.js.map

package/theme/createColor.js

@@ -1,52 +0,0 @@
-import { alpha } from "../css";
-const createColor = (theme, name) => {
-  let color = theme.colors[name];
-  let { primary, secondary } = color;
-  let text = color.text || theme.colors.text.primary;
-  let _alpha = alpha(primary, 0.1);
-  const isBag = (a, b) => name === "background" ? a : b;
-  return {
-    alpha: _alpha,
-    template: {
-      outline: {
-        bgcolor: "transparent",
-        color: isBag(text, primary),
-        border: 1,
-        borderColor: isBag("divider", alpha(primary, 0.4)),
-        hover: {
-          color: isBag(text, primary),
-          borderColor: isBag("divider", alpha(primary, 0.8))
-        }
-      },
-      fill: {
-        bgcolor: isBag(secondary, primary),
-        color: text,
-        hover: {
-          bgcolor: isBag(alpha(secondary, 0.6), secondary),
-          color: text
-        }
-      },
-      text: {
-        bgcolor: "transparent",
-        color: isBag(text, primary),
-        hover: {
-          bgcolor: isBag(alpha(secondary, 0.6), alpha(primary, 0.1)),
-          color: isBag(text, primary)
-        }
-      },
-      alpha: {
-        bgcolor: isBag(alpha(secondary, 0.5), alpha(primary, 0.1)),
-        color: isBag(text, primary),
-        hover: {
-          bgcolor: isBag(alpha(secondary, 0.8), alpha(primary, 0.15)),
-          color: isBag(text, primary)
-        }
-      }
-    }
-  };
-};
-var createColor_default = createColor;
-export {
-  createColor_default as default
-};
-//# sourceMappingURL=createColor.js.map

package/theme/createTheme.js

@@ -1,33 +0,0 @@
-import defaultThemeOption, { darkColorPallete } from "./ThemeDefaultOptions";
-import { mergeObject, ThemeFactory } from "./core";
-import createColor from "./createColor";
-import { breakpoints } from "../css";
-const createTheme = (name, options, darkMode) => {
-  if (!ThemeFactory.has(name)) {
-    let theme = mergeObject(defaultThemeOption, {
-      ...darkMode ? darkColorPallete : {},
-      ...options,
-      name,
-      breakpoints
-    });
-    theme = mergeObject(theme, {
-      colors: {
-        background: createColor(theme, "background"),
-        brand: createColor(theme, "brand"),
-        accent: createColor(theme, "accent"),
-        info: createColor(theme, "info"),
-        success: createColor(theme, "success"),
-        warning: createColor(theme, "warning"),
-        danger: createColor(theme, "danger")
-      }
-    });
-    ThemeFactory.set(name, theme);
-  } else {
-    throw new Error(`theme "${name}" already exists!`);
-  }
-  return ThemeFactory.get(name);
-};
-export {
-  createTheme
-};
-//# sourceMappingURL=createTheme.js.map

package/theme/createThemeSwitcher.js

@@ -1,19 +0,0 @@
-import { createBucket } from "react-state-bucket";
-import { getTheme } from "./core";
-const createThemeSwitcher = (defaultTheme, store) => {
-  const useThemeState = createBucket({ name: defaultTheme }, { store });
-  const useThemeSwitcher = () => {
-    const state = useThemeState();
-    return {
-      name: state.get("name"),
-      theme: getTheme(state.get("name")),
-      change: (theme) => state.set("name", theme)
-    };
-  };
-  return useThemeSwitcher;
-};
-var createThemeSwitcher_default = createThemeSwitcher;
-export {
-  createThemeSwitcher_default as default
-};
-//# sourceMappingURL=createThemeSwitcher.js.map

package/theme/index.js

@@ -1,14 +0,0 @@
-import { lightColorPallete, darkColorPallete } from "./ThemeDefaultOptions";
-import { createTheme } from "./createTheme";
-import ThemeProvider from "./ThemeProvider";
-import createThemeSwitcher from "./createThemeSwitcher";
-import { getTheme, useTheme } from "./core";
-createTheme("light", { colors: lightColorPallete });
-createTheme("dark", { colors: darkColorPallete });
-export {
-  ThemeProvider,
-  createThemeSwitcher,
-  getTheme,
-  useTheme
-};
-//# sourceMappingURL=index.js.map

package/useAnimation.js

@@ -1,33 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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.js

@@ -1,11 +0,0 @@
-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/useInterface.js

@@ -1,14 +0,0 @@
-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