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

package/_internal/_virtual/_rolldown/runtime.js

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

package/_internal/components/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,30 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { BaseAlertDialogProps } from "../../packages/lumx-core/src/js/components/AlertDialog/index.js";
+import { ButtonProps } from "../button/Button.js";
+import { DialogProps } from "../dialog/Dialog.js";
+//#region src/components/alert-dialog/AlertDialog.d.ts
+interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'>, BaseAlertDialogProps {
+  /** Props forwarded to the confirm button */
+  confirmProps: ButtonProps & {
+    label: string;
+  };
+  /**
+   * Props forwarded to the cancel button.
+   * Will not render a cancel button if undefined.
+   */
+  cancelProps?: ButtonProps & {
+    label: string;
+  };
+}
+/**
+ * AlertDialog component.
+ *
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
+ *
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
+ */
+declare const AlertDialog: Comp<AlertDialogProps, HTMLDivElement>;
+//#endregion
+export { AlertDialog, AlertDialogProps };

package/_internal/components/alert-dialog/AlertDialog.js

@@ -0,0 +1,49 @@
+import { useId } from "../../hooks/useId.js";
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { AlertDialog as AlertDialog$1, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from "../../packages/lumx-core/src/js/components/AlertDialog/index.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { Dialog } from "../dialog/Dialog.js";
+import { Toolbar } from "../toolbar/Toolbar.js";
+import React from "react";
+//#region src/components/alert-dialog/AlertDialog.tsx
+/**
+* AlertDialog component.
+*
+* An alert dialog is a modal dialog that interrupts the user's workflow to
+* communicate an important message and acquire a response.
+*
+* It should not have a complex content.
+* Children of this component should only be strings, paragraphs or links.
+*/
+var AlertDialog = forwardRef((props, ref) => {
+	const { id, title, className, cancelProps, confirmProps, kind, size, dialogProps, children, ...forwardedProps } = props;
+	const cancelButtonRef = React.useRef(null);
+	const confirmationButtonRef = React.useRef(null);
+	const generatedId = useId();
+	return AlertDialog$1({
+		Button,
+		confirmProps,
+		DescriptionElement: typeof children === "string" ? "p" : "div",
+		Dialog,
+		Icon,
+		id: id || generatedId,
+		Toolbar,
+		cancelButtonRef,
+		cancelProps,
+		children,
+		className,
+		confirmationButtonRef,
+		dialogProps,
+		kind,
+		ref,
+		size,
+		title,
+		...forwardedProps
+	});
+});
+AlertDialog.displayName = COMPONENT_NAME;
+AlertDialog.className = CLASSNAME;
+AlertDialog.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { AlertDialog };

package/_internal/components/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+import { AlertDialog, AlertDialogProps } from "./AlertDialog.js";

package/_internal/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,181 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { TextFieldProps } from "../text-field/TextField.js";
+import { Placement } from "../../packages/lumx-core/src/js/components/Popover/constants.js";
+import { Offset } from "../../packages/lumx-core/src/js/components/Popover/types.js";
+import { DropdownProps } from "../dropdown/Dropdown.js";
+import { ReactNode, SyntheticEvent } from "react";
+
+//#region src/components/autocomplete/Autocomplete.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface AutocompleteProps extends index_d_exports.GenericProps, index_d_exports.HasTheme {
+  /**
+   * Whether the suggestions list should display anchored to the input or to the wrapper.
+   * @see {@link DropdownProps#anchorToInput}
+   */
+  anchorToInput?: boolean;
+  /**
+   * Props to pass to the clear button (minus those already set by the TextField props).
+   * If not specified, the button won't be displayed.
+   * @see {@link TextFieldProps#clearButtonProps}
+   */
+  clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+  /**
+   * Reference to the <input> or <textarea> element.
+   * @see {@link TextFieldProps#inputRef}
+   */
+  inputRef?: TextFieldProps['inputRef'];
+  /**
+   * The offset that will be applied to the Dropdown position.
+   * @see {@link DropdownProps#offset}
+   */
+  offset?: Offset;
+  /**
+   * The preferred Dropdown location against the anchor element.
+   * @see {@link DropdownProps#placement}
+   */
+  placement?: Placement;
+  /**
+   * Manage dropdown width:
+   *   - `maxWidth`: dropdown not bigger than anchor
+   *   - `minWidth` or `true`: dropdown not smaller than anchor
+   *   - `width`: dropdown equal to the anchor.
+   * @see {@link DropdownProps#fitToAnchorWidth}
+   */
+  fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
+  /**
+   * The error related to the component.
+   * @see {@link TextFieldProps#error}
+   */
+  error?: string | ReactNode;
+  /**
+   * Whether the text field is displayed with error style or not.
+   * @see {@link TextFieldProps#hasError}
+   */
+  hasError?: boolean;
+  /**
+   * Whether the text box should be focused upon closing the suggestions or not.
+   */
+  shouldFocusOnClose?: boolean;
+  /**
+   * The helper message of the text field.
+   * @see {@link TextFieldProps#helper}
+   */
+  helper?: string;
+  /**
+   * The icon of the text field (SVG path).
+   * @see {@link TextFieldProps#icon}
+   */
+  icon?: string;
+  /**
+   * Whether the component is disabled or not.
+   * @see {@link TextFieldProps#isDisabled}
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether the component is required or not.
+   * @see {@link TextFieldProps#isRequired}
+   */
+  isRequired?: boolean;
+  /**
+   * Whether the text field is displayed with valid style or not.
+   * @see {@link TextFieldProps#isValid}
+   */
+  isValid?: boolean;
+  /**
+   * The label of the text field displayed in a label tag.
+   * @see {@link TextFieldProps#label}
+   */
+  label?: string;
+  /**
+   * The placeholder message of the text field.
+   * @see {@link TextFieldProps#placeholder}
+   */
+  placeholder?: string;
+  /** List of suggestions to display during autocomplete. */
+  children: React.ReactNode;
+  /**
+   * The list of chips to be displayed before the text field input.
+   */
+  chips?: React.ReactNode;
+  /**
+   * The value of the text field.
+   * @see {@link TextFieldProps#value}
+   */
+  value: string;
+  /**
+   * Whether the suggestions from the autocomplete should be displayed or not.
+   * @see {@link DropdownProps#isOpen}
+   */
+  isOpen: boolean;
+  /**
+   * The native input name property.
+   * @see {@link TextFieldProps#name}
+   */
+  name?: string;
+  /**
+   * Whether a click in the Autocomplete dropdown would close it or not.
+   * @see {@link DropdownProps#closeOnClick}
+   */
+  closeOnClick?: boolean;
+  /**
+   * Whether a click anywhere out of the Autocomplete would close it or not.
+   * @see {@link DropdownProps#closeOnClickAway}
+   */
+  closeOnClickAway?: boolean;
+  /**
+   * Whether an escape key press would close the Autocomplete or not.
+   * @see {@link DropdownProps#closeOnEscape}
+   */
+  closeOnEscape?: boolean;
+  /**
+   * Whether the focus should go back on the anchor when dropdown closes and focus is within.
+   * @see {@link DropdownProps#focusAnchorOnClose}
+   */
+  focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];
+  /**
+   * The function called on blur.
+   * @see {@link TextFieldProps#onBlur}
+   */
+  onBlur?(event: React.FocusEvent): void;
+  /**
+   * On change callback.
+   * @see {@link TextFieldProps#onChange}
+   */
+  onChange(value: string, name?: string, event?: SyntheticEvent): void;
+  /**
+   * The function called on close.
+   * @see {@link DropdownProps#onClose}
+   */
+  onClose?(): void;
+  /**
+   * The function called on focus.
+   * @see {@link TextFieldProps#onFocus}
+   */
+  onFocus?(event: React.FocusEvent): void;
+  /**
+   * The function called when the bottom of the dropdown is reached.
+   * @see {@link DropdownProps#onInfiniteScroll}
+   */
+  onInfiniteScroll?(): void;
+  /**
+   * Props forwarded to the underlying TextField component.
+   * Only the props not managed by the Autocomplete can be set.
+   * @see {@link TextFieldProps}
+   */
+  textFieldProps?: Partial<TextFieldProps>;
+}
+/**
+ * Autocomplete component.
+ *
+ * @deprecated use `SelectTextField` instead
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Autocomplete: Comp<AutocompleteProps, HTMLDivElement>;
+//#endregion
+export { Autocomplete, AutocompleteProps };

package/_internal/components/autocomplete/Autocomplete.js

@@ -0,0 +1,92 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useFocus } from "../../hooks/useFocus.js";
+import { mergeRefs } from "../../utils/react/mergeRefs.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { TextField } from "../text-field/TextField.js";
+import { Dropdown } from "../dropdown/Dropdown.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/autocomplete/Autocomplete.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Autocomplete";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-autocomplete";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	anchorToInput: false,
+	closeOnClick: false,
+	closeOnClickAway: true,
+	closeOnEscape: true,
+	shouldFocusOnClose: false
+};
+/**
+* Autocomplete component.
+*
+* @deprecated use `SelectTextField` instead
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Autocomplete = forwardRef((props, ref) => {
+	const defaultTheme = useTheme();
+	const { disabledStateProps, otherProps } = useDisableStateProps(props);
+	const { anchorToInput = DEFAULT_PROPS.anchorToInput, children, chips, className, closeOnClick = DEFAULT_PROPS.closeOnClick, closeOnClickAway = DEFAULT_PROPS.closeOnClickAway, closeOnEscape = DEFAULT_PROPS.closeOnEscape, error, fitToAnchorWidth, hasError, helper, icon, inputRef, clearButtonProps, isRequired, isOpen, isValid, label, name, offset, onBlur, onChange, onClose, onFocus, onInfiniteScroll, placeholder, placement, shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose, theme = defaultTheme, value, textFieldProps = {}, focusAnchorOnClose, ...forwardedProps } = otherProps;
+	const inputAnchorRef = useRef(null);
+	const textFieldRef = useRef(null);
+	useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, CLASSNAME),
+		children: [/* @__PURE__ */ jsx(TextField, {
+			...textFieldProps,
+			chips,
+			error,
+			hasError,
+			helper,
+			icon,
+			inputRef: mergeRefs(inputAnchorRef, inputRef),
+			clearButtonProps,
+			...disabledStateProps,
+			isRequired,
+			isValid,
+			label,
+			name,
+			onBlur,
+			onChange,
+			onFocus,
+			placeholder,
+			textFieldRef,
+			theme,
+			value
+		}), /* @__PURE__ */ jsx(Dropdown, {
+			anchorRef: anchorToInput ? inputAnchorRef : textFieldRef,
+			closeOnClick,
+			closeOnClickAway,
+			closeOnEscape,
+			focusAnchorOnClose,
+			fitToAnchorWidth,
+			isOpen,
+			offset,
+			onClose,
+			onInfiniteScroll,
+			placement,
+			shouldFocusOnOpen: false,
+			theme,
+			children
+		})]
+	});
+});
+Autocomplete.displayName = COMPONENT_NAME;
+Autocomplete.className = CLASSNAME;
+Autocomplete.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Autocomplete };

package/_internal/components/autocomplete/AutocompleteMultiple.d.ts

@@ -0,0 +1,28 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { AutocompleteProps } from "./Autocomplete.js";
+import { index_d_exports } from "../../../index.js";
+import { ReactNode } from "react";
+
+//#region src/components/autocomplete/AutocompleteMultiple.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface AutocompleteMultipleProps extends AutocompleteProps {
+  /** Selected values. */
+  values: any[];
+  /** Alignment of the chips in the autocomplete. */
+  chipsAlignment?: index_d_exports.HorizontalAlignment;
+  /** Selected value render function. Default: Renders the value inside of a Chip. */
+  selectedChipRender(choice: any, index: number, onClear?: (event?: React.MouseEvent, val?: any) => void, isDisabled?: boolean): ReactNode | string;
+}
+/**
+ * AutocompleteMultiple component.
+
+ * @deprecated use `SelectTextField` instead
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement>;
+//#endregion
+export { AutocompleteMultiple, AutocompleteMultipleProps };

package/_internal/components/autocomplete/AutocompleteMultiple.js

@@ -0,0 +1,95 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { Autocomplete } from "./Autocomplete.js";
+import { Chip } from "../chip/Chip.js";
+import { Icon } from "../icon/Icon.js";
+import { src_exports } from "../../../index.js";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import { mdiClose } from "@lumx/icons/esm/close.js";
+//#region src/components/autocomplete/AutocompleteMultiple.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "AutocompleteMultiple";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-autocomplete-multiple";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	closeOnClickAway: true,
+	closeOnEscape: true,
+	selectedChipRender(choice, index, onClear, isDisabled) {
+		const onClick = (event) => onClear && onClear(event, choice);
+		return /* @__PURE__ */ jsx(Chip, {
+			after: onClear && /* @__PURE__ */ jsx(Icon, {
+				icon: mdiClose,
+				size: src_exports.Size.xxs
+			}),
+			isDisabled,
+			size: src_exports.Size.s,
+			onAfterClick: onClick,
+			onClick,
+			children: choice
+		}, index);
+	},
+	values: []
+};
+/**
+* AutocompleteMultiple component.
+
+* @deprecated use `SelectTextField` instead
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var AutocompleteMultiple = forwardRef((props, ref) => {
+	const defaultTheme = useTheme();
+	const { disabledStateProps, otherProps } = useDisableStateProps(props);
+	const { anchorToInput, children, chipsAlignment, className, closeOnClickAway = DEFAULT_PROPS.closeOnClickAway, closeOnEscape = DEFAULT_PROPS.closeOnEscape, fitToAnchorWidth, hasError, helper, icon, inputRef, clearButtonProps, isRequired, isOpen, isValid, label, name, offset, onBlur, onChange, onClear, onClose, onFocus, onInfiniteScroll, onKeyDown, placeholder, placement, selectedChipRender = DEFAULT_PROPS.selectedChipRender, shouldFocusOnClose, theme = defaultTheme, type, value, values = DEFAULT_PROPS.values, ...forwardedProps } = otherProps;
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		ref,
+		...forwardedProps,
+		anchorToInput,
+		className: classNames.join(className, CLASSNAME),
+		name,
+		value,
+		onChange,
+		onKeyDown,
+		onBlur,
+		shouldFocusOnClose,
+		onFocus,
+		hasError,
+		helper,
+		icon,
+		inputRef,
+		chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear)),
+		...disabledStateProps,
+		isRequired,
+		clearButtonProps,
+		isValid,
+		label,
+		placeholder,
+		theme,
+		type,
+		isOpen,
+		closeOnClick: false,
+		closeOnClickAway,
+		closeOnEscape,
+		onClose,
+		offset,
+		placement,
+		fitToAnchorWidth,
+		onInfiniteScroll,
+		children
+	});
+});
+AutocompleteMultiple.displayName = COMPONENT_NAME;
+AutocompleteMultiple.className = CLASSNAME;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { AutocompleteMultiple };

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

@@ -0,0 +1,2 @@
+import { Autocomplete, AutocompleteProps } from "./Autocomplete.js";
+import { AutocompleteMultiple, AutocompleteMultipleProps } from "./AutocompleteMultiple.js";

package/_internal/components/avatar/Avatar.d.ts

@@ -0,0 +1,39 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { AvatarProps as AvatarProps$1, AvatarSize } from "../../packages/lumx-core/src/js/components/Avatar/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ThumbnailProps } from "../thumbnail/Thumbnail.js";
+import React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from "react";
+
+//#region src/components/avatar/Avatar.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface AvatarProps extends index_d_exports.GenericProps, ReactToJSX<AvatarProps$1, 'actions' | 'badge' | 'image'> {
+  /** Action toolbar content. */
+  actions?: ReactNode;
+  /** Image URL. */
+  image: string;
+  /** Props to pass to the link wrapping the thumbnail. */
+  linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+  /** Custom react component for the link (can be used to inject react router Link). */
+  linkAs?: 'a' | any;
+  /** On click callback. */
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  /** On key press callback. */
+  onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
+  /** Image alternative text. */
+  alt: string;
+  /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+  thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'>;
+}
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Avatar: Comp<AvatarProps, HTMLDivElement>;
+//#endregion
+export { Avatar, AvatarProps };

package/_internal/components/avatar/Avatar.js

@@ -0,0 +1,46 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { Avatar as Avatar$1, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, element } from "../../packages/lumx-core/src/js/components/Avatar/index.js";
+import { Thumbnail } from "../thumbnail/Thumbnail.js";
+import { src_exports } from "../../../index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/avatar/Avatar.tsx
+/**
+* Avatar component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Avatar = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { actions, alt, badge, className, image, linkProps, linkAs, onClick, onKeyPress, size = DEFAULT_PROPS.size, theme = defaultTheme, thumbnailProps, ...forwardedProps } = props;
+	return Avatar$1({
+		...forwardedProps,
+		className,
+		theme,
+		ref,
+		actions,
+		badge,
+		size,
+		image: /* @__PURE__ */ jsx(Thumbnail, {
+			linkProps,
+			linkAs,
+			className: element("thumbnail"),
+			onClick,
+			onKeyPress,
+			...thumbnailProps,
+			aspectRatio: src_exports.AspectRatio.square,
+			size,
+			image,
+			alt,
+			theme
+		})
+	});
+});
+Avatar.displayName = COMPONENT_NAME;
+Avatar.className = CLASSNAME;
+Avatar.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Avatar };

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

@@ -0,0 +1,2 @@
+import { AvatarSize } from "../../packages/lumx-core/src/js/components/Avatar/index.js";
+import { Avatar, AvatarProps } from "./Avatar.js";

package/_internal/components/badge/Badge.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 { BadgeProps as BadgeProps$1 } from "../../packages/lumx-core/src/js/components/Badge/index.js";
+import { ReactNode } from "react";
+
+//#region src/components/badge/Badge.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface BadgeProps extends ReactToJSX<BadgeProps$1>, index_d_exports.GenericProps {
+  /** Badge content. */
+  children?: ReactNode;
+}
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Badge: Comp<BadgeProps, HTMLDivElement>;
+//#endregion
+export { Badge, BadgeProps };

package/_internal/components/badge/Badge.js

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

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

@@ -0,0 +1,16 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { BadgeWrapperProps as BadgeWrapperProps$1 } from "../../packages/lumx-core/src/js/components/Badge/BadgeWrapper.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/badge/BadgeWrapper.d.ts
+interface BadgeWrapperProps extends index_d_exports.GenericProps, ReactToJSX<BadgeWrapperProps$1, 'children' | 'badge'> {
+  /** Badge element to display */
+  badge: ReactElement;
+  /** Content to wrap with badge */
+  children: ReactNode;
+}
+declare const BadgeWrapper: Comp<BadgeWrapperProps, HTMLDivElement>;
+//#endregion
+export { BadgeWrapper, BadgeWrapperProps };