@ufoui/core 0.0.1

package/components/base/checkboxBase/checkboxBase.d.ts

@@ -0,0 +1,124 @@
+import { default as React, ReactNode } from 'react';
+import { ElementAlign, ElementBorder, ElementDensity, ElementElevation, ElementFocusEffect, ElementFont, ElementHoverEffect, ElementOutline, ElementPressedEffect, ElementSelectedEffect, ElementShape, ElementSize, ElementTextPlacement, ElementTouchEffect } from '../../utils';
+import { MotionAnimation, MotionStyle } from '../../types';
+import { BorderColor, SemanticColor, SurfaceColor } from '../../../utils/color';
+/**
+ * Props for the CheckboxBase component.
+ *
+ * Supports controlled and uncontrolled usage, visual effects,
+ * animation configuration, and accessibility features.
+ *
+ * @category Base components
+ */
+export interface CheckboxBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'size'> {
+    /** Animation preset for check and uncheck transitions. */
+    animation?: MotionAnimation;
+    /** Border style. */
+    border?: ElementBorder;
+    /** Border color override. */
+    borderColor?: BorderColor;
+    /** Custom content rendered instead of the default glyph. */
+    children?: ReactNode;
+    /** Additional root class name. */
+    className?: string;
+    /** Semantic color used when checked. */
+    color?: SemanticColor;
+    /** Visual density of the control. */
+    density?: ElementDensity;
+    /** Supporting text displayed below the label. */
+    description?: string;
+    /** Text color override for the description. */
+    descriptionColor?: SurfaceColor;
+    /** Font applied to the description text. */
+    descriptionFont?: ElementFont;
+    /** Duration in milliseconds for the check or uncheck animation. */
+    duration?: number;
+    /** Required root class name for styling. */
+    elementClass: string;
+    /** Elevation level applied to the glyph. */
+    elevation?: ElementElevation;
+    /** Error message text. Overrides description when present. */
+    error?: string;
+    /** Enables filled visual style. */
+    filled?: boolean;
+    /** Focus color override. */
+    focusColor?: BorderColor;
+    /** Visual effects applied on focus. */
+    focusEffects?: ElementFocusEffect[];
+    /** Font applied to the label text. */
+    font?: ElementFont;
+    /** Visual effects applied on hover. */
+    hoverEffects?: ElementHoverEffect[];
+    /** Icon rendered in checked state. */
+    icon?: ReactNode;
+    /** DOM id. Auto-generated when not provided. */
+    id?: string;
+    /** Enables indeterminate (mixed) state. */
+    indeterminate?: boolean;
+    /** Icon rendered in indeterminate state. */
+    indeterminateIcon?: ReactNode;
+    /** Text label displayed next to the control. */
+    label?: string;
+    /** Text color override for the label. */
+    labelColor?: SurfaceColor;
+    /** Motion style applied to animated elements. */
+    motionStyle?: MotionStyle;
+    /** DOM name attribute. */
+    name?: string;
+    /** Change event handler. */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** Visual effects applied while pressed. */
+    pressedEffects?: ElementPressedEffect[];
+    /** Marks the control as read-only without disabling focus. */
+    readOnly?: boolean;
+    /** Marks the control as required. Visual indicator only. */
+    required?: boolean;
+    /** Visual effects applied when selected. */
+    selectedEffects?: ElementSelectedEffect[];
+    /** Shape variant of the control. */
+    shape?: ElementShape;
+    /** Size of the control. */
+    size?: ElementSize;
+    /** Text color override for label and content. */
+    textColor?: SurfaceColor;
+    /** Placement of text relative to the control. */
+    textPlacement?: ElementTextPlacement;
+    /** Tooltip alignment relative to the control. */
+    tooltipAlign?: ElementAlign;
+    /** Touch and click visual effects. */
+    touchEffects?: ElementTouchEffect[];
+    /** Input type. */
+    type: 'radio' | 'checkbox';
+    /** Border style when unchecked. */
+    uncheckedBorder?: ElementOutline;
+    /** Border color when unchecked. */
+    uncheckedBorderColor?: BorderColor;
+    /** Semantic color used when unchecked. */
+    uncheckedColor?: SemanticColor;
+    /** Icon rendered when unchecked. */
+    uncheckedIcon?: ReactNode;
+    /** Controlled value for radio buttons. */
+    value?: string;
+}
+/**
+ * Low-level base component for checkbox and radio controls.
+ *
+ * Supports controlled and uncontrolled usage.
+ *
+ *
+ * @param props Component properties.
+ * @function
+ *
+ * @example
+ * <CheckboxBase label="Accept terms" />
+ *
+ * @example
+ * <CheckboxBase
+ *   type="checkbox"
+ *   label="Select all"
+ *   indeterminate
+ * />
+ *
+ * @category Base components
+ */
+export declare const CheckboxBase: React.ForwardRefExoticComponent<CheckboxBaseProps & React.RefAttributes<HTMLInputElement>>;

package/components/base/dialogBase/dialog.d.ts

@@ -0,0 +1,35 @@
+import { default as React, ReactNode } from 'react';
+import { ElementElevation, ElementOutline, ElementShape, ElementSize } from '../../utils';
+import { MotionAnimation, MotionStyle } from '../../types';
+import { BorderColor, SurfaceColor } from '../../../utils/color';
+export type DialogType = 'basic' | 'fullscreen' | 'dockRight' | 'dockLeft' | 'dockTop' | 'dockBottom';
+export type DialogAnimation = 'auto' | 'none' | MotionAnimation;
+export interface DialogProps {
+    open: boolean;
+    onClose?: () => void;
+    type?: DialogType;
+    color?: SurfaceColor;
+    elevation?: ElementElevation;
+    size?: ElementSize;
+    shape?: ElementShape;
+    border?: ElementOutline;
+    borderColor?: BorderColor;
+    animation?: DialogAnimation;
+    duration?: number;
+    disableBackdropClose?: boolean;
+    disableEscapeKey?: boolean;
+    children?: ReactNode;
+    className?: string;
+    motionStyle?: MotionStyle;
+    modal?: boolean;
+    title?: string;
+    actions?: ReactNode[];
+    icon?: ReactNode;
+    showCloseButton?: boolean;
+    showHandle?: boolean;
+    autoFocus?: boolean;
+}
+export declare const Dialog: {
+    ({ open, onClose, type, color, elevation, shape, border, borderColor, size, animation, duration, disableBackdropClose, disableEscapeKey, children, className, motionStyle, modal, }: DialogProps): React.ReactPortal | null;
+    displayName: string;
+};

package/components/base/fieldBase/fieldBase.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+import { ElementBorder, ElementDensity, ElementFont, ElementShape } from '../../utils';
+import { BorderColor, SemanticColor, SurfaceColor } from '../../../utils/color';
+type FieldVariant = 'filled' | 'outlined' | 'classic';
+export interface FieldBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'children'> {
+    color?: SemanticColor;
+    /** Required root class name. */
+    elementClass: string;
+    /** Visual density of the button. */
+    density?: ElementDensity;
+    /** Text label for the field. */
+    label?: string;
+    labelFont?: ElementFont;
+    error?: string;
+    /** Supporting text displayed below control. */
+    description?: string;
+    /** Text color override for the description. */
+    descriptionColor?: SurfaceColor;
+    /** Font style applied to the description text. */
+    descriptionFont?: ElementFont;
+    variant?: FieldVariant;
+    outlined?: boolean;
+    filled?: boolean;
+    classic?: boolean;
+    fullWidth?: boolean;
+    /** Control shape variant. */
+    shape?: ElementShape;
+    /** Text color override for the label. */
+    labelColor?: SurfaceColor;
+    /** Text color override for the placeholder. */
+    placeholderColor?: SurfaceColor;
+    border?: ElementBorder;
+    borderColor?: BorderColor;
+    placeholder?: string;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    icon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    /** Font style applied to the label. */
+    font?: ElementFont;
+    placeholderFont?: ElementFont;
+    /** Marks the control as required (visual indicator only). */
+    required?: boolean;
+    /** Text color override for label and content. */
+    textColor?: SurfaceColor;
+}
+export declare const FieldBase: React.ForwardRefExoticComponent<FieldBaseProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/base/inlineBase/inlineBase.d.ts

@@ -0,0 +1,62 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+import { ElementBorder, ElementElevation, ElementFont, ElementShape } from '../../utils';
+import { BorderColor, SurfaceColor } from '../../../utils/color';
+/**
+ * Props for {@link InlineBase}.
+ *
+ * @remarks
+ * Defines visual and typographic styling for inline-level elements
+ * without imposing any layout behaviour.
+ *
+ * @category Inline
+ */
+export interface InlineBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    /** Custom HTML element/component. Default: `span`. */
+    component?: React.ElementType;
+    /** Font token controlling typography (size, weight, line-height). */
+    font?: ElementFont;
+    /** Surface background token. */
+    color?: SurfaceColor;
+    /** Elevation level (0–5). */
+    elevation?: ElementElevation;
+    /** Shape/border-radius token. */
+    shape?: ElementShape;
+    /** Border width (0–5). */
+    border?: ElementBorder;
+    /** Border color token. */
+    borderColor?: BorderColor;
+    /** Renders as `inline-block` instead of `inline`. */
+    inlineBlock?: boolean;
+    /** Semantic UUI element class (e.g. 'uui-text', 'uui-heading'). */
+    elementClass?: string;
+    /** Inline content. */
+    children?: ReactNode;
+}
+/**
+ * `InlineBase` — core primitive for inline semantic components.
+ *
+ * Provides typography, color, border, shape and elevation styling
+ * for inline-level elements without introducing layout semantics.
+ *
+ * Intended as a foundation for components such as `Text`, `Heading`,
+ * `Label`, `Code`, or inline UI tokens.
+ *
+ * @category Inline
+ * @function
+ * @param props - Inline styling and typography props.
+ *
+ * @example
+ * ```tsx
+ * <InlineBase font="bodyMedium">
+ *   Inline text
+ * </InlineBase>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <InlineBase component="h2" font="headlineSmall">
+ *   Section title
+ * </InlineBase>
+ * ```
+ */
+export declare const InlineBase: React.ForwardRefExoticComponent<InlineBaseProps & React.RefAttributes<HTMLElement>>;

package/components/button/button.d.ts

@@ -0,0 +1,24 @@
+import { ButtonBaseProps } from '../core';
+/**
+ * Props for {@link Button}.
+ * Extends {@link ButtonBaseProps}.
+ *
+ * @category Button
+ */
+export type ButtonProps = Omit<ButtonBaseProps, 'elementClass'>;
+/**
+ * Primary action button used to trigger user actions.
+ *
+ * Use for actions such as submit, confirm, save, or navigate within the application.
+ *
+ * @category Button
+ * @function
+ * @param props - All button props inherited from {@link ButtonBase}.
+ *
+ * @example
+ * <Button label="Save" filled />
+ *
+ * @example
+ * <Button label="Cancel" />
+ */
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/card/card.d.ts

@@ -0,0 +1,15 @@
+import { HTMLProps } from 'react';
+import { ElementAlign, ElementShape, ElementSize } from '../../utils/utils';
+import { SemanticColor } from '../../utils/color';
+export interface CardProps extends Omit<HTMLProps<HTMLSpanElement>, 'ref' | 'size'> {
+    value: string | number;
+    color?: SemanticColor;
+    position?: ElementAlign;
+    size?: ElementSize;
+    shape?: ElementShape;
+    raised?: boolean;
+    elevated?: boolean;
+    outlined?: boolean;
+    filled?: boolean;
+}
+export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLSpanElement>>;

package/components/checkbox/checkbox.d.ts

@@ -0,0 +1,31 @@
+import { CheckboxBaseProps } from '../base/checkboxBase/checkboxBase';
+/**
+ * Props for the Checkbox component.
+ *
+ * Extends {@link CheckboxBaseProps} with preset defaults
+ * for checkbox-specific behavior.
+ *
+ * @category Checkbox
+ */
+export type CheckboxProps = Omit<CheckboxBaseProps, 'type' | 'elementClass'>;
+/**
+ * Checkbox component built on top of {@link CheckboxBase}.
+ *
+ * Provides default checkbox icons, filled style,
+ * and sensible border defaults.
+ *
+ * @param props Component properties.
+ * @function
+ *
+ * @example
+ * <Checkbox label="Accept terms" />
+ *
+ * @example
+ * <Checkbox
+ *   label="Select all"
+ *   indeterminate
+ * />
+ *
+ * @category Checkbox
+ */
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/chip/chip.d.ts

@@ -0,0 +1,7 @@
+import { ButtonBaseProps } from '../core';
+export type ChipType = 'assist' | 'filter' | 'input' | 'suggestion';
+export interface ChipProps extends Omit<ButtonBaseProps, 'elementClass' | 'iconClass' | 'labelClass'> {
+    /** Defines the visual style and behavior of the chip. @default 'assist' */
+    chipType?: ChipType;
+}
+export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/content/content.d.ts

@@ -0,0 +1,28 @@
+import { BoxBaseProps } from '../core';
+/**
+ * Props for {@link Content}.
+ * Extends {@link BoxBaseProps} except for `elementClass` and `component`.
+ *
+ * @category Box
+ */
+export type ContentProps = Omit<BoxBaseProps, 'elementClass' | 'component'>;
+/**
+ * Layout wrapper for the main article content.
+ *
+ * Renders a native div and forwards all layout props to {@link BoxBase}.
+ * Intended as a structural container for Sections, typically paired with Aside.
+ *
+ * @function
+ * @example
+ * <Article elevation={1} shape="rounded">
+ *   <Content>
+ *     <Section />
+ *     <Section />
+ *     <Section />
+ *   </Content>
+ *   <Aside />
+ * </Article>
+ *
+ * @category Box
+ */
+export declare const Content: import('react').ForwardRefExoticComponent<ContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/dateInput/dateInput.d.ts

@@ -0,0 +1,2 @@
+import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+export declare const DateInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/dateTimeInput/dateTimeInput.d.ts

@@ -0,0 +1,2 @@
+import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+export declare const DateTimeInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/dialog/dialogActions.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { ElementOutline } from '../utils';
+import { BorderColor, SurfaceColor } from '../../utils/color';
+export interface DialogActionsProps {
+    children?: ReactNode;
+    className?: string;
+    color?: SurfaceColor;
+    borderTop?: boolean;
+    borderTopWidth?: ElementOutline;
+    borderColor?: BorderColor;
+}
+export declare const DialogActions: {
+    ({ children, className, color, borderTop, borderTopWidth, borderColor, }: DialogActionsProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/components/dialog/dialogContent.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface DialogContentProps {
+    children?: ReactNode;
+    className?: string;
+}
+export declare const DialogContent: {
+    ({ children, className }: DialogContentProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/components/dialog/dialogTitle.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ElementFont } from '../utils';
+import { SurfaceColor } from '../../utils/color';
+export interface DialogTitleProps {
+    icon?: ReactNode;
+    label?: string;
+    children?: ReactNode;
+    className?: string;
+    font?: ElementFont;
+    color?: SurfaceColor;
+    textColor?: SurfaceColor;
+}
+export declare const DialogTitle: {
+    ({ icon, label, children, className, font }: DialogTitleProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/components/div/div.d.ts

@@ -0,0 +1,29 @@
+import { BoxBaseProps } from '../core';
+/**
+ * Props for the {@link Div} component.
+ *
+ * Extends {@link BoxBaseProps} with all layout-related props removed.
+ * Intended as a neutral block-level wrapper.
+ *
+ * @category Div
+ */
+export type DivProps = Omit<BoxBaseProps, 'type' | 'direction' | 'flow' | 'cols' | 'rows' | 'wrap'>;
+/**
+ * Generic block-level container.
+ *
+ * Renders a plain block element without imposing layout semantics.
+ * Use this component when you need a structural wrapper for styling,
+ * spacing, elevation, or surface color — but not layout.
+ *
+ * Built on top of {@link BoxBase} with `type="block"`.
+ *
+ * @category Div
+ * @function
+ * @param props - Block-level props inherited from {@link BoxBase}.
+ *
+ * @example
+ * <Div p={16} elevation={1}>
+ *   <Content />
+ * </Div>
+ */
+export declare const Div: import('react').ForwardRefExoticComponent<DivProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/divider/divider.d.ts

@@ -0,0 +1,70 @@
+import { HTMLProps } from 'react';
+import { BorderColor, ElementBorder, ElementElevation, ElementInset, ElementShape } from '../core';
+import { IS_DIVIDER } from './divider.guards';
+/**
+ * Props for the {@link Divider} component.
+ *
+ * @category Divider
+ */
+export interface DividerProps extends Omit<HTMLProps<HTMLDivElement>, 'ref'> {
+    /** Line color token used for the divider. */
+    borderColor?: BorderColor;
+    /** Alias for `borderColor`. */
+    color?: BorderColor;
+    /** Divider thickness (0–4). Default: 1 */
+    border?: ElementBorder;
+    /** If true, renders divider vertically. */
+    vertical?: boolean;
+    /** Inset alignment mode (`left`, `right`, `top`, `bottom`, `middle`). */
+    inset?: ElementInset;
+    /** Offset applied for inset margins. */
+    insetSize?: number;
+    /** Spacing around the divider in px. Default: 8. */
+    spacing?: number;
+    /** Opacity preset applied to the divider. */
+    variant?: 'subtle' | 'medium' | 'strong';
+    /** Elevation level applied to the divider. */
+    elevation?: ElementElevation;
+    /** Corner shape applied to the divider. */
+    shape?: ElementShape;
+    /** Height of a vertical divider in inline and flex-column layouts. */
+    height?: string;
+}
+/**
+ * **Divider** - thin line used to separate content.
+ *
+ * Supports horizontal and vertical orientation, thickness, spacing,
+ * inset offsets, color tokens, opacity presets, elevation and corner shapes
+ *
+ * @param props
+ * @function
+ * @example
+ * ```tsx
+ * <Divider spacing={12} variant="subtle" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Divider vertical inset="middle" insetWidth={24} />
+ * ```
+ *
+ * @category Divider
+ */
+export declare const Divider: {
+    (props: DividerProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Display name used by React DevTools.
+     *
+     * @internal
+     */
+    displayName: string;
+    /**
+     * Marks this component as a Divider for runtime type guards.
+     *
+     * Used internally to identify Divider elements via a shared Symbol.
+     * Not part of the public API.
+     *
+     * @internal
+     */
+    [IS_DIVIDER]: boolean;
+};

package/components/divider/divider.guards.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { DividerProps } from '../core';
+export declare const IS_DIVIDER: unique symbol;
+/**
+ * Type guard that checks whether a React node is a Divider component.
+ *
+ * Identifies Divider elements by the presence of the internal
+ * {@link IS_DIVIDER} symbol marker on the component type.
+ *
+ * @param el - React node to test.
+ * @returns `true` if the node is a Divider element.
+ *
+ * @internal
+ */
+export declare function isDivider(el: React.ReactNode): el is React.ReactElement<DividerProps>;

package/components/emailInput/emailInput.d.ts

@@ -0,0 +1,2 @@
+import { FieldBaseProps } from '../base/fieldBase/fieldBase';
+export declare const EmailInput: import('react').ForwardRefExoticComponent<FieldBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/fab/fab.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement } from 'react';
+import { ButtonBaseProps } from '../core';
+/**
+ * Props for {@link Fab}.
+ * Extends {@link ButtonBaseProps}.
+ *
+ * @category Fab
+ */
+export interface FabButtonProps extends Omit<ButtonBaseProps, 'elementClass'> {
+    /** Icon rendered inside the FAB. */
+    icon: ReactElement;
+}
+/**
+ * Floating action button used for primary contextual actions.
+ *
+ * Use to highlight the main action on a screen, such as create, add,
+ * or compose. Supports regular and extended variants (with label).
+ *
+ * @category Fab
+ * @function
+ * @param props - All FAB props inherited from {@link ButtonBase}.
+ *
+ * @example
+ * <Fab icon={<AddIcon />} />
+ *
+ * @example
+ * <Fab icon={<AddIcon />} label="Create" />
+ */
+export declare const Fab: import('react').ForwardRefExoticComponent<FabButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/fieldset/fieldset.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+import { BoxBaseProps, ElementFont, SurfaceColor } from '../core';
+/**
+ * Props for {@link Fieldset}.
+ * Extends {@link BoxBaseProps} except for `elementClass` and `component`.
+ *
+ * @category Fieldset
+ */
+export interface FieldsetProps extends Omit<BoxBaseProps, 'component' | 'elementClass'> {
+    /** Supporting text displayed below the fieldset content. */
+    description?: string;
+    /** Text color of the description. */
+    descriptionColor?: SurfaceColor;
+    /** Font token applied to the description text. */
+    descriptionFont?: ElementFont;
+    /** Disables all form controls inside the fieldset. */
+    disabled?: boolean;
+    /** Error message displayed below the fieldset content. Overrides `description`. */
+    error?: string;
+    /** Font token applied to the legend text. */
+    font?: ElementFont;
+    /** Alias for `legend`. Used as fallback when `legend` is not provided. */
+    label?: string;
+    /** Text rendered inside the native `<legend>` element. */
+    legend?: string;
+    /** Marks the fieldset as required. Adds a required indicator to the legend. */
+    required?: boolean;
+}
+/**
+ * Semantic wrapper for grouping related form controls.
+ *
+ * Renders a native fieldset with an optional legend.
+ * Used to group checkboxes or radio buttons.
+ *
+ * @function
+ * @example
+ * <Fieldset legend="Fieldset">
+ *   <Checkbox>
+ *   <Checkbox>
+ *   <Checkbox>
+ * </Fieldset>
+ *
+ * @category Fieldset
+ */
+export declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;

package/components/flex/flex.d.ts

@@ -0,0 +1,36 @@
+import { BoxBaseProps } from '../core';
+/**
+ * Props for the {@link Flex} component.
+ *
+ * Extends {@link BoxBaseProps} with grid-related props removed.
+ * Intended for flexbox-only layouts.
+ *
+ * @category Flex
+ */
+export type FlexProps = Omit<BoxBaseProps, 'elementClass' | 'type' | 'cols' | 'rows' | 'flow'>;
+/**
+ * Flex layout container.
+ *
+ * Renders a flexbox-based layout with a horizontal direction by default.
+ * Use this component whenever you want to explicitly work with flexbox
+ * semantics instead of relying on generic containers.
+ *
+ * Built on top of {@link BoxBase} and exposes only flex-relevant layout props.
+ *
+ * @category Flex
+ * @function
+ * @param props - Flex layout props inherited from {@link BoxBase}.
+ *
+ * @example
+ * <Flex gap={12}>
+ *   <Item />
+ *   <Item />
+ * </Flex>
+ *
+ * @example
+ * <Flex direction="col" gap={8}>
+ *   <Header />
+ *   <Content />
+ * </Flex>
+ */
+export declare const Flex: import('react').ForwardRefExoticComponent<FlexProps & import('react').RefAttributes<HTMLDivElement>>;