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

package/_internal/components/select-text-field/SelectTextField.d.ts

@@ -0,0 +1,80 @@
+import { index_d_exports } from "../../utils/type/index.js";
+import { ChipProps } from "../../packages/lumx-core/src/js/components/Chip/index.js";
+import { ComboboxPopoverProps } from "../combobox/ComboboxPopover.js";
+import { BaseSelectTextFieldWrapperProps } from "../../packages/lumx-core/src/js/utils/select/types.js";
+import React, { SyntheticEvent } from "react";
+
+//#region src/components/select-text-field/SelectTextField.d.ts
+interface BaseSelectTextFieldProps<O = any> extends BaseSelectTextFieldWrapperProps<O>, index_d_exports.HasClassName {
+  /**
+   * Custom option render function. Must return a `<Combobox.Option>` element with custom
+   * children/props. Core-computed props (`value`, `isSelected`, `description`, `key`) are
+   * merged in automatically — the consumer does not need to forward them.
+   */
+  renderOption?: (option: O, index: number) => React.ReactNode;
+  /**
+   * Custom section title render function. Receives the section id and the options
+   * in that section. Returns custom JSX to display as the section header.
+   * When not provided, the section id is used as a plain text label.
+   */
+  renderSectionTitle?: (sectionId: string | undefined, options: O[]) => React.ReactNode;
+  /**
+   * Callback fired when the search input text changes.
+   * Independent of `filter`: both can be used together (e.g. client-side
+   * filtering + tracking search text for a "create" action).
+   */
+  onSearch?: (searchText: string) => void;
+  /** Ref to the underlying input element. */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /** Callback to load more items (infinite scroll). */
+  onLoadMore?: () => void;
+  /** Content to render before the options list. */
+  beforeOptions?: React.ReactNode;
+  /** Props forwarded to the Combobox.List popover. */
+  popoverProps?: ComboboxPopoverProps;
+  /** On blur callback. */
+  onBlur?: (event: React.FocusEvent) => void;
+  /** On focus callback. */
+  onFocus?: (event: React.FocusEvent) => void;
+  /** On key down callback. */
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  /** On clear callback (fired when the clear button is clicked). */
+  onClear?: (event?: SyntheticEvent) => void;
+  /** Callback fired when the dropdown open state changes. */
+  onOpen?: (isOpen: boolean) => void;
+}
+/** Single selection props **/
+interface SingleSelectTextFieldProps<O = any> extends BaseSelectTextFieldProps<O> {
+  /** Selection type. */
+  selectionType: 'single';
+  /** Selected option object. */
+  value?: O;
+  /** Callback on option selected (or cleared). */
+  onChange?: (newValue?: O) => void;
+  /** Not available in single selection. */
+  renderChip?: never;
+}
+/** Multiple selection props **/
+interface MultipleSelectTextFieldProps<O = any> extends BaseSelectTextFieldProps<O> {
+  /** Selection type. */
+  selectionType: 'multiple';
+  /** Selected option objects. */
+  value?: O[];
+  /** Callback on option array changed. */
+  onChange?: (newValue?: O[]) => void;
+  /** Custom chip render function. */
+  renderChip?: (option: O) => React.ReactNode;
+  /** Customize chip props per selected option. */
+  getChipProps?: (option: O) => Partial<ChipProps>;
+}
+/**
+ * SelectTextField props — supports both single and multiple selection.
+ * Discriminated on `selectionType`:
+ * - `'single'` → `value?: O`, `onChange?: (newValue?: O) => void`.
+ * - `'multiple'` → `value?: O[]`, `onChange?: (newValue?: O[]) => void`, `renderChip`, `getChipProps`.
+ *
+ * @typeParam O - Option object type, inferred from `options` / `getOptionId`.
+ */
+type SelectTextFieldProps<O = any> = SingleSelectTextFieldProps<O> | MultipleSelectTextFieldProps<O>;
+//#endregion
+export { MultipleSelectTextFieldProps, SelectTextFieldProps, SingleSelectTextFieldProps };

package/_internal/components/select-text-field/SelectTextField.js

@@ -0,0 +1,167 @@
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { InfiniteScroll } from "../../utils/InfiniteScroll/InfiniteScroll.js";
+import { SelectionChipGroup } from "../chip/SelectionChipGroup.js";
+import { Combobox } from "../combobox/index.js";
+import { toggleSelection } from "../../packages/lumx-core/src/js/utils/select/toggleSelection.js";
+import { getOptionDisplayName } from "../../packages/lumx-core/src/js/utils/select/getOptionDisplayName.js";
+import { wrapRenderOption } from "../combobox/wrapRenderOption.js";
+import { SelectTextField as SelectTextField$1 } from "../../packages/lumx-core/src/js/components/SelectTextField/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/select-text-field/SelectTextField.tsx
+/**
+* A text field with a select dropdown to choose between a list of options.
+* Supports search/filter, single selection, and multiple selection with chips.
+*/
+var SelectTextField = (props) => {
+	const { options, getOptionId, getOptionName, getOptionDescription, renderOption, getSectionId, renderSectionTitle, selectionType, value, onChange, filter, openOnFocus, onSearch, searchInputValue: externalSearchValue, hasClearButton = true, listStatus = "idle", className, label, placeholder, icon, isDisabled, "aria-disabled": ariaDisabled, isRequired, hasError, error, helper, id, name, isValid, maxLength, ariaLabel, inputRef: externalInputRef, onBlur: externalOnBlur, onFocus, onKeyDown, onClear: externalOnClear, onOpen, inputProps: consumerInputProps, onLoadMore, beforeOptions, popoverProps, theme, translations } = props;
+	const isAnyDisabled = !!isDisabled || ariaDisabled === true || ariaDisabled === "true";
+	const isMultiple = selectionType === "multiple";
+	const renderChip = isMultiple ? props.renderChip : void 0;
+	const getChipProps = isMultiple ? props.getChipProps : void 0;
+	const wrappedRenderOption = wrapRenderOption(renderOption);
+	const [listElement, setListElement] = useState(null);
+	const localInputRef = useRef(null);
+	const mergedInputRef = useMergeRefs(localInputRef, externalInputRef);
+	const [isSearching, setIsSearching] = useState(() => Boolean(externalSearchValue));
+	const [searchText, setSearchText] = useState(() => externalSearchValue ?? "");
+	useEffect(() => {
+		if (externalSearchValue !== void 0) {
+			setSearchText(externalSearchValue);
+			setIsSearching(Boolean(externalSearchValue));
+		}
+	}, [externalSearchValue]);
+	let displayValue;
+	if (isMultiple || isSearching) displayValue = searchText;
+	else if (!isMultiple) displayValue = getOptionDisplayName(value, getOptionName, getOptionId);
+	const handleSelect = useCallback((selectedOption) => {
+		const next = toggleSelection(options, getOptionId, value, selectedOption.value, isMultiple);
+		onChange?.(next);
+		setIsSearching(false);
+		setSearchText("");
+		onSearch?.("");
+	}, [
+		getOptionId,
+		isMultiple,
+		onChange,
+		onSearch,
+		options,
+		value
+	]);
+	const handleInputChange = useCallback((inputValue) => {
+		setIsSearching(true);
+		setSearchText(inputValue);
+		onSearch?.(inputValue);
+		if (!isMultiple && inputValue === "" && value !== void 0 && value !== null) onChange?.(void 0);
+	}, [
+		isMultiple,
+		onChange,
+		onSearch,
+		value
+	]);
+	const handleClear = useCallback((event) => {
+		event?.stopPropagation();
+		onChange?.(void 0);
+		setIsSearching(false);
+		setSearchText("");
+		onSearch?.("");
+		externalOnClear?.(event);
+	}, [
+		onChange,
+		onSearch,
+		externalOnClear
+	]);
+	const handleBlur = useCallback((event) => {
+		onSearch?.("");
+		externalOnBlur?.(event);
+		if (externalSearchValue) {
+			setSearchText(externalSearchValue);
+			setIsSearching(true);
+		} else {
+			setSearchText("");
+			setIsSearching(false);
+		}
+	}, [
+		externalOnBlur,
+		externalSearchValue,
+		onSearch
+	]);
+	const showClear = !isMultiple && !isAnyDisabled && hasClearButton && value !== void 0 && value !== null;
+	const chips = isMultiple ? /* @__PURE__ */ jsx(SelectionChipGroup, {
+		value,
+		theme,
+		getOptionId,
+		getOptionName,
+		onChange,
+		inputRef: localInputRef,
+		isDisabled: isAnyDisabled,
+		label: translations.chipGroupLabel ?? label,
+		chipRemoveLabel: translations.chipRemoveLabel,
+		renderChip,
+		getChipProps
+	}) : void 0;
+	return SelectTextField$1({
+		options,
+		getOptionId,
+		getOptionName,
+		getOptionDescription,
+		renderOption: wrappedRenderOption,
+		getSectionId,
+		renderSectionTitle,
+		selected: value,
+		label,
+		isMultiselectable: isMultiple,
+		listStatus,
+		onOpen,
+		loadingMessage: translations.loadingMessage,
+		emptyMessage: translations.emptyMessage,
+		nbOptionMessage: translations.nbOptionMessage,
+		errorMessage: translations.errorMessage,
+		errorTryReloadMessage: translations.errorTryReloadMessage,
+		inputProps: {
+			...consumerInputProps,
+			placeholder,
+			icon,
+			value: displayValue,
+			onChange: handleInputChange,
+			onSelect: handleSelect,
+			onBlur: handleBlur,
+			onFocus,
+			onKeyDown,
+			inputRef: mergedInputRef,
+			isDisabled,
+			"aria-disabled": ariaDisabled,
+			isRequired,
+			hasError,
+			error,
+			helper,
+			id,
+			name,
+			isValid,
+			maxLength,
+			"aria-label": ariaLabel,
+			clearButtonProps: showClear ? { label: translations.clearLabel } : void 0,
+			onClear: handleClear,
+			toggleButtonProps: translations.showSuggestionsLabel ? { label: translations.showSuggestionsLabel } : void 0,
+			filter,
+			openOnFocus,
+			className,
+			theme
+		},
+		popoverProps,
+		listProps: { ref: setListElement },
+		chips,
+		beforeOptions,
+		onLoadMore,
+		infiniteScrollOptions: {
+			root: listElement,
+			rootMargin: "100px"
+		}
+	}, {
+		Combobox,
+		InfiniteScroll
+	});
+};
+SelectTextField.displayName = "SelectTextField";
+//#endregion
+export { SelectTextField };

package/_internal/components/select-text-field/index.d.ts

@@ -0,0 +1,33 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ComboboxOptionProps } from "../combobox/ComboboxOption.js";
+import { ComboboxOptionMoreInfoProps } from "../combobox/ComboboxOptionMoreInfo.js";
+import { ComboboxOptionSkeletonProps } from "../combobox/ComboboxOptionSkeleton.js";
+import { ComboboxSectionProps } from "../combobox/ComboboxSection.js";
+import { ListDividerProps } from "../list/ListDivider.js";
+import { SelectListStatus, SelectTextFieldTranslations } from "../../packages/lumx-core/src/js/utils/select/types.js";
+import { MultipleSelectTextFieldProps, SelectTextFieldProps, SingleSelectTextFieldProps } from "./SelectTextField.js";
+
+//#region src/components/select-text-field/index.d.ts
+/**
+ * SelectTextField compound component.
+ */
+declare const SelectTextField: {
+  <O>(props: SelectTextFieldProps<O>): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+} & {
+  /** Selectable option within the dropdown list. */Option: Comp<ComboboxOptionProps, HTMLLIElement>; /** Labelled group of options. */
+  Section: Comp<ComboboxSectionProps, HTMLLIElement>; /** Info icon on an option that reveals a popover with additional details. */
+  OptionMoreInfo: {
+    (props: ComboboxOptionMoreInfoProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    className: "lumx-combobox-option-more-info";
+  }; /** Skeleton loading placeholder for options being fetched. */
+  OptionSkeleton: {
+    (props: ComboboxOptionSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    className: "lumx-combobox-option-skeleton";
+  }; /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+  Divider: Comp<ListDividerProps, HTMLLIElement>;
+};
+//#endregion
+export { SelectTextField };

package/_internal/components/select-text-field/index.js

@@ -0,0 +1,24 @@
+import { ComboboxOption } from "../combobox/ComboboxOption.js";
+import { ComboboxOptionMoreInfo } from "../combobox/ComboboxOptionMoreInfo.js";
+import { ComboboxOptionSkeleton } from "../combobox/ComboboxOptionSkeleton.js";
+import { ComboboxSection } from "../combobox/ComboboxSection.js";
+import { ListDivider } from "../list/ListDivider.js";
+import { SelectTextField as SelectTextField$1 } from "./SelectTextField.js";
+//#region src/components/select-text-field/index.ts
+/**
+* SelectTextField compound component.
+*/
+var SelectTextField = Object.assign(SelectTextField$1, {
+	/** Selectable option within the dropdown list. */
+	Option: ComboboxOption,
+	/** Labelled group of options. */
+	Section: ComboboxSection,
+	/** Info icon on an option that reveals a popover with additional details. */
+	OptionMoreInfo: ComboboxOptionMoreInfo,
+	/** Skeleton loading placeholder for options being fetched. */
+	OptionSkeleton: ComboboxOptionSkeleton,
+	/** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
+	Divider: ListDivider
+});
+//#endregion
+export { SelectTextField };

package/_internal/components/side-navigation/SideNavigation.d.ts

@@ -0,0 +1,22 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactNode } from "react";
+
+//#region src/components/side-navigation/SideNavigation.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SideNavigationProps extends index_d_exports.GenericProps, index_d_exports.HasTheme {
+  /** SideNavigationItem elements. */
+  children: ReactNode;
+}
+/**
+ * SideNavigation component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SideNavigation: Comp<SideNavigationProps, HTMLUListElement>;
+//#endregion
+export { SideNavigation, SideNavigationProps };

package/_internal/components/side-navigation/SideNavigation.js

@@ -0,0 +1,39 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { isComponent } from "../../utils/type/isComponent.js";
+import { SideNavigationItem } from "./SideNavigationItem.js";
+import { src_exports } from "../../../index.js";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/side-navigation/SideNavigation.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SideNavigation";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-side-navigation";
+/**
+* SideNavigation component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var SideNavigation = forwardRef((props, ref) => {
+	const defaultTheme = useTheme();
+	const { children, className, theme = defaultTheme, ...forwardedProps } = props;
+	const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, theme === src_exports.Theme.dark && "lumx-color-font-light-N", CLASSNAME),
+		children: content
+	});
+});
+SideNavigation.displayName = COMPONENT_NAME;
+SideNavigation.className = CLASSNAME;
+//#endregion
+export { SideNavigation };

package/_internal/components/side-navigation/SideNavigationItem.d.ts

@@ -0,0 +1,44 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { index_d_exports as index_d_exports$1 } from "../../../index.js";
+import { ReactNode } from "react";
+
+//#region src/components/side-navigation/SideNavigationItem.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SideNavigationItemProps extends index_d_exports.GenericProps, index_d_exports.HasCloseMode {
+  /** SideNavigationItem elements. */
+  children?: ReactNode;
+  /** Emphasis variant. */
+  emphasis?: index_d_exports$1.Emphasis;
+  /** Label content. */
+  label: string | ReactNode;
+  /** Icon (SVG path). */
+  icon?: string;
+  /** Whether the component is open or not. */
+  isOpen?: boolean;
+  /** Whether the component is selected or not. */
+  isSelected?: boolean;
+  /** Custom react component for the link (can be used to inject react router Link). */
+  linkAs?: 'a' | any;
+  /** Props to pass to the link (minus those already set by the SideNavigationItem props). */
+  linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+  /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
+  toggleButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;
+  /** On action button click callback. */
+  onActionClick?(evt: React.MouseEvent): void;
+  /** On click callback. */
+  onClick?(evt: React.MouseEvent): void;
+}
+/**
+ * SideNavigationItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement>;
+//#endregion
+export { SideNavigationItem, SideNavigationItemProps };

package/_internal/components/side-navigation/SideNavigationItem.js

@@ -0,0 +1,111 @@
+import { useId } from "../../hooks/useId.js";
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { RawClickable } from "../../packages/lumx-core/src/js/components/RawClickable/index.js";
+import { isComponent } from "../../utils/type/isComponent.js";
+import { IconButton } from "../button/IconButton.js";
+import { Icon } from "../icon/Icon.js";
+import { src_exports } from "../../../index.js";
+import { Children } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import isEmpty from "lodash/isEmpty.js";
+import { mdiChevronUp } from "@lumx/icons/esm/chevron-up.js";
+import { mdiChevronDown } from "@lumx/icons/esm/chevron-down.js";
+//#region src/components/side-navigation/SideNavigationItem.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SideNavigationItem";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-side-navigation-item";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	emphasis: src_exports.Emphasis.high,
+	closeMode: "unmount"
+};
+/**
+* SideNavigationItem component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var SideNavigationItem = forwardRef((props, ref) => {
+	const { children, className, emphasis = DEFAULT_PROPS.emphasis, icon, isOpen, isSelected, label, linkAs, linkProps, onActionClick, onClick, toggleButtonProps, closeMode = DEFAULT_PROPS.closeMode, ...forwardedProps } = props;
+	const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
+	const hasContent = !isEmpty(content);
+	const shouldSplitActions = Boolean(onActionClick);
+	const showChildren = hasContent && isOpen;
+	const contentId = useId();
+	const ariaProps = {};
+	if (hasContent) {
+		ariaProps["aria-expanded"] = !!showChildren;
+		ariaProps["aria-controls"] = showChildren || closeMode === "hide" ? contentId : void 0;
+	}
+	return /* @__PURE__ */ jsxs("li", {
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, block({
+			[`emphasis-${emphasis}`]: Boolean(emphasis),
+			"is-open": showChildren,
+			"is-selected": isSelected
+		})),
+		children: [shouldSplitActions ? /* @__PURE__ */ jsxs("div", {
+			className: element("wrapper"),
+			children: [RawClickable({
+				as: linkAs || (linkProps?.href ? "a" : "button"),
+				...linkProps,
+				className: element("link"),
+				handleClick: onClick,
+				handleKeyPress: linkProps?.onKeyPress,
+				children: /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx(Icon, {
+					className: element("icon"),
+					icon,
+					size: src_exports.Size.xs
+				}), /* @__PURE__ */ jsx("span", { children: label })] })
+			}), /* @__PURE__ */ jsx(IconButton, {
+				...toggleButtonProps,
+				className: element("toggle"),
+				icon: isOpen ? mdiChevronUp : mdiChevronDown,
+				size: src_exports.Size.m,
+				emphasis: src_exports.Emphasis.low,
+				onClick: onActionClick,
+				...ariaProps
+			})]
+		}) : RawClickable({
+			as: linkAs || (linkProps?.href ? "a" : "button"),
+			...linkProps,
+			className: element("link"),
+			handleClick: onClick,
+			handleKeyPress: linkProps?.onKeyPress,
+			...ariaProps,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				icon && /* @__PURE__ */ jsx(Icon, {
+					className: element("icon"),
+					icon,
+					size: src_exports.Size.xs
+				}),
+				/* @__PURE__ */ jsx("span", { children: label }),
+				hasContent && /* @__PURE__ */ jsx(Icon, {
+					className: element("chevron"),
+					icon: isOpen ? mdiChevronUp : mdiChevronDown,
+					size: src_exports.Size.xs
+				})
+			] })
+		}), (closeMode === "hide" || showChildren) && /* @__PURE__ */ jsx("ul", {
+			className: element("children"),
+			id: contentId,
+			children: content
+		})]
+	});
+});
+SideNavigationItem.displayName = COMPONENT_NAME;
+SideNavigationItem.className = CLASSNAME;
+SideNavigationItem.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { SideNavigationItem };

package/_internal/components/side-navigation/index.d.ts

@@ -0,0 +1,2 @@
+import { SideNavigation, SideNavigationProps } from "./SideNavigation.js";
+import { SideNavigationItem, SideNavigationItemProps } from "./SideNavigationItem.js";

package/_internal/components/skeleton/SkeletonCircle.d.ts

@@ -0,0 +1,19 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { SkeletonCircleProps as SkeletonCircleProps$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonCircle.js";
+//#region src/components/skeleton/SkeletonCircle.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonCircleProps extends index_d_exports.GenericProps, ReactToJSX<SkeletonCircleProps$1> {}
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement>;
+//#endregion
+export { SkeletonCircle, SkeletonCircleProps };

package/_internal/components/skeleton/SkeletonCircle.js

@@ -0,0 +1,30 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { CLASSNAME, COMPONENT_NAME, SkeletonCircle as SkeletonCircle$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonCircle.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/skeleton/SkeletonCircle.tsx
+var DEFAULT_PROPS = {};
+/**
+* SkeletonCircle component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var SkeletonCircle = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;
+	return SkeletonCircle$1({
+		ref,
+		className,
+		size,
+		color,
+		theme,
+		...forwardedProps
+	});
+});
+SkeletonCircle.displayName = COMPONENT_NAME;
+SkeletonCircle.defaultProps = DEFAULT_PROPS;
+SkeletonCircle.className = CLASSNAME;
+//#endregion
+export { SkeletonCircle };

package/_internal/components/skeleton/SkeletonRectangle.d.ts

@@ -0,0 +1,19 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { SkeletonRectangleProps as SkeletonRectangleProps$1, SkeletonRectangleVariant } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonRectangle.js";
+//#region src/components/skeleton/SkeletonRectangle.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonRectangleProps extends index_d_exports.GenericProps, ReactToJSX<SkeletonRectangleProps$1> {}
+/**
+ * SkeletonRectangle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement>;
+//#endregion
+export { SkeletonRectangle, SkeletonRectangleProps };

package/_internal/components/skeleton/SkeletonRectangle.js

@@ -0,0 +1,33 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS as DEFAULT_PROPS$1, SkeletonRectangle as SkeletonRectangle$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonRectangle.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/skeleton/SkeletonRectangle.tsx
+var DEFAULT_PROPS = DEFAULT_PROPS$1;
+/**
+* SkeletonRectangle component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var SkeletonRectangle = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { aspectRatio, className, height, theme = defaultTheme, variant = DEFAULT_PROPS.variant, width, color, ...forwardedProps } = props;
+	return SkeletonRectangle$1({
+		ref,
+		aspectRatio,
+		className,
+		height,
+		theme,
+		variant,
+		width,
+		color,
+		...forwardedProps
+	});
+});
+SkeletonRectangle.displayName = COMPONENT_NAME;
+SkeletonRectangle.className = CLASSNAME;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { SkeletonRectangle };

package/_internal/components/skeleton/SkeletonTypography.d.ts

@@ -0,0 +1,19 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { SkeletonTypographyProps as SkeletonTypographyProps$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonTypography.js";
+//#region src/components/skeleton/SkeletonTypography.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonTypographyProps extends index_d_exports.GenericProps, ReactToJSX<SkeletonTypographyProps$1> {}
+/**
+ * SkeletonTypography component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SkeletonTypography: Comp<SkeletonTypographyProps, HTMLDivElement>;
+//#endregion
+export { SkeletonTypography, SkeletonTypographyProps };