@intlayer/design-system 5.1.4 → 5.1.6

package/dist/components/Pattern/DotPattern.mjs

@@ -18,7 +18,7 @@ const DotPattern = ({
     {
       "aria-hidden": "true",
       className: cn(
-        "fill-neutral/30 dark:fill-neutral-dark/30 pointer-events-none absolute inset-0 h-full w-full",
+        "fill-neutral/30 pointer-events-none absolute inset-0 h-full w-full",
         className
       ),
       ...props,

package/dist/components/Pattern/DotPattern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DotPattern.mjs","sources":["../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\n\nimport { cn } from '../../utils/cn';\n\ntype DotPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  cx?: number;\n  cy?: number;\n  cr?: number;\n} & SVGProps<SVGSVGElement>;\n\nexport const DotPattern: FC<DotPatternProps> = ({\n  width = 16,\n  height = 16,\n  x = 0,\n  y = 0,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/30 dark:fill-neutral-dark/30 pointer-events-none absolute inset-0 h-full w-full',\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n          patternContentUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;AAcO,MAAM,aAAkC,CAAC;AAAA,EAC9C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAM;AAGf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QACC,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb,qBAAoB;AAAA,YACpB;AAAA,YACA;AAAA,YAEA,8BAAC,UAAO,EAAA,IAAG,kBAAiB,IAAQ,IAAQ,GAAG,GAAI,CAAA;AAAA,UAAA;AAAA,QAAA,GAEvD;AAAA,QACA,oBAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACxE;AAEJ;"}
+{"version":3,"file":"DotPattern.mjs","sources":["../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\n\nimport { cn } from '../../utils/cn';\n\ntype DotPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  cx?: number;\n  cy?: number;\n  cr?: number;\n} & SVGProps<SVGSVGElement>;\n\nexport const DotPattern: FC<DotPatternProps> = ({\n  width = 16,\n  height = 16,\n  x = 0,\n  y = 0,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/30 pointer-events-none absolute inset-0 h-full w-full',\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n          patternContentUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <circle id=\"pattern-circle\" cx={cx} cy={cy} r={cr} />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;AAcO,MAAM,aAAkC,CAAC;AAAA,EAC9C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAM;AAGf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QACC,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb,qBAAoB;AAAA,YACpB;AAAA,YACA;AAAA,YAEA,8BAAC,UAAO,EAAA,IAAG,kBAAiB,IAAQ,IAAQ,GAAG,GAAI,CAAA;AAAA,UAAA;AAAA,QAAA,GAEvD;AAAA,QACA,oBAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACxE;AAEJ;"}

package/dist/components/Pattern/GridPattern.cjs

@@ -19,7 +19,7 @@ const GridPattern = ({
     {
       "aria-hidden": "true",
       className: utils_cn.cn(
-        "fill-neutral/10 dark:fill-neutral-dark/10 stroke-neutral/10 dark:stroke-neutral-dark/10 pointer-events-none absolute inset-0 h-full max-h-full w-full",
+        "fill-neutral/10 stroke-neutral/10 pointer-events-none absolute inset-0 h-full max-h-full w-full",
         className
       ),
       ...props,

package/dist/components/Pattern/GridPattern.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridPattern.cjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype GridPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  squares?: [x: number, y: number][];\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/10 dark:fill-neutral-dark/10 stroke-neutral/10 dark:stroke-neutral-dark/10 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <path\n            d={`M.5 ${height}V.5H${width}`}\n            fill=\"none\"\n            strokeDasharray={strokeDasharray}\n          />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n      {squares && (\n        <svg x={x} y={y} className=\"overflow-visible\">\n          {squares.map(([x, y]) => (\n            <rect\n              strokeWidth=\"0\"\n              key={`${x}-${y}`}\n              width={width - 1}\n              height={height - 1}\n              x={x * width + 1}\n              y={y * height + 1}\n            />\n          ))}\n        </svg>\n      )}\n    </svg>\n  );\n};\n"],"names":["useId","jsxs","cn","jsx","x","y"],"mappings":";;;;;AAYO,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAKA,aAAAA,MAAM;AAGf,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,+BAAC,QACC,EAAA,UAAAA,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAEA,UAAAA,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,gBAC5B,MAAK;AAAA,gBACL;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QACAA,2BAAAA,IAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,QACrE,WACCA,2BAAA,IAAC,OAAI,EAAA,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACC,IAAGC,EAAC,MACjBF,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YAEZ,OAAO,QAAQ;AAAA,YACf,QAAQ,SAAS;AAAA,YACjB,GAAGC,KAAI,QAAQ;AAAA,YACf,GAAGC,KAAI,SAAS;AAAA,UAAA;AAAA,UAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,QAAA,CAMjB,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;;"}
+{"version":3,"file":"GridPattern.cjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype GridPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  squares?: [x: number, y: number][];\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/10 stroke-neutral/10 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <path\n            d={`M.5 ${height}V.5H${width}`}\n            fill=\"none\"\n            strokeDasharray={strokeDasharray}\n          />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n      {squares && (\n        <svg x={x} y={y} className=\"overflow-visible\">\n          {squares.map(([x, y]) => (\n            <rect\n              strokeWidth=\"0\"\n              key={`${x}-${y}`}\n              width={width - 1}\n              height={height - 1}\n              x={x * width + 1}\n              y={y * height + 1}\n            />\n          ))}\n        </svg>\n      )}\n    </svg>\n  );\n};\n"],"names":["useId","jsxs","cn","jsx","x","y"],"mappings":";;;;;AAYO,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAKA,aAAAA,MAAM;AAGf,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,+BAAC,QACC,EAAA,UAAAA,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAEA,UAAAA,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,gBAC5B,MAAK;AAAA,gBACL;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QACAA,2BAAAA,IAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,QACrE,WACCA,2BAAA,IAAC,OAAI,EAAA,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACC,IAAGC,EAAC,MACjBF,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YAEZ,OAAO,QAAQ;AAAA,YACf,QAAQ,SAAS;AAAA,YACjB,GAAGC,KAAI,QAAQ;AAAA,YACf,GAAGC,KAAI,SAAS;AAAA,UAAA;AAAA,UAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,QAAA,CAMjB,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;;"}

package/dist/components/Pattern/GridPattern.mjs

@@ -17,7 +17,7 @@ const GridPattern = ({
     {
       "aria-hidden": "true",
       className: cn(
-        "fill-neutral/10 dark:fill-neutral-dark/10 stroke-neutral/10 dark:stroke-neutral-dark/10 pointer-events-none absolute inset-0 h-full max-h-full w-full",
+        "fill-neutral/10 stroke-neutral/10 pointer-events-none absolute inset-0 h-full max-h-full w-full",
         className
       ),
       ...props,

package/dist/components/Pattern/GridPattern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridPattern.mjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype GridPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  squares?: [x: number, y: number][];\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/10 dark:fill-neutral-dark/10 stroke-neutral/10 dark:stroke-neutral-dark/10 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <path\n            d={`M.5 ${height}V.5H${width}`}\n            fill=\"none\"\n            strokeDasharray={strokeDasharray}\n          />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n      {squares && (\n        <svg x={x} y={y} className=\"overflow-visible\">\n          {squares.map(([x, y]) => (\n            <rect\n              strokeWidth=\"0\"\n              key={`${x}-${y}`}\n              width={width - 1}\n              height={height - 1}\n              x={x * width + 1}\n              y={y * height + 1}\n            />\n          ))}\n        </svg>\n      )}\n    </svg>\n  );\n};\n"],"names":["x","y"],"mappings":";;;AAYO,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAM;AAGf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QACC,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAEA,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,gBAC5B,MAAK;AAAA,gBACL;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QACA,oBAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,QACrE,WACC,oBAAC,OAAI,EAAA,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACA,IAAGC,EAAC,MACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YAEZ,OAAO,QAAQ;AAAA,YACf,QAAQ,SAAS;AAAA,YACjB,GAAGD,KAAI,QAAQ;AAAA,YACf,GAAGC,KAAI,SAAS;AAAA,UAAA;AAAA,UAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,QAAA,CAMjB,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}
+{"version":3,"file":"GridPattern.mjs","sources":["../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { type FC, type SVGProps, useId } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype GridPatternProps = {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  squares?: [x: number, y: number][];\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => {\n  const id = useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        'fill-neutral/10 stroke-neutral/10 pointer-events-none absolute inset-0 h-full max-h-full w-full',\n        className\n      )}\n      {...props}\n    >\n      <defs>\n        <pattern\n          id={id}\n          width={width}\n          height={height}\n          patternUnits=\"userSpaceOnUse\"\n          x={x}\n          y={y}\n        >\n          <path\n            d={`M.5 ${height}V.5H${width}`}\n            fill=\"none\"\n            strokeDasharray={strokeDasharray}\n          />\n        </pattern>\n      </defs>\n      <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n      {squares && (\n        <svg x={x} y={y} className=\"overflow-visible\">\n          {squares.map(([x, y]) => (\n            <rect\n              strokeWidth=\"0\"\n              key={`${x}-${y}`}\n              width={width - 1}\n              height={height - 1}\n              x={x * width + 1}\n              y={y * height + 1}\n            />\n          ))}\n        </svg>\n      )}\n    </svg>\n  );\n};\n"],"names":["x","y"],"mappings":";;;AAYO,MAAM,cAAoC,CAAC;AAAA,EAChD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAM;AAGf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QACC,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAEA,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,GAAG,OAAO,MAAM,OAAO,KAAK;AAAA,gBAC5B,MAAK;AAAA,gBACL;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QACA,oBAAC,QAAK,EAAA,OAAM,QAAO,QAAO,QAAO,aAAa,GAAG,MAAM,QAAQ,EAAE,IAAK,CAAA;AAAA,QACrE,WACC,oBAAC,OAAI,EAAA,GAAM,GAAM,WAAU,oBACxB,UAAA,QAAQ,IAAI,CAAC,CAACA,IAAGC,EAAC,MACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YAEZ,OAAO,QAAQ;AAAA,YACf,QAAQ,SAAS;AAAA,YACjB,GAAGD,KAAI,QAAQ;AAAA,YACf,GAAGC,KAAI,SAAS;AAAA,UAAA;AAAA,UAJX,GAAGD,EAAC,IAAIC,EAAC;AAAA,QAAA,CAMjB,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}

package/dist/components/Popover/index.cjs

@@ -13,7 +13,7 @@ const Popover = ({ children, content }) => /* @__PURE__ */ jsxRuntime.jsxs(
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "bg-card dark:bg-card-dark absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100",
+          className: "bg-card absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100",
           "aria-hidden": true,
           children: content
         }

package/dist/components/Popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\ntype PopoverProps = {\n  content: ReactNode | string;\n  children: ReactNode;\n};\n\nexport const Popover: FC<PopoverProps> = ({ children, content }) => (\n  <div\n    className=\"group relative\"\n    aria-haspopup={true}\n    aria-expanded={false}\n    aria-label=\"Display the popup by hovering this element\"\n  >\n    {children}\n    <div\n      className=\"bg-card dark:bg-card-dark absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100\"\n      aria-hidden={true}\n    >\n      {content}\n    </div>\n  </div>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;AAOO,MAAM,UAA4B,CAAC,EAAE,UAAU,QACpD,MAAAA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,cAAW;AAAA,IAEV,UAAA;AAAA,MAAA;AAAA,MACDC,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAa;AAAA,UAEZ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\ntype PopoverProps = {\n  content: ReactNode | string;\n  children: ReactNode;\n};\n\nexport const Popover: FC<PopoverProps> = ({ children, content }) => (\n  <div\n    className=\"group relative\"\n    aria-haspopup={true}\n    aria-expanded={false}\n    aria-label=\"Display the popup by hovering this element\"\n  >\n    {children}\n    <div\n      className=\"bg-card absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100\"\n      aria-hidden={true}\n    >\n      {content}\n    </div>\n  </div>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;AAOO,MAAM,UAA4B,CAAC,EAAE,UAAU,QACpD,MAAAA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,cAAW;AAAA,IAEV,UAAA;AAAA,MAAA;AAAA,MACDC,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAa;AAAA,UAEZ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;;"}

package/dist/components/Popover/index.mjs

@@ -11,7 +11,7 @@ const Popover = ({ children, content }) => /* @__PURE__ */ jsxs(
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "bg-card dark:bg-card-dark absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100",
+          className: "bg-card absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100",
           "aria-hidden": true,
           children: content
         }

package/dist/components/Popover/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\ntype PopoverProps = {\n  content: ReactNode | string;\n  children: ReactNode;\n};\n\nexport const Popover: FC<PopoverProps> = ({ children, content }) => (\n  <div\n    className=\"group relative\"\n    aria-haspopup={true}\n    aria-expanded={false}\n    aria-label=\"Display the popup by hovering this element\"\n  >\n    {children}\n    <div\n      className=\"bg-card dark:bg-card-dark absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100\"\n      aria-hidden={true}\n    >\n      {content}\n    </div>\n  </div>\n);\n"],"names":[],"mappings":";AAOO,MAAM,UAA4B,CAAC,EAAE,UAAU,QACpD,MAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,cAAW;AAAA,IAEV,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAa;AAAA,UAEZ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\ntype PopoverProps = {\n  content: ReactNode | string;\n  children: ReactNode;\n};\n\nexport const Popover: FC<PopoverProps> = ({ children, content }) => (\n  <div\n    className=\"group relative\"\n    aria-haspopup={true}\n    aria-expanded={false}\n    aria-label=\"Display the popup by hovering this element\"\n  >\n    {children}\n    <div\n      className=\"bg-card absolute bottom-0 left-5 z-50 translate-y-[150%] rounded-md p-1 text-xs text-opacity-75 opacity-0 ring-2 ring-current transition-all delay-200 duration-200 ease-in-out hover:delay-0 group-hover:opacity-100\"\n      aria-hidden={true}\n    >\n      {content}\n    </div>\n  </div>\n);\n"],"names":[],"mappings":";AAOO,MAAM,UAA4B,CAAC,EAAE,UAAU,QACpD,MAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,cAAW;AAAA,IAEV,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAa;AAAA,UAEZ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;"}

package/dist/components/RightDrawer/RightDrawer.cjs

@@ -76,7 +76,7 @@ const RightDrawer = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed right-0 top-0 z-50 flex h-full justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(components_MaxWidthSmoother_index.MaxWidthSmoother, { isHidden: !isOpen, align: "right", children: /* @__PURE__ */ jsxRuntime.jsxs(
     components_Container_index.Container,
     {
-      className: "text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]",
+      className: "text-text relative flex h-screen w-screen flex-col md:w-[400px]",
       ref: panelRef,
       roundedSize: "none",
       children: [
@@ -112,7 +112,7 @@ const RightDrawer = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-col overflow-y-auto p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex-1",
+            className: "flex flex-1 flex-col",
             onClick: handleSpareSpaceClick,
             ref: childrenContainerRef,
             children

package/dist/components/RightDrawer/RightDrawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n  RefObject,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useShallow","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","Button","ChevronLeft","X"],"mappings":"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"}
+{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  type MouseEventHandler,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex flex-1 flex-col\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useShallow","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","Button","ChevronLeft","X"],"mappings":"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"}

package/dist/components/RightDrawer/RightDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,EAAE,EAKR,MAAM,OAAO,CAAC;AAUf,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAyI5C,CAAC"}
+{"version":3,"file":"RightDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AAUf,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAyI5C,CAAC"}

package/dist/components/RightDrawer/RightDrawer.mjs

@@ -74,7 +74,7 @@ const RightDrawer = ({
   return /* @__PURE__ */ jsx("div", { className: "fixed right-0 top-0 z-50 flex h-full justify-end", children: /* @__PURE__ */ jsx(MaxWidthSmoother, { isHidden: !isOpen, align: "right", children: /* @__PURE__ */ jsxs(
     Container,
     {
-      className: "text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]",
+      className: "text-text relative flex h-screen w-screen flex-col md:w-[400px]",
       ref: panelRef,
       roundedSize: "none",
       children: [
@@ -110,7 +110,7 @@ const RightDrawer = ({
         /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col overflow-y-auto p-2", children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex-1",
+            className: "flex flex-1 flex-col",
             onClick: handleSpareSpaceClick,
             ref: childrenContainerRef,
             children

package/dist/components/RightDrawer/RightDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n  RefObject,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  type MouseEventHandler,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex flex-1 flex-col\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Select/Multiselect.cjs

@@ -187,11 +187,11 @@ const MultiSelectTrigger = ({
     {
       className: utils_cn.cn(
         "flex w-full flex-col gap-3 rounded-lg p-1 py-2",
-        "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-        "bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all",
-        "border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-        "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
-        validationStyleEnabled && "valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark",
+        "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring focus:outline-hidden flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        "bg-input-background text-input-text w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all",
+        "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+        "aria-[invalid=true]:border-error",
+        validationStyleEnabled && "valid:border-success invalid:border-error",
         className
       ),
       ...props,
@@ -258,7 +258,7 @@ const MultiSelectInput = ({
       onFocus: () => setOpen(true),
       onClick: () => setActiveIndex(-1),
       className: utils_cn.cn(
-        "ml-2 flex-1 cursor-pointer outline-none",
+        "outline-hidden ml-2 flex-1 cursor-pointer",
         className,
         activeIndex !== -1 && "caret-transparent"
       )
@@ -275,7 +275,7 @@ const MultiSelectList = ({ className, children }) => /* @__PURE__ */ jsxRuntime.
   components_Command_index.Command.List,
   {
     className: utils_cn.cn(
-      "border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors",
+      "border-muted bg-input-background absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors",
       className
     ),
     children: [
@@ -304,7 +304,7 @@ const MultiSelectItem = ({ className, value, children, ...props }) => {
       },
       className: utils_cn.cn(
         "flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors",
-        "hover:bg-neutral/10 dark:hover:bg-neutral-dark/10",
+        "hover:bg-neutral/10",
         className,
         isIncluded && "opacity-50",
         props.disabled && "cursor-not-allowed opacity-50"
@@ -317,7 +317,6 @@ const MultiSelectItem = ({ className, value, children, ...props }) => {
     }
   );
 };
-MultiSelectItem.displayName = "MultiSelectItem";
 const MultiSelect = MultiSelectRoot;
 MultiSelect.Trigger = MultiSelectTrigger;
 MultiSelect.Input = MultiSelectInput;

package/dist/components/Select/Multiselect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.cjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type Dispatch,\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type LegacyRef,\n  type MouseEventHandler,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n  value: string[];\n  onValueChange: (value: string) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inputValue: string;\n  setInputValue: Dispatch<SetStateAction<string>>;\n  activeIndex: number;\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  ref: RefObject<HTMLInputElement | null>;\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n  const context = useContext(MultiSelectContext);\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n  return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n  values?: string[];\n  defaultValues?: string[];\n  onValueChange?: (value: string[]) => void;\n  loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelectTrigger>\n *     <MultiSelectInput placeholder=\"Select your framework\" />\n *   </MultiSelectTrigger>\n *   <MultiSelectContent>\n *     <MultiSelectList>\n *       <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n *       <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n *       <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n *     </MultiSelectList>\n *   </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  onValueChange: onValueChange,\n  loop = false,\n  className,\n  children,\n  dir,\n  ...props\n}) => {\n  const [value, setValue] = useState<string[]>(defaultValues ?? []);\n  const [inputValue, setInputValue] = useState('');\n  const [open, setOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isValueSelected, setIsValueSelected] = useState(false);\n  const [selectedValue, setSelectedValue] = useState('');\n\n  useEffect(() => {\n    if (valuesProp) {\n      setValue(valuesProp);\n    }\n  }, [valuesProp]);\n\n  const onValueChangeHandler = useCallback(\n    (val: string) => {\n      if (value.includes(val)) {\n        const newValue = value.filter((item) => item !== val);\n        setValue(newValue);\n        onValueChange?.(newValue);\n      } else {\n        const newValue = [...value, val];\n        setValue(newValue);\n        onValueChange?.(newValue);\n      }\n    },\n\n    [value]\n  );\n\n  const handleSelect = useCallback(\n    (e: SyntheticEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const target = e.currentTarget;\n      const selection = target.value.substring(\n        target.selectionStart ?? 0,\n        target.selectionEnd ?? 0\n      );\n\n      setSelectedValue(selection);\n      setIsValueSelected(selection === inputValue);\n    },\n    [inputValue]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n      const target = inputRef.current;\n\n      if (!target) return;\n\n      const moveNext = () => {\n        const nextIndex = activeIndex + 1;\n        setActiveIndex(\n          nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n        );\n      };\n\n      const movePrev = () => {\n        const prevIndex = activeIndex - 1;\n        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n      };\n\n      const moveCurrent = () => {\n        const newIndex =\n          activeIndex - 1 <= 0\n            ? value.length - 1 === 0\n              ? -1\n              : 0\n            : activeIndex - 1;\n        setActiveIndex(newIndex);\n      };\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          if (dir === 'rtl') {\n            if (value.length > 0 && (activeIndex !== -1 || loop)) {\n              moveNext();\n            }\n          } else if (value.length > 0 && target.selectionStart === 0) {\n            movePrev();\n          }\n          break;\n\n        case 'ArrowRight':\n          if (dir === 'rtl') {\n            if (value.length > 0 && target.selectionStart === 0) {\n              movePrev();\n            }\n          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n            moveNext();\n          }\n          break;\n\n        case 'Backspace':\n        case 'Delete':\n          if (value.length > 0) {\n            if (activeIndex !== -1 && activeIndex < value.length) {\n              onValueChangeHandler(value[activeIndex]);\n              moveCurrent();\n            } else if (\n              (target.selectionStart === 0 && selectedValue === inputValue) ||\n              isValueSelected\n            ) {\n              onValueChangeHandler(value[value.length - 1]);\n            }\n          }\n          break;\n\n        case 'Enter':\n          setOpen(true);\n          break;\n\n        case 'Escape':\n          if (activeIndex !== -1) {\n            setActiveIndex(-1);\n          } else if (open) {\n            setOpen(false);\n          }\n          break;\n      }\n    },\n\n    [value, inputValue, activeIndex, loop]\n  );\n\n  const memoValue = useMemo(\n    () => ({\n      value,\n      onValueChange: onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      ref: inputRef,\n      handleSelect,\n    }),\n    [\n      value,\n      onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      inputRef,\n      handleSelect,\n    ]\n  );\n\n  return (\n    <MultiSelectContext value={memoValue}>\n      <CommandRoot\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n          className\n        )}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </CommandRoot>\n    </MultiSelectContext>\n  );\n};\n\nconst MultiSelectTrigger: FC<\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n> = ({\n  className,\n  getBadgeValue = (value) => value,\n  validationStyleEnabled = false,\n  children,\n  ...props\n}) => {\n  const { value, onValueChange, activeIndex } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n        'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n        'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n        'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        validationStyleEnabled &&\n          'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n        className\n      )}\n      {...props}\n    >\n      {value.length > 0 && (\n        <div className=\"flex w-full flex-wrap gap-1\">\n          {value.map((item, index) => (\n            <Badge\n              key={item}\n              className={cn(\n                'flex items-center gap-1 rounded-xl px-1',\n                activeIndex === index && 'ring-muted-foreground ring-2'\n              )}\n              color=\"text\"\n            >\n              <span className=\"text-xs\">{getBadgeValue(item)}</span>\n              <button\n                aria-label={`Remove ${item} option`}\n                aria-roledescription=\"button to remove option\"\n                onMouseDown={mousePreventDefault}\n                onClick={() => onValueChange(item)}\n              >\n                <span className=\"sr-only\">Remove {item} option</span>\n                <RemoveIcon className=\"size-4 cursor-pointer\" />\n              </button>\n            </Badge>\n          ))}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nconst MultiSelectInput: FC<ComponentProps<typeof Command.Input>> = ({\n  className,\n  ...props\n}) => {\n  const {\n    setOpen,\n    inputValue,\n    setInputValue,\n    activeIndex,\n    setActiveIndex,\n    handleSelect,\n    ref: inputRef,\n  } = useMultiSelect();\n\n  return (\n    <Command.Input\n      {...props}\n      tabIndex={0}\n      ref={inputRef as LegacyRef<HTMLInputElement>}\n      value={inputValue}\n      onValueChange={activeIndex === -1 ? setInputValue : undefined}\n      onSelect={handleSelect}\n      onBlur={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onClick={() => setActiveIndex(-1)}\n      className={cn(\n        'ml-2 flex-1 cursor-pointer outline-none',\n        className,\n        activeIndex !== -1 && 'caret-transparent'\n      )}\n    />\n  );\n};\n\nconst MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>> = ({\n  children,\n}) => {\n  const { open } = useMultiSelect();\n  return <div className=\"relative\">{open && children}</div>;\n};\n\nconst MultiSelectList: typeof Command.List = ({ className, children }) => (\n  <Command.List\n    className={cn(\n      'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n      className\n    )}\n  >\n    {children}\n    <Command.Empty>\n      <span className=\"text-muted-foreground\">No results found</span>\n    </Command.Empty>\n  </Command.List>\n);\n\nconst MultiSelectItem: FC<\n  { value: string } & ComponentProps<typeof Command.Item>\n> = ({ className, value, children, ...props }) => {\n  const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const isIncluded = Options.includes(value);\n  return (\n    <Command.Item\n      {...props}\n      onSelect={() => {\n        onValueChange(value);\n        setInputValue('');\n      }}\n      className={cn(\n        'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n        'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n        className,\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50'\n      )}\n      onMouseDown={mousePreventDefault}\n    >\n      {children}\n      {isIncluded && <Check className=\"size-4\" />}\n    </Command.Item>\n  );\n};\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n  Trigger: typeof MultiSelectTrigger;\n  Input: typeof MultiSelectInput;\n  Content: typeof MultiSelectContent;\n  List: typeof MultiSelectList;\n  Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select your framework\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["createContext","useContext","useState","useRef","useEffect","useCallback","useMemo","jsx","CommandRoot","cn","jsxs","Badge","RemoveIcon","Command","Check"],"mappings":"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"}
+{"version":3,"file":"Multiselect.cjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type Dispatch,\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type LegacyRef,\n  type MouseEventHandler,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n  value: string[];\n  onValueChange: (value: string) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inputValue: string;\n  setInputValue: Dispatch<SetStateAction<string>>;\n  activeIndex: number;\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  ref: RefObject<HTMLInputElement | null>;\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n  const context = useContext(MultiSelectContext);\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n  return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n  values?: string[];\n  defaultValues?: string[];\n  onValueChange?: (value: string[]) => void;\n  loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelectTrigger>\n *     <MultiSelectInput placeholder=\"Select your framework\" />\n *   </MultiSelectTrigger>\n *   <MultiSelectContent>\n *     <MultiSelectList>\n *       <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n *       <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n *       <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n *     </MultiSelectList>\n *   </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  onValueChange: onValueChange,\n  loop = false,\n  className,\n  children,\n  dir,\n  ...props\n}) => {\n  const [value, setValue] = useState<string[]>(defaultValues ?? []);\n  const [inputValue, setInputValue] = useState('');\n  const [open, setOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isValueSelected, setIsValueSelected] = useState(false);\n  const [selectedValue, setSelectedValue] = useState('');\n\n  useEffect(() => {\n    if (valuesProp) {\n      setValue(valuesProp);\n    }\n  }, [valuesProp]);\n\n  const onValueChangeHandler = useCallback(\n    (val: string) => {\n      if (value.includes(val)) {\n        const newValue = value.filter((item) => item !== val);\n        setValue(newValue);\n        onValueChange?.(newValue);\n      } else {\n        const newValue = [...value, val];\n        setValue(newValue);\n        onValueChange?.(newValue);\n      }\n    },\n\n    [value]\n  );\n\n  const handleSelect = useCallback(\n    (e: SyntheticEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const target = e.currentTarget;\n      const selection = target.value.substring(\n        target.selectionStart ?? 0,\n        target.selectionEnd ?? 0\n      );\n\n      setSelectedValue(selection);\n      setIsValueSelected(selection === inputValue);\n    },\n    [inputValue]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n      const target = inputRef.current;\n\n      if (!target) return;\n\n      const moveNext = () => {\n        const nextIndex = activeIndex + 1;\n        setActiveIndex(\n          nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n        );\n      };\n\n      const movePrev = () => {\n        const prevIndex = activeIndex - 1;\n        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n      };\n\n      const moveCurrent = () => {\n        const newIndex =\n          activeIndex - 1 <= 0\n            ? value.length - 1 === 0\n              ? -1\n              : 0\n            : activeIndex - 1;\n        setActiveIndex(newIndex);\n      };\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          if (dir === 'rtl') {\n            if (value.length > 0 && (activeIndex !== -1 || loop)) {\n              moveNext();\n            }\n          } else if (value.length > 0 && target.selectionStart === 0) {\n            movePrev();\n          }\n          break;\n\n        case 'ArrowRight':\n          if (dir === 'rtl') {\n            if (value.length > 0 && target.selectionStart === 0) {\n              movePrev();\n            }\n          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n            moveNext();\n          }\n          break;\n\n        case 'Backspace':\n        case 'Delete':\n          if (value.length > 0) {\n            if (activeIndex !== -1 && activeIndex < value.length) {\n              onValueChangeHandler(value[activeIndex]);\n              moveCurrent();\n            } else if (\n              (target.selectionStart === 0 && selectedValue === inputValue) ||\n              isValueSelected\n            ) {\n              onValueChangeHandler(value[value.length - 1]);\n            }\n          }\n          break;\n\n        case 'Enter':\n          setOpen(true);\n          break;\n\n        case 'Escape':\n          if (activeIndex !== -1) {\n            setActiveIndex(-1);\n          } else if (open) {\n            setOpen(false);\n          }\n          break;\n      }\n    },\n\n    [value, inputValue, activeIndex, loop]\n  );\n\n  const memoValue = useMemo(\n    () => ({\n      value,\n      onValueChange: onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      ref: inputRef,\n      handleSelect,\n    }),\n    [\n      value,\n      onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      inputRef,\n      handleSelect,\n    ]\n  );\n\n  return (\n    <MultiSelectContext value={memoValue}>\n      <CommandRoot\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n          className\n        )}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </CommandRoot>\n    </MultiSelectContext>\n  );\n};\n\nconst MultiSelectTrigger: FC<\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n> = ({\n  className,\n  getBadgeValue = (value) => value,\n  validationStyleEnabled = false,\n  children,\n  ...props\n}) => {\n  const { value, onValueChange, activeIndex } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n        'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring focus:outline-hidden flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n        'bg-input-background text-input-text w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'aria-[invalid=true]:border-error',\n        validationStyleEnabled && 'valid:border-success invalid:border-error',\n        className\n      )}\n      {...props}\n    >\n      {value.length > 0 && (\n        <div className=\"flex w-full flex-wrap gap-1\">\n          {value.map((item, index) => (\n            <Badge\n              key={item}\n              className={cn(\n                'flex items-center gap-1 rounded-xl px-1',\n                activeIndex === index && 'ring-muted-foreground ring-2'\n              )}\n              color=\"text\"\n            >\n              <span className=\"text-xs\">{getBadgeValue(item)}</span>\n              <button\n                aria-label={`Remove ${item} option`}\n                aria-roledescription=\"button to remove option\"\n                onMouseDown={mousePreventDefault}\n                onClick={() => onValueChange(item)}\n              >\n                <span className=\"sr-only\">Remove {item} option</span>\n                <RemoveIcon className=\"size-4 cursor-pointer\" />\n              </button>\n            </Badge>\n          ))}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nconst MultiSelectInput: FC<ComponentProps<typeof Command.Input>> = ({\n  className,\n  ...props\n}) => {\n  const {\n    setOpen,\n    inputValue,\n    setInputValue,\n    activeIndex,\n    setActiveIndex,\n    handleSelect,\n    ref: inputRef,\n  } = useMultiSelect();\n\n  return (\n    <Command.Input\n      {...props}\n      tabIndex={0}\n      ref={inputRef as LegacyRef<HTMLInputElement>}\n      value={inputValue}\n      onValueChange={activeIndex === -1 ? setInputValue : undefined}\n      onSelect={handleSelect}\n      onBlur={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onClick={() => setActiveIndex(-1)}\n      className={cn(\n        'outline-hidden ml-2 flex-1 cursor-pointer',\n        className,\n        activeIndex !== -1 && 'caret-transparent'\n      )}\n    />\n  );\n};\n\nconst MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>> = ({\n  children,\n}) => {\n  const { open } = useMultiSelect();\n  return <div className=\"relative\">{open && children}</div>;\n};\n\nconst MultiSelectList: typeof Command.List = ({ className, children }) => (\n  <Command.List\n    className={cn(\n      'border-muted bg-input-background absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n      className\n    )}\n  >\n    {children}\n    <Command.Empty>\n      <span className=\"text-muted-foreground\">No results found</span>\n    </Command.Empty>\n  </Command.List>\n);\n\nconst MultiSelectItem: FC<\n  { value: string } & ComponentProps<typeof Command.Item>\n> = ({ className, value, children, ...props }) => {\n  const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const isIncluded = Options.includes(value);\n  return (\n    <Command.Item\n      {...props}\n      onSelect={() => {\n        onValueChange(value);\n        setInputValue('');\n      }}\n      className={cn(\n        'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n        'hover:bg-neutral/10',\n        className,\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50'\n      )}\n      onMouseDown={mousePreventDefault}\n    >\n      {children}\n      {isIncluded && <Check className=\"size-4\" />}\n    </Command.Item>\n  );\n};\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n  Trigger: typeof MultiSelectTrigger;\n  Input: typeof MultiSelectInput;\n  Content: typeof MultiSelectContent;\n  List: typeof MultiSelectList;\n  Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select your framework\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["createContext","useContext","useState","useRef","useEffect","useCallback","useMemo","jsx","CommandRoot","cn","jsxs","Badge","RemoveIcon","Command","Check"],"mappings":"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"}

package/dist/components/Select/Multiselect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EACP,KAAK,cAAc,EAcpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAyBlD;;GAEG;AAEH,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CAmLzC,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAC1B,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CA4DF,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,CAgC9D,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,CAK1D,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,OAAO,OAAO,CAAC,IAYrC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CACvB;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAiCxD,CAAC;AAIF,KAAK,eAAe,GAAG,OAAO,eAAe,GAAG;IAC9C,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,KAAK,EAAE,OAAO,gBAAgB,CAAC;IAC/B,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,IAAI,EAAE,OAAO,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,EAAsB,eAAe,CAAC"}
+{"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EACP,KAAK,cAAc,EAcpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAyBlD;;GAEG;AAEH,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CAmLzC,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAC1B,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CA2DF,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,CAgC9D,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,CAK1D,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,OAAO,OAAO,CAAC,IAYrC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CACvB;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAiCxD,CAAC;AAEF,KAAK,eAAe,GAAG,OAAO,eAAe,GAAG;IAC9C,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,KAAK,EAAE,OAAO,gBAAgB,CAAC;IAC/B,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,IAAI,EAAE,OAAO,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,EAAsB,eAAe,CAAC"}

package/dist/components/Select/Multiselect.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, X } from "lucide-react";
+import { X, Check } from "lucide-react";
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from "react";
 import { cn } from "../../utils/cn.mjs";
 import { Badge } from "../Badge/index.mjs";
@@ -185,11 +185,11 @@ const MultiSelectTrigger = ({
     {
       className: cn(
         "flex w-full flex-col gap-3 rounded-lg p-1 py-2",
-        "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-        "bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all",
-        "border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-        "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
-        validationStyleEnabled && "valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark",
+        "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring focus:outline-hidden flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        "bg-input-background text-input-text w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all",
+        "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+        "aria-[invalid=true]:border-error",
+        validationStyleEnabled && "valid:border-success invalid:border-error",
         className
       ),
       ...props,
@@ -256,7 +256,7 @@ const MultiSelectInput = ({
       onFocus: () => setOpen(true),
       onClick: () => setActiveIndex(-1),
       className: cn(
-        "ml-2 flex-1 cursor-pointer outline-none",
+        "outline-hidden ml-2 flex-1 cursor-pointer",
         className,
         activeIndex !== -1 && "caret-transparent"
       )
@@ -273,7 +273,7 @@ const MultiSelectList = ({ className, children }) => /* @__PURE__ */ jsxs(
   Command.List,
   {
     className: cn(
-      "border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors",
+      "border-muted bg-input-background absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors",
       className
     ),
     children: [
@@ -302,7 +302,7 @@ const MultiSelectItem = ({ className, value, children, ...props }) => {
       },
       className: cn(
         "flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors",
-        "hover:bg-neutral/10 dark:hover:bg-neutral-dark/10",
+        "hover:bg-neutral/10",
         className,
         isIncluded && "opacity-50",
         props.disabled && "cursor-not-allowed opacity-50"
@@ -315,7 +315,6 @@ const MultiSelectItem = ({ className, value, children, ...props }) => {
     }
   );
 };
-MultiSelectItem.displayName = "MultiSelectItem";
 const MultiSelect = MultiSelectRoot;
 MultiSelect.Trigger = MultiSelectTrigger;
 MultiSelect.Input = MultiSelectInput;

package/dist/components/Select/Multiselect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.mjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type Dispatch,\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type LegacyRef,\n  type MouseEventHandler,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n  value: string[];\n  onValueChange: (value: string) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inputValue: string;\n  setInputValue: Dispatch<SetStateAction<string>>;\n  activeIndex: number;\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  ref: RefObject<HTMLInputElement | null>;\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n  const context = useContext(MultiSelectContext);\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n  return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n  values?: string[];\n  defaultValues?: string[];\n  onValueChange?: (value: string[]) => void;\n  loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelectTrigger>\n *     <MultiSelectInput placeholder=\"Select your framework\" />\n *   </MultiSelectTrigger>\n *   <MultiSelectContent>\n *     <MultiSelectList>\n *       <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n *       <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n *       <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n *     </MultiSelectList>\n *   </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  onValueChange: onValueChange,\n  loop = false,\n  className,\n  children,\n  dir,\n  ...props\n}) => {\n  const [value, setValue] = useState<string[]>(defaultValues ?? []);\n  const [inputValue, setInputValue] = useState('');\n  const [open, setOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isValueSelected, setIsValueSelected] = useState(false);\n  const [selectedValue, setSelectedValue] = useState('');\n\n  useEffect(() => {\n    if (valuesProp) {\n      setValue(valuesProp);\n    }\n  }, [valuesProp]);\n\n  const onValueChangeHandler = useCallback(\n    (val: string) => {\n      if (value.includes(val)) {\n        const newValue = value.filter((item) => item !== val);\n        setValue(newValue);\n        onValueChange?.(newValue);\n      } else {\n        const newValue = [...value, val];\n        setValue(newValue);\n        onValueChange?.(newValue);\n      }\n    },\n\n    [value]\n  );\n\n  const handleSelect = useCallback(\n    (e: SyntheticEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const target = e.currentTarget;\n      const selection = target.value.substring(\n        target.selectionStart ?? 0,\n        target.selectionEnd ?? 0\n      );\n\n      setSelectedValue(selection);\n      setIsValueSelected(selection === inputValue);\n    },\n    [inputValue]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n      const target = inputRef.current;\n\n      if (!target) return;\n\n      const moveNext = () => {\n        const nextIndex = activeIndex + 1;\n        setActiveIndex(\n          nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n        );\n      };\n\n      const movePrev = () => {\n        const prevIndex = activeIndex - 1;\n        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n      };\n\n      const moveCurrent = () => {\n        const newIndex =\n          activeIndex - 1 <= 0\n            ? value.length - 1 === 0\n              ? -1\n              : 0\n            : activeIndex - 1;\n        setActiveIndex(newIndex);\n      };\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          if (dir === 'rtl') {\n            if (value.length > 0 && (activeIndex !== -1 || loop)) {\n              moveNext();\n            }\n          } else if (value.length > 0 && target.selectionStart === 0) {\n            movePrev();\n          }\n          break;\n\n        case 'ArrowRight':\n          if (dir === 'rtl') {\n            if (value.length > 0 && target.selectionStart === 0) {\n              movePrev();\n            }\n          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n            moveNext();\n          }\n          break;\n\n        case 'Backspace':\n        case 'Delete':\n          if (value.length > 0) {\n            if (activeIndex !== -1 && activeIndex < value.length) {\n              onValueChangeHandler(value[activeIndex]);\n              moveCurrent();\n            } else if (\n              (target.selectionStart === 0 && selectedValue === inputValue) ||\n              isValueSelected\n            ) {\n              onValueChangeHandler(value[value.length - 1]);\n            }\n          }\n          break;\n\n        case 'Enter':\n          setOpen(true);\n          break;\n\n        case 'Escape':\n          if (activeIndex !== -1) {\n            setActiveIndex(-1);\n          } else if (open) {\n            setOpen(false);\n          }\n          break;\n      }\n    },\n\n    [value, inputValue, activeIndex, loop]\n  );\n\n  const memoValue = useMemo(\n    () => ({\n      value,\n      onValueChange: onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      ref: inputRef,\n      handleSelect,\n    }),\n    [\n      value,\n      onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      inputRef,\n      handleSelect,\n    ]\n  );\n\n  return (\n    <MultiSelectContext value={memoValue}>\n      <CommandRoot\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n          className\n        )}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </CommandRoot>\n    </MultiSelectContext>\n  );\n};\n\nconst MultiSelectTrigger: FC<\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n> = ({\n  className,\n  getBadgeValue = (value) => value,\n  validationStyleEnabled = false,\n  children,\n  ...props\n}) => {\n  const { value, onValueChange, activeIndex } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n        'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n        'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n        'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        validationStyleEnabled &&\n          'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n        className\n      )}\n      {...props}\n    >\n      {value.length > 0 && (\n        <div className=\"flex w-full flex-wrap gap-1\">\n          {value.map((item, index) => (\n            <Badge\n              key={item}\n              className={cn(\n                'flex items-center gap-1 rounded-xl px-1',\n                activeIndex === index && 'ring-muted-foreground ring-2'\n              )}\n              color=\"text\"\n            >\n              <span className=\"text-xs\">{getBadgeValue(item)}</span>\n              <button\n                aria-label={`Remove ${item} option`}\n                aria-roledescription=\"button to remove option\"\n                onMouseDown={mousePreventDefault}\n                onClick={() => onValueChange(item)}\n              >\n                <span className=\"sr-only\">Remove {item} option</span>\n                <RemoveIcon className=\"size-4 cursor-pointer\" />\n              </button>\n            </Badge>\n          ))}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nconst MultiSelectInput: FC<ComponentProps<typeof Command.Input>> = ({\n  className,\n  ...props\n}) => {\n  const {\n    setOpen,\n    inputValue,\n    setInputValue,\n    activeIndex,\n    setActiveIndex,\n    handleSelect,\n    ref: inputRef,\n  } = useMultiSelect();\n\n  return (\n    <Command.Input\n      {...props}\n      tabIndex={0}\n      ref={inputRef as LegacyRef<HTMLInputElement>}\n      value={inputValue}\n      onValueChange={activeIndex === -1 ? setInputValue : undefined}\n      onSelect={handleSelect}\n      onBlur={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onClick={() => setActiveIndex(-1)}\n      className={cn(\n        'ml-2 flex-1 cursor-pointer outline-none',\n        className,\n        activeIndex !== -1 && 'caret-transparent'\n      )}\n    />\n  );\n};\n\nconst MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>> = ({\n  children,\n}) => {\n  const { open } = useMultiSelect();\n  return <div className=\"relative\">{open && children}</div>;\n};\n\nconst MultiSelectList: typeof Command.List = ({ className, children }) => (\n  <Command.List\n    className={cn(\n      'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n      className\n    )}\n  >\n    {children}\n    <Command.Empty>\n      <span className=\"text-muted-foreground\">No results found</span>\n    </Command.Empty>\n  </Command.List>\n);\n\nconst MultiSelectItem: FC<\n  { value: string } & ComponentProps<typeof Command.Item>\n> = ({ className, value, children, ...props }) => {\n  const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const isIncluded = Options.includes(value);\n  return (\n    <Command.Item\n      {...props}\n      onSelect={() => {\n        onValueChange(value);\n        setInputValue('');\n      }}\n      className={cn(\n        'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n        'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n        className,\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50'\n      )}\n      onMouseDown={mousePreventDefault}\n    >\n      {children}\n      {isIncluded && <Check className=\"size-4\" />}\n    </Command.Item>\n  );\n};\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n  Trigger: typeof MultiSelectTrigger;\n  Input: typeof MultiSelectInput;\n  Content: typeof MultiSelectContent;\n  List: typeof MultiSelectList;\n  Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select your framework\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["RemoveIcon"],"mappings":"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"}
+{"version":3,"file":"Multiselect.mjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type Dispatch,\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type LegacyRef,\n  type MouseEventHandler,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n  value: string[];\n  onValueChange: (value: string) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inputValue: string;\n  setInputValue: Dispatch<SetStateAction<string>>;\n  activeIndex: number;\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  ref: RefObject<HTMLInputElement | null>;\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n  const context = useContext(MultiSelectContext);\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n  return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n  values?: string[];\n  defaultValues?: string[];\n  onValueChange?: (value: string[]) => void;\n  loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelectTrigger>\n *     <MultiSelectInput placeholder=\"Select your framework\" />\n *   </MultiSelectTrigger>\n *   <MultiSelectContent>\n *     <MultiSelectList>\n *       <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n *       <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n *       <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n *     </MultiSelectList>\n *   </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  onValueChange: onValueChange,\n  loop = false,\n  className,\n  children,\n  dir,\n  ...props\n}) => {\n  const [value, setValue] = useState<string[]>(defaultValues ?? []);\n  const [inputValue, setInputValue] = useState('');\n  const [open, setOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isValueSelected, setIsValueSelected] = useState(false);\n  const [selectedValue, setSelectedValue] = useState('');\n\n  useEffect(() => {\n    if (valuesProp) {\n      setValue(valuesProp);\n    }\n  }, [valuesProp]);\n\n  const onValueChangeHandler = useCallback(\n    (val: string) => {\n      if (value.includes(val)) {\n        const newValue = value.filter((item) => item !== val);\n        setValue(newValue);\n        onValueChange?.(newValue);\n      } else {\n        const newValue = [...value, val];\n        setValue(newValue);\n        onValueChange?.(newValue);\n      }\n    },\n\n    [value]\n  );\n\n  const handleSelect = useCallback(\n    (e: SyntheticEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const target = e.currentTarget;\n      const selection = target.value.substring(\n        target.selectionStart ?? 0,\n        target.selectionEnd ?? 0\n      );\n\n      setSelectedValue(selection);\n      setIsValueSelected(selection === inputValue);\n    },\n    [inputValue]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n      const target = inputRef.current;\n\n      if (!target) return;\n\n      const moveNext = () => {\n        const nextIndex = activeIndex + 1;\n        setActiveIndex(\n          nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n        );\n      };\n\n      const movePrev = () => {\n        const prevIndex = activeIndex - 1;\n        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n      };\n\n      const moveCurrent = () => {\n        const newIndex =\n          activeIndex - 1 <= 0\n            ? value.length - 1 === 0\n              ? -1\n              : 0\n            : activeIndex - 1;\n        setActiveIndex(newIndex);\n      };\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          if (dir === 'rtl') {\n            if (value.length > 0 && (activeIndex !== -1 || loop)) {\n              moveNext();\n            }\n          } else if (value.length > 0 && target.selectionStart === 0) {\n            movePrev();\n          }\n          break;\n\n        case 'ArrowRight':\n          if (dir === 'rtl') {\n            if (value.length > 0 && target.selectionStart === 0) {\n              movePrev();\n            }\n          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n            moveNext();\n          }\n          break;\n\n        case 'Backspace':\n        case 'Delete':\n          if (value.length > 0) {\n            if (activeIndex !== -1 && activeIndex < value.length) {\n              onValueChangeHandler(value[activeIndex]);\n              moveCurrent();\n            } else if (\n              (target.selectionStart === 0 && selectedValue === inputValue) ||\n              isValueSelected\n            ) {\n              onValueChangeHandler(value[value.length - 1]);\n            }\n          }\n          break;\n\n        case 'Enter':\n          setOpen(true);\n          break;\n\n        case 'Escape':\n          if (activeIndex !== -1) {\n            setActiveIndex(-1);\n          } else if (open) {\n            setOpen(false);\n          }\n          break;\n      }\n    },\n\n    [value, inputValue, activeIndex, loop]\n  );\n\n  const memoValue = useMemo(\n    () => ({\n      value,\n      onValueChange: onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      ref: inputRef,\n      handleSelect,\n    }),\n    [\n      value,\n      onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      inputRef,\n      handleSelect,\n    ]\n  );\n\n  return (\n    <MultiSelectContext value={memoValue}>\n      <CommandRoot\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n          className\n        )}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </CommandRoot>\n    </MultiSelectContext>\n  );\n};\n\nconst MultiSelectTrigger: FC<\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n> = ({\n  className,\n  getBadgeValue = (value) => value,\n  validationStyleEnabled = false,\n  children,\n  ...props\n}) => {\n  const { value, onValueChange, activeIndex } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n        'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring focus:outline-hidden flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n        'bg-input-background text-input-text w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'aria-[invalid=true]:border-error',\n        validationStyleEnabled && 'valid:border-success invalid:border-error',\n        className\n      )}\n      {...props}\n    >\n      {value.length > 0 && (\n        <div className=\"flex w-full flex-wrap gap-1\">\n          {value.map((item, index) => (\n            <Badge\n              key={item}\n              className={cn(\n                'flex items-center gap-1 rounded-xl px-1',\n                activeIndex === index && 'ring-muted-foreground ring-2'\n              )}\n              color=\"text\"\n            >\n              <span className=\"text-xs\">{getBadgeValue(item)}</span>\n              <button\n                aria-label={`Remove ${item} option`}\n                aria-roledescription=\"button to remove option\"\n                onMouseDown={mousePreventDefault}\n                onClick={() => onValueChange(item)}\n              >\n                <span className=\"sr-only\">Remove {item} option</span>\n                <RemoveIcon className=\"size-4 cursor-pointer\" />\n              </button>\n            </Badge>\n          ))}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nconst MultiSelectInput: FC<ComponentProps<typeof Command.Input>> = ({\n  className,\n  ...props\n}) => {\n  const {\n    setOpen,\n    inputValue,\n    setInputValue,\n    activeIndex,\n    setActiveIndex,\n    handleSelect,\n    ref: inputRef,\n  } = useMultiSelect();\n\n  return (\n    <Command.Input\n      {...props}\n      tabIndex={0}\n      ref={inputRef as LegacyRef<HTMLInputElement>}\n      value={inputValue}\n      onValueChange={activeIndex === -1 ? setInputValue : undefined}\n      onSelect={handleSelect}\n      onBlur={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onClick={() => setActiveIndex(-1)}\n      className={cn(\n        'outline-hidden ml-2 flex-1 cursor-pointer',\n        className,\n        activeIndex !== -1 && 'caret-transparent'\n      )}\n    />\n  );\n};\n\nconst MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>> = ({\n  children,\n}) => {\n  const { open } = useMultiSelect();\n  return <div className=\"relative\">{open && children}</div>;\n};\n\nconst MultiSelectList: typeof Command.List = ({ className, children }) => (\n  <Command.List\n    className={cn(\n      'border-muted bg-input-background absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n      className\n    )}\n  >\n    {children}\n    <Command.Empty>\n      <span className=\"text-muted-foreground\">No results found</span>\n    </Command.Empty>\n  </Command.List>\n);\n\nconst MultiSelectItem: FC<\n  { value: string } & ComponentProps<typeof Command.Item>\n> = ({ className, value, children, ...props }) => {\n  const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const isIncluded = Options.includes(value);\n  return (\n    <Command.Item\n      {...props}\n      onSelect={() => {\n        onValueChange(value);\n        setInputValue('');\n      }}\n      className={cn(\n        'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n        'hover:bg-neutral/10',\n        className,\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50'\n      )}\n      onMouseDown={mousePreventDefault}\n    >\n      {children}\n      {isIncluded && <Check className=\"size-4\" />}\n    </Command.Item>\n  );\n};\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n  Trigger: typeof MultiSelectTrigger;\n  Input: typeof MultiSelectInput;\n  Content: typeof MultiSelectContent;\n  List: typeof MultiSelectList;\n  Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select your framework\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["RemoveIcon"],"mappings":"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"}