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

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

@@ -0,0 +1,59 @@
+//#region ../lumx-core/src/js/components/Combobox/types.d.ts
+/** Map of combobox event names to their payload types. */
+interface ComboboxEventMap {
+  /** Fired when the combobox open state changes. Payload: whether the combobox is open. */
+  open: boolean;
+  /** Fired when the active descendant changes (visual focus). Payload: the option id or null. */
+  activeDescendantChange: string | null;
+  /**
+   * Fired when the visible option count changes.
+   * Payload: the number of visible options plus the current input value.
+   */
+  optionsChange: {
+    optionsLength: number;
+    inputValue?: string;
+  } | undefined;
+  /**
+   * Fired immediately when the aggregate loading state changes (skeleton count transitions
+   * between 0 and >0). Used for empty suppression in ComboboxState and for aria-busy on the listbox.
+   */
+  loadingChange: boolean;
+  /**
+   * Fired after a 500ms debounce when loading persists, or immediately when loading ends.
+   * Used to control the loading message text in the live region (ComboboxState).
+   */
+  loadingAnnouncement: boolean;
+}
+/** Callbacks provided by the consumer (React/Vue) to react to combobox state changes. */
+interface ComboboxCallbacks {
+  /** Called when an option is selected (click or keyboard). */
+  onSelect?(option: {
+    value: string;
+  }): void;
+}
+/**
+ * Behavioral options for input-mode combobox (autocomplete/filter pattern).
+ * Shared between the core JSX template props (`ComboboxInputProps`) and the
+ * runtime controller options (`SetupComboboxInputOptions`).
+ */
+interface ComboboxInputOptions {
+  /**
+   * Controls how the combobox filters options as the user types.
+   *
+   * - `'auto'` (default) — Options are automatically filtered client-side.
+   * - `'manual'` — Filtering is the consumer's responsibility.
+   * - `'off'` — Like `'manual'`, but the input is rendered as `readOnly`
+   *   and `openOnFocus` defaults to `true`.
+   */
+  filter?: 'auto' | 'manual' | 'off';
+  /**
+   * When true, the combobox opens automatically when the input receives focus.
+   * When false (default, unless `filter` is `'off'`), the combobox only opens
+   * on click, typing, or keyboard navigation.
+   *
+   * @default false (true when filter is 'off')
+   */
+  openOnFocus?: boolean;
+}
+//#endregion
+export { ComboboxCallbacks, ComboboxEventMap, ComboboxInputOptions };

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

@@ -0,0 +1,63 @@
+//#region ../lumx-core/src/js/components/Combobox/utils.ts
+/**
+* Get the value for a combobox option element.
+* Uses `data-value` when set; falls back to the element's trimmed `textContent`.
+*
+* This is the *selection* value , which may differ from the visible label
+*/
+function getOptionValue(option) {
+	if (option.dataset.value !== void 0) return option.dataset.value;
+	return option.textContent?.trim() ?? "";
+}
+/**
+* Get the visible label for a combobox option element (its trimmed `textContent`).
+*
+* Used for typeahead matching: the user types the characters they see, which is the
+* option's label — not its `data-value` (which can be an unrelated id).
+*/
+function getOptionLabel(option) {
+	return option.textContent?.trim() ?? "";
+}
+/** Returns true when an option carries aria-disabled="true". */
+function isOptionDisabled(option) {
+	return option.getAttribute("aria-disabled") === "true";
+}
+/** Returns true when the cell is NOT the first gridcell in its row (i.e., it's an action cell). */
+function isActionCell(cell) {
+	const row = cell.closest("[role=\"row\"]");
+	if (!row) return false;
+	return row.querySelector("[role=\"gridcell\"]") !== cell;
+}
+var isSelected = (el) => el.getAttribute("aria-selected") === "true";
+/**
+* Compute the current state of a section and notify when it changed.
+*
+* Section state:
+* - `hidden`: true when the section has registered options but all are filtered out.
+* - `aria-hidden`: true when the section has no registered options at all (skeleton-only).
+*
+* At most one of `hidden` / `aria-hidden` is true at a time.
+*/
+function notifySection(sectionElement, sectionRegistrations, optionRegistrations, force) {
+	const reg = sectionRegistrations.get(sectionElement);
+	if (!reg) return;
+	let hasOptions = false;
+	let hasVisibleOption = false;
+	for (const [optionElement, optionReg] of optionRegistrations) if (sectionElement.contains(optionElement)) {
+		hasOptions = true;
+		if (!optionReg.lastFiltered) {
+			hasVisibleOption = true;
+			break;
+		}
+	}
+	const state = {
+		hidden: hasOptions && !hasVisibleOption,
+		"aria-hidden": !hasOptions
+	};
+	if (force || state.hidden !== reg.last.hidden || state["aria-hidden"] !== reg.last["aria-hidden"]) {
+		reg.last = state;
+		reg.callback(state);
+	}
+}
+//#endregion
+export { getOptionLabel, getOptionValue, isActionCell, isOptionDisabled, isSelected, notifySection };

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

@@ -0,0 +1,20 @@
+import { Size } from "../../constants/enums/index.js";
+import { JSXElement } from "../../types/JSXElement.js";
+//#region ../lumx-core/src/js/components/Dialog/index.d.ts
+interface BaseDialogProps {
+  /** Footer content. */
+  footer?: JSXElement;
+  /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
+  forceFooterDivider?: boolean;
+  /** Header content. */
+  header?: JSXElement;
+  /** Whether the divider between the dialog content and the header is always displayed (instead of showing it on scroll). */
+  forceHeaderDivider?: boolean;
+  /** Whether the indefinite progress indicator over the dialog content is displayed or not. */
+  isLoading?: boolean;
+  /** Whether the component is open or not. */
+  isOpen?: boolean;
+}
+type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+//#endregion
+export { BaseDialogProps, DialogSizes };

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

@@ -0,0 +1,93 @@
+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/Dialog/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Dialog";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-dialog";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { size: Size.big };
+/**
+* Dialog component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Dialog = (props) => {
+	const { className, ref, header, forceFooterDivider, forceHeaderDivider, footer, isLoading, isOpen, handleClose, contentRef, size = DEFAULT_PROPS.size, zIndex, dialogProps, headerChildContent, isVisible, Portal, HeadingLevelProvider, ThemeProvider, ClickAwayProvider, shouldPreventCloseOnClickAway, clickAwayRefs, rootRef, wrapperRef, hasTopIntersection, headerChildProps, setSentinelTop, content, setSentinelBottom, footerChildContent, footerChildProps, ProgressCircular, hasBottomIntersection, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			"is-hidden": !isOpen,
+			"is-loading": isLoading,
+			"is-shown": isOpen || isVisible,
+			[`size-${size}`]: Boolean(size)
+		})),
+		style: { zIndex },
+		children: [/* @__PURE__ */ jsx("div", { className: element("overlay") }), /* @__PURE__ */ jsx(HeadingLevelProvider, {
+			level: 2,
+			children: /* @__PURE__ */ jsx(ThemeProvider, {
+				value: void 0,
+				children: /* @__PURE__ */ jsx("div", {
+					className: element("container"),
+					role: "dialog",
+					"aria-modal": "true",
+					...dialogProps,
+					children: /* @__PURE__ */ jsx(ClickAwayProvider, {
+						callback: !shouldPreventCloseOnClickAway && handleClose,
+						childrenRefs: clickAwayRefs,
+						parentRef: rootRef,
+						children: /* @__PURE__ */ jsxs("section", {
+							className: element("wrapper"),
+							ref: wrapperRef,
+							children: [
+								(header || headerChildContent) && /* @__PURE__ */ jsxs("header", {
+									...headerChildProps,
+									className: import_classnames.default(element("header", { "has-divider": Boolean(forceHeaderDivider || hasTopIntersection) }), headerChildProps?.className),
+									children: [header, headerChildContent]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									ref: contentRef,
+									className: element("content"),
+									children: [
+										/* @__PURE__ */ jsx("div", {
+											className: element("sentinel", { top: true }),
+											ref: setSentinelTop
+										}),
+										content,
+										/* @__PURE__ */ jsx("div", {
+											className: element("sentinel", { bottom: true }),
+											ref: setSentinelBottom
+										})
+									]
+								}),
+								(footer || footerChildContent) && /* @__PURE__ */ jsxs("footer", {
+									...footerChildProps,
+									className: import_classnames.default(element("footer", { "has-divider": Boolean(forceFooterDivider || hasBottomIntersection) }), footerChildProps?.className),
+									children: [footer, footerChildContent]
+								}),
+								isLoading && /* @__PURE__ */ jsx("div", {
+									className: element("progress-overlay"),
+									children: /* @__PURE__ */ jsx(ProgressCircular, {})
+								})
+							]
+						})
+					})
+				})
+			})
+		})]
+	}) });
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, Dialog };

package/_internal/packages/lumx-core/src/js/components/Divider/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/Divider/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DividerProps extends HasTheme, HasClassName {
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { DividerProps };

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

@@ -0,0 +1,29 @@
+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/Divider/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Divider";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-divider";
+var { block } = bem(CLASSNAME);
+/**
+* Divider component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Divider = (props) => {
+	const { className, theme, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("hr", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({ [`theme-${theme}`]: Boolean(theme) }))
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, Divider };

package/_internal/packages/lumx-core/src/js/components/DragHandle/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/DragHandle/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DragHandleProps extends HasTheme, HasClassName {
+  /** Reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { DragHandleProps };

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

@@ -0,0 +1,37 @@
+import { ColorPalette, Size, Theme } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Icon } from "../Icon/index.js";
+import { jsx } from "react/jsx-runtime";
+import { mdiDragVertical } from "@lumx/icons/esm/drag-vertical.js";
+//#region ../lumx-core/src/js/components/DragHandle/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "DragHandle";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-drag-handle";
+var { block } = bem(CLASSNAME);
+/**
+* DragHandle component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var DragHandle = (props) => {
+	const { className, theme, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block({ [`theme-${theme}`]: Boolean(theme) })),
+		children: Icon({
+			icon: mdiDragVertical,
+			color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
+			size: Size.xs
+		})
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DragHandle };

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

@@ -0,0 +1,51 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { HasCloseMode } from "../../types/HasCloseMode.js";
+import { HasTheme } from "../../types/HasTheme.js";
+import { GenericProps } from "../../types/GenericProps.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/ExpansionPanel/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ExpansionPanelProps extends HasClassName, HasCloseMode, HasTheme {
+  /** Whether the expansion panel has a background. */
+  hasBackground?: boolean;
+  /** Whether the header has a divider. */
+  hasHeaderDivider?: boolean;
+  /** Whether the component is open or not. */
+  isOpen?: boolean;
+  /** Label text (overwritten if a `<header>` is provided in the children). */
+  label?: string;
+  /** On open callback. */
+  handleOpen?: (event: any) => void;
+  /** On close callback. */
+  handleClose?: (event: any) => void;
+  /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
+  toggleButtonProps: any;
+  /** On toggle open or close callback. */
+  handleToggleOpen?(shouldOpen: boolean, event: any): void;
+  /** Children */
+  children?: JSXElement;
+  /** Ref forwarded to the root `<section>` element. */
+  ref?: CommonRef;
+  /** Ref forwarded to the collapsible wrapper `<div>`. */
+  wrapperRef?: CommonRef;
+  /** Props spread onto the header content `<div>` (e.g. `aria-*`, `data-*`). */
+  headerProps: GenericProps;
+  /** Content rendered inside the header content area. */
+  headerContent?: JSXElement;
+  /** Optional drag handle element rendered at the start of the header. */
+  dragHandle?: JSXElement;
+  /** Content rendered inside the collapsible content area. */
+  content?: JSXElement;
+  /** Optional footer element rendered below the content. */
+  footer?: JSXElement;
+  /** IconButton component injected by the framework wrapper (React or Vue). */
+  IconButton: any;
+  /** Whether the children should remain mounted (visible in the DOM) while the panel is closed. */
+  isChildrenVisible?: boolean;
+}
+type ExpansionPanelPropsToOverride = 'handleOpen' | 'handleClose' | 'toggleButtonProps' | 'handleToggleOpen' | 'wrapperRef' | 'headerProps' | 'headerContent' | 'dragHandle' | 'content' | 'IconButton' | 'isChildrenVisible' | 'footer';
+//#endregion
+export { ExpansionPanelProps, ExpansionPanelPropsToOverride };

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

@@ -0,0 +1,92 @@
+import { ColorPalette, Emphasis, 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";
+import isEmpty from "lodash/isEmpty.js";
+import { mdiChevronUp } from "@lumx/icons/esm/chevron-up.js";
+import { mdiChevronDown } from "@lumx/icons/esm/chevron-down.js";
+//#region ../lumx-core/src/js/components/ExpansionPanel/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ExpansionPanel";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-expansion-panel";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { closeMode: "unmount" };
+/**
+* ExpansionPanel component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ExpansionPanel = (props) => {
+	const { className, children: anyChildren, hasBackground, ref, hasHeaderDivider, isOpen, label, handleClose, handleOpen, handleToggleOpen, theme, toggleButtonProps, headerProps, headerContent, dragHandle, wrapperRef, content, isChildrenVisible, IconButton, footer, closeMode, ...forwardedProps } = props;
+	const toggleOpen = (event) => {
+		const shouldOpen = !isOpen;
+		if (handleOpen && shouldOpen) handleOpen(event);
+		if (handleClose && !shouldOpen) handleClose(event);
+		if (handleToggleOpen) handleToggleOpen(shouldOpen, event);
+	};
+	const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+	const rootClassName = import_classnames.default(className, block({
+		"has-background": hasBackground,
+		"has-header": Boolean(!isEmpty(headerProps.children)),
+		"has-header-divider": hasHeaderDivider,
+		"is-close": !isOpen,
+		"is-draggable": Boolean(dragHandle),
+		"is-open": isOpen,
+		[`theme-${theme}`]: Boolean(theme)
+	}));
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		...forwardedProps,
+		className: rootClassName,
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: element("header"),
+			onClick: toggleOpen,
+			children: [
+				dragHandle && /* @__PURE__ */ jsx("div", {
+					className: element("header-drag"),
+					children: dragHandle
+				}),
+				/* @__PURE__ */ jsx("div", {
+					...headerProps,
+					className: element("header-content"),
+					children: headerContent
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: element("header-toggle"),
+					children: /* @__PURE__ */ jsx(IconButton, {
+						...toggleButtonProps,
+						color,
+						emphasis: Emphasis.low,
+						icon: isOpen ? mdiChevronUp : mdiChevronDown,
+						"aria-expanded": isOpen || "false"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: element("wrapper"),
+			ref: wrapperRef,
+			children: (isOpen || isChildrenVisible) && /* @__PURE__ */ jsxs("div", {
+				className: element("container"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: element("content"),
+					children: content
+				}), footer && /* @__PURE__ */ jsx("div", {
+					className: element("footer"),
+					children: footer
+				})]
+			})
+		})]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ExpansionPanel, element };

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

@@ -0,0 +1,24 @@
+import { ColorPalette } 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";
+import { TextProps } from "../Text/index.js";
+
+//#region ../lumx-core/src/js/components/Flag/index.d.ts
+interface FlagProps extends HasClassName, HasTheme {
+  /** Color of the component. */
+  color?: ColorPalette;
+  /** Icon to use before the label. */
+  icon?: string;
+  /** Text label of the flag. */
+  children: JSXElement;
+  /** Enable text truncate on overflow */
+  truncate?: boolean;
+  /** ref to the root element */
+  ref?: CommonRef;
+  /** Text component to use for rendering the label */
+  Text: (props: TextProps) => any;
+}
+//#endregion
+export { FlagProps };

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

@@ -0,0 +1,41 @@
+import { ColorPalette, Size, Theme } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Icon } from "../Icon/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Flag/index.tsx
+var COMPONENT_NAME = "Flag";
+var CLASSNAME = "lumx-flag";
+var DEFAULT_PROPS = {};
+var { block, element } = bem(CLASSNAME);
+/**
+* Flag component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var Flag = (props) => {
+	const { children, icon, color, className, theme, truncate, Text, ...forwardedProps } = props;
+	const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+	const isTruncated = !!truncate;
+	return /* @__PURE__ */ jsxs("div", {
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`color-${flagColor}`]: Boolean(flagColor),
+			"is-truncated": isTruncated
+		})),
+		children: [icon && Icon({
+			icon,
+			size: Size.xxs,
+			className: element("icon")
+		}), /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			truncate: !!truncate,
+			typography: "overline",
+			className: element("label"),
+			children
+		})]
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, Flag };

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

@@ -0,0 +1,34 @@
+import { Orientation } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, MarginAutoAlignment } from "./types.js";
+
+//#region ../lumx-core/src/js/components/FlexBox/index.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface FlexBoxProps extends HasClassName {
+  /** Children elements. */
+  children?: JSXElement;
+  /** Whether the "content filling space" is enabled or not. */
+  fillSpace?: boolean;
+  /** Gap space between flexbox items. */
+  gap?: GapSize;
+  /** Flex horizontal alignment. */
+  hAlign?: FlexVerticalAlignment;
+  /** Whether the "auto margin" is enabled all around or not. */
+  marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
+  /** Whether the "content shrink" is disabled or not. */
+  noShrink?: boolean;
+  /** Flex direction. */
+  orientation?: Orientation;
+  /** Flex vertical alignment. */
+  vAlign?: FlexHorizontalAlignment;
+  /** Whether the "flex wrap" is enabled or not. */
+  wrap?: boolean;
+  /** reference to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { FlexBoxProps };

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

@@ -0,0 +1,39 @@
+import { Orientation } from "../../constants/enums/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import castArray from "lodash/castArray.js";
+//#region ../lumx-core/src/js/components/FlexBox/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "FlexBox";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-flex-box";
+var { block } = bem(CLASSNAME);
+/**
+* Get FlexBox component props (className computation).
+*
+* @param  props Component props.
+* @return Computed props with className.
+*/
+function getFlexBoxProps(props) {
+	const { className, fillSpace, gap, hAlign, marginAuto, noShrink, vAlign, wrap, orientation, ...forwardedProps } = props;
+	const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
+	return {
+		...forwardedProps,
+		className: import_classnames.default(className, block({
+			[`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
+			[`v-align-${vAlign}`]: Boolean(vAlign),
+			[`h-align-${hAlign}`]: Boolean(hAlign),
+			[`gap-${gap}`]: Boolean(gap),
+			wrap: Boolean(wrap),
+			"fill-space": fillSpace,
+			"no-shrink": noShrink,
+			...Object.fromEntries(castArray(marginAuto).filter(Boolean).map((align) => [`margin-auto-${align}`, true]))
+		}))
+	};
+}
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, getFlexBoxProps };

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

@@ -0,0 +1,9 @@
+import { Alignment, HorizontalAlignment, Size, VerticalAlignment } from "../../constants/enums/index.js";
+//#region ../lumx-core/src/js/components/FlexBox/types.d.ts
+type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
+type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
+type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
+type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
+type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
+//#endregion
+export { FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, MarginAutoAlignment };

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

@@ -0,0 +1,22 @@
+import { ValueOf } from "../../types/ValueOf.js";
+//#region ../lumx-core/src/js/components/GenericBlock/constants.d.ts
+/**
+ * Accepted gap sizes for the generic block.
+ */
+declare const GenericBlockGapSize: Pick<{
+  readonly xxs: "xxs";
+  readonly xs: "xs";
+  readonly s: "s";
+  readonly m: "m";
+  readonly l: "l";
+  readonly xl: "xl";
+  readonly xxl: "xxl";
+  readonly tiny: "tiny";
+  readonly regular: "regular";
+  readonly medium: "medium";
+  readonly big: "big";
+  readonly huge: "huge";
+}, "big" | "medium" | "tiny" | "regular" | "huge">;
+type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
+//#endregion
+export { GenericBlockGapSize };