@trsys-tech/matrix-library 0.5.1-alpha.0 → 0.5.1-beta.1

package/dist/mobiledaterangepicker.es.js

@@ -13,8 +13,8 @@ const K = ({
   placeholder: d,
   className: h,
   calendarClassName: g,
-  onDayClick: y,
-  cancelText: x,
+  onDayClick: x,
+  cancelText: y,
   applyText: u,
   onSelect: b,
   fromText: M,
@@ -23,7 +23,7 @@ const K = ({
   ...D
 }) => {
   const [w, s] = f.useState(!1), [e, i] = f.useState(r), C = (a, k, j) => {
-    y?.(a, k, j), !e || !e.from ? i({ from: a, to: void 0 }) : a < e.from ? e.to ? i({ from: a, to: e.to }) : i({ from: a, to: e.from }) : e?.from?.getTime() === a?.getTime() && (e?.from?.getTime() === e?.to?.getTime() || !e.to) ? i(void 0) : e?.from?.getTime() !== e?.to?.getTime() && (e.from?.getTime() === a?.getTime() || e?.to?.getTime() === a?.getTime()) ? i({ from: a, to: a }) : i({ ...e, to: a });
+    x?.(a, k, j), !e || !e.from ? i({ from: a, to: void 0 }) : a < e.from ? e.to ? i({ from: a, to: e.to }) : i({ from: a, to: e.from }) : e?.from?.getTime() === a?.getTime() && (e?.from?.getTime() === e?.to?.getTime() || !e.to) ? i(void 0) : e?.from?.getTime() !== e?.to?.getTime() && (e.from?.getTime() === a?.getTime() || e?.to?.getTime() === a?.getTime()) ? i({ from: a, to: a }) : i({ ...e, to: a });
   }, c = () => {
     s(!1), i(r);
   }, T = () => {
@@ -35,7 +35,7 @@ const K = ({
       {
         variant: "text",
         className: p(
-          "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
+          "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
           h
         ),
         "data-placeholder": r ? void 0 : "",
@@ -89,7 +89,7 @@ const K = ({
           }
         ),
         /* @__PURE__ */ t("div", { className: "flex justify-center items-center gap-4 mt-auto w-full", children: [
-          /* @__PURE__ */ o(m, { variant: "text", className: "flex-1 h-10", onClick: c, children: x ?? "Cancel" }),
+          /* @__PURE__ */ o(m, { variant: "text", className: "flex-1 h-10", onClick: c, children: y ?? "Cancel" }),
           /* @__PURE__ */ o(m, { variant: "primary", className: "flex-1 h-10", onClick: T, children: u ?? "Apply" })
         ] })
       ] })

package/dist/mobiledaterangepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobiledaterangepicker.es.js","sources":["../src/components/date-picker/MobileDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsRange, DateRange, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDateRangePickerProps = PropsBase &\r\n  Omit<PropsRange, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    cancelText?: string;\r\n    applyText?: string;\r\n    onSelect?: (date: DateRange | undefined) => void;\r\n    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst MobileDateRangePicker: React.FC<MobileDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  onDayClick,\r\n  cancelText,\r\n  applyText,\r\n  onSelect,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const [range, setRange] = React.useState<DateRange | undefined>(selected);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (!range || !range.from) {\r\n      setRange({ from: date, to: undefined });\r\n    } else if (date < range.from) {\r\n      if (!range.to) {\r\n        setRange({ from: date, to: range.from });\r\n      } else {\r\n        setRange({ from: date, to: range.to });\r\n      }\r\n    } else if (range?.from?.getTime() === date?.getTime() && (range?.from?.getTime() === range?.to?.getTime() || !range.to)) {\r\n      setRange(undefined);\r\n    } else if (\r\n      range?.from?.getTime() !== range?.to?.getTime() &&\r\n      (range.from?.getTime() === date?.getTime() || range?.to?.getTime() === date?.getTime())\r\n    ) {\r\n      setRange({ from: date, to: date });\r\n    } else {\r\n      setRange({ ...range, to: date });\r\n    }\r\n  };\r\n\r\n  const handleCancel = () => {\r\n    setIsOpen(false);\r\n    setRange(selected);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(range);\r\n    setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!selected ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={\r\n          selected\r\n            ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n            : placeholder\r\n        }\r\n        disabled={disabled}\r\n      >\r\n        {selected ? (\r\n          <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n            <span>\r\n              {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>{\" \"}\r\n            <span>\r\n              {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>\r\n          </div>\r\n        ) : (\r\n          <span>{placeholder ?? \"Pick a Range\"}</span>\r\n        )}\r\n        <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n          <DialogHeader>\r\n            <DialogTitle asChild>\r\n              <div className=\"grid grid-cols-2 border-b border-b-gray-200 mt-3\">\r\n                <div className=\"text-sm font-bold space-y-1 border-e border-e-gray-200 p-4\">\r\n                  <h5 className=\"text-text-300 font-medium text-xs\">From</h5>\r\n                  <h6 className=\"\">{range?.from ? format(range.from, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n                </div>\r\n                <div className=\"text-sm font-bold space-y-1 p-4 flex flex-col justify-center\">\r\n                  <h5 className=\"text-text-300 font-medium text-xs\">To</h5>\r\n                  <h6 className=\"\">{range?.to ? format(range.to, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n                </div>\r\n              </div>\r\n            </DialogTitle>\r\n            <VisuallyHidden>\r\n              <DialogDescription>{\"Date Picker\"}</DialogDescription>\r\n            </VisuallyHidden>\r\n          </DialogHeader>\r\n          <div className=\"flex-1 flex flex-col items-center p-4\">\r\n            <Calendar\r\n              defaultMonth={selected?.from}\r\n              startMonth={new Date(2000, 0, 1)}\r\n              endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n              {...props}\r\n              mode=\"range\"\r\n              selected={selected}\r\n              onDayClick={handleDayClick}\r\n              className={cn(\"p-0\", calendarClassName)}\r\n            />\r\n\r\n            <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n              <Button variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\r\n                {applyText ?? \"Apply\"}\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    </>\r\n  );\r\n};\r\n\r\nexport { MobileDateRangePicker, type MobileDateRangePickerProps };\r\n"],"names":["MobileDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","onDayClick","cancelText","applyText","onSelect","fromText","toText","disabled","props","isOpen","setIsOpen","React","range","setRange","handleDayClick","date","modifiers","e","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}
+{"version":3,"file":"mobiledaterangepicker.es.js","sources":["../src/components/date-picker/MobileDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsRange, DateRange, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDateRangePickerProps = PropsBase &\r\n  Omit<PropsRange, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    cancelText?: string;\r\n    applyText?: string;\r\n    onSelect?: (date: DateRange | undefined) => void;\r\n    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst MobileDateRangePicker: React.FC<MobileDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  onDayClick,\r\n  cancelText,\r\n  applyText,\r\n  onSelect,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const [range, setRange] = React.useState<DateRange | undefined>(selected);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (!range || !range.from) {\r\n      setRange({ from: date, to: undefined });\r\n    } else if (date < range.from) {\r\n      if (!range.to) {\r\n        setRange({ from: date, to: range.from });\r\n      } else {\r\n        setRange({ from: date, to: range.to });\r\n      }\r\n    } else if (range?.from?.getTime() === date?.getTime() && (range?.from?.getTime() === range?.to?.getTime() || !range.to)) {\r\n      setRange(undefined);\r\n    } else if (\r\n      range?.from?.getTime() !== range?.to?.getTime() &&\r\n      (range.from?.getTime() === date?.getTime() || range?.to?.getTime() === date?.getTime())\r\n    ) {\r\n      setRange({ from: date, to: date });\r\n    } else {\r\n      setRange({ ...range, to: date });\r\n    }\r\n  };\r\n\r\n  const handleCancel = () => {\r\n    setIsOpen(false);\r\n    setRange(selected);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(range);\r\n    setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!selected ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={\r\n          selected\r\n            ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n            : placeholder\r\n        }\r\n        disabled={disabled}\r\n      >\r\n        {selected ? (\r\n          <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n            <span>\r\n              {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>{\" \"}\r\n            <span>\r\n              {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n            </span>\r\n          </div>\r\n        ) : (\r\n          <span>{placeholder ?? \"Pick a Range\"}</span>\r\n        )}\r\n        <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n          <DialogHeader>\r\n            <DialogTitle asChild>\r\n              <div className=\"grid grid-cols-2 border-b border-b-gray-200 mt-3\">\r\n                <div className=\"text-sm font-bold space-y-1 border-e border-e-gray-200 p-4\">\r\n                  <h5 className=\"text-text-300 font-medium text-xs\">From</h5>\r\n                  <h6 className=\"\">{range?.from ? format(range.from, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n                </div>\r\n                <div className=\"text-sm font-bold space-y-1 p-4 flex flex-col justify-center\">\r\n                  <h5 className=\"text-text-300 font-medium text-xs\">To</h5>\r\n                  <h6 className=\"\">{range?.to ? format(range.to, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n                </div>\r\n              </div>\r\n            </DialogTitle>\r\n            <VisuallyHidden>\r\n              <DialogDescription>{\"Date Picker\"}</DialogDescription>\r\n            </VisuallyHidden>\r\n          </DialogHeader>\r\n          <div className=\"flex-1 flex flex-col items-center p-4\">\r\n            <Calendar\r\n              defaultMonth={selected?.from}\r\n              startMonth={new Date(2000, 0, 1)}\r\n              endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n              {...props}\r\n              mode=\"range\"\r\n              selected={selected}\r\n              onDayClick={handleDayClick}\r\n              className={cn(\"p-0\", calendarClassName)}\r\n            />\r\n\r\n            <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n              <Button variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\r\n                {applyText ?? \"Apply\"}\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    </>\r\n  );\r\n};\r\n\r\nexport { MobileDateRangePicker, type MobileDateRangePickerProps };\r\n"],"names":["MobileDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","onDayClick","cancelText","applyText","onSelect","fromText","toText","disabled","props","isOpen","setIsOpen","React","range","setRange","handleDayClick","date","modifiers","e","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}

package/dist/mobiletimepicker.es.js

@@ -20,7 +20,7 @@ const j = ({
       {
         variant: "text",
         className: m(
-          "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
+          "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
           n
         ),
         "data-placeholder": e ? void 0 : "",

package/dist/mobiletimepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobiletimepicker.es.js","sources":["../src/components/date-picker/MobileTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport {\r\n  SwipableDrawer,\r\n  SwipableDrawerContent,\r\n  SwipableDrawerDescription,\r\n  SwipableDrawerHeader,\r\n  SwipableDrawerTitle,\r\n} from \"../drawer/SwipableDrawer\";\r\n\r\ntype MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst MobileTimePicker: React.FC<MobileTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <SwipableDrawer open={isOpen} onOpenChange={setIsOpen}>\r\n      <Button\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!time ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n        {...restProps}\r\n      >\r\n        {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n      </Button>\r\n      <SwipableDrawerContent>\r\n        <SwipableDrawerHeader className=\"p-0\">\r\n          <VisuallyHidden>\r\n            <SwipableDrawerTitle className=\"text-primary text-lg font-bold text-start\"> </SwipableDrawerTitle>\r\n            <SwipableDrawerDescription> </SwipableDrawerDescription>\r\n          </VisuallyHidden>\r\n        </SwipableDrawerHeader>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </SwipableDrawerContent>\r\n    </SwipableDrawer>\r\n  );\r\n};\r\nexport { MobileTimePicker, type MobileTimePickerProps };\r\n"],"names":["MobileTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","SwipableDrawer","jsx","Button","cn","SwipableDrawerContent","SwipableDrawerHeader","VisuallyHidden","SwipableDrawerTitle","SwipableDrawerDescription","TimePickerContent"],"mappings":";;;;;;;AA0BA,MAAMA,IAAoD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,GAAA,EAAe,MAAMJ,GAAQ,cAAcC,GAC1C,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAX;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,SAAS,MAAMO,EAAU,EAAI;AAAA,QAC7B,cAAYP,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEnIc,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAqB,WAAU,OAC9B,UAAA,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAoB,WAAU,6CAA4C,UAAA,KAAC;AAAA,QAC5E,gBAAAN,EAACO,KAA0B,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,CAC9B,EAAA,CACF;AAAA,MACA,gBAAAP,EAACQ,GAAA,EAAkB,QAAAb,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,EAAA,CAAwB;AAAA,IAAA,EAAA,CACrG;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"mobiletimepicker.es.js","sources":["../src/components/date-picker/MobileTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\nimport {\r\n  SwipableDrawer,\r\n  SwipableDrawerContent,\r\n  SwipableDrawerDescription,\r\n  SwipableDrawerHeader,\r\n  SwipableDrawerTitle,\r\n} from \"../drawer/SwipableDrawer\";\r\n\r\ntype MobileTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n  time: Time | undefined;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst MobileTimePicker: React.FC<MobileTimePickerProps> = ({\r\n  time,\r\n  onTimeChange,\r\n  className,\r\n  slotsProps,\r\n  placeholder = \"Pick a time\",\r\n  ...restProps\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <SwipableDrawer open={isOpen} onOpenChange={setIsOpen}>\r\n      <Button\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!time ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={time?.hour ? `Selected time: ${time.hour}:${time.minute} ${time.ampm}` : placeholder}\r\n        {...restProps}\r\n      >\r\n        {`${time?.hour?.toString()?.padStart(2, \"0\") ?? \"--\"} : ${time?.minute?.toString()?.padStart(2, \"0\") ?? \"--\"} ${time?.ampm ?? \"--\"}`}\r\n      </Button>\r\n      <SwipableDrawerContent>\r\n        <SwipableDrawerHeader className=\"p-0\">\r\n          <VisuallyHidden>\r\n            <SwipableDrawerTitle className=\"text-primary text-lg font-bold text-start\"> </SwipableDrawerTitle>\r\n            <SwipableDrawerDescription> </SwipableDrawerDescription>\r\n          </VisuallyHidden>\r\n        </SwipableDrawerHeader>\r\n        <TimePickerContent isOpen={isOpen} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n      </SwipableDrawerContent>\r\n    </SwipableDrawer>\r\n  );\r\n};\r\nexport { MobileTimePicker, type MobileTimePickerProps };\r\n"],"names":["MobileTimePicker","time","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","SwipableDrawer","jsx","Button","cn","SwipableDrawerContent","SwipableDrawerHeader","VisuallyHidden","SwipableDrawerTitle","SwipableDrawerDescription","TimePickerContent"],"mappings":";;;;;;;AA0BA,MAAMA,IAAoD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,GAAA,EAAe,MAAMJ,GAAQ,cAAcC,GAC1C,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAX;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAY,SAAL;AAAA,QAC1B,SAAS,MAAMO,EAAU,EAAI;AAAA,QAC7B,cAAYP,GAAM,OAAO,kBAAkBA,EAAK,IAAI,IAAIA,EAAK,MAAM,IAAIA,EAAK,IAAI,KAAKI;AAAA,QACpF,GAAGC;AAAA,QAEH,UAAA,GAAGL,GAAM,MAAM,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,MAAMA,GAAM,QAAQ,SAAA,GAAY,SAAS,GAAG,GAAG,KAAK,IAAI,IAAIA,GAAM,QAAQ,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEnIc,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAA,EAAqB,WAAU,OAC9B,UAAA,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAL,EAACM,GAAA,EAAoB,WAAU,6CAA4C,UAAA,KAAC;AAAA,QAC5E,gBAAAN,EAACO,KAA0B,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,CAC9B,EAAA,CACF;AAAA,MACA,gBAAAP,EAACQ,GAAA,EAAkB,QAAAb,GAAgB,cAAAL,GAA4B,MAAAD,GAAY,YAAAG,EAAA,CAAwB;AAAA,IAAA,EAAA,CACrG;AAAA,EAAA,GACF;AAEJ;"}

package/dist/multiselect.es.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as r, Fragment as x } from "react/jsx-runtime";
+import { jsxs as a, jsx as r, Fragment as w } from "react/jsx-runtime";
 import * as s from "react";
 import { tv as H } from "tailwind-variants";
 import { XMark as k, CircleXmark as J, ChevronDown as Q, Check as j } from "@trsys-tech/matrix-icons";
@@ -8,7 +8,7 @@ import { Button as U } from "./button.es.js";
 import { Separator as E } from "./separator.es.js";
 import { Popover as Y, PopoverTrigger as Z, PopoverContent as ee } from "./popover.es.js";
 import { Command as re, CommandInput as te, CommandList as ae, CommandEmpty as oe, CommandGroup as I, CommandItem as g, CommandSeparator as se } from "./command.es.js";
-const O = H({
+const M = H({
   base: "flex gap-1 items-center py-0.5 px-2 rounded-xl",
   variants: {
     variant: {
@@ -21,188 +21,186 @@ const O = H({
   defaultVariants: {
     variant: "default"
   }
-}), le = s.forwardRef(
-  ({
-    options: n,
-    onValueChange: c,
-    value: b,
-    variant: w,
-    disabled: N,
-    defaultValue: D = [],
-    placeholder: R = "Select options",
-    maxCount: m = 3,
-    modalPopover: V = !1,
-    // asChild = false,
-    className: B,
-    moreText: K = "more",
-    clearText: L = "Clear",
-    closeText: M = "Close",
-    selectAllText: _ = "Select All",
-    noResultsText: A = "No results found.",
-    loading: p,
-    loadingText: u = "Loading...",
-    ...T
-  }, W) => {
-    const [t, l] = s.useState(D ?? b), [X, i] = s.useState(!1), f = s.useRef(null), [$, S] = s.useState(!1);
-    s.useEffect(() => {
-      l(b ?? []);
-    }, [b]);
-    const F = (e) => {
-      if (e.key === "Enter")
-        i(!0);
-      else if (e.key === "Backspace" && !e.currentTarget.value) {
-        const o = [...t];
-        o.pop(), l(o), c(o);
-      }
-    }, C = (e) => {
-      const o = t.includes(e) ? t.filter((h) => h !== e) : [...t, e];
-      l(o), c(o);
-    }, y = () => {
-      l([]), c([]);
-    }, G = () => {
-      i((e) => !e);
-    }, q = () => {
-      const e = t.slice(0, m);
+}), le = ({
+  options: n,
+  onValueChange: c,
+  value: b,
+  variant: x,
+  disabled: N,
+  defaultValue: O = [],
+  placeholder: D = "Select options",
+  maxCount: m = 3,
+  modalPopover: R = !1,
+  // asChild = false,
+  className: V,
+  moreText: B = "more",
+  clearText: K = "Clear",
+  closeText: L = "Close",
+  selectAllText: _ = "Select All",
+  noResultsText: A = "No results found.",
+  loading: p,
+  loadingText: u = "Loading...",
+  ...F
+}, T) => {
+  const [t, l] = s.useState(O ?? b), [W, i] = s.useState(!1), f = s.useRef(null), [X, S] = s.useState(!1);
+  s.useEffect(() => {
+    l(b ?? []);
+  }, [b]);
+  const $ = (e) => {
+    if (e.key === "Enter")
+      i(!0);
+    else if (e.key === "Backspace" && !e.currentTarget.value) {
+      const o = [...t];
+      o.pop(), l(o), c(o);
+    }
+  }, C = (e) => {
+    const o = t.includes(e) ? t.filter((h) => h !== e) : [...t, e];
+    l(o), c(o);
+  }, y = () => {
+    l([]), c([]);
+  }, G = () => {
+    i((e) => !e);
+  }, q = () => {
+    const e = t.slice(0, m);
+    l(e), c(e);
+  }, z = () => {
+    if (t.length === n.length)
+      y();
+    else {
+      const e = n.map((o) => o.value);
       l(e), c(e);
-    }, z = () => {
-      if (t.length === n.length)
-        y();
-      else {
-        const e = n.map((o) => o.value);
-        l(e), c(e);
-      }
-    };
-    return s.useLayoutEffect(() => {
-      f.current && (f?.current?.firstChild?.offsetTop < f?.current?.lastChild?.offsetTop ? S(!0) : S(!1));
-    }, [t]), /* @__PURE__ */ a(Y, { open: X, onOpenChange: i, modal: V, children: [
-      /* @__PURE__ */ r(Z, { asChild: !0, children: /* @__PURE__ */ r(
-        U,
-        {
-          ref: W,
-          variant: "text",
-          loading: p,
-          disabled: N,
-          ...T,
-          onClick: G,
-          className: d(
-            "group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
-            $ && "h-auto",
-            B
-          ),
-          "data-placeholder": t.length ? void 0 : "",
-          endIcon: /* @__PURE__ */ r(
-            Q,
-            {
-              role: "button",
-              "aria-label": "Expand dropdown",
-              className: "!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform"
-            }
-          ),
-          children: /* @__PURE__ */ r(x, { children: t.length > 0 ? /* @__PURE__ */ a("div", { className: "flex justify-between items-center w-full", children: [
-            /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2", ref: f, children: [
-              t.slice(0, m).map((e) => {
-                const o = n.find((v) => v.value === e), h = o?.icon;
-                return /* @__PURE__ */ a(P, { className: d(O({ variant: w }), { "text-gray-400 bg-gray-200": N || p }), children: [
-                  /* @__PURE__ */ r(
-                    k,
-                    {
-                      className: "h-4 w-4 cursor-pointer",
-                      onClick: (v) => {
-                        v.stopPropagation(), C(e);
-                      }
-                    }
-                  ),
-                  h && /* @__PURE__ */ r(h, { className: "h-4 w-4 mr-2" }),
-                  o?.label
-                ] }, e);
-              }),
-              t.length > m && /* @__PURE__ */ a(P, { className: d(O({ variant: w })), children: [
-                `+ ${t.length - m} ${K}`,
+    }
+  };
+  return s.useLayoutEffect(() => {
+    f.current && (f?.current?.firstChild?.offsetTop < f?.current?.lastChild?.offsetTop ? S(!0) : S(!1));
+  }, [t]), /* @__PURE__ */ a(Y, { open: W, onOpenChange: i, modal: R, children: [
+    /* @__PURE__ */ r(Z, { asChild: !0, children: /* @__PURE__ */ r(
+      U,
+      {
+        ref: T,
+        variant: "text",
+        loading: p,
+        disabled: N,
+        ...F,
+        onClick: G,
+        className: d(
+          "group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
+          X && "h-auto",
+          V
+        ),
+        "data-placeholder": t.length ? void 0 : "",
+        endIcon: /* @__PURE__ */ r(
+          Q,
+          {
+            role: "button",
+            "aria-label": "Expand dropdown",
+            className: "!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform"
+          }
+        ),
+        children: /* @__PURE__ */ r(w, { children: t.length > 0 ? /* @__PURE__ */ a("div", { className: "flex justify-between items-center w-full", children: [
+          /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2", ref: f, children: [
+            t.slice(0, m).map((e) => {
+              const o = n.find((v) => v.value === e), h = o?.icon;
+              return /* @__PURE__ */ a(P, { className: d(M({ variant: x }), { "text-gray-400 bg-gray-200": N || p }), children: [
                 /* @__PURE__ */ r(
-                  J,
+                  k,
                   {
-                    role: "button",
-                    className: "ml-2 h-4.5 w-4.5 cursor-pointer",
-                    onClick: (e) => {
-                      e.stopPropagation(), q();
+                    className: "h-4 w-4 cursor-pointer",
+                    onClick: (v) => {
+                      v.stopPropagation(), C(e);
                     }
                   }
-                )
-              ] }),
-              p && u ? u : null
-            ] }),
-            /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-1", children: [
+                ),
+                h && /* @__PURE__ */ r(h, { className: "h-4 w-4 mr-2" }),
+                o?.label
+              ] }, e);
+            }),
+            t.length > m && /* @__PURE__ */ a(P, { className: d(M({ variant: x })), children: [
+              `+ ${t.length - m} ${B}`,
               /* @__PURE__ */ r(
-                k,
+                J,
                 {
                   role: "button",
-                  className: "h-5 w-5 text-muted-foreground cursor-pointer",
+                  className: "ml-2 h-4.5 w-4.5 cursor-pointer",
                   onClick: (e) => {
-                    e.stopPropagation(), y();
-                  },
-                  "aria-label": "Clear"
+                    e.stopPropagation(), q();
+                  }
                 }
-              ),
-              /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-5 h-full" })
+              )
+            ] }),
+            p && u ? u : null
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-1", children: [
+            /* @__PURE__ */ r(
+              k,
+              {
+                role: "button",
+                className: "h-5 w-5 text-muted-foreground cursor-pointer",
+                onClick: (e) => {
+                  e.stopPropagation(), y();
+                },
+                "aria-label": "Clear"
+              }
+            ),
+            /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-5 h-full" })
+          ] })
+        ] }) : /* @__PURE__ */ r(w, { children: p && u ? u : D }) })
+      }
+    ) }),
+    /* @__PURE__ */ r(ee, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => i(!1), children: /* @__PURE__ */ a(re, { className: "w-[--radix-popper-anchor-width]", children: [
+      /* @__PURE__ */ r(te, { placeholder: "Search...", onKeyDown: $ }),
+      /* @__PURE__ */ a(ae, { className: "max-h-[--radix-popper-available-height]", children: [
+        /* @__PURE__ */ r(oe, { children: A }),
+        /* @__PURE__ */ a(I, { children: [
+          /* @__PURE__ */ a(g, { onSelect: z, className: "cursor-pointer", children: [
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: d(
+                  "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
+                  t.length === n.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                ),
+                children: /* @__PURE__ */ r(j, { className: "h-4.5 w-4.5" })
+              }
+            ),
+            /* @__PURE__ */ a("span", { children: [
+              "(",
+              _,
+              ")"
             ] })
-          ] }) : /* @__PURE__ */ r(x, { children: p && u ? u : R }) })
-        }
-      ) }),
-      /* @__PURE__ */ r(ee, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => i(!1), children: /* @__PURE__ */ a(re, { className: "w-[--radix-popper-anchor-width]", children: [
-        /* @__PURE__ */ r(te, { placeholder: "Search...", onKeyDown: F }),
-        /* @__PURE__ */ a(ae, { className: "max-h-[--radix-popper-available-height]", children: [
-          /* @__PURE__ */ r(oe, { children: A }),
-          /* @__PURE__ */ a(I, { children: [
-            /* @__PURE__ */ a(g, { onSelect: z, className: "cursor-pointer", children: [
+          ] }, "all"),
+          n.map((e) => {
+            const o = t.includes(e.value);
+            return /* @__PURE__ */ a(g, { onSelect: () => C(e.value), className: "cursor-pointer", children: [
               /* @__PURE__ */ r(
                 "div",
                 {
                   className: d(
                     "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
-                    t.length === n.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    o ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                   ),
                   children: /* @__PURE__ */ r(j, { className: "h-4.5 w-4.5" })
                 }
               ),
-              /* @__PURE__ */ a("span", { children: [
-                "(",
-                _,
-                ")"
-              ] })
-            ] }, "all"),
-            n.map((e) => {
-              const o = t.includes(e.value);
-              return /* @__PURE__ */ a(g, { onSelect: () => C(e.value), className: "cursor-pointer", children: [
-                /* @__PURE__ */ r(
-                  "div",
-                  {
-                    className: d(
-                      "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
-                      o ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
-                    ),
-                    children: /* @__PURE__ */ r(j, { className: "h-4.5 w-4.5" })
-                  }
-                ),
-                e.icon && /* @__PURE__ */ r(e.icon, { className: "mr-2 h-4.5 w-4.5 text-muted-foreground" }),
-                /* @__PURE__ */ r("span", { children: e.label })
-              ] }, e.value);
-            })
+              e.icon && /* @__PURE__ */ r(e.icon, { className: "mr-2 h-4.5 w-4.5 text-muted-foreground" }),
+              /* @__PURE__ */ r("span", { children: e.label })
+            ] }, e.value);
+          })
+        ] }),
+        /* @__PURE__ */ r(se, {}),
+        /* @__PURE__ */ r(I, { children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+          t.length > 0 && /* @__PURE__ */ a(w, { children: [
+            /* @__PURE__ */ r(g, { onSelect: y, className: "flex-1 justify-center cursor-pointer", children: K }),
+            /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-6 h-full" })
           ] }),
-          /* @__PURE__ */ r(se, {}),
-          /* @__PURE__ */ r(I, { children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-            t.length > 0 && /* @__PURE__ */ a(x, { children: [
-              /* @__PURE__ */ r(g, { onSelect: y, className: "flex-1 justify-center cursor-pointer", children: L }),
-              /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-6 h-full" })
-            ] }),
-            /* @__PURE__ */ r(g, { onSelect: () => i(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: M })
-          ] }) })
-        ] })
-      ] }) })
-    ] });
-  }
-);
-le.displayName = "MultiSelect";
+          /* @__PURE__ */ r(g, { onSelect: () => i(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: L })
+        ] }) })
+      ] })
+    ] }) })
+  ] });
+}, ne = s.forwardRef(le);
+ne.displayName = "MultiSelect";
 export {
-  le as MultiSelect
+  ne as MultiSelect
 };
 //# sourceMappingURL=multiselect.es.js.map

package/dist/multiselect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = tv({\r\n  base: \"flex gap-1 items-center py-0.5 px-2 rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50\",\r\n      secondary: \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n      inverted: \"inverted\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof multiSelectVariants> {\r\n  /**\r\n   * An array of option objects to be displayed in the multi-select component.\r\n   * Each option object has a label, value, and an optional icon.\r\n   */\r\n  options: {\r\n    /** The text to display for the option. */\r\n    label: string;\r\n    /** The unique value associated with the option. */\r\n    value: string;\r\n    /** Optional icon component to display alongside the option. */\r\n    icon?: React.ComponentType<{ className?: string }>;\r\n  }[];\r\n\r\n  /**\r\n   * Callback function triggered when the selected values change.\r\n   * Receives an array of the new selected values.\r\n   */\r\n  onValueChange: (value: string[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: string[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: string[];\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * Optional, defaults to \"Select options\".\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Maximum number of items to display. Extra selected items will be summarized.\r\n   * Optional, defaults to 3.\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * The modality of the popover. When set to true, interaction with outside elements\r\n   * will be disabled and only popover content will be visible to screen readers.\r\n   * Optional, defaults to false.\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * If true, renders the multi-select component as a child of another component.\r\n   * Optional, defaults to false.\r\n   */\r\n  asChild?: boolean;\r\n\r\n  /**\r\n   * Additional class names to apply custom styles to the multi-select component.\r\n   * Optional, can be used to add custom styles.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Text to display on the close button when the multi-select component is open.\r\n   */\r\n  closeText?: string;\r\n\r\n  /**\r\n   * Text to display on the select all button when the multi-select component is open.\r\n   */\r\n  selectAllText?: string;\r\n\r\n  /**\r\n   * Text to display on the clear button when the multi-select component is open.\r\n   */\r\n  clearText?: string;\r\n\r\n  /**\r\n   * Text to display on the more button when the multi-select component is open.\r\n   */\r\n  moreText?: string;\r\n\r\n  /**\r\n   * Text to display when no results are found in the search input.\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * If true, the multi-select component will be in a loading state.\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Text to display when the multi-select component is in a loading state.\r\n   */\r\n  loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\r\n  (\r\n    {\r\n      options,\r\n      onValueChange,\r\n      value,\r\n      variant,\r\n      disabled,\r\n      defaultValue = [],\r\n      placeholder = \"Select options\",\r\n      maxCount = 3,\r\n      modalPopover = false,\r\n      // asChild = false,\r\n      className,\r\n      moreText = \"more\",\r\n      clearText = \"Clear\",\r\n      closeText = \"Close\",\r\n      selectAllText = \"Select All\",\r\n      noResultsText = \"No results found.\",\r\n      loading,\r\n      loadingText = \"Loading...\",\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue ?? value);\r\n    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const [isWrapped, setIsWrapped] = React.useState(false);\r\n\r\n    React.useEffect(() => {\r\n      setSelectedValues(value ?? []);\r\n    }, [value]);\r\n\r\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (event.key === \"Enter\") {\r\n        setIsPopoverOpen(true);\r\n      } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n        const newSelectedValues = [...selectedValues];\r\n        newSelectedValues.pop();\r\n        setSelectedValues(newSelectedValues);\r\n        onValueChange(newSelectedValues);\r\n      }\r\n    };\r\n\r\n    const toggleOption = (option: string) => {\r\n      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n      setSelectedValues(newSelectedValues);\r\n      onValueChange(newSelectedValues);\r\n    };\r\n\r\n    const handleClear = () => {\r\n      setSelectedValues([]);\r\n      onValueChange([]);\r\n    };\r\n\r\n    const handleTogglePopover = () => {\r\n      setIsPopoverOpen(prev => !prev);\r\n    };\r\n\r\n    const clearExtraOptions = () => {\r\n      const newSelectedValues = selectedValues.slice(0, maxCount);\r\n      setSelectedValues(newSelectedValues);\r\n      onValueChange(newSelectedValues);\r\n    };\r\n\r\n    const toggleAll = () => {\r\n      if (selectedValues.length === options.length) {\r\n        handleClear();\r\n      } else {\r\n        const allValues = options.map(option => option.value);\r\n        setSelectedValues(allValues);\r\n        onValueChange(allValues);\r\n      }\r\n    };\r\n\r\n    React.useLayoutEffect(() => {\r\n      if (containerRef.current) {\r\n        if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n          setIsWrapped(true);\r\n        } else {\r\n          setIsWrapped(false);\r\n        }\r\n      }\r\n    }, [selectedValues]);\r\n\r\n    return (\r\n      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n        <PopoverTrigger asChild>\r\n          <Button\r\n            ref={ref}\r\n            variant=\"text\"\r\n            loading={loading}\r\n            disabled={disabled}\r\n            {...props}\r\n            onClick={handleTogglePopover}\r\n            className={cn(\r\n              \"group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n              isWrapped && \"h-auto\",\r\n              className,\r\n            )}\r\n            data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n            endIcon={\r\n              <ChevronDown\r\n                role=\"button\"\r\n                aria-label=\"Expand dropdown\"\r\n                className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n              />\r\n            }\r\n          >\r\n            <>\r\n              {selectedValues.length > 0 ? (\r\n                <div className=\"flex justify-between items-center w-full\">\r\n                  <div className=\"flex flex-wrap items-center gap-2\" ref={containerRef}>\r\n                    {selectedValues.slice(0, maxCount).map(value => {\r\n                      const option = options.find(o => o.value === value);\r\n                      const IconComponent = option?.icon;\r\n                      return (\r\n                        <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                          <XMark\r\n                            className=\"h-4 w-4 cursor-pointer\"\r\n                            onClick={event => {\r\n                              event.stopPropagation();\r\n                              toggleOption(value);\r\n                            }}\r\n                          />\r\n                          {IconComponent && <IconComponent className=\"h-4 w-4 mr-2\" />}\r\n                          {option?.label}\r\n                        </Badge>\r\n                      );\r\n                    })}\r\n                    {selectedValues.length > maxCount && (\r\n                      <Badge className={cn(multiSelectVariants({ variant }))}>\r\n                        {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n                        <CircleXmark\r\n                          role=\"button\"\r\n                          className=\"ml-2 h-4.5 w-4.5 cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            clearExtraOptions();\r\n                          }}\r\n                        />\r\n                      </Badge>\r\n                    )}\r\n                    {loading && loadingText ? loadingText : null}\r\n                  </div>\r\n                  <div className=\"flex items-center justify-between gap-1\">\r\n                    <XMark\r\n                      role=\"button\"\r\n                      className=\"h-5 w-5 text-muted-foreground cursor-pointer\"\r\n                      onClick={event => {\r\n                        event.stopPropagation();\r\n                        handleClear();\r\n                      }}\r\n                      aria-label=\"Clear\"\r\n                    />\r\n                    <Separator orientation=\"vertical\" className=\"flex min-h-5 h-full\" />\r\n                  </div>\r\n                </div>\r\n              ) : (\r\n                <>{loading && loadingText ? loadingText : placeholder}</>\r\n              )}\r\n            </>\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n          <Command className=\"w-[--radix-popper-anchor-width]\">\r\n            <CommandInput placeholder=\"Search...\" onKeyDown={handleInputKeyDown} />\r\n            <CommandList className=\"max-h-[--radix-popper-available-height]\">\r\n              <CommandEmpty>{noResultsText}</CommandEmpty>\r\n              <CommandGroup>\r\n                <CommandItem key=\"all\" onSelect={toggleAll} className=\"cursor-pointer\">\r\n                  <div\r\n                    className={cn(\r\n                      \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n                      selectedValues.length === options.length ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                    )}\r\n                  >\r\n                    <Check className=\"h-4.5 w-4.5\" />\r\n                  </div>\r\n                  <span>({selectAllText})</span>\r\n                </CommandItem>\r\n                {options.map(option => {\r\n                  const isSelected = selectedValues.includes(option.value);\r\n                  return (\r\n                    <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"cursor-pointer\">\r\n                      <div\r\n                        className={cn(\r\n                          \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n                          isSelected ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                        )}\r\n                      >\r\n                        <Check className=\"h-4.5 w-4.5\" />\r\n                      </div>\r\n                      {option.icon && <option.icon className=\"mr-2 h-4.5 w-4.5 text-muted-foreground\" />}\r\n                      <span>{option.label}</span>\r\n                    </CommandItem>\r\n                  );\r\n                })}\r\n              </CommandGroup>\r\n              <CommandSeparator />\r\n              <CommandGroup>\r\n                <div className=\"flex items-center justify-between\">\r\n                  {selectedValues.length > 0 && (\r\n                    <>\r\n                      <CommandItem onSelect={handleClear} className=\"flex-1 justify-center cursor-pointer\">\r\n                        {clearText}\r\n                      </CommandItem>\r\n                      <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\r\n                    </>\r\n                  )}\r\n                  <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"flex-1 justify-center cursor-pointer max-w-full\">\r\n                    {closeText}\r\n                  </CommandItem>\r\n                </div>\r\n              </CommandGroup>\r\n            </CommandList>\r\n          </Command>\r\n        </PopoverContent>\r\n      </Popover>\r\n    );\r\n  },\r\n);\r\n\r\nMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","React","options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","loading","loadingText","props","ref","selectedValues","setSelectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","isWrapped","setIsWrapped","handleInputKeyDown","event","newSelectedValues","toggleOption","option","handleClear","handleTogglePopover","prev","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","o","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator"],"mappings":"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"}
+{"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = tv({\r\n  base: \"flex gap-1 items-center py-0.5 px-2 rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50\",\r\n      secondary: \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n      inverted: \"inverted\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps<T extends string | number>\r\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\">,\r\n    VariantProps<typeof multiSelectVariants> {\r\n  /**\r\n   * An array of option objects to be displayed in the multi-select component.\r\n   * Each option object has a label, value, and an optional icon.\r\n   */\r\n  options: {\r\n    /** The text to display for the option. */\r\n    label: string;\r\n    /** The unique value associated with the option. */\r\n    value: T;\r\n    /** Optional icon component to display alongside the option. */\r\n    icon?: React.ComponentType<{ className?: string }>;\r\n  }[];\r\n\r\n  /**\r\n   * Callback function triggered when the selected values change.\r\n   * Receives an array of the new selected values.\r\n   */\r\n  onValueChange: (value: T[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: T[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: T[];\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * Optional, defaults to \"Select options\".\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Maximum number of items to display. Extra selected items will be summarized.\r\n   * Optional, defaults to 3.\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * The modality of the popover. When set to true, interaction with outside elements\r\n   * will be disabled and only popover content will be visible to screen readers.\r\n   * Optional, defaults to false.\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * If true, renders the multi-select component as a child of another component.\r\n   * Optional, defaults to false.\r\n   */\r\n  asChild?: boolean;\r\n\r\n  /**\r\n   * Additional class names to apply custom styles to the multi-select component.\r\n   * Optional, can be used to add custom styles.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Text to display on the close button when the multi-select component is open.\r\n   */\r\n  closeText?: string;\r\n\r\n  /**\r\n   * Text to display on the select all button when the multi-select component is open.\r\n   */\r\n  selectAllText?: string;\r\n\r\n  /**\r\n   * Text to display on the clear button when the multi-select component is open.\r\n   */\r\n  clearText?: string;\r\n\r\n  /**\r\n   * Text to display on the more button when the multi-select component is open.\r\n   */\r\n  moreText?: string;\r\n\r\n  /**\r\n   * Text to display when no results are found in the search input.\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * If true, the multi-select component will be in a loading state.\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Text to display when the multi-select component is in a loading state.\r\n   */\r\n  loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = <T extends string | number>(\r\n  {\r\n    options,\r\n    onValueChange,\r\n    value,\r\n    variant,\r\n    disabled,\r\n    defaultValue = [],\r\n    placeholder = \"Select options\",\r\n    maxCount = 3,\r\n    modalPopover = false,\r\n    // asChild = false,\r\n    className,\r\n    moreText = \"more\",\r\n    clearText = \"Clear\",\r\n    closeText = \"Close\",\r\n    selectAllText = \"Select All\",\r\n    noResultsText = \"No results found.\",\r\n    loading,\r\n    loadingText = \"Loading...\",\r\n    ...props\r\n  }: MultiSelectProps<T>,\r\n  ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n  const [selectedValues, setSelectedValues] = React.useState<T[]>(defaultValue ?? value);\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n  const [isWrapped, setIsWrapped] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    setSelectedValues(value ?? []);\r\n  }, [value]);\r\n\r\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (event.key === \"Enter\") {\r\n      setIsPopoverOpen(true);\r\n    } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n      const newSelectedValues = [...selectedValues];\r\n      newSelectedValues.pop();\r\n      setSelectedValues(newSelectedValues);\r\n      onValueChange(newSelectedValues);\r\n    }\r\n  };\r\n\r\n  const toggleOption = (option: T) => {\r\n    const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n    setSelectedValues(newSelectedValues);\r\n    onValueChange(newSelectedValues);\r\n  };\r\n\r\n  const handleClear = () => {\r\n    setSelectedValues([]);\r\n    onValueChange([]);\r\n  };\r\n\r\n  const handleTogglePopover = () => {\r\n    setIsPopoverOpen(prev => !prev);\r\n  };\r\n\r\n  const clearExtraOptions = () => {\r\n    const newSelectedValues = selectedValues.slice(0, maxCount);\r\n    setSelectedValues(newSelectedValues);\r\n    onValueChange(newSelectedValues);\r\n  };\r\n\r\n  const toggleAll = () => {\r\n    if (selectedValues.length === options.length) {\r\n      handleClear();\r\n    } else {\r\n      const allValues = options.map(option => option.value);\r\n      setSelectedValues(allValues);\r\n      onValueChange(allValues);\r\n    }\r\n  };\r\n\r\n  React.useLayoutEffect(() => {\r\n    if (containerRef.current) {\r\n      if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n        setIsWrapped(true);\r\n      } else {\r\n        setIsWrapped(false);\r\n      }\r\n    }\r\n  }, [selectedValues]);\r\n\r\n  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          ref={ref}\r\n          variant=\"text\"\r\n          loading={loading}\r\n          disabled={disabled}\r\n          {...props}\r\n          onClick={handleTogglePopover}\r\n          className={cn(\r\n            \"group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n            isWrapped && \"h-auto\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n          endIcon={\r\n            <ChevronDown\r\n              role=\"button\"\r\n              aria-label=\"Expand dropdown\"\r\n              className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n            />\r\n          }\r\n        >\r\n          <>\r\n            {selectedValues.length > 0 ? (\r\n              <div className=\"flex justify-between items-center w-full\">\r\n                <div className=\"flex flex-wrap items-center gap-2\" ref={containerRef}>\r\n                  {selectedValues.slice(0, maxCount).map(value => {\r\n                    const option = options.find(o => o.value === value);\r\n                    const IconComponent = option?.icon;\r\n                    return (\r\n                      <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                        <XMark\r\n                          className=\"h-4 w-4 cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            toggleOption(value);\r\n                          }}\r\n                        />\r\n                        {IconComponent && <IconComponent className=\"h-4 w-4 mr-2\" />}\r\n                        {option?.label}\r\n                      </Badge>\r\n                    );\r\n                  })}\r\n                  {selectedValues.length > maxCount && (\r\n                    <Badge className={cn(multiSelectVariants({ variant }))}>\r\n                      {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n                      <CircleXmark\r\n                        role=\"button\"\r\n                        className=\"ml-2 h-4.5 w-4.5 cursor-pointer\"\r\n                        onClick={event => {\r\n                          event.stopPropagation();\r\n                          clearExtraOptions();\r\n                        }}\r\n                      />\r\n                    </Badge>\r\n                  )}\r\n                  {loading && loadingText ? loadingText : null}\r\n                </div>\r\n                <div className=\"flex items-center justify-between gap-1\">\r\n                  <XMark\r\n                    role=\"button\"\r\n                    className=\"h-5 w-5 text-muted-foreground cursor-pointer\"\r\n                    onClick={event => {\r\n                      event.stopPropagation();\r\n                      handleClear();\r\n                    }}\r\n                    aria-label=\"Clear\"\r\n                  />\r\n                  <Separator orientation=\"vertical\" className=\"flex min-h-5 h-full\" />\r\n                </div>\r\n              </div>\r\n            ) : (\r\n              <>{loading && loadingText ? loadingText : placeholder}</>\r\n            )}\r\n          </>\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n        <Command className=\"w-[--radix-popper-anchor-width]\">\r\n          <CommandInput placeholder=\"Search...\" onKeyDown={handleInputKeyDown} />\r\n          <CommandList className=\"max-h-[--radix-popper-available-height]\">\r\n            <CommandEmpty>{noResultsText}</CommandEmpty>\r\n            <CommandGroup>\r\n              <CommandItem key=\"all\" onSelect={toggleAll} className=\"cursor-pointer\">\r\n                <div\r\n                  className={cn(\r\n                    \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n                    selectedValues.length === options.length ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                  )}\r\n                >\r\n                  <Check className=\"h-4.5 w-4.5\" />\r\n                </div>\r\n                <span>({selectAllText})</span>\r\n              </CommandItem>\r\n              {options.map(option => {\r\n                const isSelected = selectedValues.includes(option.value);\r\n                return (\r\n                  <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"cursor-pointer\">\r\n                    <div\r\n                      className={cn(\r\n                        \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n                        isSelected ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                      )}\r\n                    >\r\n                      <Check className=\"h-4.5 w-4.5\" />\r\n                    </div>\r\n                    {option.icon && <option.icon className=\"mr-2 h-4.5 w-4.5 text-muted-foreground\" />}\r\n                    <span>{option.label}</span>\r\n                  </CommandItem>\r\n                );\r\n              })}\r\n            </CommandGroup>\r\n            <CommandSeparator />\r\n            <CommandGroup>\r\n              <div className=\"flex items-center justify-between\">\r\n                {selectedValues.length > 0 && (\r\n                  <>\r\n                    <CommandItem onSelect={handleClear} className=\"flex-1 justify-center cursor-pointer\">\r\n                      {clearText}\r\n                    </CommandItem>\r\n                    <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\r\n                  </>\r\n                )}\r\n                <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"flex-1 justify-center cursor-pointer max-w-full\">\r\n                  {closeText}\r\n                </CommandItem>\r\n              </div>\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string | number>(\r\n  props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","loading","loadingText","props","ref","selectedValues","setSelectedValues","React","isPopoverOpen","setIsPopoverOpen","containerRef","isWrapped","setIsWrapped","handleInputKeyDown","event","newSelectedValues","toggleOption","option","handleClear","handleTogglePopover","prev","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","o","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}