@asafarim/react-themes/dist/index.js

A comprehensive theme management system for React applications with automatic dark/light mode detection, custom theme creation, and smooth transitions.

"use strict";var b=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var Q=Object.prototype.hasOwnProperty;var U=(e,t)=>{for(var a in t)b(e,a,{get:t[a],enumerable:!0})},Z=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of G(t))!Q.call(e,o)&&o!==a&&b(e,o,{get:()=>t[o],enumerable:!(r=B(t,o))||r.enumerable});return e};var q=e=>Z(b({},"__esModule",{value:!0}),e);var te={};U(te,{ThemeProvider:()=>v,ThemeSelector:()=>I,ThemeToggle:()=>A,applyTheme:()=>f,createTheme:()=>H,darkTheme:()=>k,deepMergeThemes:()=>R,default:()=>v,defaultTheme:()=>X,defaultThemes:()=>w,lightTheme:()=>h,mergeTheme:()=>_,mergeThemeColors:()=>L,mergeThemes:()=>N,themes:()=>Y,useTheme:()=>c,useThemeToggle:()=>E});module.exports=q(te);var J={background:"#ffffff",backgroundSecondary:"#f8fafc",backgroundTertiary:"#f1f5f9",text:"#0f172a",textSecondary:"#475569",textMuted:"#64748b",border:"#e2e8f0",borderLight:"#f1f5f9",borderHover:"#cbd5e1",primary:"#3b82f6",primaryHover:"#2563eb",primaryActive:"#1d4ed8",success:"#10b981",warning:"#f59e0b",error:"#ef4444",info:"#06b6d4",hover:"#f8fafc",active:"#f1f5f9",focus:"rgba(59, 130, 246, 0.1)",shadow:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",shadowMd:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",shadowLg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"},K={background:"#0f172a",backgroundSecondary:"#1e293b",backgroundTertiary:"#334155",text:"#f8fafc",textSecondary:"#cbd5e1",textMuted:"#94a3b8",border:"#334155",borderLight:"#475569",borderHover:"#64748b",primary:"#60a5fa",primaryHover:"#3b82f6",primaryActive:"#2563eb",success:"#34d399",warning:"#fbbf24",error:"#f87171",info:"#22d3ee",hover:"#1e293b",active:"#334155",focus:"rgba(96, 165, 250, 0.1)",shadow:"0 1px 2px 0 rgba(0, 0, 0, 0.3)",shadowMd:"0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)",shadowLg:"0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)"},S={spacing:{xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.25rem","2xl":"1.5rem","3xl":"2rem","4xl":"3rem"},radius:{none:"0",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem",full:"9999px"},typography:{fontFamily:{sans:'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',serif:'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',mono:'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem"},fontWeight:{light:"300",normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:"1.25",normal:"1.5",relaxed:"1.75"}},transitions:{fast:"all 0.1s ease",normal:"all 0.2s ease",slow:"all 0.3s ease",bounce:"all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"},zIndex:{dropdown:1e3,modal:1050,tooltip:1100,overlay:1200}},h={name:"light",mode:"light",colors:J,...S},k={name:"dark",mode:"dark",colors:K,...S},X=h,Y={light:h,dark:k},w={default:h,light:h,dark:k};function _(e,t){return{...e,...t,colors:{...e.colors,...t.colors},spacing:{...e.spacing,...t.spacing},radius:{...e.radius,...t.radius},typography:{...e.typography,...t.typography,fontFamily:{...e.typography.fontFamily,...t.typography?.fontFamily},fontSize:{...e.typography.fontSize,...t.typography?.fontSize},fontWeight:{...e.typography.fontWeight,...t.typography?.fontWeight},lineHeight:{...e.typography.lineHeight,...t.typography?.lineHeight}},transitions:{...e.transitions,...t.transitions},zIndex:{...e.zIndex,...t.zIndex}}}var d=require("react");function f(e,t){if(typeof document>"u")return;let a=document.documentElement,r=t;t==="auto"&&(r=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),a.setAttribute("data-theme",e.name),a.setAttribute("data-theme-mode",r),Object.entries(e.colors).forEach(([o,n])=>{a.style.setProperty(`--theme-color-${P(o)}`,n)}),Object.entries(e.spacing).forEach(([o,n])=>{a.style.setProperty(`--theme-spacing-${o}`,n)}),Object.entries(e.radius).forEach(([o,n])=>{a.style.setProperty(`--theme-radius-${o}`,n)}),Object.entries(e.typography.fontFamily).forEach(([o,n])=>{a.style.setProperty(`--theme-font-family-${o}`,n)}),Object.entries(e.typography.fontSize).forEach(([o,n])=>{a.style.setProperty(`--theme-font-size-${o}`,n)}),Object.entries(e.typography.fontWeight).forEach(([o,n])=>{a.style.setProperty(`--theme-font-weight-${o}`,n)}),Object.entries(e.typography.lineHeight).forEach(([o,n])=>{a.style.setProperty(`--theme-line-height-${o}`,n)}),Object.entries(e.transitions).forEach(([o,n])=>{a.style.setProperty(`--theme-transition-${o}`,n)}),Object.entries(e.zIndex).forEach(([o,n])=>{a.style.setProperty(`--theme-z-index-${P(o)}`,n.toString())}),document.body.className=document.body.className.replace(/theme-\w+/g,""),document.body.classList.add(`theme-${e.name}`,`theme-${r}`)}function P(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}var $=require("react/jsx-runtime"),z=(0,d.createContext)(void 0),v=({children:e,defaultMode:t="auto",defaultTheme:a="default",persistMode:r=!0,storageKey:o="asafarim-theme-mode",customThemes:n={}})=>{let l={...w,...n},i=()=>{if(!r||typeof window>"u")return t;try{let s=localStorage.getItem(o);if(s&&["light","dark","auto"].includes(s))return s}catch(s){console.warn("Failed to read theme mode from localStorage:",s)}return t},[m,p]=(0,d.useState)(i),[y,W]=(0,d.useState)(a),j=()=>m==="auto"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":m,C=()=>{let s=j();return y!=="default"&&y in l?l[y]:s==="dark"?l.dark:l.light},x=C(),T=s=>{if(p(s),r&&typeof window<"u")try{localStorage.setItem(o,s)}catch(u){console.warn("Failed to save theme mode to localStorage:",u)}},O=()=>{if(m==="auto"){let s=window.matchMedia("(prefers-color-scheme: dark)").matches;T(s?"light":"dark")}else T(m==="light"?"dark":"light")},D=s=>{W(s.name)};(0,d.useEffect)(()=>{f(x,m)},[x,m,y]),(0,d.useEffect)(()=>{if(m!=="auto")return;let s=window.matchMedia("(prefers-color-scheme: dark)"),u=()=>{f(C(),m)};return s.addEventListener("change",u),()=>s.removeEventListener("change",u)},[m]);let V={currentTheme:x,mode:m,setMode:T,setTheme:D,themes:l,toggleMode:O};return(0,$.jsx)(z.Provider,{value:V,children:e})},F=()=>{let e=(0,d.useContext)(z);if(e===void 0)throw new Error("useThemeContext must be used within a ThemeProvider");return e};function c(){return F()}function E(){let{mode:e,setMode:t,toggleMode:a}=c(),o=e==="auto"?typeof window<"u"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;return{mode:e,setMode:t,toggleMode:a,isDark:o==="dark",isLight:o==="light",isAuto:e==="auto",effectiveMode:o}}var g=require("react/jsx-runtime"),A=({className:e="",style:t={},showLabels:a=!1,size:r="md"})=>{let{mode:o,toggleMode:n}=c(),i=`
    ${{sm:"w-8 h-8 text-sm",md:"w-10 h-10 text-base",lg:"w-12 h-12 text-lg"}[r]}
    inline-flex items-center justify-center
    rounded-md border border-gray-300
    bg-white hover:bg-gray-50
    dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700
    focus:outline-none focus:ring-2 focus:ring-blue-500
    transition-all duration-200
    ${e}
  `.trim(),m=()=>{switch(o){case"light":return"\u2600\uFE0F";case"dark":return"\u{1F319}";case"auto":default:return"\u{1F313}"}},p=()=>{switch(o){case"light":return"Light";case"dark":return"Dark";case"auto":default:return"Auto"}};return(0,g.jsxs)("button",{onClick:n,className:i,style:t,title:`Current theme: ${p()}. Click to toggle.`,"aria-label":`Switch theme. Current: ${p()}`,children:[(0,g.jsx)("span",{role:"img","aria-hidden":"true",children:m()}),a&&(0,g.jsx)("span",{className:"ml-2 text-sm font-medium",children:p()})]})};var M=require("react/jsx-runtime"),I=({className:e="",style:t={},showLabels:a=!0,options:r=[{mode:"light",label:"Light",icon:"\u2600\uFE0F"},{mode:"dark",label:"Dark",icon:"\u{1F319}"},{mode:"auto",label:"Auto",icon:"\u{1F313}"}]})=>{let{mode:o,setMode:n}=c(),l=`
    px-3 py-2 border border-gray-300 rounded-md
    bg-white dark:bg-gray-800 dark:border-gray-600
    text-gray-900 dark:text-gray-100
    focus:outline-none focus:ring-2 focus:ring-blue-500
    transition-all duration-200
    ${e}
  `.trim();return(0,M.jsx)("select",{value:o,onChange:i=>n(i.target.value),className:l,style:t,"aria-label":"Select theme mode",children:r.map(i=>(0,M.jsx)("option",{value:i.mode,children:a?`${i.icon?i.icon+" ":""}${i.label}`:i.icon||i.label},i.mode))})};function H(e,t){return{...e,...t,name:t.name||`${e.name}-custom`,colors:{...e.colors,...t.colors},spacing:{...e.spacing,...t.spacing},radius:{...e.radius,...t.radius},typography:{...e.typography,...t.typography,fontFamily:{...e.typography.fontFamily,...t.typography?.fontFamily},fontSize:{...e.typography.fontSize,...t.typography?.fontSize},fontWeight:{...e.typography.fontWeight,...t.typography?.fontWeight},lineHeight:{...e.typography.lineHeight,...t.typography?.lineHeight}},transitions:{...e.transitions,...t.transitions},zIndex:{...e.zIndex,...t.zIndex}}}function N(...e){if(e.length===0)throw new Error("At least one theme must be provided to mergeThemes");let[t,...a]=e;if(!ee(t))throw new Error("First theme must be a complete theme object");return a.reduce((r,o)=>({...r,...o,name:o.name||r.name,mode:o.mode||r.mode,colors:{...r.colors,...o.colors},spacing:{...r.spacing,...o.spacing},radius:{...r.radius,...o.radius},typography:{...r.typography,...o.typography,fontFamily:{...r.typography.fontFamily,...o.typography?.fontFamily},fontSize:{...r.typography.fontSize,...o.typography?.fontSize},fontWeight:{...r.typography.fontWeight,...o.typography?.fontWeight},lineHeight:{...r.typography.lineHeight,...o.typography?.lineHeight}},transitions:{...r.transitions,...o.transitions},zIndex:{...r.zIndex,...o.zIndex}}),t)}function ee(e){return!!(e&&typeof e=="object"&&"name"in e&&"mode"in e&&"colors"in e&&"spacing"in e&&"radius"in e&&"typography"in e&&"transitions"in e&&"zIndex"in e)}function L(e,...t){return t.reduce((a,r)=>({...a,...r}),e)}function R(e,...t){return t.reduce((a,r)=>{let o={...a};for(let n in r){let l=r[n],i=a[n];l&&typeof l=="object"&&!Array.isArray(l)&&i&&typeof i=="object"?o[n]={...i,...l}:l!==void 0&&(o[n]=l)}return o},e)}0&&(module.exports={ThemeProvider,ThemeSelector,ThemeToggle,applyTheme,createTheme,darkTheme,deepMergeThemes,defaultTheme,defaultThemes,lightTheme,mergeTheme,mergeThemeColors,mergeThemes,themes,useTheme,useThemeToggle});
//# sourceMappingURL=index.js.map