@moneyforward/mfui-components 2.48.1

package/dist/esm/src/Tabs/hooks/useCalculatedSelectedTabId.d.ts

@@ -0,0 +1,33 @@
+import { type TabItemProps } from '../TabItem';
+/**
+ * Options for the useCalculatedSelectedTabId hook.
+ */
+type UseCalculatedSelectedTabIdOptions = {
+    /**
+     * The selected tab ID, get from Tabs props.
+     */
+    selectedTabId?: string;
+    /**
+     * Callback to be called when the selected tab ID changes, get from Tabs props.
+     */
+    onSelectedTabChange?: (tabId: string) => void;
+    /**
+     * The list of tab props, calculated from Tabs children.
+     */
+    tabs: TabItemProps[];
+};
+/**
+ * Custom hook to manage the selected tab ID based on provided options.
+ * Automatically updates the selected tab ID when the `selectedTabId` prop changes.
+ * If no tab is selected, defaults to the first tab ID from the list of tab IDs.
+ * If `onSelectedTabChange` is provided, the component is controlled and updates are handled externally.
+ *
+ * @param options - The options for the hook including selected tab ID, callback for tab changes, and list of tab IDs.
+ *
+ * @returns An object containing the calculated selected tab ID and a function to set the selected tab.
+ */
+export declare function useCalculatedSelectedTabId({ selectedTabId, onSelectedTabChange, tabs, }: UseCalculatedSelectedTabIdOptions): {
+    calculatedSelectedTabId: string | undefined;
+    setCalculatedSelectedTab: (tabId: string) => void;
+};
+export {};

package/dist/esm/src/Tabs/hooks/useCalculatedSelectedTabId.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+/**
+ * Custom hook to manage the selected tab ID based on provided options.
+ * Automatically updates the selected tab ID when the `selectedTabId` prop changes.
+ * If no tab is selected, defaults to the first tab ID from the list of tab IDs.
+ * If `onSelectedTabChange` is provided, the component is controlled and updates are handled externally.
+ *
+ * @param options - The options for the hook including selected tab ID, callback for tab changes, and list of tab IDs.
+ *
+ * @returns An object containing the calculated selected tab ID and a function to set the selected tab.
+ */
+export function useCalculatedSelectedTabId({ selectedTabId, onSelectedTabChange, tabs, }) {
+    // implement
+    const [calculatedSelectedTabId, setCalculatedSelectedTabId] = useState(selectedTabId);
+    // TODO use useUpdateEffect later, after the PR has this hook is merged
+    // Automatically update the selected tabId if the selectedTabId prop changes
+    useEffect(() => {
+        setCalculatedSelectedTabId(selectedTabId);
+    }, [selectedTabId]);
+    return {
+        // If still nothing, we pick the first tabId from the tab list
+        calculatedSelectedTabId: calculatedSelectedTabId ?? tabs[0]?.id,
+        // If the user provides the `onSelectedTabChange` prop, it's a controlled component, we just need to use it
+        setCalculatedSelectedTab: onSelectedTabChange ?? setCalculatedSelectedTabId,
+    };
+}

package/dist/esm/src/Tabs/hooks/useDataFromChildren.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { TabList } from '../TabList';
+import { TabItem } from '../TabItem';
+import { TabPanel } from '../TabPanel';
+type TabListElement = ReactElement<ComponentProps<typeof TabList>, typeof TabList>;
+type TabElement = ReactElement<ComponentProps<typeof TabItem>, typeof TabItem>;
+type TabPanelElement = ReactElement<ComponentProps<typeof TabPanel>, typeof TabPanel>;
+/**
+ * Extracts the data from the children of the Tabs component.
+ *
+ * @param children - The children of the Tabs component.
+ *
+ * @returns The extracted data from the children.
+ */
+export declare function useDataFromChildren(children: ReactNode): {
+    tabList: TabListElement[];
+    tabPanels: TabPanelElement[];
+    tabs: TabElement[];
+    tabsProps: import("../TabItem").TabItemProps[];
+};
+export {};

package/dist/esm/src/Tabs/hooks/useDataFromChildren.js

@@ -0,0 +1,38 @@
+import { Children, isValidElement, useMemo } from 'react';
+import { TabList } from '../TabList';
+import { TabItem } from '../TabItem';
+import { TabPanel } from '../TabPanel';
+/**
+ * Extracts the data from the children of the Tabs component.
+ *
+ * @param children - The children of the Tabs component.
+ *
+ * @returns The extracted data from the children.
+ */
+export function useDataFromChildren(children) {
+    return useMemo(() => {
+        const tabList = [];
+        const tabPanels = [];
+        const tabs = [];
+        Children.forEach(children, (child) => {
+            if (!isValidElement(child))
+                return;
+            if (child.type === TabList) {
+                const tabListElement = child;
+                tabList.push(tabListElement);
+                Children.forEach(tabListElement.props.children, (tab) => {
+                    if (!isValidElement(tab))
+                        return;
+                    if (tab.type === TabItem) {
+                        tabs.push(tab);
+                    }
+                });
+            }
+            else if (child.type === TabPanel) {
+                tabPanels.push(child);
+            }
+        });
+        const tabsProps = tabs.map((tab) => tab.props);
+        return { tabList, tabPanels, tabs, tabsProps };
+    }, [children]);
+}

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

@@ -0,0 +1,5 @@
+export { Tabs } from './Tabs';
+export type { TabsProps } from './Tabs.types';
+export type { TabPanelProps } from './TabPanel';
+export type { TabListProps } from './TabList';
+export type { TabItemProps } from './TabItem';

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

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

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

@@ -0,0 +1,10 @@
+import { type TagProps } from './Tag.types';
+/**
+ * The general-purpose Tag component.
+ * This component switches the variants of looks depends on the props: href, onClick, disabled, showCloseButton.
+ *  - If `href` is provided, the tag will be displayed as `<a>` tag.
+ *  - If `onClick` is `provided, the tag will be displayed as `<button>` tag.
+ *  - If `disabled` is `true` and `onClick` is provided, the tag will be displayed as disabled button.
+ *  - If `showCloseButton` is `true`, the tag will be displayed with a close button.
+ */
+export declare function Tag({ label, onClick, href, customLinkComponent, disabled, onClose, target, rel, className, }: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/Tag/Tag.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Close } from '@moneyforward/mfui-icons-react';
+import { Fragment } from 'react';
+import { tagSlotRecipe } from '../../styled-system/recipes';
+import { IconButton } from '../IconButton';
+import { FocusIndicator } from '../FocusIndicator';
+import { Typography } from '../Typography';
+import { cx } from '../../styled-system/css';
+/**
+ * The general-purpose Tag component.
+ * This component switches the variants of looks depends on the props: href, onClick, disabled, showCloseButton.
+ *  - If `href` is provided, the tag will be displayed as `<a>` tag.
+ *  - If `onClick` is `provided, the tag will be displayed as `<button>` tag.
+ *  - If `disabled` is `true` and `onClick` is provided, the tag will be displayed as disabled button.
+ *  - If `showCloseButton` is `true`, the tag will be displayed with a close button.
+ */
+export function Tag({ label, onClick, href, customLinkComponent, disabled = false, onClose, target, rel, className, }) {
+    const isClickable = !!onClick || !!href;
+    const classes = tagSlotRecipe({ interactable: isClickable, showCloseButton: !!onClose });
+    const closeButton = (_jsx(IconButton, { disabled: disabled, className: cx(classes.closeButton, 'mfui-Tag__closeButton'), "aria-label": `${label}を削除する`, onClick: onClose, children: _jsx(Close, {}) }));
+    if (!isClickable) {
+        return (_jsx(FocusIndicator, { children: _jsxs("span", { className: cx(classes.root, 'mfui-Tag__root', className), children: [_jsx(Typography, { variant: "condensedInput", children: label }), onClose ? closeButton : null] }) }));
+    }
+    const InternalTag = href ? (customLinkComponent ?? 'a') : 'button';
+    const tagProps = href ? { href, target, rel } : { disabled, onClick };
+    const WrapperTag = onClose ? 'div' : Fragment;
+    const wrapperProps = onClose ? { className: cx(classes.wrapper, 'mfui-Tag__wrapper', className) } : undefined;
+    return (_jsxs(WrapperTag, { ...wrapperProps, children: [_jsx(FocusIndicator, { children: _jsx(InternalTag, { className: cx(classes.root, 'mfui-Tag__root'), ...tagProps, children: _jsx(Typography, { variant: "condensedInput", children: label }) }) }), onClose ? closeButton : null] }));
+}

package/dist/esm/src/Tag/Tag.types.d.ts

@@ -0,0 +1,62 @@
+import { type ComponentPropsWithoutRef, type ElementType, type MouseEvent } from 'react';
+export type TagProps = {
+    /**
+     * The label text to be displayed on the Tag.
+     */
+    label: string;
+    /**
+     * Optional URL. If provided, the Tag will be rendered as an anchor element.
+     */
+    href?: string;
+    /**
+     * Specifies the target attribute for the anchor element.
+     * This defines where to open the linked document.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
+     */
+    target?: HTMLAnchorElement['target'];
+    /**
+     * Specifies the relationship between the current document and the linked document.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel
+     */
+    rel?: HTMLAnchorElement['rel'];
+    /**
+     * 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;
+    /**
+     * The handler to close the tag. When this prop is provided, the close button will be shown
+     */
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Class name to be applied to the wrapper element.
+     */
+    className?: string;
+} & ({
+    /**
+     * Optional click event handler. If provided, the Tag will be rendered as a button element.
+     */
+    onClick: ComponentPropsWithoutRef<'button'>['onClick'];
+    /**
+     * Optional flag to disable the Tag. This option is only available when "onClick" is provided.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+} | {
+    /**
+     * Optional click event handler. If provided, the Tag will be rendered as a button element.
+     */
+    onClick?: undefined;
+    /**
+     * This prop is not available when "onClick" is not provided.
+     *
+     * @default false
+     */
+    disabled?: undefined;
+});

package/dist/esm/src/Tag/Tag.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * The general-purpose TextBox component.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled, enableClearButton.
+ *
+ * Also extends the props of `<input>` element
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+ */
+export declare const TextBox: React.ForwardRefExoticComponent<{
+    enableClearButton?: boolean;
+    onClear?: import("..").IconButtonProps["onClick"];
+    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
+    textBoxSize?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["size"];
+    disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["disabled"];
+    wrapperProps?: React.ComponentPropsWithRef<"div">;
+    prefixSlot?: React.ReactNode;
+    suffixSlot?: React.ReactNode;
+    clearButtonProps?: Pick<React.ComponentPropsWithoutRef<"input">, "aria-label">;
+    touchDeviceReadOnly?: boolean;
+} & Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "prefix"> & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/src/TextBox/TextBox.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from 'react';
+import { cx } from '../../styled-system/css';
+import { textBoxSlotRecipe } from '../../styled-system/recipes';
+import { ClearButton } from '../shared/ClearButton';
+import { FocusIndicator } from '../FocusIndicator';
+import { dispatchNativeInputValueWithEvent } from '../utilities/dom/dispatchNativeInputValueWithEvent';
+import { mergeRefs } from '../utilities/dom/mergeRefs';
+import { useInputHasValue } from '../utilities/state/useInputHasValue';
+import { useIsTouchDevice } from '../utilities/dom/useIsTouchDevice';
+/**
+ * The general-purpose TextBox component.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled, enableClearButton.
+ *
+ * Also extends the props of `<input>` element
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+ */
+export const TextBox = forwardRef(({ enableClearButton = false, onClear, invalid = false, textBoxSize = 'medium', disabled = false, wrapperProps = {}, prefixSlot, suffixSlot, clearButtonProps, touchDeviceReadOnly = false, ...inputProps }, ref) => {
+    const isTouchDevice = useIsTouchDevice();
+    const shouldUseTouchDeviceMode = isTouchDevice && touchDeviceReadOnly;
+    const inputRef = useRef(null);
+    const { hasValue, handleChange, handleInput } = useInputHasValue({
+        initialValue: inputProps.value ?? inputProps.defaultValue,
+        value: inputProps.value,
+        onChange: inputProps.onChange,
+        onInput: inputProps.onInput,
+    });
+    const shouldShowClearButton = enableClearButton && hasValue;
+    const classes = textBoxSlotRecipe({ invalid, disabled, size: textBoxSize });
+    const mergedInputRef = mergeRefs(ref, inputRef);
+    const onClickClear = useCallback((event) => {
+        if (!inputRef.current)
+            return;
+        dispatchNativeInputValueWithEvent(inputRef.current, '');
+        if (!shouldUseTouchDeviceMode) {
+            inputRef.current.focus();
+        }
+        onClear?.(event);
+    }, [onClear, shouldUseTouchDeviceMode]);
+    // Get the display value for touch device mode
+    const displayValue = (inputProps.value ?? inputProps.defaultValue ?? '');
+    return shouldUseTouchDeviceMode ? (
+    // Touch device: wrapper + hidden input + display div
+    _jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [_jsx("input", { type: "hidden", value: displayValue, name: inputProps.name }), prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("div", { className: cx(classes.input, 'mfui-TextBox__input'), children: displayValue || inputProps.placeholder }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: (event) => {
+                    onClear?.(event);
+                } })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] })) : (
+    // Desktop: Standard input with FocusIndicator
+    _jsx(FocusIndicator, { children: _jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("input", { ref: mergedInputRef, disabled: disabled, ...inputProps, className: cx(classes.input, 'mfui-TextBox__input', inputProps.className), onChange: handleChange, onInput: handleInput }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: onClickClear })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] }) }));
+});

package/dist/esm/src/TextBox/TextBox.types.d.ts

@@ -0,0 +1,74 @@
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type TextBoxSlotRecipeVariant } from '../../styled-system/recipes';
+import { type IconButtonProps } from '../IconButton';
+/**
+ * The props for the TextBox component.
+ */
+export type TextBoxProps = {
+    /**
+     * Whether you let user to clear the content or not.
+     * This will add the Clear button if current TextBox has value.
+     *
+     * @default false
+     */
+    enableClearButton?: boolean;
+    /**
+     * The callback function when the clear button is clicked.
+     * Notice: The `onChange` event still will be fired after the clear button is clicked.
+     *
+     * @default undefined
+     */
+    onClear?: IconButtonProps['onClick'];
+    /**
+     * Whether the text box is invalid or not.
+     * This will change the style of the text box.
+     *
+     * @default false
+     */
+    invalid?: TextBoxSlotRecipeVariant['invalid'];
+    /**
+     * The size of the text box.
+     *
+     * @default 'medium'
+     */
+    textBoxSize?: TextBoxSlotRecipeVariant['size'];
+    /**
+     * Whether the text box is disabled or not.
+     * If disabled, user cannot edit the content.
+     *
+     * @default false
+     */
+    disabled?: TextBoxSlotRecipeVariant['disabled'];
+    /**
+     * Allow users to pass additional attributes to the wrapper div
+     *
+     * @default {}
+     */
+    wrapperProps?: ComponentPropsWithRef<'div'>;
+    /**
+     * The prefix icon or text for a unit.
+     * This will be rendered on the left side within TextBox.
+     */
+    prefixSlot?: ReactNode;
+    /**
+     * The suffix icon, icon button to open a popover, or text for a unit.
+     * This will be rendered on the right side within TextBox.
+     * This will be placed after the clear button if it exists.
+     */
+    suffixSlot?: ReactNode;
+    /**
+     * The properties for the clear button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
+     */
+    clearButtonProps?: Pick<ComponentPropsWithoutRef<'input'>, 'aria-label'>;
+    /**
+     * Whether to render as read-only display on touch devices.
+     * When enabled, the input will be replaced with a div on touch devices to prevent keyboard from appearing.
+     * Useful for components like DatePicker where input is done through a separate UI (e.g., calendar).
+     *
+     * @default false
+     */
+    touchDeviceReadOnly?: boolean;
+} & Omit<ComponentPropsWithoutRef<'input'>, 'prefix'>;

package/dist/esm/src/TextBox/TextBox.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

@@ -0,0 +1,15 @@
+/**
+ * The general-purpose TextLink component.
+ * This component extends the props of `<a>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
+ * It is rendered as an HTML tag matching the names passed to `as`, and can pass the HTML standard attributes of the specified HTML tag as is.
+ */
+export declare const TextLink: import("react").ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    variant?: import("../../styled-system/recipes").TextLinkSlotRecipeVariant["variant"];
+    className?: string;
+    customLinkComponent?: import("react").ElementType;
+    showExternalIcon?: boolean;
+    externalIconProps?: import("react").ComponentPropsWithoutRef<"svg">["aria-label"];
+} & Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/esm/src/TextLink/TextLink.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { ExternalLink } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../styled-system/css';
+import { FocusIndicator } from '../FocusIndicator';
+import { textLinkSlotRecipe } from '../../styled-system/recipes';
+/**
+ * The general-purpose TextLink component.
+ * This component extends the props of `<a>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
+ * It is rendered as an HTML tag matching the names passed to `as`, and can pass the HTML standard attributes of the specified HTML tag as is.
+ */
+export const TextLink = forwardRef(({ children, variant = 'inherit', className, customLinkComponent, showExternalIcon, externalIconProps, ...rest }, ref) => {
+    const classes = textLinkSlotRecipe({ variant });
+    const Tag = customLinkComponent ?? 'a';
+    return (_jsx(FocusIndicator, { children: _jsxs(Tag, { ...rest, ref: ref, className: cx(classes.root, 'mfui-TextLink__root', className), children: [children, showExternalIcon ? (_jsx("span", { className: cx(classes.externalLinkIconContainer, 'mfui-TextLink__externalLinkIconContainer'), children: _jsx(ExternalLink, { className: cx(classes.externalLinkIcon, 'mfui-TextLink__externalLinkIcon'), "aria-label": externalIconProps ?? '別のタブで開きます' }) })) : null] }) }));
+});

package/dist/esm/src/TextLink/TextLink.types.d.ts

@@ -0,0 +1,39 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { type TextLinkSlotRecipeVariant } from '../../styled-system/recipes';
+export type TextLinkProps = {
+    /**
+     * The content to display.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify the variant of text link from body, condensedBody, amount, helpMessage, label, and inherit.
+     *
+     * @default 'inherit'
+     */
+    variant?: TextLinkSlotRecipeVariant['variant'];
+    /**
+     * Additional class names to apply to the component.
+     */
+    className?: 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;
+    /**
+     * Whether to show the external link icon.
+     * If this property is true, the external link icon will be shown on the right side of the link.
+     *
+     * @default false
+     */
+    showExternalIcon?: boolean;
+    /**
+     * The properties for the external link icon.
+     *
+     * @property aria-label - The alternative text for the external link icon. Default is ''別のタブで開きます''.
+     */
+    externalIconProps?: ComponentPropsWithoutRef<'svg'>['aria-label'];
+} & ComponentPropsWithoutRef<'a'>;

package/dist/esm/src/TextLink/TextLink.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

@@ -0,0 +1,16 @@
+/**
+ * The general-purpose Toast component.
+ * This component switches the variants of looks depends on the props: type and actionText.
+ */
+export declare const Toast: import("react").ForwardRefExoticComponent<{
+    type?: import("../../styled-system/recipes").ToastSlotRecipeVariant["type"];
+    message: import("react").ReactNode;
+    onClose?: () => void;
+    actionSlot?: import("react").ReactNode;
+    statusIconProps?: Pick<import("react").ComponentPropsWithoutRef<"svg">, "aria-label">;
+    closeButtonProps?: Pick<import("react").ComponentPropsWithoutRef<"button">, "aria-label">;
+    duration?: number;
+    activeElement?: Element | null;
+    customIcon?: import("react").ReactElement;
+    showCloseButton?: boolean;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/src/Toast/Toast.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Approval, Close, Error, Pending, Caution } from '@moneyforward/mfui-icons-react';
+import { forwardRef, useEffect, useRef } from 'react';
+import { cx } from '../../styled-system/css';
+import { FocusIndicator } from '../FocusIndicator';
+import { toastSlotRecipe } from '../../styled-system/recipes';
+import { IconButton } from '../IconButton';
+import { Typography } from '../Typography';
+import { mergeRefs } from '../utilities/dom/mergeRefs';
+import { ProgressIndicator } from '../ProgressIndicator';
+/**
+ * The general-purpose Toast component.
+ * This component switches the variants of looks depends on the props: type and actionText.
+ */
+export const Toast = forwardRef(({ className, type = 'success', actionSlot, message, onClose, duration = 0, activeElement, statusIconProps, closeButtonProps, customIcon, showCloseButton = true, ...props }, ref) => {
+    const classes = toastSlotRecipe({ type: customIcon ? 'custom' : type });
+    const toastRef = useRef(null);
+    const timerRef = useRef(null);
+    const startTimeRef = useRef(null);
+    const localDurationRef = useRef(null);
+    const icon = (() => {
+        if (type === 'success') {
+            return _jsx(Approval, { "aria-label": statusIconProps?.['aria-label'] ?? '完了' });
+        }
+        if (type === 'failure') {
+            return _jsx(Error, { "aria-label": statusIconProps?.['aria-label'] ?? '失敗' });
+        }
+        if (type === 'caution') {
+            return _jsx(Caution, { "aria-label": statusIconProps?.['aria-label'] ?? '注意' });
+        }
+        if (type === 'progress') {
+            return _jsx(ProgressIndicator, {});
+        }
+        return _jsx(Pending, { "aria-label": statusIconProps?.['aria-label'] ?? '進行中' });
+    })();
+    // Handle the duration of the toast
+    useEffect(() => {
+        // If the duration is not provided or under `5000`,
+        // the toast message will be displayed until it's closed via the close button.
+        if (!duration || duration < 5000) {
+            localDurationRef.current = 0;
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+            return;
+        }
+        localDurationRef.current = duration;
+    }, [duration]);
+    useEffect(() => {
+        // If localDurationRef is 0, the toast will not be closed automatically.
+        if (!localDurationRef.current || localDurationRef.current <= 0) {
+            return;
+        }
+        const isFocusVisible = !!toastRef.current &&
+            !!activeElement &&
+            (toastRef.current === activeElement ||
+                activeElement.closest('[data-mfui-content="toast-item"]') === toastRef.current);
+        // If the toast is not focused, start the timer to close the toast.
+        if (!isFocusVisible && !timerRef.current) {
+            startTimeRef.current = Date.now();
+            timerRef.current = setTimeout(() => {
+                onClose?.();
+            }, localDurationRef.current);
+            return;
+        }
+        // If the toast is focused, stop the timer and calculate the left time.
+        if (isFocusVisible) {
+            const passedTime = Date.now() - (startTimeRef.current ?? 0);
+            const leftTime = localDurationRef.current - passedTime;
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+            timerRef.current = null;
+            localDurationRef.current = leftTime;
+        }
+    }, [activeElement, onClose]);
+    return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: mergeRefs(ref, toastRef), className: cx(classes.item, 'mfui-Toast__item', className), role: type === 'failure' ? 'alert' : 'status', "aria-live": type === 'failure' ? undefined : 'polite', "data-mfui-content": "toast-item", ...props, children: [_jsxs("div", { className: cx(classes.body, 'mfui-Toast__body'), children: [_jsxs("div", { className: cx(classes.message, 'mfui-Toast__message'), children: [_jsx("div", { className: cx(classes.leftIcon, 'mfui-Toast__leftIcon'), children: customIcon ?? icon }), _jsx(Typography, { children: message })] }), _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', disabled: !showCloseButton, onClick: onClose, children: _jsx(Close, {}) })] }), actionSlot ? _jsx("div", { className: cx(classes.footer, 'mfui-Toast__footer'), children: actionSlot }) : null] }) }));
+});