@intlayer/design-system 8.1.2 → 8.1.3

package/dist/esm/components/RightDrawer/rightDrawer.content.mjs

@@ -1,60 +1,2 @@
-import { t } from "intlayer";
-
-//#region src/components/RightDrawer/rightDrawer.content.ts
-const rightDrawerContent = {
-	key: "right-drawer",
-	content: {
-		goBack: t({
-			en: "Go back",
-			"en-GB": "Go back",
-			ru: "Назад",
-			ja: "戻る",
-			fr: "Retour",
-			ko: "뒤로",
-			zh: "返回",
-			es: "Volver",
-			de: "Zurück",
-			ar: "رجوع",
-			it: "Indietro",
-			pt: "Voltar",
-			hi: "वापस जाएं",
-			tr: "Geri dön",
-			pl: "Wstecz",
-			id: "Kembali",
-			vi: "Quay lại",
-			uk: "Назад"
-		}),
-		closeDrawer: t({
-			en: "Close Drawer",
-			"en-GB": "Close Drawer",
-			ru: "Закрыть панель",
-			ja: "引き出しを閉じる",
-			fr: "Fermer le tiroir",
-			ko: "서랍 닫기",
-			zh: "关闭抽屉",
-			es: "Cerrar cajón",
-			de: "Schublade schließen",
-			ar: "إغلاق الدرج",
-			it: "Chiudi cassetto",
-			pt: "Fechar gaveta",
-			hi: "दराज बंद करें",
-			tr: "Çekmeceyi kapat",
-			pl: "Zamknij szufladę",
-			id: "Tutup laci",
-			vi: "Đóng ngăn kéo",
-			uk: "Закрити бічну панель"
-		})
-	},
-	title: "Right Drawer",
-	description: "Localized UI strings for the Right Drawer component (labels: \"Go back\" and \"Close Drawer\").",
-	tags: [
-		"component",
-		"right-drawer",
-		"ui",
-		"localization"
-	]
-};
-
-//#endregion
-export { rightDrawerContent as default };
+import{t as e}from"intlayer";const t={key:`right-drawer`,content:{goBack:e({en:`Go back`,"en-GB":`Go back`,ru:`Назад`,ja:`戻る`,fr:`Retour`,ko:`뒤로`,zh:`返回`,es:`Volver`,de:`Zurück`,ar:`رجوع`,it:`Indietro`,pt:`Voltar`,hi:`वापस जाएं`,tr:`Geri dön`,pl:`Wstecz`,id:`Kembali`,vi:`Quay lại`,uk:`Назад`}),closeDrawer:e({en:`Close Drawer`,"en-GB":`Close Drawer`,ru:`Закрыть панель`,ja:`引き出しを閉じる`,fr:`Fermer le tiroir`,ko:`서랍 닫기`,zh:`关闭抽屉`,es:`Cerrar cajón`,de:`Schublade schließen`,ar:`إغلاق الدرج`,it:`Chiudi cassetto`,pt:`Fechar gaveta`,hi:`दराज बंद करें`,tr:`Çekmeceyi kapat`,pl:`Zamknij szufladę`,id:`Tutup laci`,vi:`Đóng ngăn kéo`,uk:`Закрити бічну панель`})},title:`Right Drawer`,description:`Localized UI strings for the Right Drawer component (labels: "Go back" and "Close Drawer").`,tags:[`component`,`right-drawer`,`ui`,`localization`]};export{t as default};
 //# sourceMappingURL=rightDrawer.content.mjs.map

package/dist/esm/components/RightDrawer/rightDrawer.content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rightDrawer.content.mjs","names":[],"sources":["../../../../src/components/RightDrawer/rightDrawer.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst rightDrawerContent = {\n  key: 'right-drawer',\n  content: {\n    goBack: t({\n      en: 'Go back',\n      'en-GB': 'Go back',\n      ru: 'Назад',\n      ja: '戻る',\n      fr: 'Retour',\n      ko: '뒤로',\n      zh: '返回',\n      es: 'Volver',\n      de: 'Zurück',\n      ar: 'رجوع',\n      it: 'Indietro',\n      pt: 'Voltar',\n      hi: 'वापस जाएं',\n      tr: 'Geri dön',\n      pl: 'Wstecz',\n      id: 'Kembali',\n      vi: 'Quay lại',\n      uk: 'Назад',\n    }),\n    closeDrawer: t({\n      en: 'Close Drawer',\n      'en-GB': 'Close Drawer',\n      ru: 'Закрыть панель',\n      ja: '引き出しを閉じる',\n      fr: 'Fermer le tiroir',\n      ko: '서랍 닫기',\n      zh: '关闭抽屉',\n      es: 'Cerrar cajón',\n      de: 'Schublade schließen',\n      ar: 'إغلاق الدرج',\n      it: 'Chiudi cassetto',\n      pt: 'Fechar gaveta',\n      hi: 'दराज बंद करें',\n      tr: 'Çekmeceyi kapat',\n      pl: 'Zamknij szufladę',\n      id: 'Tutup laci',\n      vi: 'Đóng ngăn kéo',\n      uk: 'Закрити бічну панель',\n    }),\n  },\n  title: 'Right Drawer',\n  description:\n    'Localized UI strings for the Right Drawer component (labels: \"Go back\" and \"Close Drawer\").',\n  tags: ['component', 'right-drawer', 'ui', 'localization'],\n} satisfies Dictionary;\n\nexport default rightDrawerContent;\n"],"mappings":";;;AAEA,MAAM,qBAAqB;CACzB,KAAK;CACL,SAAS;EACP,QAAQ,EAAE;GACR,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAa;EAAgB;EAAM;EAAe;CAC1D"}
+{"version":3,"file":"rightDrawer.content.mjs","names":[],"sources":["../../../../src/components/RightDrawer/rightDrawer.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst rightDrawerContent = {\n  key: 'right-drawer',\n  content: {\n    goBack: t({\n      en: 'Go back',\n      'en-GB': 'Go back',\n      ru: 'Назад',\n      ja: '戻る',\n      fr: 'Retour',\n      ko: '뒤로',\n      zh: '返回',\n      es: 'Volver',\n      de: 'Zurück',\n      ar: 'رجوع',\n      it: 'Indietro',\n      pt: 'Voltar',\n      hi: 'वापस जाएं',\n      tr: 'Geri dön',\n      pl: 'Wstecz',\n      id: 'Kembali',\n      vi: 'Quay lại',\n      uk: 'Назад',\n    }),\n    closeDrawer: t({\n      en: 'Close Drawer',\n      'en-GB': 'Close Drawer',\n      ru: 'Закрыть панель',\n      ja: '引き出しを閉じる',\n      fr: 'Fermer le tiroir',\n      ko: '서랍 닫기',\n      zh: '关闭抽屉',\n      es: 'Cerrar cajón',\n      de: 'Schublade schließen',\n      ar: 'إغلاق الدرج',\n      it: 'Chiudi cassetto',\n      pt: 'Fechar gaveta',\n      hi: 'दराज बंद करें',\n      tr: 'Çekmeceyi kapat',\n      pl: 'Zamknij szufladę',\n      id: 'Tutup laci',\n      vi: 'Đóng ngăn kéo',\n      uk: 'Закрити бічну панель',\n    }),\n  },\n  title: 'Right Drawer',\n  description:\n    'Localized UI strings for the Right Drawer component (labels: \"Go back\" and \"Close Drawer\").',\n  tags: ['component', 'right-drawer', 'ui', 'localization'],\n} satisfies Dictionary;\n\nexport default rightDrawerContent;\n"],"mappings":"6BAEA,MAAM,EAAqB,CACzB,IAAK,eACL,QAAS,CACP,OAAQ,EAAE,CACR,GAAI,UACJ,QAAS,UACT,GAAI,QACJ,GAAI,KACJ,GAAI,SACJ,GAAI,KACJ,GAAI,KACJ,GAAI,SACJ,GAAI,SACJ,GAAI,OACJ,GAAI,WACJ,GAAI,SACJ,GAAI,YACJ,GAAI,WACJ,GAAI,SACJ,GAAI,UACJ,GAAI,WACJ,GAAI,QACL,CAAC,CACF,YAAa,EAAE,CACb,GAAI,eACJ,QAAS,eACT,GAAI,iBACJ,GAAI,WACJ,GAAI,mBACJ,GAAI,QACJ,GAAI,OACJ,GAAI,eACJ,GAAI,sBACJ,GAAI,cACJ,GAAI,kBACJ,GAAI,gBACJ,GAAI,gBACJ,GAAI,kBACJ,GAAI,mBACJ,GAAI,aACJ,GAAI,gBACJ,GAAI,uBACL,CAAC,CACH,CACD,MAAO,eACP,YACE,8FACF,KAAM,CAAC,YAAa,eAAgB,KAAM,eAAe,CAC1D"}

package/dist/esm/components/RightDrawer/useRightDrawer.mjs

@@ -1,65 +1,2 @@
-'use client';
-
-import { useSyncExternalStore } from "react";
-
-//#region src/components/RightDrawer/useRightDrawer.ts
-var DrawerObservable = class {
-	listeners = /* @__PURE__ */ new Set();
-	drawers = {};
-	subscribe = (listener) => {
-		this.listeners.add(listener);
-		return () => {
-			this.listeners.delete(listener);
-		};
-	};
-	getSnapshot = () => {
-		return this.drawers;
-	};
-	open = (key) => {
-		if (this.drawers[key]) return;
-		this.drawers = {
-			...this.drawers,
-			[key]: true
-		};
-		this.emit();
-	};
-	close = (key) => {
-		if (!this.drawers[key]) return;
-		this.drawers = {
-			...this.drawers,
-			[key]: false
-		};
-		this.emit();
-	};
-	set = (states) => {
-		let changed = false;
-		const newDrawers = { ...this.drawers };
-		for (const [key, value] of Object.entries(states)) if (newDrawers[key] !== value) {
-			newDrawers[key] = value;
-			changed = true;
-		}
-		if (changed) {
-			this.drawers = newDrawers;
-			this.emit();
-		}
-	};
-	emit = () => {
-		this.listeners.forEach((listener) => {
-			listener();
-		});
-	};
-};
-const drawerManager = new DrawerObservable();
-const useRightDrawer = () => {
-	const drawers = useSyncExternalStore(drawerManager.subscribe, drawerManager.getSnapshot, () => ({}));
-	return {
-		open: drawerManager.open,
-		close: drawerManager.close,
-		set: drawerManager.set,
-		isOpen: (key) => !!drawers[key]
-	};
-};
-
-//#endregion
-export { drawerManager, useRightDrawer };
+"use client";import{useSyncExternalStore as e}from"react";const t=new class{listeners=new Set;drawers={};subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});getSnapshot=()=>this.drawers;open=e=>{this.drawers[e]||(this.drawers={...this.drawers,[e]:!0},this.emit())};close=e=>{this.drawers[e]&&(this.drawers={...this.drawers,[e]:!1},this.emit())};set=e=>{let t=!1,n={...this.drawers};for(let[r,i]of Object.entries(e))n[r]!==i&&(n[r]=i,t=!0);t&&(this.drawers=n,this.emit())};emit=()=>{this.listeners.forEach(e=>{e()})}},n=()=>{let n=e(t.subscribe,t.getSnapshot,()=>({}));return{open:t.open,close:t.close,set:t.set,isOpen:e=>!!n[e]}};export{t as drawerManager,n as useRightDrawer};
 //# sourceMappingURL=useRightDrawer.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useRightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/useRightDrawer.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\ntype DrawerState = Record<string, boolean>;\n\nclass DrawerObservable {\n  private listeners = new Set<() => void>();\n  private drawers: DrawerState = {};\n\n  subscribe = (listener: () => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = () => {\n    return this.drawers;\n  };\n\n  open = (key: string) => {\n    if (this.drawers[key]) return;\n    this.drawers = { ...this.drawers, [key]: true };\n    this.emit();\n  };\n\n  close = (key: string) => {\n    if (!this.drawers[key]) return;\n    this.drawers = { ...this.drawers, [key]: false };\n    this.emit();\n  };\n\n  set = (states: DrawerState) => {\n    let changed = false;\n    const newDrawers = { ...this.drawers };\n\n    for (const [key, value] of Object.entries(states)) {\n      if (newDrawers[key] !== value) {\n        newDrawers[key] = value;\n        changed = true;\n      }\n    }\n\n    if (changed) {\n      this.drawers = newDrawers;\n      this.emit();\n    }\n  };\n\n  private emit = () => {\n    this.listeners.forEach((listener) => {\n      listener();\n    });\n  };\n}\n\nexport const drawerManager = new DrawerObservable();\n\nexport const useRightDrawer = () => {\n  const drawers = useSyncExternalStore(\n    drawerManager.subscribe,\n    drawerManager.getSnapshot,\n    () => ({}) as DrawerState\n  );\n\n  return {\n    open: drawerManager.open,\n    close: drawerManager.close,\n    set: drawerManager.set,\n    isOpen: (key: string) => !!drawers[key],\n  };\n};\n"],"mappings":";;;;;AAMA,IAAM,mBAAN,MAAuB;CACrB,AAAQ,4BAAY,IAAI,KAAiB;CACzC,AAAQ,UAAuB,EAAE;CAEjC,aAAa,aAAyB;AACpC,OAAK,UAAU,IAAI,SAAS;AAC5B,eAAa;AACX,QAAK,UAAU,OAAO,SAAS;;;CAInC,oBAAoB;AAClB,SAAO,KAAK;;CAGd,QAAQ,QAAgB;AACtB,MAAI,KAAK,QAAQ,KAAM;AACvB,OAAK,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;GAAM;AAC/C,OAAK,MAAM;;CAGb,SAAS,QAAgB;AACvB,MAAI,CAAC,KAAK,QAAQ,KAAM;AACxB,OAAK,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;GAAO;AAChD,OAAK,MAAM;;CAGb,OAAO,WAAwB;EAC7B,IAAI,UAAU;EACd,MAAM,aAAa,EAAE,GAAG,KAAK,SAAS;AAEtC,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,CAC/C,KAAI,WAAW,SAAS,OAAO;AAC7B,cAAW,OAAO;AAClB,aAAU;;AAId,MAAI,SAAS;AACX,QAAK,UAAU;AACf,QAAK,MAAM;;;CAIf,AAAQ,aAAa;AACnB,OAAK,UAAU,SAAS,aAAa;AACnC,aAAU;IACV;;;AAIN,MAAa,gBAAgB,IAAI,kBAAkB;AAEnD,MAAa,uBAAuB;CAClC,MAAM,UAAU,qBACd,cAAc,WACd,cAAc,oBACP,EAAE,EACV;AAED,QAAO;EACL,MAAM,cAAc;EACpB,OAAO,cAAc;EACrB,KAAK,cAAc;EACnB,SAAS,QAAgB,CAAC,CAAC,QAAQ;EACpC"}
+{"version":3,"file":"useRightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/useRightDrawer.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\ntype DrawerState = Record<string, boolean>;\n\nclass DrawerObservable {\n  private listeners = new Set<() => void>();\n  private drawers: DrawerState = {};\n\n  subscribe = (listener: () => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = () => {\n    return this.drawers;\n  };\n\n  open = (key: string) => {\n    if (this.drawers[key]) return;\n    this.drawers = { ...this.drawers, [key]: true };\n    this.emit();\n  };\n\n  close = (key: string) => {\n    if (!this.drawers[key]) return;\n    this.drawers = { ...this.drawers, [key]: false };\n    this.emit();\n  };\n\n  set = (states: DrawerState) => {\n    let changed = false;\n    const newDrawers = { ...this.drawers };\n\n    for (const [key, value] of Object.entries(states)) {\n      if (newDrawers[key] !== value) {\n        newDrawers[key] = value;\n        changed = true;\n      }\n    }\n\n    if (changed) {\n      this.drawers = newDrawers;\n      this.emit();\n    }\n  };\n\n  private emit = () => {\n    this.listeners.forEach((listener) => {\n      listener();\n    });\n  };\n}\n\nexport const drawerManager = new DrawerObservable();\n\nexport const useRightDrawer = () => {\n  const drawers = useSyncExternalStore(\n    drawerManager.subscribe,\n    drawerManager.getSnapshot,\n    () => ({}) as DrawerState\n  );\n\n  return {\n    open: drawerManager.open,\n    close: drawerManager.close,\n    set: drawerManager.set,\n    isOpen: (key: string) => !!drawers[key],\n  };\n};\n"],"mappings":"0DAyDA,MAAa,EAAgB,IAnD7B,KAAuB,CACrB,UAAoB,IAAI,IACxB,QAA+B,EAAE,CAEjC,UAAa,IACX,KAAK,UAAU,IAAI,EAAS,KACf,CACX,KAAK,UAAU,OAAO,EAAS,GAInC,gBACS,KAAK,QAGd,KAAQ,GAAgB,CAClB,KAAK,QAAQ,KACjB,KAAK,QAAU,CAAE,GAAG,KAAK,SAAU,GAAM,GAAM,CAC/C,KAAK,MAAM,GAGb,MAAS,GAAgB,CAClB,KAAK,QAAQ,KAClB,KAAK,QAAU,CAAE,GAAG,KAAK,SAAU,GAAM,GAAO,CAChD,KAAK,MAAM,GAGb,IAAO,GAAwB,CAC7B,IAAI,EAAU,GACR,EAAa,CAAE,GAAG,KAAK,QAAS,CAEtC,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,EAAO,CAC3C,EAAW,KAAS,IACtB,EAAW,GAAO,EAClB,EAAU,IAIV,IACF,KAAK,QAAU,EACf,KAAK,MAAM,GAIf,SAAqB,CACnB,KAAK,UAAU,QAAS,GAAa,CACnC,GAAU,EACV,GAMO,MAAuB,CAClC,IAAM,EAAU,EACd,EAAc,UACd,EAAc,iBACP,EAAE,EACV,CAED,MAAO,CACL,KAAM,EAAc,KACpB,MAAO,EAAc,MACrB,IAAK,EAAc,IACnB,OAAS,GAAgB,CAAC,CAAC,EAAQ,GACpC"}

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

@@ -1,354 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { Badge, BadgeColor } from "../Badge/index.mjs";
-import { Command, CommandRoot } from "../Command/index.mjs";
-import { Check, X } from "lucide-react";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/Select/Multiselect.tsx
-const MultiSelectContext = createContext(null);
-/**
-* Custom hook to access MultiSelect context
-*
-* Provides access to the internal state and methods of the MultiSelect component.
-* Must be used within a MultiSelect component tree.
-*
-* @returns MultiSelectContextProps - All context properties and methods
-* @throws Error when used outside of MultiSelect component
-*
-* @example
-* ```tsx
-* function CustomMultiSelectItem() {
-*   const { value, onValueChange, open } = useMultiSelect();
-*   // Use context properties...
-* }
-* ```
-*/
-const useMultiSelect = () => {
-	const context = useContext(MultiSelectContext);
-	if (!context) throw new Error("useMultiSelect must be used within MultiSelectProvider");
-	return context;
-};
-/**
-* MultiSelect - A comprehensive multi-selection dropdown component
-*
-* An advanced multi-select component that combines the functionality of a searchable dropdown
-* with the ability to select multiple values. Built on top of Command component primitives,
-* it provides filtering, keyboard navigation, and visual feedback through badges.
-*
-* ## Key Features
-* - **Multi-Selection**: Select multiple options with visual badge representation
-* - **Searchable**: Built-in filtering to quickly find options in large lists
-* - **Keyboard Navigation**: Full arrow key navigation with optional looping
-* - **Accessibility**: Screen reader support, ARIA attributes, and focus management
-* - **Flexible State**: Both controlled and uncontrolled usage patterns
-* - **Rich UI**: Customizable badges, icons, and content layout
-*
-* ## Use Cases
-* - Tag/category selection in forms
-* - Multi-user assignment interfaces
-* - Feature/permission selection
-* - Filter selection in search interfaces
-* - Any multi-choice selection requirement
-*
-* ## Architecture
-* The component follows a compound pattern similar to Select:
-* - `MultiSelect` (root): Manages state and provides context
-* - `MultiSelect.Trigger`: Container for input and selected badges
-* - `MultiSelect.Input`: Searchable input field with filtering
-* - `MultiSelect.Content`: Dropdown container for options
-* - `MultiSelect.List`: Options container with keyboard navigation
-* - `MultiSelect.Item`: Individual selectable options
-*
-* ## Accessibility
-* - **Keyboard Navigation**: Arrow keys, Enter to select, Backspace to remove
-* - **Screen Readers**: Proper ARIA labels and live region announcements
-* - **Focus Management**: Clear focus indicators and logical tab flow
-* - **Search**: Real-time filtering with screen reader announcements
-*
-* @example
-* Basic multi-select usage:
-* ```tsx
-* const [frameworks, setFrameworks] = useState<string[]>([]);
-*
-* <MultiSelect values={frameworks} onValueChange={setFrameworks}>
-*   <MultiSelect.Trigger>
-*     <MultiSelect.Input placeholder="Select frameworks..." />
-*   </MultiSelect.Trigger>
-*   <MultiSelect.Content>
-*     <MultiSelect.List>
-*       <MultiSelect.Item value="react">React</MultiSelect.Item>
-*       <MultiSelect.Item value="vue">Vue</MultiSelect.Item>
-*       <MultiSelect.Item value="svelte">Svelte</MultiSelect.Item>
-*     </MultiSelect.List>
-*   </MultiSelect.Content>
-* </MultiSelect>
-* ```
-*
-* @example
-* Advanced usage with keyboard looping:
-* ```tsx
-* <MultiSelect defaultValues={['react']} loop>
-*   <MultiSelect.Trigger>
-*     <MultiSelect.Input placeholder="Choose technologies..." />
-*   </MultiSelect.Trigger>
-*   <MultiSelect.Content>
-*     <MultiSelect.List>
-*       <MultiSelect.Item value="react">⚛️ React</MultiSelect.Item>
-*       <MultiSelect.Item value="vue">💚 Vue</MultiSelect.Item>
-*       <MultiSelect.Item value="angular">🔴 Angular</MultiSelect.Item>
-*     </MultiSelect.List>
-*   </MultiSelect.Content>
-* </MultiSelect>
-* ```
-*
-* @example
-* Form integration with validation:
-* ```tsx
-* <form>
-*   <MultiSelect
-*     values={selectedSkills}
-*     onValueChange={setSelectedSkills}
-*     required
-*   >
-*     <MultiSelect.Trigger className="min-h-[2.5rem]">
-*       <MultiSelect.Input placeholder="Select your skills..." />
-*     </MultiSelect.Trigger>
-*     <MultiSelect.Content>
-*       <MultiSelect.List>
-*         <MultiSelect.Item value="javascript">JavaScript</MultiSelect.Item>
-*         <MultiSelect.Item value="typescript">TypeScript</MultiSelect.Item>
-*         <MultiSelect.Item value="python">Python</MultiSelect.Item>
-*       </MultiSelect.List>
-*     </MultiSelect.Content>
-*   </MultiSelect>
-* </form>
-* ```
-*/
-const MultiSelectRoot = ({ values: valuesProp, defaultValues, onValueChange, loop = false, className, children, dir, ...props }) => {
-	const [value, setValue] = useState(defaultValues ?? []);
-	const [inputValue, setInputValue] = useState("");
-	const [open, setOpen] = useState(false);
-	const [activeIndex, setActiveIndex] = useState(-1);
-	const inputRef = useRef(null);
-	const [isValueSelected, setIsValueSelected] = useState(false);
-	const [selectedValue, setSelectedValue] = useState("");
-	useEffect(() => {
-		if (valuesProp) setValue(valuesProp);
-	}, [valuesProp]);
-	const onValueChangeHandler = useCallback((val) => {
-		if (value.includes(val)) {
-			const newValue = value.filter((item) => item !== val);
-			setValue(newValue);
-			onValueChange?.(newValue);
-		} else {
-			const newValue = [...value, val];
-			setValue(newValue);
-			onValueChange?.(newValue);
-		}
-	}, [value]);
-	const handleSelect = useCallback((e) => {
-		e.preventDefault();
-		const target = e.currentTarget;
-		const selection = target.value.substring(target.selectionStart ?? 0, target.selectionEnd ?? 0);
-		setSelectedValue(selection);
-		setIsValueSelected(selection === inputValue);
-	}, [inputValue]);
-	const handleKeyDown = useCallback((e) => {
-		e.stopPropagation();
-		const target = inputRef.current;
-		if (!target) return;
-		const moveNext = () => {
-			const nextIndex = activeIndex + 1;
-			setActiveIndex(nextIndex > value.length - 1 ? loop ? 0 : -1 : nextIndex);
-		};
-		const movePrev = () => {
-			const prevIndex = activeIndex - 1;
-			setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);
-		};
-		const moveCurrent = () => {
-			setActiveIndex(activeIndex - 1 <= 0 ? value.length - 1 === 0 ? -1 : 0 : activeIndex - 1);
-		};
-		switch (e.key) {
-			case "ArrowLeft":
-				if (dir === "rtl") {
-					if (value.length > 0 && (activeIndex !== -1 || loop)) moveNext();
-				} else if (value.length > 0 && target.selectionStart === 0) movePrev();
-				break;
-			case "ArrowRight":
-				if (dir === "rtl") {
-					if (value.length > 0 && target.selectionStart === 0) movePrev();
-				} else if (value.length > 0 && (activeIndex !== -1 || loop)) moveNext();
-				break;
-			case "Backspace":
-			case "Delete":
-				if (value.length > 0) {
-					if (activeIndex !== -1 && activeIndex < value.length) {
-						onValueChangeHandler(value[activeIndex]);
-						moveCurrent();
-					} else if (target.selectionStart === 0 && selectedValue === inputValue || isValueSelected) onValueChangeHandler(value[value.length - 1]);
-				}
-				break;
-			case "Enter":
-				setOpen(true);
-				break;
-			case "Escape":
-				if (activeIndex !== -1) setActiveIndex(-1);
-				else if (open) setOpen(false);
-				break;
-		}
-	}, [
-		value,
-		inputValue,
-		activeIndex,
-		loop
-	]);
-	return /* @__PURE__ */ jsx(MultiSelectContext, {
-		value: useMemo(() => ({
-			value,
-			onValueChange: onValueChangeHandler,
-			open,
-			setOpen,
-			inputValue,
-			setInputValue,
-			activeIndex,
-			setActiveIndex,
-			ref: inputRef,
-			handleSelect
-		}), [
-			value,
-			onValueChangeHandler,
-			open,
-			setOpen,
-			inputValue,
-			setInputValue,
-			activeIndex,
-			setActiveIndex,
-			inputRef,
-			handleSelect
-		]),
-		children: /* @__PURE__ */ jsx(CommandRoot, {
-			onKeyDown: handleKeyDown,
-			className: cn("flex w-full flex-col gap-2 overflow-visible bg-transparent", className),
-			dir,
-			...props,
-			children
-		})
-	});
-};
-const MultiSelectTrigger = ({ className, getBadgeValue = (value) => value, validationStyleEnabled = false, children, ...props }) => {
-	const { value, onValueChange, activeIndex } = useMultiSelect();
-	const mousePreventDefault = useCallback((e) => {
-		e.preventDefault();
-		e.stopPropagation();
-	}, []);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex w-full flex-col gap-3", "cursor-pointer select-text text-base shadow-none outline-none md:text-sm", "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl", "px-2 py-3 md:py-2", "bg-neutral-50 dark:bg-neutral-950", "text-text", "ring-0", "focus-within:outline-none", "focus-within:ring-3", "focus-within:ring-neutral-200", "dark:focus-within:ring-neutral-500", "focus-within:ring-offset-white", "dark:focus-within:ring-offset-neutral-500", "[box-shadow:none]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-error", validationStyleEnabled && "valid:border-success invalid:border-error", className),
-		...props,
-		children: [value.length > 0 && /* @__PURE__ */ jsx("div", {
-			className: "flex w-full flex-wrap gap-1",
-			children: value.map((item, index) => /* @__PURE__ */ jsxs(Badge, {
-				className: cn("flex items-center gap-1 rounded-xl px-1", activeIndex === index && "ring-2 ring-muted-foreground"),
-				color: BadgeColor.TEXT,
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-xs",
-					children: getBadgeValue(item)
-				}), /* @__PURE__ */ jsxs("button", {
-					"aria-label": `Remove ${item} option`,
-					"aria-roledescription": "button to remove option",
-					onMouseDown: mousePreventDefault,
-					onClick: () => onValueChange(item),
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: "sr-only",
-						children: [
-							"Remove ",
-							item,
-							" option"
-						]
-					}), /* @__PURE__ */ jsx(X, { className: "size-4 cursor-pointer" })]
-				})]
-			}, item))
-		}), children]
-	});
-};
-const MultiSelectInput = ({ className, ...props }) => {
-	const { setOpen, inputValue, setInputValue, activeIndex, setActiveIndex, handleSelect, ref: inputRef } = useMultiSelect();
-	return /* @__PURE__ */ jsx(Command.Input, {
-		...props,
-		tabIndex: 0,
-		ref: inputRef,
-		value: inputValue,
-		onValueChange: activeIndex === -1 ? setInputValue : void 0,
-		onSelect: handleSelect,
-		onBlur: () => setOpen(false),
-		onFocus: () => setOpen(true),
-		onClick: () => setActiveIndex(-1),
-		className: cn("ml-2 flex-1 cursor-pointer outline-hidden", className, activeIndex !== -1 && "caret-transparent")
-	});
-};
-const MultiSelectContent = ({ children }) => {
-	const { open } = useMultiSelect();
-	return /* @__PURE__ */ jsx("div", {
-		className: "relative",
-		children: open && children
-	});
-};
-const MultiSelectList = ({ className, children }) => /* @__PURE__ */ jsxs(Command.List, {
-	className: cn("absolute top-0 z-10 flex w-full flex-col gap-2", "rounded-xl p-2 shadow-md", "bg-white dark:bg-neutral-950", "text-text", "border border-neutral-200 dark:border-neutral-800", "transition-colors", className),
-	children: [children, /* @__PURE__ */ jsx(Command.Empty, { children: /* @__PURE__ */ jsx("span", {
-		className: "text-muted-foreground",
-		children: "No results found"
-	}) })]
-});
-const MultiSelectItem = ({ className, value, children, ...props }) => {
-	const { value: Options, onValueChange, setInputValue } = useMultiSelect();
-	const mousePreventDefault = useCallback((e) => {
-		e.preventDefault();
-		e.stopPropagation();
-	}, []);
-	const isIncluded = Options.includes(value);
-	return /* @__PURE__ */ jsxs(Command.Item, {
-		...props,
-		onSelect: () => {
-			onValueChange(value);
-			setInputValue("");
-		},
-		className: cn("flex cursor-pointer justify-between", "rounded-lg px-2 py-1", "transition-colors", "hover:bg-neutral/10", isIncluded && "opacity-50", props.disabled && "cursor-not-allowed opacity-50", className),
-		onMouseDown: mousePreventDefault,
-		children: [children, isIncluded && /* @__PURE__ */ jsx(Check, { className: "size-4" })]
-	});
-};
-/**
-*
-* Usage example:
-* ```jsx
-* <MultiSelect
-*   values={value}
-*   onValuesChange={setValue}
-*   loop
-* >
-*   <MultiSelect.Trigger>
-*     <MultiSelect.Input placeholder="Select your framework" />
-*   </MultiSelect.Trigger>
-*   <MultiSelect.Content>
-*     <MultiSelect.List>
-*       <MultiSelect.Item value={"React"}>React</MultiSelect.Item>
-*       <MultiSelect.Item value={"Vue"}>Vue</MultiSelect.Item>
-*       <MultiSelect.Item value={"Svelte"}>Svelte</MultiSelect.Item>
-*     </MultiSelect.List>
-*   </MultiSelect.Content>
-* </MultiSelect>
-* ```
-*/
-const MultiSelect = MultiSelectRoot;
-MultiSelect.Trigger = MultiSelectTrigger;
-MultiSelect.Input = MultiSelectInput;
-MultiSelect.Content = MultiSelectContent;
-MultiSelect.List = MultiSelectList;
-MultiSelect.Item = MultiSelectItem;
-
-//#endregion
-export { MultiSelect };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Badge as t,BadgeColor as n}from"../Badge/index.mjs";import{Command as r,CommandRoot as i}from"../Command/index.mjs";import{Check as a,X as o}from"lucide-react";import{createContext as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";const g=s(null),_=()=>{let e=l(g);if(!e)throw Error(`useMultiSelect must be used within MultiSelectProvider`);return e},v=({values:t,defaultValues:n,onValueChange:r,loop:a=!1,className:o,children:s,dir:l,...h})=>{let[_,v]=p(n??[]),[y,b]=p(``),[x,S]=p(!1),[C,w]=p(-1),T=f(null),[E,D]=p(!1),[O,k]=p(``);u(()=>{t&&v(t)},[t]);let A=c(e=>{if(_.includes(e)){let t=_.filter(t=>t!==e);v(t),r?.(t)}else{let t=[..._,e];v(t),r?.(t)}},[_]),j=c(e=>{e.preventDefault();let t=e.currentTarget,n=t.value.substring(t.selectionStart??0,t.selectionEnd??0);k(n),D(n===y)},[y]),M=c(e=>{e.stopPropagation();let t=T.current;if(!t)return;let n=()=>{let e=C+1;w(e>_.length-1?a?0:-1:e)},r=()=>{let e=C-1;w(e<0?_.length-1:e)},i=()=>{w(C-1<=0?_.length-1==0?-1:0:C-1)};switch(e.key){case`ArrowLeft`:l===`rtl`?_.length>0&&(C!==-1||a)&&n():_.length>0&&t.selectionStart===0&&r();break;case`ArrowRight`:l===`rtl`?_.length>0&&t.selectionStart===0&&r():_.length>0&&(C!==-1||a)&&n();break;case`Backspace`:case`Delete`:_.length>0&&(C!==-1&&C<_.length?(A(_[C]),i()):(t.selectionStart===0&&O===y||E)&&A(_[_.length-1]));break;case`Enter`:S(!0);break;case`Escape`:C===-1?x&&S(!1):w(-1);break}},[_,y,C,a]);return m(g,{value:d(()=>({value:_,onValueChange:A,open:x,setOpen:S,inputValue:y,setInputValue:b,activeIndex:C,setActiveIndex:w,ref:T,handleSelect:j}),[_,A,x,S,y,b,C,w,T,j]),children:m(i,{onKeyDown:M,className:e(`flex w-full flex-col gap-2 overflow-visible bg-transparent`,o),dir:l,...h,children:s})})},y=({className:r,getBadgeValue:i=e=>e,validationStyleEnabled:a=!1,children:s,...l})=>{let{value:u,onValueChange:d,activeIndex:f}=_(),p=c(e=>{e.preventDefault(),e.stopPropagation()},[]);return h(`div`,{className:e(`flex w-full flex-col gap-3`,`cursor-pointer select-text text-base shadow-none outline-none md:text-sm`,`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,`px-2 py-3 md:py-2`,`bg-neutral-50 dark:bg-neutral-950`,`text-text`,`ring-0`,`focus-within:outline-none`,`focus-within:ring-3`,`focus-within:ring-neutral-200`,`dark:focus-within:ring-neutral-500`,`focus-within:ring-offset-white`,`dark:focus-within:ring-offset-neutral-500`,`[box-shadow:none]`,`disabled:cursor-not-allowed disabled:opacity-50`,`aria-invalid:border-error`,a&&`valid:border-success invalid:border-error`,r),...l,children:[u.length>0&&m(`div`,{className:`flex w-full flex-wrap gap-1`,children:u.map((r,a)=>h(t,{className:e(`flex items-center gap-1 rounded-xl px-1`,f===a&&`ring-2 ring-muted-foreground`),color:n.TEXT,children:[m(`span`,{className:`text-xs`,children:i(r)}),h(`button`,{"aria-label":`Remove ${r} option`,"aria-roledescription":`button to remove option`,onMouseDown:p,onClick:()=>d(r),children:[h(`span`,{className:`sr-only`,children:[`Remove `,r,` option`]}),m(o,{className:`size-4 cursor-pointer`})]})]},r))}),s]})},b=({className:t,...n})=>{let{setOpen:i,inputValue:a,setInputValue:o,activeIndex:s,setActiveIndex:c,handleSelect:l,ref:u}=_();return m(r.Input,{...n,tabIndex:0,ref:u,value:a,onValueChange:s===-1?o:void 0,onSelect:l,onBlur:()=>i(!1),onFocus:()=>i(!0),onClick:()=>c(-1),className:e(`ml-2 flex-1 cursor-pointer outline-hidden`,t,s!==-1&&`caret-transparent`)})},x=({children:e})=>{let{open:t}=_();return m(`div`,{className:`relative`,children:t&&e})},S=({className:t,children:n})=>h(r.List,{className:e(`absolute top-0 z-10 flex w-full flex-col gap-2`,`rounded-xl p-2 shadow-md`,`bg-white dark:bg-neutral-950`,`text-text`,`border border-neutral-200 dark:border-neutral-800`,`transition-colors`,t),children:[n,m(r.Empty,{children:m(`span`,{className:`text-muted-foreground`,children:`No results found`})})]}),C=({className:t,value:n,children:i,...o})=>{let{value:s,onValueChange:l,setInputValue:u}=_(),d=c(e=>{e.preventDefault(),e.stopPropagation()},[]),f=s.includes(n);return h(r.Item,{...o,onSelect:()=>{l(n),u(``)},className:e(`flex cursor-pointer justify-between`,`rounded-lg px-2 py-1`,`transition-colors`,`hover:bg-neutral/10`,f&&`opacity-50`,o.disabled&&`cursor-not-allowed opacity-50`,t),onMouseDown:d,children:[i,f&&m(a,{className:`size-4`})]})},w=v;w.Trigger=y,w.Input=b,w.Content=x,w.List=S,w.Item=C;export{w as MultiSelect};
 //# sourceMappingURL=Multiselect.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.mjs","names":["RemoveIcon"],"sources":["../../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X as RemoveIcon } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\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  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Badge, BadgeColor } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\n/**\n * Context properties for MultiSelect component state management\n *\n * @interface MultiSelectContextProps\n */\ntype MultiSelectContextProps = {\n  /** Array of currently selected values */\n  value: string[];\n  /** Handler for value changes */\n  onValueChange: (value: string) => void;\n  /** Whether the dropdown is currently open */\n  open: boolean;\n  /** Function to set the open state */\n  setOpen: (value: boolean) => void;\n  /** Current input field value for filtering */\n  inputValue: string;\n  /** Function to set the input value */\n  setInputValue: Dispatch<SetStateAction<string>>;\n  /** Index of currently focused option for keyboard navigation */\n  activeIndex: number;\n  /** Function to set the active index */\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  /** Ref to the input element */\n  ref: RefObject<HTMLInputElement | null>;\n  /** Handler for option selection */\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\n/**\n * Custom hook to access MultiSelect context\n *\n * Provides access to the internal state and methods of the MultiSelect component.\n * Must be used within a MultiSelect component tree.\n *\n * @returns MultiSelectContextProps - All context properties and methods\n * @throws Error when used outside of MultiSelect component\n *\n * @example\n * ```tsx\n * function CustomMultiSelectItem() {\n *   const { value, onValueChange, open } = useMultiSelect();\n *   // Use context properties...\n * }\n * ```\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 * Props interface for the main MultiSelect component\n *\n * @interface MultiSelectProps\n */\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n  /**\n   * Array of selected values (controlled mode)\n   * @example\n   * ```tsx\n   * const [selected, setSelected] = useState(['react', 'vue']);\n   * <MultiSelect values={selected} onValueChange={setSelected} />\n   * ```\n   */\n  values?: string[];\n\n  /**\n   * Default selected values for uncontrolled mode\n   * @example\n   * ```tsx\n   * <MultiSelect defaultValues={['react']} />\n   * ```\n   */\n  defaultValues?: string[];\n\n  /**\n   * Callback fired when selection changes\n   * @param value - New array of selected values\n   * @example\n   * ```tsx\n   * <MultiSelect onValueChange={(values) => console.log('Selected:', values)} />\n   * ```\n   */\n  onValueChange?: (value: string[]) => void;\n\n  /**\n   * Whether keyboard navigation should loop through options\n   * @default false\n   * @example\n   * ```tsx\n   * <MultiSelect loop /> // Arrow keys wrap around at list boundaries\n   * ```\n   */\n  loop?: boolean;\n};\n\n/**\n * MultiSelect - A comprehensive multi-selection dropdown component\n *\n * An advanced multi-select component that combines the functionality of a searchable dropdown\n * with the ability to select multiple values. Built on top of Command component primitives,\n * it provides filtering, keyboard navigation, and visual feedback through badges.\n *\n * ## Key Features\n * - **Multi-Selection**: Select multiple options with visual badge representation\n * - **Searchable**: Built-in filtering to quickly find options in large lists\n * - **Keyboard Navigation**: Full arrow key navigation with optional looping\n * - **Accessibility**: Screen reader support, ARIA attributes, and focus management\n * - **Flexible State**: Both controlled and uncontrolled usage patterns\n * - **Rich UI**: Customizable badges, icons, and content layout\n *\n * ## Use Cases\n * - Tag/category selection in forms\n * - Multi-user assignment interfaces\n * - Feature/permission selection\n * - Filter selection in search interfaces\n * - Any multi-choice selection requirement\n *\n * ## Architecture\n * The component follows a compound pattern similar to Select:\n * - `MultiSelect` (root): Manages state and provides context\n * - `MultiSelect.Trigger`: Container for input and selected badges\n * - `MultiSelect.Input`: Searchable input field with filtering\n * - `MultiSelect.Content`: Dropdown container for options\n * - `MultiSelect.List`: Options container with keyboard navigation\n * - `MultiSelect.Item`: Individual selectable options\n *\n * ## Accessibility\n * - **Keyboard Navigation**: Arrow keys, Enter to select, Backspace to remove\n * - **Screen Readers**: Proper ARIA labels and live region announcements\n * - **Focus Management**: Clear focus indicators and logical tab flow\n * - **Search**: Real-time filtering with screen reader announcements\n *\n * @example\n * Basic multi-select usage:\n * ```tsx\n * const [frameworks, setFrameworks] = useState<string[]>([]);\n *\n * <MultiSelect values={frameworks} onValueChange={setFrameworks}>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select frameworks...\" />\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 *\n * @example\n * Advanced usage with keyboard looping:\n * ```tsx\n * <MultiSelect defaultValues={['react']} loop>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Choose technologies...\" />\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=\"angular\">🔴 Angular</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n *\n * @example\n * Form integration with validation:\n * ```tsx\n * <form>\n *   <MultiSelect\n *     values={selectedSkills}\n *     onValueChange={setSelectedSkills}\n *     required\n *   >\n *     <MultiSelect.Trigger className=\"min-h-[2.5rem]\">\n *       <MultiSelect.Input placeholder=\"Select your skills...\" />\n *     </MultiSelect.Trigger>\n *     <MultiSelect.Content>\n *       <MultiSelect.List>\n *         <MultiSelect.Item value=\"javascript\">JavaScript</MultiSelect.Item>\n *         <MultiSelect.Item value=\"typescript\">TypeScript</MultiSelect.Item>\n *         <MultiSelect.Item value=\"python\">Python</MultiSelect.Item>\n *       </MultiSelect.List>\n *     </MultiSelect.Content>\n *   </MultiSelect>\n * </form>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  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        // Base layout\n        'flex w-full flex-col gap-3',\n        'cursor-pointer select-text text-base shadow-none outline-none md:text-sm',\n\n        // Corner shape\n        'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n        // Spacing\n        'px-2 py-3 md:py-2',\n\n        // Background and text\n        'bg-neutral-50 dark:bg-neutral-950',\n        'text-text',\n\n        // Focus ring\n        'ring-0',\n        'focus-within:outline-none',\n        'focus-within:ring-3',\n        'focus-within:ring-neutral-200',\n        'dark:focus-within:ring-neutral-500',\n\n        'focus-within:ring-offset-white',\n        'dark:focus-within:ring-offset-neutral-500',\n\n        // Remove box-shadow\n        '[box-shadow:none]',\n\n        // States\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-invalid:border-error',\n\n        // Validation styles\n        validationStyleEnabled && 'valid:border-success invalid:border-error',\n\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-2 ring-muted-foreground'\n              )}\n              color={BadgeColor.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-hidden',\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      // Base layout\n      'absolute top-0 z-10 flex w-full flex-col gap-2',\n      'rounded-xl p-2 shadow-md',\n\n      // Background and text\n      'bg-white dark:bg-neutral-950',\n      'text-text',\n\n      // Border\n      'border border-neutral-200 dark:border-neutral-800',\n\n      // Transitions\n      'transition-colors',\n\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        // Base layout\n        'flex cursor-pointer justify-between',\n        'rounded-lg px-2 py-1',\n\n        // Hover and transitions\n        'transition-colors',\n        'hover:bg-neutral/10',\n\n        // States\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50',\n\n        className\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"],"mappings":"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"}
+{"version":3,"file":"Multiselect.mjs","names":["RemoveIcon"],"sources":["../../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X as RemoveIcon } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\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  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Badge, BadgeColor } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\n/**\n * Context properties for MultiSelect component state management\n *\n * @interface MultiSelectContextProps\n */\ntype MultiSelectContextProps = {\n  /** Array of currently selected values */\n  value: string[];\n  /** Handler for value changes */\n  onValueChange: (value: string) => void;\n  /** Whether the dropdown is currently open */\n  open: boolean;\n  /** Function to set the open state */\n  setOpen: (value: boolean) => void;\n  /** Current input field value for filtering */\n  inputValue: string;\n  /** Function to set the input value */\n  setInputValue: Dispatch<SetStateAction<string>>;\n  /** Index of currently focused option for keyboard navigation */\n  activeIndex: number;\n  /** Function to set the active index */\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  /** Ref to the input element */\n  ref: RefObject<HTMLInputElement | null>;\n  /** Handler for option selection */\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\n/**\n * Custom hook to access MultiSelect context\n *\n * Provides access to the internal state and methods of the MultiSelect component.\n * Must be used within a MultiSelect component tree.\n *\n * @returns MultiSelectContextProps - All context properties and methods\n * @throws Error when used outside of MultiSelect component\n *\n * @example\n * ```tsx\n * function CustomMultiSelectItem() {\n *   const { value, onValueChange, open } = useMultiSelect();\n *   // Use context properties...\n * }\n * ```\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 * Props interface for the main MultiSelect component\n *\n * @interface MultiSelectProps\n */\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n  /**\n   * Array of selected values (controlled mode)\n   * @example\n   * ```tsx\n   * const [selected, setSelected] = useState(['react', 'vue']);\n   * <MultiSelect values={selected} onValueChange={setSelected} />\n   * ```\n   */\n  values?: string[];\n\n  /**\n   * Default selected values for uncontrolled mode\n   * @example\n   * ```tsx\n   * <MultiSelect defaultValues={['react']} />\n   * ```\n   */\n  defaultValues?: string[];\n\n  /**\n   * Callback fired when selection changes\n   * @param value - New array of selected values\n   * @example\n   * ```tsx\n   * <MultiSelect onValueChange={(values) => console.log('Selected:', values)} />\n   * ```\n   */\n  onValueChange?: (value: string[]) => void;\n\n  /**\n   * Whether keyboard navigation should loop through options\n   * @default false\n   * @example\n   * ```tsx\n   * <MultiSelect loop /> // Arrow keys wrap around at list boundaries\n   * ```\n   */\n  loop?: boolean;\n};\n\n/**\n * MultiSelect - A comprehensive multi-selection dropdown component\n *\n * An advanced multi-select component that combines the functionality of a searchable dropdown\n * with the ability to select multiple values. Built on top of Command component primitives,\n * it provides filtering, keyboard navigation, and visual feedback through badges.\n *\n * ## Key Features\n * - **Multi-Selection**: Select multiple options with visual badge representation\n * - **Searchable**: Built-in filtering to quickly find options in large lists\n * - **Keyboard Navigation**: Full arrow key navigation with optional looping\n * - **Accessibility**: Screen reader support, ARIA attributes, and focus management\n * - **Flexible State**: Both controlled and uncontrolled usage patterns\n * - **Rich UI**: Customizable badges, icons, and content layout\n *\n * ## Use Cases\n * - Tag/category selection in forms\n * - Multi-user assignment interfaces\n * - Feature/permission selection\n * - Filter selection in search interfaces\n * - Any multi-choice selection requirement\n *\n * ## Architecture\n * The component follows a compound pattern similar to Select:\n * - `MultiSelect` (root): Manages state and provides context\n * - `MultiSelect.Trigger`: Container for input and selected badges\n * - `MultiSelect.Input`: Searchable input field with filtering\n * - `MultiSelect.Content`: Dropdown container for options\n * - `MultiSelect.List`: Options container with keyboard navigation\n * - `MultiSelect.Item`: Individual selectable options\n *\n * ## Accessibility\n * - **Keyboard Navigation**: Arrow keys, Enter to select, Backspace to remove\n * - **Screen Readers**: Proper ARIA labels and live region announcements\n * - **Focus Management**: Clear focus indicators and logical tab flow\n * - **Search**: Real-time filtering with screen reader announcements\n *\n * @example\n * Basic multi-select usage:\n * ```tsx\n * const [frameworks, setFrameworks] = useState<string[]>([]);\n *\n * <MultiSelect values={frameworks} onValueChange={setFrameworks}>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select frameworks...\" />\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 *\n * @example\n * Advanced usage with keyboard looping:\n * ```tsx\n * <MultiSelect defaultValues={['react']} loop>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Choose technologies...\" />\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=\"angular\">🔴 Angular</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n *\n * @example\n * Form integration with validation:\n * ```tsx\n * <form>\n *   <MultiSelect\n *     values={selectedSkills}\n *     onValueChange={setSelectedSkills}\n *     required\n *   >\n *     <MultiSelect.Trigger className=\"min-h-[2.5rem]\">\n *       <MultiSelect.Input placeholder=\"Select your skills...\" />\n *     </MultiSelect.Trigger>\n *     <MultiSelect.Content>\n *       <MultiSelect.List>\n *         <MultiSelect.Item value=\"javascript\">JavaScript</MultiSelect.Item>\n *         <MultiSelect.Item value=\"typescript\">TypeScript</MultiSelect.Item>\n *         <MultiSelect.Item value=\"python\">Python</MultiSelect.Item>\n *       </MultiSelect.List>\n *     </MultiSelect.Content>\n *   </MultiSelect>\n * </form>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  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        // Base layout\n        'flex w-full flex-col gap-3',\n        'cursor-pointer select-text text-base shadow-none outline-none md:text-sm',\n\n        // Corner shape\n        'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n        // Spacing\n        'px-2 py-3 md:py-2',\n\n        // Background and text\n        'bg-neutral-50 dark:bg-neutral-950',\n        'text-text',\n\n        // Focus ring\n        'ring-0',\n        'focus-within:outline-none',\n        'focus-within:ring-3',\n        'focus-within:ring-neutral-200',\n        'dark:focus-within:ring-neutral-500',\n\n        'focus-within:ring-offset-white',\n        'dark:focus-within:ring-offset-neutral-500',\n\n        // Remove box-shadow\n        '[box-shadow:none]',\n\n        // States\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-invalid:border-error',\n\n        // Validation styles\n        validationStyleEnabled && 'valid:border-success invalid:border-error',\n\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-2 ring-muted-foreground'\n              )}\n              color={BadgeColor.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-hidden',\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      // Base layout\n      'absolute top-0 z-10 flex w-full flex-col gap-2',\n      'rounded-xl p-2 shadow-md',\n\n      // Background and text\n      'bg-white dark:bg-neutral-950',\n      'text-text',\n\n      // Border\n      'border border-neutral-200 dark:border-neutral-800',\n\n      // Transitions\n      'transition-colors',\n\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        // Base layout\n        'flex cursor-pointer justify-between',\n        'rounded-lg px-2 py-1',\n\n        // Hover and transitions\n        'transition-colors',\n        'hover:bg-neutral/10',\n\n        // States\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50',\n\n        className\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"],"mappings":"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"}