Unstyled, accessible, and performant drawer for React.

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

export function ExampleDrawer() {
  return (
    <Drawer.Root shouldScaleBackground>
      <Drawer.Trigger className="px-4 py-2 bg-black text-white rounded-md font-medium">
        Open 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 max-h-[90vh]">
          <Drawer.Handle className="w-12 h-1.5 bg-gray-300 rounded-full mx-auto mb-6" />
          <Drawer.Title className="text-lg font-bold">
            Temper Drawer
          </Drawer.Title>
          <Drawer.Description className="text-gray-600 mb-6">
            An unstyled, accessible drawer primitive powered by Radix UI.
          </Drawer.Description>
          <Drawer.Close className="px-4 py-2 bg-gray-100 rounded-md">
            Close
          </Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}