@moneyforward/mfui-components 2.48.2 → 3.0.0

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

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSplitViewResize = useSplitViewResize;
-const react_1 = require("react");
-const calculatePanelSize_1 = require("../utils/calculatePanelSize");
-/**
- * Hook to handle container resize: maintain right panel size and apply constraints.
- *
- * @param options - Resize hook options
- */
-function useSplitViewResize(options) {
-    const { isRightPanelVisible, containerRef, isAnimating, isDragging, rightPanelSize, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize, } = options;
-    (0, react_1.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 = (0, calculatePanelSize_1.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/cjs/src/SplitView/index.js

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

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

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSlideInAnimation = createSlideInAnimation;
-exports.createSlideOutAnimation = createSlideOutAnimation;
-const constants_1 = require("../constants");
-/**
- * Create and start a slide-in animation using requestAnimationFrame.
- *
- * @param options - Animation options
- */
-function createSlideInAnimation(options) {
-    const { startSize, targetSize, onUpdate, onComplete } = options;
-    // Only animate if there's a visual difference
-    if (Math.abs(targetSize - startSize) < constants_1.ANIMATION_SIZE_THRESHOLD_PX) {
-        onUpdate(targetSize);
-        onComplete();
-        return;
-    }
-    const startTime = performance.now();
-    const animate = (currentTime) => {
-        const elapsed = currentTime - startTime;
-        const progress = Math.min(elapsed / constants_1.ANIMATION_DURATION_IN_MS, 1);
-        // Apply MFUI easing function (cubic-bezier(0.5, 0, 0.25, 1)) via polynomial approximation
-        const easedProgress = (0, constants_1.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
- */
-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 / constants_1.ANIMATION_DURATION_OUT_MS, 1);
-        // Apply MFUI easing function (cubic-bezier(0.5, 0, 0.25, 1)) via polynomial approximation
-        const easedProgress = (0, constants_1.animationEasing)(progress);
-        const currentSize = startSize + (targetSize - startSize) * easedProgress;
-        onUpdate(currentSize);
-        if (progress < 1) {
-            requestAnimationFrame(animate);
-        }
-        else {
-            onComplete();
-        }
-    };
-    requestAnimationFrame(animate);
-}

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

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateConstrainedRightPanelSize = calculateConstrainedRightPanelSize;
-exports.calculateInitialRightPanelSize = calculateInitialRightPanelSize;
-/**
- * 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
- */
-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
- */
-function calculateInitialRightPanelSize(initialRightPanelSize, savedRightPanelSize) {
-    return savedRightPanelSize ?? initialRightPanelSize;
-}

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

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseSizeToNumber = parseSizeToNumber;
-/**
- * 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
- */
-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/cjs/src/SplitView/utils/styles.js

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateDividerStyle = calculateDividerStyle;
-exports.calculateRightPanelStyleUnified = calculateRightPanelStyleUnified;
-/**
- * Calculate the divider style based on animation and drag state.
- *
- * @param options - Style calculation options
- *
- * @returns The style object for the divider
- */
-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
- */
-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/cjs/src/Stack/Stack.d.ts

@@ -1,45 +0,0 @@
-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>>;

package/dist/cjs/src/Stack/Stack.js

@@ -1,111 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VStack = exports.HStack = exports.Stack = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const recipes_1 = require("../../styled-system/recipes");
-const css_1 = require("../../styled-system/css");
-const tokens_1 = require("../../styled-system/tokens");
-const assertIsSpacingToken = (value) => typeof value === 'string' && value.startsWith('mfui.');
-/**
- * Check if value is a grid token shorthand
- * Examples: "horizontal.1", "vertical.0-1of2"
- *
- * @param value - Value to check
- */
-const assertIsGridToken = (value) => typeof value === 'string' && (value.startsWith('horizontal.') || value.startsWith('vertical.'));
-/**
- * Convert grid token shorthand to full token path
- * Example: "horizontal.1" -> "mfui.layout.grid.scale.horizontal.1"
- *
- * @param gap - Grid token shorthand or numeric value
- */
-const resolveGridToken = (gap) => {
-    if (typeof gap !== 'string')
-        return gap;
-    if (gap.startsWith('horizontal.') || gap.startsWith('vertical.')) {
-        const parts = gap.split('.');
-        const direction = parts[0];
-        const scale = parts.slice(1).join('.');
-        if (direction && scale) {
-            return `mfui.layout.grid.scale.${direction}.${scale}`;
-        }
-    }
-    return gap;
-};
-/**
- * Convert shorthand token name to full comfort token
- * Example: "icon-and-text.horizontal" -> "mfui.size.spacing.icon-and-text.horizontal.comfort"
- *
- * @param gap - Spacing token or numeric value
- */
-const resolveSpacingToken = (gap) => {
-    if (typeof gap !== 'string')
-        return gap;
-    // Convert shorthand to full comfort token
-    if (gap.includes('.') && !gap.includes('px')) {
-        return `mfui.size.spacing.${gap}.comfort`;
-    }
-    return gap;
-};
-/**
- * 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
- */
-exports.Stack = (0, react_1.forwardRef)(({ direction, gap, wrap, alignItems, justifyContent, children, className, style, ...props }, ref) => {
-    const classes = (0, recipes_1.stackSlotRecipe)({});
-    // Resolve gap value - handle shortcuts and token conversion
-    const resolvedGap = gap !== undefined
-        ? (() => {
-            // Priority 1: Grid tokens (new, recommended): "horizontal.1"
-            if (assertIsGridToken(gap)) {
-                const fullToken = resolveGridToken(gap);
-                if (typeof fullToken === 'string') {
-                    return (0, tokens_1.token)(`sizes.${fullToken}`);
-                }
-                return fullToken;
-            }
-            // Priority 2: Spacing tokens (deprecated): "inline.horizontal"
-            const fullToken = resolveSpacingToken(gap);
-            return assertIsSpacingToken(fullToken) ? (0, tokens_1.token)(`spacing.${fullToken}`) : fullToken;
-        })()
-        : undefined;
-    // Only include styles for explicitly provided props
-    const inlineStyle = {
-        ...style,
-        ...(direction !== undefined && { flexDirection: direction }),
-        ...(gap !== undefined && { gap: resolvedGap }),
-        ...(wrap !== undefined && { flexWrap: wrap }),
-        ...(alignItems !== undefined && { alignItems }),
-        ...(justifyContent !== undefined && { justifyContent }),
-    };
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, ...props, className: (0, css_1.cx)(classes.root, 'mfui-Stack__root', className), style: inlineStyle, children: children }));
-});
-/**
- * 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
- */
-exports.HStack = (0, react_1.forwardRef)(({ reverse = false, ...props }, ref) => ((0, jsx_runtime_1.jsx)(exports.Stack, { ref: ref, direction: reverse ? 'row-reverse' : 'row', ...props })));
-/**
- * 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
- */
-exports.VStack = (0, react_1.forwardRef)(({ reverse = false, ...props }, ref) => ((0, jsx_runtime_1.jsx)(exports.Stack, { ref: ref, direction: reverse ? 'column-reverse' : 'column', ...props })));

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

@@ -1,81 +0,0 @@
-import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from 'react';
-import { type SpacingToken, type SizeToken } from '../../styled-system/tokens';
-type GridScaleHorizontalToken = Extract<SizeToken, `mfui.layout.grid.scale.horizontal.${string}`>;
-type GridScaleVerticalToken = Extract<SizeToken, `mfui.layout.grid.scale.vertical.${string}`>;
-type GridScaleHorizontalValue = GridScaleHorizontalToken extends `mfui.layout.grid.scale.horizontal.${infer Value}` ? Value : never;
-type GridScaleVerticalValue = GridScaleVerticalToken extends `mfui.layout.grid.scale.vertical.${infer Value}` ? Value : never;
-type GridScaleTokenShorthand = `horizontal.${GridScaleHorizontalValue}` | `vertical.${GridScaleVerticalValue}`;
-type SpacingTokens = Extract<SpacingToken, `mfui.size.spacing.${string}.comfort`>;
-type SpacingTokenName = SpacingTokens extends `mfui.size.spacing.${infer TokenName}.comfort` ? TokenName : never;
-export type StackProps = {
-    /**
-     * The children of the stack.
-     */
-    children?: ReactNode;
-    /**
-     * Direction of the stack, same as `flex-direction` CSS property
-     *
-     * @default undefined
-     */
-    direction?: CSSProperties['flexDirection'];
-    /**
-     * Gap between children, same as `gap` CSS property
-     *
-     * Accepts primitive grid tokens (recommended), spacing design tokens (deprecated), pixel strings, or numbers
-     *
-     * **Recommended:** Use primitive grid tokens like `"horizontal.1"` (14px) or `"vertical.0-1of2"` (12px)
-     *
-     * **Deprecated:** Semantic spacing tokens like `"inline.horizontal"` or `"paragraph.vertical"` are deprecated
-     * and will be removed in the next major version. See migration guide below.
-     *
-     * **Migration Guide:**
-     * - `"inline.horizontal"` → `"horizontal.0-1of2"` (7px)
-     * - `"paragraph.horizontal"` → `"horizontal.1"` (14px)
-     * - `"paragraph.vertical"` → `"vertical.1"` (24px)
-     * - `"section.horizontal"` → `"horizontal.2"` (28px)
-     * - `"section.vertical"` → `"vertical.2"` (48px)
-     * - `"container.vertical"` → `"vertical.0-1of2"` (12px)
-     *
-     * @default 0
-     */
-    gap?: GridScaleTokenShorthand | SpacingTokenName | `${number}px` | number;
-    /**
-     * Whether to wrap children or not, same as `flex-wrap` CSS property
-     *
-     * @default undefined
-     */
-    wrap?: CSSProperties['flexWrap'];
-    /**
-     * Alignment of children on the cross axis, same as `align-items` CSS property
-     *
-     * @default undefined
-     */
-    alignItems?: CSSProperties['alignItems'];
-    /**
-     *  Alignment of children on the main axis, same as `justify-content` CSS property
-     *
-     * @default undefined
-     */
-    justifyContent?: CSSProperties['justifyContent'];
-} & ComponentPropsWithoutRef<'div'>;
-export type HStackProps = Omit<StackProps, 'direction'> & {
-    /**
-     *  Direction of the horizontal stack
-     *  - When `false`, it will be `row`
-     *  - When `true`, it will be `row-reverse`
-     *
-     * @default false
-     */
-    reverse?: boolean;
-};
-export type VStackProps = Omit<StackProps, 'direction'> & {
-    /**
-     *  Direction of the vertical stack.
-     *  - When `false`, it will be `column`
-     *  - When `true`, it will be `column-reverse`
-     *
-     * @default false
-     */
-    reverse?: boolean;
-};
-export {};

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

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

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

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VStack = exports.HStack = exports.Stack = void 0;
-var Stack_1 = require("./Stack");
-Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });
-Object.defineProperty(exports, "HStack", { enumerable: true, get: function () { return Stack_1.HStack; } });
-Object.defineProperty(exports, "VStack", { enumerable: true, get: function () { return Stack_1.VStack; } });

package/dist/cjs/src/StatusLabel/StatusLabel.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusLabel = 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");
-const Typography_1 = require("../Typography");
-/**
- * The StatusLabel component displays a simple status indicator with optional icon.
- * The component displays a label text with an optional icon, and supports two size variants:
- * - 'medium' (default): Standard size status label
- * - 'small': Compact size status label
- *
- * Also extends the props of `<span>` element.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
- */
-exports.StatusLabel = (0, react_1.forwardRef)(({ label, icon, size = 'medium', className, ...props }, ref) => {
-    const classes = (0, recipes_1.statusLabelSlotRecipe)({ size });
-    return ((0, jsx_runtime_1.jsxs)("span", { ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-StatusLabel__root', className), ...props, children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.icon, 'mfui-StatusLabel__icon'), children: icon }) : null, (0, jsx_runtime_1.jsx)(Typography_1.Typography, { as: "span", className: (0, css_1.cx)(classes.label, 'mfui-StatusLabel__label'), variant: size === 'medium' ? 'body' : 'condensedBody', children: label })] }));
-});

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

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

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

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

package/dist/cjs/src/SubNavigation/SubNavigation.js

@@ -1,84 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubNavigation = SubNavigation;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-const FocusIndicator_1 = require("../FocusIndicator");
-const Typography_1 = require("../Typography");
-/**
- * This component is for the navigation links under the main navigation.
- */
-function SubNavigation({ orientation = 'vertical', navigationItems, customLinkComponent, className, }) {
-    const hasLabelIcon = navigationItems.some(({ labelIcon }) => !!labelIcon);
-    const classes = (0, recipes_1.subNavigationSlotRecipe)({ orientation, hasLabelIcon });
-    return ((0, jsx_runtime_1.jsx)("nav", { className: (0, css_1.cx)(classes.root, 'mfui-SubNavigation__root', className), children: (0, jsx_runtime_1.jsx)("ul", { className: (0, css_1.cx)(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0) }, index))) }) }));
-}
-/**
- * Render a navigation item based on the following conditions:
- * - a link without children
- * - a link & disclosure icon with children
- * - a disclosure button with children
- *
- * This function is splitted from the SubNavigation component to allow for recursive rendering for deep nesting.
- *
- * @param navigationItem - The navigation item to render.
- *
- * @param customLinkComponent - The custom link component to use for the navigation item.
- *
- * @param classes - The classes to use for the navigation item.
- *
- * @param nestLevel - The nest level of the navigation item.
- *
- * @returns The rendered navigation item.
- */
-const renderNavigationItem = (navigationItem, customLinkComponent, classes, nestLevel) => {
-    const { label, href, labelIcon, statusSlot, locked, lockIconProps, children } = navigationItem;
-    if (children === undefined) {
-        return ((0, jsx_runtime_1.jsx)(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes }));
-    }
-    if (href) {
-        // The the parent item will be rendered as a link with separated disclosure icon button.
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes }), (0, jsx_runtime_1.jsx)(NestedNavigationList, { summarySlot: (0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: (0, css_1.cx)(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicCollapsed, { "aria-label": label }) }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1 })] }));
-    }
-    // The the parent item will be rendered as a disclosure button with an icon.
-    return ((0, jsx_runtime_1.jsx)(NestedNavigationList, { summarySlot: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }), (0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: (0, css_1.cx)(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicCollapsed, { "aria-label": "" }) })] }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1 }));
-};
-/**
- * This is a group of a text label, an optional icon, and a status.
- * This is used for all navigation links and parent items for disclosure buttons in SubNavigation.
- */
-function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusSlot, classes, }) {
-    // If locked=true, display <Lock /> icon in preference to any other status of the statusSlot option.
-    const renderStatus = () => {
-        if (locked) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.statusSlot, 'mfui-SubNavigation__statusSlot'), children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Lock, { "aria-label": lockIconProps?.['aria-label'] ?? 'ロックされています' }) }));
-        }
-        if (statusSlot) {
-            return (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.statusSlot, 'mfui-SubNavigation__statusSlot'), children: statusSlot });
-        }
-        return null;
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [labelIcon ? (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.labelIcon, 'mfui-SubNavigation__labelIcon'), children: labelIcon }) : null, (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "strongControlLabel", className: (0, css_1.cx)(classes.label, 'mfui-SubNavigation__label'), children: label }), renderStatus()] }));
-}
-/**
- * This is a link that has NavigationLabelGroup.
- * This is used for all navigation links in SubNavigation.
- */
-function NavigationLink({ navigationItem, customLinkComponent, classes, }) {
-    const { label, href, isCurrent, isExternal, labelIcon, statusSlot, locked, lockIconProps } = navigationItem;
-    if (customLinkComponent && !isExternal) {
-        const Tag = customLinkComponent;
-        return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)(Tag, { href: href, className: (0, css_1.cx)(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, children: (0, jsx_runtime_1.jsx)(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)("a", { href: href, target: isExternal ? '_blank' : undefined, className: (0, css_1.cx)(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, rel: "noreferrer", children: (0, jsx_runtime_1.jsx)(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
-}
-/**
- * This is a details element that contains a list of nested navigation links.
- */
-function NestedNavigationList({ summarySlot, nestedNavigationItems, customLinkComponent, classes, nestLevel, }) {
-    // Check whether all descendants have isCurrent=true by calling itself recursively.
-    const isCurrentPathInChildren = (children) => children?.some(({ isCurrent, children }) => isCurrent || (children && isCurrentPathInChildren(children))) || false;
-    return ((0, jsx_runtime_1.jsxs)("details", { open: isCurrentPathInChildren(nestedNavigationItems), className: (0, css_1.cx)(classes.details, 'mfui-SubNavigation__details'), children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)("summary", { className: (0, css_1.cx)(classes.summary, 'mfui-SubNavigation__summary'), children: summarySlot }) }), (0, jsx_runtime_1.jsx)("ul", { className: (0, css_1.cx)(classes.list, 'mfui-SubNavigation__list'), children: nestedNavigationItems.map((nestedNavigationItem, index) => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.nestedListItem, 'mfui-SubNavigation__nestedListItem'), "data-mfui-nest-level": nestLevel, children: nestedNavigationItem.children === undefined ? ((0, jsx_runtime_1.jsx)(NavigationLink, { navigationItem: nestedNavigationItem, customLinkComponent: customLinkComponent, classes: classes })) : (renderNavigationItem(nestedNavigationItem, customLinkComponent, classes, nestLevel + 1)) }, index))) })] }));
-}

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

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

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

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