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

Vela UI React components

"use client"
"use strict";"use client";var L=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var pe=Object.prototype.hasOwnProperty;var le=(e,t)=>{for(var o in t)L(e,o,{get:t[o],enumerable:!0})},de=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of ie(t))!pe.call(e,r)&&r!==o&&L(e,r,{get:()=>t[r],enumerable:!(s=ae(t,r))||s.enumerable});return e};var ce=e=>de(L({},"__esModule",{value:!0}),e);var _e={};le(_e,{Combobox:()=>Ee,ComboboxDescription:()=>Fe,ComboboxInput:()=>Te,ComboboxItem:()=>Be,ComboboxLabel:()=>Se,ComboboxList:()=>Ae,ComboboxPopover:()=>Ve,ComboboxSection:()=>ke});module.exports=ce(_e);var v=require("react-aria-components");var I=require("react/jsx-runtime"),k=e=>(0,I.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,I.jsx)("path",{d:"M20 6 9 17l-5-5"})});var P=require("react/jsx-runtime"),B=e=>(0,P.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,P.jsx)("path",{d:"m7 15 5 5 5-5"}),(0,P.jsx)("path",{d:"m7 9 5-5 5 5"})]});var D=require("react/jsx-runtime"),S=e=>(0,D.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,D.jsx)("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"})});var y=require("react/jsx-runtime"),F=e=>(0,y.jsxs)("svg",{fill:"none",width:"1em",height:"1em",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,y.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,y.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 _=require("clsx"),G=require("react-aria-components"),E=require("tailwind-merge"),C=(...e)=>(0,E.twMerge)((0,_.clsx)(...e));function V(e,t){return(0,G.composeRenderProps)(e,o=>(0,E.twMerge)(t,o))}var z=require("react-aria-components"),H=require("tailwind-variants");var M=require("tailwind-variants"),w=(0,M.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 O=require("tailwind-variants");var a=require("react/jsx-runtime"),me=(0,O.tv)({base:"relative",variants:{size:{xs:"size-3",sm:"size-4",md:"size-5",lg:"size-8",xl:"size-10"}},defaultVariants:{size:"md"}});function ue({className:e,...t}){return(0,a.jsx)(S,{className:C("size-4 animate-spin",e),"data-slot":"icon",...t})}var xe=({className:e,...t})=>(0,a.jsx)(F,{className:C("size-4 animate-spin",e),"data-slot":"icon",...t});function fe({className:e,...t}){return(0,a.jsx)("svg",{className:C("size-4 stroke-current",e),"data-slot":"icon",viewBox:"0 0 2400 2400",...t,children:(0,a.jsxs)("g",{strokeWidth:"200",strokeLinecap:"round",fill:"none",children:[(0,a.jsx)("line",{x1:"1200",y1:"600",x2:"1200",y2:"100"}),(0,a.jsx)("line",{opacity:"0.5",x1:"1200",y1:"2300",x2:"1200",y2:"1800"}),(0,a.jsx)("line",{opacity:"0.917",x1:"900",y1:"680.4",x2:"650",y2:"247.4"}),(0,a.jsx)("line",{opacity:"0.417",x1:"1750",y1:"2152.6",x2:"1500",y2:"1719.6"}),(0,a.jsx)("line",{opacity:"0.833",x1:"680.4",y1:"900",x2:"247.4",y2:"650"}),(0,a.jsx)("line",{opacity:"0.333",x1:"2152.6",y1:"1750",x2:"1719.6",y2:"1500"}),(0,a.jsx)("line",{opacity:"0.75",x1:"600",y1:"1200",x2:"100",y2:"1200"}),(0,a.jsx)("line",{opacity:"0.25",x1:"2300",y1:"1200",x2:"1800",y2:"1200"}),(0,a.jsx)("line",{opacity:"0.667",x1:"680.4",y1:"1500",x2:"247.4",y2:"1750"}),(0,a.jsx)("line",{opacity:"0.167",x1:"2152.6",y1:"650",x2:"1719.6",y2:"900"}),(0,a.jsx)("line",{opacity:"0.583",x1:"900",y1:"1719.6",x2:"650",y2:"2152.6"}),(0,a.jsx)("line",{opacity:"0.083",x1:"1750",y1:"247.4",x2:"1500",y2:"680.4"}),(0,a.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 ge={default:ue,ring:xe,spin:fe},be="default";function W(e){let{className:t,size:o,ref:s,variant:r,...n}=e,i=ge[r!=null?r:be];return(0,a.jsx)(i,{role:"presentation",ref:s,className:me({size:o,className:t}),...n})}var b=require("react/jsx-runtime"),ve=(0,H.tv)({extend:w,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 U({className:e,variant:t,size:o,shape:s,loader:r=(0,b.jsx)(W,{}),...n}){return(0,b.jsx)(z.Button,{"data-slot":"button",className:(0,z.composeRenderProps)(e,(i,h)=>ve({...h,variant:t,size:o,shape:s,className:i})),...n,children:(0,z.composeRenderProps)(n.children,i=>(0,b.jsxs)(b.Fragment,{children:[n.isPending&&r,i]}))})}var p=require("react-aria-components"),q=require("tailwind-merge"),X=require("tailwind-variants");var d=require("react/jsx-runtime"),he=(0,X.tv)({base:"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[selection-mode]:pr-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",variants:{variant:{default:"",destructive:"text-destructive *:[svg]:!text-destructive"},isFocused:{true:"bg-accent text-accent-foreground"},isHovered:{true:"bg-accent text-accent-foreground"},isDisabled:{true:"pointer-events-none opacity-50"}},compoundVariants:[{variant:"destructive",isFocused:!0,className:"bg-destructive/10 dark:bg-destructive/20 text-destructive"}]});function Z({className:e,...t}){return(0,d.jsxs)(p.ListBoxSection,{className:e,children:["title"in t&&(0,d.jsx)(p.Header,{className:"text-muted-foreground px-2 py-1.5 text-xs",children:t.title}),(0,d.jsx)(p.Collection,{items:t.items,children:t.children})]})}function j({className:e,variant:t,...o}){let s=o.textValue||(typeof o.children=="string"?o.children:void 0);return(0,d.jsx)(p.ListBoxItem,{textValue:s,className:(0,p.composeRenderProps)(e,(r,n)=>he({...n,variant:t,className:r})),...o,children:(0,p.composeRenderProps)(o.children,(r,{isSelected:n})=>(0,d.jsxs)(d.Fragment,{children:[n&&(0,d.jsx)("span",{className:"pointer-events-none absolute right-2 flex size-4 items-center justify-center",children:(0,d.jsx)(k,{})}),r]}))})}function J({className:e,...t}){return(0,d.jsx)(p.Text,{slot:"label",className:e,...t})}function K({className:e,...t}){return(0,d.jsx)(p.Text,{slot:"description",className:(0,q.twMerge)("text-muted-foreground text-sm",e),...t})}var x=require("react-aria-components"),Q=require("tailwind-variants"),R=require("react/jsx-runtime"),Pe=(0,Q.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:ye,description:we,fieldError:ze}=Pe();function Y({className:e,...t}){return(0,R.jsx)(x.Label,{"data-slot":"label",className:ye({className:e}),...t})}function $({className:e,...t}){return(0,R.jsx)(x.Text,{slot:"description",className:we({className:e}),...t})}function ee({className:e,...t}){return(0,R.jsx)(x.FieldError,{className:(0,x.composeRenderProps)(e,o=>ze({className:o})),...t})}var N=require("react"),f=require("react-aria-components"),A=require("tailwind-variants");var c=require("react/jsx-runtime"),Ce=(0,A.tv)({extend:w,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:w.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 T({className:e,size:t,hasStartElement:o,hasEndElement:s,...r}){return(0,c.jsx)(f.Input,{"data-slot":"input",className:(0,f.composeRenderProps)(e,(n,i)=>Ce({...i,size:t,hasStartElement:o,hasEndElement:s,className:n})),...r})}var Re=(0,A.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:Ne,addon:Le,element:Ie}=Re(),re=({children:e,startElement:t,endElement:o,startAddon:s,endAddon:r,size:n,className:i,...h})=>(0,c.jsx)(f.Group,{"data-slot":"input-group",className:(0,f.composeRenderProps)(i,g=>Ne({size:n,className:g})),...h,children:(0,f.composeRenderProps)(e,g=>(0,c.jsxs)(c.Fragment,{children:[t&&!s&&(0,c.jsx)(oe,{size:n,className:"left-0",children:t}),s&&(0,c.jsx)(te,{size:n,children:s}),(0,N.isValidElement)(g)&&g.type===T?(0,N.cloneElement)(g,{hasStartElement:!!t,hasEndElement:!!o,size:n,...g.props||{}}):g,o&&!r&&(0,c.jsx)(oe,{size:n,className:"right-0",children:o}),r&&(0,c.jsx)(te,{size:n,children:r})]}))});function te({className:e,size:t,...o}){return(0,c.jsx)("div",{"data-slot":"input-addon",className:Le({size:t,className:e}),...o})}function oe({className:e,size:t,...o}){return(0,c.jsx)("div",{"data-slot":"input-element",className:Ie({size:t,className:e}),...o})}var m=require("react-aria-components"),ne=require("tailwind-variants");var u=require("react/jsx-runtime"),De=(0,ne.tv)({base:"bg-popover text-popover-foreground z-50 rounded-md border shadow-md outline-hidden transition duration-200",variants:{isEntering:{true:["animate-in fade-in-0 zoom-in-95","data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 data-[placement=bottom]:slide-in-from-top-2"]},isExiting:{true:["animate-out fade-out-0 zoom-out-95","data-[placement=left]:slide-out-to-right-2 data-[placement=right]:slide-out-to-left-2 data-[placement=top]:slide-out-to-bottom-2 data-[placement=bottom]:slide-out-to-top-2"]}}});var se=({className:e,showArrow:t,...o})=>{let s=(0,m.useSlottedContext)(m.PopoverContext),r=(s==null?void 0:s.trigger)==="SubmenuTrigger",n=t?12:8;return n=r?n-6:n,(0,u.jsx)(m.Popover,{"data-slot":"popover",offset:n,className:(0,m.composeRenderProps)(e,(i,h)=>De({...h,className:i})),...o,children:(0,m.composeRenderProps)(o.children,i=>(0,u.jsxs)(u.Fragment,{children:[t&&(0,u.jsx)(m.OverlayArrow,{className:"group",children:(0,u.jsx)("svg",{width:12,height:12,viewBox:"0 0 12 12",className:"fill-popover stroke-border block stroke-1 group-data-[placement=bottom]:rotate-180 group-data-[placement=left]:-rotate-90 group-data-[placement=right]:rotate-90",children:(0,u.jsx)("path",{d:"M0 0 L6 6 L12 0"})})}),i]}))})};var l=require("react/jsx-runtime");function Ee({label:e,description:t,errorMessage:o,children:s,className:r,...n}){return(0,l.jsx)(v.ComboBox,{"data-slot":"combobox",...n,className:V(r,"group flex w-full flex-col gap-2"),children:(0,v.composeRenderProps)(s,i=>(0,l.jsxs)(l.Fragment,{children:[e&&(0,l.jsx)(Y,{children:e}),i,t&&(0,l.jsx)($,{children:t}),(0,l.jsx)(ee,{children:o})]}))})}function Ve({className:e,...t}){return(0,l.jsx)(se,{showArrow:!1,className:e,style:{minWidth:"var(--trigger-width)"},...t})}function Ae({className:e,...t}){return(0,l.jsx)(v.ListBox,{className:V(e,"max-h-[inherit] min-w-[inherit] overflow-auto p-1 outline-hidden"),...t})}function Te({size:e,endElementProps:t,endElement:o=(0,l.jsx)(U,{variant:"ghost",shape:"square",size:e,...t,children:(0,l.jsx)(B,{})}),...s}){return(0,l.jsx)(re,{size:e,endElement:o,children:(0,l.jsx)(T,{...s})})}var ke=Z,Be=j,Se=J,Fe=K;0&&(module.exports={Combobox,ComboboxDescription,ComboboxInput,ComboboxItem,ComboboxLabel,ComboboxList,ComboboxPopover,ComboboxSection});