"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TailwindSelect = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const cn_js_1 = require("../utils/cn.js");
/**
 * Select component built with Tailwind CSS
 *
 * A flexible select component that supports various sizes, states, and options
 * including option groups and custom styling.
 *
 * @example
 * // Basic usage
 * <TailwindSelect
 *   label="Country"
 *   name="country"
 *   options={[
 *     { value: 'us', label: 'United States' },
 *     { value: 'ca', label: 'Canada' },
 *     { value: 'mx', label: 'Mexico' }
 *   ]}
 * />
 *
 * @example
 * // With option groups
 * <TailwindSelect
 *   label="Vehicle"
 *   name="vehicle"
 *   groups={[
 *     {
 *       label: 'Cars',
 *       options: [
 *         { value: 'sedan', label: 'Sedan' },
 *         { value: 'suv', label: 'SUV' }
 *       ]
 *     },
 *     {
 *       label: 'Trucks',
 *       options: [
 *         { value: 'pickup', label: 'Pickup' },
 *         { value: 'semi', label: 'Semi' }
 *       ]
 *     }
 *   ]}
 * />
 */
exports.TailwindSelect = (0, react_1.forwardRef)(({ id, name, value, defaultValue, label, error, helperText, isDisabled = false, isRequired = false, size = 'md', isFullWidth = false, icon, iconPosition = 'left', containerClassName, selectClassName, labelClassName, options = [], groups = [], placeholder, customArrow, onChange, className, ...props }, ref) => {
    // Generate a unique ID if not provided
    const selectId = id || `select-${name}-${Math.random().toString(36).substring(2, 9)}`;
    // Size-specific classes
    const sizeClasses = {
        sm: "h-8 text-xs",
        md: "h-10 text-sm",
        lg: "h-12 text-base",
    };
    // Base container classes
    const containerClasses = (0, cn_js_1.cn)("flex flex-col w-full", isFullWidth ? "w-full" : "max-w-sm", containerClassName);
    // Label classes
    const labelClasses = (0, cn_js_1.cn)("block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", error ? "text-red-500 dark:text-red-400" : "", labelClassName);
    // Select field container classes
    const fieldContainerClasses = (0, cn_js_1.cn)("relative rounded-md", icon ? "flex items-center" : "");
    // Select element classes
    const selectClasses = (0, cn_js_1.cn)(
    // Base styles
    "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm", "ring-offset-background placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", 
    // Default select arrow handling
    !customArrow && "appearance-none bg-no-repeat bg-[right_0.5rem_center]", !customArrow && "bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m6%208%204%204%204-4%22%2F%3E%3C%2Fsvg%3E')]", !customArrow && "bg-[length:1.25rem_1.25rem]", 
    // Size variations
    sizeClasses[size], 
    // Icon padding adjustments
    icon && iconPosition === 'left' ? "pl-10" : "", 
    // Custom arrow handling
    customArrow ? "pr-10" : "pr-8", 
    // State variations
    error ? "border-red-500 focus-visible:ring-red-500" : "", 
    // Additional classes
    selectClassName, className);
    // 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");
    // Icon container classes
    const iconContainerClasses = (0, cn_js_1.cn)("absolute inset-y-0 left-3 flex items-center text-gray-500");
    // Custom arrow container classes
    const arrowContainerClasses = (0, cn_js_1.cn)("absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none");
    return ((0, jsx_runtime_1.jsxs)("div", { className: containerClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: selectId, className: labelClasses, children: [label, isRequired && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500 ml-1", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: fieldContainerClasses, children: [icon && iconPosition === 'left' && ((0, jsx_runtime_1.jsx)("div", { className: iconContainerClasses, children: icon })), (0, jsx_runtime_1.jsxs)("select", { id: selectId, name: name, value: value, defaultValue: defaultValue, disabled: isDisabled, required: isRequired, className: selectClasses, onChange: onChange, ref: ref, "aria-invalid": error ? "true" : "false", "aria-describedby": helperText || error ? `${selectId}-helper-text` : undefined, ...props, children: [placeholder && ((0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: placeholder })), options.length > 0 && options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))), groups.length > 0 && groups.map((group) => ((0, jsx_runtime_1.jsx)("optgroup", { label: group.label, disabled: group.disabled, children: group.options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, `${group.label}-${option.value}`))) }, group.label)))] }), customArrow && ((0, jsx_runtime_1.jsx)("div", { className: arrowContainerClasses, children: customArrow }))] }), (helperText || error) && ((0, jsx_runtime_1.jsx)("div", { id: `${selectId}-helper-text`, className: helperTextClasses, children: error || helperText }))] }));
});
exports.TailwindSelect.displayName = 'TailwindSelect';
exports.default = exports.TailwindSelect;
//# sourceMappingURL=TailwindSelect.js.map