@next-degree/pickle-shared-js 0.3.3 → 0.3.4

package/dist/components/demos/ComboboxDemo.cjs

@@ -1,2 +1,2 @@
-"use strict";"use client";var Re=Object.create;var w=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var ke=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,De=Object.prototype.hasOwnProperty;var Se=(e,t)=>{for(var a in t)w(e,a,{get:t[a],enumerable:!0})},X=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ke(t))!De.call(e,i)&&i!==a&&w(e,i,{get:()=>t[i],enumerable:!(r=Ne(t,i))||r.enumerable});return e};var f=(e,t,a)=>(a=e!=null?Re(we(e)):{},X(t||!e||!e.__esModule?w(a,"default",{value:e,enumerable:!0}):a,e)),Te=e=>X(w({},"__esModule",{value:!0}),e);var Fe={};Se(Fe,{default:()=>je});module.exports=Te(Fe);var F=require("react");var x=require("react"),fe=require("lucide-react"),ue=require("cva");var $=require("clsx"),q=require("tailwind-merge");function o(...e){return(0,q.twMerge)((0,$.clsx)(e))}var m=require("cmdk"),te=require("lucide-react"),n=f(require("react"),1);var l=f(require("@radix-ui/react-dialog"),1),Q=require("lucide-react"),s=f(require("react"),1);var Ee=l.Portal;var Z=s.forwardRef(({className:e,...t},a)=>s.createElement(l.Overlay,{ref:a,className:o("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t}));Z.displayName=l.Overlay.displayName;var ee=s.forwardRef(({className:e,children:t,...a},r)=>s.createElement(Ee,null,s.createElement(Z,null),s.createElement(l.Content,{ref:r,className:o("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",e),...a},t,s.createElement(l.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"},s.createElement(Q.X,{className:"h-4 w-4"}),s.createElement("span",{className:"sr-only"},"Close")))));ee.displayName=l.Content.displayName;var Ie=({className:e,...t})=>s.createElement("div",{className:o("flex flex-col space-y-1.5 text-center sm:text-left",e),...t});Ie.displayName="DialogHeader";var Le=({className:e,...t})=>s.createElement("div",{className:o("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});Le.displayName="DialogFooter";var We=s.forwardRef(({className:e,...t},a)=>s.createElement(l.Title,{ref:a,className:o("text-lg font-semibold leading-none tracking-tight",e),...t}));We.displayName=l.Title.displayName;var Ve=s.forwardRef(({className:e,...t},a)=>s.createElement(l.Description,{ref:a,className:o("text-sm text-neutral-500 dark:text-neutral-400",e),...t}));Ve.displayName=l.Description.displayName;var W=n.forwardRef(({className:e,...t},a)=>n.createElement(m.Command,{ref:a,className:o("flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950",e),...t}));W.displayName=m.Command.displayName;var V=n.forwardRef(({className:e,...t},a)=>n.createElement("div",{className:"m-1 flex items-center rounded-xl border px-3","cmdk-input-wrapper":""},n.createElement(te.Search,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),n.createElement(m.Command.Input,{ref:a,className:o("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50",e),...t})));V.displayName=m.Command.Input.displayName;var z=n.forwardRef(({className:e,...t},a)=>n.createElement(m.Command.List,{ref:a,className:o("overflow-y-auto overflow-x-hidden",e),...t}));z.displayName=m.Command.List.displayName;var _=n.forwardRef((e,t)=>n.createElement(m.Command.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));_.displayName=m.Command.Empty.displayName;var M=n.forwardRef(({className:e,...t},a)=>n.createElement(m.Command.Group,{ref:a,className:o("overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500",e),...t}));M.displayName=m.Command.Group.displayName;var ze=n.forwardRef(({className:e,...t},a)=>n.createElement(m.Command.Separator,{ref:a,className:o("-mx-1 h-px bg-neutral-200",e),...t}));ze.displayName=m.Command.Separator.displayName;var B=n.forwardRef(({className:e,...t},a)=>n.createElement(m.Command.Item,{ref:a,className:o("relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50",e),...t}));B.displayName=m.Command.Item.displayName;var _e=({className:e,...t})=>n.createElement("span",{className:o("ml-auto text-xs tracking-widest text-neutral-500",e),...t});_e.displayName="CommandShortcut";var b=f(require("react"),1),g=f(require("@radix-ui/react-popover"),1);var ae=g.Root,oe=g.Trigger,H=b.forwardRef(({className:e,align:t="center",sideOffset:a=4,...r},i)=>b.createElement(g.Portal,null,b.createElement(g.Content,{ref:i,align:t,sideOffset:a,className:o("z-50 rounded-2xl border bg-white p-4 text-black shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",e),...r})));H.displayName=g.Content.displayName;var A=f(require("@radix-ui/react-separator"),1),D=f(require("react"),1);var O=D.forwardRef(({className:e,orientation:t="horizontal",decorative:a=!0,...r},i)=>D.createElement(A.Root,{ref:i,decorative:a,orientation:t,className:o("shrink-0 bg-grey-10",t==="horizontal"?"h-[1px] w-full":"h-full w-[1px]",e),...r}));O.displayName=A.Root.displayName;var le=require("lucide-react");var P=f(require("@radix-ui/react-checkbox"),1),S=require("lucide-react"),G=require("react");var ie=(0,G.forwardRef)(({className:e,...t},a)=>React.createElement(P.Root,{ref:a,className:o("group","peer","h-5","w-5","shrink-0","rounded-md","border","border-grey-10","outline","outline-1","outline-offset-2","outline-transparent","hover:border-grey-20","focus:outline-purple-100","active:border-green-80","disabled:cursor-not-allowed","disabled:opacity-50","data-[state=checked]:bg-green-80","data-[state=indeterminate]:bg-green-80","data-[state=checked]:text-white","data-[state=indeterminate]:text-primary-foreground",t.disabled&&"data-[state=checked]:text-foreground bg-grey-20 data-[state=checked]:bg-grey-20",e),...t},React.createElement(P.Indicator,{className:"flex items-center justify-center text-current"},React.createElement(S.Check,{className:"hidden h-4 w-4 group-data-[state=checked]:block"}),React.createElement(S.Minus,{className:"hidden h-4 w-4 group-data-[state=indeterminate]:block"}))));ie.displayName=P.Root.displayName;var re=(0,G.forwardRef)(({classNames:e,children:t,...a},r)=>{let{disabled:i}=a,p=a.id??`${a.name??a.value?.toString()}-checkbox`,d=i?"text-grey-40 pointer-events-none":"";return React.createElement("div",{className:o("flex space-x-2",e?.wrapper)},React.createElement(ie,{id:p,disabled:i,ref:r,...a}),React.createElement("label",{htmlFor:p,className:o(d,e?.label)},t))});re.displayName="Checkbox";var ne=re;var j=require("lucide-react");function Me({icon:e,hasCheckbox:t,isSelected:a,className:r,title:i,value:p,description:d,...I}){let N=e?(y=>{if(y in j.icons){let k=j.icons[y];return React.createElement(k,{size:14})}return null})(e):void 0;return React.createElement("li",{className:o("group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",r),...I,"data-state":a?"checked":"unchecked"},N&&React.createElement("span",{className:"mr-2"},N),t&&React.createElement(ne,{id:p,checked:a,onClick:y=>y.preventDefault()}),React.createElement("div",null,React.createElement("p",null,i),React.createElement("p",{className:"text-xs text-grey-80"},d)),React.createElement(le.CheckIcon,{className:"absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",size:16}))}var se=Me;var me=require("cva"),pe=f(require("react"),1);var Be=(0,me.cva)("rounded-full px-2 py-0.5 text-xs font-semibold",{variants:{variant:{green:"bg-green-90 text-white",pickle:"bg-pickle-100 text-black",purple:"bg-purple-100 text-white"}},defaultVariants:{variant:"green"}});function de({className:e,variant:t,...a}){return pe.createElement("div",{className:o(Be({variant:t}),e),...a})}function He({text:e,className:t,...a}){return e?React.createElement("label",{className:o("text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",t),...a},e):null}var ce=He;var C=(0,x.forwardRef)((e,t)=>{let{value:a,label:r,options:i,classNames:p,multiselect:d,placeholder:I,variant:R="default",size:N,className:y,onChange:k,children:Y}=e,he=d?a??[]:a?[a]:[],[u,K]=(0,x.useState)(he),[U,J]=(0,x.useState)(!1),xe=i?.length<=5,L=R==="default",ye=R==="chip";(0,x.useEffect)(()=>{k?.(d?u:u[0])},[u]);let be=v=>{if(d)return K(h=>h.includes(v)?h.filter(Ce=>Ce!==v):[...h,v]);K([v]),J(!1)},Pe=()=>{let v=u.length>0?u.join(", "):I;return L?v:r};return React.createElement("div",{className:o("flex flex-col gap-2",y)},L&&r&&React.createElement(ce,{text:r,className:p?.label}),React.createElement(ae,{open:U,onOpenChange:J},React.createElement(oe,{asChild:!0,disabled:i.length===0},React.createElement("div",{ref:t,className:o(Ae({variant:R,size:N}),p?.trigger),"aria-expanded":U},ye&&u.length>0&&React.createElement(de,{variant:"purple"},u.length),React.createElement("span",{className:o("truncate leading-normal",L&&u.length==0&&"text-grey-40")},Pe()),React.createElement(fe.ChevronDownIcon,{className:"transform group-data-[state=open]:rotate-180",size:"16"}))),React.createElement(W,null,React.createElement(H,{className:o("flex w-full max-w-xs flex-col overflow-hidden p-0","max-h-[--radix-popover-content-available-height]",p?.content),collisionPadding:8,sideOffset:4,align:"start"},!xe&&React.createElement(V,{placeholder:"Search..."}),React.createElement(z,null,React.createElement(_,null,"No results"),React.createElement(M,null,i.map(({id:v,...h})=>React.createElement(B,{key:v,value:h.value,onSelect:be},React.createElement(se,{className:o(p?.items,"truncate py-1"),isSelected:u?.includes(h.value),hasCheckbox:d,...h}))))),!!Y&&React.createElement(O,null),Y))))});C.displayName="Combobox";var Ae=(0,ue.cva)("group relative cursor-pointer flex flex-row items-center justify-between gap-2 border border-grey-20 focus:outline-green-80 disabled:bg-grey-5",{variants:{variant:{default:["w-full","max-w-80","rounded-lg"],chip:["font-bold","rounded-3xl","data-[state=open]:bg-black","data-[state=open]:text-white"]},size:{small:["h-8","p-1","pl-2","text-xs"],normal:["h-9","p-2","pl-3","text-sm"],large:["h-10","p-3","pl-4","text-base"]}},defaultVariants:{variant:"default",size:"normal"}});var ge=require("@radix-ui/react-slot"),ve=require("cva"),T=f(require("react"),1),E=(0,T.forwardRef)(({className:e,variant:t,size:a,asChild:r=!1,...i},p)=>T.default.createElement(r?ge.Slot:"button",{className:o(Oe({variant:t,size:a,className:e})),ref:p,...i}));E.displayName="Button";var Oe=(0,ve.cva)(["flex","items-center","justify-center","gap-2","rounded-full","font-bold","outline-2","outline-offset-2","outline-dashed","outline-transparent"],{variants:{variant:{neutral:["bg-black","text-white","hover:bg-grey-90","active:bg-grey-80","focus:outline-purple-100","disabled:text-grey-40","disabled:bg-grey-10"],primary:["bg-pickle-100","text-black","hover:bg-pickle-80","active:bg-pickle-60","focus:outline-purple-100","disabled:text-grey-40","disabled:bg-grey-10"],secondary:["bg-green-80","text-white","hover:bg-green-90","active:bg-green-100","focus:outline-pickle-100","disabled:text-grey-40","disabled:bg-grey-10"],transparent:["text-white","hover:bg-green-80","active:bg-green-100","focus:outline-pickle-100","disabled:text-grey-40"],link:["leading-tight","text-black","underline","hover:text-purple-100","focus:text-black","focus:outline-purple-100","active:text-purple-80"]},size:{small:["h-10","text-sm","px-4","py-2"],medium:["h-12","text-base","px-6","py-3"],large:["h-14","text-lg","px-8","py-4"]}},defaultVariants:{variant:"neutral",size:"medium"},compoundVariants:[{variant:"link",size:"small",class:["h-3","text-xs","p-0"]},{variant:"link",size:"medium",class:["h-4","text-sm","p-0"]},{variant:"link",size:"large",class:["h-6","text-base","p-0"]}]});function Ge(){let[e,t]=(0,F.useState)([]),[a,r]=(0,F.useState)(""),i=[{title:"Nirvana",value:"Nirvana",description:"Come As You Are",id:1},{title:"Pearl Jam",value:"Pearl Jam",description:"Jeremy",id:2},{title:"Soundgarden",value:"Soundgarden",description:"Rusty Cage",id:3},{title:"Alice in Chains",value:"Alice in Chains",description:"Would?",id:4},{title:"Stone Temple Pilots",value:"Stone Temple Pilots",id:5},{title:"Hole",value:"Hole",id:6},{title:"Mudhoney",value:"Mudhoney",id:7},{title:"Screaming Trees",value:"Screaming Trees",id:8},{title:"L7",value:"L7",id:9},{title:"Sonic Youth",value:"Sonic Youth",id:10},{title:"And You Will Know Us by the Trail of Dead",value:"And You Will Know Us by the Trail of Dead",id:11}];return React.createElement("div",{className:"flex flex-row flex-wrap items-center gap-4 p-4"},React.createElement(C,{label:"US bands from the 90's",placeholder:"Select a band",options:i,multiselect:!0,onChange:t,value:e}),React.createElement(C,{label:"US bands from the 90's",options:i,variant:"chip",multiselect:!0,onChange:t,value:e}),React.createElement(C,{label:"Fruit label",variant:"chip",options:[{title:"Cherry",value:"Cherry",id:1,icon:"Cherry"},{title:"Grape",value:"Grape",id:2,icon:"Grape"}],value:a,onChange:r},React.createElement("div",{className:"flex flex-row items-center justify-between bg-white p-2 pl-4"},React.createElement(E,{variant:"link",tabIndex:-1},"Clear"),React.createElement(E,{variant:"primary",size:"small",tabIndex:-1},"Apply"))),e.map(d=>React.createElement("span",{key:d,className:"text-green-80"},d)),React.createElement("span",{className:"text-purple-100"},a))}var je=Ge;
+"use strict";"use client";var We=Object.create;var I=Object.defineProperty;var Ve=Object.getOwnPropertyDescriptor;var ze=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,Me=Object.prototype.hasOwnProperty;var Be=(e,t)=>{for(var o in t)I(e,o,{get:t[o],enumerable:!0})},j=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ze(t))!Me.call(e,i)&&i!==o&&I(e,i,{get:()=>t[i],enumerable:!(r=Ve(t,i))||r.enumerable});return e};var b=(e,t,o)=>(o=e!=null?We(_e(e)):{},j(t||!e||!e.__esModule?I(o,"default",{value:e,enumerable:!0}):o,e)),He=e=>j(I({},"__esModule",{value:!0}),e);var et={};Be(et,{default:()=>je});module.exports=He(et);var X=require("react");var R=require("react"),Pe=require("lucide-react"),Ce=require("cva");var ee=require("clsx"),te=require("tailwind-merge");function a(...e){return(0,te.twMerge)((0,ee.clsx)(e))}var s=require("cmdk"),re=require("lucide-react"),P=b(require("react"),1);var l=b(require("@radix-ui/react-dialog"),1),oe=require("lucide-react"),k=b(require("react"),1),m=require("react/jsx-runtime");var Ae=l.Portal;var ae=k.forwardRef(({className:e,...t},o)=>(0,m.jsx)(l.Overlay,{ref:o,className:a("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t}));ae.displayName=l.Overlay.displayName;var ie=k.forwardRef(({className:e,children:t,...o},r)=>(0,m.jsxs)(Ae,{children:[(0,m.jsx)(ae,{}),(0,m.jsxs)(l.Content,{ref:r,className:a("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",e),...o,children:[t,(0,m.jsxs)(l.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400",children:[(0,m.jsx)(oe.X,{className:"h-4 w-4"}),(0,m.jsx)("span",{className:"sr-only",children:"Close"})]})]})]}));ie.displayName=l.Content.displayName;var Oe=({className:e,...t})=>(0,m.jsx)("div",{className:a("flex flex-col space-y-1.5 text-center sm:text-left",e),...t});Oe.displayName="DialogHeader";var Ge=({className:e,...t})=>(0,m.jsx)("div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});Ge.displayName="DialogFooter";var Fe=k.forwardRef(({className:e,...t},o)=>(0,m.jsx)(l.Title,{ref:o,className:a("text-lg font-semibold leading-none tracking-tight",e),...t}));Fe.displayName=l.Title.displayName;var Ye=k.forwardRef(({className:e,...t},o)=>(0,m.jsx)(l.Description,{ref:o,className:a("text-sm text-neutral-500 dark:text-neutral-400",e),...t}));Ye.displayName=l.Description.displayName;var c=require("react/jsx-runtime"),_=P.forwardRef(({className:e,...t},o)=>(0,c.jsx)(s.Command,{ref:o,className:a("flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950",e),...t}));_.displayName=s.Command.displayName;var M=P.forwardRef(({className:e,...t},o)=>(0,c.jsxs)("div",{className:"m-1 flex items-center rounded-xl border px-3","cmdk-input-wrapper":"",children:[(0,c.jsx)(re.Search,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),(0,c.jsx)(s.Command.Input,{ref:o,className:a("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50",e),...t})]}));M.displayName=s.Command.Input.displayName;var B=P.forwardRef(({className:e,...t},o)=>(0,c.jsx)(s.Command.List,{ref:o,className:a("overflow-y-auto overflow-x-hidden",e),...t}));B.displayName=s.Command.List.displayName;var H=P.forwardRef((e,t)=>(0,c.jsx)(s.Command.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));H.displayName=s.Command.Empty.displayName;var A=P.forwardRef(({className:e,...t},o)=>(0,c.jsx)(s.Command.Group,{ref:o,className:a("overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500",e),...t}));A.displayName=s.Command.Group.displayName;var Ke=P.forwardRef(({className:e,...t},o)=>(0,c.jsx)(s.Command.Separator,{ref:o,className:a("-mx-1 h-px bg-neutral-200",e),...t}));Ke.displayName=s.Command.Separator.displayName;var O=P.forwardRef(({className:e,...t},o)=>(0,c.jsx)(s.Command.Item,{ref:o,className:a("relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50",e),...t}));O.displayName=s.Command.Item.displayName;var Ue=({className:e,...t})=>(0,c.jsx)("span",{className:a("ml-auto text-xs tracking-widest text-neutral-500",e),...t});Ue.displayName="CommandShortcut";var ne=b(require("react"),1),h=b(require("@radix-ui/react-popover"),1);var G=require("react/jsx-runtime"),le=h.Root,se=h.Trigger,F=ne.forwardRef(({className:e,align:t="center",sideOffset:o=4,...r},i)=>(0,G.jsx)(h.Portal,{children:(0,G.jsx)(h.Content,{ref:i,align:t,sideOffset:o,className:a("z-50 rounded-2xl border bg-white p-4 text-black shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",e),...r})}));F.displayName=h.Content.displayName;var Y=b(require("@radix-ui/react-separator"),1),me=b(require("react"),1);var pe=require("react/jsx-runtime"),K=me.forwardRef(({className:e,orientation:t="horizontal",decorative:o=!0,...r},i)=>(0,pe.jsx)(Y.Root,{ref:i,decorative:o,orientation:t,className:a("shrink-0 bg-grey-10",t==="horizontal"?"h-[1px] w-full":"h-full w-[1px]",e),...r}));K.displayName=Y.Root.displayName;var ue=require("lucide-react");var w=b(require("@radix-ui/react-checkbox"),1),L=require("lucide-react"),U=require("react");var y=require("react/jsx-runtime"),de=(0,U.forwardRef)(({className:e,...t},o)=>(0,y.jsx)(w.Root,{ref:o,className:a("group","peer","h-5","w-5","shrink-0","rounded-md","border","border-grey-10","outline","outline-1","outline-offset-2","outline-transparent","hover:border-grey-20","focus:outline-purple-100","active:border-green-80","disabled:cursor-not-allowed","disabled:opacity-50","data-[state=checked]:bg-green-80","data-[state=indeterminate]:bg-green-80","data-[state=checked]:text-white","data-[state=indeterminate]:text-primary-foreground",t.disabled&&"data-[state=checked]:text-foreground bg-grey-20 data-[state=checked]:bg-grey-20",e),...t,children:(0,y.jsxs)(w.Indicator,{className:"flex items-center justify-center text-current",children:[(0,y.jsx)(L.Check,{className:"hidden h-4 w-4 group-data-[state=checked]:block"}),(0,y.jsx)(L.Minus,{className:"hidden h-4 w-4 group-data-[state=indeterminate]:block"})]})}));de.displayName=w.Root.displayName;var ce=(0,U.forwardRef)(({classNames:e,children:t,...o},r)=>{let{disabled:i}=o,p=o.id??`${o.name??o.value?.toString()}-checkbox`,d=i?"text-grey-40 pointer-events-none":"";return(0,y.jsxs)("div",{className:a("flex space-x-2",e?.wrapper),children:[(0,y.jsx)(de,{id:p,disabled:i,ref:r,...o}),(0,y.jsx)("label",{htmlFor:p,className:a(d,e?.label),children:t})]})});ce.displayName="Checkbox";var fe=ce;var J=require("lucide-react"),g=require("react/jsx-runtime");function Je({icon:e,hasCheckbox:t,isSelected:o,className:r,title:i,value:p,description:d,...V}){let T=e?(N=>{if(N in J.icons){let E=J.icons[N];return(0,g.jsx)(E,{size:14})}return null})(e):void 0;return(0,g.jsxs)("li",{className:a("group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",r),...V,"data-state":o?"checked":"unchecked",children:[T&&(0,g.jsx)("span",{className:"mr-2",children:T}),t&&(0,g.jsx)(fe,{id:p,checked:o,onClick:N=>N.preventDefault()}),(0,g.jsxs)("div",{children:[(0,g.jsx)("p",{children:i}),(0,g.jsx)("p",{className:"text-xs text-grey-80",children:d})]}),(0,g.jsx)(ue.CheckIcon,{className:"absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",size:16})]})}var ge=Je;var ve=require("cva");var ye=require("react/jsx-runtime"),Xe=(0,ve.cva)("rounded-full px-2 py-0.5 text-xs font-semibold",{variants:{variant:{green:"bg-green-90 text-white",pickle:"bg-pickle-100 text-black",purple:"bg-purple-100 text-white"}},defaultVariants:{variant:"green"}});function he({className:e,variant:t,...o}){return(0,ye.jsx)("div",{className:a(Xe({variant:t}),e),...o})}var be=require("react/jsx-runtime");function $e({text:e,className:t,...o}){return e?(0,be.jsx)("label",{className:a("text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",t),...o,children:e}):null}var xe=$e;var n=require("react/jsx-runtime"),D=(0,R.forwardRef)((e,t)=>{let{value:o,label:r,options:i,classNames:p,multiselect:d,placeholder:V,variant:S="default",size:T,className:N,onChange:E,children:$}=e,De=d?o??[]:o?[o]:[],[v,q]=(0,R.useState)(De),[Q,Z]=(0,R.useState)(!1),Se=i?.length<=5,z=S==="default",Te=S==="chip";(0,R.useEffect)(()=>{E?.(d?v:v[0])},[v]);let Ee=x=>{if(d)return q(C=>C.includes(x)?C.filter(Le=>Le!==x):[...C,x]);q([x]),Z(!1)},Ie=()=>{let x=v.length>0?v.join(", "):V;return z?x:r};return(0,n.jsxs)("div",{className:a("flex flex-col gap-2",N),children:[z&&r&&(0,n.jsx)(xe,{text:r,className:p?.label}),(0,n.jsxs)(le,{open:Q,onOpenChange:Z,children:[(0,n.jsx)(se,{asChild:!0,disabled:i.length===0,children:(0,n.jsxs)("div",{ref:t,className:a(qe({variant:S,size:T}),p?.trigger),"aria-expanded":Q,children:[Te&&v.length>0&&(0,n.jsx)(he,{variant:"purple",children:v.length}),(0,n.jsx)("span",{className:a("truncate leading-normal",z&&v.length==0&&"text-grey-40"),children:Ie()}),(0,n.jsx)(Pe.ChevronDownIcon,{className:"transform group-data-[state=open]:rotate-180",size:"16"})]})}),(0,n.jsx)(_,{children:(0,n.jsxs)(F,{className:a("flex w-full max-w-xs flex-col overflow-hidden p-0","max-h-[--radix-popover-content-available-height]",p?.content),collisionPadding:8,sideOffset:4,align:"start",children:[!Se&&(0,n.jsx)(M,{placeholder:"Search..."}),(0,n.jsxs)(B,{children:[(0,n.jsx)(H,{children:"No results"}),(0,n.jsx)(A,{children:i.map(({id:x,...C})=>(0,n.jsx)(O,{value:C.value,onSelect:Ee,children:(0,n.jsx)(ge,{className:a(p?.items,"truncate py-1"),isSelected:v?.includes(C.value),hasCheckbox:d,...C})},x))})]}),!!$&&(0,n.jsx)(K,{}),$]})})]})]})});D.displayName="Combobox";var qe=(0,Ce.cva)("group relative cursor-pointer flex flex-row items-center justify-between gap-2 border border-grey-20 focus:outline-green-80 disabled:bg-grey-5",{variants:{variant:{default:["w-full","max-w-80","rounded-lg"],chip:["font-bold","rounded-3xl","data-[state=open]:bg-black","data-[state=open]:text-white"]},size:{small:["h-8","p-1","pl-2","text-xs"],normal:["h-9","p-2","pl-3","text-sm"],large:["h-10","p-3","pl-4","text-base"]}},defaultVariants:{variant:"default",size:"normal"}});var Re=require("@radix-ui/react-slot"),Ne=require("cva"),ke=require("react"),we=require("react/jsx-runtime"),W=(0,ke.forwardRef)(({className:e,variant:t,size:o,asChild:r=!1,...i},p)=>(0,we.jsx)(r?Re.Slot:"button",{className:a(Qe({variant:t,size:o,className:e})),ref:p,...i}));W.displayName="Button";var Qe=(0,Ne.cva)(["flex","items-center","justify-center","gap-2","rounded-full","font-bold","outline-2","outline-offset-2","outline-dashed","outline-transparent"],{variants:{variant:{neutral:["bg-black","text-white","hover:bg-grey-90","active:bg-grey-80","focus:outline-purple-100","disabled:text-grey-40","disabled:bg-grey-10"],primary:["bg-pickle-100","text-black","hover:bg-pickle-80","active:bg-pickle-60","focus:outline-purple-100","disabled:text-grey-40","disabled:bg-grey-10"],secondary:["bg-green-80","text-white","hover:bg-green-90","active:bg-green-100","focus:outline-pickle-100","disabled:text-grey-40","disabled:bg-grey-10"],transparent:["text-white","hover:bg-green-80","active:bg-green-100","focus:outline-pickle-100","disabled:text-grey-40"],link:["leading-tight","text-black","underline","hover:text-purple-100","focus:text-black","focus:outline-purple-100","active:text-purple-80"]},size:{small:["h-10","text-sm","px-4","py-2"],medium:["h-12","text-base","px-6","py-3"],large:["h-14","text-lg","px-8","py-4"]}},defaultVariants:{variant:"neutral",size:"medium"},compoundVariants:[{variant:"link",size:"small",class:["h-3","text-xs","p-0"]},{variant:"link",size:"medium",class:["h-4","text-sm","p-0"]},{variant:"link",size:"large",class:["h-6","text-base","p-0"]}]});var u=require("react/jsx-runtime");function Ze(){let[e,t]=(0,X.useState)([]),[o,r]=(0,X.useState)(""),i=[{title:"Nirvana",value:"Nirvana",description:"Come As You Are",id:1},{title:"Pearl Jam",value:"Pearl Jam",description:"Jeremy",id:2},{title:"Soundgarden",value:"Soundgarden",description:"Rusty Cage",id:3},{title:"Alice in Chains",value:"Alice in Chains",description:"Would?",id:4},{title:"Stone Temple Pilots",value:"Stone Temple Pilots",id:5},{title:"Hole",value:"Hole",id:6},{title:"Mudhoney",value:"Mudhoney",id:7},{title:"Screaming Trees",value:"Screaming Trees",id:8},{title:"L7",value:"L7",id:9},{title:"Sonic Youth",value:"Sonic Youth",id:10},{title:"And You Will Know Us by the Trail of Dead",value:"And You Will Know Us by the Trail of Dead",id:11}];return(0,u.jsxs)("div",{className:"flex flex-row flex-wrap items-center gap-4 p-4",children:[(0,u.jsx)(D,{label:"US bands from the 90's",placeholder:"Select a band",options:i,multiselect:!0,onChange:t,value:e}),(0,u.jsx)(D,{label:"US bands from the 90's",options:i,variant:"chip",multiselect:!0,onChange:t,value:e}),(0,u.jsx)(D,{label:"Fruit label",variant:"chip",options:[{title:"Cherry",value:"Cherry",id:1,icon:"Cherry"},{title:"Grape",value:"Grape",id:2,icon:"Grape"}],value:o,onChange:r,children:(0,u.jsxs)("div",{className:"flex flex-row items-center justify-between bg-white p-2 pl-4",children:[(0,u.jsx)(W,{variant:"link",tabIndex:-1,children:"Clear"}),(0,u.jsx)(W,{variant:"primary",size:"small",tabIndex:-1,children:"Apply"})]})}),e.map(d=>(0,u.jsx)("span",{className:"text-green-80",children:d},d)),(0,u.jsx)("span",{className:"text-purple-100",children:o})]})}var je=Ze;
 //# sourceMappingURL=ComboboxDemo.cjs.map

package/dist/components/demos/ComboboxDemo.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/demos/ComboboxDemo.tsx","../../../src/components/ui/Combobox.tsx","../../../src/lib/utils.ts","../../../src/components/primitives/command.tsx","../../../src/components/primitives/dialog.tsx","../../../src/components/primitives/popover.tsx","../../../src/components/primitives/separator.tsx","../../../src/components/ui/ListItem.tsx","../../../src/components/ui/Checkbox.tsx","../../../src/components/ui/Badge.tsx","../../../src/components/ui/Label.tsx","../../../src/components/ui/Button.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { Combobox } from '@/components/ui/Combobox'\nimport { Button } from '../ui/Button'\n\nfunction ComboboxDemo() {\n  const [selectedBands, setSelectedBands] = useState<string[]>([])\n  const [selectedFruit, setSelectedFruit] = useState<string>('')\n\n  const bands = [\n    {\n      title: 'Nirvana',\n      value: 'Nirvana',\n      description: 'Come As You Are',\n      id: 1,\n    },\n    { title: 'Pearl Jam', value: 'Pearl Jam', description: 'Jeremy', id: 2 },\n    {\n      title: 'Soundgarden',\n      value: 'Soundgarden',\n      description: 'Rusty Cage',\n      id: 3,\n    },\n    {\n      title: 'Alice in Chains',\n      value: 'Alice in Chains',\n      description: 'Would?',\n      id: 4,\n    },\n    { title: 'Stone Temple Pilots', value: 'Stone Temple Pilots', id: 5 },\n    { title: 'Hole', value: 'Hole', id: 6 },\n    { title: 'Mudhoney', value: 'Mudhoney', id: 7 },\n    { title: 'Screaming Trees', value: 'Screaming Trees', id: 8 },\n    { title: 'L7', value: 'L7', id: 9 },\n    { title: 'Sonic Youth', value: 'Sonic Youth', id: 10 },\n    {\n      title: 'And You Will Know Us by the Trail of Dead',\n      value: 'And You Will Know Us by the Trail of Dead',\n      id: 11,\n    },\n  ]\n\n  const fruits = [\n    { title: 'Cherry', value: 'Cherry', id: 1, icon: 'Cherry' },\n    { title: 'Grape', value: 'Grape', id: 2, icon: 'Grape' },\n  ]\n\n  return (\n    <div className=\"flex flex-row flex-wrap items-center gap-4 p-4\">\n      <Combobox\n        label=\"US bands from the 90's\"\n        placeholder=\"Select a band\"\n        options={bands}\n        multiselect\n        onChange={setSelectedBands}\n        value={selectedBands}\n      />\n      <Combobox\n        label=\"US bands from the 90's\"\n        options={bands}\n        variant=\"chip\"\n        multiselect\n        onChange={setSelectedBands}\n        value={selectedBands}\n      />\n      <Combobox\n        label=\"Fruit label\"\n        variant=\"chip\"\n        options={fruits}\n        value={selectedFruit}\n        onChange={setSelectedFruit}\n      >\n        <div className=\"flex flex-row items-center justify-between bg-white p-2 pl-4\">\n          <Button variant=\"link\" tabIndex={-1}>\n            Clear\n          </Button>\n          <Button variant=\"primary\" size=\"small\" tabIndex={-1}>\n            Apply\n          </Button>\n        </div>\n      </Combobox>\n      {selectedBands.map((band) => (\n        <span key={band} className=\"text-green-80\">\n          {band}\n        </span>\n      ))}\n      <span className=\"text-purple-100\">{selectedFruit}</span>\n    </div>\n  )\n}\n\nexport default ComboboxDemo\n","'use client'\n\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useState } from 'react'\nimport { ChevronDownIcon } from 'lucide-react'\nimport { cva, type VariantProps } from 'cva'\nimport { cn } from '@/lib/utils'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/primitives/command'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/primitives/popover'\nimport { Separator } from '@/components/primitives/separator'\n\nimport ListItem from '@/components/ui/ListItem'\nimport { Badge } from '@/components/ui/Badge'\nimport Label from '@/components/ui/Label'\n\ntype Option = { id: number; value: string; title: string; description?: string; icon?: string }\ntype ClassNames = { label?: string; trigger?: string; items?: string; content?: string }\ntype Shared = { label?: string; options: Option[]; classNames?: ClassNames; placeholder?: string }\ntype MultiSelect = { multiselect: true; value?: string[]; onChange?: (v: string[]) => void }\ntype SingleSelect = { multiselect?: false; value?: string; onChange?: (v: string) => void }\ntype TriggerVariants = VariantProps<typeof triggerVariants>\ntype SelectProps = Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'onChange' | 'size'>\ntype MultiSelectProps = TriggerVariants & SelectProps & Shared & MultiSelect\ntype SingleSelectProps = TriggerVariants & SelectProps & Shared & SingleSelect\ntype ComboboxProps = MultiSelectProps | SingleSelectProps\n\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>((props, ref) => {\n  const {\n    value,\n    label,\n    options,\n    classNames,\n    multiselect,\n    placeholder,\n    variant = 'default',\n    size,\n    className,\n    onChange: handleChange,\n    children,\n  } = props\n  const valueArray = multiselect ? (value ?? []) : value ? [value] : []\n  const [selected, setSelected] = useState<string[]>(valueArray)\n  const [open, setOpen] = useState(false)\n  const hideSearchBox = options?.length <= 5\n  const isDefault = variant === 'default'\n  const isChip = variant === 'chip'\n\n  useEffect(() => {\n    multiselect ? handleChange?.(selected) : handleChange?.(selected[0])\n  }, [selected])\n\n  const handleSelect = (option: string) => {\n    if (multiselect) {\n      return setSelected((prev) =>\n        prev.includes(option) ? prev.filter((v) => v !== option) : [...prev, option]\n      )\n    }\n    setSelected([option])\n    setOpen(false)\n  }\n\n  const handleDisplayValue = () => {\n    const defaultLabel = selected.length > 0 ? selected.join(', ') : placeholder\n    return isDefault ? defaultLabel : label\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      {isDefault && label && <Label text={label} className={classNames?.label} />}\n\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild disabled={options.length === 0}>\n          <div\n            ref={ref}\n            className={cn(triggerVariants({ variant, size }), classNames?.trigger)}\n            aria-expanded={open}\n          >\n            {isChip && selected.length > 0 && <Badge variant=\"purple\">{selected.length}</Badge>}\n\n            <span\n              className={cn(\n                'truncate leading-normal',\n                isDefault && selected.length == 0 && 'text-grey-40'\n              )}\n            >\n              {handleDisplayValue()}\n            </span>\n\n            <ChevronDownIcon className=\"transform group-data-[state=open]:rotate-180\" size=\"16\" />\n          </div>\n        </PopoverTrigger>\n\n        <Command>\n          <PopoverContent\n            className={cn(\n              'flex w-full max-w-xs flex-col overflow-hidden p-0',\n              'max-h-[--radix-popover-content-available-height]',\n              classNames?.content\n            )}\n            collisionPadding={8}\n            sideOffset={4}\n            align=\"start\"\n          >\n            {!hideSearchBox && <CommandInput placeholder=\"Search...\" />}\n\n            <CommandList>\n              <CommandEmpty>No results</CommandEmpty>\n              <CommandGroup>\n                {options.map(({ id, ...option }) => (\n                  <CommandItem key={id} value={option.value} onSelect={handleSelect}>\n                    <ListItem\n                      className={cn(classNames?.items, 'truncate py-1')}\n                      isSelected={selected?.includes(option.value)}\n                      hasCheckbox={multiselect}\n                      {...option}\n                    />\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n\n            {!!children && <Separator />}\n            {children}\n          </PopoverContent>\n        </Command>\n      </Popover>\n    </div>\n  )\n})\nCombobox.displayName = 'Combobox'\n\nconst triggerVariants = cva(\n  'group relative cursor-pointer flex flex-row items-center justify-between gap-2 border border-grey-20 focus:outline-green-80 disabled:bg-grey-5',\n  {\n    variants: {\n      variant: {\n        default: ['w-full', 'max-w-80', 'rounded-lg'],\n        chip: [\n          'font-bold',\n          'rounded-3xl',\n          'data-[state=open]:bg-black',\n          'data-[state=open]:text-white',\n        ],\n      },\n      size: {\n        small: ['h-8', 'p-1', 'pl-2', 'text-xs'],\n        normal: ['h-9', 'p-2', 'pl-3', 'text-sm'],\n        large: ['h-10', 'p-3', 'pl-4', 'text-base'],\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'normal',\n    },\n  }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '@/components/primitives/dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950',\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ntype CommandDialogProps = DialogProps\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"m-1 flex items-center rounded-xl border px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500',\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-1 h-px bg-neutral-200', className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn('ml-auto text-xs tracking-widest text-neutral-500', className)}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n}\n","'use client'\n\nimport { cn } from '@/lib/utils'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport * as React from 'react'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n    {...props}\n  />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n","'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\n\nimport { cn } from '@/lib/utils'\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        'z-50 rounded-2xl border bg-white p-4 text-black shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n","'use client'\r\n\r\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\r\nimport * as React from 'react'\r\n\r\nimport { cn } from '@/lib/utils'\r\n\r\nconst Separator = React.forwardRef<\r\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\r\n>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (\r\n  <SeparatorPrimitive.Root\r\n    ref={ref}\r\n    decorative={decorative}\r\n    orientation={orientation}\r\n    className={cn(\r\n      'shrink-0 bg-grey-10',\r\n      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nSeparator.displayName = SeparatorPrimitive.Root.displayName\r\n\r\nexport { Separator }\r\n","import { cn } from '@/lib/utils'\nimport { CheckIcon } from 'lucide-react'\nimport { ComponentPropsWithoutRef, ReactNode } from 'react'\nimport Checkbox from '@/components/ui/Checkbox'\nimport { icons } from 'lucide-react'\n\ntype IconKey = keyof typeof icons\n\ninterface ListItemProps extends ComponentPropsWithoutRef<'li'> {\n  icon?: string\n  hasCheckbox?: boolean\n  isSelected?: boolean\n  title: string\n  value: string\n  description?: string\n}\n\nfunction ListItem({\n  icon,\n  hasCheckbox,\n  isSelected,\n  className,\n  title,\n  value,\n  description,\n  ...props\n}: ListItemProps) {\n  const getIconIfValid = (icon: string): ReactNode => {\n    if (icon in icons) {\n      const IconComponent = icons[icon as IconKey]\n      return <IconComponent size={14} />\n    }\n    return null\n  }\n\n  const optionIcon = icon ? getIconIfValid(icon) : undefined\n\n  return (\n    <li\n      className={cn(\n        'group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm',\n        className\n      )}\n      {...props}\n      data-state={isSelected ? 'checked' : 'unchecked'}\n    >\n      {optionIcon && <span className=\"mr-2\">{optionIcon}</span>}\n      {hasCheckbox && (\n        <Checkbox id={value} checked={isSelected} onClick={(e) => e.preventDefault()} />\n      )}\n      <div>\n        <p>{title}</p>\n        <p className=\"text-xs text-grey-80\">{description}</p>\n      </div>\n\n      <CheckIcon\n        className=\"absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block\"\n        size={16}\n      />\n    </li>\n  )\n}\n\nexport default ListItem\n","'use client'\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  forwardRef,\n  type PropsWithChildren,\n} from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst CheckboxToggle = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      'group',\n      'peer',\n      'h-5',\n      'w-5',\n      'shrink-0',\n      'rounded-md',\n      'border',\n      'border-grey-10',\n      'outline',\n      'outline-1',\n      'outline-offset-2',\n      'outline-transparent',\n      'hover:border-grey-20',\n      'focus:outline-purple-100',\n      'active:border-green-80',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-50',\n      'data-[state=checked]:bg-green-80',\n      'data-[state=indeterminate]:bg-green-80',\n      'data-[state=checked]:text-white',\n      'data-[state=indeterminate]:text-primary-foreground',\n      props.disabled &&\n        'data-[state=checked]:text-foreground bg-grey-20 data-[state=checked]:bg-grey-20',\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n      <Check className=\"hidden h-4 w-4 group-data-[state=checked]:block\" />\n      <Minus className=\"hidden h-4 w-4 group-data-[state=indeterminate]:block\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckboxToggle.displayName = CheckboxPrimitive.Root.displayName\n\ninterface Props extends CheckboxPrimitive.CheckboxProps, PropsWithChildren {\n  error?: string\n  classNames?: {\n    wrapper?: string\n    label?: string\n  }\n}\n\nconst Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, Props>(\n  ({ classNames, children, ...props }, ref) => {\n    const { disabled } = props\n    const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`\n    const labelClassName = disabled ? 'text-grey-40 pointer-events-none' : ''\n    return (\n      <div className={cn('flex space-x-2', classNames?.wrapper)}>\n        <CheckboxToggle id={id} disabled={disabled} ref={ref} {...props} />\n        <label htmlFor={id} className={cn(labelClassName, classNames?.label)}>\n          {children}\n        </label>\n      </div>\n    )\n  }\n)\nCheckbox.displayName = 'Checkbox'\n\nexport default Checkbox\n","import { cva, type VariantProps } from 'cva'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst badgeVariants = cva('rounded-full px-2 py-0.5 text-xs font-semibold', {\n  variants: {\n    variant: {\n      green: 'bg-green-90 text-white',\n      pickle: 'bg-pickle-100 text-black',\n      purple: 'bg-purple-100 text-white',\n    },\n  },\n  defaultVariants: {\n    variant: 'green',\n  },\n})\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return <div className={cn(badgeVariants({ variant }), className)} {...props} />\n}\n\nexport { Badge, badgeVariants }\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n  text?: string\n}\n\nfunction Label({ text, className, ...props }: Readonly<Props>) {\n  if (!text) return null\n\n  return (\n    <label\n      className={cn(\n        'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        className\n      )}\n      {...props}\n    >\n      {text}\n    </label>\n  )\n}\n\nexport default Label\n","import { cn } from '@/lib/utils'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport React, { forwardRef } from 'react'\n\ninterface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Component = asChild ? Slot : 'button'\n\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = 'Button'\n\nconst buttonVariants = cva(\n  [\n    'flex',\n    'items-center',\n    'justify-center',\n    'gap-2',\n    'rounded-full',\n    'font-bold',\n    'outline-2',\n    'outline-offset-2',\n    'outline-dashed',\n    'outline-transparent',\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: [\n          'bg-black',\n          'text-white',\n          'hover:bg-grey-90',\n          'active:bg-grey-80',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        primary: [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        secondary: [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        transparent: [\n          'text-white',\n          'hover:bg-green-80',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n        ],\n        link: [\n          'leading-tight',\n          'text-black',\n          'underline',\n          'hover:text-purple-100',\n          'focus:text-black',\n          'focus:outline-purple-100',\n          'active:text-purple-80',\n        ],\n      },\n      size: {\n        small: ['h-10', 'text-sm', 'px-4', 'py-2'],\n        medium: ['h-12', 'text-base', 'px-6', 'py-3'],\n        large: ['h-14', 'text-lg', 'px-8', 'py-4'],\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'medium',\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: 'small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'medium',\n        class: ['h-4', 'text-sm', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'large',\n        class: ['h-6', 'text-base', 'p-0'],\n      },\n    ],\n  }\n)\n"],"mappings":"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","names":["ComboboxDemo_exports","__export","ComboboxDemo_default","__toCommonJS","import_react","import_react","import_lucide_react","import_cva","import_clsx","import_tailwind_merge","cn","inputs","import_cmdk","import_lucide_react","React","DialogPrimitive","import_lucide_react","React","DialogPortal","DialogOverlay","className","props","ref","cn","DialogContent","children","DialogPortal","DialogHeader","DialogFooter","DialogTitle","DialogDescription","Command","className","props","ref","CommandPrimitive","cn","CommandInput","className","props","ref","CommandPrimitive","cn","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","React","PopoverPrimitive","Popover","PopoverTrigger","PopoverContent","className","align","sideOffset","props","ref","cn","SeparatorPrimitive","React","Separator","className","orientation","decorative","props","ref","cn","import_lucide_react","CheckboxPrimitive","import_lucide_react","import_react","CheckboxToggle","className","props","ref","cn","Checkbox","classNames","children","disabled","id","labelClassName","Checkbox_default","import_lucide_react","ListItem","icon","hasCheckbox","isSelected","className","title","value","description","props","optionIcon","IconComponent","cn","Checkbox_default","e","ListItem_default","import_cva","React","badgeVariants","Badge","className","variant","props","cn","Label","text","className","props","cn","Label_default","Combobox","props","ref","value","label","options","classNames","multiselect","placeholder","variant","size","className","handleChange","children","valueArray","selected","setSelected","open","setOpen","hideSearchBox","isDefault","isChip","handleSelect","option","prev","v","handleDisplayValue","defaultLabel","cn","Label_default","Popover","PopoverTrigger","triggerVariants","Badge","Command","PopoverContent","CommandInput","CommandList","CommandEmpty","CommandGroup","id","CommandItem","ListItem_default","Separator","import_react_slot","import_cva","import_react","Button","className","variant","size","asChild","props","ref","React","cn","buttonVariants","ComboboxDemo","selectedBands","setSelectedBands","selectedFruit","setSelectedFruit","bands","Combobox","Button","band","ComboboxDemo_default"]}
+{"version":3,"sources":["../../../src/components/demos/ComboboxDemo.tsx","../../../src/components/ui/Combobox.tsx","../../../src/lib/utils.ts","../../../src/components/primitives/command.tsx","../../../src/components/primitives/dialog.tsx","../../../src/components/primitives/popover.tsx","../../../src/components/primitives/separator.tsx","../../../src/components/ui/ListItem.tsx","../../../src/components/ui/Checkbox.tsx","../../../src/components/ui/Badge.tsx","../../../src/components/ui/Label.tsx","../../../src/components/ui/Button.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { Combobox } from '@/components/ui/Combobox'\nimport { Button } from '@/components/ui/Button'\n\nfunction ComboboxDemo() {\n  const [selectedBands, setSelectedBands] = useState<string[]>([])\n  const [selectedFruit, setSelectedFruit] = useState<string>('')\n\n  const bands = [\n    {\n      title: 'Nirvana',\n      value: 'Nirvana',\n      description: 'Come As You Are',\n      id: 1,\n    },\n    { title: 'Pearl Jam', value: 'Pearl Jam', description: 'Jeremy', id: 2 },\n    {\n      title: 'Soundgarden',\n      value: 'Soundgarden',\n      description: 'Rusty Cage',\n      id: 3,\n    },\n    {\n      title: 'Alice in Chains',\n      value: 'Alice in Chains',\n      description: 'Would?',\n      id: 4,\n    },\n    { title: 'Stone Temple Pilots', value: 'Stone Temple Pilots', id: 5 },\n    { title: 'Hole', value: 'Hole', id: 6 },\n    { title: 'Mudhoney', value: 'Mudhoney', id: 7 },\n    { title: 'Screaming Trees', value: 'Screaming Trees', id: 8 },\n    { title: 'L7', value: 'L7', id: 9 },\n    { title: 'Sonic Youth', value: 'Sonic Youth', id: 10 },\n    {\n      title: 'And You Will Know Us by the Trail of Dead',\n      value: 'And You Will Know Us by the Trail of Dead',\n      id: 11,\n    },\n  ]\n\n  const fruits = [\n    { title: 'Cherry', value: 'Cherry', id: 1, icon: 'Cherry' },\n    { title: 'Grape', value: 'Grape', id: 2, icon: 'Grape' },\n  ]\n\n  return (\n    <div className=\"flex flex-row flex-wrap items-center gap-4 p-4\">\n      <Combobox\n        label=\"US bands from the 90's\"\n        placeholder=\"Select a band\"\n        options={bands}\n        multiselect\n        onChange={setSelectedBands}\n        value={selectedBands}\n      />\n      <Combobox\n        label=\"US bands from the 90's\"\n        options={bands}\n        variant=\"chip\"\n        multiselect\n        onChange={setSelectedBands}\n        value={selectedBands}\n      />\n      <Combobox\n        label=\"Fruit label\"\n        variant=\"chip\"\n        options={fruits}\n        value={selectedFruit}\n        onChange={setSelectedFruit}\n      >\n        <div className=\"flex flex-row items-center justify-between bg-white p-2 pl-4\">\n          <Button variant=\"link\" tabIndex={-1}>\n            Clear\n          </Button>\n          <Button variant=\"primary\" size=\"small\" tabIndex={-1}>\n            Apply\n          </Button>\n        </div>\n      </Combobox>\n      {selectedBands.map((band) => (\n        <span key={band} className=\"text-green-80\">\n          {band}\n        </span>\n      ))}\n      <span className=\"text-purple-100\">{selectedFruit}</span>\n    </div>\n  )\n}\n\nexport default ComboboxDemo\n","'use client'\n\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useState } from 'react'\nimport { ChevronDownIcon } from 'lucide-react'\nimport { cva, type VariantProps } from 'cva'\nimport { cn } from '@/lib/utils'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/primitives/command'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/primitives/popover'\nimport { Separator } from '@/components/primitives/separator'\n\nimport ListItem from '@/components/ui/ListItem'\nimport { Badge } from '@/components/ui/Badge'\nimport Label from '@/components/ui/Label'\n\ntype Option = { id: number; value: string; title: string; description?: string; icon?: string }\ntype ClassNames = { label?: string; trigger?: string; items?: string; content?: string }\ntype Shared = { label?: string; options: Option[]; classNames?: ClassNames; placeholder?: string }\ntype MultiSelect = { multiselect: true; value?: string[]; onChange?: (v: string[]) => void }\ntype SingleSelect = { multiselect?: false; value?: string; onChange?: (v: string) => void }\ntype TriggerVariants = VariantProps<typeof triggerVariants>\ntype SelectProps = Omit<ComponentPropsWithoutRef<'select'>, 'value' | 'onChange' | 'size'>\ntype MultiSelectProps = TriggerVariants & SelectProps & Shared & MultiSelect\ntype SingleSelectProps = TriggerVariants & SelectProps & Shared & SingleSelect\ntype ComboboxProps = MultiSelectProps | SingleSelectProps\n\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>((props, ref) => {\n  const {\n    value,\n    label,\n    options,\n    classNames,\n    multiselect,\n    placeholder,\n    variant = 'default',\n    size,\n    className,\n    onChange: handleChange,\n    children,\n  } = props\n  const valueArray = multiselect ? (value ?? []) : value ? [value] : []\n  const [selected, setSelected] = useState<string[]>(valueArray)\n  const [open, setOpen] = useState(false)\n  const hideSearchBox = options?.length <= 5\n  const isDefault = variant === 'default'\n  const isChip = variant === 'chip'\n\n  useEffect(() => {\n    multiselect ? handleChange?.(selected) : handleChange?.(selected[0])\n  }, [selected])\n\n  const handleSelect = (option: string) => {\n    if (multiselect) {\n      return setSelected((prev) =>\n        prev.includes(option) ? prev.filter((v) => v !== option) : [...prev, option]\n      )\n    }\n    setSelected([option])\n    setOpen(false)\n  }\n\n  const handleDisplayValue = () => {\n    const defaultLabel = selected.length > 0 ? selected.join(', ') : placeholder\n    return isDefault ? defaultLabel : label\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      {isDefault && label && <Label text={label} className={classNames?.label} />}\n\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild disabled={options.length === 0}>\n          <div\n            ref={ref}\n            className={cn(triggerVariants({ variant, size }), classNames?.trigger)}\n            aria-expanded={open}\n          >\n            {isChip && selected.length > 0 && <Badge variant=\"purple\">{selected.length}</Badge>}\n\n            <span\n              className={cn(\n                'truncate leading-normal',\n                isDefault && selected.length == 0 && 'text-grey-40'\n              )}\n            >\n              {handleDisplayValue()}\n            </span>\n\n            <ChevronDownIcon className=\"transform group-data-[state=open]:rotate-180\" size=\"16\" />\n          </div>\n        </PopoverTrigger>\n\n        <Command>\n          <PopoverContent\n            className={cn(\n              'flex w-full max-w-xs flex-col overflow-hidden p-0',\n              'max-h-[--radix-popover-content-available-height]',\n              classNames?.content\n            )}\n            collisionPadding={8}\n            sideOffset={4}\n            align=\"start\"\n          >\n            {!hideSearchBox && <CommandInput placeholder=\"Search...\" />}\n\n            <CommandList>\n              <CommandEmpty>No results</CommandEmpty>\n              <CommandGroup>\n                {options.map(({ id, ...option }) => (\n                  <CommandItem key={id} value={option.value} onSelect={handleSelect}>\n                    <ListItem\n                      className={cn(classNames?.items, 'truncate py-1')}\n                      isSelected={selected?.includes(option.value)}\n                      hasCheckbox={multiselect}\n                      {...option}\n                    />\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n\n            {!!children && <Separator />}\n            {children}\n          </PopoverContent>\n        </Command>\n      </Popover>\n    </div>\n  )\n})\nCombobox.displayName = 'Combobox'\n\nconst triggerVariants = cva(\n  'group relative cursor-pointer flex flex-row items-center justify-between gap-2 border border-grey-20 focus:outline-green-80 disabled:bg-grey-5',\n  {\n    variants: {\n      variant: {\n        default: ['w-full', 'max-w-80', 'rounded-lg'],\n        chip: [\n          'font-bold',\n          'rounded-3xl',\n          'data-[state=open]:bg-black',\n          'data-[state=open]:text-white',\n        ],\n      },\n      size: {\n        small: ['h-8', 'p-1', 'pl-2', 'text-xs'],\n        normal: ['h-9', 'p-2', 'pl-3', 'text-sm'],\n        large: ['h-10', 'p-3', 'pl-4', 'text-base'],\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'normal',\n    },\n  }\n)\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","'use client'\n\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport * as React from 'react'\n\nimport { Dialog, DialogContent } from '@/components/primitives/dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950',\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ntype CommandDialogProps = DialogProps\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"m-1 flex items-center rounded-xl border px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500',\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-1 h-px bg-neutral-200', className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn('ml-auto text-xs tracking-widest text-neutral-500', className)}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n}\n","'use client'\n\nimport { cn } from '@/lib/utils'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport * as React from 'react'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n    {...props}\n  />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n","'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\n\nimport { cn } from '@/lib/utils'\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        'z-50 rounded-2xl border bg-white p-4 text-black shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n","'use client'\r\n\r\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\r\nimport * as React from 'react'\r\n\r\nimport { cn } from '@/lib/utils'\r\n\r\nconst Separator = React.forwardRef<\r\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\r\n>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (\r\n  <SeparatorPrimitive.Root\r\n    ref={ref}\r\n    decorative={decorative}\r\n    orientation={orientation}\r\n    className={cn(\r\n      'shrink-0 bg-grey-10',\r\n      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nSeparator.displayName = SeparatorPrimitive.Root.displayName\r\n\r\nexport { Separator }\r\n","import { cn } from '@/lib/utils'\nimport { CheckIcon } from 'lucide-react'\nimport { ComponentPropsWithoutRef, ReactNode } from 'react'\nimport Checkbox from '@/components/ui/Checkbox'\nimport { icons } from 'lucide-react'\n\ntype IconKey = keyof typeof icons\n\ninterface ListItemProps extends ComponentPropsWithoutRef<'li'> {\n  icon?: string\n  hasCheckbox?: boolean\n  isSelected?: boolean\n  title: string\n  value: string\n  description?: string\n}\n\nfunction ListItem({\n  icon,\n  hasCheckbox,\n  isSelected,\n  className,\n  title,\n  value,\n  description,\n  ...props\n}: ListItemProps) {\n  const getIconIfValid = (icon: string): ReactNode => {\n    if (icon in icons) {\n      const IconComponent = icons[icon as IconKey]\n      return <IconComponent size={14} />\n    }\n    return null\n  }\n\n  const optionIcon = icon ? getIconIfValid(icon) : undefined\n\n  return (\n    <li\n      className={cn(\n        'group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm',\n        className\n      )}\n      {...props}\n      data-state={isSelected ? 'checked' : 'unchecked'}\n    >\n      {optionIcon && <span className=\"mr-2\">{optionIcon}</span>}\n      {hasCheckbox && (\n        <Checkbox id={value} checked={isSelected} onClick={(e) => e.preventDefault()} />\n      )}\n      <div>\n        <p>{title}</p>\n        <p className=\"text-xs text-grey-80\">{description}</p>\n      </div>\n\n      <CheckIcon\n        className=\"absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block\"\n        size={16}\n      />\n    </li>\n  )\n}\n\nexport default ListItem\n","'use client'\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  forwardRef,\n  type PropsWithChildren,\n} from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst CheckboxToggle = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      'group',\n      'peer',\n      'h-5',\n      'w-5',\n      'shrink-0',\n      'rounded-md',\n      'border',\n      'border-grey-10',\n      'outline',\n      'outline-1',\n      'outline-offset-2',\n      'outline-transparent',\n      'hover:border-grey-20',\n      'focus:outline-purple-100',\n      'active:border-green-80',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-50',\n      'data-[state=checked]:bg-green-80',\n      'data-[state=indeterminate]:bg-green-80',\n      'data-[state=checked]:text-white',\n      'data-[state=indeterminate]:text-primary-foreground',\n      props.disabled &&\n        'data-[state=checked]:text-foreground bg-grey-20 data-[state=checked]:bg-grey-20',\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n      <Check className=\"hidden h-4 w-4 group-data-[state=checked]:block\" />\n      <Minus className=\"hidden h-4 w-4 group-data-[state=indeterminate]:block\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckboxToggle.displayName = CheckboxPrimitive.Root.displayName\n\ninterface Props extends CheckboxPrimitive.CheckboxProps, PropsWithChildren {\n  error?: string\n  classNames?: {\n    wrapper?: string\n    label?: string\n  }\n}\n\nconst Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, Props>(\n  ({ classNames, children, ...props }, ref) => {\n    const { disabled } = props\n    const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`\n    const labelClassName = disabled ? 'text-grey-40 pointer-events-none' : ''\n    return (\n      <div className={cn('flex space-x-2', classNames?.wrapper)}>\n        <CheckboxToggle id={id} disabled={disabled} ref={ref} {...props} />\n        <label htmlFor={id} className={cn(labelClassName, classNames?.label)}>\n          {children}\n        </label>\n      </div>\n    )\n  }\n)\nCheckbox.displayName = 'Checkbox'\n\nexport default Checkbox\n","import { cva, type VariantProps } from 'cva'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst badgeVariants = cva('rounded-full px-2 py-0.5 text-xs font-semibold', {\n  variants: {\n    variant: {\n      green: 'bg-green-90 text-white',\n      pickle: 'bg-pickle-100 text-black',\n      purple: 'bg-purple-100 text-white',\n    },\n  },\n  defaultVariants: {\n    variant: 'green',\n  },\n})\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return <div className={cn(badgeVariants({ variant }), className)} {...props} />\n}\n\nexport { Badge, badgeVariants }\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n  text?: string\n}\n\nfunction Label({ text, className, ...props }: Readonly<Props>) {\n  if (!text) return null\n\n  return (\n    <label\n      className={cn(\n        'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        className\n      )}\n      {...props}\n    >\n      {text}\n    </label>\n  )\n}\n\nexport default Label\n","import { cn } from '@/lib/utils'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport React, { forwardRef } from 'react'\n\ninterface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Component = asChild ? Slot : 'button'\n\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = 'Button'\n\nconst buttonVariants = cva(\n  [\n    'flex',\n    'items-center',\n    'justify-center',\n    'gap-2',\n    'rounded-full',\n    'font-bold',\n    'outline-2',\n    'outline-offset-2',\n    'outline-dashed',\n    'outline-transparent',\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: [\n          'bg-black',\n          'text-white',\n          'hover:bg-grey-90',\n          'active:bg-grey-80',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        primary: [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        secondary: [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        transparent: [\n          'text-white',\n          'hover:bg-green-80',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n        ],\n        link: [\n          'leading-tight',\n          'text-black',\n          'underline',\n          'hover:text-purple-100',\n          'focus:text-black',\n          'focus:outline-purple-100',\n          'active:text-purple-80',\n        ],\n      },\n      size: {\n        small: ['h-10', 'text-sm', 'px-4', 'py-2'],\n        medium: ['h-12', 'text-base', 'px-6', 'py-3'],\n        large: ['h-14', 'text-lg', 'px-8', 'py-4'],\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'medium',\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: 'small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'medium',\n        class: ['h-4', 'text-sm', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'large',\n        class: ['h-6', 'text-base', 'p-0'],\n      },\n    ],\n  }\n)\n"],"mappings":"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","names":["ComboboxDemo_exports","__export","ComboboxDemo_default","__toCommonJS","import_react","import_react","import_lucide_react","import_cva","import_clsx","import_tailwind_merge","cn","inputs","import_cmdk","import_lucide_react","React","DialogPrimitive","import_lucide_react","React","import_jsx_runtime","DialogPortal","DialogOverlay","className","props","ref","cn","DialogContent","children","DialogPortal","DialogHeader","DialogFooter","DialogTitle","DialogDescription","import_jsx_runtime","Command","className","props","ref","CommandPrimitive","cn","CommandInput","className","props","ref","CommandPrimitive","cn","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","React","PopoverPrimitive","import_jsx_runtime","Popover","PopoverTrigger","PopoverContent","className","align","sideOffset","props","ref","cn","SeparatorPrimitive","React","import_jsx_runtime","Separator","className","orientation","decorative","props","ref","cn","import_lucide_react","CheckboxPrimitive","import_lucide_react","import_react","import_jsx_runtime","CheckboxToggle","className","props","ref","cn","Checkbox","classNames","children","disabled","id","labelClassName","Checkbox_default","import_lucide_react","import_jsx_runtime","ListItem","icon","hasCheckbox","isSelected","className","title","value","description","props","optionIcon","IconComponent","cn","Checkbox_default","e","ListItem_default","import_cva","import_jsx_runtime","badgeVariants","Badge","className","variant","props","cn","import_jsx_runtime","Label","text","className","props","cn","Label_default","import_jsx_runtime","Combobox","props","ref","value","label","options","classNames","multiselect","placeholder","variant","size","className","handleChange","children","valueArray","selected","setSelected","open","setOpen","hideSearchBox","isDefault","isChip","handleSelect","option","prev","v","handleDisplayValue","defaultLabel","cn","Label_default","Popover","PopoverTrigger","triggerVariants","Badge","Command","PopoverContent","CommandInput","CommandList","CommandEmpty","CommandGroup","id","CommandItem","ListItem_default","Separator","import_react_slot","import_cva","import_react","import_jsx_runtime","Button","className","variant","size","asChild","props","ref","cn","buttonVariants","import_jsx_runtime","ComboboxDemo","selectedBands","setSelectedBands","selectedFruit","setSelectedFruit","bands","Combobox","Button","band","ComboboxDemo_default"]}

package/dist/components/demos/ComboboxDemo.d.cts

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function ComboboxDemo(): React.JSX.Element;
+declare function ComboboxDemo(): react_jsx_runtime.JSX.Element;
 
 export { ComboboxDemo as default };

package/dist/components/demos/ComboboxDemo.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function ComboboxDemo(): React.JSX.Element;
+declare function ComboboxDemo(): react_jsx_runtime.JSX.Element;
 
 export { ComboboxDemo as default };

package/dist/components/demos/ComboboxDemo.js

@@ -1,2 +1,2 @@
-"use client";import{useState as ae}from"react";import{forwardRef as De,useEffect as Se,useState as te}from"react";import{ChevronDownIcon as Te}from"lucide-react";import{cva as Ee}from"cva";import{clsx as me}from"clsx";import{twMerge as pe}from"tailwind-merge";function o(...e){return pe(me(e))}import{Command as m}from"cmdk";import{Search as he}from"lucide-react";import*as i from"react";import*as r from"@radix-ui/react-dialog";import{X as de}from"lucide-react";import*as s from"react";var ce=r.Portal;var G=s.forwardRef(({className:e,...t},a)=>s.createElement(r.Overlay,{ref:a,className:o("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t}));G.displayName=r.Overlay.displayName;var j=s.forwardRef(({className:e,children:t,...a},n)=>s.createElement(ce,null,s.createElement(G,null),s.createElement(r.Content,{ref:n,className:o("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",e),...a},t,s.createElement(r.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"},s.createElement(de,{className:"h-4 w-4"}),s.createElement("span",{className:"sr-only"},"Close")))));j.displayName=r.Content.displayName;var fe=({className:e,...t})=>s.createElement("div",{className:o("flex flex-col space-y-1.5 text-center sm:text-left",e),...t});fe.displayName="DialogHeader";var ue=({className:e,...t})=>s.createElement("div",{className:o("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});ue.displayName="DialogFooter";var ge=s.forwardRef(({className:e,...t},a)=>s.createElement(r.Title,{ref:a,className:o("text-lg font-semibold leading-none tracking-tight",e),...t}));ge.displayName=r.Title.displayName;var ve=s.forwardRef(({className:e,...t},a)=>s.createElement(r.Description,{ref:a,className:o("text-sm text-neutral-500 dark:text-neutral-400",e),...t}));ve.displayName=r.Description.displayName;var T=i.forwardRef(({className:e,...t},a)=>i.createElement(m,{ref:a,className:o("flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950",e),...t}));T.displayName=m.displayName;var E=i.forwardRef(({className:e,...t},a)=>i.createElement("div",{className:"m-1 flex items-center rounded-xl border px-3","cmdk-input-wrapper":""},i.createElement(he,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),i.createElement(m.Input,{ref:a,className:o("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50",e),...t})));E.displayName=m.Input.displayName;var I=i.forwardRef(({className:e,...t},a)=>i.createElement(m.List,{ref:a,className:o("overflow-y-auto overflow-x-hidden",e),...t}));I.displayName=m.List.displayName;var L=i.forwardRef((e,t)=>i.createElement(m.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));L.displayName=m.Empty.displayName;var W=i.forwardRef(({className:e,...t},a)=>i.createElement(m.Group,{ref:a,className:o("overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500",e),...t}));W.displayName=m.Group.displayName;var xe=i.forwardRef(({className:e,...t},a)=>i.createElement(m.Separator,{ref:a,className:o("-mx-1 h-px bg-neutral-200",e),...t}));xe.displayName=m.Separator.displayName;var V=i.forwardRef(({className:e,...t},a)=>i.createElement(m.Item,{ref:a,className:o("relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50",e),...t}));V.displayName=m.Item.displayName;var ye=({className:e,...t})=>i.createElement("span",{className:o("ml-auto text-xs tracking-widest text-neutral-500",e),...t});ye.displayName="CommandShortcut";import*as y from"react";import*as g from"@radix-ui/react-popover";var F=g.Root,Y=g.Trigger,z=y.forwardRef(({className:e,align:t="center",sideOffset:a=4,...n},l)=>y.createElement(g.Portal,null,y.createElement(g.Content,{ref:l,align:t,sideOffset:a,className:o("z-50 rounded-2xl border bg-white p-4 text-black shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",e),...n})));z.displayName=g.Content.displayName;import*as _ from"@radix-ui/react-separator";import*as k from"react";var M=k.forwardRef(({className:e,orientation:t="horizontal",decorative:a=!0,...n},l)=>k.createElement(_.Root,{ref:l,decorative:a,orientation:t,className:o("shrink-0 bg-grey-10",t==="horizontal"?"h-[1px] w-full":"h-full w-[1px]",e),...n}));M.displayName=_.Root.displayName;import{CheckIcon as Ce}from"lucide-react";import*as b from"@radix-ui/react-checkbox";import{Check as be,Minus as Pe}from"lucide-react";import{forwardRef as K}from"react";var U=K(({className:e,...t},a)=>React.createElement(b.Root,{ref:a,className:o("group","peer","h-5","w-5","shrink-0","rounded-md","border","border-grey-10","outline","outline-1","outline-offset-2","outline-transparent","hover:border-grey-20","focus:outline-purple-100","active:border-green-80","disabled:cursor-not-allowed","disabled:opacity-50","data-[state=checked]:bg-green-80","data-[state=indeterminate]:bg-green-80","data-[state=checked]:text-white","data-[state=indeterminate]:text-primary-foreground",t.disabled&&"data-[state=checked]:text-foreground bg-grey-20 data-[state=checked]:bg-grey-20",e),...t},React.createElement(b.Indicator,{className:"flex items-center justify-center text-current"},React.createElement(be,{className:"hidden h-4 w-4 group-data-[state=checked]:block"}),React.createElement(Pe,{className:"hidden h-4 w-4 group-data-[state=indeterminate]:block"}))));U.displayName=b.Root.displayName;var J=K(({classNames:e,children:t,...a},n)=>{let{disabled:l}=a,p=a.id??`${a.name??a.value?.toString()}-checkbox`,d=l?"text-grey-40 pointer-events-none":"";return React.createElement("div",{className:o("flex space-x-2",e?.wrapper)},React.createElement(U,{id:p,disabled:l,ref:n,...a}),React.createElement("label",{htmlFor:p,className:o(d,e?.label)},t))});J.displayName="Checkbox";var X=J;import{icons as $}from"lucide-react";function Re({icon:e,hasCheckbox:t,isSelected:a,className:n,title:l,value:p,description:d,...D}){let R=e?(x=>{if(x in $){let N=$[x];return React.createElement(N,{size:14})}return null})(e):void 0;return React.createElement("li",{className:o("group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",n),...D,"data-state":a?"checked":"unchecked"},R&&React.createElement("span",{className:"mr-2"},R),t&&React.createElement(X,{id:p,checked:a,onClick:x=>x.preventDefault()}),React.createElement("div",null,React.createElement("p",null,l),React.createElement("p",{className:"text-xs text-grey-80"},d)),React.createElement(Ce,{className:"absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",size:16}))}var q=Re;import{cva as Ne}from"cva";import*as Q from"react";var ke=Ne("rounded-full px-2 py-0.5 text-xs font-semibold",{variants:{variant:{green:"bg-green-90 text-white",pickle:"bg-pickle-100 text-black",purple:"bg-purple-100 text-white"}},defaultVariants:{variant:"green"}});function Z({className:e,variant:t,...a}){return Q.createElement("div",{className:o(ke({variant:t}),e),...a})}function we({text:e,className:t,...a}){return e?React.createElement("label",{className:o("text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",t),...a},e):null}var ee=we;var P=De((e,t)=>{let{value:a,label:n,options:l,classNames:p,multiselect:d,placeholder:D,variant:C="default",size:R,className:x,onChange:N,children:B}=e,oe=d?a??[]:a?[a]:[],[u,H]=te(oe),[A,O]=te(!1),ie=l?.length<=5,S=C==="default",re=C==="chip";Se(()=>{N?.(d?u:u[0])},[u]);let ne=v=>{if(d)return H(h=>h.includes(v)?h.filter(se=>se!==v):[...h,v]);H([v]),O(!1)},le=()=>{let v=u.length>0?u.join(", "):D;return S?v:n};return React.createElement("div",{className:o("flex flex-col gap-2",x)},S&&n&&React.createElement(ee,{text:n,className:p?.label}),React.createElement(F,{open:A,onOpenChange:O},React.createElement(Y,{asChild:!0,disabled:l.length===0},React.createElement("div",{ref:t,className:o(Ie({variant:C,size:R}),p?.trigger),"aria-expanded":A},re&&u.length>0&&React.createElement(Z,{variant:"purple"},u.length),React.createElement("span",{className:o("truncate leading-normal",S&&u.length==0&&"text-grey-40")},le()),React.createElement(Te,{className:"transform group-data-[state=open]:rotate-180",size:"16"}))),React.createElement(T,null,React.createElement(z,{className:o("flex w-full max-w-xs flex-col overflow-hidden p-0","max-h-[--radix-popover-content-available-height]",p?.content),collisionPadding:8,sideOffset:4,align:"start"},!ie&&React.createElement(E,{placeholder:"Search..."}),React.createElement(I,null,React.createElement(L,null,"No results"),React.createElement(W,null,l.map(({id:v,...h})=>React.createElement(V,{key:v,value:h.value,onSelect:ne},React.createElement(q,{className:o(p?.items,"truncate py-1"),isSelected:u?.includes(h.value),hasCheckbox:d,...h}))))),!!B&&React.createElement(M,null),B))))});P.displayName="Combobox";var Ie=Ee("group relative cursor-pointer flex flex-row items-center justify-between gap-2 border border-grey-20 focus:outline-green-80 disabled:bg-grey-5",{variants:{variant:{default:["w-full","max-w-80","rounded-lg"],chip:["font-bold","rounded-3xl","data-[state=open]:bg-black","data-[state=open]:text-white"]},size:{small:["h-8","p-1","pl-2","text-xs"],normal:["h-9","p-2","pl-3","text-sm"],large:["h-10","p-3","pl-4","text-base"]}},defaultVariants:{variant:"default",size:"normal"}});import{Slot as Le}from"@radix-ui/react-slot";import{cva as We}from"cva";import Ve,{forwardRef as ze}from"react";var w=ze(({className:e,variant:t,size:a,asChild:n=!1,...l},p)=>Ve.createElement(n?Le:"button",{className:o(_e({variant:t,size:a,className:e})),ref:p,...l}));w.displayName="Button";var _e=We(["flex","items-center","justify-center","gap-2","rounded-full","font-bold","outline-2","outline-offset-2","outline-dashed","outline-transparent"],{variants:{variant:{neutral:["bg-black","text-white","hover:bg-grey-90","active:bg-grey-80","focus:outline-purple-100","disabled:text-grey-40","disabled:bg-grey-10"],primary:["bg-pickle-100","text-black","hover:bg-pickle-80","active:bg-pickle-60","focus:outline-purple-100","disabled:text-grey-40","disabled:bg-grey-10"],secondary:["bg-green-80","text-white","hover:bg-green-90","active:bg-green-100","focus:outline-pickle-100","disabled:text-grey-40","disabled:bg-grey-10"],transparent:["text-white","hover:bg-green-80","active:bg-green-100","focus:outline-pickle-100","disabled:text-grey-40"],link:["leading-tight","text-black","underline","hover:text-purple-100","focus:text-black","focus:outline-purple-100","active:text-purple-80"]},size:{small:["h-10","text-sm","px-4","py-2"],medium:["h-12","text-base","px-6","py-3"],large:["h-14","text-lg","px-8","py-4"]}},defaultVariants:{variant:"neutral",size:"medium"},compoundVariants:[{variant:"link",size:"small",class:["h-3","text-xs","p-0"]},{variant:"link",size:"medium",class:["h-4","text-sm","p-0"]},{variant:"link",size:"large",class:["h-6","text-base","p-0"]}]});function Me(){let[e,t]=ae([]),[a,n]=ae(""),l=[{title:"Nirvana",value:"Nirvana",description:"Come As You Are",id:1},{title:"Pearl Jam",value:"Pearl Jam",description:"Jeremy",id:2},{title:"Soundgarden",value:"Soundgarden",description:"Rusty Cage",id:3},{title:"Alice in Chains",value:"Alice in Chains",description:"Would?",id:4},{title:"Stone Temple Pilots",value:"Stone Temple Pilots",id:5},{title:"Hole",value:"Hole",id:6},{title:"Mudhoney",value:"Mudhoney",id:7},{title:"Screaming Trees",value:"Screaming Trees",id:8},{title:"L7",value:"L7",id:9},{title:"Sonic Youth",value:"Sonic Youth",id:10},{title:"And You Will Know Us by the Trail of Dead",value:"And You Will Know Us by the Trail of Dead",id:11}];return React.createElement("div",{className:"flex flex-row flex-wrap items-center gap-4 p-4"},React.createElement(P,{label:"US bands from the 90's",placeholder:"Select a band",options:l,multiselect:!0,onChange:t,value:e}),React.createElement(P,{label:"US bands from the 90's",options:l,variant:"chip",multiselect:!0,onChange:t,value:e}),React.createElement(P,{label:"Fruit label",variant:"chip",options:[{title:"Cherry",value:"Cherry",id:1,icon:"Cherry"},{title:"Grape",value:"Grape",id:2,icon:"Grape"}],value:a,onChange:n},React.createElement("div",{className:"flex flex-row items-center justify-between bg-white p-2 pl-4"},React.createElement(w,{variant:"link",tabIndex:-1},"Clear"),React.createElement(w,{variant:"primary",size:"small",tabIndex:-1},"Apply"))),e.map(d=>React.createElement("span",{key:d,className:"text-green-80"},d)),React.createElement("span",{className:"text-purple-100"},a))}var Yt=Me;export{Yt as default};
+"use client";import{useState as ce}from"react";import{forwardRef as Ge,useEffect as Fe,useState as de}from"react";import{ChevronDownIcon as Ye}from"lucide-react";import{cva as Ke}from"cva";import{clsx as be}from"clsx";import{twMerge as Pe}from"tailwind-merge";function a(...e){return Pe(be(e))}import{Command as l}from"cmdk";import{Search as Se}from"lucide-react";import*as y from"react";import*as i from"@radix-ui/react-dialog";import{X as Ce}from"lucide-react";import*as R from"react";import{jsx as h,jsxs as V}from"react/jsx-runtime";var Re=i.Portal;var X=R.forwardRef(({className:e,...t},o)=>h(i.Overlay,{ref:o,className:a("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",e),...t}));X.displayName=i.Overlay.displayName;var $=R.forwardRef(({className:e,children:t,...o},r)=>V(Re,{children:[h(X,{}),V(i.Content,{ref:r,className:a("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",e),...o,children:[t,V(i.Close,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400",children:[h(Ce,{className:"h-4 w-4"}),h("span",{className:"sr-only",children:"Close"})]})]})]}));$.displayName=i.Content.displayName;var Ne=({className:e,...t})=>h("div",{className:a("flex flex-col space-y-1.5 text-center sm:text-left",e),...t});Ne.displayName="DialogHeader";var ke=({className:e,...t})=>h("div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});ke.displayName="DialogFooter";var we=R.forwardRef(({className:e,...t},o)=>h(i.Title,{ref:o,className:a("text-lg font-semibold leading-none tracking-tight",e),...t}));we.displayName=i.Title.displayName;var De=R.forwardRef(({className:e,...t},o)=>h(i.Description,{ref:o,className:a("text-sm text-neutral-500 dark:text-neutral-400",e),...t}));De.displayName=i.Description.displayName;import{jsx as u,jsxs as Ie}from"react/jsx-runtime";var z=y.forwardRef(({className:e,...t},o)=>u(l,{ref:o,className:a("flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950",e),...t}));z.displayName=l.displayName;var _=y.forwardRef(({className:e,...t},o)=>Ie("div",{className:"m-1 flex items-center rounded-xl border px-3","cmdk-input-wrapper":"",children:[u(Se,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),u(l.Input,{ref:o,className:a("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:opacity-50",e),...t})]}));_.displayName=l.Input.displayName;var M=y.forwardRef(({className:e,...t},o)=>u(l.List,{ref:o,className:a("overflow-y-auto overflow-x-hidden",e),...t}));M.displayName=l.List.displayName;var B=y.forwardRef((e,t)=>u(l.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));B.displayName=l.Empty.displayName;var H=y.forwardRef(({className:e,...t},o)=>u(l.Group,{ref:o,className:a("overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500",e),...t}));H.displayName=l.Group.displayName;var Te=y.forwardRef(({className:e,...t},o)=>u(l.Separator,{ref:o,className:a("-mx-1 h-px bg-neutral-200",e),...t}));Te.displayName=l.Separator.displayName;var A=y.forwardRef(({className:e,...t},o)=>u(l.Item,{ref:o,className:a("relative flex cursor-pointer select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-neutral-100 data-[selected=true]:text-neutral-900 data-[disabled=true]:opacity-50",e),...t}));A.displayName=l.Item.displayName;var Ee=({className:e,...t})=>u("span",{className:a("ml-auto text-xs tracking-widest text-neutral-500",e),...t});Ee.displayName="CommandShortcut";import*as Q from"react";import*as g from"@radix-ui/react-popover";import{jsx as q}from"react/jsx-runtime";var Z=g.Root,j=g.Trigger,O=Q.forwardRef(({className:e,align:t="center",sideOffset:o=4,...r},n)=>q(g.Portal,{children:q(g.Content,{ref:n,align:t,sideOffset:o,className:a("z-50 rounded-2xl border bg-white p-4 text-black shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",e),...r})}));O.displayName=g.Content.displayName;import*as G from"@radix-ui/react-separator";import*as ee from"react";import{jsx as Le}from"react/jsx-runtime";var F=ee.forwardRef(({className:e,orientation:t="horizontal",decorative:o=!0,...r},n)=>Le(G.Root,{ref:n,decorative:o,orientation:t,className:a("shrink-0 bg-grey-10",t==="horizontal"?"h-[1px] w-full":"h-full w-[1px]",e),...r}));F.displayName=G.Root.displayName;import{CheckIcon as ze}from"lucide-react";import*as k from"@radix-ui/react-checkbox";import{Check as We,Minus as Ve}from"lucide-react";import{forwardRef as te}from"react";import{jsx as N,jsxs as re}from"react/jsx-runtime";var oe=te(({className:e,...t},o)=>N(k.Root,{ref:o,className:a("group","peer","h-5","w-5","shrink-0","rounded-md","border","border-grey-10","outline","outline-1","outline-offset-2","outline-transparent","hover:border-grey-20","focus:outline-purple-100","active:border-green-80","disabled:cursor-not-allowed","disabled:opacity-50","data-[state=checked]:bg-green-80","data-[state=indeterminate]:bg-green-80","data-[state=checked]:text-white","data-[state=indeterminate]:text-primary-foreground",t.disabled&&"data-[state=checked]:text-foreground bg-grey-20 data-[state=checked]:bg-grey-20",e),...t,children:re(k.Indicator,{className:"flex items-center justify-center text-current",children:[N(We,{className:"hidden h-4 w-4 group-data-[state=checked]:block"}),N(Ve,{className:"hidden h-4 w-4 group-data-[state=indeterminate]:block"})]})}));oe.displayName=k.Root.displayName;var ae=te(({classNames:e,children:t,...o},r)=>{let{disabled:n}=o,s=o.id??`${o.name??o.value?.toString()}-checkbox`,m=n?"text-grey-40 pointer-events-none":"";return re("div",{className:a("flex space-x-2",e?.wrapper),children:[N(oe,{id:s,disabled:n,ref:r,...o}),N("label",{htmlFor:s,className:a(m,e?.label),children:t})]})});ae.displayName="Checkbox";var ie=ae;import{icons as ne}from"lucide-react";import{jsx as C,jsxs as le}from"react/jsx-runtime";function _e({icon:e,hasCheckbox:t,isSelected:o,className:r,title:n,value:s,description:m,...L}){let T=e?(P=>{if(P in ne){let E=ne[P];return C(E,{size:14})}return null})(e):void 0;return le("li",{className:a("group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",r),...L,"data-state":o?"checked":"unchecked",children:[T&&C("span",{className:"mr-2",children:T}),t&&C(ie,{id:s,checked:o,onClick:P=>P.preventDefault()}),le("div",{children:[C("p",{children:n}),C("p",{className:"text-xs text-grey-80",children:m})]}),C(ze,{className:"absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",size:16})]})}var se=_e;import{cva as Me}from"cva";import{jsx as He}from"react/jsx-runtime";var Be=Me("rounded-full px-2 py-0.5 text-xs font-semibold",{variants:{variant:{green:"bg-green-90 text-white",pickle:"bg-pickle-100 text-black",purple:"bg-purple-100 text-white"}},defaultVariants:{variant:"green"}});function me({className:e,variant:t,...o}){return He("div",{className:a(Be({variant:t}),e),...o})}import{jsx as Oe}from"react/jsx-runtime";function Ae({text:e,className:t,...o}){return e?Oe("label",{className:a("text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",t),...o,children:e}):null}var pe=Ae;import{jsx as p,jsxs as w}from"react/jsx-runtime";var D=Ge((e,t)=>{let{value:o,label:r,options:n,classNames:s,multiselect:m,placeholder:L,variant:S="default",size:T,className:P,onChange:E,children:Y}=e,ue=m?o??[]:o?[o]:[],[f,K]=de(ue),[U,J]=de(!1),ge=n?.length<=5,W=S==="default",ve=S==="chip";Fe(()=>{E?.(m?f:f[0])},[f]);let he=v=>{if(m)return K(x=>x.includes(v)?x.filter(xe=>xe!==v):[...x,v]);K([v]),J(!1)},ye=()=>{let v=f.length>0?f.join(", "):L;return W?v:r};return w("div",{className:a("flex flex-col gap-2",P),children:[W&&r&&p(pe,{text:r,className:s?.label}),w(Z,{open:U,onOpenChange:J,children:[p(j,{asChild:!0,disabled:n.length===0,children:w("div",{ref:t,className:a(Ue({variant:S,size:T}),s?.trigger),"aria-expanded":U,children:[ve&&f.length>0&&p(me,{variant:"purple",children:f.length}),p("span",{className:a("truncate leading-normal",W&&f.length==0&&"text-grey-40"),children:ye()}),p(Ye,{className:"transform group-data-[state=open]:rotate-180",size:"16"})]})}),p(z,{children:w(O,{className:a("flex w-full max-w-xs flex-col overflow-hidden p-0","max-h-[--radix-popover-content-available-height]",s?.content),collisionPadding:8,sideOffset:4,align:"start",children:[!ge&&p(_,{placeholder:"Search..."}),w(M,{children:[p(B,{children:"No results"}),p(H,{children:n.map(({id:v,...x})=>p(A,{value:x.value,onSelect:he,children:p(se,{className:a(s?.items,"truncate py-1"),isSelected:f?.includes(x.value),hasCheckbox:m,...x})},v))})]}),!!Y&&p(F,{}),Y]})})]})]})});D.displayName="Combobox";var Ue=Ke("group relative cursor-pointer flex flex-row items-center justify-between gap-2 border border-grey-20 focus:outline-green-80 disabled:bg-grey-5",{variants:{variant:{default:["w-full","max-w-80","rounded-lg"],chip:["font-bold","rounded-3xl","data-[state=open]:bg-black","data-[state=open]:text-white"]},size:{small:["h-8","p-1","pl-2","text-xs"],normal:["h-9","p-2","pl-3","text-sm"],large:["h-10","p-3","pl-4","text-base"]}},defaultVariants:{variant:"default",size:"normal"}});import{Slot as Je}from"@radix-ui/react-slot";import{cva as Xe}from"cva";import{forwardRef as $e}from"react";import{jsx as Qe}from"react/jsx-runtime";var I=$e(({className:e,variant:t,size:o,asChild:r=!1,...n},s)=>Qe(r?Je:"button",{className:a(qe({variant:t,size:o,className:e})),ref:s,...n}));I.displayName="Button";var qe=Xe(["flex","items-center","justify-center","gap-2","rounded-full","font-bold","outline-2","outline-offset-2","outline-dashed","outline-transparent"],{variants:{variant:{neutral:["bg-black","text-white","hover:bg-grey-90","active:bg-grey-80","focus:outline-purple-100","disabled:text-grey-40","disabled:bg-grey-10"],primary:["bg-pickle-100","text-black","hover:bg-pickle-80","active:bg-pickle-60","focus:outline-purple-100","disabled:text-grey-40","disabled:bg-grey-10"],secondary:["bg-green-80","text-white","hover:bg-green-90","active:bg-green-100","focus:outline-pickle-100","disabled:text-grey-40","disabled:bg-grey-10"],transparent:["text-white","hover:bg-green-80","active:bg-green-100","focus:outline-pickle-100","disabled:text-grey-40"],link:["leading-tight","text-black","underline","hover:text-purple-100","focus:text-black","focus:outline-purple-100","active:text-purple-80"]},size:{small:["h-10","text-sm","px-4","py-2"],medium:["h-12","text-base","px-6","py-3"],large:["h-14","text-lg","px-8","py-4"]}},defaultVariants:{variant:"neutral",size:"medium"},compoundVariants:[{variant:"link",size:"small",class:["h-3","text-xs","p-0"]},{variant:"link",size:"medium",class:["h-4","text-sm","p-0"]},{variant:"link",size:"large",class:["h-6","text-base","p-0"]}]});import{jsx as b,jsxs as fe}from"react/jsx-runtime";function Ze(){let[e,t]=ce([]),[o,r]=ce(""),n=[{title:"Nirvana",value:"Nirvana",description:"Come As You Are",id:1},{title:"Pearl Jam",value:"Pearl Jam",description:"Jeremy",id:2},{title:"Soundgarden",value:"Soundgarden",description:"Rusty Cage",id:3},{title:"Alice in Chains",value:"Alice in Chains",description:"Would?",id:4},{title:"Stone Temple Pilots",value:"Stone Temple Pilots",id:5},{title:"Hole",value:"Hole",id:6},{title:"Mudhoney",value:"Mudhoney",id:7},{title:"Screaming Trees",value:"Screaming Trees",id:8},{title:"L7",value:"L7",id:9},{title:"Sonic Youth",value:"Sonic Youth",id:10},{title:"And You Will Know Us by the Trail of Dead",value:"And You Will Know Us by the Trail of Dead",id:11}];return fe("div",{className:"flex flex-row flex-wrap items-center gap-4 p-4",children:[b(D,{label:"US bands from the 90's",placeholder:"Select a band",options:n,multiselect:!0,onChange:t,value:e}),b(D,{label:"US bands from the 90's",options:n,variant:"chip",multiselect:!0,onChange:t,value:e}),b(D,{label:"Fruit label",variant:"chip",options:[{title:"Cherry",value:"Cherry",id:1,icon:"Cherry"},{title:"Grape",value:"Grape",id:2,icon:"Grape"}],value:o,onChange:r,children:fe("div",{className:"flex flex-row items-center justify-between bg-white p-2 pl-4",children:[b(I,{variant:"link",tabIndex:-1,children:"Clear"}),b(I,{variant:"primary",size:"small",tabIndex:-1,children:"Apply"})]})}),e.map(m=>b("span",{className:"text-green-80",children:m},m)),b("span",{className:"text-purple-100",children:o})]})}var yo=Ze;export{yo as default};
 //# sourceMappingURL=ComboboxDemo.js.map