Edit Share Control

Name

Also known as (comma separated)

Brief definition Shares an object/content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Object label", "default": "Share document" }, { "id": "scope", "type": "select", "label": "Sharing scope", "default": "team", "options": [ "private", "team", "public" ] }, { "id": "linkEnabled", "type": "toggle", "label": "Show shareable link", "default": true }, { "id": "recipientCount", "type": "number", "label": "Shared with (people)", "default": 3, "min": 0, "max": 50, "step": 1 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<section class=\"share\" data-scope=\"{{scope}}\" style=\"--accent:{{accent}};\" aria-label=\"Share control\">\n <h3 class=\"share__title\">{{label}}</h3>\n <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>\n <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 {{recipientCount}} people on your team</p>\n <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>\n {{#if linkEnabled}}\n <div class=\"share__link\">\n <input type=\"text\" readonly value=\"https://app.example.com/s/9f2k1\" aria-label=\"Shareable link\">\n <button type=\"button\" class=\"share__copy\">Copy link</button>\n </div>\n {{/if}}\n</section>\n<style>\n.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; }\n.share__title { margin: 0 0 8px; font-size: 15px; }\n.share__scope { display: none; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--accent); font-weight: 600; font-size: 13px; }\n[data-scope=\"private\"] .share__scope--private, [data-scope=\"team\"] .share__scope--team, [data-scope=\"public\"] .share__scope--public { display: flex; }\n.share__link { display: flex; gap: 8px; }\n.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; }\n.share__copy { background: var(--accent); color: #241430; border: none; border-radius: 8px; padding: 8px 14px; font: 600 13px system-ui, sans-serif; cursor: pointer; }\n.share__copy:hover { opacity: .85; }\n.share__copy:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>", "tailwind": "<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=\"{{scope}}\" style=\"--accent:{{accent}}\">\n <h3 class=\"m-0 mb-2 text-[15px]\">{{label}}</h3>\n <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>\n <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 {{recipientCount}} people on your team</p>\n <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>\n {{#if linkEnabled}}\n <div class=\"flex gap-2\">\n <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\">\n <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>\n </div>\n {{/if}}\n</section>\n<style>\n.share-tw__scope { display: none; }\n[data-scope=\"private\"] .share-tw__scope--private, [data-scope=\"team\"] .share-tw__scope--team, [data-scope=\"public\"] .share-tw__scope--public { display: flex; }\n</style>", "react": "export function ShareControl({\n label = \"{{label}}\",\n scope = \"{{scope}}\",\n linkEnabled = {{linkEnabled}},\n recipientCount = {{recipientCount}},\n accent = \"{{accent}}\",\n}) {\n const copy = {\n private: \"Only you can access this\",\n team: `Shared with ${recipientCount} people on your team`,\n public: \"Anyone with the link can view\",\n }[scope];\n return (\n <section aria-label=\"Share control\" style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\",\n border: \"1px solid #24143026\", borderRadius: 12, padding: 16, maxWidth: 420, boxSizing: \"border-box\" }}>\n <h3 style={{ margin: \"0 0 8px\", fontSize: 15 }}>{label}</h3>\n <p style={{ display: \"flex\", alignItems: \"center\", gap: 8, margin: \"0 0 12px\", color: accent, fontWeight: 600, fontSize: 13 }}>{copy}</p>\n {linkEnabled && (\n <div style={{ display: \"flex\", gap: 8 }}>\n <input type=\"text\" readOnly value=\"https://app.example.com/s/9f2k1\" aria-label=\"Shareable link\"\n style={{ flex: 1, minWidth: 0, border: \"1px solid #24143033\", borderRadius: 8, padding: \"8px 10px\", fontFamily: \"monospace\", fontSize: 13, color: \"#24143099\", background: \"#fff\" }} />\n <button type=\"button\" style={{ background: accent, color: \"#241430\", border: \"none\", borderRadius: 8, padding: \"8px 14px\", fontSize: 13, fontWeight: 600, cursor: \"pointer\" }}>Copy link</button>\n </div>\n )}\n </section>\n );\n}" }