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

package/_internal/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,89 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.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 { PopoverProps } from "../popover/Popover.js";
+//#region src/components/dropdown/Dropdown.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface DropdownProps extends index_d_exports.GenericProps {
+  /**
+   * Reference to the element around which the dropdown is placed.
+   * @see {@link PopoverProps#anchorRef}
+   */
+  anchorRef: PopoverProps['anchorRef'];
+  /** Dropdown content. */
+  children: React.ReactNode;
+  /**
+   * Whether a click anywhere out of the Dropdown would close it or not.
+   * @see {@link PopoverProps#closeOnClickAway}
+   */
+  closeOnClickAway?: boolean;
+  /**
+   * Whether to close the Dropdown when clicking in it or not.
+   */
+  closeOnClick?: boolean;
+  /**
+   * Whether an escape key press would close the Dropdown or not.
+   * @see {@link PopoverProps#closeOnEscape}
+   */
+  closeOnEscape?: boolean;
+  /**
+   * 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 PopoverProps#fitToAnchorWidth}
+   */
+  fitToAnchorWidth?: PopoverProps['fitToAnchorWidth'];
+  /**
+   * Whether the dropdown should shrink to fit within the viewport height or not.
+   * @see {@link PopoverProps#fitWithinViewportHeight}
+   */
+  fitWithinViewportHeight?: boolean;
+  /**
+   * Whether the dropdown should be displayed or not. Useful to control the Dropdown from outside the component.
+   * @see {@link PopoverProps#isOpen}
+   */
+  isOpen: boolean;
+  /**
+   * Offset applied to the Dropdown position.
+   * @see {@link PopoverProps#offset}
+   */
+  offset?: Offset;
+  /**
+   * Preferred Dropdown placement against the anchor element.
+   * @see {@link PopoverProps#placement}
+   */
+  placement?: Placement;
+  /** Whether the focus should be set on the list when the dropdown is open or not. */
+  shouldFocusOnOpen?: boolean;
+  /** Whether the dropdown should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
+  usePortal?: boolean;
+  /** Whether the focus should go back on the anchor when dropdown closes and focus is within. */
+  focusAnchorOnClose?: boolean;
+  /**
+   * Z-axis position.
+   * @see {@link PopoverProps#zIndex}
+   */
+  zIndex?: number;
+  /**
+   * On close callback.
+   * @see {@link PopoverProps#onClose}
+   */
+  onClose?(): void;
+  /** On scroll end callback. */
+  onInfiniteScroll?(): void;
+}
+/**
+ * Dropdown component.
+ *
+ * @deprecated Use `MenuButton` for action-based dropdowns, `SelectButton` for selection-based dropdowns, or `Popover` for lower-level control.
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Dropdown: Comp<DropdownProps, HTMLDivElement>;
+//#endregion
+export { Dropdown, DropdownProps };

package/_internal/components/dropdown/Dropdown.js

@@ -0,0 +1,89 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { isComponent } from "../../utils/type/isComponent.js";
+import { Placement } from "../../packages/lumx-core/src/js/components/Popover/constants.js";
+import { Popover } from "../popover/Popover.js";
+import { List } from "../list/List.js";
+import { useInfiniteScroll } from "../../hooks/useInfiniteScroll.js";
+import { cloneElement, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/dropdown/Dropdown.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Dropdown";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-dropdown";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	closeOnClick: true,
+	closeOnClickAway: true,
+	closeOnEscape: true,
+	fitToAnchorWidth: true,
+	fitWithinViewportHeight: true,
+	placement: Placement.BOTTOM_START,
+	shouldFocusOnOpen: true,
+	focusAnchorOnClose: true
+};
+/**
+* Dropdown component.
+*
+* @deprecated Use `MenuButton` for action-based dropdowns, `SelectButton` for selection-based dropdowns, or `Popover` for lower-level control.
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Dropdown = forwardRef((props, ref) => {
+	const { anchorRef, children, className, closeOnClick = DEFAULT_PROPS.closeOnClick, closeOnClickAway = DEFAULT_PROPS.closeOnClickAway, closeOnEscape = DEFAULT_PROPS.closeOnEscape, fitToAnchorWidth = DEFAULT_PROPS.fitToAnchorWidth, fitWithinViewportHeight = DEFAULT_PROPS.fitWithinViewportHeight, isOpen, offset, focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose, onClose, onInfiniteScroll, placement = DEFAULT_PROPS.placement, shouldFocusOnOpen = DEFAULT_PROPS.shouldFocusOnOpen, zIndex, ...forwardedProps } = props;
+	const innerRef = useRef(null);
+	const listElement = useRef(null);
+	useInfiniteScroll(innerRef, onInfiniteScroll);
+	const popperElement = useMemo(() => {
+		return !Array.isArray(children) && isComponent(List)(children) ? cloneElement(children, {
+			...children.props,
+			ref: listElement,
+			onClick(evt) {
+				children.props.onClick?.(evt);
+				if (closeOnClick) onClose?.();
+			},
+			isClickable: true
+		}) : children;
+	}, [
+		children,
+		closeOnClick,
+		onClose
+	]);
+	return isOpen ? /* @__PURE__ */ jsx(Popover, {
+		ref,
+		...forwardedProps,
+		focusAnchorOnClose,
+		anchorRef,
+		className: classNames.join(className, block()),
+		elevation: 0,
+		closeOnClickAway,
+		closeOnEscape,
+		fitToAnchorWidth,
+		fitWithinViewportHeight,
+		focusElement: shouldFocusOnOpen ? listElement : void 0,
+		isOpen,
+		offset,
+		onClose,
+		placement,
+		zIndex,
+		children: /* @__PURE__ */ jsx("div", {
+			className: element("menu"),
+			ref: innerRef,
+			children: popperElement
+		})
+	}) : null;
+});
+Dropdown.displayName = COMPONENT_NAME;
+Dropdown.className = CLASSNAME;
+Dropdown.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Dropdown };

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

@@ -0,0 +1 @@
+import { Dropdown, DropdownProps } from "./Dropdown.js";

package/_internal/components/expansion-panel/ExpansionPanel.d.ts

@@ -0,0 +1,31 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { ExpansionPanelProps as ExpansionPanelProps$1, ExpansionPanelPropsToOverride } from "../../packages/lumx-core/src/js/components/ExpansionPanel/index.js";
+import React from "react";
+
+//#region src/components/expansion-panel/ExpansionPanel.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ExpansionPanelProps extends index_d_exports.GenericProps, ReactToJSX<ExpansionPanelProps$1, ExpansionPanelPropsToOverride> {
+  /** On open callback. */
+  onOpen?: (event: React.MouseEvent) => void;
+  /** On close callback. */
+  onClose?: (event: React.MouseEvent) => void;
+  /** Props to pass to the toggle button (minus those already set by the ExpansionPanel props). */
+  toggleButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
+  /** On toggle open or close callback. */
+  onToggleOpen?(shouldOpen: boolean, event: React.MouseEvent): void;
+}
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ExpansionPanel: Comp<ExpansionPanelProps, HTMLDivElement>;
+//#endregion
+export { ExpansionPanel, ExpansionPanelProps };

package/_internal/components/expansion-panel/ExpansionPanel.js

@@ -0,0 +1,80 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { isComponent } from "../../utils/type/isComponent.js";
+import { IconButton } from "../button/IconButton.js";
+import { IS_BROWSER } from "../../constants.js";
+import { partitionMulti } from "../../utils/partitionMulti.js";
+import { DragHandle } from "../drag-handle/DragHandle.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ExpansionPanel as ExpansionPanel$1, element } from "../../packages/lumx-core/src/js/components/ExpansionPanel/index.js";
+import { src_exports } from "../../../index.js";
+import React, { Children, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import isEmpty from "lodash/isEmpty.js";
+//#region src/components/expansion-panel/ExpansionPanel.tsx
+var isDragHandle = isComponent(DragHandle);
+var isHeader = isComponent("header");
+var isFooter = isComponent("footer");
+/**
+* ExpansionPanel component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ExpansionPanel = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { closeMode = DEFAULT_PROPS.closeMode, children: anyChildren, isOpen, label, onClose, onOpen, onToggleOpen, theme = defaultTheme, ...forwardedProps } = props;
+	const children = Children.toArray(anyChildren);
+	const [[dragHandle], [header], [footer], content] = partitionMulti(children, [
+		isDragHandle,
+		isHeader,
+		isFooter
+	]);
+	const headerProps = React.isValidElement(header) ? header.props : {};
+	const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /* @__PURE__ */ jsx("span", {
+		className: element("label"),
+		children: label
+	});
+	const wrapperRef = useRef(null);
+	const [isChildrenVisible, setChildrenVisible] = React.useState(isOpen);
+	const isOpenRef = React.useRef(isOpen);
+	React.useEffect(() => {
+		if (isOpen || closeMode === "hide") setChildrenVisible(true);
+		else if (!IS_BROWSER) setChildrenVisible(false);
+		isOpenRef.current = isOpen;
+	}, [closeMode, isOpen]);
+	React.useEffect(() => {
+		const { current: wrapper } = wrapperRef;
+		if (!IS_BROWSER || !wrapper) return;
+		const onTransitionEnd = () => {
+			setChildrenVisible(isOpenRef.current || closeMode === "hide");
+		};
+		wrapper.addEventListener("transitionend", onTransitionEnd);
+		return () => wrapper.removeEventListener("transitionend", onTransitionEnd);
+	}, [closeMode]);
+	return ExpansionPanel$1({
+		content,
+		dragHandle,
+		footer,
+		headerContent,
+		ref,
+		headerProps,
+		wrapperRef,
+		IconButton,
+		isOpen,
+		handleClose: onClose,
+		handleToggleOpen: onToggleOpen,
+		handleOpen: onOpen,
+		theme,
+		isChildrenVisible,
+		children,
+		closeMode,
+		label,
+		...forwardedProps
+	});
+});
+ExpansionPanel.displayName = COMPONENT_NAME;
+ExpansionPanel.className = CLASSNAME;
+ExpansionPanel.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ExpansionPanel };

package/_internal/components/expansion-panel/index.d.ts

@@ -0,0 +1 @@
+import { ExpansionPanel, ExpansionPanelProps } from "./ExpansionPanel.js";

package/_internal/components/flag/Flag.d.ts

@@ -0,0 +1,20 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { FlagProps as FlagProps$1 } from "../../packages/lumx-core/src/js/components/Flag/index.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/flag/Flag.d.ts
+interface FlagProps extends GenericProps, ReactToJSX<FlagProps$1, 'children' | 'Text'> {
+  /** Text label of the flag. */
+  label: React.ReactNode;
+}
+/**
+ * Flag component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Flag: Comp<FlagProps, HTMLDivElement>;
+//#endregion
+export { Flag, FlagProps };

package/_internal/components/flag/Flag.js

@@ -0,0 +1,28 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { Text } from "../text/Text.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, Flag as Flag$1 } from "../../packages/lumx-core/src/js/components/Flag/index.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/flag/Flag.tsx
+/**
+* Flag component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Flag = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	return Flag$1({
+		...props,
+		theme: props.theme || defaultTheme,
+		ref,
+		children: props.label,
+		Text
+	});
+});
+Flag.displayName = COMPONENT_NAME;
+Flag.className = CLASSNAME;
+Flag.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Flag };

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

@@ -0,0 +1 @@
+import { Flag, FlagProps } from "./Flag.js";

package/_internal/components/flex-box/FlexBox.d.ts

@@ -0,0 +1,25 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, MarginAutoAlignment } from "../../packages/lumx-core/src/js/components/FlexBox/types.js";
+import { FlexBoxProps as FlexBoxProps$1 } from "../../packages/lumx-core/src/js/components/FlexBox/index.js";
+import { GenericProps } from "@lumx/core/js/types";
+import React from "react";
+
+//#region src/components/flex-box/FlexBox.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface FlexBoxProps extends GenericProps, ReactToJSX<FlexBoxProps$1> {
+  /** Customize the root element. */
+  as?: React.ElementType;
+}
+/**
+ * FlexBox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const FlexBox: Comp<FlexBoxProps, HTMLDivElement>;
+//#endregion
+export { FlexBox, FlexBoxProps };

package/_internal/components/flex-box/FlexBox.js

@@ -0,0 +1,24 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, getFlexBoxProps } from "../../packages/lumx-core/src/js/components/FlexBox/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/flex-box/FlexBox.tsx
+/**
+* FlexBox component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var FlexBox = forwardRef((props, ref) => {
+	const { as: Component = "div", children, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		...getFlexBoxProps(forwardedProps),
+		children
+	});
+});
+FlexBox.displayName = COMPONENT_NAME;
+FlexBox.className = CLASSNAME;
+//#endregion
+export { FlexBox };

package/_internal/components/flex-box/index.d.ts

@@ -0,0 +1,2 @@
+import { FlexHorizontalAlignment, FlexVerticalAlignment, GapSize, MarginAutoAlignment } from "../../packages/lumx-core/src/js/components/FlexBox/types.js";
+import { FlexBox, FlexBoxProps } from "./FlexBox.js";

package/_internal/components/generic-block/GenericBlock.d.ts

@@ -0,0 +1,51 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { GenericBlockProps as GenericBlockProps$1, GenericBlockPropsToOverride, GenericBlockSectionProps as GenericBlockSectionProps$1 } from "../../packages/lumx-core/src/js/components/GenericBlock/index.js";
+import React, { ReactNode } from "react";
+
+//#region src/components/generic-block/GenericBlock.d.ts
+interface GenericBlockProps extends index_d_exports.GenericProps, ReactToJSX<GenericBlockProps$1, GenericBlockPropsToOverride> {
+  /**
+   * Main content to display or sections components
+   * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})
+   */
+  children: ReactNode;
+}
+interface GenericBlockSectionProps extends index_d_exports.GenericProps, ReactToJSX<GenericBlockSectionProps$1> {
+  /** Customize the root element. */
+  as?: React.ElementType;
+}
+type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
+interface GenericBlock extends BaseGenericBlock {
+  /**
+   * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject
+   * the "figure" section of the block (instead of using `figure` and `figureProps` props).
+   */
+  Figure: Comp<GenericBlockSectionProps>;
+  /**
+   * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject
+   * the "content" section of the block (instead of using `content` and `contentProps` props).
+   */
+  Content: Comp<GenericBlockSectionProps>;
+  /**
+   * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject
+   * the "actions" section of the block (instead of using `actions` and `actionsProps` props).
+   */
+  Actions: Comp<GenericBlockSectionProps>;
+}
+/**
+ * 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
+ */
+declare const BaseGenericBlock: BaseGenericBlock;
+declare const GenericBlock: GenericBlock;
+//#endregion
+export { GenericBlock, GenericBlockProps, GenericBlockSectionProps };

package/_internal/components/generic-block/GenericBlock.js

@@ -0,0 +1,90 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { isComponentType } from "../../utils/type/isComponentType.js";
+import { FlexBox } from "../flex-box/FlexBox.js";
+import { partitionMulti } from "../../utils/partitionMulti.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, GenericBlock as GenericBlock$1 } from "../../packages/lumx-core/src/js/components/GenericBlock/index.js";
+import React, { Children } from "react";
+import { Fragment, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import isEmpty from "lodash/isEmpty.js";
+import noop from "lodash/noop.js";
+//#region src/components/generic-block/GenericBlock.tsx
+var Figure = noop.bind({});
+var isFigure = isComponentType(Figure);
+var Content = noop.bind({});
+var isContent = isComponentType(Content);
+var Actions = noop.bind({});
+var isActions = isComponentType(Actions);
+/**
+* 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 BaseGenericBlock = forwardRef((props, ref) => {
+	const { figure, figureProps, children, actions, actionsProps, contentProps, ...forwardedProps } = props;
+	const sections = React.useMemo(() => {
+		const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(Children.toArray(children), [
+			isFigure,
+			isContent,
+			isActions
+		]);
+		return {
+			figureChild,
+			figureChildProps: figureChild?.props,
+			contentChild,
+			contentChildProps: contentChild?.props,
+			actionsChild,
+			actionsChildProps: actionsChild?.props,
+			otherChildren: otherChildren.filter((child) => !isEmpty(child))
+		};
+	}, [children]);
+	const alignProps = {
+		vAlign: forwardedProps.vAlign,
+		hAlign: forwardedProps.hAlign
+	};
+	return GenericBlock$1({
+		...forwardedProps,
+		ref,
+		FlexBox,
+		actionsProps: {
+			ref: sections.actionsChild?.ref,
+			...alignProps,
+			...actionsProps,
+			...sections.actionsChildProps,
+			className: classNames.join(actionsProps?.className, sections.actionsChildProps?.className)
+		},
+		actions: actions || sections.actionsChildProps?.children ? /* @__PURE__ */ jsxs(Fragment, { children: [actions, sections.actionsChildProps?.children] }) : void 0,
+		contentProps: {
+			ref: sections.contentChild?.ref,
+			...alignProps,
+			...contentProps,
+			...sections.contentChildProps,
+			className: classNames.join(contentProps?.className, sections.contentChildProps?.className)
+		},
+		content: sections.contentChildProps?.children || sections.otherChildren.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [sections.contentChildProps?.children, sections.otherChildren] }) : void 0,
+		figureProps: {
+			ref: sections.figureChild?.ref,
+			...alignProps,
+			...figureProps,
+			...sections.figureChildProps,
+			className: classNames.join(figureProps?.className, sections.figureChildProps?.className)
+		},
+		figure: figure || sections.figureChildProps?.children ? /* @__PURE__ */ jsxs(Fragment, { children: [figure, sections.figureChildProps?.children] }) : void 0
+	});
+});
+BaseGenericBlock.displayName = COMPONENT_NAME;
+BaseGenericBlock.className = CLASSNAME;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS;
+var GenericBlock = Object.assign(BaseGenericBlock, {
+	Figure,
+	Content,
+	Actions
+});
+//#endregion
+export { GenericBlock };

package/_internal/components/generic-block/index.d.ts

@@ -0,0 +1,2 @@
+import { GenericBlockGapSize } from "../../packages/lumx-core/src/js/components/GenericBlock/constants.js";
+import { GenericBlock, GenericBlockProps, GenericBlockSectionProps } from "./GenericBlock.js";

package/_internal/components/grid/Grid.d.ts

@@ -0,0 +1,33 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { index_d_exports as index_d_exports$1 } from "../../../index.js";
+
+//#region src/components/grid/Grid.d.ts
+type GridGutterSize = Extract<index_d_exports$1.Size, 'regular' | 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+interface GridProps extends index_d_exports.GenericProps {
+  /** Orientation. */
+  orientation?: index_d_exports$1.Orientation;
+  /** Whether the children are wrapped or not. */
+  wrap?: string;
+  /** Vertical alignment. */
+  vAlign?: index_d_exports$1.Alignment;
+  /** Horizontal alignment. */
+  hAlign?: index_d_exports$1.Alignment;
+  /** Gutter size. */
+  gutter?: GridGutterSize;
+  /** Children */
+  children?: React.ReactNode;
+}
+/**
+ * Grid component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Grid: Comp<GridProps, HTMLDivElement>;
+//#endregion
+export { Grid, GridProps };

package/_internal/components/grid/Grid.js

@@ -0,0 +1,48 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { src_exports } from "../../../index.js";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/grid/Grid.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Grid";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-grid";
+var { block } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	orientation: src_exports.Orientation.horizontal,
+	wrap: "nowrap"
+};
+/**
+* Grid component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Grid = forwardRef((props, ref) => {
+	const { children, className, gutter, hAlign, orientation = DEFAULT_PROPS.orientation, vAlign, wrap = DEFAULT_PROPS.wrap, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, classNames.bem(`${CLASSNAME}-container`).block(), block({
+			[`h-align-${hAlign}`]: Boolean(hAlign),
+			[`v-align-${vAlign}`]: Boolean(vAlign),
+			[`orientation-${orientation}`]: Boolean(orientation),
+			[`wrap-${wrap}`]: Boolean(wrap),
+			[`gutter-${gutter}`]: Boolean(gutter)
+		})),
+		children
+	});
+});
+Grid.displayName = COMPONENT_NAME;
+Grid.className = CLASSNAME;
+Grid.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Grid };

package/_internal/components/grid/GridItem.d.ts

@@ -0,0 +1,29 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { index_d_exports as index_d_exports$1 } from "../../../index.js";
+
+//#region src/components/grid/GridItem.d.ts
+type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+/**
+ * Defines the props of the component.
+ */
+interface GridItemProps extends index_d_exports.GenericProps {
+  /** Alignment. */
+  align?: index_d_exports$1.Alignment;
+  /** Order. */
+  order?: Columns;
+  /** Width. */
+  width?: Columns;
+  /** Children */
+  children?: React.ReactNode;
+}
+/**
+ * GridItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const GridItem: Comp<GridItemProps, HTMLDivElement>;
+//#endregion
+export { GridItem, GridItemProps };