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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/README.md +47 -1
  2. package/dist/app/layout.cjs +70 -1
  3. package/dist/app/layout.cjs.map +1 -1
  4. package/dist/app/layout.css +1263 -1
  5. package/dist/app/layout.css.map +1 -1
  6. package/dist/app/layout.js +35 -1
  7. package/dist/app/layout.js.map +1 -1
  8. package/dist/app/page.cjs +774 -1
  9. package/dist/app/page.cjs.map +1 -1
  10. package/dist/app/page.js +743 -1
  11. package/dist/app/page.js.map +1 -1
  12. package/dist/assets/fonts/AmbitBold.cjs +2 -1
  13. package/dist/assets/fonts/AmbitBold.js +5 -1
  14. package/dist/assets/fonts/AmbitBoldItalic.cjs +2 -1
  15. package/dist/assets/fonts/AmbitBoldItalic.js +5 -1
  16. package/dist/assets/fonts/AmbitRegular.cjs +2 -1
  17. package/dist/assets/fonts/AmbitRegular.js +5 -1
  18. package/dist/components/demos/ComboboxDemo.cjs +759 -1
  19. package/dist/components/demos/ComboboxDemo.cjs.map +1 -1
  20. package/dist/components/demos/ComboboxDemo.js +731 -1
  21. package/dist/components/demos/ComboboxDemo.js.map +1 -1
  22. package/dist/components/demos/index.cjs +767 -1
  23. package/dist/components/demos/index.cjs.map +1 -1
  24. package/dist/components/demos/index.js +736 -1
  25. package/dist/components/demos/index.js.map +1 -1
  26. package/dist/components/primitives/command.cjs +223 -1
  27. package/dist/components/primitives/command.cjs.map +1 -1
  28. package/dist/components/primitives/command.js +181 -1
  29. package/dist/components/primitives/command.js.map +1 -1
  30. package/dist/components/primitives/dialog.cjs +137 -1
  31. package/dist/components/primitives/dialog.cjs.map +1 -1
  32. package/dist/components/primitives/dialog.js +92 -1
  33. package/dist/components/primitives/dialog.js.map +1 -1
  34. package/dist/components/primitives/popover.cjs +72 -1
  35. package/dist/components/primitives/popover.cjs.map +1 -1
  36. package/dist/components/primitives/popover.js +36 -1
  37. package/dist/components/primitives/popover.js.map +1 -1
  38. package/dist/components/primitives/separator.cjs +67 -1
  39. package/dist/components/primitives/separator.cjs.map +1 -1
  40. package/dist/components/primitives/separator.js +33 -1
  41. package/dist/components/primitives/separator.js.map +1 -1
  42. package/dist/components/ui/Badge.cjs +57 -1
  43. package/dist/components/ui/Badge.cjs.map +1 -1
  44. package/dist/components/ui/Badge.js +31 -1
  45. package/dist/components/ui/Badge.js.map +1 -1
  46. package/dist/components/ui/Button.cjs +145 -1
  47. package/dist/components/ui/Button.cjs.map +1 -1
  48. package/dist/components/ui/Button.js +118 -1
  49. package/dist/components/ui/Button.js.map +1 -1
  50. package/dist/components/ui/Checkbox.cjs +99 -1
  51. package/dist/components/ui/Checkbox.cjs.map +1 -1
  52. package/dist/components/ui/Checkbox.js +71 -1
  53. package/dist/components/ui/Checkbox.js.map +1 -1
  54. package/dist/components/ui/Chip.cjs +49 -1
  55. package/dist/components/ui/Chip.cjs.map +1 -1
  56. package/dist/components/ui/Chip.js +28 -1
  57. package/dist/components/ui/Chip.js.map +1 -1
  58. package/dist/components/ui/Combobox.cjs +564 -1
  59. package/dist/components/ui/Combobox.cjs.map +1 -1
  60. package/dist/components/ui/Combobox.js +532 -1
  61. package/dist/components/ui/Combobox.js.map +1 -1
  62. package/dist/components/ui/Label.cjs +50 -1
  63. package/dist/components/ui/Label.cjs.map +1 -1
  64. package/dist/components/ui/Label.js +27 -1
  65. package/dist/components/ui/Label.js.map +1 -1
  66. package/dist/components/ui/ListItem.cjs +151 -1
  67. package/dist/components/ui/ListItem.cjs.map +1 -1
  68. package/dist/components/ui/ListItem.js +120 -1
  69. package/dist/components/ui/ListItem.js.map +1 -1
  70. package/dist/components/ui/Select.cjs +246 -1
  71. package/dist/components/ui/Select.cjs.map +1 -1
  72. package/dist/components/ui/Select.js +221 -1
  73. package/dist/components/ui/Select.js.map +1 -1
  74. package/dist/index.cjs +855 -1
  75. package/dist/index.cjs.map +1 -1
  76. package/dist/index.js +817 -1
  77. package/dist/index.js.map +1 -1
  78. package/dist/lib/utils.cjs +34 -1
  79. package/dist/lib/utils.cjs.map +1 -1
  80. package/dist/lib/utils.js +9 -1
  81. package/dist/lib/utils.js.map +1 -1
  82. package/dist/styles/globals.css +1263 -1
  83. package/dist/styles/globals.css.map +1 -1
  84. package/package.json +14 -17
package/dist/index.cjs CHANGED
@@ -1,2 +1,856 @@
1
- "use strict";var $e=Object.create;var U=Object.defineProperty;var Je=Object.getOwnPropertyDescriptor;var qe=Object.getOwnPropertyNames;var Qe=Object.getPrototypeOf,Ue=Object.prototype.hasOwnProperty;var Ye=(e,t)=>{for(var o in t)U(e,o,{get:t[o],enumerable:!0})},ye=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of qe(t))!Ue.call(e,n)&&n!==o&&U(e,n,{get:()=>t[n],enumerable:!(i=Je(t,n))||i.enumerable});return e};var N=(e,t,o)=>(o=e!=null?$e(Qe(e)):{},ye(t||!e||!e.__esModule?U(o,"default",{value:e,enumerable:!0}):o,e)),Ze=e=>ye(U({},"__esModule",{value:!0}),e);var ft={};Ye(ft,{Badge:()=>te,Button:()=>le,Checkbox:()=>j,Chip:()=>Y,Combobox:()=>he,Label:()=>_,ListItem:()=>ee,Select:()=>De,cn:()=>a});module.exports=Ze(ft);var d=N(require("@radix-ui/react-select"),1),H=require("lucide-react"),w=require("react");var xe=require("clsx"),be=require("tailwind-merge");function a(...e){return(0,be.twMerge)((0,xe.clsx)(e))}var Pe=require("react/jsx-runtime");function je({text:e,className:t,...o}){return e?(0,Pe.jsx)("label",{className:a("text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",t),...o,children:e}):null}var _=je;var Ce=require("cva"),Re=require("tailwind-merge"),ke=require("react/jsx-runtime"),et=({className:e,variant:t,size:o,...i})=>(0,ke.jsx)("div",{className:(0,Re.twMerge)(tt({variant:t,size:o,className:e})),...i}),tt=(0,Ce.cva)(["flex","items-center","rounded-3xl","border","w-fit"],{variants:{variant:{neutral:["text-grey-80","border-grey-10"],primary:["text-purple-100","border-purple-20"],danger:["text-pumpkin-100","border-pumpkin-20"],onboarding:["text-green-100","bg-green-10","cursor-pointer"],onboardingSelected:["text-white","bg-green-90","cursor-pointer"]},size:{small:["text-sm","leading-5","px-2","py-1","gap-1.5"],medium:["text-base","leading-6","px-3","py-2","gap-2"]}},defaultVariants:{variant:"neutral",size:"medium"}}),Y=et;var re=N(require("@radix-ui/react-separator"),1),Ne=N(require("react"),1);var we=require("react/jsx-runtime"),F=Ne.forwardRef(({className:e,orientation:t="horizontal",decorative:o=!0,...i},n)=>(0,we.jsx)(re.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),...i}));F.displayName=re.Root.displayName;var m=require("react/jsx-runtime"),Se=(0,w.forwardRef)(({label:e,options:t,placeholder:o,multiselect:i,classNames:n,...u},b)=>{let{value:C,defaultValue:I,dir:V,className:R,onChange:A,...z}=u,[k,g]=(0,w.useState)([]),[W,M]=(0,w.useState)(!1),G=(0,w.useRef)(null);(0,w.useEffect)(()=>{if(!C)return g([]);g(Array.isArray(C)?C:[C])},[C]);let q=()=>M(r=>!r),oe=r=>r.key==="Escape"&&M(!1),L=(r,p)=>r.key==="Enter"&&O(p),Q=k?.map(r=>t?.find(({value:p})=>p===r)).filter(Boolean);function K(){return i?k.map(r=>t?.find(p=>p.value===r)?.title).join(", "):t?.find(r=>r.value===k.join())?.title}function ae(r){(!i||r)&&M(r)}function O(r){let p=[];g(l=>(p=l.includes(r)?l.filter(h=>h!==r):[...l,r],i?p:[r])),A?.(i?p:r)}return(0,m.jsxs)("div",{className:a("flex flex-col space-y-2",R),ref:G,children:[(0,m.jsx)(_,{text:e,className:n?.label}),(0,m.jsxs)(d.Root,{open:W,value:k.join(","),onOpenChange:ae,onValueChange:i?void 0:O,defaultValue:typeof I=="string"?I:void 0,dir:V==="rtl"?"rtl":"ltr",...z,children:[(0,m.jsxs)(d.Trigger,{ref:b,"data-testid":`${e.toLowerCase()}-select-element`,className:"group flex min-w-80 flex-row items-center justify-between gap-3 rounded-lg border border-grey-20 px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",children:[(0,m.jsx)("span",{className:"truncate",children:(0,m.jsx)(d.Value,{placeholder:o??"Select an option","aria-label":K(),children:K()})}),(0,m.jsx)(H.ChevronDownIcon,{className:"transform text-black group-data-[state=open]:rotate-180",size:"16"})]}),(0,m.jsx)(d.Portal,{container:G.current,children:(0,m.jsx)(d.Content,{hideWhenDetached:!0,className:"z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg",position:"popper",sideOffset:4,onPointerDownOutside:q,onKeyDown:oe,children:(0,m.jsxs)(d.Viewport,{children:[i&&!!Q?.length&&(0,m.jsx)(d.Group,{className:"mb-2 flex flex-row flex-wrap gap-1 px-2","data-testid":"selected-labels",children:Q?.map(r=>r&&(0,m.jsxs)(Y,{size:"small",variant:"primary",children:[(0,m.jsx)("span",{children:r.title}),(0,m.jsx)(H.X,{size:18,"data-testid":`chip-remove-${r.value}`,className:"cursor-pointer",onClick:()=>O(r.value)})]},r.title))}),(0,m.jsx)(F,{}),t?.map(({id:r,title:p,value:l})=>(0,m.jsxs)(d.Item,{value:l,className:"group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100","data-state":k.includes(l)?"checked":"unchecked",onKeyDown:h=>L(h,l),onClick:()=>O(l),children:[(0,m.jsx)(d.ItemText,{children:p}),(0,m.jsx)(H.CheckIcon,{className:"absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",size:16})]},r))]})})})]})]})});Se.displayName="Select";var De=Se;var $=N(require("@radix-ui/react-checkbox"),1),Z=require("lucide-react"),ie=require("react");var S=require("react/jsx-runtime"),Ee=(0,ie.forwardRef)(({className:e,...t},o)=>(0,S.jsx)($.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,S.jsxs)($.Indicator,{className:"flex items-center justify-center text-current",children:[(0,S.jsx)(Z.Check,{className:"hidden h-4 w-4 group-data-[state=checked]:block"}),(0,S.jsx)(Z.Minus,{className:"hidden h-4 w-4 group-data-[state=indeterminate]:block"})]})}));Ee.displayName=$.Root.displayName;var Ie=(0,ie.forwardRef)(({classNames:e,children:t,...o},i)=>{let{disabled:n}=o,u=o.id??`${o.name??o.value?.toString()}-checkbox`,b=n?"text-grey-40 pointer-events-none":"";return(0,S.jsxs)("div",{className:a("flex space-x-2",e?.wrapper),children:[(0,S.jsx)(Ee,{id:u,disabled:n,ref:i,...o}),(0,S.jsx)("label",{htmlFor:u,className:a(b,e?.label),children:t})]})});Ie.displayName="Checkbox";var j=Ie;var Le=require("lucide-react");var ne=require("lucide-react"),P=require("react/jsx-runtime");function ot({icon:e,hasCheckbox:t,isSelected:o,className:i,title:n,value:u,description:b,...C}){let V=e?(R=>{if(R in ne.icons){let A=ne.icons[R];return(0,P.jsx)(A,{size:14})}return null})(e):void 0;return(0,P.jsxs)("li",{className:a("group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",i),...C,"data-state":o?"checked":"unchecked",children:[V&&(0,P.jsx)("span",{className:"mr-2",children:V}),t&&(0,P.jsx)(j,{id:u,checked:o,onClick:R=>R.preventDefault()}),(0,P.jsxs)("div",{children:[(0,P.jsx)("p",{children:n}),(0,P.jsx)("p",{className:"text-xs text-grey-80",children:b})]}),(0,P.jsx)(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 ee=ot;var Te=require("@radix-ui/react-slot"),Ve=require("cva"),ze=require("react"),We=require("react/jsx-runtime"),le=(0,ze.forwardRef)(({className:e,variant:t,size:o,asChild:i=!1,...n},u)=>(0,We.jsx)(i?Te.Slot:"button",{className:a(at({variant:t,size:o,className:e})),ref:u,...n}));le.displayName="Button";var at=(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"]}]});var T=require("react"),B=require("lucide-react"),Fe=require("cva");var f=require("cmdk"),He=require("lucide-react"),E=N(require("react"),1);var c=N(require("@radix-ui/react-dialog"),1),Me=require("lucide-react"),J=N(require("react"),1),y=require("react/jsx-runtime");var rt=c.Portal;var Oe=J.forwardRef(({className:e,...t},o)=>(0,y.jsx)(c.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}));Oe.displayName=c.Overlay.displayName;var _e=J.forwardRef(({className:e,children:t,...o},i)=>(0,y.jsxs)(rt,{children:[(0,y.jsx)(Oe,{}),(0,y.jsxs)(c.Content,{ref:i,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,y.jsxs)(c.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,y.jsx)(Me.X,{className:"h-4 w-4"}),(0,y.jsx)("span",{className:"sr-only",children:"Close"})]})]})]}));_e.displayName=c.Content.displayName;var it=({className:e,...t})=>(0,y.jsx)("div",{className:a("flex flex-col space-y-1.5 text-center sm:text-left",e),...t});it.displayName="DialogHeader";var nt=({className:e,...t})=>(0,y.jsx)("div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});nt.displayName="DialogFooter";var lt=J.forwardRef(({className:e,...t},o)=>(0,y.jsx)(c.Title,{ref:o,className:a("text-lg font-semibold leading-none tracking-tight",e),...t}));lt.displayName=c.Title.displayName;var st=J.forwardRef(({className:e,...t},o)=>(0,y.jsx)(c.Description,{ref:o,className:a("text-sm text-neutral-500 dark:text-neutral-400",e),...t}));st.displayName=c.Description.displayName;var x=require("react/jsx-runtime"),se=E.forwardRef(({className:e,...t},o)=>(0,x.jsx)(f.Command,{ref:o,className:a("flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950",e),...t}));se.displayName=f.Command.displayName;var me=E.forwardRef(({className:e,...t},o)=>(0,x.jsxs)("div",{className:"m-1 flex items-center rounded-xl border px-3","cmdk-input-wrapper":"",children:[(0,x.jsx)(He.Search,{className:"mr-2 h-4 w-4 shrink-0 opacity-50"}),(0,x.jsx)(f.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})]}));me.displayName=f.Command.Input.displayName;var pe=E.forwardRef(({className:e,...t},o)=>(0,x.jsx)(f.Command.List,{ref:o,className:a("overflow-y-auto overflow-x-hidden",e),...t}));pe.displayName=f.Command.List.displayName;var de=E.forwardRef((e,t)=>(0,x.jsx)(f.Command.Empty,{ref:t,className:"py-6 text-center text-sm",...e}));de.displayName=f.Command.Empty.displayName;var ce=E.forwardRef(({className:e,...t},o)=>(0,x.jsx)(f.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}));ce.displayName=f.Command.Group.displayName;var mt=E.forwardRef(({className:e,...t},o)=>(0,x.jsx)(f.Command.Separator,{ref:o,className:a("-mx-1 h-px bg-neutral-200",e),...t}));mt.displayName=f.Command.Separator.displayName;var fe=E.forwardRef(({className:e,...t},o)=>(0,x.jsx)(f.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}));fe.displayName=f.Command.Item.displayName;var pt=({className:e,...t})=>(0,x.jsx)("span",{className:a("ml-auto text-xs tracking-widest text-neutral-500",e),...t});pt.displayName="CommandShortcut";var Be=N(require("react"),1),D=N(require("@radix-ui/react-popover"),1);var ue=require("react/jsx-runtime"),Ae=D.Root,Ge=D.Trigger,ge=Be.forwardRef(({className:e,align:t="center",sideOffset:o=4,...i},n)=>(0,ue.jsx)(D.Portal,{children:(0,ue.jsx)(D.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),...i})}));ge.displayName=D.Content.displayName;var Ke=require("cva");var Xe=require("react/jsx-runtime"),dt=(0,Ke.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 te({className:e,variant:t,...o}){return(0,Xe.jsx)("div",{className:a(dt({variant:t}),e),...o})}var s=require("react/jsx-runtime"),he=(0,T.forwardRef)((e,t)=>{let{value:o,label:i,options:n,classNames:u,multiselect:b,placeholder:C,variant:I="default",size:V,icon:R,className:A,onChange:z,children:k}=e,[g,W]=(0,T.useState)([]),[M,G]=(0,T.useState)(!1),q=R&&B.icons[R],oe=n?.length<=5,L=I==="default",Q=I==="chip",K=()=>G(!1);(0,T.useEffect)(()=>{W((b?o??[]:o?[o]:[]).map(l=>n.find(h=>h.value===l)).filter(l=>l!==void 0))},[o]);let ae=p=>{let l=n.find(h=>h.value===p);if(l){if(b)return W(h=>{let ve=h.some(X=>X.value===p)?h.filter(X=>X!==l):[...h,l];return z?.(ve.map(X=>X.value)),ve});W([l]),z?.(l.value),K()}},O=()=>{W([]),z?.(b?[]:"")},r=()=>{let p=g.length>0?g.map(l=>l.title).join(", "):C;return L?p:i};return(0,s.jsxs)("div",{className:a("flex flex-col gap-2",A),children:[L&&i&&(0,s.jsx)(_,{text:i,className:u?.label}),(0,s.jsxs)("div",{className:"relative flex",children:[(0,s.jsxs)(Ae,{open:M,onOpenChange:G,children:[(0,s.jsx)(Ge,{asChild:!0,disabled:n.length===0,children:(0,s.jsxs)("div",{ref:t,className:a(ct({variant:I,size:V}),g.length>0&&"pr-10",u?.trigger),"aria-expanded":M,children:[L&&q&&(0,s.jsx)(q,{className:"h-4 w-4 shrink-0"}),Q&&g.length>0&&(0,s.jsx)(te,{variant:"purple",children:g.length}),(0,s.jsx)("span",{className:a("w-full truncate leading-normal",L&&g.length==0&&"text-grey-40"),children:r()}),g.length==0&&(0,s.jsx)(B.ChevronDownIcon,{className:"shrink-0 transform group-data-[state=open]:rotate-180",size:"16"})]})}),(0,s.jsx)(se,{children:(0,s.jsxs)(ge,{className:a("flex w-full max-w-xs flex-col overflow-hidden p-0","max-h-[--radix-popover-content-available-height]",u?.content),collisionPadding:8,sideOffset:4,align:"start",children:[!oe&&(0,s.jsx)(me,{placeholder:"Search..."}),(0,s.jsxs)(pe,{children:[(0,s.jsx)(de,{children:"No results"}),(0,s.jsx)(ce,{children:n.map(({id:p,...l})=>(0,s.jsx)(fe,{value:l.title,onSelect:ae,children:(0,s.jsx)(ee,{className:a(u?.items,"truncate py-1"),isSelected:g.some(h=>h.value===l.value),hasCheckbox:b,...l})},p))})]}),!!k&&(0,s.jsx)(F,{}),k&&k({close:K})]})})]}),L&&g.length>0&&(0,s.jsx)("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:O,children:(0,s.jsx)(B.CircleX,{className:"h-4 w-4 text-green-100"})})]})]})});he.displayName="Combobox";var ct=(0,Fe.cva)("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"}});0&&(module.exports={Badge,Button,Checkbox,Chip,Combobox,Label,ListItem,Select,cn});
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/index.ts
31
+ var index_exports = {};
32
+ __export(index_exports, {
33
+ Badge: () => Badge,
34
+ Button: () => Button,
35
+ Checkbox: () => Checkbox_default,
36
+ Chip: () => Chip_default,
37
+ Combobox: () => Combobox,
38
+ Label: () => Label_default,
39
+ ListItem: () => ListItem_default,
40
+ Select: () => Select_default,
41
+ cn: () => cn
42
+ });
43
+ module.exports = __toCommonJS(index_exports);
44
+
45
+ // src/components/ui/Select.tsx
46
+ var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
47
+ var import_lucide_react = require("lucide-react");
48
+ var import_react = require("react");
49
+
50
+ // src/lib/utils.ts
51
+ var import_clsx = require("clsx");
52
+ var import_tailwind_merge = require("tailwind-merge");
53
+ function cn(...inputs) {
54
+ return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
55
+ }
56
+
57
+ // src/components/ui/Label.tsx
58
+ var import_jsx_runtime = require("react/jsx-runtime");
59
+ function Label({ text, className, ...props }) {
60
+ if (!text) return null;
61
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
+ "label",
63
+ {
64
+ className: cn(
65
+ "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
66
+ className
67
+ ),
68
+ ...props,
69
+ children: text
70
+ }
71
+ );
72
+ }
73
+ var Label_default = Label;
74
+
75
+ // src/components/ui/Chip.tsx
76
+ var import_cva = require("cva");
77
+ var import_tailwind_merge2 = require("tailwind-merge");
78
+ var import_jsx_runtime2 = require("react/jsx-runtime");
79
+ var Chip = ({ className, variant, size, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)(chipVariants({ variant, size, className })), ...props });
80
+ var chipVariants = (0, import_cva.cva)(["flex", "items-center", "rounded-3xl", "border", "w-fit"], {
81
+ variants: {
82
+ variant: {
83
+ neutral: ["text-grey-80", "border-grey-10"],
84
+ primary: ["text-purple-100", "border-purple-20"],
85
+ danger: ["text-pumpkin-100", "border-pumpkin-20"],
86
+ onboarding: ["text-green-100", "bg-green-10", "cursor-pointer"],
87
+ onboardingSelected: ["text-white", "bg-green-90", "cursor-pointer"]
88
+ },
89
+ size: {
90
+ small: ["text-sm", "leading-5", "px-2", "py-1", "gap-1.5"],
91
+ medium: ["text-base", "leading-6", "px-3", "py-2", "gap-2"]
92
+ }
93
+ },
94
+ defaultVariants: {
95
+ variant: "neutral",
96
+ size: "medium"
97
+ }
98
+ });
99
+ var Chip_default = Chip;
100
+
101
+ // src/components/primitives/separator.tsx
102
+ var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
103
+ var React = __toESM(require("react"), 1);
104
+ var import_jsx_runtime3 = require("react/jsx-runtime");
105
+ var Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
106
+ SeparatorPrimitive.Root,
107
+ {
108
+ ref,
109
+ decorative,
110
+ orientation,
111
+ className: cn(
112
+ "shrink-0 bg-grey-10",
113
+ orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
114
+ className
115
+ ),
116
+ ...props
117
+ }
118
+ ));
119
+ Separator.displayName = SeparatorPrimitive.Root.displayName;
120
+
121
+ // src/components/ui/Select.tsx
122
+ var import_jsx_runtime4 = require("react/jsx-runtime");
123
+ var Select = (0, import_react.forwardRef)(
124
+ ({ label, options, placeholder, multiselect, classNames, ...props }, ref) => {
125
+ const { value, defaultValue, dir, className, onChange, ...rest } = props;
126
+ const [selected, setSelected] = (0, import_react.useState)([]);
127
+ const [open, setOpen] = (0, import_react.useState)(false);
128
+ const containerRef = (0, import_react.useRef)(null);
129
+ (0, import_react.useEffect)(() => {
130
+ if (!value) return setSelected([]);
131
+ setSelected(Array.isArray(value) ? value : [value]);
132
+ }, [value]);
133
+ const toggleOpen = () => setOpen((prev) => !prev);
134
+ const closeOnEscape = (event) => event.key === "Escape" && setOpen(false);
135
+ const setValueOnEnter = (event, value2) => event.key === "Enter" && handleChange(value2);
136
+ const chipLabels = selected?.map((s) => options?.find(({ value: value2 }) => value2 === s)).filter(Boolean);
137
+ function handleLabels() {
138
+ if (multiselect) {
139
+ return selected.map((o) => options?.find((option) => option.value === o)?.title).join(", ");
140
+ }
141
+ return options?.find((option) => option.value === selected.join())?.title;
142
+ }
143
+ function handleOnOpenChange(isOpen) {
144
+ if (!multiselect || isOpen) setOpen(isOpen);
145
+ }
146
+ function handleChange(newValue) {
147
+ let newSelected = [];
148
+ setSelected((prev) => {
149
+ newSelected = prev.includes(newValue) ? prev.filter((item) => item !== newValue) : [...prev, newValue];
150
+ return multiselect ? newSelected : [newValue];
151
+ });
152
+ onChange?.(multiselect ? newSelected : newValue);
153
+ }
154
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex flex-col space-y-2", className), ref: containerRef, children: [
155
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label_default, { text: label, className: classNames?.label }),
156
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
157
+ SelectPrimitive.Root,
158
+ {
159
+ open,
160
+ value: selected.join(","),
161
+ onOpenChange: handleOnOpenChange,
162
+ onValueChange: multiselect ? void 0 : handleChange,
163
+ defaultValue: typeof defaultValue === "string" ? defaultValue : void 0,
164
+ dir: dir === "rtl" ? "rtl" : "ltr",
165
+ ...rest,
166
+ children: [
167
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
168
+ SelectPrimitive.Trigger,
169
+ {
170
+ ref,
171
+ "data-testid": `${label.toLowerCase()}-select-element`,
172
+ className: "group flex min-w-80 flex-row items-center justify-between gap-3 rounded-lg border border-grey-20 px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40",
173
+ children: [
174
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
175
+ SelectPrimitive.Value,
176
+ {
177
+ placeholder: placeholder ?? "Select an option",
178
+ "aria-label": handleLabels(),
179
+ children: handleLabels()
180
+ }
181
+ ) }),
182
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
183
+ import_lucide_react.ChevronDownIcon,
184
+ {
185
+ className: "transform text-black group-data-[state=open]:rotate-180",
186
+ size: "16"
187
+ }
188
+ )
189
+ ]
190
+ }
191
+ ),
192
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPrimitive.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
193
+ SelectPrimitive.Content,
194
+ {
195
+ hideWhenDetached: true,
196
+ className: "z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg",
197
+ position: "popper",
198
+ sideOffset: 4,
199
+ onPointerDownOutside: toggleOpen,
200
+ onKeyDown: closeOnEscape,
201
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(SelectPrimitive.Viewport, { children: [
202
+ multiselect && !!chipLabels?.length && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
203
+ SelectPrimitive.Group,
204
+ {
205
+ className: "mb-2 flex flex-row flex-wrap gap-1 px-2",
206
+ "data-testid": "selected-labels",
207
+ children: chipLabels?.map(
208
+ (chip) => chip && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Chip_default, { size: "small", variant: "primary", children: [
209
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: chip.title }),
210
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
211
+ import_lucide_react.X,
212
+ {
213
+ size: 18,
214
+ "data-testid": `chip-remove-${chip.value}`,
215
+ className: "cursor-pointer",
216
+ onClick: () => handleChange(chip.value)
217
+ }
218
+ )
219
+ ] }, chip.title)
220
+ )
221
+ }
222
+ ),
223
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Separator, {}),
224
+ options?.map(({ id, title, value: value2 }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
225
+ SelectPrimitive.Item,
226
+ {
227
+ value: value2,
228
+ className: "group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100",
229
+ "data-state": selected.includes(value2) ? "checked" : "unchecked",
230
+ onKeyDown: (e) => setValueOnEnter(e, value2),
231
+ onClick: () => handleChange(value2),
232
+ children: [
233
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectPrimitive.ItemText, { children: title }),
234
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
235
+ import_lucide_react.CheckIcon,
236
+ {
237
+ className: "absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block",
238
+ size: 16
239
+ }
240
+ )
241
+ ]
242
+ },
243
+ id
244
+ ))
245
+ ] })
246
+ }
247
+ ) })
248
+ ]
249
+ }
250
+ )
251
+ ] });
252
+ }
253
+ );
254
+ Select.displayName = "Select";
255
+ var Select_default = Select;
256
+
257
+ // src/components/ui/Checkbox.tsx
258
+ var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
259
+ var import_lucide_react2 = require("lucide-react");
260
+ var import_react2 = require("react");
261
+ var import_jsx_runtime5 = require("react/jsx-runtime");
262
+ var CheckboxToggle = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
263
+ CheckboxPrimitive.Root,
264
+ {
265
+ ref,
266
+ className: cn(
267
+ "group",
268
+ "peer",
269
+ "h-5",
270
+ "w-5",
271
+ "shrink-0",
272
+ "rounded-md",
273
+ "border",
274
+ "border-grey-10",
275
+ "outline",
276
+ "outline-1",
277
+ "outline-offset-2",
278
+ "outline-transparent",
279
+ "hover:border-grey-20",
280
+ "focus:outline-purple-100",
281
+ "active:border-green-80",
282
+ "disabled:cursor-not-allowed",
283
+ "disabled:opacity-50",
284
+ "data-[state=checked]:bg-green-80",
285
+ "data-[state=indeterminate]:bg-green-80",
286
+ "data-[state=checked]:text-white",
287
+ "data-[state=indeterminate]:text-primary-foreground",
288
+ props.disabled && "data-[state=checked]:text-foreground bg-grey-20 data-[state=checked]:bg-grey-20",
289
+ className
290
+ ),
291
+ ...props,
292
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
293
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Check, { className: "hidden h-4 w-4 group-data-[state=checked]:block" }),
294
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Minus, { className: "hidden h-4 w-4 group-data-[state=indeterminate]:block" })
295
+ ] })
296
+ }
297
+ ));
298
+ CheckboxToggle.displayName = CheckboxPrimitive.Root.displayName;
299
+ var Checkbox = (0, import_react2.forwardRef)(
300
+ ({ classNames, children, ...props }, ref) => {
301
+ const { disabled } = props;
302
+ const id = props.id ?? `${props.name ?? props.value?.toString()}-checkbox`;
303
+ const labelClassName = disabled ? "text-grey-40 pointer-events-none" : "";
304
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex space-x-2", classNames?.wrapper), children: [
305
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxToggle, { id, disabled, ref, ...props }),
306
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: id, className: cn(labelClassName, classNames?.label), children })
307
+ ] });
308
+ }
309
+ );
310
+ Checkbox.displayName = "Checkbox";
311
+ var Checkbox_default = Checkbox;
312
+
313
+ // src/components/ui/ListItem.tsx
314
+ var import_lucide_react3 = require("lucide-react");
315
+ var import_lucide_react4 = require("lucide-react");
316
+ var import_jsx_runtime6 = require("react/jsx-runtime");
317
+ function ListItem({
318
+ icon,
319
+ hasCheckbox,
320
+ isSelected,
321
+ className,
322
+ title,
323
+ value,
324
+ description,
325
+ ...props
326
+ }) {
327
+ const getIconIfValid = (icon2) => {
328
+ if (icon2 in import_lucide_react4.icons) {
329
+ const IconComponent = import_lucide_react4.icons[icon2];
330
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconComponent, { size: 14 });
331
+ }
332
+ return null;
333
+ };
334
+ const optionIcon = icon ? getIconIfValid(icon) : void 0;
335
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
336
+ "li",
337
+ {
338
+ className: cn(
339
+ "group relative flex w-72 cursor-pointer flex-row items-center text-left text-sm",
340
+ className
341
+ ),
342
+ ...props,
343
+ "data-state": isSelected ? "checked" : "unchecked",
344
+ children: [
345
+ optionIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mr-2", children: optionIcon }),
346
+ hasCheckbox && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Checkbox_default, { id: value, checked: isSelected, onClick: (e) => e.preventDefault() }),
347
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
348
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: title }),
349
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-grey-80", children: description })
350
+ ] }),
351
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
352
+ import_lucide_react3.CheckIcon,
353
+ {
354
+ className: "absolute inset-y-0 right-0 my-auto hidden w-6 text-green-100 group-data-[state=checked]:block",
355
+ size: 16
356
+ }
357
+ )
358
+ ]
359
+ }
360
+ );
361
+ }
362
+ var ListItem_default = ListItem;
363
+
364
+ // src/components/ui/Button.tsx
365
+ var import_react_slot = require("@radix-ui/react-slot");
366
+ var import_cva2 = require("cva");
367
+ var import_react3 = require("react");
368
+ var import_jsx_runtime7 = require("react/jsx-runtime");
369
+ var Button = (0, import_react3.forwardRef)(
370
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
371
+ const Component = asChild ? import_react_slot.Slot : "button";
372
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
373
+ Component,
374
+ {
375
+ className: cn(buttonVariants({ variant, size, className })),
376
+ ref,
377
+ ...props
378
+ }
379
+ );
380
+ }
381
+ );
382
+ Button.displayName = "Button";
383
+ var buttonVariants = (0, import_cva2.cva)(
384
+ [
385
+ "flex",
386
+ "items-center",
387
+ "justify-center",
388
+ "gap-2",
389
+ "rounded-full",
390
+ "font-bold",
391
+ "outline-2",
392
+ "outline-offset-2",
393
+ "outline-dashed",
394
+ "outline-transparent"
395
+ ],
396
+ {
397
+ variants: {
398
+ variant: {
399
+ neutral: [
400
+ "bg-black",
401
+ "text-white",
402
+ "hover:bg-grey-90",
403
+ "active:bg-grey-80",
404
+ "focus:outline-purple-100",
405
+ "disabled:text-grey-40",
406
+ "disabled:bg-grey-10"
407
+ ],
408
+ primary: [
409
+ "bg-pickle-100",
410
+ "text-black",
411
+ "hover:bg-pickle-80",
412
+ "active:bg-pickle-60",
413
+ "focus:outline-purple-100",
414
+ "disabled:text-grey-40",
415
+ "disabled:bg-grey-10"
416
+ ],
417
+ secondary: [
418
+ "bg-green-80",
419
+ "text-white",
420
+ "hover:bg-green-90",
421
+ "active:bg-green-100",
422
+ "focus:outline-pickle-100",
423
+ "disabled:text-grey-40",
424
+ "disabled:bg-grey-10"
425
+ ],
426
+ transparent: [
427
+ "text-white",
428
+ "hover:bg-green-80",
429
+ "active:bg-green-100",
430
+ "focus:outline-pickle-100",
431
+ "disabled:text-grey-40"
432
+ ],
433
+ link: [
434
+ "leading-tight",
435
+ "text-black",
436
+ "underline",
437
+ "hover:text-purple-100",
438
+ "focus:text-black",
439
+ "focus:outline-purple-100",
440
+ "active:text-purple-80"
441
+ ]
442
+ },
443
+ size: {
444
+ small: ["h-10", "text-sm", "px-4", "py-2"],
445
+ medium: ["h-12", "text-base", "px-6", "py-3"],
446
+ large: ["h-14", "text-lg", "px-8", "py-4"]
447
+ }
448
+ },
449
+ defaultVariants: {
450
+ variant: "neutral",
451
+ size: "medium"
452
+ },
453
+ compoundVariants: [
454
+ {
455
+ variant: "link",
456
+ size: "small",
457
+ class: ["h-3", "text-xs", "p-0"]
458
+ },
459
+ {
460
+ variant: "link",
461
+ size: "medium",
462
+ class: ["h-4", "text-sm", "p-0"]
463
+ },
464
+ {
465
+ variant: "link",
466
+ size: "large",
467
+ class: ["h-6", "text-base", "p-0"]
468
+ }
469
+ ]
470
+ }
471
+ );
472
+
473
+ // src/components/ui/Combobox.tsx
474
+ var import_react4 = require("react");
475
+ var import_lucide_react7 = require("lucide-react");
476
+ var import_cva4 = require("cva");
477
+
478
+ // src/components/primitives/command.tsx
479
+ var import_cmdk = require("cmdk");
480
+ var import_lucide_react6 = require("lucide-react");
481
+ var React4 = __toESM(require("react"), 1);
482
+
483
+ // src/components/primitives/dialog.tsx
484
+ var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
485
+ var import_lucide_react5 = require("lucide-react");
486
+ var React3 = __toESM(require("react"), 1);
487
+ var import_jsx_runtime8 = require("react/jsx-runtime");
488
+ var DialogPortal = DialogPrimitive.Portal;
489
+ var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
490
+ DialogPrimitive.Overlay,
491
+ {
492
+ ref,
493
+ className: cn(
494
+ "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",
495
+ className
496
+ ),
497
+ ...props
498
+ }
499
+ ));
500
+ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
501
+ var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(DialogPortal, { children: [
502
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogOverlay, {}),
503
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
504
+ DialogPrimitive.Content,
505
+ {
506
+ ref,
507
+ className: cn(
508
+ "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",
509
+ className
510
+ ),
511
+ ...props,
512
+ children: [
513
+ children,
514
+ /* @__PURE__ */ (0, import_jsx_runtime8.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: [
515
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.X, { className: "h-4 w-4" }),
516
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: "Close" })
517
+ ] })
518
+ ]
519
+ }
520
+ )
521
+ ] }));
522
+ DialogContent.displayName = DialogPrimitive.Content.displayName;
523
+ var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
524
+ DialogHeader.displayName = "DialogHeader";
525
+ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
526
+ "div",
527
+ {
528
+ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
529
+ ...props
530
+ }
531
+ );
532
+ DialogFooter.displayName = "DialogFooter";
533
+ var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
534
+ DialogPrimitive.Title,
535
+ {
536
+ ref,
537
+ className: cn("text-lg font-semibold leading-none tracking-tight", className),
538
+ ...props
539
+ }
540
+ ));
541
+ DialogTitle.displayName = DialogPrimitive.Title.displayName;
542
+ var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
543
+ DialogPrimitive.Description,
544
+ {
545
+ ref,
546
+ className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
547
+ ...props
548
+ }
549
+ ));
550
+ DialogDescription.displayName = DialogPrimitive.Description.displayName;
551
+
552
+ // src/components/primitives/command.tsx
553
+ var import_jsx_runtime9 = require("react/jsx-runtime");
554
+ var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
555
+ import_cmdk.Command,
556
+ {
557
+ ref,
558
+ className: cn(
559
+ "flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-neutral-950",
560
+ className
561
+ ),
562
+ ...props
563
+ }
564
+ ));
565
+ Command.displayName = import_cmdk.Command.displayName;
566
+ var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "m-1 flex items-center rounded-xl border px-3", "cmdk-input-wrapper": "", children: [
567
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
568
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
569
+ import_cmdk.Command.Input,
570
+ {
571
+ ref,
572
+ className: cn(
573
+ "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",
574
+ className
575
+ ),
576
+ ...props
577
+ }
578
+ )
579
+ ] }));
580
+ CommandInput.displayName = import_cmdk.Command.Input.displayName;
581
+ var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
582
+ import_cmdk.Command.List,
583
+ {
584
+ ref,
585
+ className: cn("overflow-y-auto overflow-x-hidden", className),
586
+ ...props
587
+ }
588
+ ));
589
+ CommandList.displayName = import_cmdk.Command.List.displayName;
590
+ var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
591
+ CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
592
+ var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
593
+ import_cmdk.Command.Group,
594
+ {
595
+ ref,
596
+ className: cn(
597
+ "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",
598
+ className
599
+ ),
600
+ ...props
601
+ }
602
+ ));
603
+ CommandGroup.displayName = import_cmdk.Command.Group.displayName;
604
+ var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
605
+ import_cmdk.Command.Separator,
606
+ {
607
+ ref,
608
+ className: cn("-mx-1 h-px bg-neutral-200", className),
609
+ ...props
610
+ }
611
+ ));
612
+ CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
613
+ var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
614
+ import_cmdk.Command.Item,
615
+ {
616
+ ref,
617
+ className: cn(
618
+ "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",
619
+ className
620
+ ),
621
+ ...props
622
+ }
623
+ ));
624
+ CommandItem.displayName = import_cmdk.Command.Item.displayName;
625
+ var CommandShortcut = ({ className, ...props }) => {
626
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
627
+ "span",
628
+ {
629
+ className: cn("ml-auto text-xs tracking-widest text-neutral-500", className),
630
+ ...props
631
+ }
632
+ );
633
+ };
634
+ CommandShortcut.displayName = "CommandShortcut";
635
+
636
+ // src/components/primitives/popover.tsx
637
+ var React5 = __toESM(require("react"), 1);
638
+ var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
639
+ var import_jsx_runtime10 = require("react/jsx-runtime");
640
+ var Popover = PopoverPrimitive.Root;
641
+ var PopoverTrigger = PopoverPrimitive.Trigger;
642
+ var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
643
+ PopoverPrimitive.Content,
644
+ {
645
+ ref,
646
+ align,
647
+ sideOffset,
648
+ className: cn(
649
+ "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",
650
+ className
651
+ ),
652
+ ...props
653
+ }
654
+ ) }));
655
+ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
656
+
657
+ // src/components/ui/Badge.tsx
658
+ var import_cva3 = require("cva");
659
+ var import_jsx_runtime11 = require("react/jsx-runtime");
660
+ var badgeVariants = (0, import_cva3.cva)("rounded-full px-2 py-0.5 text-xs font-semibold", {
661
+ variants: {
662
+ variant: {
663
+ green: "bg-green-90 text-white",
664
+ pickle: "bg-pickle-100 text-black",
665
+ purple: "bg-purple-100 text-white"
666
+ }
667
+ },
668
+ defaultVariants: {
669
+ variant: "green"
670
+ }
671
+ });
672
+ function Badge({ className, variant, ...props }) {
673
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
674
+ }
675
+
676
+ // src/components/ui/Combobox.tsx
677
+ var import_jsx_runtime12 = require("react/jsx-runtime");
678
+ var Combobox = (0, import_react4.forwardRef)((props, ref) => {
679
+ const {
680
+ value,
681
+ label,
682
+ options,
683
+ classNames,
684
+ multiselect,
685
+ placeholder,
686
+ variant = "default",
687
+ size,
688
+ icon,
689
+ className,
690
+ onChange: handleChange,
691
+ children: footer
692
+ } = props;
693
+ const [selected, setSelected] = (0, import_react4.useState)([]);
694
+ const [open, setOpen] = (0, import_react4.useState)(false);
695
+ const IconComponent = icon && import_lucide_react7.icons[icon];
696
+ const hideSearchBox = options?.length <= 5;
697
+ const isDefault = variant === "default";
698
+ const isChip = variant === "chip";
699
+ const isEmpty = selected.length == 0;
700
+ const showChevron = isDefault ? isEmpty : true;
701
+ const close = () => setOpen(false);
702
+ (0, import_react4.useEffect)(() => {
703
+ const valueArray = multiselect ? value ?? [] : value ? [value] : [];
704
+ setSelected(
705
+ valueArray.map((v) => options.find((o) => o.value === v)).filter((v) => v !== void 0)
706
+ );
707
+ }, [value]);
708
+ const handleSelect = (value2) => {
709
+ const option = options.find((o) => o.value === value2);
710
+ if (!option) return;
711
+ if (multiselect) {
712
+ return setSelected((prev) => {
713
+ const newSelected = prev.some((o) => o.value === value2) ? prev.filter((v) => v !== option) : [...prev, option];
714
+ handleChange?.(newSelected.map((o) => o.value));
715
+ return newSelected;
716
+ });
717
+ }
718
+ setSelected([option]);
719
+ handleChange?.(option.value);
720
+ close();
721
+ };
722
+ const handleClear = () => {
723
+ setSelected([]);
724
+ multiselect ? handleChange?.([]) : handleChange?.("");
725
+ };
726
+ const handleDisplayValue = () => {
727
+ const defaultLabel = !isEmpty ? selected.map((s) => s.title).join(", ") : placeholder;
728
+ return isDefault ? defaultLabel : label;
729
+ };
730
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex flex-col gap-2", className), children: [
731
+ isDefault && label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Label_default, { text: label, className: classNames?.label }),
732
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative flex", children: [
733
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
734
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
735
+ PopoverTrigger,
736
+ {
737
+ asChild: true,
738
+ disabled: options.length === 0,
739
+ "data-testid": `${props.id ?? props.name}-combobox-trigger`,
740
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
741
+ "div",
742
+ {
743
+ ref,
744
+ className: cn(
745
+ triggerVariants({ variant, size }),
746
+ isDefault && !isEmpty && "pr-10",
747
+ classNames?.trigger
748
+ ),
749
+ "aria-expanded": open,
750
+ children: [
751
+ isDefault && IconComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComponent, { className: "h-4 w-4 shrink-0" }),
752
+ isChip && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { variant: "purple", children: selected.length }),
753
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
754
+ "span",
755
+ {
756
+ className: cn(
757
+ "w-full truncate leading-normal",
758
+ isDefault && isEmpty && "text-grey-40"
759
+ ),
760
+ children: handleDisplayValue()
761
+ }
762
+ ),
763
+ showChevron && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
764
+ import_lucide_react7.ChevronDownIcon,
765
+ {
766
+ className: "shrink-0 transform group-data-[state=open]:rotate-180",
767
+ size: "16"
768
+ }
769
+ )
770
+ ]
771
+ }
772
+ )
773
+ }
774
+ ),
775
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Command, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
776
+ PopoverContent,
777
+ {
778
+ className: cn(
779
+ "flex w-full max-w-xs flex-col overflow-hidden p-0",
780
+ "max-h-[--radix-popover-content-available-height]",
781
+ classNames?.content
782
+ ),
783
+ collisionPadding: 8,
784
+ sideOffset: 4,
785
+ align: "start",
786
+ children: [
787
+ !hideSearchBox && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CommandInput, { placeholder: "Search..." }),
788
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CommandList, { children: [
789
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CommandEmpty, { children: "No results" }),
790
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CommandGroup, { children: options.map(({ id, ...option }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CommandItem, { value: option.value, onSelect: handleSelect, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
791
+ ListItem_default,
792
+ {
793
+ className: cn(classNames?.items, "truncate py-1"),
794
+ isSelected: selected.some((s) => s.value === option.value),
795
+ hasCheckbox: multiselect,
796
+ ...option
797
+ }
798
+ ) }, id)) })
799
+ ] }),
800
+ !!footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Separator, {}),
801
+ footer && footer({ close })
802
+ ]
803
+ }
804
+ ) })
805
+ ] }),
806
+ isDefault && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
807
+ "button",
808
+ {
809
+ type: "button",
810
+ 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",
811
+ onClick: handleClear,
812
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.CircleX, { className: "h-4 w-4 text-green-100" })
813
+ }
814
+ )
815
+ ] })
816
+ ] });
817
+ });
818
+ Combobox.displayName = "Combobox";
819
+ var triggerVariants = (0, import_cva4.cva)(
820
+ "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",
821
+ {
822
+ variants: {
823
+ variant: {
824
+ default: ["w-full", "max-w-80", "rounded-lg"],
825
+ chip: [
826
+ "font-bold",
827
+ "rounded-3xl",
828
+ "data-[state=open]:bg-black",
829
+ "data-[state=open]:text-white"
830
+ ]
831
+ },
832
+ size: {
833
+ small: ["h-8", "py-1", "px-2", "text-xs"],
834
+ normal: ["h-9", "py-2", "px-3", "text-sm"],
835
+ large: ["h-10", "py-3", "px-4", "text-base"]
836
+ }
837
+ },
838
+ defaultVariants: {
839
+ variant: "default",
840
+ size: "normal"
841
+ }
842
+ }
843
+ );
844
+ // Annotate the CommonJS export names for ESM import in node:
845
+ 0 && (module.exports = {
846
+ Badge,
847
+ Button,
848
+ Checkbox,
849
+ Chip,
850
+ Combobox,
851
+ Label,
852
+ ListItem,
853
+ Select,
854
+ cn
855
+ });
2
856
  //# sourceMappingURL=index.cjs.map