@digdir/designsystemet-react 1.20.0 → 1.21.0

package/dist/cjs/components/Combobox/Option/Option.cjs

@@ -0,0 +1,65 @@
+'use client';
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_ComboboxContext = require("../ComboboxContext.cjs");
+const require_label = require("../../label/label.cjs");
+const require_omit = require("../omit/omit.cjs");
+const require_Description = require("./Description.cjs");
+const require_SelectedIcon = require("./SelectedIcon.cjs");
+const require_useComboboxOption = require("./useComboboxOption.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Combobox/Option/Option.tsx
+const ComboboxOption = (0, react.memo)((0, react.forwardRef)(({ value, description, children, className, ...rest }, forwardedRef) => {
+	const labelId = (0, react.useId)();
+	const { id, ref, selected, active, onOptionClick } = require_useComboboxOption.useComboboxOption({
+		id: rest.id,
+		ref: forwardedRef,
+		value
+	});
+	const context = (0, react.useContext)(require_ComboboxContext.ComboboxContext);
+	if (!context) throw new Error("ComboboxOption must be used within a Combobox");
+	const { size, multiple, getItemProps } = context;
+	const props = getItemProps();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
+		"data-size": "md",
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			ref,
+			id,
+			role: "option",
+			type: "button",
+			"aria-selected": !!selected,
+			"aria-labelledby": labelId,
+			tabIndex: -1,
+			onClick: (e) => {
+				onOptionClick();
+				rest.onClick?.(e);
+			},
+			className: (0, clsx_lite.default)("ds-combobox__option", active && "ds-combobox__option--active", multiple && "ds-combobox__option--multiple", className),
+			...require_omit.omit(["displayValue"], rest),
+			...require_omit.omit(["onClick", "onPointerLeave"], props),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
+				asChild: true,
+				"data-size": size,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SelectedIcon.SelectedIcon, {
+					multiple,
+					selected: !!selected
+				}) })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_label.Label, {
+				className: "ds-combobox__option__label",
+				"data-size": size,
+				id: labelId,
+				children: [children, description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Description.default, { children: description })]
+			})]
+		})
+	});
+}));
+ComboboxOption.displayName = "ComboboxOption";
+function isComboboxOption(child) {
+	return (0, react.isValidElement)(child) && child.type === ComboboxOption;
+}
+//#endregion
+exports.ComboboxOption = ComboboxOption;
+exports.isComboboxOption = isComboboxOption;

package/dist/cjs/components/Combobox/Option/Option.d.cts

@@ -0,0 +1,35 @@
+
+import { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+//#region src/components/Combobox/Option/Option.d.ts
+type ComboboxOptionProps = {
+  /**
+   * The value returned when the option is selected
+   */
+  value: string;
+  /**
+   * The index of the option in the list, will be overwritten by Combobox.
+   */
+  description?: string;
+  /**
+   * The text displayed in the input or in the chips when the option is selected.
+   * Required if children is not composed of strings only.
+   */
+  displayValue?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+declare const ComboboxOption: import("react").NamedExoticComponent<{
+  /**
+   * The value returned when the option is selected
+   */
+  value: string;
+  /**
+   * The index of the option in the list, will be overwritten by Combobox.
+   */
+  description?: string;
+  /**
+   * The text displayed in the input or in the chips when the option is selected.
+   * Required if children is not composed of strings only.
+   */
+  displayValue?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ComboboxOption, ComboboxOptionProps };

package/dist/cjs/components/Combobox/Option/SelectedIcon.cjs

@@ -0,0 +1,19 @@
+'use client';
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _navikt_aksel_icons = require("@navikt/aksel-icons");
+//#region src/components/Combobox/Option/SelectedIcon.tsx
+const SelectedIcon = ({ multiple, selected }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx_lite.default)(multiple && "ds-combobox__option__icon-wrapper", selected && "ds-combobox__option__icon-wrapper--selected"),
+		children: selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_navikt_aksel_icons.CheckmarkIcon, {
+			className: "ds-combobox__option__icon-wrapper__icon",
+			"aria-hidden": true
+		})
+	});
+};
+SelectedIcon.displayName = "SelectedIcon";
+//#endregion
+exports.SelectedIcon = SelectedIcon;

package/dist/cjs/components/Combobox/Option/useComboboxOption.cjs

@@ -0,0 +1,50 @@
+'use client';
+const require_use_debounce_callback = require("../../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.cjs");
+require("../../../utilities/index.cjs");
+const require_ComboboxContext = require("../ComboboxContext.cjs");
+const require_ComboboxIdContext = require("../ComboboxIdContext.cjs");
+const require_utilities = require("../utilities.cjs");
+let react = require("react");
+let _floating_ui_react = require("@floating-ui/react");
+//#region src/components/Combobox/Option/useComboboxOption.tsx
+const useComboboxOption = ({ id, ref, value }) => {
+	const generatedId = (0, react.useId)();
+	const newId = id || generatedId;
+	const context = (0, react.useContext)(require_ComboboxContext.ComboboxContext);
+	const { activeIndex } = require_ComboboxIdContext.useComboboxId();
+	const dispatch = require_ComboboxIdContext.useComboboxIdDispatch();
+	if (!context) throw new Error("ComboboxOption must be used within a Combobox");
+	const { selectedOptions, onOptionClick, setListRef, customIds, filteredOptions } = context;
+	const index = (0, react.useMemo)(() => filteredOptions.indexOf(require_utilities.prefix(String(value))) + customIds.length, [
+		customIds.length,
+		filteredOptions,
+		value
+	]);
+	const combinedRef = (0, _floating_ui_react.useMergeRefs)([(node) => {
+		setListRef(index, node);
+	}, ref]);
+	if (index === -1) throw new Error("Internal error: ComboboxOption did not find index");
+	const selected = selectedOptions[require_utilities.prefix(value)];
+	const active = activeIndex === index;
+	(0, react.useEffect)(() => {
+		if (active) dispatch?.({
+			type: "SET_ACTIVE_INDEX",
+			payload: index
+		});
+	}, [
+		generatedId,
+		id,
+		dispatch,
+		active,
+		index
+	]);
+	return {
+		id: newId,
+		ref: combinedRef,
+		selected,
+		active,
+		onOptionClick: require_use_debounce_callback.useDebounceCallback(() => onOptionClick(value), 50)
+	};
+};
+//#endregion
+exports.useComboboxOption = useComboboxOption;

package/dist/cjs/components/Combobox/index.cjs

@@ -0,0 +1,17 @@
+'use client';
+const require_Option = require("./Option/Option.cjs");
+const require_Combobox = require("./Combobox.cjs");
+const require_Empty = require("./Empty.cjs");
+//#region src/components/Combobox/index.ts
+/**
+* @deprecated Use `Suggestion` instead
+*/
+const Combobox = require_Combobox.Combobox;
+Combobox.Option = require_Option.ComboboxOption;
+Combobox.Empty = require_Empty.ComboboxEmpty;
+Combobox.Option.displayName = "Combobox.Option";
+Combobox.Empty.displayName = "Combobox.Empty";
+//#endregion
+exports.Combobox = Combobox;
+exports.ComboboxEmpty = require_Empty.ComboboxEmpty;
+exports.ComboboxOption = require_Option.ComboboxOption;

package/dist/cjs/components/Combobox/index.d.cts

@@ -0,0 +1,15 @@
+
+import { ComboboxOption, ComboboxOptionProps } from "./Option/Option.cjs";
+import { Combobox as Combobox$1, ComboboxProps } from "./Combobox.cjs";
+import { ComboboxEmpty, ComboboxEmptyProps } from "./Empty.cjs";
+//#region src/components/Combobox/index.d.ts
+type ComboboxComponent = typeof Combobox$1 & {
+  Option: typeof ComboboxOption;
+  Empty: typeof ComboboxEmpty;
+};
+/**
+ * @deprecated Use `Suggestion` instead
+ */
+declare const Combobox: ComboboxComponent;
+//#endregion
+export { Combobox, ComboboxEmpty, type ComboboxEmptyProps, ComboboxOption, type ComboboxOptionProps, type ComboboxProps };

package/dist/cjs/components/Combobox/internal/ComboboxChips.cjs

@@ -0,0 +1,43 @@
+'use client';
+const require_ComboboxContext = require("../ComboboxContext.cjs");
+const require_chips = require("../../chip/chips.cjs");
+require("../../chip/index.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Combobox/internal/ComboboxChips.tsx
+const ComboboxChips = () => {
+	const context = (0, react.useContext)(require_ComboboxContext.ComboboxContext);
+	if (!context) throw new Error("ComboboxContext is missing");
+	const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef } = context;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: Object.keys(selectedOptions).map((value) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chips.ChipRemovable, {
+			"data-size": size,
+			disabled,
+			onKeyDown: (e) => {
+				if (readOnly) return;
+				if (disabled) return;
+				if (e.key === "Enter") {
+					e.stopPropagation();
+					handleSelectOption({
+						option: selectedOptions[value],
+						remove: true
+					});
+					inputRef?.current?.focus();
+				}
+			},
+			onClick: () => {
+				if (readOnly) return;
+				if (disabled) return;
+				handleSelectOption({
+					option: selectedOptions[value],
+					remove: true
+				});
+			},
+			"aria-label": chipSrLabel(selectedOptions[value]),
+			children: selectedOptions[value].label
+		}, value);
+	}) });
+};
+ComboboxChips.displayName = "ComboboxChips";
+//#endregion
+exports.default = ComboboxChips;

package/dist/cjs/components/Combobox/internal/ComboboxClearButton.cjs

@@ -0,0 +1,49 @@
+'use client';
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_ComboboxContext = require("../ComboboxContext.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _navikt_aksel_icons = require("@navikt/aksel-icons");
+//#region src/components/Combobox/internal/ComboboxClearButton.tsx
+const ComboboxClearButton = (0, react.forwardRef)((props, ref) => {
+	const context = (0, react.useContext)(require_ComboboxContext.ComboboxContext);
+	if (!context) throw new Error("ComboboxContext is missing");
+	const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		ref,
+		disabled,
+		className: (0, clsx_lite.default)("ds-combobox__clear-button", `ds-focus`),
+		onClick: () => {
+			if (readOnly) return;
+			if (disabled) return;
+			handleSelectOption({
+				option: null,
+				clear: true
+			});
+		},
+		onKeyDown: (e) => {
+			if (readOnly) return;
+			if (disabled) return;
+			if (e.key === "Enter") {
+				e.stopPropagation();
+				handleSelectOption({
+					option: null,
+					clear: true
+				});
+			}
+		},
+		type: "button",
+		"aria-label": clearButtonLabel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_navikt_aksel_icons.XMarkIcon, {
+			height: "1.5em",
+			width: "1.5em",
+			title: "Clear selection"
+		})
+	});
+});
+ComboboxClearButton.displayName = "ComboboxClearButton";
+//#endregion
+exports.default = ComboboxClearButton;

package/dist/cjs/components/Combobox/internal/ComboboxError.cjs

@@ -0,0 +1,19 @@
+'use client';
+const require_validation_message = require("../../validation-message/validation-message.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Combobox/internal/ComboboxError.tsx
+const ComboboxError = ({ size, error, formFieldProps }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "ds-combobox__error-message",
+		id: formFieldProps.errorId,
+		"aria-live": "polite",
+		"aria-relevant": "additions removals",
+		children: error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_validation_message.ValidationMessage, {
+			"data-size": size,
+			children: error
+		})
+	});
+};
+ComboboxError.displayName = "ComboboxError";
+//#endregion
+exports.default = ComboboxError;

package/dist/cjs/components/Combobox/internal/ComboboxInput.cjs

@@ -0,0 +1,113 @@
+'use client';
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_ComboboxContext = require("../ComboboxContext.cjs");
+const require_ComboboxIdContext = require("../ComboboxIdContext.cjs");
+const require_omit = require("../omit/omit.cjs");
+const require_paragraph = require("../../paragraph/paragraph.cjs");
+const require_utilities = require("../utilities.cjs");
+const require_ComboboxChips = require("./ComboboxChips.cjs");
+const require_ComboboxClearButton = require("./ComboboxClearButton.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _floating_ui_react = require("@floating-ui/react");
+let _navikt_aksel_icons = require("@navikt/aksel-icons");
+//#region src/components/Combobox/internal/ComboboxInput.tsx
+const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
+	const context = (0, react.useContext)(require_ComboboxContext.ComboboxContext);
+	const idDispatch = require_ComboboxIdContext.useComboboxIdDispatch();
+	const clearButtonRef = (0, react.useRef)(null);
+	if (!context) throw new Error("ComboboxContext is missing");
+	const setActiveIndex = (id) => {
+		idDispatch?.({
+			type: "SET_ACTIVE_INDEX",
+			payload: id
+		});
+	};
+	const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, size } = context;
+	const mergedRefs = (0, _floating_ui_react.useMergeRefs)([forwareddRef, inputRef]);
+	const onChange = (event) => {
+		const value = event.target.value;
+		setInputValue(value);
+		setActiveIndex(0);
+		for (const option of Object.values(options)) if (option.label.toLowerCase() === value.toLowerCase()) {
+			if (selectedOptions[require_utilities.prefix(option.value)]) continue;
+			handleSelectOption({ option });
+		}
+	};
+	const showClearButton = !hideClearButton && Object.keys(selectedOptions).length > 0;
+	const props = getReferenceProps({
+		ref: refs?.setReference,
+		role: null,
+		"aria-controls": null,
+		"aria-expanded": null,
+		"aria-haspopup": null,
+		onClick(event) {
+			if (disabled) return;
+			if (readOnly) return;
+			if (clearButtonRef.current?.contains(event.target)) return;
+			setOpen(!open);
+			setActiveIndex(0);
+			inputRef.current?.focus();
+		},
+		onKeyDown: handleKeyDown,
+		onKeyPress(event) {
+			if (event.key === "Enter") event.preventDefault();
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.Paragraph, {
+		"data-size": size,
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...props,
+			"aria-disabled": disabled ? "true" : void 0,
+			className: (0, clsx_lite.default)("ds-textfield__input", "ds-combobox__input__wrapper", readOnly && "ds-combobox--readonly", error && "ds-combobox--error"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ds-combobox__chip-and-input",
+					children: [multiple && !hideChips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComboboxChips.default, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.Paragraph, {
+						"data-size": size,
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: mergedRefs,
+							"aria-activedescendant": props["aria-activedescendant"],
+							readOnly,
+							"aria-autocomplete": "list",
+							role: "combobox",
+							"aria-expanded": open,
+							"aria-controls": open ? listId : void 0,
+							autoComplete: "off",
+							size: htmlSize,
+							value: inputValue,
+							...require_omit.omit(["style", "className"], rest),
+							...formFieldProps.inputProps,
+							className: "ds-combobox__input",
+							onChange: (e) => {
+								onChange(e);
+								!open && setOpen(true);
+								rest.onChange?.(e);
+							}
+						})
+					})]
+				}),
+				showClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComboboxClearButton.default, { ref: clearButtonRef }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "ds-combobox__arrow",
+					children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_navikt_aksel_icons.ChevronUpIcon, {
+						title: "arrow up",
+						height: "1.5em",
+						width: "1.5em"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_navikt_aksel_icons.ChevronDownIcon, {
+						title: "arrow down",
+						height: "1.5em",
+						width: "1.5em"
+					})
+				})
+			]
+		})
+	});
+};
+ComboboxInput.displayName = "ComboboxInput";
+//#endregion
+exports.default = ComboboxInput;

package/dist/cjs/components/Combobox/internal/ComboboxLabel.cjs

@@ -0,0 +1,31 @@
+'use client';
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_label = require("../../label/label.cjs");
+const require_paragraph = require("../../paragraph/paragraph.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _navikt_aksel_icons = require("@navikt/aksel-icons");
+//#region src/components/Combobox/internal/ComboboxLabel.tsx
+const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_label.Label, {
+		"data-size": size,
+		htmlFor: formFieldProps.inputProps.id,
+		className: (0, clsx_lite.default)("ds-combobox__label", hideLabel && `ds-sr-only`),
+		children: [readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_navikt_aksel_icons.PadlockLockedFillIcon, {
+			"aria-hidden": true,
+			className: "ds-combobox__readonly__icon"
+		}), label]
+	}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.Paragraph, {
+		asChild: true,
+		"data-size": size,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: formFieldProps.descriptionId,
+			className: (0, clsx_lite.default)("ds-combobox__description", hideLabel && `ds-sr-only`),
+			children: description
+		})
+	})] });
+};
+ComboboxLabel.displayName = "ComboboxLabel";
+//#endregion
+exports.default = ComboboxLabel;

package/dist/cjs/components/Combobox/internal/ComboboxNative.cjs

@@ -0,0 +1,18 @@
+'use client';
+const require_utilities = require("../utilities.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Combobox/internal/ComboboxNative.tsx
+const ComboboxNative = ({ selectedOptions, multiple, name }) => {
+	const VALUE = Object.keys(selectedOptions).map((key) => require_utilities.removePrefix(key));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		name,
+		multiple,
+		style: { display: "none" },
+		value: multiple ? VALUE : VALUE[0],
+		onChange: () => {},
+		children: VALUE.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", { value }, value))
+	});
+};
+ComboboxNative.displayName = "ComboboxNative";
+//#endregion
+exports.default = ComboboxNative;

package/dist/cjs/components/Combobox/omit/omit.cjs

@@ -0,0 +1,25 @@
+'use client';
+//#region src/components/Combobox/omit/omit.ts
+/**
+* @deprecated This function is deprecated. Use suggest using `omit` from dedicated utiility libraries or create your own utility function.
+*
+* Returns a partial copy of an object omitting the keys specified.
+* @param {Array} names an array of String property names to omit from the new object
+* @param {Object} obj The object to copy from
+* @return {Object} A new object with properties from `names` not on it.
+* @example omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}
+*/
+const omit = (names, obj) => {
+	const result = {};
+	const index = {};
+	let idx = 0;
+	const len = names.length;
+	while (idx < len) {
+		index[names[idx]] = 1;
+		idx += 1;
+	}
+	for (const prop in obj) if (!Object.hasOwn(index, prop)) result[prop] = obj[prop];
+	return result;
+};
+//#endregion
+exports.omit = omit;

package/dist/cjs/components/Combobox/omit/{omit.js → omit.d.cts}

@@ -1,6 +1,6 @@
-'use client';
-'use strict';
 
+//#region src/components/Combobox/omit/omit.d.ts
+type UnknownRecord = Record<string | number | symbol, unknown>;
 /**
  * @deprecated This function is deprecated. Use suggest using `omit` from dedicated utiility libraries or create your own utility function.
  *
@@ -10,21 +10,6 @@
  * @return {Object} A new object with properties from `names` not on it.
  * @example omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}
  */
-const omit = (names, obj) => {
-    const result = {};
-    const index = {};
-    let idx = 0;
-    const len = names.length;
-    while (idx < len) {
-        index[names[idx]] = 1;
-        idx += 1;
-    }
-    for (const prop in obj) {
-        if (!Object.hasOwn(index, prop)) {
-            result[prop] = obj[prop];
-        }
-    }
-    return result;
-};
-
-exports.omit = omit;
+declare const omit: (names: string[], obj: UnknownRecord) => object;
+//#endregion
+export { omit };

package/dist/cjs/components/Combobox/useCombobox.cjs

@@ -0,0 +1,104 @@
+'use client';
+const require_utilities = require("./utilities.cjs");
+const require_Option = require("./Option/Option.cjs");
+let react = require("react");
+//#region src/components/Combobox/useCombobox.tsx
+const isOption = (option) => !!option;
+function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
+	return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+}, initialValue }) {
+	const filterCallback = (0, react.useCallback)(filter, [filter]);
+	const { optionsChildren, customIds, restChildren, interactiveChildren } = (0, react.useMemo)(() => {
+		return react.Children.toArray(children).reduce((acc, child) => {
+			if (require_Option.isComboboxOption(child)) acc.optionsChildren.push(child);
+			else {
+				acc.restChildren.push(child);
+				if (require_utilities.isInteractiveComboboxCustom(child)) {
+					const childElement = child;
+					acc.interactiveChildren.push(childElement);
+					if (!childElement.props.id) throw new Error("If ComboboxCustom is interactive, it must have an id");
+					acc.customIds.push(childElement.props.id);
+				}
+			}
+			return acc;
+		}, {
+			optionsChildren: [],
+			customIds: [],
+			restChildren: [],
+			interactiveChildren: []
+		});
+	}, [children]);
+	const options = (0, react.useMemo)(() => {
+		const values = [];
+		const allOptions = {};
+		optionsChildren.map((child) => {
+			const props = child.props;
+			let label = props.displayValue || "";
+			if (!props.displayValue) {
+				let childrenLabel = "";
+				react.Children.forEach(props.children, (child) => {
+					if (typeof child === "string") childrenLabel += child;
+					else throw new Error("If ComboboxOption is not a string, it must have a displayValue prop");
+				});
+				label = childrenLabel;
+			}
+			if (values.includes(props.value)) console.warn(`Combobox has multiple options with the same value: ${props.value}`);
+			values.push(props.value);
+			allOptions[require_utilities.prefix(String(props.value))] = {
+				value: String(props.value),
+				label,
+				displayValue: props.displayValue,
+				description: props.description
+			};
+			return null;
+		});
+		return allOptions;
+	}, [optionsChildren]);
+	const [selectedOptions, setSelectedOptions] = (0, react.useState)((0, react.useMemo)(() => (initialValue?.map((key) => {
+		return require_utilities.prefix(key);
+	}) || []).reduce((acc, value) => {
+		const option = options[value];
+		if (isOption(option)) acc[value] = option;
+		return acc;
+	}, {}), [initialValue, options]));
+	const { filteredOptions, filteredOptionsChildren } = (0, react.useMemo)(() => {
+		const filteredOptions = [];
+		return {
+			filteredOptions,
+			filteredOptionsChildren: Object.keys(options).map((option, index) => {
+				if (!multiple && Object.keys(selectedOptions).length === 1) {
+					filteredOptions.push(option);
+					return optionsChildren[index];
+				}
+				if (multiple && selectedOptions[option]) {
+					filteredOptions.push(option);
+					return optionsChildren[index];
+				}
+				if (filterCallback(inputValue, options[option])) {
+					filteredOptions.push(option);
+					return optionsChildren[index];
+				}
+				return null;
+			}).filter((child) => child)
+		};
+	}, [
+		filterCallback,
+		inputValue,
+		multiple,
+		options,
+		optionsChildren,
+		selectedOptions
+	]);
+	return {
+		filteredOptionsChildren,
+		filteredOptions,
+		restChildren,
+		options,
+		customIds,
+		selectedOptions,
+		interactiveChildren,
+		setSelectedOptions
+	};
+}
+//#endregion
+exports.useCombobox = useCombobox;

package/dist/cjs/components/Combobox/useCombobox.d.cts

@@ -0,0 +1,14 @@
+
+import "./Custom.cjs";
+import "./Option/Option.cjs";
+import "./Combobox.cjs";
+import { ReactElement, ReactNode } from "react";
+//#region src/components/Combobox/useCombobox.d.ts
+type Option = {
+  value: string;
+  label: string;
+  displayValue?: string;
+  description?: string;
+};
+//#endregion
+export { Option };