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

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

@@ -0,0 +1,15 @@
+import { __toESM } from "../../../../../../_virtual/_rolldown/runtime.js";
+import { Size } from "../../constants/enums/index.js";
+import { require_pick } from "../../../../../../node_modules/lodash/pick.js";
+/**
+* Accepted gap sizes for the generic block.
+*/
+var GenericBlockGapSize = (0, (/* @__PURE__ */ __toESM(require_pick(), 1)).default)(Size, [
+	"tiny",
+	"regular",
+	"medium",
+	"big",
+	"huge"
+]);
+//#endregion
+export { GenericBlockGapSize };

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

@@ -0,0 +1,60 @@
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { FlexBoxProps } from "../FlexBox/index.js";
+import { GenericBlockGapSize } from "./constants.js";
+
+//#region ../lumx-core/src/js/components/GenericBlock/index.d.ts
+interface GenericBlockProps extends FlexBoxProps {
+  /**
+   * Component to use as visual element.
+   */
+  figure?: JSXElement;
+  /**
+   * Main content.
+   */
+  content?: JSXElement;
+  /**
+   * Actions to set after the main content.
+   */
+  actions?: JSXElement;
+  /**
+   * Orientation of the 3 sections
+   */
+  orientation?: FlexBoxProps['orientation'];
+  /**
+   * Horizontal alignment.
+   */
+  horizontalAlign?: FlexBoxProps['hAlign'];
+  /**
+   * Vertical alignment.
+   */
+  verticalAlign?: FlexBoxProps['vAlign'];
+  /**
+   * The props to forward to the content.
+   * By default, the content will have the same alignment as wrapper.
+   */
+  contentProps?: Omit<FlexBoxProps, 'children'>;
+  /**
+   * props to forward to the actions element.
+   */
+  actionsProps?: Omit<FlexBoxProps, 'children'>;
+  /**
+   * props to forward to the figure element.
+   */
+  figureProps?: Omit<FlexBoxProps, 'children'>;
+  /**
+   * FlexBox component
+   */
+  FlexBox: (props: FlexBoxProps) => any;
+  /**
+   * Gap space between sections.
+   */
+  gap?: GenericBlockGapSize;
+  /**
+   * reference to the root element
+   */
+  ref?: CommonRef;
+}
+type GenericBlockPropsToOverride = 'FlexBox' | 'content';
+//#endregion
+export { GenericBlockProps, GenericBlockPropsToOverride };

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

@@ -0,0 +1,45 @@
+import { Orientation, Size } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/GenericBlock/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var { block, element } = bem("lumx-generic-block");
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	gap: Size.big,
+	orientation: Orientation.horizontal
+};
+/**
+* The GenericBlock is a layout component made of 3 sections that can be
+* displayed either horizontally of vertically with the same gap between each section.
+*
+* The sections are:
+* - `Figure` => A visual element to display before the main content.
+* - `Content` => The main content displayed
+* - `Actions` => One or more actions to set after the element.
+*
+* @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
+*/
+var GenericBlock = (props) => {
+	const { className, figure, figureProps, children, actions, actionsProps, gap = DEFAULT_PROPS.gap, ref, content, orientation = DEFAULT_PROPS.orientation, contentProps, FlexBox, ...forwardedProps } = props;
+	return createVNode(FlexBox, mergeProps({
+		"ref": ref,
+		"className": import_classnames.default(className, block()),
+		"gap": gap,
+		"orientation": orientation
+	}, forwardedProps), { default: () => [
+		figure && createVNode(FlexBox, mergeProps(figureProps, { "className": import_classnames.default(figureProps?.className, element("figure")) }), _isSlot(figure) ? figure : { default: () => [figure] }),
+		content && createVNode(FlexBox, mergeProps({
+			"orientation": Orientation.vertical,
+			"fillSpace": true
+		}, contentProps, { "className": import_classnames.default(contentProps?.className, element("content")) }), _isSlot(content) ? content : { default: () => [content] }),
+		actions && createVNode(FlexBox, mergeProps(actionsProps, { "className": import_classnames.default(actionsProps?.className, element("actions")) }), _isSlot(actions) ? actions : { default: () => [actions] })
+	] });
+};
+//#endregion
+export { GenericBlock };

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

@@ -0,0 +1,27 @@
+import { Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/GridColumn/GridColumn.d.ts
+type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+interface GridColumnProps extends HasClassName {
+  /** Customize the root element. */
+  as?: any;
+  /** Children elements. */
+  children?: JSXElement;
+  /** Space between columns and rows. */
+  gap?: GridColumnGapSize;
+  /** Ideal number of columns. */
+  maxColumns?: number;
+  /** Minimum width for each item, reduce the number of column if there is not enough space. */
+  itemMinWidth?: number;
+  /** Custom styles. */
+  style?: any;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { GridColumnGapSize, GridColumnProps };

package/_internal/packages/lumx-core/src/js/components/GridColumn/GridColumn.js

@@ -0,0 +1,50 @@
+import { __toESM } from "../../../../../../_virtual/_rolldown/runtime.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { require_isInteger } from "../../../../../../node_modules/lodash/isInteger.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/GridColumn/GridColumn.tsx
+var import_isInteger = /* @__PURE__ */ __toESM(require_isInteger(), 1);
+/**
+* Defines the props of the component.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "GridColumn";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-grid-column";
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* The GridColumn is a layout component that can display children in a grid
+* with custom display properties. It also comes with a responsive design,
+* with a number of column that reduce when there is not enough space for each item.
+*
+* @param props Component props.
+* @return JSX element.
+*/
+var GridColumn = (props) => {
+	const { as: Component = "div", gap, maxColumns, itemMinWidth, children, className, style = {}, ref, ...forwardedProps } = props;
+	return createVNode(Component, mergeProps(forwardedProps, {
+		"ref": ref,
+		"className": import_classnames.default(className, CLASSNAME),
+		"style": {
+			...style,
+			["--lumx-grid-column-item-min-width"]: (0, import_isInteger.default)(itemMinWidth) && `${itemMinWidth}px`,
+			["--lumx-grid-column-columns"]: maxColumns,
+			["--lumx-grid-column-gap"]: gap && `var(--lumx-spacing-unit-${gap})`
+		}
+	}), _isSlot(children) ? children : { default: () => [children] });
+};
+GridColumn.displayName = COMPONENT_NAME;
+GridColumn.className = CLASSNAME;
+GridColumn.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, GridColumn };

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

@@ -0,0 +1 @@
+import { GridColumnGapSize, GridColumnProps } from "./GridColumn.js";

package/_internal/packages/lumx-core/src/js/components/Heading/constants.d.ts

@@ -0,0 +1,10 @@
+import { HeadingElement } from "../../types/HeadingElement.js";
+//#region ../lumx-core/src/js/components/Heading/constants.d.ts
+interface HeadingLevelContext {
+  /** The current level */
+  level: number;
+  /** The heading element matching the current level */
+  headingElement: HeadingElement;
+}
+//#endregion
+export { HeadingLevelContext };

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

@@ -0,0 +1,19 @@
+import { Typography } from "../../constants/enums/index.js";
+//#region ../lumx-core/src/js/components/Heading/constants.ts
+/**
+* Typography to use by default depending on the heading level.
+*/
+var DEFAULT_TYPOGRAPHY_BY_LEVEL = {
+	h1: Typography.display1,
+	h2: Typography.headline,
+	h3: Typography.title,
+	h4: Typography.subtitle2,
+	h5: Typography.subtitle1,
+	h6: Typography.body2
+};
+var defaultContext = {
+	level: 1,
+	headingElement: "h1"
+};
+//#endregion
+export { DEFAULT_TYPOGRAPHY_BY_LEVEL, defaultContext };

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

@@ -0,0 +1,14 @@
+import { HeadingElement } from "../../types/HeadingElement.js";
+import { TextProps } from "../Text/index.js";
+//#region ../lumx-core/src/js/components/Heading/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface HeadingProps extends Partial<TextProps> {
+  /**
+   * Display a specific heading level instead of the one provided by parent context provider.
+   */
+  as?: HeadingElement;
+}
+//#endregion
+export { HeadingProps };

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

@@ -0,0 +1,26 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { DEFAULT_TYPOGRAPHY_BY_LEVEL } from "./constants.js";
+//#region ../lumx-core/src/js/components/Heading/index.ts
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-heading";
+/**
+* Get Heading component common props
+*
+* @param props                 Component props.
+* @param contextHeadingElement Heading element from context.
+* @return Common Props
+*/
+var getHeadingProps = (props, contextHeadingElement) => {
+	const { as, className, typography, ...otherProps } = props;
+	const computedHeadingElement = as || contextHeadingElement || "h1";
+	return {
+		...otherProps,
+		as: computedHeadingElement,
+		className: import_classnames.default(className, CLASSNAME),
+		typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
+	};
+};
+//#endregion
+export { getHeadingProps };

package/_internal/packages/lumx-core/src/js/components/Heading/utils.js

@@ -0,0 +1,14 @@
+//#region ../lumx-core/src/js/components/Heading/utils.ts
+/**
+* Computes the next heading level based on the optional prop level or the parent context level.
+*
+* @param levelProp - The explicit level provided via props (optional).
+* @param parentLevel - The level from the parent context.
+* @returns The calculated heading level, clamped to the maximum allowed level.
+*/
+var computeHeadingLevel = (levelProp, parentLevel) => {
+	const nextLevel = levelProp || parentLevel + 1;
+	return nextLevel > 6 ? 6 : nextLevel;
+};
+//#endregion
+export { computeHeadingLevel };

package/_internal/packages/lumx-core/src/js/components/Icon/constants.d.ts

@@ -0,0 +1,4 @@
+//#region ../lumx-core/src/js/components/Icon/constants.d.ts
+declare const ICON_SIZES: ("xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl")[];
+//#endregion
+export { ICON_SIZES };

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

@@ -0,0 +1,34 @@
+import { ColorVariant, ColorWithVariants } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { ICON_SIZES } from "./constants.js";
+
+//#region ../lumx-core/src/js/components/Icon/index.d.ts
+type IconSizes = (typeof ICON_SIZES)[number];
+/**
+ * Defines the props of the component.
+ */
+interface IconProps extends HasClassName, HasTheme {
+  /** Color variant. */
+  color?: ColorWithVariants;
+  /** Lightened or darkened variant of the selected icon color. */
+  colorVariant?: ColorVariant;
+  /** Whether the icon has a shape. */
+  hasShape?: boolean;
+  /**
+   * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+   * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+   */
+  icon: string;
+  /** Size variant. */
+  size?: IconSizes;
+  /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+  alt?: string;
+  /** Vertical alignment of the icon (only applies for icons nested in Text/Heading). */
+  verticalAlign?: null | 'middle';
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { IconProps, IconSizes };

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

@@ -0,0 +1,63 @@
+import { ColorPalette, Size, Theme } from "../../constants/enums/index.js";
+import { resolveColorWithVariants } from "../../utils/_internal/color/resolveColorWithVariants.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+import { mdiAlertCircle } from "@lumx/icons/esm/alert-circle.js";
+//#region ../lumx-core/src/js/components/Icon/index.tsx
+var COMPONENT_NAME = "Icon";
+/**
+* Defines the props of the component.
+*/
+var CLASSNAME = "lumx-icon";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* Icon component.
+*
+* @param  props Component props.
+*/
+var Icon = (props) => {
+	const { className, color: propColor, colorVariant: propColorVariant, hasShape, icon, size, ref, theme, alt, verticalAlign, ...forwardedProps } = props;
+	const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
+	let iconColor = color;
+	if (!iconColor && (hasShape || theme)) iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+	let iconColorVariant = colorVariant;
+	if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) iconColorVariant = "L2";
+	let iconSize = size;
+	if (size && hasShape) {
+		if (size === Size.xxs || size === Size.xs) iconSize = Size.s;
+		else if (size === Size.xxl) iconSize = Size.xl;
+	} else if (hasShape) iconSize = Size.m;
+	return createVNode("i", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({
+		[`color-${iconColor}`]: Boolean(iconColor),
+		[`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
+		"has-shape": hasShape,
+		[`theme-${theme}`]: Boolean(theme),
+		[`size-${iconSize}`]: Boolean(iconSize),
+		"no-shape": !hasShape,
+		"has-dark-layer": Boolean(!hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle),
+		path: true,
+		"vertical-align-middle": verticalAlign === "middle"
+	})) }), [createVNode("svg", {
+		"aria-hidden": alt ? void 0 : "true",
+		"role": alt ? "img" : void 0,
+		"aria-label": alt,
+		"height": "1em",
+		"preserveAspectRatio": "xMidYMid meet",
+		"style": { verticalAlign: verticalAlign ? void 0 : "-0.125em" },
+		"viewBox": "0 0 24 24",
+		"width": "1em"
+	}, [createVNode("path", {
+		"d": icon,
+		"fill": "currentColor"
+	}, null)])]);
+};
+Icon.displayName = COMPONENT_NAME;
+Icon.className = CLASSNAME;
+Icon.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Icon };

package/_internal/packages/lumx-core/src/js/components/ImageBlock/ImageCaption.d.ts

@@ -0,0 +1,19 @@
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+//#region ../lumx-core/src/js/components/ImageBlock/ImageCaption.d.ts
+type ImageCaptionMetadata = {
+  /** Image title to display in the caption. */title?: string; /** Props to pass to the title. */
+  titleProps?: GenericProps; /** Image description. Can be either a string, ReactNode, or sanitized html object. */
+  description?: JSXElement | {
+    __html: string;
+  }; /** Props to pass to the description. */
+  descriptionProps?: GenericProps; /** Tag content. */
+  tags?: JSXElement; /** Caption custom CSS style. */
+  captionStyle?: GenericProps; /** Props to pass to the wrapper FlexBox element. */
+  wrapperProps?: GenericProps; /** FlexBox component injected by the framework wrapper (React or Vue). */
+  FlexBox: any; /** Text component injected by the framework wrapper (React or Vue). */
+  Text: any;
+};
+type ImageCaptionPropsToOverride = 'FlexBox' | 'Text' | 'wrapperProps';
+//#endregion
+export { ImageCaptionMetadata, ImageCaptionPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/ImageBlock/ImageCaption.js

@@ -0,0 +1,52 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, isVNode, mergeProps, resolveDirective, withDirectives } from "vue";
+//#region ../lumx-core/src/js/components/ImageBlock/ImageCaption.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Internal component used to render image captions */
+var ImageCaption = (props) => {
+	const { baseClassName, theme, as = "figcaption", title, titleProps, description, descriptionProps, tags, captionStyle, align, truncate, FlexBox, Text, wrapperProps = {
+		vAlign: align,
+		hAlign: align === "center" ? align : void 0
+	} } = props;
+	if (!title && !description && !tags) return null;
+	const titleColor = { color: theme === "dark" ? "light" : "dark" };
+	const baseColor = {
+		color: theme === "dark" ? "light" : "dark",
+		colorVariant: "L2"
+	};
+	return createVNode(FlexBox, mergeProps({
+		"as": as,
+		"className": import_classnames.default(baseClassName && `${baseClassName}__wrapper`),
+		"style": captionStyle,
+		"orientation": "vertical",
+		"gap": "regular"
+	}, wrapperProps), { default: () => [(title || description) && createVNode(Text, mergeProps({
+		"as": "p",
+		"className": import_classnames.default(baseClassName && `${baseClassName}__caption`),
+		"truncate": truncate
+	}, baseColor), { default: () => [
+		title && createVNode(Text, mergeProps(titleProps, {
+			"as": "span",
+			"className": import_classnames.default(titleProps?.className, baseClassName && `${baseClassName}__title`),
+			"typography": "subtitle1"
+		}, titleColor), _isSlot(title) ? title : { default: () => [title] }),
+		" ",
+		description && (typeof description === "object" && "__html" in description ? createVNode(Text, mergeProps(descriptionProps, {
+			"as": "span",
+			"className": import_classnames.default(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+			"typography": "body1",
+			"dangerouslySetInnerHTML": description
+		}), null) : createVNode(Text, mergeProps(descriptionProps, {
+			"as": "span",
+			"className": import_classnames.default(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+			"typography": "body1"
+		}), _isSlot(description) ? description : { default: () => [description] }))
+	] }), tags && withDirectives(createVNode(FlexBox, {
+		"className": import_classnames.default(baseClassName && `${baseClassName}__tags`),
+		"orientation": "horizontal"
+	}, _isSlot(tags) ? tags : { default: () => [tags] }), [[resolveDirective("align"), align]])] });
+};
+//#endregion
+export { ImageCaption };

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

@@ -0,0 +1,52 @@
+import { HorizontalAlignment, 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 { JSXElement } from "../../types/JSXElement.js";
+import { ValueOf } from "../../types/ValueOf.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { ImageCaptionMetadata, ImageCaptionPropsToOverride } from "./ImageCaption.js";
+
+//#region ../lumx-core/src/js/components/ImageBlock/index.d.ts
+/**
+ * Image block variants.
+ */
+declare const ImageBlockCaptionPosition: {
+  readonly below: "below";
+  readonly over: "over";
+};
+type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;
+/**
+ *  Image block sizes.
+ */
+type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+interface ImageBlockProps extends HasClassName, HasTheme, Omit<ImageCaptionMetadata, ImageCaptionPropsToOverride> {
+  /** Action toolbar content. */
+  actions?: JSXElement;
+  /** Alignment. */
+  align?: HorizontalAlignment;
+  /** Image alternative text. */
+  alt: string;
+  /** Caption position. */
+  captionPosition?: ImageBlockCaptionPosition;
+  /** Whether the image has to fill its container height or not. */
+  fillHeight?: boolean;
+  /** Image URL. */
+  image: string;
+  /** Size variant. */
+  size?: ImageBlockSize;
+  /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
+  thumbnailProps?: GenericProps;
+  /** reference to the root element */
+  ref?: CommonRef;
+  /** component for rendering the thumbnail */
+  Thumbnail: any;
+  /** component for rendering the image caption */
+  ImageCaption: any;
+}
+type ImageBlockPropsToOverride = 'Thumbnail' | 'ImageCaption' | 'thumbnailProps';
+//#endregion
+export { ImageBlockCaptionPosition, ImageBlockProps, ImageBlockPropsToOverride };

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

@@ -0,0 +1,67 @@
+import { Alignment } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/ImageBlock/index.tsx
+/**
+* Image block variants.
+*/
+var ImageBlockCaptionPosition = {
+	below: "below",
+	over: "over"
+};
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-image-block";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	captionPosition: ImageBlockCaptionPosition.below,
+	align: Alignment.left
+};
+/**
+* ImageBlock component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ImageBlock = (props) => {
+	const { actions, align = DEFAULT_PROPS.align, alt, captionPosition = DEFAULT_PROPS.captionPosition, captionStyle, className, description, descriptionProps, fillHeight, image, size, tags, ref, theme, thumbnailProps, title, titleProps, Thumbnail, ImageCaption, ...forwardedProps } = props;
+	return createVNode("figure", mergeProps({ "ref": ref }, forwardedProps, { "className": import_classnames.default(className, block({
+		[`caption-position-${captionPosition}`]: Boolean(captionPosition),
+		[`align-${align}`]: Boolean(align),
+		[`size-${size}`]: Boolean(size),
+		[`theme-${theme}`]: Boolean(theme),
+		"fill-height": fillHeight
+	})) }), [
+		createVNode(Thumbnail, mergeProps(thumbnailProps, {
+			"className": import_classnames.default(element("image"), thumbnailProps?.className),
+			"fillHeight": fillHeight,
+			"align": align,
+			"image": image,
+			"size": size,
+			"theme": theme,
+			"alt": alt || title
+		}), null),
+		createVNode(ImageCaption, {
+			"as": "figcaption",
+			"baseClassName": CLASSNAME,
+			"theme": theme,
+			"title": title,
+			"titleProps": titleProps,
+			"description": description,
+			"descriptionProps": descriptionProps,
+			"tags": tags,
+			"captionStyle": captionStyle,
+			"align": align,
+			"truncate": captionPosition === "over"
+		}, null),
+		actions && createVNode("div", { "className": element("actions") }, [actions])
+	]);
+};
+//#endregion
+export { CLASSNAME, DEFAULT_PROPS, ImageBlock, ImageBlockCaptionPosition };

package/_internal/packages/lumx-core/src/js/components/InlineList/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";
+//#region ../lumx-core/src/js/components/InlineList/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface InlineListProps extends HasClassName {
+  /**
+   * List items to render.
+   */
+  items?: JSXElement[];
+  /**
+   * Text color.
+   */
+  color?: ColorWithVariants;
+  /**
+   * Lightened or darkened variant of the selected color.
+   */
+  colorVariant?: ColorVariant;
+  /**
+   * Typography variant.
+   */
+  typography?: Typography;
+  /**
+   * Activate line wrap on overflow.
+   */
+  wrap?: boolean;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { InlineListProps };