@andrilla/mado-ui 1.0.10 → 1.1.0

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { extendTailwindMerge, twJoin } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button as Button$1, Checkbox as Checkbox$1, 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 { 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, cloneElement, createContext, isValidElement, useContext, useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import * as ReactDOM from "react-dom";
@@ -1251,7 +1251,7 @@ if (isBrowser) {
 * @param  {String} str
 * @return {String}
 */
-const toLowerCase = (str) => str.replace(lowerCaseRgx, "$1-$2").toLowerCase();
+const toLowerCase$1 = (str) => str.replace(lowerCaseRgx, "$1-$2").toLowerCase();
 /**
 * Prioritize this method instead of regex when possible
 * @param  {String} str
@@ -1889,7 +1889,7 @@ const sanitizePropertyName = (propertyName, target, tweenType) => {
 		const cachedPropertyName = propertyNamesCache[propertyName];
 		if (cachedPropertyName) return cachedPropertyName;
 		else {
-			const lowerCaseName = propertyName ? toLowerCase(propertyName) : propertyName;
+			const lowerCaseName = propertyName ? toLowerCase$1(propertyName) : propertyName;
 			propertyNamesCache[propertyName] = lowerCaseName;
 			return lowerCaseName;
 		}
@@ -1922,7 +1922,7 @@ const cleanInlineStyles = (renderable) => {
 						for (let key in cachedTransforms) str += transformsFragmentStrings[key] + cachedTransforms[key] + ") ";
 						targetStyle.transform = str;
 					}
-				} else if (tweenHadNoInlineValue) targetStyle.removeProperty(toLowerCase(tweenProperty));
+				} else if (tweenHadNoInlineValue) targetStyle.removeProperty(toLowerCase$1(tweenProperty));
 				else targetStyle[tweenProperty] = originalInlinedValue;
 				if (animation._tail === tween) animation.targets.forEach((t) => {
 					if (t.getAttribute && t.getAttribute("style") === "") t.removeAttribute("style");
@@ -3970,6 +3970,20 @@ function getWeekdayName(weekday = d) {
 	return weekdayNamesList[weekday.getDay()];
 }
 //#endregion
+//#region src/utils/string-manipulation.ts
+/**
+* # To Lower Case
+* Converts a string to lowercase, and offers easy string replacements for creating snake case, kebab case, or your own.
+* @param str - The string to convert to lowercase.
+* @param options - Configuration options.
+* @param options[0] - The delimiter to split the string. Defaults to space.
+* @param options[1] - The string to join the parts back together. Defaults to space.
+* @returns The lowercase version of the input string, with the replacements, if provided.
+*/
+function toLowerCase(str, [delimiter, joiner]) {
+	return str.toLowerCase().replaceAll(delimiter || " ", joiner || " ");
+}
+//#endregion
 //#region src/components/chevron-up-down-anime.tsx
 function ChevronUpDownAnime({ className, isUp = false }) {
 	const firstLoadRef = useRef(true);
@@ -6346,7 +6360,7 @@ function ModalTitle({ as, ref, ...props }) {
 		ref
 	});
 }
-function ModalDialog(props) {
+function ModalDialog({ dialogPanelProps: { className: dialogPanelClassName, style: dialogPanelStyle, ...dialogPanelProps } = {}, modalScrollContainerProps: { className: modalScrollContainerClassName, ...modalScrollContainerProps } = {}, ...props }) {
 	const [modalControls, setModalControls] = useModalControls((store) => store), isMobileDevice = useMobileDevice();
 	const { className, closeModal, dialogPanelRef, isOpen, place, pseudoContainerRef, readyToClose } = modalControls || {};
 	const [dialogPanelEl, setDialogPanelEl] = useState(null);
@@ -6409,7 +6423,6 @@ function ModalDialog(props) {
 		pseudoContainer.style.width = `${width}px`;
 		pseudoContainer.style.height = `100dvh`;
 		pseudoContainer.style.zIndex = "-1";
-		pseudoContainer.style.border = "2px solid blue";
 		document.body.appendChild(pseudoContainer);
 		animate(dialogPanel, {
 			...isMobileDevice ? {
@@ -6477,8 +6490,12 @@ function ModalDialog(props) {
 			})
 		}), /* @__PURE__ */ jsxs(DialogPanel, {
 			ref: setDialogPanelRef,
-			className: twMerge("fixed left-1/2 w-screen -translate-x-1/2 bg-neutral-50 px-4 shadow-[0_-15px_50px_-12px] shadow-neutral-950/25 ease-exponential sm:w-[calc(100vw-2rem)] sm:max-w-fit sm:px-6 sm:shadow-2xl lg:px-8 dark:bg-neutral-900", place === "center" ? "top-1/2 -translate-y-1/2 rounded-2xl" : "bottom-0 h-fit max-h-[calc(100dvh-4rem)] translate-y-0 rounded-ss-4xl rounded-se-4xl after:absolute after:inset-x-0 after:-bottom-64 after:h-64 after:bg-inherit sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2 sm:rounded-ee-4xl sm:rounded-es-4xl sm:after:hidden pointer-fine:top-1/2 pointer-fine:bottom-auto pointer-fine:-translate-y-1/2 pointer-fine:rounded-3xl", className),
-			style: isMobileDevice ? void 0 : { opacity: 0 },
+			...dialogPanelProps,
+			className: twMerge("fixed left-1/2 w-screen -translate-x-1/2 bg-neutral-50 shadow-[0_-15px_50px_-12px] shadow-neutral-950/25 ease-exponential sm:w-[calc(100vw-2rem)] sm:max-w-fit sm:shadow-2xl dark:bg-neutral-900", place === "center" ? "top-1/2 -translate-y-1/2 rounded-2xl" : "bottom-0 h-fit max-h-[calc(100dvh-4rem)] translate-y-0 rounded-ss-4xl rounded-se-4xl after:absolute after:inset-x-0 after:-bottom-64 after:h-64 after:bg-inherit sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2 sm:rounded-ee-4xl sm:rounded-es-4xl sm:after:hidden pointer-fine:top-1/2 pointer-fine:bottom-auto pointer-fine:-translate-y-1/2 pointer-fine:rounded-3xl", dialogPanelClassName),
+			style: {
+				...dialogPanelStyle,
+				...isMobileDevice ? {} : { opacity: 0 }
+			},
 			children: [/* @__PURE__ */ jsx("button", {
 				className: "absolute inset-x-0 top-0 z-10 flex h-6 cursor-grab items-center justify-center after:h-1 after:w-8 after:rounded-full after:bg-neutral-500/50 after:transition-[scale,background-color] after:duration-500 after:ease-exponential active:cursor-grabbing active:after:scale-x-150 active:after:scale-y-125 active:after:bg-neutral-500 data-ready:after:scale-x-200 data-ready:after:scale-y-200 data-ready:after:bg-(--base-theme-color) pointer-fine:hover:after:scale-x-125 pointer-fine:hover:after:bg-neutral-500/75 pointer-fine:active:after:scale-x-150 pointer-fine:active:after:bg-neutral-500 data-ready:pointer-fine:hover:after:scale-x-200 data-ready:pointer-fine:hover:after:scale-y-200 data-ready:pointer-fine:hover:after:bg-(--base-theme-color) data-ready:pointer-fine:active:after:scale-x-200 data-ready:pointer-fine:active:after:scale-y-200 data-ready:pointer-fine:active:after:bg-(--base-theme-color)",
 				...readyToClose ? { "data-ready": "" } : {},
@@ -6489,10 +6506,11 @@ function ModalDialog(props) {
 					children: "Drag down to close"
 				})
 			}), /* @__PURE__ */ jsx("div", {
-				className: "overflow-y-scroll",
+				...modalScrollContainerProps,
+				className: twMerge("h-fit max-h-[calc(100dvh-4rem)] overflow-y-scroll px-4 sm:px-6 lg:px-8", modalScrollContainerClassName),
 				children: /* @__PURE__ */ jsx("div", {
 					...props,
-					className: "py-4 sm:py-6 lg:py-8"
+					className: twMerge("h-full py-3 sm:py-5 lg:py-7", className)
 				})
 			})]
 		})]
@@ -6757,6 +6775,197 @@ function Select({ buttonProps, children, className, description, descriptionProp
 	});
 }
 //#endregion
+//#region src/symbols/plus.tsx
+function Plus({ weight = "regular", ...props }) {
+	switch (weight) {
+		case "ultralight": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -65.2349 59.96 59.96",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M40.8828-6.4126L40.8828-64.0952C40.8828-64.7417 40.3511-65.2349 39.7466-65.2349C39.1421-65.2349 38.6069-64.7417 38.6069-64.0952L38.6069-6.4126C38.6069-5.76611 39.1421-5.27293 39.7466-5.27293C40.3511-5.27293 40.8828-5.76611 40.8828-6.4126ZM10.9053-34.1142L68.5879-34.1142C69.2344-34.1142 69.7242-34.6494 69.7242-35.2539C69.7242-35.8584 69.2344-36.3936 68.5879-36.3936L10.9053-36.3936C10.2554-36.3936 9.76562-35.8584 9.76562-35.2539C9.76562-34.6494 10.2554-34.1142 10.9053-34.1142Z" })
+		});
+		case "thin": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -65.6758 60.83 60.84",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M41.9492-6.60743L41.9492-63.9004C41.9492-64.875 41.1406-65.6758 40.1875-65.6758C39.2344-65.6758 38.4121-64.875 38.4121-63.9004L38.4121-6.60743C38.4121-5.63281 39.2344-4.83202 40.1875-4.83202C41.1406-4.83202 41.9492-5.63281 41.9492-6.60743ZM11.541-33.4785L68.834-33.4785C69.8086-33.4785 70.5957-34.3008 70.5957-35.2539C70.5957-36.207 69.8086-37.0293 68.834-37.0293L11.541-37.0293C10.5527-37.0293 9.76562-36.207 9.76562-35.2539C9.76562-34.3008 10.5527-33.4785 11.541-33.4785Z" })
+		});
+		case "light": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -66.5366 62.53 62.57",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M44.0313-6.9878L44.0313-63.52C44.0313-65.1353 42.6821-66.5366 41.0483-66.5366C39.4146-66.5366 38.0317-65.1353 38.0317-63.52L38.0317-6.9878C38.0317-5.37256 39.4146-3.97119 41.0483-3.97119C42.6821-3.97119 44.0313-5.37256 44.0313-6.9878ZM12.7822-32.2373L69.3145-32.2373C70.9297-32.2373 72.2974-33.6201 72.2974-35.2539C72.2974-36.8877 70.9297-38.2705 69.3145-38.2705L12.7822-38.2705C11.1333-38.2705 9.76562-36.8877 9.76562-35.2539C9.76562-33.6201 11.1333-32.2373 12.7822-32.2373Z" })
+		});
+		case "regular": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -67.1875 63.82 63.87",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M45.6055-7.27539L45.6055-63.2324C45.6055-65.332 43.8477-67.1875 41.6992-67.1875C39.5508-67.1875 37.7441-65.332 37.7441-63.2324L37.7441-7.27539C37.7441-5.17578 39.5508-3.32031 41.6992-3.32031C43.8477-3.32031 45.6055-5.17578 45.6055-7.27539ZM13.7207-31.2988L69.6777-31.2988C71.7773-31.2988 73.584-33.1055 73.584-35.2539C73.584-37.4023 71.7773-39.209 69.6777-39.209L13.7207-39.209C11.5723-39.209 9.76562-37.4023 9.76562-35.2539C9.76562-33.1055 11.5723-31.2988 13.7207-31.2988Z" })
+		});
+		case "medium": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -67.6006 64.67 64.71",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M46.8623-7.6709L46.8623-62.8193C46.8623-65.3936 44.7354-67.6006 42.1211-67.6006C39.5068-67.6006 37.3398-65.3936 37.3398-62.8193L37.3398-7.6709C37.3398-5.09668 39.5068-2.88965 42.1211-2.88965C44.7354-2.88965 46.8623-5.09668 46.8623-7.6709ZM14.5469-30.4639L69.6953-30.4639C72.2695-30.4639 74.4365-32.6309 74.4365-35.2451C74.4365-37.8594 72.2695-40.0264 69.6953-40.0264L14.5469-40.0264C11.9326-40.0264 9.76562-37.8594 9.76562-35.2451C9.76562-32.6309 11.9326-30.4639 14.5469-30.4639Z" })
+		});
+		case "semibold": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -67.9173 65.32 65.36",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M47.8259-7.97412L47.8259-62.5026C47.8259-65.4407 45.4159-67.9173 42.4445-67.9173C39.4731-67.9173 37.0299-65.4407 37.0299-62.5026L37.0299-7.97412C37.0299-5.03604 39.4731-2.55947 42.4445-2.55947C45.4159-2.55947 47.8259-5.03604 47.8259-7.97412ZM15.1803-29.8237L69.7088-29.8237C72.6469-29.8237 75.0901-32.267 75.0901-35.2384C75.0901-38.2098 72.6469-40.653 69.7088-40.653L15.1803-40.653C12.2089-40.653 9.76562-38.2098 9.76562-35.2384C9.76562-32.267 12.2089-29.8237 15.1803-29.8237Z" })
+		});
+		case "bold": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -68.335 66.19 66.21",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M49.0967-8.37402L49.0967-62.085C49.0967-65.5029 46.3135-68.335 42.8711-68.335C39.4287-68.335 36.6211-65.5029 36.6211-62.085L36.6211-8.37402C36.6211-4.95605 39.4287-2.12402 42.8711-2.12402C46.3135-2.12402 49.0967-4.95605 49.0967-8.37402ZM16.0156-28.9795L69.7266-28.9795C73.1445-28.9795 75.9521-31.7871 75.9521-35.2295C75.9521-38.6719 73.1445-41.4795 69.7266-41.4795L16.0156-41.4795C12.5732-41.4795 9.76562-38.6719 9.76562-35.2295C9.76562-31.7871 12.5732-28.9795 16.0156-28.9795Z" })
+		});
+		case "heavy": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -68.9408 67.44 67.45",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M50.9399-8.95406L50.9399-61.4791C50.9399-65.5932 47.6153-68.9408 43.4898-68.9408C39.3643-68.9408 36.0282-65.5932 36.0282-61.4791L36.0282-8.95406C36.0282-4.84005 39.3643-1.49243 43.4898-1.49243C47.6153-1.49243 50.9399-4.84005 50.9399-8.95406ZM17.2272-27.755L69.7523-27.755C73.8663-27.755 77.2024-31.0911 77.2024-35.2166C77.2024-39.3421 73.8663-42.6782 69.7523-42.6782L17.2272-42.6782C13.1017-42.6782 9.76562-39.3421 9.76562-35.2166C9.76562-31.0911 13.1017-27.755 17.2272-27.755Z" })
+		});
+		case "black": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "9.76562 -69.4824 68.55 68.55",
+			...props,
+			children: /* @__PURE__ */ jsx("path", { d: "M52.5879-9.47266L52.5879-60.9375C52.5879-65.6738 48.7793-69.4824 44.043-69.4824C39.3066-69.4824 35.498-65.6738 35.498-60.9375L35.498-9.47266C35.498-4.73633 39.3066-0.927734 44.043-0.927734C48.7793-0.927734 52.5879-4.73633 52.5879-9.47266ZM18.3105-26.6602L69.7754-26.6602C74.5117-26.6602 78.3203-30.4688 78.3203-35.2051C78.3203-39.9414 74.5117-43.75 69.7754-43.75L18.3105-43.75C13.5742-43.75 9.76562-39.9414 9.76562-35.2051C9.76562-30.4688 13.5742-26.6602 18.3105-26.6602Z" })
+		});
+	}
+}
+//#endregion
+//#region src/components/search.tsx
+/**
+* ## SearchOption
+*
+* @prop children - This is what is displayed in the drop down menu
+* @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, {
+		className: "group/option contents",
+		value: {
+			id: value,
+			name
+		},
+		...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]
+		})
+	});
+}
+/**
+* # 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 }) {
+	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 [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 handleChange = (selected) => {
+		setIsInvalid(false);
+		setSelectedOptionSync(selected);
+		onChange?.(selected);
+	};
+	const handleInvalid = () => setIsInvalid(true);
+	const refocus = () => comboboxInputRef.current?.focus();
+	return /* @__PURE__ */ jsxs(Field, {
+		...fieldProps,
+		className: (bag) => twMerge("grid gap-1", typeof fieldClassName === "function" ? fieldClassName(bag) : fieldClassName),
+		children: [
+			label && /* @__PURE__ */ jsx(Label, {
+				...labelProps,
+				className: (bag) => twMerge("text-sm font-medium", required ? `after:text-red-700 after:content-['_*']` : "", typeof labelClassName === "function" ? labelClassName(bag) : labelClassName),
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Combobox, {
+				...props,
+				invalid: isInvalid || invalid,
+				multiple,
+				onChange: handleChange,
+				onClose: () => setQuery(""),
+				value: selectedOptionSync || "",
+				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" })
+						})
+					]
+				}), /* @__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),
+					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)]
+				})]
+			}),
+			description && /* @__PURE__ */ jsx(Description, {
+				...descriptionProps,
+				className: (bag) => twMerge("text-xs text-current/60", typeof descriptionClassName === "function" ? descriptionClassName(bag) : descriptionClassName),
+				children: description
+			})
+		]
+	});
+}
+//#endregion
 //#region src/symbols/circle.fill.tsx
 function CircleFill({ weight = "regular", ...props }) {
 	switch (weight) {
@@ -8837,4 +9046,4 @@ function ArrowSvg({ className, ...props }) {
 	});
 }
 //#endregion
-export { Anchor, Button, Checkbox, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, HumanVerification, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, Select, SelectOption, SelectSectionTitle, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, generateHumanValidationToken, getLinkClasses, validateHuman };
+export { Anchor, Button, Checkbox, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, HumanVerification, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, Search, SearchOption, Select, SelectOption, SelectSectionTitle, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, generateHumanValidationToken, getLinkClasses, validateHuman };

package/dist/components/modal.d.ts

@@ -9,13 +9,17 @@ export type ModalProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
     onOpen?: () => void;
     place?: 'center' | 'bottom';
 };
-import { type ComponentPropsWithRef, type ElementType, type JSX, type ReactNode, type RefObject } from 'react';
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ElementType, type JSX, type ReactNode, type RefObject } from 'react';
 import { Button as HeadlessButton, type DialogTitleProps } from '@headlessui/react';
 export declare function ModalTrigger<TTag extends ElementType = typeof HeadlessButton>({ as, onClick, ...props }: AnyElementProps<TTag>): JSX.Element;
 export type ModalTitleProps<TTag extends ElementType = 'h2'> = Omit<DialogTitleProps<TTag>, 'as'> & AsElement<TTag> & {
     ref?: RefObject<TTag | null>;
 };
 export declare function ModalTitle<TTag extends ElementType = 'h2'>({ as, ref, ...props }: ModalTitleProps<TTag>): JSX.Element;
-export declare function ModalDialog(props: ComponentPropsWithRef<'div'>): JSX.Element;
+export type ModalDialogProps = ComponentPropsWithRef<'div'> & Partial<{
+    dialogPanelProps: ComponentPropsWithoutRef<'div'>;
+    modalScrollContainerProps: ComponentPropsWithRef<'div'>;
+}>;
+export declare function ModalDialog({ dialogPanelProps: { className: dialogPanelClassName, style: dialogPanelStyle, ...dialogPanelProps }, modalScrollContainerProps: { className: modalScrollContainerClassName, ...modalScrollContainerProps }, ...props }: ModalDialogProps): JSX.Element;
 export declare function ModalClose<TTag extends ElementType = typeof HeadlessButton>({ as, onClick, ...props }: AnyElementProps<TTag>): JSX.Element;
 export declare function Modal(props: ModalProps): JSX.Element;

package/dist/components/search.d.ts

@@ -0,0 +1,87 @@
+import type { OneOf } from '../types';
+type MultipleType = OneOf<[
+    {
+        defaultValue?: string;
+        multiple?: false | never;
+        onChange?: (selected: string | null) => void;
+    },
+    {
+        defaultValue?: string[];
+        multiple?: true;
+        onChange?: (selected: string[]) => void;
+    }
+]>;
+type CustomOption = OneOf<[
+    {
+        allowCustom?: true;
+        customOptionParams?: Partial<{
+            formatID?: (id: string) => string;
+            minLength?: number;
+            maxLength?: number;
+            regex?: RegExp;
+        }>;
+    },
+    {
+        allowCustom?: false | never;
+    }
+]>;
+export type SearchProps = Omit<ComboboxProps<string, boolean>, 'children' | 'defaultValue' | 'multiple' | 'name' | 'onChange' | 'value'> & {
+    buttonProps?: Omit<ComboboxButtonProps, 'className'> & {
+        /** @deprecated use `className` prop instead */
+        className?: never;
+        ref?: RefObject<HTMLButtonElement | null>;
+    };
+    children: ReactNode;
+    className?: ComboboxInputProps['className'];
+    description?: DescriptionProps['children'];
+    descriptionProps?: Omit<DescriptionProps, 'children'> & {
+        /** @deprecated use `description` prop instead */
+        children?: never;
+        ref?: RefObject<HTMLParagraphElement | null>;
+    };
+    fieldProps?: Omit<FieldProps, 'children'> & {
+        /** @deprecated use `children` prop instead */
+        children?: never;
+        ref?: RefObject<HTMLDivElement | null>;
+    };
+    inputProps?: Omit<ComboboxInputProps, 'className' | 'defaultValue' | 'displayValue' | 'onChange' | 'name' | 'required'> & {
+        /** @deprecated use top level `defaultValue` prop instead */
+        defaultValue?: never;
+    };
+    label?: LabelProps['children'];
+    labelProps?: Omit<LabelProps, 'children'> & {
+        /** @deprecated use `label` prop instead */
+        children?: never;
+        ref?: RefObject<HTMLLabelElement | null>;
+    };
+    name: string;
+    optionsProps?: ComboboxOptionsProps;
+    placeholder?: string;
+    ref?: RefObject<HTMLElement | null>;
+    required?: boolean;
+} & MultipleType & CustomOption;
+export type SearchOptionProps = Omit<ComboboxOptionProps<'div', string>, 'className' | 'value'> & {
+    className?: string;
+    name: string;
+    ref?: RefObject<HTMLElement | null>;
+    value: string;
+};
+import { type JSX, type ReactNode, type RefObject } from 'react';
+import { type ComboboxButtonProps, type ComboboxInputProps, type ComboboxOptionProps, type ComboboxOptionsProps, type ComboboxProps, type DescriptionProps, type FieldProps, type LabelProps } from '@headlessui/react';
+/**
+ * ## SearchOption
+ *
+ * @prop children - This is what is displayed in the drop down menu
+ * @prop name - This is used for filtering by default
+ * @prop value - This is used as selected value and for FormData
+ */
+export declare function SearchOption({ children, className, name, value, ...props }: SearchOptionProps): JSX.Element;
+/**
+ * # Search
+ *
+ * A searchable select component built on top of Headless UI's `Combobox`.
+ *
+ * Use the `SearchOption` component to define options.
+ */
+export declare 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, ...props }: SearchProps): JSX.Element;
+export {};

package/dist/components/textarea.d.ts

@@ -19,7 +19,7 @@ export type TextareaProps = HeadlessTextareaProps & {
         children?: never;
         ref?: RefObject<HTMLLabelElement | null>;
     };
-    ref?: RefObject<HTMLInputElement | null>;
+    ref?: RefObject<HTMLTextAreaElement | null>;
     resize?: boolean | 'content' | 'x' | 'y' | ('content' | 'x' | 'y')[];
 };
 import { type DescriptionProps, type FieldProps, type LabelProps, type TextareaProps as HeadlessTextareaProps } from '@headlessui/react';