@spear-ai/spectral 1.16.3 → 1.16.5

package/dist/InputSearch.js

@@ -0,0 +1,374 @@
+'use client';
+import { CloseCircleIcon } from "./Icons/CloseCircleIcon.js";
+import { ErrorIcon } from "./Icons/ErrorIcon.js";
+import { LoaderIcon } from "./Icons/LoaderIcon.js";
+import { PlusIcon } from "./Icons/PlusIcon.js";
+import { SearchIcon } from "./Icons/SearchIcon.js";
+import { WarningIcon } from "./Icons/WarningIcon.js";
+import { cn } from "./utils/twUtils.js";
+import { ErrorMessage, WarningMessage } from "./FormFieldMessage.js";
+import { EmptyState, getAriaProps, getDropdownSurfaceClasses, getDropdownWidthStyles, getErrorMessageId, getFormFieldCSSProperties, getInputClasses, getOptionClasses, useFormFieldId, useFormFieldState } from "./utils/formFieldUtils.js";
+import { useUncontrolledState } from "./hooks/useUncontrolledState.js";
+import { Label } from "./Label.js";
+import { useAutoDropdownHorizontalShift } from "./utils/dropdownPositioning.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+
+//#region src/components/InputSearch/InputSearch.tsx
+const defaultCreateOptionLabel = (query) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PlusIcon, {
+	size: 16,
+	className: "shrink-0"
+}), /* @__PURE__ */ jsxs("span", {
+	className: "truncate",
+	children: ["Create ", /* @__PURE__ */ jsxs("span", {
+		className: "font-semibold",
+		children: [
+			"“",
+			query,
+			"”"
+		]
+	})]
+})] });
+const InputSearch = ({ className, createOptionLabel = defaultCreateOptionLabel, creatingLabel = "Creating…", defaultValue = "", disabled, dropdownWidth = "trigger", emptyMessage = "No options found", errorMessage, id, isCreating = false, label, labelClassName, messageReserveLines = 1, messageReserveSpace = false, name, onChange, onCreate, onValueChange, options, placeholder = "Search…", ref, renderOption, required, showSearchIcon = true, state = "default", value: valueProp, warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel }) => {
+	if (!label && !ariaLabel) console.warn("InputSearch: provide either `label` or `aria-label` for an accessible name.");
+	const fieldId = useFormFieldId(id, name);
+	const listboxId = `${fieldId}-listbox`;
+	const errorMessageId = getErrorMessageId(fieldId);
+	const warningMessageId = `${fieldId}-warning`;
+	const messageId = state === "error" ? errorMessageId : state === "warning" && warningMessage ? warningMessageId : void 0;
+	const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state);
+	const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId);
+	const [value, setValue] = useUncontrolledState({
+		value: valueProp,
+		defaultValue,
+		onChange: (nextValue) => {
+			if (onChange) onChange(nextValue);
+			else onValueChange?.(nextValue);
+		}
+	});
+	const [query, setQuery] = useState("");
+	const [isFocused, setIsFocused] = useState(false);
+	const [highlightedIndex, setHighlightedIndex] = useState(-1);
+	const [dropdownPosition, setDropdownPosition] = useState(null);
+	const inputRef = useRef(null);
+	const listRef = useRef(null);
+	const blurTimeoutRef = useRef(null);
+	const triggerRef = useRef(null);
+	const selectedOption = useMemo(() => options.find((option) => option.value === value) ?? null, [options, value]);
+	useEffect(() => {
+		if (!isFocused) setQuery(selectedOption?.label ?? "");
+	}, [selectedOption, isFocused]);
+	const trimmedQuery = query.trim();
+	const filteredOptions = useMemo(() => {
+		if (trimmedQuery.length === 0) return options;
+		const lower = trimmedQuery.toLowerCase();
+		return options.filter((option) => option.label.toLowerCase().includes(lower));
+	}, [trimmedQuery, options]);
+	const exactMatch = useMemo(() => options.some((option) => option.label.toLowerCase() === trimmedQuery.toLowerCase()), [options, trimmedQuery]);
+	const showCreateOption = onCreate !== void 0 && trimmedQuery.length > 0 && !exactMatch;
+	const createOptionIndex = showCreateOption ? filteredOptions.length : -1;
+	const totalItems = filteredOptions.length + (showCreateOption ? 1 : 0);
+	const showDropdown = isFocused && !isDisabled && !isLoading;
+	const showEmptyState = showDropdown && totalItems === 0;
+	const { dropdownShiftStyle, recalculateDropdownPosition, setDropdownElement } = useAutoDropdownHorizontalShift(showDropdown);
+	const updateDropdownPosition = useCallback(() => {
+		const trigger = triggerRef.current;
+		if (!trigger) return;
+		const rect = trigger.getBoundingClientRect();
+		setDropdownPosition({
+			top: rect.bottom + 4,
+			left: rect.left,
+			width: rect.width
+		});
+		recalculateDropdownPosition();
+	}, [recalculateDropdownPosition]);
+	useLayoutEffect(() => {
+		if (!showDropdown) {
+			setDropdownPosition(null);
+			return;
+		}
+		updateDropdownPosition();
+		const handle = () => updateDropdownPosition();
+		window.addEventListener("scroll", handle, true);
+		window.addEventListener("resize", handle);
+		return () => {
+			window.removeEventListener("scroll", handle, true);
+			window.removeEventListener("resize", handle);
+		};
+	}, [showDropdown, updateDropdownPosition]);
+	useLayoutEffect(() => {
+		if (!showDropdown) return;
+		updateDropdownPosition();
+	}, [
+		showDropdown,
+		updateDropdownPosition,
+		filteredOptions.length,
+		showCreateOption
+	]);
+	useEffect(() => {
+		setHighlightedIndex(-1);
+	}, [filteredOptions.length, showCreateOption]);
+	useEffect(() => {
+		if (highlightedIndex < 0 || !listRef.current) return;
+		listRef.current.querySelector(`[data-index='${highlightedIndex}']`)?.scrollIntoView({ block: "nearest" });
+	}, [highlightedIndex]);
+	useEffect(() => () => {
+		if (blurTimeoutRef.current !== null) clearTimeout(blurTimeoutRef.current);
+	}, []);
+	const commitSelection = useCallback((option) => {
+		if (option.disabled) return;
+		setValue(option.value);
+		setQuery(option.label);
+		setIsFocused(false);
+		setHighlightedIndex(-1);
+		inputRef.current?.blur();
+	}, [setValue]);
+	const commitCreate = useCallback(() => {
+		if (!onCreate || isCreating || trimmedQuery.length === 0) return;
+		onCreate(trimmedQuery);
+	}, [
+		onCreate,
+		isCreating,
+		trimmedQuery
+	]);
+	const handleKeyDown = useCallback((event) => {
+		switch (event.key) {
+			case "ArrowDown":
+				if (totalItems === 0) return;
+				event.preventDefault();
+				setHighlightedIndex((prev) => prev < totalItems - 1 ? prev + 1 : prev);
+				break;
+			case "ArrowUp":
+				if (totalItems === 0) return;
+				event.preventDefault();
+				setHighlightedIndex((prev) => prev > 0 ? prev - 1 : 0);
+				break;
+			case "Enter":
+				if (totalItems === 0) return;
+				event.preventDefault();
+				if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+					const option = filteredOptions[highlightedIndex];
+					if (option) commitSelection(option);
+				} else if (highlightedIndex === createOptionIndex && !isCreating) commitCreate();
+				break;
+			case "Escape":
+				event.preventDefault();
+				setIsFocused(false);
+				setHighlightedIndex(-1);
+				if (selectedOption) setQuery(selectedOption.label);
+				inputRef.current?.blur();
+				break;
+			default: break;
+		}
+	}, [
+		totalItems,
+		filteredOptions,
+		highlightedIndex,
+		createOptionIndex,
+		commitSelection,
+		commitCreate,
+		isCreating,
+		selectedOption
+	]);
+	const handleFocus = useCallback(() => {
+		if (blurTimeoutRef.current !== null) {
+			clearTimeout(blurTimeoutRef.current);
+			blurTimeoutRef.current = null;
+		}
+		setIsFocused(true);
+		setQuery("");
+	}, []);
+	const handleBlur = useCallback(() => {
+		if (blurTimeoutRef.current !== null) clearTimeout(blurTimeoutRef.current);
+		blurTimeoutRef.current = setTimeout(() => {
+			blurTimeoutRef.current = null;
+			setIsFocused(false);
+			setHighlightedIndex(-1);
+			setQuery(selectedOption?.label ?? "");
+		}, 150);
+	}, [selectedOption]);
+	const handleClear = useCallback(() => {
+		setValue("");
+		setQuery("");
+		inputRef.current?.focus();
+	}, [setValue]);
+	const showClearButton = !isLoading && !isDisabled && (value.length > 0 || isFocused && query.length > 0);
+	const { dropdownWidthMode, dropdownWidthStyle } = getDropdownWidthStyles({
+		dropdownWidth,
+		triggerWidth: "100%"
+	});
+	const inputClasses = cn(getInputClasses(state, className), "pe-12", showSearchIcon && "ps-11", showClearButton && "pe-10", state === "loading" && "cursor-wait");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col gap-1.5",
+		"data-testid": "spectral-input-search-container",
+		ref,
+		children: [
+			label && /* @__PURE__ */ jsx(Label, {
+				className: cn("mb-2 block", labelClassName, isDisabled && "cursor-not-allowed text-input-text--disabled"),
+				"data-testid": "spectral-input-search-label",
+				htmlFor: fieldId,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative",
+				"data-testid": "spectral-input-search-wrapper",
+				ref: triggerRef,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [
+						showSearchIcon && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "left-4 text-input-icon absolute top-1/2 -translate-y-1/2",
+							"data-testid": "spectral-input-search-icon",
+							children: /* @__PURE__ */ jsx(SearchIcon, { size: 20 })
+						}),
+						/* @__PURE__ */ jsx("input", {
+							"aria-activedescendant": highlightedIndex >= 0 ? `${fieldId}-option-${highlightedIndex}` : void 0,
+							"aria-autocomplete": "list",
+							"aria-controls": listboxId,
+							"aria-expanded": showDropdown,
+							"aria-haspopup": "listbox",
+							"aria-label": ariaLabel ?? label,
+							autoComplete: "off",
+							className: inputClasses,
+							"data-state": state,
+							"data-testid": "spectral-input-search",
+							disabled: isDisabled || isLoading,
+							id: fieldId,
+							name,
+							onBlur: handleBlur,
+							onChange: (event) => {
+								setQuery(event.target.value);
+								if (!isFocused) setIsFocused(true);
+							},
+							onFocus: handleFocus,
+							onKeyDown: handleKeyDown,
+							placeholder,
+							ref: inputRef,
+							required,
+							role: "combobox",
+							style: getFormFieldCSSProperties(),
+							type: "text",
+							value: query,
+							...ariaProps
+						}),
+						showClearButton ? /* @__PURE__ */ jsx("button", {
+							"aria-label": `Clear ${label ?? "search"}`,
+							className: "right-4 text-input-icon hover:text-input-icon--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus rounded-sm absolute top-1/2 -translate-y-1/2 cursor-pointer",
+							"data-testid": "spectral-input-search-clear-button",
+							onClick: handleClear,
+							onMouseDown: (event) => event.preventDefault(),
+							type: "button",
+							children: /* @__PURE__ */ jsx(CloseCircleIcon, { size: 20 })
+						}) : state === "loading" ? /* @__PURE__ */ jsx("div", {
+							className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
+							"data-testid": "spectral-input-search-loading-icon",
+							children: /* @__PURE__ */ jsx(LoaderIcon, {
+								className: "motion-safe:animate-spin",
+								size: 20
+							})
+						}) : state === "error" ? /* @__PURE__ */ jsx("div", {
+							className: "right-4 text-danger-400 absolute top-1/2 -translate-y-1/2",
+							"data-testid": "spectral-input-search-error-icon",
+							children: /* @__PURE__ */ jsx(ErrorIcon, { size: 20 })
+						}) : state === "warning" ? /* @__PURE__ */ jsx("div", {
+							className: "right-4 text-warning-400 absolute top-1/2 -translate-y-1/2",
+							"data-testid": "spectral-input-search-warning-icon",
+							children: /* @__PURE__ */ jsx(WarningIcon, { size: 20 })
+						}) : null
+					]
+				})
+			}),
+			showDropdown && dropdownPosition && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+				className: cn("origin-top p-1 z-50 fixed", getDropdownSurfaceClasses(), "max-h-72 overflow-hidden", "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:slide-in-from-top-2"),
+				"data-dropdown-width-mode": dropdownWidthMode,
+				"data-dropdown-width-value": dropdownWidthMode === "custom" ? dropdownWidth : void 0,
+				"data-testid": "spectral-input-search-content",
+				ref: setDropdownElement,
+				style: {
+					top: `${dropdownPosition.top}px`,
+					left: `${dropdownPosition.left}px`,
+					...dropdownWidthMode === "trigger" ? { width: `${dropdownPosition.width}px` } : dropdownWidthStyle,
+					...dropdownShiftStyle
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					className: "max-h-[17.5rem] overflow-y-auto",
+					id: listboxId,
+					ref: listRef,
+					role: "listbox",
+					children: showEmptyState ? /* @__PURE__ */ jsx(EmptyState, { message: emptyMessage }) : /* @__PURE__ */ jsxs(Fragment, { children: [filteredOptions.map((option, index) => {
+						const isHighlighted = index === highlightedIndex;
+						const isSelected = option.value === value;
+						return /* @__PURE__ */ jsx("button", {
+							"aria-selected": isSelected,
+							className: cn(getOptionClasses(!!option.disabled, isHighlighted, isSelected), "text-left"),
+							"data-highlighted": isHighlighted ? "" : void 0,
+							"data-index": index,
+							"data-testid": "spectral-input-search-item",
+							disabled: option.disabled,
+							id: `${fieldId}-option-${index}`,
+							onMouseDown: (event) => {
+								event.preventDefault();
+								commitSelection(option);
+							},
+							onMouseEnter: () => setHighlightedIndex(index),
+							role: "option",
+							tabIndex: -1,
+							type: "button",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate",
+								children: renderOption ? renderOption(option) : option.label
+							})
+						}, option.value);
+					}), showCreateOption && /* @__PURE__ */ jsx("button", {
+						"aria-selected": createOptionIndex === highlightedIndex,
+						className: cn(getOptionClasses(isCreating, createOptionIndex === highlightedIndex, false), "gap-2 text-left text-accent font-medium"),
+						"data-highlighted": createOptionIndex === highlightedIndex ? "" : void 0,
+						"data-index": createOptionIndex,
+						"data-testid": "spectral-input-search-create-option",
+						disabled: isCreating,
+						id: `${fieldId}-option-${createOptionIndex}`,
+						onMouseDown: (event) => {
+							event.preventDefault();
+							commitCreate();
+						},
+						onMouseEnter: () => setHighlightedIndex(createOptionIndex),
+						role: "option",
+						tabIndex: -1,
+						type: "button",
+						children: isCreating ? /* @__PURE__ */ jsxs("span", {
+							className: "gap-2 flex items-center",
+							children: [/* @__PURE__ */ jsx(LoaderIcon, {
+								className: "shrink-0 motion-safe:animate-spin",
+								size: 16
+							}), /* @__PURE__ */ jsx("span", { children: creatingLabel })]
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "gap-2 flex items-center min-w-0",
+							children: createOptionLabel(trimmedQuery)
+						})
+					})] })
+				})
+			}), document.body) : null,
+			/* @__PURE__ */ jsx(ErrorMessage, {
+				dataTestId: "spectral-input-search-error-message",
+				id: errorMessageId,
+				message: isInvalid ? errorMessage ?? null : null,
+				messageReserveLines,
+				messageReserveSpace: messageReserveSpace && state === "error"
+			}),
+			/* @__PURE__ */ jsx(WarningMessage, {
+				dataTestId: "spectral-input-search-warning-message",
+				id: warningMessageId,
+				message: state === "warning" ? warningMessage ?? null : null,
+				messageReserveLines,
+				messageReserveSpace: messageReserveSpace && state === "warning"
+			})
+		]
+	});
+};
+InputSearch.displayName = "InputSearch";
+
+//#endregion
+export { InputSearch };
+//# sourceMappingURL=InputSearch.js.map

package/dist/InputSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSearch.js","names":[],"sources":["../src/components/InputSearch/InputSearch.tsx"],"sourcesContent":["import { CloseCircleIcon, ErrorIcon, LoaderIcon, PlusIcon, SearchIcon, WarningIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { useAutoDropdownHorizontalShift } from '@utils/dropdownPositioning'\nimport {\n  EmptyState,\n  ErrorMessage,\n  WarningMessage,\n  getAriaProps,\n  getDropdownSurfaceClasses,\n  getDropdownWidthStyles,\n  getErrorMessageId,\n  getFormFieldCSSProperties,\n  getInputClasses,\n  getOptionClasses,\n  useFormFieldId,\n  useFormFieldState,\n  type BaseFormFieldProps,\n  type BaseOption,\n  type DropdownWidth,\n  type FormFieldState,\n} from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode, type Ref } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport type InputSearchOption = BaseOption\n\nexport interface InputSearchProps extends Omit<BaseFormFieldProps, 'onChange' | 'state'> {\n  className?: string\n  createOptionLabel?: (query: string) => ReactNode\n  creatingLabel?: string\n  defaultValue?: string\n  dropdownWidth?: DropdownWidth\n  emptyMessage?: string\n  isCreating?: boolean\n  labelClassName?: string\n  onChange?: (value: string) => void\n  onCreate?: (query: string) => void\n  onValueChange?: (value: string) => void\n  options: InputSearchOption[]\n  placeholder?: string\n  renderOption?: (option: InputSearchOption) => ReactNode\n  showSearchIcon?: boolean\n  state?: Exclude<FormFieldState, 'disabled'>\n  value?: string\n  warningMessage?: BaseFormFieldProps['errorMessage']\n}\n\nconst defaultCreateOptionLabel = (query: string): ReactNode => (\n  <>\n    <PlusIcon size={16} className='shrink-0' />\n    <span className='truncate'>\n      Create <span className='font-semibold'>&ldquo;{query}&rdquo;</span>\n    </span>\n  </>\n)\n\nexport const InputSearch = ({\n  className,\n  createOptionLabel = defaultCreateOptionLabel,\n  creatingLabel = 'Creating…',\n  defaultValue = '',\n  disabled,\n  dropdownWidth = 'trigger',\n  emptyMessage = 'No options found',\n  errorMessage,\n  id,\n  isCreating = false,\n  label,\n  labelClassName,\n  messageReserveLines = 1,\n  messageReserveSpace = false,\n  name,\n  onChange,\n  onCreate,\n  onValueChange,\n  options,\n  placeholder = 'Search…',\n  ref,\n  renderOption,\n  required,\n  showSearchIcon = true,\n  state = 'default',\n  value: valueProp,\n  warningMessage,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n}: InputSearchProps & { ref?: Ref<HTMLDivElement> }) => {\n  if (process.env.NODE_ENV !== 'production' && !label && !ariaLabel) {\n    // eslint-disable-next-line no-console\n    console.warn('InputSearch: provide either `label` or `aria-label` for an accessible name.')\n  }\n\n  const fieldId = useFormFieldId(id, name)\n  const listboxId = `${fieldId}-listbox`\n  const errorMessageId = getErrorMessageId(fieldId)\n  const warningMessageId = `${fieldId}-warning`\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state)\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue,\n    onChange: (nextValue) => {\n      if (onChange) {\n        onChange(nextValue)\n      } else {\n        onValueChange?.(nextValue)\n      }\n    },\n  })\n\n  const [query, setQuery] = useState('')\n  const [isFocused, setIsFocused] = useState(false)\n  const [highlightedIndex, setHighlightedIndex] = useState(-1)\n  const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number; width: number } | null>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const listRef = useRef<HTMLDivElement>(null)\n  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  const selectedOption = useMemo(() => options.find((option) => option.value === value) ?? null, [options, value])\n\n  useEffect(() => {\n    if (!isFocused) {\n      setQuery(selectedOption?.label ?? '')\n    }\n  }, [selectedOption, isFocused])\n\n  const trimmedQuery = query.trim()\n\n  const filteredOptions = useMemo(() => {\n    if (trimmedQuery.length === 0) return options\n    const lower = trimmedQuery.toLowerCase()\n    return options.filter((option) => option.label.toLowerCase().includes(lower))\n  }, [trimmedQuery, options])\n\n  const exactMatch = useMemo(() => options.some((option) => option.label.toLowerCase() === trimmedQuery.toLowerCase()), [options, trimmedQuery])\n\n  const showCreateOption = onCreate !== undefined && trimmedQuery.length > 0 && !exactMatch\n  const createOptionIndex = showCreateOption ? filteredOptions.length : -1\n  const totalItems = filteredOptions.length + (showCreateOption ? 1 : 0)\n  const showDropdown = isFocused && !isDisabled && !isLoading\n  const showEmptyState = showDropdown && totalItems === 0\n\n  const { dropdownShiftStyle, recalculateDropdownPosition, setDropdownElement } = useAutoDropdownHorizontalShift(showDropdown)\n\n  const updateDropdownPosition = useCallback(() => {\n    const trigger = triggerRef.current\n    if (!trigger) return\n    const rect = trigger.getBoundingClientRect()\n    setDropdownPosition({\n      top: rect.bottom + 4,\n      left: rect.left,\n      width: rect.width,\n    })\n    recalculateDropdownPosition()\n  }, [recalculateDropdownPosition])\n\n  useLayoutEffect(() => {\n    if (!showDropdown) {\n      setDropdownPosition(null)\n      return\n    }\n    updateDropdownPosition()\n    const handle = () => updateDropdownPosition()\n    window.addEventListener('scroll', handle, true)\n    window.addEventListener('resize', handle)\n    return () => {\n      window.removeEventListener('scroll', handle, true)\n      window.removeEventListener('resize', handle)\n    }\n  }, [showDropdown, updateDropdownPosition])\n\n  useLayoutEffect(() => {\n    if (!showDropdown) return\n    updateDropdownPosition()\n  }, [showDropdown, updateDropdownPosition, filteredOptions.length, showCreateOption])\n\n  useEffect(() => {\n    setHighlightedIndex(-1)\n  }, [filteredOptions.length, showCreateOption])\n\n  useEffect(() => {\n    if (highlightedIndex < 0 || !listRef.current) return\n    const element = listRef.current.querySelector<HTMLElement>(`[data-index='${highlightedIndex}']`)\n    element?.scrollIntoView({ block: 'nearest' })\n  }, [highlightedIndex])\n\n  useEffect(\n    () => () => {\n      if (blurTimeoutRef.current !== null) {\n        clearTimeout(blurTimeoutRef.current)\n      }\n    },\n    [],\n  )\n\n  const commitSelection = useCallback(\n    (option: InputSearchOption) => {\n      if (option.disabled) return\n      setValue(option.value)\n      setQuery(option.label)\n      setIsFocused(false)\n      setHighlightedIndex(-1)\n      inputRef.current?.blur()\n    },\n    [setValue],\n  )\n\n  const commitCreate = useCallback(() => {\n    if (!onCreate || isCreating || trimmedQuery.length === 0) return\n    onCreate(trimmedQuery)\n  }, [onCreate, isCreating, trimmedQuery])\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      switch (event.key) {\n        case 'ArrowDown': {\n          if (totalItems === 0) return\n          event.preventDefault()\n          setHighlightedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev))\n          break\n        }\n        case 'ArrowUp': {\n          if (totalItems === 0) return\n          event.preventDefault()\n          setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0))\n          break\n        }\n        case 'Enter': {\n          if (totalItems === 0) return\n          event.preventDefault()\n          if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {\n            const option = filteredOptions[highlightedIndex]\n            if (option) commitSelection(option)\n          } else if (highlightedIndex === createOptionIndex && !isCreating) {\n            commitCreate()\n          }\n          break\n        }\n        case 'Escape': {\n          event.preventDefault()\n          setIsFocused(false)\n          setHighlightedIndex(-1)\n          if (selectedOption) setQuery(selectedOption.label)\n          inputRef.current?.blur()\n          break\n        }\n        default:\n          break\n      }\n    },\n    [totalItems, filteredOptions, highlightedIndex, createOptionIndex, commitSelection, commitCreate, isCreating, selectedOption],\n  )\n\n  const handleFocus = useCallback(() => {\n    if (blurTimeoutRef.current !== null) {\n      clearTimeout(blurTimeoutRef.current)\n      blurTimeoutRef.current = null\n    }\n    setIsFocused(true)\n    setQuery('')\n  }, [])\n\n  const handleBlur = useCallback(() => {\n    if (blurTimeoutRef.current !== null) {\n      clearTimeout(blurTimeoutRef.current)\n    }\n    blurTimeoutRef.current = setTimeout(() => {\n      blurTimeoutRef.current = null\n      setIsFocused(false)\n      setHighlightedIndex(-1)\n      setQuery(selectedOption?.label ?? '')\n    }, 150)\n  }, [selectedOption])\n\n  const handleClear = useCallback(() => {\n    setValue('')\n    setQuery('')\n    inputRef.current?.focus()\n  }, [setValue])\n\n  const showClearButton = !isLoading && !isDisabled && (value.length > 0 || (isFocused && query.length > 0))\n\n  const { dropdownWidthMode, dropdownWidthStyle } = getDropdownWidthStyles({\n    dropdownWidth,\n    triggerWidth: '100%',\n  })\n\n  const inputClasses = cn(getInputClasses(state, className), 'pe-12', showSearchIcon && 'ps-11', showClearButton && 'pe-10', state === 'loading' && 'cursor-wait')\n\n  return (\n    <div className='flex w-full flex-col gap-1.5' data-testid='spectral-input-search-container' ref={ref}>\n      {label && (\n        <Label className={cn('mb-2 block', labelClassName, isDisabled && 'cursor-not-allowed text-input-text--disabled')} data-testid='spectral-input-search-label' htmlFor={fieldId}>\n          {label}\n        </Label>\n      )}\n\n      <div className='relative' data-testid='spectral-input-search-wrapper' ref={triggerRef}>\n        <div className='relative'>\n          {showSearchIcon && (\n            <span aria-hidden='true' className='left-4 text-input-icon absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-icon'>\n              <SearchIcon size={20} />\n            </span>\n          )}\n\n          <input\n            aria-activedescendant={highlightedIndex >= 0 ? `${fieldId}-option-${highlightedIndex}` : undefined}\n            aria-autocomplete='list'\n            aria-controls={listboxId}\n            aria-expanded={showDropdown}\n            // oxlint-disable-next-line jsx-a11y/role-supports-aria-props -- Valid per WAI-ARIA 1.2 Combobox pattern\n            aria-haspopup='listbox'\n            aria-label={ariaLabel ?? label}\n            autoComplete='off'\n            className={inputClasses}\n            data-state={state}\n            data-testid='spectral-input-search'\n            disabled={isDisabled || isLoading}\n            id={fieldId}\n            name={name}\n            onBlur={handleBlur}\n            onChange={(event) => {\n              setQuery(event.target.value)\n              if (!isFocused) setIsFocused(true)\n            }}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            ref={inputRef}\n            required={required}\n            role='combobox'\n            style={getFormFieldCSSProperties() as CSSProperties}\n            type='text'\n            value={query}\n            {...ariaProps}\n          />\n\n          {showClearButton ? (\n            <button\n              aria-label={`Clear ${label ?? 'search'}`}\n              className='right-4 text-input-icon hover:text-input-icon--hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus rounded-sm absolute top-1/2 -translate-y-1/2 cursor-pointer'\n              data-testid='spectral-input-search-clear-button'\n              onClick={handleClear}\n              // Prevent input blur from firing before click resolves\n              onMouseDown={(event) => event.preventDefault()}\n              type='button'\n            >\n              <CloseCircleIcon size={20} />\n            </button>\n          ) : state === 'loading' ? (\n            <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-loading-icon'>\n              <LoaderIcon className='motion-safe:animate-spin' size={20} />\n            </div>\n          ) : state === 'error' ? (\n            <div className='right-4 text-danger-400 absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-error-icon'>\n              <ErrorIcon size={20} />\n            </div>\n          ) : state === 'warning' ? (\n            <div className='right-4 text-warning-400 absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-search-warning-icon'>\n              <WarningIcon size={20} />\n            </div>\n          ) : null}\n        </div>\n\n      </div>\n\n      {showDropdown && dropdownPosition && typeof document !== 'undefined'\n        ? createPortal(\n            <div\n              className={cn('origin-top p-1 z-50 fixed', getDropdownSurfaceClasses(), 'max-h-72 overflow-hidden', 'motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:slide-in-from-top-2')}\n              data-dropdown-width-mode={dropdownWidthMode}\n              data-dropdown-width-value={dropdownWidthMode === 'custom' ? dropdownWidth : undefined}\n              data-testid='spectral-input-search-content'\n              ref={setDropdownElement}\n              style={{\n                top: `${dropdownPosition.top}px`,\n                left: `${dropdownPosition.left}px`,\n                ...(dropdownWidthMode === 'trigger' ? { width: `${dropdownPosition.width}px` } : (dropdownWidthStyle as CSSProperties)),\n                ...dropdownShiftStyle,\n              }}\n            >\n              <div\n                className='max-h-[17.5rem] overflow-y-auto'\n                id={listboxId}\n                ref={listRef}\n                // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- WAI-ARIA combobox pattern requires role='listbox' on the popup\n                role='listbox'\n              >\n                {showEmptyState ? (\n                  <EmptyState message={emptyMessage} />\n                ) : (\n                  <>\n                    {filteredOptions.map((option, index) => {\n                    const isHighlighted = index === highlightedIndex\n                    const isSelected = option.value === value\n                    return (\n                      <button\n                        aria-selected={isSelected}\n                        className={cn(getOptionClasses(!!option.disabled, isHighlighted, isSelected), 'text-left')}\n                        data-highlighted={isHighlighted ? '' : undefined}\n                        data-index={index}\n                        data-testid='spectral-input-search-item'\n                        disabled={option.disabled}\n                        id={`${fieldId}-option-${index}`}\n                        key={option.value}\n                        onMouseDown={(event) => {\n                          event.preventDefault()\n                          commitSelection(option)\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                        role='option'\n                        tabIndex={-1}\n                        type='button'\n                      >\n                        <span className='min-w-0 flex-1 truncate'>{renderOption ? renderOption(option) : option.label}</span>\n                      </button>\n                    )\n                  })}\n\n                    {showCreateOption && (\n                      <button\n                        aria-selected={createOptionIndex === highlightedIndex}\n                        className={cn(getOptionClasses(isCreating, createOptionIndex === highlightedIndex, false), 'gap-2 text-left text-accent font-medium')}\n                        data-highlighted={createOptionIndex === highlightedIndex ? '' : undefined}\n                        data-index={createOptionIndex}\n                        data-testid='spectral-input-search-create-option'\n                        disabled={isCreating}\n                        id={`${fieldId}-option-${createOptionIndex}`}\n                        onMouseDown={(event) => {\n                          event.preventDefault()\n                          commitCreate()\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(createOptionIndex)}\n                        role='option'\n                        tabIndex={-1}\n                        type='button'\n                      >\n                        {isCreating ? (\n                          <span className='gap-2 flex items-center'>\n                            <LoaderIcon className='shrink-0 motion-safe:animate-spin' size={16} />\n                            <span>{creatingLabel}</span>\n                          </span>\n                        ) : (\n                          <span className='gap-2 flex items-center min-w-0'>{createOptionLabel(trimmedQuery)}</span>\n                        )}\n                      </button>\n                    )}\n                  </>\n                )}\n              </div>\n            </div>,\n            document.body,\n          )\n        : null}\n\n      <ErrorMessage\n        dataTestId='spectral-input-search-error-message'\n        id={errorMessageId}\n        message={isInvalid ? (errorMessage ?? null) : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'error'}\n      />\n      <WarningMessage\n        dataTestId='spectral-input-search-warning-message'\n        id={warningMessageId}\n        message={state === 'warning' ? (warningMessage ?? null) : null}\n        messageReserveLines={messageReserveLines}\n        messageReserveSpace={messageReserveSpace && state === 'warning'}\n      />\n    </div>\n  )\n}\nInputSearch.displayName = 'InputSearch'\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -56,6 +56,7 @@ import { KeyboardIcon } from "./Icons/KeyboardIcon.js";
 import { LabelIcon } from "./Icons/LabelIcon.js";
 import { LassoIcon } from "./Icons/LassoIcon.js";
 import { LineToolIcon } from "./Icons/LineToolIcon.js";
+import { LinkIcon } from "./Icons/LinkIcon.js";
 import { LiveViewIcon } from "./Icons/LiveViewIcon.js";
 import { LoaderIcon } from "./Icons/LoaderIcon.js";
 import { LocationIcon } from "./Icons/LocationIcon.js";
@@ -93,6 +94,7 @@ import { SyncIcon } from "./Icons/SyncIcon.js";
 import { SyncOffIcon } from "./Icons/SyncOffIcon.js";
 import { TrashIcon } from "./Icons/TrashIcon.js";
 import { UndoIcon } from "./Icons/UndoIcon.js";
+import { UnlinkIcon } from "./Icons/UnlinkIcon.js";
 import { UploadIcon } from "./Icons/UploadIcon.js";
 import { User2Icon } from "./Icons/User2Icon.js";
 import { UserIcon } from "./Icons/UserIcon.js";
@@ -103,10 +105,11 @@ import { ZoomYIcon } from "./Icons/ZoomYIcon.js";
 import { Input, InputProps } from "./Input.js";
 import { InputNumeric, InputNumericProps } from "./InputNumeric.js";
 import { InputOTP, InputOTPBaseProps, InputOTPProps } from "./InputOTP.js";
+import { InputSearch, InputSearchOption, InputSearchProps } from "./InputSearch.js";
 import { Kbd, KbdGroup, KbdGroupProps, KbdProps, KbdSymbol } from "./Kbd.js";
 import { Label, LabelProps } from "./Label.js";
 import { MultiSelect, MultiSelectProps } from "./MultiSelect.js";
-import { Popover, PopoverContent, PopoverContentProps, PopoverTrigger } from "./Popover.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger } from "./Popover.js";
 import { RadioButton, RadioButtonProps } from "./RadioButton.js";
 import { RadioButtonGroup, RadioButtonGroupItem, RadioButtonGroupItemProps, RadioButtonGroupProps } from "./RadioButtonGroup.js";
 import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./RadioGroup.js";
@@ -129,4 +132,4 @@ import { useControllableState } from "./hooks/useControllableState.js";
 import { useUncontrolledState } from "./hooks/useUncontrolledState.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./primitives/input-group.js";
 import { cn } from "./utils/twUtils.js";
-export { Accordion, type AccordionProps, AdjustmentsIcon, Alert, type AlertProps, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupProps, ButtonGroupSeparator, ButtonIcon, type ButtonIconProps, ButtonIconSlideout, type ButtonIconSlideoutProps, type ButtonProps, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, type CheckboxProps, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, type ComboboxOption, type ComboboxProps, ControlGroupSelect, type ControlGroupSelectCaptionLayout, type ControlGroupSelectProps, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, type DataCardProps, DatabaseIcon, DateTimePicker, type DateTimePickerProps, DeleteIcon, Dialog, Drawer, type DrawerProps, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, type FormFieldMessageValue, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, type HoverCardProps, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, type InputNumericProps, InputOTP, type InputOTPBaseProps, type InputOTPProps, type InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KbdSymbol, KeyboardIcon, Label, LabelIcon, type LabelProps, LassoIcon, LineToolIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, type MultiSelectProps, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverContent, type PopoverContentProps, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, type RadioButtonGroupItemProps, type RadioButtonGroupProps, type RadioButtonProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, type SelectExtendedProps, type SelectProps, Separator, type SeparatorProps, SettingsIcon, Skeleton, Slider, type SliderProps, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, type SpectralProviderProps, StackIcon, StarIcon, SvgIdContext, Switch, type SwitchProps, SyncIcon, SyncOffIcon, Tabs, type TabsProps, Textarea, type TextareaProps, Toast, type ToastProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps, type ToggleProps, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, type TrayBaseProps, type TrayBodyProps, type TrayContentProps, UndoIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };
+export { Accordion, type AccordionProps, AdjustmentsIcon, Alert, type AlertProps, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupProps, ButtonGroupSeparator, ButtonIcon, type ButtonIconProps, ButtonIconSlideout, type ButtonIconSlideoutProps, type ButtonProps, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, type CheckboxProps, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, type ComboboxOption, type ComboboxProps, ControlGroupSelect, type ControlGroupSelectCaptionLayout, type ControlGroupSelectProps, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, type DataCardProps, DatabaseIcon, DateTimePicker, type DateTimePickerProps, DeleteIcon, Dialog, Drawer, type DrawerProps, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, type FormFieldMessageValue, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, type HoverCardProps, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, type InputNumericProps, InputOTP, type InputOTPBaseProps, type InputOTPProps, type InputProps, InputSearch, type InputSearchOption, type InputSearchProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KbdSymbol, KeyboardIcon, Label, LabelIcon, type LabelProps, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, type MultiSelectProps, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, type RadioButtonGroupItemProps, type RadioButtonGroupProps, type RadioButtonProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, type SelectExtendedProps, type SelectProps, Separator, type SeparatorProps, SettingsIcon, Skeleton, Slider, type SliderProps, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, type SpectralProviderProps, StackIcon, StarIcon, SvgIdContext, Switch, type SwitchProps, SyncIcon, SyncOffIcon, Tabs, type TabsProps, Textarea, type TextareaProps, Toast, type ToastProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps, type ToggleProps, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, type TrayBaseProps, type TrayBodyProps, type TrayContentProps, UndoIcon, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };

package/dist/index.js

@@ -38,6 +38,7 @@ import { KeyboardIcon } from "./Icons/KeyboardIcon.js";
 import { LabelIcon } from "./Icons/LabelIcon.js";
 import { LassoIcon } from "./Icons/LassoIcon.js";
 import { LineToolIcon } from "./Icons/LineToolIcon.js";
+import { LinkIcon } from "./Icons/LinkIcon.js";
 import { LiveViewIcon } from "./Icons/LiveViewIcon.js";
 import { LoaderIcon } from "./Icons/LoaderIcon.js";
 import { LocationIcon } from "./Icons/LocationIcon.js";
@@ -75,6 +76,7 @@ import { SyncIcon } from "./Icons/SyncIcon.js";
 import { SyncOffIcon } from "./Icons/SyncOffIcon.js";
 import { TrashIcon } from "./Icons/TrashIcon.js";
 import { UndoIcon } from "./Icons/UndoIcon.js";
+import { UnlinkIcon } from "./Icons/UnlinkIcon.js";
 import { UploadIcon } from "./Icons/UploadIcon.js";
 import { User2Icon } from "./Icons/User2Icon.js";
 import { UserIcon } from "./Icons/UserIcon.js";
@@ -102,7 +104,7 @@ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGr
 import { Combobox } from "./Combobox.js";
 import { ControlGroupSelect } from "./ControlGroup/ControlGroupSelect.js";
 import { DataCard } from "./DataCard.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./Popover.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./Popover.js";
 import { DateTimePicker } from "./DateTimePicker.js";
 import { Dialog } from "./Dialog.js";
 import { SpectralProvider } from "./components/SpectralProvider/SpectralProvider.js";
@@ -111,6 +113,7 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "./HoverCard.js";
 import { Input } from "./Input.js";
 import { InputNumeric } from "./InputNumeric.js";
 import { InputOTP } from "./InputOTP.js";
+import { InputSearch } from "./InputSearch.js";
 import { Kbd, KbdGroup } from "./Kbd.js";
 import { MultiSelect } from "./MultiSelect.js";
 import { RadioButtonGroup, RadioButtonGroupItem } from "./RadioButtonGroup.js";
@@ -130,4 +133,4 @@ import { ToggleGroup } from "./ToggleGroup.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip.js";
 import { Tray } from "./Tray.js";
 
-export { Accordion, AdjustmentsIcon, Alert, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, Badge, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonIcon, ButtonIconSlideout, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, ControlGroupSelect, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, DatabaseIcon, DateTimePicker, DeleteIcon, Dialog, Drawer, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, InputOTP, Kbd, KbdGroup, KeyboardIcon, Label, LabelIcon, LassoIcon, LineToolIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverContent, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, RadioGroup, RadioGroupItem, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, Separator, SettingsIcon, Skeleton, Slider, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, StackIcon, StarIcon, SvgIdContext, Switch, SyncIcon, SyncOffIcon, Tabs, Textarea, Toast, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSplitMenuItem, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, UndoIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };
+export { Accordion, AdjustmentsIcon, Alert, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, Badge, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonIcon, ButtonIconSlideout, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, ControlGroupSelect, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, DatabaseIcon, DateTimePicker, DeleteIcon, Dialog, Drawer, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, InputOTP, InputSearch, Kbd, KbdGroup, KeyboardIcon, Label, LabelIcon, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, RadioGroup, RadioGroupItem, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, Separator, SettingsIcon, Skeleton, Slider, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, StackIcon, StarIcon, SvgIdContext, Switch, SyncIcon, SyncOffIcon, Tabs, Textarea, Toast, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSplitMenuItem, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, UndoIcon, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };