sate-lib/lib/components/drawer/drawer.js

A lightweight and modular React component library designed for modern web interfaces. **SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.

"use client";
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{Portal as a}from"@radix-ui/react-portal";import{Activity as o}from"react";import{RemoveScroll as i}from"react-remove-scroll";import{ButtonIcon as t}from"../button-icon/button-icon.js";import{Typography as l}from"../typography/typography.js";import s from"./drawer.styles.module.js";import{useDrawer as d}from"./useDrawer.js";let m=({open:m,onOpen:n,title:c,className:p,nested:h,children:f})=>{let{state:v,onClose:u,present:y}=d({onOpenChange:n,open:m}),j=[s.root,p].filter(Boolean).join(" ");return r(o,{mode:y?"visible":"hidden",children:e(a,{children:[r("div",{"aria-hidden":!0,className:`${s.overlay} ${h?s.nested:""}`,"data-state":v,onClick:u}),r(i,{forwardProps:!0,children:e("div",{"aria-label":c,"aria-modal":"true",className:j,"data-state":v,role:"dialog",children:[e("div",{className:s.header,children:[r("div",{className:s.close,children:r(t,{icon:"X2",onClick:u,size:"small",variant:"toned"})}),r(l,{as:"h2",className:s.title,variant:"bodyLargeEmphasis",children:c})]}),r("div",{className:s.panel,children:f})]})})]})})};export{m as Drawer};