Share Dialog

Install

pnpm exec vegastack-design verify share-dialog

pnpm dlx shadcn@4.21.0 add @vegastack/share-dialog

Usage

import { ShareDialog } from "@/components/ui/share-dialog";

<ShareDialog
  trigger={<Button variant="outline">Share</Button>}
  levels={LEVELS}
  people={entries}
  search={searchDirectory}
  onInvite={invite}
  onLevelChange={setLevel}
  onRemove={removeAccess}
  generalAccess={general}
  onGeneralAccessChange={setGeneral}
  publicLink={publicLink}
  onCreatePublicLink={publish}
  onStopPublicLink={unpublish}
  linkUrl={itemUrl}
/>;

ShareDialog is data-agnostic: every row, level and link comes in through props and every change goes out through a callback, so one dialog serves tasks, meetings and pages. It is a ResponsiveDialog — a md (512px) Dialog from 768px up and a bottom sheet below it — titled "Share", with two line tabs. Share opens with the "Who can see this" summary (when the host passes audience), then the invite row and People with access — a MemberList: PeoplePicker with one PermissionMenu level for the batch, then a 36px row per person or team with its level chip and Remove access in the row's ⋯ menu — then Space access, with Copy link for the item's own link in the footer. Publish holds a "Publish to the web" switch, off by default — the only control that calls onCreatePublicLink; copying never publishes. Both panels share one grid cell, so switching tabs never resizes the dialog. Every string is in labels.

The share-01 block is this dialog wired to sample state, with a page to try it on.

Scope

Examples

Permissions

canManage gates inviting, changing levels and space access. canPublish gates the Publish tab's controls — the switch, Reset, Expires and Stop publishing — and follows canManage when unset. A viewer who cannot publish sees the public link to copy while it is on, and "Not published" otherwise.

Reset and Stop publishing both ask first, since either stops the live link at once. Pass publicLink.expiresAt (the instant it lapses) and the Publish tab says when — "Until Oct 22 · 2:30 PM" under Expires — instead of only the preset that was chosen.

Space access's mode is a quiet pill — no border, a tint and a ▾ on hover, like a RecordChip's ghost form. Leave generalAccess.level out when a space's members open the item with their own role there: no level shows beside the mode. While everyone in a named space can open the item, the footer says so ("Members of Sales and people with access can open it", copyLinkHintSpace).

Hints

hints places a help node — usually an InfoHint — right after the People with access heading (people), the Space access heading (general) and the Publish switch's label (publish). The switch keeps its accessible name from the label alone.

What the link exposes, and who can see it

publishExposure replaces the Publish switch's one-line hint with the host's own sentence about what the link exposes — "Anyone with the link can view this page and 12 pages inside, without signing in." — and wraps rather than truncates. onPublishRequest is asked before the switch turns publishing on: confirm what it will expose in an AlertDialog ("Publish 13 pages?") and resolve false to leave it off. audience adds the "Who can see this" summary at the top of the Share tab, closed at first; its heading takes audienceCount once known, and onAudienceOpenChange tells the host when to load its rows. publicLinkOptions adds the host's own settings for a published link as rows of the Publish tab's settings grid under Expires — each a label then its control, two children in a fragment, so they line up — what the link shows, say ("Link shows: Latest version | Approved version"), for a viewer who can publish. While published, the Publish tab's footer says what stays private and holds Stop publishing, in the same box as the Share tab's footer, so switching tabs never resizes the dialog.

API Reference

Accessibility

• The dialog is named by its "Share" title; the tabs are a tablist and only the active panel is in the tab order.
• Every level menu is named for its row ("Anand Iyer's access: Can view"), and so is every ⋯ menu ("More for Anand Iyer"); a built-in row is locked, still a tab stop, with its reason in a tooltip, and has no ⋯ menu.
• Turning publishing off, by the switch or Stop publishing, asks for confirmation in an AlertDialog first; turning it on asks onPublishRequest when the host passes one.
• "Who can see this" is a disclosure button (aria-expanded) whose name carries the head count.

Do / Don't