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

Vela UI React components

"use client"
"use strict";"use client";var R=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var Y=Object.prototype.hasOwnProperty;var $=(e,t)=>{for(var r in t)R(e,r,{get:t[r],enumerable:!0})},j=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of Q(t))!Y.call(e,s)&&s!==r&&R(e,s,{get:()=>t[s],enumerable:!(n=K(t,s))||n.enumerable});return e};var ee=e=>j(R({},"__esModule",{value:!0}),e);var be={};$(be,{SearchField:()=>ye});module.exports=ee(be);var w=require("react-aria-components"),Z=require("tailwind-variants");var g=require("react/jsx-runtime"),k=e=>(0,g.jsxs)("svg",{fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",width:"1em",height:"1em",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,g.jsx)("path",{d:"M18 6 6 18"}),(0,g.jsx)("path",{d:"m6 6 12 12"})]});var E=require("react/jsx-runtime"),C=e=>(0,E.jsx)("svg",{fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",width:"1em",height:"1em",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,E.jsx)("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"})});var f=require("react/jsx-runtime"),F=e=>(0,f.jsxs)("svg",{fill:"none",width:"1em",height:"1em",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,f.jsx)("path",{stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"3.636",d:"M11.909 21a9.09 9.09 0 1 0 0-18.182 9.09 9.09 0 0 0 0 18.182Z"}),(0,f.jsx)("path",{fill:"currentColor",d:"M4.636 11.91a7.273 7.273 0 0 1 7.273-7.274V1C5.885 1 1 5.885 1 11.91zm1.819 4.81a7.24 7.24 0 0 1-1.819-4.81H1c0 2.764 1.032 5.294 2.727 7.215z"})]});var h=require("react/jsx-runtime"),L=e=>(0,h.jsxs)("svg",{fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",width:"1em",height:"1em",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,h.jsx)("path",{d:"m21 21-4.34-4.34"}),(0,h.jsx)("circle",{cx:"11",cy:"11",r:"8"})]});var y=require("react-aria-components"),B=require("tailwind-variants");var A=require("tailwind-variants"),v=(0,A.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 T=require("tailwind-variants");var S=require("clsx"),te=require("react-aria-components"),G=require("tailwind-merge"),b=(...e)=>(0,G.twMerge)((0,S.clsx)(...e));var o=require("react/jsx-runtime"),re=(0,T.tv)({base:"relative",variants:{size:{xs:"size-3",sm:"size-4",md:"size-5",lg:"size-8",xl:"size-10"}},defaultVariants:{size:"md"}});function oe({className:e,...t}){return(0,o.jsx)(C,{className:b("size-4 animate-spin",e),"data-slot":"icon",...t})}var se=({className:e,...t})=>(0,o.jsx)(F,{className:b("size-4 animate-spin",e),"data-slot":"icon",...t});function ae({className:e,...t}){return(0,o.jsx)("svg",{className:b("size-4 stroke-current",e),"data-slot":"icon",viewBox:"0 0 2400 2400",...t,children:(0,o.jsxs)("g",{strokeWidth:"200",strokeLinecap:"round",fill:"none",children:[(0,o.jsx)("line",{x1:"1200",y1:"600",x2:"1200",y2:"100"}),(0,o.jsx)("line",{opacity:"0.5",x1:"1200",y1:"2300",x2:"1200",y2:"1800"}),(0,o.jsx)("line",{opacity:"0.917",x1:"900",y1:"680.4",x2:"650",y2:"247.4"}),(0,o.jsx)("line",{opacity:"0.417",x1:"1750",y1:"2152.6",x2:"1500",y2:"1719.6"}),(0,o.jsx)("line",{opacity:"0.833",x1:"680.4",y1:"900",x2:"247.4",y2:"650"}),(0,o.jsx)("line",{opacity:"0.333",x1:"2152.6",y1:"1750",x2:"1719.6",y2:"1500"}),(0,o.jsx)("line",{opacity:"0.75",x1:"600",y1:"1200",x2:"100",y2:"1200"}),(0,o.jsx)("line",{opacity:"0.25",x1:"2300",y1:"1200",x2:"1800",y2:"1200"}),(0,o.jsx)("line",{opacity:"0.667",x1:"680.4",y1:"1500",x2:"247.4",y2:"1750"}),(0,o.jsx)("line",{opacity:"0.167",x1:"2152.6",y1:"650",x2:"1719.6",y2:"900"}),(0,o.jsx)("line",{opacity:"0.583",x1:"900",y1:"1719.6",x2:"650",y2:"2152.6"}),(0,o.jsx)("line",{opacity:"0.083",x1:"1750",y1:"247.4",x2:"1500",y2:"680.4"}),(0,o.jsx)("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",keyTimes:"0;0.08333;0.16667;0.25;0.33333;0.41667;0.5;0.58333;0.66667;0.75;0.83333;0.91667",values:"0 1199 1199;30 1199 1199;60 1199 1199;90 1199 1199;120 1199 1199;150 1199 1199;180 1199 1199;210 1199 1199;240 1199 1199;270 1199 1199;300 1199 1199;330 1199 1199",dur:"0.83333s",begin:"0.08333s",repeatCount:"indefinite",calcMode:"discrete"})]})})}var ne={default:oe,ring:se,spin:ae},ie="default";function _(e){let{className:t,size:r,ref:n,variant:s,...a}=e,p=ne[s!=null?s:ie];return(0,o.jsx)(p,{role:"presentation",ref:n,className:re({size:r,className:t}),...a})}var m=require("react/jsx-runtime"),pe=(0,B.tv)({extend:v,base:"inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap transition-all [&_svg]:pointer-events-none [&_svg]:shrink-0",variants:{variant:{neutral:"bg-neutral text-neutral-foreground hover:bg-neutral/90 shadow-xs",primary:"bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",accent:"bg-accent text-accent-foreground hover:bg-accent/80 shadow-xs",destructive:"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",outline:"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{xs:"size-8 gap-1 text-xs [&_svg:not([class*='size-'])]:size-4",sm:"size-9 gap-2 text-sm [&_svg:not([class*='size-'])]:size-4",md:"size-10 gap-2 text-sm [&_svg:not([class*='size-'])]:size-5",lg:"size-11 gap-2.5 text-base [&_svg:not([class*='size-'])]:size-5",xl:"size-12 gap-2.5 text-base [&_svg:not([class*='size-'])]:size-5"},shape:{rectangle:"",square:"",circle:"rounded-full"},isDisabled:{true:"pointer-events-none opacity-50"},isPending:{true:"pointer-events-none opacity-50"}},compoundVariants:[{size:"xs",shape:"rectangle",className:"w-auto px-2.5"},{size:"sm",shape:"rectangle",className:"w-auto px-3.5"},{size:"md",shape:"rectangle",className:"w-auto px-4"},{size:"lg",shape:"rectangle",className:"w-auto px-5"},{size:"xl",shape:"rectangle",className:"w-auto px-5"}],defaultVariants:{variant:"primary",size:"md",shape:"rectangle"}});function D({className:e,variant:t,size:r,shape:n,loader:s=(0,m.jsx)(_,{}),...a}){return(0,m.jsx)(y.Button,{"data-slot":"button",className:(0,y.composeRenderProps)(e,(p,x)=>pe({...x,variant:t,size:r,shape:n,className:p})),...a,children:(0,y.composeRenderProps)(a.children,p=>(0,m.jsxs)(m.Fragment,{children:[a.isPending&&s,p]}))})}var c=require("react-aria-components"),M=require("tailwind-variants"),P=require("react/jsx-runtime"),le=(0,M.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:de,description:ce,fieldError:ue}=le();function O({className:e,...t}){return(0,P.jsx)(c.Label,{"data-slot":"label",className:de({className:e}),...t})}function W({className:e,...t}){return(0,P.jsx)(c.Text,{slot:"description",className:ce({className:e}),...t})}function q({className:e,...t}){return(0,P.jsx)(c.FieldError,{className:(0,c.composeRenderProps)(e,r=>ue({className:r})),...t})}var z=require("react"),u=require("react-aria-components"),N=require("tailwind-variants");var i=require("react/jsx-runtime"),me=(0,N.tv)({extend:v,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:v.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 V({className:e,size:t,hasStartElement:r,hasEndElement:n,...s}){return(0,i.jsx)(u.Input,{"data-slot":"input",className:(0,u.composeRenderProps)(e,(a,p)=>me({...p,size:t,hasStartElement:r,hasEndElement:n,className:a})),...s})}var xe=(0,N.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:ge,addon:fe,element:he}=xe(),X=({children:e,startElement:t,endElement:r,startAddon:n,endAddon:s,size:a,className:p,...x})=>(0,i.jsx)(u.Group,{"data-slot":"input-group",className:(0,u.composeRenderProps)(p,d=>ge({size:a,className:d})),...x,children:(0,u.composeRenderProps)(e,d=>(0,i.jsxs)(i.Fragment,{children:[t&&!n&&(0,i.jsx)(U,{size:a,className:"left-0",children:t}),n&&(0,i.jsx)(H,{size:a,children:n}),(0,z.isValidElement)(d)&&d.type===V?(0,z.cloneElement)(d,{hasStartElement:!!t,hasEndElement:!!r,size:a,...d.props||{}}):d,r&&!s&&(0,i.jsx)(U,{size:a,className:"right-0",children:r}),s&&(0,i.jsx)(H,{size:a,children:s})]}))});function H({className:e,size:t,...r}){return(0,i.jsx)("div",{"data-slot":"input-addon",className:fe({size:t,className:e}),...r})}function U({className:e,size:t,...r}){return(0,i.jsx)("div",{"data-slot":"input-element",className:he({size:t,className:e}),...r})}var l=require("react/jsx-runtime"),ve=(0,Z.tv)({base:"group flex flex-col gap-2 data-[empty=true]:[&_button]:hidden [&_input]:[&::-webkit-search-cancel-button]:appearance-none [&_input]:[&::-webkit-search-decoration]:appearance-none"});function ye({placeholder:e,label:t,description:r,errorMessage:n,size:s,className:a,startElement:p=(0,l.jsx)(L,{}),endElement:x=(0,l.jsx)(D,{variant:"ghost",shape:"circle",size:"xs",children:(0,l.jsx)(k,{})}),...d}){var I;return(0,l.jsxs)(w.SearchField,{"aria-label":(I=e!=null?e:d["aria-label"])!=null?I:"Search",className:(0,w.composeRenderProps)(a,J=>ve({className:J})),...d,children:[t&&(0,l.jsx)(O,{children:t}),(0,l.jsx)(X,{size:s,startElement:p,endElement:x,children:(0,l.jsx)(V,{placeholder:e})}),r&&(0,l.jsx)(W,{children:r}),(0,l.jsx)(q,{children:n})]})}0&&(module.exports={SearchField});