@vela-ui/react/dist/components/text-field.js

Vela UI React components

"use client"
"use strict";"use client";var P=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var r in e)P(t,r,{get:e[r],enumerable:!0})},_=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of L(e))!S.call(t,o)&&o!==r&&P(t,o,{get:()=>e[o],enumerable:!(a=C(e,o))||a.enumerable});return t};var k=t=>_(P({},"__esModule",{value:!0}),t);var Y={};D(Y,{TextField:()=>X});module.exports=k(Y);var x=require("react-aria-components"),V=require("tailwind-variants");var p=require("react-aria-components"),h=require("tailwind-variants"),m=require("react/jsx-runtime"),O=(0,h.tv)({slots:{label:"group-data-[invalid]:text-destructive flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",description:"text-muted-foreground text-sm",fieldError:"text-destructive text-sm"}}),{label:M,description:q,fieldError:B}=O();function F({className:t,...e}){return(0,m.jsx)(p.Label,{"data-slot":"label",className:M({className:t}),...e})}function y({className:t,...e}){return(0,m.jsx)(p.Text,{slot:"description",className:q({className:t}),...e})}function I({className:t,...e}){return(0,m.jsx)(p.FieldError,{className:(0,p.composeRenderProps)(t,r=>B({className:r})),...e})}var c=require("react"),l=require("react-aria-components"),E=require("tailwind-variants");var N=require("tailwind-variants"),b=(0,N.tv)({base:"outline-hidden",variants:{isFocusVisible:{true:"border-ring ring-ring/50 ring-[3px]"},isInvalid:{true:"ring-destructive/20 dark:ring-destructive/40 border-destructive"}}});var s=require("react/jsx-runtime"),H=(0,E.tv)({extend:b,base:"file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 border-input relative flex w-full min-w-0 rounded-md border bg-transparent py-1 shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",variants:{size:{xs:"h-8 px-2 text-xs",sm:"h-9 px-2.5 text-sm",md:"h-10 px-3 text-sm",lg:"h-11 px-4 text-base",xl:"h-12 px-[1.125rem] text-base"},isFocused:b.variants.isFocusVisible,hasStartElement:{true:""},hasEndElement:{true:""}},compoundVariants:[{hasStartElement:!0,size:"xs",className:"pl-8"},{hasStartElement:!0,size:"sm",className:"pl-9"},{hasStartElement:!0,size:"md",className:"pl-10"},{hasStartElement:!0,size:"lg",className:"pl-11"},{hasStartElement:!0,size:"xl",className:"pl-12"},{hasEndElement:!0,size:"xs",className:"pr-8"},{hasEndElement:!0,size:"sm",className:"pr-9"},{hasEndElement:!0,size:"md",className:"pr-10"},{hasEndElement:!0,size:"lg",className:"pr-11"},{hasEndElement:!0,size:"xl",className:"pr-12"}],defaultVariants:{size:"md"}});function g({className:t,size:e,hasStartElement:r,hasEndElement:a,...o}){return(0,s.jsx)(l.Input,{"data-slot":"input",className:(0,l.composeRenderProps)(t,(n,u)=>H({...u,size:e,hasStartElement:r,hasEndElement:a,className:n})),...o})}var J=(0,E.tv)({slots:{root:["relative isolate flex w-full flex-row items-center justify-start gap-0","has-[[data-slot=input-addon]]:[&_:not(:first-child)]:-ml-px","has-[[data-slot=input-addon]]:[&_:not(:first-child)]:rounded-ss-none has-[[data-slot=input-addon]]:[&_:not(:first-child)]:rounded-es-none","has-[[data-slot=input-addon]]:[&_:not(:last-child)]:rounded-se-none has-[[data-slot=input-addon]]:[&_:not(:last-child)]:rounded-ee-none"],addon:"border-input bg-accent flex w-auto items-center self-stretch rounded-md border whitespace-nowrap",element:"text-muted-foreground absolute inset-y-0 z-50 flex items-center has-[button]:px-0 [&_button]:scale-75"},variants:{size:{xs:{root:"text-xs",addon:"px-2.5",element:"px-2.5"},sm:{root:"text-sm",addon:"px-3",element:"px-3"},md:{root:"text-sm",addon:"px-3",element:"px-3"},lg:{root:"text-base",addon:"px-3.5",element:"px-3.5"},xl:{root:"text-base",addon:"px-4",element:"px-4"}}},defaultVariants:{size:"md"}}),{root:K,addon:Q,element:U}=J(),z=({children:t,startElement:e,endElement:r,startAddon:a,endAddon:o,size:n,className:u,...f})=>(0,s.jsx)(l.Group,{"data-slot":"input-group",className:(0,l.composeRenderProps)(u,i=>K({size:n,className:i})),...f,children:(0,l.composeRenderProps)(t,i=>(0,s.jsxs)(s.Fragment,{children:[e&&!a&&(0,s.jsx)(R,{size:n,className:"left-0",children:e}),a&&(0,s.jsx)(v,{size:n,children:a}),(0,c.isValidElement)(i)&&i.type===g?(0,c.cloneElement)(i,{hasStartElement:!!e,hasEndElement:!!r,size:n,...i.props||{}}):i,r&&!o&&(0,s.jsx)(R,{size:n,className:"right-0",children:r}),o&&(0,s.jsx)(v,{size:n,children:o})]}))});function v({className:t,size:e,...r}){return(0,s.jsx)("div",{"data-slot":"input-addon",className:Q({size:e,className:t}),...r})}function R({className:t,size:e,...r}){return(0,s.jsx)("div",{"data-slot":"input-element",className:U({size:e,className:t}),...r})}var d=require("react/jsx-runtime"),W=(0,V.tv)({base:"group flex flex-col gap-2"});function X({placeholder:t,label:e,description:r,errorMessage:a,size:o,className:n,inputClassName:u,startElement:f,endElement:i,startAddon:A,endAddon:G,...T}){return(0,d.jsxs)(x.TextField,{className:(0,x.composeRenderProps)(n,w=>W({className:w})),...T,children:[e&&(0,d.jsx)(F,{children:e}),(0,d.jsx)(z,{size:o,startElement:f,endElement:i,startAddon:A,endAddon:G,children:(0,d.jsx)(g,{placeholder:t,className:u})}),r&&(0,d.jsx)(y,{children:r}),(0,d.jsx)(I,{children:a})]})}0&&(module.exports={TextField});