Nested Drawers

Temper natively supports nesting drawers inside each other with stacked visual scaling displacement.

---

Using Drawer.NestedRoot

Inside a parent drawer's <Drawer.Content>, use <Drawer.NestedRoot> instead of <Drawer.Root> for sub-drawers:

import { Drawer } from '@ughur/temper';

export function NestedDrawerExample() {
  return (
    <Drawer.Root>
      <Drawer.Trigger className="btn-primary">Open Parent Drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white p-6 rounded-t-2xl">
          <Drawer.Title>Parent Drawer</Drawer.Title>
          <Drawer.Description>Main menu or step 1</Drawer.Description>

          {/* Nested Drawer */}
          <Drawer.NestedRoot>
            <Drawer.Trigger className="btn-secondary mt-4">
              Open Nested Drawer
            </Drawer.Trigger>
            <Drawer.Portal>
              <Drawer.Overlay className="fixed inset-0 bg-black/40" />
              <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-gray-50 p-6 rounded-t-2xl">
                <Drawer.Title>Child Nested Drawer</Drawer.Title>
                <Drawer.Description>Detail screen or confirmation step</Drawer.Description>
                <Drawer.Close className="btn mt-4">Back</Drawer.Close>
              </Drawer.Content>
            </Drawer.Portal>
          </Drawer.NestedRoot>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

---

How Stacked Scaling Works

When a nested drawer opens:

1. The parent drawer recedes slightly (scale(0.96)) and shifts downward.
2. The nested drawer pops up above the parent.
3. Closing the child drawer seamlessly restores the parent drawer to full scale.