@xanui/core 1.0.0

package/theme/ThemeDefaultOptions.js

@@ -0,0 +1,148 @@
+const lightColorPallete = {
+  text: {
+    primary: "#212B36",
+    secondary: "#637381"
+  },
+  background: {
+    primary: "#FFFFFF",
+    secondary: "#EDEFF7"
+  },
+  divider: "#DADCE0"
+};
+const darkColorPallete = {
+  text: {
+    primary: "#FFFFFF",
+    secondary: "#C4CDD5"
+  },
+  background: {
+    primary: "#272727",
+    secondary: "#1E1E1E"
+  },
+  divider: "#3D3D3D"
+};
+const ThemeColors = {
+  ...lightColorPallete,
+  brand: {
+    primary: "#3b82f6",
+    secondary: "#60a5fa",
+    text: "#FFFFFF"
+  },
+  accent: {
+    primary: "#14b8a6",
+    secondary: "#2dd4bf",
+    text: "#FFFFFF"
+  },
+  info: {
+    primary: "#0ea5e9",
+    secondary: "#60a5fa",
+    text: "#FFFFFF"
+  },
+  success: {
+    primary: "#22c55e",
+    secondary: "#4ade80",
+    text: "#FFFFFF"
+  },
+  warning: {
+    primary: "#f59e0b",
+    secondary: "#fbbf24",
+    text: "#FFFFFF"
+  },
+  danger: {
+    primary: "#ef4444",
+    secondary: "#f87171",
+    text: "#FFFFFF"
+  }
+};
+const ThemeTypography = {
+  fontFamily: '"Inter",sans-serif,"Helvetica","Arial"',
+  h1: {
+    fontSize: 47.78,
+    lineHeight: 1.3,
+    fontWeight: 400
+  },
+  h2: {
+    fontSize: 39.81,
+    lineHeight: 1.35,
+    fontWeight: 400
+  },
+  h3: {
+    fontSize: 33.18,
+    lineHeight: 1.4,
+    fontWeight: 400
+  },
+  h4: {
+    fontSize: 27.65,
+    lineHeight: 1.45,
+    fontWeight: 400
+  },
+  h5: {
+    fontSize: 27.65,
+    lineHeight: 1.5,
+    fontWeight: 400
+  },
+  h6: {
+    fontSize: 23.04,
+    lineHeight: 1.55,
+    fontWeight: 400
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 1.6,
+    fontWeight: 400
+  },
+  button: {
+    fontSize: 13.33,
+    lineHeight: 1.6,
+    fontWeight: 500
+  },
+  small: {
+    fontSize: 12.33,
+    lineHeight: 1.6,
+    fontWeight: 400
+  }
+};
+const shadow = [
+  "none",
+  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)"
+];
+var ThemeDefaultOptions_default = {
+  name: "light",
+  rtl: false,
+  shadow,
+  globalStyle: {},
+  colors: ThemeColors,
+  typography: ThemeTypography,
+  interfaces: {}
+};
+export {
+  ThemeColors,
+  ThemeTypography,
+  darkColorPallete,
+  ThemeDefaultOptions_default as default,
+  lightColorPallete,
+  shadow
+};
+//# sourceMappingURL=ThemeDefaultOptions.js.map

package/theme/ThemeDefaultOptions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/theme/ThemeDefaultOptions.ts"],
+  "sourcesContent": ["import { ThemeOptionInput, ThemeTypographyType } from './types'\n\nexport const lightColorPallete = {\n    text: {\n        primary: \"#212B36\",\n        secondary: \"#637381\",\n    },\n    background: {\n        primary: \"#FFFFFF\",\n        secondary: \"#EDEFF7\",\n    },\n    divider: \"#DADCE0\"\n}\n\nexport const darkColorPallete = {\n    text: {\n        primary: \"#FFFFFF\",\n        secondary: \"#C4CDD5\",\n    },\n    background: {\n        primary: \"#272727\",\n        secondary: \"#1E1E1E\",\n    },\n    divider: \"#3D3D3D\"\n}\n\nexport const ThemeColors = {\n    ...lightColorPallete,\n    brand: {\n        primary: \"#3b82f6\",\n        secondary: \"#60a5fa\",\n        text: \"#FFFFFF\"\n    },\n    accent: {\n        primary: \"#14b8a6\",\n        secondary: \"#2dd4bf\",\n        text: \"#FFFFFF\"\n    },\n    info: {\n        primary: \"#0ea5e9\",\n        secondary: \"#60a5fa\",\n        text: \"#FFFFFF\"\n    },\n    success: {\n        primary: \"#22c55e\",\n        secondary: \"#4ade80\",\n        text: \"#FFFFFF\"\n    },\n    warning: {\n        primary: \"#f59e0b\",\n        secondary: \"#fbbf24\",\n        text: \"#FFFFFF\"\n    },\n    danger: {\n        primary: \"#ef4444\",\n        secondary: \"#f87171\",\n        text: \"#FFFFFF\"\n    },\n}\n\nexport const ThemeTypography: ThemeTypographyType = {\n    fontFamily: '\"Inter\",sans-serif,\"Helvetica\",\"Arial\"',\n    h1: {\n        fontSize: 47.78,\n        lineHeight: 1.3,\n        fontWeight: 400,\n    },\n    h2: {\n        fontSize: 39.81,\n        lineHeight: 1.35,\n        fontWeight: 400,\n    },\n    h3: {\n        fontSize: 33.18,\n        lineHeight: 1.4,\n        fontWeight: 400,\n    },\n    h4: {\n        fontSize: 27.65,\n        lineHeight: 1.45,\n        fontWeight: 400,\n    },\n    h5: {\n        fontSize: 27.65,\n        lineHeight: 1.5,\n        fontWeight: 400,\n    },\n    h6: {\n        fontSize: 23.04,\n        lineHeight: 1.55,\n        fontWeight: 400,\n    },\n    text: {\n        fontSize: 16,\n        lineHeight: 1.6,\n        fontWeight: 400,\n    },\n    button: {\n        fontSize: 13.33,\n        lineHeight: 1.6,\n        fontWeight: 500,\n    },\n    small: {\n        fontSize: 12.33,\n        lineHeight: 1.6,\n        fontWeight: 400,\n    }\n}\n\nexport const shadow = [\n    \"none\",\n    \"0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)\",\n    \"0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)\",\n    \"0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)\",\n    \"0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)\",\n    \"0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)\",\n    \"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)\",\n    \"0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)\",\n    \"0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)\",\n    \"0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)\",\n    \"0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)\",\n    \"0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)\",\n    \"0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)\",\n    \"0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)\",\n    \"0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)\",\n    \"0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)\",\n    \"0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)\",\n    \"0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)\",\n    \"0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)\",\n    \"0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)\",\n    \"0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)\",\n    \"0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)\",\n    \"0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)\",\n    \"0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)\",\n    \"0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)\",\n]\n\nexport default {\n    name: \"light\",\n    rtl: false,\n    shadow,\n    globalStyle: {},\n    colors: ThemeColors,\n    typography: ThemeTypography,\n    interfaces: {}\n} as ThemeOptionInput\n"],
+  "mappings": "AAEO,MAAM,oBAAoB;AAAA,EAC7B,MAAM;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,EACf;AAAA,EACA,YAAY;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EACf;AAAA,EACA,SAAS;AACb;AAEO,MAAM,mBAAmB;AAAA,EAC5B,MAAM;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,EACf;AAAA,EACA,YAAY;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EACf;AAAA,EACA,SAAS;AACb;AAEO,MAAM,cAAc;AAAA,EACvB,GAAG;AAAA,EACH,OAAO;AAAA,IACH,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACL,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACL,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACV;AACJ;AAEO,MAAM,kBAAuC;AAAA,EAChD,YAAY;AAAA,EACZ,IAAI;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,IAAI;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,IAAI;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,IAAI;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,IAAI;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,IAAI;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,MAAM;AAAA,IACF,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,QAAQ;AAAA,IACJ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACH,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAChB;AACJ;AAEO,MAAM,SAAS;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEA,IAAO,8BAAQ;AAAA,EACX,MAAM;AAAA,EACN,KAAK;AAAA,EACL;AAAA,EACA,aAAa,CAAC;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,YAAY,CAAC;AACjB;",
+  "names": []
+}

package/theme/ThemeProvider.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { TagComponentType, TagProps } from "../Tag/types";
+export type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {
+    theme: string;
+    resetCss?: boolean;
+    scrollbarCss?: boolean;
+    renderIsRoot?: React.ReactElement;
+};
+declare const ThemeProvider: ({ children, theme, resetCss, scrollbarCss, renderIsRoot, ...props }: ThemeProviderProps) => React.JSX.Element;
+export default ThemeProvider;

package/theme/ThemeProvider.js

@@ -0,0 +1,120 @@
+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 providers = [];
+const ThemeProvider = ({ children, theme, resetCss, scrollbarCss, renderIsRoot, ...props }) => {
+  const id = React.useId();
+  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": {
+        [`.nui-${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]);
+  React.useMemo(() => {
+    providers.push(id);
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      providers.splice(providers.indexOf(id), 1);
+    };
+  }, []);
+  const isRoot = id === providers[0];
+  let content = /* @__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
+  );
+  return /* @__PURE__ */ React.createElement(ThemeContex.Provider, { value: theme }, isRoot ? /* @__PURE__ */ React.createElement(BreakpointProvider, null, content, renderIsRoot) : content);
+};
+var ThemeProvider_default = ThemeProvider;
+export {
+  ThemeProvider_default as default
+};
+//# sourceMappingURL=ThemeProvider.js.map

package/theme/ThemeProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/theme/ThemeProvider.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { BreakpointProvider } from \"../breakpoint\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n   theme: string;\n   resetCss?: boolean;\n   scrollbarCss?: boolean;\n   renderIsRoot?: React.ReactElement;\n}\n\nconst providers: string[] = []\n\nconst ThemeProvider = ({ children, theme, resetCss, scrollbarCss, renderIsRoot, ...props }: ThemeProviderProps) => {\n   const id = React.useId()\n   const THEME = ThemeFactory.get(theme) as ThemeOptions\n   if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)\n   resetCss ??= true\n   scrollbarCss ??= true\n\n   React.useMemo(() => {\n      if (!!Object.keys(THEME.globalStyle).length) {\n         css({\n            \"@global\": THEME.globalStyle\n         })\n      }\n\n      css({\n         \"@global\": {\n            [`.nui-${theme}-theme-root`]: ThemeCssVars(THEME)\n         }\n      })\n\n      if (scrollbarCss && typeof document !== 'undefined') {\n         let thumbSize = 10\n         let thumbColor = THEME.colors.divider\n         let trackColor = THEME.colors.background.secondary\n         css({\n            \"@global\": {\n               \"*\": {\n                  scrollbarWidth: \"thin\",\n                  scrollbarColor: `${thumbColor} ${trackColor}`,\n               },\n               \"::-webkit-scrollbar\": {\n                  width: thumbSize,\n                  height: thumbSize,\n               },\n               \"::-webkit-scrollbar-thumb\": {\n                  backgroundColor: thumbColor,\n                  borderRadius: \"5px\",\n                  border: \"2px solid #f4f4f4\",\n               },\n               \"::-webkit-scrollbar-thumb:hover\": {\n                  backgroundColor: thumbColor,\n               },\n               \"::-webkit-scrollbar-track\": {\n                  backgroundColor: trackColor,\n                  borderRadius: \"5px\",\n               },\n            }\n         })\n      }\n\n      resetCss && css({\n         \"@global\": {\n            \"*\": {\n               m: 0,\n               p: 0,\n               outline: \"none\",\n               boxSizing: \"border-box\",\n               verticalAlign: \"baseline\",\n            },\n            \"html, body\": {\n               minHeight: \"100%\",\n               \"-webkit-font-smoothing\": \"antialiased\"\n            } as any,\n            \"img, picture, video, canvas, svg\": {\n               maxWidth: \"100%\",\n               display: \"block\"\n            },\n            \"input, button, textarea, select\": {\n               font: \"inherit\"\n            },\n            \"table\": {\n               borderCollapse: \"collapse\",\n               borderSpacing: 0\n            },\n            \"ol, ul\": {\n               listStyle: \"none\"\n            },\n            \"a\": {\n               display: \"inline-block\"\n            },\n            \"p, h1, h2, h3, h4, h5, h6\": {\n               overflowWrap: \"break-word\",\n            }\n         }\n      })\n\n   }, [theme])\n\n   React.useMemo(() => {\n      providers.push(id)\n   }, [])\n\n   React.useEffect(() => {\n      return () => {\n         providers.splice(providers.indexOf(id), 1)\n      }\n   }, [])\n\n   const isRoot = id === providers[0]\n\n   let content = (\n      <Tag\n         minHeight=\"100%\"\n         bgcolor={THEME.colors.background.primary}\n         fontFamily={THEME.typography.fontFamily}\n         fontSize={THEME.typography.text.fontSize}\n         fontWeight={THEME.typography.text.fontWeight}\n         lineHeight={THEME.typography.text.lineHeight}\n         {...props}\n         baseClass={`${theme}-theme-root`}\n         direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n      >\n         {children}\n      </Tag>\n   )\n\n   return (\n      <ThemeContex.Provider value={theme}>\n         {\n            isRoot ? <BreakpointProvider>\n               {content}\n               {renderIsRoot}\n            </BreakpointProvider> : content\n         }\n      </ThemeContex.Provider>\n   )\n}\n\n\nexport default ThemeProvider"],
+  "mappings": "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",
+  "names": []
+}

package/theme/core.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ObjectType, ThemeOptions } from "./types";
+export declare const ThemeFactory: Map<string, ThemeOptions>;
+export declare const ThemeContex: React.Context<string>;
+export declare const getTheme: (theme: string) => ThemeOptions | undefined;
+export declare const useTheme: () => ThemeOptions;
+export declare const mergeObject: (a: ObjectType, b: ObjectType) => ObjectType;

package/theme/core.js

@@ -0,0 +1,26 @@
+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/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,OAAO,WAAW;AAGX,MAAM,eAAe,oBAAI,IAA0B;AACnD,MAAM,cAAc,MAAM,cAAc,OAAO;AAC/C,MAAM,WAAW,CAAC,UAAkB,aAAa,IAAI,KAAK;AAC1D,MAAM,WAAW,MAAoB,aAAa,IAAI,MAAM,WAAW,WAAW,CAAC;AAEnF,MAAM,cAAc,CAAC,GAAe,MAAkB;AAC1D,MAAI,EAAE,GAAG,EAAE;AACX,MAAI,EAAE,GAAG,EAAE;AACX,aAAW,OAAO,GAAG;AAClB,UAAM,IAAK,EAAU,GAAG;AACxB,QAAI,OAAO,MAAM,YAAY,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,MAAM,eAAe,CAAC,GAAG;AACzE,QAAE,GAAG,IAAI,YAAY,EAAE,GAAG,GAAG,EAAE,GAAG,CAAC;AAAA,IACtC,OAAO;AACJ,QAAE,GAAG,IAAI;AAAA,IACZ;AAAA,EACH;AACA,SAAO;AACV;",
+  "names": []
+}

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,52 @@
+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/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,SAAS,aAAa;AAEtB,MAAM,cAAc,CAAC,OAAqB,SAA2B;AAClE,MAAI,QAAQ,MAAM,OAAO,IAAI;AAC7B,MAAI,EAAE,SAAS,UAAU,IAAI;AAC7B,MAAI,OAAQ,MAAc,QAAQ,MAAM,OAAO,KAAK;AACpD,MAAI,SAAS,MAAM,SAAS,GAAE;AAE9B,QAAM,QAAQ,CAAC,GAAQ,MAAW,SAAS,eAAe,IAAI;AAE9D,SAAO;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,MACP,SAAS;AAAA,QACN,SAAS;AAAA,QACT,OAAO,MAAM,MAAM,OAAO;AAAA,QAC1B,QAAQ;AAAA,QACR,aAAa,MAAM,WAAW,MAAM,SAAS,GAAE,CAAC;AAAA,QAChD,OAAO;AAAA,UACJ,OAAO,MAAM,MAAM,OAAO;AAAA,UAC1B,aAAa,MAAM,WAAW,MAAM,SAAS,GAAE,CAAC;AAAA,QACnD;AAAA,MACH;AAAA,MACA,MAAM;AAAA,QACH,SAAS,MAAM,WAAW,OAAO;AAAA,QACjC,OAAO;AAAA,QACP,OAAO;AAAA,UACJ,SAAS,MAAM,MAAM,WAAW,GAAE,GAAG,SAAS;AAAA,UAC9C,OAAO;AAAA,QACV;AAAA,MACH;AAAA,MACA,MAAM;AAAA,QACH,SAAS;AAAA,QACT,OAAO,MAAM,MAAM,OAAO;AAAA,QAC1B,OAAO;AAAA,UACJ,SAAS,MAAM,MAAM,WAAW,GAAE,GAAG,MAAM,SAAS,GAAE,CAAC;AAAA,UACvD,OAAO,MAAM,MAAM,OAAO;AAAA,QAC7B;AAAA,MACH;AAAA,MACA,OAAO;AAAA,QACJ,SAAS,MAAM,MAAM,WAAW,GAAE,GAAG,MAAM,SAAS,GAAE,CAAC;AAAA,QACvD,OAAO,MAAM,MAAM,OAAO;AAAA,QAC1B,OAAO;AAAA,UACJ,SAAS,MAAM,MAAM,WAAW,GAAE,GAAG,MAAM,SAAS,IAAG,CAAC;AAAA,UACxD,OAAO,MAAM,MAAM,OAAO;AAAA,QAC7B;AAAA,MACH;AAAA,IACH;AAAA,EACH;AACH;AAEA,IAAO,sBAAQ;",
+  "names": []
+}

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,33 @@
+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/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,OAAO,sBAAsB,wBAAwB;AACrD,SAAS,aAAa,oBAAoB;AAC1C,OAAO,iBAAiB;AACxB,SAAS,mBAAmB;AAErB,MAAM,cAAc,CAAC,MAAc,SAA2B,aAAqC;AACvG,MAAI,CAAC,aAAa,IAAI,IAAI,GAAG;AAC1B,QAAI,QAAa,YAAY,oBAAoB;AAAA,MAC9C,GAAI,WAAW,mBAAmB,CAAC;AAAA,MACnC,GAAG;AAAA,MACH;AAAA,MACA;AAAA,IACH,CAAC;AAED,YAAQ,YAAY,OAAO;AAAA,MACxB,QAAQ;AAAA,QACL,YAAY,YAAY,OAAO,YAAY;AAAA,QAC3C,OAAO,YAAY,OAAO,OAAO;AAAA,QACjC,QAAQ,YAAY,OAAO,QAAQ;AAAA,QACnC,MAAM,YAAY,OAAO,MAAM;AAAA,QAC/B,SAAS,YAAY,OAAO,SAAS;AAAA,QACrC,SAAS,YAAY,OAAO,SAAS;AAAA,QACrC,QAAQ,YAAY,OAAO,QAAQ;AAAA,MACtC;AAAA,IACH,CAAC;AACD,iBAAa,IAAI,MAAM,KAAK;AAAA,EAC/B,OAAO;AACJ,UAAM,IAAI,MAAM,UAAU,IAAI,mBAAmB;AAAA,EACpD;AAEA,SAAO,aAAa,IAAI,IAAI;AAC/B;",
+  "names": []
+}

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,19 @@
+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/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,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAEzB,MAAM,sBAAsB,CAAC,cAAsB,UAAgC;AAChF,QAAM,gBAAgB,aAAa,EAAE,MAAM,aAAa,GAAG,EAAE,MAAM,CAAC;AACpE,QAAM,mBAAmB,MAAM;AAC5B,UAAM,QAAQ,cAAc;AAC5B,WAAO;AAAA,MACJ,MAAM,MAAM,IAAI,MAAM;AAAA,MACtB,OAAO,SAAS,MAAM,IAAI,MAAM,CAAC;AAAA,MACjC,QAAQ,CAAC,UAAkB,MAAM,IAAI,QAAQ,KAAK;AAAA,IACrD;AAAA,EACH;AACA,SAAO;AACV;AAGA,IAAO,8BAAQ;",
+  "names": []
+}

package/theme/index.d.ts

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

package/theme/index.js

@@ -0,0 +1,14 @@
+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/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'\n\nexport {\n    ThemeProvider,\n    createThemeSwitcher,\n    getTheme,\n    useTheme\n}\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\n"],
+  "mappings": "AAAA,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,mBAAmB;AAC5B,OAAO,mBAAmB;AAC1B,OAAO,yBAAyB;AAChC,SAAS,UAAU,gBAAgB;AASnC,YAAY,SAAS,EAAE,QAAQ,kBAAkB,CAAC;AAClD,YAAY,QAAQ,EAAE,QAAQ,iBAAiB,CAAC;",
+  "names": []
+}