@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 O=Object.create;var M=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var _=(e,a)=>{for(var n in a)M(e,n,{get:a[n],enumerable:!0})},w=(e,a,n,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of X(a))!Z.call(e,i)&&i!==n&&M(e,i,{get:()=>a[i],enumerable:!(c=U(a,i))||c.enumerable});return e};var j=(e,a,n)=>(n=e!=null?O(Y(e)):{},w(a||!e||!e.__esModule?M(n,"default",{value:e,enumerable:!0}):n,e)),K=e=>w(M({},"__esModule",{value:!0}),e);var ee={};_(ee,{DensitySelector:()=>Q,ThemeProvider:()=>L,ThemeSelector:()=>W,ThemeToggle:()=>$,default:()=>L,useTheme:()=>b});module.exports=K(ee);var m=require("react"),re=require("@asafarim/design-tokens/css/index.css"),A=require("react/jsx-runtime"),E=(0,m.createContext)(void 0),L=({children:e,defaultMode:a="auto",defaultDensity:n="default",defaultDirection:c="ltr",storageKey:i="asafarim-theme",enableTransitions:u=!0,persistMode:g=!0,persistDensity:s=!1,persistDirection:t=!1})=>{let o=(r,p)=>{if(typeof window>"u")return p;try{return localStorage.getItem(`${i}-${r}`)||p}catch{return p}},h=(r,p,P)=>{if(!(!P||typeof window>"u"))try{localStorage.setItem(`${i}-${r}`,p)}catch(J){console.warn(`Failed to save ${r} to localStorage:`,J)}},[d,k]=(0,m.useState)(()=>g?o("mode",a):a),[y,z]=(0,m.useState)(()=>s?o("density",n):n),[C,R]=(0,m.useState)(()=>t?o("direction",c):c),[x,l]=(0,m.useState)(!1),T=d==="auto"?x?"dark":"light":d,D=r=>{k(r),h("mode",r,g)},B=r=>{z(r),h("density",r,s)},q=r=>{R(r),h("direction",r,t)},G=()=>{D(d==="auto"?x?"light":"dark":d==="light"?"dark":"light")};(0,m.useEffect)(()=>{let r=window.matchMedia("(prefers-color-scheme: dark)");l(r.matches);let p=P=>{l(P.matches)};return r.addEventListener("change",p),()=>r.removeEventListener("change",p)},[]),(0,m.useEffect)(()=>{let r=document.documentElement;return u&&r.style.setProperty("transition","background-color var(--asm-motion-duration-normal) var(--asm-motion-easing-standard), color var(--asm-motion-duration-normal) var(--asm-motion-easing-standard)"),r.setAttribute("data-theme",T),y!=="default"?r.setAttribute("data-density",y):r.removeAttribute("data-density"),r.setAttribute("dir",C),()=>{u&&r.style.removeProperty("transition")}},[T,y,C,u]);let H={mode:d,setMode:D,toggleMode:G,density:y,setDensity:B,direction:C,setDirection:q,isDark:T==="dark",isLight:T==="light",isAuto:d==="auto",systemPrefersDark:x,resolvedMode:T};return(0,A.jsx)(E.Provider,{value:H,children:e})},V=()=>{let e=(0,m.useContext)(E);if(e===void 0)throw new Error("useThemeContext must be used within a ThemeProvider");return e};function b(){return V()}var F=j(require("react"));var I=require("lucide-react"),v=require("react/jsx-runtime"),$=({className:e="",style:a={},showLabels:n=!1,size:c="md",lightIcon:i=(0,v.jsx)(I.Sun,{}),darkIcon:u=(0,v.jsx)(I.Moon,{}),ariaLabel:g="Toggle theme",variant:s="default"})=>{let{resolvedMode:t,toggleMode:o}=b(),h={sm:"var(--asm-icon-size-sm)",md:"var(--asm-icon-size-md)",lg:"var(--asm-icon-size-lg)"},d={sm:"32px",md:"40px",lg:"48px"},k=l=>F.isValidElement(l)?l:typeof l=="function"?(0,v.jsx)(l,{size:h[c],strokeWidth:1.5,"aria-hidden":"true"}):l,y=()=>k(t==="dark"?u:i),z=()=>t==="dark"?"Dark":"Light",C={borderRadius:"var(--asm-radius-md)",padding:"var(--asm-space-2)",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",gap:"var(--asm-space-2)",fontSize:"var(--asm-font-size-md)",transition:"var(--asm-transition-fade), var(--asm-transition-scale)",border:"none"},R={default:{background:"var(--asm-color-button-secondary-bg)",border:"var(--asm-border-hairline) solid var(--asm-color-border)",color:"var(--asm-color-button-secondary-text)"},outline:{background:"transparent",border:"var(--asm-border-hairline) solid var(--asm-color-border)",color:"var(--asm-color-text)"},ghost:{background:"transparent",color:"var(--asm-color-text)"},link:{background:"transparent",padding:0,color:"var(--asm-color-button-primary-bg)"},circle:{background:"var(--asm-color-button-secondary-bg)",border:"var(--asm-border-hairline) solid var(--asm-color-border)",borderRadius:"var(--asm-radius-full)"},icon:{background:"transparent",padding:0}},x={...C,...R[s]??R.default,...s==="circle"?{width:d[c],height:d[c]}:{},...a};return(0,v.jsxs)("button",{"aria-label":g,type:"button",style:x,onClick:o,className:e,title:g,onMouseEnter:l=>{(s==="ghost"||s==="icon")&&(l.currentTarget.style.background="var(--asm-color-button-ghost-bg-hover)")},onMouseLeave:l=>{(s==="ghost"||s==="icon")&&(l.currentTarget.style.background="transparent")},children:[y(),n&&(0,v.jsx)("span",{style:{fontSize:"var(--asm-font-size-sm)",fontWeight:"var(--asm-font-weight-500)"},children:z()})]})};var S=require("lucide-react"),f=require("react/jsx-runtime"),W=({className:e="",style:a={},variant:n="buttons"})=>{let{mode:c,setMode:i}=b(),u=[{mode:"light",label:"Light",Icon:S.Sun},{mode:"dark",label:"Dark",Icon:S.Moon},{mode:"auto",label:"Auto",Icon:S.Monitor}];if(n==="dropdown"){let t={padding:"var(--asm-space-control-padding-y) var(--asm-space-control-padding-x)",borderRadius:"var(--asm-radius-md)",border:"var(--asm-border-hairline) solid var(--asm-color-input-border)",backgroundColor:"var(--asm-color-input-bg)",color:"var(--asm-color-input-text)",fontSize:"var(--asm-font-size-sm)",fontFamily:"var(--asm-font-family-primary)",cursor:"pointer",transition:"var(--asm-transition-fade)",outline:"none",...a};return(0,f.jsx)("select",{value:c,onChange:o=>i(o.target.value),style:t,className:e,"aria-label":"Select theme mode",onFocus:o=>{o.currentTarget.style.borderColor="var(--asm-color-input-border-focus)",o.currentTarget.style.boxShadow="0 0 0 2px var(--asm-color-focus-ring)"},onBlur:o=>{o.currentTarget.style.borderColor="var(--asm-color-input-border)",o.currentTarget.style.boxShadow="none"},children:u.map(o=>(0,f.jsx)("option",{value:o.mode,children:o.label},o.mode))})}let g={display:"inline-flex",gap:"var(--asm-space-1)",padding:"var(--asm-space-1)",borderRadius:"var(--asm-radius-lg)",backgroundColor:"var(--asm-color-surface-muted)",...a},s=t=>({display:"inline-flex",alignItems:"center",justifyContent:"center",gap:"var(--asm-space-2)",padding:"var(--asm-space-2) var(--asm-space-3)",borderRadius:"var(--asm-radius-md)",border:"none",backgroundColor:t?"var(--asm-color-button-primary-bg)":"transparent",color:t?"var(--asm-color-button-primary-text)":"var(--asm-color-text)",fontSize:"var(--asm-font-size-sm)",fontWeight:"var(--asm-font-weight-500)",cursor:"pointer",transition:"var(--asm-transition-fade), var(--asm-transition-scale)"});return(0,f.jsx)("div",{style:g,className:e,role:"radiogroup","aria-label":"Theme mode selector",children:u.map(t=>{let o=c===t.mode,h=t.Icon;return(0,f.jsxs)("button",{onClick:()=>i(t.mode),style:s(o),role:"radio","aria-checked":o,"aria-label":`${t.label} mode`,onMouseEnter:d=>{o||(d.currentTarget.style.backgroundColor="var(--asm-color-button-ghost-bg-hover)")},onMouseLeave:d=>{o||(d.currentTarget.style.backgroundColor="transparent")},children:[(0,f.jsx)(h,{size:16,strokeWidth:1.5}),(0,f.jsx)("span",{children:t.label})]},t.mode)})})};var N=require("react/jsx-runtime"),Q=({className:e="",style:a={}})=>{let{density:n,setDensity:c}=b(),i=[{mode:"compact",label:"Compact"},{mode:"default",label:"Default"},{mode:"comfortable",label:"Comfortable"}],u={display:"inline-flex",gap:"var(--asm-space-1)",padding:"var(--asm-space-1)",borderRadius:"var(--asm-radius-lg)",backgroundColor:"var(--asm-color-surface-muted)",...a},g=s=>({display:"inline-flex",alignItems:"center",justifyContent:"center",padding:"var(--asm-space-2) var(--asm-space-3)",borderRadius:"var(--asm-radius-md)",border:"none",backgroundColor:s?"var(--asm-color-button-primary-bg)":"transparent",color:s?"var(--asm-color-button-primary-text)":"var(--asm-color-text)",fontSize:"var(--asm-font-size-sm)",fontWeight:"var(--asm-font-weight-500)",cursor:"pointer",transition:"var(--asm-transition-fade)"});return(0,N.jsx)("div",{style:u,className:e,role:"radiogroup","aria-label":"Density selector",children:i.map(s=>{let t=n===s.mode;return(0,N.jsx)("button",{onClick:()=>c(s.mode),style:g(t),role:"radio","aria-checked":t,"aria-label":`${s.label} density`,onMouseEnter:o=>{t||(o.currentTarget.style.backgroundColor="var(--asm-color-button-ghost-bg-hover)")},onMouseLeave:o=>{t||(o.currentTarget.style.backgroundColor="transparent")},children:s.label},s.mode)})})};0&&(module.exports={DensitySelector,ThemeProvider,ThemeSelector,ThemeToggle,useTheme});
//# sourceMappingURL=index.js.map