@radix-ui/themes/dist/esm/components/theme.js

[](https://radix-ui.com/themes)

"use client";import*as e from"react";import E from"classnames";import*as G from"@radix-ui/react-tooltip";import{DirectionProvider as D}from"@radix-ui/react-direction";import{Slot as w}from"@radix-ui/react-slot";import{getMatchingGrayColor as N}from"../helpers/get-matching-gray-color.js";import{themePropDefs as o}from"./theme.props.js";const d=()=>{},T=e.createContext(void 0);function H(){const a=e.useContext(T);if(a===void 0)throw new Error("`useThemeContext` must be used within a `Theme`");return a}const I=e.forwardRef((a,s)=>e.useContext(T)===void 0?e.createElement(G.Provider,{delayDuration:200},e.createElement(D,{dir:"ltr"},e.createElement(R,{...a,ref:s}))):e.createElement(A,{...a,ref:s}));I.displayName="Theme";const R=e.forwardRef((a,s)=>{const{appearance:r=o.appearance.default,accentColor:c=o.accentColor.default,grayColor:l=o.grayColor.default,panelBackground:p=o.panelBackground.default,radius:n=o.radius.default,scaling:t=o.scaling.default,hasBackground:m=o.hasBackground.default,...u}=a,[h,i]=e.useState(r);e.useEffect(()=>i(r),[r]);const[y,g]=e.useState(c);e.useEffect(()=>g(c),[c]);const[v,C]=e.useState(l);e.useEffect(()=>C(l),[l]);const[k,f]=e.useState(p);e.useEffect(()=>f(p),[p]);const[B,x]=e.useState(n);e.useEffect(()=>x(n),[n]);const[P,b]=e.useState(t);return e.useEffect(()=>b(t),[t]),e.createElement(A,{...u,ref:s,isRoot:!0,hasBackground:m,appearance:h,accentColor:y,grayColor:v,panelBackground:k,radius:B,scaling:P,onAppearanceChange:i,onAccentColorChange:g,onGrayColorChange:C,onPanelBackgroundChange:f,onRadiusChange:x,onScalingChange:b})});R.displayName="ThemeRoot";const A=e.forwardRef((a,s)=>{const r=e.useContext(T),{asChild:c,isRoot:l,hasBackground:p,appearance:n=r?.appearance??o.appearance.default,accentColor:t=r?.accentColor??o.accentColor.default,grayColor:m=r?.resolvedGrayColor??o.grayColor.default,panelBackground:u=r?.panelBackground??o.panelBackground.default,radius:h=r?.radius??o.radius.default,scaling:i=r?.scaling??o.scaling.default,onAppearanceChange:y=d,onAccentColorChange:g=d,onGrayColorChange:v=d,onPanelBackgroundChange:C=d,onRadiusChange:k=d,onScalingChange:f=d,...B}=a,x=c?w:"div",P=m==="auto"?N(t):m,b=a.appearance==="light"||a.appearance==="dark",S=p===void 0?l||b:p;return e.createElement(T.Provider,{value:e.useMemo(()=>({appearance:n,accentColor:t,grayColor:m,resolvedGrayColor:P,panelBackground:u,radius:h,scaling:i,onAppearanceChange:y,onAccentColorChange:g,onGrayColorChange:v,onPanelBackgroundChange:C,onRadiusChange:k,onScalingChange:f}),[n,t,m,P,u,h,i,y,g,v,C,k,f])},e.createElement(x,{"data-is-root-theme":l?"true":"false","data-accent-color":t,"data-gray-color":P,"data-has-background":S?"true":"false","data-panel-background":u,"data-radius":h,"data-scaling":i,ref:s,...B,className:E("radix-themes",{light:n==="light",dark:n==="dark"},B.className)}))});A.displayName="ThemeImpl";export{I as Theme,T as ThemeContext,H as useThemeContext};
//# sourceMappingURL=theme.js.map