Design System Foundation

Compound components allow flexible composition without prop explosion:

// Rather than a single Dialog with 12 props:
<Dialog
  title="Confirm"
  description="Are you sure?"
  primaryLabel="Delete"
  secondaryLabel="Cancel"
  onPrimary={handleDelete}
  onSecondary={handleCancel}
  // ... 6 more props
/>

// Compound components let callers own the structure:
<Dialog>
  <Dialog.Trigger asChild>
    <Button variant="destructive">Delete</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Confirm deletion</Dialog.Title>
    <Dialog.Description>This cannot be undone.</Dialog.Description>
    <Dialog.Footer>
      <Dialog.Close asChild><Button variant="ghost">Cancel</Button></Dialog.Close>
      <Button variant="destructive" onClick={handleDelete}>Delete</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>