seti-ramesesv1/dist/components/ui/Checkbox.js

Reusable components and context for Next.js apps

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import styles from '../../styles/Checkbox.module.css.js';

function Checkbox({ checked, defaultChecked = false, onChange, label, id, name, disabled = false, size = "medium", color = "default", labelPlacement = "right", }) {
    const isControlled = checked !== undefined;
    const [internalChecked, setInternalChecked] = useState(defaultChecked);
    const currentChecked = isControlled ? checked : internalChecked;
    const handleChange = (e) => {
        const newChecked = e.target.checked;
        if (!isControlled)
            setInternalChecked(newChecked);
        onChange?.(e, newChecked);
    };
    return (jsxs("label", { htmlFor: id, className: `${styles.label} ${styles[`label${capitalize(labelPlacement)}`]} ${disabled ? styles.disabled : styles.enabled}`, children: [jsx("input", { id: id, name: name, type: "checkbox", onChange: handleChange, disabled: disabled, className: styles.peer, ...(isControlled ? { checked: currentChecked } : { defaultChecked }) }), jsx("div", { className: `
          ${styles.box}
          ${styles[`${size}Box`]}
          ${currentChecked ? styles[`${color}Checked`] : ""}
          ${!disabled && !currentChecked ? styles[`hover${capitalize(color)}`] : ""}
        `, children: jsx("svg", { className: `
            ${styles.icon}
            ${styles[`${currentChecked ? "checkedIcon" : "uncheckedIcon"}`]}
          `, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "20 6 9 17 4 12" }) }) }), label && jsx("span", { className: `${styles.labelText} ${styles[`${size}Label`]}`, children: label })] }));
}
function capitalize(s) {
    return s.charAt(0).toUpperCase() + s.slice(1);
}

export { Checkbox as default };
//# sourceMappingURL=Checkbox.js.map