Modal

{
    const variants: Array<{
      size: ModalSize;
      label: string;
      body: string;
      dim: string;
    }> = [
      {
        size: 'xs',
        label: 'Small (Figma 2635:18312)',
        body: 'Compact confirmation modal. Height hugs the content, capped at 280px.',
        dim: '352 × ≤ 280',
      },
      {
        size: 'm',
        label: 'Medium (Figma 2637:23407)',
        body: 'Mid-size form modal — 900 × 600 fixed. Use for focused single-purpose flows (edit profile, invite teammates, confirm checkout).',
        dim: '900 × 600',
      },
      {
        size: 'l',
        label: 'Large (Figma 10078:2309)',
        body: 'Full-surface modal — 1344 × 928 fixed. Use for data-dense workflows: detail pages, record editing, complex forms.',
        dim: '1344 × 928',
      },
    ];
    return (
      <div style={col}>
        <div style={row}>
          {variants.map(({ size, label, body, dim }) => (
            <div key={size} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
              <span style={caption}>
                <span style={captionStrong}>{label}</span>
                {dim}
              </span>
              <Modal
                size={size}
                title="Modal Title"
                required
                trigger={<ButtonHug>{`Open ${size}`}</ButtonHug>}
                actions={<FooterActions />}
              >
                {body}
              </Modal>
            </div>
          ))}
        </div>
      </div>
    );
  }

{
    const sizes: Array<{ size: ModalSize; note: string }> = [
      { size: 'xs', note: '352 × ≤ 280  (Figma Small)' },
      { size: 's', note: '560 × auto   (interpolated)' },
      { size: 'm', note: '900 × 600    (Figma Medium)' },
      { size: 'l', note: '1344 × 928   (Figma Large)' },
      { size: 'mobile', note: '100vw - space-4 × auto' },
    ];
    return (
      <div style={col}>
        <div style={row}>
          {sizes.map(({ size, note }) => (
            <div key={size} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
              <span style={caption}>
                <span style={captionStrong}>size="{size}"</span>
                {note}
              </span>
              <Modal
                size={size}
                title={`size="${size}"`}
                trigger={<ButtonHug size={size === 'mobile' ? 'm' : size}>{`Open ${size}`}</ButtonHug>}
                actions={<FooterActions />}
              >
                The same three-button trio works at every size. Long-form content
                scrolls inside the body — try resizing the viewport, pressing Escape,
                or clicking the close icon.
              </Modal>
            </div>
          ))}
        </div>
      </div>
    );
  }

<Modal
      size="m"
      title="Edit profile"
      required
      trigger={<ButtonHug>Open with required helper</ButtonHug>}
      actions={<FooterActions />}
    >
      Required fields are marked with an asterisk. The modal&apos;s own
      &quot;*Required&quot; helper is a visual cue; screen readers ignore it
      and rely on field-level required attributes instead.
    </Modal>

{
    function Demo() {
      const [open, setOpen] = useState(false);
      const [dismissedVia, setDismissedVia] = useState<string | null>(null);
      return (
        <div style={col}>
          <ButtonHug
            onClick={() => {
              setDismissedVia(null);
              setOpen(true);
            }}
          >
            Open controlled modal
          </ButtonHug>
          {dismissedVia ? (
            <span style={caption}>
              <span style={captionStrong}>Last dismissed via:</span>
              {dismissedVia}
            </span>
          ) : null}
          <Modal
            open={open}
            onOpenChange={(next) => {
              setOpen(next);
              if (!next) setDismissedVia('onOpenChange(false)');
            }}
            size="m"
            title="Confirm deletion"
            actions={
              <>
                <ButtonHug tier="tertiary" onClick={() => setOpen(false)}>
                  Cancel
                </ButtonHug>
                <ButtonHug
                  tier="primary"
                  onClick={() => {
                    setDismissedVia('Delete action');
                    setOpen(false);
                  }}
                >
                  Delete
                </ButtonHug>
              </>
            }
          >
            This action permanently removes the record and cannot be undone.
            Open this from code by flipping a boolean — bind `open` +
            `onOpenChange` and the component handles focus trap, escape-to-close,
            and outside-click for you.
          </Modal>
        </div>
      );
    }
    return <Demo />;
  }

{
    function Demo() {
      const [canView, setCanView] = useState(true);
      return (
        <div style={col}>
          <label style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={canView}
              onChange={(e) => setCanView(e.target.checked)}
            />
            <span style={caption}>`permissions.can` returns {String(canView)}</span>
          </label>
          <Modal
            size="m"
            title="Billing history"
            permissions={{ can: () => canView, mode: 'hidden' }}
            resource="record:billing-history"
            trigger={<ButtonHug>Open billing</ButtonHug>}
            actions={<FooterActions />}
          >
            When `canView` is false, the modal renders nothing when triggered
            and the primitive emits a `permission:denied` audit event to the
            ambient `AuditProvider`. Toggle the checkbox and reopen to verify.
          </Modal>
        </div>
      );
    }
    return <Demo />;
  }

<Modal
      size="xs"
      title="Backup complete"
      trigger={<ButtonHug>Show notice</ButtonHug>}
    >
      Your data has been backed up to encrypted cold storage. No further action
      is required — you can close this dialog.
    </Modal>