UNPKG

@vela-ui/react

Version:

Vela UI React components

3 lines (2 loc) 3.34 kB
"use client" import{a as i}from"./chunk-KCI5SKSW.mjs";import{cloneElement as f,isValidElement as h}from"react";import{Group as E,Input as b,composeRenderProps as d}from"react-aria-components";import{tv as c}from"tailwind-variants";import{Fragment as G,jsx as a,jsxs as V}from"react/jsx-runtime";var I=c({extend:i,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:i.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 N({className:n,size:t,hasStartElement:e,hasEndElement:r,...p}){return a(b,{"data-slot":"input",className:d(n,(s,l)=>I({...l,size:t,hasStartElement:e,hasEndElement:r,className:s})),...p})}var z=c({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:P,addon:R,element:g}=z(),_=({children:n,startElement:t,endElement:e,startAddon:r,endAddon:p,size:s,className:l,...x})=>a(E,{"data-slot":"input-group",className:d(l,o=>P({size:s,className:o})),...x,children:d(n,o=>V(G,{children:[t&&!r&&a(m,{size:s,className:"left-0",children:t}),r&&a(u,{size:s,children:r}),h(o)&&o.type===N?f(o,{hasStartElement:!!t,hasEndElement:!!e,size:s,...o.props||{}}):o,e&&!p&&a(m,{size:s,className:"right-0",children:e}),p&&a(u,{size:s,children:p})]}))});function u({className:n,size:t,...e}){return a("div",{"data-slot":"input-addon",className:R({size:t,className:n}),...e})}function m({className:n,size:t,...e}){return a("div",{"data-slot":"input-element",className:g({size:t,className:n}),...e})}export{N as a,_ as b};