@digdir/designsystemet-react 1.20.0 → 1.21.0

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2024 Digitaliseringsdirektoratet (Digdir)
+Copyright Digitaliseringsdirektoratet (Digdir)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/dist/cjs/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,24 @@
+'use client';
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+exports.__toESM = __toESM;

package/dist/cjs/colors.cjs

@@ -0,0 +1 @@
+'use client';

package/dist/cjs/colors.d.cts

@@ -0,0 +1,3 @@
+
+import { Color, SeverityColors } from "@digdir/designsystemet-types";
+export type { Color, SeverityColors };

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

@@ -0,0 +1,259 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_debounce_callback = require("../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.cjs");
+require("../../utilities/index.cjs");
+const require_spinner = require("../spinner/spinner.cjs");
+const require_ComboboxContext = require("./ComboboxContext.cjs");
+const require_ComboboxIdContext = require("./ComboboxIdContext.cjs");
+const require_omit = require("./omit/omit.cjs");
+const require_Custom = require("./Custom.cjs");
+const require_ComboboxError = require("./internal/ComboboxError.cjs");
+const require_utilities = require("./utilities.cjs");
+const require_ComboboxInput = require("./internal/ComboboxInput.cjs");
+const require_ComboboxLabel = require("./internal/ComboboxLabel.cjs");
+const require_ComboboxNative = require("./internal/ComboboxNative.cjs");
+const require_useCombobox = require("./useCombobox.cjs");
+const require_useComboboxKeyboard = require("./useComboboxKeyboard.cjs");
+const require_useFloatingCombobox = require("./useFloatingCombobox.cjs");
+const require_useFormField = require("./useFormField/useFormField.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 _tanstack_react_virtual = require("@tanstack/react-virtual");
+//#region src/components/Combobox/Combobox.tsx
+/**
+* @deprecated Use `Suggestion` instead
+*/
+const ComboboxComponent = (0, react.forwardRef)(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = "Fjern alt", hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = "md", loading, loadingLabel = "Laster...", filter, chipSrLabel = (option) => "Slett " + option.label, className, ...rest }, forwareddRef) => {
+	const inputRef = (0, react.useRef)(null);
+	const portalRef = (0, react.useRef)(null);
+	const listRef = (0, react.useRef)([]);
+	const [inputValue, setInputValue] = (0, react.useState)(rest.inputValue || "");
+	(0, react.useEffect)(() => {
+		if (typeof rest.inputValue === "string") setInputValue(rest.inputValue);
+	}, [rest.inputValue]);
+	const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions } = require_useCombobox.useCombobox({
+		children,
+		inputValue,
+		filter,
+		multiple,
+		initialValue
+	});
+	const { open, setOpen, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps } = require_useFloatingCombobox.useFloatingCombobox({ listRef });
+	const formFieldProps = require_useFormField.useFormField({
+		disabled,
+		readOnly,
+		error,
+		errorId,
+		size,
+		description,
+		id
+	}, "combobox");
+	(0, react.useEffect)(() => {
+		if (value && value.length > 0 && !multiple) {
+			const option = options[require_utilities.prefix(value[0])];
+			inputRef.current && require_utilities.setReactInputValue(inputRef.current, option?.label || "");
+		}
+	}, [
+		multiple,
+		value,
+		options
+	]);
+	(0, react.useEffect)(() => {
+		if (value && Object.keys(options).length >= 0) {
+			const updatedSelectedOptions = value.map((option) => {
+				return options[require_utilities.prefix(option)];
+			});
+			setSelectedOptions(updatedSelectedOptions.reduce((acc, value) => {
+				acc[require_utilities.prefix(value.value)] = value;
+				return acc;
+			}, {}));
+		}
+	}, [
+		multiple,
+		value,
+		options,
+		setSelectedOptions
+	]);
+	const handleSelectOption = (args) => {
+		const { option, clear, remove } = args;
+		if (clear) {
+			setSelectedOptions({});
+			inputRef.current && require_utilities.setReactInputValue(inputRef.current, "");
+			onValueChange?.([]);
+			return;
+		}
+		if (!option) return;
+		if (remove) {
+			const newSelectedOptions = { ...selectedOptions };
+			delete newSelectedOptions[require_utilities.prefix(option.value)];
+			setSelectedOptions(newSelectedOptions);
+			onValueChange?.(Object.keys(newSelectedOptions).map((key) => require_utilities.removePrefix(key)));
+			return;
+		}
+		const newSelectedOptions = { ...selectedOptions };
+		if (multiple) {
+			if (newSelectedOptions[require_utilities.prefix(option.value)]) delete newSelectedOptions[require_utilities.prefix(option.value)];
+			else newSelectedOptions[require_utilities.prefix(option.value)] = option;
+			inputRef.current && require_utilities.setReactInputValue(inputRef.current, "");
+			inputRef.current?.focus();
+		} else {
+			for (const key of Object.keys(newSelectedOptions)) delete newSelectedOptions[key];
+			newSelectedOptions[require_utilities.prefix(option.value)] = option;
+			inputRef.current && require_utilities.setReactInputValue(inputRef.current, option?.label || "");
+			setTimeout(() => {
+				inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);
+			}, 0);
+		}
+		setSelectedOptions(newSelectedOptions);
+		onValueChange?.(Object.keys(newSelectedOptions).map((key) => require_utilities.removePrefix(key)));
+		!multiple && setOpen(false);
+		refs.domReference.current?.focus();
+	};
+	const debouncedHandleSelectOption = require_use_debounce_callback.useDebounceCallback(handleSelectOption, 50);
+	const handleKeyDown = require_useComboboxKeyboard.useComboboxKeyboard({
+		filteredOptions,
+		selectedOptions,
+		readOnly: formFieldProps.readOnly || false,
+		disabled,
+		multiple,
+		inputValue,
+		options,
+		open,
+		interactiveChildren,
+		setOpen,
+		setInputValue,
+		handleSelectOption: debouncedHandleSelectOption
+	});
+	const rowVirtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: Object.keys(filteredOptionsChildren).length,
+		getScrollElement: () => virtual ? refs.floating.current : null,
+		estimateSize: () => 70,
+		measureElement: (elem) => {
+			return elem.getBoundingClientRect().height;
+		},
+		overscan: 7
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ComboboxContext.ComboboxContext.Provider, {
+		value: {
+			size,
+			options,
+			selectedOptions,
+			multiple,
+			disabled,
+			readOnly,
+			open,
+			inputRef,
+			refs,
+			inputValue,
+			formFieldProps,
+			htmlSize,
+			clearButtonLabel,
+			customIds,
+			filteredOptions,
+			setInputValue,
+			setOpen,
+			getReferenceProps,
+			getItemProps,
+			onOptionClick: (value) => {
+				if (readOnly) return;
+				if (disabled) return;
+				const option = options[require_utilities.prefix(value)];
+				debouncedHandleSelectOption({ option });
+			},
+			handleSelectOption: debouncedHandleSelectOption,
+			chipSrLabel,
+			listRef,
+			forwareddRef,
+			setListRef: (index, node) => {
+				listRef.current[index] = node;
+			}
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx_lite.default)("ds-combobox", `ds-combobox--${size}`, disabled && "ds-combobox__disabled", className),
+			style,
+			ref: portalRef,
+			children: [
+				name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComboboxNative.default, {
+					name,
+					selectedOptions,
+					multiple
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComboboxLabel.default, {
+					label,
+					description,
+					size,
+					readOnly,
+					hideLabel,
+					formFieldProps
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComboboxInput.default, {
+					...require_omit.omit(["inputValue"], rest),
+					hideClearButton,
+					listId: context.floatingId || "",
+					error,
+					hideChips,
+					handleKeyDown,
+					"aria-busy": loading
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComboboxError.default, {
+					size,
+					error,
+					formFieldProps
+				})
+			]
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingPortal, {
+			root: portal ? null : portalRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingFocusManager, {
+				context,
+				initialFocus: -1,
+				visuallyHiddenDismiss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					"aria-labelledby": formFieldProps.inputProps.id,
+					"aria-autocomplete": "list",
+					tabIndex: -1,
+					...getFloatingProps({
+						ref: refs.setFloating,
+						style: { ...floatingStyles }
+					}),
+					className: (0, clsx_lite.default)("ds-combobox__options-wrapper", `ds-combobox--${size}`),
+					children: [virtual && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							height: `${rowVirtualizer.getTotalSize()}px`,
+							width: "100%",
+							position: "relative"
+						},
+						children: rowVirtualizer.getVirtualItems().map((virtualRow) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							ref: rowVirtualizer.measureElement,
+							"data-index": virtualRow.index,
+							style: {
+								position: "absolute",
+								top: 0,
+								left: 0,
+								width: "100%",
+								transform: `translateY(${virtualRow.start}px)`
+							},
+							children: filteredOptionsChildren[virtualRow.index]
+						}, virtualRow.index))
+					}), loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Custom.ComboboxCustom, {
+						className: "ds-combobox__loading",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_spinner.Spinner, {
+							"aria-label": "Laster",
+							"data-size": "sm"
+						}), loadingLabel]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] })]
+				})
+			})
+		})]
+	});
+});
+const Combobox = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComboboxIdContext.ComboboxIdProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxComponent, {
+	...props,
+	ref
+}) }));
+Combobox.displayName = "Combobox";
+//#endregion
+exports.Combobox = Combobox;
+exports.ComboboxComponent = ComboboxComponent;

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

@@ -0,0 +1,211 @@
+
+import { Option } from "./useCombobox.cjs";
+import { FormFieldProps } from "./useFormField/useFormField.cjs";
+import { InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/Combobox/Combobox.d.ts
+type ComboboxProps = {
+  /**
+   * Label for the combobox.
+   *
+   * Passed label will be encapsulated by a `label` element.
+   */
+  label?: ReactNode;
+  /**
+   * Visually hides `label` and `description` (still available for screen readers)
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * String array of selected options. Contains only one option during single selection mode.
+   */
+  value?: string[];
+  /**
+   * String array of initial selected options. Contains only one option during single selection mode.
+   */
+  initialValue?: string[];
+  /**
+   * Callback function that is called when the value changes
+   */
+  onValueChange?: (value: string[]) => void;
+  /**
+   * Multiple options can be selected
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Name of the value when used in a formPuse
+   */
+  name?: string;
+  /**
+   * Exposes the HTML `size` attribute.
+   * @default 0
+   */
+  htmlSize?: number;
+  /**
+   * Hides chips when multiple options are selected
+   * @default false
+   */
+  hideChips?: boolean;
+  /**
+   * Hides the clear button
+   * @default false
+   */
+  hideClearButton?: boolean;
+  /**
+   * Label for the clear button
+   * @default 'Fjern alt'
+   */
+  clearButtonLabel?: string;
+  /**
+   * Enables virtualizing of options list.
+   * @see https://tanstack.com/virtual
+   * @default false
+   */
+  virtual?: boolean;
+  /**
+   * Value of the input field
+   */
+  inputValue?: string;
+  /**
+   * Adds `aria-busy` and displays loading state for the Combobox
+   * All options will be hidden and replaced with a loading message.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Text to display when the combobox is loading
+   * @default 'Laster...'
+   */
+  loadingLabel?: string;
+  /**
+   * Filter function for filtering the list of options. Return `true` to show option, `false` to hide option.
+   * @param inputValue
+   * @param option
+   * @returns boolean
+   *
+   * @default (inputValue, option) => option.value.toLowerCase().startsWith(inputValue.toLowerCase())
+   */
+  filter?: (inputValue: string, option: Option) => boolean;
+  /**
+   * Add a screen reader label to the chips
+   * @param option
+   * @returns string
+   *
+   * @default (option) => 'Slett ' + option.label,
+   */
+  chipSrLabel?: (option: Option) => string;
+  /**
+   * Portals the floating element outside of the app root and into the body.
+   * @see https://floating-ui.com/docs/floatingportal
+   * @default false
+   */
+  portal?: boolean;
+} & FormFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+declare const Combobox: import("react").ForwardRefExoticComponent<{
+  /**
+   * Label for the combobox.
+   *
+   * Passed label will be encapsulated by a `label` element.
+   */
+  label?: ReactNode;
+  /**
+   * Visually hides `label` and `description` (still available for screen readers)
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * String array of selected options. Contains only one option during single selection mode.
+   */
+  value?: string[];
+  /**
+   * String array of initial selected options. Contains only one option during single selection mode.
+   */
+  initialValue?: string[];
+  /**
+   * Callback function that is called when the value changes
+   */
+  onValueChange?: (value: string[]) => void;
+  /**
+   * Multiple options can be selected
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Name of the value when used in a formPuse
+   */
+  name?: string;
+  /**
+   * Exposes the HTML `size` attribute.
+   * @default 0
+   */
+  htmlSize?: number;
+  /**
+   * Hides chips when multiple options are selected
+   * @default false
+   */
+  hideChips?: boolean;
+  /**
+   * Hides the clear button
+   * @default false
+   */
+  hideClearButton?: boolean;
+  /**
+   * Label for the clear button
+   * @default 'Fjern alt'
+   */
+  clearButtonLabel?: string;
+  /**
+   * Enables virtualizing of options list.
+   * @see https://tanstack.com/virtual
+   * @default false
+   */
+  virtual?: boolean;
+  /**
+   * Value of the input field
+   */
+  inputValue?: string;
+  /**
+   * Adds `aria-busy` and displays loading state for the Combobox
+   * All options will be hidden and replaced with a loading message.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Text to display when the combobox is loading
+   * @default 'Laster...'
+   */
+  loadingLabel?: string;
+  /**
+   * Filter function for filtering the list of options. Return `true` to show option, `false` to hide option.
+   * @param inputValue
+   * @param option
+   * @returns boolean
+   *
+   * @default (inputValue, option) => option.value.toLowerCase().startsWith(inputValue.toLowerCase())
+   */
+  filter?: (inputValue: string, option: Option) => boolean;
+  /**
+   * Add a screen reader label to the chips
+   * @param option
+   * @returns string
+   *
+   * @default (option) => 'Slett ' + option.label,
+   */
+  chipSrLabel?: (option: Option) => string;
+  /**
+   * Portals the floating element outside of the app root and into the body.
+   * @see https://floating-ui.com/docs/floatingportal
+   * @default false
+   */
+  portal?: boolean;
+} & {
+  error?: ReactNode;
+  errorId?: string;
+  disabled?: boolean;
+  description?: ReactNode;
+  id?: string;
+  readOnly?: boolean;
+  size?: import("@digdir/designsystemet-types").Size;
+} & Pick<import("react").HTMLAttributes<HTMLElement>, "aria-describedby"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Combobox, ComboboxProps };

package/dist/cjs/components/Combobox/ComboboxContext.cjs

@@ -0,0 +1,5 @@
+'use client';
+//#region src/components/Combobox/ComboboxContext.tsx
+const ComboboxContext = (0, require("react").createContext)(void 0);
+//#endregion
+exports.ComboboxContext = ComboboxContext;

package/dist/cjs/components/Combobox/ComboboxIdContext.cjs

@@ -0,0 +1,40 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Combobox/ComboboxIdContext.tsx
+const ComboboxIdContext = (0, react.createContext)({ activeIndex: 0 });
+const ComboboxIdReducer = (state, action) => {
+	switch (action.type) {
+		case "SET_ACTIVE_INDEX": return {
+			...state,
+			activeIndex: action.payload
+		};
+		default: return state;
+	}
+};
+const ComboboxIdDispatch = (0, react.createContext)(() => {
+	throw new Error("ComboboxIdDispatch must be used within a provider");
+});
+const ComboboxIdProvider = ({ children }) => {
+	const [state, dispatch] = (0, react.useReducer)(ComboboxIdReducer, { activeIndex: 0 });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxIdContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxIdDispatch.Provider, {
+			value: dispatch,
+			children
+		})
+	});
+};
+function useComboboxIdDispatch() {
+	return (0, react.useContext)(ComboboxIdDispatch);
+}
+function useComboboxId() {
+	return (0, react.useContext)(ComboboxIdContext);
+}
+//#endregion
+exports.ComboboxIdContext = ComboboxIdContext;
+exports.ComboboxIdDispatch = ComboboxIdDispatch;
+exports.ComboboxIdProvider = ComboboxIdProvider;
+exports.ComboboxIdReducer = ComboboxIdReducer;
+exports.useComboboxId = useComboboxId;
+exports.useComboboxIdDispatch = useComboboxIdDispatch;

package/dist/cjs/components/Combobox/Custom.cjs

@@ -0,0 +1,42 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_ComboboxContext = require("./ComboboxContext.cjs");
+const require_ComboboxIdContext = require("./ComboboxIdContext.cjs");
+const require_label = require("../label/label.cjs");
+const require_omit = require("./omit/omit.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 _radix_ui_react_slot = require("@radix-ui/react-slot");
+let _floating_ui_react = require("@floating-ui/react");
+//#region src/components/Combobox/Custom.tsx
+const ComboboxCustom = (0, react.forwardRef)(({ asChild, interactive, id, className, ...rest }, ref) => {
+	if (interactive && !id) throw new Error("If ComboboxCustom is interactive, it must have an id");
+	const Component = asChild ? _radix_ui_react_slot.Slot : "div";
+	const randomId = (0, react.useId)();
+	const { activeIndex } = require_ComboboxIdContext.useComboboxId();
+	const context = (0, react.useContext)(require_ComboboxContext.ComboboxContext);
+	if (!context) throw new Error("ComboboxCustom must be used within a Combobox");
+	const { customIds, setListRef, getItemProps, size } = context;
+	const index = (0, react.useMemo)(() => id && customIds.indexOf(id) || 0, [id, customIds]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
+		"data-size": size,
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			ref: (0, _floating_ui_react.useMergeRefs)([(node) => {
+				setListRef(index, node);
+			}, ref]),
+			tabIndex: -1,
+			className: (0, clsx_lite.default)("ds-combobox__custom", className),
+			id: id || randomId,
+			role: "option",
+			"aria-selected": activeIndex === index,
+			"data-active": activeIndex === index,
+			...require_omit.omit(["interactive"], rest),
+			...require_omit.omit(["onClick", "onPointerLeave"], getItemProps())
+		})
+	});
+});
+//#endregion
+exports.ComboboxCustom = ComboboxCustom;

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

@@ -0,0 +1,2 @@
+
+import { HTMLAttributes } from "react";

package/dist/cjs/components/Combobox/Empty.cjs

@@ -0,0 +1,27 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_ComboboxContext = require("./ComboboxContext.cjs");
+const require_label = require("../label/label.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/Empty.tsx
+const ComboboxEmpty = (0, react.forwardRef)(({ children, className, ...rest }, ref) => {
+	const context = (0, react.useContext)(require_ComboboxContext.ComboboxContext);
+	if (!context) throw new Error("ComboboxEmpty must be used within a Combobox");
+	const { filteredOptions, size } = context;
+	return filteredOptions.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, {
+		"data-size": size,
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref,
+			className: (0, clsx_lite.default)("ds-combobox__empty", className),
+			...rest,
+			children
+		})
+	});
+});
+ComboboxEmpty.displayName = "ComboboxEmpty";
+//#endregion
+exports.ComboboxEmpty = ComboboxEmpty;

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

@@ -0,0 +1,7 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/Combobox/Empty.d.ts
+type ComboboxEmptyProps = HTMLAttributes<HTMLDivElement>;
+declare const ComboboxEmpty: import("react").ForwardRefExoticComponent<ComboboxEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ComboboxEmpty, ComboboxEmptyProps };

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

@@ -0,0 +1,18 @@
+'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 = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Combobox/Option/Description.tsx
+const ComboboxOptionDescription = (0, react.forwardRef)(({ children, className, ...rest }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, clsx_lite.default)("ds-combobox__option__description", className),
+		ref,
+		...rest,
+		children
+	});
+});
+ComboboxOptionDescription.displayName = "ComboboxOptionDescription";
+//#endregion
+exports.default = ComboboxOptionDescription;