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

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

@@ -0,0 +1,57 @@
+import { Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/ProgressCircular/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ProgressCircular";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-progress-circular";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	size: Size.m,
+	display: "block"
+};
+/**
+* ProgressCircular component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ProgressCircular = (props) => {
+	const { className, theme, size = DEFAULT_PROPS.size, display = DEFAULT_PROPS.display, ref, circleProps, svgProps, ...forwardedProps } = props;
+	const Element = display === "block" ? "div" : "span";
+	return /* @__PURE__ */ jsxs(Element, {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			[`size-${size}`]: Boolean(size),
+			[`display-${display}`]: Boolean(display)
+		})),
+		children: [
+			/* @__PURE__ */ jsx(Element, { className: element("double-bounce1") }),
+			/* @__PURE__ */ jsx(Element, { className: element("double-bounce2") }),
+			/* @__PURE__ */ jsx("svg", {
+				...svgProps,
+				viewBox: "25 25 50 50",
+				children: /* @__PURE__ */ jsx("circle", {
+					...circleProps,
+					cx: "50",
+					cy: "50",
+					r: "20",
+					fill: "none"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ProgressCircular, element };

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

@@ -0,0 +1,13 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/ProgressLinear/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ProgressLinearProps extends HasTheme, HasClassName {
+  /** Component ref */
+  ref?: CommonRef;
+}
+//#endregion
+export { ProgressLinearProps };

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

@@ -0,0 +1,34 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/ProgressLinear/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ProgressLinear";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-progress-linear";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* ProgressLinear component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ProgressLinear = (props) => {
+	const { className, theme, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({ [`theme-${theme}`]: Boolean(theme) })),
+		children: [/* @__PURE__ */ jsx("div", { className: element("line1") }), /* @__PURE__ */ jsx("div", { className: element("line2") })]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ProgressLinear };

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

@@ -0,0 +1,35 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasChecked } from "../../types/HasChecked.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/RadioButton/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface RadioButtonProps extends HasTheme, HasClassName, HasAriaDisabled, HasDisabled, HasChecked {
+  /** Helper text. */
+  helper?: string;
+  /** Native input id property. */
+  id?: string;
+  /** Label content. */
+  label?: JSXElement;
+  /** Native input name property. */
+  name?: string;
+  /** Native input value property. */
+  value?: string;
+  /** optional props for input */
+  inputProps?: Record<string, any>;
+  /** Native input ref. */
+  inputRef?: CommonRef;
+  /** Native input id. */
+  inputId: string;
+  /** On change callback. */
+  handleChange?(value?: string, name?: string, event?: any): void;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { RadioButtonProps };

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

@@ -0,0 +1,71 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { InputLabel } from "../InputLabel/index.js";
+import { InputHelper } from "../InputHelper/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/RadioButton/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "RadioButton";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-radio-button";
+var { block, element } = bem(CLASSNAME);
+/**
+* RadioButton component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var RadioButton = (props) => {
+	const { checked, className, helper, id, inputRef, isChecked = checked, label, name, ref, handleChange, theme, value, inputProps = {}, isDisabled, inputId, ...forwardedProps } = props;
+	const handleOnChange = (event) => {
+		if (handleChange) handleChange(value, name, event);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			"is-checked": 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,
+				className: element("input-native"),
+				id: inputId,
+				type: "radio",
+				name,
+				value,
+				checked: isChecked,
+				onChange: handleOnChange,
+				"aria-describedby": helper ? `${inputId}-helper` : void 0,
+				...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") })]
+			})]
+		}), /* @__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, RadioButton };

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

@@ -0,0 +1,15 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/RadioGroup/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface RadioGroupProps extends HasClassName {
+  /** RadioButton elements */
+  children?: JSXElement;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { RadioGroupProps };

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

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

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

@@ -0,0 +1,17 @@
+import { ElementType, JSXElement } from "../../types/JSXElement.js";
+import { HasRequiredLinkHref } from "../../types/HasRequiredLinkHref.js";
+import { HasPolymorphicAs } from "../../types/HasPolymorphicAs.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/RawClickable/index.d.ts
+type ClickableElement = 'a' | 'button' | ElementType;
+interface BaseClickableProps extends HasDisabled, HasAriaDisabled {
+  children?: JSXElement;
+  handleClick?: (event?: any) => void;
+  handleKeyPress?: (event?: any) => void;
+  ref?: CommonRef;
+}
+type RawClickableProps<E extends ClickableElement> = HasPolymorphicAs<E> & HasRequiredLinkHref<E> & BaseClickableProps;
+//#endregion
+export { BaseClickableProps, ClickableElement, RawClickableProps };

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

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/RawClickable/index.tsx
+/**
+* Render clickable element (link, button or custom element)
+* (also does some basic disabled state handling)
+*/
+var RawClickable = (props) => {
+	const { children, handleClick, handleKeyPress, disabled, isDisabled = disabled, "aria-disabled": ariaDisabled, as, ...forwardedProps } = props;
+	const isAnyDisabled = isDisabled || ariaDisabled === "true" || ariaDisabled === true;
+	const Component = as;
+	let clickableProps;
+	if (Component === "button") clickableProps = {
+		type: forwardedProps.type || "button",
+		disabled: isDisabled
+	};
+	else clickableProps = { tabIndex: isDisabled ? "-1" : forwardedProps.tabIndex };
+	return /* @__PURE__ */ jsx(Component, {
+		"aria-disabled": isAnyDisabled || void 0,
+		...forwardedProps,
+		...clickableProps,
+		onKeyPress: handleKeyPress,
+		onClick: (event) => {
+			if (isAnyDisabled) {
+				event.stopPropagation();
+				event.preventDefault();
+				return;
+			}
+			handleClick?.(event);
+		},
+		children
+	});
+};
+//#endregion
+export { RawClickable };

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

@@ -0,0 +1,58 @@
+import { ComboboxButtonLabelDisplayMode } from "../Combobox/ComboboxButton.js";
+import { BaseSelectProps, SelectButtonTranslations, SelectListStatus } from "../../utils/select/types.js";
+
+//#region ../lumx-core/src/js/components/SelectButton/index.d.ts
+/**
+ * Defines the props for the core SelectButton template.
+ */
+interface SelectButtonProps<O> extends BaseSelectProps<O> {
+  /**
+   * Selected value (single mode) or selected values (multi mode).
+   * The wrapper layer chooses the shape; the core just renders names.
+   */
+  value?: O | O[];
+  /** Single or multiple selection */
+  selectionType?: 'single' | 'multiple';
+  /** Button label (used for ARIA and when no selection). */
+  label: string;
+  /** Controls how the label/value is displayed in the button. */
+  labelDisplayMode?: ComboboxButtonLabelDisplayMode;
+  /**
+   * Props forwarded to Combobox.Button (button appearance, emphasis, size, etc.).
+   * Pass `renderButton` here to provide a custom button renderer — see
+   * `ComboboxButtonProps.renderButton`. Framework wrappers are responsible for
+   * defaulting any visual affordance (e.g. the dropdown chevron `rightIcon`).
+   */
+  buttonProps?: Record<string, any>;
+  /** Props forwarded to Combobox.Popover. */
+  popoverProps?: Record<string, any>;
+  /** Props forwarded to Combobox.List (e.g. ref). */
+  listProps?: Record<string, any>;
+  /** Callback on option selected (receives option id string). */
+  handleSelect?: (selectedOption: {
+    value: string;
+  }) => void;
+  /**
+   * Status of the dropdown list.
+   * - `'idle'` — Default state, no loading indicators.
+   * - `'loading'` — Full loading: shows skeleton placeholders, hides real options.
+   * - `'loadingMore'` — Paginated loading: appends a skeleton after existing options.
+   * - `'error'` — Error state: shows an error message in the dropdown.
+   * @default 'idle'
+   */
+  listStatus?: SelectListStatus;
+  /** Optional translations for screen-reader announcements (loading/empty/error/option count). */
+  translations?: SelectButtonTranslations;
+  /** Callback fired when the dropdown open state changes. */
+  onOpen?: (isOpen: boolean) => void;
+  /**
+   * Callback fired to load more items (infinite scroll).
+   * When provided together with an injected `InfiniteScroll` component, an invisible
+   * sentinel element is rendered after the options to trigger loading via IntersectionObserver.
+   */
+  onLoadMore?: () => void;
+  /** IntersectionObserver options forwarded to the InfiniteScroll sentinel. */
+  infiniteScrollOptions?: IntersectionObserverInit;
+}
+//#endregion
+export { SelectButtonProps };

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

@@ -0,0 +1,85 @@
+import { getOptionDisplayName } from "../../utils/select/getOptionDisplayName.js";
+import { renderSelectOptions } from "../../utils/select/renderSelectOptions.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import castArray from "lodash/castArray.js";
+//#region ../lumx-core/src/js/components/SelectButton/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SelectButton";
+/**
+* Component default class name.
+*/
+var CLASSNAME = "lumx-select-button";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { selectionType: "single" };
+/**
+* SelectButton core template.
+* Renders a Combobox with a button trigger and a dropdown list of options.
+*
+* Framework-specific components 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 SelectButton = (props, { Combobox, InfiniteScroll }) => {
+	const { options, getOptionId, getOptionName, getOptionDescription, renderOption, getSectionId, renderSectionTitle, value, selectionType = DEFAULT_PROPS.selectionType, label, labelDisplayMode, buttonProps, popoverProps, listProps, handleSelect, listStatus = "idle", translations, onOpen, onLoadMore, infiniteScrollOptions } = props;
+	const isFullLoading = listStatus === "loading";
+	const isLoadingMore = listStatus === "loadingMore";
+	const isError = listStatus === "error";
+	const isMultiselectable = selectionType === "multiple";
+	const displayValue = value != null ? castArray(value).map((v) => getOptionDisplayName(v, getOptionName, getOptionId)).filter(Boolean).join(", ") : "";
+	return /* @__PURE__ */ jsxs(Combobox.Provider, {
+		onOpen,
+		children: [/* @__PURE__ */ jsx(Combobox.Button, {
+			...buttonProps,
+			label,
+			value: displayValue,
+			onSelect: handleSelect,
+			labelDisplayMode
+		}), /* @__PURE__ */ jsxs(Combobox.Popover, {
+			fitToAnchorWidth: "minWidth",
+			fitWithinViewportHeight: true,
+			placement: "bottom-start",
+			...popoverProps,
+			children: [/* @__PURE__ */ jsxs(Combobox.List, {
+				...listProps,
+				"aria-label": label,
+				"aria-multiselectable": isMultiselectable || void 0,
+				children: [
+					isFullLoading ? /* @__PURE__ */ jsx(Combobox.OptionSkeleton, { count: 3 }) : renderSelectOptions({
+						options,
+						getOptionId,
+						getOptionName,
+						getOptionDescription,
+						renderOption,
+						getSectionId,
+						renderSectionTitle,
+						selected: value
+					}, { Combobox }),
+					onLoadMore && InfiniteScroll && /* @__PURE__ */ jsx(InfiniteScroll, {
+						callback: () => {
+							if (listStatus && listStatus !== "idle") return;
+							onLoadMore();
+						},
+						options: infiniteScrollOptions
+					}),
+					isLoadingMore && /* @__PURE__ */ jsx(Combobox.OptionSkeleton, { count: 1 })
+				]
+			}), /* @__PURE__ */ jsx(Combobox.State, {
+				loadingMessage: translations?.loadingMessage,
+				emptyMessage: translations?.emptyMessage,
+				nbOptionMessage: translations?.nbOptionMessage,
+				errorMessage: isError ? translations?.errorMessage : void 0,
+				errorTryReloadMessage: isError ? translations?.errorTryReloadMessage : void 0
+			})]
+		})]
+	});
+};
+SelectButton.displayName = COMPONENT_NAME;
+SelectButton.className = CLASSNAME;
+//#endregion
+export { DEFAULT_PROPS, SelectButton };

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

@@ -0,0 +1,78 @@
+import { renderSelectOptions } from "../../utils/select/renderSelectOptions.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/SelectTextField/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SelectTextField";
+/**
+* Component default class name.
+*/
+var CLASSNAME = "lumx-select-text-field";
+/**
+* SelectTextField core template.
+* Renders a Combobox with a text input trigger and a dropdown list of options.
+* Supports search/filter, single selection, and multiple selection with chips.
+*
+* Framework-specific components 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 SelectTextField = (props, { Combobox, InfiniteScroll }) => {
+	const { options, getOptionId, getOptionName, getOptionDescription, renderOption, getSectionId, renderSectionTitle, selected, label, isMultiselectable, inputProps, popoverProps, listProps, listStatus = "idle", loadingMessage, emptyMessage, nbOptionMessage, errorMessage, errorTryReloadMessage, onOpen, chips, beforeOptions, afterOptions, onLoadMore, infiniteScrollOptions } = props;
+	const isFullLoading = listStatus === "loading";
+	const isLoadingMore = listStatus === "loadingMore";
+	const isError = listStatus === "error";
+	return /* @__PURE__ */ jsxs(Combobox.Provider, {
+		onOpen,
+		children: [/* @__PURE__ */ jsx(Combobox.Input, {
+			label,
+			...inputProps,
+			chips
+		}), /* @__PURE__ */ jsxs(Combobox.Popover, {
+			fitToAnchorWidth: "minWidth",
+			fitWithinViewportHeight: true,
+			placement: "bottom-start",
+			...popoverProps,
+			children: [/* @__PURE__ */ jsxs(Combobox.List, {
+				...listProps,
+				"aria-label": label,
+				"aria-multiselectable": isMultiselectable || void 0,
+				children: [
+					beforeOptions,
+					isFullLoading ? /* @__PURE__ */ jsx(Combobox.OptionSkeleton, { count: 3 }) : renderSelectOptions({
+						options,
+						getOptionId,
+						getOptionName,
+						getOptionDescription,
+						renderOption,
+						getSectionId,
+						renderSectionTitle,
+						selected
+					}, { Combobox }),
+					afterOptions,
+					onLoadMore && InfiniteScroll && /* @__PURE__ */ jsx(InfiniteScroll, {
+						callback: () => {
+							if (listStatus && listStatus !== "idle") return;
+							onLoadMore();
+						},
+						options: infiniteScrollOptions
+					}),
+					isLoadingMore && /* @__PURE__ */ jsx(Combobox.OptionSkeleton, { count: 1 })
+				]
+			}), /* @__PURE__ */ jsx(Combobox.State, {
+				loadingMessage,
+				emptyMessage,
+				nbOptionMessage,
+				errorMessage: isError ? errorMessage : void 0,
+				errorTryReloadMessage: isError ? errorTryReloadMessage : void 0
+			})]
+		})]
+	});
+};
+SelectTextField.displayName = COMPONENT_NAME;
+SelectTextField.className = CLASSNAME;
+//#endregion
+export { SelectTextField };

package/_internal/packages/lumx-core/src/js/components/Skeleton/SkeletonCircle.d.ts

@@ -0,0 +1,18 @@
+import { ColorPalette, GlobalSize } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonCircle.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonCircleProps extends HasTheme, HasClassName {
+  /** Size variant. */
+  size: GlobalSize;
+  /** The color of the skeleton. */
+  color?: ColorPalette;
+  /** Reference to the root element. */
+  ref?: CommonRef;
+}
+//#endregion
+export { SkeletonCircleProps };

package/_internal/packages/lumx-core/src/js/components/Skeleton/SkeletonCircle.js

@@ -0,0 +1,33 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonCircle.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "SkeletonCircle";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-skeleton-circle";
+var { block } = bem(CLASSNAME);
+/**
+* SkeletonCircle component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var SkeletonCircle = (props) => {
+	const { className, size, color, theme, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`size-${size}`]: Boolean(size),
+			[`color-${color}`]: Boolean(color),
+			[`theme-${theme}`]: Boolean(theme)
+		}))
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, SkeletonCircle };

package/_internal/packages/lumx-core/src/js/components/Skeleton/SkeletonRectangle.d.ts

@@ -0,0 +1,34 @@
+import { AspectRatio, ColorPalette, GlobalSize } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { ValueOf } from "../../types/ValueOf.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Skeleton/SkeletonRectangle.d.ts
+/**
+ * Skeleton variants.
+ */
+declare const SkeletonRectangleVariant: {
+  readonly squared: "squared";
+  readonly rounded: "rounded";
+  readonly pill: "pill";
+};
+type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonRectangleProps extends HasTheme, HasClassName {
+  /** Aspect ratio (use with width and not height). */
+  aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
+  /** Height size. */
+  height?: GlobalSize;
+  /** Border variant. */
+  variant?: SkeletonRectangleVariant;
+  /** Width size. */
+  width?: GlobalSize;
+  /** The color of the skeleton. */
+  color?: ColorPalette;
+  /** Reference to the root element. */
+  ref?: CommonRef;
+}
+//#endregion
+export { SkeletonRectangleProps, SkeletonRectangleVariant };