"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId } from "react";
import { cn } from "../../../utils/cn";
export const Checkbox = ({ label, error, required = false, className, id, testId, ...props }) => {
    const generatedId = useId();
    const checkboxId = id || generatedId;
    const hasError = !!error;
    const { children: _unused, ...inputProps } = props;
    return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("input", { type: "checkbox", id: checkboxId, className: cn("w-4 h-4 rounded border-2", "bg-white dark:bg-neutral-700", "text-primary-600 focus:ring-2 focus:ring-primary-500", "transition-all", "aria-invalid:border-error-500", hasError
                            ? "border-error-500 dark:border-error-500"
                            : "border-neutral-300 dark:border-neutral-600", className), "aria-invalid": hasError, "aria-describedby": hasError ? `${checkboxId}-error` : undefined, required: required, "data-testid": testId, ...inputProps }), label && (_jsxs("label", { htmlFor: checkboxId, className: cn("ml-2 text-sm font-medium", hasError
                            ? "text-error-600 dark:text-error-400"
                            : "text-neutral-700 dark:text-neutral-300"), "data-testid": testId ? `${testId}.label` : undefined, children: [label, required && (_jsx("span", { className: "text-error-500 ml-1", "aria-label": "required", children: "*" }))] }))] }), error && (_jsx("p", { id: `${checkboxId}-error`, className: "mt-1 text-sm text-error-600 dark:text-error-400", role: "alert", children: error }))] }));
};
export default Checkbox;
