@codeplex-sac/tema 0.0.11

package/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),d=require("@mui/material"),m=r.createContext(void 0),p="codeplex-theme",f=({children:s,temaPorDefecto:a="light"})=>{const[n,c]=r.useState(()=>{if(typeof window<"u"){const o=localStorage.getItem(p);if(o==="light"||o==="dark")return o;if(window.matchMedia("(prefers-color-scheme: dark)").matches)return"dark"}return a}),e=r.useCallback(o=>{const u=document.documentElement;u.classList.remove("light","dark"),u.classList.add(o),localStorage.setItem(p,o)},[]);r.useEffect(()=>{e(n)},[n,e]);const t=r.useCallback(o=>{c(o)},[]),h=r.useCallback(()=>{c(o=>o==="light"?"dark":"light")},[]);return i.jsx(m.Provider,{value:{tema:n,alternarTema:h,establecerTema:t},children:s})},y=({defaultTheme:s,...a})=>i.jsx(f,{temaPorDefecto:s,...a}),g=m,l=()=>{const s=r.useContext(m);if(!s)throw new Error("usarTema debe ser usado dentro de un CodeplexProveedorTema");return s},x=l,T=({children:s,sobrescrituraTema:a})=>{const{tema:n}=l(),c=r.useMemo(()=>{const e=n==="dark",t={palette:{mode:n,primary:{main:"#3b82f6"},background:{default:e?"#1b2431":"#f9fafb",paper:e?"#273142":"#ffffff"},text:{primary:e?"#ffffff":"#111827",secondary:e?"rgba(255,255,255,0.7)":"#4b5563"}},typography:{fontFamily:'"Poppins", "Inter", "system-ui", "-apple-system", sans-serif',h1:{fontWeight:600},h2:{fontWeight:600},h3:{fontWeight:600},h4:{fontWeight:600},h5:{fontWeight:600},h6:{fontWeight:600},button:{fontWeight:500,textTransform:"none"}},shape:{borderRadius:8},components:{MuiPaper:{styleOverrides:{root:{backgroundImage:"none"}}},MuiButton:{styleOverrides:{root:{textTransform:"none",fontWeight:600}}}}};return a?d.createTheme(t,a):d.createTheme(t)},[n,a]);return r.useEffect(()=>{const e=document.documentElement,t=c.palette;e.style.setProperty("--cp-primary-main",t.primary.main),e.style.setProperty("--cp-bg-default",t.background.default),e.style.setProperty("--cp-bg-paper",t.background.paper),e.style.setProperty("--cp-text-primary",t.text.primary),e.style.setProperty("--cp-text-secondary",t.text.secondary),e.style.setProperty("--cp-divider",t.divider)},[c]),r.useEffect(()=>{const e="codeplex-google-resources";if(!document.getElementById(e)){const t=document.createElement("link");t.id=e,t.rel="stylesheet",t.href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200",document.head.appendChild(t)}},[]),i.jsxs(d.ThemeProvider,{theme:c,children:[i.jsx(d.CssBaseline,{}),s]})};function C(){return"tema"}exports.CodeplexProveedorMui=T;exports.CodeplexProveedorTema=f;exports.CodeplexThemeProvider=y;exports.ContextoTema=m;exports.ThemeContext=g;exports.tema=C;exports.usarTema=l;exports.useTheme=x;

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/tipos';
+export * from './lib/proveedor';
+export * from './lib/tema';
+export type { ThemeOptions as OpcionesTema } from '@mui/material';

package/index.js

@@ -0,0 +1,114 @@
+import { jsx as i, jsxs as y } from "react/jsx-runtime";
+import g, { createContext as x, useState as P, useCallback as c, useEffect as d, useMemo as T } from "react";
+import { createTheme as p, ThemeProvider as b, CssBaseline as k } from "@mui/material";
+const m = x(void 0), f = "codeplex-theme", C = ({
+  children: r,
+  temaPorDefecto: n = "light"
+}) => {
+  const [s, a] = P(() => {
+    if (typeof window < "u") {
+      const o = localStorage.getItem(f);
+      if (o === "light" || o === "dark")
+        return o;
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches)
+        return "dark";
+    }
+    return n;
+  }), e = c((o) => {
+    const l = document.documentElement;
+    l.classList.remove("light", "dark"), l.classList.add(o), localStorage.setItem(f, o);
+  }, []);
+  d(() => {
+    e(s);
+  }, [s, e]);
+  const t = c((o) => {
+    a(o);
+  }, []), h = c(() => {
+    a((o) => o === "light" ? "dark" : "light");
+  }, []);
+  return /* @__PURE__ */ i(m.Provider, { value: { tema: s, alternarTema: h, establecerTema: t }, children: r });
+}, w = ({ defaultTheme: r, ...n }) => /* @__PURE__ */ i(C, { temaPorDefecto: r, ...n }), W = m, u = () => {
+  const r = g.useContext(m);
+  if (!r)
+    throw new Error("usarTema debe ser usado dentro de un CodeplexProveedorTema");
+  return r;
+}, I = u, A = ({
+  children: r,
+  sobrescrituraTema: n
+}) => {
+  const { tema: s } = u(), a = T(() => {
+    const e = s === "dark", t = {
+      palette: {
+        mode: s,
+        primary: {
+          main: "#3b82f6"
+        },
+        background: {
+          default: e ? "#1b2431" : "#f9fafb",
+          paper: e ? "#273142" : "#ffffff"
+        },
+        text: {
+          primary: e ? "#ffffff" : "#111827",
+          secondary: e ? "rgba(255,255,255,0.7)" : "#4b5563"
+        }
+      },
+      typography: {
+        fontFamily: '"Poppins", "Inter", "system-ui", "-apple-system", sans-serif',
+        h1: { fontWeight: 600 },
+        h2: { fontWeight: 600 },
+        h3: { fontWeight: 600 },
+        h4: { fontWeight: 600 },
+        h5: { fontWeight: 600 },
+        h6: { fontWeight: 600 },
+        button: { fontWeight: 500, textTransform: "none" }
+      },
+      shape: {
+        borderRadius: 8
+      },
+      components: {
+        MuiPaper: {
+          styleOverrides: {
+            root: {
+              backgroundImage: "none"
+            }
+          }
+        },
+        MuiButton: {
+          styleOverrides: {
+            root: {
+              textTransform: "none",
+              fontWeight: 600
+            }
+          }
+        }
+      }
+    };
+    return n ? p(t, n) : p(t);
+  }, [s, n]);
+  return d(() => {
+    const e = document.documentElement, t = a.palette;
+    e.style.setProperty("--cp-primary-main", t.primary.main), e.style.setProperty("--cp-bg-default", t.background.default), e.style.setProperty("--cp-bg-paper", t.background.paper), e.style.setProperty("--cp-text-primary", t.text.primary), e.style.setProperty("--cp-text-secondary", t.text.secondary), e.style.setProperty("--cp-divider", t.divider);
+  }, [a]), d(() => {
+    const e = "codeplex-google-resources";
+    if (!document.getElementById(e)) {
+      const t = document.createElement("link");
+      t.id = e, t.rel = "stylesheet", t.href = "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200", document.head.appendChild(t);
+    }
+  }, []), /* @__PURE__ */ y(b, { theme: a, children: [
+    /* @__PURE__ */ i(k, {}),
+    r
+  ] });
+};
+function L() {
+  return "tema";
+}
+export {
+  A as CodeplexProveedorMui,
+  C as CodeplexProveedorTema,
+  w as CodeplexThemeProvider,
+  m as ContextoTema,
+  W as ThemeContext,
+  L as tema,
+  u as usarTema,
+  I as useTheme
+};

package/lib/ganchos.d.ts

@@ -0,0 +1,3 @@
+import { ContextoTemaTipo } from './tipos';
+export declare const usarTema: () => ContextoTemaTipo;
+export declare const useTheme: () => ContextoTemaTipo;

package/lib/proveedor.d.ts

@@ -0,0 +1,21 @@
+import { default as React, ReactNode } from 'react';
+import { ThemeOptions } from '@mui/material';
+import { CodeplexTema, ContextoTemaTipo } from './tipos';
+export declare const ContextoTema: React.Context<ContextoTemaTipo | undefined>;
+export interface CodeplexProveedorTemaProps {
+    children: ReactNode;
+    temaPorDefecto?: CodeplexTema;
+}
+export declare const CodeplexProveedorTema: React.FC<CodeplexProveedorTemaProps>;
+export declare const CodeplexThemeProvider: ({ defaultTheme, ...props }: {
+    defaultTheme?: CodeplexTema;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeContext: React.Context<ContextoTemaTipo | undefined>;
+export declare const usarTema: () => ContextoTemaTipo;
+export declare const useTheme: () => ContextoTemaTipo;
+export interface CodeplexProveedorMuiProps {
+    children: ReactNode;
+    sobrescrituraTema?: ThemeOptions;
+}
+export declare const CodeplexProveedorMui: React.FC<CodeplexProveedorMuiProps>;

package/lib/tema.d.ts

@@ -0,0 +1 @@
+export declare function tema(): string;

package/lib/tipos.d.ts

@@ -0,0 +1,6 @@
+export type CodeplexTema = 'light' | 'dark';
+export interface ContextoTemaTipo {
+    tema: CodeplexTema;
+    alternarTema: () => void;
+    establecerTema: (tema: CodeplexTema) => void;
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@codeplex-sac/tema",
+  "version": "0.0.11",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.7",
+    "@mui/system": "^7.3.7"
+  }
+}