const { useState } = React;
function Icon({ className = "", children }) {
return ;
}
const CalendarDays = (p) => ;
const ChevronDown = (p) => ;
const ChevronLeft = (p) => ;
const ChevronRight = (p) => ;
const Clock = (p) => ;
const Copy = (p) => ;
const Minus = (p) => ;
const Plus = (p) => ;
const RotateCcw = (p) => ;
const Trash2 = (p) => ;
const X = (p) => ;
const steps = [
{ no: 1, sectionTitle: "Basic Information", tone: "bg-blue-500" },
{ no: 2, sectionTitle: "Customer Information", tone: "bg-emerald-500" },
{ no: 3, sectionTitle: "Participants Information", tone: "bg-purple-500" },
{ no: 4, sectionTitle: "Reservation Information", tone: "bg-orange-500" },
{ no: 5, sectionTitle: "Estimate", tone: "bg-slate-500" },
];
const initialDateRows = [
{ date: "2026/4/10", items: [{ id: 1 }, { id: 2 }, { id: 3 }] },
{ date: "2026/4/11", items: [] },
];
function addItemToRows(rows, date) {
return rows.map((row) => {
if (row.date !== date) return row;
const nextId = row.items.length ? Math.max(...row.items.map((item) => item.id)) + 1 : 1;
return { ...row, items: [...row.items, { id: nextId }] };
});
}
function removeItemFromRows(rows, date, itemId) {
return rows.map((row) => {
if (row.date !== date) return row;
return { ...row, items: row.items.filter((item) => item.id !== itemId) };
});
}
function runPreviewAssertions() {
const rowsAfterAdd = addItemToRows([{ date: "A", items: [] }], "A");
console.assert(rowsAfterAdd[0].items.length === 1, "addItemToRows should add one item");
const rowsAfterRemove = removeItemFromRows([{ date: "A", items: [{ id: 1 }, { id: 2 }] }], "A", 1);
console.assert(rowsAfterRemove[0].items.length === 1 && rowsAfterRemove[0].items[0].id === 2, "removeItemFromRows should remove the selected item");
const untouchedRows = addItemToRows([{ date: "A", items: [] }], "B");
console.assert(untouchedRows[0].items.length === 0, "addItemToRows should not affect other dates");
}
runPreviewAssertions();
function Field({ label, required, children, hint }) {
return (
);
}
function TextInput({ value: initialValue = "", placeholder = "", type = "text", icon }) {
const [value, setValue] = useState(initialValue);
return (
{icon}
setValue(event.target.value)}
className="min-w-0 flex-1 bg-transparent text-[15px] text-slate-800 outline-none placeholder:text-slate-400"
/>
);
}
function SelectInput({ value, options = [] }) {
const [selected, setSelected] = useState(value || options[0] || "");
return (
);
}
function TextArea({ placeholder }) {
const [value, setValue] = useState("");
return (