Side sheets

import { useState } from 'react';
import { Button, Checkbox, SideSheet } from '@kyralabs/m3exp-web/react';

export default function Modal() {
  const [open, setOpen] = useState(false);
  const close = () => {
    setOpen(false);
  };
  return (
    <>
      <Button
        variant="tonal"
        onPress={() => {
          setOpen(true);
        }}
      >
        Filters
      </Button>
      <SideSheet
        variant="modal"
        isOpen={open}
        onOpenChange={setOpen}
        headline="Filters"
        divider
        actions={
          <>
            <Button variant="filled" onPress={close}>
              Apply
            </Button>
            <Button variant="outlined" onPress={close}>
              Cancel
            </Button>
          </>
        }
      >
        <Checkbox defaultSelected>Free shipping</Checkbox>
        <Checkbox>In stock</Checkbox>
      </SideSheet>
    </>
  );
}

<button type="button" class="m3e-button m3e-button--tonal" id="open-filters">Filters</button>
<m3e-side-sheet id="filters" variant="modal" headline="Filters" divider>
  <m3e-checkbox checked>Free shipping</m3e-checkbox>
  <m3e-checkbox>In stock</m3e-checkbox>
  <button type="button" class="m3e-button m3e-button--filled" slot="actions">Apply</button>
  <button type="button" class="m3e-button m3e-button--outlined" slot="actions">Cancel</button>
</m3e-side-sheet>

<script type="module">
  const sheet = document.getElementById('filters');
  document.getElementById('open-filters').addEventListener('click', () => sheet.show());
  sheet
    .querySelectorAll('[slot="actions"]')
    .forEach((b) => b.addEventListener('click', () => sheet.close()));
</script>

import { useState } from 'react';
import { Button, SideSheet } from '@kyralabs/m3exp-web/react';

export default function Standard() {
  const [open, setOpen] = useState(true);
  return (
    <div
      style={{
        display: 'flex',
        inlineSize: '100%',
        blockSize: 'var(--m3e-sys-window-height-medium)',
      }}
    >
      <div style={{ flex: '1', minInlineSize: '0', padding: 'var(--m3e-sys-space-200)' }}>
        <Button
          variant="outlined"
          onPress={() => {
            setOpen((o) => !o);
          }}
        >
          {open ? 'Close details' : 'Show details'}
        </Button>
      </div>
      <SideSheet isOpen={open} onOpenChange={setOpen} headline="Details" divider>
        <p>The content beside a standard sheet narrows while it is open.</p>
      </SideSheet>
    </div>
  );
}

<div style="display: flex; inline-size: 100%; block-size: var(--m3e-sys-window-height-medium)">
  <div style="flex: 1; min-inline-size: 0; padding: var(--m3e-sys-space-200)">
    <button type="button" class="m3e-button m3e-button--outlined" id="toggle-details">
      Toggle details
    </button>
  </div>
  <m3e-side-sheet id="details" headline="Details" divider open>
    <p>The content beside a standard sheet narrows while it is open.</p>
  </m3e-side-sheet>
</div>

<script type="module">
  const sheet = document.getElementById('details');
  document.getElementById('toggle-details').addEventListener('click', () => sheet.toggle());
</script>