@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

package/dist/esm/components/text-area.js

@@ -1,2 +1,2 @@
-import*as e from"react";import f from"classnames";import{textAreaPropDefs as x}from"./text-area.props.js";import{extractProps as l}from"../helpers/extract-props.js";import{marginPropDefs as P}from"../props/margin.props.js";const r=e.forwardRef((t,o)=>{const{className:a,color:p,radius:s,panelBackground:m,style:n,...i}=l(t,x,P);return e.createElement("div",{"data-accent-color":p,"data-radius":s,"data-panel-background":m,className:f("rt-TextAreaRoot",a),style:n},e.createElement("textarea",{className:"rt-reset rt-TextAreaInput",ref:o,...i}))});r.displayName="TextArea";export{r as TextArea};
+import*as r from"react";import A from"classnames";import{textAreaPropDefs as g}from"./text-area.props.js";import{extractProps as T}from"../helpers/extract-props.js";import{marginPropDefs as M}from"../props/margin.props.js";const l=r.forwardRef((d,m)=>{const{className:c,color:f,radius:x,panelBackground:y,material:b,style:u,...e}=T(d,g,M),i=b||y,t=r.useId(),{"aria-describedby":o,"aria-labelledby":p}=e,s=e.error||e.isInvalid,n=r.useMemo(()=>{const a=[];return e.errorMessage&&a.push(t),o&&a.push(o),a.length>0?a.join(" "):void 0},[e.errorMessage,o,t]),P=r.useMemo(()=>({"aria-invalid":s,"aria-describedby":n,"aria-labelledby":p}),[s,n,p]),{error:D,errorMessage:I,isInvalid:h,required:N,"aria-describedby":j,"aria-labelledby":E,...v}=e;return r.createElement("div",{"data-accent-color":f,"data-radius":x,"data-panel-background":i,"data-material":i,className:A("rt-TextAreaRoot",c,{"rt-error":s}),style:u},r.createElement("textarea",{className:"rt-reset rt-TextAreaInput",ref:m,...v,...P}),e.errorMessage&&r.createElement("div",{id:t,className:"rt-TextAreaErrorMessage",role:"alert","aria-live":"polite"},e.errorMessage))});l.displayName="TextArea";export{l as TextArea};
 //# sourceMappingURL=text-area.js.map

package/dist/esm/components/text-area.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/text-area.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { textAreaPropDefs } from './text-area.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype TextAreaElement = React.ElementRef<'textarea'>;\ntype TextAreaOwnProps = GetPropDefTypes<typeof textAreaPropDefs> & {\n  defaultValue?: string;\n  value?: string;\n};\ninterface TextAreaProps\n  extends ComponentPropsWithout<'textarea', RemovedProps | 'size' | 'value'>,\n    MarginProps,\n    TextAreaOwnProps {}\nconst TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwardedRef) => {\n  const { className, color, radius, panelBackground, style, ...textAreaProps } = extractProps(\n    props,\n    textAreaPropDefs,\n    marginPropDefs,\n  );\n  return (\n    <div\n      data-accent-color={color}\n      data-radius={radius}\n      data-panel-background={panelBackground}\n      className={classNames('rt-TextAreaRoot', className)}\n      style={style}\n    >\n      <textarea className=\"rt-reset rt-TextAreaInput\" ref={forwardedRef} {...textAreaProps} />\n    </div>\n  );\n});\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAS,oBAAAC,MAAwB,uBACjC,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAe/B,MAAMC,EAAWL,EAAM,WAA2C,CAACM,EAAOC,IAAiB,CACzF,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,gBAAAC,EAAiB,MAAAC,EAAO,GAAGC,CAAc,EAAIV,EAC7EG,EACAJ,EACAE,CACF,EACA,OACEJ,EAAA,cAAC,OACC,oBAAmBS,EACnB,cAAaC,EACb,wBAAuBC,EACvB,UAAWV,EAAW,kBAAmBO,CAAS,EAClD,MAAOI,GAEPZ,EAAA,cAAC,YAAS,UAAU,4BAA4B,IAAKO,EAAe,GAAGM,EAAe,CACxF,CAEJ,CAAC,EACDR,EAAS,YAAc",
-  "names": ["React", "classNames", "textAreaPropDefs", "extractProps", "marginPropDefs", "TextArea", "props", "forwardedRef", "className", "color", "radius", "panelBackground", "style", "textAreaProps"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { textAreaPropDefs } from './text-area.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype TextAreaElement = React.ElementRef<'textarea'>;\ntype TextAreaOwnProps = GetPropDefTypes<typeof textAreaPropDefs> & {\n  defaultValue?: string;\n  value?: string;\n};\ninterface TextAreaProps\n  extends ComponentPropsWithout<'textarea', RemovedProps | 'size' | 'value'>,\n    MarginProps,\n    TextAreaOwnProps {}\n\nconst TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwardedRef) => {\n  const { className, color, radius, panelBackground, material, style, ...textAreaProps } =\n    extractProps(props, textAreaPropDefs, marginPropDefs);\n  const effectiveMaterial = material || panelBackground;\n\n  // Generate unique IDs for accessibility\n  const errorId = React.useId();\n\n  const { 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby } = textAreaProps;\n  \n  // Determine invalid state\n  const isInvalid = textAreaProps.error || textAreaProps.isInvalid;\n\n  // Build aria-describedby string\n  const describedBy = React.useMemo(() => {\n    const parts = [];\n    if (textAreaProps.errorMessage) parts.push(errorId);\n    if (ariaDescribedby) parts.push(ariaDescribedby);\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  }, [textAreaProps.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    ...nativeTextAreaProps\n  } = textAreaProps;\n\n  return (\n    <div\n      data-accent-color={color}\n      data-radius={radius}\n      data-panel-background={effectiveMaterial}\n      data-material={effectiveMaterial}\n      className={classNames('rt-TextAreaRoot', className, {\n        'rt-error': isInvalid,\n      })}\n      style={style}\n    >\n      <textarea\n        className=\"rt-reset rt-TextAreaInput\"\n        ref={forwardedRef}\n        {...nativeTextAreaProps}\n        {...ariaProps}\n      />\n      {textAreaProps.errorMessage && (\n        <div id={errorId} className=\"rt-TextAreaErrorMessage\" role=\"alert\" aria-live=\"polite\">\n          {textAreaProps.errorMessage}\n        </div>\n      )}\n    </div>\n  );\n});\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAS,oBAAAC,MAAwB,uBACjC,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAgB/B,MAAMC,EAAWL,EAAM,WAA2C,CAACM,EAAOC,IAAiB,CACzF,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,gBAAAC,EAAiB,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAc,EACnFX,EAAaG,EAAOJ,EAAkBE,CAAc,EAChDW,EAAoBH,GAAYD,EAGhCK,EAAUhB,EAAM,MAAM,EAEtB,CAAE,mBAAoBiB,EAAiB,kBAAmBC,CAAe,EAAIJ,EAG7EK,EAAYL,EAAc,OAASA,EAAc,UAGjDM,EAAcpB,EAAM,QAAQ,IAAM,CACtC,MAAMqB,EAAQ,CAAC,EACf,OAAIP,EAAc,cAAcO,EAAM,KAAKL,CAAO,EAC9CC,GAAiBI,EAAM,KAAKJ,CAAe,EACxCI,EAAM,OAAS,EAAIA,EAAM,KAAK,GAAG,EAAI,MAC9C,EAAG,CAACP,EAAc,aAAcG,EAAiBD,CAAO,CAAC,EAGnDM,EAAYtB,EAAM,QACtB,KAAO,CACL,eAAgBmB,EAChB,mBAAoBC,EACpB,kBAAmBF,CACrB,GACA,CAACC,EAAWC,EAAaF,CAAc,CACzC,EAGM,CACJ,MAAAK,EACA,aAAAC,EACA,UAAWC,EACX,SAAAC,EACA,mBAAoBC,EACpB,kBAAmBC,EACnB,GAAGC,CACL,EAAIf,EAEJ,OACEd,EAAA,cAAC,OACC,oBAAmBS,EACnB,cAAaC,EACb,wBAAuBK,EACvB,gBAAeA,EACf,UAAWd,EAAW,kBAAmBO,EAAW,CAClD,WAAYW,CACd,CAAC,EACD,MAAON,GAEPb,EAAA,cAAC,YACC,UAAU,4BACV,IAAKO,EACJ,GAAGsB,EACH,GAAGP,EACN,EACCR,EAAc,cACbd,EAAA,cAAC,OAAI,GAAIgB,EAAS,UAAU,0BAA0B,KAAK,QAAQ,YAAU,UAC1EF,EAAc,YACjB,CAEJ,CAEJ,CAAC,EAEDT,EAAS,YAAc",
+  "names": ["React", "classNames", "textAreaPropDefs", "extractProps", "marginPropDefs", "TextArea", "props", "forwardedRef", "className", "color", "radius", "panelBackground", "material", "style", "textAreaProps", "effectiveMaterial", "errorId", "ariaDescribedby", "ariaLabelledby", "isInvalid", "describedBy", "parts", "ariaProps", "error", "errorMessage", "_isInvalid", "required", "_ariaDescribedby", "_ariaLabelledby", "nativeTextAreaProps"]
 }

package/dist/esm/components/text-area.props.d.ts

@@ -33,6 +33,35 @@ declare const textAreaPropDefs: {
         values: readonly ["solid", "translucent"];
         default: undefined;
     };
+    material: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: undefined;
+    };
+    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;
+    };
 };
 export { textAreaPropDefs };
 //# sourceMappingURL=text-area.props.d.ts.map

package/dist/esm/components/text-area.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.props.d.ts","sourceRoot":"","sources":["../../../src/components/text-area.props.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYjB,CAAC;AAEN,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"text-area.props.d.ts","sourceRoot":"","sources":["../../../src/components/text-area.props.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BrB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/esm/components/text-area.props.js

@@ -1,2 +1,2 @@
-import{colorPropDef as e}from"../props/color.prop.js";import{radiusPropDef as s}from"../props/radius.prop.js";const r=["1","2","3"],a=["classic","surface","soft","outline","ghost"],o=["none","vertical","horizontal","both"],t=["solid","translucent"],n={size:{type:"enum",className:"rt-r-size",values:r,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:a,default:"surface"},resize:{type:"enum",className:"rt-r-resize",values:o,responsive:!0},panelBackground:{type:"enum",values:t,default:void 0},...e,...s};export{n as textAreaPropDefs};
+import{colorPropDef as e}from"../props/color.prop.js";import{radiusPropDef as r}from"../props/radius.prop.js";const a=["1","2","3"],s=["classic","surface","soft","outline","ghost"],n=["none","vertical","horizontal","both"],t=["solid","translucent"],o=["solid","translucent"],i={size:{type:"enum",className:"rt-r-size",values:a,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:s,default:"surface"},resize:{type:"enum",className:"rt-r-resize",values:n,responsive:!0},panelBackground:{type:"enum",values:t,default:void 0},material:{type:"enum",values:o,default:void 0},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},...e,...r};export{i as textAreaPropDefs};
 //# sourceMappingURL=text-area.props.js.map

package/dist/esm/components/text-area.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/text-area.props.tsx"],
-  "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'surface', 'soft', 'outline', 'ghost'] as const;\nconst resizeValues = ['none', 'vertical', 'horizontal', 'both'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\n// prettier-ignore\nconst textAreaPropDefs = {\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  resize: { type: 'enum', className: 'rt-r-resize', values: resizeValues,  responsive: true },\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  ...colorPropDef,\n  ...radiusPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  resize: PropDef<(typeof resizeValues)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n    };\n\nexport { textAreaPropDefs };\n"],
-  "mappings": "AAAA,OAAS,gBAAAA,MAAoB,yBAC7B,OAAS,iBAAAC,MAAqB,0BAI9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,UAAW,OAAQ,UAAW,OAAO,EAC5DC,EAAe,CAAC,OAAQ,WAAY,aAAc,MAAM,EACxDC,EAAmB,CAAC,QAAS,aAAa,EAG1CC,EAAmB,CACvB,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQJ,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,OAAQ,CAAE,KAAM,OAAQ,UAAW,cAAe,OAAQC,EAAe,WAAY,EAAK,EAC1F,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,EAC9E,GAAGL,EACH,GAAGC,CACL",
-  "names": ["colorPropDef", "radiusPropDef", "sizes", "variants", "resizeValues", "panelBackgrounds", "textAreaPropDefs"]
+  "sourcesContent": ["import { colorPropDef } from '../props/color.prop.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'surface', 'soft', 'outline', 'ghost'] as const;\nconst resizeValues = ['none', 'vertical', 'horizontal', 'both'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\n// prettier-ignore\nconst textAreaPropDefs = {\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  resize: { type: 'enum', className: 'rt-r-resize', values: resizeValues,  responsive: true },\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  material: { type: 'enum', values: materials, default: undefined },\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} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  resize: PropDef<(typeof resizeValues)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  material: PropDef<(typeof materials)[number] | undefined>;\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};\n\nexport { textAreaPropDefs };\n"],
+  "mappings": "AAAA,OAAS,gBAAAA,MAAoB,yBAC7B,OAAS,iBAAAC,MAAqB,0BAI9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,UAAW,OAAQ,UAAW,OAAO,EAC5DC,EAAe,CAAC,OAAQ,WAAY,aAAc,MAAM,EACxDC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAGnCC,EAAmB,CACvB,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQL,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,OAAQ,CAAE,KAAM,OAAQ,UAAW,cAAe,OAAQC,EAAe,WAAY,EAAK,EAC1F,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,EAC9E,SAAU,CAAE,KAAM,OAAQ,OAAQC,EAAW,QAAS,MAAU,EAEhE,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,GAAGN,EACH,GAAGC,CACL",
+  "names": ["colorPropDef", "radiusPropDef", "sizes", "variants", "resizeValues", "panelBackgrounds", "materials", "textAreaPropDefs"]
 }

package/dist/esm/components/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAIrF,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,qBAAqB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC3E,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EACD,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAC;CACZ,CAAC;AACF,KAAK,mBAAmB,GAAG,qBAAqB,CAC9C,OAAO,EACP,yBAAyB,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACjF,CAAC;AACF,UAAU,kBAAmB,SAAQ,mBAAmB,EAAE,WAAW,EAAE,qBAAqB;CAAG;AAC/F,QAAA,MAAM,aAAa,6FA+ClB,CAAC;AAIF,KAAK,qBAAqB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC3E,UAAU,kBACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,EAChD,qBAAqB;CAAG;AAC5B,QAAA,MAAM,aAAa,2FAalB,CAAC;AAGF,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,aAAa,IAAI,IAAI,EAAE,CAAC;AACxD,YAAY,EAAE,kBAAkB,IAAI,SAAS,EAAE,kBAAkB,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAIrF,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,qBAAqB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC3E,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EACD,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAC;CACZ,CAAC;AACF,KAAK,mBAAmB,GAAG,qBAAqB,CAC9C,OAAO,EACP,yBAAyB,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACjF,CAAC;AACF,UAAU,kBAAmB,SAAQ,mBAAmB,EAAE,WAAW,EAAE,qBAAqB;CAAG;AAC/F,QAAA,MAAM,aAAa,6FAkGlB,CAAC;AAIF,KAAK,qBAAqB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC3E,UAAU,kBACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,EAChD,qBAAqB;CAAG;AAC5B,QAAA,MAAM,aAAa,2FAalB,CAAC;AAGF,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,aAAa,IAAI,IAAI,EAAE,CAAC;AACxD,YAAY,EAAE,kBAAkB,IAAI,SAAS,EAAE,kBAAkB,IAAI,SAAS,EAAE,CAAC"}

package/dist/esm/components/text-field.js

@@ -1,5 +1,5 @@
-"use client";import*as t from"react";import d from"classnames";import{composeRefs as R}from"radix-ui/internal";import{textFieldRootPropDefs as y,textFieldSlotPropDefs as S}from"./text-field.props.js";import{extractProps as m}from"../helpers/extract-props.js";import{marginPropDefs as g}from"../props/margin.props.js";const u=t.forwardRef((r,s)=>{const e=t.useRef(null),{children:l,className:p,color:i,radius:f,panelBackground:x,style:P,...T}=m(r,y,g);return t.createElement("div",{"data-accent-color":i,"data-radius":f,"data-panel-background":x,style:P,className:d("rt-TextFieldRoot",p),onPointerDown:F=>{const n=F.target;if(n.closest("input, button, a"))return;const o=e.current;if(!o)return;const a=n.closest(`
-            .rt-TextFieldSlot[data-side='right'],
-            .rt-TextFieldSlot:not([data-side='right']) ~ .rt-TextFieldSlot:not([data-side='left'])
-          `)?o.value.length:0;requestAnimationFrame(()=>{try{o.setSelectionRange(a,a)}catch{}o.focus()})}},t.createElement("input",{spellCheck:"false",...T,ref:R(e,s),className:"rt-reset rt-TextFieldInput"}),l)});u.displayName="TextField.Root";const c=t.forwardRef((r,s)=>{const{className:e,color:l,side:p,...i}=m(r,S);return t.createElement("div",{"data-accent-color":l,"data-side":p,...i,ref:s,className:d("rt-TextFieldSlot",e)})});c.displayName="TextField.Slot";export{u as Root,c as Slot};
+"use client";import*as e from"react";import y from"classnames";import{composeRefs as N}from"radix-ui/internal";import{textFieldRootPropDefs as w,textFieldSlotPropDefs as E}from"./text-field.props.js";import{extractProps as F}from"../helpers/extract-props.js";import{marginPropDefs as j}from"../props/margin.props.js";const b=e.forwardRef((i,a)=>{const r=e.useRef(null),{children:l,className:n,color:p,radius:g,panelBackground:v,material:h,style:S,...t}=F(i,w,j),u=h||v,d=e.useId(),c=t.error||t.isInvalid,{"aria-describedby":m,"aria-labelledby":f}=t,x=e.useMemo(()=>{const o=[];return t.errorMessage&&o.push(d),m&&o.push(m),o.length>0?o.join(" "):void 0},[t.errorMessage,m,d]),I=e.useMemo(()=>({"aria-invalid":c,"aria-describedby":x,"aria-labelledby":f}),[c,x,f]),{error:k,errorMessage:C,isInvalid:L,required:O,"aria-describedby":A,"aria-labelledby":G,...M}=t,D=e.useCallback(o=>{const P=o.target;if(P.closest("input, button, a"))return;const s=r.current;if(!s)return;const T=P.closest(`
+        .rt-TextFieldSlot[data-side='right'],
+        .rt-TextFieldSlot:not([data-side='right']) ~ .rt-TextFieldSlot:not([data-side='left'])
+      `)?s.value.length:0;requestAnimationFrame(()=>{try{s.setSelectionRange(T,T)}catch{}s.focus()})},[]);return e.createElement("div",{"data-accent-color":p,"data-radius":g,"data-panel-background":u,"data-material":u,style:S,className:y("rt-TextFieldRoot",n,{"rt-error":c}),onPointerDown:D},e.createElement("input",{spellCheck:"false",...M,...I,ref:N(r,a),className:"rt-reset rt-TextFieldInput"}),l,t.errorMessage&&e.createElement("div",{id:d,className:"rt-TextFieldErrorMessage",role:"alert","aria-live":"polite"},t.errorMessage))});b.displayName="TextField.Root";const R=e.forwardRef((i,a)=>{const{className:r,color:l,side:n,...p}=F(i,E);return e.createElement("div",{"data-accent-color":l,"data-side":n,...p,ref:a,className:y("rt-TextFieldSlot",r)})});R.displayName="TextField.Slot";export{b as Root,R as Slot};
 //# sourceMappingURL=text-field.js.map

package/dist/esm/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": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,eAAAC,MAAmB,oBAE5B,OAAS,yBAAAC,EAAuB,yBAAAC,MAA6B,wBAC7D,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BA+B/B,MAAMC,EAAgBP,EAAM,WAC1B,CAACQ,EAAOC,IAAiB,CACvB,MAAMC,EAAWV,EAAM,OAAyB,IAAI,EAC9C,CAAE,SAAAW,EAAU,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,gBAAAC,EAAiB,MAAAC,EAAO,GAAGC,CAAW,EAChFZ,EAAaG,EAAOL,EAAuBG,CAAc,EAC3D,OACEN,EAAA,cAAC,OACC,oBAAmBa,EACnB,cAAaC,EACb,wBAAuBC,EACvB,MAAOC,EACP,UAAWf,EAAW,mBAAoBW,CAAS,EACnD,cAAgBM,GAAU,CACxB,MAAMC,EAASD,EAAM,OACrB,GAAIC,EAAO,QAAQ,kBAAkB,EAAG,OAExC,MAAMC,EAAQV,EAAS,QACvB,GAAI,CAACU,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,GAEApB,EAAA,cAAC,SACC,WAAW,QACV,GAAGiB,EACJ,IAAKf,EAAYQ,EAAUD,CAAY,EACvC,UAAU,6BACZ,EACCE,CACH,CAEJ,CACF,EACAJ,EAAc,YAAc,iBAO5B,MAAMe,EAAgBtB,EAAM,WAC1B,CAACQ,EAAOC,IAAiB,CACvB,KAAM,CAAE,UAAAG,EAAW,MAAAC,EAAO,KAAAU,EAAM,GAAGC,CAAU,EAAInB,EAAaG,EAAOJ,CAAqB,EAC1F,OACEJ,EAAA,cAAC,OACC,oBAAmBa,EACnB,YAAWU,EACV,GAAGC,EACJ,IAAKf,EACL,UAAWR,EAAW,mBAAoBW,CAAS,EACrD,CAEJ,CACF,EACAU,EAAc,YAAc",
-  "names": ["React", "classNames", "composeRefs", "textFieldRootPropDefs", "textFieldSlotPropDefs", "extractProps", "marginPropDefs", "TextFieldRoot", "props", "forwardedRef", "inputRef", "children", "className", "color", "radius", "panelBackground", "style", "inputProps", "event", "target", "input", "cursorPosition", "TextFieldSlot", "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": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,eAAAC,MAAmB,oBAE5B,OAAS,yBAAAC,EAAuB,yBAAAC,MAA6B,wBAC7D,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BA+B/B,MAAMC,EAAgBP,EAAM,WAC1B,CAACQ,EAAOC,IAAiB,CACvB,MAAMC,EAAWV,EAAM,OAAyB,IAAI,EAC9C,CAAE,SAAAW,EAAU,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,gBAAAC,EAAiB,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAW,EAC1Fb,EAAaG,EAAOL,EAAuBG,CAAc,EACrDa,EAAoBH,GAAYD,EAGhCK,EAAUpB,EAAM,MAAM,EAGtBqB,EAAYH,EAAW,OAASA,EAAW,UAE3C,CAAE,mBAAoBI,EAAiB,kBAAmBC,CAAe,EAAIL,EAG7EM,EAAcxB,EAAM,QAAQ,IAAM,CACtC,MAAMyB,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,EAAY1B,EAAM,QACtB,KAAO,CACL,eAAgBqB,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,EAAoBlC,EAAM,YAAamC,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,OACErC,EAAA,cAAC,OACC,oBAAmBa,EACnB,cAAaC,EACb,wBAAuBK,EACvB,gBAAeA,EACf,MAAOF,EACP,UAAWhB,EAAW,mBAAoBW,EAAW,CACnD,WAAYS,CACd,CAAC,EACD,cAAea,GAEflC,EAAA,cAAC,SACC,WAAW,QACV,GAAGiC,EACH,GAAGP,EACJ,IAAKxB,EAAYQ,EAAUD,CAAY,EACvC,UAAU,6BACZ,EACCE,EACAO,EAAW,cACVlB,EAAA,cAAC,OAAI,GAAIoB,EAAS,UAAU,2BAA2B,KAAK,QAAQ,YAAU,UAC3EF,EAAW,YACd,CAEJ,CAEJ,CACF,EACAX,EAAc,YAAc,iBAO5B,MAAMgC,EAAgBvC,EAAM,WAC1B,CAACQ,EAAOC,IAAiB,CACvB,KAAM,CAAE,UAAAG,EAAW,MAAAC,EAAO,KAAA2B,EAAM,GAAGC,CAAU,EAAIpC,EAAaG,EAAOJ,CAAqB,EAC1F,OACEJ,EAAA,cAAC,OACC,oBAAmBa,EACnB,YAAW2B,EACV,GAAGC,EACJ,IAAKhC,EACL,UAAWR,EAAW,mBAAoBW,CAAS,EACrD,CAEJ,CACF,EACA2B,EAAc,YAAc",
+  "names": ["React", "classNames", "composeRefs", "textFieldRootPropDefs", "textFieldSlotPropDefs", "extractProps", "marginPropDefs", "TextFieldRoot", "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", "TextFieldSlot", "side", "slotProps"]
 }

package/dist/esm/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/esm/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/esm/components/text-field.props.js

@@ -1,2 +1,2 @@
-import{colorPropDef as s}from"../props/color.prop.js";import{paddingPropDefs as e}from"../props/padding.props.js";import{radiusPropDef as p}from"../props/radius.prop.js";import{flexPropDefs as o}from"./flex.props.js";const r=["1","2","3"],t=["classic","surface","soft","ghost","outline"],a=["solid","translucent"],n={size:{type:"enum",className:"rt-r-size",values:r,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},...s,...p,panelBackground:{type:"enum",values:a,default:void 0}},f=["left","right"],i={side:{type:"enum",values:f},...s,gap:o.gap,px:e.px,pl:e.pl,pr:e.pr};export{n as textFieldRootPropDefs,i as textFieldSlotPropDefs};
+import{colorPropDef as r}from"../props/color.prop.js";import{paddingPropDefs as e}from"../props/padding.props.js";import{radiusPropDef as s}from"../props/radius.prop.js";import{flexPropDefs as a}from"./flex.props.js";const o=["1","2","3"],t=["classic","surface","soft","ghost","outline"],n=["solid","translucent"],p=["solid","translucent"],f={size:{type:"enum",className:"rt-r-size",values:o,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,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},...r,...s,panelBackground:{type:"enum",values:n,default:void 0},material:{type:"enum",values:p,default:void 0}},i=["left","right"],d={side:{type:"enum",values:i},...r,gap:a.gap,px:e.px,pl:e.pl,pr:e.pr};export{f as textFieldRootPropDefs,d as textFieldSlotPropDefs};
 //# sourceMappingURL=text-field.props.js.map

package/dist/esm/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": "AAAA,OAAS,gBAAAA,MAAoB,yBAC7B,OAAS,mBAAAC,MAAuB,4BAChC,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,gBAAAC,MAAoB,kBAI7B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,UAAW,OAAQ,QAAS,SAAS,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAE1CC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQH,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,GAAGL,EACH,GAAGE,EACH,gBAAiB,CAAE,KAAM,OAAQ,OAAQI,EAAkB,QAAS,MAAU,CAChF,EAMME,EAAQ,CAAC,OAAQ,OAAO,EAExBC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,OAAQD,CAAM,EACpC,GAAGR,EACH,IAAKG,EAAa,IAClB,GAAIF,EAAgB,GACpB,GAAIA,EAAgB,GACpB,GAAIA,EAAgB,EACtB",
-  "names": ["colorPropDef", "paddingPropDefs", "radiusPropDef", "flexPropDefs", "sizes", "variants", "panelBackgrounds", "textFieldRootPropDefs", "sides", "textFieldSlotPropDefs"]
+  "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": "AAAA,OAAS,gBAAAA,MAAoB,yBAC7B,OAAS,mBAAAC,MAAuB,4BAChC,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,gBAAAC,MAAoB,kBAI7B,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,UAAW,OAAQ,QAAS,SAAS,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAEnCC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQJ,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,GAAGL,EACH,GAAGE,EACH,gBAAiB,CAAE,KAAM,OAAQ,OAAQI,EAAkB,QAAS,MAAU,EAC9E,SAAU,CAAE,KAAM,OAAQ,OAAQC,EAAW,QAAS,MAAU,CAClE,EAaME,EAAQ,CAAC,OAAQ,OAAO,EAExBC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,OAAQD,CAAM,EACpC,GAAGT,EACH,IAAKG,EAAa,IAClB,GAAIF,EAAgB,GACpB,GAAIA,EAAgB,GACpB,GAAIA,EAAgB,EACtB",
+  "names": ["colorPropDef", "paddingPropDefs", "radiusPropDef", "flexPropDefs", "sizes", "variants", "panelBackgrounds", "materials", "textFieldRootPropDefs", "sides", "textFieldSlotPropDefs"]
 }

package/dist/esm/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/esm/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/esm/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/esm/components/theme.js

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

package/dist/esm/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": ["React", "classNames", "Direction", "Slot", "TooltipPrimitive", "getMatchingGrayColor", "themePropDefs", "noop", "ThemeContext", "useThemeContext", "context", "Theme", "props", "forwardedRef", "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"]
+  "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": ["React", "classNames", "Direction", "Slot", "TooltipPrimitive", "getMatchingGrayColor", "themePropDefs", "noop", "ThemeContext", "useThemeContext", "context", "Theme", "props", "forwardedRef", "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"]
 }

package/dist/esm/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/esm/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/esm/components/theme.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as e}from"../props/as-child.prop.js";import{accentColors as o,grayColors as r}from"../props/color.prop.js";import{radii as a}from"../props/radius.prop.js";const p=["inherit","light","dark"],t=["solid","translucent"],n=["90%","95%","100%","105%","110%"],s={...e,hasBackground:{type:"boolean",default:!0},appearance:{type:"enum",values:p,default:"inherit"},accentColor:{type:"enum",values:o,default:"blue"},grayColor:{type:"enum",values:r,default:"slate"},panelBackground:{type:"enum",values:t,default:"translucent"},radius:{type:"enum",values:a,default:"medium"},scaling:{type:"enum",values:n,default:"100%"}};export{s as themePropDefs};
+import{asChildPropDef as e}from"../props/as-child.prop.js";import{accentColors as a,grayColors as o}from"../props/color.prop.js";import{radii as r}from"../props/radius.prop.js";const t=["inherit","light","dark"],p=["solid","translucent"],s=["solid","translucent"],n=["90%","95%","100%","105%","110%"],l={...e,hasBackground:{type:"boolean",default:!0},appearance:{type:"enum",values:t,default:"inherit"},accentColor:{type:"enum",values:a,default:"blue"},grayColor:{type:"enum",values:o,default:"slate"},material:{type:"enum",values:s,default:"translucent"},panelBackground:{type:"enum",values:p,default:"translucent"},radius:{type:"enum",values:r,default:"medium"},scaling:{type:"enum",values:n,default:"100%"}};export{l as themePropDefs};
 //# sourceMappingURL=theme.props.js.map

package/dist/esm/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": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,EAAc,cAAAC,MAAkB,yBACzC,OAAS,SAAAC,MAAa,0BAItB,MAAMC,EAAc,CAAC,UAAW,QAAS,MAAM,EACzCC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAW,CAAC,MAAO,MAAO,OAAQ,OAAQ,MAAM,EAEhDC,EAAgB,CACpB,GAAGP,EAOH,cAAe,CAAE,KAAM,UAAW,QAAS,EAAK,EAOhD,WAAY,CAAE,KAAM,OAAQ,OAAQI,EAAa,QAAS,SAAU,EAOpE,YAAa,CAAE,KAAM,OAAQ,OAAQH,EAAc,QAAS,MAAO,EAOnE,UAAW,CAAE,KAAM,OAAQ,OAAQC,EAAY,QAAS,OAAQ,EAQhE,gBAAiB,CAAE,KAAM,OAAQ,OAAQG,EAAkB,QAAS,aAAc,EAOlF,OAAQ,CAAE,KAAM,OAAQ,OAAQF,EAAO,QAAS,QAAS,EAOzD,QAAS,CAAE,KAAM,OAAQ,OAAQG,EAAU,QAAS,MAAO,CAC7D",
-  "names": ["asChildPropDef", "accentColors", "grayColors", "radii", "appearances", "panelBackgrounds", "scalings", "themePropDefs"]
+  "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": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,EAAc,cAAAC,MAAkB,yBACzC,OAAS,SAAAC,MAAa,0BAItB,MAAMC,EAAc,CAAC,UAAW,QAAS,MAAM,EACzCC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EACnCC,EAAW,CAAC,MAAO,MAAO,OAAQ,OAAQ,MAAM,EAEhDC,EAAgB,CACpB,GAAGR,EAOH,cAAe,CAAE,KAAM,UAAW,QAAS,EAAK,EAOhD,WAAY,CAAE,KAAM,OAAQ,OAAQI,EAAa,QAAS,SAAU,EAOpE,YAAa,CAAE,KAAM,OAAQ,OAAQH,EAAc,QAAS,MAAO,EAOnE,UAAW,CAAE,KAAM,OAAQ,OAAQC,EAAY,QAAS,OAAQ,EAQhE,SAAU,CAAE,KAAM,OAAQ,OAAQI,EAAW,QAAS,aAAc,EAUpE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,aAAc,EAOlF,OAAQ,CAAE,KAAM,OAAQ,OAAQF,EAAO,QAAS,QAAS,EAOzD,QAAS,CAAE,KAAM,OAAQ,OAAQI,EAAU,QAAS,MAAO,CAC7D",
+  "names": ["asChildPropDef", "accentColors", "grayColors", "radii", "appearances", "panelBackgrounds", "materials", "scalings", "themePropDefs"]
 }

package/dist/esm/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/esm/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/esm/components/toggle-button.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Toggle as l}from"radix-ui";import{Button as p}from"./button.js";const o=e.forwardRef(({pressed:t,onPressedChange:n,defaultPressed:r,...s},g)=>e.createElement(l.Root,{pressed:t,onPressedChange:n,defaultPressed:r,asChild:!0},e.createElement(p,{...s,ref:g})));o.displayName="ToggleButton";export{o as ToggleButton};
+import*as o from"react";import{Toggle as f}from"radix-ui";import{Button as m}from"./button.js";import{useLiveAnnouncer as c}from"../hooks/use-live-announcer.js";const l=o.forwardRef(({pressed:n,onPressedChange:t,defaultPressed:u,children:e,...p},g)=>{const s=c(),r=o.useCallback(()=>typeof e=="string"?e:o.isValidElement(e)&&typeof e.props?.children=="string"?e.props.children:"Toggle button",[e]),d=o.useCallback(a=>{const i=r();s(`${i} ${a?"pressed":"unpressed"}`),t?.(a)},[s,t,r]);return o.useEffect(()=>{},[n,t]),o.createElement(f.Root,{pressed:n,onPressedChange:d,defaultPressed:u,asChild:!0},o.createElement(m,{...p,ref:g},e))});l.displayName="ToggleButton";export{l as ToggleButton};
 //# sourceMappingURL=toggle-button.js.map