@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,36 @@
+import { type HTMLProps, type ReactElement } from 'react';
+import { type FocusIndicatorSlotRecipeVariant } from '../../styled-system/recipes';
+type FocusableChildProps = HTMLProps<HTMLElement>;
+export type FocusIndicatorProps = {
+    /**
+     * The position of the FocusIndicator.
+     * This prop changes the focus indicator style between 'outside' and 'inside'.
+     *
+     * When the focusable element is adjacent to other elements, set position to 'inside'
+     * to prevent the focus indicator from overlapping with neighboring elements.
+     *
+     * @default 'outside'
+     */
+    position?: FocusIndicatorSlotRecipeVariant['position'];
+    /**
+     * Hide the white border from the focus outline.
+     *
+     * When true, uses a seamless outline without white border, suitable for small elements like checkboxes.
+     * When false (default), uses standard outline with white border for better contrast.
+     *
+     * @default false
+     */
+    hideWhiteBorder?: boolean;
+    /**
+     * Disables the nested focus indicator.
+     *
+     * @default false
+     */
+    disableNestedFocus?: boolean;
+    /**
+     * The children to be wrapped by the FocusIndicator.
+     * Must be able to receive `onFocus` and `onBlur` props.
+     */
+    children: ReactElement<FocusableChildProps>;
+};
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { type GlobalHeaderProps } from './GlobalHeader.types';
+/**
+ * The global header component.
+ * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
+ */
+export declare function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, logoSlot, rightPaneSlot, disableResponsive, }: GlobalHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/GlobalHeader/GlobalHeader.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalHeader = GlobalHeader;
+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 IconButton_1 = require("../IconButton");
+const Tooltip_1 = require("../Tooltip");
+/**
+ * The global header component.
+ * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
+ */
+function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, logoSlot, rightPaneSlot, disableResponsive = false, }) {
+    const responsive = !disableResponsive;
+    // If `disableResponsive` is true, the layout will not switch depending on the viewport width.
+    const classes = (0, recipes_1.globalHeaderSlotRecipe)({ switchLayout: responsive });
+    const handleClickMainNavigationButton = (event) => {
+        mainNavigationButtonProps?.onClick?.(event);
+    };
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, css_1.cx)(classes.root, 'mfui-GlobalHeader__root', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.leftPane, 'mfui-GlobalHeader__leftPane'), children: [responsive && mainNavigationButtonProps ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { className: (0, css_1.cx)(classes.mainNavigationButton, 'mfui-GlobalHeader__mainNavigationButton'), content: mainNavigationButtonProps['aria-label'], placement: "bottomStart", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": mainNavigationButtonProps['aria-label'], onClick: handleClickMainNavigationButton, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Menu, { "aria-hidden": true }) }) })) : null, applicationsMenuSlot ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.applicationsMenuSlot, 'mfui-GlobalHeader__applicationsMenuSlot'), children: applicationsMenuSlot })) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.logo, 'mfui-GlobalHeader__logo'), children: logoSlot.base }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.logoNarrowViewport, 'mfui-GlobalHeader__logoNarrowViewport'), children: logoSlot.narrowViewport ?? logoSlot.base })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.rightPane, 'mfui-GlobalHeader__rightPane'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.rightPaneSlot, 'mfui-GlobalHeader__rightPaneSlot'), children: rightPaneSlot.base }), responsive && rightPaneSlot.narrowViewport ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.rightPaneSlotNarrowViewport, 'mfui-GlobalHeader__rightPaneSlotNarrowViewport'), children: rightPaneSlot.narrowViewport })) : null] })] }));
+}

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

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import { type IconButtonProps } from '../IconButton';
+import { type ResponsiveSlot } from '../types/responsive';
+type MainNavigationButtonProps = {
+    /**
+     * The handler to be called when the main navigation button is clicked.
+     */
+    onClick: IconButtonProps['onClick'];
+    /**
+     * The accessible label to specify how you want the main navigation button to be recognized and read by screen readers.
+     * This prop is required.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
+     *
+     * @example
+     * ```jsx
+     *  <GlobalHeader mainNavigationButtonProps={{ onClick, 'aria-label': 'ナビゲーションを開く' }} />
+     *
+     * // The button will be described as "ナビゲーションを開く" by screen readers.
+     * ```
+     */
+    'aria-label': IconButtonProps['aria-label'];
+};
+export type GlobalHeaderProps = {
+    /**
+     * The class name of the global header.
+     */
+    className?: string;
+    /**
+     * The properties of the main navigation button.
+     *
+     * If this value is provided, the main navigation button is displayed on the left side of the global header.
+     */
+    mainNavigationButtonProps?: MainNavigationButtonProps;
+    /**
+     * Elements to be displayed on the applications menu slot area where the left side of the global header.
+     * This slot is displayed when the viewport width is the breakpoint or larger.
+     *
+     * This element must be an applications dropdown menu as defined in Figma.
+     */
+    applicationsMenuSlot?: ReactNode;
+    /**
+     * Elements to be displayed on the logo area where the left side of the global header.
+     *
+     * If the viewport width is smaller than the breakpoint, the narrowViewport value is displayed, otherwise the base value is displayed.
+     */
+    logoSlot: ResponsiveSlot;
+    /**
+     * Elements to be displayed on the right side of the global header.
+     *
+     * If the viewport width is smaller than the breakpoint, the narrowViewport value is displayed, otherwise the base value is displayed.
+     */
+    rightPaneSlot: ResponsiveSlot;
+    /**
+     * Whether to disable the responsive behavior.
+     *
+     * If this property is set to `true`, the main navigation button and the
+     * narrow viewport layout will not be displayed.
+     *
+     * @default false
+     */
+    disableResponsive?: boolean;
+};
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+/**
+ * The wrapper component for the Typography component that renders as an HTML heading tag.
+ * This component is used to create specific headings in the UI.
+ * This component changes its appearance by means of a prop `variant`.
+ * It is rendered as an HTML tag matching the names passed to `tag`, and can pass the HTML standard attributes of the
+ * specified HTML heading tag as is.
+ * h1, h2, h3, h4, h5, h6
+ *
+ * Also extends the props of heading elements.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
+ */
+export declare const Heading: import("react").ForwardRefExoticComponent<{
+    variant: "pageHeading1" | "pageHeading2" | "sectionHeading1" | "sectionHeading2" | "contentHeading";
+    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/cjs/src/Heading/Heading.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../styled-system/css");
+const Typography_1 = require("../Typography");
+const recipes_1 = require("../../styled-system/recipes");
+/**
+ * The wrapper component for the Typography component that renders as an HTML heading tag.
+ * This component is used to create specific headings in the UI.
+ * This component changes its appearance by means of a prop `variant`.
+ * It is rendered as an HTML tag matching the names passed to `tag`, and can pass the HTML standard attributes of the
+ * specified HTML heading tag as is.
+ * h1, h2, h3, h4, h5, h6
+ *
+ * Also extends the props of heading elements.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
+ */
+exports.Heading = (0, react_1.forwardRef)(({ children, tag, variant, className, ...rest }, ref) => {
+    const classes = (0, recipes_1.headingSlotRecipe)();
+    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { ...rest, ref: ref, as: tag, variant: variant, className: (0, css_1.cx)(classes.root, 'mfui-Heading__root', className), children: children }));
+});

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

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type HeadingProps = {
+    /**
+     * Specify the variant of heading from pageHeading1, pageHeading2, sectionHeading1, sectionHeading2 and contentHeading.
+     */
+    variant: 'pageHeading1' | 'pageHeading2' | 'sectionHeading1' | 'sectionHeading2' | 'contentHeading';
+    /**
+     * Specify the tag of heading component.
+     */
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & ComponentPropsWithoutRef<'h1'>;

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+/**
+ * The HelpMessage component
+ * This component switches the variants of looks depends on the props: messageType.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const HelpMessage: import("react").ForwardRefExoticComponent<{
+    messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant["messageType"];
+    messageAlign?: "left" | "center";
+    children?: import("../Typography").TypographyProps["children"];
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/src/HelpMessage/HelpMessage.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelpMessage = 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 recipes_1 = require("../../styled-system/recipes");
+const Typography_1 = require("../Typography");
+/**
+ * The HelpMessage component
+ * This component switches the variants of looks depends on the props: messageType.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+exports.HelpMessage = (0, react_1.forwardRef)(({ messageType = 'neutral', messageAlign = 'left', children, className, ...props }, ref) => {
+    const classes = (0, recipes_1.helpMessageRecipe)({ messageType, messageAlign });
+    const id = (0, react_1.useId)();
+    const ariaLabelledByContentId = `help-message-content-${id}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: messageType === 'error' ? 'alert' : undefined, "aria-labelledby": ariaLabelledByContentId, ...props, className: (0, css_1.cx)(classes.root, 'mfui-HelpMessage__root', className), children: [messageType === 'error' ? (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Error, { "aria-hidden": true, className: (0, css_1.cx)(classes.icon, 'mfui-HelpMessage__icon') }) : null, (0, jsx_runtime_1.jsx)(Typography_1.Typography, { id: ariaLabelledByContentId, variant: "helpMessage", className: (0, css_1.cx)(classes.message, 'mfui-HelpMessage__message'), children: children })] }));
+});

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

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type HelpMessageRecipeVariant } from '../../styled-system/recipes';
+import { type TypographyProps } from '../Typography';
+/**
+ * Props for the HelpMessage component
+ */
+export type HelpMessageProps = {
+    /**
+     * The type of message to display.
+     * The color of the message will change based on this value.
+     * The error icon will be displayed next to the message if this value is 'error'.
+     *
+     * @default 'neutral'
+     */
+    messageType?: HelpMessageRecipeVariant['messageType'];
+    /**
+     * The alignment of the message.
+     *
+     * @default 'left'
+     */
+    messageAlign?: 'left' | 'center';
+    /**
+     * The content of the message.
+     *
+     * @default null
+     */
+    children?: TypographyProps['children'];
+} & ComponentPropsWithoutRef<'div'>;

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+export declare const InternalIconButton: import("react").ForwardRefExoticComponent<{
+    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
+    children: React.ReactNode;
+    disabled?: boolean;
+    href?: string;
+    customLinkComponent?: import("react").ElementType;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & {
+    size?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["size"];
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<{
+    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
+    children: React.ReactNode;
+    disabled?: boolean;
+    href?: string;
+    customLinkComponent?: import("react").ElementType;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/cjs/src/IconButton/IconButton.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = exports.InternalIconButton = 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 FocusIndicator_1 = require("../FocusIndicator");
+/**
+ * The general-purpose IconButton component.
+ * This component switches the variants of looks depends on the props are `outlined`.
+ *
+ * Also extends the props of `<button>` element or `<a>` element depending on whether the href prop is provided.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
+ */
+/**
+ * Base implementation for both public and internal IconButton exports.
+ *
+ * @param props - IconButton props including internal-only size variant.
+ *
+ * @param ref - Forwarded ref for the rendered button or anchor element.
+ */
+function IconButtonBase({ children, outlined, size = 'default', className, href, customLinkComponent, disabled = false, type = 'button', ...rest }, ref) {
+    const classes = (0, recipes_1.iconButtonSlotRecipe)({ outlined, size });
+    const isButton = disabled || href === undefined;
+    const Tag = (0, react_1.useMemo)(() => {
+        // If disabled, always render as a button since the link component doesn't support disabled prop
+        if (isButton) {
+            return 'button';
+        }
+        return customLinkComponent ?? 'a';
+    }, [isButton, customLinkComponent]);
+    const tagProps = (0, react_1.useMemo)(() => {
+        if (isButton) {
+            // props for button component
+            return {
+                ref,
+                className: (0, css_1.cx)(classes.root, 'mfui-IconButton__root', className),
+                disabled,
+                type,
+                ...rest,
+            };
+        }
+        // props for link component
+        return {
+            ref,
+            className: (0, css_1.cx)(classes.root, 'mfui-IconButton__root', className),
+            href,
+            ...rest,
+        };
+    }, [isButton, ref, classes.root, className, href, rest, disabled, type]);
+    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)(Tag, { ...tagProps, children: children }) }));
+}
+exports.InternalIconButton = (0, react_1.forwardRef)(IconButtonBase);
+exports.IconButton = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.InternalIconButton, { ...props, ref: ref })));

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

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { type IconButtonSlotRecipeVariant } from '../../styled-system/recipes';
+type IconButtonCommonProps = {
+    /**
+     * Whether the button has an outline style
+     *
+     * @default false
+     */
+    outlined?: IconButtonSlotRecipeVariant['outlined'];
+    /**
+     * Icon element to be rendered inside the button
+     * Only one element allowed
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the button is disabled.
+     * If it's provided, the component will be rendered as a button element even if the href prop is provided.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The path or URL to the linked page.
+     * If it's provided, the component will be rendered as an anchor element.
+     */
+    href?: string;
+    /**
+     * The component to use as the navigation link instead of the general anchor element `<a>`.
+     * The custom component must extend the HTMLAnchorElement interface.
+     *
+     * Use this property if you want to use a custom component as the link tag.
+     * e.g. next/link
+     */
+    customLinkComponent?: ElementType;
+};
+export type IconButtonProps = IconButtonCommonProps & ComponentPropsWithoutRef<'button'> & Pick<ComponentPropsWithoutRef<'a'>, 'download' | 'hrefLang' | 'ping' | 'rel' | 'target' | 'type' | 'referrerPolicy'>;
+export type IconButtonInternalProps = IconButtonProps & {
+    /**
+     * Size of the icon button.
+     * This prop is internal-only and not exposed from the public IconButton API.
+     *
+     * @default 'default'
+     */
+    size?: IconButtonSlotRecipeVariant['size'];
+};
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * A component for key-value pairs.
+ * Both the key and value areas accept any elements and are rendered with predefined layout styles.
+ */
+export declare const KeyValue: import("react").ForwardRefExoticComponent<{
+    size?: import("../../styled-system/recipes").KeyValueSlotRecipeVariant["size"];
+    keyItem: React.ReactNode;
+    valueItem: React.ReactNode;
+    gridTemplateColumns?: import("react").CSSProperties["gridTemplateColumns"];
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/src/KeyValue/KeyValue.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyValue = 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");
+/**
+ * A component for key-value pairs.
+ * Both the key and value areas accept any elements and are rendered with predefined layout styles.
+ */
+exports.KeyValue = (0, react_1.forwardRef)(({ size = 'medium', keyItem, valueItem, className, gridTemplateColumns = '1fr 1fr', ...props }, ref) => {
+    const classes = (0, recipes_1.keyValueSlotRecipe)({ size });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-KeyValue__root', className), ...props, style: { gridTemplateColumns }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.keyItem, 'mfui-KeyValue__keyItem'), children: keyItem }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.valueItem, 'mfui-KeyValue__valueItem'), children: valueItem })] }));
+});
+exports.KeyValue.displayName = 'KeyValue';

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

@@ -0,0 +1,20 @@
+import { type CSSProperties, type ComponentPropsWithoutRef } from 'react';
+import { type KeyValueSlotRecipeVariant } from '../../styled-system/recipes';
+export type KeyValueProps = {
+    /**
+     * The size of the key-value pair.
+     */
+    size?: KeyValueSlotRecipeVariant['size'];
+    /**
+     * The key of the key-value pair.
+     */
+    keyItem: React.ReactNode;
+    /**
+     * The value of the key-value pair.
+     */
+    valueItem: React.ReactNode;
+    /**
+     * The grid template columns of the key-value pair.
+     */
+    gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
+} & ComponentPropsWithoutRef<'div'>;

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

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

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

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

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

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

package/dist/cjs/src/MainNavigation/BaseMainNavigation.d.ts

@@ -0,0 +1,6 @@
+import { type MainNavigationProps } from './MainNavigation.types';
+/**
+ * The component for the main navigation on the normal viewport.
+ * This component must only be used in MainNavigation.tsx, do not export it.
+ */
+export declare function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible, width, customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/MainNavigation/BaseMainNavigation.js

@@ -0,0 +1,76 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseMainNavigation = BaseMainNavigation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const react_1 = require("react");
+const css_1 = require("../../styled-system/css");
+const FocusIndicator_1 = require("../FocusIndicator");
+const Typography_1 = require("../Typography");
+const NavigationLink_1 = require("./NavigationLink");
+const recipes_1 = require("../../styled-system/recipes");
+const Tooltip_1 = require("../Tooltip");
+const Popover_1 = require("../Popover");
+/**
+ * The component for the main navigation on the normal viewport.
+ * This component must only be used in MainNavigation.tsx, do not export it.
+ */
+function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible = false, width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, }) {
+    const [localIsCollapsed, setLocalIsCollapsed] = (0, react_1.useState)(controlledIsCollapsed ?? false);
+    const [openPopoverIndex, setOpenPopoverIndex] = (0, react_1.useState)(null);
+    const isControlled = controlledIsCollapsed !== undefined;
+    const isCollapsed = isControlled ? controlledIsCollapsed : localIsCollapsed;
+    const navId = (0, react_1.useId)();
+    const handleClickToggleButton = () => {
+        const newState = !isCollapsed;
+        if (!isControlled) {
+            setLocalIsCollapsed(newState);
+        }
+        onCollapsedChange?.(newState);
+    };
+    const classes = (0, recipes_1.baseMainNavigationSlotRecipe)({ width, disableResponsive });
+    const InternalLinkTag = customLinkComponent ?? 'a';
+    const hasCurrentNavigationInChildren = (children) => children?.some((child) => child.isCurrent);
+    const toggleButtonLabel = isCollapsed ? 'ナビゲーションを拡げる' : 'ナビゲーションを折りたたむ';
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-mfui-collapsed": isCollapsed, className: (0, css_1.cx)(classes.root, 'mfui-BaseMainNavigation__root', className), children: [featureShortcut ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.featureShortcut, 'mfui-BaseMainNavigation__featureShortcut'), children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: (0, css_1.cx)(classes.featureShortcutAnchor, 'mfui-BaseMainNavigation__featureShortcutAnchor'), children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, (0, jsx_runtime_1.jsx)("nav", { id: navId, className: (0, css_1.cx)(classes.nav, 'mfui-BaseMainNavigation__nav'), children: (0, jsx_runtime_1.jsx)("ul", { className: (0, css_1.cx)(classes.list, 'mfui-BaseMainNavigation__list'), children: navigationItems.map((navigation, index) => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.listItem, 'mfui-BaseMainNavigation__listItem'), "data-mfui-popover-portal-target-id": `nested-popover-portal-target-${String(index)}`, children: navigation.children ? (isCollapsed ? ((0, jsx_runtime_1.jsx)(CollapsedNestedNavigationItem, { navigation: navigation, classes: classes, InternalLinkTag: InternalLinkTag, hasCurrentChildren: hasCurrentNavigationInChildren(navigation.children) || false, popoverPortalTargetId: `nested-popover-portal-target-${String(index)}`, isOpen: openPopoverIndex === index, onOpenChange: (isOpen) => {
+                                if (isOpen) {
+                                    setOpenPopoverIndex(index);
+                                }
+                                else {
+                                    setOpenPopoverIndex(null);
+                                }
+                            } })) : ((0, jsx_runtime_1.jsxs)("details", { open: hasCurrentNavigationInChildren(navigation.children), className: (0, css_1.cx)(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsxs)("summary", { className: (0, css_1.cx)(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: navigation.label }), (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), (0, jsx_runtime_1.jsx)("ul", { className: (0, css_1.cx)(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: (0, css_1.cx)(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] }))) : ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { className: (0, css_1.cx)(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: (0, css_1.cx)(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.Lock, { className: (0, css_1.cx)(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
+                                                ? navigation.statusSlot
+                                                : null] }) }) }) })) }, index))) }) }), enableCollapsible ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.footer, 'mfui-BaseMainNavigation__footer'), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: toggleButtonLabel, placement: "right", children: (0, jsx_runtime_1.jsx)(ToggleButton, { className: (0, css_1.cx)(classes.toggleButton, 'mfui-BaseMainNavigation__toggleButton'), iconClassName: (0, css_1.cx)(classes.toggleButtonIcon, 'mfui-BaseMainNavigation__toggleButtonIcon'), isCollapsed: isCollapsed, "aria-label": toggleButtonLabel, targetId: navId, handleClickToggleButton: handleClickToggleButton }) }) })) : null] }));
+}
+/**
+ * The component for displaying nested navigation in collapsed state with popover.
+ * This component must only be used in BaseMainNavigation.tsx, do not export it.
+ */
+function CollapsedNestedNavigationItem({ navigation, classes, InternalLinkTag, hasCurrentChildren, popoverPortalTargetId, isOpen, onOpenChange, }) {
+    const popoverContentRef = (0, react_1.useRef)(null);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            // Open popover when Enter or Space key is pressed
+            event.preventDefault();
+            event.stopPropagation();
+            onOpenChange(!isOpen);
+        }
+    };
+    const handleClick = () => {
+        onOpenChange(!isOpen);
+    };
+    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { enableAutoFocusOnPopover: false, enableAutoFocusOnTrigger: false, open: isOpen, targetDOMNode: document.querySelector(`[data-mfui-popover-portal-target-id="${popoverPortalTargetId}"]`), allowedPlacements: ['right-start', 'right', 'right-end'], contentProps: {
+            tabIndex: -1,
+        }, renderTrigger: ({ setTriggerRef }) => ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { className: (0, css_1.cx)(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: isOpen, placement: "right", children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("button", { ref: setTriggerRef, type: "button", className: (0, css_1.cx)(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "data-mfui-current": hasCurrentChildren ? 'page' : undefined, "aria-current": hasCurrentChildren ? true : undefined, "aria-label": navigation.label, onClick: handleClick, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }) }) }) }) }) })), renderContent: () => ((0, jsx_runtime_1.jsx)("div", { ref: popoverContentRef, className: (0, css_1.cx)(classes.popoverChildrenList, 'mfui-BaseMainNavigation__popoverChildrenList'), tabIndex: -1, children: navigation.children.map((child, childIndex) => ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: (0, css_1.cx)(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: () => {
+                            onOpenChange(false);
+                        }, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })), onOpenStateChanged: onOpenChange }));
+}
+/**
+ * The component for the toggle button.
+ * This component must only be used in MainNavigation.tsx, do not export it.
+ */
+function ToggleButton({ className, iconClassName, isCollapsed, targetId, handleClickToggleButton, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)("button", { "aria-expanded": !isCollapsed, "aria-controls": targetId, type: "button", className: (0, css_1.cx)(className, 'mfui-BaseMainNavigation__toggleButton'), onClick: handleClickToggleButton, ...rest, children: isCollapsed ? ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.PaneExpansionToRight, { "aria-hidden": true, className: (0, css_1.cx)(iconClassName, 'mfui-BaseMainNavigation__toggleButtonIcon') })) : ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.PaneExpansionToLeft, { "aria-hidden": true, className: (0, css_1.cx)(iconClassName, 'mfui-BaseMainNavigation__toggleButtonIcon') })) }) }));
+}