@moneyforward/mfui-components 2.48.1

package/dist/esm/src/Portal/TargetDomNodeContext.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { getTargetDomNode } from '../utilities/dom/getTargetDomNode';
+const TargetDomNodeContext = createContext(null);
+export const useClosestTargetDomNode = () => useContext(TargetDomNodeContext);
+/**
+ * This is a wrapper of TargetDomNodeContext.Provider, it provides the targetDomNode to the children.
+ *
+ * When children components use the useClosestTargetDomNode hook, it will return the targetDomNode provided by this component.
+ */
+export function TargetDomNodeProvider({ targetDomNode, children }) {
+    // Need to use the old <Context.Provider> way instead of the new <Context> way to support React 18
+    // TODO: It should be migrated to the new way when React officially deprecate the old way in the future.
+    return _jsx(TargetDomNodeContext.Provider, { value: targetDomNode, children: children });
+}
+/**
+ * This hook provides the targetDomNode for the Portal component.
+ * It will return the user provided targetDomNode if it is not null, otherwise it will return the closest targetDomNode from the TargetDomNodeContext.
+ *
+ * @param providedTargetDomNode - The targetDomNode provided by the user.
+ *
+ * @param hangingElement - The element to detect the rootNode, if not provided, it will return the body element of the ownerDocument, or automatically create & choose the custom element under ShadowDOM.
+ */
+export const useAutomaticTargetDomNode = (providedTargetDomNode, hangingElement) => {
+    const closestTargetDomNode = useClosestTargetDomNode();
+    return getTargetDomNode(providedTargetDomNode ?? closestTargetDomNode, hangingElement);
+};

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

@@ -0,0 +1,3 @@
+export { Portal } from './Portal';
+export { type PortalProps } from './Portal.types';
+export { useClosestTargetDomNode, useAutomaticTargetDomNode, TargetDomNodeProvider } from './TargetDomNodeContext';

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

@@ -0,0 +1,2 @@
+export { Portal } from './Portal';
+export { useClosestTargetDomNode, useAutomaticTargetDomNode, TargetDomNodeProvider } from './TargetDomNodeContext';

package/dist/esm/src/Portal/utils/useIsServer.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This hook is used to determine if the code is running on the server.
+ * This is inspired in this ChakraUI Portal code
+ *
+ * @see https://github.com/chakra-ui/ark/blob/main/packages/react/src/components/portal/portal.tsx
+ */
+export declare function useIsServer(): boolean;

package/dist/esm/src/Portal/utils/useIsServer.js

@@ -0,0 +1,14 @@
+import { useSyncExternalStore } from 'react';
+/**
+ * This hook is used to determine if the code is running on the server.
+ * This is inspired in this ChakraUI Portal code
+ *
+ * @see https://github.com/chakra-ui/ark/blob/main/packages/react/src/components/portal/portal.tsx
+ */
+export function useIsServer() {
+    return useSyncExternalStore(subscribe, () => false, () => true);
+}
+// We don't need to subscribe, because the real data comes from 2 second parameters of useSyncExternalStore are enough
+const subscribe = () => () => {
+    // DO NOTHING
+};

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

@@ -0,0 +1,5 @@
+import { type ProgressIndicatorProps } from './ProgressIndicator.types';
+/**
+ * SVG animation for loading state.
+ */
+export declare function ProgressIndicator({ className, ...props }: ProgressIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../styled-system/css';
+import { progressIndicatorSlotRecipe } from '../../styled-system/recipes';
+/**
+ * SVG animation for loading state.
+ */
+export function ProgressIndicator({ className, ...props }) {
+    const classes = progressIndicatorSlotRecipe();
+    return (_jsxs("svg", { className: cx(classes.root, 'mfui-ProgressIndicator__root', className), viewBox: "0 0 18 18", ...props, children: [_jsx("title", { children: "Loading" }), _jsx("circle", { cx: "9", cy: "9", r: "8" })] }));
+}

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

@@ -0,0 +1,7 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type ProgressIndicatorProps = {
+    /**
+     * The additional class name for the root element.
+     */
+    className?: string;
+} & ComponentPropsWithoutRef<'svg'>;

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+/**
+ * The general-purpose RadioButton component.
+ * This component turns on/off the label depends on the prop: label.
+ *
+ * Also extends the props of `<input type="radio">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ */
+export declare const RadioButton: import("react").ForwardRefExoticComponent<{
+    label?: string;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "disabled" | "checked"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/src/RadioButton/RadioButton.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef, useState } from 'react';
+import { RadioButtonChecked, RadioButtonUnchecked } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../styled-system/css';
+import { FocusIndicator } from '../FocusIndicator';
+import { radioButtonSlotRecipe } from '../../styled-system/recipes';
+import { Typography } from '../Typography';
+import { mergeRefs } from '../utilities/dom/mergeRefs';
+import { RadioGroupContext } from '../RadioGroup/RadioGroupContext';
+/**
+ * The general-purpose RadioButton component.
+ * This component turns on/off the label depends on the prop: label.
+ *
+ * Also extends the props of `<input type="radio">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ */
+export const RadioButton = forwardRef(({ className, label, checked, disabled, onChange, name, defaultChecked, ...props }, ref) => {
+    const radioInputRef = useRef(null);
+    const radioGroupContext = useContext(RadioGroupContext);
+    const [localChecked, setLocalChecked] = useState(!!defaultChecked);
+    const classes = radioButtonSlotRecipe();
+    const isChecked = radioGroupContext.value !== undefined ? radioGroupContext.value === props.value : (checked ?? localChecked);
+    const icon = isChecked ? _jsx(RadioButtonChecked, {}) : _jsx(RadioButtonUnchecked, {});
+    const WrapperTag = label ? 'label' : 'span';
+    const wrapperProps = {
+        className: cx(classes.root, 'mfui-RadioButton__root', className),
+        htmlFor: label ? props.id : undefined,
+    };
+    return (_jsxs(WrapperTag, { ...wrapperProps, children: [_jsx("span", { className: cx(classes.icon, 'mfui-RadioButton__icon'), "aria-hidden": "true", "data-mfui-content": "radio-button-icon", children: icon }), _jsx(FocusIndicator, { hideWhiteBorder: true, children: _jsx("input", { ref: mergeRefs(ref, radioInputRef), type: "radio", checked: isChecked, name: radioGroupContext.name ?? name, disabled: radioGroupContext.disabled ?? disabled, "data-mfui-content": "radio-button-input", className: cx(classes.input, 'mfui-RadioButton__input'), onChange: (event) => {
+                        if (typeof radioGroupContext.onChange === 'function') {
+                            radioGroupContext.onChange(event);
+                            return;
+                        }
+                        onChange?.(event);
+                        // If the event is defaultPrevented in "onChange" prop via "e.preventDefault()", do not update the local
+                        // state.
+                        if (event.defaultPrevented) {
+                            return;
+                        }
+                        setLocalChecked(event.target.checked);
+                    }, ...props }) }), label ? (_jsx(Typography, { variant: "controlLabel", className: cx(classes.label, 'mfui-RadioButton__label'), "data-mfui-content": "radio-button-label", children: label })) : null] }));
+});

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

@@ -0,0 +1,29 @@
+import { type ComponentPropsWithoutRef } from 'react';
+type InputPropsWithoutRef = ComponentPropsWithoutRef<'input'>;
+export type RadioButtonProps = {
+    /**
+     * The content of the radio button label.
+     * It should be only a string value.
+     *
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * The checked state of the radio button.
+     * It should be only a boolean value.
+     * This value will be overridden if the radio button is inside RadioGroup component.
+     *
+     * @default undefined
+     */
+    checked?: InputPropsWithoutRef['checked'];
+    /**
+     * The disabled state of the radio button.
+     * It should be only a boolean value.
+     * This value will be overridden if the radio button is inside RadioGroup component and "disabled" prop of "RadioGroup"
+     * is not "undefined"
+     *
+     * @default undefined
+     */
+    disabled?: InputPropsWithoutRef['disabled'];
+} & Omit<InputPropsWithoutRef, 'checked' | 'disabled'>;
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { type RadioButtonCardResponsiveSlot } from './RadioButtonCard.types';
+/**
+ * A component that transforms radio buttons into card-style selectable elements.
+ * This component turns on/off the label depends on the prop: label, detail and layout.
+ *
+ * Also extends the props of `<input type="radio">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ */
+export declare const RadioButtonCard: import("react").ForwardRefExoticComponent<{
+    layout?: import("../../styled-system/recipes").RadioButtonCardSlotRecipeVariant["layout"];
+    label: string;
+    renderDetailsSlot?: RadioButtonCardResponsiveSlot | import("./RadioButtonCard.types").RadioButtonCardRenderDetailsSlot;
+    disableResponsive?: import("../../styled-system/recipes").RadioButtonCardSlotRecipeVariant["disableResponsive"];
+} & Omit<import("../RadioButton").RadioButtonProps, "label"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/src/RadioButtonCard/RadioButtonCard.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { cx } from '../../styled-system/css';
+import { FocusIndicator } from '../FocusIndicator';
+import { radioButtonCardSlotRecipe } from '../../styled-system/recipes';
+import { RadioButton } from '../RadioButton';
+import { Typography } from '../Typography';
+import { isResponsiveSlot } from '../utilities/responsive';
+/**
+ * A component that transforms radio buttons into card-style selectable elements.
+ * This component turns on/off the label depends on the prop: label, detail and layout.
+ *
+ * Also extends the props of `<input type="radio">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ */
+export const RadioButtonCard = forwardRef(({ label, layout = 'vertical', renderDetailsSlot, disableResponsive = false, className, ...props }, ref) => {
+    const radioButtonState = useMemo(() => ({
+        checked: props.checked,
+        disabled: props.disabled,
+    }), [props.checked, props.disabled]);
+    // Convert renderDetailsSlot to ResponsiveSlot format for consistent handling
+    const responsiveSlot = isResponsiveSlot(renderDetailsSlot)
+        ? renderDetailsSlot
+        : { base: renderDetailsSlot, narrowViewport: undefined };
+    const classes = radioButtonCardSlotRecipe({
+        layout: !renderDetailsSlot ? 'vertical' : layout,
+        disableResponsive,
+        isResponsive: Boolean(responsiveSlot.narrowViewport),
+    });
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-RadioButtonCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-RadioButtonCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(RadioButton, { ref: ref, ...props, className: cx(classes.input, 'mfui-RadioButtonCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-RadioButtonCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (
+            /* When responsive is disabled, render single element but with both contents using CSS for switching */
+            _jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.narrowViewport ? (
+            /* When responsive is enabled, render separate wide/narrow elements */
+            _jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.base ? (
+            /* For function-based renderDetailsSlot or ResponsiveSlot with only base, use single details element */
+            _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) })) : null] }));
+});

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

@@ -0,0 +1,61 @@
+import { type ReactNode } from 'react';
+import { type RadioButtonProps } from '../RadioButton';
+import { type RadioButtonCardSlotRecipeVariant } from '../../styled-system/recipes';
+import { type ResponsiveSlot } from '../types/responsive';
+export type RadioButtonState = Pick<RadioButtonProps, 'checked' | 'disabled'>;
+/**
+ * Function type for rendering RadioButtonCard details content.
+ * Receives the current radio button state as a parameter.
+ */
+export type RadioButtonCardRenderDetailsSlot = (radioButtonState: RadioButtonState) => ReactNode;
+/**
+ * ResponsiveSlot type specifically for RadioButtonCard details content.
+ * Supports different content for desktop and mobile viewports, with functions that receive RadioButtonState.
+ */
+export type RadioButtonCardResponsiveSlot = ResponsiveSlot<RadioButtonCardRenderDetailsSlot>;
+export type RadioButtonCardProps = {
+    /**
+     * The layout of the radio button card.
+     * Currently, the layout can be `horizontal` or `vertical`.
+     *
+     * @default `vertical`
+     */
+    layout?: RadioButtonCardSlotRecipeVariant['layout'];
+    /**
+     * Label text for explaining radio value.
+     */
+    label: string;
+    /**
+     * Content or function to render the details slot.
+     *
+     * @example
+     * ```tsx
+     * // Function-based (current usage - maintains backward compatibility)
+     * renderDetailsSlot={(radioButtonState) => (
+     *   <div>Status: {radioButtonState.checked ? 'Selected' : 'Not selected'}</div>
+     * )}
+     *
+     * // ResponsiveSlot with static content
+     * renderDetailsSlot={{
+     *   base: <div>Desktop details content</div>,
+     *   narrowViewport: <div>Mobile details content</div>
+     * }}
+     *
+     * // ResponsiveSlot with functions
+     * renderDetailsSlot={{
+     *   base: (radioButtonState) => <div>Desktop: {radioButtonState.checked ? 'Yes' : 'No'}</div>,
+     *   narrowViewport: (radioButtonState) => <div>Mobile: {radioButtonState.checked ? '✓' : '✗'}</div>
+     * }}
+     * ```
+     */
+    renderDetailsSlot?: RadioButtonCardResponsiveSlot | RadioButtonCardRenderDetailsSlot;
+    /**
+     * Whether to disable the responsive behavior.
+     *
+     * When set to `true`, the component maintains its layout regardless of viewport size.
+     * When set to `false` (default), the component will automatically switch to vertical layout on narrow viewports.
+     *
+     * @default false
+     */
+    disableResponsive?: RadioButtonCardSlotRecipeVariant['disableResponsive'];
+} & Omit<RadioButtonProps, 'label'>;

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+/**
+ * The general-purpose RadioGroup component.
+ *
+ * The RadioGroup component is designed to ensure that only one radio button can be selected at a time within the
+ * group, simplifying the state management and data handling for forms.
+ *
+ * This component will wrap all radio buttons in a group and control their check state.
+ *
+ * Also extends the props of `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Pick<import("..").RadioButtonProps, "disabled" | "name" | "value" | "defaultValue" | "onChange"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/src/RadioGroup/RadioGroup.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { RadioGroupContext } from './RadioGroupContext';
+import { cx } from '../../styled-system/css';
+import { radioGroupSlotRecipe } from '../../styled-system/recipes';
+/**
+ * The general-purpose RadioGroup component.
+ *
+ * The RadioGroup component is designed to ensure that only one radio button can be selected at a time within the
+ * group, simplifying the state management and data handling for forms.
+ *
+ * This component will wrap all radio buttons in a group and control their check state.
+ *
+ * Also extends the props of `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export const RadioGroup = forwardRef(({ className, defaultValue, value, disabled, name, onChange, children, ...props }, ref) => {
+    const classes = radioGroupSlotRecipe();
+    const [localValue, setLocalValue] = useState(defaultValue);
+    const handleOnChange = useCallback((event) => {
+        const newValue = event.target.value;
+        if (value === undefined) {
+            setLocalValue(newValue);
+        }
+        onChange?.(event);
+    }, [onChange, value]);
+    const contextValue = useMemo(() => ({
+        disabled,
+        name,
+        value: value ?? localValue,
+        onChange: handleOnChange,
+    }), [disabled, handleOnChange, localValue, name, value]);
+    return (_jsx("div", { ref: ref, ...props, className: cx(classes.root, 'mfui-RadioGroup__root', className), role: "radiogroup", children: _jsx(RadioGroupContext.Provider, { value: contextValue, children: children }) }));
+});

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

@@ -0,0 +1,3 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type RadioButtonProps } from '../RadioButton';
+export type RadioGroupProps = Pick<RadioButtonProps, 'defaultValue' | 'value' | 'disabled' | 'name' | 'onChange'> & Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;

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

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

package/dist/esm/src/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,3 @@
+import { type RadioGroupProps } from './RadioGroup.types';
+export type RadioGroupContextType = Pick<RadioGroupProps, 'value' | 'disabled' | 'name' | 'onChange'>;
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextType>;

package/dist/esm/src/RadioGroup/RadioGroupContext.js

@@ -0,0 +1,3 @@
+'use client';
+import { createContext } from 'react';
+export const RadioGroupContext = createContext({});

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { type SearchBoxProps } from './SearchBox.types';
+/**
+ * The component wrapped the TextBox component with Search icon.
+ * Some props in the TextBox component are not supported.
+ */
+export declare const SearchBox: import("react").ForwardRefExoticComponent<SearchBoxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/src/SearchBox/SearchBox.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Search } from '@moneyforward/mfui-icons-react';
+import { TextBox } from '../TextBox';
+import { cx } from '../../styled-system/css';
+/**
+ * The component wrapped the TextBox component with Search icon.
+ * Some props in the TextBox component are not supported.
+ */
+export const SearchBox = forwardRef(({ className, ...rest }, ref) => (_jsx(TextBox, { ref: ref, prefixSlot: _jsx(Search, {}), className: cx('mfui-SearchBox__root', className), ...rest })));

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

@@ -0,0 +1,9 @@
+import { type TextBoxProps } from '../TextBox';
+/**
+ * The props for the SearchBox component.
+ *
+ * Some props in the TextBox component are not supported.
+ *
+ * - 'prefixSlot' and 'suffixSlot' props
+ */
+export type SearchBoxProps = Omit<TextBoxProps, 'prefixSlot' | 'suffixSlot'>;

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * The SectionMessage component is used to display an inline message inside a page or some container.
+ * Note: We changed the name of the component from `InlineMessage` to `SectionMessage`.
+ *
+ * This component switches the variants of looks depends on the props `messageType` and `region`.
+ *
+ * Also extends the props of `<div>` element (the wrapper).
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const SectionMessage: import("react").ForwardRefExoticComponent<{
+    messageType?: import("../../styled-system/recipes").SectionMessageSlotRecipeVariant["messageType"];
+    region?: import("../../styled-system/recipes").SectionMessageSlotRecipeVariant["region"];
+    actionSlot?: import("react").ReactNode;
+    onClose?: import("../IconButton").IconButtonProps["onClick"];
+    children?: import("react").ReactNode;
+    statusIconProps?: Pick<import("react").ComponentPropsWithoutRef<"svg">, "aria-label">;
+    closeButtonProps?: Pick<import("react").ComponentPropsWithoutRef<"svg">, "aria-label">;
+    disableResponsive?: boolean;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/src/SectionMessage/SectionMessage.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Error, Approval, Caution, Close } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../styled-system/css';
+import { sectionMessageSlotRecipe } from '../../styled-system/recipes';
+import { IconButton } from '../IconButton';
+import { Typography } from '../Typography';
+/**
+ * The SectionMessage component is used to display an inline message inside a page or some container.
+ * Note: We changed the name of the component from `InlineMessage` to `SectionMessage`.
+ *
+ * This component switches the variants of looks depends on the props `messageType` and `region`.
+ *
+ * Also extends the props of `<div>` element (the wrapper).
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export const SectionMessage = forwardRef(({ messageType = 'neutral', region = 'inline', className, actionSlot, onClose, children, statusIconProps, closeButtonProps, disableResponsive = false, ...props }, ref) => {
+    const classes = sectionMessageSlotRecipe({
+        messageType,
+        region,
+        disableResponsive,
+    });
+    const StatusIcon = {
+        neutral: null,
+        success: (_jsx(Approval, { "aria-label": statusIconProps?.['aria-label'] ?? '完了', className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
+        error: (_jsx(Error, { "aria-label": statusIconProps?.['aria-label'] ?? 'エラー', className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
+        caution: (_jsx(Caution, { "aria-label": statusIconProps?.['aria-label'] ?? '注意', className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
+    }[messageType];
+    const contentIsString = typeof children === 'string';
+    return (_jsxs("div", { ref: ref, className: cx(classes.root, 'mfui-SectionMessage__root', className), ...props, role: "alert", children: [_jsxs("div", { className: cx(classes.topSection, 'mfui-SectionMessage__topSection'), children: [_jsxs("div", { className: cx(classes.content, 'mfui-SectionMessage__content'), children: [StatusIcon, contentIsString ? _jsx(Typography, { variant: "body", children: children }) : children] }), _jsxs("div", { className: cx(classes.rightSection, 'mfui-SectionMessage__rightSection'), children: [_jsx("div", { className: cx(classes.actionSlot, classes.desktopActionSlot, 'mfui-SectionMessage__actionSlot'), "data-mfui-content": "SectionMessage-action-slot-desktop", children: actionSlot }), onClose ? (_jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: onClose, children: _jsx(Close, { "aria-hidden": true, className: cx(classes.closeIcon, 'mfui-SectionMessage__closeIcon') }) })) : null] })] }), actionSlot && !disableResponsive ? (_jsx("div", { className: cx(classes.actionSlot, classes.mobileActionSlot, 'mfui-SectionMessage__actionSlot'), "data-mfui-content": "SectionMessage-action-slot-mobile", children: actionSlot })) : null] }));
+});

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

@@ -0,0 +1,59 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type SectionMessageSlotRecipeVariant } from '../../styled-system/recipes';
+import { type IconButtonProps } from '../IconButton';
+/**
+ * Props for SectionMessage component
+ * It extends the props of `<div>` element.
+ */
+export type SectionMessageProps = {
+    /**
+     * The type of the message
+     *
+     * @default 'neutral'
+     */
+    messageType?: SectionMessageSlotRecipeVariant['messageType'];
+    /**
+     * Where to display this SectionMessage
+     *
+     * @default 'inline'
+     */
+    region?: SectionMessageSlotRecipeVariant['region'];
+    /**
+     * The action slot of the SectionMessage
+     */
+    actionSlot?: ReactNode;
+    /**
+     * The function to be called when the close button is clicked
+     */
+    onClose?: IconButtonProps['onClick'];
+    /**
+     * The content of the SectionMessage
+     * Normally, it should be a string
+     * If you don't define, it will be empty
+     */
+    children?: ReactNode;
+    /**
+     * Props for the status icon.
+     *
+     * @property aria-label - The text alternative for the status icon. By default, `messageType` is:
+     * - `success`: '完了'
+     * - `error`: 'エラー'
+     * - `caution`: '注意'
+     */
+    statusIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
+    /**
+     * Props for the close button.
+     *
+     * @property aria-label - The accessible name for the close button. It's '閉じる' by default.
+     */
+    closeButtonProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
+    /**
+     * Whether to disable responsive layout behavior.
+     * When false (default), the component will switch to mobile layout on narrow viewports (< 600px),
+     * moving the actionSlot to the bottom while keeping the close button in the top right.
+     * When true, the component maintains the desktop layout on all viewport sizes.
+     *
+     * @default false
+     */
+    disableResponsive?: boolean;
+} & ComponentPropsWithoutRef<'div'>;

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type BasedAdditionalProps, type SelectBoxProps } from './SelectBox.types';
+/**
+ * The general-purpose SelectBox component.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
+ */
+export declare const SelectBox: (<T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps>(props: SelectBoxProps<T, AdditionalProps> & {
+    ref?: React.ForwardedRef<HTMLInputElement>;
+}) => React.ReactElement) & {
+    displayName: string;
+};