geoiq-frontend-ui-kit 2.0.0 → 2.0.2

package/dist/index.es22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es22.js","sources":["../src/components/molecules/multi-select/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nimport { Check, X, ChevronDown, ChevronUp } from 'lucide-react'\nimport { Button } from '@/components/atoms/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  // CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/unstyled/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/unstyled/popover/popover-components'\nimport { Badge } from '@/components/atoms/badge'\nimport { Typography } from '../../atoms/typography'\nimport { MultiSelectProps } from './multi-select.types'\n\nfunction MultiSelect({\n  options,\n  selected,\n  onChange,\n  className,\n  container,\n  ...props\n}: MultiSelectProps) {\n  const [open, setOpen] = React.useState(false)\n  const popoverRef = React.useRef<HTMLButtonElement>(null)\n\n  const handleUnselect = (item: string) => {\n    onChange(selected.filter((i) => i !== item))\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen} {...props}>\n      <PopoverTrigger\n        className={`min-h-[40px] h-fit px-3 py-2\n        ${open ? 'border-primary-2 ring-4 ring-primary-1' : 'border-neutral-2'}\n        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`}\n        ref={popoverRef}\n        asChild\n      >\n        <Button\n          variant=\"secondary\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className={`w-full justify-between focus:ring-0 `}\n          onClick={() => setOpen(!open)}\n        >\n          <div className=\"flex flex-wrap gap-1\">\n            {selected.length > 0 ? (\n              selected.map((item) => {\n                const selectedItem = options.find(\n                  (option) => option.value === item\n                )\n                return (\n                  <Badge\n                    variant=\"default\"\n                    key={item}\n                    size={'sm'}\n                    //   className=\"mb-1 mr-1\"\n                    showBorder\n                    onClick={() => handleUnselect(item)}\n                  >\n                    <div className=\"flex items-center gap-1\">\n                      {selectedItem?.icon}\n                      {selectedItem?.label}\n                    </div>\n                    <button\n                      className=\"ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter') {\n                          handleUnselect(item)\n                        }\n                      }}\n                      onMouseDown={(e) => {\n                        e.preventDefault()\n                        e.stopPropagation()\n                      }}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        handleUnselect(item)\n                      }}\n                    >\n                      <X className=\"w-3 h-3 text-muted-foreground hover:text-foreground\" />\n                    </button>\n                  </Badge>\n                )\n              })\n            ) : (\n              <Typography variant=\"body2\" className=\"text-light-4\">\n                Select option\n              </Typography>\n            )}\n          </div>\n          {!open ? (\n            <ChevronDown className=\"w-4 h-4 opacity-50 shrink-0\" />\n          ) : (\n            <ChevronUp className=\"w-4 h-4 opacity-50 shrink-0\" />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        style={{\n          width: popoverRef.current?.clientWidth,\n        }}\n        className=\"w-full p-0 bg-light-1\"\n        onEscapeKeyDown={() => setOpen(false)}\n        container={container}\n      >\n        <Command className={className}>\n          {/* <CommandInput\n            showIcon={false}\n            inputMode={'none'}\n            className={'caret-transparent opacity-0 h-0 w-0 p-0 m-0'}\n            placeholder=\"Search ...\"\n          /> */}\n\n          <CommandList>\n            <CommandEmpty>\n              <Typography variant={'body3'}>No items found</Typography>\n            </CommandEmpty>\n            <CommandGroup className=\"px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar\">\n              {options.map((option) => (\n                <div className=\"py-0.5 px-1.5 bg-white\" key={option.value}>\n                  <CommandItem\n                    key={option.value}\n                    className={`justify-between p-2 rounded-md text-light-2 ${selected.indexOf(option.value) !== -1 ? 'bg-light-2' : ''}`}\n                    onSelect={() => {\n                      onChange(\n                        selected.includes(option.value)\n                          ? selected.filter((item) => item !== option.value)\n                          : [...selected, option.value]\n                      )\n                      setOpen(true)\n                    }}\n                  >\n                    <div className=\"flex items-center gap-1\">\n                      {option.icon}\n                      <Typography variant={'body2'}>{option.label}</Typography>\n                    </div>\n                    <Check\n                      className={cn(\n                        'h-5 w-5 stroke-brand',\n                        selected.includes(option.value)\n                          ? 'opacity-100'\n                          : 'opacity-0'\n                      )}\n                    />\n                  </CommandItem>\n                </div>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport { MultiSelect }\n"],"names":["MultiSelect","options","selected","onChange","className","container","props","open","setOpen","React","popoverRef","handleUnselect","item","i","Popover","PopoverTrigger","Button","selectedItem","option","Badge","e","X","Typography","ChevronUp","ChevronDown","PopoverContent","Command","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","cn"],"mappings":"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"}
+{"version":3,"file":"index.es22.js","sources":["../src/components/molecules/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import React from 'react'\n\n// import { Button } from '../button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  // DropdownMenuShortcut,\n  //   DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from './dropdown-menu-components'\nimport { DropdownMenuProps } from './dropdown-menu.types'\n\nexport function Dropdown({\n  trigger,\n  optionGroups,\n  header = 'My Account',\n  dropdownContentProps = {},\n  container,\n}: DropdownMenuProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"bg-light-1 w-56 shadow-lg  rounded-[8px]\"\n        container={container}\n        {...dropdownContentProps}\n      >\n        {/* label section (string/jsx) */}\n        {header && (\n          <>\n            <DropdownMenuLabel>{header}</DropdownMenuLabel>\n            <DropdownMenuSeparator className=\"border-t border-neutral-1\" />\n          </>\n        )}\n        {optionGroups.map((options, groupIndex) => {\n          return (\n            <React.Fragment key={groupIndex}>\n              <DropdownMenuGroup>\n                {options.map((option, optionIndex) => {\n                  if (option.subItems) {\n                    return (\n                      <DropdownMenuSub key={optionIndex}>\n                        <DropdownMenuSubTrigger\n                          disabled={option['disabled']}\n                          className={`data-[disabled]:hover:bg-light-1 hover:bg-light-2 rounded-md py-[11px] px-4 cursor-pointer data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed ${option.className}`}\n                        >\n                          {option.icon}\n                          <span className=\"text-xs\">{option.label}</span>\n                        </DropdownMenuSubTrigger>\n                        <DropdownMenuPortal>\n                          <DropdownMenuSubContent className=\"bg-light-1\">\n                            {option.subItems?.map((subItem, subItemIndex) => (\n                              <DropdownMenuItem\n                                disabled={subItem?.disabled}\n                                className={` data-[disabled]:hover:bg-light-1 hover:bg-light-2  data-[disabled]:cursor-not-allowed py-[11px] px-4 rounded-md ${subItem.className}`}\n                                onClick={subItem.onClick}\n                                key={subItemIndex}\n                              >\n                                {subItem.icon}\n                                <span className=\"text-xs\">{subItem.label}</span>\n                              </DropdownMenuItem>\n                            ))}\n                          </DropdownMenuSubContent>\n                        </DropdownMenuPortal>\n                      </DropdownMenuSub>\n                    )\n                  }\n                  return (\n                    <DropdownMenuItem\n                      className={`data-[disabled]:hover:bg-light-1 hover:bg-light-2 data-[disabled]:cursor-not-allowed hover:rounded-md py-[11px] px-4 h-[42px] ${option.className}`}\n                      onClick={option.onClick}\n                      disabled={option['disabled']}\n                      key={optionIndex}\n                    >\n                      {option.icon}\n                      <span className=\"text-xs\">{option.label}</span>\n\n                      {/* <DropdownMenuShortcut>⌘B</DropdownMenuShortcut> */}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuGroup>\n              {groupIndex + 1 !== optionGroups.length && (\n                <DropdownMenuSeparator className=\"border-t border-neutral-1\" />\n              )}\n            </React.Fragment>\n          )\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"names":["Dropdown","trigger","optionGroups","header","dropdownContentProps","container","DropdownMenu","React","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","options","groupIndex","DropdownMenuGroup","option","optionIndex","DropdownMenuSub","DropdownMenuSubTrigger","DropdownMenuPortal","DropdownMenuSubContent","subItem","subItemIndex","DropdownMenuItem"],"mappings":";;AAoBO,SAASA,EAAS;AAAA,EACvB,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,sBAAAC,IAAuB,CAAA;AAAA,EACvB,WAAAC;AACF,GAAsB;AACpB,yCACGC,GAAA,MACCC,gBAAAA,EAAA,cAACC,KAAoB,SAAO,GAAA,GAAEP,CAAQ,GACtCM,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,WAAAJ;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,IAGHD,KACCI,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MACEA,gBAAAA,EAAA,cAACG,GAAA,MAAmBP,CAAO,GAC3BI,gBAAAA,EAAA,cAACI,GAAA,EAAsB,WAAU,4BAAA,CAA4B,CAC/D;AAAA,IAEDT,EAAa,IAAI,CAACU,GAASC,MAExBN,gBAAAA,EAAA,cAACA,EAAM,UAAN,EAAe,KAAKM,EAAA,GACnBN,gBAAAA,EAAA,cAACO,GAAA,MACEF,EAAQ,IAAI,CAACG,GAAQC,MAChBD,EAAO,WAEPR,gBAAAA,EAAA,cAACU,GAAA,EAAgB,KAAKD,EAAA,GACpBT,gBAAAA,EAAA;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,UAAUH,EAAO;AAAA,QACjB,WAAW,4JAA4JA,EAAO,SAAS;AAAA,MAAA;AAAA,MAEtLA,EAAO;AAAA,MACRR,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,UAAA,GAAWQ,EAAO,KAAM;AAAA,IAAA,GAE1CR,gBAAAA,EAAA,cAACY,GAAA,MACCZ,gBAAAA,EAAA,cAACa,GAAA,EAAuB,WAAU,aAAA,GAC/BL,EAAO,UAAU,IAAI,CAACM,GAASC,MAC9Bf,gBAAAA,EAAA;AAAA,MAACgB;AAAA,MAAA;AAAA,QACC,UAAUF,GAAS;AAAA,QACnB,WAAW,oHAAoHA,EAAQ,SAAS;AAAA,QAChJ,SAASA,EAAQ;AAAA,QACjB,KAAKC;AAAA,MAAA;AAAA,MAEJD,EAAQ;AAAA,MACTd,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,UAAA,GAAWc,EAAQ,KAAM;AAAA,IAAA,CAE5C,CACH,CACF,CACF,IAIFd,gBAAAA,EAAA;AAAA,MAACgB;AAAA,MAAA;AAAA,QACC,WAAW,iIAAiIR,EAAO,SAAS;AAAA,QAC5J,SAASA,EAAO;AAAA,QAChB,UAAUA,EAAO;AAAA,QACjB,KAAKC;AAAA,MAAA;AAAA,MAEJD,EAAO;AAAA,MACRR,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,UAAA,GAAWQ,EAAO,KAAM;AAAA,IAAA,CAK7C,CACH,GACCF,IAAa,MAAMX,EAAa,UAC/BK,gBAAAA,EAAA,cAACI,GAAA,EAAsB,WAAU,4BAAA,CAA4B,CAEjE,CAEH;AAAA,EAAA,CAEL;AAEJ;"}

package/dist/index.es23.js

@@ -1,171 +1,132 @@
-import { cn as s } from "./index.es81.js";
-import { useRanger as w } from "@tanstack/react-ranger";
-import e from "react";
-import { SliderBgColorVariants as a } from "./index.es115.js";
-const x = ({ left: t = 0, width: o = 0, index: l = -1 }) => /* @__PURE__ */ e.createElement(
-  "div",
-  {
-    className: s(
-      "absolute h-full rounded",
-      a({ bgColor: l === 0 ? "success" : "stroke" })
-    ),
-    style: {
-      left: `${t}%`,
-      width: `${o}%`
+import * as e from "react";
+import { cn as N } from "./index.es89.js";
+import { X as w, ChevronDown as C, ChevronUp as k, Check as D } from "lucide-react";
+import { Button as P } from "./index.es9.js";
+import { Command as I, CommandInput as B, CommandList as R, CommandEmpty as S, CommandGroup as j, CommandItem as K } from "./index.es60.js";
+import { Popover as M, PopoverTrigger as O, PopoverContent as T } from "./index.es90.js";
+import { Badge as U } from "./index.es8.js";
+import { Typography as m } from "./index.es19.js";
+function X({
+  options: c,
+  selected: a,
+  onChange: s,
+  className: g,
+  popoverContentProps: h,
+  listEmptyComponent: i,
+  placeholder: y,
+  searchPlaceholder: E = "Search",
+  onSearchChange: u,
+  onChangePopoverOpen: f,
+  container: v,
+  ...b
+}) {
+  const [o, l] = e.useState(!1), p = e.useRef(null), d = (t) => {
+    s(a.filter((n) => n !== t));
+  }, x = (t) => {
+    l(t), f && f(t);
+  };
+  return /* @__PURE__ */ e.createElement(M, { open: o, onOpenChange: x, ...b }, /* @__PURE__ */ e.createElement(
+    O,
+    {
+      className: `min-h-[40px] h-fit px-3 py-2
+        ${o ? "border-primary-2 ring-4 ring-primary-1" : "border-neutral-2"}
+        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`,
+      ref: p,
+      asChild: !0
     },
-    key: l
-  }
-), E = ({ width: t = 0, index: o = -1 }) => {
-  if (o === 0) {
-    const l = t >= 50 ? 50 : t, n = l, m = 50 - l;
-    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
-      "div",
-      {
-        className: s(
-          "absolute h-full rounded-l",
-          a({ bgColor: "stroke" })
-        ),
-        style: {
-          left: "0%",
-          width: `${n}%`
-        }
-      }
-    ), /* @__PURE__ */ e.createElement(
-      "div",
-      {
-        className: s(
-          "absolute h-full",
-          a({ bgColor: "danger" })
-        ),
-        style: {
-          left: `${n}%`,
-          width: `${m}%`
-        }
-      }
-    ));
-  } else if (o === 1) {
-    const l = t >= 50 ? 0 : 50 - t, n = l, m = 50 - l;
-    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
-      "div",
-      {
-        className: s(
-          "absolute h-full",
-          a({ bgColor: "success" })
-        ),
-        style: {
-          left: "50%",
-          width: `${n}%`
-        }
-      }
-    ), /* @__PURE__ */ e.createElement(
-      "div",
+    /* @__PURE__ */ e.createElement(
+      P,
       {
-        className: s(
-          "absolute h-full rounded-r",
-          a({ bgColor: "stroke" })
-        ),
-        style: {
-          left: `${50 + n}%`,
-          width: `${m}%`
-        }
-      }
-    ));
-  } else return null;
-}, v = ({ show: t = !1 }) => t ? /* @__PURE__ */ e.createElement(
-  "div",
-  {
-    className: s(
-      "absolute h-full flex justify-center items-center w-1 left-1/2 right-1/2",
-      a({ bgColor: "stroke" })
+        variant: "secondary",
+        role: "combobox",
+        "aria-expanded": o,
+        className: "w-full justify-between focus:ring-0 ",
+        onClick: () => l(!o)
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "flex flex-wrap gap-1" }, a.length > 0 ? a.map((t) => {
+        const n = c.find(
+          (r) => r.value === t
+        );
+        return /* @__PURE__ */ e.createElement(
+          U,
+          {
+            variant: "default",
+            key: t,
+            size: "sm",
+            showBorder: !0
+          },
+          /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1 max-w-[180px] " }, n?.icon, /* @__PURE__ */ e.createElement("span", { className: "truncate" }, n?.label)),
+          /* @__PURE__ */ e.createElement(
+            "button",
+            {
+              className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+              onKeyDown: (r) => {
+                r.key === "Enter" && d(t);
+              },
+              onMouseDown: (r) => {
+                r.preventDefault(), r.stopPropagation();
+              },
+              onClick: (r) => {
+                r.stopPropagation(), d(t);
+              }
+            },
+            /* @__PURE__ */ e.createElement(w, { className: "w-3 h-3 text-muted-foreground hover:text-foreground" })
+          )
+        );
+      }) : /* @__PURE__ */ e.createElement(m, { variant: "body2", className: "text-light-4" }, y ?? "Select options")),
+      o ? /* @__PURE__ */ e.createElement(k, { className: "w-4 h-4 opacity-50 shrink-0" }) : /* @__PURE__ */ e.createElement(C, { className: "w-4 h-4 opacity-50 shrink-0" })
     )
-  },
-  /* @__PURE__ */ e.createElement(
-    "div",
+  ), /* @__PURE__ */ e.createElement(
+    T,
     {
-      className: s(
-        "h-3/4 w-1/2",
-        a({ bgColor: "stroke" })
-      )
-    }
-  )
-) : null, k = ({
-  value: t = 0,
-  min: o = 0,
-  max: l = 100,
-  stepSize: n = 10,
-  onChange: m,
-  id: g
-}) => {
-  const d = e.useRef(null), u = w({
-    getRangerElement: () => d.current,
-    values: [t],
-    min: o,
-    max: l,
-    stepSize: n,
-    onDrag: (r) => {
-      t !== r.sortedValues[0] && m?.(r.sortedValues[0]);
-    }
-  }), f = o < 0;
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      ref: d,
-      className: "relative flex w-full h-2",
       style: {
-        // userSelect: 'none',
-        boxShadow: "inset 0 1px 2px rgba(0,0,0,.6)"
+        width: p.current?.clientWidth
       },
-      id: g
+      className: "w-full p-0 mt-1 bg-light-1",
+      onEscapeKeyDown: () => l(!1),
+      container: v,
+      ...h
     },
-    u.getSteps().map(
-      ({ left: r, width: i }, c) => f ? /* @__PURE__ */ e.createElement(E, { width: i, index: c, key: c }) : /* @__PURE__ */ e.createElement(x, { left: r, width: i, index: c, key: c })
-    ),
-    /* @__PURE__ */ e.createElement(v, { show: f }),
-    u.handles().map(
-      ({
-        value: r,
-        onKeyDownHandler: i,
-        onMouseDownHandler: c,
-        onTouchStart: p,
-        isActive: h
-      }, b) => /* @__PURE__ */ e.createElement(
-        "div",
+    /* @__PURE__ */ e.createElement(
+      I,
+      {
+        className: g,
+        shouldFilter: !u
+      },
+      /* @__PURE__ */ e.createElement(
+        B,
+        {
+          placeholder: E,
+          showIcon: !0,
+          onValueChange: u
+        }
+      ),
+      /* @__PURE__ */ e.createElement(R, { className: "" }, /* @__PURE__ */ e.createElement(S, null, i || /* @__PURE__ */ e.createElement(m, { variant: "body3", className: "text-light-4" }, "No items found")), /* @__PURE__ */ e.createElement(j, { className: "px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar" }, c.map((t) => /* @__PURE__ */ e.createElement(
+        K,
         {
-          key: b,
-          onKeyDown: i,
-          onMouseDown: c,
-          onTouchStart: p,
-          role: "slider",
-          "aria-valuemin": u.options.min,
-          "aria-valuemax": u.options.max,
-          "aria-valuenow": r,
-          className: "flex absolute justify-center items-center cursor-pointer top-1/2 w-[18px] h-[18px] outline-none bg-white",
-          style: {
-            left: `${u.getPercentageForValue(r)}%`,
-            zIndex: h ? "1" : "0",
-            transform: "translate(-50%, -50%)",
-            borderRadius: "100%",
-            //   background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
-            //   border: 'solid 1px #888',
-            boxShadow: "0px 0px 15px 0px #0000000D, 0px 4px 4px 0px #0000000D"
+          key: t.value,
+          className: `mx-1.5 my-1 justify-between rounded-md bg-light-1 p-2 text-light-2 ${a.indexOf(t.value) !== -1 ? "bg-light-2" : ""}`,
+          onSelect: () => {
+            s(
+              a.includes(t.value) ? a.filter((n) => n !== t.value) : [...a, t.value]
+            ), l(!0);
           }
         },
+        /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, t.icon, /* @__PURE__ */ e.createElement(m, { variant: "body2" }, t.label)),
         /* @__PURE__ */ e.createElement(
-          "div",
+          D,
           {
-            className: s(
-              "h-2 w-2 rounded-[50%]",
-              a({
-                bgColor: r >= 0 ? "success" : "danger"
-              })
+            className: N(
+              "h-5 w-5 stroke-brand",
+              a.includes(t.value) ? "opacity-100" : "opacity-0"
             )
           }
         )
-      )
+      ))))
     )
-  );
-};
+  ));
+}
 export {
-  k as PolarSlider
+  X as MultiCombobox
 };
 //# sourceMappingURL=index.es23.js.map

package/dist/index.es23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es23.js","sources":["../src/components/molecules/polar-slider/polar-slider.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\nimport { Ranger, useRanger } from '@tanstack/react-ranger'\nimport React from 'react'\nimport { SliderBgColorVariants } from './polar-slider.styles'\nimport { PolarSliderProps } from './polar-slider.types'\n\nconst SegmentCaseNormal = ({ left = 0, width = 0, index = -1 }) => (\n  <div\n    className={cn(\n      'absolute h-full rounded',\n      SliderBgColorVariants({ bgColor: index === 0 ? 'success' : 'stroke' })\n    )}\n    style={{\n      left: `${left}%`,\n      width: `${width}%`,\n    }}\n    key={index}\n  />\n)\n\nconst SegmentCaseNegative = ({ width = 0, index = -1 }) => {\n  if (index === 0) {\n    const reducedWidth = width >= 50 ? 50 : width\n    const width1 = reducedWidth\n    const width2 = 50 - reducedWidth\n\n    return (\n      <>\n        <div\n          className={cn(\n            'absolute h-full rounded-l',\n            SliderBgColorVariants({ bgColor: 'stroke' })\n          )}\n          style={{\n            left: `${0}%`,\n            width: `${width1}%`,\n          }}\n        />\n        <div\n          className={cn(\n            'absolute h-full',\n            SliderBgColorVariants({ bgColor: 'danger' })\n          )}\n          style={{\n            left: `${width1}%`,\n            width: `${width2}%`,\n          }}\n        />\n      </>\n    )\n  } else if (index === 1) {\n    const reducedWidth = width >= 50 ? 0 : 50 - width\n    const width1 = reducedWidth\n    const width2 = 50 - reducedWidth\n    return (\n      <>\n        <div\n          className={cn(\n            'absolute h-full',\n            SliderBgColorVariants({ bgColor: 'success' })\n          )}\n          style={{\n            left: `${50}%`,\n            width: `${width1}%`,\n          }}\n        />\n        <div\n          className={cn(\n            'absolute h-full rounded-r',\n            SliderBgColorVariants({ bgColor: 'stroke' })\n          )}\n          style={{\n            left: `${50 + width1}%`,\n            width: `${width2}%`,\n          }}\n        />\n      </>\n    )\n  } else return null\n}\n\nconst SegmentZeroDecorate = ({ show = false }) =>\n  show ? (\n    <div\n      className={cn(\n        'absolute h-full flex justify-center items-center w-1 left-1/2 right-1/2',\n        SliderBgColorVariants({ bgColor: 'stroke' })\n      )}\n    >\n      <div\n        className={cn(\n          'h-3/4 w-1/2',\n          SliderBgColorVariants({ bgColor: 'stroke' })\n        )}\n      />\n    </div>\n  ) : null\n\nexport const PolarSlider: React.FC<PolarSliderProps> = ({\n  value = 0,\n  min = 0,\n  max = 100,\n  stepSize = 10,\n  onChange,\n  id,\n}) => {\n  const rangerRef = React.useRef<HTMLDivElement>(null)\n  // const [values, setValues] = useState<ReadonlyArray<number>>([value])\n\n  const rangerInstance = useRanger<HTMLDivElement>({\n    getRangerElement: () => rangerRef.current,\n    values: [value],\n    min,\n    max,\n    stepSize,\n    onDrag: (instance: Ranger<HTMLDivElement>) => {\n      // fn. call being made on every single value drag, hence limited to only first value\n      if (value !== instance.sortedValues[0]) {\n        onChange?.(instance.sortedValues[0])\n      }\n    },\n  })\n\n  /*\n   * The slider has different design for negative range values.\n   */\n  const negativeValueCase = min < 0\n\n  /**\n   * Ranger instance methods and properties:\n   *    rangerInstance.activeHandleIndex\n   */\n\n  return (\n    <div\n      ref={rangerRef}\n      className=\"relative flex w-full h-2\"\n      style={{\n        // userSelect: 'none',\n        boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',\n      }}\n      id={id}\n    >\n      {/* bar */}\n      {rangerInstance\n        .getSteps()\n        .map(({ left, width }, index) =>\n          negativeValueCase ? (\n            <SegmentCaseNegative {...{ width, index }} key={index} />\n          ) : (\n            <SegmentCaseNormal {...{ left, width, index }} key={index} />\n          )\n        )}\n\n      <SegmentZeroDecorate show={negativeValueCase} />\n\n      {/* button */}\n      {rangerInstance\n        .handles()\n        .map(\n          (\n            {\n              value,\n              onKeyDownHandler,\n              onMouseDownHandler,\n              onTouchStart,\n              isActive,\n            },\n            i\n          ) => (\n            <div\n              key={i}\n              onKeyDown={onKeyDownHandler}\n              onMouseDown={onMouseDownHandler}\n              onTouchStart={onTouchStart}\n              role=\"slider\"\n              aria-valuemin={rangerInstance.options.min}\n              aria-valuemax={rangerInstance.options.max}\n              aria-valuenow={value}\n              className=\"flex absolute justify-center items-center cursor-pointer top-1/2 w-[18px] h-[18px] outline-none bg-white\"\n              style={{\n                left: `${rangerInstance.getPercentageForValue(value)}%`,\n                zIndex: isActive ? '1' : '0',\n                transform: 'translate(-50%, -50%)',\n                borderRadius: '100%',\n                //   background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',\n                //   border: 'solid 1px #888',\n                boxShadow:\n                  '0px 0px 15px 0px #0000000D, 0px 4px 4px 0px #0000000D',\n              }}\n            >\n              <div\n                className={cn(\n                  'h-2 w-2 rounded-[50%]',\n                  SliderBgColorVariants({\n                    bgColor: value >= 0 ? 'success' : 'danger',\n                  })\n                )}\n              />\n            </div>\n          )\n        )}\n    </div>\n  )\n}\n"],"names":["SegmentCaseNormal","left","width","index","React","cn","SliderBgColorVariants","SegmentCaseNegative","reducedWidth","width1","width2","SegmentZeroDecorate","show","PolarSlider","value","min","max","stepSize","onChange","id","rangerRef","rangerInstance","useRanger","instance","negativeValueCase","onKeyDownHandler","onMouseDownHandler","onTouchStart","isActive","i"],"mappings":"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"}
+{"version":3,"file":"index.es23.js","sources":["../src/components/molecules/multi-combobox/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nimport { Check, X, ChevronDown, ChevronUp } from 'lucide-react'\nimport { Button } from '@/components/atoms/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/unstyled/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/unstyled/popover/popover-components'\nimport { Badge } from '@/components/atoms/badge'\nimport { Typography } from '../../atoms/typography'\nimport { MultiSelectProps } from './multi-select-combobox.types'\n\nfunction MultiCombobox({\n  options,\n  selected,\n  onChange,\n  className,\n  popoverContentProps,\n  listEmptyComponent,\n  placeholder,\n  searchPlaceholder = 'Search',\n  onSearchChange,\n  onChangePopoverOpen,\n\n  container,\n  ...props\n}: MultiSelectProps) {\n  const [open, setOpen] = React.useState(false)\n  const popoverRef = React.useRef<HTMLButtonElement>(null)\n\n  const handleUnselect = (item: string) => {\n    onChange(selected.filter((i) => i !== item))\n  }\n\n  const handlePopoverOpen = (newOpen: boolean) => {\n    setOpen(newOpen)\n    onChangePopoverOpen && onChangePopoverOpen(newOpen)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={handlePopoverOpen} {...props}>\n      <PopoverTrigger\n        className={`min-h-[40px] h-fit px-3 py-2\n        ${open ? 'border-primary-2 ring-4 ring-primary-1' : 'border-neutral-2'}\n        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`}\n        ref={popoverRef}\n        asChild\n      >\n        <Button\n          variant=\"secondary\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className={`w-full justify-between focus:ring-0 `}\n          onClick={() => setOpen(!open)}\n        >\n          <div className=\"flex flex-wrap gap-1\">\n            {selected.length > 0 ? (\n              selected.map((item) => {\n                const selectedItem = options.find(\n                  (option) => option.value === item\n                )\n                return (\n                  <Badge\n                    variant=\"default\"\n                    key={item}\n                    size={'sm'}\n                    //   className=\"mb-1 mr-1\"\n                    showBorder\n                    // onClick={() => handleUnselect(item)}\n                  >\n                    <div className=\"flex items-center gap-1 max-w-[180px] \">\n                      {selectedItem?.icon}\n                      <span className=\"truncate\">{selectedItem?.label}</span>\n                    </div>\n                    <button\n                      className=\"ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter') {\n                          handleUnselect(item)\n                        }\n                      }}\n                      onMouseDown={(e) => {\n                        e.preventDefault()\n                        e.stopPropagation()\n                      }}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        handleUnselect(item)\n                      }}\n                    >\n                      <X className=\"w-3 h-3 text-muted-foreground hover:text-foreground\" />\n                    </button>\n                  </Badge>\n                )\n              })\n            ) : (\n              <Typography variant=\"body2\" className=\"text-light-4\">\n                {placeholder ?? 'Select options'}\n              </Typography>\n            )}\n          </div>\n          {!open ? (\n            <ChevronDown className=\"w-4 h-4 opacity-50 shrink-0\" />\n          ) : (\n            <ChevronUp className=\"w-4 h-4 opacity-50 shrink-0\" />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        style={{\n          width: popoverRef.current?.clientWidth,\n        }}\n        className=\"w-full p-0 mt-1 bg-light-1\"\n        onEscapeKeyDown={() => setOpen(false)}\n        container={container}\n        {...popoverContentProps}\n      >\n        <Command\n          className={className}\n          shouldFilter={onSearchChange ? false : true}\n        >\n          <CommandInput\n            placeholder={searchPlaceholder}\n            showIcon={true}\n            onValueChange={onSearchChange}\n          />\n\n          <CommandList className=\"\">\n            <CommandEmpty>\n              {listEmptyComponent ? (\n                listEmptyComponent\n              ) : (\n                <Typography variant={'body3'} className=\"text-light-4\">\n                  No items found\n                </Typography>\n              )}\n            </CommandEmpty>\n            <CommandGroup className=\"px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar\">\n              {options.map((option) => (\n                <CommandItem\n                  key={option.value}\n                  className={`mx-1.5 my-1 justify-between rounded-md bg-light-1 p-2 text-light-2 ${selected.indexOf(option.value) !== -1 ? 'bg-light-2' : ''}`}\n                  onSelect={() => {\n                    onChange(\n                      selected.includes(option.value)\n                        ? selected.filter((item) => item !== option.value)\n                        : [...selected, option.value]\n                    )\n                    setOpen(true)\n                  }}\n                >\n                  <div className=\"flex items-center gap-1\">\n                    {option.icon}\n                    <Typography variant={'body2'}>{option.label}</Typography>\n                  </div>\n                  <Check\n                    className={cn(\n                      'h-5 w-5 stroke-brand',\n                      selected.includes(option.value)\n                        ? 'opacity-100'\n                        : 'opacity-0'\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport { MultiCombobox }\n"],"names":["MultiCombobox","options","selected","onChange","className","popoverContentProps","listEmptyComponent","placeholder","searchPlaceholder","onSearchChange","onChangePopoverOpen","container","props","open","setOpen","React","popoverRef","handleUnselect","item","i","handlePopoverOpen","newOpen","Popover","PopoverTrigger","Button","selectedItem","option","Badge","e","X","Typography","ChevronUp","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","cn"],"mappings":"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"}

package/dist/index.es24.js

@@ -1,75 +1,109 @@
-import r from "react";
-import { useRanger as p } from "@tanstack/react-ranger";
-import { cn as f } from "./index.es81.js";
-const b = ({
-  value: e = [0, 100],
-  // Default min & max values
-  min: n = 0,
-  max: o = 100,
-  stepSize: c = 5,
-  onChange: s,
-  id: i
-}) => {
-  const u = r.useRef(null), a = p({
-    getRangerElement: () => u.current,
-    values: e,
-    min: n,
-    max: o,
-    stepSize: c,
-    onChange: (t) => {
-      s?.(t.sortedValues);
-    },
-    onDrag: (t) => {
-      const l = t.sortedValues;
-      (l[0] !== e[0] || l[1] !== e[1]) && s?.(l);
-    }
-  });
-  return /* @__PURE__ */ r.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ r.createElement(
-    "div",
+import * as e from "react";
+import { cn as g } from "./index.es89.js";
+import { X as y, ChevronDown as v, ChevronUp as h, Check as E } from "lucide-react";
+import { Button as b } from "./index.es9.js";
+import { Command as w, CommandList as x, CommandEmpty as N, CommandGroup as C, CommandItem as k } from "./index.es60.js";
+import { Popover as D, PopoverTrigger as P, PopoverContent as S } from "./index.es90.js";
+import { Badge as B } from "./index.es8.js";
+import { Typography as c } from "./index.es19.js";
+function U({
+  options: s,
+  selected: r,
+  onChange: i,
+  className: f,
+  container: p,
+  ...d
+}) {
+  const [l, o] = e.useState(!1), u = e.useRef(null), m = (t) => {
+    i(r.filter((n) => n !== t));
+  };
+  return /* @__PURE__ */ e.createElement(D, { open: l, onOpenChange: o, ...d }, /* @__PURE__ */ e.createElement(
+    P,
     {
+      className: `min-h-[40px] h-fit px-3 py-2
+        ${l ? "border-primary-2 ring-4 ring-primary-1" : "border-neutral-2"}
+        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`,
       ref: u,
-      className: "relative flex w-full h-2 rounded bg-light-4",
-      id: i
+      asChild: !0
+    },
+    /* @__PURE__ */ e.createElement(
+      b,
+      {
+        variant: "secondary",
+        role: "combobox",
+        "aria-expanded": l,
+        className: "w-full justify-between focus:ring-0 ",
+        onClick: () => o(!l)
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "flex flex-wrap gap-1" }, r.length > 0 ? r.map((t) => {
+        const n = s.find(
+          (a) => a.value === t
+        );
+        return /* @__PURE__ */ e.createElement(
+          B,
+          {
+            variant: "default",
+            key: t,
+            size: "sm",
+            showBorder: !0,
+            onClick: () => m(t)
+          },
+          /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, n?.icon, n?.label),
+          /* @__PURE__ */ e.createElement(
+            "button",
+            {
+              className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+              onKeyDown: (a) => {
+                a.key === "Enter" && m(t);
+              },
+              onMouseDown: (a) => {
+                a.preventDefault(), a.stopPropagation();
+              },
+              onClick: (a) => {
+                a.stopPropagation(), m(t);
+              }
+            },
+            /* @__PURE__ */ e.createElement(y, { className: "w-3 h-3 text-muted-foreground hover:text-foreground" })
+          )
+        );
+      }) : /* @__PURE__ */ e.createElement(c, { variant: "body2", className: "text-light-4" }, "Select option")),
+      l ? /* @__PURE__ */ e.createElement(h, { className: "w-4 h-4 opacity-50 shrink-0" }) : /* @__PURE__ */ e.createElement(v, { className: "w-4 h-4 opacity-50 shrink-0" })
+    )
+  ), /* @__PURE__ */ e.createElement(
+    S,
+    {
+      style: {
+        width: u.current?.clientWidth
+      },
+      className: "w-full p-0 bg-light-1",
+      onEscapeKeyDown: () => o(!1),
+      container: p
     },
-    /* @__PURE__ */ r.createElement(
-      "div",
+    /* @__PURE__ */ e.createElement(w, { className: f }, /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement(c, { variant: "body3" }, "No items found")), /* @__PURE__ */ e.createElement(C, { className: "px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar" }, s.map((t) => /* @__PURE__ */ e.createElement("div", { className: "py-0.5 px-1.5 bg-white", key: t.value }, /* @__PURE__ */ e.createElement(
+      k,
       {
-        className: f("absolute h-full rounded bg-rest-p1"),
-        style: {
-          left: `${a.getPercentageForValue(e[0])}%`,
-          width: `${Math.max(
-            0,
-            a.getPercentageForValue(e[1]) - a.getPercentageForValue(e[0])
-          )}%`
+        key: t.value,
+        className: `justify-between p-2 rounded-md text-light-2 ${r.indexOf(t.value) !== -1 ? "bg-light-2" : ""}`,
+        onSelect: () => {
+          i(
+            r.includes(t.value) ? r.filter((n) => n !== t.value) : [...r, t.value]
+          ), o(!0);
         }
-      }
-    ),
-    a.handles().map(
-      ({ value: t, onKeyDownHandler: l, onMouseDownHandler: m, onTouchStart: d }, g) => /* @__PURE__ */ r.createElement(
-        "button",
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, t.icon, /* @__PURE__ */ e.createElement(c, { variant: "body2" }, t.label)),
+      /* @__PURE__ */ e.createElement(
+        E,
         {
-          key: g,
-          onKeyDown: l,
-          onMouseDown: m,
-          onTouchStart: d,
-          role: "slider",
-          "aria-valuemin": n,
-          "aria-valuemax": o,
-          "aria-valuenow": t,
-          className: "flex absolute justify-center items-center cursor-pointer top-1/2 w-[20px] h-[20px] outline-none bg-white",
-          style: {
-            left: `${a.getPercentageForValue(t)}%`,
-            transform: "translate(-50%, -50%)",
-            borderRadius: "100%",
-            boxShadow: "0px 0px 15px 0px #0000000D, 0px 4px 4px 0px #0000000D"
-          }
-        },
-        /* @__PURE__ */ r.createElement("div", { className: "w-2 h-2 rounded-full bg-rest-p1" })
+          className: g(
+            "h-5 w-5 stroke-brand",
+            r.includes(t.value) ? "opacity-100" : "opacity-0"
+          )
+        }
       )
-    )
+    ))))))
   ));
-};
+}
 export {
-  b as RangeSlider
+  U as MultiSelect
 };
 //# sourceMappingURL=index.es24.js.map

package/dist/index.es24.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es24.js","sources":["../src/components/molecules/range-slider/range-slider.tsx"],"sourcesContent":["import React from 'react'\nimport { useRanger, Ranger } from '@tanstack/react-ranger'\nimport { cn } from '@/lib/utils'\nimport { RangeSliderProps } from './range-slider.types'\n\nexport const RangeSlider: React.FC<RangeSliderProps> = ({\n  value = [0, 100], // Default min & max values\n  min = 0,\n  max = 100,\n  stepSize = 5,\n  onChange,\n  id,\n}) => {\n  const rangerRef = React.useRef<HTMLDivElement>(null)\n\n  const rangerInstance = useRanger<HTMLDivElement>({\n    getRangerElement: () => rangerRef.current,\n    values: value,\n    min,\n    max,\n    stepSize,\n    onChange: (instance: Ranger<HTMLDivElement>) => {\n      onChange?.(instance.sortedValues as [number, number])\n    },\n    onDrag: (instance: Ranger<HTMLDivElement>) => {\n      const newValues = instance.sortedValues as [number, number]\n\n      // fn. call being made on every single value drag, hence limited to only first value\n      if (newValues[0] !== value[0] || newValues[1] !== value[1]) {\n        onChange?.(newValues)\n      }\n    },\n  })\n\n  return (\n    <div className=\"relative w-full\">\n      <div\n        ref={rangerRef}\n        className=\"relative flex w-full h-2 rounded bg-light-4\"\n        id={id}\n      >\n        {/* Active Track */}\n        <div\n          className={cn('absolute h-full rounded bg-rest-p1')}\n          style={{\n            left: `${rangerInstance.getPercentageForValue(value[0])}%`,\n            width: `${Math.max(\n              0,\n              rangerInstance.getPercentageForValue(value[1]) -\n                rangerInstance.getPercentageForValue(value[0])\n            )}%`,\n          }}\n        />\n\n        {/* Handles */}\n        {rangerInstance\n          .handles()\n          .map(\n            (\n              { value, onKeyDownHandler, onMouseDownHandler, onTouchStart },\n              i\n            ) => (\n              <button\n                key={i}\n                onKeyDown={onKeyDownHandler}\n                onMouseDown={onMouseDownHandler}\n                onTouchStart={onTouchStart}\n                role=\"slider\"\n                aria-valuemin={min}\n                aria-valuemax={max}\n                aria-valuenow={value}\n                className=\"flex absolute justify-center items-center cursor-pointer top-1/2 w-[20px] h-[20px] outline-none bg-white\"\n                style={{\n                  left: `${rangerInstance.getPercentageForValue(value)}%`,\n                  transform: 'translate(-50%, -50%)',\n                  borderRadius: '100%',\n                  boxShadow:\n                    '0px 0px 15px 0px #0000000D, 0px 4px 4px 0px #0000000D',\n                }}\n              >\n                {/* Inner colored indicator */}\n                <div className=\"w-2 h-2 rounded-full bg-rest-p1\" />\n              </button>\n            )\n          )}\n      </div>\n    </div>\n  )\n}\n"],"names":["RangeSlider","value","min","max","stepSize","onChange","id","rangerRef","React","rangerInstance","useRanger","instance","newValues","cn","onKeyDownHandler","onMouseDownHandler","onTouchStart","i"],"mappings":";;;AAKO,MAAMA,IAA0C,CAAC;AAAA,EACtD,OAAAC,IAAQ,CAAC,GAAG,GAAG;AAAA;AAAA,EACf,KAAAC,IAAM;AAAA,EACN,KAAAC,IAAM;AAAA,EACN,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,IAAAC;AACF,MAAM;AACJ,QAAMC,IAAYC,EAAM,OAAuB,IAAI,GAE7CC,IAAiBC,EAA0B;AAAA,IAC/C,kBAAkB,MAAMH,EAAU;AAAA,IAClC,QAAQN;AAAA,IACR,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAU,CAACO,MAAqC;AAC9C,MAAAN,IAAWM,EAAS,YAAgC;AAAA,IACtD;AAAA,IACA,QAAQ,CAACA,MAAqC;AAC5C,YAAMC,IAAYD,EAAS;AAG3B,OAAIC,EAAU,CAAC,MAAMX,EAAM,CAAC,KAAKW,EAAU,CAAC,MAAMX,EAAM,CAAC,MACvDI,IAAWO,CAAS;AAAA,IAExB;AAAA,EAAA,CACD;AAED,SACEJ,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,kBAAA,GACbA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKD;AAAA,MACL,WAAU;AAAA,MACV,IAAAD;AAAA,IAAA;AAAA,IAGAE,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWK,EAAG,oCAAoC;AAAA,QAClD,OAAO;AAAA,UACL,MAAM,GAAGJ,EAAe,sBAAsBR,EAAM,CAAC,CAAC,CAAC;AAAA,UACvD,OAAO,GAAG,KAAK;AAAA,YACb;AAAA,YACAQ,EAAe,sBAAsBR,EAAM,CAAC,CAAC,IAC3CQ,EAAe,sBAAsBR,EAAM,CAAC,CAAC;AAAA,UAAA,CAChD;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAIDQ,EACE,UACA;AAAA,MACC,CACE,EAAE,OAAAR,GAAO,kBAAAa,GAAkB,oBAAAC,GAAoB,cAAAC,EAAA,GAC/CC,MAEAT,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKS;AAAA,UACL,WAAWH;AAAA,UACX,aAAaC;AAAA,UACb,cAAAC;AAAA,UACA,MAAK;AAAA,UACL,iBAAed;AAAA,UACf,iBAAeC;AAAA,UACf,iBAAeF;AAAAA,UACf,WAAU;AAAA,UACV,OAAO;AAAA,YACL,MAAM,GAAGQ,EAAe,sBAAsBR,CAAK,CAAC;AAAA,YACpD,WAAW;AAAA,YACX,cAAc;AAAA,YACd,WACE;AAAA,UAAA;AAAA,QACJ;AAAA,QAGAO,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,kCAAA,CAAkC;AAAA,MAAA;AAAA,IACnD;AAAA,EAEJ,CAEN;AAEJ;"}
+{"version":3,"file":"index.es24.js","sources":["../src/components/molecules/multi-select/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nimport { Check, X, ChevronDown, ChevronUp } from 'lucide-react'\nimport { Button } from '@/components/atoms/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  // CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/unstyled/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/unstyled/popover/popover-components'\nimport { Badge } from '@/components/atoms/badge'\nimport { Typography } from '../../atoms/typography'\nimport { MultiSelectProps } from './multi-select.types'\n\nfunction MultiSelect({\n  options,\n  selected,\n  onChange,\n  className,\n  container,\n  ...props\n}: MultiSelectProps) {\n  const [open, setOpen] = React.useState(false)\n  const popoverRef = React.useRef<HTMLButtonElement>(null)\n\n  const handleUnselect = (item: string) => {\n    onChange(selected.filter((i) => i !== item))\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen} {...props}>\n      <PopoverTrigger\n        className={`min-h-[40px] h-fit px-3 py-2\n        ${open ? 'border-primary-2 ring-4 ring-primary-1' : 'border-neutral-2'}\n        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`}\n        ref={popoverRef}\n        asChild\n      >\n        <Button\n          variant=\"secondary\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className={`w-full justify-between focus:ring-0 `}\n          onClick={() => setOpen(!open)}\n        >\n          <div className=\"flex flex-wrap gap-1\">\n            {selected.length > 0 ? (\n              selected.map((item) => {\n                const selectedItem = options.find(\n                  (option) => option.value === item\n                )\n                return (\n                  <Badge\n                    variant=\"default\"\n                    key={item}\n                    size={'sm'}\n                    //   className=\"mb-1 mr-1\"\n                    showBorder\n                    onClick={() => handleUnselect(item)}\n                  >\n                    <div className=\"flex items-center gap-1\">\n                      {selectedItem?.icon}\n                      {selectedItem?.label}\n                    </div>\n                    <button\n                      className=\"ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter') {\n                          handleUnselect(item)\n                        }\n                      }}\n                      onMouseDown={(e) => {\n                        e.preventDefault()\n                        e.stopPropagation()\n                      }}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        handleUnselect(item)\n                      }}\n                    >\n                      <X className=\"w-3 h-3 text-muted-foreground hover:text-foreground\" />\n                    </button>\n                  </Badge>\n                )\n              })\n            ) : (\n              <Typography variant=\"body2\" className=\"text-light-4\">\n                Select option\n              </Typography>\n            )}\n          </div>\n          {!open ? (\n            <ChevronDown className=\"w-4 h-4 opacity-50 shrink-0\" />\n          ) : (\n            <ChevronUp className=\"w-4 h-4 opacity-50 shrink-0\" />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        style={{\n          width: popoverRef.current?.clientWidth,\n        }}\n        className=\"w-full p-0 bg-light-1\"\n        onEscapeKeyDown={() => setOpen(false)}\n        container={container}\n      >\n        <Command className={className}>\n          {/* <CommandInput\n            showIcon={false}\n            inputMode={'none'}\n            className={'caret-transparent opacity-0 h-0 w-0 p-0 m-0'}\n            placeholder=\"Search ...\"\n          /> */}\n\n          <CommandList>\n            <CommandEmpty>\n              <Typography variant={'body3'}>No items found</Typography>\n            </CommandEmpty>\n            <CommandGroup className=\"px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar\">\n              {options.map((option) => (\n                <div className=\"py-0.5 px-1.5 bg-white\" key={option.value}>\n                  <CommandItem\n                    key={option.value}\n                    className={`justify-between p-2 rounded-md text-light-2 ${selected.indexOf(option.value) !== -1 ? 'bg-light-2' : ''}`}\n                    onSelect={() => {\n                      onChange(\n                        selected.includes(option.value)\n                          ? selected.filter((item) => item !== option.value)\n                          : [...selected, option.value]\n                      )\n                      setOpen(true)\n                    }}\n                  >\n                    <div className=\"flex items-center gap-1\">\n                      {option.icon}\n                      <Typography variant={'body2'}>{option.label}</Typography>\n                    </div>\n                    <Check\n                      className={cn(\n                        'h-5 w-5 stroke-brand',\n                        selected.includes(option.value)\n                          ? 'opacity-100'\n                          : 'opacity-0'\n                      )}\n                    />\n                  </CommandItem>\n                </div>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport { MultiSelect }\n"],"names":["MultiSelect","options","selected","onChange","className","container","props","open","setOpen","React","popoverRef","handleUnselect","item","i","Popover","PopoverTrigger","Button","selectedItem","option","Badge","e","X","Typography","ChevronUp","ChevronDown","PopoverContent","Command","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","cn"],"mappings":"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"}