@vela-ui/react/dist/components/input.js

Vela UI React components

"use client"
"use strict";"use client";var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var s in t)u(e,s,{get:t[s],enumerable:!0})},v=(e,t,s,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of I(t))!N.call(e,a)&&a!==s&&u(e,a,{get:()=>t[a],enumerable:!(o=g(t,a))||o.enumerable});return e};var P=e=>v(u({},"__esModule",{value:!0}),e);var A={};z(A,{Input:()=>b,InputGroup:()=>S});module.exports=P(A);var l=require("react"),p=require("react-aria-components"),c=require("tailwind-variants");var x=require("tailwind-variants"),m=(0,x.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 n=require("react/jsx-runtime"),R=(0,c.tv)({extend:m,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:m.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 b({className:e,size:t,hasStartElement:s,hasEndElement:o,...a}){return(0,n.jsx)(p.Input,{"data-slot":"input",className:(0,p.composeRenderProps)(e,(r,d)=>R({...d,size:t,hasStartElement:s,hasEndElement:o,className:r})),...a})}var V=(0,c.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:G,addon:w,element:y}=V(),S=({children:e,startElement:t,endElement:s,startAddon:o,endAddon:a,size:r,className:d,...E})=>(0,n.jsx)(p.Group,{"data-slot":"input-group",className:(0,p.composeRenderProps)(d,i=>G({size:r,className:i})),...E,children:(0,p.composeRenderProps)(e,i=>(0,n.jsxs)(n.Fragment,{children:[t&&!o&&(0,n.jsx)(h,{size:r,className:"left-0",children:t}),o&&(0,n.jsx)(f,{size:r,children:o}),(0,l.isValidElement)(i)&&i.type===b?(0,l.cloneElement)(i,{hasStartElement:!!t,hasEndElement:!!s,size:r,...i.props||{}}):i,s&&!a&&(0,n.jsx)(h,{size:r,className:"right-0",children:s}),a&&(0,n.jsx)(f,{size:r,children:a})]}))});function f({className:e,size:t,...s}){return(0,n.jsx)("div",{"data-slot":"input-addon",className:w({size:t,className:e}),...s})}function h({className:e,size:t,...s}){return(0,n.jsx)("div",{"data-slot":"input-element",className:y({size:t,className:e}),...s})}0&&(module.exports={Input,InputGroup});