"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.TailwindCheckbox = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const cn_js_1 = require("../utils/cn.js");
/**
 * Checkbox component built with Tailwind CSS
 *
 * A flexible checkbox component that supports various sizes, states, and
 * custom styling.
 *
 * @example
 * // Basic usage
 * <TailwindCheckbox
 *   label="Accept terms and conditions"
 *   name="terms"
 * />
 *
 * @example
 * // With error state
 * <TailwindCheckbox
 *   label="Subscribe to newsletter"
 *   name="newsletter"
 *   error="This field is required"
 * />
 *
 * @example
 * // With custom checked icon
 * <TailwindCheckbox
 *   label="Custom checkbox"
 *   name="custom"
 *   icon={<CustomIcon />}
 * />
 */
exports.TailwindCheckbox = (0, react_1.forwardRef)(({ id, name, checked, defaultChecked, label, error, helperText, size = 'md', isRequired = false, isDisabled = false, isIndeterminate = false, icon, labelPosition = 'right', containerClassName, checkboxClassName, labelClassName, onChange, className, ...props }, ref) => {
    // Generate a unique ID if not provided
    const checkboxId = id || `checkbox-${name}-${Math.random().toString(36).substring(2, 9)}`;
    // Handle ref and indeterminate state
    const internalRef = react_1.default.useRef(null);
    // Combine refs
    const handleRef = (el) => {
        // Set internal ref
        internalRef.current = el;
        // Set forwarded ref
        if (typeof ref === 'function') {
            ref(el);
        }
        else if (ref) {
            ref.current = el;
        }
    };
    // Set indeterminate property on checkbox
    react_1.default.useEffect(() => {
        if (internalRef.current) {
            internalRef.current.indeterminate = isIndeterminate;
        }
    }, [isIndeterminate]);
    // Size-specific classes
    const sizeClasses = {
        sm: "h-3.5 w-3.5",
        md: "h-4 w-4",
        lg: "h-5 w-5",
    };
    const labelSizeClasses = {
        sm: "text-xs",
        md: "text-sm",
        lg: "text-base",
    };
    // Base container classes
    const containerClasses = (0, cn_js_1.cn)("flex items-start", labelPosition === 'left' ? "flex-row-reverse" : "flex-row", containerClassName);
    // Checkbox element classes
    const checkboxClasses = (0, cn_js_1.cn)(
    // Base styles
    "peer shrink-0 border border-primary rounded", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", "text-primary-600 dark:text-primary-400", 
    // Size variations
    sizeClasses[size], 
    // State variations
    error ? "border-red-500 focus-visible:ring-red-500" : "", 
    // Additional classes
    checkboxClassName, className);
    // Label classes
    const labelClasses = (0, cn_js_1.cn)("font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-50", labelSizeClasses[size], error ? "text-red-500 dark:text-red-400" : "text-gray-700 dark:text-gray-300", labelPosition === 'left' ? "mr-2" : "ml-2", labelClassName);
    // Helper/error text classes
    const helperTextClasses = (0, cn_js_1.cn)("mt-1 text-xs", error ? "text-red-500 dark:text-red-400" : "text-gray-500 dark:text-gray-400");
    // Default check icon
    const defaultCheckIcon = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", className: "h-full w-full", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" }) }));
    // Indeterminate icon
    const indeterminateIcon = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", className: "h-full w-full", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" }) }));
    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: containerClasses, children: [(0, jsx_runtime_1.jsx)("input", { id: checkboxId, type: "checkbox", name: name, checked: checked, defaultChecked: defaultChecked, disabled: isDisabled, required: isRequired, onChange: onChange, className: "sr-only", "aria-invalid": error ? "true" : "false", "aria-describedby": helperText || error ? `${checkboxId}-helper-text` : undefined, ref: handleRef, ...props }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)(checkboxClasses, "bg-white dark:bg-gray-800", !isDisabled && "cursor-pointer") }), (checked || defaultChecked || isIndeterminate) && ((0, jsx_runtime_1.jsx)("div", { className: "absolute pointer-events-none flex items-center justify-center text-white", children: isIndeterminate ? indeterminateIcon : (icon || defaultCheckIcon) }))] }), label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: checkboxId, className: labelClasses, children: [label, isRequired && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500 ml-1", children: "*" })] }))] }), (helperText || error) && ((0, jsx_runtime_1.jsx)("div", { id: `${checkboxId}-helper-text`, className: helperTextClasses, children: error || helperText }))] }));
});
exports.TailwindCheckbox.displayName = 'TailwindCheckbox';
exports.default = exports.TailwindCheckbox;
//# sourceMappingURL=TailwindCheckbox.js.map