Sheet

import {SheetTrigger} from 'react-aria-components/Sheet';
import {Sheet, Heading} from './Sheet';
import {Button} from './Button';
import {Home, Compass, Library, Settings, LogOut} from 'lucide-react';

function Example() {
  let items = [
    {label: 'Home', icon: <Home size={20} />},
    {label: 'Explore', icon: <Compass size={20} />},
    {label: 'Library', icon: <Library size={20} />},
    {label: 'Settings', icon: <Settings size={20} />}
  ];
  return (
    <SheetTrigger>
      <Button variant="secondary">Open menu</Button>
      <Sheet position="start">
        <div style={{display: 'flex', flexDirection: 'column', height: '100%', alignItems: 'start'}}>
          <Heading slot="title" style={{padding: '0 var(--spacing-3)', marginBottom: 16}}>Acme Music</Heading>
          <nav style={{display: 'flex', flexDirection: 'column', gap: 4, flexGrow: 1, width: '100%'}}>
            {items.map(item => (
              <Button key={item.label} slot="close" variant="quiet" style={{justifyContent: 'start', gap: 12}}>
                {item.icon}
                <span>{item.label}</span>
              </Button>
            ))}
          </nav>
          <Button slot="close" variant="secondary" style={{gap: 12, marginTop: 'auto'}}>
            <LogOut size={20} />
            <span>Sign out</span>
          </Button>
        </div>
      </Sheet>
    </SheetTrigger>
  );
}

import {SheetTrigger} from 'react-aria-components/Sheet';
import {Sheet, Heading} from './Sheet';
import {Button} from './Button';
import {Star, MapPin, Clock, Phone} from 'lucide-react';
import {Map} from './Map';

let reviews = [
  {name: 'Maya R.', date: '2 days ago', text: 'The espresso was smooth and the staff was lovely. A great spot for a quiet morning.'},
  {name: 'Jordan K.', date: '1 week ago', text: 'Really good pour-over and plenty of seating. It gets busy around lunch, but the line moves quickly.'},
  {name: 'Avery L.', date: '2 weeks ago', text: 'The iced coffee was bright and refreshing, and the pastries were excellent. I will definitely be back.'},
  {name: 'Chris T.', date: '1 month ago', text: 'Beautiful space with consistently good coffee. The cappuccino had the perfect amount of foam.'},
  {name: 'Samira P.', date: '1 month ago', text: 'Friendly service, fast Wi-Fi, and a great neighborhood atmosphere. One of my favorite coffee shops in Port Marlow.'}
];

function Example() {
  return (
    <SheetTrigger>
      <Button>Show place</Button>
      <Sheet position="bottom" snapPoints={[280]}>
        <Heading slot="title" style={{marginBottom: 4}}>Harborlight Coffee</Heading>
        <div style={{display: 'flex', alignItems: 'center', gap: 8, color: 'var(--gray-1000)', marginBottom: 32}}>
          <Star size={16} fill="currentColor" style={{color: '#ff9500'}} />
          <strong>4.6</strong> · Coffee shop · $$
        </div>
        <div style={{display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'start'}}>
          <div style={{display: 'flex', gap: 12, alignItems: 'center'}}><MapPin size={18} /> 300 Harbor St, Port Marlow</div>
          <div style={{display: 'flex', gap: 12, alignItems: 'center'}}><Clock size={18} /> Open until 6:00 PM</div>
          <div style={{display: 'flex', gap: 12, alignItems: 'center'}}><Phone size={18} /> (510) 555-0142</div>
          <p>Drag this sheet up to see more, or swipe down to dismiss. Snap points let you preview the most relevant content first, then expand for the full story.</p>
          <Map />
          <Button slot="close">Get directions</Button>
          <h3 style={{margin: '8px 0 0'}}>Reviews</h3>
          <div style={{display: 'flex', flexDirection: 'column', gap: 16, width: '100%'}}>
            {reviews.map(review => (
              <div key={review.name} style={{padding: 16, border: '1px solid var(--gray-300)', borderRadius: 12}}>
                <div style={{display: 'flex', justifyContent: 'space-between', gap: 8, marginBottom: 8}}>
                  <strong>{review.name}</strong>
                  <span style={{color: 'var(--gray-700)', fontSize: 14}}>{review.date}</span>
                </div>
                <div style={{display: 'flex', gap: 2, color: '#ff9500', marginBottom: 8}}>
                  {Array.from({length: 5}, (_, i) => <Star key={i} size={14} fill="currentColor" />)}
                </div>
                <div>{review.text}</div>
              </div>
            ))}
          </div>
        </div>
      </Sheet>
    </SheetTrigger>
  );
}

import {SheetTrigger} from 'react-aria-components/Sheet';
import {Sheet, Heading} from './Sheet';
import {Button} from './Button';

function Example() {
  return (
    <SheetTrigger>
      <Button>Settings</Button>
      {/* By default, Sheet.tsx applies a fade transition to the backdrop.
          This example adds a custom transform animation to the sheet. */}
      <style>{`
      @keyframes sheet-transform {
        from {
          transform-origin: top right;
          transform: skew(10deg) scale(0.8);
        }

        to {
          transform: skew(0deg) scale(1);
        }
      }`}</style>
      <Sheet swipeAnimation="sheet-transform">
        <Heading slot="title">Sheet</Heading>
        <p style={{marginTop: 0}}>This sheet has a custom swipe animation.</p>
        <div style={{height: 300, width: '100%', background: 'var(--gray-200)', borderRadius: 16, marginBottom: 16}} />
        <Button slot="close">Close</Button>
      </Sheet>
    </SheetTrigger>
  );
}

import {SheetTrigger} from 'react-aria-components/Sheet';
import {Sheet, Heading} from './Sheet';
import {Button} from './Button';
import {Form} from './Form';
import {TextField} from './TextField';
import {RadioGroup, Radio} from './RadioGroup';
import {CheckboxGroup} from './CheckboxGroup';
import {Checkbox} from './Checkbox';
import {ChevronRight} from 'lucide-react';

function Example() {
  return (
    <SheetTrigger>
      <Button>Settings</Button>
      <Sheet style={{height: 550}}>
        <Heading slot="title">Settings</Heading>
        <p style={{marginTop: 0, marginBottom: 32}}>Manage your account and preferences.</p>
        <Form>
          <TextField label="Homepage" defaultValue="react-aria.adobe.com" />
          <RadioGroup label="Theme" defaultValue="auto">
            <Radio value="auto">Auto</Radio>
            <Radio value="light">Light</Radio>
            <Radio value="dark">Dark</Radio>
          </RadioGroup>
          <SheetTrigger>
            <Button variant="secondary">
              <span>Account</span>
              <ChevronRight size={18} />
            </Button>
            <Sheet style={{height: 550}}>
              <Heading slot="title">Account</Heading>
              <p style={{marginTop: 0, marginBottom: 32}}>Swipe this sheet away to return to Settings.</p>
              <Form>
                <TextField label="Name" defaultValue="Devon Govett" />
                <TextField label="Username" defaultValue="@devongovett" />
                <TextField label="Email" defaultValue="devon@example.com" />
                <div style={{display: 'flex', justifyContent: 'space-between'}}>
                  <Button slot="close">Save</Button>
                  <SheetTrigger>
                    <Button variant="secondary">
                      <span>Advanced</span>
                      <ChevronRight size={18} />
                    </Button>
                    <Sheet style={{height: 550}}>
                      <Heading slot="title">Advanced</Heading>
                      <p style={{marginTop: 0, marginBottom: 32}}>Swipe this sheet away to return to Account.</p>
                      <Form>
                        <CheckboxGroup label="Notification settings" defaultValue={['account', 'dms']}>
                          <Checkbox value="account">Account activity</Checkbox>
                          <Checkbox value="mentions">Mentions</Checkbox>
                          <Checkbox value="dms">Direct message</Checkbox>
                          <Checkbox value="marketing">Marketing emails</Checkbox>
                        </CheckboxGroup>
                        <Button slot="close">Save</Button>
                      </Form>
                    </Sheet>
                  </SheetTrigger>
                </div>
              </Form>
            </Sheet>
          </SheetTrigger>
        </Form>
      </Sheet>
    </SheetTrigger>
  );
}