@intlayer/design-system 6.1.6 → 7.0.0-canary.0

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

@@ -0,0 +1,61 @@
+//#region src/components/RightDrawer/isElementAtTopAndNotCovered.tsx
+/**
+* Utility function to determine if an HTML element is at the top of the viewport and not covered by other elements
+*
+* This function is specifically used by the RightDrawer component to ensure that click-outside
+* detection only triggers when the drawer is actually visible and not obscured by other UI elements.
+*
+* ## Algorithm
+* 1. **Viewport Check**: Verifies the element is within the visible viewport bounds
+* 2. **Coverage Check**: Uses `document.elementFromPoint()` to ensure no other elements are covering the drawer
+* 3. **Center Point Testing**: Tests the center-top point of the element for accurate detection
+*
+* ## Use Cases
+* - Click-outside detection for modal and drawer components
+* - Visibility validation for overlay components
+* - Z-index conflict resolution
+* - Accessibility focus management
+*
+* @param element - The HTML element to check for visibility and coverage
+* @returns Boolean indicating if the element is visible at the top and not covered by other elements
+*
+* @example
+* Basic usage in click-outside detection:
+* ```tsx
+* const handleClickOutside = (event: MouseEvent) => {
+*   if (!drawerRef.current) return;
+*
+*   const isVisible = isElementAtTopAndNotCovered(drawerRef.current);
+*   const isClickOutside = !drawerRef.current.contains(event.target as Node);
+*
+*   if (isVisible && isClickOutside) {
+*     closeDrawer();
+*   }
+* };
+* ```
+*
+* @example
+* Checking multiple overlays:
+* ```tsx
+* const overlays = document.querySelectorAll('.overlay');
+* const visibleOverlays = Array.from(overlays).filter(overlay =>
+*   isElementAtTopAndNotCovered(overlay as HTMLElement)
+* );
+* ```
+*/
+const isElementAtTopAndNotCovered = (element) => {
+	const rect = element.getBoundingClientRect();
+	const elemTop = rect.top;
+	const elemBottom = rect.bottom - 1;
+	if (elemTop >= 0 && elemBottom <= window.innerHeight) {
+		const centerX = rect.left + rect.width / 2;
+		const centerY = rect.top + 10;
+		const topElement = document.elementFromPoint(centerX, centerY);
+		return element === topElement || element.contains(topElement);
+	}
+	return false;
+};
+
+//#endregion
+export { isElementAtTopAndNotCovered };
+//# sourceMappingURL=isElementAtTopAndNotCovered.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"isElementAtTopAndNotCovered.mjs","names":[],"sources":["../../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["/**\n * Utility function to determine if an HTML element is at the top of the viewport and not covered by other elements\n *\n * This function is specifically used by the RightDrawer component to ensure that click-outside\n * detection only triggers when the drawer is actually visible and not obscured by other UI elements.\n *\n * ## Algorithm\n * 1. **Viewport Check**: Verifies the element is within the visible viewport bounds\n * 2. **Coverage Check**: Uses `document.elementFromPoint()` to ensure no other elements are covering the drawer\n * 3. **Center Point Testing**: Tests the center-top point of the element for accurate detection\n *\n * ## Use Cases\n * - Click-outside detection for modal and drawer components\n * - Visibility validation for overlay components\n * - Z-index conflict resolution\n * - Accessibility focus management\n *\n * @param element - The HTML element to check for visibility and coverage\n * @returns Boolean indicating if the element is visible at the top and not covered by other elements\n *\n * @example\n * Basic usage in click-outside detection:\n * ```tsx\n * const handleClickOutside = (event: MouseEvent) => {\n *   if (!drawerRef.current) return;\n *\n *   const isVisible = isElementAtTopAndNotCovered(drawerRef.current);\n *   const isClickOutside = !drawerRef.current.contains(event.target as Node);\n *\n *   if (isVisible && isClickOutside) {\n *     closeDrawer();\n *   }\n * };\n * ```\n *\n * @example\n * Checking multiple overlays:\n * ```tsx\n * const overlays = document.querySelectorAll('.overlay');\n * const visibleOverlays = Array.from(overlays).filter(overlay =>\n *   isElementAtTopAndNotCovered(overlay as HTMLElement)\n * );\n * ```\n */\nexport const isElementAtTopAndNotCovered = (element: HTMLElement): boolean => {\n  const rect = element.getBoundingClientRect();\n  const elemTop = rect.top;\n  const elemBottom = rect.bottom - 1; // -1 to avoid the border of the element\n\n  // Check if element is at the top of the viewport\n  const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;\n\n  // Further check if the element is not covered by any other element at the center point of its top boundary\n  if (isVisibleAtTop) {\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + 10; // slight offset from the very top to ensure we're within the element bounds\n    const topElement = document.elementFromPoint(centerX, centerY);\n\n    // Check if our element is the topmost element at these coordinates or a child of the topmost element\n    return element === topElement || element.contains(topElement);\n  }\n\n  return false;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,+BAA+B,YAAkC;CAC5E,MAAM,OAAO,QAAQ,uBAAuB;CAC5C,MAAM,UAAU,KAAK;CACrB,MAAM,aAAa,KAAK,SAAS;AAMjC,KAHuB,WAAW,KAAK,cAAc,OAAO,aAGxC;EAClB,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;EACzC,MAAM,UAAU,KAAK,MAAM;EAC3B,MAAM,aAAa,SAAS,iBAAiB,SAAS,QAAQ;AAG9D,SAAO,YAAY,cAAc,QAAQ,SAAS,WAAW;;AAG/D,QAAO"}

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

@@ -0,0 +1,87 @@
+import { create } from "zustand";
+
+//#region src/components/RightDrawer/useRightDrawerStore.ts
+/**
+* Zustand store for managing RightDrawer component states
+*
+* This store provides centralized state management for multiple drawer instances,
+* allowing different parts of the application to open, close, and check the status
+* of drawers using unique identifiers.
+*
+* ## Features
+* - **Multi-instance Management**: Handle multiple drawers simultaneously
+* - **Simple API**: Open, close, and check drawer states with string identifiers
+* - **Persistent State**: Drawer states persist until explicitly changed
+* - **Type Safety**: Full TypeScript support with proper type inference
+*
+* ## Usage Patterns
+*
+* ### Basic Usage
+* ```tsx
+* import { useRightDrawerStore } from './useRightDrawerStore';
+*
+* function NavigationButton() {
+*   const { open } = useRightDrawerStore();
+*
+*   return (
+*     <button onClick={() => open('main-menu')}>
+*       Open Menu
+*     </button>
+*   );
+* }
+* ```
+*
+* ### Conditional Rendering
+* ```tsx
+* function ConditionalContent() {
+*   const isMenuOpen = useRightDrawerStore(state => state.isOpen('main-menu'));
+*
+*   return (
+*     <div>
+*       {isMenuOpen ? 'Menu is open' : 'Menu is closed'}
+*     </div>
+*   );
+* }
+* ```
+*
+* ### Multiple Drawers
+* ```tsx
+* function MultiDrawerManager() {
+*   const { open, close, isOpen } = useRightDrawerStore();
+*
+*   return (
+*     <div>
+*       <button onClick={() => open('cart')}>Open Cart</button>
+*       <button onClick={() => open('profile')}>Open Profile</button>
+*       <button onClick={() => {
+*         close('cart');
+*         close('profile');
+*       }}>Close All</button>
+*
+*       <div>
+*         Cart: {isOpen('cart') ? 'Open' : 'Closed'}
+*         Profile: {isOpen('profile') ? 'Open' : 'Closed'}
+*       </div>
+*     </div>
+*   );
+* }
+* ```
+*
+* @returns RightDrawerStore instance with drawer management capabilities
+*/
+const useRightDrawerStore = create((set, get) => ({
+	drawers: {},
+	open: (key) => set((state) => ({ drawers: {
+		...state.drawers,
+		[key]: true
+	} })),
+	close: (key) => set((state) => ({ drawers: {
+		...state.drawers,
+		[key]: false
+	} })),
+	isOpen: (key) => get().drawers[key] ?? false
+}));
+
+//#endregion
+export { useRightDrawerStore };
+//# sourceMappingURL=useRightDrawerStore.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useRightDrawerStore.mjs","names":[],"sources":["../../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\n/**\n * Type definition for the RightDrawer Zustand store state and actions\n *\n * @interface RightDrawerStore\n */\ntype RightDrawerStore = {\n  /** Record of drawer identifiers and their open/closed states */\n  drawers: Record<string, boolean>;\n\n  /**\n   * Opens a drawer with the specified identifier\n   * @param key - Unique identifier for the drawer instance\n   * @example\n   * ```tsx\n   * const { open } = useRightDrawerStore();\n   * open('user-profile'); // Opens the drawer with identifier 'user-profile'\n   * ```\n   */\n  open: (key: string) => void;\n\n  /**\n   * Closes a drawer with the specified identifier\n   * @param key - Unique identifier for the drawer instance\n   * @example\n   * ```tsx\n   * const { close } = useRightDrawerStore();\n   * close('user-profile'); // Closes the drawer with identifier 'user-profile'\n   * ```\n   */\n  close: (key: string) => void;\n\n  /**\n   * Checks if a drawer with the specified identifier is currently open\n   * @param key - Unique identifier for the drawer instance\n   * @returns Boolean indicating if the drawer is open (defaults to false if not found)\n   * @example\n   * ```tsx\n   * const { isOpen } = useRightDrawerStore();\n   * const isProfileOpen = isOpen('user-profile');\n   * ```\n   */\n  isOpen: (key: string) => boolean;\n};\n\n/**\n * Zustand store for managing RightDrawer component states\n *\n * This store provides centralized state management for multiple drawer instances,\n * allowing different parts of the application to open, close, and check the status\n * of drawers using unique identifiers.\n *\n * ## Features\n * - **Multi-instance Management**: Handle multiple drawers simultaneously\n * - **Simple API**: Open, close, and check drawer states with string identifiers\n * - **Persistent State**: Drawer states persist until explicitly changed\n * - **Type Safety**: Full TypeScript support with proper type inference\n *\n * ## Usage Patterns\n *\n * ### Basic Usage\n * ```tsx\n * import { useRightDrawerStore } from './useRightDrawerStore';\n *\n * function NavigationButton() {\n *   const { open } = useRightDrawerStore();\n *\n *   return (\n *     <button onClick={() => open('main-menu')}>\n *       Open Menu\n *     </button>\n *   );\n * }\n * ```\n *\n * ### Conditional Rendering\n * ```tsx\n * function ConditionalContent() {\n *   const isMenuOpen = useRightDrawerStore(state => state.isOpen('main-menu'));\n *\n *   return (\n *     <div>\n *       {isMenuOpen ? 'Menu is open' : 'Menu is closed'}\n *     </div>\n *   );\n * }\n * ```\n *\n * ### Multiple Drawers\n * ```tsx\n * function MultiDrawerManager() {\n *   const { open, close, isOpen } = useRightDrawerStore();\n *\n *   return (\n *     <div>\n *       <button onClick={() => open('cart')}>Open Cart</button>\n *       <button onClick={() => open('profile')}>Open Profile</button>\n *       <button onClick={() => {\n *         close('cart');\n *         close('profile');\n *       }}>Close All</button>\n *\n *       <div>\n *         Cart: {isOpen('cart') ? 'Open' : 'Closed'}\n *         Profile: {isOpen('profile') ? 'Open' : 'Closed'}\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @returns RightDrawerStore instance with drawer management capabilities\n */\nexport const useRightDrawerStore = create<RightDrawerStore>((set, get) => ({\n  drawers: {},\n  open: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: true,\n      },\n    })),\n  close: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: false,\n      },\n    })),\n  isOpen: (key: string) => get().drawers[key] ?? false,\n}));\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAa,sBAAsB,QAA0B,KAAK,SAAS;CACzE,SAAS,EAAE;CACX,OAAO,QACL,KAAK,WAAW,EACd,SAAS;EACP,GAAG,MAAM;GACR,MAAM;EACR,EACF,EAAE;CACL,QAAQ,QACN,KAAK,WAAW,EACd,SAAS;EACP,GAAG,MAAM;GACR,MAAM;EACR,EACF,EAAE;CACL,SAAS,QAAgB,KAAK,CAAC,QAAQ,QAAQ;CAChD,EAAE"}

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

@@ -0,0 +1,355 @@
+'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$1) => value$1, 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 rounded-lg p-1 py-2", "flex w-full items-center justify-between whitespace-nowrap border border-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", "w-full select-text resize-none rounded-xl border-2 bg-input-background px-2 py-1 text-input-text 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,
+		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-lg border border-muted bg-input-background p-2 shadow-md 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", className, isIncluded && "opacity-50", props.disabled && "cursor-not-allowed opacity-50"),
+		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 };
+//# sourceMappingURL=Multiselect.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Multiselect.mjs","names":["MultiSelectRoot: FC<MultiSelectProps>","MultiSelectTrigger: FC<\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n>","value","mousePreventDefault: MouseEventHandler<HTMLButtonElement>","RemoveIcon","MultiSelectInput: FC<ComponentProps<typeof Command.Input>>","MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>>","MultiSelectList: typeof Command.List","MultiSelectItem: FC<\n  { value: string } & ComponentProps<typeof Command.Item>\n>","mousePreventDefault: MouseEventHandler<HTMLDivElement>"],"sources":["../../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\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 { cn } from '../../utils/cn';\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        'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n        'flex w-full items-center justify-between whitespace-nowrap border border-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background px-2 py-1 text-input-text 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-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      'absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border border-muted bg-input-background 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"],"mappings":"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"}