@andrilla/mado-ui 1.1.0 → 1.1.2

package/dist/index.js

@@ -2,7 +2,7 @@ import { extendTailwindMerge, twJoin } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1, Checkbox as Checkbox$1, Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Description, Dialog, DialogBackdrop, DialogPanel, DialogTitle, Disclosure, DisclosureButton, DisclosurePanel, Field, Fieldset as Fieldset$1, Input as Input$1, Label, Legend, Listbox, ListboxButton, ListboxOption, ListboxOptions, ListboxSelectedOption, Menu, MenuButton, MenuHeading, MenuItem, MenuItems, MenuSection, MenuSeparator, Textarea as Textarea$1 } from "@headlessui/react";
 import * as React from "react";
-import { Children, Suspense, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import * as ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
 //#region src/utils/custom-tailwind-merge.ts
@@ -6732,39 +6732,37 @@ function Input({ children, className, description, descriptionProps: { className
 }
 //#endregion
 //#region src/hooks/create-fast-context.tsx
-function createFastContext(defaultInitialState) {
-	function useStoreData(initialState = defaultInitialState) {
-		const store = useRef(initialState), get = () => store.current, subscribers = useRef(/* @__PURE__ */ new Set());
-		const set = (value) => {
-			if (typeof value === "function") store.current = value(store.current);
-			else store.current = value;
-			subscribers.current.forEach((callback) => callback());
-		};
-		const subscribe = (callback) => {
-			subscribers.current.add(callback);
-			return () => subscribers.current.delete(callback);
-		};
+function createFastContext(initialState) {
+	function useStoreData() {
+		const store = useRef(initialState);
+		const get = useCallback(() => store.current, []);
+		const subscribers = useRef(/* @__PURE__ */ new Set());
 		return {
 			get,
-			set,
-			subscribe
+			set: useCallback((value) => {
+				store.current = {
+					...store.current,
+					...value
+				};
+				subscribers.current.forEach((callback) => callback());
+			}, []),
+			subscribe: useCallback((callback) => {
+				subscribers.current.add(callback);
+				return () => subscribers.current.delete(callback);
+			}, [])
 		};
 	}
 	const StoreContext = createContext(null);
-	function Provider({ initialValue = defaultInitialState, ...props }) {
+	function Provider({ children }) {
 		return /* @__PURE__ */ jsx(StoreContext.Provider, {
-			value: useStoreData(initialValue),
-			...props
+			value: useStoreData(),
+			children
 		});
 	}
-	function useStore(selector, initialValue) {
+	function useStore(selector) {
 		const store = useContext(StoreContext);
-		if (!store) {
-			const selectedValue = selector(initialValue !== void 0 ? initialValue : defaultInitialState);
-			const noOpSet = () => console.warn("Attempting to set store value outside of Provider");
-			return [selectedValue, noOpSet];
-		}
-		return [useSyncExternalStore(store.subscribe, () => selector(store.get()), () => selector(initialValue !== void 0 ? initialValue : defaultInitialState)), store.set];
+		if (!store) throw new Error("Store not found");
+		return [useSyncExternalStore(store.subscribe, () => selector(store.get()), () => selector(initialState)), store.set];
 	}
 	return {
 		Provider,
@@ -6774,15 +6772,12 @@ function createFastContext(defaultInitialState) {
 //#endregion
 //#region src/hooks/use-form-status.tsx
 const DEFAULT_STATUS = "incomplete";
-const { Provider, useStore } = createFastContext(DEFAULT_STATUS);
-function FormStatusProvider({ children, initialStatus = DEFAULT_STATUS }) {
-	return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Provider, {
-		initialValue: initialStatus,
-		children
-	}) });
-}
-function useFormStatus() {
-	return useStore((store) => store);
+function useFormStatusContext(initialStatus = DEFAULT_STATUS) {
+	const { Provider: FormStatusProvider, useStore: useFormStatus } = createFastContext(initialStatus);
+	return {
+		FormStatusProvider,
+		useFormStatus
+	};
 }
 //#endregion
 //#region src/hooks/use-pointer-movement.ts
@@ -7030,17 +7025,11 @@ function ModalDialog({ dialogPanelProps: { className: dialogPanelClassName, styl
 				if (!setModalControls) return;
 				if (progressY >= DRAG_TO_CLOSE_PROGRESS && !readyToCloseRef.current) {
 					readyToCloseRef.current = true;
-					setModalControls((prev) => ({
-						...prev,
-						readyToClose: true
-					}));
+					setModalControls({ readyToClose: true });
 				}
 				if (progressY < DRAG_TO_CLOSE_PROGRESS && readyToCloseRef.current) {
 					readyToCloseRef.current = false;
-					setModalControls((prev) => ({
-						...prev,
-						readyToClose: false
-					}));
+					setModalControls({ readyToClose: false });
 				}
 			},
 			trigger: draggableTrigger
@@ -7165,23 +7154,18 @@ function ModalClose({ as, onClick, ...props }) {
 }
 function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }) {
 	const [modalControls, setModalControls] = useModalControls((store) => store), isMobileDevice = useMobileDevice();
-	const [isOpen, setIsOpen] = useState(false);
 	const localDialogPanelRef = useRef(null);
 	const openModal = () => {
-		setIsOpen((previous) => {
-			if (previous) return previous;
-			onOpen?.();
-			return true;
-		});
+		setModalControls({ isOpen: true });
+		onOpen?.();
 	};
 	const closeFunctions = () => {
 		onClose?.();
 		modalControls?.pseudoContainerRef?.current?.remove();
-		setModalControls?.((previous) => ({
-			...previous,
+		setModalControls?.({
 			pseudoContainerRef: { current: null },
 			readyToClose: false
-		}));
+		});
 	};
 	const mobileAnimation = {
 		y: "100%",
@@ -7203,30 +7187,21 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
 		});
 	};
 	const closeModal = () => {
-		setIsOpen((previous) => {
-			if (!previous) return previous;
-			handleClose();
-			return false;
-		});
+		setModalControls({ isOpen: false });
+		handleClose();
 	};
-	useEffect(() => {
-		setModalControls?.((previous) => ({
-			...previous,
-			isOpen,
+	const onVisible = () => {
+		setModalControls?.({
 			place,
 			className,
 			openModal,
 			closeModal,
 			dialogPanelRef: localDialogPanelRef
-		}));
-	}, [
-		className,
-		closeModal,
-		isOpen,
-		openModal,
-		place,
-		setModalControls
-	]);
+		});
+	};
+	useEffect(() => {
+		onVisible();
+	}, []);
 	return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function Modal(props) {
@@ -7285,6 +7260,10 @@ function ChevronUpChevronDown({ weight = "regular", ...props }) {
 }
 //#endregion
 //#region src/components/select.tsx
+const { Provider: SelectContextProvider, useStore: useSelectContext } = createFastContext({
+	multiple: false,
+	selectedOptionDisplayProps: {}
+});
 /**
 * ## Select Section Title
 *
@@ -7299,48 +7278,32 @@ function SelectSectionTitle({ className, ...props }) {
 /**
 * ## SelectOption
 *
-* @prop children - This is what is displayed in the drop down menu
-* @prop name - This is displayed in the trigger button
-* @prop value - This is used for FormData
-*/
-function SelectOption({ children, className, name, ...props }) {
+* @prop children - This is what is displayed in the drop down menu.
+* @prop name - This is displayed in the trigger button.
+* @prop value - This is used for FormData.
+* @prop selectedDisplayProps - This is used to customize the display of the selected option (takes priority over selectedOptionDisplayProps).
+*/
+function SelectOption({ children, className, name, selectedDisplayProps: { children: selectedDisplayChildren, className: selectedDisplayClassName, ...selectedDisplayProps } = {}, ...props }) {
+	const [selectContext] = useSelectContext((store) => store), { multiple, selectedOptionDisplayProps } = selectContext || {};
+	const { children: selectedOptionDisplayChildren, className: selectedOptionDisplayClassName } = selectedOptionDisplayProps || {};
 	return /* @__PURE__ */ jsx(ListboxOption, {
 		className: "group/option contents",
 		...props,
 		children: (bag) => bag.selectedOption ? /* @__PURE__ */ jsx("span", {
-			className: `mr-3 before:absolute before:-left-3 before:content-[',_']`,
-			children: name
+			...selectedOptionDisplayProps,
+			...selectedDisplayProps,
+			className: twMerge(!selectedDisplayClassName && !selectedOptionDisplayClassName && multiple && `before:content-[',_'] group-first-of-type/option:before:content-['']`, selectedOptionDisplayClassName, selectedDisplayClassName),
+			children: selectedDisplayChildren ? typeof selectedDisplayChildren === "function" ? selectedDisplayChildren(name) : selectedDisplayChildren : selectedOptionDisplayChildren ? typeof selectedOptionDisplayChildren === "function" ? selectedOptionDisplayChildren(name) : selectedOptionDisplayChildren : name
 		}) : /* @__PURE__ */ jsxs("div", {
-			className: twMerge("flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 group-data-selected/option:cursor-default group-data-selected/option:text-(--theme-color) group-data-focus/option:group-data-selected/option:bg-transparent dark:group-data-focus/option:bg-(--theme-color)/15", className),
-			children: [/* @__PURE__ */ jsx(Checkmark, { className: "invisible size-3.5 group-data-selected/option:visible" }), typeof children === "function" ? children(bag) : children]
+			className: twMerge("flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color,color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 group-data-selected/option:text-(--theme-color) dark:group-data-focus/option:bg-(--theme-color)/15", !multiple && "group-data-selected/option:cursor-default group-data-focus/option:group-data-selected/option:bg-transparent", className),
+			children: [/* @__PURE__ */ jsx(Checkmark, { className: "size-3.5 scale-70 opacity-0 transition-[opacity,scale] duration-200 ease-exponential group-data-selected/option:scale-100 group-data-selected/option:opacity-100" }), typeof children === "function" ? children(bag) : children]
 		})
 	});
 }
-/**
-* # Select
-*
-* A customizable select component intended to work very similar to HTML's `<select>` element.
-*
-* Use the `SelectOption` component to define the options.
-*
-* Use the `SelectSectionTitle` component to define titles.
-*
-* @prop label - The label for the select component.
-* @prop description - The description for the select component.
-* @prop placeholder - The placeholder for the select component.
-* @prop required - Whether the select component is required.
-* @prop invalid - Whether the select component is invalid.
-* @prop multiple - Whether the select component allows multiple selections.
-* @prop optionsProps - The props to be passed to each SelectOption component.
-* @prop selectedOptionProps - The props to be passed to the selected option component.
-* @prop fieldProps - The props to be passed to the parent field component.
-* @prop labelProps - The props to be passed to the label component.
-* @prop descriptionProps - The props to be passed to the description component.
-* @prop anchor - The anchor point for the drop down menu.
-*/
-function Select({ buttonProps, children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps } = {}, fieldProps: { className: fieldClassName, ...fieldProps } = {}, invalid, label, labelProps: { className: labelClassName, ...labelProps } = {}, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps } = {}, placeholder, required, selectedOptionProps: { ...selectedOptionProps } = {}, ...props }) {
+function SelectField({ buttonProps, children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps } = {}, fieldProps: { className: fieldClassName, ...fieldProps } = {}, invalid, label, labelProps: { className: labelClassName, ...labelProps } = {}, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps } = {}, placeholder, required, selectedOptionProps, selectedOptionDisplayProps, ...props }) {
 	const uniqueId = useId();
-	const multiple = props.multiple;
+	const multiple = Boolean(props.multiple);
+	const [, setSelectContext] = useSelectContext((store) => store);
 	const selectOptionList = Children.toArray(children).filter((child) => isValidElement(child) && child.props && typeof child.props === "object" && "name" in child.props && "value" in child.props && "children" in child.props);
 	const listboxButtonRef = useRef(null);
 	const [isInvalid, setIsInvalid] = useState(invalid);
@@ -7352,6 +7315,15 @@ function Select({ buttonProps, children, className, description, descriptionProp
 	};
 	const handleInvalid = () => setIsInvalid(true);
 	const refocus = () => listboxButtonRef.current?.focus();
+	const onVisible = useEffectEvent(() => {
+		setSelectContext?.({
+			multiple,
+			selectedOptionDisplayProps
+		});
+	});
+	useEffect(() => {
+		onVisible();
+	}, []);
 	return /* @__PURE__ */ jsxs(Field, {
 		...fieldProps,
 		className: (bag) => twMerge("grid gap-1", typeof fieldClassName === "function" ? fieldClassName(bag) : fieldClassName),
@@ -7408,6 +7380,32 @@ function Select({ buttonProps, children, className, description, descriptionProp
 		]
 	});
 }
+/**
+* # Select
+*
+* A customizable select component intended to work very similar to HTML's `<select>` element.
+*
+* Use the `SelectOption` component to define the options.
+*
+* Use the `SelectSectionTitle` component to define titles.
+*
+* @prop label - The label for the select component.
+* @prop description - The description for the select component.
+* @prop placeholder - The placeholder for the select component.
+* @prop required - Whether the select component is required.
+* @prop invalid - Whether the select component is invalid.
+* @prop multiple - Whether the select component allows multiple selections.
+* @prop optionsProps - The props to be passed to each SelectOption component.
+* @prop selectedOptionProps - The props to be passed to the selected option component.
+* @prop selectedOptionDisplayProps - The props to be passed to each selected option in the selected option component.
+* @prop fieldProps - The props to be passed to the parent field component.
+* @prop labelProps - The props to be passed to the label component.
+* @prop descriptionProps - The props to be passed to the description component.
+* @prop anchor - The anchor point for the drop down menu.
+*/
+function Select(props) {
+	return /* @__PURE__ */ jsx(SelectContextProvider, { children: /* @__PURE__ */ jsx(SelectField, { ...props }) });
+}
 //#endregion
 //#region src/symbols/plus.tsx
 function Plus({ weight = "regular", ...props }) {
@@ -7461,6 +7459,23 @@ function Plus({ weight = "regular", ...props }) {
 }
 //#endregion
 //#region src/components/search.tsx
+const { Provider: SearchContextProvider, useStore: useSearchContext } = createFastContext({
+	multiple: false,
+	query: "",
+	selectedOptionDisplayProps: {},
+	selectedOptionList: []
+});
+/**
+* ## Search Section Title
+*
+* Displays a simple title.
+*/
+function SearchSectionTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5 ps-2 font-bold text-neutral-500/50 backdrop-blur-[2px] backdrop-brightness-101", className),
+		...props
+	});
+}
 /**
 * ## SearchOption
 *
@@ -7468,8 +7483,17 @@ function Plus({ weight = "regular", ...props }) {
 * @prop name - This is used for filtering by default
 * @prop value - This is used as selected value and for FormData
 */
-function SearchOption({ children, className, name, value, ...props }) {
-	return /* @__PURE__ */ jsx(ComboboxOption, {
+function SearchOption({ children, className, isInDisplay, name, selectedDisplayProps: { children: selectedDisplayChildren, className: selectedDisplayClassName, ...selectedDisplayProps } = {}, value, ...props }) {
+	const [searchContext] = useSearchContext((store) => store);
+	const { multiple, query, selectedOptionDisplayProps } = searchContext || {};
+	if (!((query || "").trim() === "" || name.toLowerCase().includes((query || "").toLowerCase()) || isInDisplay)) return /* @__PURE__ */ jsx(Fragment, {});
+	const { children: selectedOptionDisplayChildren, className: selectedOptionDisplayClassName } = selectedOptionDisplayProps || {};
+	return isInDisplay ? /* @__PURE__ */ jsx("span", {
+		...selectedOptionDisplayProps,
+		...selectedDisplayProps,
+		className: twMerge(!selectedDisplayClassName && !selectedOptionDisplayClassName && multiple && `after:content-[',_'] last-of-type:after:content-['']`, selectedOptionDisplayClassName, selectedDisplayClassName),
+		children: selectedDisplayChildren ? typeof selectedDisplayChildren === "function" ? selectedDisplayChildren(name) : selectedDisplayChildren : selectedOptionDisplayChildren ? typeof selectedOptionDisplayChildren === "function" ? selectedOptionDisplayChildren(name) : selectedOptionDisplayChildren : name
+	}) : /* @__PURE__ */ jsx(ComboboxOption, {
 		className: "group/option contents",
 		value: {
 			id: value,
@@ -7477,46 +7501,130 @@ function SearchOption({ children, className, name, value, ...props }) {
 		},
 		...props,
 		children: (bag) => /* @__PURE__ */ jsxs("div", {
-			className: twMerge("flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 group-data-selected/option:cursor-default group-data-selected/option:text-(--theme-color) group-data-focus/option:group-data-selected/option:bg-transparent dark:group-data-focus/option:bg-(--theme-color)/15", className),
-			children: [/* @__PURE__ */ jsx(Checkmark, { className: "invisible size-3.5 group-data-selected/option:visible" }), typeof children === "function" ? children(bag) : children ?? name]
+			className: twMerge("flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color,color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 group-data-selected/option:text-(--theme-color) dark:group-data-focus/option:bg-(--theme-color)/15", !multiple && "group-data-selected/option:cursor-default group-data-focus/option:group-data-selected/option:bg-transparent", className),
+			children: [/* @__PURE__ */ jsx(Checkmark, { className: "size-3.5 scale-70 opacity-0 transition-[opacity,scale] duration-200 ease-exponential group-data-selected/option:scale-100 group-data-selected/option:opacity-100" }), typeof children === "function" ? children(bag) : children ?? name]
 		})
 	});
 }
-/**
-* # Search
-*
-* A searchable select component built on top of Headless UI's `Combobox`.
-*
-* Use the `SearchOption` component to define options.
-*/
-function Search({ allowCustom, buttonProps, children, className, defaultValue, description, descriptionProps: { className: descriptionClassName, ...descriptionProps } = {}, fieldProps: { className: fieldClassName, ...fieldProps } = {}, inputProps, invalid, label, labelProps: { className: labelClassName, ...labelProps } = {}, multiple, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps } = {}, placeholder, required = true, ...props }) {
+function checkEquality(aOptionList, bOptionList) {
+	if (aOptionList.length !== bOptionList.length) return false;
+	for (let i = 0; i < aOptionList.length; i += 1) {
+		const aOption = aOptionList[i], bOption = bOptionList[i];
+		if (aOption?.id !== bOption?.id || aOption?.name !== bOption?.name) return false;
+	}
+	return true;
+}
+function SearchField({ allowCustom, buttonProps, children, className, defaultValue, description, descriptionProps: { className: descriptionClassName, ...descriptionProps } = {}, fieldProps: { className: fieldClassName, ...fieldProps } = {}, inputProps, invalid, label, labelProps: { className: labelClassName, ...labelProps } = {}, multiple, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps } = {}, placeholder, required = true, shelfProps: { className: shelfClassName, ...shelfProps } = {}, selectedOptionDisplayProps, singleDisplay, ...props }) {
 	const uniqueId = useId();
-	const options = Children.toArray(children).flatMap((child) => {
-		if (!isValidElement(child)) return [];
-		const candidate = child;
-		if (typeof candidate.props?.name !== "string") return [];
-		if (typeof candidate.props?.value !== "string") return [];
-		return [{
-			name: candidate.props.name,
-			value: candidate.props.value,
-			element: child
-		}];
-	});
-	const [query, setQuery] = useState("");
+	const [searchContext, setSearchContext] = useSearchContext((store) => store), { query } = searchContext || {};
 	const [isInvalid, setIsInvalid] = useState(invalid);
 	const [selectedOptionSync, setSelectedOptionSync] = useState(() => {
 		if (multiple) return Array.isArray(defaultValue) ? defaultValue : [];
 		return typeof defaultValue === "string" ? defaultValue : null;
 	});
 	const comboboxInputRef = useRef(null);
-	const filteredOptions = query.trim() === "" ? options : options.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
+	const childOptionList = useMemo(() => Children.toArray(children).filter((child) => isValidElement(child) && !!child.props && "value" in child.props && "name" in child.props), [children]);
+	const staticOptionList = useMemo(() => childOptionList.map((child) => ({
+		id: child.props.value,
+		name: child.props.name,
+		selectedDisplayProps: child.props.selectedDisplayProps
+	})), [childOptionList]);
+	const [addedOptionList, setAddedOptionList] = useState([]);
+	const customOptionFromQuery = useMemo(() => {
+		const trimmedQuery = query.trim();
+		if (!allowCustom || trimmedQuery.length === 0) return null;
+		return {
+			id: props.customOptionParams?.formatID?.(trimmedQuery) ?? toLowerCase(trimmedQuery, [" ", "_"]),
+			name: trimmedQuery
+		};
+	}, [
+		allowCustom,
+		props.customOptionParams,
+		query
+	]);
+	const optionLookupMap = useMemo(() => {
+		const lookupMap = /* @__PURE__ */ new Map();
+		for (const option of staticOptionList) lookupMap.set(option.id, option.name);
+		for (const option of addedOptionList) lookupMap.set(option.id, option.name);
+		return lookupMap;
+	}, [addedOptionList, staticOptionList]);
+	const saveCustomOption = useEffectEvent((option) => {
+		if (!multiple) return;
+		setAddedOptionList((prevOptionList) => {
+			if (prevOptionList.some((prevOption) => prevOption.id === option.id)) return prevOptionList;
+			return [...prevOptionList, option];
+		});
+	});
 	const handleChange = (selected) => {
 		setIsInvalid(false);
+		if (multiple && Array.isArray(selected)) {
+			const selectedValueList = selected.map((selectedValue) => {
+				if (selectedValue && typeof selectedValue === "object" && "id" in selectedValue && "name" in selectedValue) {
+					const option = {
+						id: String(selectedValue.id),
+						name: String(selectedValue.name)
+					};
+					saveCustomOption(option);
+					return option.id;
+				}
+				return String(selectedValue);
+			});
+			setSelectedOptionSync(selectedValueList);
+			onChange?.(selectedValueList);
+			return;
+		}
+		if (!multiple) {
+			const normalizedSelected = selected && typeof selected === "object" && !Array.isArray(selected) ? String(selected.id) : selected;
+			setSelectedOptionSync(normalizedSelected);
+			onChange?.(normalizedSelected);
+			return;
+		}
 		setSelectedOptionSync(selected);
-		onChange?.(selected);
+	};
+	const formatSelectedDisplay = (name) => {
+		const selectedOptionDisplayChildren = selectedOptionDisplayProps?.children;
+		if (!selectedOptionDisplayChildren) return name;
+		const selectedOptionDisplayValue = typeof selectedOptionDisplayChildren === "function" ? selectedOptionDisplayChildren(name) : selectedOptionDisplayChildren;
+		return typeof selectedOptionDisplayValue === "string" ? selectedOptionDisplayValue : name;
 	};
 	const handleInvalid = () => setIsInvalid(true);
 	const refocus = () => comboboxInputRef.current?.focus();
+	const onVisible = useEffectEvent(() => {
+		setSearchContext?.({
+			multiple,
+			query: "",
+			selectedOptionDisplayProps
+		});
+	});
+	useEffect(() => {
+		onVisible();
+	}, []);
+	useEffect(() => {
+		const selectedOptionList = (Array.isArray(selectedOptionSync) ? selectedOptionSync : typeof selectedOptionSync === "string" ? [selectedOptionSync] : []).map((selectedId) => ({
+			id: selectedId,
+			name: optionLookupMap.get(selectedId) ?? selectedId
+		}));
+		if (!checkEquality(searchContext?.selectedOptionList ?? [], selectedOptionList)) setSearchContext?.({ selectedOptionList });
+	}, [
+		optionLookupMap,
+		searchContext?.selectedOptionList,
+		selectedOptionSync,
+		setSearchContext
+	]);
+	const queryChange = (e) => {
+		const { currentTarget } = e, { value } = currentTarget;
+		setSearchContext?.({ query: value });
+	};
+	const handleClose = () => {
+		setSearchContext?.({ query: "" });
+	};
+	const updateDisplayValue = (value) => {
+		if (multiple && Array.isArray(value)) {
+			if (singleDisplay) return value.map((v) => formatSelectedDisplay(v.name)).join(", ");
+		}
+		if (!multiple && value) return formatSelectedDisplay(value.name);
+		return "";
+	};
 	return /* @__PURE__ */ jsxs(Field, {
 		...fieldProps,
 		className: (bag) => twMerge("grid gap-1", typeof fieldClassName === "function" ? fieldClassName(bag) : fieldClassName),
@@ -7531,64 +7639,88 @@ function Search({ allowCustom, buttonProps, children, className, defaultValue, d
 				invalid: isInvalid || invalid,
 				multiple,
 				onChange: handleChange,
-				onClose: () => setQuery(""),
-				value: selectedOptionSync || "",
+				onClose: handleClose,
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "relative",
-					children: [
-						/* @__PURE__ */ jsx(ComboboxInput, {
-							...inputProps,
-							"aria-label": typeof label === "string" ? label : props.name,
-							className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 pr-8 pl-2 text-left text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 ease-exponential corner-super-1.5 dark:bg-neutral-700 dark:text-neutral-50", "focus:outline-3 focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800", "data-invalid:border-red-500 data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100)_5%)] data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] dark:data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-500)_5%)] data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800)_5%)] dark:data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)]", typeof className === "function" ? className(bag) : className),
-							displayValue: (value) => Array.isArray(value) ? value.map((v) => v.name).join(", ") : value?.name ?? "",
-							name: props.name,
-							onChange: (event) => setQuery(event.target.value),
-							placeholder: placeholder || (multiple ? "Choose Any" : "Choose One"),
-							ref: comboboxInputRef,
-							required
-						}),
-						/* @__PURE__ */ jsx("input", {
-							"aria-hidden": "true",
-							className: "sr-only top-0 left-1/2",
-							id: props.name + ":input:id" + uniqueId,
-							name: props.name,
-							onChange: () => {},
-							onFocus: refocus,
-							onInvalid: handleInvalid,
-							required,
-							tabIndex: -1,
-							value: Array.isArray(selectedOptionSync) ? selectedOptionSync.join(", ") : selectedOptionSync ?? ""
-						}),
-						/* @__PURE__ */ jsx(ComboboxButton, {
-							...buttonProps,
-							className: "absolute top-1/2 right-1.5 -translate-y-1/2 rounded p-0.5",
-							children: /* @__PURE__ */ jsx(ChevronUpChevronDown, { className: "size-3 fill-current/50" })
-						})
-					]
+					...multiple ? { "data-multiple": "" } : {},
+					className: "isolate contents data-multiple:grid",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [
+							/* @__PURE__ */ jsx(ComboboxInput, {
+								...inputProps,
+								"aria-label": typeof label === "string" ? label : props.name,
+								className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 ps-2 pe-8 text-left text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 ease-exponential corner-super-1.5 dark:bg-neutral-700 dark:text-neutral-50", "focus:outline-3 focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800", "data-invalid:border-red-500 data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100)_5%)] data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] dark:data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-500)_5%)] data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800)_5%)] dark:data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)]", typeof className === "function" ? className(bag) : className),
+								displayValue: updateDisplayValue,
+								name: props.name,
+								onChange: queryChange,
+								placeholder: placeholder || `${multiple ? "Choose Any" : "Choose One"}${allowCustom ? " or Create Your Own" : ""}`,
+								ref: comboboxInputRef,
+								required
+							}),
+							/* @__PURE__ */ jsx("input", {
+								"aria-hidden": "true",
+								className: "sr-only top-0 left-1/2",
+								id: props.name + ":input:id" + uniqueId,
+								name: props.name,
+								onChange: () => {},
+								onFocus: refocus,
+								onInvalid: handleInvalid,
+								required,
+								tabIndex: -1,
+								value: Array.isArray(selectedOptionSync) ? selectedOptionSync.join(", ") : selectedOptionSync ?? ""
+							}),
+							/* @__PURE__ */ jsx(ComboboxButton, {
+								...buttonProps,
+								className: "absolute top-1/2 right-1.5 -translate-y-1/2 rounded p-0.5",
+								children: /* @__PURE__ */ jsx(ChevronUpChevronDown, { className: "size-3 fill-current/50" })
+							})
+						]
+					}), multiple && !singleDisplay && /* @__PURE__ */ jsx("div", {
+						...shelfProps,
+						className: twMerge("flex min-h-8 flex-wrap gap-1 p-2 before:absolute before:inset-x-0 before:-top-4 before:bottom-0 before:-z-10 before:rounded-b-xl before:border before:border-t-0 before:border-neutral-500/50", shelfClassName),
+						children: searchContext?.selectedOptionList?.length > 0 && [...staticOptionList, ...addedOptionList].filter((option, optionIndex, optionList) => {
+							return optionList.findIndex((innerOption) => innerOption.id === option.id) === optionIndex;
+						}).map((option) => {
+							if (!searchContext.selectedOptionList.some(({ id }) => id === option.id)) return null;
+							return /* @__PURE__ */ jsx(SearchOption, {
+								name: option.name,
+								value: option.id,
+								selectedDisplayProps: option.selectedDisplayProps,
+								isInDisplay: true,
+								children: option.name
+							}, option.id);
+						}).filter(Boolean)
+					})]
 				}), /* @__PURE__ */ jsxs(ComboboxOptions, {
 					...optionsProps,
 					anchor: anchor || "bottom start",
-					className: (bag) => twMerge("z-50 w-(--input-width) origin-top rounded-xl border border-neutral-500/50 bg-neutral-50/95 p-1 backdrop-blur-sm backdrop-brightness-110 transition-[opacity,scale,translate] duration-300 ease-exponential [--anchor-gap:--spacing(1)] corner-super-1.5 empty:invisible focus:outline-none data-closed:-translate-y-0.5 data-closed:scale-y-0 data-closed:opacity-0 data-[anchor*=top]:origin-bottom dark:bg-neutral-800/95", typeof optionsClassName === "function" ? optionsClassName(bag) : optionsClassName),
+					className: (bag) => twMerge("z-50 w-(--input-width) origin-top rounded-xl border border-neutral-500/50 bg-neutral-50/95 p-1 backdrop-blur-sm backdrop-brightness-110 transition-[opacity,scale,translate] duration-300 ease-exponential corner-super-1.5 empty:invisible focus:outline-none data-closed:-translate-y-0.5 data-closed:scale-y-0 data-closed:opacity-0 data-[anchor*=top]:origin-bottom dark:bg-neutral-800/95", multiple && !singleDisplay ? "[--anchor-gap:--spacing(8)]" : "[--anchor-gap:--spacing(1)]", typeof optionsClassName === "function" ? optionsClassName(bag) : optionsClassName),
 					transition: transition ?? true,
-					children: [allowCustom && query.length > 0 && /* @__PURE__ */ jsx(ComboboxOption, {
-						value: {
-							id: props.customOptionParams?.formatID?.(query) ?? toLowerCase(query, [" ", "_"]),
-							name: query
-						},
-						className: "group/option contents",
-						children: ({ selected }) => /* @__PURE__ */ jsx("div", {
-							className: "flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 group-data-selected/option:cursor-default group-data-selected/option:text-(--theme-color) group-data-focus/option:group-data-selected/option:bg-transparent dark:group-data-focus/option:bg-(--theme-color)/15",
-							children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Checkmark, { className: "size-3.5" }), query] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-								/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-								"Use ",
-								/* @__PURE__ */ jsxs("b", { children: [
-									"\"",
-									query,
-									"\""
-								] })
-							] })
-						})
-					}), filteredOptions.map((option) => option.element)]
+					children: [
+						allowCustom && query.length > 0 && customOptionFromQuery && !addedOptionList.some((addedOption) => addedOption.id === customOptionFromQuery.id) && /* @__PURE__ */ jsx(ComboboxOption, {
+							value: customOptionFromQuery,
+							className: "group/option contents",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1 transition-[background-color] duration-200 ease-exponential select-none [--theme-color:var(--base-theme-color)] corner-super-1.5 group-disabled/option:opacity-50 group-data-focus/option:bg-(--theme-color)/15 dark:group-data-focus/option:bg-(--theme-color)/15",
+								children: [
+									/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+									"Use ",
+									/* @__PURE__ */ jsxs("b", { children: [
+										"\"",
+										query,
+										"\""
+									] })
+								]
+							})
+						}),
+						children,
+						multiple && addedOptionList.filter((addedOption) => !staticOptionList.some((staticOption) => staticOption.id === addedOption.id)).map((addedOption) => /* @__PURE__ */ jsx(SearchOption, {
+							name: addedOption.name,
+							value: addedOption.id,
+							selectedDisplayProps: addedOption.selectedDisplayProps,
+							children: addedOption.name
+						}, "added:" + addedOption.id))
+					]
 				})]
 			}),
 			description && /* @__PURE__ */ jsx(Description, {
@@ -7599,6 +7731,31 @@ function Search({ allowCustom, buttonProps, children, className, defaultValue, d
 		]
 	});
 }
+/**
+* # Search
+*
+* A searchable select component built on top of Headless UI's `Combobox`.
+*
+* Use the `SearchOption` component to define options.
+*
+* Use the `SearchSectionTitle` component to define titles.
+*
+* @prop label - The label for the select component.
+* @prop description - The description for the select component.
+* @prop placeholder - The placeholder for the select component.
+* @prop required - Whether the select component is required.
+* @prop invalid - Whether the select component is invalid.
+* @prop multiple - Whether the select component allows multiple selections.
+* @prop optionsProps - The props to be passed to each SearchOption component.
+* @prop selectedOptionDisplayProps - The props to be passed to each selected option in the selected option component.
+* @prop fieldProps - The props to be passed to the parent field component.
+* @prop labelProps - The props to be passed to the label component.
+* @prop descriptionProps - The props to be passed to the description component.
+* @prop anchor - The anchor point for the drop down menu.
+*/
+function Search(props) {
+	return /* @__PURE__ */ jsx(SearchContextProvider, { children: /* @__PURE__ */ jsx(SearchField, { ...props }) });
+}
 //#endregion
 //#region src/symbols/circle.fill.tsx
 function CircleFill({ weight = "regular", ...props }) {
@@ -9601,25 +9758,21 @@ function TooltipDisplay({ anchor = "top", arrow: arrow$4, arrowClassName, childr
 			clearTimeout(timeoutRef.current);
 		};
 	}, []);
-	const [, setTooltipContext] = useTooltipContext(() => void 0, defaultTooltipContext);
+	const [tooltipContext, setTooltipContext] = useTooltipContext(() => defaultTooltipContext);
 	useEffect(() => {
-		setTooltipContext?.((previous) => {
-			const nextArrow = arrow$4 || false, nextArrowClassName = arrowClassName || "";
-			if (previous.isOpen === isOpen && previous.openTooltip === openTooltip && previous.closeTooltip === closeTooltip && previous.refs === refs && previous.floatingStyles === floatingStyles && previous.isPositioned === isPositioned && previous.placement === placement && previous.middlewareData === middlewareData && previous.arrowRef === arrowRef && previous.arrow === nextArrow && previous.arrowClassName === nextArrowClassName) return previous;
-			return {
-				...previous,
-				isOpen,
-				openTooltip,
-				closeTooltip,
-				refs,
-				floatingStyles,
-				isPositioned,
-				placement,
-				middlewareData,
-				arrowRef,
-				arrow: nextArrow,
-				arrowClassName: nextArrowClassName
-			};
+		const nextArrow = arrow$4 || false, nextArrowClassName = arrowClassName || "";
+		if (tooltipContext && tooltipContext.isOpen !== isOpen || tooltipContext.openTooltip !== openTooltip || tooltipContext.closeTooltip !== closeTooltip || tooltipContext.refs !== refs || tooltipContext.floatingStyles !== floatingStyles || tooltipContext.isPositioned !== isPositioned || tooltipContext.placement !== placement || tooltipContext.middlewareData !== middlewareData || tooltipContext.arrowRef !== arrowRef || tooltipContext.arrow !== nextArrow || tooltipContext.arrowClassName !== nextArrowClassName) setTooltipContext?.({
+			isOpen,
+			openTooltip,
+			closeTooltip,
+			refs,
+			floatingStyles,
+			isPositioned,
+			placement,
+			middlewareData,
+			arrowRef,
+			arrow: nextArrow,
+			arrowClassName: nextArrowClassName
 		});
 	}, [
 		arrow$4,
@@ -10094,4 +10247,4 @@ function YouTubeLogo({ className, cutout = false, targets, ...props }) {
 	});
 }
 //#endregion
-export { Anchor, Button, Checkbox, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, FacebookLogo, Fieldset, Form, FormStatusProvider, Ghost, GoogleLogo, Heading, HumanVerification, IFrame, Input, InstagramLogo, Link, LinkedInLogo, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, Search, SearchOption, Select, SelectOption, SelectSectionTitle, SubmitButton, Textarea, TikTokLogo, Time, Tooltip, TooltipPanel, TooltipTrigger, XLogo, YouTubeLogo, addClass, createFastContext, currentMonthName, currentWeekdayName, daysInMonth, easeOutExpo, emailRegex, extendMadoTailwindMerge, firstOfMonth, formatPhoneNumber, generateHumanValidationToken, getDate, getHours, getHoursIn12, getLinkClasses, getLocalTime, getMeridianFromHour, getMilliseconds, getMinutes, getMonth, getMonthIndexFromName, getMonthName, getNextMonth, getPreviousMonth, getSeconds, getTimezone, getUserReadableDate, getUserReadableDateFromTimestampz, getWeekdayName, getYearsInRange, hasClass, isEmail, isPhoneNumber, monthNamesList, removeClass, splitCamelCase, telRegex, toCamelCase, toFullDateString, toLowerCase, toTitleCase, toggleClass, twMerge, useFormStatus, useMobileDevice, usePointerMovement, validateHuman, weekdayNamesList };
+export { Anchor, Button, Checkbox, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, FacebookLogo, Fieldset, Form, Ghost, GoogleLogo, Heading, HumanVerification, IFrame, Input, InstagramLogo, Link, LinkedInLogo, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, Search, SearchOption, SearchSectionTitle, Select, SelectOption, SelectSectionTitle, SubmitButton, Textarea, TikTokLogo, Time, Tooltip, TooltipPanel, TooltipTrigger, XLogo, YouTubeLogo, addClass, createFastContext, currentMonthName, currentWeekdayName, daysInMonth, easeOutExpo, emailRegex, extendMadoTailwindMerge, firstOfMonth, formatPhoneNumber, generateHumanValidationToken, getDate, getHours, getHoursIn12, getLinkClasses, getLocalTime, getMeridianFromHour, getMilliseconds, getMinutes, getMonth, getMonthIndexFromName, getMonthName, getNextMonth, getPreviousMonth, getSeconds, getTimezone, getUserReadableDate, getUserReadableDateFromTimestampz, getWeekdayName, getYearsInRange, hasClass, isEmail, isPhoneNumber, monthNamesList, removeClass, splitCamelCase, telRegex, toCamelCase, toFullDateString, toLowerCase, toTitleCase, toggleClass, twMerge, useFormStatusContext, useMobileDevice, usePointerMovement, validateHuman, weekdayNamesList };