@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/SelectBox/utils/getFlatOptions.d.ts

@@ -0,0 +1,28 @@
+import { type BasedAdditionalProps, type SelectBoxOption } from '../SelectBox.types';
+/**
+ * Flattens a (potentially) nested SelectBox options array into a single–level array of selectable options.
+ *
+ * Group options (objects that contain an `options` property) are traversed and their selectable child options are
+ * collected. Only options that satisfy `isSelectableOption` (i.e. have a `value`) are included in the resulting
+ * array.
+ *
+ * This utility is primarily used to simplify focus-management and keyboard-navigation logic inside the SelectBox
+ * component.
+ *
+ * @param options - The (possibly nested) options array.
+ *
+ * @returns A flat array that contains only selectable options in the same order they appear visually.
+ */
+export declare function getFlatOptions<T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps>(options: (SelectBoxOption<T, AdditionalProps> | null | undefined)[]): Extract<SelectBoxOption<T, AdditionalProps>, {
+    value?: T;
+}>[];
+/**
+ * Escapes a string or number for use as a CSS attribute value selector.
+ * Uses CSS.escape if available, otherwise falls back to a polyfill.
+ * See: https://mathiasbynens.be/notes/css-escapes
+ *
+ * @param value - The value to escape for use in a CSS selector
+ *
+ * @returns The escaped string
+ */
+export declare function escapeAttributeSelector(value: string | number): string;

package/dist/cjs/src/SelectBox/utils/getFlatOptions.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFlatOptions = getFlatOptions;
+exports.escapeAttributeSelector = escapeAttributeSelector;
+const isSelectableOption_1 = require("./isSelectableOption");
+/**
+ * Flattens a (potentially) nested SelectBox options array into a single–level array of selectable options.
+ *
+ * Group options (objects that contain an `options` property) are traversed and their selectable child options are
+ * collected. Only options that satisfy `isSelectableOption` (i.e. have a `value`) are included in the resulting
+ * array.
+ *
+ * This utility is primarily used to simplify focus-management and keyboard-navigation logic inside the SelectBox
+ * component.
+ *
+ * @param options - The (possibly nested) options array.
+ *
+ * @returns A flat array that contains only selectable options in the same order they appear visually.
+ */
+function getFlatOptions(options) {
+    return options.flatMap((option) => {
+        if (option && 'options' in option && Array.isArray(option.options)) {
+            return option.options.filter(isSelectableOption_1.isSelectableOption);
+        }
+        if (option && (0, isSelectableOption_1.isSelectableOption)(option)) {
+            return [option];
+        }
+        return [];
+    });
+}
+/**
+ * Escapes a string or number for use as a CSS attribute value selector.
+ * Uses CSS.escape if available, otherwise falls back to a polyfill.
+ * See: https://mathiasbynens.be/notes/css-escapes
+ *
+ * @param value - The value to escape for use in a CSS selector
+ *
+ * @returns The escaped string
+ */
+function escapeAttributeSelector(value) {
+    const stringValue = String(value);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (typeof window !== 'undefined' && window.CSS && typeof window.CSS.escape === 'function') {
+        return window.CSS.escape(stringValue);
+    }
+    // Polyfill for CSS.escape
+    // https://github.com/mathiasbynens/CSS.escape
+    function escapeChar(c) {
+        const code = c.codePointAt(0);
+        const hex = code !== undefined ? code.toString(16).toUpperCase() : '';
+        if (!hex)
+            return '';
+        return `\\${hex} `;
+    }
+    // eslint-disable-next-line unicorn/prefer-string-replace-all
+    return stringValue.replace(/[^a-zA-Z0-9\u00A0-\u10FFFF_-]/g, escapeChar);
+}

package/dist/cjs/src/SelectBox/utils/isSelectableOption.d.ts

@@ -0,0 +1,17 @@
+import { type BasedAdditionalProps, type SelectBoxOption } from '../SelectBox.types';
+/**
+ * Type guard to check if an option is a selectable option (has value and may have disabled)
+ *
+ * @param option - The option to check
+ *
+ * @returns True if the option has a value (is not a group label)
+ */
+export declare function isSelectableOption<T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps>(option: SelectBoxOption<T, AdditionalProps>): option is Extract<SelectBoxOption<T, AdditionalProps>, {
+    value?: T;
+}>;
+/**
+ * Returns true if the option is selectable and disabled.
+ *
+ * @param option - Option to check
+ */
+export declare function isOptionDisabled<T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps>(option: SelectBoxOption<T, AdditionalProps>): boolean;

package/dist/cjs/src/SelectBox/utils/isSelectableOption.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSelectableOption = isSelectableOption;
+exports.isOptionDisabled = isOptionDisabled;
+/**
+ * Type guard to check if an option is a selectable option (has value and may have disabled)
+ *
+ * @param option - The option to check
+ *
+ * @returns True if the option has a value (is not a group label)
+ */
+function isSelectableOption(option) {
+    return 'value' in option;
+}
+/**
+ * Returns true if the option is selectable and disabled.
+ *
+ * @param option - Option to check
+ */
+function isOptionDisabled(option) {
+    return isSelectableOption(option) && 'disabled' in option && !!option.disabled;
+}

package/dist/cjs/src/SidePane/SidePane.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The general purpose SidePane component.
+ * This component extends the props of `<div>` element with `role="dialog"`.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+ */
+export declare const SidePane: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    title?: string;
+    renderHeading?: (options: import("./SidePane.types").SidePaneRenderOptions) => import("react").ReactNode;
+    actionSlot?: import("react").ReactNode;
+    position?: import("../../styled-system/recipes").SidePaneSlotRecipeVariant["position"];
+    closeButtonProps?: {
+        isCollapseIcon?: boolean;
+    } & Pick<import("react").ComponentPropsWithoutRef<"button">, "aria-label">;
+    targetDOMNode?: HTMLElement | null;
+    enableModal?: boolean;
+    disableBackdropClose?: boolean;
+    enableAutoUnmount?: boolean;
+    insideProps?: {
+        className?: string;
+    };
+    open?: boolean;
+    onClose?: import("./SidePane.types").OnCloseFunction;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "open" | "onClose"> & {
+    ref?: (import("react").RefObject<HTMLDivElement | null> | import("react").RefCallback<HTMLDivElement | null> | null) | undefined;
+} & import("react").Attributes>;

package/dist/cjs/src/SidePane/SidePane.js

@@ -0,0 +1,64 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePane = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const css_1 = require("../../styled-system/css");
+const Heading_1 = require("../Heading");
+const IconButton_1 = require("../IconButton");
+const recipes_1 = require("../../styled-system/recipes");
+const useSidePaneStateController_1 = require("./hooks/useSidePaneStateController");
+const useFocusTrap_1 = require("../utilities/dom/useFocusTrap");
+const compatibleForwardRef_1 = require("../utilities/react/compatibleForwardRef");
+const Portal_1 = require("../Portal");
+/**
+ * The general purpose SidePane component.
+ * This component extends the props of `<div>` element with `role="dialog"`.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+ */
+exports.SidePane = (0, compatibleForwardRef_1.compatibleForwardRef)(({ open, title, renderHeading, onClose, className, children, actionSlot, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
+    const classes = (0, recipes_1.sidePaneSlotRecipe)({ position, nonModal: !enableModal });
+    const { localOpen, handleCloseSidePane, handleStopCloseSidePane, sidePaneElement, setSidePaneElement } = (0, useSidePaneStateController_1.useSidePaneStateController)({
+        open,
+        onClose,
+        ref,
+    });
+    const handleBackdropClick = (0, react_1.useCallback)(() => {
+        if (!disableBackdropClose) {
+            handleCloseSidePane();
+        }
+    }, [disableBackdropClose, handleCloseSidePane]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            event.preventDefault();
+            handleCloseSidePane();
+        }
+        props.onKeyDown?.(event);
+    }, [handleCloseSidePane, props]);
+    // Get the focus trap handler
+    const { handleOnKeyDown: focusTrapKeyHandler } = (0, useFocusTrap_1.useFocusTrap)({
+        onKeyDown: handleKeyDown,
+    });
+    // Only use focus trap for modal SidePanes
+    const handleOnKeyDown = enableModal ? focusTrapKeyHandler : handleKeyDown;
+    const closeButtonIcon = (0, react_1.useMemo)(() => {
+        if (!closeButtonProps?.isCollapseIcon) {
+            return (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Close, {});
+        }
+        if (position === 'left') {
+            return (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PaneExpansionToLeft, {});
+        }
+        return (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PaneExpansionToRight, {});
+    }, [closeButtonProps?.isCollapseIcon, position]);
+    const targetElement = (0, Portal_1.useAutomaticTargetDomNode)(targetDOMNode, sidePaneElement);
+    const shouldRenderContent = enableAutoUnmount ? localOpen : true;
+    const headingNode = title ? ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { variant: "pageHeading2", tag: "h2", children: title })) : null;
+    return ((0, jsx_runtime_1.jsx)(Portal_1.TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { targetDOMNode: targetElement, children: (0, jsx_runtime_1.jsxs)("div", { ref: setSidePaneElement, role: "dialog", ...props, className: (0, css_1.cx)(classes.root, 'mfui-SidePane__root', className), tabIndex: -1, style: {
+                    ...props.style,
+                    ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
+                }, onKeyDown: handleOnKeyDown, children: [enableModal ? ((0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "backdrop", className: (0, css_1.cx)(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-mfui-content": "inside", className: (0, css_1.cx)(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, css_1.cx)(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.title, 'mfui-SidePane__title'), children: headingNode })), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), (0, jsx_runtime_1.jsx)("main", { className: (0, css_1.cx)(classes.content, 'mfui-SidePane__content'), children: children })] })] }) })) : null }));
+});

package/dist/cjs/src/SidePane/SidePane.types.d.ts

@@ -0,0 +1,134 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type SidePaneSlotRecipeVariant } from '../../styled-system/recipes';
+export type OnCloseFunction = () => void;
+export type SidePaneRenderOptions = {
+    /**
+     * The original heading element wrapped in <h2> tag.
+     * This ensures proper semantic HTML structure and accessibility.
+     */
+    headingNode: ReactNode;
+};
+/**
+ * SidePaneProps is a type that defines the properties for the SidePane component.
+ *
+ * It includes:
+ * - `title`: The heading title of the dialog.
+ * - `isOpen` and `onClose`: These props are conditionally required based on whether the component is controlled or uncontrolled.
+ *   - If `isOpen` is defined, `onClose` is required (controlled component).
+ *   - If `isOpen` is undefined, `onClose` is optional (uncontrolled component).
+ * - Additional props from `ComponentPropsWithoutRef<'div'>` are also included.
+ */
+export type SidePaneProps = {
+    /**
+     * The main content of the side pane.
+     */
+    children?: ReactNode;
+    /**
+     * The heading title of the dialog.
+     */
+    title?: string;
+    /**
+     * Custom render function for the heading area.
+     * Provides the original headingNode wrapped in <h2> tag for flexible layout composition.
+     * When provided, this takes precedence over the default title rendering.
+     *
+     * @param options - Contains the headingNode for layout composition
+     *
+     * @returns ReactNode - Custom layout containing the headingNode
+     *
+     * @example
+     * ```tsx
+     * <SidePane
+     *   title="Settings"
+     *   renderHeading={({ headingNode }) => (
+     *     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+     *       <SettingsIcon />
+     *       {headingNode}
+     *     </div>
+     *   )}
+     * />
+     * ```
+     */
+    renderHeading?: (options: SidePaneRenderOptions) => ReactNode;
+    /**
+     * ReactNode which will be displayed on the right of the SidePane and on the left of Close Icon of the SidePane.
+     * Usually, we leave Buttons there
+     *
+     * @default undefined
+     */
+    actionSlot?: ReactNode;
+    /**
+     * The position of the side pane.
+     * This prop is optional. We only support two positions: 'left' and 'right'
+     *
+     * @default 'right'
+     */
+    position?: SidePaneSlotRecipeVariant['position'];
+    /**
+     * The properties for the close button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the close button. default is '閉じる'.
+     *
+     * @property isCollapseIcon - Whether the close button displays a collapse icon instead of Close (X) icon.
+     *   If true, shows PaneExpansionToRight (>>) icon when position is 'right',
+     *   or PaneExpansionToLeft (<<) icon when position is 'left'.
+     *   default is false.
+     */
+    closeButtonProps?: {
+        isCollapseIcon?: boolean;
+    } & Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
+    /**
+     * The DOM node where the side pane should be rendered.
+     *
+     * If provided, the pane is rendered inside this node. Otherwise, a suitable DOM
+     * node is chosen automatically.
+     *
+     * @default undefined
+     */
+    targetDOMNode?: HTMLElement | null;
+    /**
+     * Enable modal mode of the SidePane. When set to true,
+     * the SidePane will render the backdrop and interaction
+     * with the underlying UI will be blocked.
+     *
+     * @default false
+     */
+    enableModal?: boolean;
+    /**
+     * Disables closing the side pane when clicking on the backdrop (modal mode only).
+     * When true, the side pane can only be closed via buttons or the close button.
+     *
+     * @default false
+     */
+    disableBackdropClose?: boolean;
+    /**
+     * Enable auto unmounting of the side pane content when it's not displayed.
+     * When true, the side pane content will return null instead of hiding via CSS.
+     *
+     * @default true
+     */
+    enableAutoUnmount?: boolean;
+    /**
+     * Additional props to apply to the inside container element of the SidePane.
+     * This element wraps the header and content sections.
+     *
+     * @default undefined
+     */
+    insideProps?: {
+        /**
+         * Additional class name to apply to the inside container element.
+         */
+        className?: string;
+    };
+    /**
+     * Whether the side pane is shown or not.
+     * This prop is required when using the side pane as a controlled component.
+     */
+    open?: boolean;
+    /**
+     * The handler to close the side pane.
+     * This prop is required when using the side pane as a controlled component.
+     */
+    onClose?: OnCloseFunction;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'open' | 'onClose'>;

package/dist/cjs/src/SidePane/SidePane.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/SidePane/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ANIMATION_DURATION_IN = "0.35s";
+export declare const ANIMATION_DURATION_OUT_IN_MS = 250;
+export declare const ANIMATION_DURATION_OUT: string;

package/dist/cjs/src/SidePane/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ANIMATION_DURATION_OUT = exports.ANIMATION_DURATION_OUT_IN_MS = exports.ANIMATION_DURATION_IN = void 0;
+exports.ANIMATION_DURATION_IN = '0.35s';
+exports.ANIMATION_DURATION_OUT_IN_MS = 250;
+exports.ANIMATION_DURATION_OUT = `${(exports.ANIMATION_DURATION_OUT_IN_MS / 1000).toString()}s`;

package/dist/cjs/src/SidePane/hooks/useSidePaneOpenStateWithAnimation.d.ts

@@ -0,0 +1,8 @@
+export declare function useSidePaneOpenStateWithAnimation({ open, sidePaneElement, }: {
+    open: boolean | undefined;
+    sidePaneElement: HTMLDivElement | null;
+}): {
+    localOpen: boolean | undefined;
+    openSidePane: () => void;
+    closeSidePane: () => void;
+};

package/dist/cjs/src/SidePane/hooks/useSidePaneOpenStateWithAnimation.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidePaneOpenStateWithAnimation = useSidePaneOpenStateWithAnimation;
+const react_1 = require("react");
+const constants_1 = require("../constants");
+function useSidePaneOpenStateWithAnimation({ open, sidePaneElement, }) {
+    const [localOpen, setLocalOpen] = (0, react_1.useState)(open);
+    const timerRef = (0, react_1.useRef)(null);
+    const openSidePane = (0, react_1.useCallback)(() => {
+        timerRef.current && clearTimeout(timerRef.current);
+        sidePaneElement?.classList.remove('out');
+        setLocalOpen(true);
+        sidePaneElement?.classList.add('in');
+    }, [sidePaneElement]);
+    const closeSidePane = (0, react_1.useCallback)(() => {
+        // Remove out class and add in class for animation
+        sidePaneElement?.classList.remove('in');
+        sidePaneElement?.classList.add('out');
+        // Clear timer if it exists
+        timerRef.current && clearTimeout(timerRef.current);
+        // MUST set timeout and wait until the animation is finished
+        timerRef.current = setTimeout(() => {
+            setLocalOpen(false);
+        }, constants_1.ANIMATION_DURATION_OUT_IN_MS);
+    }, [sidePaneElement]);
+    // Cleanup timer on unmount
+    (0, react_1.useEffect)(() => () => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    return {
+        localOpen,
+        openSidePane,
+        closeSidePane,
+    };
+}

package/dist/cjs/src/SidePane/hooks/useSidePaneStateController.d.ts

@@ -0,0 +1,27 @@
+import { type ForwardedRef } from 'react';
+type UseSidePaneStateController = {
+    open?: boolean;
+    onClose?: () => void;
+    ref?: ForwardedRef<HTMLDivElement | null>;
+};
+/**
+ * Custom hook to control the open/close state of a SidePane.
+ *
+ * This hook provides functionality to open or close a SidePane based on the `open` flag.
+ *
+ * @param options - The options for controlling the SidePane state.
+ *
+ * @param options.open - Flag indicating if the SidePane should be open.
+ *
+ * @param options.onClose - Callback function to execute when closing the SidePane.
+ *
+ * @returns Object containing functions to handle closing the SidePane and ref Object to attach Dialog element.
+ */
+export declare function useSidePaneStateController({ open, onClose, ref }: UseSidePaneStateController): {
+    localOpen: boolean | undefined;
+    handleCloseSidePane: () => void;
+    handleStopCloseSidePane: (event: React.MouseEvent<HTMLDivElement>) => void;
+    sidePaneElement: HTMLDivElement | null;
+    setSidePaneElement: (element: HTMLDivElement | null) => void;
+};
+export {};

package/dist/cjs/src/SidePane/hooks/useSidePaneStateController.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidePaneStateController = useSidePaneStateController;
+const react_1 = require("react");
+const useUpdateEffect_1 = require("../../utilities/effect/useUpdateEffect");
+const useSidePaneOpenStateWithAnimation_1 = require("./useSidePaneOpenStateWithAnimation");
+/**
+ * Custom hook to control the open/close state of a SidePane.
+ *
+ * This hook provides functionality to open or close a SidePane based on the `open` flag.
+ *
+ * @param options - The options for controlling the SidePane state.
+ *
+ * @param options.open - Flag indicating if the SidePane should be open.
+ *
+ * @param options.onClose - Callback function to execute when closing the SidePane.
+ *
+ * @returns Object containing functions to handle closing the SidePane and ref Object to attach Dialog element.
+ */
+function useSidePaneStateController({ open, onClose, ref }) {
+    const [sidePaneElement, setSidePaneElement] = (0, react_1.useState)(null);
+    const { localOpen, openSidePane, closeSidePane } = (0, useSidePaneOpenStateWithAnimation_1.useSidePaneOpenStateWithAnimation)({ open, sidePaneElement });
+    const setSidePaneElementRef = (0, react_1.useCallback)((element) => {
+        setSidePaneElement(element);
+        const refObject = ref;
+        if (!refObject)
+            return;
+        if (typeof refObject === 'function') {
+            refObject(element);
+        }
+        else {
+            refObject.current = element;
+        }
+    }, [ref]);
+    // Whenever the `open` prop changes, update the local state.
+    (0, useUpdateEffect_1.useUpdateEffect)(() => {
+        open ? openSidePane() : closeSidePane();
+    }, [open, openSidePane, closeSidePane]);
+    /*
+     * Handles the close action for the side pane.
+     */
+    const handleCloseSidePane = (0, react_1.useCallback)(() => {
+        if (open !== undefined) {
+            onClose?.();
+        }
+        else {
+            closeSidePane();
+            onClose?.();
+        }
+    }, [closeSidePane, open, onClose]);
+    // Function to prevent the side pane from closing when clicking inside the side pane.
+    const handleStopCloseSidePane = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+    }, []);
+    // Autofocus to the SidePane itself when it opens
+    (0, react_1.useEffect)(() => {
+        if (!localOpen)
+            return;
+        sidePaneElement?.focus();
+    }, [sidePaneElement, localOpen]);
+    return {
+        localOpen,
+        handleCloseSidePane,
+        handleStopCloseSidePane,
+        sidePaneElement,
+        setSidePaneElement: setSidePaneElementRef,
+    };
+}

package/dist/cjs/src/SidePane/index.d.ts

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

package/dist/cjs/src/SidePane/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePane = void 0;
+var SidePane_1 = require("./SidePane");
+Object.defineProperty(exports, "SidePane", { enumerable: true, get: function () { return SidePane_1.SidePane; } });

package/dist/cjs/src/Skeleton/Skeleton.d.ts

@@ -0,0 +1,5 @@
+import { type SkeletonProps } from './Skeleton.types';
+/**
+ * The Skeleton component is used to indicate loading state of content before the data gets loaded.
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/src/Skeleton/Skeleton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../styled-system/css");
+const recipes_1 = require("../../styled-system/recipes");
+/**
+ * The Skeleton component is used to indicate loading state of content before the data gets loaded.
+ */
+exports.Skeleton = (0, react_1.forwardRef)(({ className }, ref) => {
+    const classes = (0, recipes_1.skeletonSlotRecipe)();
+    return (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-Skeleton__root', className) });
+});

package/dist/cjs/src/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The props for the Skeleton component.
+ */
+export type SkeletonProps = {
+    /**
+     * The additional class name for the root element.
+     */
+    className?: string;
+};

package/dist/cjs/src/Skeleton/Skeleton.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/Skeleton/index.d.ts

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

package/dist/cjs/src/Skeleton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+var Skeleton_1 = require("./Skeleton");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });

package/dist/cjs/src/SplitView/SplitView.d.ts

@@ -0,0 +1,33 @@
+/**
+ * A resizable split layout component with two panels.
+ *
+ * Users can adjust panel sizes by dragging the divider between panels.
+ * The right panel can be shown or hidden using the `isOpen` prop.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(true);
+ *
+ * <SplitView
+ *   leftPanelSlot={<div>Left Panel</div>}
+ *   rightPanelSlot={<div>Right Panel</div>}
+ *   isOpen={isOpen}
+ *   initialRightPanelSize={300}
+ *   minRightPanelSize={200}
+ *   maxRightPanelSize={500}
+ *   style={{ minWidth: '600px' }}
+ * />
+ * ```
+ */
+export declare const SplitView: import("react").ForwardRefExoticComponent<{
+    leftPanelSlot: import("react").ReactNode;
+    rightPanelSlot: import("react").ReactNode;
+    isOpen?: boolean;
+    initialRightPanelSize: import("react").CSSProperties["width"];
+    minRightPanelSize: import("react").CSSProperties["minWidth"];
+    maxRightPanelSize: import("react").CSSProperties["maxWidth"];
+    leftPanelProps?: import("react").ComponentPropsWithoutRef<"div">;
+    rightPanelProps?: import("react").ComponentPropsWithoutRef<"div">;
+    dividerProps?: import("react").ComponentPropsWithoutRef<"div">;
+    enableAutoUnmount?: boolean;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;