Selects an object/resource.
<div class="picker picker--type-file picker--sel-report" style="--accent:#A8E6C1;">
<span id="op-label" class="picker__label">Attach a resource</span>
<button type="button" class="picker__trigger" aria-haspopup="listbox" aria-expanded="true" aria-controls="op-list" aria-labelledby="op-label">
<svg class="picker__icon picker__icon--file" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 1h6l4 4v10H3z" fill="none" stroke="#241430" stroke-width="1.3"/></svg>
<svg class="picker__icon picker__icon--folder" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 3h5l1.5 2H15v9H1z" fill="none" stroke="#241430" stroke-width="1.3"/></svg>
<svg class="picker__icon picker__icon--link" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 10 10 6M5 8 3 10a2.5 2.5 0 0 0 3.5 3.5L8 12M11 8l2-2a2.5 2.5 0 0 0-3.5-3.5L8 4" fill="none" stroke="#241430" stroke-width="1.3"/></svg>
<span class="picker__triggertext">Choose a file</span>
</button>
<ul role="listbox" id="op-list" aria-labelledby="op-label" class="picker__list">
<li role="option" data-key="report" aria-selected="true" class="picker__option">Q3 Report.pdf</li>
<li role="option" data-key="design" aria-selected="false" class="picker__option">Brand Guide.fig</li>
<li role="option" data-key="site" aria-selected="false" class="picker__option">Marketing Site</li>
</ul>
</div>
<style>
.picker { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 280px; }
.picker__label { display: block; margin-bottom: 6px; font-weight: 500; }
.picker__trigger { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; border-radius: 8px; cursor: pointer; }
.picker__trigger:hover { border-color: var(--accent); }
.picker__trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.picker__icon { display: none; flex: none; }
.picker--type-file .picker__icon--file { display: block; }
.picker--type-folder .picker__icon--folder { display: block; }
.picker--type-link .picker__icon--link { display: block; }
.picker__triggertext { flex: 1; text-align: left; }
.picker__list { list-style: none; margin: 6px 0 0; padding: 4px; border: 1.5px solid #24143040; border-radius: 8px; background: #fff; }
.picker__option { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.picker__option:hover { background: #24143010; }
.picker--sel-report [data-key="report"],
.picker--sel-design [data-key="design"],
.picker--sel-site [data-key="site"] { background: var(--accent); font-weight: 600; }
</style><div class="picker--type-file picker--sel-report block max-w-[280px] font-sans text-sm text-[#241430]" style="--accent:#A8E6C1;">
<span id="op-label-tw" class="block mb-1.5 font-medium">Attach a resource</span>
<button type="button" aria-haspopup="listbox" aria-expanded="true" aria-controls="op-list-tw" aria-labelledby="op-label-tw"
class="flex items-center gap-2 w-full box-border px-3 py-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143040] rounded-lg cursor-pointer hover:border-[color:var(--accent)] focus-visible:outline-none focus-visible:border-[color:var(--accent)]">
<svg class="op-icon-tw op-icon-tw--file" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 1h6l4 4v10H3z" fill="none" stroke="#241430" stroke-width="1.3"/></svg>
<svg class="op-icon-tw op-icon-tw--folder" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 3h5l1.5 2H15v9H1z" fill="none" stroke="#241430" stroke-width="1.3"/></svg>
<svg class="op-icon-tw op-icon-tw--link" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 10 10 6M5 8 3 10a2.5 2.5 0 0 0 3.5 3.5L8 12M11 8l2-2a2.5 2.5 0 0 0-3.5-3.5L8 4" fill="none" stroke="#241430" stroke-width="1.3"/></svg>
<span class="flex-1 text-left">Choose a file</span>
</button>
<ul role="listbox" id="op-list-tw" aria-labelledby="op-label-tw" class="list-none mt-1.5 p-1 border-[1.5px] border-[#24143040] rounded-lg bg-white">
<li role="option" data-key="report" aria-selected="true" class="op-option-tw px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143010]">Q3 Report.pdf</li>
<li role="option" data-key="design" aria-selected="false" class="op-option-tw px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143010]">Brand Guide.fig</li>
<li role="option" data-key="site" aria-selected="false" class="op-option-tw px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143010]">Marketing Site</li>
</ul>
</div>
<style>
.op-icon-tw { display: none; flex: none; }
.picker--type-file .op-icon-tw--file { display: block; }
.picker--type-folder .op-icon-tw--folder { display: block; }
.picker--type-link .op-icon-tw--link { display: block; }
.picker--sel-report [data-key="report"],
.picker--sel-design [data-key="design"],
.picker--sel-site [data-key="site"] { background: var(--accent); font-weight: 600; }
</style>export function ObjectPicker({
label = "Attach a resource",
resourceType = "file",
selectedResource = "report",
open = true,
accent = "#A8E6C1",
}) {
const icons = {
file: <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 1h6l4 4v10H3z" fill="none" stroke="#241430" strokeWidth="1.3" /></svg>,
folder: <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 3h5l1.5 2H15v9H1z" fill="none" stroke="#241430" strokeWidth="1.3" /></svg>,
link: <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 10 10 6M5 8 3 10a2.5 2.5 0 0 0 3.5 3.5L8 12M11 8l2-2a2.5 2.5 0 0 0-3.5-3.5L8 4" fill="none" stroke="#241430" strokeWidth="1.3" /></svg>,
};
const items = [
{ key: "report", text: "Q3 Report.pdf" },
{ key: "design", text: "Brand Guide.fig" },
{ key: "site", text: "Marketing Site" },
];
return (
<div style={{ display: "block", maxWidth: 280, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
<span id="op-label-r" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</span>
<button type="button" aria-haspopup="listbox" aria-expanded={open} aria-controls="op-list-r" aria-labelledby="op-label-r" style={{
display: "flex", alignItems: "center", gap: 8, width: "100%", boxSizing: "border-box", padding: "10px 12px",
font: "inherit", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143040", borderRadius: 8, cursor: "pointer",
}}>
{icons[resourceType] ?? icons.file}
<span style={{ flex: 1, textAlign: "left" }}>Choose a {resourceType}</span>
</button>
{open && (
<ul role="listbox" id="op-list-r" aria-labelledby="op-label-r" style={{ listStyle: "none", margin: "6px 0 0", padding: 4, border: "1.5px solid #24143040", borderRadius: 8, background: "#fff" }}>
{items.map((item) => (
<li key={item.key} role="option" aria-selected={item.key === selectedResource} style={{
padding: "8px 10px", borderRadius: 6, cursor: "pointer",
background: item.key === selectedResource ? accent : "transparent",
fontWeight: item.key === selectedResource ? 600 : 400,
}}>{item.text}</li>
))}
</ul>
)}
</div>
);
}