@radix-ui/themes/dist/esm/components/text-field.js

[](https://radix-ui.com/themes)

"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(`
            .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};
//# sourceMappingURL=text-field.js.map