geoiq-frontend-ui-kit 2.0.0 → 2.0.2

package/dist/index.es25.js

@@ -1,88 +1,171 @@
-import * as e from "react";
-import { useRef as N } from "react";
-import { ChevronUp as y, ChevronDown as w, Check as k } from "lucide-react";
-import { Command as S, CommandInput as O, CommandEmpty as P, CommandGroup as R, CommandList as j, CommandItem as B } from "./index.es53.js";
-import { Popover as I, PopoverTrigger as T, PopoverContent as V } from "./index.es82.js";
-import { Button as D } from "./index.es7.js";
-import { ComboBoxStates as F } from "./index.es93.js";
-import { Typography as m } from "./index.es17.js";
-import { cn as n } from "./index.es81.js";
-function J({
-  options: o,
-  value: a,
-  placeholder: g = "Empty",
-  searchPlaceholder: f = "Search",
-  emptyMessage: u = "No results",
-  onChange: p,
-  onSearchChange: s,
-  onChangePopoverOpen: c,
-  popoverContentProps: E,
-  listEmptyComponent: i,
-  container: b
-}) {
-  const [l, d] = e.useState(!1), h = N(null), x = (t, C) => {
-    p(t, C), d(!1);
-  }, v = (t) => {
-    d(t), c && c(t);
-  }, r = o.find((t) => t.id === a);
-  return /* @__PURE__ */ e.createElement(I, { open: l, onOpenChange: v }, /* @__PURE__ */ e.createElement(T, { ref: h, asChild: !0 }, /* @__PURE__ */ e.createElement(
-    D,
-    {
-      variant: "secondary",
-      role: "combobox",
-      "aria-expanded": l,
-      className: n(
-        F({ isOpen: l, isValue: !!a }),
-        "w-full justify-between px-3 py-2"
-      )
+import { cn as s } from "./index.es89.js";
+import { useRanger as w } from "@tanstack/react-ranger";
+import e from "react";
+import { SliderBgColorVariants as a } from "./index.es103.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}%`
     },
-    r ? /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2 overflow-hidden" }, r.icon, /* @__PURE__ */ e.createElement(
-      m,
+    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",
       {
-        variant: "body2",
-        className: a ? "text-light-2" : "text-light-4"
-      },
-      r?.name
-    )) : /* @__PURE__ */ e.createElement(m, { variant: "body2", className: "text-light-4" }, g),
-    l ? /* @__PURE__ */ e.createElement(y, { className: "w-4 h-4 ml-2 stroke-light-2" }) : /* @__PURE__ */ e.createElement(w, { className: "w-4 h-4 ml-2 stroke-light-2" })
-  )), /* @__PURE__ */ e.createElement(
-    V,
-    {
-      style: {
-        width: h.current?.clientWidth
-      },
-      className: "p-0 mt-1 rounded-lg bg-light-1",
-      container: b,
-      ...E
-    },
-    /* @__PURE__ */ e.createElement(S, { shouldFilter: !s }, /* @__PURE__ */ e.createElement(
-      O,
+        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",
       {
-        placeholder: f,
-        className: "",
-        onValueChange: s
+        className: s(
+          "absolute h-full",
+          a({ bgColor: "success" })
+        ),
+        style: {
+          left: "50%",
+          width: `${n}%`
+        }
       }
-    ), /* @__PURE__ */ e.createElement(P, null, i || /* @__PURE__ */ e.createElement(m, { variant: "body3", className: "text-light-4" }, u)), /* @__PURE__ */ e.createElement(R, null, /* @__PURE__ */ e.createElement(j, null, o.map((t) => /* @__PURE__ */ e.createElement(
-      B,
+    ), /* @__PURE__ */ e.createElement(
+      "div",
       {
-        key: t.id,
-        value: t.id,
-        disabled: t.disabled,
-        className: n(
-          "justify-between gap-2 text-light-2 hover:bg-light-2 hover:text-light-1 focus:bg-light-2 focus:text-accent-foreground",
-          t.disabled ? "text-light-4" : "text-light-2",
-          a === t.id ? "bg-light-2" : ""
+        className: s(
+          "absolute h-full rounded-r",
+          a({ bgColor: "stroke" })
         ),
-        onSelect: () => {
-          x(t.id, t);
+        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" })
+    )
+  },
+  /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      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)"
       },
-      /* @__PURE__ */ e.createElement("div", { className: "flex flex-row gap-2 " }, t.icon, t.name),
-      a === t.id ? /* @__PURE__ */ e.createElement(k, { className: n("h-4 w-4 stroke-brand") }) : /* @__PURE__ */ e.createElement("div", null)
-    )))))
-  ));
-}
+      id: g
+    },
+    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",
+        {
+          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"
+          }
+        },
+        /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            className: s(
+              "h-2 w-2 rounded-[50%]",
+              a({
+                bgColor: r >= 0 ? "success" : "danger"
+              })
+            )
+          }
+        )
+      )
+    )
+  );
+};
 export {
-  J as SingleCombobox
+  k as PolarSlider
 };
 //# sourceMappingURL=index.es25.js.map

package/dist/index.es25.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es25.js","sources":["../src/components/molecules/single-combobox/single-combobox.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../../unstyled/command'\nimport { Option, SingleComboboxPropsType } from './single-combobox.types'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../unstyled/popover/popover-components'\n\nimport { Button } from '../../atoms/button'\nimport { ComboBoxStates } from './single-combobox.styles'\nimport { Typography } from '../../atoms/typography'\nimport { cn } from '@/lib/utils'\nimport { useRef } from 'react'\n\nexport function SingleCombobox({\n  options,\n  value,\n  placeholder = 'Empty',\n  searchPlaceholder = 'Search',\n  emptyMessage = 'No results',\n  onChange,\n  onSearchChange,\n  onChangePopoverOpen,\n  popoverContentProps,\n  listEmptyComponent,\n  container,\n}: SingleComboboxPropsType) {\n  const [open, setOpen] = React.useState(false)\n  const popoverRef = useRef<HTMLButtonElement>(null)\n\n  const handleChange = (newValue: string, value: Option) => {\n    onChange(newValue, value)\n    setOpen(false)\n  }\n  const handlePopoverOpen = (newOpen: boolean) => {\n    setOpen(newOpen)\n    onChangePopoverOpen && onChangePopoverOpen(newOpen)\n  }\n  const selectedOption = options.find((option) => option.id === value)\n\n  return (\n    <Popover open={open} onOpenChange={handlePopoverOpen}>\n      <PopoverTrigger ref={popoverRef} asChild>\n        <Button\n          variant=\"secondary\"\n          role=\"combobox\"\n          aria-expanded={open}\n          //   className=\"w-[200px] justify-between\"\n          className={cn(\n            ComboBoxStates({ isOpen: open, isValue: !!value }),\n            'w-full justify-between px-3 py-2'\n          )}\n        >\n          {selectedOption ? (\n            <div className=\"flex items-center gap-2 overflow-hidden\">\n              {selectedOption.icon}\n              <Typography\n                variant={'body2'}\n                className={value ? 'text-light-2' : 'text-light-4'}\n              >\n                {selectedOption?.name}\n              </Typography>\n            </div>\n          ) : (\n            <Typography variant={'body2'} className=\"text-light-4\">\n              {placeholder}\n            </Typography>\n          )}\n          {open ? (\n            <ChevronUp className=\"w-4 h-4 ml-2 stroke-light-2\" />\n          ) : (\n            <ChevronDown className=\"w-4 h-4 ml-2 stroke-light-2\" />\n          )}\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent\n        style={{\n          width: popoverRef.current?.clientWidth,\n        }}\n        className=\"p-0 mt-1 rounded-lg bg-light-1\"\n        container={container}\n        {...popoverContentProps}\n      >\n        <Command shouldFilter={onSearchChange ? false : true}>\n          <CommandInput\n            placeholder={searchPlaceholder}\n            className=\"\"\n            onValueChange={onSearchChange}\n          />\n          <CommandEmpty>\n            {listEmptyComponent ? (\n              listEmptyComponent\n            ) : (\n              <Typography variant={'body3'} className=\"text-light-4\">\n                {emptyMessage}\n              </Typography>\n            )}\n          </CommandEmpty>\n          <CommandGroup>\n            <CommandList>\n              {options.map((option) => {\n                return (\n                  <CommandItem\n                    key={option.id}\n                    value={option.id}\n                    disabled={option.disabled}\n                    className={cn(\n                      'justify-between gap-2 text-light-2 hover:bg-light-2 hover:text-light-1 focus:bg-light-2 focus:text-accent-foreground',\n                      option.disabled ? 'text-light-4' : 'text-light-2',\n                      value === option.id ? 'bg-light-2' : ''\n                    )}\n                    onSelect={() => {\n                      handleChange(option.id, option)\n                    }}\n                  >\n                    <div className=\"flex flex-row gap-2 \">\n                      {option.icon}\n                      {option.name}\n                    </div>\n                    {value === option.id ? (\n                      <Check className={cn('h-4 w-4 stroke-brand')} />\n                    ) : (\n                      <div />\n                    )}\n                  </CommandItem>\n                )\n              })}\n            </CommandList>\n          </CommandGroup>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"names":["SingleCombobox","options","value","placeholder","searchPlaceholder","emptyMessage","onChange","onSearchChange","onChangePopoverOpen","popoverContentProps","listEmptyComponent","container","open","setOpen","React","popoverRef","useRef","handleChange","newValue","handlePopoverOpen","newOpen","selectedOption","option","Popover","PopoverTrigger","Button","cn","ComboBoxStates","Typography","ChevronUp","ChevronDown","PopoverContent","Command","CommandInput","CommandEmpty","CommandGroup","CommandList","CommandItem","Check"],"mappings":"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"}
+{"version":3,"file":"index.es25.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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"}

package/dist/index.es26.js

@@ -1,57 +1,75 @@
-import e from "react";
-import * as f from "@radix-ui/react-select";
-import { SelectTrigger as g, SelectValue as d, SelectContent as S, SelectGroup as E, SelectItem as u } from "./index.es83.js";
-import { Typography as n } from "./index.es17.js";
-import { SelectStates as b } from "./index.es84.js";
-import { cn as N } from "./index.es81.js";
-const O = e.forwardRef(
-  ({
-    // className,
-    // children,
-    placeholder: m,
-    onValueChange: s,
-    items: l,
-    value: a,
-    // defaultValue,
-    ...r
-  }) => {
-    const c = l.find((t) => t.value === a), [o, i] = e.useState(!1);
-    return /* @__PURE__ */ e.createElement(
-      f.Root,
+import r from "react";
+import { useRanger as p } from "@tanstack/react-ranger";
+import { cn as f } from "./index.es89.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",
+    {
+      ref: u,
+      className: "relative flex w-full h-2 rounded bg-light-4",
+      id: i
+    },
+    /* @__PURE__ */ r.createElement(
+      "div",
       {
-        onValueChange: s,
-        value: a,
-        onOpenChange: i,
-        ...r
-      },
-      /* @__PURE__ */ e.createElement(
-        g,
+        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])
+          )}%`
+        }
+      }
+    ),
+    a.handles().map(
+      ({ value: t, onKeyDownHandler: l, onMouseDownHandler: m, onTouchStart: d }, g) => /* @__PURE__ */ r.createElement(
+        "button",
         {
-          className: N(b({ isOpen: o, isValue: !!a })),
-          ...r.triggerProps
+          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__ */ e.createElement(d, { placeholder: m }, /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2" }, c?.icon, /* @__PURE__ */ e.createElement(
-          n,
-          {
-            variant: "body2",
-            className: a ? "text-light-2" : "text-light-4"
-          },
-          c?.label
-        )))
-      ),
-      /* @__PURE__ */ e.createElement(S, { className: "bg-light-1" }, /* @__PURE__ */ e.createElement(E, null, l.map((t, p) => /* @__PURE__ */ e.createElement(
-        u,
-        {
-          value: t.value,
-          disabled: t.disabled ?? !1,
-          key: p
-        },
-        /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2" }, t.icon, /* @__PURE__ */ e.createElement(n, { variant: "body2", className: "capitalize" }, t.label))
-      ))))
-    );
-  }
-);
+        /* @__PURE__ */ r.createElement("div", { className: "w-2 h-2 rounded-full bg-rest-p1" })
+      )
+    )
+  ));
+};
 export {
-  O as SingleSelect
+  b as RangeSlider
 };
 //# sourceMappingURL=index.es26.js.map

package/dist/index.es26.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es26.js","sources":["../src/components/molecules/single-select/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { SelectProps } from './single-select.types'\nimport {\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from './single-select-components'\nimport { Typography } from '../../atoms/typography'\nimport { SelectStates } from './single-select-styles'\nimport { cn } from '@/lib/utils'\n\nconst SingleSelect = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Root>,\n  SelectProps\n>(\n  ({\n    // className,\n    // children,\n    placeholder,\n    onValueChange,\n    items,\n    value,\n\n    // defaultValue,\n    ...props\n  }) => {\n    const selectedItem = items.find((item) => {\n      return item.value === value\n    })\n    const [isOpen, setIsOpen] = React.useState(false)\n    return (\n      <SelectPrimitive.Root\n        onValueChange={onValueChange}\n        value={value}\n        onOpenChange={setIsOpen}\n        {...props}\n      >\n        <SelectTrigger\n          className={cn(SelectStates({ isOpen, isValue: !!value }))}\n          {...props.triggerProps}\n        >\n          <SelectValue placeholder={placeholder}>\n            <div className=\"flex items-center gap-2\">\n              {selectedItem?.icon}\n              <Typography\n                variant={'body2'}\n                className={value ? 'text-light-2' : 'text-light-4'}\n              >\n                {selectedItem?.label}\n              </Typography>\n            </div>\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent className=\"bg-light-1\">\n          <SelectGroup>\n            {items.map((item, index) => {\n              return (\n                <SelectItem\n                  value={item.value}\n                  disabled={item.disabled ?? false}\n                  key={index}\n                >\n                  <div className=\"flex items-center gap-2\">\n                    {item.icon}\n                    <Typography variant={'body2'} className=\"capitalize\">\n                      {item.label}\n                    </Typography>\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectGroup>\n        </SelectContent>\n      </SelectPrimitive.Root>\n    )\n  }\n)\n\nexport { SingleSelect }\n"],"names":["SingleSelect","React","placeholder","onValueChange","items","value","props","selectedItem","item","isOpen","setIsOpen","SelectPrimitive","SelectTrigger","cn","SelectStates","SelectValue","Typography","SelectContent","SelectGroup","index","SelectItem"],"mappings":";;;;;;AAcA,MAAMA,IAAeC,EAAM;AAAA,EAIzB,CAAC;AAAA;AAAA;AAAA,IAGC,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA;AAAA,IAGA,GAAGC;AAAA,EAAA,MACC;AACJ,UAAMC,IAAeH,EAAM,KAAK,CAACI,MACxBA,EAAK,UAAUH,CACvB,GACK,CAACI,GAAQC,CAAS,IAAIT,EAAM,SAAS,EAAK;AAChD,WACEA,gBAAAA,EAAA;AAAA,MAACU,EAAgB;AAAA,MAAhB;AAAA,QACC,eAAAR;AAAA,QACA,OAAAE;AAAA,QACA,cAAcK;AAAA,QACb,GAAGJ;AAAA,MAAA;AAAA,MAEJL,gBAAAA,EAAA;AAAA,QAACW;AAAA,QAAA;AAAA,UACC,WAAWC,EAAGC,EAAa,EAAE,QAAAL,GAAQ,SAAS,CAAC,CAACJ,EAAA,CAAO,CAAC;AAAA,UACvD,GAAGC,EAAM;AAAA,QAAA;AAAA,QAEVL,gBAAAA,EAAA,cAACc,KAAY,aAAAb,EAAA,GACXD,gBAAAA,EAAA,cAAC,SAAI,WAAU,0BAAA,GACZM,GAAc,MACfN,gBAAAA,EAAA;AAAA,UAACe;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAWX,IAAQ,iBAAiB;AAAA,UAAA;AAAA,UAEnCE,GAAc;AAAA,QAAA,CAEnB,CACF;AAAA,MAAA;AAAA,MAEFN,gBAAAA,EAAA,cAACgB,GAAA,EAAc,WAAU,aAAA,GACvBhB,gBAAAA,EAAA,cAACiB,SACEd,EAAM,IAAI,CAACI,GAAMW,MAEdlB,gBAAAA,EAAA;AAAA,QAACmB;AAAA,QAAA;AAAA,UACC,OAAOZ,EAAK;AAAA,UACZ,UAAUA,EAAK,YAAY;AAAA,UAC3B,KAAKW;AAAA,QAAA;AAAA,QAELlB,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,0BAAA,GACZO,EAAK,MACNP,gBAAAA,EAAA,cAACe,GAAA,EAAW,SAAS,SAAS,WAAU,aAAA,GACrCR,EAAK,KACR,CACF;AAAA,MAAA,CAGL,CACH,CACF;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"index.es26.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;"}

package/dist/index.es27.js

@@ -1,23 +1,88 @@
-import * as o from "@radix-ui/react-slider";
 import * as e from "react";
-import { cn as t } from "./index.es81.js";
-import { SliderVariants as s } from "./index.es104.js";
-const n = e.forwardRef(({ className: r, id: l, ...a }, i) => (
-  // <div className='bg-light-3 h-[100px] w-full flex'>
-  /* @__PURE__ */ e.createElement(
-    o.Root,
+import { useRef as N } from "react";
+import { ChevronUp as y, ChevronDown as w, Check as k } from "lucide-react";
+import { Command as S, CommandInput as O, CommandEmpty as P, CommandGroup as R, CommandList as j, CommandItem as B } from "./index.es60.js";
+import { Popover as I, PopoverTrigger as T, PopoverContent as V } from "./index.es90.js";
+import { Button as D } from "./index.es9.js";
+import { ComboBoxStates as F } from "./index.es120.js";
+import { Typography as m } from "./index.es19.js";
+import { cn as n } from "./index.es89.js";
+function J({
+  options: o,
+  value: a,
+  placeholder: g = "Empty",
+  searchPlaceholder: f = "Search",
+  emptyMessage: u = "No results",
+  onChange: p,
+  onSearchChange: s,
+  onChangePopoverOpen: c,
+  popoverContentProps: E,
+  listEmptyComponent: i,
+  container: b
+}) {
+  const [l, d] = e.useState(!1), h = N(null), x = (t, C) => {
+    p(t, C), d(!1);
+  }, v = (t) => {
+    d(t), c && c(t);
+  }, r = o.find((t) => t.id === a);
+  return /* @__PURE__ */ e.createElement(I, { open: l, onOpenChange: v }, /* @__PURE__ */ e.createElement(T, { ref: h, asChild: !0 }, /* @__PURE__ */ e.createElement(
+    D,
     {
-      ref: i,
-      className: t(s({ className: r })),
-      id: l,
-      ...a
+      variant: "secondary",
+      role: "combobox",
+      "aria-expanded": l,
+      className: n(
+        F({ isOpen: l, isValue: !!a }),
+        "w-full justify-between px-3 py-2"
+      )
     },
-    /* @__PURE__ */ e.createElement(o.Track, { className: "relative w-full h-2 overflow-hidden rounded-full grow bg-light-4" }, /* @__PURE__ */ e.createElement(o.Range, { className: "absolute h-full bg-click-p1" })),
-    /* @__PURE__ */ e.createElement(o.Thumb, { className: "block h-5 w-5 bg-rest-p1 hover:bg-hover-p1 active:bg-click-p1  rounded-full border-[6px] border-neutral-0 hover:w-6 hover:h-6  shadow-lg bg-click-p1 outline-none transition-all focus-visible:outline-none  disabled:pointer-events-none disabled:opacity-50 focus-visible:cursor-pointer " })
-  )
-));
-n.displayName = o.Root.displayName;
+    r ? /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2 overflow-hidden" }, r.icon, /* @__PURE__ */ e.createElement(
+      m,
+      {
+        variant: "body2",
+        className: a ? "text-light-2" : "text-light-4"
+      },
+      r?.name
+    )) : /* @__PURE__ */ e.createElement(m, { variant: "body2", className: "text-light-4" }, g),
+    l ? /* @__PURE__ */ e.createElement(y, { className: "w-4 h-4 ml-2 stroke-light-2" }) : /* @__PURE__ */ e.createElement(w, { className: "w-4 h-4 ml-2 stroke-light-2" })
+  )), /* @__PURE__ */ e.createElement(
+    V,
+    {
+      style: {
+        width: h.current?.clientWidth
+      },
+      className: "p-0 mt-1 rounded-lg bg-light-1",
+      container: b,
+      ...E
+    },
+    /* @__PURE__ */ e.createElement(S, { shouldFilter: !s }, /* @__PURE__ */ e.createElement(
+      O,
+      {
+        placeholder: f,
+        className: "",
+        onValueChange: s
+      }
+    ), /* @__PURE__ */ e.createElement(P, null, i || /* @__PURE__ */ e.createElement(m, { variant: "body3", className: "text-light-4" }, u)), /* @__PURE__ */ e.createElement(R, null, /* @__PURE__ */ e.createElement(j, null, o.map((t) => /* @__PURE__ */ e.createElement(
+      B,
+      {
+        key: t.id,
+        value: t.id,
+        disabled: t.disabled,
+        className: n(
+          "justify-between gap-2 text-light-2 hover:bg-light-2 hover:text-light-1 focus:bg-light-2 focus:text-accent-foreground",
+          t.disabled ? "text-light-4" : "text-light-2",
+          a === t.id ? "bg-light-2" : ""
+        ),
+        onSelect: () => {
+          x(t.id, t);
+        }
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "flex flex-row gap-2 " }, t.icon, t.name),
+      a === t.id ? /* @__PURE__ */ e.createElement(k, { className: n("h-4 w-4 stroke-brand") }) : /* @__PURE__ */ e.createElement("div", null)
+    )))))
+  ));
+}
 export {
-  n as Slider
+  J as SingleCombobox
 };
 //# sourceMappingURL=index.es27.js.map

package/dist/index.es27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es27.js","sources":["../src/components/molecules/slider/slider.tsx"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { SliderVariants } from './slider.styles'\n\nexport const Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, id, ...props }, ref) => (\n  // <div className='bg-light-3 h-[100px] w-full flex'>\n\n  <SliderPrimitive.Root\n    ref={ref}\n    className={cn(SliderVariants({ className }))}\n    id={id}\n    {...props}\n  >\n    <SliderPrimitive.Track className=\"relative w-full h-2 overflow-hidden rounded-full grow bg-light-4\">\n      <SliderPrimitive.Range className=\"absolute h-full bg-click-p1\" />\n    </SliderPrimitive.Track>\n\n    <SliderPrimitive.Thumb className=\"block h-5 w-5 bg-rest-p1 hover:bg-hover-p1 active:bg-click-p1  rounded-full border-[6px] border-neutral-0 hover:w-6 hover:h-6  shadow-lg bg-click-p1 outline-none transition-all focus-visible:outline-none  disabled:pointer-events-none disabled:opacity-50 focus-visible:cursor-pointer \" />\n  </SliderPrimitive.Root>\n  // </div>\n))\n\nSlider.displayName = SliderPrimitive.Root.displayName\n"],"names":["Slider","React","className","id","props","ref","SliderPrimitive","cn","SliderVariants"],"mappings":";;;;AAMO,MAAMA,IAASC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC;AAAA;AAAA,EAG9B,gBAAAJ,EAAA;AAAA,IAACK,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAGC,EAAe,EAAE,WAAAN,EAAA,CAAW,CAAC;AAAA,MAC3C,IAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,IAEJ,gBAAAH,EAAA,cAACK,EAAgB,OAAhB,EAAsB,WAAU,mEAAA,GAC/B,gBAAAL,EAAA,cAACK,EAAgB,OAAhB,EAAsB,WAAU,8BAAA,CAA8B,CACjE;AAAA,IAEA,gBAAAL,EAAA,cAACK,EAAgB,OAAhB,EAAsB,WAAU,8RAAA,CAA8R;AAAA,EAAA;AAAA,CAGlU;AAEDN,EAAO,cAAcM,EAAgB,KAAK;"}
+{"version":3,"file":"index.es27.js","sources":["../src/components/molecules/single-combobox/single-combobox.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../../unstyled/command'\nimport { Option, SingleComboboxPropsType } from './single-combobox.types'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../../unstyled/popover/popover-components'\n\nimport { Button } from '../../atoms/button'\nimport { ComboBoxStates } from './single-combobox.styles'\nimport { Typography } from '../../atoms/typography'\nimport { cn } from '@/lib/utils'\nimport { useRef } from 'react'\n\nexport function SingleCombobox({\n  options,\n  value,\n  placeholder = 'Empty',\n  searchPlaceholder = 'Search',\n  emptyMessage = 'No results',\n  onChange,\n  onSearchChange,\n  onChangePopoverOpen,\n  popoverContentProps,\n  listEmptyComponent,\n  container,\n}: SingleComboboxPropsType) {\n  const [open, setOpen] = React.useState(false)\n  const popoverRef = useRef<HTMLButtonElement>(null)\n\n  const handleChange = (newValue: string, value: Option) => {\n    onChange(newValue, value)\n    setOpen(false)\n  }\n  const handlePopoverOpen = (newOpen: boolean) => {\n    setOpen(newOpen)\n    onChangePopoverOpen && onChangePopoverOpen(newOpen)\n  }\n  const selectedOption = options.find((option) => option.id === value)\n\n  return (\n    <Popover open={open} onOpenChange={handlePopoverOpen}>\n      <PopoverTrigger ref={popoverRef} asChild>\n        <Button\n          variant=\"secondary\"\n          role=\"combobox\"\n          aria-expanded={open}\n          //   className=\"w-[200px] justify-between\"\n          className={cn(\n            ComboBoxStates({ isOpen: open, isValue: !!value }),\n            'w-full justify-between px-3 py-2'\n          )}\n        >\n          {selectedOption ? (\n            <div className=\"flex items-center gap-2 overflow-hidden\">\n              {selectedOption.icon}\n              <Typography\n                variant={'body2'}\n                className={value ? 'text-light-2' : 'text-light-4'}\n              >\n                {selectedOption?.name}\n              </Typography>\n            </div>\n          ) : (\n            <Typography variant={'body2'} className=\"text-light-4\">\n              {placeholder}\n            </Typography>\n          )}\n          {open ? (\n            <ChevronUp className=\"w-4 h-4 ml-2 stroke-light-2\" />\n          ) : (\n            <ChevronDown className=\"w-4 h-4 ml-2 stroke-light-2\" />\n          )}\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent\n        style={{\n          width: popoverRef.current?.clientWidth,\n        }}\n        className=\"p-0 mt-1 rounded-lg bg-light-1\"\n        container={container}\n        {...popoverContentProps}\n      >\n        <Command shouldFilter={onSearchChange ? false : true}>\n          <CommandInput\n            placeholder={searchPlaceholder}\n            className=\"\"\n            onValueChange={onSearchChange}\n          />\n          <CommandEmpty>\n            {listEmptyComponent ? (\n              listEmptyComponent\n            ) : (\n              <Typography variant={'body3'} className=\"text-light-4\">\n                {emptyMessage}\n              </Typography>\n            )}\n          </CommandEmpty>\n          <CommandGroup>\n            <CommandList>\n              {options.map((option) => {\n                return (\n                  <CommandItem\n                    key={option.id}\n                    value={option.id}\n                    disabled={option.disabled}\n                    className={cn(\n                      'justify-between gap-2 text-light-2 hover:bg-light-2 hover:text-light-1 focus:bg-light-2 focus:text-accent-foreground',\n                      option.disabled ? 'text-light-4' : 'text-light-2',\n                      value === option.id ? 'bg-light-2' : ''\n                    )}\n                    onSelect={() => {\n                      handleChange(option.id, option)\n                    }}\n                  >\n                    <div className=\"flex flex-row gap-2 \">\n                      {option.icon}\n                      {option.name}\n                    </div>\n                    {value === option.id ? (\n                      <Check className={cn('h-4 w-4 stroke-brand')} />\n                    ) : (\n                      <div />\n                    )}\n                  </CommandItem>\n                )\n              })}\n            </CommandList>\n          </CommandGroup>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"names":["SingleCombobox","options","value","placeholder","searchPlaceholder","emptyMessage","onChange","onSearchChange","onChangePopoverOpen","popoverContentProps","listEmptyComponent","container","open","setOpen","React","popoverRef","useRef","handleChange","newValue","handlePopoverOpen","newOpen","selectedOption","option","Popover","PopoverTrigger","Button","cn","ComboBoxStates","Typography","ChevronUp","ChevronDown","PopoverContent","Command","CommandInput","CommandEmpty","CommandGroup","CommandList","CommandItem","Check"],"mappings":"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"}