@kushagradhawan/kookie-ui 0.1.28 → 0.1.30

package/dist/cjs/components/text-field.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/text-field.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { composeRefs } from 'radix-ui/internal';\n\nimport { textFieldRootPropDefs, textFieldSlotPropDefs } from './text-field.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { NotInputTextualAttributes } from '../helpers/input-attributes.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype TextFieldRootElement = React.ElementRef<'input'>;\ntype TextFieldRootOwnProps = GetPropDefTypes<typeof textFieldRootPropDefs> & {\n  defaultValue?: string | number;\n  value?: string | number;\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'hidden'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week';\n};\ntype TextFieldInputProps = ComponentPropsWithout<\n  'input',\n  NotInputTextualAttributes | 'color' | 'defaultValue' | 'size' | 'type' | 'value'\n>;\ninterface TextFieldRootProps extends TextFieldInputProps, MarginProps, TextFieldRootOwnProps {}\nconst TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>(\n  (props, forwardedRef) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const { children, className, color, radius, panelBackground, style, ...inputProps } =\n      extractProps(props, textFieldRootPropDefs, marginPropDefs);\n    return (\n      <div\n        data-accent-color={color}\n        data-radius={radius}\n        data-panel-background={panelBackground}\n        style={style}\n        className={classNames('rt-TextFieldRoot', className)}\n        onPointerDown={(event) => {\n          const target = event.target as HTMLElement;\n          if (target.closest('input, button, a')) return;\n\n          const input = inputRef.current;\n          if (!input) return;\n\n          // Same selector as in the CSS to find the right slot\n          const isRightSlot = target.closest(`\n            .rt-TextFieldSlot[data-side='right'],\n            .rt-TextFieldSlot:not([data-side='right']) ~ .rt-TextFieldSlot:not([data-side='left'])\n          `);\n\n          const cursorPosition = isRightSlot ? input.value.length : 0;\n\n          requestAnimationFrame(() => {\n            // Only some input types support this, browsers will throw an error if not supported\n            // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#:~:text=Note%20that%20according,not%20support%20selection%22.\n            try {\n              input.setSelectionRange(cursorPosition, cursorPosition);\n            } catch {}\n            input.focus();\n          });\n        }}\n      >\n        <input\n          spellCheck=\"false\"\n          {...inputProps}\n          ref={composeRefs(inputRef, forwardedRef)}\n          className=\"rt-reset rt-TextFieldInput\"\n        />\n        {children}\n      </div>\n    );\n  },\n);\nTextFieldRoot.displayName = 'TextField.Root';\n\ntype TextFieldSlotElement = React.ElementRef<'div'>;\ntype TextFieldSlotOwnProps = GetPropDefTypes<typeof textFieldSlotPropDefs>;\ninterface TextFieldSlotProps\n  extends ComponentPropsWithout<'div', RemovedProps>,\n    TextFieldSlotOwnProps {}\nconst TextFieldSlot = React.forwardRef<TextFieldSlotElement, TextFieldSlotProps>(\n  (props, forwardedRef) => {\n    const { className, color, side, ...slotProps } = extractProps(props, textFieldSlotPropDefs);\n    return (\n      <div\n        data-accent-color={color}\n        data-side={side}\n        {...slotProps}\n        ref={forwardedRef}\n        className={classNames('rt-TextFieldSlot', className)}\n      />\n    );\n  },\n);\nTextFieldSlot.displayName = 'TextField.Slot';\n\nexport { TextFieldRoot as Root, TextFieldSlot as Slot };\nexport type { TextFieldRootProps as RootProps, TextFieldSlotProps as SlotProps };\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,SAAAC,IAAA,eAAAC,EAAAJ,GAEA,IAAAK,EAAuB,oBACvBC,EAAuB,yBACvBC,EAA4B,6BAE5BC,EAA6D,iCAC7DC,EAA6B,uCAC7BC,EAA+B,oCA+B/B,MAAMR,EAAgBG,EAAM,WAC1B,CAACM,EAAOC,IAAiB,CACvB,MAAMC,EAAWR,EAAM,OAAyB,IAAI,EAC9C,CAAE,SAAAS,EAAU,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,gBAAAC,EAAiB,MAAAC,EAAO,GAAGC,CAAW,KAChF,gBAAaT,EAAO,wBAAuB,gBAAc,EAC3D,OACEN,EAAA,cAAC,OACC,oBAAmBW,EACnB,cAAaC,EACb,wBAAuBC,EACvB,MAAOC,EACP,aAAW,EAAAE,SAAW,mBAAoBN,CAAS,EACnD,cAAgBO,GAAU,CACxB,MAAMC,EAASD,EAAM,OACrB,GAAIC,EAAO,QAAQ,kBAAkB,EAAG,OAExC,MAAMC,EAAQX,EAAS,QACvB,GAAI,CAACW,EAAO,OAQZ,MAAMC,EALcF,EAAO,QAAQ;AAAA;AAAA;AAAA,WAGlC,EAEoCC,EAAM,MAAM,OAAS,EAE1D,sBAAsB,IAAM,CAG1B,GAAI,CACFA,EAAM,kBAAkBC,EAAgBA,CAAc,CACxD,MAAQ,CAAC,CACTD,EAAM,MAAM,CACd,CAAC,CACH,GAEAnB,EAAA,cAAC,SACC,WAAW,QACV,GAAGe,EACJ,OAAK,eAAYP,EAAUD,CAAY,EACvC,UAAU,6BACZ,EACCE,CACH,CAEJ,CACF,EACAZ,EAAc,YAAc,iBAO5B,MAAMC,EAAgBE,EAAM,WAC1B,CAACM,EAAOC,IAAiB,CACvB,KAAM,CAAE,UAAAG,EAAW,MAAAC,EAAO,KAAAU,EAAM,GAAGC,CAAU,KAAI,gBAAahB,EAAO,uBAAqB,EAC1F,OACEN,EAAA,cAAC,OACC,oBAAmBW,EACnB,YAAWU,EACV,GAAGC,EACJ,IAAKf,EACL,aAAW,EAAAS,SAAW,mBAAoBN,CAAS,EACrD,CAEJ,CACF,EACAZ,EAAc,YAAc",
-  "names": ["text_field_exports", "__export", "TextFieldRoot", "TextFieldSlot", "__toCommonJS", "React", "import_classnames", "import_internal", "import_text_field_props", "import_extract_props", "import_margin_props", "props", "forwardedRef", "inputRef", "children", "className", "color", "radius", "panelBackground", "style", "inputProps", "classNames", "event", "target", "input", "cursorPosition", "side", "slotProps"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { composeRefs } from 'radix-ui/internal';\n\nimport { textFieldRootPropDefs, textFieldSlotPropDefs } from './text-field.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { NotInputTextualAttributes } from '../helpers/input-attributes.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype TextFieldRootElement = React.ElementRef<'input'>;\ntype TextFieldRootOwnProps = GetPropDefTypes<typeof textFieldRootPropDefs> & {\n  defaultValue?: string | number;\n  value?: string | number;\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'hidden'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'\n    | 'week';\n};\ntype TextFieldInputProps = ComponentPropsWithout<\n  'input',\n  NotInputTextualAttributes | 'color' | 'defaultValue' | 'size' | 'type' | 'value'\n>;\ninterface TextFieldRootProps extends TextFieldInputProps, MarginProps, TextFieldRootOwnProps {}\nconst TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>(\n  (props, forwardedRef) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const { children, className, color, radius, panelBackground, material, style, ...inputProps } =\n      extractProps(props, textFieldRootPropDefs, marginPropDefs);\n    const effectiveMaterial = material || panelBackground;\n\n    // Generate unique IDs for accessibility\n    const errorId = React.useId();\n\n    // Determine invalid state\n    const isInvalid = inputProps.error || inputProps.isInvalid;\n\n    const { 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby } = inputProps;\n    \n    // Build aria-describedby string\n    const describedBy = React.useMemo(() => {\n      const parts = [];\n      if (inputProps.errorMessage) parts.push(errorId);\n      if (ariaDescribedby) parts.push(ariaDescribedby);\n      return parts.length > 0 ? parts.join(' ') : undefined;\n    }, [inputProps.errorMessage, ariaDescribedby, errorId]);\n\n    // Build aria attributes\n    const ariaProps = React.useMemo(\n      () => ({\n        'aria-invalid': isInvalid,\n        'aria-describedby': describedBy,\n        'aria-labelledby': ariaLabelledby,\n      }),\n      [isInvalid, describedBy, ariaLabelledby],\n    );\n\n    // Filter out our custom props to avoid DOM warnings\n    const {\n      error,\n      errorMessage,\n      isInvalid: _isInvalid,\n      required,\n      'aria-describedby': _ariaDescribedby,\n      'aria-labelledby': _ariaLabelledby,\n      ...nativeInputProps\n    } = inputProps;\n\n    // Memoized pointer event handler\n    const handlePointerDown = React.useCallback((event: React.PointerEvent) => {\n      const target = event.target as HTMLElement;\n      if (target.closest('input, button, a')) return;\n\n      const input = inputRef.current;\n      if (!input) return;\n\n      // Same selector as in the CSS to find the right slot\n      const isRightSlot = target.closest(`\n        .rt-TextFieldSlot[data-side='right'],\n        .rt-TextFieldSlot:not([data-side='right']) ~ .rt-TextFieldSlot:not([data-side='left'])\n      `);\n\n      const cursorPosition = isRightSlot ? input.value.length : 0;\n\n      requestAnimationFrame(() => {\n        // Only some input types support this, browsers will throw an error if not supported\n        // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#:~:text=Note%20that%20according,not%20support%20selection%22.\n        try {\n          input.setSelectionRange(cursorPosition, cursorPosition);\n        } catch {}\n        input.focus();\n      });\n    }, []);\n\n    return (\n      <div\n        data-accent-color={color}\n        data-radius={radius}\n        data-panel-background={effectiveMaterial}\n        data-material={effectiveMaterial}\n        style={style}\n        className={classNames('rt-TextFieldRoot', className, {\n          'rt-error': isInvalid,\n        })}\n        onPointerDown={handlePointerDown}\n      >\n        <input\n          spellCheck=\"false\"\n          {...nativeInputProps}\n          {...ariaProps}\n          ref={composeRefs(inputRef, forwardedRef)}\n          className=\"rt-reset rt-TextFieldInput\"\n        />\n        {children}\n        {inputProps.errorMessage && (\n          <div id={errorId} className=\"rt-TextFieldErrorMessage\" role=\"alert\" aria-live=\"polite\">\n            {inputProps.errorMessage}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nTextFieldRoot.displayName = 'TextField.Root';\n\ntype TextFieldSlotElement = React.ElementRef<'div'>;\ntype TextFieldSlotOwnProps = GetPropDefTypes<typeof textFieldSlotPropDefs>;\ninterface TextFieldSlotProps\n  extends ComponentPropsWithout<'div', RemovedProps>,\n    TextFieldSlotOwnProps {}\nconst TextFieldSlot = React.forwardRef<TextFieldSlotElement, TextFieldSlotProps>(\n  (props, forwardedRef) => {\n    const { className, color, side, ...slotProps } = extractProps(props, textFieldSlotPropDefs);\n    return (\n      <div\n        data-accent-color={color}\n        data-side={side}\n        {...slotProps}\n        ref={forwardedRef}\n        className={classNames('rt-TextFieldSlot', className)}\n      />\n    );\n  },\n);\nTextFieldSlot.displayName = 'TextField.Slot';\n\nexport { TextFieldRoot as Root, TextFieldSlot as Slot };\nexport type { TextFieldRootProps as RootProps, TextFieldSlotProps as SlotProps };\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,SAAAC,IAAA,eAAAC,EAAAJ,GAEA,IAAAK,EAAuB,oBACvBC,EAAuB,yBACvBC,EAA4B,6BAE5BC,EAA6D,iCAC7DC,EAA6B,uCAC7BC,EAA+B,oCA+B/B,MAAMR,EAAgBG,EAAM,WAC1B,CAACM,EAAOC,IAAiB,CACvB,MAAMC,EAAWR,EAAM,OAAyB,IAAI,EAC9C,CAAE,SAAAS,EAAU,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,gBAAAC,EAAiB,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAW,KAC1F,gBAAaV,EAAO,wBAAuB,gBAAc,EACrDW,EAAoBH,GAAYD,EAGhCK,EAAUlB,EAAM,MAAM,EAGtBmB,EAAYH,EAAW,OAASA,EAAW,UAE3C,CAAE,mBAAoBI,EAAiB,kBAAmBC,CAAe,EAAIL,EAG7EM,EAActB,EAAM,QAAQ,IAAM,CACtC,MAAMuB,EAAQ,CAAC,EACf,OAAIP,EAAW,cAAcO,EAAM,KAAKL,CAAO,EAC3CE,GAAiBG,EAAM,KAAKH,CAAe,EACxCG,EAAM,OAAS,EAAIA,EAAM,KAAK,GAAG,EAAI,MAC9C,EAAG,CAACP,EAAW,aAAcI,EAAiBF,CAAO,CAAC,EAGhDM,EAAYxB,EAAM,QACtB,KAAO,CACL,eAAgBmB,EAChB,mBAAoBG,EACpB,kBAAmBD,CACrB,GACA,CAACF,EAAWG,EAAaD,CAAc,CACzC,EAGM,CACJ,MAAAI,EACA,aAAAC,EACA,UAAWC,EACX,SAAAC,EACA,mBAAoBC,EACpB,kBAAmBC,EACnB,GAAGC,CACL,EAAIf,EAGEgB,EAAoBhC,EAAM,YAAaiC,GAA8B,CACzE,MAAMC,EAASD,EAAM,OACrB,GAAIC,EAAO,QAAQ,kBAAkB,EAAG,OAExC,MAAMC,EAAQ3B,EAAS,QACvB,GAAI,CAAC2B,EAAO,OAQZ,MAAMC,EALcF,EAAO,QAAQ;AAAA;AAAA;AAAA,OAGlC,EAEoCC,EAAM,MAAM,OAAS,EAE1D,sBAAsB,IAAM,CAG1B,GAAI,CACFA,EAAM,kBAAkBC,EAAgBA,CAAc,CACxD,MAAQ,CAAC,CACTD,EAAM,MAAM,CACd,CAAC,CACH,EAAG,CAAC,CAAC,EAEL,OACEnC,EAAA,cAAC,OACC,oBAAmBW,EACnB,cAAaC,EACb,wBAAuBK,EACvB,gBAAeA,EACf,MAAOF,EACP,aAAW,EAAAsB,SAAW,mBAAoB3B,EAAW,CACnD,WAAYS,CACd,CAAC,EACD,cAAea,GAEfhC,EAAA,cAAC,SACC,WAAW,QACV,GAAG+B,EACH,GAAGP,EACJ,OAAK,eAAYhB,EAAUD,CAAY,EACvC,UAAU,6BACZ,EACCE,EACAO,EAAW,cACVhB,EAAA,cAAC,OAAI,GAAIkB,EAAS,UAAU,2BAA2B,KAAK,QAAQ,YAAU,UAC3EF,EAAW,YACd,CAEJ,CAEJ,CACF,EACAnB,EAAc,YAAc,iBAO5B,MAAMC,EAAgBE,EAAM,WAC1B,CAACM,EAAOC,IAAiB,CACvB,KAAM,CAAE,UAAAG,EAAW,MAAAC,EAAO,KAAA2B,EAAM,GAAGC,CAAU,KAAI,gBAAajC,EAAO,uBAAqB,EAC1F,OACEN,EAAA,cAAC,OACC,oBAAmBW,EACnB,YAAW2B,EACV,GAAGC,EACJ,IAAKhC,EACL,aAAW,EAAA8B,SAAW,mBAAoB3B,CAAS,EACrD,CAEJ,CACF,EACAZ,EAAc,YAAc",
+  "names": ["text_field_exports", "__export", "TextFieldRoot", "TextFieldSlot", "__toCommonJS", "React", "import_classnames", "import_internal", "import_text_field_props", "import_extract_props", "import_margin_props", "props", "forwardedRef", "inputRef", "children", "className", "color", "radius", "panelBackground", "material", "style", "inputProps", "effectiveMaterial", "errorId", "isInvalid", "ariaDescribedby", "ariaLabelledby", "describedBy", "parts", "ariaProps", "error", "errorMessage", "_isInvalid", "required", "_ariaDescribedby", "_ariaLabelledby", "nativeInputProps", "handlePointerDown", "event", "target", "input", "cursorPosition", "classNames", "side", "slotProps"]
 }

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

@@ -4,6 +4,11 @@ declare const textFieldRootPropDefs: {
         values: readonly ["solid", "translucent"];
         default: undefined;
     };
+    material: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: undefined;
+    };
     radius: {
         type: "enum";
         values: readonly ["none", "small", "medium", "large", "full"];
@@ -27,6 +32,30 @@ declare const textFieldRootPropDefs: {
         values: readonly ["classic", "surface", "soft", "ghost", "outline"];
         default: "surface";
     };
+    error: {
+        type: "boolean";
+        default: false;
+    };
+    errorMessage: {
+        type: "string";
+        default: undefined;
+    };
+    isInvalid: {
+        type: "boolean";
+        default: false;
+    };
+    required: {
+        type: "boolean";
+        default: false;
+    };
+    'aria-describedby': {
+        type: "string";
+        default: undefined;
+    };
+    'aria-labelledby': {
+        type: "string";
+        default: undefined;
+    };
 };
 declare const textFieldSlotPropDefs: {
     gap: {

package/dist/cjs/components/text-field.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.props.d.ts","sourceRoot":"","sources":["../../../src/components/text-field.props.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAU1B,CAAC;AAIF,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa1B,CAAC;AAEF,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"text-field.props.d.ts","sourceRoot":"","sources":["../../../src/components/text-field.props.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B1B,CAAC;AAIF,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa1B,CAAC;AAEF,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/cjs/components/text-field.props.js

@@ -1,2 +1,2 @@
-"use strict";var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var D=(s,e)=>{for(var o in e)t(s,o,{get:e[o],enumerable:!0})},P=(s,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of c(e))!m.call(s,p)&&p!==o&&t(s,p,{get:()=>e[p],enumerable:!(n=u(e,p))||n.enumerable});return s};var g=s=>P(t({},"__esModule",{value:!0}),s);var b={};D(b,{textFieldRootPropDefs:()=>d,textFieldSlotPropDefs:()=>l});module.exports=g(b);var a=require("../props/color.prop.js"),r=require("../props/padding.props.js"),f=require("../props/radius.prop.js"),i=require("./flex.props.js");const y=["1","2","3"],v=["classic","surface","soft","ghost","outline"],x=["solid","translucent"],d={size:{type:"enum",className:"rt-r-size",values:y,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:v,default:"surface"},...a.colorPropDef,...f.radiusPropDef,panelBackground:{type:"enum",values:x,default:void 0}},z=["left","right"],l={side:{type:"enum",values:z},...a.colorPropDef,gap:i.flexPropDefs.gap,px:r.paddingPropDefs.px,pl:r.paddingPropDefs.pl,pr:r.paddingPropDefs.pr};
+"use strict";var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var y=(r,e)=>{for(var a in e)t(r,a,{get:e[a],enumerable:!0})},g=(r,e,a,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of c(e))!m.call(r,s)&&s!==a&&t(r,s,{get:()=>e[s],enumerable:!(p=u(e,s))||p.enumerable});return r};var D=r=>g(t({},"__esModule",{value:!0}),r);var k={};y(k,{textFieldRootPropDefs:()=>d,textFieldSlotPropDefs:()=>l});module.exports=D(k);var n=require("../props/color.prop.js"),o=require("../props/padding.props.js"),f=require("../props/radius.prop.js"),i=require("./flex.props.js");const P=["1","2","3"],b=["classic","surface","soft","ghost","outline"],v=["solid","translucent"],x=["solid","translucent"],d={size:{type:"enum",className:"rt-r-size",values:P,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:b,default:"surface"},error:{type:"boolean",default:!1},errorMessage:{type:"string",default:void 0},isInvalid:{type:"boolean",default:!1},required:{type:"boolean",default:!1},"aria-describedby":{type:"string",default:void 0},"aria-labelledby":{type:"string",default:void 0},...n.colorPropDef,...f.radiusPropDef,panelBackground:{type:"enum",values:v,default:void 0},material:{type:"enum",values:x,default:void 0}},z=["left","right"],l={side:{type:"enum",values:z},...n.colorPropDef,gap:i.flexPropDefs.gap,px:o.paddingPropDefs.px,pl:o.paddingPropDefs.pl,pr:o.paddingPropDefs.pr};
 //# sourceMappingURL=text-field.props.js.map

package/dist/cjs/components/text-field.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/text-field.props.tsx"],
-  "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\nimport { paddingPropDefs } from '../props/padding.props.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\nimport { flexPropDefs } from './flex.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'surface', 'soft', 'ghost', 'outline'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\nconst textFieldRootPropDefs = {\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  ...colorPropDef,\n  ...radiusPropDef,\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n};\n\nconst sides = ['left', 'right'] as const;\n\nconst textFieldSlotPropDefs = {\n  side: { type: 'enum', values: sides },\n  ...colorPropDef,\n  gap: flexPropDefs.gap,\n  px: paddingPropDefs.px,\n  pl: paddingPropDefs.pl,\n  pr: paddingPropDefs.pr,\n} satisfies {\n  side: PropDef<(typeof sides)[number]>;\n  gap: typeof flexPropDefs.gap;\n  px: typeof paddingPropDefs.px;\n  pl: typeof paddingPropDefs.pl;\n  pr: typeof paddingPropDefs.pr;\n};\n\nexport { textFieldRootPropDefs, textFieldSlotPropDefs };\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,2BAAAE,EAAA,0BAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAA6B,kCAC7BC,EAAgC,qCAChCC,EAA8B,mCAC9BC,EAA6B,2BAI7B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,UAAW,OAAQ,QAAS,SAAS,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAE1CT,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQO,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,GAAG,eACH,GAAG,gBACH,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,CAChF,EAMMC,EAAQ,CAAC,OAAQ,OAAO,EAExBT,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,OAAQS,CAAM,EACpC,GAAG,eACH,IAAK,eAAa,IAClB,GAAI,kBAAgB,GACpB,GAAI,kBAAgB,GACpB,GAAI,kBAAgB,EACtB",
-  "names": ["text_field_props_exports", "__export", "textFieldRootPropDefs", "textFieldSlotPropDefs", "__toCommonJS", "import_color_prop", "import_padding_props", "import_radius_prop", "import_flex_props", "sizes", "variants", "panelBackgrounds", "sides"]
+  "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\nimport { paddingPropDefs } from '../props/padding.props.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\nimport { flexPropDefs } from './flex.props.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'surface', 'soft', 'ghost', 'outline'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\nconst textFieldRootPropDefs = {\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n  // Error and validation props\n  error: { type: 'boolean', default: false },\n  errorMessage: { type: 'string', default: undefined },\n  isInvalid: { type: 'boolean', default: false },\n  required: { type: 'boolean', default: false },\n  // Accessibility props\n  'aria-describedby': { type: 'string', default: undefined },\n  'aria-labelledby': { type: 'string', default: undefined },\n  ...colorPropDef,\n  ...radiusPropDef,\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  material: { type: 'enum', values: materials, default: undefined },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  error: PropDef<boolean>;\n  errorMessage: PropDef<string | undefined>;\n  isInvalid: PropDef<boolean>;\n  required: PropDef<boolean>;\n  'aria-describedby': PropDef<string | undefined>;\n  'aria-labelledby': PropDef<string | undefined>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n};\n\nconst sides = ['left', 'right'] as const;\n\nconst textFieldSlotPropDefs = {\n  side: { type: 'enum', values: sides },\n  ...colorPropDef,\n  gap: flexPropDefs.gap,\n  px: paddingPropDefs.px,\n  pl: paddingPropDefs.pl,\n  pr: paddingPropDefs.pr,\n} satisfies {\n  side: PropDef<(typeof sides)[number]>;\n  gap: typeof flexPropDefs.gap;\n  px: typeof paddingPropDefs.px;\n  pl: typeof paddingPropDefs.pl;\n  pr: typeof paddingPropDefs.pr;\n};\n\nexport { textFieldRootPropDefs, textFieldSlotPropDefs };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,2BAAAE,EAAA,0BAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAA6B,kCAC7BC,EAAgC,qCAChCC,EAA8B,mCAC9BC,EAA6B,2BAI7B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,UAAW,OAAQ,QAAS,SAAS,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAEnCV,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQO,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EAEvF,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,EACzC,aAAc,CAAE,KAAM,SAAU,QAAS,MAAU,EACnD,UAAW,CAAE,KAAM,UAAW,QAAS,EAAM,EAC7C,SAAU,CAAE,KAAM,UAAW,QAAS,EAAM,EAE5C,mBAAoB,CAAE,KAAM,SAAU,QAAS,MAAU,EACzD,kBAAmB,CAAE,KAAM,SAAU,QAAS,MAAU,EACxD,GAAG,eACH,GAAG,gBACH,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,EAC9E,SAAU,CAAE,KAAM,OAAQ,OAAQC,EAAW,QAAS,MAAU,CAClE,EAaMC,EAAQ,CAAC,OAAQ,OAAO,EAExBV,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,OAAQU,CAAM,EACpC,GAAG,eACH,IAAK,eAAa,IAClB,GAAI,kBAAgB,GACpB,GAAI,kBAAgB,GACpB,GAAI,kBAAgB,EACtB",
+  "names": ["text_field_props_exports", "__export", "textFieldRootPropDefs", "textFieldSlotPropDefs", "__toCommonJS", "import_color_prop", "import_padding_props", "import_radius_prop", "import_flex_props", "sizes", "variants", "panelBackgrounds", "materials", "sides"]
 }

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