{monthName}
{['M','T','W','T','F','S','S'].map((d,i) => (
{d}
))}
{cells.map((c, i) => c ? (
) :
)}
);
};
// --- TIME PICKER ---
const TimePicker = ({ value = '09:00', onChange, step = 30 }) => {
const anchor = React.useRef(null);
const [open, setOpen] = React.useState(false);
const times = [];
for (let h = 0; h < 24; h++) for (let m = 0; m < 60; m += step)
times.push(`${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`);
const display = v => {
const [h, m] = v.split(':').map(Number);
const ap = h >= 12 ? 'PM' : 'AM';
const h12 = ((h + 11) % 12) + 1;
return `${h12}:${String(m).padStart(2,'0')} ${ap}`;
};
return <>
setOpen(false)}>
{times.map(t => (
))}
;
};
// --- FILE UPLOAD ---
const FileUpload = ({ onFile, preview, height = 180, label = 'Drop image or click to upload', accept = 'image/*' }) => {
const [drag, setDrag] = React.useState(false);
const [img, setImg] = React.useState(preview);
const input = React.useRef();
const handle = f => {
if (!f) return;
const url = URL.createObjectURL(f);
setImg(url);
onFile?.(f);
};
return (
{ e.preventDefault(); setDrag(true); }}
onDragLeave={() => setDrag(false)}
onDrop={e => { e.preventDefault(); setDrag(false); handle(e.dataTransfer.files[0]); }}
onClick={() => input.current?.click()}
style={{
height, borderRadius: 12,
border: `2px dashed ${drag ? 'var(--accent)' : 'var(--line-2)'}`,
background: drag ? 'var(--accent-soft)' : 'var(--bg-sunken)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
flexDirection: 'column', gap: 6,
cursor: 'pointer', position: 'relative', overflow: 'hidden',
transition: 'all 160ms',
}}>
{img ? (
<>
Click or drop to replace
) : (
<>
{label}
PNG, JPG up to 5MB · 1200×600 recommended
)}
handle(e.target.files[0])} style={{ display: 'none' }}/>
);
};
// --- COMBOBOX (autocomplete) ---
const Combobox = ({ value, onChange, options, placeholder = 'Search...', icon = 'search' }) => {
const [query, setQuery] = React.useState('');
const [open, setOpen] = React.useState(false);
const anchor = React.useRef(null);
const filtered = options.filter(o => o.label.toLowerCase().includes(query.toLowerCase()));
const selected = options.find(o => o.value === value);
return <>
setOpen(true)}
onChange={e => { setQuery(e.target.value); setOpen(true); }}
placeholder={placeholder}
style={{ flex: 1, border: 0, outline: 0, background: 'transparent', fontSize: 14, fontFamily: 'inherit', color: 'var(--ink)' }}
/>
0} anchor={anchor} onClose={() => setOpen(false)}>
{filtered.map(o => (
))}
;
};
// --- RICH TEXT (toolbar mock, real contenteditable) ---
const RichText = ({ placeholder = 'Tell attendees what to expect...', minHeight = 200, defaultValue = '' }) => {
const ref = React.useRef(null);
const exec = cmd => { document.execCommand(cmd); ref.current?.focus(); };
const tools = [
{ cmd: 'bold', icon: 'bold', label: 'Bold', kbd: '⌘B' },
{ cmd: 'italic', icon: 'italic', label: 'Italic', kbd: '⌘I' },
{ cmd: 'underline', icon: 'underline', label: 'Underline' },
'|',
{ cmd: 'insertUnorderedList', icon: 'listUl', label: 'Bullet list' },
{ cmd: 'insertOrderedList', icon: 'listOl', label: 'Numbered list' },
'|',
{ cmd: 'createLink', icon: 'link', label: 'Link' },
];
return (
{tools.map((t, i) => t === '|' ? (
) : (
))}
);
};
// --- SLIDER ---
const Slider = ({ value, onChange, min = 0, max = 100, step = 1, format = v => v, style = {} }) => {
const pct = ((value - min) / (max - min)) * 100;
return (
onChange?.(Number(e.target.value))}
style={{
position: 'absolute', inset: 0, width: '100%', height: 20,
appearance: 'none', background: 'transparent', margin: 0, cursor: 'pointer',
}}/>
{format(value)}
);
};
// --- COLOR INPUT ---
const ColorInput = ({ value, onChange, swatches }) => {
const defaults = swatches || ['#D97757', '#E8B25E', '#5A8C76', '#4A6FB0', '#8B5CF6', '#EC4899', '#F59E0B', '#18181B'];
return (
{defaults.map(c => (
);
};
// --- SEARCH INPUT (with clear + kbd hint) ---
const SearchInput = ({ value, onChange, placeholder = 'Search...', kbd = '⌘K', style = {}, ...rest }) => (
onChange?.(e.target.value)} placeholder={placeholder}
style={{ flex: 1, border: 0, outline: 0, background: 'transparent', fontSize: 13.5, fontFamily: 'inherit', color: 'var(--ink)', minWidth: 0 }}
{...rest}/>
{value ? (
) : kbd && {kbd}}
);
Object.assign(window, { DatePicker, TimePicker, FileUpload, Combobox, RichText, Slider, ColorInput, SearchInput });