@moneyforward/mfui-components 2.48.1

package/dist/esm/src/SplitView/hooks/useSplitViewDrag.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Hook to handle drag interactions for resizing the split view.
+ *
+ * @param options - Drag hook options
+ */
+export declare function useSplitViewDrag(options: {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    minRightPanelSize: number;
+    maxRightPanelSize: number;
+    setRightPanelSize: (size: number | undefined) => void;
+    setLastRightPanelSize: (size: number | undefined) => void;
+}): {
+    isDragging: boolean;
+    handleMouseDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+};

package/dist/esm/src/SplitView/hooks/useSplitViewDrag.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { calculateConstrainedRightPanelSize } from '../utils/calculatePanelSize';
+/**
+ * Hook to handle drag interactions for resizing the split view.
+ *
+ * @param options - Drag hook options
+ */
+export function useSplitViewDrag(options) {
+    const { containerRef, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize } = options;
+    const [isDragging, setIsDragging] = useState(false);
+    const pointerIdRef = useRef(null);
+    /**
+     * Handle pointer down on the divider
+     */
+    const handlePointerDown = useCallback((event) => {
+        event.preventDefault();
+        // Capture pointer to ensure we receive all events including pointerup
+        event.currentTarget.setPointerCapture(event.pointerId);
+        pointerIdRef.current = event.pointerId;
+        setIsDragging(true);
+    }, []);
+    /**
+     * Handle pointer move during drag
+     */
+    const handlePointerMove = useCallback((event) => {
+        if (!isDragging || pointerIdRef.current !== event.pointerId)
+            return;
+        if (!containerRef.current)
+            return;
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const containerSize = containerRect.width;
+        const rawRightPanelSize = containerSize - (event.clientX - containerRect.left);
+        // Apply min/max constraints directly to right panel size
+        const constrainedRightPanelSize = calculateConstrainedRightPanelSize(rawRightPanelSize, minRightPanelSize, maxRightPanelSize);
+        setRightPanelSize(constrainedRightPanelSize);
+        setLastRightPanelSize(constrainedRightPanelSize);
+    }, [isDragging, containerRef, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize]);
+    /**
+     * Handle pointer up to stop dragging
+     */
+    const handlePointerUp = useCallback((event) => {
+        if (pointerIdRef.current === event.pointerId) {
+            setIsDragging(false);
+            pointerIdRef.current = null;
+        }
+    }, []);
+    /**
+     * Set up pointer event listeners
+     */
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        document.addEventListener('pointermove', handlePointerMove);
+        document.addEventListener('pointerup', handlePointerUp);
+        document.addEventListener('pointercancel', handlePointerUp);
+        return () => {
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+            document.removeEventListener('pointercancel', handlePointerUp);
+        };
+    }, [isDragging, handlePointerMove, handlePointerUp]);
+    return { isDragging, handleMouseDown: handlePointerDown };
+}

package/dist/esm/src/SplitView/hooks/useSplitViewKeyboard.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Hook to handle keyboard navigation for resizing the split view.
+ *
+ * @param options - Keyboard hook options
+ */
+export declare function useSplitViewKeyboard(options: {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    rightPanelSize: number | undefined;
+    initialRightPanelSize: number;
+    minRightPanelSize: number;
+    maxRightPanelSize: number;
+    setRightPanelSize: (size: number | undefined) => void;
+    setLastRightPanelSize: (size: number | undefined) => void;
+}): {
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/esm/src/SplitView/hooks/useSplitViewKeyboard.js

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { KEYBOARD_STEP_PX } from '../constants';
+import { calculateConstrainedRightPanelSize } from '../utils/calculatePanelSize';
+/**
+ * Hook to handle keyboard navigation for resizing the split view.
+ *
+ * @param options - Keyboard hook options
+ */
+export function useSplitViewKeyboard(options) {
+    const { containerRef, rightPanelSize, initialRightPanelSize, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize, } = options;
+    /**
+     * Handle keyboard navigation for the divider
+     */
+    const handleKeyDown = useCallback((event) => {
+        if (!containerRef.current)
+            return;
+        const increaseKeys = ['ArrowLeft'];
+        const decreaseKeys = ['ArrowRight'];
+        if (![...increaseKeys, ...decreaseKeys].includes(event.key))
+            return;
+        event.preventDefault();
+        const currentSize = rightPanelSize ?? initialRightPanelSize;
+        let newSize = currentSize;
+        if (increaseKeys.includes(event.key)) {
+            newSize = currentSize + KEYBOARD_STEP_PX;
+        }
+        else if (decreaseKeys.includes(event.key)) {
+            newSize = currentSize - KEYBOARD_STEP_PX;
+        }
+        // Apply min/max constraints directly to right panel size
+        const constrainedSize = calculateConstrainedRightPanelSize(newSize, minRightPanelSize, maxRightPanelSize);
+        setRightPanelSize(constrainedSize);
+        setLastRightPanelSize(constrainedSize);
+    }, [
+        containerRef,
+        rightPanelSize,
+        initialRightPanelSize,
+        minRightPanelSize,
+        maxRightPanelSize,
+        setRightPanelSize,
+        setLastRightPanelSize,
+    ]);
+    return { handleKeyDown };
+}

package/dist/esm/src/SplitView/hooks/useSplitViewPanelVisibility.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+/**
+ * Hook to manage the visibility state of the right panel.
+ *
+ * @param isOpen - Controlled visibility state (optional)
+ *
+ * @param rightPanelSlot - The right panel content
+ *
+ * @returns Object containing visibility state and related refs
+ */
+export declare function useSplitViewPanelVisibility(isOpen: boolean | undefined, rightPanelSlot: ReactNode): {
+    isRightPanelVisible: boolean;
+    isInitialMountRef: import("react").RefObject<boolean>;
+    wasRightPanelVisibleOnMountRef: import("react").RefObject<boolean | null>;
+    hasRightPanelBeenVisible: boolean;
+    setHasRightPanelBeenVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    previousIsRightPanelVisibleRef: import("react").RefObject<boolean>;
+    lastRightPanelRef: import("react").RefObject<ReactNode>;
+};

package/dist/esm/src/SplitView/hooks/useSplitViewPanelVisibility.js

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Hook to manage the visibility state of the right panel.
+ *
+ * @param isOpen - Controlled visibility state (optional)
+ *
+ * @param rightPanelSlot - The right panel content
+ *
+ * @returns Object containing visibility state and related refs
+ */
+export function useSplitViewPanelVisibility(isOpen, rightPanelSlot) {
+    // Determine if right panel should be visible (controlled by isOpen prop only)
+    const isRightPanelVisible = isOpen ?? true;
+    // Track if this is the initial mount
+    const isInitialMountRef = useRef(true);
+    // Track if right panel was visible on initial mount
+    const wasRightPanelVisibleOnMountRef = useRef(null);
+    // Initialize wasRightPanelVisibleOnMountRef on first render only
+    if (wasRightPanelVisibleOnMountRef.current === null) {
+        wasRightPanelVisibleOnMountRef.current = isRightPanelVisible;
+    }
+    // Initialize hasRightPanelBeenVisible based on initial render state
+    const [hasRightPanelBeenVisible, setHasRightPanelBeenVisible] = useState(() => wasRightPanelVisibleOnMountRef.current ?? false);
+    // Track previous visibility state
+    // Note: This ref is updated in useSplitViewAnimation hook to ensure correct timing
+    const previousIsRightPanelVisibleRef = useRef(isRightPanelVisible);
+    // Store last seen right panel for slide-out animation
+    const lastRightPanelRef = useRef(null);
+    // Store right panel when visible for slide-out animation
+    useEffect(() => {
+        if (isRightPanelVisible) {
+            lastRightPanelRef.current = rightPanelSlot;
+        }
+    }, [rightPanelSlot, isRightPanelVisible]);
+    return {
+        isRightPanelVisible,
+        isInitialMountRef,
+        wasRightPanelVisibleOnMountRef,
+        hasRightPanelBeenVisible,
+        setHasRightPanelBeenVisible,
+        previousIsRightPanelVisibleRef,
+        lastRightPanelRef,
+    };
+}

package/dist/esm/src/SplitView/hooks/useSplitViewResize.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Hook to handle container resize: maintain right panel size and apply constraints.
+ *
+ * @param options - Resize hook options
+ */
+export declare function useSplitViewResize(options: {
+    isRightPanelVisible: boolean;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    isAnimating: boolean;
+    isDragging: boolean;
+    rightPanelSize: number | undefined;
+    minRightPanelSize: number;
+    maxRightPanelSize: number;
+    setRightPanelSize: (size: number | undefined) => void;
+    setLastRightPanelSize: (size: number | undefined) => void;
+}): void;

package/dist/esm/src/SplitView/hooks/useSplitViewResize.js

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { calculateConstrainedRightPanelSize } from '../utils/calculatePanelSize';
+/**
+ * Hook to handle container resize: maintain right panel size and apply constraints.
+ *
+ * @param options - Resize hook options
+ */
+export function useSplitViewResize(options) {
+    const { isRightPanelVisible, containerRef, isAnimating, isDragging, rightPanelSize, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize, } = options;
+    useEffect(() => {
+        if (!isRightPanelVisible || !containerRef.current || isAnimating || isDragging)
+            return;
+        const container = containerRef.current;
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const containerSize = entry.contentRect.width;
+                const currentRightPanelSize = rightPanelSize;
+                if (currentRightPanelSize !== undefined) {
+                    // Ensure right panel size doesn't exceed container size
+                    const maxAllowedSize = Math.min(maxRightPanelSize, containerSize);
+                    const constrainedRightPanelSize = calculateConstrainedRightPanelSize(currentRightPanelSize, minRightPanelSize, maxAllowedSize);
+                    // Only update if constraints were applied
+                    if (constrainedRightPanelSize !== currentRightPanelSize) {
+                        setRightPanelSize(constrainedRightPanelSize);
+                        setLastRightPanelSize(constrainedRightPanelSize);
+                    }
+                }
+            }
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [
+        isRightPanelVisible,
+        containerRef,
+        isAnimating,
+        isDragging,
+        rightPanelSize,
+        minRightPanelSize,
+        maxRightPanelSize,
+        setRightPanelSize,
+        setLastRightPanelSize,
+    ]);
+}

package/dist/esm/src/SplitView/index.d.ts

@@ -0,0 +1,2 @@
+export { SplitView } from './SplitView';
+export type { SplitViewProps } from './SplitView.types';

package/dist/esm/src/SplitView/index.js

@@ -0,0 +1 @@
+export { SplitView } from './SplitView';

package/dist/esm/src/SplitView/utils/animation.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Options for creating a slide-in animation.
+ */
+export type SlideInAnimationOptions = {
+    startSize: number;
+    targetSize: number;
+    onUpdate: (size: number) => void;
+    onComplete: () => void;
+};
+/**
+ * Options for creating a slide-out animation.
+ */
+export type SlideOutAnimationOptions = {
+    startSize: number;
+    targetSize: number;
+    onUpdate: (size: number) => void;
+    onComplete: () => void;
+};
+/**
+ * Create and start a slide-in animation using requestAnimationFrame.
+ *
+ * @param options - Animation options
+ */
+export declare function createSlideInAnimation(options: SlideInAnimationOptions): void;
+/**
+ * Create and start a slide-out animation using requestAnimationFrame.
+ *
+ * @param options - Animation options
+ */
+export declare function createSlideOutAnimation(options: SlideOutAnimationOptions): void;

package/dist/esm/src/SplitView/utils/animation.js

@@ -0,0 +1,55 @@
+import { ANIMATION_DURATION_IN_MS, ANIMATION_DURATION_OUT_MS, ANIMATION_SIZE_THRESHOLD_PX, animationEasing, } from '../constants';
+/**
+ * Create and start a slide-in animation using requestAnimationFrame.
+ *
+ * @param options - Animation options
+ */
+export function createSlideInAnimation(options) {
+    const { startSize, targetSize, onUpdate, onComplete } = options;
+    // Only animate if there's a visual difference
+    if (Math.abs(targetSize - startSize) < ANIMATION_SIZE_THRESHOLD_PX) {
+        onUpdate(targetSize);
+        onComplete();
+        return;
+    }
+    const startTime = performance.now();
+    const animate = (currentTime) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / ANIMATION_DURATION_IN_MS, 1);
+        // Apply MFUI easing function (cubic-bezier(0.5, 0, 0.25, 1)) via polynomial approximation
+        const easedProgress = animationEasing(progress);
+        const currentSize = startSize + (targetSize - startSize) * easedProgress;
+        onUpdate(currentSize);
+        if (progress < 1) {
+            requestAnimationFrame(animate);
+        }
+        else {
+            onComplete();
+        }
+    };
+    requestAnimationFrame(animate);
+}
+/**
+ * Create and start a slide-out animation using requestAnimationFrame.
+ *
+ * @param options - Animation options
+ */
+export function createSlideOutAnimation(options) {
+    const { startSize, targetSize, onUpdate, onComplete } = options;
+    const startTime = performance.now();
+    const animate = (currentTime) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / ANIMATION_DURATION_OUT_MS, 1);
+        // Apply MFUI easing function (cubic-bezier(0.5, 0, 0.25, 1)) via polynomial approximation
+        const easedProgress = animationEasing(progress);
+        const currentSize = startSize + (targetSize - startSize) * easedProgress;
+        onUpdate(currentSize);
+        if (progress < 1) {
+            requestAnimationFrame(animate);
+        }
+        else {
+            onComplete();
+        }
+    };
+    requestAnimationFrame(animate);
+}

package/dist/esm/src/SplitView/utils/calculatePanelSize.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Calculate the right panel size with min/max constraints applied.
+ *
+ * @param rightPanelSize - The desired right panel size
+ *
+ * @param minRightPanelSize - The minimum size of the right panel
+ *
+ * @param maxRightPanelSize - The maximum size of the right panel
+ *
+ * @returns The constrained right panel size
+ */
+export declare function calculateConstrainedRightPanelSize(rightPanelSize: number, minRightPanelSize: number, maxRightPanelSize: number): number;
+/**
+ * Calculate the initial right panel size based on props and saved state.
+ *
+ * @param initialRightPanelSize - The initial right panel size prop
+ *
+ * @param savedRightPanelSize - The saved right panel size from previous state (optional)
+ *
+ * @returns The calculated right panel size
+ */
+export declare function calculateInitialRightPanelSize(initialRightPanelSize: number, savedRightPanelSize?: number): number;

package/dist/esm/src/SplitView/utils/calculatePanelSize.js

@@ -0,0 +1,26 @@
+/**
+ * Calculate the right panel size with min/max constraints applied.
+ *
+ * @param rightPanelSize - The desired right panel size
+ *
+ * @param minRightPanelSize - The minimum size of the right panel
+ *
+ * @param maxRightPanelSize - The maximum size of the right panel
+ *
+ * @returns The constrained right panel size
+ */
+export function calculateConstrainedRightPanelSize(rightPanelSize, minRightPanelSize, maxRightPanelSize) {
+    return Math.max(minRightPanelSize, Math.min(rightPanelSize, maxRightPanelSize));
+}
+/**
+ * Calculate the initial right panel size based on props and saved state.
+ *
+ * @param initialRightPanelSize - The initial right panel size prop
+ *
+ * @param savedRightPanelSize - The saved right panel size from previous state (optional)
+ *
+ * @returns The calculated right panel size
+ */
+export function calculateInitialRightPanelSize(initialRightPanelSize, savedRightPanelSize) {
+    return savedRightPanelSize ?? initialRightPanelSize;
+}

package/dist/esm/src/SplitView/utils/parseSize.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties } from 'react';
+/**
+ * Convert CSS width value to number (in pixels).
+ * Currently supports number values and pixel strings (e.g., '300px').
+ * Percentage strings (e.g., '50%') are not supported yet.
+ *
+ * @param value - CSS width value (number or string)
+ *
+ * @param propName - Name of the prop for error messages (optional)
+ *
+ * @returns Number value in pixels
+ *
+ * @throws Error if value is undefined or invalid
+ */
+export declare function parseSizeToNumber(value: CSSProperties['width'], propName?: string): number;

package/dist/esm/src/SplitView/utils/parseSize.js

@@ -0,0 +1,36 @@
+/**
+ * Convert CSS width value to number (in pixels).
+ * Currently supports number values and pixel strings (e.g., '300px').
+ * Percentage strings (e.g., '50%') are not supported yet.
+ *
+ * @param value - CSS width value (number or string)
+ *
+ * @param propName - Name of the prop for error messages (optional)
+ *
+ * @returns Number value in pixels
+ *
+ * @throws Error if value is undefined or invalid
+ */
+export function parseSizeToNumber(value, propName) {
+    const propPrefix = propName ? `SplitView: ${propName}` : 'SplitView';
+    if (value === undefined) {
+        throw new Error(`${propPrefix}: Size value cannot be undefined.`);
+    }
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (typeof value === 'string') {
+        // Support pixel values like '300px'
+        const match = /^(\d+(?:\.\d+)?)px$/.exec(value);
+        if (match?.[1]) {
+            return Number.parseFloat(match[1]);
+        }
+        // Warn about unsupported string formats but don't throw to avoid breaking the component
+        const warningMessage = propName
+            ? `${propPrefix}: String size values other than pixel values (e.g., '300px') are not supported yet. Only number values (e.g., 300) or pixel strings (e.g., '300px') are supported, but got '${value}'. Falling back to 0.`
+            : `SplitView: String size values other than pixel values (e.g., '300px') are not supported yet. Only number values (e.g., 300) or pixel strings (e.g., '300px') are supported, but got '${value}'. Falling back to 0.`;
+        console.warn(warningMessage);
+        return 0;
+    }
+    throw new Error(`${propPrefix}: Invalid size value type: ${typeof value}.`);
+}

package/dist/esm/src/SplitView/utils/styles.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties } from 'react';
+/**
+ * Calculate the divider style based on animation and drag state.
+ *
+ * @param options - Style calculation options
+ *
+ * @returns The style object for the divider
+ */
+export declare function calculateDividerStyle(options: {
+    hasRightPanelBeenVisible: boolean;
+    isAnimating: boolean;
+    isDragging: boolean;
+    dividerPropsStyle?: CSSProperties;
+}): CSSProperties;
+/**
+ * Calculate the right panel style based on the current size state, visibility, and animation state.
+ *
+ * @param options - Style calculation options
+ *
+ * @returns The style object for the right panel
+ */
+export declare function calculateRightPanelStyleUnified(options: {
+    currentSize: number | undefined;
+    enableAutoUnmount: boolean;
+    isRightPanelVisible: boolean;
+    isSlideOutAnimating: boolean;
+    hasRightPanelBeenVisible: boolean;
+    isAnimating: boolean;
+    rightPanelPropsStyle?: CSSProperties;
+}): CSSProperties;

package/dist/esm/src/SplitView/utils/styles.js

@@ -0,0 +1,73 @@
+/**
+ * Calculate the divider style based on animation and drag state.
+ *
+ * @param options - Style calculation options
+ *
+ * @returns The style object for the divider
+ */
+export function calculateDividerStyle(options) {
+    const { hasRightPanelBeenVisible, isAnimating, isDragging, dividerPropsStyle } = options;
+    return {
+        // Hide the divider initially when animation is enabled and not yet started
+        ...(!hasRightPanelBeenVisible && {
+            opacity: 0,
+        }),
+        // Show the divider when animating
+        ...(isAnimating && {
+            opacity: 1,
+        }),
+        // Change cursor when dragging
+        ...(isDragging && {
+            cursor: 'col-resize',
+        }),
+        ...dividerPropsStyle,
+    };
+}
+/**
+ * Calculate the right panel style based on the current size state, visibility, and animation state.
+ *
+ * @param options - Style calculation options
+ *
+ * @returns The style object for the right panel
+ */
+export function calculateRightPanelStyleUnified(options) {
+    const { currentSize, enableAutoUnmount, isRightPanelVisible, isSlideOutAnimating, hasRightPanelBeenVisible, isAnimating, rightPanelPropsStyle, } = options;
+    // Base size styles (width, flex, flexShrink)
+    const baseStyle = {
+        flexShrink: 0,
+        ...(currentSize !== undefined ? { width: `${String(currentSize)}px`, flex: 'none' } : { width: 0, flex: 0 }),
+    };
+    // State preservation mode (enableAutoUnmount=false)
+    if (!enableAutoUnmount && // Hide the panel when not visible (but keep it mounted for state preservation)
+        !isRightPanelVisible &&
+        !isSlideOutAnimating) {
+        return {
+            ...baseStyle,
+            minWidth: 0,
+            overflow: 'hidden',
+            opacity: 0,
+            visibility: 'hidden',
+            pointerEvents: 'none',
+            display: 'none',
+            ...rightPanelPropsStyle,
+        };
+    }
+    // Animation-related styles (common for both modes)
+    const animationStyle = {};
+    if (!hasRightPanelBeenVisible) {
+        animationStyle.opacity = 0;
+    }
+    if (isAnimating) {
+        animationStyle.opacity = 1;
+        // Additional styles for state preservation mode during animation
+        if (!enableAutoUnmount) {
+            animationStyle.visibility = 'visible';
+            animationStyle.pointerEvents = 'auto';
+        }
+    }
+    return {
+        ...baseStyle,
+        ...animationStyle,
+        ...rightPanelPropsStyle,
+    };
+}

package/dist/esm/src/Stack/Stack.d.ts

@@ -0,0 +1,45 @@
+import { type StackProps } from './Stack.types';
+/**
+ * Component helps you easily create flexible and automatically distributed layouts
+ *
+ * You can stack elements in the horizontal or vertical direction,
+ * and apply a space between each element.
+ *
+ * It uses `display: flex` internally and renders a `div`.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const Stack: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    direction?: import("react").CSSProperties["flexDirection"];
+    gap?: ("horizontal.1" | "horizontal.2" | "horizontal.8" | "horizontal.3" | "horizontal.4" | "horizontal.5" | "horizontal.6" | "horizontal.7" | "horizontal.20" | "horizontal.0-1of8" | "horizontal.0-1of4" | "horizontal.0-1of2" | "horizontal.1-1of2" | "horizontal.2-1of2" | "horizontal.3-1of7" | "horizontal.3-1of2" | "horizontal.4-1of2" | "horizontal.5-1of2" | "horizontal.6-1of2" | "horizontal.7-1of2" | "vertical.1" | "vertical.2" | "vertical.3" | "vertical.0-1of8" | "vertical.0-1of4" | "vertical.0-1of2" | "vertical.1-1of2" | "vertical.2-1of2" | "vertical.0-1of6" | "vertical.0-1of3" | "vertical.0-2of3" | "vertical.0-3of4" | "vertical.0-5of6" | "vertical.0-7of8" | "vertical.1-1of8" | "vertical.1-1of4" | "vertical.1-1of3" | "vertical.1-2of3") | ("icon-and-text.horizontal" | "key-value.horizontal" | "inline.horizontal" | "inline.vertical" | "inline-check-control.horizontal" | "container.vertical" | "paragraph.horizontal" | "paragraph.vertical" | "section.horizontal" | "section.vertical") | `${number}px` | number;
+    wrap?: import("react").CSSProperties["flexWrap"];
+    alignItems?: import("react").CSSProperties["alignItems"];
+    justifyContent?: import("react").CSSProperties["justifyContent"];
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * This component is inherited from the Stack component and helps you create a horizontal stack layout.
+ *
+ * It supports a `reverse` prop to reverse the direction of the children.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const HStack: import("react").ForwardRefExoticComponent<Omit<StackProps, "direction"> & {
+    reverse?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * This component is inherited from the Stack component and helps you create a vertical stack layout.
+ *
+ * It supports a `reverse` prop to reverse the direction of the children.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const VStack: import("react").ForwardRefExoticComponent<Omit<StackProps, "direction"> & {
+    reverse?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;