@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/themes/components/settings/theme-icons.mjs

@@ -0,0 +1,82 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+function t() {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ r("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+        /* @__PURE__ */ r("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+        /* @__PURE__ */ r("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+        /* @__PURE__ */ r("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" })
+      ]
+    }
+  );
+}
+function n() {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ r("rect", { x: "2", y: "4", width: "20", height: "16", rx: "3" }),
+        /* @__PURE__ */ r("line", { x1: "2", y1: "9", x2: "22", y2: "9" }),
+        /* @__PURE__ */ r("circle", { cx: "6", cy: "6.5", r: "1", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ r("circle", { cx: "10", cy: "6.5", r: "1", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ r("circle", { cx: "14", cy: "6.5", r: "1", fill: "currentColor", stroke: "none" })
+      ]
+    }
+  );
+}
+function i() {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ r("rect", { x: "2", y: "3", width: "20", height: "15", rx: "4" }),
+        /* @__PURE__ */ r("circle", { cx: "6", cy: "6", r: "1", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ r("circle", { cx: "9.5", cy: "6", r: "1", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ r("circle", { cx: "13", cy: "6", r: "1", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ r(
+          "rect",
+          {
+            x: "5",
+            y: "20",
+            width: "14",
+            height: "2.5",
+            rx: "1.25",
+            fill: "currentColor",
+            stroke: "none"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  t as DefaultThemeIcon,
+  i as MacOSTahoeThemeIcon,
+  n as MacOSThemeIcon
+};

package/themes/components/settings/theme-switcher.mjs

@@ -0,0 +1,36 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useTheme as c } from "../../hooks/use-theme.mjs";
+import { SettingsSectionHeading as d } from "./settings-section-heading.mjs";
+import { SwitcherButton as t } from "./switcher-button.mjs";
+import { Sun as m } from "../../../components/icons/sun.mjs";
+import { Moon as n } from "../../../components/icons/moon.mjs";
+function f() {
+  const { mode: r, setMode: i } = c();
+  return /* @__PURE__ */ o("div", { className: "px-6 pt-8", children: [
+    /* @__PURE__ */ e(d, { children: "Mode" }),
+    /* @__PURE__ */ o("div", { role: "radiogroup", className: "grid grid-cols-2 gap-5", children: [
+      /* @__PURE__ */ e(
+        t,
+        {
+          onClick: () => i("light"),
+          title: "Light",
+          checked: r === "light",
+          children: /* @__PURE__ */ e(m, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        t,
+        {
+          onClick: () => i("dark"),
+          title: "Dark",
+          checked: r === "dark",
+          children: /* @__PURE__ */ e(n, {})
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  f as ThemeSwitcher,
+  f as default
+};

package/themes/components/settings/theme-variant-switcher.mjs

@@ -0,0 +1,49 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useTheme as l } from "../../hooks/use-theme.mjs";
+import { SettingsSectionHeading as h } from "./settings-section-heading.mjs";
+import { SwitcherButton as o } from "./switcher-button.mjs";
+import { DefaultThemeIcon as m, MacOSThemeIcon as n, MacOSTahoeThemeIcon as d } from "./theme-icons.mjs";
+function u() {
+  const {
+    colorScheme: c,
+    applyMacOSTheme: a,
+    applyMacOSTahoeTheme: i,
+    applyDefaultTheme: r
+  } = l();
+  return /* @__PURE__ */ t("div", { className: "px-6 pt-8", children: [
+    /* @__PURE__ */ e(h, { children: "Theme Style" }),
+    /* @__PURE__ */ t("div", { role: "radiogroup", className: "grid grid-cols-3 gap-5", children: [
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: r,
+          title: "Default",
+          checked: c === "default",
+          children: /* @__PURE__ */ e(m, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: a,
+          title: "macOS",
+          checked: c === "macos",
+          children: /* @__PURE__ */ e(n, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: i,
+          title: "Tahoe",
+          checked: c === "macos-tahoe",
+          children: /* @__PURE__ */ e(d, {})
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  u as ThemeVariantSwitcher,
+  u as default
+};

package/themes/components/theme-background.mjs

@@ -0,0 +1,75 @@
+import { jsx as o, Fragment as g, jsxs as N } from "react/jsx-runtime";
+import { useState as f, useEffect as S } from "react";
+import b from "classnames";
+import { useTheme as $ } from "../hooks/use-theme.mjs";
+const p = "https://cdn.jsdelivr.net/gh/e-burgos/tucu-ui@main/docs/assets/macos-bg", E = {
+  base: "tucu-bg-base",
+  sonoma: "tucu-bg-sonoma",
+  radial: "tucu-bg-radial",
+  aurora: "tucu-bg-aurora",
+  depth: "tucu-bg-depth",
+  demo: "tucu-bg-demo",
+  window: "tucu-bg-window",
+  wave: "tucu-bg-wave",
+  wallpaper: "tucu-bg-wallpaper",
+  mobile: "tucu-bg-mobile"
+}, T = ["wave", "wallpaper", "mobile"];
+function V(e, a, t) {
+  return T.includes(e) ? `${t}/${a ? "dark" : "light"}-${e}.svg` : null;
+}
+const j = ({
+  mode: e = "fixed",
+  variant: a,
+  cdnBase: t = p,
+  className: s,
+  style: h,
+  children: n
+}) => {
+  const { mode: v, backgroundVariant: w } = $(), i = v === "dark", r = a ?? w ?? "none", [x, u] = f(!1), [k, c] = f(!1), d = V(r, i, t), A = E[r] || "";
+  if (S(() => {
+    u(!1), c(!1);
+  }, [r, i, t]), r === "none")
+    return /* @__PURE__ */ o(g, { children: n });
+  const l = e === "fixed", m = /* @__PURE__ */ o(
+    "div",
+    {
+      "data-tucu": "theme-background",
+      "data-variant": r,
+      className: b(
+        l ? "fixed inset-0 z-0 h-dvh" : "absolute inset-0 -z-[1]",
+        A,
+        s
+      ),
+      style: h,
+      "aria-hidden": "true",
+      children: d && !x && /* @__PURE__ */ o(
+        "img",
+        {
+          src: d,
+          alt: "",
+          "aria-hidden": "true",
+          onLoad: () => c(!0),
+          onError: () => u(!0),
+          className: b(
+            "absolute inset-0 h-full w-full object-cover transition-opacity duration-300",
+            k ? "opacity-100" : "opacity-0"
+          ),
+          draggable: !1
+        }
+      )
+    }
+  );
+  return l ? /* @__PURE__ */ N(g, { children: [
+    m,
+    /* @__PURE__ */ o("div", { className: "relative z-10 min-h-dvh", children: n })
+  ] }) : m;
+};
+function z(e, a, t = p) {
+  return `${t}/${a ? "dark" : "light"}-${e}.svg`;
+}
+j.displayName = "ThemeBackground";
+export {
+  j as ThemeBackground,
+  j as default,
+  z as getBackgroundUrl
+};

package/themes/components/theme-provider/index.mjs

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { MfeAppThemeProvider as e } from "./mfe-app-theme-provider.mjs";
+import a from "./standalone-app-theme-provider.mjs";
+function m(r) {
+  return (r.architecturalPatterns ?? "standalone") === "standalone" ? /* @__PURE__ */ t(a, { ...r }) : /* @__PURE__ */ t(e, { ...r });
+}
+export {
+  m as ThemeProvider,
+  m as default
+};

package/themes/components/theme-provider/mfe-app-theme-provider.mjs

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Suspense as t } from "react";
+import { BrowserRouter as f } from "react-router-dom";
+import { ThemeWrapper as n } from "./theme-wrapper.mjs";
+import { MfeAppRoutesProvider as a } from "../../router/components/mfe-app-routes-provider.mjs";
+import { FallbackPage as l } from "../../pages/fallback-page.mjs";
+const x = ({
+  appRoutesConfig: o,
+  basePath: e,
+  isAuthenticated: i,
+  loginUrl: m,
+  ...p
+}) => /* @__PURE__ */ r(t, { fallback: /* @__PURE__ */ r(l, { loadingText: "Loading..." }), children: /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(n, { ...p, children: /* @__PURE__ */ r(
+  a,
+  {
+    routesConfig: o,
+    basePath: e,
+    isAuthenticated: i,
+    loginUrl: m
+  }
+) }) }) });
+export {
+  x as MfeAppThemeProvider
+};

package/themes/components/theme-provider/standalone-app-theme-provider.mjs

@@ -0,0 +1,30 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Suspense as t } from "react";
+import { BrowserRouter as l } from "react-router-dom";
+import { ThemeWrapper as n } from "./theme-wrapper.mjs";
+import { StandaloneAppRoutesProvider as d } from "../../router/components/standalone-app-routes-provider.mjs";
+import { FallbackPage as m } from "../../pages/fallback-page.mjs";
+const P = ({
+  menuItems: o,
+  customRoutes: e,
+  isAuthenticated: a,
+  loginUrl: p,
+  ...i
+}) => /* @__PURE__ */ r(t, { fallback: /* @__PURE__ */ r(m, { loadingText: "Loading..." }), children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
+  n,
+  {
+    menuItems: o,
+    ...i,
+    children: e || /* @__PURE__ */ r(
+      d,
+      {
+        menuItems: o,
+        isAuthenticated: a,
+        loginUrl: p
+      }
+    )
+  }
+) }) });
+export {
+  P as default
+};

package/themes/components/theme-provider/theme-wrapper.mjs

@@ -0,0 +1,129 @@
+import { jsxs as x, jsx as C } from "react/jsx-runtime";
+import { useMemo as O, useRef as R, useEffect as o } from "react";
+import { useTheme as g } from "../../hooks/use-theme.mjs";
+import { colorPreset as B, THEME_STYLE_LAYOUTS as W, defaultLogo as j, LAYOUT_OPTIONS as d, defaultLayout as F } from "../../config/index.mjs";
+import { RootLayout as H } from "../../../components/layouts/root-layout.mjs";
+/* empty css                             */
+import { useLocation as p } from "react-router-dom";
+import { SettingsButton as K } from "../settings/settings-button.mjs";
+import { SettingsDrawer as N } from "../settings/settings-drawer.mjs";
+const V = [
+  ["primary", "primaryPreset", "CustomPrimary"],
+  ["darkPrimary", "darkPrimaryPreset", "CustomDarkPrimary"],
+  ["secondary", "secondaryPreset", "CustomSecondary"],
+  ["darkSecondary", "darkSecondaryPreset", "CustomDarkSecondary"],
+  ["accent", "accentPreset", "CustomAccent"],
+  ["darkAccent", "darkAccentPreset", "CustomDarkAccent"],
+  ["muted", "mutedPreset", "CustomMuted"],
+  ["darkMuted", "darkMutedPreset", "CustomDarkMuted"],
+  ["darkBg", "darkBgPreset", "CustomDarkBg"],
+  ["lightBg", "lightBgPreset", "CustomLightBg"],
+  ["lightDark", "lightDarkPreset", "CustomLightDark"],
+  ["darkLightDark", "darkLightDarkPreset", "CustomDarkLightDark"],
+  ["success", "successPreset", "CustomSuccess"],
+  ["darkSuccess", "darkSuccessPreset", "CustomDarkSuccess"],
+  ["warning", "warningPreset", "CustomWarning"],
+  ["darkWarning", "darkWarningPreset", "CustomDarkWarning"],
+  ["error", "errorPreset", "CustomError"],
+  ["darkError", "darkErrorPreset", "CustomDarkError"],
+  ["info", "infoPreset", "CustomInfo"],
+  ["darkInfo", "darkInfoPreset", "CustomDarkInfo"],
+  ["fg", "fgPreset", "CustomFg"],
+  ["darkFg", "darkFgPreset", "CustomDarkFg"],
+  ["border", "borderPreset", "CustomBorder"],
+  ["darkBorder", "darkBorderPreset", "CustomDarkBorder"]
+];
+function Y(a, m) {
+  return B?.find((s) => s.label === m) ?? {
+    label: a,
+    value: m
+  };
+}
+function rr({
+  logo: a = {},
+  rightButton: m,
+  themeStyle: s,
+  brandColor: h,
+  customPaletteColor: f,
+  background: y,
+  showSettings: T,
+  className: S,
+  headerClassName: v,
+  contentClassName: M,
+  fullWidth: _,
+  mode: A,
+  menuItems: D,
+  layout: t,
+  children: b,
+  setCurrentPathname: l
+}) {
+  const { mode: P, layout: e, colorScheme: c } = g(), { pathname: E } = p(), w = O(
+    () => D.filter((r) => !r.hide),
+    [D]
+  ), L = R(l);
+  o(() => {
+    L.current = l;
+  }, [l]), o(() => {
+    L.current?.(E);
+  }, [E]), o(() => {
+    const r = Object.keys(a).length > 0, u = h ? B?.find((k) => k.label === h) : void 0, n = s ? W[s] : void 0, i = n ? t && n.validLayouts.includes(t) ? t : n.defaultLayout : t || void 0;
+    s && g.getState().applyThemeStyle(s), g.setState({
+      logo: r ? a : j,
+      showSettings: !!T,
+      ...A && { mode: A },
+      ...i && { layout: i },
+      ...u && { primaryPreset: u },
+      ...y && { backgroundVariant: y }
+    });
+  }, []), o(() => {
+    if (!f) return;
+    const r = {};
+    for (const [u, n, i] of V) {
+      const k = f[u];
+      k && (r[n] = Y(i, k));
+    }
+    Object.keys(r).length > 0 && g.setState(r);
+  }, [f]), o(() => {
+    const r = document.documentElement;
+    r.classList.toggle("dark", P === "dark"), r.classList.toggle("light", P !== "dark");
+  }, [P]), o(() => {
+    document.documentElement.classList.toggle(
+      "macos",
+      c === "macos" || e === d.MACOS || e === d.MACOS_NAVBAR
+    );
+  }, [c, e]), o(() => {
+    document.documentElement.classList.toggle(
+      "macos-tahoe",
+      c === "macos-tahoe" || e === d.MACOS_TAHOE || e === d.MACOS_TAHOE_DOCK || e === d.MACOS_TAHOE_NAVBAR
+    );
+  }, [c, e]);
+  const I = O(() => t || e || F, [t, e]);
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: `fixed inset-0 h-dvh overflow-y-auto overflow-x-hidden bg-body ${S}`,
+      children: [
+        /* @__PURE__ */ C(
+          H,
+          {
+            layout: I,
+            menuItems: w,
+            rightButton: m,
+            logo: a,
+            className: S,
+            headerClassName: v,
+            contentClassName: M,
+            fullWidth: _,
+            children: b
+          }
+        ),
+        /* @__PURE__ */ C(K, {}),
+        /* @__PURE__ */ C(N, {})
+      ]
+    }
+  );
+}
+export {
+  rr as ThemeWrapper,
+  rr as default
+};