import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../../scalars/lib/utils.js';
import React, { useId } from 'react';
import { FormLabel } from '../../../../scalars/components/fragments/form-label/index.js';
import { FormMessageList } from '../../../../scalars/components/fragments/form-message/index.js';
import ToggleDiff from './subcomponents/toogle-diff.js';
import { ToggleBase } from './toggle-base.js';
const Toggle = React.forwardRef(({ id: idProp, name, label, disabled = false, value, onChange, errors = [], warnings = [], required = false, className, defaultValue, description, viewMode = 'edition', optionalLabel, baseValue, ...props }, ref) => {
    const generatedId = useId();
    const id = idProp ?? generatedId;
    if (viewMode === 'edition') {
        return (_jsxs("div", { className: cn('flex flex-col gap-1', className), "data-testid": "custom-class", children: [_jsxs("div", { className: "flex items-center", children: [optionalLabel && (_jsx(FormLabel, { className: cn('mr-2'), disabled: disabled, required: required, inline: true, id: `${id}-optionalLabel`, children: optionalLabel })), _jsx(ToggleBase, { "aria-labelledby": `${id}-label`, required: required, disabled: disabled, name: name, id: id, checked: value ?? defaultValue, onCheckedChange: onChange, ref: ref, ...props }), label && (_jsx(FormLabel, { htmlFor: id, className: cn('ml-2'), disabled: disabled, required: required, description: description, inline: true, id: `${id}-label`, children: label }))] }), warnings.length !== 0 && _jsx(FormMessageList, { messages: warnings, type: "warning" }), errors.length !== 0 && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
    }
    return (_jsx(ToggleDiff, { viewMode: viewMode, baseValue: baseValue, value: value, label: label, optionalLabel: optionalLabel, disabled: disabled }));
});
Toggle.displayName = 'Toggle';
export { Toggle };
//# sourceMappingURL=toggle.js.map