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

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

@@ -0,0 +1,48 @@
+import { font } from "../../utils/classNames/color/index.js";
+import { typography } from "../../utils/classNames/typography/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/InlineList/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "InlineList";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-inline-list";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* InlineList component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var InlineList = (props) => {
+	const { className, color, colorVariant, typography: typography$1, items = [], wrap, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("ul", {
+		...forwardedProps,
+		ref,
+		className: import_classnames.default(className, block({ wrap: Boolean(wrap) }), color && font(color, colorVariant), typography$1 && typography(typography$1)),
+		role: "list",
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
+			role: "listitem",
+			className: element("item"),
+			children: [index !== 0 && /* @__PURE__ */ jsx("span", {
+				className: element("item-separator"),
+				"aria-hidden": "true",
+				children: "\xA0•\xA0"
+			}), item]
+		}, index))
+	});
+};
+InlineList.displayName = COMPONENT_NAME;
+InlineList.className = CLASSNAME;
+InlineList.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, InlineList };

package/_internal/packages/lumx-core/src/js/components/InputHelper/constants.js

@@ -0,0 +1,9 @@
+import { Kind } from "../../constants/enums/index.js";
+//#region ../lumx-core/src/js/components/InputHelper/constants.ts
+var INPUT_HELPER_CONFIGURATION = {
+	[Kind.error]: { color: "red" },
+	[Kind.success]: { color: "green" },
+	[Kind.warning]: { color: "yellow" }
+};
+//#endregion
+export { INPUT_HELPER_CONFIGURATION };

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

@@ -0,0 +1,21 @@
+import { Kind } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/InputHelper/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface InputHelperProps extends HasClassName, HasTheme {
+  /** Helper content. */
+  children: JSXElement;
+  /** Helper variant. */
+  kind?: Kind;
+  /** ref to the root element `p` */
+  ref?: CommonRef;
+  /** id for the input helper */
+  id?: string;
+}
+//#endregion
+export { InputHelperProps };

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

@@ -0,0 +1,34 @@
+import { Kind } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { INPUT_HELPER_CONFIGURATION } from "./constants.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/InputHelper/index.tsx
+var COMPONENT_NAME = "InputHelper";
+var CLASSNAME = "lumx-input-helper";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { kind: Kind.info };
+/**
+* InputHelper component.
+*/
+function InputHelper(props) {
+	const { children, className, kind = DEFAULT_PROPS.kind, theme, ref, ...forwardedProps } = props;
+	const { color } = INPUT_HELPER_CONFIGURATION[kind] || {};
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`color-${color}`]: Boolean(color),
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		children
+	});
+}
+InputHelper.displayName = COMPONENT_NAME;
+InputHelper.className = CLASSNAME;
+InputHelper.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { InputHelper };

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

@@ -0,0 +1,24 @@
+import { Typography } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/InputLabel/index.d.ts
+interface InputLabelProps extends HasClassName, HasTheme {
+  /** Typography variant. */
+  typography?: Typography;
+  /** Label content. */
+  children: JSXElement;
+  /** Native htmlFor property. */
+  htmlFor: string;
+  /** Native id property. */
+  id?: string;
+  /** Whether the component is required or not. */
+  isRequired?: boolean;
+  /** ref to the root element */
+  ref?: CommonRef;
+  /** HTML tag for rendering the label, defaults to `label` */
+  as?: 'label' | 'legend';
+}
+//#endregion
+export { InputLabelProps };

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

@@ -0,0 +1,31 @@
+import { typography } from "../../utils/classNames/typography/index.js";
+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/InputLabel/index.tsx
+var COMPONENT_NAME = "InputLabel";
+var CLASSNAME = "lumx-input-label";
+var { block } = bem(CLASSNAME);
+var DEFAULT_PROPS = {};
+/**
+* InputLabel component.
+*/
+function InputLabel(props) {
+	const { children, className, htmlFor, isRequired, theme, as, typography: typography$1, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(as || "label", {
+		ref,
+		...forwardedProps,
+		htmlFor,
+		className: import_classnames.default(className, block({
+			"is-required": isRequired,
+			[`theme-${theme}`]: Boolean(theme),
+			"has-custom-typography": Boolean(typography$1)
+		}), typography$1 && typography(typography$1)),
+		children
+	});
+}
+InputLabel.displayName = COMPONENT_NAME;
+InputLabel.className = CLASSNAME;
+InputLabel.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { InputLabel };

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

@@ -0,0 +1,14 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { AriaAttributes } from "../../types/AriaAttributes.js";
+//#region ../lumx-core/src/js/components/Lightbox/index.d.ts
+interface BaseLightboxProps extends HasClassName, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
+  /** Whether the component is open or not. */
+  isOpen?: boolean;
+  /** Whether to keep the dialog open on clickaway or escape press. */
+  preventAutoClose?: boolean;
+  /** Z-axis position. */
+  zIndex?: number;
+}
+//#endregion
+export { BaseLightboxProps };

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

@@ -0,0 +1,70 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mdiClose } from "@lumx/icons/esm/close.js";
+//#region ../lumx-core/src/js/components/Lightbox/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Lightbox";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-lightbox";
+var { block, element } = bem(CLASSNAME);
+/**
+* Lightbox component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Lightbox = (props) => {
+	const { "aria-labelledby": propAriaLabelledBy, ariaLabelledBy = propAriaLabelledBy, "aria-label": propAriaLabel, ariaLabel = propAriaLabel, children, className, closeButtonProps, isOpen, handleClose, parentElement, focusElement, preventAutoClose, theme, zIndex, isVisible, ref, Portal, HeadingLevelProvider, ThemeProvider, ClickAwayProvider, childrenRef, clickAwayRefs, closeButtonRef, IconButton, ...forwardedProps } = props;
+	if (!isOpen && !isVisible) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-modal": "true",
+		role: "dialog",
+		tabIndex: -1,
+		className: import_classnames.default(className, block({
+			"is-hidden": !isOpen,
+			"is-shown": isOpen || isVisible,
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		style: { zIndex },
+		children: [closeButtonProps && /* @__PURE__ */ jsx("div", {
+			className: element("close"),
+			children: /* @__PURE__ */ jsx(IconButton, {
+				...closeButtonProps,
+				ref: closeButtonRef,
+				emphasis: "low",
+				hasBackground: true,
+				icon: mdiClose,
+				theme: "dark",
+				type: "button",
+				onClick: handleClose
+			})
+		}), /* @__PURE__ */ jsx(HeadingLevelProvider, {
+			level: 2,
+			children: /* @__PURE__ */ jsx(ThemeProvider, {
+				value: void 0,
+				children: /* @__PURE__ */ jsx(ClickAwayProvider, {
+					callback: !preventAutoClose && handleClose,
+					childrenRefs: clickAwayRefs,
+					children: /* @__PURE__ */ jsx("div", {
+						ref: childrenRef,
+						className: element("wrapper"),
+						role: "presentation",
+						children
+					})
+				})
+			})
+		})]
+	}) });
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, Lightbox };

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

@@ -0,0 +1,34 @@
+import { ColorVariant, ColorWithVariants, Typography } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { HasDisabled } from "../../types/HasDisabled.js";
+//#region ../lumx-core/src/js/components/Link/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface LinkProps extends HasClassName, HasAriaDisabled, HasDisabled {
+  /** Children content */
+  children?: JSXElement;
+  /** Color variant. */
+  color?: ColorWithVariants;
+  /** Lightened or darkened variant of the selected icon color. */
+  colorVariant?: ColorVariant;
+  /** Link href. */
+  href?: string;
+  /** Whether the component is disabled or not. */
+  isDisabled?: boolean;
+  /** Custom element/component for the link. */
+  linkAs?: string | any;
+  /** Click handler (framework wrappers convert onClick to handleClick). */
+  handleClick?: (event: any) => void;
+  /** Link target. */
+  target?: string;
+  /** Typography variant. */
+  typography?: Typography;
+  /** Element ref. */
+  ref?: CommonRef;
+}
+//#endregion
+export { LinkProps };

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

@@ -0,0 +1,40 @@
+import { resolveColorWithVariants } from "../../utils/_internal/color/resolveColorWithVariants.js";
+import { typography } from "../../utils/classNames/typography/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+//#region ../lumx-core/src/js/components/Link/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Link";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-link";
+var { block } = bem(CLASSNAME);
+/**
+* Link component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Link = (props) => {
+	const { children, className, color: propColor, colorVariant: propColorVariant, typography: typography$1, linkAs, handleClick, ref, href, ...forwardedProps } = props;
+	const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
+	return RawClickable({
+		ref,
+		as: linkAs || (href ? "a" : "button"),
+		href,
+		...forwardedProps,
+		handleClick,
+		children,
+		className: import_classnames.default(className, block({
+			[`color-${color}`]: Boolean(color),
+			[`color-variant-${colorVariant}`]: Boolean(colorVariant),
+			"has-typography": !!typography$1
+		}), typography$1 && typography(typography$1))
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, Link };

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

@@ -0,0 +1,36 @@
+import { Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/LinkPreview/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface LinkPreviewProps extends HasClassName, HasTheme {
+  /** Description. */
+  description?: string;
+  /** Link URL. */
+  link: string;
+  /** Custom component for the link (can be used to inject a router Link). */
+  linkAs?: 'a' | any;
+  /** Props to pass to the link (minus those already set by the LinkPreview props). */
+  linkProps?: GenericProps;
+  /** Size variant. */
+  size?: Extract<Size, 'regular' | 'big'>;
+  /** Thumbnail for the link preview. */
+  thumbnailProps?: GenericProps;
+  /** Title. */
+  title?: string;
+  /** Ref forwarded to the root article element. */
+  ref?: CommonRef;
+  /** Heading element used to wrap the title. */
+  TitleHeading: any;
+  /** Link component injected by the framework wrapper. */
+  Link: any;
+  /** Thumbnail component injected by the framework wrapper. */
+  Thumbnail: any;
+}
+type LinkPreviewPropsToOverride = 'linkProps' | 'TitleHeading' | 'Link' | 'Thumbnail' | 'thumbnailProps';
+//#endregion
+export { LinkPreviewProps, LinkPreviewPropsToOverride };

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

@@ -0,0 +1,94 @@
+import { AspectRatio, ColorPalette, ColorVariant, Size, Theme } 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/LinkPreview/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "LinkPreview";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-link-preview";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	size: Size.regular,
+	titleHeading: "h2"
+};
+/**
+* LinkPreview component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var LinkPreview = (props) => {
+	const { className, description, link, linkAs, linkProps, size = DEFAULT_PROPS.size, theme, thumbnailProps, ref, title, TitleHeading, Link, Thumbnail, ...forwardedProps } = props;
+	const adjustedSize = size === Size.big && thumbnailProps ? Size.big : Size.regular;
+	return /* @__PURE__ */ jsx("article", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`size-${adjustedSize}`]: Boolean(adjustedSize),
+			[`theme-${theme}`]: Boolean(theme)
+		})),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: element("wrapper"),
+			children: [thumbnailProps && /* @__PURE__ */ jsx("div", {
+				className: element("thumbnail"),
+				children: /* @__PURE__ */ jsx(Thumbnail, {
+					...thumbnailProps,
+					linkAs,
+					linkProps: {
+						...linkProps,
+						href: link,
+						target: "_blank",
+						tabIndex: -1
+					},
+					aspectRatio: AspectRatio.free,
+					fillHeight: true
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: element("container"),
+				children: [
+					title && /* @__PURE__ */ jsx(TitleHeading, {
+						className: element("title"),
+						children: /* @__PURE__ */ jsx(Link, {
+							...linkProps,
+							linkAs,
+							target: "_blank",
+							href: link,
+							color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
+							colorVariant: ColorVariant.N,
+							children: title
+						})
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: element("description"),
+						children: description
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: element("link"),
+						children: /* @__PURE__ */ jsx(Link, {
+							...linkProps,
+							linkAs,
+							className: import_classnames.default(element("link"), linkProps?.className),
+							target: "_blank",
+							href: link,
+							color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
+							colorVariant: ColorVariant.N,
+							tabIndex: title ? "-1" : void 0,
+							children: link
+						})
+					})
+				]
+			})]
+		})
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, LinkPreview };

package/_internal/packages/lumx-core/src/js/components/List/ListDivider.d.ts

@@ -0,0 +1,12 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/List/ListDivider.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ListDividerProps extends HasClassName {
+  /** ref to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { ListDividerProps };

package/_internal/packages/lumx-core/src/js/components/List/ListDivider.js

@@ -0,0 +1,36 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/List/ListDivider.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ListDivider";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-list-divider";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* ListDivider component.
+* Purely decorative, consider a `ListSection` with label for a better list structure.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ListDivider = (props) => {
+	const { className, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		role: "none",
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME)
+	});
+};
+ListDivider.displayName = COMPONENT_NAME;
+ListDivider.className = CLASSNAME;
+ListDivider.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ListDivider };

package/_internal/packages/lumx-core/src/js/components/List/ListItem.d.ts

@@ -0,0 +1,41 @@
+import { Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+//#region ../lumx-core/src/js/components/List/ListItem.d.ts
+/** ListItem size variants. */
+type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+interface ListItemProps extends HasClassName, HasAriaDisabled {
+  /** A component to be rendered after the content. */
+  after?: JSXElement;
+  /** A component to be rendered before the content. */
+  before?: JSXElement;
+  /** Content. */
+  children?: JSXElement;
+  /** Whether the list item should be highlighted or not. */
+  isHighlighted?: boolean;
+  /** Whether the component is selected or not. */
+  isSelected?: boolean;
+  /** Whether link/button is disabled or not. */
+  isDisabled?: boolean;
+  /** Custom component for the link (can be used to inject router Link). */
+  linkAs?: 'a' | any;
+  /** Props that will be passed on to the Link. */
+  linkProps?: GenericProps;
+  /** Reference to the link element. */
+  linkRef?: CommonRef;
+  /** Size variant. */
+  size?: ListItemSize;
+  /** ref to the root <li> element */
+  ref?: CommonRef;
+  /** On click callback. */
+  handleClick?: (event: any) => void;
+}
+type ListItemPropsToOverride = 'after' | 'before' | 'children' | 'handleClick';
+//#endregion
+export { ListItemProps, ListItemPropsToOverride, ListItemSize };

package/_internal/packages/lumx-core/src/js/components/List/ListItem.js

@@ -0,0 +1,66 @@
+import { Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/List/ListItem.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ListItem";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-list-item";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { size: Size.regular };
+/**
+* ListItem component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ListItem = (props) => {
+	const { after, before, children, className, isHighlighted, isSelected, isDisabled, "aria-disabled": ariaDisabled, linkAs, linkProps = {}, linkRef, handleClick, size = DEFAULT_PROPS.size, ref, ...forwardedProps } = props;
+	const clickable = !!linkAs || linkProps?.href || handleClick;
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({ [`size-${size}`]: Boolean(size) })),
+		children: RawClickable({
+			as: clickable ? linkAs || (linkProps.href ? "a" : "button") : "div",
+			isDisabled,
+			"aria-disabled": ariaDisabled,
+			...linkProps,
+			className: element(clickable ? "link" : "wrapper", {
+				"is-highlighted": isHighlighted,
+				"is-selected": isSelected,
+				"is-disabled": isDisabled || ariaDisabled === "true"
+			}),
+			handleClick,
+			ref: linkRef,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				before && /* @__PURE__ */ jsx("div", {
+					className: element("before"),
+					children: before
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: element("content"),
+					children
+				}),
+				after && /* @__PURE__ */ jsx("div", {
+					className: element("after"),
+					children: after
+				})
+			] })
+		})
+	});
+};
+ListItem.displayName = COMPONENT_NAME;
+ListItem.className = CLASSNAME;
+ListItem.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ListItem };

package/_internal/packages/lumx-core/src/js/components/List/ListItemAction.d.ts

@@ -0,0 +1,10 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { ClickableElement, RawClickableProps } from "../RawClickable/index.js";
+
+//#region ../lumx-core/src/js/components/List/ListItemAction.d.ts
+/**
+ * ListItemAction props.
+ */
+type ListItemActionProps<E extends ClickableElement = 'button'> = RawClickableProps<E> & HasClassName;
+//#endregion
+export { ListItemActionProps };