@mezzanine-ui/react 1.0.0-canary.2 → 1.0.0-canary.4

package/Checkbox/Checkbox.d.ts

@@ -1,41 +1,119 @@
-import { ChangeEventHandler } from 'react';
-import { CheckboxSize } from '@mezzanine-ui/core/checkbox';
-import { InputCheckProps } from '../_internal/InputCheck';
+import { ChangeEventHandler, Ref } from 'react';
+import { BaseInputProps } from '../Input';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface CheckboxProps extends Omit<InputCheckProps, 'control' | 'htmlFor'> {
+import { CheckboxPropsBase } from './typings';
+type CheckboxInputElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`> & {
     /**
-     * Whether the checkbox is checked.
+     * The id attribute can be provided via inputProps, but it's recommended to use the `id` prop directly.
+     * If both are provided, the `id` prop takes precedence.
      */
-    checked?: boolean;
+    id?: string;
     /**
-     * Whether the checkbox is checked by default.
-     * @default false
+     * The name attribute can be provided via inputProps, but it's recommended to use the `name` prop directly.
+     * If both are provided, the `name` prop takes precedence.
      */
-    defaultChecked?: boolean;
+    name?: string;
+};
+export interface CheckboxProps extends Omit<NativeElementPropsWithoutKeyAndRef<'label'>, 'onChange'>, CheckboxPropsBase {
     /**
-     * If true, it means its children checkboxes have at least one unchecked.
-     * @default false
+     * Whether to show an editable input when checkbox is checked.
+     * When `true`, an Input component will be displayed after the checkbox when checked.
+     * If `editableInput` is not provided, default values will be used (name, id, placeholder).
+     *
+     * @example Simple usage
+     * ```tsx
+     * <Checkbox
+     *   label="其他"
+     *   withEditInput
+     *   value={otherValue}
+     *   onChange={(e) => setOtherValue(e.target.value)}
+     * />
+     * ```
+     *
+     * @example With custom editableInput
+     * ```tsx
+     * <Checkbox
+     *   label="其他"
+     *   withEditInput
+     *   editableInput={{
+     *     placeholder: "請輸入其他選項",
+     *     name: "otherOption",
+     *     value: otherValue,
+     *     onChange: (e) => setOtherValue(e.target.value),
+     *   }}
+     * />
+     * ```
+     *
+     * @example With react-hook-form
+     * ```tsx
+     * const { register, watch } = useForm();
+     * const isOtherChecked = watch('options.other');
+     *
+     * <Checkbox
+     *   label="其他"
+     *   {...register('options.other')}
+     *   withEditInput
+     *   editableInput={{
+     *     ...register('otherOption', { required: isOtherChecked }),
+     *     placeholder: "請輸入其他選項",
+     *   }}
+     * />
+     * ```
+     */
+    withEditInput?: boolean;
+    /**
+     * Configuration for editable input that appears when checkbox is checked.
+     * When `withEditInput` is `true` and this prop is not provided, default values will be used.
+     *
+     * Default values when not provided:
+     * - `name`: `{checkboxName}_input` or `{checkboxId}_input`
+     * - `id`: `{checkboxId}_input`
+     * - `placeholder`: "Please enter..."
+     */
+    editableInput?: Omit<BaseInputProps, 'variant'>;
+    /**
+     * The id of input element.
      */
-    indeterminate?: boolean;
+    id?: string;
     /**
      * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
-     *  If you need direct control to the input element, use this prop to provide to it.
+     * If you need direct control to the input element, use this prop to provide to it.
+     */
+    inputProps?: CheckboxInputElementProps;
+    /**
+     * The react ref passed to input element.
      *
-     * Noticed that if you pass in an id within this prop,
-     *  the rendered label element will have `htmlFor` sync with passed in id.
+     * @important When using with react-hook-form's `register`, pass the ref through this prop:
+     * ```tsx
+     * const { register } = useForm();
+     * <Checkbox inputRef={register('fieldName').ref} name="fieldName" />
+     * ```
+     *
+     * For CheckboxGroup, use `Controller` instead of `register` for better array value handling.
      */
-    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`>;
+    inputRef?: Ref<HTMLInputElement>;
     /**
-     * The change event handler of input in checkbox.
+     * The name attribute of the input element.
+     *
+     * @important When using with react-hook-form or inside a CheckboxGroup, this prop is recommended.
+     * For CheckboxGroup, all checkboxes should share the same `name` attribute.
+     *
+     * When using with react-hook-form's `register`, ensure this matches the field name:
+     * ```tsx
+     * const { register } = useForm();
+     * <Checkbox {...register('fieldName')} inputRef={register('fieldName').ref} />
+     * ```
      */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
+    name?: string;
     /**
-     * The size of checkbox.
-     * @default 'medium'
+     * Invoked by input change event.
      */
-    size?: CheckboxSize;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
     /**
-     * The value of input in checkbox.
+     * The value of checkbox. Used when checkbox is inside a CheckboxGroup.
+     *
+     * @important This prop is required when checkbox is inside a CheckboxGroup.
+     * It is also recommended when integrating with react-hook-form.
      */
     value?: string;
 }

package/Checkbox/Checkbox.js

@@ -1,36 +1,92 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useId, useEffect, useMemo, useRef } from 'react';
 import { checkboxClasses } from '@mezzanine-ui/core/checkbox';
+import { CheckedIcon } from '@mezzanine-ui/icons';
 import { useCheckboxControlValue } from '../Form/useCheckboxControlValue.js';
+import Typography from '../Typography/Typography.js';
+import { composeRefs } from '../utils/composeRefs.js';
 import { CheckboxGroupContext } from './CheckboxGroupContext.js';
-import { MezzanineConfig } from '../Provider/context.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
-import InputCheck from '../_internal/InputCheck/InputCheck.js';
+import Icon from '../Icon/Icon.js';
+import Input from '../Input/Input.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` checkbox.
  */
 const Checkbox = forwardRef(function Checkbox(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    const { disabled: disabledFromFormControl, severity } = useContext(FormControlContext) || {};
     const checkboxGroup = useContext(CheckboxGroupContext);
-    const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, } = checkboxGroup || {};
-    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, indeterminate: indeterminateProp = false, onChange: onChangeProp, size = sizeFromGroup || globalSize, value, inputProps, ...rest } = props;
-    const { id: inputId, name = nameFromGroup, ...restInputProps } = inputProps || {};
+    const { disabled: disabledFromGroup, name: nameFromGroup, } = checkboxGroup || {};
+    const { checked: checkedProp, className, defaultChecked, description, disabled = disabledFromGroup, editableInput, id, indeterminate = false, inputProps, inputRef: inputRefProp, label, mode = 'main', name = nameFromGroup, onChange: onChangeProp, value, withEditInput = false, ...rest } = props;
+    const { name: nameFromInputProps, ...restInputProps } = inputProps || {};
+    // Generate unique id if not provided
+    const generatedId = useId();
+    const finalInputId = id !== null && id !== void 0 ? id : generatedId;
+    if (checkboxGroup && value == null) {
+        throw new Error('Checkbox: `value` is required when the checkbox is used inside a CheckboxGroup.');
+    }
     const [checked, onChange] = useCheckboxControlValue({
-        checkboxGroup,
         checked: checkedProp,
         defaultChecked,
         onChange: onChangeProp,
+        checkboxGroup,
         value,
     });
-    const indeterminate = !checked && indeterminateProp;
-    return (jsx(InputCheck, { ...rest, ref: ref, control: jsx("span", { className: cx(checkboxClasses.host, {
-                [checkboxClasses.checked]: checked,
-                [checkboxClasses.indeterminate]: indeterminate,
-            }), children: jsx("input", { ...restInputProps, "aria-checked": indeterminate ? 'mixed' : checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "checkbox", value: value }) }), disabled: disabled, error: error, htmlFor: inputId, size: size, children: children }));
+    // Warn when checkbox is standalone and missing a name (helpful for form libs)
+    useEffect(() => {
+        if (!checkboxGroup && !name && !nameFromInputProps && label) {
+            console.warn('Checkbox: The `name` prop is recommended when integrating with react-hook-form. ' +
+                `Checkbox with label "${label}" is missing the \`name\` prop.`);
+        }
+    }, [checkboxGroup, name, nameFromInputProps, label]);
+    const isChecked = checked && !indeterminate;
+    const isIndeterminate = indeterminate;
+    const resolvedName = useMemo(() => {
+        if (name)
+            return name;
+        if (nameFromInputProps)
+            return nameFromInputProps;
+        return finalInputId;
+    }, [finalInputId, name, nameFromInputProps]);
+    const labelColor = useMemo(() => {
+        if (mode === 'chip' && disabled) {
+            return 'text-neutral-light';
+        }
+        return 'text-neutral-solid';
+    }, [mode, disabled]);
+    const inputElementRef = useRef(null);
+    const composedInputRef = useMemo(() => composeRefs([inputRefProp, inputElementRef]), [inputRefProp]);
+    useEffect(() => {
+        if (inputElementRef.current) {
+            inputElementRef.current.indeterminate = isIndeterminate;
+        }
+    }, [isIndeterminate]);
+    const editableInputRef = useRef(null);
+    // Generate default editable input config when withEditInput is true but editableInput is not provided
+    const defaultEditableInput = useMemo(() => {
+        if (!withEditInput)
+            return undefined;
+        if (editableInput) {
+            return editableInput;
+        }
+        // Default values when editableInput is not provided
+        const defaultName = resolvedName ? `${resolvedName}_input` : `${finalInputId}_input`;
+        const defaultId = `${finalInputId}_input`;
+        return {
+            id: defaultId,
+            name: defaultName,
+            placeholder: 'Please enter...',
+        };
+    }, [withEditInput, editableInput, resolvedName, finalInputId]);
+    const shouldShowEditableInput = withEditInput && defaultEditableInput;
+    return (jsxs("div", { className: cx(checkboxClasses.host, className, {
+            [checkboxClasses.checked]: isChecked,
+            [checkboxClasses.indeterminate]: isIndeterminate,
+            [checkboxClasses.disabled]: disabled,
+        }, checkboxClasses.mode(mode)), children: [jsxs("label", { ref: ref, ...rest, className: checkboxClasses.labelContainer, children: [jsx("div", { className: checkboxClasses.inputContainer, children: jsxs("div", { className: checkboxClasses.inputContent, children: [jsx("input", { ...restInputProps, "aria-checked": isIndeterminate ? 'mixed' : checked, "aria-disabled": disabled, checked: isChecked, className: checkboxClasses.input, disabled: disabled, id: finalInputId, name: resolvedName, onChange: onChange, ref: composedInputRef, type: "checkbox", value: value }), mode === 'chip' && isChecked && (jsx(Icon, { "aria-hidden": "true", className: checkboxClasses.icon, color: "brand", icon: CheckedIcon, size: 16 })), mode !== 'chip' && isChecked && (jsx(Icon, { "aria-hidden": "true", className: checkboxClasses.icon, color: "fixed-light", icon: CheckedIcon, size: 7 })), mode !== 'chip' && isIndeterminate && (jsx("span", { "aria-hidden": "true", className: checkboxClasses.indeterminateLine }))] }) }), (label || description) && (jsxs("span", { className: checkboxClasses.textContainer, children: [label && (jsx(Typography, { className: checkboxClasses.label, color: labelColor, variant: "label-primary", children: label })), description && mode !== 'chip' && !shouldShowEditableInput && (jsx(Typography, { className: checkboxClasses.description, color: "text-neutral", variant: "caption", children: description }))] }))] }), shouldShowEditableInput && defaultEditableInput && mode !== 'chip' && !indeterminate && (jsx("div", { className: checkboxClasses.editableInputContainer, children: jsx(Input, { ...defaultEditableInput, ...((!isChecked || disabled) && defaultEditableInput.disabled !== true ? { disabled: true } : {}), inputRef: composeRefs([
+                        defaultEditableInput.inputRef,
+                        editableInputRef,
+                    ]), variant: "base" }) }))] }));
 });
 
 export { Checkbox as default };

package/Checkbox/CheckboxGroup.d.ts

@@ -1,11 +1,56 @@
-import { CheckboxGroupOption, CheckboxSize } from '@mezzanine-ui/core/checkbox';
-import { ChangeEvent, ReactNode } from 'react';
-import { InputCheckGroupProps } from '../_internal/InputCheck';
-export interface CheckboxGroupProps extends Omit<InputCheckGroupProps, 'defaultValue' | 'onChange'> {
+import { CheckboxGroupLayout, CheckboxGroupOption, CheckboxMode } from '@mezzanine-ui/core/checkbox';
+import { ChangeEvent, ChangeEventHandler, ComponentProps, ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import Checkbox from './Checkbox';
+export interface CheckboxGroupChangeEventTarget extends HTMLInputElement {
+    values: string[];
+}
+export type CheckboxGroupChangeEvent = ChangeEvent<HTMLInputElement> & {
+    target: CheckboxGroupChangeEventTarget;
+};
+export declare function assignCheckboxGroupValuesToEvent(event: ChangeEvent<HTMLInputElement>, values: string[], name: string): CheckboxGroupChangeEvent;
+type CheckboxGroupOptionInput = CheckboxGroupOption & Omit<ComponentProps<typeof Checkbox>, 'checked' | 'mode' | 'children' | 'defaultChecked' | 'indeterminate' | 'inputProps' | 'inputRef' | 'name' | 'onChange' | 'ref' | 'value'> & {
+    /**
+     * The id of input element.
+     * If not provided, will be auto-generated as `{name}-{value}`.
+     */
+    id?: string;
+    /**
+     * The react ref passed to input element.
+     */
+    inputRef?: ComponentProps<typeof Checkbox>['inputRef'];
+    /**
+     * Additional props for the input element.
+     */
+    inputProps?: ComponentProps<typeof Checkbox>['inputProps'];
+};
+export interface CheckboxGroupLevelConfig {
     /**
-     * The checkboxes in radio group.
+     * Whether the level control is active.
      */
-    children?: ReactNode;
+    active: boolean;
+    /**
+     * Whether the level control checkbox is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The label displayed for the level control checkbox.
+     * @default 'Select all'
+     */
+    label?: string;
+    /**
+     * The mode of level control checkbox.
+     * @default 'main'
+     */
+    mode?: CheckboxMode;
+    /**
+     * Custom onChange handler for the level control.
+     * If not provided, the default behavior (select/deselect all) will be used.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+interface CheckboxGroupBaseProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * The default value of checkbox group.
      */
@@ -16,30 +61,67 @@ export interface CheckboxGroupProps extends Omit<InputCheckGroupProps, 'defaultV
      */
     disabled?: boolean;
     /**
-     * The name of checkbox group.
-     * Control the name of checkboxes in group if name not passed to checkbox.
+     * The level control configuration.
+     * When provided, a "select all" checkbox will be rendered above the group.
      */
-    name?: string;
+    level?: CheckboxGroupLevelConfig;
     /**
-     * The onChange of checkbox group.
-     * Will be passed to each checkboxes but composing both instead of overriding.
+     * The layout of checkbox group.
+     * @default 'horizontal'
+     */
+    layout?: CheckboxGroupLayout;
+    /**
+     * The mode of checkboxes in the group.
+     * Control the mode of checkboxes in group if mode not passed to checkbox.
      */
-    onChange?: (value: string[], event: ChangeEvent<HTMLInputElement>) => void;
+    mode?: CheckboxMode;
     /**
-     * The options of checkbox group.
-     * Will be ignored if children passed.
+     * The name of checkbox group.
+     * Control the name of checkboxes in group if name not passed to checkbox.
+     *
+     * @important When integrating with react-hook-form, this prop is highly recommended.
+     * All checkboxes in the group will share the same `name` attribute, which is required
+     * for react-hook-form to correctly collect the selected values as an array.
+     *
+     * @example Using with react-hook-form's Controller:
+     * ```tsx
+     * const { control } = useForm();
+     * <Controller
+     *   name="interests"
+     *   control={control}
+     *   render={({ field }) => (
+     *     <CheckboxGroup
+     *       name="interests"
+     *       value={field.value || []}
+     *       onChange={(e) => field.onChange(e.target.values)}
+     *     >
+     *       <Checkbox value="reading" label="Reading" />
+     *       <Checkbox value="coding" label="Coding" />
+     *     </CheckboxGroup>
+     *   )}
+     * />
+     * ```
      */
-    options?: CheckboxGroupOption[];
+    name?: string;
     /**
-     * The size of checkbox group.
-     * Control the size of checkboxes in group if size not passed to checkbox.
+     * The onChange of checkbox group.
+     * Provides the latest `values` array via `event.target.values`.
      */
-    size?: CheckboxSize;
+    onChange?: (event: CheckboxGroupChangeEvent) => void;
     /**
      * The value of checkbox group.
      */
     value?: string[];
 }
+interface CheckboxGroupOptionsInputProps extends CheckboxGroupBaseProps {
+    children?: never;
+    options: CheckboxGroupOptionInput[];
+}
+interface CheckboxGroupChildrenInputProps extends CheckboxGroupBaseProps {
+    children: ReactNode;
+    options?: never;
+}
+export type CheckboxGroupProps = CheckboxGroupOptionsInputProps | CheckboxGroupChildrenInputProps;
 /**
  * The react component for `mezzanine` checkbox group.
  */

package/Checkbox/CheckboxGroup.js

@@ -1,38 +1,183 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, createElement } from 'react';
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { checkboxGroupClasses } from '@mezzanine-ui/core/checkbox';
+import { forwardRef, useId, useMemo, useCallback, useEffect, Children, isValidElement } from 'react';
 import { useControlValueState } from '../Form/useControlValueState.js';
-import { CheckboxGroupContext } from './CheckboxGroupContext.js';
 import Checkbox from './Checkbox.js';
-import InputCheckGroup from '../_internal/InputCheck/InputCheckGroup.js';
+import { CheckboxGroupContext } from './CheckboxGroupContext.js';
+import cx from 'clsx';
 
-const renderOption = ({ label: children, ...option }) => (createElement(Checkbox, { ...option, key: option.value }, children));
+function assignCheckboxGroupValuesToEvent(event, values, name) {
+    const target = event.target;
+    target.values = values;
+    if (name) {
+        target.name = name;
+    }
+    return event;
+}
+const equalityFn = (a, b) => {
+    if (a.length !== b.length)
+        return false;
+    const sortedA = [...a].sort();
+    const sortedB = [...b].sort();
+    return sortedA.every((val, idx) => val === sortedB[idx]);
+};
 /**
  * The react component for `mezzanine` checkbox group.
  */
 const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
-    const { children: childrenProp, defaultValue = [], disabled, name, options = [], onChange, size, value: valueProp, ...rest } = props;
+    var _a, _b, _c, _d, _e;
+    const { children: childrenProp, className, defaultValue, disabled, layout = 'horizontal', level, mode, name, options, onChange: onChangeProp, role = 'group', value: valueProp, ...rest } = props;
+    const generatedName = useId();
+    const resolvedName = name !== null && name !== void 0 ? name : generatedName;
+    const normalizedOptions = useMemo(() => options !== null && options !== void 0 ? options : [], [options]);
     const [value, setValue] = useControlValueState({
-        defaultValue,
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : [],
+        equalityFn,
         value: valueProp,
     });
+    const handleChange = useCallback((event) => {
+        const checkboxValue = event.target.value;
+        const isChecked = event.target.checked;
+        const currentValue = value || [];
+        const newValue = isChecked
+            ? [...currentValue, checkboxValue]
+            : currentValue.filter((v) => v !== checkboxValue);
+        setValue(newValue);
+        if (onChangeProp) {
+            const syntheticEvent = assignCheckboxGroupValuesToEvent(event, newValue, resolvedName);
+            onChangeProp(syntheticEvent);
+        }
+    }, [onChangeProp, resolvedName, setValue, value]);
     const context = useMemo(() => ({
         disabled,
-        name,
-        onChange(event) {
-            const { checked, value: targetValue } = event.target;
-            const newValue = checked
-                ? [...value, targetValue]
-                : value.filter((v) => v !== targetValue);
-            setValue(newValue);
-            if (onChange) {
-                onChange(newValue, event);
-            }
-        },
-        size,
-        value,
-    }), [disabled, name, value, size, onChange, setValue]);
-    const children = childrenProp || options.map(renderOption);
-    return (jsx(CheckboxGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, children: children }) }));
+        name: resolvedName,
+        onChange: handleChange,
+        value: value || [],
+    }), [disabled, resolvedName, handleChange, value]);
+    const hasChildrenInput = typeof childrenProp !== 'undefined';
+    const hasOptionsInput = Array.isArray(options);
+    // Validate input props and warn about missing props
+    useEffect(() => {
+        if (hasChildrenInput && hasOptionsInput) {
+            console.error('CheckboxGroup: Please provide either `children` or `options`, but not both.');
+        }
+        else if (!hasChildrenInput && !hasOptionsInput) {
+            console.error('CheckboxGroup: Please provide one of `children` or `options`.');
+        }
+        // Warn if name is not provided (important for react-hook-form integration)
+        if (!name) {
+            console.warn('CheckboxGroup: The `name` prop is recommended, especially when integrating with react-hook-form. ' +
+                'All checkboxes in the group should share the same `name` attribute.');
+        }
+        // Validate that all children have value prop
+        if (hasChildrenInput) {
+            Children.forEach(childrenProp, (child, index) => {
+                if (isValidElement(child) && child.type === Checkbox) {
+                    const checkboxProps = child.props;
+                    if (!checkboxProps.value) {
+                        console.warn(`CheckboxGroup: Each Checkbox child should have a \`value\` prop. ` +
+                            `Checkbox at index ${index} is missing the \`value\` prop.`);
+                    }
+                }
+            });
+        }
+    }, [hasChildrenInput, hasOptionsInput, name, childrenProp]);
+    // Validate that all children are Checkbox components
+    useEffect(() => {
+        if (hasChildrenInput) {
+            Children.forEach(childrenProp, (child) => {
+                var _a;
+                if (isValidElement(child) && child.type !== Checkbox) {
+                    console.warn('CheckboxGroup: When using ReactNode (children) input, only Checkbox components are supported. ' +
+                        `Found unsupported component: ${typeof child.type === 'string' ? child.type : ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) || 'Unknown'}`);
+                }
+            });
+        }
+    }, [hasChildrenInput, childrenProp]);
+    // Render priority: ReactNode (children) first, then options
+    // If using ReactNode, only Checkbox components are supported, other components are not supported
+    const children = useMemo(() => {
+        // Render ReactNode (children) if provided
+        if (hasChildrenInput) {
+            return childrenProp;
+        }
+        if (hasOptionsInput && normalizedOptions.length > 0) {
+            return normalizedOptions.map(({ label, value: optionValue, disabled: optionDisabled, id: optionId, inputProps: optionInputProps, inputRef: optionInputRef, ...optionRest }) => {
+                // Generate unique id if not provided
+                // Format: {name}-{value} or fallback to checkbox-{value}
+                const generatedId = resolvedName
+                    ? `${resolvedName}-${optionValue}`
+                    : `checkbox-${optionValue}`;
+                const finalId = optionId !== null && optionId !== void 0 ? optionId : generatedId;
+                return (jsx(Checkbox, { disabled: optionDisabled !== null && optionDisabled !== void 0 ? optionDisabled : disabled, id: finalId, inputProps: optionInputProps, inputRef: optionInputRef, label: typeof label === 'string' ? label : String(label), mode: mode, value: optionValue, ...optionRest }, optionValue));
+            });
+        }
+        return null;
+    }, [
+        childrenProp,
+        disabled,
+        hasChildrenInput,
+        hasOptionsInput,
+        mode,
+        normalizedOptions,
+        resolvedName,
+    ]);
+    const isLevelActive = (_a = level === null || level === void 0 ? void 0 : level.active) !== null && _a !== void 0 ? _a : false;
+    const isChipMode = mode === 'chip';
+    const isHorizontalLayout = layout === 'horizontal';
+    const shouldRenderLevelInsideContent = isLevelActive && isChipMode;
+    const ariaOrientation = isLevelActive ? 'vertical' : layout;
+    const canRenderLevelControl = isLevelActive && normalizedOptions.length > 0;
+    useEffect(() => {
+        if (isLevelActive && !hasOptionsInput) {
+            console.warn('CheckboxGroup: `level.active=true` currently supports only the `options` input approach.');
+        }
+    }, [hasOptionsInput, isLevelActive]);
+    const { levelChecked, levelIndeterminate } = useMemo(() => {
+        if (!canRenderLevelControl) {
+            return { levelChecked: false, levelIndeterminate: false };
+        }
+        const enabledOptions = normalizedOptions.filter((opt) => !opt.disabled);
+        const enabledValues = enabledOptions.map((opt) => opt.value);
+        const selectedEnabledValues = (value || []).filter((v) => enabledValues.includes(v));
+        if (selectedEnabledValues.length === 0) {
+            return { levelChecked: false, levelIndeterminate: false };
+        }
+        if (selectedEnabledValues.length === enabledValues.length) {
+            return { levelChecked: true, levelIndeterminate: false };
+        }
+        return { levelChecked: false, levelIndeterminate: true };
+    }, [canRenderLevelControl, normalizedOptions, value]);
+    const handleLevelControlChange = useCallback((event) => {
+        if (!canRenderLevelControl) {
+            return;
+        }
+        // Use custom onChange if provided
+        if (level === null || level === void 0 ? void 0 : level.onChange) {
+            level.onChange(event);
+            return;
+        }
+        // Default behavior: select/deselect all
+        const isChecked = event.target.checked;
+        const currentValue = value || [];
+        const enabledOptions = normalizedOptions.filter((opt) => !opt.disabled);
+        const enabledValues = enabledOptions.map((opt) => opt.value);
+        const disabledOptions = normalizedOptions.filter((opt) => opt.disabled);
+        const disabledValues = disabledOptions.map((opt) => opt.value);
+        const selectedDisabledValues = currentValue.filter((v) => disabledValues.includes(v));
+        const newValue = isChecked
+            ? [...enabledValues, ...selectedDisabledValues]
+            : selectedDisabledValues;
+        setValue(newValue);
+        if (onChangeProp) {
+            const syntheticEvent = assignCheckboxGroupValuesToEvent(event, newValue, resolvedName);
+            onChangeProp(syntheticEvent);
+        }
+    }, [canRenderLevelControl, level, onChangeProp, normalizedOptions, resolvedName, setValue, value]);
+    return (jsxs("div", { ...rest, ref: ref, "aria-orientation": ariaOrientation, className: cx(checkboxGroupClasses.host, {
+            [checkboxGroupClasses.nested]: isLevelActive,
+        }, className), role: role, children: [canRenderLevelControl && !shouldRenderLevelInsideContent && (jsx(Checkbox, { checked: levelChecked, disabled: disabled || (level === null || level === void 0 ? void 0 : level.disabled), id: `${resolvedName}-level-control`, indeterminate: levelIndeterminate, label: (_b = level === null || level === void 0 ? void 0 : level.label) !== null && _b !== void 0 ? _b : '', mode: (_c = level === null || level === void 0 ? void 0 : level.mode) !== null && _c !== void 0 ? _c : 'main', name: `${resolvedName}-level-control`, onChange: handleLevelControlChange })), jsxs("div", { className: cx(checkboxGroupClasses.contentWrapper, checkboxGroupClasses.layout(layout), mode && checkboxGroupClasses.mode(mode)), children: [canRenderLevelControl && shouldRenderLevelInsideContent && (jsxs(Fragment, { children: [jsx(Checkbox, { checked: levelChecked, disabled: disabled || (level === null || level === void 0 ? void 0 : level.disabled), id: `${resolvedName}-level-control`, indeterminate: levelIndeterminate, label: (_d = level === null || level === void 0 ? void 0 : level.label) !== null && _d !== void 0 ? _d : '', mode: (_e = level === null || level === void 0 ? void 0 : level.mode) !== null && _e !== void 0 ? _e : 'main', name: `${resolvedName}-level-control`, onChange: handleLevelControlChange }), isHorizontalLayout && jsx("i", { className: checkboxGroupClasses.levelControlSeparator })] })), jsx(CheckboxGroupContext.Provider, { value: context, children: children })] })] }));
 });
 
-export { CheckboxGroup as default };
+export { assignCheckboxGroupValuesToEvent, CheckboxGroup as default };

package/Checkbox/CheckboxGroupContext.d.ts

@@ -1,8 +1,6 @@
-import { CheckboxSize } from '@mezzanine-ui/core/checkbox';
 import { CheckboxGroupControlContextValue } from '../Form/useCheckboxControlValue';
 export interface CheckboxGroupContextValue extends CheckboxGroupControlContextValue {
     disabled?: boolean;
     name?: string;
-    size?: CheckboxSize;
 }
 export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | undefined>;

package/Checkbox/index.d.ts

@@ -1,7 +1,16 @@
-export type { CheckboxSize, CheckboxGroupOrientation, CheckboxGroupOption, } from '@mezzanine-ui/core/checkbox';
-export type { CheckboxProps } from './Checkbox';
-export { default } from './Checkbox';
-export type { CheckboxGroupProps } from './CheckboxGroup';
-export { default as CheckboxGroup } from './CheckboxGroup';
-export type { CheckAllProps } from './CheckAll';
+import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import { CheckboxProps } from './Checkbox';
+export type { CheckboxGroupLayout, CheckboxGroupOption, } from '@mezzanine-ui/core/checkbox';
 export { default as CheckAll } from './CheckAll';
+export type { CheckAllProps } from './CheckAll';
+export { default as CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupChangeEvent, CheckboxGroupChangeEventTarget, CheckboxGroupLevelConfig, CheckboxGroupProps, } from './CheckboxGroup';
+export type { CheckboxProps } from './Checkbox';
+export type { CheckboxComponent, CheckboxPropsBase } from './typings';
+/**
+ * @remark
+ * Add type alias here for parsable to react docgen typescript.
+ */
+type GenericCheckbox = (props: PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLLabelElement>) => ReactElement<any>;
+declare const _default: GenericCheckbox;
+export default _default;

package/Checkbox/index.js

@@ -1,3 +1,7 @@
-export { default } from './Checkbox.js';
-export { default as CheckboxGroup } from './CheckboxGroup.js';
+import Checkbox from './Checkbox.js';
 export { default as CheckAll } from './CheckAll.js';
+export { default as CheckboxGroup } from './CheckboxGroup.js';
+
+
+
+export { Checkbox as default };