@infinityfx/fluid/dist/components/layout/drawer.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useId as t,useRef as o}from"react";import i from"./overlay.js";import a from"../input/button.js";import{combineClasses as n,classes as c}from"../../core/utils.js";import{Animatable as l}from"@infinityfx/lively";import d from"./scrollarea.js";import{createStyles as s}from"../../core/style.js";import{Icon as m}from"../../core/icons.js";const f=s("drawer",{".drawer":{position:"absolute",background:"var(--f-clr-bg-100)",display:"flex",flexDirection:"column",padding:"var(--f-spacing-med)",width:"min(100vw, 16em)",border:"solid 1px var(--f-clr-fg-200)",height:"100dvh",top:0,touchAction:"none"},'.drawer[data-position="right"]':{borderTopLeftRadius:"var(--f-radius-med)",borderBottomLeftRadius:"var(--f-radius-med)",borderRight:"none",right:0},'.drawer[data-position="left"]':{borderTopRightRadius:"var(--f-radius-med)",borderBottomRightRadius:"var(--f-radius-med)",borderLeft:"none",left:0},".header":{display:"flex",gap:"var(--f-spacing-sml)",alignItems:"center",marginBottom:"var(--f-spacing-med)",color:"var(--f-clr-text-100)",fontWeight:700},".title":{flexGrow:1,color:"var(--f-clr-heading-100)"},'.drawer[data-position="right"] .title':{order:1},".content":{flexGrow:1,display:"flex",flexDirection:"column"}});function h({children:s,cc:h={},show:u,onClose:p,position:g="right",title:v,...b}){const w=n(f,h),x=t(),y=o({clientX:0,clientY:0});function j(r){if("touchstart"==r.type)return y.current=r.changedTouches[0];const e=r.changedTouches[0].clientX-y.current.clientX,t=Math.abs(r.changedTouches[0].clientY-y.current.clientY);("right"===g?e>85:e<-85)&&.6*Math.abs(e)>t&&p()}return r(i,{show:u,onClose:p,children:r(l,{id:"drawer",animate:{translate:[("right"===g?100:-100)+"% 0%","0% 0%"],duration:.25},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:e("div",{...b,role:"dialog","aria-modal":!0,"aria-labelledby":x,className:c(w.drawer,b.className),"data-position":g,onTouchStart:j,onTouchMove:j,children:[e("div",{className:w.header,children:[r("span",{id:x,className:w.title,children:v}),r(a,{compact:!0,variant:"minimal",onClick:p,children:r(m,{type:"close"})})]}),r(d,{className:w.content,children:s})]})})})}export{h as default};
//# sourceMappingURL=drawer.js.map