@next-degree/pickle-shared-js 0.3.19 → 0.3.21

package/dist/components/demos/ComboboxDemo.js

@@ -1,2 +1,732 @@
-"use client";import{useState as ye}from"react";import{forwardRef as Ue,useEffect as Xe,useState as he}from"react";import{ChevronDownIcon as $e,CircleX as qe,icons as Qe}from"lucide-react";import{cva as Ze}from"cva";import{clsx as ke}from"clsx";import{twMerge as we}from"tailwind-merge";function a(...e){return we(ke(e))}import{Command as p}from"cmdk";import{Search as We}from"lucide-react";import*as x from"react";import*as r from"@radix-ui/react-dialog";import{X as De}from"lucide-react";import*as D from"react";import{jsx as y,jsxs as H}from"react/jsx-runtime";var Se=r.Portal;var ee=D.forwardRef(({className:e,...t},o)=>y(r.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}));ee.displayName=r.Overlay.displayName;var te=D.forwardRef(({className:e,children:t,...o},n)=>H(Se,{children:[y(ee,{}),H(r.Content,{ref:n,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,H(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",children:[y(De,{className:"h-4 w-4"}),y("span",{className:"sr-only",children:"Close"})]})]})]}));te.displayName=r.Content.displayName;var Ie=({className:e,...t})=>y("div",{className:a("flex flex-col space-y-1.5 text-center sm:text-left",e),...t});Ie.displayName="DialogHeader";var Ee=({className:e,...t})=>y("div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});Ee.displayName="DialogFooter";var Te=D.forwardRef(({className:e,...t},o)=>y(r.Title,{ref:o,className:a("text-lg font-semibold leading-none tracking-tight",e),...t}));Te.displayName=r.Title.displayName;var Le=D.forwardRef(({className:e,...t},o)=>y(r.Description,{ref:o,className:a("text-sm text-neutral-500 dark:text-neutral-400",e),...t}));Le.displayName=r.Description.displayName;import{jsx as v,jsxs as _e}from"react/jsx-runtime";var A=x.forwardRef(({className:e,...t},o)=>v(p,{ref:o,className:a("flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950",e),...t}));A.displayName=p.displayName;var O=x.forwardRef(({className:e,...t},o)=>_e("div",{className:"m-1 flex items-center rounded-xl border px-3","cmdk-input-wrapper":"",children:[v(We,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),v(p.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})]}));O.displayName=p.Input.displayName;var G=x.forwardRef(({className:e,...t},o)=>v(p.List,{ref:o,className:a("overflow-y-auto overflow-x-hidden",e),...t}));G.displayName=p.List.displayName;var F=x.forwardRef((e,t)=>v(p.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));F.displayName=p.Empty.displayName;var Y=x.forwardRef(({className:e,...t},o)=>v(p.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}));Y.displayName=p.Group.displayName;var Ve=x.forwardRef(({className:e,...t},o)=>v(p.Separator,{ref:o,className:a("-mx-1 h-px bg-neutral-200",e),...t}));Ve.displayName=p.Separator.displayName;var J=x.forwardRef(({className:e,...t},o)=>v(p.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}));J.displayName=p.Item.displayName;var ze=({className:e,...t})=>v("span",{className:a("ml-auto text-xs tracking-widest text-neutral-500",e),...t});ze.displayName="CommandShortcut";import*as ae from"react";import*as h from"@radix-ui/react-popover";import{jsx as oe}from"react/jsx-runtime";var ie=h.Root,re=h.Trigger,K=ae.forwardRef(({className:e,align:t="center",sideOffset:o=4,...n},i)=>oe(h.Portal,{children:oe(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),...n})}));K.displayName=h.Content.displayName;import*as U from"@radix-ui/react-separator";import*as ne from"react";import{jsx as Me}from"react/jsx-runtime";var X=ne.forwardRef(({className:e,orientation:t="horizontal",decorative:o=!0,...n},i)=>Me(U.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),...n}));X.displayName=U.Root.displayName;import{CheckIcon as Ae}from"lucide-react";import*as I from"@radix-ui/react-checkbox";import{Check as Be,Minus as He}from"lucide-react";import{forwardRef as le}from"react";import{jsx as S,jsxs as de}from"react/jsx-runtime";var se=le(({className:e,...t},o)=>S(I.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:de(I.Indicator,{className:"flex items-center justify-center text-current",children:[S(Be,{className:"hidden h-4 w-4 group-data-[state=checked]:block"}),S(He,{className:"hidden h-4 w-4 group-data-[state=indeterminate]:block"})]})}));se.displayName=I.Root.displayName;var me=le(({classNames:e,children:t,...o},n)=>{let{disabled:i}=o,d=o.id??`${o.name??o.value?.toString()}-checkbox`,m=i?"text-grey-40 pointer-events-none":"";return de("div",{className:a("flex space-x-2",e?.wrapper),children:[S(se,{id:d,disabled:i,ref:n,...o}),S("label",{htmlFor:d,className:a(m,e?.label),children:t})]})});me.displayName="Checkbox";var pe=me;import{icons as ce}from"lucide-react";import{jsx as R,jsxs as fe}from"react/jsx-runtime";function Oe({icon:e,hasCheckbox:t,isSelected:o,className:n,title:i,value:d,description:m,..._}){let L=e?(b=>{if(b in ce){let M=ce[b];return R(M,{size:14})}return null})(e):void 0;return fe("li",{className:a("group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",n),..._,"data-state":o?"checked":"unchecked",children:[L&&R("span",{className:"mr-2",children:L}),t&&R(pe,{id:d,checked:o,onClick:b=>b.preventDefault()}),fe("div",{children:[R("p",{children:i}),R("p",{className:"text-xs text-grey-80",children:m})]}),R(Ae,{className:"absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",size:16})]})}var ue=Oe;import{cva as Ge}from"cva";import{jsx as Ye}from"react/jsx-runtime";var Fe=Ge("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 ge({className:e,variant:t,...o}){return Ye("div",{className:a(Fe({variant:t}),e),...o})}import{jsx as Ke}from"react/jsx-runtime";function Je({text:e,className:t,...o}){return e?Ke("label",{className:a("text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",t),...o,children:e}):null}var ve=Je;import{jsx as s,jsxs as N}from"react/jsx-runtime";var E=Ue((e,t)=>{let{value:o,label:n,options:i,classNames:d,multiselect:m,placeholder:_,variant:T="default",size:L,icon:b,className:M,onChange:W,children:B}=e,[u,V]=he([]),[$,q]=he(!1),Q=b&&Qe[b],be=i?.length<=5,k=T==="default",Ce=T==="chip",Z=()=>q(!1);Xe(()=>{V((m?o??[]:o?[o]:[]).map(l=>i.find(g=>g.value===l)).filter(l=>l!==void 0))},[o]);let Pe=C=>{let l=i.find(g=>g.value===C);if(l){if(m)return V(g=>{let j=g.some(w=>w.value===C)?g.filter(w=>w!==l):[...g,l];return W?.(j.map(w=>w.value)),j});V([l]),W?.(l.value),Z()}},Re=()=>{V([]),W?.(m?[]:"")},Ne=()=>{let C=u.length>0?u.map(l=>l.title).join(", "):_;return k?C:n};return N("div",{className:a("flex flex-col gap-2",M),children:[k&&n&&s(ve,{text:n,className:d?.label}),N("div",{className:"relative flex",children:[N(ie,{open:$,onOpenChange:q,children:[s(re,{asChild:!0,disabled:i.length===0,children:N("div",{ref:t,className:a(je({variant:T,size:L}),u.length>0&&"pr-10",d?.trigger),"aria-expanded":$,children:[k&&Q&&s(Q,{className:"h-4 w-4 shrink-0"}),Ce&&u.length>0&&s(ge,{variant:"purple",children:u.length}),s("span",{className:a("w-full truncate leading-normal",k&&u.length==0&&"text-grey-40"),children:Ne()}),u.length==0&&s($e,{className:"shrink-0 transform group-data-[state=open]:rotate-180",size:"16"})]})}),s(A,{children:N(K,{className:a("flex w-full max-w-xs flex-col overflow-hidden p-0","max-h-[--radix-popover-content-available-height]",d?.content),collisionPadding:8,sideOffset:4,align:"start",children:[!be&&s(O,{placeholder:"Search..."}),N(G,{children:[s(F,{children:"No results"}),s(Y,{children:i.map(({id:C,...l})=>s(J,{value:l.title,onSelect:Pe,children:s(ue,{className:a(d?.items,"truncate py-1"),isSelected:u.some(g=>g.value===l.value),hasCheckbox:m,...l})},C))})]}),!!B&&s(X,{}),B&&B({close:Z})]})})]}),k&&u.length>0&&s("button",{type:"button",className:"absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",onClick:Re,children:s(qe,{className:"h-4 w-4 text-green-100"})})]})]})});E.displayName="Combobox";var je=Ze("group relative cursor-pointer text-green-100 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","py-1","px-2","text-xs"],normal:["h-9","py-2","px-3","text-sm"],large:["h-10","py-3","px-4","text-base"]}},defaultVariants:{variant:"default",size:"normal"}});import{Slot as et}from"@radix-ui/react-slot";import{cva as tt}from"cva";import{forwardRef as ot}from"react";import{jsx as it}from"react/jsx-runtime";var z=ot(({className:e,variant:t,size:o,asChild:n=!1,...i},d)=>it(n?et:"button",{className:a(at({variant:t,size:o,className:e})),ref:d,...i}));z.displayName="Button";var at=tt(["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 P,jsxs as xe}from"react/jsx-runtime";function rt(){let[e,t]=ye([]),[o,n]=ye(""),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 xe("div",{className:"flex flex-row flex-wrap items-center gap-4 p-4",children:[P(E,{label:"US bands from the 90's",placeholder:"Select a band",icon:"Music",options:i,multiselect:!0,onChange:t,value:e}),P(E,{label:"US bands from the 90's",options:i,variant:"chip",multiselect:!0,onChange:t,value:e}),P(E,{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:n,children:({close:m})=>xe("div",{className:"flex flex-row items-center justify-between bg-white p-2 pl-4",children:[P(z,{variant:"link",tabIndex:-1,onClick:m,children:"Clear"}),P(z,{variant:"primary",size:"small",tabIndex:-1,children:"Apply"})]})}),e.map(m=>P("span",{className:"text-green-80",children:m},m)),P("span",{className:"text-purple-100",children:o})]})}var ko=rt;export{ko as default};
+"use client";
+
+// src/components/demos/ComboboxDemo.tsx
+import { useState as useState2 } from "react";
+
+// src/components/ui/Combobox.tsx
+import { forwardRef as forwardRef6, useEffect, useState } from "react";
+import { ChevronDownIcon, CircleX, icons as icons2 } from "lucide-react";
+import { cva as cva2 } from "cva";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/primitives/command.tsx
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import * as React2 from "react";
+
+// src/components/primitives/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "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",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "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",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(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", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/components/primitives/command.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
+var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs2("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx2(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx2(
+    CommandPrimitive.Input,
+    {
+      ref,
+      className: cn(
+        "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",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive.List,
+  {
+    ref,
+    className: cn("overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx2(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive.Group,
+  {
+    ref,
+    className: cn(
+      "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",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-neutral-200", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "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",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+var CommandShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+// src/components/primitives/popover.tsx
+import * as React3 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React3.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "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",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/primitives/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React4 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Separator = React4.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx4(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-grey-10",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+// src/components/ui/ListItem.tsx
+import { CheckIcon } from "lucide-react";
+
+// src/components/ui/Checkbox.tsx
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import {
+  forwardRef as forwardRef5
+} from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var CheckboxToggle = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "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",
+      props.disabled && "data-[state=checked]:text-foreground bg-grey-20 data-[state=checked]:bg-grey-20",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxs3(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
+      /* @__PURE__ */ jsx5(Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
+      /* @__PURE__ */ jsx5(Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
+    ] })
+  }
+));
+CheckboxToggle.displayName = CheckboxPrimitive.Root.displayName;
+var Checkbox = forwardRef5(
+  ({ classNames, children, ...props }, ref) => {
+    const { disabled } = props;
+    const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`;
+    const labelClassName = disabled ? "text-grey-40 pointer-events-none" : "";
+    return /* @__PURE__ */ jsxs3("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
+      /* @__PURE__ */ jsx5(CheckboxToggle, { id, disabled, ref, ...props }),
+      /* @__PURE__ */ jsx5("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
+
+// src/components/ui/ListItem.tsx
+import { icons } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function ListItem({
+  icon,
+  hasCheckbox,
+  isSelected,
+  className,
+  title,
+  value,
+  description,
+  ...props
+}) {
+  const getIconIfValid = (icon2) => {
+    if (icon2 in icons) {
+      const IconComponent = icons[icon2];
+      return /* @__PURE__ */ jsx6(IconComponent, { size: 14 });
+    }
+    return null;
+  };
+  const optionIcon = icon ? getIconIfValid(icon) : void 0;
+  return /* @__PURE__ */ jsxs4(
+    "li",
+    {
+      className: cn(
+        "group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",
+        className
+      ),
+      ...props,
+      "data-state": isSelected ? "checked" : "unchecked",
+      children: [
+        optionIcon && /* @__PURE__ */ jsx6("span", { className: "mr-2", children: optionIcon }),
+        hasCheckbox && /* @__PURE__ */ jsx6(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
+        /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx6("p", { children: title }),
+          /* @__PURE__ */ jsx6("p", { className: "text-xs text-grey-80", children: description })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          CheckIcon,
+          {
+            className: "absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",
+            size: 16
+          }
+        )
+      ]
+    }
+  );
+}
+var ListItem_default = ListItem;
+
+// src/components/ui/Badge.tsx
+import { cva } from "cva";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var badgeVariants = 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 Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx7("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/components/ui/Label.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Label({ text, className, ...props }) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsx8(
+    "label",
+    {
+      className: cn(
+        "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props,
+      children: text
+    }
+  );
+}
+var Label_default = Label;
+
+// src/components/ui/Combobox.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var Combobox = forwardRef6((props, ref) => {
+  const {
+    value,
+    label,
+    options,
+    classNames,
+    multiselect,
+    placeholder,
+    variant = "default",
+    size,
+    icon,
+    className,
+    onChange: handleChange,
+    children: footer
+  } = props;
+  const [selected, setSelected] = useState([]);
+  const [open, setOpen] = useState(false);
+  const IconComponent = icon && icons2[icon];
+  const hideSearchBox = options?.length <= 5;
+  const isDefault = variant === "default";
+  const isChip = variant === "chip";
+  const isEmpty = selected.length == 0;
+  const showChevron = isDefault ? isEmpty : true;
+  const close = () => setOpen(false);
+  useEffect(() => {
+    const valueArray = multiselect ? value ?? [] : value ? [value] : [];
+    setSelected(
+      valueArray.map((v) => options.find((o) => o.value === v)).filter((v) => v !== void 0)
+    );
+  }, [value]);
+  const handleSelect = (value2) => {
+    const option = options.find((o) => o.value === value2);
+    if (!option) return;
+    if (multiselect) {
+      return setSelected((prev) => {
+        const newSelected = prev.some((o) => o.value === value2) ? prev.filter((v) => v !== option) : [...prev, option];
+        handleChange?.(newSelected.map((o) => o.value));
+        return newSelected;
+      });
+    }
+    setSelected([option]);
+    handleChange?.(option.value);
+    close();
+  };
+  const handleClear = () => {
+    setSelected([]);
+    multiselect ? handleChange?.([]) : handleChange?.("");
+  };
+  const handleDisplayValue = () => {
+    const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
+    return isDefault ? defaultLabel : label;
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col gap-2", className), children: [
+    isDefault && label && /* @__PURE__ */ jsx9(Label_default, { text: label, className: classNames?.label }),
+    /* @__PURE__ */ jsxs5("div", { className: "relative flex", children: [
+      /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx9(
+          PopoverTrigger,
+          {
+            asChild: true,
+            disabled: options.length === 0,
+            "data-testid": `${props.id ?? props.name}-combobox-trigger`,
+            children: /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                ref,
+                className: cn(
+                  triggerVariants({ variant, size }),
+                  isDefault && !isEmpty && "pr-10",
+                  classNames?.trigger
+                ),
+                "aria-expanded": open,
+                children: [
+                  isDefault && IconComponent && /* @__PURE__ */ jsx9(IconComponent, { className: "h-4 w-4 shrink-0" }),
+                  isChip && !isEmpty && /* @__PURE__ */ jsx9(Badge, { variant: "purple", children: selected.length }),
+                  /* @__PURE__ */ jsx9(
+                    "span",
+                    {
+                      className: cn(
+                        "w-full truncate leading-normal",
+                        isDefault && isEmpty && "text-grey-40"
+                      ),
+                      children: handleDisplayValue()
+                    }
+                  ),
+                  showChevron && /* @__PURE__ */ jsx9(
+                    ChevronDownIcon,
+                    {
+                      className: "shrink-0 transform group-data-[state=open]:rotate-180",
+                      size: "16"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          PopoverContent,
+          {
+            className: cn(
+              "flex w-full max-w-xs flex-col overflow-hidden p-0",
+              "max-h-[--radix-popover-content-available-height]",
+              classNames?.content
+            ),
+            collisionPadding: 8,
+            sideOffset: 4,
+            align: "start",
+            children: /* @__PURE__ */ jsxs5(Command, { children: [
+              !hideSearchBox && /* @__PURE__ */ jsx9(CommandInput, { placeholder: "Search..." }),
+              /* @__PURE__ */ jsxs5(CommandList, { children: [
+                /* @__PURE__ */ jsx9(CommandEmpty, { children: "No results" }),
+                /* @__PURE__ */ jsx9(CommandGroup, { children: options.map(({ id, ...option }) => /* @__PURE__ */ jsx9(CommandItem, { value: option.title, onSelect: handleSelect, children: /* @__PURE__ */ jsx9(
+                  ListItem_default,
+                  {
+                    className: cn(classNames?.items, "truncate py-1"),
+                    isSelected: selected.some((s) => s.value === option.value),
+                    hasCheckbox: multiselect,
+                    ...option
+                  }
+                ) }, id)) })
+              ] }),
+              !!footer && /* @__PURE__ */ jsx9(Separator, {}),
+              footer && footer({ close })
+            ] })
+          }
+        )
+      ] }),
+      isDefault && !isEmpty && /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+          onClick: handleClear,
+          children: /* @__PURE__ */ jsx9(CircleX, { className: "h-4 w-4 text-green-100" })
+        }
+      )
+    ] })
+  ] });
+});
+Combobox.displayName = "Combobox";
+var triggerVariants = cva2(
+  "group relative cursor-pointer text-green-100 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", "rounded-lg"],
+        chip: [
+          "font-bold",
+          "rounded-3xl",
+          "data-[state=open]:bg-black",
+          "data-[state=open]:text-white"
+        ]
+      },
+      size: {
+        small: ["h-8", "py-1", "px-2", "text-xs"],
+        normal: ["h-9", "py-2", "px-3", "text-sm"],
+        large: ["h-10", "py-3", "px-4", "text-base"]
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "normal"
+    }
+  }
+);
+
+// src/components/ui/Button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva3 } from "cva";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Button = forwardRef7(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx10(
+      Component,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var buttonVariants = cva3(
+  [
+    "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"]
+      }
+    ]
+  }
+);
+
+// src/components/demos/ComboboxDemo.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function ComboboxDemo() {
+  const [selectedBands, setSelectedBands] = useState2([]);
+  const [selectedFruit, setSelectedFruit] = useState2("");
+  const bands = [
+    {
+      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"
+    }
+  ];
+  const fruits = [
+    { title: "Cherry", value: "Cherry", id: "1", icon: "Cherry" },
+    { title: "Grape", value: "Grape", id: "2", icon: "Grape" }
+  ];
+  return /* @__PURE__ */ jsxs6("div", { className: "flex max-w-sm flex-col flex-wrap gap-4 p-4", children: [
+    /* @__PURE__ */ jsx11(
+      Combobox,
+      {
+        label: "US bands from the 90's",
+        placeholder: "Select a band",
+        icon: "Music",
+        options: bands,
+        id: "bands",
+        multiselect: true,
+        onChange: setSelectedBands,
+        value: selectedBands
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      Combobox,
+      {
+        label: "US bands from the 90's",
+        options: bands,
+        variant: "chip",
+        multiselect: true,
+        name: "bands 2",
+        onChange: setSelectedBands,
+        value: selectedBands
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      Combobox,
+      {
+        label: "Fruit label",
+        variant: "chip",
+        options: fruits,
+        value: selectedFruit,
+        onChange: setSelectedFruit,
+        children: ({ close }) => /* @__PURE__ */ jsxs6("div", { className: "flex flex-row items-center justify-between bg-white p-2 pl-4", children: [
+          /* @__PURE__ */ jsx11(Button, { variant: "link", tabIndex: -1, onClick: close, children: "Clear" }),
+          /* @__PURE__ */ jsx11(Button, { variant: "primary", size: "small", tabIndex: -1, children: "Apply" })
+        ] })
+      }
+    ),
+    selectedBands.map((band) => /* @__PURE__ */ jsx11("span", { className: "text-green-80", children: band }, band)),
+    /* @__PURE__ */ jsx11("span", { className: "text-purple-100", children: selectedFruit })
+  ] });
+}
+var ComboboxDemo_default = ComboboxDemo;
+export {
+  ComboboxDemo_default as default
+};
 //# sourceMappingURL=ComboboxDemo.js.map