Sheet

1// Base UI base sheet — TRANSCRIBED from upstream's `bases/base-ui/ui/sheet.tsx`
2// (maintainer-supplied), class strings verbatim. Runs on @octanejs/base-ui's Dialog:
3// Overlay -> Backdrop, Content -> Popup.
4//
5// UPSTREAM ANIMATES THIS WITH CSS TRANSITIONS, NOT KEYFRAMES, which is why the file is transcribed
6// rather than derived. Base UI publishes `data-starting-style` and `data-ending-style` (see
7// utils/popupStateMapping.ts) and this source drives motion off them with a plain `transition`,
8// where the radix base uses `animate-in` / `animate-out` keyframe utilities.
9//
10// A derived version of this file did jump visibly on close, which is what prompted the
11// transcription. Do NOT infer from that a general rule that keyframes cannot work on Base UI: the
12// same mapping also emits `data-open` and `data-closed`, so `data-closed:animate-out` does match,
13// and the precise cause of that jump was never isolated. What is established here is only what
14// upstream ships, which is this.
15//
16// So the motion here reads: `transition duration-200` plus per-side
17// `data-starting-style:translate-*` / `data-ending-style:translate-*` and an opacity pair —
18// the element sits offset-and-transparent before open and after close, and transitions to its
19// resting position in between.
20//
21// ONE DEPARTURE FROM THE SOURCE: upstream's title carries `cn-font-heading`, a semantic hook from
22// the pinned cn-* system. This package ships the utilities-inlined flavor, the react-aria base
23// drops the same class, and nothing defines it here (0 occurrences in the built CSS).
24//
25// Octane adaptations: no `"use client"`; refs are props.
26import { type OctaneNode } from 'octane';
27import { Dialog as SheetPrimitive } from '@octanejs/base-ui/dialog';
28import { XIcon } from '@octanejs/lucide';
29 
30import { cn } from '@/lib/utils';
31import { Button } from '@/components/ui/button';
32 
33type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
34 
35export function Sheet(props: Record<string, unknown>) @{
36	<SheetPrimitive.Root data-slot="sheet" {...props} />
37}
38 
39export function SheetTrigger(props: Record<string, unknown>) @{
40	<SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
41}
42 
43export function SheetClose(props: Record<string, unknown>) @{
44	<SheetPrimitive.Close data-slot="sheet-close" {...props} />
45}
46 
47export function SheetPortal(props: Record<string, unknown>) @{
48	<SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
49}
50 
51// … truncated