@moneyforward/mfui-components 3.0.0 → 3.2.0

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.d.ts

@@ -4,4 +4,4 @@ import { type BasePickerProps } from './BasePicker.types';
  * This component uses the composition component of the TextBox component. Please refer to the TextBox documentation for their usage.
  * This component extends the props of TextBox component.
  */
-export declare function BasePicker({ targetDOMNode, enableAutoUnmount, open, onOpenStateChanged, disableAutoOpen, format, baseFormat, customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale, disabled, ...textBoxProps }: BasePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BasePicker({ targetDOMNode, enableAutoUnmount, open, onOpenStateChanged, disableAutoOpen, format, baseFormat, customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, enableViewportConstraint, calendarLocale, disabled, ...textBoxProps }: BasePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.js

@@ -18,7 +18,7 @@ import { getBasePickerLabel } from './constants';
  * This component uses the composition component of the TextBox component. Please refer to the TextBox documentation for their usage.
  * This component extends the props of TextBox component.
  */
-export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = false, onOpenStateChanged, disableAutoOpen = false, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale = 'ja', disabled, ...textBoxProps }) {
+export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = false, onOpenStateChanged, disableAutoOpen = false, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, enableViewportConstraint, calendarLocale = 'ja', disabled, ...textBoxProps }) {
     const textBoxRef = useRef(null);
     const basePickerPopoverWrapperRef = useRef(null);
     const triggerRef = useRef(null);
@@ -93,7 +93,7 @@ export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = fal
                     inputValueProps.onBlur(event);
                     // Then call the Popover's smart blur detection
                     handleTriggerBlur(event);
-                } })), open: isBasePickerOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, minWidth: "min-content", value: value, defaultValue: defaultValue, baseFormat: baseFormat, renderPopoverContent: renderPopoverContent, textBoxRef: textBoxRef, triggerRef: triggerRef, basePickerPopoverWrapperRef: basePickerPopoverWrapperRef, handleOnKeyDown: handleOnKeyDown, pickerPopoverProps: pickerPopoverProps, allowedPlacements: allowedPlacements, onOpenStateChanged: toggleBasePicker, onBlur: onBlur }) }));
+                } })), open: isBasePickerOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, minWidth: "min-content", value: value, defaultValue: defaultValue, baseFormat: baseFormat, renderPopoverContent: renderPopoverContent, textBoxRef: textBoxRef, triggerRef: triggerRef, basePickerPopoverWrapperRef: basePickerPopoverWrapperRef, handleOnKeyDown: handleOnKeyDown, pickerPopoverProps: pickerPopoverProps, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, onOpenStateChanged: toggleBasePicker, onBlur: onBlur }) }));
 }
 /**
  * Internal Popover component that needs access to BasePickerContext.
@@ -101,7 +101,7 @@ export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = fal
  * which requires being within a BasePickerProvider. Creating it as an internal
  * component ensures proper context access while keeping the logic encapsulated.
  */
-function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseFormat = 'YYYY-MM-DD', renderPopoverContent, basePickerPopoverWrapperRef, handleOnKeyDown, pickerPopoverProps, onOpenStateChanged, allowedPlacements, ...popoverProps }) {
+function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseFormat = 'YYYY-MM-DD', renderPopoverContent, basePickerPopoverWrapperRef, handleOnKeyDown, pickerPopoverProps, onOpenStateChanged, allowedPlacements, enableViewportConstraint, ...popoverProps }) {
     // Always call the hook at the top level to ensure consistent hook order
     const { viewingValue, setViewingValue, setPendingFocusDate } = useBasePickerContext();
     const handlePopoverOpen = useCallback((event) => {
@@ -129,7 +129,7 @@ function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseForm
         // Set the pending focus date to ensure proper focus after month change
         setPendingFocusDate(formattedDate);
     }, [textBoxRef, triggerRef, value, defaultValue, baseFormat, setViewingValue, setPendingFocusDate]);
-    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, enableViewportConstraint: false, enableAutoFocusOnPopover: false, ...popoverProps, renderContent: () => (_jsx("div", { ref: basePickerPopoverWrapperRef, className: "mfui-BasePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: renderPopoverContent({
+    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, enableViewportConstraint: enableViewportConstraint ?? false, enableAutoFocusOnPopover: false, ...popoverProps, renderContent: () => (_jsx("div", { ref: basePickerPopoverWrapperRef, className: "mfui-BasePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: renderPopoverContent({
                 viewingValue,
                 setViewingValue,
                 value: pickerPopoverProps.value,

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.types.d.ts

@@ -118,4 +118,4 @@ export type BasePickerProps = {
      * @see https://en.wikipedia.org/wiki/ISO_8601
      */
     baseFormat?: string;
-} & Omit<TextBoxProps, 'value' | 'defaultValue' | 'onChange'> & Pick<PopoverProps, 'allowedPlacements'>;
+} & Omit<TextBoxProps, 'value' | 'defaultValue' | 'onChange'> & Pick<PopoverProps, 'allowedPlacements' | 'enableViewportConstraint'>;

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.d.ts

@@ -3,4 +3,4 @@ import { type BaseRangePickerProps } from './BaseRangePicker.types';
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.js

@@ -9,7 +9,7 @@ import { dayjs } from '../../../utilities/date/dayjs';
 /**
  * Internal component that has access to BaseRangePickerContext
  */
-function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', }) {
+function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, enableViewportConstraint, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', }) {
     const { setPendingFocusDate, temporaryStart, temporaryEnd, viewingMonth, setViewingMonth } = useBaseRangePickerContext();
     // Custom onOpen handler to prevent auto-focus when clicking on input elements
     // and implement smart focus management for calendar dates
@@ -49,7 +49,7 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
         setPendingFocusDate(formattedDate);
         open();
     }, [startInputRef, endInputRef, temporaryStart, temporaryEnd, setPendingFocusDate, open, format]);
-    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, open: isOpen, allowedPlacements: allowedPlacements, minWidth: minWidth, renderTrigger: ({ setTriggerRef, handleTriggerBlur, handleTriggerKeyDown, openPopover }) => (_jsx(BaseRangePickerTrigger, { ref: setTriggerRef, disabled: disabled, invalid: invalid, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: handleTriggerKeyDown })), renderContent: () => renderPopoverContent({
+    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, open: isOpen, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, minWidth: minWidth, renderTrigger: ({ setTriggerRef, handleTriggerBlur, handleTriggerKeyDown, openPopover }) => (_jsx(BaseRangePickerTrigger, { ref: setTriggerRef, disabled: disabled, invalid: invalid, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: handleTriggerKeyDown })), renderContent: () => renderPopoverContent({
             viewingValue: viewingMonth,
             setViewingValue: setViewingMonth,
             value: [temporaryStart, temporaryEnd],
@@ -61,12 +61,12 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', }) {
+export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', }) {
     const { isOpen, open, close } = useDisclosure({ value: false });
     const startInputRef = useRef(null);
     const endInputRef = useRef(null);
     // Default renderPopoverContent implementation for backward compatibility
     const defaultRenderPopoverContent = useCallback(() => _jsx(BaseRangePickerPopover, { calendarLocale: calendarLocale }), [calendarLocale]);
     const finalRenderPopoverContent = renderPopoverContent ?? defaultRenderPopoverContent;
-    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
 }

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.types.d.ts

@@ -128,6 +128,14 @@ export type BaseRangePickerProps = {
      * ```
      */
     allowedPlacements?: PopoverProps['allowedPlacements'];
+    /**
+     * Whether to enable viewport constraint for the popover.
+     * When true, the popover will be constrained within the visible viewport and a maxHeight is applied.
+     * Set to true when the picker is inside a constrained container like SidePane.
+     *
+     * @default true
+     */
+    enableViewportConstraint?: PopoverProps['enableViewportConstraint'];
     /**
      * Whether to enable the clear button functionality.
      * When enabled, a clear button will appear when there are values in the date inputs.

package/dist/src/FileBox/FileBox.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useRef, useState } from 'react';
-import { Close } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { fileBoxSlotRecipe } from '../../styled-system/recipes';
 import { FocusIndicator } from '../FocusIndicator';
-import { IconButton } from '../IconButton';
+import { ClearButton } from '../shared/ClearButton';
 import { useIsTextOverflowed } from '../utilities/dom/useIsTextOverflowed';
 /**
  * The component for selecting a single file or multiple files for upload.
@@ -80,6 +79,6 @@ export const FileBox = forwardRef(({ invalid = false, disabled = false, classNam
                     }, id: id, type: "file", accept: accept, multiple: multiple, disabled: disabled, 
                     // https://github.com/w3c/html-aria/issues/126
                     // following Chrome's classification
-                    role: "button", className: cx(classes.input, 'mfui-FileBox__input'), onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop }, key), _jsx("div", { "data-mfui-content": "filebox-input-background", className: cx(classes.inputBackground, 'mfui-FileBox__inputBackground') }), _jsxs("div", { "data-mfui-content": "filebox-container", className: cx(classes.container, 'mfui-FileBox__container'), children: [_jsx("div", { "data-mfui-content": "filebox-button", ...props, className: cx(classes.button, 'mfui-FileBox__button', className), children: buttonLabel }), _jsxs("div", { "data-mfui-content": "filebox-file-info", className: cx(classes.fileInfo, 'mfui-FileBox__fileInfo'), children: [renderDisplayValues(), values !== null && values.length > 0 && (_jsx(IconButton, { "aria-label": clearButtonProps?.['aria-label'] ?? 'ファイルをクリアする', className: cx(classes.clearButton, 'mfui-FileBox__clearButton'), onClick: handleClear, children: _jsx(Close, {}) }))] })] })] }) }));
+                    role: "button", className: cx(classes.input, 'mfui-FileBox__input'), onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop }, key), _jsx("div", { "data-mfui-content": "filebox-input-background", className: cx(classes.inputBackground, 'mfui-FileBox__inputBackground') }), _jsxs("div", { "data-mfui-content": "filebox-container", className: cx(classes.container, 'mfui-FileBox__container'), children: [_jsx("div", { "data-mfui-content": "filebox-button", ...props, className: cx(classes.button, 'mfui-FileBox__button', className), children: buttonLabel }), _jsxs("div", { "data-mfui-content": "filebox-file-info", className: cx(classes.fileInfo, 'mfui-FileBox__fileInfo'), children: [renderDisplayValues(), values !== null && values.length > 0 && (_jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? 'ファイルをクリアする', className: cx(classes.clearButton, 'mfui-FileBox__clearButton'), onClick: handleClear }))] })] })] }) }));
 });
 FileBox.displayName = 'FileBox';

package/dist/src/FileDropZone/FileDropZone.js

@@ -1,14 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useEffect, useLayoutEffect, useCallback, useMemo } from 'react';
-import { Close } from '@moneyforward/mfui-icons-react';
 import { fileDropZoneSlotRecipe } from '../../styled-system/recipes';
 import { cx } from '../../styled-system/css';
 import { useMiddleTruncatedText } from '../utilities/dom/useMiddleTruncatedText';
-import { IconButton } from '../IconButton';
+import { ClearButton } from '../shared/ClearButton';
 import { HelpMessage } from '../HelpMessage';
 import { Button } from '../Button';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
+import { useIsNarrowViewport } from '../utilities/responsive/useIsNarrowViewport';
 /**
  * The component for selecting a single file or multiple files for upload by dialog or drag and drop.
  *
@@ -59,8 +59,6 @@ fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel
             ? screenReaderTexts.multiple(Number(data))
             : `選択済みファイル: ${String(data)}個のファイル`;
     };
-    // Get clear button aria-label with priority: clearButtonProps['aria-label'] > default
-    const getClearButtonAriaLabel = () => clearButtonProps?.['aria-label'] || 'ファイルをクリアする';
     const isControlled = value !== undefined;
     const [internalValues, setInternalValues] = useState(defaultValue);
     const [isDragging, setIsDragging] = useState(false);
@@ -72,8 +70,9 @@ fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel
     const previousValueRef = useRef(value);
     const isUserInitiatedClearRef = useRef(false);
     const displayValues = isControlled ? value : internalValues;
-    const CLEAR_BUTTON_WIDTH = 24; // Width of clear button to subtract from available space
-    const truncatedSingleName = useMiddleTruncatedText(displayValues?.[0] ?? '', fileNameRef, CLEAR_BUTTON_WIDTH);
+    const isNarrowViewport = useIsNarrowViewport();
+    const clearButtonWidth = isNarrowViewport ? 32 : 24;
+    const truncatedSingleName = useMiddleTruncatedText(displayValues?.[0] ?? '', fileNameRef, clearButtonWidth);
     const classes = fileDropZoneSlotRecipe({ isDragging, invalid });
     const gap = 7; // From spacing.mfui.size.spacing.inline.horizontal.comfort token value
     const fileInfoWidth = useMemo(() => {
@@ -209,7 +208,7 @@ fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel
     }, [displayValues, truncatedSingleName, classes.span, getFileCountText]);
     return (_jsxs("div", { className: cx(classes.root, 'mfui-FileDropZone__root'), children: [_jsx("input", { ref: mergeRefs(ref, inputRef), id: id, type: "file", disabled: disabled, multiple: multiple, accept: accept, className: cx(classes.input, 'mfui-FileDropZone__input'), tabIndex: -1, "aria-hidden": "true", onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, ...props }, key), _jsxs("div", { "data-mfui-content": "file-drop-zone-container", className: cx(classes.container, 'mfui-FileDropZone__container', className), style: style, onClick: handleContainerClick, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [illustrationUrl ? (_jsx("div", { "data-mfui-content": "file-drop-zone-illustration", className: cx(classes.illustration, 'mfui-FileDropZone__illustration'), children: _jsx("img", { src: illustrationUrl, alt: "illustration" }) })) : null, _jsxs("div", { "data-mfui-content": "file-drop-zone-main-container", className: cx(classes.mainContainer, 'mfui-FileDropZone__mainContainer'), style: { maxWidth: fileBoxWidth }, children: [_jsx("div", { "data-mfui-content": "file-drop-zone-instruction", className: cx(classes.instruction, 'mfui-FileDropZone__instruction'), children: _jsx("p", { className: cx(classes.phrase, 'mfui-FileDropZone__phrase'), children: normalizedInstructionText }) }), _jsxs("div", { "data-mfui-content": "file-drop-zone-button-container", className: cx(classes.buttonContainer, 'mfui-FileDropZone__buttonContainer'), children: [_jsx(Button, { ref: buttonRef, className: cx(classes.button, 'mfui-FileDropZone__button'), disabled: disabled, "aria-describedby": errorMessage || helperMessage || (displayValues && displayValues.length > 0)
                                             ? `${id ? `${id}-` : ''}file-drop-zone-messages`
-                                            : undefined, onClick: handleFileInputTrigger, children: fileSelectButtonLabel }), displayValues !== undefined && displayValues.length > 0 && (_jsxs("div", { "data-mfui-content": "file-drop-zone-file-info", className: cx(classes.fileInfo, 'mfui-FileDropZone__fileInfo'), style: { maxWidth: `${(fileInfoWidth || 147).toString()}px` }, children: [renderDisplayValues, _jsx(IconButton, { ...clearButtonProps, "aria-label": getClearButtonAriaLabel(), className: cx(classes.clearButton, 'mfui-FileDropZone__clearButton'), disabled: disabled, onClick: handleClear, children: _jsx(Close, {}) })] }))] }), _jsxs("div", { id: id ? `${id}-file-drop-zone-messages` : 'file-drop-zone-messages', "data-mfui-content": "file-drop-zone-help-message", className: cx(classes.helpMessage, 'mfui-FileDropZone__helpMessage'), children: [errorMessage ? (_jsx(HelpMessage, { messageType: "error", messageAlign: "center", children: errorMessage })) : null, helperMessage ? _jsx(HelpMessage, { messageAlign: "center", children: helperMessage }) : null, displayValues && displayValues.length > 0 ? (_jsx("div", { className: "sr-only", children: displayValues.length === 1
+                                            : undefined, onClick: handleFileInputTrigger, children: fileSelectButtonLabel }), displayValues !== undefined && displayValues.length > 0 && (_jsxs("div", { "data-mfui-content": "file-drop-zone-file-info", className: cx(classes.fileInfo, 'mfui-FileDropZone__fileInfo'), style: { maxWidth: `${(fileInfoWidth || 147).toString()}px` }, children: [renderDisplayValues, _jsx(ClearButton, { ...clearButtonProps, "aria-label": clearButtonProps?.['aria-label'] ?? 'ファイルをクリアする', className: cx(classes.clearButton, 'mfui-FileDropZone__clearButton'), disabled: disabled, onClick: handleClear })] }))] }), _jsxs("div", { id: id ? `${id}-file-drop-zone-messages` : 'file-drop-zone-messages', "data-mfui-content": "file-drop-zone-help-message", className: cx(classes.helpMessage, 'mfui-FileDropZone__helpMessage'), children: [errorMessage ? (_jsx(HelpMessage, { messageType: "error", messageAlign: "center", children: errorMessage })) : null, helperMessage ? _jsx(HelpMessage, { messageAlign: "center", children: helperMessage }) : null, displayValues && displayValues.length > 0 ? (_jsx("div", { className: "sr-only", children: displayValues.length === 1
                                             ? getScreenReaderText('single', displayValues[0] || '')
                                             : getScreenReaderText('multiple', displayValues.length) })) : null] })] }), extraElement ? (_jsx("div", { "data-mfui-content": "file-drop-zone-extra", className: cx(classes.extra, 'mfui-FileDropZone__extra'), children: extraElement })) : null] })] }));
 });

package/dist/src/Pagination/ItemsPerPage/ItemsPerPage.js

@@ -13,7 +13,7 @@ export function ItemsPerPage({ itemsPerPage, itemsPerPageLabel, itemsPerPageOpti
                     }, value: { value: itemsPerPage.toString(), label: itemsPerPage.toString() }, options: itemsPerPageOptions.map((value) => ({
                         value: value.toString(),
                         label: value.toString(),
-                    })), popoverContentProps: { className: classes.optionPanel }, onChange: (value) => {
-                        onItemsPerPageChange?.(Number(value));
+                    })), popoverContentProps: { className: classes.optionPanel }, onChange: (option) => {
+                        onItemsPerPageChange?.(Number(option?.value));
                     } }) })] }));
 }

package/dist/src/Pagination/PagePicker/PagePicker.js

@@ -17,8 +17,8 @@ export function PagePicker({ currentPageNumber, totalPages, prevButtonProps, pag
                     }, value: { value: currentPageNumber.toString(), label: currentPageNumber.toString() }, options: Array.from({ length: totalPages }).map((_, index) => ({
                         value: (index + 1).toString(),
                         label: (index + 1).toString(),
-                    })), popoverContentProps: { className: classes.optionPanel }, onChange: (value) => {
-                        onPageChange?.(Number(value));
+                    })), popoverContentProps: { className: classes.optionPanel }, onChange: (option) => {
+                        onPageChange?.(Number(option?.value));
                     } }) }), _jsx(Typography, { className: cx(classes.separator, 'mfui-PagePicker__separator'), children: "/" }), _jsxs(Typography, { className: cx(classes.totalPages, 'mfui-PagePicker__totalPages'), children: [totalPages, pageSuffixLabel] }), _jsx(IconButton, { className: cx(classes.nextButton, 'mfui-PagePicker__nextButton'), "aria-label": nextButtonProps?.['aria-label'] ?? '次のページへ進む', disabled: currentPageNumber === totalPages, onClick: () => {
                     onPageChange?.(currentPageNumber + 1);
                 }, children: _jsx(PickerAfter, {}) })] }));

package/dist/src/Popover/Popover.js

@@ -93,7 +93,7 @@ export function Popover({ renderTrigger, renderContent, open, onOpenStateChanged
             const triggerElement = refs.reference.current;
             const popoverElement = refs.floating.current;
             // Get the appropriate root node for the trigger element
-            const rootNode = getRootNode(triggerElement);
+            const rootNode = getRootNode(triggerElement, { allowDetached: true });
             // Helper function to check if an element is within the component
             const isElementWithinComponent = (element) => {
                 if (!element)

package/dist/src/SelectBox/SelectBox.js

@@ -1,12 +1,14 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { Dropdown as DropdownIcon } from '@moneyforward/mfui-icons-react';
+import { Dropdown as DropdownIcon, Error } from '@moneyforward/mfui-icons-react';
 import { ClearButton } from '../shared/ClearButton';
 import { FocusIndicator } from '../FocusIndicator';
 import { selectBoxSlotRecipe } from '../../styled-system/recipes';
 import { Typography } from '../Typography';
 import { SearchBox } from '../SearchBox';
+import { Button } from '../Button';
+import { ProgressIndicator } from '../ProgressIndicator';
 import { useSearchBox } from './hooks/useSearchBox';
 import { Skeleton } from '../Skeleton';
 import { useFocusTrap } from '../utilities/dom/useFocusTrap';
@@ -22,6 +24,7 @@ import { SelectBoxOptionComponent } from './SelectBoxOption';
 import { SelectBoxOptionGroup } from './SelectBoxOptionGroup';
 import { isOptionDisabled } from './utils/isSelectableOption';
 import { useVirtualizedOptions } from './hooks/useVirtualizedOptions';
+import { useInfiniteScroll } from './hooks/useInfiniteScroll';
 const DEFAULT_SCROLL_OPTIONS = {
     behavior: 'auto',
     block: 'center',
@@ -35,7 +38,7 @@ const SKELETON_ITEM_COUNT = 4;
 export const SelectBox = forwardRef((props, ref) => {
     const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
-    placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, } = props;
+    placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, infiniteScroll, } = props;
     const classes = selectBoxSlotRecipe({ size, showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -117,6 +120,25 @@ export const SelectBox = forwardRef((props, ref) => {
         estimateSize: virtualizationOptions?.estimateSize,
         overscan: virtualizationOptions?.overscan,
     });
+    // Extract infinite scroll configuration with defaults
+    const baseEnabledInfiniteScroll = infiniteScroll?.enabled ?? false;
+    const onLoadMore = infiniteScroll?.onLoadMore;
+    const hasNextPage = infiniteScroll?.hasNextPage ?? true;
+    const hasPreviousPage = infiniteScroll?.hasPreviousPage ?? true;
+    const infiniteScrollThreshold = infiniteScroll?.threshold ?? 100;
+    const infiniteScrollErrorMessage = infiniteScroll?.errorMessage ?? '読み込みに失敗しました';
+    const infiniteScrollRetryButtonText = infiniteScroll?.retryButtonText ?? '再読み込み';
+    // Initialize infinite scroll
+    const { isLoading: isInfiniteScrollLoading, error: infiniteScrollError, handleScroll: handleInfiniteScroll, retryLoad: retryInfiniteScroll, } = useInfiniteScroll({
+        onLoadMore,
+        hasNextPage,
+        hasPreviousPage,
+    }, {
+        enabled: baseEnabledInfiniteScroll,
+        threshold: infiniteScrollThreshold,
+    });
+    // Disable infinite scroll when there's an error
+    const enableInfiniteScroll = baseEnabledInfiniteScroll && !infiniteScrollError;
     const handleSelectOption = useCallback((option) => {
         if (isOptionDisabled(option))
             return;
@@ -266,7 +288,23 @@ export const SelectBox = forwardRef((props, ref) => {
                 : options.length > 0
                     ? notFoundMessage
                     : emptyMessage }) })), [classes.emptyMessage, enableSearchOptions, searchText, notFoundMessage, options.length, emptyMessage]);
-    const optionsNode = (_jsx("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), children: _jsx("ul", { role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
+    // Render infinite scroll error message with retry button
+    const renderInfiniteScrollError = useCallback(() => infiniteScrollError ? (_jsxs("li", { className: cx(classes.infiniteScrollError, 'mfui-SelectBox__infiniteScrollError'), role: "alert", children: [_jsxs("div", { className: cx(classes.infiniteScrollErrorMessage, 'mfui-SelectBox__infiniteScrollErrorMessage'), "aria-live": "polite", children: [_jsx(Error, { "aria-hidden": true, className: cx(classes.infiniteScrollErrorIcon, 'mfui-SelectBox__infiniteScrollErrorIcon') }), _jsx(Typography, { variant: "body", children: infiniteScrollErrorMessage })] }), _jsx("div", { className: cx(classes.infiniteScrollErrorButton, 'mfui-SelectBox__infiniteScrollErrorButton'), children: _jsx(Button, { size: "small", onClick: (event) => {
+                        event.stopPropagation();
+                        retryInfiniteScroll();
+                    }, children: infiniteScrollRetryButtonText }) })] })) : null, [
+        infiniteScrollError,
+        classes.infiniteScrollError,
+        classes.infiniteScrollErrorIcon,
+        classes.infiniteScrollErrorMessage,
+        classes.infiniteScrollErrorButton,
+        retryInfiniteScroll,
+        infiniteScrollErrorMessage,
+        infiniteScrollRetryButtonText,
+    ]);
+    // Render infinite scroll loading indicator
+    const renderInfiniteScrollLoading = useCallback(() => isInfiniteScrollLoading && enableInfiniteScroll ? (_jsx("div", { className: cx(classes.infiniteScrollLoading, 'mfui-SelectBox__infiniteScrollLoading'), children: _jsx(ProgressIndicator, {}) })) : null, [isInfiniteScrollLoading, enableInfiniteScroll, classes.infiniteScrollLoading]);
+    const optionsNode = (_jsx("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: _jsx("ul", { role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
                 ? {
                     height: `${String(totalSize)}px`,
                     position: 'relative',
@@ -275,10 +313,10 @@ export const SelectBox = forwardRef((props, ref) => {
                 ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-SelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
                 : isVirtualized && virtualItems.length > 0
                     ? // Virtualized rendering with group support
-                        renderVirtualizedItems()
+                        [...renderVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
                     : filteredOptions.length > 0
-                        ? renderNonVirtualizedItems()
-                        : renderEmptyMessage() }) }));
+                        ? [...renderNonVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
+                        : [renderEmptyMessage(), renderInfiniteScrollError()].filter(Boolean) }) }));
     const handleClearValue = () => {
         setLocalSelectedOption(null);
         onChange?.(null);
@@ -290,7 +328,7 @@ export const SelectBox = forwardRef((props, ref) => {
     return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {
                             handleTypeAhead(event.nativeEvent);
                             handleTriggerKeyDown(event);
-                        }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, {}), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {
+                        }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, {}), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : size === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {
                             event.stopPropagation();
                             handleClearValue();
                         } }) })) : null] })), contentProps: { className: classes.popover }, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));

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

@@ -3,8 +3,61 @@ import { type VirtualizerOptions } from '@tanstack/react-virtual';
 import { type SelectBoxSlotRecipeVariant } from '../../styled-system/recipes';
 import { type SearchBoxProps } from '../SearchBox';
 import { type PopoverProps } from '../Popover';
+import { type InfiniteScrollDirection } from './hooks/useInfiniteScroll';
 type AllowedValueTypes = string | number | undefined;
 export type VirtualOptionTypes = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
+export type InfiniteScrollConfig = {
+    /**
+     * Enable infinite scroll functionality.
+     * When enabled, additional options can be loaded dynamically when scrolling.
+     *
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Callback executed when more options need to be loaded.
+     * Called when user scrolls near the top or bottom of the options list.
+     *
+     * @param direction - The direction of loading ('forward' for bottom, 'backward' for top)
+     */
+    onLoadMore?: (direction: InfiniteScrollDirection) => Promise<void>;
+    /**
+     * Whether there are more options available to load in the forward direction (bottom).
+     * Used to determine if infinite scroll should trigger when scrolling down.
+     *
+     * @default true
+     */
+    hasNextPage?: boolean;
+    /**
+     * Whether there are more options available to load in the backward direction (top).
+     * Used to determine if infinite scroll should trigger when scrolling up.
+     *
+     * @default true
+     */
+    hasPreviousPage?: boolean;
+    /**
+     * The scroll threshold in pixels for triggering infinite scroll.
+     * When the scroll position is within this distance from the top or bottom,
+     * the onLoadMore callback will be triggered.
+     *
+     * @default 100
+     */
+    threshold?: number;
+    /**
+     * The error message to display when loading fails.
+     * This message supports internationalization.
+     *
+     * @default "Failed to load data"
+     */
+    errorMessage?: string;
+    /**
+     * The text for the retry button when loading fails.
+     * This message supports internationalization.
+     *
+     * @default "Retry"
+     */
+    retryButtonText?: string;
+};
 export type BasedAdditionalProps = Record<string, unknown>;
 export type SelectBoxOption<T extends AllowedValueTypes = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps> = ({
     /**
@@ -351,5 +404,31 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * ```
      */
     virtualizationOptions?: VirtualOptionTypes;
+    /**
+     * Infinite scroll configuration.
+     * When provided, enables infinite scroll functionality for loading additional options dynamically.
+     *
+     * @example
+     * ```tsx
+     * <SelectBox
+     *   infiniteScroll={{
+     *     enabled: true,
+     *     onLoadMore: async (direction) => {
+     *       if (direction === 'forward') {
+     *         const nextOptions = await loadNextPage();
+     *         setOptions(prev => [...prev, ...nextOptions]);
+     *       } else {
+     *         const prevOptions = await loadPreviousPage();
+     *         setOptions(prev => [...prevOptions, ...prev]);
+     *       }
+     *     },
+     *     hasNextPage: hasMore,
+     *     hasPreviousPage: hasPrevious,
+     *     threshold: 50 // Trigger when within 50px of edges
+     *   }}
+     * />
+     * ```
+     */
+    infiniteScroll?: InfiniteScrollConfig;
 };
-export {};
+export { type InfiniteScrollDirection } from './hooks/useInfiniteScroll';

package/dist/src/SelectBox/hooks/useInfiniteScroll.d.ts

@@ -0,0 +1,22 @@
+export type InfiniteScrollDirection = 'forward' | 'backward';
+export type InfiniteScrollCallbacks = {
+    onLoadMore?: (direction: InfiniteScrollDirection) => Promise<void>;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
+};
+export type InfiniteScrollError = {
+    direction: InfiniteScrollDirection;
+    error: Error;
+};
+export type UseInfiniteScrollOptions = {
+    enabled?: boolean;
+    threshold?: number;
+};
+export type UseInfiniteScrollReturn = {
+    isLoading: boolean;
+    error: InfiniteScrollError | null;
+    handleScroll: (event: React.UIEvent<HTMLElement>) => void;
+    retryLoad: () => void;
+    clearError: () => void;
+};
+export declare const useInfiniteScroll: (callbacks: InfiniteScrollCallbacks, options?: UseInfiniteScrollOptions) => UseInfiniteScrollReturn;

package/dist/src/SelectBox/hooks/useInfiniteScroll.js

@@ -0,0 +1,65 @@
+import { useCallback, useRef, useState } from 'react';
+export const useInfiniteScroll = (callbacks, options = {}) => {
+    const { enabled = true, threshold = 100 } = options;
+    const { onLoadMore, hasNextPage = true, hasPreviousPage = true } = callbacks;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const isLoadingRef = useRef(false);
+    const executeLoad = useCallback(async (direction, forceLoad = false) => {
+        if ((!enabled && !forceLoad) || !onLoadMore || isLoadingRef.current)
+            return;
+        if (direction === 'forward' && !hasNextPage)
+            return;
+        if (direction === 'backward' && !hasPreviousPage)
+            return;
+        try {
+            isLoadingRef.current = true;
+            setIsLoading(true);
+            setError(null);
+            await onLoadMore(direction);
+        }
+        catch (error_) {
+            const errorObject = error_ instanceof Error ? error_ : new Error('Unknown error');
+            setError({ direction, error: errorObject });
+        }
+        finally {
+            isLoadingRef.current = false;
+            setIsLoading(false);
+        }
+    }, [enabled, onLoadMore, hasNextPage, hasPreviousPage]);
+    const handleScroll = useCallback((event) => {
+        if (!enabled || isLoadingRef.current)
+            return;
+        const target = event.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const nearTop = scrollTop <= threshold;
+        const nearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
+        if (nearBottom && hasNextPage) {
+            executeLoad('forward').catch(() => {
+                // Error handling is done within executeLoad
+            });
+        }
+        else if (nearTop && hasPreviousPage) {
+            executeLoad('backward').catch(() => {
+                // Error handling is done within executeLoad
+            });
+        }
+    }, [enabled, threshold, hasNextPage, hasPreviousPage, executeLoad]);
+    const retryLoad = useCallback(() => {
+        if (error) {
+            executeLoad(error.direction, true).catch(() => {
+                // Error handling is done within executeLoad
+            });
+        }
+    }, [error, executeLoad]);
+    const clearError = useCallback(() => {
+        setError(null);
+    }, []);
+    return {
+        isLoading,
+        error,
+        handleScroll,
+        retryLoad,
+        clearError,
+    };
+};

package/dist/src/TextBox/TextBox.js

@@ -43,9 +43,9 @@ export const TextBox = forwardRef(({ enableClearButton = false, onClear, invalid
     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) => {
+    _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' : textBoxSize === 'large' ? 'large' : '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] }) }));
+    _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' : textBoxSize === 'large' ? 'large' : '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/src/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The general-purpose ToggleSwitch component.
+ * This component provides a switch to toggle between ON and OFF states.
+ *
+ * This component extends the props of `<input type="checkbox">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ */
+export declare const ToggleSwitch: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { cx } from '../../styled-system/css';
+import { toggleSwitchSlotRecipe } from '../../styled-system/recipes';
+import { FocusIndicator } from '../FocusIndicator/FocusIndicator';
+/**
+ * The general-purpose ToggleSwitch component.
+ * This component provides a switch to toggle between ON and OFF states.
+ *
+ * This component extends the props of `<input type="checkbox">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ */
+export const ToggleSwitch = forwardRef(({ className, checked, defaultChecked, disabled, onChange, ...props }, ref) => {
+    const [localChecked, setLocalChecked] = useState(!!defaultChecked);
+    const isControlled = checked !== undefined;
+    const classes = toggleSwitchSlotRecipe();
+    const isChecked = isControlled ? checked : localChecked;
+    return (_jsx(FocusIndicator, { children: _jsxs("span", { className: cx(classes.root, 'mfui-ToggleSwitch__root', className), children: [_jsx("span", { className: cx(classes.handle, 'mfui-ToggleSwitch__handle'), "data-mfui-content": "toggle-handle" }), _jsx("input", { ref: ref, type: "checkbox", role: "switch", checked: isChecked, disabled: disabled, className: cx(classes.input, 'mfui-ToggleSwitch__input'), "data-mfui-content": "toggle-input", onChange: (event) => {
+                        onChange?.(event);
+                        // If the event is defaultPrevented in "onChange" prop via "e.preventDefault()", do not update local
+                        // states.
+                        if (event.defaultPrevented) {
+                            return;
+                        }
+                        if (!isControlled) {
+                            setLocalChecked(event.target.checked);
+                        }
+                    }, ...props })] }) }));
+});
+ToggleSwitch.displayName = 'ToggleSwitch';

package/dist/src/ToggleSwitch/ToggleSwitch.types.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * ToggleSwitch component props.
+ * Extends the standard HTML input checkbox element props.
+ */
+export type ToggleSwitchProps = ComponentPropsWithoutRef<'input'>;

package/dist/src/ToggleSwitch/ToggleSwitch.types.js

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

package/dist/src/ToggleSwitch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ToggleSwitch';
+export * from './ToggleSwitch.types';

package/dist/src/ToggleSwitch/index.js

@@ -0,0 +1,2 @@
+export * from './ToggleSwitch';
+export * from './ToggleSwitch.types';