@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/components/Checkbox/index.js

@@ -0,0 +1,83 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Icon } from "../Icon/index.js";
+import { InputLabel } from "../InputLabel/index.js";
+import { InputHelper } from "../InputHelper/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mdiCheck } from "@lumx/icons/esm/check.js";
+import { mdiMinus } from "@lumx/icons/esm/minus.js";
+//#region ../lumx-core/src/js/components/Checkbox/index.tsx
+/**
+* Intermediate state of checkbox.
+*/
+var INTERMEDIATE_STATE = "intermediate";
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Checkbox";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-checkbox";
+var { block, element } = bem(CLASSNAME);
+/**
+* Checkbox component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Checkbox = (props) => {
+	const { checked, className, helper, id, inputRef, isChecked = checked, label, name, ref, handleChange, theme, value, inputProps = {}, isDisabled, inputId, ...forwardedProps } = props;
+	const intermediateState = isChecked === INTERMEDIATE_STATE;
+	const handleOnChange = (event) => {
+		if (handleChange) handleChange(!isChecked, value, name, event);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			"is-checked": intermediateState ? true : isChecked,
+			"is-disabled": isDisabled,
+			"is-unchecked": !isChecked,
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: element("input-wrapper"),
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "checkbox",
+				id: inputId,
+				className: element("input-native"),
+				name,
+				value,
+				checked: isChecked,
+				onChange: handleOnChange,
+				"aria-describedby": helper ? `${inputId}-helper` : void 0,
+				"aria-checked": intermediateState ? "mixed" : Boolean(isChecked),
+				...inputProps?.readOnly ? { readOnly: inputProps.readOnly } : {},
+				...inputProps
+			}), /* @__PURE__ */ jsxs("div", {
+				className: element("input-placeholder"),
+				children: [/* @__PURE__ */ jsx("div", { className: element("input-background") }), /* @__PURE__ */ jsx("div", {
+					className: element("input-indicator"),
+					children: Icon({ icon: intermediateState ? mdiMinus : mdiCheck })
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: element("content"),
+			children: [label && InputLabel({
+				htmlFor: inputId,
+				className: element("label"),
+				theme,
+				children: label
+			}), helper && InputHelper({
+				id: `${inputId}-helper`,
+				className: element("helper"),
+				theme,
+				children: helper
+			})]
+		})]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, Checkbox, INTERMEDIATE_STATE };

package/_internal/packages/lumx-core/src/js/components/Chip/ChipGroup.d.ts

@@ -0,0 +1,21 @@
+import { HorizontalAlignment } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Chip/ChipGroup.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ChipGroupProps extends HasClassName {
+  /**
+   * Chip horizontal alignment.
+   * @deprecated
+   */
+  align?: HorizontalAlignment;
+  /** Children */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { ChipGroupProps };

package/_internal/packages/lumx-core/src/js/components/Chip/ChipGroup.js

@@ -0,0 +1,32 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Chip/ChipGroup.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ChipGroup";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-chip-group";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* ChipGroup component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ChipGroup = (props) => {
+	const { children, className, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ChipGroup, DEFAULT_PROPS };

package/_internal/packages/lumx-core/src/js/components/Chip/SelectionChipGroup.d.ts

@@ -0,0 +1,29 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { Selector } from "../../types/Selector.js";
+import { ChipProps } from "./index.js";
+
+//#region ../lumx-core/src/js/components/Chip/SelectionChipGroup.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SelectionChipGroupProps<O> extends HasClassName, HasTheme {
+  /** Option object id selector (either a property name or a function to get the id) */
+  getOptionId: Selector<O>;
+  /** Option object name selector. Falls back to the id if not defined */
+  getOptionName?: Selector<O, string | undefined | null>;
+  /** Selected options array */
+  value?: O[];
+  /** Label for accessibility (aria-label on the listbox) */
+  label: string;
+  /** Label for the remove action (visually hidden text appended to each chip) */
+  chipRemoveLabel?: string;
+  /** Disabled state for all chips */
+  isDisabled?: boolean;
+  /** Customize chip props per option */
+  getChipProps?: (option: O) => Partial<ChipProps>;
+  /** Ref for the container element */
+  ref?: any;
+}
+//#endregion
+export { SelectionChipGroupProps };

package/_internal/packages/lumx-core/src/js/components/Chip/SelectionChipGroup.js

@@ -0,0 +1,66 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { getWithSelector } from "../../utils/selectors/getWithSelector.js";
+import { jsx } from "react/jsx-runtime";
+import { mdiClose } from "@lumx/icons/esm/close.js";
+//#region ../lumx-core/src/js/components/Chip/SelectionChipGroup.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SelectionChipGroup";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-selection-chip-group";
+var { block, element } = bem(CLASSNAME);
+/**
+* SelectionChipGroup component.
+* Renders a listbox of removable selection chips using component injection for framework-agnostic rendering.
+*
+* @param props      Component props.
+* @param components Framework-specific components injected by the wrapper (Chip, ChipGroup, Icon, Tooltip).
+* @return JSX element, or null when value is empty.
+*/
+var SelectionChipGroup = (props, { Chip, ChipGroup, Icon, Text, Tooltip }) => {
+	const { value, getOptionId, getOptionName, label, chipRemoveLabel, isDisabled, theme, className, getChipProps, ref, ...forwardedProps } = props;
+	if (!value || value.length === 0) return null;
+	return /* @__PURE__ */ jsx(ChipGroup, {
+		...forwardedProps,
+		ref,
+		role: "listbox",
+		"aria-label": label,
+		"aria-multiselectable": "true",
+		"aria-orientation": "horizontal",
+		className: block([className]),
+		children: value.map((v) => {
+			const name = getOptionName && getWithSelector(getOptionName, v) || getWithSelector(getOptionId, v);
+			const id = getWithSelector(getOptionId, v);
+			const customProps = getChipProps?.(v) || {};
+			const chipIsDisabled = customProps.isDisabled || isDisabled;
+			const chipName = typeof customProps.children === "string" ? customProps.children : name;
+			const ariaLabel = chipRemoveLabel ? `${chipName} - ${chipRemoveLabel}` : chipName;
+			return /* @__PURE__ */ jsx(Tooltip, {
+				label: !chipIsDisabled ? ariaLabel : void 0,
+				children: /* @__PURE__ */ jsx(Chip, {
+					"aria-label": ariaLabel,
+					...customProps,
+					size: "s",
+					after: /* @__PURE__ */ jsx(Icon, { icon: mdiClose }),
+					className: element("chip", [customProps.className]),
+					"data-option-id": id,
+					isClickable: true,
+					role: "option",
+					"aria-selected": "true",
+					theme,
+					isDisabled: chipIsDisabled,
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						truncate: true,
+						children: customProps.children || name
+					})
+				})
+			}, id);
+		})
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, SelectionChipGroup };

package/_internal/packages/lumx-core/src/js/components/Chip/index.d.ts

@@ -0,0 +1,63 @@
+import { ColorPalette, Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/Chip/index.d.ts
+/**
+ * Chip sizes.
+ */
+type ChipSize = Extract<Size, 's' | 'm'>;
+/**
+ * Defines the props of the component.
+ */
+interface ChipProps extends HasClassName, HasDisabled, HasTheme, HasAriaDisabled {
+  /** A component to be rendered after the content. */
+  after?: JSXElement;
+  /** A component to be rendered before the content. */
+  before?: JSXElement;
+  /** Color variant. */
+  color?: ColorPalette;
+  /** Whether the component is clickable or not. */
+  isClickable?: boolean;
+  /** Whether the chip is currently in a highlighted state or not. */
+  isHighlighted?: boolean;
+  /** Whether the component is selected or not. */
+  isSelected?: boolean;
+  /** Size variant. */
+  size?: ChipSize;
+  /** href for the chip if it is a link */
+  href?: string;
+  /** reference to the root element */
+  ref?: CommonRef;
+  /** On "after" element clicked callback. */
+  handleAfterClick?: (event: any) => void;
+  /** On element key down callback. */
+  handleKeyDown?: (event: any) => void;
+  /** On "before" element clicked callback. */
+  handleBeforeClick?: (event: any) => void;
+  /** On element clicked callback. */
+  handleClick?: (event: any) => void;
+  /** name of the prop for handling key down events */
+  keyDownProp?: string;
+  /** name of the prop for tab index */
+  tabIndexProp?: string;
+  /** Children */
+  children?: JSXElement;
+  /** Props to apply when the component is in a disabled state. */
+  disabledStateProps: GenericProps;
+  /** Whether the "after" element has a click handler. */
+  hasAfterClick?: boolean;
+  /** Whether the "before" element has a click handler. */
+  hasBeforeClick?: boolean;
+  /** Whether the component has a main click handler. */
+  hasOnClick?: boolean;
+  /** Whether any part of the component is disabled. */
+  isAnyDisabled?: boolean;
+}
+type ChipPropsToOverride = 'disabledStateProps' | 'hasOnClick' | 'hasBeforeClick' | 'hasAfterClick' | 'before' | 'after' | 'keyDownProp' | 'tabIndexProp' | 'isAnyDisabled';
+//#endregion
+export { ChipProps, ChipPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Chip/index.js

@@ -0,0 +1,78 @@
+import { ColorPalette, Size, Theme } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { onEnterPressed } from "../../utils/events/keyboard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Chip/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Chip";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-chip";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { size: Size.m };
+/**
+* Chip component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Chip = (props) => {
+	const { after, before, children, className, color, isClickable: propIsClickable, isHighlighted, isSelected, handleAfterClick, handleBeforeClick, handleClick, hasAfterClick, hasBeforeClick, hasOnClick, size = DEFAULT_PROPS.size, theme, ref, href, handleKeyDown, disabledStateProps, isAnyDisabled, keyDownProp = "onKeyDown", tabIndexProp = "tabIndex", ...forwardedProps } = props;
+	const isButton = hasOnClick && !href;
+	const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
+	const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+	const handleOnKeyDown = (evt) => {
+		handleKeyDown?.(evt);
+		if (hasOnClick && handleClick) onEnterPressed(handleClick)(evt);
+	};
+	const compatibilityProps = {
+		[keyDownProp]: handleOnKeyDown,
+		[tabIndexProp]: isClickable && !disabledStateProps.disabled ? 0 : void 0
+	};
+	return /* @__PURE__ */ jsxs("a", {
+		role: isButton ? "button" : void 0,
+		...compatibilityProps,
+		...forwardedProps,
+		href: !disabledStateProps.disabled ? href : void 0,
+		ref,
+		className: import_classnames.default(className, block({
+			"is-clickable": isClickable,
+			[`color-${chipColor}`]: Boolean(chipColor),
+			"is-disabled": isAnyDisabled,
+			"has-after": Boolean(after),
+			"has-before": Boolean(before),
+			"is-highlighted": Boolean(isHighlighted),
+			"is-selected": Boolean(isSelected),
+			[`size-${size}`]: Boolean(size),
+			"is-unselected": Boolean(!isSelected)
+		})),
+		"aria-disabled": isClickable && isAnyDisabled || void 0,
+		onClick: hasOnClick ? handleClick : void 0,
+		children: [
+			before && /* @__PURE__ */ jsx("div", {
+				className: element("before", { "is-clickable": hasBeforeClick }),
+				onClick: handleBeforeClick,
+				children: before
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: element("label"),
+				children
+			}),
+			after && /* @__PURE__ */ jsx("div", {
+				className: element("after", { "is-clickable": hasAfterClick }),
+				onClick: handleAfterClick,
+				children: after
+			})
+		]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, Chip, DEFAULT_PROPS };

package/_internal/packages/lumx-core/src/js/components/Chip/setupSelectionChipGroupEvents.js

@@ -0,0 +1,97 @@
+import { getWithSelector } from "../../utils/selectors/getWithSelector.js";
+import { CLASSNAME } from "./index.js";
+import { createSelectorTreeWalker } from "../../utils/browser/createSelectorTreeWalker.js";
+//#region ../lumx-core/src/js/components/Chip/setupSelectionChipGroupEvents.ts
+/** CSS selector for enabled chips (not aria-disabled). */
+var ENABLED_CHIP_SELECTOR = `.${CLASSNAME}:not([aria-disabled="true"])`;
+/** Find the closest chip element from an event target. */
+var getChip = (target) => target?.closest?.(`.lumx-chip`) || null;
+/** Whether the chip is marked as disabled via aria-disabled. */
+var isChipDisabled = (chip) => chip?.getAttribute("aria-disabled") === "true";
+/**
+* Find the nearest enabled chip in the given direction relative to `anchor`.
+*
+* - When `anchor` is provided, walks one step in `direction` from it.
+* - When `anchor` is omitted, returns the first enabled chip from the matching
+*   end of the container (last chip for 'previous', first for 'next').
+*/
+function findSiblingChip(container, direction, anchor) {
+	const walker = createSelectorTreeWalker(container, ENABLED_CHIP_SELECTOR);
+	if (anchor) {
+		walker.currentNode = anchor;
+		return (direction === "next" ? walker.nextNode() : walker.previousNode()) || void 0;
+	}
+	if (direction === "previous") {
+		let last;
+		while (walker.nextNode()) last = walker.currentNode;
+		return last;
+	}
+	return walker.nextNode() || void 0;
+}
+/** Remove an option by its id and call onChange. */
+function removeOption(options, optionId) {
+	const value = options.getValue();
+	if (!value) return;
+	const index = value.findIndex((item) => String(getWithSelector(options.getOptionId, item)) === optionId);
+	if (index === -1) return;
+	const newValue = [...value];
+	newValue.splice(index, 1);
+	options.onChange(newValue);
+}
+/**
+* Attach delegated click and keydown event listeners on the chip group container,
+* and optionally an input backspace handler.
+*
+* Uses addEventListener on the container element. Events bubble up from individual
+* chips, so there is no need to re-attach listeners when chips change.
+*
+* @returns A cleanup function that removes all attached event listeners.
+*/
+function setupSelectionChipGroupEvents(options) {
+	const container = options.getContainer();
+	if (!container) return () => {};
+	const handleClick = (evt) => {
+		const chip = getChip(evt.target);
+		const optionId = chip?.dataset.optionId;
+		if (optionId == null || isChipDisabled(chip)) return;
+		evt.stopImmediatePropagation();
+		removeOption(options, optionId);
+	};
+	const handleKeyDown = (evt) => {
+		const chip = getChip(evt.target);
+		const optionId = chip?.dataset.optionId;
+		const activatingKey = evt.key === "Enter" || evt.key === " " || evt.key === "Backspace";
+		if (optionId == null || !activatingKey || isChipDisabled(chip)) return;
+		let focusTarget;
+		if (evt.key === "Backspace") focusTarget = findSiblingChip(container, "previous", chip) || options.getInput?.() || void 0;
+		else focusTarget = findSiblingChip(container, "next", chip) || findSiblingChip(container, "previous", chip) || options.getInput?.() || void 0;
+		if (focusTarget) {
+			focusTarget.focus();
+			focusTarget.setAttribute("tabindex", "0");
+		}
+		evt.preventDefault();
+		removeOption(options, optionId);
+	};
+	container.addEventListener("click", handleClick);
+	container.addEventListener("keydown", handleKeyDown);
+	const input = options.getInput?.();
+	let inputHandler;
+	if (input) {
+		inputHandler = (evt) => {
+			const backspacePressed = evt.key === "Backspace";
+			const cursorAtStart = input.selectionStart === 0 && input.selectionEnd === 0;
+			if (!backspacePressed || !cursorAtStart) return;
+			evt.stopPropagation();
+			evt.preventDefault();
+			findSiblingChip(container, "previous")?.focus();
+		};
+		input.addEventListener("keydown", inputHandler);
+	}
+	return () => {
+		container.removeEventListener("click", handleClick);
+		container.removeEventListener("keydown", handleKeyDown);
+		if (input && inputHandler) input.removeEventListener("keydown", inputHandler);
+	};
+}
+//#endregion
+export { setupSelectionChipGroupEvents };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxButton.d.ts

@@ -0,0 +1,34 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { ComboboxCallbacks } from "./types.js";
+
+//#region ../lumx-core/src/js/components/Combobox/ComboboxButton.d.ts
+/**
+ * Label display mode for the ComboboxButton.
+ * - `'show-selection'`: Show the selected value if available, otherwise the label.
+ * - `'show-label'`: Always show the label.
+ * - `'show-tooltip'`: Show nothing in the button; label appears only in tooltip.
+ */
+type ComboboxButtonLabelDisplayMode = 'show-selection' | 'show-label' | 'show-tooltip';
+/**
+ * Defines the props for the core ComboboxButton template.
+ */
+interface ComboboxButtonProps extends HasClassName, ComboboxCallbacks {
+  /** The label for the button (used for ARIA and tooltip). */
+  label: string;
+  /** The currently selected value to display. */
+  value?: string;
+  /** Controls how the label/value is displayed. */
+  labelDisplayMode?: ComboboxButtonLabelDisplayMode;
+  /** The ID of the listbox element (for aria-controls). */
+  listboxId?: string;
+  /** Whether the combobox is open. */
+  isOpen?: boolean;
+  /** ref to the root button element. */
+  ref?: CommonRef;
+  /** Custom render button */
+  renderButton?: (buttonProps: Record<string, any>) => JSXElement;
+}
+//#endregion
+export { ComboboxButtonLabelDisplayMode, ComboboxButtonProps };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxButton.js

@@ -0,0 +1,51 @@
+import { visuallyHidden } from "../../utils/classNames/visually-hidden/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxButton.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxButton";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-button";
+/**
+* ComboboxButton core template.
+* Renders a Button with combobox ARIA attributes, wrapped in a Tooltip.
+*
+* Framework-specific components (Tooltip) are passed as a second argument
+* by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var ComboboxButton = (props, { Button, Tooltip }) => {
+	const { className, label, value, labelDisplayMode = "show-selection", listboxId, isOpen, ref, renderButton, ...forwardedProps } = props;
+	const content = labelDisplayMode === "show-tooltip" ? null : (labelDisplayMode === "show-selection" && value ? value : null) || label;
+	const hideTooltip = label === content || isOpen;
+	const componentProps = {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		role: "combobox",
+		"aria-controls": listboxId,
+		"aria-haspopup": "listbox",
+		"aria-expanded": isOpen,
+		"aria-activedescendant": "",
+		children: content
+	};
+	return /* @__PURE__ */ jsx(Tooltip, {
+		className: hideTooltip ? visuallyHidden() : void 0,
+		label,
+		closeMode: "hide",
+		ariaLinkMode: "aria-labelledby",
+		children: renderButton ? renderButton(componentProps) : /* @__PURE__ */ jsx(Button, {
+			...componentProps,
+			children: content
+		})
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxButton };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxInput.d.ts

@@ -0,0 +1,34 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { ComboboxCallbacks, ComboboxInputOptions } from "./types.js";
+
+//#region ../lumx-core/src/js/components/Combobox/ComboboxInput.d.ts
+/**
+ * Defines the props for the core ComboboxInput template.
+ */
+interface ComboboxInputProps extends HasClassName, HasTheme, ComboboxCallbacks, ComboboxInputOptions {
+  /** The ID of the listbox element (for aria-controls). */
+  listboxId?: string;
+  /** Whether the combobox is open. */
+  isOpen?: boolean;
+  /** ref to the root element. */
+  ref?: CommonRef;
+  /** Reference to the input element. */
+  inputRef?: CommonRef;
+  /** Reference to the text field wrapper element. */
+  textFieldRef?: CommonRef;
+  /** Props for the toggle button (when provided, a chevron button is rendered). */
+  toggleButtonProps?: Record<string, any>;
+  /** Toggle callback for the chevron button. */
+  handleToggle?(): void;
+}
+/**
+ * Props from the core `ComboboxInputProps` that framework wrappers (React/Vue)
+ * are expected to provide internally or re-type with framework-specific equivalents
+ * (e.g. React refs, framework-specific button props). Wrappers should omit these
+ * keys when exposing the core props to consumers.
+ */
+type ComboboxInputPropsToOverride = 'listboxId' | 'isOpen' | 'inputRef' | 'textFieldRef' | 'toggleButtonProps' | 'handleToggle';
+//#endregion
+export { ComboboxInputProps, ComboboxInputPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxInput.js

@@ -0,0 +1,56 @@
+import { getDisabledState } from "../../utils/disabledState/index.js";
+import { jsx } from "react/jsx-runtime";
+import { mdiChevronUp } from "@lumx/icons/esm/chevron-up.js";
+import { mdiChevronDown } from "@lumx/icons/esm/chevron-down.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxInput.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ComboboxInput";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-input";
+/**
+* ComboboxInput core template.
+* Renders a TextField with combobox ARIA attributes and an optional toggle button.
+*
+* Framework-specific components (TextField, IconButton) are passed as a second argument
+* by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var ComboboxInput = (props, { TextField, IconButton }) => {
+	const { listboxId, isOpen, ref, inputRef, textFieldRef, toggleButtonProps, handleToggle, filter, theme, ...forwardedProps } = props;
+	const disabledState = getDisabledState(void 0, props);
+	const isAnyDisabled = disabledState.disabled || disabledState["aria-disabled"] || void 0;
+	return /* @__PURE__ */ jsx(TextField, {
+		autoComplete: "off",
+		readOnly: filter === "off" || void 0,
+		...forwardedProps,
+		ref,
+		role: "combobox",
+		"aria-autocomplete": "list",
+		"aria-controls": listboxId,
+		"aria-expanded": isOpen,
+		inputRef,
+		textFieldRef,
+		theme,
+		afterElement: toggleButtonProps ? /* @__PURE__ */ jsx(IconButton, {
+			...toggleButtonProps,
+			theme,
+			isDisabled: isAnyDisabled,
+			emphasis: "low",
+			size: "s",
+			icon: isOpen ? mdiChevronUp : mdiChevronDown,
+			tabIndex: -1,
+			"aria-controls": listboxId,
+			"aria-expanded": isOpen,
+			onClick: handleToggle
+		}) : void 0
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, ComboboxInput };