@codeplex-sac/tema 0.0.14 → 0.0.15

package/index.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("react"),c=require("@mui/material"),p=d.createContext(void 0),g="codeplex-theme",h=({children:e,temaPorDefecto:t="light"})=>{const[r,n]=d.useState(()=>{if(typeof window<"u"){const i=localStorage.getItem(g);if(i==="light"||i==="dark")return i;if(window.matchMedia("(prefers-color-scheme: dark)").matches)return"dark"}return t}),o=d.useCallback(i=>{const f=document.documentElement;f.classList.remove("light","dark"),f.classList.add(i),localStorage.setItem(g,i)},[]);d.useEffect(()=>{o(r)},[r,o]);const a=d.useCallback(i=>{n(i)},[]),l=d.useCallback(()=>{n(i=>i==="light"?"dark":"light")},[]);return s.jsx(p.Provider,{value:{tema:r,alternarTema:l,establecerTema:a},children:e})},E=({defaultTheme:e,...t})=>s.jsx(h,{temaPorDefecto:e,...t}),C=p,u=()=>{const e=d.useContext(p);if(!e)throw new Error("usarTema debe ser usado dentro de un CodeplexProveedorTema");return e},P=u,S=({children:e,sobrescrituraTema:t})=>{const{tema:r}=u(),n=d.useMemo(()=>{const o=r==="dark",a={palette:{mode:r,primary:{main:"#3b82f6"},background:{default:o?"#1b2431":"#f9fafb",paper:o?"#273142":"#ffffff"},text:{primary:o?"#ffffff":"#111827",secondary:o?"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 t?c.createTheme(a,t):c.createTheme(a)},[r,t]);return d.useEffect(()=>{const o=document.documentElement,a=n.palette;o.style.setProperty("--cp-primary-main",a.primary.main),o.style.setProperty("--cp-bg-default",a.background.default),o.style.setProperty("--cp-bg-paper",a.background.paper),o.style.setProperty("--cp-text-primary",a.text.primary),o.style.setProperty("--cp-text-secondary",a.text.secondary),o.style.setProperty("--cp-divider",a.divider)},[n]),d.useEffect(()=>{const o="codeplex-google-resources";if(!document.getElementById(o)){const a=document.createElement("link");a.id=o,a.rel="stylesheet",a.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(a)}},[]),s.jsxs(c.ThemeProvider,{theme:n,children:[s.jsx(c.CssBaseline,{}),e]})};function T(){return"tema"}const x=[{id:"playfair-dm-sans",nombre:"Playfair Display + DM Sans",titular:"Playfair Display",cuerpo:"DM Sans",categoria:"elegante",descripcion:"Serif de alto contraste para titulares con una sans geométrica limpia para el cuerpo."},{id:"cormorant-inter",nombre:"Cormorant Garamond + Inter",titular:"Cormorant Garamond",cuerpo:"Inter",categoria:"editorial",descripcion:"Serif clásica y refinada combinada con una sans neutra muy legible."},{id:"dm-sans-staatliches",nombre:"Staatliches + DM Sans",titular:"Staatliches",cuerpo:"DM Sans",categoria:"moderno",descripcion:"Display condensada de gran impacto para titulares cortos y llamativos."},{id:"bricolage-biorhyme",nombre:"Bricolage Grotesque + BioRhyme",titular:"Bricolage Grotesque",cuerpo:"BioRhyme",categoria:"editorial",descripcion:"Grotesca expresiva con una serif de bloque para un tono editorial contemporáneo."},{id:"eb-garamond-dm-mono",nombre:"EB Garamond + DM Mono",titular:"EB Garamond",cuerpo:"DM Mono",categoria:"tecnico",descripcion:"Serif humanista con una monoespaciada para documentación técnica con carácter."},{id:"poppins-inter",nombre:"Poppins + Inter",titular:"Poppins",cuerpo:"Inter",categoria:"minimalista",descripcion:"Par por defecto del sistema Codeplex: titulares redondeados y cuerpo neutro."},{id:"space-grotesk-ibm-plex",nombre:"Space Grotesk + IBM Plex Sans",titular:"Space Grotesk",cuerpo:"IBM Plex Sans",categoria:"tecnico",descripcion:"Geométrica con detalles técnicos para productos digitales y dashboards."},{id:"fraunces-nunito",nombre:"Fraunces + Nunito Sans",titular:"Fraunces",cuerpo:"Nunito Sans",categoria:"elegante",descripcion:"Serif suave y cálida con una sans amable para marcas cercanas."}];function v(e){return x.find(t=>t.id===e)}function y(e){return`"${e}", "Inter", "system-ui", "-apple-system", "Segoe UI", sans-serif`}function b(e){const t=":wght@300;400;500;600;700";return`https://fonts.googleapis.com/css2?${[e.titular,e.cuerpo].filter((n,o,a)=>a.indexOf(n)===o).map(n=>`family=${n.replace(/ /g,"+")}${t}`).join("&")}&display=swap`}function m(e){const t=y(e.titular),r=y(e.cuerpo);return{fontFamily:r,h1:{fontFamily:t,fontWeight:700},h2:{fontFamily:t,fontWeight:700},h3:{fontFamily:t,fontWeight:600},h4:{fontFamily:t,fontWeight:600},h5:{fontFamily:t,fontWeight:600},h6:{fontFamily:t,fontWeight:600},subtitle1:{fontFamily:r},subtitle2:{fontFamily:r},body1:{fontFamily:r},body2:{fontFamily:r},button:{fontFamily:r,fontWeight:600,textTransform:"none"},caption:{fontFamily:r},overline:{fontFamily:r}}}function D(e){return{typography:m(e)}}function M(e){if(typeof document>"u")return;const t=`codeplex-par-fuentes-${e.id}`;if(document.getElementById(t))return;const r=document.createElement("link");r.id=t,r.rel="stylesheet",r.href=b(e),document.head.appendChild(r)}const F=[{id:"space-vibrante",nombre:"Space Vibrante",titular:"Space Grotesk",cuerpo:"DM Sans",colores:{fondo:"#FFFFFF",texto:"#111111",primario:"#111111",acento:"#FF5B3E",superficie:"#FFD84D"}},{id:"cormorant-noche",nombre:"Cormorant Noche",titular:"Cormorant Garamond",cuerpo:"Inter",colores:{fondo:"#1A2340",texto:"#F4EAD5",primario:"#D4A574",acento:"#E8C77A",superficie:"#243054"}},{id:"playfair-tierra",nombre:"Playfair Tierra",titular:"Playfair Display",cuerpo:"Lora",colores:{fondo:"#EFEAE2",texto:"#2A1F14",primario:"#2A1F14",acento:"#8B6F4E",superficie:"#C9B896"}},{id:"tanker-pop",nombre:"Tanker Pop",titular:"Bricolage Grotesque",cuerpo:"DM Sans",colores:{fondo:"#FFE8F0",texto:"#3D1A2E",primario:"#A855F7",acento:"#FF5BA0",superficie:"#FFF6CC"}},{id:"plex-tecnico",nombre:"Plex Técnico",titular:"Space Grotesk",cuerpo:"IBM Plex Sans",colores:{fondo:"#0B1120",texto:"#E2E8F0",primario:"#38BDF8",acento:"#22D3EE",superficie:"#1E293B"}},{id:"fraunces-calido",nombre:"Fraunces Cálido",titular:"Fraunces",cuerpo:"Nunito Sans",colores:{fondo:"#FFF8F2",texto:"#3B2A22",primario:"#C2410C",acento:"#F59E0B",superficie:"#FCE7D2"}}];function B(e){return F.find(t=>t.id===e)}function A(e){const t={id:e.id,nombre:e.nombre,titular:e.titular,cuerpo:e.cuerpo,descripcion:e.nombre};return{palette:{primary:{main:e.colores.primario},secondary:{main:e.colores.acento},background:{default:e.colores.fondo,paper:e.colores.superficie},text:{primary:e.colores.texto}},typography:m(t)}}function I(e){if(typeof document>"u")return;const t=`codeplex-kit-marca-${e.id}`;if(document.getElementById(t))return;const r=":wght@300;400;500;600;700",n=[e.titular,e.cuerpo].filter((a,l,i)=>i.indexOf(a)===l).map(a=>`family=${a.replace(/ /g,"+")}${r}`).join("&"),o=document.createElement("link");o.id=t,o.rel="stylesheet",o.href=`https://fonts.googleapis.com/css2?${n}&display=swap`,document.head.appendChild(o)}function j(e){const t=e.replace("#",""),r=t.length===3?t.split("").map(l=>l+l).join(""):t,n=parseInt(r.slice(0,2),16),o=parseInt(r.slice(2,4),16),a=parseInt(r.slice(4,6),16);return(.299*n+.587*o+.114*a)/255>.6}const w=[{clave:"fondo",etiqueta:"Fondo"},{clave:"texto",etiqueta:"Texto"},{clave:"primario",etiqueta:"Primario"},{clave:"acento",etiqueta:"Acento"},{clave:"superficie",etiqueta:"Superficie"}];function R(e){return`"${e}", system-ui, sans-serif`}const k={borderRadius:3,overflow:"hidden",bgcolor:"background.paper",border:e=>`1px solid ${e.palette.divider}`,transition:"box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease"},G=({kit:e,seleccionado:t=!1,alSeleccionar:r})=>{const n=!!r;return s.jsxs(c.Box,{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?`Aplicar kit ${e.nombre}`:void 0,onClick:()=>r?.(e),onKeyDown:o=>{n&&(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),r?.(e))},sx:{...k,cursor:n?"pointer":"default",borderColor:o=>t?o.palette.primary.main:o.palette.divider,boxShadow:t?6:0,"&:hover":n?{boxShadow:4,transform:"translateY(-2px)"}:void 0},children:[s.jsx(c.Box,{sx:{display:"grid",gridTemplateColumns:"1fr 1fr",bgcolor:"#16181d"},children:[{tag:"Headline",fuente:e.titular},{tag:"Body",fuente:e.cuerpo}].map(o=>s.jsxs(c.Box,{sx:{p:2.5,borderRight:o.tag==="Headline"?"1px solid rgba(255,255,255,0.08)":"none"},children:[s.jsx(c.Typography,{sx:{color:"rgba(255,255,255,0.5)",fontSize:11,mb:.5},children:o.tag}),s.jsx(c.Typography,{sx:{color:"#fff",fontFamily:R(o.fuente),fontSize:22,fontWeight:600,lineHeight:1.15},children:o.fuente})]},o.tag))}),s.jsx(c.Box,{sx:{p:1.5,display:"flex",flexDirection:"column",gap:1},children:w.map(({clave:o,etiqueta:a})=>{const l=e.colores[o],i=j(l);return s.jsxs(c.Box,{sx:{bgcolor:l,borderRadius:2,px:2,py:1.25,display:"flex",alignItems:"center",justifyContent:"space-between",border:i?"1px solid rgba(0,0,0,0.06)":"none"},children:[s.jsx(c.Typography,{sx:{color:i?"#111":"#fff",fontSize:13,fontWeight:500},children:a}),s.jsx(c.Typography,{sx:{color:i?"rgba(0,0,0,0.55)":"rgba(255,255,255,0.8)",fontSize:12,fontFamily:"monospace"},children:l.toUpperCase()})]},o)})})]})};exports.CODEPLEX_KITS_MARCA=F;exports.CODEPLEX_PARES_FUENTES=x;exports.CodeplexProveedorMui=S;exports.CodeplexProveedorTema=h;exports.CodeplexTarjetaMarca=G;exports.CodeplexThemeProvider=E;exports.ContextoTema=p;exports.ThemeContext=C;exports.cargarKitMarca=I;exports.cargarParFuentes=M;exports.obtenerKitMarca=B;exports.obtenerParFuentes=v;exports.tema=T;exports.temaDesdeKitMarca=A;exports.temaDesdeParFuentes=D;exports.tipografiaDesdeParFuentes=m;exports.urlGoogleFonts=b;exports.usarTema=u;exports.useTheme=P;

package/index.d.ts

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

package/index.js

@@ -1,55 +1,55 @@
-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"
+import { jsx as c, jsxs as p } from "react/jsx-runtime";
+import E, { createContext as C, useState as S, useCallback as m, useEffect as u, useMemo as P } from "react";
+import { createTheme as y, ThemeProvider as v, CssBaseline as T, Box as l, Typography as d } from "@mui/material";
+const f = C(void 0), h = "codeplex-theme", D = ({
+  children: e,
+  temaPorDefecto: t = "light"
 }) => {
-  const [s, a] = P(() => {
+  const [r, n] = S(() => {
     if (typeof window < "u") {
-      const o = localStorage.getItem(f);
-      if (o === "light" || o === "dark")
-        return o;
+      const i = localStorage.getItem(h);
+      if (i === "light" || i === "dark")
+        return i;
       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);
+    return t;
+  }), o = m((i) => {
+    const g = document.documentElement;
+    g.classList.remove("light", "dark"), g.classList.add(i), localStorage.setItem(h, i);
   }, []);
-  d(() => {
-    e(s);
-  }, [s, e]);
-  const t = c((o) => {
-    a(o);
-  }, []), h = c(() => {
-    a((o) => o === "light" ? "dark" : "light");
+  u(() => {
+    o(r);
+  }, [r, o]);
+  const a = m((i) => {
+    n(i);
+  }, []), s = m(() => {
+    n((i) => i === "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)
+  return /* @__PURE__ */ c(f.Provider, { value: { tema: r, alternarTema: s, establecerTema: a }, children: e });
+}, O = ({ defaultTheme: e, ...t }) => /* @__PURE__ */ c(D, { temaPorDefecto: e, ...t }), L = f, x = () => {
+  const e = E.useContext(f);
+  if (!e)
     throw new Error("usarTema debe ser usado dentro de un CodeplexProveedorTema");
-  return r;
-}, I = u, A = ({
-  children: r,
-  sobrescrituraTema: n
+  return e;
+}, _ = x, j = ({
+  children: e,
+  sobrescrituraTema: t
 }) => {
-  const { tema: s } = u(), a = T(() => {
-    const e = s === "dark", t = {
+  const { tema: r } = x(), n = P(() => {
+    const o = r === "dark", a = {
       palette: {
-        mode: s,
+        mode: r,
         primary: {
           main: "#3b82f6"
         },
         background: {
-          default: e ? "#1b2431" : "#f9fafb",
-          paper: e ? "#273142" : "#ffffff"
+          default: o ? "#1b2431" : "#f9fafb",
+          paper: o ? "#273142" : "#ffffff"
         },
         text: {
-          primary: e ? "#ffffff" : "#111827",
-          secondary: e ? "rgba(255,255,255,0.7)" : "#4b5563"
+          primary: o ? "#ffffff" : "#111827",
+          secondary: o ? "rgba(255,255,255,0.7)" : "#4b5563"
         }
       },
       typography: {
@@ -83,32 +83,298 @@ const m = x(void 0), f = "codeplex-theme", C = ({
         }
       }
     };
-    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);
+    return t ? y(a, t) : y(a);
+  }, [r, t]);
+  return u(() => {
+    const o = document.documentElement, a = n.palette;
+    o.style.setProperty("--cp-primary-main", a.primary.main), o.style.setProperty("--cp-bg-default", a.background.default), o.style.setProperty("--cp-bg-paper", a.background.paper), o.style.setProperty("--cp-text-primary", a.text.primary), o.style.setProperty("--cp-text-secondary", a.text.secondary), o.style.setProperty("--cp-divider", a.divider);
+  }, [n]), u(() => {
+    const o = "codeplex-google-resources";
+    if (!document.getElementById(o)) {
+      const a = document.createElement("link");
+      a.id = o, a.rel = "stylesheet", a.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(a);
     }
-  }, []), /* @__PURE__ */ y(b, { theme: a, children: [
-    /* @__PURE__ */ i(k, {}),
-    r
+  }, []), /* @__PURE__ */ p(v, { theme: n, children: [
+    /* @__PURE__ */ c(T, {}),
+    e
   ] });
 };
-function L() {
+function N() {
   return "tema";
 }
+const B = [
+  {
+    id: "playfair-dm-sans",
+    nombre: "Playfair Display + DM Sans",
+    titular: "Playfair Display",
+    cuerpo: "DM Sans",
+    categoria: "elegante",
+    descripcion: "Serif de alto contraste para titulares con una sans geométrica limpia para el cuerpo."
+  },
+  {
+    id: "cormorant-inter",
+    nombre: "Cormorant Garamond + Inter",
+    titular: "Cormorant Garamond",
+    cuerpo: "Inter",
+    categoria: "editorial",
+    descripcion: "Serif clásica y refinada combinada con una sans neutra muy legible."
+  },
+  {
+    id: "dm-sans-staatliches",
+    nombre: "Staatliches + DM Sans",
+    titular: "Staatliches",
+    cuerpo: "DM Sans",
+    categoria: "moderno",
+    descripcion: "Display condensada de gran impacto para titulares cortos y llamativos."
+  },
+  {
+    id: "bricolage-biorhyme",
+    nombre: "Bricolage Grotesque + BioRhyme",
+    titular: "Bricolage Grotesque",
+    cuerpo: "BioRhyme",
+    categoria: "editorial",
+    descripcion: "Grotesca expresiva con una serif de bloque para un tono editorial contemporáneo."
+  },
+  {
+    id: "eb-garamond-dm-mono",
+    nombre: "EB Garamond + DM Mono",
+    titular: "EB Garamond",
+    cuerpo: "DM Mono",
+    categoria: "tecnico",
+    descripcion: "Serif humanista con una monoespaciada para documentación técnica con carácter."
+  },
+  {
+    id: "poppins-inter",
+    nombre: "Poppins + Inter",
+    titular: "Poppins",
+    cuerpo: "Inter",
+    categoria: "minimalista",
+    descripcion: "Par por defecto del sistema Codeplex: titulares redondeados y cuerpo neutro."
+  },
+  {
+    id: "space-grotesk-ibm-plex",
+    nombre: "Space Grotesk + IBM Plex Sans",
+    titular: "Space Grotesk",
+    cuerpo: "IBM Plex Sans",
+    categoria: "tecnico",
+    descripcion: "Geométrica con detalles técnicos para productos digitales y dashboards."
+  },
+  {
+    id: "fraunces-nunito",
+    nombre: "Fraunces + Nunito Sans",
+    titular: "Fraunces",
+    cuerpo: "Nunito Sans",
+    categoria: "elegante",
+    descripcion: "Serif suave y cálida con una sans amable para marcas cercanas."
+  }
+];
+function q(e) {
+  return B.find((t) => t.id === e);
+}
+function b(e) {
+  return `"${e}", "Inter", "system-ui", "-apple-system", "Segoe UI", sans-serif`;
+}
+function M(e) {
+  const t = ":wght@300;400;500;600;700";
+  return `https://fonts.googleapis.com/css2?${[e.titular, e.cuerpo].filter((n, o, a) => a.indexOf(n) === o).map((n) => `family=${n.replace(/ /g, "+")}${t}`).join("&")}&display=swap`;
+}
+function F(e) {
+  const t = b(e.titular), r = b(e.cuerpo);
+  return {
+    fontFamily: r,
+    h1: { fontFamily: t, fontWeight: 700 },
+    h2: { fontFamily: t, fontWeight: 700 },
+    h3: { fontFamily: t, fontWeight: 600 },
+    h4: { fontFamily: t, fontWeight: 600 },
+    h5: { fontFamily: t, fontWeight: 600 },
+    h6: { fontFamily: t, fontWeight: 600 },
+    subtitle1: { fontFamily: r },
+    subtitle2: { fontFamily: r },
+    body1: { fontFamily: r },
+    body2: { fontFamily: r },
+    button: { fontFamily: r, fontWeight: 600, textTransform: "none" },
+    caption: { fontFamily: r },
+    overline: { fontFamily: r }
+  };
+}
+function z(e) {
+  return { typography: F(e) };
+}
+function K(e) {
+  if (typeof document > "u") return;
+  const t = `codeplex-par-fuentes-${e.id}`;
+  if (document.getElementById(t)) return;
+  const r = document.createElement("link");
+  r.id = t, r.rel = "stylesheet", r.href = M(e), document.head.appendChild(r);
+}
+const I = [
+  {
+    id: "space-vibrante",
+    nombre: "Space Vibrante",
+    titular: "Space Grotesk",
+    cuerpo: "DM Sans",
+    colores: { fondo: "#FFFFFF", texto: "#111111", primario: "#111111", acento: "#FF5B3E", superficie: "#FFD84D" }
+  },
+  {
+    id: "cormorant-noche",
+    nombre: "Cormorant Noche",
+    titular: "Cormorant Garamond",
+    cuerpo: "Inter",
+    colores: { fondo: "#1A2340", texto: "#F4EAD5", primario: "#D4A574", acento: "#E8C77A", superficie: "#243054" }
+  },
+  {
+    id: "playfair-tierra",
+    nombre: "Playfair Tierra",
+    titular: "Playfair Display",
+    cuerpo: "Lora",
+    colores: { fondo: "#EFEAE2", texto: "#2A1F14", primario: "#2A1F14", acento: "#8B6F4E", superficie: "#C9B896" }
+  },
+  {
+    id: "tanker-pop",
+    nombre: "Tanker Pop",
+    titular: "Bricolage Grotesque",
+    cuerpo: "DM Sans",
+    colores: { fondo: "#FFE8F0", texto: "#3D1A2E", primario: "#A855F7", acento: "#FF5BA0", superficie: "#FFF6CC" }
+  },
+  {
+    id: "plex-tecnico",
+    nombre: "Plex Técnico",
+    titular: "Space Grotesk",
+    cuerpo: "IBM Plex Sans",
+    colores: { fondo: "#0B1120", texto: "#E2E8F0", primario: "#38BDF8", acento: "#22D3EE", superficie: "#1E293B" }
+  },
+  {
+    id: "fraunces-calido",
+    nombre: "Fraunces Cálido",
+    titular: "Fraunces",
+    cuerpo: "Nunito Sans",
+    colores: { fondo: "#FFF8F2", texto: "#3B2A22", primario: "#C2410C", acento: "#F59E0B", superficie: "#FCE7D2" }
+  }
+];
+function U(e) {
+  return I.find((t) => t.id === e);
+}
+function H(e) {
+  const t = {
+    id: e.id,
+    nombre: e.nombre,
+    titular: e.titular,
+    cuerpo: e.cuerpo,
+    descripcion: e.nombre
+  };
+  return {
+    palette: {
+      primary: { main: e.colores.primario },
+      secondary: { main: e.colores.acento },
+      background: { default: e.colores.fondo, paper: e.colores.superficie },
+      text: { primary: e.colores.texto }
+    },
+    typography: F(t)
+  };
+}
+function V(e) {
+  if (typeof document > "u") return;
+  const t = `codeplex-kit-marca-${e.id}`;
+  if (document.getElementById(t)) return;
+  const r = ":wght@300;400;500;600;700", n = [e.titular, e.cuerpo].filter((a, s, i) => i.indexOf(a) === s).map((a) => `family=${a.replace(/ /g, "+")}${r}`).join("&"), o = document.createElement("link");
+  o.id = t, o.rel = "stylesheet", o.href = `https://fonts.googleapis.com/css2?${n}&display=swap`, document.head.appendChild(o);
+}
+function A(e) {
+  const t = e.replace("#", ""), r = t.length === 3 ? t.split("").map((s) => s + s).join("") : t, n = parseInt(r.slice(0, 2), 16), o = parseInt(r.slice(2, 4), 16), a = parseInt(r.slice(4, 6), 16);
+  return (0.299 * n + 0.587 * o + 0.114 * a) / 255 > 0.6;
+}
+const w = [
+  { clave: "fondo", etiqueta: "Fondo" },
+  { clave: "texto", etiqueta: "Texto" },
+  { clave: "primario", etiqueta: "Primario" },
+  { clave: "acento", etiqueta: "Acento" },
+  { clave: "superficie", etiqueta: "Superficie" }
+];
+function W(e) {
+  return `"${e}", system-ui, sans-serif`;
+}
+const G = {
+  borderRadius: 3,
+  overflow: "hidden",
+  bgcolor: "background.paper",
+  border: (e) => `1px solid ${e.palette.divider}`,
+  transition: "box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease"
+}, X = ({
+  kit: e,
+  seleccionado: t = !1,
+  alSeleccionar: r
+}) => {
+  const n = !!r;
+  return /* @__PURE__ */ p(
+    l,
+    {
+      role: n ? "button" : void 0,
+      tabIndex: n ? 0 : void 0,
+      "aria-label": n ? `Aplicar kit ${e.nombre}` : void 0,
+      onClick: () => r?.(e),
+      onKeyDown: (o) => {
+        n && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), r?.(e));
+      },
+      sx: {
+        ...G,
+        cursor: n ? "pointer" : "default",
+        borderColor: (o) => t ? o.palette.primary.main : o.palette.divider,
+        boxShadow: t ? 6 : 0,
+        "&:hover": n ? { boxShadow: 4, transform: "translateY(-2px)" } : void 0
+      },
+      children: [
+        /* @__PURE__ */ c(l, { sx: { display: "grid", gridTemplateColumns: "1fr 1fr", bgcolor: "#16181d" }, children: [
+          { tag: "Headline", fuente: e.titular },
+          { tag: "Body", fuente: e.cuerpo }
+        ].map((o) => /* @__PURE__ */ p(l, { sx: { p: 2.5, borderRight: o.tag === "Headline" ? "1px solid rgba(255,255,255,0.08)" : "none" }, children: [
+          /* @__PURE__ */ c(d, { sx: { color: "rgba(255,255,255,0.5)", fontSize: 11, mb: 0.5 }, children: o.tag }),
+          /* @__PURE__ */ c(d, { sx: { color: "#fff", fontFamily: W(o.fuente), fontSize: 22, fontWeight: 600, lineHeight: 1.15 }, children: o.fuente })
+        ] }, o.tag)) }),
+        /* @__PURE__ */ c(l, { sx: { p: 1.5, display: "flex", flexDirection: "column", gap: 1 }, children: w.map(({ clave: o, etiqueta: a }) => {
+          const s = e.colores[o], i = A(s);
+          return /* @__PURE__ */ p(
+            l,
+            {
+              sx: {
+                bgcolor: s,
+                borderRadius: 2,
+                px: 2,
+                py: 1.25,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                border: i ? "1px solid rgba(0,0,0,0.06)" : "none"
+              },
+              children: [
+                /* @__PURE__ */ c(d, { sx: { color: i ? "#111" : "#fff", fontSize: 13, fontWeight: 500 }, children: a }),
+                /* @__PURE__ */ c(d, { sx: { color: i ? "rgba(0,0,0,0.55)" : "rgba(255,255,255,0.8)", fontSize: 12, fontFamily: "monospace" }, children: s.toUpperCase() })
+              ]
+            },
+            o
+          );
+        }) })
+      ]
+    }
+  );
+};
 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
+  I as CODEPLEX_KITS_MARCA,
+  B as CODEPLEX_PARES_FUENTES,
+  j as CodeplexProveedorMui,
+  D as CodeplexProveedorTema,
+  X as CodeplexTarjetaMarca,
+  O as CodeplexThemeProvider,
+  f as ContextoTema,
+  L as ThemeContext,
+  V as cargarKitMarca,
+  K as cargarParFuentes,
+  U as obtenerKitMarca,
+  q as obtenerParFuentes,
+  N as tema,
+  H as temaDesdeKitMarca,
+  z as temaDesdeParFuentes,
+  F as tipografiaDesdeParFuentes,
+  M as urlGoogleFonts,
+  x as usarTema,
+  _ as useTheme
 };

package/lib/kits-marca/kits-marca.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { ThemeOptions } from '@mui/material';
+export interface CodeplexColoresMarca {
+    /** Color de fondo principal. */
+    fondo: string;
+    /** Color del texto. */
+    texto: string;
+    /** Color primario / de acción. */
+    primario: string;
+    /** Color de acento. */
+    acento: string;
+    /** Color de superficies (tarjetas, paneles). */
+    superficie: string;
+}
+export interface CodeplexKitMarca {
+    /** Identificador estable del kit. */
+    id: string;
+    /** Nombre legible del kit. */
+    nombre: string;
+    /** Fuente para titulares. */
+    titular: string;
+    /** Fuente para cuerpo de texto. */
+    cuerpo: string;
+    /** Paleta de colores del kit. */
+    colores: CodeplexColoresMarca;
+}
+export declare const CODEPLEX_KITS_MARCA: CodeplexKitMarca[];
+export declare function obtenerKitMarca(id: string): CodeplexKitMarca | undefined;
+export declare function temaDesdeKitMarca(kit: CodeplexKitMarca): ThemeOptions;
+export declare function cargarKitMarca(kit: CodeplexKitMarca): void;
+export interface CodeplexTarjetaMarcaProps {
+    /** Kit de marca a previsualizar. */
+    kit: CodeplexKitMarca;
+    /** Resalta la tarjeta como seleccionada. */
+    seleccionado?: boolean;
+    /** Se ejecuta al hacer clic en la tarjeta. */
+    alSeleccionar?: (kit: CodeplexKitMarca) => void;
+}
+export declare const CodeplexTarjetaMarca: React.FC<CodeplexTarjetaMarcaProps>;

package/lib/pares-fuentes/pares-fuentes.d.ts

@@ -0,0 +1,22 @@
+import { ThemeOptions } from '@mui/material';
+export type CodeplexCategoriaFuentes = 'elegante' | 'moderno' | 'editorial' | 'tecnico' | 'minimalista';
+export interface CodeplexParFuentes {
+    /** Identificador estable del emparejamiento. */
+    id: string;
+    /** Nombre legible del emparejamiento. */
+    nombre: string;
+    /** Fuente para títulos y encabezados. */
+    titular: string;
+    /** Fuente para cuerpo de texto y párrafos. */
+    cuerpo: string;
+    /** Clasificación del estilo visual. */
+    categoria: CodeplexCategoriaFuentes;
+    /** Breve descripción del carácter del emparejamiento. */
+    descripcion: string;
+}
+export declare const CODEPLEX_PARES_FUENTES: CodeplexParFuentes[];
+export declare function obtenerParFuentes(id: string): CodeplexParFuentes | undefined;
+export declare function urlGoogleFonts(par: CodeplexParFuentes): string;
+export declare function tipografiaDesdeParFuentes(par: CodeplexParFuentes): NonNullable<ThemeOptions['typography']>;
+export declare function temaDesdeParFuentes(par: CodeplexParFuentes): ThemeOptions;
+export declare function cargarParFuentes(par: CodeplexParFuentes): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeplex-sac/tema",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",