@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,2 @@
+export { MultipleSelectBox } from './MultipleSelectBox';
+export type { MultipleSelectBoxProps, MultipleSelectBoxOption } from './MultipleSelectBox.types';

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

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

package/dist/esm/src/MultipleSelectBox/utils/flattenOptions.d.ts

@@ -0,0 +1,11 @@
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+/**
+ * Flattens options with only one level of nesting.
+ * only one level of nesting is allowed.
+ * Group labels are preserved, followed by their immediate children.
+ *
+ * @param options - The options array to flatten
+ *
+ * @returns Flat array of options, including group labels and their children in order
+ */
+export declare function flattenOptions<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>(options: MultipleSelectBoxOption<T, AdditionalProps>[]): MultipleSelectBoxOption<T, AdditionalProps>[];

package/dist/esm/src/MultipleSelectBox/utils/flattenOptions.js

@@ -0,0 +1,25 @@
+/**
+ * Flattens options with only one level of nesting.
+ * only one level of nesting is allowed.
+ * Group labels are preserved, followed by their immediate children.
+ *
+ * @param options - The options array to flatten
+ *
+ * @returns Flat array of options, including group labels and their children in order
+ */
+export function flattenOptions(options) {
+    const result = [];
+    for (const option of options) {
+        if ('options' in option && Array.isArray(option.options)) {
+            result.push({ ...option, options: option.options }, ...option.options);
+        }
+        else if ('value' in option) {
+            result.push(option);
+        }
+        else if ('label' in option && !('value' in option) && !('options' in option)) {
+            // Include label-only group labels
+            result.push(option);
+        }
+    }
+    return result;
+}

package/dist/esm/src/MultipleSelectBox/utils/insertOptionValueInSortedOrder.d.ts

@@ -0,0 +1,14 @@
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+/**
+ * Inserts a value into a sorted array based on the original options order.
+ * This function maintains the order of the options while inserting a new value at the appropriate position.
+ *
+ * @param sortedValues - Array of currently selected values that are already sorted
+ *
+ * @param newValue - New value to be inserted
+ *
+ * @param options - Array of all available options (used as reference for ordering)
+ *
+ * @returns A new sorted array with the inserted value
+ */
+export declare function insertOptionValueInSortedOrder<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>(sortedValues: MultipleSelectBoxOption<T, AdditionalProps>['value'][], newValue: MultipleSelectBoxOption<T, AdditionalProps>['value'], options: MultipleSelectBoxOption<T, AdditionalProps>[]): MultipleSelectBoxOption<T, AdditionalProps>['value'][];

package/dist/esm/src/MultipleSelectBox/utils/insertOptionValueInSortedOrder.js

@@ -0,0 +1,27 @@
+/**
+ * Inserts a value into a sorted array based on the original options order.
+ * This function maintains the order of the options while inserting a new value at the appropriate position.
+ *
+ * @param sortedValues - Array of currently selected values that are already sorted
+ *
+ * @param newValue - New value to be inserted
+ *
+ * @param options - Array of all available options (used as reference for ordering)
+ *
+ * @returns A new sorted array with the inserted value
+ */
+export function insertOptionValueInSortedOrder(sortedValues, newValue, options) {
+    const newValueIndex = options.findIndex((option) => option.value === newValue);
+    const insertIndex = sortedValues.findIndex((value) => {
+        const currentValueIndex = options.findIndex((option) => option.value === value);
+        return currentValueIndex > newValueIndex;
+    });
+    const result = [...sortedValues];
+    if (insertIndex === -1) {
+        result.push(newValue);
+    }
+    else {
+        result.splice(insertIndex, 0, newValue);
+    }
+    return result;
+}

package/dist/esm/src/MultipleSelectBox/utils/isSelectableOption.d.ts

@@ -0,0 +1,25 @@
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+/**
+ * Type guard to check if an option is a selectable option (has value and may have disabled)
+ *
+ * @param option - The option to check
+ *
+ * @returns True if the option has a value (is not a group label)
+ */
+export declare function isSelectableOption<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>(option: MultipleSelectBoxOption<T, AdditionalProps>): option is Extract<MultipleSelectBoxOption<T, AdditionalProps>, {
+    value?: unknown;
+}>;
+/**
+ * Returns true if the option is selectable and disabled.
+ *
+ * @param option - The option to check
+ */
+export declare function isOptionDisabled<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>(option: MultipleSelectBoxOption<T, AdditionalProps>): boolean;
+/**
+ * Returns true if the option is selectable, has a value, and is selected.
+ *
+ * @param option - The option to check
+ *
+ * @param selectedValues - The set of selected values
+ */
+export declare function isOptionSelected<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>(option: MultipleSelectBoxOption<T, AdditionalProps>, selectedValues: Set<unknown>): boolean;

package/dist/esm/src/MultipleSelectBox/utils/isSelectableOption.js

@@ -0,0 +1,28 @@
+/**
+ * Type guard to check if an option is a selectable option (has value and may have disabled)
+ *
+ * @param option - The option to check
+ *
+ * @returns True if the option has a value (is not a group label)
+ */
+export function isSelectableOption(option) {
+    return 'value' in option;
+}
+/**
+ * Returns true if the option is selectable and disabled.
+ *
+ * @param option - The option to check
+ */
+export function isOptionDisabled(option) {
+    return isSelectableOption(option) && !!option.disabled;
+}
+/**
+ * Returns true if the option is selectable, has a value, and is selected.
+ *
+ * @param option - The option to check
+ *
+ * @param selectedValues - The set of selected values
+ */
+export function isOptionSelected(option, selectedValues) {
+    return isSelectableOption(option) && option.value != null && selectedValues.has(option.value);
+}

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

@@ -0,0 +1,6 @@
+import { type PageHeaderProps } from './PageHeader.types';
+/**
+ * The page header component.
+ * The PageHeader component is for the main heading title and related actions and navigations of a page. It's always placed at the top of a page after the GlobalHeader and MainNavigation.
+ */
+export declare function PageHeader({ headingSlot, renderHeading, showBackButton, backButtonProps, actionSlot, className, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/PageHeader/PageHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PaneSwitchToLeft } from '@moneyforward/mfui-icons-react';
+import { IconButton } from '../IconButton';
+import { Heading } from '../Heading';
+import { pageHeaderSlotRecipe } from '../../styled-system/recipes';
+import { cx } from '../../styled-system/css';
+import { isResponsiveSlot } from '../utilities/responsive';
+/**
+ * The page header component.
+ * The PageHeader component is for the main heading title and related actions and navigations of a page. It's always placed at the top of a page after the GlobalHeader and MainNavigation.
+ */
+export function PageHeader({ headingSlot, renderHeading, showBackButton, backButtonProps, actionSlot, className, }) {
+    const responsiveSlot = isResponsiveSlot(actionSlot) ? actionSlot : { base: actionSlot };
+    const classes = pageHeaderSlotRecipe({
+        isResponsive: Boolean(responsiveSlot.narrowViewport),
+    });
+    const headingNode = (_jsx(Heading, { variant: "pageHeading1", tag: "h1", children: headingSlot }));
+    return (_jsxs("header", { className: cx(classes.root, 'mfui-PageHeader__root', className), children: [showBackButton ? (_jsx("div", { className: cx(classes.backButton, 'mfui-PageHeader__backButton'), children: _jsx(IconButton, { "aria-label": backButtonProps?.['aria-label'] ?? '戻る', ...backButtonProps, children: _jsx(PaneSwitchToLeft, {}) }) })) : null, _jsx("div", { className: cx(classes.leftPane, 'mfui-PageHeader__leftPane'), children: renderHeading ? renderHeading({ headingNode }) : headingNode }), responsiveSlot.base ? (_jsx("div", { className: cx(classes.rightPane, classes.rightPaneWide, 'mfui-PageHeader__rightPane'), children: responsiveSlot.base })) : null, responsiveSlot.narrowViewport ? (_jsx("div", { className: cx(classes.rightPane, classes.rightPaneNarrow, 'mfui-PageHeader__rightPane'), children: responsiveSlot.narrowViewport })) : null] }));
+}

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

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import { type IconButtonProps } from '../IconButton';
+import { type ResponsiveSlot } from '../types/responsive';
+export type PageHeaderRenderOptions = {
+    /**
+     * The original heading element wrapped in <h1> tag.
+     * This ensures proper semantic HTML structure and accessibility.
+     */
+    headingNode: ReactNode;
+};
+export type PageHeaderProps = {
+    /**
+     * It's for rendering the content of the heading.
+     * It should be just a string in most cases.
+     * Note that it can be any element, but it should be allowed in the <h1> element.
+     */
+    headingSlot?: ReactNode;
+    /**
+     * Custom render function for the heading area.
+     * Provides the original headingNode wrapped in <h1> tag for flexible layout composition.
+     * When provided, this takes precedence over the default headingSlot rendering.
+     *
+     * @param options - Contains the headingNode for layout composition
+     *
+     * @returns ReactNode - Custom layout containing the headingNode
+     *
+     * @example
+     * ```tsx
+     * <PageHeader
+     *   headingSlot="Dashboard"
+     *   renderHeading={({ headingNode }) => (
+     *     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+     *       {headingNode}
+     *       <Badge>Live</Badge>
+     *     </div>
+     *   )}
+     * />
+     * ```
+     */
+    renderHeading?: (options: PageHeaderRenderOptions) => ReactNode;
+    /**
+     * It's for rendering the back button on the left side of the component.
+     */
+    showBackButton?: boolean;
+    /**
+     * It's for controlling the back button.
+     */
+    backButtonProps?: Omit<IconButtonProps, 'outlined' | 'children'>;
+    /**
+     * It's for rendering any interactions on the right side of the component.
+     */
+    actionSlot?: ResponsiveSlot | ReactNode;
+    /**
+     * It's for overriding the root styles of the component.
+     */
+    className?: string;
+};

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

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

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

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

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

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

package/dist/esm/src/Pagination/ItemsCount/ItemsCount.d.ts

@@ -0,0 +1,5 @@
+import { type ItemsCountProps } from './ItemsCount.types';
+/**
+ * The ItemsCount for displaying the number of items.
+ */
+export declare function ItemsCount({ totalPages, currentPageNumber, totalItems, itemsPerPage, unitLabel }: ItemsCountProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/Pagination/ItemsCount/ItemsCount.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { itemsCountSlotRecipe } from '../../../styled-system/recipes';
+import { Typography } from '../../Typography';
+import { cx } from '../../../styled-system/css';
+/**
+ * The ItemsCount for displaying the number of items.
+ */
+export function ItemsCount({ totalPages, currentPageNumber, totalItems, itemsPerPage, unitLabel }) {
+    const startItem = (currentPageNumber - 1) * itemsPerPage + 1;
+    const endItem = Math.min(currentPageNumber * itemsPerPage, totalItems);
+    const classes = itemsCountSlotRecipe();
+    return (_jsx("div", { className: cx(classes.root, 'mfui-ItemsCount__root'), children: totalPages <= 1 ? (_jsxs(Typography, { className: cx(classes.itemsCount, 'mfui-ItemsCount__itemsCount'), children: [endItem, unitLabel] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, { className: cx(classes.itemsCount, 'mfui-ItemsCount__itemsCount'), children: [startItem, "\u301C", endItem, unitLabel] }), _jsx(Typography, { className: cx(classes.separator, 'mfui-ItemsCount__separator'), children: "/" }), _jsxs(Typography, { className: cx(classes.totalItems, 'mfui-ItemsCount__totalItems'), children: [totalItems, unitLabel] })] })) }));
+}

package/dist/esm/src/Pagination/ItemsCount/ItemsCount.types.d.ts

@@ -0,0 +1,22 @@
+export type ItemsCountProps = {
+    /**
+     * The number of the current page.
+     */
+    currentPageNumber: number;
+    /**
+     * The total number of items.
+     */
+    totalItems: number;
+    /**
+     * The number of items per page.
+     */
+    itemsPerPage: number;
+    /**
+     * The label of the unit.
+     */
+    unitLabel: string;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+};

package/dist/esm/src/Pagination/ItemsCount/ItemsCount.types.js

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

package/dist/esm/src/Pagination/ItemsCount/index.d.ts

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

package/dist/esm/src/Pagination/ItemsCount/index.js

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

package/dist/esm/src/Pagination/ItemsPerPage/ItemsPerPage.d.ts

@@ -0,0 +1,5 @@
+import { type ItemsPerPageProps } from './ItemsPerPage.types';
+/**
+ * The ItemsPerPage for displaying the number of items per page.
+ */
+export declare function ItemsPerPage({ itemsPerPage, itemsPerPageLabel, itemsPerPageOptions, itemsPerPageSelectBoxProps, onItemsPerPageChange, }: ItemsPerPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { itemsPerPageSlotRecipe } from '../../../styled-system/recipes';
+import { Typography } from '../../Typography';
+import { SelectBox } from '../../SelectBox';
+import { cx } from '../../../styled-system/css';
+/**
+ * The ItemsPerPage for displaying the number of items per page.
+ */
+export function ItemsPerPage({ itemsPerPage, itemsPerPageLabel, itemsPerPageOptions, itemsPerPageSelectBoxProps, onItemsPerPageChange, }) {
+    const classes = itemsPerPageSlotRecipe();
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-ItemsPerPage__root'), children: [_jsx(Typography, { children: itemsPerPageLabel }), _jsx("div", { className: cx(classes.root, 'mfui-ItemsPerPage__selectBoxWrapper'), children: _jsx(SelectBox, { size: "small", triggerProps: {
+                        'aria-label': itemsPerPageSelectBoxProps?.['aria-label'] ?? '1ページあたりの表示件数を選択する',
+                    }, value: itemsPerPage.toString(), options: itemsPerPageOptions.map((value) => ({
+                        value: value.toString(),
+                        label: value.toString(),
+                    })), popoverContentProps: { className: classes.optionPanel }, onChange: (value) => {
+                        onItemsPerPageChange?.(Number(value));
+                    } }) })] }));
+}

package/dist/esm/src/Pagination/ItemsPerPage/ItemsPerPage.types.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type ItemsPerPageProps = {
+    /**
+     * The number of items per page.
+     */
+    itemsPerPage: number;
+    /**
+     * This prop allows you to change the label for the "displayed number per page". If you don't provide this prop, the default label is "1ページの表示数".
+     */
+    itemsPerPageLabel: string;
+    /**
+     * Options for items per page. If undefined, the ItemsPerPage section is not displayed.
+     */
+    itemsPerPageOptions: number[];
+    /**
+     * The properties for the select box.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the select box. default is '1ページあたりの表示件数を選択する'.
+     */
+    itemsPerPageSelectBoxProps?: Pick<ComponentPropsWithoutRef<'select'>, 'aria-label'>;
+    /**
+     * Handler to execute when the items per page is changed. Accepts the new items per page number as an argument.
+     */
+    onItemsPerPageChange: ((itemsPerPage: number) => void) | undefined;
+};

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

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

package/dist/esm/src/Pagination/ItemsPerPage/index.d.ts

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

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

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

package/dist/esm/src/Pagination/PagePicker/PagePicker.d.ts

@@ -0,0 +1,5 @@
+import { type PagePickerProps } from './PagePicker.types';
+/**
+ * The PagePicker for displaying the current page number and the total number of pages.
+ */
+export declare function PagePicker({ currentPageNumber, totalPages, prevButtonProps, pageSelectBoxProps, pageSuffixLabel, nextButtonProps, onPageChange, }: PagePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PickerAfter, PickerBefore } from '@moneyforward/mfui-icons-react';
+import { pagePickerSlotRecipe } from '../../../styled-system/recipes';
+import { IconButton } from '../../IconButton';
+import { Typography } from '../../Typography';
+import { SelectBox } from '../../SelectBox';
+import { cx } from '../../../styled-system/css';
+/**
+ * The PagePicker for displaying the current page number and the total number of pages.
+ */
+export function PagePicker({ currentPageNumber, totalPages, prevButtonProps, pageSelectBoxProps, pageSuffixLabel, nextButtonProps, onPageChange, }) {
+    const classes = pagePickerSlotRecipe();
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-PagePicker__root'), children: [_jsx(IconButton, { className: cx(classes.prevButton, 'mfui-PagePicker__prevButton'), disabled: currentPageNumber === 1, "aria-label": prevButtonProps?.['aria-label'] ?? '前のページへ戻る', onClick: () => {
+                    onPageChange?.(currentPageNumber - 1);
+                }, children: _jsx(PickerBefore, {}) }), _jsx("div", { className: cx(classes.pageSelect, 'mfui-PagePicker__pageSelect'), children: _jsx(SelectBox, { size: "small", triggerProps: {
+                        'aria-label': pageSelectBoxProps?.['aria-label'] ?? 'ページを選択する',
+                    }, value: 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));
+                    } }) }), _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/esm/src/Pagination/PagePicker/PagePicker.types.d.ts

@@ -0,0 +1,47 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type ButtonProps } from '../../Button';
+export type Language = 'ja' | 'en';
+export type PagePickerProps = {
+    /**
+     * The number of the current page.
+     */
+    currentPageNumber: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * The properties for the previous button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the previous button. default is '前のページへ戻る'.
+     */
+    prevButtonProps?: Pick<ButtonProps, 'aria-label'>;
+    /**
+     * The properties for the page select box.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the select box. default is 'ページを選択する'.
+     */
+    pageSelectBoxProps?: Pick<ComponentPropsWithoutRef<'select'>, 'aria-label'>;
+    /**
+     * This prop allows you to change the label for the "page". If you don't provide this prop, the default label is "ページ".
+     */
+    pageSuffixLabel: string;
+    /**
+     * The properties for the next button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the next button. default is '次のページへ進む'.
+     */
+    nextButtonProps?: Pick<ButtonProps, 'aria-label'>;
+    /**
+     * Handler to execute when the page is changed. Accepts the new page number as an argument.
+     */
+    onPageChange?: ((pageNumber: number) => void) | undefined;
+    /**
+     * The property to specify the language.
+     * If this prop is not passed, the default value is 'ja'.
+     */
+    language?: Language;
+};

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

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

package/dist/esm/src/Pagination/PagePicker/index.d.ts

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

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

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

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

@@ -0,0 +1,6 @@
+import { type PaginationProps } from './Pagination.types';
+/**
+ * The general-purpose Pagination component.
+ * This component switches the looks depends on the props: showItemsCount, showPagePicker and showItemsPerPage.
+ */
+export declare function Pagination({ 'aria-label': ariaLabel, currentPageNumber, totalItems, itemsPerPage, unitLabel, prevButtonProps, pageSelectBoxProps, nextButtonProps, itemsPerPageProps, itemsPerPageSelectBoxProps, showItemsCount, showPagePicker, showItemsPerPage, alignment, pageSuffixLabel, onPageChange, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/Pagination/Pagination.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { paginationSlotRecipe } from '../../styled-system/recipes';
+import { ItemsPerPage } from './ItemsPerPage';
+import { ItemsCount } from './ItemsCount';
+import { PagePicker } from './PagePicker';
+import { cx } from '../../styled-system/css';
+/**
+ * The general-purpose Pagination component.
+ * This component switches the looks depends on the props: showItemsCount, showPagePicker and showItemsPerPage.
+ */
+export function Pagination({ 'aria-label': ariaLabel, currentPageNumber, totalItems, itemsPerPage, unitLabel = '件', prevButtonProps, pageSelectBoxProps, nextButtonProps, itemsPerPageProps = {}, itemsPerPageSelectBoxProps, showItemsCount = false, showPagePicker = false, showItemsPerPage = false, alignment = 'left', pageSuffixLabel = 'ページ', onPageChange, ...props }) {
+    const { label = '1ページの表示数', options, onChange } = itemsPerPageProps;
+    const totalPages = Math.ceil(totalItems / itemsPerPage);
+    const classes = paginationSlotRecipe({ alignment });
+    return (_jsxs("nav", { className: cx(classes.root, 'mfui-Pagination__root'), ...props, "aria-label": ariaLabel, children: [showItemsCount ? (_jsx(ItemsCount, { totalPages: totalPages, currentPageNumber: currentPageNumber, totalItems: totalItems, itemsPerPage: itemsPerPage, unitLabel: unitLabel })) : null, showPagePicker && totalPages > 1 ? (_jsx(PagePicker, { currentPageNumber: currentPageNumber, totalPages: totalPages, prevButtonProps: prevButtonProps, pageSelectBoxProps: pageSelectBoxProps, nextButtonProps: nextButtonProps, pageSuffixLabel: pageSuffixLabel, onPageChange: onPageChange })) : null, showItemsPerPage && options ? (_jsx(ItemsPerPage, { itemsPerPage: itemsPerPage, itemsPerPageLabel: label, itemsPerPageOptions: options, itemsPerPageSelectBoxProps: itemsPerPageSelectBoxProps, onItemsPerPageChange: onChange })) : null] }));
+}

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

@@ -0,0 +1,89 @@
+import { type ItemsPerPageProps } from './ItemsPerPage';
+import { type PagePickerProps } from './PagePicker';
+import { type PaginationSlotRecipeVariantProps } from '../../styled-system/recipes';
+export type PaginationItemsPerPageProps = {
+    /**
+     * This prop allows you to change the label for the "displayed number per page". If you don't provide this prop, the default label is "1ページの表示数".
+     */
+    label?: string;
+    /**
+     * Options for items per page. If undefined, the ItemsPerPage section is not displayed.
+     */
+    options?: number[];
+    /**
+     * Handler to execute when the items per page is changed. Accepts the new items per page number as an argument.
+     */
+    onChange?: (itemsPerPage: number) => void;
+};
+export type PaginationProps = {
+    /**
+     * The alternative text for the pagination root.
+     */
+    'aria-label'?: string;
+    /**
+     * The number of the current page.
+     */
+    currentPageNumber: number;
+    /**
+     * The total number of items.
+     */
+    totalItems: number;
+    /**
+     * The number of items per page.
+     */
+    itemsPerPage: number;
+    /**
+     * The label of the unit.
+     *
+     * @default '件'
+     */
+    unitLabel?: string;
+    /**
+     * Whether to show items count.
+     *
+     * @default false
+     */
+    showItemsCount?: boolean;
+    /**
+     * Whether to show page picker.
+     *
+     * @default false
+     */
+    showPagePicker?: boolean;
+    /**
+     * The alignment of the pagination component.
+     *
+     * @default 'left'
+     */
+    alignment?: PaginationSlotRecipeVariantProps['alignment'];
+    /**
+     * Handler to execute when the page is changed. Accepts the new page number as an argument.
+     */
+    onPageChange?: (pageNumber: number) => void;
+    /**
+     * This prop allows you to change the label for the "page". If you don't provide this prop, the default label is "ページ".
+     */
+    pageSuffixLabel?: string;
+} & ({
+    /**
+     * Whether to show items per page.
+     *
+     * @default false
+     */
+    showItemsPerPage: true;
+    /**
+     * Props for the ItemsPerPage component.
+     */
+    itemsPerPageProps: PaginationItemsPerPageProps;
+} | {
+    /**
+     * Whether to show items per page.
+     *
+     * @default false
+     */
+    showItemsPerPage: false;
+    /**
+     * Props for the ItemsPerPage component.
+     */
+    itemsPerPageProps?: PaginationItemsPerPageProps;
+}) & Pick<ItemsPerPageProps, 'itemsPerPageSelectBoxProps'> & Pick<PagePickerProps, 'prevButtonProps' | 'pageSelectBoxProps' | 'nextButtonProps'>;

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

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

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

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

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

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

package/dist/esm/src/Pagination/shared/commonStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const SELECT_BOX_ROW_HEIGHT = 32;
+export declare const SELECT_BOX_PADDING_X = 24;
+export declare const SELECT_BOX_MAX_HEIGHT: number;

package/dist/esm/src/Pagination/shared/commonStyles.js

@@ -0,0 +1,3 @@
+export const SELECT_BOX_ROW_HEIGHT = 32;
+export const SELECT_BOX_PADDING_X = 24;
+export const SELECT_BOX_MAX_HEIGHT = SELECT_BOX_ROW_HEIGHT * 5 + SELECT_BOX_PADDING_X;

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

@@ -0,0 +1,10 @@
+/**
+ * The Panel component.
+ * This component is used for grouping content with a border.
+ * Also extends the props of `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export declare const Panel: import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/src/Panel/Panel.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../styled-system/css';
+import { panelSlotRecipe } from '../../styled-system/recipes';
+/**
+ * The Panel component.
+ * This component is used for grouping content with a border.
+ * Also extends the props of `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export const Panel = forwardRef(({ className, children, ...props }, ref) => {
+    const classes = panelSlotRecipe();
+    return (_jsx("div", { ref: ref, className: cx(classes.root, 'mfui-Panel__root', className), ...props, children: children }));
+});

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

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+/**
+ * Props for the Panel component
+ */
+export type PanelProps = {
+    /**
+     * The content to display inside the panel
+     */
+    children: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;