@kushagradhawan/kookie-ui 0.1.87 → 0.1.89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/theme.d.ts.map +1 -1
- package/dist/cjs/components/theme.js +1 -1
- package/dist/cjs/components/theme.js.map +3 -3
- package/dist/esm/components/theme.d.ts.map +1 -1
- package/dist/esm/components/theme.js +1 -1
- package/dist/esm/components/theme.js.map +3 -3
- package/package.json +2 -2
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/theme.tsx +23 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAIzF,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,KAAK,gBAAgB,GAAG,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1E,KAAK,cAAc,GAAG,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,KAAK,oBAAoB,GAAG,CAAC,OAAO,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClF,KAAK,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,KAAK,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,UAAU,mBAAmB;IAC3B,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,mBAAmB,EAAE,CAAC,WAAW,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACvD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACpD,uBAAuB,EAAE,CAAC,eAAe,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACzE,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3D;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC;IACxB,eAAe,EAAE,oBAAoB,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,eAAe,CAAC;CAC7B;
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAIzF,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,KAAK,gBAAgB,GAAG,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1E,KAAK,cAAc,GAAG,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,KAAK,oBAAoB,GAAG,CAAC,OAAO,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClF,KAAK,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,KAAK,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,UAAU,mBAAmB;IAC3B,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,mBAAmB,EAAE,CAAC,WAAW,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACvD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACpD,uBAAuB,EAAE,CAAC,eAAe,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACzE,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3D;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC;IACxB,eAAe,EAAE,oBAAoB,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,eAAe,CAAC;CAC7B;AAsBD,QAAA,MAAM,YAAY,8CAAgE,CAAC;AAEnF,iBAAS,eAAe,sBAIvB;AAED,UAAU,UAAW,SAAQ,oBAAoB;CAAG;AACpD,QAAA,MAAM,KAAK,mFAaT,CAAC;AAuFH,UAAU,oBACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,EACxD,aAAa;CAAG;AA8GpB,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var q=Object.create;var
|
|
1
|
+
"use strict";"use client";var q=Object.create;var E=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var Q=(e,r)=>{for(var n in r)E(e,n,{get:r[n],enumerable:!0})},N=(e,r,n,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of J(r))!L.call(e,l)&&l!==n&&E(e,l,{get:()=>r[l],enumerable:!(c=z(r,l))||c.enumerable});return e};var H=(e,r,n)=>(n=e!=null?q(K(e)):{},N(r||!e||!e.__esModule?E(n,"default",{value:e,enumerable:!0}):n,e)),X=e=>N(E({},"__esModule",{value:!0}),e);var Z={};Q(Z,{Theme:()=>M,ThemeContext:()=>g,useThemeContext:()=>O});module.exports=X(Z);var a=H(require("react")),W=H(require("classnames")),C=require("radix-ui"),j=require("../helpers/get-matching-gray-color.js"),o=require("./theme.props.js");const t=()=>{},Y={appearance:o.themePropDefs.appearance.default,accentColor:o.themePropDefs.accentColor.default,grayColor:o.themePropDefs.grayColor.default,resolvedGrayColor:o.themePropDefs.grayColor.default,material:o.themePropDefs.material.default,panelBackground:o.themePropDefs.panelBackground.default,radius:o.themePropDefs.radius.default,scaling:o.themePropDefs.scaling.default,fontFamily:o.themePropDefs.fontFamily.default,onAppearanceChange:t,onAccentColorChange:t,onGrayColorChange:t,onMaterialChange:t,onPanelBackgroundChange:t,onRadiusChange:t,onScalingChange:t,onFontFamilyChange:t},g=a.createContext(void 0);function O(){return a.useContext(g)??Y}const M=a.forwardRef((e,r)=>a.useContext(g)===void 0?a.createElement(C.Tooltip.Provider,{delayDuration:200},a.createElement(C.Direction.Provider,{dir:"ltr"},a.createElement(V,{...e,ref:r}))):a.createElement(D,{...e,ref:r}));M.displayName="Theme";const V=a.forwardRef((e,r)=>{const{appearance:n=o.themePropDefs.appearance.default,accentColor:c=o.themePropDefs.accentColor.default,grayColor:l=o.themePropDefs.grayColor.default,material:y=o.themePropDefs.material.default,panelBackground:m=o.themePropDefs.panelBackground.default,radius:i=o.themePropDefs.radius.default,scaling:s=o.themePropDefs.scaling.default,fontFamily:d=o.themePropDefs.fontFamily.default,hasBackground:T=o.themePropDefs.hasBackground.default,...P}=e;a.useEffect(()=>{e.panelBackground!==void 0&&console.warn("Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.")},[e.panelBackground]);const[v,u]=a.useState(n);a.useEffect(()=>u(n),[n]);const[b,k]=a.useState(c);a.useEffect(()=>k(c),[c]);const[A,B]=a.useState(l);a.useEffect(()=>B(l),[l]);const p=y!==o.themePropDefs.material.default?y:m,[h,F]=a.useState(p);a.useEffect(()=>F(p),[p]);const[S,x]=a.useState(m);a.useEffect(()=>x(h),[h]);const[G,f]=a.useState(i);a.useEffect(()=>f(i),[i]);const[I,R]=a.useState(s);a.useEffect(()=>R(s),[s]);const[U,w]=a.useState(d);return a.useEffect(()=>w(d),[d]),a.createElement(D,{...P,ref:r,isRoot:!0,hasBackground:T,appearance:v,accentColor:b,grayColor:A,material:h,panelBackground:S,radius:G,scaling:I,fontFamily:U,onAppearanceChange:u,onAccentColorChange:k,onGrayColorChange:B,onMaterialChange:F,onPanelBackgroundChange:x,onRadiusChange:f,onScalingChange:R,onFontFamilyChange:w})});V.displayName="ThemeRoot";const D=a.forwardRef((e,r)=>{const n=a.useContext(g),{asChild:c,isRoot:l,hasBackground:y,appearance:m=e.appearance??n?.appearance??o.themePropDefs.appearance.default,accentColor:i=e.accentColor??n?.accentColor??o.themePropDefs.accentColor.default,grayColor:s=e.grayColor??n?.resolvedGrayColor??o.themePropDefs.grayColor.default,material:d=e.material??n?.material??o.themePropDefs.material.default,panelBackground:T=e.panelBackground??n?.panelBackground??o.themePropDefs.panelBackground.default,radius:P=e.radius??n?.radius??o.themePropDefs.radius.default,scaling:v=e.scaling??n?.scaling??o.themePropDefs.scaling.default,fontFamily:u=e.fontFamily??n?.fontFamily??o.themePropDefs.fontFamily.default,onAppearanceChange:b=t,onAccentColorChange:k=t,onGrayColorChange:A=t,onMaterialChange:B=t,onPanelBackgroundChange:p=t,onRadiusChange:h=t,onScalingChange:F=t,onFontFamilyChange:S=t,...x}=e,G=c?C.Slot.Root:"div",f=s==="auto"?(0,j.getMatchingGrayColor)(i):s,I=e.appearance==="light"||e.appearance==="dark",R=y===void 0?l||I:y;return a.createElement(g.Provider,{value:a.useMemo(()=>({appearance:m,accentColor:i,grayColor:s,resolvedGrayColor:f,material:d,panelBackground:T,radius:P,scaling:v,fontFamily:u,onAppearanceChange:b,onAccentColorChange:k,onGrayColorChange:A,onMaterialChange:B,onPanelBackgroundChange:p,onRadiusChange:h,onScalingChange:F,onFontFamilyChange:S}),[m,i,s,f,d,T,P,v,u,b,k,A,B,p,h,F,S])},a.createElement(G,{"data-is-root-theme":l?"true":"false","data-accent-color":i,"data-gray-color":f,"data-has-background":R?"true":"false","data-material":d,"data-panel-background":T,"data-radius":P,"data-scaling":v,"data-font-family":u,ref:r,...x,className:(0,W.default)("radix-themes",{light:m==="light",dark:m==="dark"},x.className)}))});D.displayName="ThemeImpl";
|
|
2
2
|
//# sourceMappingURL=theme.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/theme.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';\n\nimport { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';\nimport { themePropDefs } from './theme.props.js';\n\nimport type { ThemeOwnProps } from './theme.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\nconst noop = () => {};\n\ntype ThemeAppearance = (typeof themePropDefs.appearance.values)[number];\ntype ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];\ntype ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];\ntype ThemeMaterial = (typeof themePropDefs.material.values)[number];\ntype ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];\ntype ThemeRadius = (typeof themePropDefs.radius.values)[number];\ntype ThemeScaling = (typeof themePropDefs.scaling.values)[number];\ntype ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];\n\ninterface ThemeChangeHandlers {\n onAppearanceChange: (appearance: ThemeAppearance) => void;\n onAccentColorChange: (accentColor: ThemeAccentColor) => void;\n onGrayColorChange: (grayColor: ThemeGrayColor) => void;\n onMaterialChange: (material: ThemeMaterial) => void;\n onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;\n onRadiusChange: (radius: ThemeRadius) => void;\n onScalingChange: (scaling: ThemeScaling) => void;\n onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n appearance: ThemeAppearance;\n accentColor: ThemeAccentColor;\n grayColor: ThemeGrayColor;\n resolvedGrayColor: ThemeGrayColor;\n material: ThemeMaterial;\n panelBackground: ThemePanelBackground;\n radius: ThemeRadius;\n scaling: ThemeScaling;\n fontFamily: ThemeFontFamily;\n}\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);\n\nfunction useThemeContext() {\n const context = React.useContext(ThemeContext);\n if (context === undefined) {\n throw new Error('`useThemeContext` must be used within a `Theme`');\n }\n return context;\n}\n\ninterface ThemeProps extends ThemeImplPublicProps {}\nconst Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {\n const context = React.useContext(ThemeContext);\n const isRoot = context === undefined;\n if (isRoot) {\n return (\n <TooltipPrimitive.Provider delayDuration={200}>\n <Direction.Provider dir=\"ltr\">\n <ThemeRoot {...props} ref={forwardedRef} />\n </Direction.Provider>\n </TooltipPrimitive.Provider>\n );\n }\n return <ThemeImpl {...props} ref={forwardedRef} />;\n});\nTheme.displayName = 'Theme';\n\nconst ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(\n (props, forwardedRef) => {\n const {\n appearance: appearanceProp = themePropDefs.appearance.default,\n accentColor: accentColorProp = themePropDefs.accentColor.default,\n grayColor: grayColorProp = themePropDefs.grayColor.default,\n material: materialProp = themePropDefs.material.default,\n panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,\n radius: radiusProp = themePropDefs.radius.default,\n scaling: scalingProp = themePropDefs.scaling.default,\n fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,\n hasBackground = themePropDefs.hasBackground.default,\n ...rootProps\n } = props;\n\n // Show deprecation warning for panelBackground when used\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n );\n }\n }, [props.panelBackground]);\n\n const [appearance, setAppearance] = React.useState(appearanceProp);\n React.useEffect(() => setAppearance(appearanceProp), [appearanceProp]);\n\n const [accentColor, setAccentColor] = React.useState(accentColorProp);\n React.useEffect(() => setAccentColor(accentColorProp), [accentColorProp]);\n\n const [grayColor, setGrayColor] = React.useState(grayColorProp);\n React.useEffect(() => setGrayColor(grayColorProp), [grayColorProp]);\n\n // Material takes precedence over panelBackground\n const effectiveMaterial =\n materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;\n const [material, setMaterial] = React.useState(effectiveMaterial);\n React.useEffect(() => setMaterial(effectiveMaterial), [effectiveMaterial]);\n\n // Keep panelBackground in sync with material for backward compatibility\n const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);\n React.useEffect(() => setPanelBackground(material), [material]);\n\n const [radius, setRadius] = React.useState(radiusProp);\n React.useEffect(() => setRadius(radiusProp), [radiusProp]);\n\n const [scaling, setScaling] = React.useState(scalingProp);\n React.useEffect(() => setScaling(scalingProp), [scalingProp]);\n\n const [fontFamily, setFontFamily] = React.useState(fontFamilyProp);\n React.useEffect(() => setFontFamily(fontFamilyProp), [fontFamilyProp]);\n\n return (\n <ThemeImpl\n {...rootProps}\n ref={forwardedRef}\n isRoot\n hasBackground={hasBackground}\n //\n appearance={appearance}\n accentColor={accentColor}\n grayColor={grayColor}\n material={material}\n panelBackground={panelBackground}\n radius={radius}\n scaling={scaling}\n fontFamily={fontFamily}\n //\n onAppearanceChange={setAppearance}\n onAccentColorChange={setAccentColor}\n onGrayColorChange={setGrayColor}\n onMaterialChange={setMaterial}\n onPanelBackgroundChange={setPanelBackground}\n onRadiusChange={setRadius}\n onScalingChange={setScaling}\n onFontFamilyChange={setFontFamily}\n />\n );\n },\n);\nThemeRoot.displayName = 'ThemeRoot';\n\ntype ThemeImplElement = React.ElementRef<'div'>;\ninterface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}\ninterface ThemeImplPublicProps\n extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,\n ThemeOwnProps {}\ninterface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {\n isRoot?: boolean;\n}\nconst ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {\n const context = React.useContext(ThemeContext);\n const {\n asChild,\n isRoot,\n hasBackground: hasBackgroundProp,\n //\n appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,\n accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,\n grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,\n material = props.material ?? context?.material ?? themePropDefs.material.default,\n panelBackground = props.panelBackground ??\n context?.panelBackground ??\n themePropDefs.panelBackground.default,\n radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,\n scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,\n fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,\n //\n onAppearanceChange = noop,\n onAccentColorChange = noop,\n onGrayColorChange = noop,\n onMaterialChange = noop,\n onPanelBackgroundChange = noop,\n onRadiusChange = noop,\n onScalingChange = noop,\n onFontFamilyChange = noop,\n //\n ...themeProps\n } = props;\n const Comp = asChild ? Slot.Root : 'div';\n const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;\n const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';\n const hasBackground =\n hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;\n return (\n <ThemeContext.Provider\n value={React.useMemo(\n () => ({\n appearance,\n accentColor,\n grayColor,\n resolvedGrayColor,\n material,\n panelBackground,\n radius,\n scaling,\n fontFamily,\n //\n onAppearanceChange,\n onAccentColorChange,\n onGrayColorChange,\n onMaterialChange,\n onPanelBackgroundChange,\n onRadiusChange,\n onScalingChange,\n onFontFamilyChange,\n }),\n [\n appearance,\n accentColor,\n grayColor,\n resolvedGrayColor,\n material,\n panelBackground,\n radius,\n scaling,\n fontFamily,\n //\n onAppearanceChange,\n onAccentColorChange,\n onGrayColorChange,\n onMaterialChange,\n onPanelBackgroundChange,\n onRadiusChange,\n onScalingChange,\n onFontFamilyChange,\n ],\n )}\n >\n <Comp\n data-is-root-theme={isRoot ? 'true' : 'false'}\n data-accent-color={accentColor}\n data-gray-color={resolvedGrayColor}\n // for nested `Theme` background\n data-has-background={hasBackground ? 'true' : 'false'}\n data-material={material}\n data-panel-background={panelBackground}\n data-radius={radius}\n data-scaling={scaling}\n data-font-family={fontFamily}\n ref={forwardedRef}\n {...themeProps}\n className={classNames(\n 'radix-themes',\n {\n light: appearance === 'light',\n dark: appearance === 'dark',\n },\n themeProps.className,\n )}\n />\n </ThemeContext.Provider>\n );\n});\nThemeImpl.displayName = 'ThemeImpl';\n\nexport { Theme, ThemeContext, useThemeContext };\nexport type { ThemeProps };\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,iBAAAC,EAAA,oBAAAC,IAAA,eAAAC,EAAAL,GAEA,IAAAM,EAAuB,oBACvBC,EAAuB,yBACvBC,EAA6D,oBAE7DC,EAAqC,iDACrCC,EAA8B,4BAK9B,MAAMC,EAAO,IAAM,CAAC,
|
|
6
|
-
"names": ["theme_exports", "__export", "Theme", "ThemeContext", "useThemeContext", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_get_matching_gray_color", "import_theme_props", "noop", "
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';\n\nimport { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';\nimport { themePropDefs } from './theme.props.js';\n\nimport type { ThemeOwnProps } from './theme.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\nconst noop = () => {};\n\ntype ThemeAppearance = (typeof themePropDefs.appearance.values)[number];\ntype ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];\ntype ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];\ntype ThemeMaterial = (typeof themePropDefs.material.values)[number];\ntype ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];\ntype ThemeRadius = (typeof themePropDefs.radius.values)[number];\ntype ThemeScaling = (typeof themePropDefs.scaling.values)[number];\ntype ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];\n\ninterface ThemeChangeHandlers {\n onAppearanceChange: (appearance: ThemeAppearance) => void;\n onAccentColorChange: (accentColor: ThemeAccentColor) => void;\n onGrayColorChange: (grayColor: ThemeGrayColor) => void;\n onMaterialChange: (material: ThemeMaterial) => void;\n onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;\n onRadiusChange: (radius: ThemeRadius) => void;\n onScalingChange: (scaling: ThemeScaling) => void;\n onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n appearance: ThemeAppearance;\n accentColor: ThemeAccentColor;\n grayColor: ThemeGrayColor;\n resolvedGrayColor: ThemeGrayColor;\n material: ThemeMaterial;\n panelBackground: ThemePanelBackground;\n radius: ThemeRadius;\n scaling: ThemeScaling;\n fontFamily: ThemeFontFamily;\n}\n// Default theme values used when components render outside a Theme provider\nconst defaultThemeContext: ThemeContextValue = {\n appearance: themePropDefs.appearance.default,\n accentColor: themePropDefs.accentColor.default,\n grayColor: themePropDefs.grayColor.default,\n resolvedGrayColor: themePropDefs.grayColor.default,\n material: themePropDefs.material.default,\n panelBackground: themePropDefs.panelBackground.default,\n radius: themePropDefs.radius.default,\n scaling: themePropDefs.scaling.default,\n fontFamily: themePropDefs.fontFamily.default,\n onAppearanceChange: noop,\n onAccentColorChange: noop,\n onGrayColorChange: noop,\n onMaterialChange: noop,\n onPanelBackgroundChange: noop,\n onRadiusChange: noop,\n onScalingChange: noop,\n onFontFamilyChange: noop,\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);\n\nfunction useThemeContext() {\n const context = React.useContext(ThemeContext);\n // Return default context if used outside Theme provider (e.g., during SSR)\n return context ?? defaultThemeContext;\n}\n\ninterface ThemeProps extends ThemeImplPublicProps {}\nconst Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {\n const context = React.useContext(ThemeContext);\n const isRoot = context === undefined;\n if (isRoot) {\n return (\n <TooltipPrimitive.Provider delayDuration={200}>\n <Direction.Provider dir=\"ltr\">\n <ThemeRoot {...props} ref={forwardedRef} />\n </Direction.Provider>\n </TooltipPrimitive.Provider>\n );\n }\n return <ThemeImpl {...props} ref={forwardedRef} />;\n});\nTheme.displayName = 'Theme';\n\nconst ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(\n (props, forwardedRef) => {\n const {\n appearance: appearanceProp = themePropDefs.appearance.default,\n accentColor: accentColorProp = themePropDefs.accentColor.default,\n grayColor: grayColorProp = themePropDefs.grayColor.default,\n material: materialProp = themePropDefs.material.default,\n panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,\n radius: radiusProp = themePropDefs.radius.default,\n scaling: scalingProp = themePropDefs.scaling.default,\n fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,\n hasBackground = themePropDefs.hasBackground.default,\n ...rootProps\n } = props;\n\n // Show deprecation warning for panelBackground when used\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n );\n }\n }, [props.panelBackground]);\n\n const [appearance, setAppearance] = React.useState(appearanceProp);\n React.useEffect(() => setAppearance(appearanceProp), [appearanceProp]);\n\n const [accentColor, setAccentColor] = React.useState(accentColorProp);\n React.useEffect(() => setAccentColor(accentColorProp), [accentColorProp]);\n\n const [grayColor, setGrayColor] = React.useState(grayColorProp);\n React.useEffect(() => setGrayColor(grayColorProp), [grayColorProp]);\n\n // Material takes precedence over panelBackground\n const effectiveMaterial =\n materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;\n const [material, setMaterial] = React.useState(effectiveMaterial);\n React.useEffect(() => setMaterial(effectiveMaterial), [effectiveMaterial]);\n\n // Keep panelBackground in sync with material for backward compatibility\n const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);\n React.useEffect(() => setPanelBackground(material), [material]);\n\n const [radius, setRadius] = React.useState(radiusProp);\n React.useEffect(() => setRadius(radiusProp), [radiusProp]);\n\n const [scaling, setScaling] = React.useState(scalingProp);\n React.useEffect(() => setScaling(scalingProp), [scalingProp]);\n\n const [fontFamily, setFontFamily] = React.useState(fontFamilyProp);\n React.useEffect(() => setFontFamily(fontFamilyProp), [fontFamilyProp]);\n\n return (\n <ThemeImpl\n {...rootProps}\n ref={forwardedRef}\n isRoot\n hasBackground={hasBackground}\n //\n appearance={appearance}\n accentColor={accentColor}\n grayColor={grayColor}\n material={material}\n panelBackground={panelBackground}\n radius={radius}\n scaling={scaling}\n fontFamily={fontFamily}\n //\n onAppearanceChange={setAppearance}\n onAccentColorChange={setAccentColor}\n onGrayColorChange={setGrayColor}\n onMaterialChange={setMaterial}\n onPanelBackgroundChange={setPanelBackground}\n onRadiusChange={setRadius}\n onScalingChange={setScaling}\n onFontFamilyChange={setFontFamily}\n />\n );\n },\n);\nThemeRoot.displayName = 'ThemeRoot';\n\ntype ThemeImplElement = React.ElementRef<'div'>;\ninterface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}\ninterface ThemeImplPublicProps\n extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,\n ThemeOwnProps {}\ninterface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {\n isRoot?: boolean;\n}\nconst ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {\n const context = React.useContext(ThemeContext);\n const {\n asChild,\n isRoot,\n hasBackground: hasBackgroundProp,\n //\n appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,\n accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,\n grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,\n material = props.material ?? context?.material ?? themePropDefs.material.default,\n panelBackground = props.panelBackground ??\n context?.panelBackground ??\n themePropDefs.panelBackground.default,\n radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,\n scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,\n fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,\n //\n onAppearanceChange = noop,\n onAccentColorChange = noop,\n onGrayColorChange = noop,\n onMaterialChange = noop,\n onPanelBackgroundChange = noop,\n onRadiusChange = noop,\n onScalingChange = noop,\n onFontFamilyChange = noop,\n //\n ...themeProps\n } = props;\n const Comp = asChild ? Slot.Root : 'div';\n const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;\n const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';\n const hasBackground =\n hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;\n return (\n <ThemeContext.Provider\n value={React.useMemo(\n () => ({\n appearance,\n accentColor,\n grayColor,\n resolvedGrayColor,\n material,\n panelBackground,\n radius,\n scaling,\n fontFamily,\n //\n onAppearanceChange,\n onAccentColorChange,\n onGrayColorChange,\n onMaterialChange,\n onPanelBackgroundChange,\n onRadiusChange,\n onScalingChange,\n onFontFamilyChange,\n }),\n [\n appearance,\n accentColor,\n grayColor,\n resolvedGrayColor,\n material,\n panelBackground,\n radius,\n scaling,\n fontFamily,\n //\n onAppearanceChange,\n onAccentColorChange,\n onGrayColorChange,\n onMaterialChange,\n onPanelBackgroundChange,\n onRadiusChange,\n onScalingChange,\n onFontFamilyChange,\n ],\n )}\n >\n <Comp\n data-is-root-theme={isRoot ? 'true' : 'false'}\n data-accent-color={accentColor}\n data-gray-color={resolvedGrayColor}\n // for nested `Theme` background\n data-has-background={hasBackground ? 'true' : 'false'}\n data-material={material}\n data-panel-background={panelBackground}\n data-radius={radius}\n data-scaling={scaling}\n data-font-family={fontFamily}\n ref={forwardedRef}\n {...themeProps}\n className={classNames(\n 'radix-themes',\n {\n light: appearance === 'light',\n dark: appearance === 'dark',\n },\n themeProps.className,\n )}\n />\n </ThemeContext.Provider>\n );\n});\nThemeImpl.displayName = 'ThemeImpl';\n\nexport { Theme, ThemeContext, useThemeContext };\nexport type { ThemeProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["theme_exports", "__export", "Theme", "ThemeContext", "useThemeContext", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_get_matching_gray_color", "import_theme_props", "noop", "defaultThemeContext", "props", "forwardedRef", "TooltipPrimitive", "ThemeRoot", "ThemeImpl", "appearanceProp", "accentColorProp", "grayColorProp", "materialProp", "panelBackgroundProp", "radiusProp", "scalingProp", "fontFamilyProp", "hasBackground", "rootProps", "appearance", "setAppearance", "accentColor", "setAccentColor", "grayColor", "setGrayColor", "effectiveMaterial", "material", "setMaterial", "panelBackground", "setPanelBackground", "radius", "setRadius", "scaling", "setScaling", "fontFamily", "setFontFamily", "context", "asChild", "isRoot", "hasBackgroundProp", "onAppearanceChange", "onAccentColorChange", "onGrayColorChange", "onMaterialChange", "onPanelBackgroundChange", "onRadiusChange", "onScalingChange", "onFontFamilyChange", "themeProps", "Comp", "resolvedGrayColor", "isExplicitAppearance", "classNames"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAIzF,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,KAAK,gBAAgB,GAAG,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1E,KAAK,cAAc,GAAG,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,KAAK,oBAAoB,GAAG,CAAC,OAAO,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClF,KAAK,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,KAAK,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,UAAU,mBAAmB;IAC3B,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,mBAAmB,EAAE,CAAC,WAAW,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACvD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACpD,uBAAuB,EAAE,CAAC,eAAe,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACzE,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3D;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC;IACxB,eAAe,EAAE,oBAAoB,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,eAAe,CAAC;CAC7B;
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAIzF,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACxE,KAAK,gBAAgB,GAAG,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1E,KAAK,cAAc,GAAG,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,KAAK,oBAAoB,GAAG,CAAC,OAAO,aAAa,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClF,KAAK,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,KAAK,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,KAAK,eAAe,GAAG,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAExE,UAAU,mBAAmB;IAC3B,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,mBAAmB,EAAE,CAAC,WAAW,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACvD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACpD,uBAAuB,EAAE,CAAC,eAAe,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACzE,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3D;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,iBAAiB,EAAE,cAAc,CAAC;IAClC,QAAQ,EAAE,aAAa,CAAC;IACxB,eAAe,EAAE,oBAAoB,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,eAAe,CAAC;CAC7B;AAsBD,QAAA,MAAM,YAAY,8CAAgE,CAAC;AAEnF,iBAAS,eAAe,sBAIvB;AAED,UAAU,UAAW,SAAQ,oBAAoB;CAAG;AACpD,QAAA,MAAM,KAAK,mFAaT,CAAC;AAuFH,UAAU,oBACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,EACxD,aAAa;CAAG;AA8GpB,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import*as e from"react";import N from"classnames";import{Direction as H,Slot as
|
|
1
|
+
"use client";import*as e from"react";import N from"classnames";import{Direction as H,Slot as V,Tooltip as W}from"radix-ui";import{getMatchingGrayColor as j}from"../helpers/get-matching-gray-color.js";import{themePropDefs as a}from"./theme.props.js";const n=()=>{},O={appearance:a.appearance.default,accentColor:a.accentColor.default,grayColor:a.grayColor.default,resolvedGrayColor:a.grayColor.default,material:a.material.default,panelBackground:a.panelBackground.default,radius:a.radius.default,scaling:a.scaling.default,fontFamily:a.fontFamily.default,onAppearanceChange:n,onAccentColorChange:n,onGrayColorChange:n,onMaterialChange:n,onPanelBackgroundChange:n,onRadiusChange:n,onScalingChange:n,onFontFamilyChange:n},F=e.createContext(void 0);function U(){return e.useContext(F)??O}const D=e.forwardRef((o,s)=>e.useContext(F)===void 0?e.createElement(W.Provider,{delayDuration:200},e.createElement(H.Provider,{dir:"ltr"},e.createElement(M,{...o,ref:s}))):e.createElement(G,{...o,ref:s}));D.displayName="Theme";const M=e.forwardRef((o,s)=>{const{appearance:r=a.appearance.default,accentColor:m=a.accentColor.default,grayColor:d=a.grayColor.default,material:g=a.material.default,panelBackground:c=a.panelBackground.default,radius:t=a.radius.default,scaling:l=a.scaling.default,fontFamily:i=a.fontFamily.default,hasBackground:C=a.hasBackground.default,...y}=o;e.useEffect(()=>{o.panelBackground!==void 0&&console.warn("Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.")},[o.panelBackground]);const[T,u]=e.useState(r);e.useEffect(()=>u(r),[r]);const[x,P]=e.useState(m);e.useEffect(()=>P(m),[m]);const[b,v]=e.useState(d);e.useEffect(()=>v(d),[d]);const p=g!==a.material.default?g:c,[h,k]=e.useState(p);e.useEffect(()=>k(p),[p]);const[A,B]=e.useState(c);e.useEffect(()=>B(h),[h]);const[R,f]=e.useState(t);e.useEffect(()=>f(t),[t]);const[E,S]=e.useState(l);e.useEffect(()=>S(l),[l]);const[w,I]=e.useState(i);return e.useEffect(()=>I(i),[i]),e.createElement(G,{...y,ref:s,isRoot:!0,hasBackground:C,appearance:T,accentColor:x,grayColor:b,material:h,panelBackground:A,radius:R,scaling:E,fontFamily:w,onAppearanceChange:u,onAccentColorChange:P,onGrayColorChange:v,onMaterialChange:k,onPanelBackgroundChange:B,onRadiusChange:f,onScalingChange:S,onFontFamilyChange:I})});M.displayName="ThemeRoot";const G=e.forwardRef((o,s)=>{const r=e.useContext(F),{asChild:m,isRoot:d,hasBackground:g,appearance:c=o.appearance??r?.appearance??a.appearance.default,accentColor:t=o.accentColor??r?.accentColor??a.accentColor.default,grayColor:l=o.grayColor??r?.resolvedGrayColor??a.grayColor.default,material:i=o.material??r?.material??a.material.default,panelBackground:C=o.panelBackground??r?.panelBackground??a.panelBackground.default,radius:y=o.radius??r?.radius??a.radius.default,scaling:T=o.scaling??r?.scaling??a.scaling.default,fontFamily:u=o.fontFamily??r?.fontFamily??a.fontFamily.default,onAppearanceChange:x=n,onAccentColorChange:P=n,onGrayColorChange:b=n,onMaterialChange:v=n,onPanelBackgroundChange:p=n,onRadiusChange:h=n,onScalingChange:k=n,onFontFamilyChange:A=n,...B}=o,R=m?V.Root:"div",f=l==="auto"?j(t):l,E=o.appearance==="light"||o.appearance==="dark",S=g===void 0?d||E:g;return e.createElement(F.Provider,{value:e.useMemo(()=>({appearance:c,accentColor:t,grayColor:l,resolvedGrayColor:f,material:i,panelBackground:C,radius:y,scaling:T,fontFamily:u,onAppearanceChange:x,onAccentColorChange:P,onGrayColorChange:b,onMaterialChange:v,onPanelBackgroundChange:p,onRadiusChange:h,onScalingChange:k,onFontFamilyChange:A}),[c,t,l,f,i,C,y,T,u,x,P,b,v,p,h,k,A])},e.createElement(R,{"data-is-root-theme":d?"true":"false","data-accent-color":t,"data-gray-color":f,"data-has-background":S?"true":"false","data-material":i,"data-panel-background":C,"data-radius":y,"data-scaling":T,"data-font-family":u,ref:s,...B,className:N("radix-themes",{light:c==="light",dark:c==="dark"},B.className)}))});G.displayName="ThemeImpl";export{D as Theme,F as ThemeContext,U as useThemeContext};
|
|
2
2
|
//# sourceMappingURL=theme.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/theme.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';\n\nimport { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';\nimport { themePropDefs } from './theme.props.js';\n\nimport type { ThemeOwnProps } from './theme.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\nconst noop = () => {};\n\ntype ThemeAppearance = (typeof themePropDefs.appearance.values)[number];\ntype ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];\ntype ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];\ntype ThemeMaterial = (typeof themePropDefs.material.values)[number];\ntype ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];\ntype ThemeRadius = (typeof themePropDefs.radius.values)[number];\ntype ThemeScaling = (typeof themePropDefs.scaling.values)[number];\ntype ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];\n\ninterface ThemeChangeHandlers {\n onAppearanceChange: (appearance: ThemeAppearance) => void;\n onAccentColorChange: (accentColor: ThemeAccentColor) => void;\n onGrayColorChange: (grayColor: ThemeGrayColor) => void;\n onMaterialChange: (material: ThemeMaterial) => void;\n onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;\n onRadiusChange: (radius: ThemeRadius) => void;\n onScalingChange: (scaling: ThemeScaling) => void;\n onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n appearance: ThemeAppearance;\n accentColor: ThemeAccentColor;\n grayColor: ThemeGrayColor;\n resolvedGrayColor: ThemeGrayColor;\n material: ThemeMaterial;\n panelBackground: ThemePanelBackground;\n radius: ThemeRadius;\n scaling: ThemeScaling;\n fontFamily: ThemeFontFamily;\n}\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);\n\nfunction useThemeContext() {\n const context = React.useContext(ThemeContext);\n if (context === undefined) {\n throw new Error('`useThemeContext` must be used within a `Theme`');\n }\n return context;\n}\n\ninterface ThemeProps extends ThemeImplPublicProps {}\nconst Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {\n const context = React.useContext(ThemeContext);\n const isRoot = context === undefined;\n if (isRoot) {\n return (\n <TooltipPrimitive.Provider delayDuration={200}>\n <Direction.Provider dir=\"ltr\">\n <ThemeRoot {...props} ref={forwardedRef} />\n </Direction.Provider>\n </TooltipPrimitive.Provider>\n );\n }\n return <ThemeImpl {...props} ref={forwardedRef} />;\n});\nTheme.displayName = 'Theme';\n\nconst ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(\n (props, forwardedRef) => {\n const {\n appearance: appearanceProp = themePropDefs.appearance.default,\n accentColor: accentColorProp = themePropDefs.accentColor.default,\n grayColor: grayColorProp = themePropDefs.grayColor.default,\n material: materialProp = themePropDefs.material.default,\n panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,\n radius: radiusProp = themePropDefs.radius.default,\n scaling: scalingProp = themePropDefs.scaling.default,\n fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,\n hasBackground = themePropDefs.hasBackground.default,\n ...rootProps\n } = props;\n\n // Show deprecation warning for panelBackground when used\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n );\n }\n }, [props.panelBackground]);\n\n const [appearance, setAppearance] = React.useState(appearanceProp);\n React.useEffect(() => setAppearance(appearanceProp), [appearanceProp]);\n\n const [accentColor, setAccentColor] = React.useState(accentColorProp);\n React.useEffect(() => setAccentColor(accentColorProp), [accentColorProp]);\n\n const [grayColor, setGrayColor] = React.useState(grayColorProp);\n React.useEffect(() => setGrayColor(grayColorProp), [grayColorProp]);\n\n // Material takes precedence over panelBackground\n const effectiveMaterial =\n materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;\n const [material, setMaterial] = React.useState(effectiveMaterial);\n React.useEffect(() => setMaterial(effectiveMaterial), [effectiveMaterial]);\n\n // Keep panelBackground in sync with material for backward compatibility\n const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);\n React.useEffect(() => setPanelBackground(material), [material]);\n\n const [radius, setRadius] = React.useState(radiusProp);\n React.useEffect(() => setRadius(radiusProp), [radiusProp]);\n\n const [scaling, setScaling] = React.useState(scalingProp);\n React.useEffect(() => setScaling(scalingProp), [scalingProp]);\n\n const [fontFamily, setFontFamily] = React.useState(fontFamilyProp);\n React.useEffect(() => setFontFamily(fontFamilyProp), [fontFamilyProp]);\n\n return (\n <ThemeImpl\n {...rootProps}\n ref={forwardedRef}\n isRoot\n hasBackground={hasBackground}\n //\n appearance={appearance}\n accentColor={accentColor}\n grayColor={grayColor}\n material={material}\n panelBackground={panelBackground}\n radius={radius}\n scaling={scaling}\n fontFamily={fontFamily}\n //\n onAppearanceChange={setAppearance}\n onAccentColorChange={setAccentColor}\n onGrayColorChange={setGrayColor}\n onMaterialChange={setMaterial}\n onPanelBackgroundChange={setPanelBackground}\n onRadiusChange={setRadius}\n onScalingChange={setScaling}\n onFontFamilyChange={setFontFamily}\n />\n );\n },\n);\nThemeRoot.displayName = 'ThemeRoot';\n\ntype ThemeImplElement = React.ElementRef<'div'>;\ninterface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}\ninterface ThemeImplPublicProps\n extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,\n ThemeOwnProps {}\ninterface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {\n isRoot?: boolean;\n}\nconst ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {\n const context = React.useContext(ThemeContext);\n const {\n asChild,\n isRoot,\n hasBackground: hasBackgroundProp,\n //\n appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,\n accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,\n grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,\n material = props.material ?? context?.material ?? themePropDefs.material.default,\n panelBackground = props.panelBackground ??\n context?.panelBackground ??\n themePropDefs.panelBackground.default,\n radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,\n scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,\n fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,\n //\n onAppearanceChange = noop,\n onAccentColorChange = noop,\n onGrayColorChange = noop,\n onMaterialChange = noop,\n onPanelBackgroundChange = noop,\n onRadiusChange = noop,\n onScalingChange = noop,\n onFontFamilyChange = noop,\n //\n ...themeProps\n } = props;\n const Comp = asChild ? Slot.Root : 'div';\n const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;\n const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';\n const hasBackground =\n hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;\n return (\n <ThemeContext.Provider\n value={React.useMemo(\n () => ({\n appearance,\n accentColor,\n grayColor,\n resolvedGrayColor,\n material,\n panelBackground,\n radius,\n scaling,\n fontFamily,\n //\n onAppearanceChange,\n onAccentColorChange,\n onGrayColorChange,\n onMaterialChange,\n onPanelBackgroundChange,\n onRadiusChange,\n onScalingChange,\n onFontFamilyChange,\n }),\n [\n appearance,\n accentColor,\n grayColor,\n resolvedGrayColor,\n material,\n panelBackground,\n radius,\n scaling,\n fontFamily,\n //\n onAppearanceChange,\n onAccentColorChange,\n onGrayColorChange,\n onMaterialChange,\n onPanelBackgroundChange,\n onRadiusChange,\n onScalingChange,\n onFontFamilyChange,\n ],\n )}\n >\n <Comp\n data-is-root-theme={isRoot ? 'true' : 'false'}\n data-accent-color={accentColor}\n data-gray-color={resolvedGrayColor}\n // for nested `Theme` background\n data-has-background={hasBackground ? 'true' : 'false'}\n data-material={material}\n data-panel-background={panelBackground}\n data-radius={radius}\n data-scaling={scaling}\n data-font-family={fontFamily}\n ref={forwardedRef}\n {...themeProps}\n className={classNames(\n 'radix-themes',\n {\n light: appearance === 'light',\n dark: appearance === 'dark',\n },\n themeProps.className,\n )}\n />\n </ThemeContext.Provider>\n );\n});\nThemeImpl.displayName = 'ThemeImpl';\n\nexport { Theme, ThemeContext, useThemeContext };\nexport type { ThemeProps };\n"],
|
|
5
|
-
"mappings": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,aAAAC,EAAW,QAAAC,EAAM,WAAWC,MAAwB,WAE7D,OAAS,wBAAAC,MAA4B,wCACrC,OAAS,iBAAAC,MAAqB,mBAK9B,MAAMC,EAAO,IAAM,CAAC,
|
|
6
|
-
"names": ["React", "classNames", "Direction", "Slot", "TooltipPrimitive", "getMatchingGrayColor", "themePropDefs", "noop", "
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';\n\nimport { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';\nimport { themePropDefs } from './theme.props.js';\n\nimport type { ThemeOwnProps } from './theme.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\nconst noop = () => {};\n\ntype ThemeAppearance = (typeof themePropDefs.appearance.values)[number];\ntype ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];\ntype ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];\ntype ThemeMaterial = (typeof themePropDefs.material.values)[number];\ntype ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];\ntype ThemeRadius = (typeof themePropDefs.radius.values)[number];\ntype ThemeScaling = (typeof themePropDefs.scaling.values)[number];\ntype ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];\n\ninterface ThemeChangeHandlers {\n onAppearanceChange: (appearance: ThemeAppearance) => void;\n onAccentColorChange: (accentColor: ThemeAccentColor) => void;\n onGrayColorChange: (grayColor: ThemeGrayColor) => void;\n onMaterialChange: (material: ThemeMaterial) => void;\n onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;\n onRadiusChange: (radius: ThemeRadius) => void;\n onScalingChange: (scaling: ThemeScaling) => void;\n onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n appearance: ThemeAppearance;\n accentColor: ThemeAccentColor;\n grayColor: ThemeGrayColor;\n resolvedGrayColor: ThemeGrayColor;\n material: ThemeMaterial;\n panelBackground: ThemePanelBackground;\n radius: ThemeRadius;\n scaling: ThemeScaling;\n fontFamily: ThemeFontFamily;\n}\n// Default theme values used when components render outside a Theme provider\nconst defaultThemeContext: ThemeContextValue = {\n appearance: themePropDefs.appearance.default,\n accentColor: themePropDefs.accentColor.default,\n grayColor: themePropDefs.grayColor.default,\n resolvedGrayColor: themePropDefs.grayColor.default,\n material: themePropDefs.material.default,\n panelBackground: themePropDefs.panelBackground.default,\n radius: themePropDefs.radius.default,\n scaling: themePropDefs.scaling.default,\n fontFamily: themePropDefs.fontFamily.default,\n onAppearanceChange: noop,\n onAccentColorChange: noop,\n onGrayColorChange: noop,\n onMaterialChange: noop,\n onPanelBackgroundChange: noop,\n onRadiusChange: noop,\n onScalingChange: noop,\n onFontFamilyChange: noop,\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);\n\nfunction useThemeContext() {\n const context = React.useContext(ThemeContext);\n // Return default context if used outside Theme provider (e.g., during SSR)\n return context ?? defaultThemeContext;\n}\n\ninterface ThemeProps extends ThemeImplPublicProps {}\nconst Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {\n const context = React.useContext(ThemeContext);\n const isRoot = context === undefined;\n if (isRoot) {\n return (\n <TooltipPrimitive.Provider delayDuration={200}>\n <Direction.Provider dir=\"ltr\">\n <ThemeRoot {...props} ref={forwardedRef} />\n </Direction.Provider>\n </TooltipPrimitive.Provider>\n );\n }\n return <ThemeImpl {...props} ref={forwardedRef} />;\n});\nTheme.displayName = 'Theme';\n\nconst ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(\n (props, forwardedRef) => {\n const {\n appearance: appearanceProp = themePropDefs.appearance.default,\n accentColor: accentColorProp = themePropDefs.accentColor.default,\n grayColor: grayColorProp = themePropDefs.grayColor.default,\n material: materialProp = themePropDefs.material.default,\n panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,\n radius: radiusProp = themePropDefs.radius.default,\n scaling: scalingProp = themePropDefs.scaling.default,\n fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,\n hasBackground = themePropDefs.hasBackground.default,\n ...rootProps\n } = props;\n\n // Show deprecation warning for panelBackground when used\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n );\n }\n }, [props.panelBackground]);\n\n const [appearance, setAppearance] = React.useState(appearanceProp);\n React.useEffect(() => setAppearance(appearanceProp), [appearanceProp]);\n\n const [accentColor, setAccentColor] = React.useState(accentColorProp);\n React.useEffect(() => setAccentColor(accentColorProp), [accentColorProp]);\n\n const [grayColor, setGrayColor] = React.useState(grayColorProp);\n React.useEffect(() => setGrayColor(grayColorProp), [grayColorProp]);\n\n // Material takes precedence over panelBackground\n const effectiveMaterial =\n materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;\n const [material, setMaterial] = React.useState(effectiveMaterial);\n React.useEffect(() => setMaterial(effectiveMaterial), [effectiveMaterial]);\n\n // Keep panelBackground in sync with material for backward compatibility\n const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);\n React.useEffect(() => setPanelBackground(material), [material]);\n\n const [radius, setRadius] = React.useState(radiusProp);\n React.useEffect(() => setRadius(radiusProp), [radiusProp]);\n\n const [scaling, setScaling] = React.useState(scalingProp);\n React.useEffect(() => setScaling(scalingProp), [scalingProp]);\n\n const [fontFamily, setFontFamily] = React.useState(fontFamilyProp);\n React.useEffect(() => setFontFamily(fontFamilyProp), [fontFamilyProp]);\n\n return (\n <ThemeImpl\n {...rootProps}\n ref={forwardedRef}\n isRoot\n hasBackground={hasBackground}\n //\n appearance={appearance}\n accentColor={accentColor}\n grayColor={grayColor}\n material={material}\n panelBackground={panelBackground}\n radius={radius}\n scaling={scaling}\n fontFamily={fontFamily}\n //\n onAppearanceChange={setAppearance}\n onAccentColorChange={setAccentColor}\n onGrayColorChange={setGrayColor}\n onMaterialChange={setMaterial}\n onPanelBackgroundChange={setPanelBackground}\n onRadiusChange={setRadius}\n onScalingChange={setScaling}\n onFontFamilyChange={setFontFamily}\n />\n );\n },\n);\nThemeRoot.displayName = 'ThemeRoot';\n\ntype ThemeImplElement = React.ElementRef<'div'>;\ninterface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}\ninterface ThemeImplPublicProps\n extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,\n ThemeOwnProps {}\ninterface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {\n isRoot?: boolean;\n}\nconst ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {\n const context = React.useContext(ThemeContext);\n const {\n asChild,\n isRoot,\n hasBackground: hasBackgroundProp,\n //\n appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,\n accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,\n grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,\n material = props.material ?? context?.material ?? themePropDefs.material.default,\n panelBackground = props.panelBackground ??\n context?.panelBackground ??\n themePropDefs.panelBackground.default,\n radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,\n scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,\n fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,\n //\n onAppearanceChange = noop,\n onAccentColorChange = noop,\n onGrayColorChange = noop,\n onMaterialChange = noop,\n onPanelBackgroundChange = noop,\n onRadiusChange = noop,\n onScalingChange = noop,\n onFontFamilyChange = noop,\n //\n ...themeProps\n } = props;\n const Comp = asChild ? Slot.Root : 'div';\n const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;\n const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';\n const hasBackground =\n hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;\n return (\n <ThemeContext.Provider\n value={React.useMemo(\n () => ({\n appearance,\n accentColor,\n grayColor,\n resolvedGrayColor,\n material,\n panelBackground,\n radius,\n scaling,\n fontFamily,\n //\n onAppearanceChange,\n onAccentColorChange,\n onGrayColorChange,\n onMaterialChange,\n onPanelBackgroundChange,\n onRadiusChange,\n onScalingChange,\n onFontFamilyChange,\n }),\n [\n appearance,\n accentColor,\n grayColor,\n resolvedGrayColor,\n material,\n panelBackground,\n radius,\n scaling,\n fontFamily,\n //\n onAppearanceChange,\n onAccentColorChange,\n onGrayColorChange,\n onMaterialChange,\n onPanelBackgroundChange,\n onRadiusChange,\n onScalingChange,\n onFontFamilyChange,\n ],\n )}\n >\n <Comp\n data-is-root-theme={isRoot ? 'true' : 'false'}\n data-accent-color={accentColor}\n data-gray-color={resolvedGrayColor}\n // for nested `Theme` background\n data-has-background={hasBackground ? 'true' : 'false'}\n data-material={material}\n data-panel-background={panelBackground}\n data-radius={radius}\n data-scaling={scaling}\n data-font-family={fontFamily}\n ref={forwardedRef}\n {...themeProps}\n className={classNames(\n 'radix-themes',\n {\n light: appearance === 'light',\n dark: appearance === 'dark',\n },\n themeProps.className,\n )}\n />\n </ThemeContext.Provider>\n );\n});\nThemeImpl.displayName = 'ThemeImpl';\n\nexport { Theme, ThemeContext, useThemeContext };\nexport type { ThemeProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "classNames", "Direction", "Slot", "TooltipPrimitive", "getMatchingGrayColor", "themePropDefs", "noop", "defaultThemeContext", "ThemeContext", "useThemeContext", "Theme", "props", "forwardedRef", "ThemeRoot", "ThemeImpl", "appearanceProp", "accentColorProp", "grayColorProp", "materialProp", "panelBackgroundProp", "radiusProp", "scalingProp", "fontFamilyProp", "hasBackground", "rootProps", "appearance", "setAppearance", "accentColor", "setAccentColor", "grayColor", "setGrayColor", "effectiveMaterial", "material", "setMaterial", "panelBackground", "setPanelBackground", "radius", "setRadius", "scaling", "setScaling", "fontFamily", "setFontFamily", "context", "asChild", "isRoot", "hasBackgroundProp", "onAppearanceChange", "onAccentColorChange", "onGrayColorChange", "onMaterialChange", "onPanelBackgroundChange", "onRadiusChange", "onScalingChange", "onFontFamilyChange", "themeProps", "Comp", "resolvedGrayColor", "isExplicitAppearance"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kushagradhawan/kookie-ui",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive
|
|
3
|
+
"version": "0.1.89",
|
|
4
|
+
"description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"ui",
|
package/schemas/base-button.json
CHANGED
|
@@ -279,6 +279,6 @@
|
|
|
279
279
|
"title": "Base-button Component Props",
|
|
280
280
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
281
281
|
"version": "1.0.0",
|
|
282
|
-
"generatedAt": "2026-01-
|
|
282
|
+
"generatedAt": "2026-01-01T11:01:58.044Z",
|
|
283
283
|
"source": "Zod schema"
|
|
284
284
|
}
|
package/schemas/button.json
CHANGED
|
@@ -530,6 +530,6 @@
|
|
|
530
530
|
"title": "Button Component Props",
|
|
531
531
|
"description": "Props schema for the button component in Kookie UI",
|
|
532
532
|
"version": "1.0.0",
|
|
533
|
-
"generatedAt": "2026-01-
|
|
533
|
+
"generatedAt": "2026-01-01T11:01:58.050Z",
|
|
534
534
|
"source": "Zod schema"
|
|
535
535
|
}
|
package/schemas/icon-button.json
CHANGED
|
@@ -313,6 +313,6 @@
|
|
|
313
313
|
"title": "Icon-button Component Props",
|
|
314
314
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
315
315
|
"version": "1.0.0",
|
|
316
|
-
"generatedAt": "2026-01-
|
|
316
|
+
"generatedAt": "2026-01-01T11:01:58.051Z",
|
|
317
317
|
"source": "Zod schema"
|
|
318
318
|
}
|
package/schemas/index.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"title": "Kookie UI Button Components",
|
|
4
4
|
"description": "Complete JSON Schema collection for all button components in Kookie UI",
|
|
5
5
|
"version": "1.0.0",
|
|
6
|
-
"generatedAt": "2026-01-
|
|
6
|
+
"generatedAt": "2026-01-01T11:01:58.054Z",
|
|
7
7
|
"source": "Zod schemas",
|
|
8
8
|
"components": {
|
|
9
9
|
"base-button": {
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
"title": "Base-button Component Props",
|
|
288
288
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
289
289
|
"version": "1.0.0",
|
|
290
|
-
"generatedAt": "2026-01-
|
|
290
|
+
"generatedAt": "2026-01-01T11:01:58.044Z",
|
|
291
291
|
"source": "Zod schema"
|
|
292
292
|
},
|
|
293
293
|
"button": {
|
|
@@ -822,7 +822,7 @@
|
|
|
822
822
|
"title": "Button Component Props",
|
|
823
823
|
"description": "Props schema for the button component in Kookie UI",
|
|
824
824
|
"version": "1.0.0",
|
|
825
|
-
"generatedAt": "2026-01-
|
|
825
|
+
"generatedAt": "2026-01-01T11:01:58.050Z",
|
|
826
826
|
"source": "Zod schema"
|
|
827
827
|
},
|
|
828
828
|
"icon-button": {
|
|
@@ -1140,7 +1140,7 @@
|
|
|
1140
1140
|
"title": "Icon-button Component Props",
|
|
1141
1141
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
1142
1142
|
"version": "1.0.0",
|
|
1143
|
-
"generatedAt": "2026-01-
|
|
1143
|
+
"generatedAt": "2026-01-01T11:01:58.051Z",
|
|
1144
1144
|
"source": "Zod schema"
|
|
1145
1145
|
},
|
|
1146
1146
|
"toggle-button": {
|
|
@@ -1683,7 +1683,7 @@
|
|
|
1683
1683
|
"title": "Toggle-button Component Props",
|
|
1684
1684
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
1685
1685
|
"version": "1.0.0",
|
|
1686
|
-
"generatedAt": "2026-01-
|
|
1686
|
+
"generatedAt": "2026-01-01T11:01:58.053Z",
|
|
1687
1687
|
"source": "Zod schema"
|
|
1688
1688
|
},
|
|
1689
1689
|
"toggle-icon-button": {
|
|
@@ -2009,7 +2009,7 @@
|
|
|
2009
2009
|
"title": "Toggle-icon-button Component Props",
|
|
2010
2010
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
2011
2011
|
"version": "1.0.0",
|
|
2012
|
-
"generatedAt": "2026-01-
|
|
2012
|
+
"generatedAt": "2026-01-01T11:01:58.054Z",
|
|
2013
2013
|
"source": "Zod schema"
|
|
2014
2014
|
}
|
|
2015
2015
|
}
|
|
@@ -538,6 +538,6 @@
|
|
|
538
538
|
"title": "Toggle-button Component Props",
|
|
539
539
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
540
540
|
"version": "1.0.0",
|
|
541
|
-
"generatedAt": "2026-01-
|
|
541
|
+
"generatedAt": "2026-01-01T11:01:58.053Z",
|
|
542
542
|
"source": "Zod schema"
|
|
543
543
|
}
|
|
@@ -321,6 +321,6 @@
|
|
|
321
321
|
"title": "Toggle-icon-button Component Props",
|
|
322
322
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
323
323
|
"version": "1.0.0",
|
|
324
|
-
"generatedAt": "2026-01-
|
|
324
|
+
"generatedAt": "2026-01-01T11:01:58.054Z",
|
|
325
325
|
"source": "Zod schema"
|
|
326
326
|
}
|
package/src/components/theme.tsx
CHANGED
|
@@ -43,14 +43,33 @@ interface ThemeContextValue extends ThemeChangeHandlers {
|
|
|
43
43
|
scaling: ThemeScaling;
|
|
44
44
|
fontFamily: ThemeFontFamily;
|
|
45
45
|
}
|
|
46
|
+
// Default theme values used when components render outside a Theme provider
|
|
47
|
+
const defaultThemeContext: ThemeContextValue = {
|
|
48
|
+
appearance: themePropDefs.appearance.default,
|
|
49
|
+
accentColor: themePropDefs.accentColor.default,
|
|
50
|
+
grayColor: themePropDefs.grayColor.default,
|
|
51
|
+
resolvedGrayColor: themePropDefs.grayColor.default,
|
|
52
|
+
material: themePropDefs.material.default,
|
|
53
|
+
panelBackground: themePropDefs.panelBackground.default,
|
|
54
|
+
radius: themePropDefs.radius.default,
|
|
55
|
+
scaling: themePropDefs.scaling.default,
|
|
56
|
+
fontFamily: themePropDefs.fontFamily.default,
|
|
57
|
+
onAppearanceChange: noop,
|
|
58
|
+
onAccentColorChange: noop,
|
|
59
|
+
onGrayColorChange: noop,
|
|
60
|
+
onMaterialChange: noop,
|
|
61
|
+
onPanelBackgroundChange: noop,
|
|
62
|
+
onRadiusChange: noop,
|
|
63
|
+
onScalingChange: noop,
|
|
64
|
+
onFontFamilyChange: noop,
|
|
65
|
+
};
|
|
66
|
+
|
|
46
67
|
const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);
|
|
47
68
|
|
|
48
69
|
function useThemeContext() {
|
|
49
70
|
const context = React.useContext(ThemeContext);
|
|
50
|
-
if (
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
return context;
|
|
71
|
+
// Return default context if used outside Theme provider (e.g., during SSR)
|
|
72
|
+
return context ?? defaultThemeContext;
|
|
54
73
|
}
|
|
55
74
|
|
|
56
75
|
interface ThemeProps extends ThemeImplPublicProps {}
|