npm - @trsys-tech/matrix-library - Versions diffs - 0.5.2-beta.3 → 0.5.3 - Mend

@trsys-tech/matrix-library 0.5.2-beta.3 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/chip.es.js +11 -10
package/dist/chip.es.js.map +1 -1
package/dist/components/chip/Chip.d.ts.map +1 -1
package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
package/dist/components/text-field/TextField.d.ts.map +1 -1
package/dist/multiselect.es.js +114 -116
package/dist/multiselect.es.js.map +1 -1
package/dist/sidebar.es.js +1 -1
package/dist/sidebar.es.js.map +1 -1
package/dist/styles.css +1 -1
package/dist/textfield.es.js +36 -30
package/dist/textfield.es.js.map +1 -1
package/package.json +1 -1

package/dist/chip.es.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
 import d from "react";
 import { Slot as f } from "@radix-ui/react-slot";
 import { tv as g } from "tailwind-variants";
-import { cn as a } from "./utils.es.js";
+import { cn as e } from "./utils.es.js";
 import { XMark as x } from "@trsys-tech/matrix-icons";
-const b = g({
+const c = g({
   base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-xs font-medium",
   variants: {
     variant: {
@@ -23,22 +23,23 @@ const b = g({
     variant: "primary",
     size: "md"
   }
-}), c = d.forwardRef(({ className: e, variant: m, asChild: o = !1, children: i, onClose: p, size: r, ...s }, n) => /* @__PURE__ */ l(o ? f : "span", { className: a(b({ variant: m, size: r, className: e })), ref: n, ...s, children: [
-  i,
-  p ? /* @__PURE__ */ t(
+}), b = d.forwardRef(({ className: m, variant: i, asChild: o = !1, children: p, onClose: t, size: r, ...s }, n) => /* @__PURE__ */ l(o ? f : "span", { className: e(c({ variant: i, size: r, className: m })), ref: n, ...s, children: [
+  p,
+  t ? /* @__PURE__ */ a(
     "button",
     {
-      className: a(
+      onClick: t,
+      className: e(
         { "-me-3 [&>svg]:w-5 [&>svg]:h-5": r === "lg" },
         { "-me-2 [&>svg]:w-4.5 [&>svg]:h-4.5": r === "md" || r === void 0 },
         { "-me-1 [&>svg]:w-4 [&>svg]:h-4": r === "sm" }
       ),
-      children: /* @__PURE__ */ t(x, {})
+      children: /* @__PURE__ */ a(x, {})
     }
   ) : null
 ] }));
-c.displayName = "Chip";
+b.displayName = "Chip";
 export {
-  c as Chip
+  b as Chip
 };
 //# sourceMappingURL=chip.es.js.map

package/dist/chip.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.es.js","sources":["../src/components/chip/Chip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nconst chipVariants = tv({\r\n base: \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-xs font-medium\",\r\n variants: {\r\n variant: {\r\n primary: \"bg-primary-100 text-primary-700 border border-primary\",\r\n neutral: \"bg-gray-50 text-text-400 border border-gray-400\",\r\n \"table-primary\": \"bg-primary-25 text-primary font-bold\",\r\n \"table-neutral\": \"bg-gray-50 text-text-400 font-medium\",\r\n },\r\n size: {\r\n sm: \"px-2 h-6\",\r\n md: \"px-4 h-8\",\r\n lg: \"px-6 h-10 text-sm\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"primary\",\r\n size: \"md\",\r\n },\r\n});\r\n\r\ninterface ChipProps extends React.ButtonHTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {\r\n asChild?: boolean;\r\n onClose?: () => void;\r\n}\r\n\r\nconst Chip = React.forwardRef<HTMLSpanElement, ChipProps>(({ className, variant, asChild = false, children, onClose, size, ...props }, ref) => {\r\n const Comp = asChild ? Slot : \"span\";\r\n return (\r\n <Comp className={cn(chipVariants({ variant, size, className }))} ref={ref} {...props}>\r\n {children}\r\n {onClose ? (\r\n <button\r\n className={cn(\r\n { \"-me-3 [&>svg]:w-5 [&>svg]:h-5\": size === \"lg\" },\r\n { \"-me-2 [&>svg]:w-4.5 [&>svg]:h-4.5\": size === \"md\" \|\| size === undefined },\r\n { \"-me-1 [&>svg]:w-4 [&>svg]:h-4\": size === \"sm\" },\r\n )}\r\n >\r\n <XMark />\r\n </button>\r\n ) : null}\r\n </Comp>\r\n );\r\n});\r\nChip.displayName = \"Chip\";\r\n\r\nexport { Chip, type ChipProps };\r\n"],"names":["chipVariants","tv","Chip","React","className","variant","asChild","children","onClose","size","props","ref","jsxs","Slot","cn","jsx","XMark"],"mappings":";;;;;;AASA,MAAMA,IAAeC,EAAG;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV,CAAC,GAOKC,IAAOC,EAAM,WAAuC,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,SAAAC,IAAU,IAAO,UAAAC,GAAU,SAAAC,GAAS,MAAAC,GAAM,GAAGC,EAAA,GAASC,MAGnI,gBAAAC,EAFWN,IAAUO,IAAO,QAE3B,EAAK,WAAWC,EAAGd,EAAa,EAAE,SAAAK,GAAS,MAAAI,GAAM,WAAAL,EAAA,CAAW,CAAC,GAAG,KAAAO,GAAW,GAAGD,GAC5E,UAAA;AAAA,EAAAH;AAAA,EACAC,IACC,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,~~WAAWD~~;AAAA,QACT,EAAE,iCAAiCL,MAAS,KAAA;AAAA,QAC5C,EAAE,qCAAqCA,MAAS,QAAQA,MAAS,OAAA;AAAA,QACjE,EAAE,iCAAiCA,MAAS,KAAA;AAAA,MAAK;AAAA,MAGnD,4BAACO,GAAA,CAAA,CAAM;AAAA,IAAA;AAAA,EAAA,IAEP;AAAA,GACN,CAEH;AACDd,EAAK,cAAc;"}
1	+ {"version":3,"file":"chip.es.js","sources":["../src/components/chip/Chip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nconst chipVariants = tv({\r\n base: \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-xs font-medium\",\r\n variants: {\r\n variant: {\r\n primary: \"bg-primary-100 text-primary-700 border border-primary\",\r\n neutral: \"bg-gray-50 text-text-400 border border-gray-400\",\r\n \"table-primary\": \"bg-primary-25 text-primary font-bold\",\r\n \"table-neutral\": \"bg-gray-50 text-text-400 font-medium\",\r\n },\r\n size: {\r\n sm: \"px-2 h-6\",\r\n md: \"px-4 h-8\",\r\n lg: \"px-6 h-10 text-sm\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"primary\",\r\n size: \"md\",\r\n },\r\n});\r\n\r\ninterface ChipProps extends React.ButtonHTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {\r\n asChild?: boolean;\r\n onClose?: () => void;\r\n}\r\n\r\nconst Chip = React.forwardRef<HTMLSpanElement, ChipProps>(({ className, variant, asChild = false, children, onClose, size, ...props }, ref) => {\r\n const Comp = asChild ? Slot : \"span\";\r\n return (\r\n <Comp className={cn(chipVariants({ variant, size, className }))} ref={ref} {...props}>\r\n {children}\r\n {onClose ? (\r\n <button\r\n onClick={onClose}\r\n className={cn(\r\n { \"-me-3 [&>svg]:w-5 [&>svg]:h-5\": size === \"lg\" },\r\n { \"-me-2 [&>svg]:w-4.5 [&>svg]:h-4.5\": size === \"md\" \|\| size === undefined },\r\n { \"-me-1 [&>svg]:w-4 [&>svg]:h-4\": size === \"sm\" },\r\n )}\r\n >\r\n <XMark />\r\n </button>\r\n ) : null}\r\n </Comp>\r\n );\r\n});\r\nChip.displayName = \"Chip\";\r\n\r\nexport { Chip, type ChipProps };\r\n"],"names":["chipVariants","tv","Chip","React","className","variant","asChild","children","onClose","size","props","ref","jsxs","Slot","cn","jsx","XMark"],"mappings":";;;;;;AASA,MAAMA,IAAeC,EAAG;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV,CAAC,GAOKC,IAAOC,EAAM,WAAuC,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,SAAAC,IAAU,IAAO,UAAAC,GAAU,SAAAC,GAAS,MAAAC,GAAM,GAAGC,EAAA,GAASC,MAGnI,gBAAAC,EAFWN,IAAUO,IAAO,QAE3B,EAAK,WAAWC,EAAGd,EAAa,EAAE,SAAAK,GAAS,MAAAI,GAAM,WAAAL,EAAA,CAAW,CAAC,GAAG,KAAAO,GAAW,GAAGD,GAC5E,UAAA;AAAA,EAAAH;AAAA,EACAC,IACC,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASP;AAAA,MACT,WAAWM;AAAA,QACT,EAAE,iCAAiCL,MAAS,KAAA;AAAA,QAC5C,EAAE,qCAAqCA,MAAS,QAAQA,MAAS,OAAA;AAAA,QACjE,EAAE,iCAAiCA,MAAS,KAAA;AAAA,MAAK;AAAA,MAGnD,4BAACO,GAAA,CAAA,CAAM;AAAA,IAAA;AAAA,EAAA,IAEP;AAAA,GACN,CAEH;AACDd,EAAK,cAAc;"}

package/dist/components/chip/Chip.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAM,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKrD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAmBhB,CAAC;AAEH,UAAU,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,~~mFAkBR~~,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC"}
1	+ {"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAM,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKrD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAmBhB,CAAC;AAEH,UAAU,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,mFAmBR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC"}

package/dist/components/multi-select/MultiSelect.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D;;;GAGG;AACH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAavB,CAAC;AAEH;;GAEG;AACH,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAClD,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,EACnF,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C;;;;;OAKG;IACH,OAAO,EAAE;QACP,0CAA0C;QAC1C,KAAK,EAAE,MAAM,CAAC;QACd,mDAAmD;QACnD,KAAK,EAAE,CAAC,CAAC;QACT,+DAA+D;QAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACpD,EAAE,CAAC;IAEJ;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IAEZ,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;~~AAqQD~~,QAAA,MAAM,oBAAoB,EAAoC,CAAC,CAAC,CAAyB,SAAf,MAAM,GAAG,MAAM,EACvF,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}
1	+ {"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D;;;GAGG;AACH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAavB,CAAC;AAEH;;GAEG;AACH,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAClD,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,EACnF,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C;;;;;OAKG;IACH,OAAO,EAAE;QACP,0CAA0C;QAC1C,KAAK,EAAE,MAAM,CAAC;QACd,mDAAmD;QACnD,KAAK,EAAE,CAAC,CAAC;QACT,+DAA+D;QAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACpD,EAAE,CAAC;IAEJ;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IAEZ,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+QD,QAAA,MAAM,oBAAoB,EAAoC,CAAC,CAAC,CAAyB,SAAf,MAAM,GAAG,MAAM,EACvF,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}

package/dist/components/text-field/TextField.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/TextField.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIrD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAgBrB,CAAC;AAEH,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,iBAAiB,CAAC;IAC3G,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE;QACV,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;KAC1D,CAAC;CACH;AAED,QAAA,MAAM,SAAS,~~yFA4Bd~~,CAAC;AAGF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}
1	+ {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/TextField.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIrD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAgBrB,CAAC;AAEH,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,iBAAiB,CAAC;IAC3G,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE;QACV,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;KAC1D,CAAC;CACH;AAED,QAAA,MAAM,SAAS,yFAuCd,CAAC;AAGF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}

package/dist/multiselect.es.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import { jsxs as l, jsx as r, Fragment as S } from "react/jsx-runtime";
-import * as s from "react";
-import { tv as re } from "tailwind-variants";
-import { XMark as M, CircleXmark as te, ChevronDown as ae, Check as I } from "@trsys-tech/matrix-icons";
-import { cn as p } from "./utils.es.js";
-import { Badge as D } from "./badge.es.js";
-import { Button as se } from "./button.es.js";
-import { Separator as T } from "./separator.es.js";
-import { Popover as le, PopoverTrigger as oe, PopoverContent as ne } from "./popover.es.js";
-import { Command as ce, CommandInput as ie, CommandList as de, CommandEmpty as ue, CommandGroup as A, CommandItem as y, CommandSeparator as me } from "./command.es.js";
-const R = re({
+import { jsxs as s, jsx as r, Fragment as S } from "react/jsx-runtime";
+import * as l from "react";
+import { tv as ae } from "tailwind-variants";
+import { XMark as I, CircleXmark as le, ChevronDown as se, Check as D } from "@trsys-tech/matrix-icons";
+import { cn as f } from "./utils.es.js";
+import { Badge as T } from "./badge.es.js";
+import { Button as oe } from "./button.es.js";
+import { Separator as A } from "./separator.es.js";
+import { Popover as ne, PopoverTrigger as ce, PopoverContent as ie } from "./popover.es.js";
+import { Command as de, CommandInput as ue, CommandList as me, CommandEmpty as pe, CommandGroup as R, CommandItem as w, CommandSeparator as fe } from "./command.es.js";
+const B = ae({
   base: "flex gap-1 items-center py-0.5 px-2 rounded-xl",
   variants: {
     variant: {
@@ -21,108 +21,106 @@ const R = re({
   defaultVariants: {
     variant: "default"
   }
-}), pe = ({
-  options: u,
-  onValueChange: o,
-  value: w,
-  variant: k,
-  disabled: C,
-  defaultValue: B = [],
-  placeholder: K = "Select options",
-  maxCount: m = 3,
-  modalPopover: L = !1,
+}), he = ({
+  options: m,
+  onValueChange: n,
+  value: k,
+  variant: C,
+  disabled: j,
+  defaultValue: K = [],
+  placeholder: L = "Select options",
+  maxCount: p = 3,
+  modalPopover: V = !1,
   // asChild = false,
   className: z,
-  moreText: V = "more",
-  clearText: W = "Clear",
-  closeText: X = "Close",
-  selectAllText: $ = "Select All",
-  noResultsText: G = "No results found.",
-  searchText: O = "Search...",
-  addOptionOnSearchNotFound: f = !1,
-  showSelectAll: q = !0,
-  loading: h,
-  loadingText: b = "Loading...",
-  ...H
-}, J) => {
-  const [t, c] = s.useState(B ?? w), [Q, d] = s.useState(!1), g = s.useRef(null), [U, j] = s.useState(""), [Y, P] = s.useState(!1), [n, x] = s.useState(
-    new Map(u.map((e) => [e.value, e]))
-  ), Z = s.useCallback(
+  moreText: W = "more",
+  clearText: X = "Clear",
+  closeText: $ = "Close",
+  selectAllText: G = "Select All",
+  noResultsText: O = "No results found.",
+  searchText: q = "Search...",
+  addOptionOnSearchNotFound: h = !1,
+  showSelectAll: H = !0,
+  loading: b,
+  loadingText: g = "Loading...",
+  ...J
+}, Q) => {
+  const o = k !== void 0, [U, d] = l.useState(K), t = o ? k : U, [Y, u] = l.useState(!1), v = l.useRef(null), [Z, P] = l.useState(""), [F, M] = l.useState(!1), [c, x] = l.useState(
+    new Map(m.map((e) => [e.value, e]))
+  ), _ = l.useCallback(
     (e) => {
-      if (e.key === "Enter" && f) {
-        if (d(!0), e.preventDefault(), e.stopPropagation(), !e.currentTarget.value) return;
+      if (e.key === "Enter" && h) {
+        if (u(!0), e.preventDefault(), e.stopPropagation(), !e.currentTarget.value) return;
         const a = { value: e.currentTarget.value, label: e.currentTarget.value };
-        if (n.get(a.value) === void 0) {
+        if (c.get(a.value) === void 0) {
           x((N) => new Map(N).set(a.value, a));
           const i = [...t, a.value];
-          c(i), o(i), j("");
+          o || d(i), n(i), P("");
         }
       } else if (e.key === "Enter")
-        d(!0);
+        u(!0);
       else if (e.key === "Backspace" && !e.currentTarget.value) {
         const a = [...t];
-        a.pop(), c(a), o(a);
+        a.pop(), o || d(a), n(a);
       }
     },
-    [f, o, n, t]
-  ), E = s.useCallback(
+    [h, n, c, t, o]
+  ), E = l.useCallback(
     (e) => {
       const a = t.includes(e) ? t.filter((i) => i !== e) : [...t, e];
-      c(a), o(a);
+      o || d(a), n(a);
     },
-    [o, t]
-  ), v = s.useCallback(() => {
-    c([]), o([]), f && x(new Map(u.map((e) => [e.value, e])));
-  }, [o, f, u]), F = s.useCallback(() => {
-    d((e) => !e);
-  }, []), _ = s.useCallback(() => {
-    const e = t.slice(0, m);
-    c(e), o(e);
-  }, [m, t, o]), ee = s.useCallback(() => {
-    if (t.length === n.size)
-      v();
+    [n, t, o]
+  ), y = l.useCallback(() => {
+    o || d([]), n([]), h && x(new Map(m.map((e) => [e.value, e])));
+  }, [n, h, m, o]), ee = l.useCallback(() => {
+    u((e) => !e);
+  }, []), re = l.useCallback(() => {
+    const e = t.slice(0, p);
+    o || d(e), n(e);
+  }, [p, t, n, o]), te = l.useCallback(() => {
+    if (t.length === c.size)
+      y();
     else {
-      const e = Array.from(n.keys());
-      c(e), o(e);
+      const e = Array.from(c.keys());
+      o || d(e), n(e);
     }
-  }, [v, o, n, t.length]);
-  return s.useEffect(() => {
-    x(new Map(u.map((e) => [e.value, e])));
-  }, [u]), s.useEffect(() => {
-    c(w ?? []);
-  }, [w]), s.useLayoutEffect(() => {
-    g.current && (g?.current?.firstChild?.offsetTop < g?.current?.lastChild?.offsetTop ? P(!0) : P(!1));
-  }, [t]), /* @__PURE__ */ l(le, { open: Q, onOpenChange: d, modal: L, children: [
-    /* @__PURE__ */ r(oe, { asChild: !0, children: /* @__PURE__ */ r(
-      se,
+  }, [y, n, c, t.length, o]);
+  return l.useEffect(() => {
+    x(new Map(m.map((e) => [e.value, e])));
+  }, [m]), l.useLayoutEffect(() => {
+    v.current && (v?.current?.firstChild?.offsetTop < v?.current?.lastChild?.offsetTop ? M(!0) : M(!1));
+  }, [t]), /* @__PURE__ */ s(ne, { open: Y, onOpenChange: u, modal: V, children: [
+    /* @__PURE__ */ r(ce, { asChild: !0, children: /* @__PURE__ */ r(
+      oe,
       {
-        ref: J,
+        ref: Q,
         variant: "text",
-        loading: h,
-        disabled: C,
-        ...H,
-        onClick: F,
-        className: p(
+        loading: b,
+        disabled: j,
+        ...J,
+        onClick: ee,
+        className: f(
           "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",
-          Y && "h-auto",
+          F && "h-auto",
           z
         ),
         "data-placeholder": t.length ? void 0 : "",
         endIcon: /* @__PURE__ */ r(
-          ae,
+          se,
           {
             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(S, { children: t.length > 0 ? /* @__PURE__ */ l("div", { className: "flex justify-between items-center w-full", children: [
-          /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center gap-2", ref: g, children: [
-            t.slice(0, m).map((e) => {
-              const a = n.get(e), i = a?.icon;
-              return /* @__PURE__ */ l(D, { className: p(R({ variant: k }), { "text-gray-400 bg-gray-200": C || h }), children: [
+        children: /* @__PURE__ */ r(S, { children: t.length > 0 ? /* @__PURE__ */ s("div", { className: "flex justify-between items-center w-full", children: [
+          /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-2", ref: v, children: [
+            t.slice(0, p).map((e) => {
+              const a = c.get(e), i = a?.icon;
+              return /* @__PURE__ */ s(T, { className: f(B({ variant: C }), { "text-gray-400 bg-gray-200": j || b }), children: [
                 /* @__PURE__ */ r(
-                  M,
+                  I,
                   {
                     className: "h-4 w-4 cursor-pointer",
                     onClick: (N) => {
@@ -134,71 +132,71 @@ const R = re({
                 a?.label
               ] }, e);
             }),
-            t.length > m && /* @__PURE__ */ l(D, { className: p(R({ variant: k })), children: [
-              `+ ${t.length - m} ${V}`,
+            t.length > p && /* @__PURE__ */ s(T, { className: f(B({ variant: C })), children: [
+              `+ ${t.length - p} ${W}`,
               /* @__PURE__ */ r(
-                te,
+                le,
                 {
                   role: "button",
                   className: "ml-2 h-4.5 w-4.5 cursor-pointer",
                   onClick: (e) => {
-                    e.stopPropagation(), _();
+                    e.stopPropagation(), re();
                   }
                 }
               )
             ] }),
-            h && b ? b : null
+            b && g ? g : null
           ] }),
-          /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-1", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-1", children: [
             /* @__PURE__ */ r(
-              M,
+              I,
               {
                 role: "button",
                 className: "h-5 w-5 text-muted-foreground cursor-pointer",
                 onClick: (e) => {
-                  e.stopPropagation(), v();
+                  e.stopPropagation(), y();
                 },
                 "aria-label": "Clear"
               }
             ),
-            /* @__PURE__ */ r(T, { orientation: "vertical", className: "flex min-h-5 h-full" })
+            /* @__PURE__ */ r(A, { orientation: "vertical", className: "flex min-h-5 h-full" })
           ] })
-        ] }) : /* @__PURE__ */ r(S, { children: h && b ? b : K }) })
+        ] }) : /* @__PURE__ */ r(S, { children: b && g ? g : L }) })
       }
     ) }),
-    /* @__PURE__ */ r(ne, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => d(!1), children: /* @__PURE__ */ l(ce, { className: "w-[--radix-popper-anchor-width] max-h-[--radix-popper-available-height]", children: [
-      /* @__PURE__ */ r(ie, { placeholder: O, onKeyDown: Z, value: U, onValueChange: j }),
-      /* @__PURE__ */ l(de, { className: "", children: [
-        /* @__PURE__ */ r(ue, { children: G }),
-        /* @__PURE__ */ l(A, { children: [
-          q && /* @__PURE__ */ l(y, { onSelect: ee, className: "cursor-pointer", children: [
+    /* @__PURE__ */ r(ie, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => u(!1), children: /* @__PURE__ */ s(de, { className: "w-[--radix-popper-anchor-width] max-h-[--radix-popper-available-height]", children: [
+      /* @__PURE__ */ r(ue, { placeholder: q, onKeyDown: _, value: Z, onValueChange: P }),
+      /* @__PURE__ */ s(me, { className: "", children: [
+        /* @__PURE__ */ r(pe, { children: O }),
+        /* @__PURE__ */ s(R, { children: [
+          H && /* @__PURE__ */ s(w, { onSelect: te, className: "cursor-pointer", children: [
             /* @__PURE__ */ r(
               "div",
               {
-                className: p(
+                className: f(
                   "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
-                  t.length === n.size ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                  t.length === c.size ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                 ),
-                children: /* @__PURE__ */ r(I, { className: "h-4.5 w-4.5" })
+                children: /* @__PURE__ */ r(D, { className: "h-4.5 w-4.5" })
               }
             ),
-            /* @__PURE__ */ l("span", { children: [
+            /* @__PURE__ */ s("span", { children: [
               "(",
-              $,
+              G,
               ")"
             ] })
           ] }, "all"),
-          Array.from(n.values()).map((e) => {
+          Array.from(c.values()).map((e) => {
             const a = t.includes(e.value);
-            return /* @__PURE__ */ l(y, { onSelect: () => E(e.value), className: "cursor-pointer", children: [
+            return /* @__PURE__ */ s(w, { onSelect: () => E(e.value), className: "cursor-pointer", children: [
               /* @__PURE__ */ r(
                 "div",
                 {
-                  className: p(
+                  className: f(
                     "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
                     a ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                   ),
-                  children: /* @__PURE__ */ r(I, { className: "h-4.5 w-4.5" })
+                  children: /* @__PURE__ */ r(D, { 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" }),
@@ -206,20 +204,20 @@ const R = re({
             ] }, e.value);
           })
         ] }),
-        /* @__PURE__ */ r(me, {}),
-        /* @__PURE__ */ r(A, { children: /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
-          t.length > 0 && /* @__PURE__ */ l(S, { children: [
-            /* @__PURE__ */ r(y, { onSelect: v, className: "flex-1 justify-center cursor-pointer", children: W }),
-            /* @__PURE__ */ r(T, { orientation: "vertical", className: "flex min-h-6 h-full" })
+        /* @__PURE__ */ r(fe, {}),
+        /* @__PURE__ */ r(R, { children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+          t.length > 0 && /* @__PURE__ */ s(S, { children: [
+            /* @__PURE__ */ r(w, { onSelect: y, className: "flex-1 justify-center cursor-pointer", children: X }),
+            /* @__PURE__ */ r(A, { orientation: "vertical", className: "flex min-h-6 h-full" })
           ] }),
-          /* @__PURE__ */ r(y, { onSelect: () => d(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: X })
+          /* @__PURE__ */ r(w, { onSelect: () => u(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: $ })
         ] }) })
       ] })
     ] }) })
   ] });
-}, fe = s.forwardRef(pe);
-fe.displayName = "MultiSelect";
+}, be = l.forwardRef(he);
+be.displayName = "MultiSelect";
 export {
-  fe as MultiSelect
+  be as MultiSelect
 };
 //# sourceMappingURL=multiselect.es.js.map

package/dist/multiselect.es.js.map CHANGED Viewed

	@@ -1 +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<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 Important: Use a constant Array\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 Whether to show the select all option or not\r\n /\r\n showSelectAll?: boolean;\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 in the search input.\r\n /\r\n searchText?: string;\r\n\r\n /\r\n If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n * Optional, defaults to false.\r\n /\r\n addOptionOnSearchNotFound?: boolean;\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: _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 searchText = \"Search...\",\r\n addOptionOnSearchNotFound = false,\r\n showSelectAll = true,\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 [searchValue, setSearchValue] = React.useState(\"\");\r\n const [isWrapped, setIsWrapped] = React.useState(false);\r\n const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n new Map(_options.map(option => [option.value, option])),\r\n );\r\n\r\n const handleInputKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"Enter\" && addOptionOnSearchNotFound) {\r\n setIsPopoverOpen(true);\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!event.currentTarget.value) return;\r\n const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n if (options.get(newOption.value) === undefined) {\r\n setOptions(prev => {\r\n return new Map(prev).set(newOption.value, newOption);\r\n });\r\n const newSelectedValues = [...selectedValues, newOption.value];\r\n setSelectedValues(newSelectedValues);\r\n onValueChange(newSelectedValues);\r\n setSearchValue(\"\");\r\n }\r\n } else 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 [addOptionOnSearchNotFound, onValueChange, options, selectedValues],\r\n );\r\n\r\n const toggleOption = React.useCallback(\r\n (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 [onValueChange, selectedValues],\r\n );\r\n\r\n const handleClear = React.useCallback(() => {\r\n setSelectedValues([]);\r\n onValueChange([]);\r\n if (addOptionOnSearchNotFound) {\r\n setOptions(new Map(_options.map(option => [option.value, option])));\r\n }\r\n }, [onValueChange, addOptionOnSearchNotFound, _options]);\r\n\r\n const handleTogglePopover = React.useCallback(() => {\r\n setIsPopoverOpen(prev => !prev);\r\n }, []);\r\n\r\n const clearExtraOptions = React.useCallback(() => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n setSelectedValues(newSelectedValues);\r\n onValueChange(newSelectedValues);\r\n }, [maxCount, selectedValues, onValueChange]);\r\n\r\n const toggleAll = React.useCallback(() => {\r\n if (selectedValues.length === options.size) {\r\n handleClear();\r\n } else {\r\n const allValues = Array.from(options.keys());\r\n setSelectedValues(allValues);\r\n onValueChange(allValues);\r\n }\r\n }, [handleClear, onValueChange, options, selectedValues.length]);\r\n\r\n React.useEffect(() => {\r\n setOptions(new Map(_options.map(option => [option.value, option])));\r\n }, [_options]);\r\n\r\n React.useEffect(() => {\r\n setSelectedValues(value ?? []);\r\n }, [value]);\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.get(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] max-h-[--radix-popper-available-height]\">\r\n <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n <CommandList className=\"\">\r\n <CommandEmpty>{noResultsText}</CommandEmpty>\r\n <CommandGroup>\r\n {showSelectAll && (\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.size ? \"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 )}\r\n {Array.from(options.values()).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","searchText","addOptionOnSearchNotFound","showSelectAll","loading","loadingText","props","ref","selectedValues","setSelectedValues","React","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}
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<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 Important: Use a constant Array\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 Whether to show the select all option or not\r\n /\r\n showSelectAll?: boolean;\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 in the search input.\r\n /\r\n searchText?: string;\r\n\r\n /\r\n If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n * Optional, defaults to false.\r\n /\r\n addOptionOnSearchNotFound?: boolean;\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: _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 searchText = \"Search...\",\r\n addOptionOnSearchNotFound = false,\r\n showSelectAll = true,\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 isControlled = value !== undefined;\r\n const [internalSelectedValues, setInternalSelectedValues] = React.useState<T[]>(defaultValue);\r\n const selectedValues = isControlled ? value : internalSelectedValues;\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const [searchValue, setSearchValue] = React.useState(\"\");\r\n const [isWrapped, setIsWrapped] = React.useState(false);\r\n const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n new Map(_options.map(option => [option.value, option])),\r\n );\r\n\r\n const handleInputKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"Enter\" && addOptionOnSearchNotFound) {\r\n setIsPopoverOpen(true);\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!event.currentTarget.value) return;\r\n const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n if (options.get(newOption.value) === undefined) {\r\n setOptions(prev => {\r\n return new Map(prev).set(newOption.value, newOption);\r\n });\r\n const newSelectedValues = [...selectedValues, newOption.value];\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n setSearchValue(\"\");\r\n }\r\n } else 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 if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n }\r\n },\r\n [addOptionOnSearchNotFound, onValueChange, options, selectedValues, isControlled],\r\n );\r\n\r\n const toggleOption = React.useCallback(\r\n (option: T) => {\r\n const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n },\r\n [onValueChange, selectedValues, isControlled],\r\n );\r\n\r\n const handleClear = React.useCallback(() => {\r\n if (!isControlled) {\r\n setInternalSelectedValues([]);\r\n }\r\n onValueChange([]);\r\n if (addOptionOnSearchNotFound) {\r\n setOptions(new Map(_options.map(option => [option.value, option])));\r\n }\r\n }, [onValueChange, addOptionOnSearchNotFound, _options, isControlled]);\r\n\r\n const handleTogglePopover = React.useCallback(() => {\r\n setIsPopoverOpen(prev => !prev);\r\n }, []);\r\n\r\n const clearExtraOptions = React.useCallback(() => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n if (!isControlled) {\r\n setInternalSelectedValues(newSelectedValues);\r\n }\r\n onValueChange(newSelectedValues);\r\n }, [maxCount, selectedValues, onValueChange, isControlled]);\r\n\r\n const toggleAll = React.useCallback(() => {\r\n if (selectedValues.length === options.size) {\r\n handleClear();\r\n } else {\r\n const allValues = Array.from(options.keys());\r\n if (!isControlled) {\r\n setInternalSelectedValues(allValues);\r\n }\r\n onValueChange(allValues);\r\n }\r\n }, [handleClear, onValueChange, options, selectedValues.length, isControlled]);\r\n\r\n React.useEffect(() => {\r\n setOptions(new Map(_options.map(option => [option.value, option])));\r\n }, [_options]);\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.get(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] max-h-[--radix-popper-available-height]\">\r\n <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n <CommandList className=\"\">\r\n <CommandEmpty>{noResultsText}</CommandEmpty>\r\n <CommandGroup>\r\n {showSelectAll && (\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.size ? \"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 )}\r\n {Array.from(options.values()).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","searchText","addOptionOnSearchNotFound","showSelectAll","loading","loadingText","props","ref","isControlled","internalSelectedValues","setInternalSelectedValues","React","selectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}

package/dist/sidebar.es.js CHANGED Viewed

@@ -239,7 +239,7 @@ const ae = i.forwardRef(
       ref: o,
       "data-sidebar": "group-label",
       className: d(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         e
       ),