@while-and-for/tremor-react/dist/components/input-elements/BaseInput.js

The React library to build dashboards faster.

'use client';
import{__rest as e}from"tslib";import t,{useState as r,useRef as a}from"react";import{border as l}from"../../lib/shape.js";import{sizing as n}from"../../lib/sizing.js";import{spacing as o}from"../../lib/spacing.js";import{mergeRefs as s}from"../../lib/utils.js";import{tremorTwMerge as i}from"../../lib/tremorTwMerge.js";import d from"../../assets/ExclamationFilledIcon.js";import{getSelectButtonColors as m,hasValue as u}from"./selectUtils.js";const p=t.forwardRef(((p,c)=>{const{value:g,defaultValue:b,type:f,placeholder:h="Type...",icon:k,error:x=!1,errorMessage:w,disabled:N=!1,stepper:j,makeInputClassName:v,className:E}=p,y=e(p,["value","defaultValue","type","placeholder","icon","error","errorMessage","disabled","stepper","makeInputClassName","className"]),[I,M]=r(!1),R=k,C=a(null),F=u(g||b),L=e=>{var t,r;!1===e?null===(t=C.current)||void 0===t||t.blur():null===(r=C.current)||void 0===r||r.focus(),M(e)};return t.createElement(t.Fragment,null,t.createElement("div",{className:i(v("root"),"relative w-full flex items-center min-w-[10rem] outline-none rounded-tremor-default","shadow-tremor-input","dark:shadow-dark-tremor-input",m(F,N,x),I&&i("ring-2 transition duration-100","border-tremor-brand-subtle ring-tremor-brand-muted","dark:border-dark-tremor-brand-subtle dark:ring-dark-tremor-brand-muted"),l.sm.all,E),onClick:()=>{N||L(!0)},onFocus:()=>{L(!0)},onBlur:()=>{L(!1)}},R?t.createElement(R,{className:i(v("icon"),"shrink-0","text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",n.lg.height,n.lg.width,o.xl.marginLeft)}):null,t.createElement("input",Object.assign({ref:s([C,c]),defaultValue:b,value:g,type:f,className:i(v("input"),"w-full focus:outline-none focus:ring-0 border-none bg-transparent text-tremor-default","text-tremor-content-emphasis","dark:text-dark-tremor-content-emphasis","[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",R?o.lg.paddingLeft:o.twoXl.paddingLeft,x?o.lg.paddingRight:o.twoXl.paddingRight,o.sm.paddingY,N?"placeholder:text-tremor-content-subtle dark:placeholder:text-dark-tremor-content-subtle":"placeholder:text-tremor-content dark:placeholder:text-dark-tremor-content"),placeholder:h,disabled:N,"data-testid":"base-input"},y)),x?t.createElement(d,{className:i(v("errorIcon"),"text-rose-500 shrink-0",o.md.marginRight,n.lg.height,n.lg.width)}):null,null!=j?j:null),x&&w?t.createElement("p",{className:i(v("errorMessage"),"text-sm text-rose-500 mt-1")},w):null)}));p.displayName="BaseInput";export{p as default};