@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

package/dist/cjs/components/text.props.d.ts

@@ -34,7 +34,7 @@ declare const textPropDefs: {
     weight: {
         type: "enum";
         className: string;
-        values: readonly ["light", "regular", "medium", "bold"];
+        values: readonly ["thin", "extralight", "light", "regular", "medium", "semibold", "bold", "extrabold"];
         responsive: true;
     };
     size: {

package/dist/cjs/components/theme.d.ts

@@ -5,6 +5,7 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
 type ThemeAppearance = (typeof themePropDefs.appearance.values)[number];
 type ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];
 type ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];
+type ThemeMaterial = (typeof themePropDefs.material.values)[number];
 type ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];
 type ThemeRadius = (typeof themePropDefs.radius.values)[number];
 type ThemeScaling = (typeof themePropDefs.scaling.values)[number];
@@ -12,6 +13,7 @@ interface ThemeChangeHandlers {
     onAppearanceChange: (appearance: ThemeAppearance) => void;
     onAccentColorChange: (accentColor: ThemeAccentColor) => void;
     onGrayColorChange: (grayColor: ThemeGrayColor) => void;
+    onMaterialChange: (material: ThemeMaterial) => void;
     onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;
     onRadiusChange: (radius: ThemeRadius) => void;
     onScalingChange: (scaling: ThemeScaling) => void;
@@ -21,6 +23,7 @@ interface ThemeContextValue extends ThemeChangeHandlers {
     accentColor: ThemeAccentColor;
     grayColor: ThemeGrayColor;
     resolvedGrayColor: ThemeGrayColor;
+    material: ThemeMaterial;
     panelBackground: ThemePanelBackground;
     radius: ThemeRadius;
     scaling: ThemeScaling;

package/dist/cjs/components/theme.d.ts.map

@@ -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,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;AAElE,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,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;CAClD;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,eAAe,EAAE,oBAAoB,CAAC;IACtC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;CACvB;AACD,QAAA,MAAM,YAAY,8CAAgE,CAAC;AAEnF,iBAAS,eAAe,sBAMvB;AAED,UAAU,UAAW,SAAQ,oBAAoB;CAAG;AACpD,QAAA,MAAM,KAAK,mFAaT,CAAC;AA6DH,UAAU,oBACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,EACxD,aAAa;CAAG;AAgGpB,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"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;AAElE,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;CAClD;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;CACvB;AACD,QAAA,MAAM,YAAY,8CAAgE,CAAC;AAEnF,iBAAS,eAAe,sBAMvB;AAED,UAAU,UAAW,SAAQ,oBAAoB;CAAG;AACpD,QAAA,MAAM,KAAK,mFAaT,CAAC;AAiFH,UAAU,oBACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,EACxD,aAAa;CAAG;AAuGpB,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/cjs/components/theme.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var M=Object.create;var R=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var z=(e,r)=>{for(var o in r)R(e,o,{get:r[o],enumerable:!0})},E=(e,r,o,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of V(r))!q.call(e,t)&&t!==o&&R(e,t,{get:()=>r[t],enumerable:!(c=O(r,t))||c.enumerable});return e};var G=(e,r,o)=>(o=e!=null?M(W(e)):{},E(r||!e||!e.__esModule?R(o,"default",{value:e,enumerable:!0}):o,e)),F=e=>E(R({},"__esModule",{value:!0}),e);var J={};z(J,{Theme:()=>S,ThemeContext:()=>u,useThemeContext:()=>H});module.exports=F(J);var a=G(require("react")),w=G(require("classnames")),h=require("radix-ui"),N=require("../helpers/get-matching-gray-color.js"),n=require("./theme.props.js");const m=()=>{},u=a.createContext(void 0);function H(){const e=a.useContext(u);if(e===void 0)throw new Error("`useThemeContext` must be used within a `Theme`");return e}const S=a.forwardRef((e,r)=>a.useContext(u)===void 0?a.createElement(h.Tooltip.Provider,{delayDuration:200},a.createElement(h.Direction.Provider,{dir:"ltr"},a.createElement(D,{...e,ref:r}))):a.createElement(I,{...e,ref:r}));S.displayName="Theme";const D=a.forwardRef((e,r)=>{const{appearance:o=n.themePropDefs.appearance.default,accentColor:c=n.themePropDefs.accentColor.default,grayColor:t=n.themePropDefs.grayColor.default,panelBackground:p=n.themePropDefs.panelBackground.default,radius:l=n.themePropDefs.radius.default,scaling:s=n.themePropDefs.scaling.default,hasBackground:i=n.themePropDefs.hasBackground.default,...g}=e,[C,d]=a.useState(o);a.useEffect(()=>d(o),[o]);const[k,f]=a.useState(c);a.useEffect(()=>f(c),[c]);const[v,T]=a.useState(t);a.useEffect(()=>T(t),[t]);const[B,P]=a.useState(p);a.useEffect(()=>P(p),[p]);const[x,b]=a.useState(l);a.useEffect(()=>b(l),[l]);const[y,A]=a.useState(s);return a.useEffect(()=>A(s),[s]),a.createElement(I,{...g,ref:r,isRoot:!0,hasBackground:i,appearance:C,accentColor:k,grayColor:v,panelBackground:B,radius:x,scaling:y,onAppearanceChange:d,onAccentColorChange:f,onGrayColorChange:T,onPanelBackgroundChange:P,onRadiusChange:b,onScalingChange:A})});D.displayName="ThemeRoot";const I=a.forwardRef((e,r)=>{const o=a.useContext(u),{asChild:c,isRoot:t,hasBackground:p,appearance:l=e.appearance??o?.appearance??n.themePropDefs.appearance.default,accentColor:s=e.accentColor??o?.accentColor??n.themePropDefs.accentColor.default,grayColor:i=e.grayColor??o?.resolvedGrayColor??n.themePropDefs.grayColor.default,panelBackground:g=e.panelBackground??o?.panelBackground??n.themePropDefs.panelBackground.default,radius:C=e.radius??o?.radius??n.themePropDefs.radius.default,scaling:d=e.scaling??o?.scaling??n.themePropDefs.scaling.default,onAppearanceChange:k=m,onAccentColorChange:f=m,onGrayColorChange:v=m,onPanelBackgroundChange:T=m,onRadiusChange:B=m,onScalingChange:P=m,...x}=e,b=c?h.Slot.Root:"div",y=i==="auto"?(0,N.getMatchingGrayColor)(s):i,A=e.appearance==="light"||e.appearance==="dark",j=p===void 0?t||A:p;return a.createElement(u.Provider,{value:a.useMemo(()=>({appearance:l,accentColor:s,grayColor:i,resolvedGrayColor:y,panelBackground:g,radius:C,scaling:d,onAppearanceChange:k,onAccentColorChange:f,onGrayColorChange:v,onPanelBackgroundChange:T,onRadiusChange:B,onScalingChange:P}),[l,s,i,y,g,C,d,k,f,v,T,B,P])},a.createElement(b,{"data-is-root-theme":t?"true":"false","data-accent-color":s,"data-gray-color":y,"data-has-background":j?"true":"false","data-panel-background":g,"data-radius":C,"data-scaling":d,ref:r,...x,className:(0,w.default)("radix-themes",{light:l==="light",dark:l==="dark"},x.className)}))});I.displayName="ThemeImpl";
+"use strict";"use client";var V=Object.create;var S=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(e,r)=>{for(var o in r)S(e,o,{get:r[o],enumerable:!0})},w=(e,r,o,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of q(r))!F.call(e,t)&&t!==o&&S(e,t,{get:()=>r[t],enumerable:!(l=U(r,t))||l.enumerable});return e};var N=(e,r,o)=>(o=e!=null?V(z(e)):{},w(r||!e||!e.__esModule?S(o,"default",{value:e,enumerable:!0}):o,e)),K=e=>w(S({},"__esModule",{value:!0}),e);var L={};J(L,{Theme:()=>D,ThemeContext:()=>h,useThemeContext:()=>O});module.exports=K(L);var a=N(require("react")),W=N(require("classnames")),g=require("radix-ui"),j=require("../helpers/get-matching-gray-color.js"),n=require("./theme.props.js");const m=()=>{},h=a.createContext(void 0);function O(){const e=a.useContext(h);if(e===void 0)throw new Error("`useThemeContext` must be used within a `Theme`");return e}const D=a.forwardRef((e,r)=>a.useContext(h)===void 0?a.createElement(g.Tooltip.Provider,{delayDuration:200},a.createElement(g.Direction.Provider,{dir:"ltr"},a.createElement(H,{...e,ref:r}))):a.createElement(G,{...e,ref:r}));D.displayName="Theme";const H=a.forwardRef((e,r)=>{const{appearance:o=n.themePropDefs.appearance.default,accentColor:l=n.themePropDefs.accentColor.default,grayColor:t=n.themePropDefs.grayColor.default,material:f=n.themePropDefs.material.default,panelBackground:i=n.themePropDefs.panelBackground.default,radius:c=n.themePropDefs.radius.default,scaling:s=n.themePropDefs.scaling.default,hasBackground:C=n.themePropDefs.hasBackground.default,...T}=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[P,d]=a.useState(o);a.useEffect(()=>d(o),[o]);const[x,y]=a.useState(l);a.useEffect(()=>y(l),[l]);const[b,v]=a.useState(t);a.useEffect(()=>v(t),[t]);const p=f!==n.themePropDefs.material.default?f:i,[u,k]=a.useState(p);a.useEffect(()=>k(p),[p]);const[A,E]=a.useState(i);a.useEffect(()=>E(u),[u]);const[B,R]=a.useState(c);a.useEffect(()=>R(c),[c]);const[I,M]=a.useState(s);return a.useEffect(()=>M(s),[s]),a.createElement(G,{...T,ref:r,isRoot:!0,hasBackground:C,appearance:P,accentColor:x,grayColor:b,material:u,panelBackground:A,radius:B,scaling:I,onAppearanceChange:d,onAccentColorChange:y,onGrayColorChange:v,onMaterialChange:k,onPanelBackgroundChange:E,onRadiusChange:R,onScalingChange:M})});H.displayName="ThemeRoot";const G=a.forwardRef((e,r)=>{const o=a.useContext(h),{asChild:l,isRoot:t,hasBackground:f,appearance:i=e.appearance??o?.appearance??n.themePropDefs.appearance.default,accentColor:c=e.accentColor??o?.accentColor??n.themePropDefs.accentColor.default,grayColor:s=e.grayColor??o?.resolvedGrayColor??n.themePropDefs.grayColor.default,material:C=e.material??o?.material??n.themePropDefs.material.default,panelBackground:T=e.panelBackground??o?.panelBackground??n.themePropDefs.panelBackground.default,radius:P=e.radius??o?.radius??n.themePropDefs.radius.default,scaling:d=e.scaling??o?.scaling??n.themePropDefs.scaling.default,onAppearanceChange:x=m,onAccentColorChange:y=m,onGrayColorChange:b=m,onMaterialChange:v=m,onPanelBackgroundChange:p=m,onRadiusChange:u=m,onScalingChange:k=m,...A}=e,E=l?g.Slot.Root:"div",B=s==="auto"?(0,j.getMatchingGrayColor)(c):s,R=e.appearance==="light"||e.appearance==="dark",I=f===void 0?t||R:f;return a.createElement(h.Provider,{value:a.useMemo(()=>({appearance:i,accentColor:c,grayColor:s,resolvedGrayColor:B,material:C,panelBackground:T,radius:P,scaling:d,onAppearanceChange:x,onAccentColorChange:y,onGrayColorChange:b,onMaterialChange:v,onPanelBackgroundChange:p,onRadiusChange:u,onScalingChange:k}),[i,c,s,B,C,T,P,d,x,y,b,v,p,u,k])},a.createElement(E,{"data-is-root-theme":t?"true":"false","data-accent-color":c,"data-gray-color":B,"data-has-background":I?"true":"false","data-material":C,"data-panel-background":T,"data-radius":P,"data-scaling":d,ref:r,...A,className:(0,W.default)("radix-themes",{light:i==="light",dark:i==="dark"},A.className)}))});G.displayName="ThemeImpl";
 //# sourceMappingURL=theme.js.map

package/dist/cjs/components/theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/theme.tsx"],
-  "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 ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];\ntype ThemeRadius = (typeof themePropDefs.radius.values)[number];\ntype ThemeScaling = (typeof themePropDefs.scaling.values)[number];\n\ninterface ThemeChangeHandlers {\n  onAppearanceChange: (appearance: ThemeAppearance) => void;\n  onAccentColorChange: (accentColor: ThemeAccentColor) => void;\n  onGrayColorChange: (grayColor: ThemeGrayColor) => void;\n  onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;\n  onRadiusChange: (radius: ThemeRadius) => void;\n  onScalingChange: (scaling: ThemeScaling) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n  appearance: ThemeAppearance;\n  accentColor: ThemeAccentColor;\n  grayColor: ThemeGrayColor;\n  resolvedGrayColor: ThemeGrayColor;\n  panelBackground: ThemePanelBackground;\n  radius: ThemeRadius;\n  scaling: ThemeScaling;\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      panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,\n      radius: radiusProp = themePropDefs.radius.default,\n      scaling: scalingProp = themePropDefs.scaling.default,\n      hasBackground = themePropDefs.hasBackground.default,\n      ...rootProps\n    } = props;\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    const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);\n    React.useEffect(() => setPanelBackground(panelBackgroundProp), [panelBackgroundProp]);\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    return (\n      <ThemeImpl\n        {...rootProps}\n        ref={forwardedRef}\n        isRoot\n        hasBackground={hasBackground}\n        //\n        appearance={appearance}\n        accentColor={accentColor}\n        grayColor={grayColor}\n        panelBackground={panelBackground}\n        radius={radius}\n        scaling={scaling}\n        //\n        onAppearanceChange={setAppearance}\n        onAccentColorChange={setAccentColor}\n        onGrayColorChange={setGrayColor}\n        onPanelBackgroundChange={setPanelBackground}\n        onRadiusChange={setRadius}\n        onScalingChange={setScaling}\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    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    //\n    onAppearanceChange = noop,\n    onAccentColorChange = noop,\n    onGrayColorChange = noop,\n    onPanelBackgroundChange = noop,\n    onRadiusChange = noop,\n    onScalingChange = 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          panelBackground,\n          radius,\n          scaling,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n        }),\n        [\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          panelBackground,\n          radius,\n          scaling,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\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-panel-background={panelBackground}\n        data-radius={radius}\n        data-scaling={scaling}\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"],
-  "mappings": "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",
-  "names": ["theme_exports", "__export", "Theme", "ThemeContext", "useThemeContext", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_get_matching_gray_color", "import_theme_props", "noop", "context", "props", "forwardedRef", "TooltipPrimitive", "ThemeRoot", "ThemeImpl", "appearanceProp", "accentColorProp", "grayColorProp", "panelBackgroundProp", "radiusProp", "scalingProp", "hasBackground", "rootProps", "appearance", "setAppearance", "accentColor", "setAccentColor", "grayColor", "setGrayColor", "panelBackground", "setPanelBackground", "radius", "setRadius", "scaling", "setScaling", "asChild", "isRoot", "hasBackgroundProp", "onAppearanceChange", "onAccentColorChange", "onGrayColorChange", "onPanelBackgroundChange", "onRadiusChange", "onScalingChange", "themeProps", "Comp", "resolvedGrayColor", "isExplicitAppearance", "classNames"]
+  "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];\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}\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}\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      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    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        //\n        onAppearanceChange={setAppearance}\n        onAccentColorChange={setAccentColor}\n        onGrayColorChange={setGrayColor}\n        onMaterialChange={setMaterial}\n        onPanelBackgroundChange={setPanelBackground}\n        onRadiusChange={setRadius}\n        onScalingChange={setScaling}\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    //\n    onAppearanceChange = noop,\n    onAccentColorChange = noop,\n    onGrayColorChange = noop,\n    onMaterialChange = noop,\n    onPanelBackgroundChange = noop,\n    onRadiusChange = noop,\n    onScalingChange = 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          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n        }),\n        [\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          material,\n          panelBackground,\n          radius,\n          scaling,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\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        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"],
+  "mappings": "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",
+  "names": ["theme_exports", "__export", "Theme", "ThemeContext", "useThemeContext", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_get_matching_gray_color", "import_theme_props", "noop", "context", "props", "forwardedRef", "TooltipPrimitive", "ThemeRoot", "ThemeImpl", "appearanceProp", "accentColorProp", "grayColorProp", "materialProp", "panelBackgroundProp", "radiusProp", "scalingProp", "hasBackground", "rootProps", "appearance", "setAppearance", "accentColor", "setAccentColor", "grayColor", "setGrayColor", "effectiveMaterial", "material", "setMaterial", "panelBackground", "setPanelBackground", "radius", "setRadius", "scaling", "setScaling", "asChild", "isRoot", "hasBackgroundProp", "onAppearanceChange", "onAccentColorChange", "onGrayColorChange", "onMaterialChange", "onPanelBackgroundChange", "onRadiusChange", "onScalingChange", "themeProps", "Comp", "resolvedGrayColor", "isExplicitAppearance", "classNames"]
 }

package/dist/cjs/components/theme.props.d.ts

@@ -51,6 +51,20 @@ declare const themePropDefs: {
      * @link
      * https://www.radix-ui.com/themes/docs/theme/visual-style
      */
+    material: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: "translucent";
+    };
+    /**
+     * Controls whether to use a solid or translucent background color on panelled
+     * elements such as Card or Table is solid or translucent.
+     *
+     * @deprecated Use `material` prop instead. This prop will be removed in a future version.
+     *
+     * @link
+     * https://www.radix-ui.com/themes/docs/theme/visual-style
+     */
     panelBackground: {
         type: "enum";
         values: readonly ["solid", "translucent"];

package/dist/cjs/components/theme.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.props.d.ts","sourceRoot":"","sources":["../../../src/components/theme.props.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,KAAK,EAAE,eAAe,EAAW,MAAM,sBAAsB,CAAC;AAMrE,QAAA,MAAM,aAAa;IAEjB;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;;OAMG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;;;;CAUJ,CAAC;AAEF,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,GAAG,OAAO,cAAc,CAAC,CAAC;AAEnF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"theme.props.d.ts","sourceRoot":"","sources":["../../../src/components/theme.props.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,KAAK,EAAE,eAAe,EAAW,MAAM,sBAAsB,CAAC;AAOrE,QAAA,MAAM,aAAa;IAEjB;;;;;OAKG;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;;OAMG;;;;;;IAEH;;;;;;;;OAQG;;;;;;IAEH;;;;;OAKG;;;;;;IAEH;;;;;OAKG;;;;;;;;;CAWJ,CAAC;AAEF,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,GAAG,OAAO,cAAc,CAAC,CAAC;AAEnF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/cjs/components/theme.props.js

@@ -1,2 +1,2 @@
-"use strict";var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var i=(o,e)=>{for(var a in e)t(o,a,{get:e[a],enumerable:!0})},y=(o,e,a,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of c(e))!m.call(o,r)&&r!==a&&t(o,r,{get:()=>e[r],enumerable:!(n=f(e,r))||n.enumerable});return o};var d=o=>y(t({},"__esModule",{value:!0}),o);var h={};i(h,{themePropDefs:()=>u});module.exports=d(h);var s=require("../props/as-child.prop.js"),p=require("../props/color.prop.js"),l=require("../props/radius.prop.js");const P=["inherit","light","dark"],g=["solid","translucent"],D=["90%","95%","100%","105%","110%"],u={...s.asChildPropDef,hasBackground:{type:"boolean",default:!0},appearance:{type:"enum",values:P,default:"inherit"},accentColor:{type:"enum",values:p.accentColors,default:"blue"},grayColor:{type:"enum",values:p.grayColors,default:"slate"},panelBackground:{type:"enum",values:g,default:"translucent"},radius:{type:"enum",values:l.radii,default:"medium"},scaling:{type:"enum",values:D,default:"100%"}};
+"use strict";var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var i=(a,e)=>{for(var r in e)p(a,r,{get:e[r],enumerable:!0})},y=(a,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of c(e))!m.call(a,o)&&o!==r&&p(a,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return a};var d=a=>y(p({},"__esModule",{value:!0}),a);var b={};i(b,{themePropDefs:()=>u});module.exports=d(b);var n=require("../props/as-child.prop.js"),t=require("../props/color.prop.js"),l=require("../props/radius.prop.js");const P=["inherit","light","dark"],g=["solid","translucent"],D=["solid","translucent"],h=["90%","95%","100%","105%","110%"],u={...n.asChildPropDef,hasBackground:{type:"boolean",default:!0},appearance:{type:"enum",values:P,default:"inherit"},accentColor:{type:"enum",values:t.accentColors,default:"blue"},grayColor:{type:"enum",values:t.grayColors,default:"slate"},material:{type:"enum",values:D,default:"translucent"},panelBackground:{type:"enum",values:g,default:"translucent"},radius:{type:"enum",values:l.radii,default:"medium"},scaling:{type:"enum",values:h,default:"100%"}};
 //# sourceMappingURL=theme.props.js.map

package/dist/cjs/components/theme.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/theme.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColors, grayColors } from '../props/color.prop.js';\nimport { radii } from '../props/radius.prop.js';\n\nimport type { GetPropDefTypes, PropDef } from '../props/prop-def.js';\n\nconst appearances = ['inherit', 'light', 'dark'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst scalings = ['90%', '95%', '100%', '105%', '110%'] as const;\n\nconst themePropDefs = {\n  ...asChildPropDef,\n  /**\n   * Whether to apply background color to the Theme element.\n   *\n   * Defaults to true for the root Theme and for Theme elements that\n   * have an explicit light or dark appearance prop.\n   */\n  hasBackground: { type: 'boolean', default: true },\n  /**\n   * Sets the color scheme of the theme, typcially referred to as light and dark mode.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/dark-mode\n   */\n  appearance: { type: 'enum', values: appearances, default: 'inherit' },\n  /**\n   * Selects one of the accent color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  accentColor: { type: 'enum', values: accentColors, default: 'blue' },\n  /**\n   * Selects one of the gray color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  grayColor: { type: 'enum', values: grayColors, default: 'slate' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'translucent' },\n  /**\n   * Sets the default radius of the components.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  radius: { type: 'enum', values: radii, default: 'medium' },\n  /**\n   * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/layout\n   */\n  scaling: { type: 'enum', values: scalings, default: '100%' },\n} satisfies {\n  hasBackground: PropDef<boolean>;\n  appearance: PropDef<(typeof appearances)[number]>;\n  accentColor: PropDef<(typeof accentColors)[number]>;\n  grayColor: PropDef<(typeof grayColors)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;\n  radius: PropDef<(typeof radii)[number]>;\n  scaling: PropDef<(typeof scalings)[number]>;\n};\n\ntype ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;\n\nexport { themePropDefs };\nexport type { ThemeOwnProps };\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,qCAC/BC,EAAyC,kCACzCC,EAAsB,mCAItB,MAAMC,EAAc,CAAC,UAAW,QAAS,MAAM,EACzCC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAW,CAAC,MAAO,MAAO,OAAQ,OAAQ,MAAM,EAEhDP,EAAgB,CACpB,GAAG,iBAOH,cAAe,CAAE,KAAM,UAAW,QAAS,EAAK,EAOhD,WAAY,CAAE,KAAM,OAAQ,OAAQK,EAAa,QAAS,SAAU,EAOpE,YAAa,CAAE,KAAM,OAAQ,OAAQ,eAAc,QAAS,MAAO,EAOnE,UAAW,CAAE,KAAM,OAAQ,OAAQ,aAAY,QAAS,OAAQ,EAQhE,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,aAAc,EAOlF,OAAQ,CAAE,KAAM,OAAQ,OAAQ,QAAO,QAAS,QAAS,EAOzD,QAAS,CAAE,KAAM,OAAQ,OAAQC,EAAU,QAAS,MAAO,CAC7D",
-  "names": ["theme_props_exports", "__export", "themePropDefs", "__toCommonJS", "import_as_child_prop", "import_color_prop", "import_radius_prop", "appearances", "panelBackgrounds", "scalings"]
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColors, grayColors } from '../props/color.prop.js';\nimport { radii } from '../props/radius.prop.js';\n\nimport type { GetPropDefTypes, PropDef } from '../props/prop-def.js';\n\nconst appearances = ['inherit', 'light', 'dark'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\nconst scalings = ['90%', '95%', '100%', '105%', '110%'] as const;\n\nconst themePropDefs = {\n  ...asChildPropDef,\n  /**\n   * Whether to apply background color to the Theme element.\n   *\n   * Defaults to true for the root Theme and for Theme elements that\n   * have an explicit light or dark appearance prop.\n   */\n  hasBackground: { type: 'boolean', default: true },\n  /**\n   * Sets the color scheme of the theme, typcially referred to as light and dark mode.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/dark-mode\n   */\n  appearance: { type: 'enum', values: appearances, default: 'inherit' },\n  /**\n   * Selects one of the accent color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  accentColor: { type: 'enum', values: accentColors, default: 'blue' },\n  /**\n   * Selects one of the gray color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  grayColor: { type: 'enum', values: grayColors, default: 'slate' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  material: { type: 'enum', values: materials, default: 'translucent' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'translucent' },\n  /**\n   * Sets the default radius of the components.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  radius: { type: 'enum', values: radii, default: 'medium' },\n  /**\n   * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/layout\n   */\n  scaling: { type: 'enum', values: scalings, default: '100%' },\n} satisfies {\n  hasBackground: PropDef<boolean>;\n  appearance: PropDef<(typeof appearances)[number]>;\n  accentColor: PropDef<(typeof accentColors)[number]>;\n  grayColor: PropDef<(typeof grayColors)[number]>;\n  material: PropDef<(typeof materials)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;\n  radius: PropDef<(typeof radii)[number]>;\n  scaling: PropDef<(typeof scalings)[number]>;\n};\n\ntype ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;\n\nexport { themePropDefs };\nexport type { ThemeOwnProps };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,qCAC/BC,EAAyC,kCACzCC,EAAsB,mCAItB,MAAMC,EAAc,CAAC,UAAW,QAAS,MAAM,EACzCC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EACnCC,EAAW,CAAC,MAAO,MAAO,OAAQ,OAAQ,MAAM,EAEhDR,EAAgB,CACpB,GAAG,iBAOH,cAAe,CAAE,KAAM,UAAW,QAAS,EAAK,EAOhD,WAAY,CAAE,KAAM,OAAQ,OAAQK,EAAa,QAAS,SAAU,EAOpE,YAAa,CAAE,KAAM,OAAQ,OAAQ,eAAc,QAAS,MAAO,EAOnE,UAAW,CAAE,KAAM,OAAQ,OAAQ,aAAY,QAAS,OAAQ,EAQhE,SAAU,CAAE,KAAM,OAAQ,OAAQE,EAAW,QAAS,aAAc,EAUpE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,aAAc,EAOlF,OAAQ,CAAE,KAAM,OAAQ,OAAQ,QAAO,QAAS,QAAS,EAOzD,QAAS,CAAE,KAAM,OAAQ,OAAQE,EAAU,QAAS,MAAO,CAC7D",
+  "names": ["theme_props_exports", "__export", "themePropDefs", "__toCommonJS", "import_as_child_prop", "import_color_prop", "import_radius_prop", "appearances", "panelBackgrounds", "materials", "scalings"]
 }

package/dist/cjs/components/toggle-button.d.ts

@@ -1,10 +1,62 @@
 import * as React from 'react';
 import { Button } from './button.js';
+/**
+ * ToggleButton props that extend Button with toggle-specific functionality
+ *
+ * The ToggleButton component provides a button that can be pressed/unpressed
+ * with proper accessibility announcements and state management.
+ */
 interface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {
+    /** Controlled pressed state */
     pressed?: boolean;
+    /** Callback when pressed state changes */
     onPressedChange?: (pressed: boolean) => void;
+    /** Default pressed state for uncontrolled usage */
     defaultPressed?: boolean;
 }
+/**
+ * ToggleButton component for buttons that can be pressed/unpressed
+ *
+ * The ToggleButton component extends Button with toggle functionality using
+ * Radix UI's Toggle primitive. It provides proper accessibility announcements,
+ * controlled/uncontrolled state management, and seamless integration with
+ * the existing Button component.
+ *
+ * Key features:
+ * - Controlled and uncontrolled state management
+ * - Live accessibility announcements for screen readers
+ * - Automatic state validation and warnings
+ * - Seamless integration with Button props and styling
+ * - Proper ARIA attributes for toggle functionality
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled toggle button
+ * <ToggleButton defaultPressed={false}>
+ *   Toggle Me
+ * </ToggleButton>
+ *
+ * // Controlled toggle button
+ * const [pressed, setPressed] = React.useState(false);
+ * <ToggleButton
+ *   pressed={pressed}
+ *   onPressedChange={setPressed}
+ * >
+ *   {pressed ? 'On' : 'Off'}
+ * </ToggleButton>
+ *
+ * // Toggle button with all Button props
+ * <ToggleButton
+ *   variant="solid"
+ *   size="3"
+ *   color="blue"
+ *   pressed={isActive}
+ *   onPressedChange={setIsActive}
+ * >
+ *   {isActive ? 'Active' : 'Inactive'}
+ * </ToggleButton>
+ * ```
+ */
 declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleButton };
 export type { ToggleButtonProps };

package/dist/cjs/components/toggle-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,UAAU,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID,QAAA,MAAM,YAAY,0GAajB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC;;;;;GAKG;AACH,UAAU,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC;IAC/E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,YAAY,0GA2DjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/cjs/components/toggle-button.js

@@ -1,2 +1,2 @@
-"use strict";var u=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var i=(e,o)=>{for(var t in o)s(e,t,{get:o[t],enumerable:!0})},p=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of m(o))!T.call(e,n)&&n!==t&&s(e,n,{get:()=>o[n],enumerable:!(r=f(o,n))||r.enumerable});return e};var P=(e,o,t)=>(t=e!=null?u(B(e)):{},p(o||!e||!e.__esModule?s(t,"default",{value:e,enumerable:!0}):t,e)),R=e=>p(s({},"__esModule",{value:!0}),e);var y={};i(y,{ToggleButton:()=>l});module.exports=R(y);var g=P(require("react")),a=require("radix-ui"),d=require("./button.js");const l=g.forwardRef(({pressed:e,onPressedChange:o,defaultPressed:t,...r},n)=>g.createElement(a.Toggle.Root,{pressed:e,onPressedChange:o,defaultPressed:t,asChild:!0},g.createElement(d.Button,{...r,ref:n})));l.displayName="ToggleButton";
+"use strict";var B=Object.create;var a=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var v=(e,o)=>{for(var t in o)a(e,t,{get:o[t],enumerable:!0})},d=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of h(o))!C.call(e,s)&&s!==t&&a(e,s,{get:()=>o[s],enumerable:!(n=T(o,s))||n.enumerable});return e};var E=(e,o,t)=>(t=e!=null?B(P(e)):{},d(o||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),R=e=>d(a({},"__esModule",{value:!0}),e);var N={};v(N,{ToggleButton:()=>l});module.exports=R(N);var r=E(require("react")),i=require("radix-ui"),f=require("./button.js"),m=require("../hooks/use-live-announcer.js");const l=r.forwardRef(({pressed:e,onPressedChange:o,defaultPressed:t,children:n,...s},c)=>{const u=(0,m.useLiveAnnouncer)(),p=r.useCallback(()=>typeof n=="string"?n:r.isValidElement(n)&&typeof n.props?.children=="string"?n.props.children:"Toggle button",[n]),b=r.useCallback(g=>{const y=p();u(`${y} ${g?"pressed":"unpressed"}`),o?.(g)},[u,o,p]);return r.useEffect(()=>{},[e,o]),r.createElement(i.Toggle.Root,{pressed:e,onPressedChange:b,defaultPressed:t,asChild:!0},r.createElement(f.Button,{...s,ref:c},n))});l.displayName="ToggleButton";
 //# sourceMappingURL=toggle-button.js.map

package/dist/cjs/components/toggle-button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggle-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { Button } from './button.js';\n\ninterface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {\n  pressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  defaultPressed?: boolean;\n}\n\ntype ToggleButtonElement = React.ElementRef<typeof Button>;\n\nconst ToggleButton = React.forwardRef<ToggleButtonElement, ToggleButtonProps>(\n  ({ pressed, onPressedChange, defaultPressed, ...buttonProps }, forwardedRef) => {\n    return (\n      <Toggle.Root\n        pressed={pressed}\n        onPressedChange={onPressedChange}\n        defaultPressed={defaultPressed}\n        asChild\n      >\n        <Button {...buttonProps} ref={forwardedRef} />\n      </Toggle.Root>\n    );\n  },\n);\nToggleButton.displayName = 'ToggleButton';\n\nexport { ToggleButton };\nexport type { ToggleButtonProps };\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,oBACvBC,EAAuB,uBAUvB,MAAMJ,EAAeE,EAAM,WACzB,CAAC,CAAE,QAAAG,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAY,EAAGC,IAE3DP,EAAA,cAAC,SAAO,KAAP,CACC,QAASG,EACT,gBAAiBC,EACjB,eAAgBC,EAChB,QAAO,IAEPL,EAAA,cAAC,UAAQ,GAAGM,EAAa,IAAKC,EAAc,CAC9C,CAGN,EACAT,EAAa,YAAc",
-  "names": ["toggle_button_exports", "__export", "ToggleButton", "__toCommonJS", "React", "import_radix_ui", "import_button", "pressed", "onPressedChange", "defaultPressed", "buttonProps", "forwardedRef"]
+  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { Button } from './button.js';\nimport { useLiveAnnouncer } from '../hooks/use-live-announcer.js';\n\n/**\n * ToggleButton props that extend Button with toggle-specific functionality\n *\n * The ToggleButton component provides a button that can be pressed/unpressed\n * with proper accessibility announcements and state management.\n */\ninterface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {\n  /** Controlled pressed state */\n  pressed?: boolean;\n  /** Callback when pressed state changes */\n  onPressedChange?: (pressed: boolean) => void;\n  /** Default pressed state for uncontrolled usage */\n  defaultPressed?: boolean;\n}\n\ntype ToggleButtonElement = React.ElementRef<typeof Button>;\n\n/**\n * ToggleButton component for buttons that can be pressed/unpressed\n *\n * The ToggleButton component extends Button with toggle functionality using\n * Radix UI's Toggle primitive. It provides proper accessibility announcements,\n * controlled/uncontrolled state management, and seamless integration with\n * the existing Button component.\n *\n * Key features:\n * - Controlled and uncontrolled state management\n * - Live accessibility announcements for screen readers\n * - Automatic state validation and warnings\n * - Seamless integration with Button props and styling\n * - Proper ARIA attributes for toggle functionality\n *\n * @example\n * ```tsx\n * // Uncontrolled toggle button\n * <ToggleButton defaultPressed={false}>\n *   Toggle Me\n * </ToggleButton>\n *\n * // Controlled toggle button\n * const [pressed, setPressed] = React.useState(false);\n * <ToggleButton\n *   pressed={pressed}\n *   onPressedChange={setPressed}\n * >\n *   {pressed ? 'On' : 'Off'}\n * </ToggleButton>\n *\n * // Toggle button with all Button props\n * <ToggleButton\n *   variant=\"solid\"\n *   size=\"3\"\n *   color=\"blue\"\n *   pressed={isActive}\n *   onPressedChange={setIsActive}\n * >\n *   {isActive ? 'Active' : 'Inactive'}\n * </ToggleButton>\n * ```\n */\nconst ToggleButton = React.forwardRef<ToggleButtonElement, ToggleButtonProps>(\n  ({ pressed, onPressedChange, defaultPressed, children, ...buttonProps }, forwardedRef) => {\n    // Get the live announcer for accessibility announcements\n    const announce = useLiveAnnouncer();\n\n    /**\n     * Extract accessible name from button content for announcements\n     * This ensures screen readers announce meaningful state changes\n     */\n    const getAccessibleName = React.useCallback(() => {\n      if (typeof children === 'string') return children;\n      if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {\n        return (children.props as any).children;\n      }\n      return 'Toggle button';\n    }, [children]);\n\n    /**\n     * Memoized handler for state changes with accessibility announcements\n     * This ensures screen readers announce the new state immediately\n     */\n    const handlePressedChange = React.useCallback(\n      (newPressed: boolean) => {\n        const accessibleName = getAccessibleName();\n        // Announce the state change for screen readers\n        announce(`${accessibleName} ${newPressed ? 'pressed' : 'unpressed'}`);\n        // Call the user's change handler\n        onPressedChange?.(newPressed);\n      },\n      [announce, onPressedChange, getAccessibleName],\n    );\n\n    // Development-only warning for controlled/uncontrolled pattern\n    // This helps developers avoid common state management mistakes\n    React.useEffect(() => {\n      if (process.env.NODE_ENV === 'development' && pressed !== undefined && onPressedChange === undefined) {\n        console.warn(\n          'ToggleButton: You provided a `pressed` prop without an `onPressedChange` handler. ' +\n            'This will result in a read-only toggle button. If you want the button to be interactive, ' +\n            'you should provide an `onPressedChange` handler.',\n        );\n      }\n    }, [pressed, onPressedChange]);\n\n    // Render the toggle button using Radix UI's Toggle primitive\n    // This provides proper ARIA attributes and keyboard navigation\n    return (\n      <Toggle.Root\n        pressed={pressed}\n        onPressedChange={handlePressedChange}\n        defaultPressed={defaultPressed}\n        asChild\n      >\n        <Button {...buttonProps} ref={forwardedRef}>\n          {children}\n        </Button>\n      </Toggle.Root>\n    );\n  },\n);\nToggleButton.displayName = 'ToggleButton';\n\nexport { ToggleButton };\nexport type { ToggleButtonProps };\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,oBACvBC,EAAuB,uBACvBC,EAAiC,0CA8DjC,MAAML,EAAeE,EAAM,WACzB,CAAC,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,SAAAC,EAAU,GAAGC,CAAY,EAAGC,IAAiB,CAExF,MAAMC,KAAW,oBAAiB,EAM5BC,EAAoBX,EAAM,YAAY,IACtC,OAAOO,GAAa,SAAiBA,EACrCP,EAAM,eAAeO,CAAQ,GAAK,OAAQA,EAAS,OAAe,UAAa,SACzEA,EAAS,MAAc,SAE1B,gBACN,CAACA,CAAQ,CAAC,EAMPK,EAAsBZ,EAAM,YAC/Ba,GAAwB,CACvB,MAAMC,EAAiBH,EAAkB,EAEzCD,EAAS,GAAGI,CAAc,IAAID,EAAa,UAAY,WAAW,EAAE,EAEpER,IAAkBQ,CAAU,CAC9B,EACA,CAACH,EAAUL,EAAiBM,CAAiB,CAC/C,EAIA,OAAAX,EAAM,UAAU,IAAM,CAQtB,EAAG,CAACI,EAASC,CAAe,CAAC,EAK3BL,EAAA,cAAC,SAAO,KAAP,CACC,QAASI,EACT,gBAAiBQ,EACjB,eAAgBN,EAChB,QAAO,IAEPN,EAAA,cAAC,UAAQ,GAAGQ,EAAa,IAAKC,GAC3BF,CACH,CACF,CAEJ,CACF,EACAT,EAAa,YAAc",
+  "names": ["toggle_button_exports", "__export", "ToggleButton", "__toCommonJS", "React", "import_radix_ui", "import_button", "import_use_live_announcer", "pressed", "onPressedChange", "defaultPressed", "children", "buttonProps", "forwardedRef", "announce", "getAccessibleName", "handlePressedChange", "newPressed", "accessibleName"]
 }

package/dist/cjs/components/toggle-icon-button.d.ts

@@ -1,7 +1,20 @@
 import * as React from 'react';
 import { Toggle } from 'radix-ui';
-import type { BaseButtonProps } from './_internal/base-button.js';
+import type { IconButtonProps } from './icon-button.js';
+/**
+ * Extract toggle-specific props from Radix Toggle
+ * These props control the toggle state and behavior
+ */
 type ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;
+/**
+ * Required accessibility props for icon buttons (same as IconButton)
+ * Icon buttons must have an accessible name to meet WCAG guidelines
+ *
+ * Three ways to provide accessibility:
+ * 1. aria-label: Direct descriptive text
+ * 2. aria-labelledby: Reference to a label element
+ * 3. children: Visible text content (fallback)
+ */
 type AccessibilityProps = {
     'aria-label': string;
     'aria-labelledby'?: never;
@@ -13,12 +26,81 @@ type AccessibilityProps = {
     'aria-labelledby'?: never;
     children: React.ReactNode;
 };
-interface ToggleIconButtonProps extends Omit<BaseButtonProps, 'as'> {
+/**
+ * Combine IconButton props with Toggle-specific props
+ * Includes tooltip props from IconButton for comprehensive functionality
+ */
+interface ToggleIconButtonProps extends Omit<IconButtonProps, 'as'> {
+    /** Controlled pressed state */
     pressed?: ToggleProps['pressed'];
+    /** Callback when pressed state changes */
     onPressedChange?: ToggleProps['onPressedChange'];
+    /** Default pressed state for uncontrolled usage */
     defaultPressed?: ToggleProps['defaultPressed'];
 }
+/**
+ * Intersection with accessibility props to ensure compliance
+ * This type ensures all ToggleIconButton instances have proper accessibility
+ */
 type ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;
+/**
+ * ToggleIconButton component for icon buttons that can be pressed/unpressed
+ *
+ * The ToggleIconButton component extends IconButton with toggle functionality
+ * using Radix UI's Toggle primitive. It provides proper accessibility announcements,
+ * controlled/uncontrolled state management, and seamless integration with
+ * the existing IconButton component.
+ *
+ * Key features:
+ * - Controlled and uncontrolled state management
+ * - Live accessibility announcements for screen readers
+ * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)
+ * - Automatic state validation and warnings
+ * - Seamless integration with IconButton props and styling
+ * - Proper ARIA attributes for toggle functionality
+ * - Built-in tooltip support from IconButton
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled toggle icon button
+ * <ToggleIconButton defaultPressed={false} aria-label="Toggle notifications">
+ *   <Bell />
+ * </ToggleIconButton>
+ *
+ * // Controlled toggle icon button
+ * const [pressed, setPressed] = React.useState(false);
+ * <ToggleIconButton
+ *   pressed={pressed}
+ *   onPressedChange={setPressed}
+ *   aria-label="Toggle notifications"
+ * >
+ *   <Bell />
+ * </ToggleIconButton>
+ *
+ * // Toggle icon button with tooltip
+ * <ToggleIconButton
+ *   variant="solid"
+ *   size="3"
+ *   color="blue"
+ *   pressed={isActive}
+ *   onPressedChange={setIsActive}
+ *   aria-label="Toggle feature"
+ *   tooltip="Toggle this feature on/off"
+ * >
+ *   <Star />
+ * </ToggleIconButton>
+ *
+ * // Toggle icon button with aria-labelledby
+ * <ToggleIconButton
+ *   aria-labelledby="notifications-label"
+ *   pressed={notificationsEnabled}
+ *   onPressedChange={setNotificationsEnabled}
+ * >
+ *   <Bell />
+ * </ToggleIconButton>
+ * <span id="notifications-label">Toggle notifications</span>
+ * ```
+ */
 declare const ToggleIconButton: React.ForwardRefExoticComponent<ToggleIconButtonPropsWithAccessibility & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleIconButton };
 export type { ToggleIconButtonPropsWithAccessibility as ToggleIconButtonProps };

package/dist/cjs/components/toggle-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAKlE,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAGtE,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAGnF,UAAU,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;IACjE,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAGD,KAAK,sCAAsC,GAAG,qBAAqB,GAAG,kBAAkB,CAAC;AAEzF,QAAA,MAAM,gBAAgB,kHAcpB,CAAC;AAGH,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,sCAAsC,IAAI,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAIxD;;;GAGG;AACH,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAEtE;;;;;;;;GAQG;AACH,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAEnF;;;GAGG;AACH,UAAU,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;IACjE,+BAA+B;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,0CAA0C;IAC1C,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACjD,mDAAmD;IACnD,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAED;;;GAGG;AACH,KAAK,sCAAsC,GAAG,qBAAqB,GAAG,kBAAkB,CAAC;AAEzF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,QAAA,MAAM,gBAAgB,kHA8EpB,CAAC;AAGH,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,sCAAsC,IAAI,qBAAqB,EAAE,CAAC"}

package/dist/cjs/components/toggle-icon-button.js

@@ -1,2 +1,2 @@
-"use strict";var c=Object.create;var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var y=(e,o)=>{for(var t in o)n(e,t,{get:o[t],enumerable:!0})},g=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of u(o))!B.call(e,s)&&s!==t&&n(e,s,{get:()=>o[s],enumerable:!(r=d(o,s))||r.enumerable});return e};var T=(e,o,t)=>(t=e!=null?c(P(e)):{},g(o||!e||!e.__esModule?n(t,"default",{value:e,enumerable:!0}):t,e)),b=e=>g(n({},"__esModule",{value:!0}),e);var f={};y(f,{ToggleIconButton:()=>a});module.exports=b(f);var l=T(require("react")),i=require("radix-ui"),p=require("./icon-button.js"),I=require("./_internal/base-button.js");const a=l.forwardRef(({pressed:e,onPressedChange:o,defaultPressed:t,...r},s)=>l.createElement(i.Toggle.Root,{pressed:e,onPressedChange:o,defaultPressed:t,asChild:!0},l.createElement(p.IconButton,{...r,ref:s})));a.displayName="ToggleIconButton";
+"use strict";var h=Object.create;var c=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var v=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},u=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of P(o))!I.call(e,n)&&n!==t&&c(e,n,{get:()=>o[n],enumerable:!(s=T(o,n))||s.enumerable});return e};var C=(e,o,t)=>(t=e!=null?h(B(e)):{},u(o||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),E=e=>u(c({},"__esModule",{value:!0}),e);var R={};v(R,{ToggleIconButton:()=>g});module.exports=E(R);var r=C(require("react")),b=require("radix-ui"),f=require("./icon-button.js"),w=require("./_internal/base-button.js"),y=require("../hooks/use-live-announcer.js");const g=r.forwardRef(({pressed:e,onPressedChange:o,defaultPressed:t,...s},n)=>{const p=(0,y.useLiveAnnouncer)(),d=r.useCallback(()=>{const{"aria-label":l,"aria-labelledby":i,children:a}=s;return l||(i?document.getElementById(i)?.textContent||"Toggle icon button":typeof a=="string"?a:r.isValidElement(a)&&typeof a.props?.children=="string"?a.props.children:"Toggle icon button")},[s]),m=r.useCallback(l=>{const i=d();p(`${i} ${l?"pressed":"unpressed"}`),o?.(l)},[p,o,d]);return r.useEffect(()=>{},[e,o]),r.createElement(b.Toggle.Root,{pressed:e,onPressedChange:m,defaultPressed:t,asChild:!0},r.createElement(f.IconButton,{...s,ref:n}))});g.displayName="ToggleIconButton";
 //# sourceMappingURL=toggle-icon-button.js.map

package/dist/cjs/components/toggle-icon-button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggle-icon-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { IconButton } from './icon-button.js';\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype ToggleIconButtonElement = React.ElementRef<typeof BaseButton>;\n\n// Extract toggle-specific props from Radix Toggle\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;\n\n// Required accessibility props for icon buttons (same as IconButton)\ntype AccessibilityProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string }\n  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n// Combine BaseButton props with Toggle-specific props and accessibility requirements\ninterface ToggleIconButtonProps extends Omit<BaseButtonProps, 'as'> {\n  pressed?: ToggleProps['pressed'];\n  onPressedChange?: ToggleProps['onPressedChange'];\n  defaultPressed?: ToggleProps['defaultPressed'];\n}\n\n// Intersection with accessibility props\ntype ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;\n\nconst ToggleIconButton = React.forwardRef<\n  ToggleIconButtonElement,\n  ToggleIconButtonPropsWithAccessibility\n>(({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n  return (\n    <Toggle.Root\n      pressed={pressed}\n      onPressedChange={onPressedChange}\n      defaultPressed={defaultPressed}\n      asChild\n    >\n      <IconButton {...iconButtonProps} ref={forwardedRef} />\n    </Toggle.Root>\n  );\n});\nToggleIconButton.displayName = 'ToggleIconButton';\n\nexport { ToggleIconButton };\nexport type { ToggleIconButtonPropsWithAccessibility as ToggleIconButtonProps };\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,oBACvBC,EAA2B,4BAC3BC,EAA2B,sCAwB3B,MAAML,EAAmBE,EAAM,WAG7B,CAAC,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAEjER,EAAA,cAAC,SAAO,KAAP,CACC,QAASI,EACT,gBAAiBC,EACjB,eAAgBC,EAChB,QAAO,IAEPN,EAAA,cAAC,cAAY,GAAGO,EAAiB,IAAKC,EAAc,CACtD,CAEH,EACDV,EAAiB,YAAc",
-  "names": ["toggle_icon_button_exports", "__export", "ToggleIconButton", "__toCommonJS", "React", "import_radix_ui", "import_icon_button", "import_base_button", "pressed", "onPressedChange", "defaultPressed", "iconButtonProps", "forwardedRef"]
+  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { IconButton } from './icon-button.js';\nimport { BaseButton } from './_internal/base-button.js';\nimport { useLiveAnnouncer } from '../hooks/use-live-announcer.js';\nimport type { IconButtonProps } from './icon-button.js';\n\ntype ToggleIconButtonElement = React.ElementRef<typeof BaseButton>;\n\n/**\n * Extract toggle-specific props from Radix Toggle\n * These props control the toggle state and behavior\n */\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;\n\n/**\n * Required accessibility props for icon buttons (same as IconButton)\n * Icon buttons must have an accessible name to meet WCAG guidelines\n *\n * Three ways to provide accessibility:\n * 1. aria-label: Direct descriptive text\n * 2. aria-labelledby: Reference to a label element\n * 3. children: Visible text content (fallback)\n */\ntype AccessibilityProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string }\n  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n/**\n * Combine IconButton props with Toggle-specific props\n * Includes tooltip props from IconButton for comprehensive functionality\n */\ninterface ToggleIconButtonProps extends Omit<IconButtonProps, 'as'> {\n  /** Controlled pressed state */\n  pressed?: ToggleProps['pressed'];\n  /** Callback when pressed state changes */\n  onPressedChange?: ToggleProps['onPressedChange'];\n  /** Default pressed state for uncontrolled usage */\n  defaultPressed?: ToggleProps['defaultPressed'];\n}\n\n/**\n * Intersection with accessibility props to ensure compliance\n * This type ensures all ToggleIconButton instances have proper accessibility\n */\ntype ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;\n\n/**\n * ToggleIconButton component for icon buttons that can be pressed/unpressed\n *\n * The ToggleIconButton component extends IconButton with toggle functionality\n * using Radix UI's Toggle primitive. It provides proper accessibility announcements,\n * controlled/uncontrolled state management, and seamless integration with\n * the existing IconButton component.\n *\n * Key features:\n * - Controlled and uncontrolled state management\n * - Live accessibility announcements for screen readers\n * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)\n * - Automatic state validation and warnings\n * - Seamless integration with IconButton props and styling\n * - Proper ARIA attributes for toggle functionality\n * - Built-in tooltip support from IconButton\n *\n * @example\n * ```tsx\n * // Uncontrolled toggle icon button\n * <ToggleIconButton defaultPressed={false} aria-label=\"Toggle notifications\">\n *   <Bell />\n * </ToggleIconButton>\n *\n * // Controlled toggle icon button\n * const [pressed, setPressed] = React.useState(false);\n * <ToggleIconButton\n *   pressed={pressed}\n *   onPressedChange={setPressed}\n *   aria-label=\"Toggle notifications\"\n * >\n *   <Bell />\n * </ToggleIconButton>\n *\n * // Toggle icon button with tooltip\n * <ToggleIconButton\n *   variant=\"solid\"\n *   size=\"3\"\n *   color=\"blue\"\n *   pressed={isActive}\n *   onPressedChange={setIsActive}\n *   aria-label=\"Toggle feature\"\n *   tooltip=\"Toggle this feature on/off\"\n * >\n *   <Star />\n * </ToggleIconButton>\n *\n * // Toggle icon button with aria-labelledby\n * <ToggleIconButton\n *   aria-labelledby=\"notifications-label\"\n *   pressed={notificationsEnabled}\n *   onPressedChange={setNotificationsEnabled}\n * >\n *   <Bell />\n * </ToggleIconButton>\n * <span id=\"notifications-label\">Toggle notifications</span>\n * ```\n */\nconst ToggleIconButton = React.forwardRef<\n  ToggleIconButtonElement,\n  ToggleIconButtonPropsWithAccessibility\n>(({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n  // Get the live announcer for accessibility announcements\n  const announce = useLiveAnnouncer();\n\n  /**\n   * Extract accessible name from various sources for announcements\n   * This ensures screen readers announce meaningful state changes\n   * Priority: aria-label > aria-labelledby > children > fallback\n   */\n  const getAccessibleName = React.useCallback(() => {\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n    } = iconButtonProps;\n\n    // First priority: direct aria-label\n    if (ariaLabel) return ariaLabel;\n\n    // Second priority: referenced label element\n    if (ariaLabelledBy) {\n      const labelElement = document.getElementById(ariaLabelledBy);\n      return labelElement?.textContent || 'Toggle icon button';\n    }\n\n    // Third priority: visible text children\n    if (typeof children === 'string') return children;\n    if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {\n      return (children.props as any).children;\n    }\n\n    // Fallback for edge cases\n    return 'Toggle icon button';\n  }, [iconButtonProps]);\n\n  /**\n   * Memoized handler for state changes with accessibility announcements\n   * This ensures screen readers announce the new state immediately\n   */\n  const handlePressedChange = React.useCallback(\n    (newPressed: boolean) => {\n      const accessibleName = getAccessibleName();\n      // Announce the state change for screen readers\n      announce(`${accessibleName} ${newPressed ? 'pressed' : 'unpressed'}`);\n      // Call the user's change handler\n      onPressedChange?.(newPressed);\n    },\n    [announce, onPressedChange, getAccessibleName],\n  );\n\n  // Development-only warning for controlled/uncontrolled pattern\n  // This helps developers avoid common state management mistakes\n  React.useEffect(() => {\n    if (process.env.NODE_ENV === 'development' && pressed !== undefined && onPressedChange === undefined) {\n      console.warn(\n        'ToggleIconButton: You provided a `pressed` prop without an `onPressedChange` handler. ' +\n          'This will result in a read-only toggle button. If you want the button to be interactive, ' +\n          'you should provide an `onPressedChange` handler.',\n      );\n    }\n  }, [pressed, onPressedChange]);\n\n  // Render the toggle icon button using Radix UI's Toggle primitive\n  // This provides proper ARIA attributes and keyboard navigation\n  // The IconButton component handles accessibility validation internally\n  return (\n    <Toggle.Root\n      pressed={pressed}\n      onPressedChange={handlePressedChange}\n      defaultPressed={defaultPressed}\n      asChild\n    >\n      <IconButton {...iconButtonProps} ref={forwardedRef} />\n    </Toggle.Root>\n  );\n});\nToggleIconButton.displayName = 'ToggleIconButton';\n\nexport { ToggleIconButton };\nexport type { ToggleIconButtonPropsWithAccessibility as ToggleIconButtonProps };\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,oBACvBC,EAA2B,4BAC3BC,EAA2B,sCAC3BC,EAAiC,0CAsGjC,MAAMN,EAAmBE,EAAM,WAG7B,CAAC,CAAE,QAAAK,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAAiB,CAEpF,MAAMC,KAAW,oBAAiB,EAO5BC,EAAoBX,EAAM,YAAY,IAAM,CAChD,KAAM,CACJ,aAAcY,EACd,kBAAmBC,EACnB,SAAAC,CACF,EAAIN,EAGJ,OAAII,IAGAC,EACmB,SAAS,eAAeA,CAAc,GACtC,aAAe,qBAIlC,OAAOC,GAAa,SAAiBA,EACrCd,EAAM,eAAec,CAAQ,GAAK,OAAQA,EAAS,OAAe,UAAa,SACzEA,EAAS,MAAc,SAI1B,qBACT,EAAG,CAACN,CAAe,CAAC,EAMdO,EAAsBf,EAAM,YAC/BgB,GAAwB,CACvB,MAAMC,EAAiBN,EAAkB,EAEzCD,EAAS,GAAGO,CAAc,IAAID,EAAa,UAAY,WAAW,EAAE,EAEpEV,IAAkBU,CAAU,CAC9B,EACA,CAACN,EAAUJ,EAAiBK,CAAiB,CAC/C,EAIA,OAAAX,EAAM,UAAU,IAAM,CAQtB,EAAG,CAACK,EAASC,CAAe,CAAC,EAM3BN,EAAA,cAAC,SAAO,KAAP,CACC,QAASK,EACT,gBAAiBU,EACjB,eAAgBR,EAChB,QAAO,IAEPP,EAAA,cAAC,cAAY,GAAGQ,EAAiB,IAAKC,EAAc,CACtD,CAEJ,CAAC,EACDX,EAAiB,YAAc",
+  "names": ["toggle_icon_button_exports", "__export", "ToggleIconButton", "__toCommonJS", "React", "import_radix_ui", "import_icon_button", "import_base_button", "import_use_live_announcer", "pressed", "onPressedChange", "defaultPressed", "iconButtonProps", "forwardedRef", "announce", "getAccessibleName", "ariaLabel", "ariaLabelledBy", "children", "handlePressedChange", "newPressed", "accessibleName"]
 }

package/dist/cjs/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useLiveAnnouncer } from './use-live-announcer.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/cjs/hooks/index.js

@@ -0,0 +1,2 @@
+"use strict";var u=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var s=(n,e)=>{for(var r in e)u(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!p.call(n,o)&&o!==r&&u(n,o,{get:()=>e[o],enumerable:!(c=i(e,o))||c.enumerable});return n};var v=n=>t(u({},"__esModule",{value:!0}),n);var x={};s(x,{useLiveAnnouncer:()=>f.useLiveAnnouncer});module.exports=v(x);var f=require("./use-live-announcer.js");
+//# sourceMappingURL=index.js.map

package/dist/cjs/hooks/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/index.ts"],
+  "sourcesContent": ["export { useLiveAnnouncer } from './use-live-announcer.js'; "],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,0DAAAE,EAAAF,GAAA,IAAAG,EAAiC",
+  "names": ["hooks_exports", "__export", "__toCommonJS", "import_use_live_announcer"]
+}

package/dist/cjs/hooks/use-live-announcer.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook for making live announcements to screen readers
+ * Creates a hidden aria-live region for announcing dynamic content changes
+ */
+export declare function useLiveAnnouncer(): (message: string) => void;
+//# sourceMappingURL=use-live-announcer.d.ts.map

package/dist/cjs/hooks/use-live-announcer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-live-announcer.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-live-announcer.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB,cA+Be,MAAM,UAcpD"}

package/dist/cjs/hooks/use-live-announcer.js

@@ -0,0 +1,10 @@
+"use strict";var a=Object.create;var o=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of s(e))!m.call(t,i)&&i!==n&&o(t,i,{get:()=>e[i],enumerable:!(r=l(e,i))||r.enumerable});return t};var v=(t,e,n)=>(n=t!=null?a(d(t)):{},c(e||!t||!t.__esModule?o(n,"default",{value:t,enumerable:!0}):n,t)),f=t=>c(o({},"__esModule",{value:!0}),t);var x={};p(x,{useLiveAnnouncer:()=>h});module.exports=f(x);var u=v(require("react"));function h(){return u.useEffect(()=>{let e=document.getElementById("rt-live-announcer");return e||(e=document.createElement("div"),e.id="rt-live-announcer",e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","true"),e.style.cssText=`
+        position: absolute;
+        left: -10000px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+      `,document.body.appendChild(e)),()=>{e&&!e.hasChildNodes()&&e.remove()}},[]),u.useCallback(e=>{const n=document.getElementById("rt-live-announcer");n&&(n.textContent="",setTimeout(()=>{n.textContent=e},100))},[])}
+//# sourceMappingURL=use-live-announcer.js.map

package/dist/cjs/hooks/use-live-announcer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-live-announcer.ts"],
+  "sourcesContent": ["import * as React from 'react';\n\n/**\n * Hook for making live announcements to screen readers\n * Creates a hidden aria-live region for announcing dynamic content changes\n */\nexport function useLiveAnnouncer() {\n\n  // Create aria-live region if it doesn't exist\n  React.useEffect(() => {\n    let liveRegion = document.getElementById('rt-live-announcer');\n    \n    if (!liveRegion) {\n      liveRegion = document.createElement('div');\n      liveRegion.id = 'rt-live-announcer';\n      liveRegion.setAttribute('aria-live', 'polite');\n      liveRegion.setAttribute('aria-atomic', 'true');\n      liveRegion.style.cssText = `\n        position: absolute;\n        left: -10000px;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n      `;\n      document.body.appendChild(liveRegion);\n    }\n\n    return () => {\n      // Clean up on unmount if no other components are using it\n      if (liveRegion && !liveRegion.hasChildNodes()) {\n        liveRegion.remove();\n      }\n    };\n  }, []);\n\n  const announce = React.useCallback((message: string) => {\n    const liveRegion = document.getElementById('rt-live-announcer');\n    if (liveRegion) {\n      // Clear previous announcements\n      liveRegion.textContent = '';\n      \n      // Add new announcement with a small delay to ensure it's announced\n      setTimeout(() => {\n        liveRegion.textContent = message;\n      }, 100);\n    }\n  }, []);\n\n  return announce;\n} "],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBAMhB,SAASF,GAAmB,CAGjC,OAAAE,EAAM,UAAU,IAAM,CACpB,IAAIC,EAAa,SAAS,eAAe,mBAAmB,EAE5D,OAAKA,IACHA,EAAa,SAAS,cAAc,KAAK,EACzCA,EAAW,GAAK,oBAChBA,EAAW,aAAa,YAAa,QAAQ,EAC7CA,EAAW,aAAa,cAAe,MAAM,EAC7CA,EAAW,MAAM,QAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAS3B,SAAS,KAAK,YAAYA,CAAU,GAG/B,IAAM,CAEPA,GAAc,CAACA,EAAW,cAAc,GAC1CA,EAAW,OAAO,CAEtB,CACF,EAAG,CAAC,CAAC,EAEYD,EAAM,YAAaE,GAAoB,CACtD,MAAMD,EAAa,SAAS,eAAe,mBAAmB,EAC1DA,IAEFA,EAAW,YAAc,GAGzB,WAAW,IAAM,CACfA,EAAW,YAAcC,CAC3B,EAAG,GAAG,EAEV,EAAG,CAAC,CAAC,CAGP",
+  "names": ["use_live_announcer_exports", "__export", "useLiveAnnouncer", "__toCommonJS", "React", "liveRegion", "message"]
+}

package/dist/cjs/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/index.js';
+export * from './hooks/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC"}

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(r,o,f,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!d.call(r,e)&&e!==f&&a(r,e,{get:()=>o[e],enumerable:!(x=b(o,e))||x.enumerable});return r},t=(r,o,f)=>(p(r,o,"default"),f&&p(f,o,"default"));var g=r=>p(a({},"__esModule",{value:!0}),r);var m={};module.exports=g(m);t(m,require("./components/index.js"),module.exports);
+"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var t=(r,o,p,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let m of c(o))!d.call(r,m)&&m!==p&&a(r,m,{get:()=>o[m],enumerable:!(x=b(o,m))||x.enumerable});return r},f=(r,o,p)=>(t(r,o,"default"),p&&t(p,o,"default"));var g=r=>t(a({},"__esModule",{value:!0}),r);var e={};module.exports=g(e);f(e,require("./components/index.js"),module.exports);f(e,require("./hooks/index.js"),module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './components/index.js';\n"],
-  "mappings": "iaAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAAE,EAAAF,EAAc,iCAAd",
+  "sourcesContent": ["export * from './components/index.js';\nexport * from './hooks/index.js';\n"],
+  "mappings": "iaAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAAE,EAAAF,EAAc,iCAAd,gBACAE,EAAAF,EAAc,4BADd",
   "names": ["src_exports", "__toCommonJS", "__reExport"]
 }