@kushagradhawan/kookie-ui 0.1.17 → 0.1.19

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, style, ...textAreaProps } = extractProps(\n    props,\n    textAreaPropDefs,\n    marginPropDefs\n  );\n  return (\n    <div\n      data-accent-color={color}\n      data-radius={radius}\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,MAAAC,EAAO,GAAGC,CAAc,EAAIT,EAC5DG,EACAJ,EACAE,CACF,EACA,OACEJ,EAAA,cAAC,OACC,oBAAmBS,EACnB,cAAaC,EACb,UAAWT,EAAW,kBAAmBO,CAAS,EAClD,MAAOG,GAEPX,EAAA,cAAC,YAAS,UAAU,4BAA4B,IAAKO,EAAe,GAAGK,EAAe,CACxF,CAEJ,CAAC,EACDP,EAAS,YAAc",
-  "names": ["React", "classNames", "textAreaPropDefs", "extractProps", "marginPropDefs", "TextArea", "props", "forwardedRef", "className", "color", "radius", "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 {}\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"]
 }

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

@@ -19,7 +19,7 @@ declare const textAreaPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["classic", "surface", "soft"];
+        values: readonly ["classic", "surface", "soft", "outline", "ghost"];
         default: "surface";
     };
     resize: {
@@ -28,6 +28,11 @@ declare const textAreaPropDefs: {
         values: readonly ["none", "vertical", "horizontal", "both"];
         responsive: true;
     };
+    panelBackground: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        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":"AAUA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUjB,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":"AAWA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYjB,CAAC;AAEN,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"],t=["classic","surface","soft"],o=["none","vertical","horizontal","both"],a={size:{type:"enum",className:"rt-r-size",values:r,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:t,default:"surface"},resize:{type:"enum",className:"rt-r-resize",values:o,responsive:!0},...e,...s};export{a as textAreaPropDefs};
+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};
 //# 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'] as const;\nconst resizeValues = ['none', 'vertical', 'horizontal', 'both'] 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  ...colorPropDef,\n  ...radiusPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  resize: PropDef<(typeof resizeValues)[number]>;\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,MAAM,EACxCC,EAAe,CAAC,OAAQ,WAAY,aAAc,MAAM,EAGxDC,EAAmB,CACvB,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQH,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,GAAGJ,EACH,GAAGC,CACL",
-  "names": ["colorPropDef", "radiusPropDef", "sizes", "variants", "resizeValues", "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;\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"]
 }

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,6FAiDlB,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,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"}

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 F}from"radix-ui/internal";import{textFieldRootPropDefs as R,textFieldSlotPropDefs as y}from"./text-field.props.js";import{extractProps as m}from"../helpers/extract-props.js";import{marginPropDefs as S}from"../props/margin.props.js";const u=t.forwardRef((r,s)=>{const e=t.useRef(null),{children:l,className:i,color:p,radius:f,style:x,...P}=m(r,R,S);return t.createElement("div",{"data-accent-color":p,"data-radius":f,style:x,className:d("rt-TextFieldRoot",i),onPointerDown:T=>{const n=T.target;if(n.closest("input, button, a"))return;const o=e.current;if(!o)return;const a=n.closest(`
+"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",...P,ref:F(e,s),className:"rt-reset rt-TextFieldInput"}),l)});u.displayName="TextField.Root";const c=t.forwardRef((r,s)=>{const{className:e,color:l,side:i,...p}=m(r,y);return t.createElement("div",{"data-accent-color":l,"data-side":i,...p,ref:s,className:d("rt-TextFieldSlot",e)})});c.displayName="TextField.Slot";export{u as Root,c as Slot};
+          `)?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};
 //# 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, style, ...inputProps } = extractProps(\n      props,\n      textFieldRootPropDefs,\n      marginPropDefs\n    );\n    return (\n      <div\n        data-accent-color={color}\n        data-radius={radius}\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,MAAAC,EAAO,GAAGC,CAAW,EAAIX,EACnEG,EACAL,EACAG,CACF,EACA,OACEN,EAAA,cAAC,OACC,oBAAmBa,EACnB,cAAaC,EACb,MAAOC,EACP,UAAWd,EAAW,mBAAoBW,CAAS,EACnD,cAAgBK,GAAU,CACxB,MAAMC,EAASD,EAAM,OACrB,GAAIC,EAAO,QAAQ,kBAAkB,EAAG,OAExC,MAAMC,EAAQT,EAAS,QACvB,GAAI,CAACS,EAAO,OAQZ,MAAMC,EALcF,EAAO,QAAQ;AAAA;AAAA;AAAA,WAGlC,EAEoCC,EAAM,MAAM,OAAS,EAE1D,sBAAsB,IAAM,CAG1B,GAAI,CACFA,EAAM,kBAAkBC,EAAgBA,CAAc,CACxD,MAAQ,CAAC,CACTD,EAAM,MAAM,CACd,CAAC,CACH,GAEAnB,EAAA,cAAC,SACC,WAAW,QACV,GAAGgB,EACJ,IAAKd,EAAYQ,EAAUD,CAAY,EACvC,UAAU,6BACZ,EACCE,CACH,CAEJ,CACF,EACAJ,EAAc,YAAc,iBAO5B,MAAMc,EAAgBrB,EAAM,WAC1B,CAACQ,EAAOC,IAAiB,CACvB,KAAM,CAAE,UAAAG,EAAW,MAAAC,EAAO,KAAAS,EAAM,GAAGC,CAAU,EAAIlB,EAAaG,EAAOJ,CAAqB,EAC1F,OACEJ,EAAA,cAAC,OACC,oBAAmBa,EACnB,YAAWS,EACV,GAAGC,EACJ,IAAKd,EACL,UAAWR,EAAW,mBAAoBW,CAAS,EACrD,CAEJ,CACF,EACAS,EAAc,YAAc",
-  "names": ["React", "classNames", "composeRefs", "textFieldRootPropDefs", "textFieldSlotPropDefs", "extractProps", "marginPropDefs", "TextFieldRoot", "props", "forwardedRef", "inputRef", "children", "className", "color", "radius", "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, 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"]
 }

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

@@ -1,4 +1,9 @@
 declare const textFieldRootPropDefs: {
+    panelBackground: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: undefined;
+    };
     radius: {
         type: "enum";
         values: readonly ["none", "small", "medium", "large", "full"];
@@ -19,7 +24,7 @@ declare const textFieldRootPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["classic", "surface", "soft"];
+        values: readonly ["classic", "surface", "soft", "ghost", "outline"];
         default: "surface";
     };
 };

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":"AAUA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;CAQ1B,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":"AAWA,QAAA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAU1B,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"],f={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},a=["left","right"],i={side:{type:"enum",values:a},...s,gap:o.gap,px:e.px,pl:e.pl,pr:e.pr};export{f as textFieldRootPropDefs,i as textFieldSlotPropDefs};
+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};
 //# 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'] 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} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\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,MAAM,EAExCC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,GAAGL,EACH,GAAGE,CACL,EAKMK,EAAQ,CAAC,OAAQ,OAAO,EAExBC,EAAwB,CAC5B,KAAM,CAAE,KAAM,OAAQ,OAAQD,CAAM,EACpC,GAAGP,EACH,IAAKG,EAAa,IAClB,GAAIF,EAAgB,GACpB,GAAIA,EAAgB,GACpB,GAAIA,EAAgB,EACtB",
-  "names": ["colorPropDef", "paddingPropDefs", "radiusPropDef", "flexPropDefs", "sizes", "variants", "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;\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"]
 }

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;AA8FpB,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,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"}

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 d=()=>{},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,s)=>e.useContext(P)===void 0?e.createElement(w.Provider,{delayDuration:200},e.createElement(G.Provider,{dir:"ltr"},e.createElement(I,{...a,ref:s}))):e.createElement(A,{...a,ref:s}));R.displayName="Theme";const I=e.forwardRef((a,s)=>{const{appearance:r=o.appearance.default,accentColor:c=o.accentColor.default,grayColor:l=o.grayColor.default,panelBackground:p=o.panelBackground.default,radius:n=o.radius.default,scaling:t=o.scaling.default,hasBackground:i=o.hasBackground.default,...u}=a,[h,m]=e.useState(r);e.useEffect(()=>m(r),[r]);const[y,g]=e.useState(c);e.useEffect(()=>g(c),[c]);const[v,C]=e.useState(l);e.useEffect(()=>C(l),[l]);const[k,f]=e.useState(p);e.useEffect(()=>f(p),[p]);const[B,x]=e.useState(n);e.useEffect(()=>x(n),[n]);const[T,b]=e.useState(t);return e.useEffect(()=>b(t),[t]),e.createElement(A,{...u,ref:s,isRoot:!0,hasBackground:i,appearance:h,accentColor:y,grayColor:v,panelBackground:k,radius:B,scaling:T,onAppearanceChange:m,onAccentColorChange:g,onGrayColorChange:C,onPanelBackgroundChange:f,onRadiusChange:x,onScalingChange:b})});I.displayName="ThemeRoot";const A=e.forwardRef((a,s)=>{const r=e.useContext(P),{asChild:c,isRoot:l,hasBackground:p,appearance:n=r?.appearance??o.appearance.default,accentColor:t=r?.accentColor??o.accentColor.default,grayColor:i=r?.resolvedGrayColor??o.grayColor.default,panelBackground:u=r?.panelBackground??o.panelBackground.default,radius:h=r?.radius??o.radius.default,scaling:m=r?.scaling??o.scaling.default,onAppearanceChange:y=d,onAccentColorChange:g=d,onGrayColorChange:v=d,onPanelBackgroundChange:C=d,onRadiusChange:k=d,onScalingChange:f=d,...B}=a,x=c?D.Root:"div",T=i==="auto"?N(t):i,b=a.appearance==="light"||a.appearance==="dark",S=p===void 0?l||b:p;return e.createElement(P.Provider,{value:e.useMemo(()=>({appearance:n,accentColor:t,grayColor:i,resolvedGrayColor:T,panelBackground:u,radius:h,scaling:m,onAppearanceChange:y,onAccentColorChange:g,onGrayColorChange:v,onPanelBackgroundChange:C,onRadiusChange:k,onScalingChange:f}),[n,t,i,T,u,h,m,y,g,v,C,k,f])},e.createElement(x,{"data-is-root-theme":l?"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":m,ref:s,...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 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};
 //# 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 = context?.appearance ?? themePropDefs.appearance.default,\n    accentColor = context?.accentColor ?? themePropDefs.accentColor.default,\n    grayColor = context?.resolvedGrayColor ?? themePropDefs.grayColor.default,\n    panelBackground = context?.panelBackground ?? themePropDefs.panelBackground.default,\n    radius = context?.radius ?? themePropDefs.radius.default,\n    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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",
+  "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": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,aAAAC,EAAW,QAAAC,EAAM,WAAWC,MAAwB,WAE7D,OAAS,wBAAAC,MAA4B,wCACrC,OAAS,iBAAAC,MAAqB,mBAK9B,MAAMC,EAAO,IAAM,CAAC,EA2BdC,EAAeR,EAAM,cAA6C,MAAS,EAEjF,SAASS,GAAkB,CACzB,MAAMC,EAAUV,EAAM,WAAWQ,CAAY,EAC7C,GAAIE,IAAY,OACd,MAAM,IAAI,MAAM,iDAAiD,EAEnE,OAAOA,CACT,CAGA,MAAMC,EAAQX,EAAM,WAAyC,CAACY,EAAOC,IACnDb,EAAM,WAAWQ,CAAY,IAClB,OAGvBR,EAAA,cAACI,EAAiB,SAAjB,CAA0B,cAAe,KACxCJ,EAAA,cAACE,EAAU,SAAV,CAAmB,IAAI,OACtBF,EAAA,cAACc,EAAA,CAAW,GAAGF,EAAO,IAAKC,EAAc,CAC3C,CACF,EAGGb,EAAA,cAACe,EAAA,CAAW,GAAGH,EAAO,IAAKC,EAAc,CACjD,EACDF,EAAM,YAAc,QAEpB,MAAMG,EAAYd,EAAM,WACtB,CAACY,EAAOC,IAAiB,CACvB,KAAM,CACJ,WAAYG,EAAiBV,EAAc,WAAW,QACtD,YAAaW,EAAkBX,EAAc,YAAY,QACzD,UAAWY,EAAgBZ,EAAc,UAAU,QACnD,gBAAiBa,EAAsBb,EAAc,gBAAgB,QACrE,OAAQc,EAAad,EAAc,OAAO,QAC1C,QAASe,EAAcf,EAAc,QAAQ,QAC7C,cAAAgB,EAAgBhB,EAAc,cAAc,QAC5C,GAAGiB,CACL,EAAIX,EACE,CAACY,EAAYC,CAAa,EAAIzB,EAAM,SAASgB,CAAc,EACjEhB,EAAM,UAAU,IAAMyB,EAAcT,CAAc,EAAG,CAACA,CAAc,CAAC,EAErE,KAAM,CAACU,EAAaC,CAAc,EAAI3B,EAAM,SAASiB,CAAe,EACpEjB,EAAM,UAAU,IAAM2B,EAAeV,CAAe,EAAG,CAACA,CAAe,CAAC,EAExE,KAAM,CAACW,EAAWC,CAAY,EAAI7B,EAAM,SAASkB,CAAa,EAC9DlB,EAAM,UAAU,IAAM6B,EAAaX,CAAa,EAAG,CAACA,CAAa,CAAC,EAElE,KAAM,CAACY,EAAiBC,CAAkB,EAAI/B,EAAM,SAASmB,CAAmB,EAChFnB,EAAM,UAAU,IAAM+B,EAAmBZ,CAAmB,EAAG,CAACA,CAAmB,CAAC,EAEpF,KAAM,CAACa,EAAQC,CAAS,EAAIjC,EAAM,SAASoB,CAAU,EACrDpB,EAAM,UAAU,IAAMiC,EAAUb,CAAU,EAAG,CAACA,CAAU,CAAC,EAEzD,KAAM,CAACc,EAASC,CAAU,EAAInC,EAAM,SAASqB,CAAW,EACxD,OAAArB,EAAM,UAAU,IAAMmC,EAAWd,CAAW,EAAG,CAACA,CAAW,CAAC,EAG1DrB,EAAA,cAACe,EAAA,CACE,GAAGQ,EACJ,IAAKV,EACL,OAAM,GACN,cAAeS,EAEf,WAAYE,EACZ,YAAaE,EACb,UAAWE,EACX,gBAAiBE,EACjB,OAAQE,EACR,QAASE,EAET,mBAAoBT,EACpB,oBAAqBE,EACrB,kBAAmBE,EACnB,wBAAyBE,EACzB,eAAgBE,EAChB,gBAAiBE,EACnB,CAEJ,CACF,EACArB,EAAU,YAAc,YAUxB,MAAMC,EAAYf,EAAM,WAA6C,CAACY,EAAOC,IAAiB,CAC5F,MAAMH,EAAUV,EAAM,WAAWQ,CAAY,EACvC,CACJ,QAAA4B,EACA,OAAAC,EACA,cAAeC,EAEf,WAAAd,EAAaZ,EAAM,YAAcF,GAAS,YAAcJ,EAAc,WAAW,QACjF,YAAAoB,EAAcd,EAAM,aAAeF,GAAS,aAAeJ,EAAc,YAAY,QACrF,UAAAsB,EAAYhB,EAAM,WAAaF,GAAS,mBAAqBJ,EAAc,UAAU,QACrF,gBAAAwB,EAAkBlB,EAAM,iBACtBF,GAAS,iBACTJ,EAAc,gBAAgB,QAChC,OAAA0B,EAASpB,EAAM,QAAUF,GAAS,QAAUJ,EAAc,OAAO,QACjE,QAAA4B,EAAUtB,EAAM,SAAWF,GAAS,SAAWJ,EAAc,QAAQ,QAErE,mBAAAiC,EAAqBhC,EACrB,oBAAAiC,EAAsBjC,EACtB,kBAAAkC,EAAoBlC,EACpB,wBAAAmC,EAA0BnC,EAC1B,eAAAoC,EAAiBpC,EACjB,gBAAAqC,EAAkBrC,EAElB,GAAGsC,CACL,EAAIjC,EACEkC,EAAOV,EAAUjC,EAAK,KAAO,MAC7B4C,EAAoBnB,IAAc,OAASvB,EAAqBqB,CAAW,EAAIE,EAC/EoB,EAAuBpC,EAAM,aAAe,SAAWA,EAAM,aAAe,OAC5EU,EACJgB,IAAsB,OAAYD,GAAUW,EAAuBV,EACrE,OACEtC,EAAA,cAACQ,EAAa,SAAb,CACC,MAAOR,EAAM,QACX,KAAO,CACL,WAAAwB,EACA,YAAAE,EACA,UAAAE,EACA,kBAAAmB,EACA,gBAAAjB,EACA,OAAAE,EACA,QAAAE,EAEA,mBAAAK,EACA,oBAAAC,EACA,kBAAAC,EACA,wBAAAC,EACA,eAAAC,EACA,gBAAAC,CACF,GACA,CACEpB,EACAE,EACAE,EACAmB,EACAjB,EACAE,EACAE,EAEAK,EACAC,EACAC,EACAC,EACAC,EACAC,CACF,CACF,GAEA5C,EAAA,cAAC8C,EAAA,CACC,qBAAoBT,EAAS,OAAS,QACtC,oBAAmBX,EACnB,kBAAiBqB,EAEjB,sBAAqBzB,EAAgB,OAAS,QAC9C,wBAAuBQ,EACvB,cAAaE,EACb,eAAcE,EACd,IAAKrB,EACJ,GAAGgC,EACJ,UAAW5C,EACT,eACA,CACE,MAAOuB,IAAe,QACtB,KAAMA,IAAe,MACvB,EACAqB,EAAW,SACb,EACF,CACF,CAEJ,CAAC,EACD9B,EAAU,YAAc",
   "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"]
 }

package/dist/esm/helpers/map-prop-values.js

@@ -1,2 +1,2 @@
-function s(e,t){if(e!==void 0)return typeof e=="string"?t(e):Object.fromEntries(Object.entries(e).map(([n,o])=>[n,t(o)]))}function p(e){return e==="3"?"3":"2"}function r(e){switch(e){case"1":return"1";case"2":case"3":return"2";case"4":return"3"}}export{r as mapButtonSizeToSpinnerSize,p as mapCalloutSizeToTextSize,s as mapResponsiveProp};
+function s(e,t){if(e!==void 0)return typeof e=="string"?t(e):Object.fromEntries(Object.entries(e).map(([n,o])=>[n,t(o)]))}function p(e){return e==="3"?"3":e==="1"?"1":"2"}function r(e){switch(e){case"1":return"1";case"2":case"3":return"2";case"4":return"3"}}export{r as mapButtonSizeToSpinnerSize,p as mapCalloutSizeToTextSize,s as mapResponsiveProp};
 //# sourceMappingURL=map-prop-values.js.map

package/dist/esm/helpers/map-prop-values.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/map-prop-values.ts"],
-  "sourcesContent": ["import type { baseButtonPropDefs } from '../components/_internal/base-button.props.js';\nimport type { calloutRootPropDefs } from '../components/callout.props.js';\nimport type { spinnerPropDefs } from '../components/spinner.props.js';\nimport type { textPropDefs } from '../components/text.props.js';\nimport type { Responsive } from '../props/prop-def.js';\n\nfunction mapResponsiveProp<Input extends string, Output>(\n  propValue: Responsive<Input> | undefined,\n  mapValue: (value: Input) => Output\n): Responsive<Output> | undefined {\n  if (propValue === undefined) return undefined;\n  if (typeof propValue === 'string') {\n    return mapValue(propValue);\n  }\n  return Object.fromEntries(\n    Object.entries(propValue).map(([key, value]) => [key, mapValue(value)])\n  );\n}\n\nfunction mapCalloutSizeToTextSize(\n  size: (typeof calloutRootPropDefs.size.values)[number]\n): (typeof textPropDefs.size.values)[number] {\n  return size === '3' ? '3' : '2';\n}\n\nfunction mapButtonSizeToSpinnerSize(\n  size: (typeof baseButtonPropDefs.size.values)[number]\n): (typeof spinnerPropDefs.size.values)[number] {\n  switch (size) {\n    case '1':\n      return '1';\n    case '2':\n    case '3':\n      return '2';\n    case '4':\n      return '3';\n  }\n}\n\nexport { mapResponsiveProp, mapCalloutSizeToTextSize, mapButtonSizeToSpinnerSize };\n"],
-  "mappings": "AAMA,SAASA,EACPC,EACAC,EACgC,CAChC,GAAID,IAAc,OAClB,OAAI,OAAOA,GAAc,SAChBC,EAASD,CAAS,EAEpB,OAAO,YACZ,OAAO,QAAQA,CAAS,EAAE,IAAI,CAAC,CAACE,EAAKC,CAAK,IAAM,CAACD,EAAKD,EAASE,CAAK,CAAC,CAAC,CACxE,CACF,CAEA,SAASC,EACPC,EAC2C,CAC3C,OAAOA,IAAS,IAAM,IAAM,GAC9B,CAEA,SAASC,EACPD,EAC8C,CAC9C,OAAQA,EAAM,CACZ,IAAK,IACH,MAAO,IACT,IAAK,IACL,IAAK,IACH,MAAO,IACT,IAAK,IACH,MAAO,GACX,CACF",
+  "sourcesContent": ["import type { baseButtonPropDefs } from '../components/_internal/base-button.props.js';\nimport type { calloutRootPropDefs } from '../components/callout.props.js';\nimport type { spinnerPropDefs } from '../components/spinner.props.js';\nimport type { textPropDefs } from '../components/text.props.js';\nimport type { Responsive } from '../props/prop-def.js';\n\nfunction mapResponsiveProp<Input extends string, Output>(\n  propValue: Responsive<Input> | undefined,\n  mapValue: (value: Input) => Output\n): Responsive<Output> | undefined {\n  if (propValue === undefined) return undefined;\n  if (typeof propValue === 'string') {\n    return mapValue(propValue);\n  }\n  return Object.fromEntries(\n    Object.entries(propValue).map(([key, value]) => [key, mapValue(value)])\n  );\n}\n\nfunction mapCalloutSizeToTextSize(\n  size: (typeof calloutRootPropDefs.size.values)[number]\n): (typeof textPropDefs.size.values)[number] {\n  return size === '3' ? '3' : size === '1' ? '1' : '2';\n}\n\nfunction mapButtonSizeToSpinnerSize(\n  size: (typeof baseButtonPropDefs.size.values)[number]\n): (typeof spinnerPropDefs.size.values)[number] {\n  switch (size) {\n    case '1':\n      return '1';\n    case '2':\n    case '3':\n      return '2';\n    case '4':\n      return '3';\n  }\n}\n\nexport { mapResponsiveProp, mapCalloutSizeToTextSize, mapButtonSizeToSpinnerSize };\n"],
+  "mappings": "AAMA,SAASA,EACPC,EACAC,EACgC,CAChC,GAAID,IAAc,OAClB,OAAI,OAAOA,GAAc,SAChBC,EAASD,CAAS,EAEpB,OAAO,YACZ,OAAO,QAAQA,CAAS,EAAE,IAAI,CAAC,CAACE,EAAKC,CAAK,IAAM,CAACD,EAAKD,EAASE,CAAK,CAAC,CAAC,CACxE,CACF,CAEA,SAASC,EACPC,EAC2C,CAC3C,OAAOA,IAAS,IAAM,IAAMA,IAAS,IAAM,IAAM,GACnD,CAEA,SAASC,EACPD,EAC8C,CAC9C,OAAQA,EAAM,CACZ,IAAK,IACH,MAAO,IACT,IAAK,IACL,IAAK,IACH,MAAO,IACT,IAAK,IACH,MAAO,GACX,CACF",
   "names": ["mapResponsiveProp", "propValue", "mapValue", "key", "value", "mapCalloutSizeToTextSize", "size", "mapButtonSizeToSpinnerSize"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",