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

package/_internal/components/badge/BadgeWrapper.js

@@ -0,0 +1,13 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { BadgeWrapper as BadgeWrapper$1, CLASSNAME, COMPONENT_NAME } from "../../packages/lumx-core/src/js/components/Badge/BadgeWrapper.js";
+//#region src/components/badge/BadgeWrapper.tsx
+var BadgeWrapper = forwardRef((props, ref) => {
+	return BadgeWrapper$1({
+		...props,
+		ref
+	});
+});
+BadgeWrapper.displayName = COMPONENT_NAME;
+BadgeWrapper.className = CLASSNAME;
+//#endregion
+export { BadgeWrapper };

package/_internal/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps } from "./Badge.js";
+import { BadgeWrapper, BadgeWrapperProps } from "./BadgeWrapper.js";

package/_internal/components/button/Button.d.ts

@@ -0,0 +1,22 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ButtonEmphasis, ButtonProps as ButtonProps$1, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from "../../packages/lumx-core/src/js/components/Button/Button.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/button/Button.d.ts
+interface ButtonProps extends GenericProps, ReactToJSX<ButtonProps$1> {
+  /** callback for clicking on the button */
+  onClick?: (event: React.MouseEvent) => void;
+  /** callback for pressing a key on the button */
+  onKeyPress?: (event: React.KeyboardEvent) => void;
+}
+/**
+ * Button component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
+//#endregion
+export { Button, ButtonProps };

package/_internal/components/button/Button.js

@@ -0,0 +1,49 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { ThemeProvider, useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { Button as Button$1, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from "../../packages/lumx-core/src/js/components/Button/Button.js";
+import { isComponent } from "../../utils/type/isComponent.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { src_exports } from "../../../index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import isEmpty from "lodash/isEmpty.js";
+//#region src/components/button/Button.tsx
+/**
+* Button component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Button = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+	const { onClick, onKeyPress, ...restOfOtherProps } = otherProps;
+	const { leftIcon, rightIcon, children } = props;
+	return Button$1({
+		ref,
+		theme: defaultTheme,
+		...disabledStateProps,
+		...restOfOtherProps,
+		"aria-disabled": isAnyDisabled,
+		handleClick: onClick,
+		handleKeyPress: onKeyPress,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			leftIcon && !isEmpty(leftIcon) && /* @__PURE__ */ jsx(ThemeProvider, {
+				value: void 0,
+				children: /* @__PURE__ */ jsx(Icon, { icon: leftIcon })
+			}),
+			children && (isComponent(Text)(children) ? children : /* @__PURE__ */ jsx("span", { children })),
+			rightIcon && !isEmpty(rightIcon) && /* @__PURE__ */ jsx(ThemeProvider, {
+				value: void 0,
+				children: /* @__PURE__ */ jsx(Icon, { icon: rightIcon })
+			})
+		] })
+	});
+});
+Button.displayName = COMPONENT_NAME;
+Button.className = CLASSNAME;
+Button.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Button };

package/_internal/components/button/ButtonGroup.d.ts

@@ -0,0 +1,17 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ButtonGroupProps as ButtonGroupProps$1 } from "../../packages/lumx-core/src/js/components/Button/ButtonGroup.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/button/ButtonGroup.d.ts
+interface ButtonGroupProps extends GenericProps, ReactToJSX<ButtonGroupProps$1> {}
+/**
+ * ButtonGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement>;
+//#endregion
+export { ButtonGroup, ButtonGroupProps };

package/_internal/components/button/ButtonGroup.js

@@ -0,0 +1,21 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { ButtonGroup as ButtonGroup$1, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from "../../packages/lumx-core/src/js/components/Button/ButtonGroup.js";
+//#region src/components/button/ButtonGroup.tsx
+/**
+* ButtonGroup component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ButtonGroup = forwardRef((props, ref) => {
+	return ButtonGroup$1({
+		ref,
+		...props
+	});
+});
+ButtonGroup.displayName = COMPONENT_NAME;
+ButtonGroup.className = CLASSNAME;
+ButtonGroup.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ButtonGroup };

package/_internal/components/button/ButtonRoot.d.ts

@@ -0,0 +1 @@
+import { BaseButtonProps, ButtonSize } from "../../packages/lumx-core/src/js/components/Button/ButtonRoot.js";

package/_internal/components/button/IconButton.d.ts

@@ -0,0 +1,30 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { IconButtonProps as IconButtonProps$1 } from "../../packages/lumx-core/src/js/components/Button/IconButton.js";
+import { TooltipProps } from "../tooltip/Tooltip.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/button/IconButton.d.ts
+interface IconButtonProps extends GenericProps, ReactToJSX<IconButtonProps$1, 'title' | 'children'> {
+  /**
+   * Props to pass to the tooltip.
+   * If undefined or if tooltipProps.label is undefined, the label prop will be used as tooltip label.
+   * */
+  tooltipProps?: Partial<TooltipProps>;
+  /** Whether the tooltip should be hidden or not. */
+  hideTooltip?: boolean;
+  /** callback for clicking on the button */
+  onClick?: (event: React.MouseEvent) => void;
+  /** callback for pressing a key on the button */
+  onKeyPress?: (event: React.KeyboardEvent) => void;
+}
+/**
+ * IconButton component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const IconButton: Comp<IconButtonProps, HTMLButtonElement>;
+//#endregion
+export { IconButton, IconButtonProps };

package/_internal/components/button/IconButton.js

@@ -0,0 +1,40 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, IconButton as IconButton$1 } from "../../packages/lumx-core/src/js/components/Button/IconButton.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { src_exports } from "../../../index.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button/IconButton.tsx
+/**
+* IconButton component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var IconButton = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { tooltipProps, hideTooltip, label, theme = defaultTheme, ...forwardedProps } = props;
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(forwardedProps);
+	const { onClick, onKeyPress, ...restOfOtherProps } = otherProps;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: hideTooltip ? "" : label,
+		...tooltipProps,
+		children: IconButton$1({
+			ref,
+			theme,
+			...disabledStateProps,
+			...restOfOtherProps,
+			handleClick: onClick,
+			handleKeyPress: onKeyPress,
+			"aria-disabled": isAnyDisabled,
+			label
+		})
+	});
+});
+IconButton.displayName = COMPONENT_NAME;
+IconButton.className = CLASSNAME;
+IconButton.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { IconButton };

package/_internal/components/button/index.d.ts

@@ -0,0 +1,5 @@
+import { BaseButtonProps, ButtonSize } from "../../packages/lumx-core/src/js/components/Button/ButtonRoot.js";
+import { ButtonEmphasis, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from "../../packages/lumx-core/src/js/components/Button/Button.js";
+import { Button, ButtonProps } from "./Button.js";
+import { IconButton, IconButtonProps } from "./IconButton.js";
+import { ButtonGroup, ButtonGroupProps } from "./ButtonGroup.js";

package/_internal/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,24 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { CheckboxProps as CheckboxProps$1 } from "../../packages/lumx-core/src/js/components/Checkbox/index.js";
+import React from "react";
+
+//#region src/components/checkbox/Checkbox.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface CheckboxProps extends index_d_exports.GenericProps, ReactToJSX<CheckboxProps$1, 'inputId'> {
+  /** On change callback. */
+  onChange?(isChecked: boolean, value?: string, name?: string, event?: React.ChangeEvent): void;
+}
+/**
+ * Checkbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Checkbox: Comp<CheckboxProps, HTMLDivElement>;
+//#endregion
+export { Checkbox, CheckboxProps };

package/_internal/components/checkbox/Checkbox.js

@@ -0,0 +1,58 @@
+import { useId } from "../../hooks/useId.js";
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { CLASSNAME, COMPONENT_NAME, Checkbox as Checkbox$1, INTERMEDIATE_STATE } from "../../packages/lumx-core/src/js/components/Checkbox/index.js";
+import { src_exports } from "../../../index.js";
+import React from "react";
+//#region src/components/checkbox/Checkbox.tsx
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* Checkbox component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Checkbox = forwardRef((props, ref) => {
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { checked, className, helper, id, inputRef, isChecked = checked, label, name, onChange, theme = defaultTheme, value, inputProps = {}, ...forwardedProps } = otherProps;
+	const localInputRef = React.useRef(null);
+	const generatedInputId = useId();
+	const inputId = id || generatedInputId;
+	const intermediateState = isChecked === INTERMEDIATE_STATE;
+	React.useEffect(() => {
+		const input = localInputRef.current;
+		if (input) input.indeterminate = intermediateState;
+	}, [intermediateState]);
+	return Checkbox$1({
+		ref,
+		className,
+		helper,
+		inputRef: useMergeRefs(inputRef, localInputRef),
+		isChecked,
+		label,
+		name,
+		handleChange: onChange,
+		theme,
+		value,
+		inputProps: {
+			...inputProps,
+			...disabledStateProps,
+			readOnly: inputProps.readOnly || disabledStateProps["aria-disabled"]
+		},
+		...forwardedProps,
+		isDisabled: isAnyDisabled,
+		inputId
+	});
+});
+Checkbox.displayName = COMPONENT_NAME;
+Checkbox.className = CLASSNAME;
+Checkbox.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Checkbox };

package/_internal/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+import { Checkbox, CheckboxProps } from "./Checkbox.js";

package/_internal/components/chip/Chip.d.ts

@@ -0,0 +1,34 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ChipProps as ChipProps$1, ChipPropsToOverride } from "../../packages/lumx-core/src/js/components/Chip/index.js";
+import { ReactNode } from "react";
+
+//#region src/components/chip/Chip.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ChipProps extends index_d_exports.GenericProps, ReactToJSX<ChipProps$1, ChipPropsToOverride> {
+  /** A component to be rendered after the content. */
+  after?: ReactNode;
+  /** A component to be rendered before the content. */
+  before?: ReactNode;
+  /** On "after" element clicked callback. */
+  onAfterClick?: (event: React.MouseEvent) => void;
+  /** On "before" element clicked callback. */
+  onBeforeClick?: (event: React.MouseEvent) => void;
+  /** On element clicked callback. */
+  onClick?: (event: React.MouseEvent) => void;
+  /** On element key down callback. */
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+}
+/**
+ * Chip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Chip: Comp<ChipProps, HTMLAnchorElement>;
+//#endregion
+export { Chip, ChipProps };

package/_internal/components/chip/Chip.js

@@ -0,0 +1,43 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { useStopPropagation } from "../../hooks/useStopPropagation.js";
+import { CLASSNAME, COMPONENT_NAME, Chip as Chip$1, DEFAULT_PROPS } from "../../packages/lumx-core/src/js/components/Chip/index.js";
+import { Theme } from "@lumx/core/js/constants";
+import isFunction from "lodash/isFunction.js";
+//#region src/components/chip/Chip.tsx
+/**
+* Chip component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Chip = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || Theme.light;
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+	const { onAfterClick, onBeforeClick, onClick, theme = defaultTheme, onKeyDown, ...forwardedProps } = otherProps;
+	const hasAfterClick = isFunction(onAfterClick);
+	const hasBeforeClick = isFunction(onBeforeClick);
+	const hasOnClick = isFunction(props.onClick);
+	const handleOnBeforeClick = useStopPropagation(onBeforeClick);
+	return Chip$1({
+		hasAfterClick,
+		hasBeforeClick,
+		hasOnClick,
+		handleAfterClick: useStopPropagation(onAfterClick),
+		handleBeforeClick: handleOnBeforeClick,
+		handleClick: onClick,
+		handleKeyDown: onKeyDown,
+		theme,
+		disabledStateProps,
+		isAnyDisabled,
+		ref,
+		...forwardedProps
+	});
+});
+Chip.displayName = COMPONENT_NAME;
+Chip.className = CLASSNAME;
+Chip.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Chip };

package/_internal/components/chip/ChipGroup.d.ts

@@ -0,0 +1,20 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { useChipGroupNavigationType } from "../../hooks/useChipGroupNavigation.js";
+import { ChipGroupProps as ChipGroupProps$1 } from "../../packages/lumx-core/src/js/components/Chip/ChipGroup.js";
+import { ReactNode } from "react";
+
+//#region src/components/chip/ChipGroup.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ChipGroupProps extends index_d_exports.GenericProps, ReactToJSX<ChipGroupProps$1, never> {
+  /** List of Chip. */
+  children: ReactNode;
+}
+declare const ChipGroup: Comp<ChipGroupProps, HTMLDivElement> & {
+  useChipGroupNavigation: useChipGroupNavigationType<any>;
+};
+//#endregion
+export { ChipGroup, ChipGroupProps };

package/_internal/components/chip/ChipGroup.js

@@ -0,0 +1,25 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, ChipGroup as ChipGroup$1, DEFAULT_PROPS } from "../../packages/lumx-core/src/js/components/Chip/ChipGroup.js";
+import { useChipGroupNavigation } from "../../hooks/useChipGroupNavigation.js";
+//#region src/components/chip/ChipGroup.tsx
+/**
+* ChipGroup component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var InternalChipGroup = forwardRef((props, ref) => {
+	const { children, ...forwardedProps } = props;
+	return ChipGroup$1({
+		ref,
+		children,
+		...forwardedProps
+	});
+});
+InternalChipGroup.displayName = COMPONENT_NAME;
+InternalChipGroup.className = CLASSNAME;
+InternalChipGroup.defaultProps = DEFAULT_PROPS;
+var ChipGroup = Object.assign(InternalChipGroup, { useChipGroupNavigation });
+//#endregion
+export { ChipGroup };

package/_internal/components/chip/SelectionChipGroup.d.ts

@@ -0,0 +1,43 @@
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { SelectionChipGroupProps as SelectionChipGroupProps$1 } from "../../packages/lumx-core/src/js/components/Chip/SelectionChipGroup.js";
+import React from "react";
+
+//#region src/components/chip/SelectionChipGroup.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SelectionChipGroupProps<O> extends index_d_exports.GenericProps, ReactToJSX<SelectionChipGroupProps$1<O>> {
+  /** Callback on option array selected */
+  onChange?(newValue?: O[]): void;
+  /** Input ref to restore focus */
+  inputRef?: React.RefObject<HTMLInputElement>;
+  /** Customize how chips should render (return a <Chip> element to override chip props) */
+  renderChip?: (option: O) => React.ReactNode;
+}
+/**
+ * SelectionChipGroup component.
+ *
+ * @param  props Component props.
+ * @return React element.
+ */
+declare const SelectionChipGroup: {
+  <O>({
+    onChange,
+    value,
+    getOptionId,
+    getOptionName,
+    inputRef,
+    renderChip,
+    getChipProps: getChipPropsProp,
+    theme,
+    isDisabled,
+    label,
+    chipRemoveLabel,
+    ...forwardedProps
+  }: SelectionChipGroupProps<O>): import("react/jsx-runtime").JSX.Element | null;
+  displayName: string;
+  className: "lumx-selection-chip-group";
+};
+//#endregion
+export { SelectionChipGroup, SelectionChipGroupProps };

package/_internal/components/chip/SelectionChipGroup.js

@@ -0,0 +1,78 @@
+import { CLASSNAME } from "../../packages/lumx-core/src/js/components/Chip/index.js";
+import { Chip } from "./Chip.js";
+import { ChipGroup } from "./ChipGroup.js";
+import { CLASSNAME as CLASSNAME$1, COMPONENT_NAME, SelectionChipGroup as SelectionChipGroup$1 } from "../../packages/lumx-core/src/js/components/Chip/SelectionChipGroup.js";
+import { setupSelectionChipGroupEvents } from "../../packages/lumx-core/src/js/components/Chip/setupSelectionChipGroupEvents.js";
+import { Icon } from "../icon/Icon.js";
+import { isComponentType } from "../../utils/type/isComponentType.js";
+import { Text } from "../text/Text.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { useRovingTabIndexContainer } from "../../hooks/useRovingTabIndexContainer.js";
+import React from "react";
+//#region src/components/chip/SelectionChipGroup.tsx
+/**
+* SelectionChipGroup component.
+*
+* @param  props Component props.
+* @return React element.
+*/
+var SelectionChipGroup = ({ onChange, value, getOptionId, getOptionName, inputRef, renderChip, getChipProps: getChipPropsProp, theme, isDisabled, label, chipRemoveLabel, ...forwardedProps }) => {
+	const [container, setContainer] = React.useState(null);
+	const valueRef = React.useRef(value);
+	valueRef.current = value;
+	const onChangeRef = React.useRef(onChange);
+	onChangeRef.current = onChange;
+	React.useEffect(() => {
+		return setupSelectionChipGroupEvents({
+			getContainer: () => container,
+			getInput: () => inputRef?.current,
+			onChange: (newValue) => onChangeRef.current?.(newValue),
+			getValue: () => valueRef.current,
+			getOptionId
+		});
+	}, [
+		container,
+		inputRef,
+		getOptionId
+	]);
+	useRovingTabIndexContainer({
+		containerRef: container,
+		itemSelector: `.${CLASSNAME}`,
+		itemDisabledSelector: `.${CLASSNAME}[aria-disabled="true"]`
+	});
+	const getChipProps = (option) => {
+		const chipProps = getChipPropsProp?.(option) || {};
+		let renderChipProps = {};
+		if (renderChip) {
+			const customChip = renderChip(option);
+			if (isComponentType(Chip)(customChip)) renderChipProps = customChip.props || {};
+		}
+		const definedRenderChipProps = Object.fromEntries(Object.entries(renderChipProps).filter(([, v]) => v !== void 0));
+		return {
+			...chipProps,
+			...definedRenderChipProps
+		};
+	};
+	return SelectionChipGroup$1({
+		...forwardedProps,
+		value,
+		getOptionId,
+		getOptionName,
+		theme,
+		isDisabled,
+		label,
+		chipRemoveLabel,
+		getChipProps,
+		ref: setContainer
+	}, {
+		Chip,
+		ChipGroup,
+		Icon,
+		Text,
+		Tooltip
+	});
+};
+SelectionChipGroup.displayName = COMPONENT_NAME;
+SelectionChipGroup.className = CLASSNAME$1;
+//#endregion
+export { SelectionChipGroup };

package/_internal/components/chip/index.d.ts

@@ -0,0 +1,3 @@
+import { Chip, ChipProps } from "./Chip.js";
+import { ChipGroup, ChipGroupProps } from "./ChipGroup.js";
+import { SelectionChipGroup, SelectionChipGroupProps } from "./SelectionChipGroup.js";

package/_internal/components/combobox/ComboboxButton.d.ts

@@ -0,0 +1,17 @@
+import { HasPolymorphicAs } from "../../utils/type/HasPolymorphicAs.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { Button } from "../button/Button.js";
+import { ComboboxButtonProps as ComboboxButtonProps$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxButton.js";
+import { ElementType } from "react";
+
+//#region src/components/combobox/ComboboxButton.d.ts
+/**
+ * Props for Combobox.Button component.
+ *
+ * Polymorphic component — use `as` to render the trigger as a different element or component
+ * (e.g., `as="a"`, `as={RouterLink}`). Defaults to the LumX `Button` component.
+ */
+type ComboboxButtonProps<E extends ElementType = typeof Button> = Omit<HasPolymorphicAs<E>, 'children' | 'role' | 'aria-controls' | 'aria-haspopup' | 'aria-expanded' | 'aria-activedescendant'> & index_d_exports.HasRequiredLinkHref<E> & ReactToJSX<ComboboxButtonProps$1>;
+//#endregion
+export { ComboboxButtonProps };

package/_internal/components/combobox/ComboboxButton.js

@@ -0,0 +1,59 @@
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { Button } from "../button/Button.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { setupComboboxButton } from "../../packages/lumx-core/src/js/components/Combobox/setupComboboxButton.js";
+import { CLASSNAME, COMPONENT_NAME, ComboboxButton as ComboboxButton$1 } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxButton.js";
+import { forwardRefPolymorphic } from "../../utils/react/forwardRefPolymorphic.js";
+import { useComboboxContext } from "./context/ComboboxContext.js";
+import { useComboboxOpen } from "./context/useComboboxOpen.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/combobox/ComboboxButton.tsx
+/**
+* Combobox.Button component - Button trigger for select-only combobox mode.
+*
+* Renders a button with proper ARIA attributes. Registers itself as the
+* combobox trigger on mount for keyboard navigation and typeahead.
+* Polymorphic — use `as` to change the rendered element or component.
+*
+* @param props Component props.
+* @param ref   Component ref.
+* @return React element.
+*/
+var ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
+	const { listboxId, anchorRef, setHandle } = useComboboxContext();
+	const [isOpen] = useComboboxOpen();
+	const { as, label, value, labelDisplayMode = "show-selection", onSelect, ...buttonProps } = props;
+	const ButtonComp = as ?? Button;
+	const [buttonElement, setButtonElement] = useState(null);
+	const mergedRef = useMergeRefs(ref, setButtonElement, anchorRef);
+	const onSelectRef = useRef(onSelect);
+	onSelectRef.current = onSelect;
+	useEffect(() => {
+		if (!buttonElement) return void 0;
+		const handle = setupComboboxButton(buttonElement, { onSelect(option) {
+			onSelectRef.current?.(option);
+		} });
+		setHandle(handle);
+		return () => {
+			handle.destroy();
+			setHandle(null);
+		};
+	}, [buttonElement, setHandle]);
+	return ComboboxButton$1({
+		...buttonProps,
+		label,
+		value,
+		labelDisplayMode,
+		listboxId,
+		isOpen,
+		ref: mergedRef
+	}, {
+		Button: ButtonComp,
+		Tooltip
+	});
+}), {
+	displayName: COMPONENT_NAME,
+	className: CLASSNAME
+});
+//#endregion
+export { ComboboxButton };

package/_internal/components/combobox/ComboboxInput.d.ts

@@ -0,0 +1,19 @@
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { ComboboxInputProps as ComboboxInputProps$1, ComboboxInputPropsToOverride } from "../../packages/lumx-core/src/js/components/Combobox/ComboboxInput.js";
+import { TextFieldProps } from "../text-field/TextField.js";
+//#region src/components/combobox/ComboboxInput.d.ts
+/**
+ * Props for Combobox.Input component.
+ * Note: role, aria-autocomplete, aria-controls, aria-expanded are set internally and cannot be overridden.
+ */
+interface ComboboxInputProps extends TextFieldProps, ReactToJSX<ComboboxInputProps$1, ComboboxInputPropsToOverride> {
+  /**
+   * Props for the toggle button.
+   * When provided, a chevron button will be rendered in the text field's afterElement
+   * to toggle the listbox visibility.
+   */
+  toggleButtonProps?: Pick<IconButtonProps, 'label'> & Partial<Omit<IconButtonProps, 'label'>>;
+}
+//#endregion
+export { ComboboxInputProps };