Shares an object/content.
<section class="share" data-scope="team" style="--accent:#D9C8F0;" aria-label="Share control">
<h3 class="share__title">Share document</h3>
<p class="share__scope share__scope--private"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg> Only you can access this</p>
<p class="share__scope share__scope--team"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><path d="M15 15c2.5 0 5 1.5 5 4.5"/></svg> Shared with 3 people on your team</p>
<p class="share__scope share__scope--public"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"/></svg> Anyone with the link can view</p>
<div class="share__link">
<input type="text" readonly value="https://app.example.com/s/9f2k1" aria-label="Shareable link">
<button type="button" class="share__copy">Copy link</button>
</div>
</section>
<style>
.share { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1px solid #24143026; border-radius: 12px; padding: 16px; max-width: 420px; box-sizing: border-box; }
.share__title { margin: 0 0 8px; font-size: 15px; }
.share__scope { display: none; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--accent); font-weight: 600; font-size: 13px; }
[data-scope="private"] .share__scope--private, [data-scope="team"] .share__scope--team, [data-scope="public"] .share__scope--public { display: flex; }
.share__link { display: flex; gap: 8px; }
.share__link input { flex: 1; min-width: 0; border: 1px solid #24143033; border-radius: 8px; padding: 8px 10px; font: 13px monospace; color: #24143099; background: #ffffff; }
.share__copy { background: var(--accent); color: #241430; border: none; border-radius: 8px; padding: 8px 14px; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.share__copy:hover { opacity: .85; }
.share__copy:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style><section aria-label="Share control" class="share-tw font-sans text-[#241430] bg-[#FAF7F2] border border-[#24143026] rounded-xl p-4 max-w-[420px] box-border" data-scope="team" style="--accent:#D9C8F0">
<h3 class="m-0 mb-2 text-[15px]">Share document</h3>
<p class="share-tw__scope share-tw__scope--private items-center gap-2 mb-3 text-[13px] font-semibold" style="color:var(--accent)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg> Only you can access this</p>
<p class="share-tw__scope share-tw__scope--team items-center gap-2 mb-3 text-[13px] font-semibold" style="color:var(--accent)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><path d="M15 15c2.5 0 5 1.5 5 4.5"/></svg> Shared with 3 people on your team</p>
<p class="share-tw__scope share-tw__scope--public items-center gap-2 mb-3 text-[13px] font-semibold" style="color:var(--accent)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"/></svg> Anyone with the link can view</p>
<div class="flex gap-2">
<input type="text" readonly value="https://app.example.com/s/9f2k1" aria-label="Shareable link" class="flex-1 min-w-0 border border-[#24143033] rounded-lg px-2.5 py-2 font-mono text-[13px] text-[#24143099] bg-white">
<button type="button" class="text-[#241430] border-0 rounded-lg px-3.5 py-2 text-[13px] font-semibold cursor-pointer" style="background:var(--accent)">Copy link</button>
</div>
</section>
<style>
.share-tw__scope { display: none; }
[data-scope="private"] .share-tw__scope--private, [data-scope="team"] .share-tw__scope--team, [data-scope="public"] .share-tw__scope--public { display: flex; }
</style>export function ShareControl({
label = "Share document",
scope = "team",
linkEnabled = true,
recipientCount = 3,
accent = "#D9C8F0",
}) {
const copy = {
private: "Only you can access this",
team: `Shared with ${recipientCount} people on your team`,
public: "Anyone with the link can view",
}[scope];
return (
<section aria-label="Share control" style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2",
border: "1px solid #24143026", borderRadius: 12, padding: 16, maxWidth: 420, boxSizing: "border-box" }}>
<h3 style={{ margin: "0 0 8px", fontSize: 15 }}>{label}</h3>
<p style={{ display: "flex", alignItems: "center", gap: 8, margin: "0 0 12px", color: accent, fontWeight: 600, fontSize: 13 }}>{copy}</p>
{linkEnabled && (
<div style={{ display: "flex", gap: 8 }}>
<input type="text" readOnly value="https://app.example.com/s/9f2k1" aria-label="Shareable link"
style={{ flex: 1, minWidth: 0, border: "1px solid #24143033", borderRadius: 8, padding: "8px 10px", fontFamily: "monospace", fontSize: 13, color: "#24143099", background: "#fff" }} />
<button type="button" style={{ background: accent, color: "#241430", border: "none", borderRadius: 8, padding: "8px 14px", fontSize: 13, fontWeight: 600, cursor: "pointer" }}>Copy link</button>
</div>
)}
</section>
);
}