@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/Button/Button.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const css_1 = require("../../styled-system/css");
+const Typography_1 = require("../Typography");
+const FocusIndicator_1 = require("../FocusIndicator");
+const recipes_1 = require("../../styled-system/recipes");
+const ProgressIndicator_1 = require("../ProgressIndicator");
+/**
+ * The general-purpose Button component.
+ * This component switches the variants of looks depends on the props: size, priority, destructive, disabled, leftIcon, isDropdownTrigger.
+ *
+ * Also extends the props of `<button>` element or `<a>` element depending on whether the href prop is provided.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
+ */
+exports.Button = (0, react_1.forwardRef)(({ children, className, size = 'medium', priority = 'secondary', destructive = false, leftIcon, rightIcon, isDropdownTrigger = false, loading = false, disabled = false, 
+// The default type for button element is "submit", but we override it to "button".
+type = 'button', href, customLinkComponent, ...props }, ref) => {
+    const classes = (0, recipes_1.buttonSlotRecipe)({ size, priority, destructive });
+    const typographyVariant = (0, react_1.useMemo)(() => (size === 'large' ? 'impactControlLabel' : 'controlLabel'), [size]);
+    // For disabling also when loading
+    const isDisabled = disabled || loading;
+    const isButton = disabled || href === undefined;
+    const Tag = (0, react_1.useMemo)(() => {
+        // If disabled, always render as a button since the link component doesn't support disabled prop
+        if (isButton) {
+            return 'button';
+        }
+        return customLinkComponent ?? 'a';
+    }, [isButton, customLinkComponent]);
+    const tagProps = (0, react_1.useMemo)(() => {
+        if (isButton) {
+            // props for button component
+            return {
+                ref,
+                className: (0, css_1.cx)(classes.root, 'mfui-Button__root', className),
+                disabled: isDisabled,
+                type,
+                ...props,
+            };
+        }
+        // props for link component
+        return {
+            ref,
+            className: (0, css_1.cx)(classes.root, 'mfui-Button__root', className),
+            href,
+            ...props,
+        };
+    }, [isButton, classes.root, className, href, isDisabled, type, props, ref]);
+    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsxs)(Tag, { ...tagProps, children: [leftIcon ? (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.leftIcon, 'mfui-Button__leftIcon'), children: leftIcon }) : null, loading ? ((0, jsx_runtime_1.jsx)(ProgressIndicator_1.ProgressIndicator, { className: (0, css_1.cx)(classes.loadingIndicator, 'mfui-Button__loadingIndicator') })) : null, typeof children === 'string' ? (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: typographyVariant, children: children }) : children, rightIcon ? (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.rightIcon, 'mfui-Button__rightIcon'), children: rightIcon }) : null, isDropdownTrigger ? (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Dropdown, { className: (0, css_1.cx)(classes.dropdownIcon, 'mfui-Button__dropdownIcon') }) : null] }) }));
+});

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

@@ -0,0 +1,78 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { type ButtonSlotRecipeVariant } from '../../styled-system/recipes';
+export type ButtonProps = {
+    /**
+     * The content of the button.
+     * Can be any renderable React node. If a string is provided,
+     * it will be wrapped with the Typography component internally.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the button is disabled.
+     * If it's provided, the component will be rendered as a button element even if the href prop is provided.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The size of the button.
+     *
+     * @default 'medium'
+     */
+    size?: ButtonSlotRecipeVariant['size'];
+    /**
+     * The priority of the button.
+     * The style of the button will be changed to indicate the priority.
+     *
+     * @default 'secondary'
+     */
+    priority?: ButtonSlotRecipeVariant['priority'];
+    /**
+     * Whether the button is destructive.
+     * The style of the button will be changed to indicate that the action is destructive.
+     *
+     * @default false
+     */
+    destructive?: ButtonSlotRecipeVariant['destructive'];
+    /**
+     * Icon element to be rendered on the left side within the button
+     * Only one element is allowed
+     *
+     * @default undefined
+     */
+    leftIcon?: React.ReactElement;
+    /**
+     * Whether the button is a dropdown trigger.
+     * A dropdown icon will be rendered on the right side of the button
+     *
+     * @default false
+     */
+    isDropdownTrigger?: boolean;
+    /**
+     * Whether the button shows a loading indicator.
+     * The button will be disabled and a loading indicator will be shown depending on the size prop.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon element to be rendered on the right side and before dropdown trigger within the button
+     * Only one element is allowed
+     *
+     * @default undefined
+     */
+    rightIcon?: React.ReactElement;
+    /**
+     * The path or URL to the linked page.
+     * If it's provided, the component will be rendered as an anchor element.
+     */
+    href?: string;
+    /**
+     * The component to use as the navigation link instead of the general anchor element `<a>`.
+     * The custom component must extend the HTMLAnchorElement interface.
+     *
+     * Use this property if you want to use a custom component as the link tag.
+     * e.g. next/link
+     */
+    customLinkComponent?: ElementType;
+} & ComponentPropsWithoutRef<'button'> & Pick<ComponentPropsWithoutRef<'a'>, 'download' | 'hrefLang' | 'ping' | 'rel' | 'target' | 'type' | 'referrerPolicy'>;

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

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

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

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

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

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

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

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

package/dist/cjs/src/Checkbox/Checkbox.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const css_1 = require("../../styled-system/css");
+const FocusIndicator_1 = require("../FocusIndicator");
+const recipes_1 = require("../../styled-system/recipes");
+const Typography_1 = require("../Typography");
+const mergeRefs_1 = require("../utilities/dom/mergeRefs");
+const CheckboxGroupContext_1 = require("../CheckboxGroup/CheckboxGroupContext");
+/**
+ * The general-purpose Checkbox component.
+ * This component turns on/off the label depends on the prop: label.
+ *
+ * Also extends the props of `<input type="checkbox">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ */
+exports.Checkbox = (0, react_1.forwardRef)(({ className, label, indeterminate = false, name, checked, defaultChecked, disabled, onChange, ...props }, ref) => {
+    const checkboxInputRef = (0, react_1.useRef)(null);
+    const checkboxGroupContext = (0, react_1.useContext)(CheckboxGroupContext_1.CheckboxGroupContext);
+    const [localChecked, setLocalChecked] = (0, react_1.useState)(!!defaultChecked);
+    const [localIndeterminate, setLocalIndeterminate] = (0, react_1.useState)(indeterminate);
+    const classes = (0, recipes_1.checkboxSlotRecipe)();
+    const WrapperTag = label ? 'label' : 'span';
+    const wrapperProps = {
+        className: (0, css_1.cx)(classes.root, 'mfui-Checkbox__root', className),
+        htmlFor: label ? props.id : undefined,
+    };
+    const isChecked = checkboxGroupContext.values !== undefined
+        ? checkboxGroupContext.values.includes(props.value)
+        : (checked ?? localChecked);
+    const isIndeterminate = checkboxGroupContext.values === undefined && localIndeterminate;
+    (0, react_1.useEffect)(() => {
+        if (checkboxInputRef.current) {
+            checkboxInputRef.current.indeterminate = checkboxGroupContext.values === undefined ? localIndeterminate : false;
+        }
+    }, [checkboxInputRef, localIndeterminate, checkboxGroupContext.values]);
+    (0, react_1.useEffect)(() => {
+        setLocalIndeterminate(indeterminate);
+    }, [indeterminate]);
+    const icon = (() => {
+        if (isIndeterminate) {
+            return (0, jsx_runtime_1.jsx)(mfui_icons_react_1.CheckboxIndeterminate, {});
+        }
+        if (isChecked) {
+            return (0, jsx_runtime_1.jsx)(mfui_icons_react_1.CheckboxChecked, {});
+        }
+        return (0, jsx_runtime_1.jsx)(mfui_icons_react_1.CheckboxUnchecked, {});
+    })();
+    return ((0, jsx_runtime_1.jsxs)(WrapperTag, { ...wrapperProps, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.icon, 'mfui-Checkbox__icon'), "aria-hidden": "true", "data-mfui-content": "checkbox-icon", children: icon }), (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { hideWhiteBorder: true, children: (0, jsx_runtime_1.jsx)("input", { ref: (0, mergeRefs_1.mergeRefs)(ref, checkboxInputRef), type: "checkbox", checked: isChecked, disabled: checkboxGroupContext.disabled ?? disabled, name: checkboxGroupContext.name ?? name, className: (0, css_1.cx)(classes.input, 'mfui-Checkbox__input'), "data-mfui-indeterminate": isIndeterminate, "data-mfui-content": "checkbox-input", onChange: (event) => {
+                        if (typeof checkboxGroupContext.onChange === 'function') {
+                            checkboxGroupContext.onChange(event);
+                            return;
+                        }
+                        onChange?.(event);
+                        // If the event is defaultPrevented in "onChange" prop via "e.preventDefault()", do not update local
+                        // states.
+                        if (event.defaultPrevented) {
+                            return;
+                        }
+                        setLocalChecked(event.target.checked);
+                        setLocalIndeterminate(false);
+                    }, ...props }) }), label ? ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", className: (0, css_1.cx)(classes.label, 'mfui-Checkbox__label'), "data-mfui-content": "checkbox-label", children: label })) : null] }));
+});

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

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type CheckboxProps = {
+    /**
+     * The content of the checkbox label.
+     * It should be only a string value.
+     *
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * Show indeterminate state of checkbox or not.
+     * It should be only a boolean value.
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+} & ComponentPropsWithoutRef<'input'>;

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { type CheckboxCardResponsiveSlot } from './CheckboxCard.types';
+/**
+ * A component that transforms checkboxes 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="checkbox">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ */
+export declare const CheckboxCard: import("react").ForwardRefExoticComponent<{
+    layout?: import("../../styled-system/recipes").CheckboxCardSlotRecipeVariant["layout"];
+    label: string;
+    renderDetailsSlot?: CheckboxCardResponsiveSlot | import("./CheckboxCard.types").CheckboxCardRenderDetailsSlot;
+    disableResponsive?: import("../../styled-system/recipes").CheckboxCardSlotRecipeVariant["disableResponsive"];
+} & Omit<import("../Checkbox").CheckboxProps, "label"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/src/CheckboxCard/CheckboxCard.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../styled-system/css");
+const FocusIndicator_1 = require("../FocusIndicator");
+const recipes_1 = require("../../styled-system/recipes");
+const Checkbox_1 = require("../Checkbox");
+const Typography_1 = require("../Typography");
+const responsive_1 = require("../utilities/responsive");
+/**
+ * A component that transforms checkboxes 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="checkbox">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ */
+exports.CheckboxCard = (0, react_1.forwardRef)(({ label, layout = 'vertical', renderDetailsSlot, disableResponsive = false, className, ...props }, ref) => {
+    const checkboxState = (0, react_1.useMemo)(() => ({
+        checked: props.checked,
+        disabled: props.disabled,
+        indeterminate: props.indeterminate,
+    }), [props.checked, props.disabled, props.indeterminate]);
+    // Convert renderDetailsSlot to ResponsiveSlot format for consistent handling
+    const responsiveSlot = (0, responsive_1.isResponsiveSlot)(renderDetailsSlot)
+        ? renderDetailsSlot
+        : { base: renderDetailsSlot, narrowViewport: undefined };
+    const classes = (0, recipes_1.checkboxCardSlotRecipe)({
+        layout: !renderDetailsSlot ? 'vertical' : layout,
+        disableResponsive,
+        isResponsive: Boolean(responsiveSlot.narrowViewport),
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.root, 'mfui-CheckboxCard__root', className), children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { disableNestedFocus: true, children: (0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "label", className: (0, css_1.cx)(classes.inputWrapper, 'mfui-CheckboxCard__inputWrapper'), as: "label", htmlFor: props.id, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { ref: ref, ...props, className: (0, css_1.cx)(classes.input, 'mfui-CheckboxCard__input') }), (0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.label, 'mfui-CheckboxCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (
+            /* When responsive is disabled, render single element but with both contents using CSS for switching */
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), (0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.narrowViewport ? (
+            /* When responsive is enabled, render separate wide/narrow elements */
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), (0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.base ? (
+            /* For function-based renderDetailsSlot or ResponsiveSlot with only base, use single details element */
+            (0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) })) : null] }));
+});

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

@@ -0,0 +1,61 @@
+import { type ReactNode } from 'react';
+import { type CheckboxProps } from '../Checkbox';
+import { type CheckboxCardSlotRecipeVariant } from '../../styled-system/recipes';
+import { type ResponsiveSlot } from '../types/responsive';
+export type CheckboxState = Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate'>;
+/**
+ * Function type for rendering CheckboxCard details content.
+ * Receives the current checkbox state as a parameter.
+ */
+export type CheckboxCardRenderDetailsSlot = (checkboxState: CheckboxState) => ReactNode;
+/**
+ * ResponsiveSlot type specifically for CheckboxCard details content.
+ * Supports different content for desktop and mobile viewports, with functions that receive CheckboxState.
+ */
+export type CheckboxCardResponsiveSlot = ResponsiveSlot<CheckboxCardRenderDetailsSlot>;
+export type CheckboxCardProps = {
+    /**
+     * The layout of the checkbox card.
+     * Currently, the layout can be `horizontal` or `vertical`.
+     *
+     * @default `vertical`
+     */
+    layout?: CheckboxCardSlotRecipeVariant['layout'];
+    /**
+     * Label text for explaining checkbox value.
+     */
+    label: string;
+    /**
+     * Content or function to render the details slot.
+     *
+     * @example
+     * ```tsx
+     * // Function-based (current usage - maintains backward compatibility)
+     * renderDetailsSlot={(checkboxState) => (
+     *   <div>Status: {checkboxState.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: (checkboxState) => <div>Desktop: {checkboxState.checked ? 'Yes' : 'No'}</div>,
+     *   narrowViewport: (checkboxState) => <div>Mobile: {checkboxState.checked ? '✓' : '✗'}</div>
+     * }}
+     * ```
+     */
+    renderDetailsSlot?: CheckboxCardResponsiveSlot | CheckboxCardRenderDetailsSlot;
+    /**
+     * 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?: CheckboxCardSlotRecipeVariant['disableResponsive'];
+} & Omit<CheckboxProps, 'label'>;

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * The general-purpose CheckboxGroup component.
+ *
+ * The CheckboxGroup component is designed to ensure that only one checkbox can be selected at a time within the
+ * group, simplifying the state management and data handling for forms.
+ *
+ * This component will wrap all checkbox 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 CheckboxGroup: import("react").ForwardRefExoticComponent<{
+    defaultValues?: (string | number | readonly string[] | undefined)[];
+    values?: (string | number | readonly string[] | undefined)[];
+    onChange?: (selectedValue: (string | number | readonly string[] | undefined)[]) => void;
+} & Pick<import("..").CheckboxProps, "disabled" | "name"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/src/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,48 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CheckboxGroupContext_1 = require("./CheckboxGroupContext");
+const css_1 = require("../../styled-system/css");
+const recipes_1 = require("../../styled-system/recipes");
+/**
+ * The general-purpose CheckboxGroup component.
+ *
+ * The CheckboxGroup component is designed to ensure that only one checkbox can be selected at a time within the
+ * group, simplifying the state management and data handling for forms.
+ *
+ * This component will wrap all checkbox 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
+ */
+exports.CheckboxGroup = (0, react_1.forwardRef)(({ className, defaultValues, values, disabled, name, onChange, children, ...props }, ref) => {
+    const classes = (0, recipes_1.checkboxGroupSlotRecipe)();
+    const [localValues, setLocalValues] = (0, react_1.useState)(defaultValues ?? []);
+    const handleOnChange = (0, react_1.useCallback)((event) => {
+        const oldValues = values ?? localValues;
+        let newValues = [...oldValues];
+        if (event.target.checked) {
+            newValues.push(event.target.value);
+        }
+        else {
+            newValues = newValues.filter((value) => value !== event.target.value);
+        }
+        if (values === undefined) {
+            setLocalValues(newValues);
+        }
+        if (onChange) {
+            onChange(newValues);
+        }
+    }, [localValues, onChange, values]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        disabled,
+        name,
+        values: values ?? localValues,
+        onChange: handleOnChange,
+    }), [disabled, handleOnChange, localValues, name, values]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, ...props, className: (0, css_1.cx)(classes.root, 'mfui-CheckboxGroup__root', className), children: (0, jsx_runtime_1.jsx)(CheckboxGroupContext_1.CheckboxGroupContext.Provider, { value: contextValue, children: children }) }));
+});

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

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type CheckboxProps } from '../Checkbox';
+type CheckboxGroupValues = CheckboxProps['value'][];
+export type CheckboxGroupProps = {
+    defaultValues?: CheckboxGroupValues;
+    values?: CheckboxGroupValues;
+    onChange?: (selectedValue: CheckboxGroupValues) => void;
+} & Pick<CheckboxProps, 'disabled' | 'name'> & Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
+export {};

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

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

package/dist/cjs/src/CheckboxGroup/CheckboxGroupContext.d.ts

@@ -0,0 +1,4 @@
+import { type CheckboxGroupProps } from './CheckboxGroup.types';
+import { type CheckboxProps } from '../Checkbox';
+export type CheckboxGroupContextType = Pick<CheckboxGroupProps, 'values' | 'disabled' | 'name'> & Pick<CheckboxProps, 'onChange'>;
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextType>;

package/dist/cjs/src/CheckboxGroup/CheckboxGroupContext.js

@@ -0,0 +1,6 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroupContext = void 0;
+const react_1 = require("react");
+exports.CheckboxGroupContext = (0, react_1.createContext)({});

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

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

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

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