/* ============================================================
   Primitives — Form
   Extracted from components.jsx via split.py.
   Each component reaches React hooks via window.React.
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;


/* ------------------------------------------------------------
   Form primitives.
   ------------------------------------------------------------ */
window.FormRow = function FormRow({ label, hint, children }) {
    return (
        <div className="form-row">
            <label>{label}{hint && <span className="hint">{hint}</span>}</label>
            <div>{children}</div>
        </div>
    );
};


window.TextInput = function TextInput({ value, onChange, placeholder, maxLength }) {
    return (
        <input
            className="input"
            type="text"
            value={value ?? ''}
            onChange={e => onChange(e.target.value)}
            placeholder={placeholder}
            maxLength={maxLength}
        />
    );
};


window.TextArea = function TextArea({ value, onChange, placeholder, rows = 3 }) {
    return (
        <textarea
            className="textarea"
            rows={rows}
            value={value ?? ''}
            onChange={e => onChange(e.target.value)}
            placeholder={placeholder}
        />
    );
};


window.Select = function Select({ value, onChange, options, placeholder }) {
    return (
        <select className="select" value={value ?? ''} onChange={e => onChange(e.target.value)}>
            {placeholder && <option value="">{placeholder}</option>}
            {options.map(opt => (
                <option key={opt.value} value={opt.value}>{opt.label}</option>
            ))}
        </select>
    );
};