feat(sheet): improve customizability with size prop, actions slot, and layout fixes

[IzumiSy]

Summary

Enhance the Sheet component to address several customizability and layout issues.

Changes

API

• action prop on Sheet.Header — allows placing action buttons (save, edit, etc.) to the right of the title area

UI

• size prop on Sheet.Content — supports sm (384px), md (512px), lg (720px), xl (960px), and full (100%) width variations for left/right side sheets
• Sheet.Title font size — increased to text-lg for better visibility and hierarchy
• Directional close icons — the close button now renders a directional chevron (ChevronsRight/Left/Up/Down) matching the sheet's slide direction instead of a generic X icon
• Close button hover style — added bg-accent hover background matching the sidebar trigger style, replacing the previous opacity-based hover

Screen shots

Default

Sheet with action prop

Example

<Sheet.Root side="right">
  <Sheet.Trigger render={<Button />}>Open</Sheet.Trigger>
  <Sheet.Content size="lg">
    <Sheet.Header action={<Button size="sm">Save</Button>}>
      <Sheet.Title>Edit Record</Sheet.Title>
      <Sheet.Description>Update details.</Sheet.Description>
    </Sheet.Header>
    <div style={{ padding: "1rem" }}>{/* content */}</div>
  </Sheet.Content>
</Sheet.Root>

[IzumiSy]

/review

[github-actions]

Generated by API Design Review for issue #302

[erickteowarang]

I don't necessarily have an issue with this change, but I do think we're adding action buttons everywhere haha, I'm a bit worried AI will get confused on which action goes where (and humans too)

[IzumiSy]

Fair point, though I don't think this will be a big concern in practice. Providing a dedicated actions slot is a pretty common pattern — Ant Design does it with extra/footer props on Drawer/Modal, MUI has <DialogActions>, Chakra has <Drawer.Footer>. Having the slot explicitly in the API actually makes it less-context for consumers since they don't need to think about where or how to place actions within the component's layout.

[erickteowarang]

Yeah I don't think it's too much of a concern, maybe we just need to clarify in the skill what action belongs in which component? Depends how opinionated we want to be.

The change itself looks fine though :)