Drawer

import {  Button,  Drawer,  DrawerBody,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function DrawerDemo() {  return (    <Drawer>      <DrawerTrigger render={<Button />}>Open bottom drawer</DrawerTrigger>      <DrawerContent>        <DrawerHeader>          <DrawerTitle>Notifications</DrawerTitle>          <DrawerDescription>You are all caught up. Good job!</DrawerDescription>        </DrawerHeader>        <DrawerBody>Bottom drawers are the default.</DrawerBody>        <DrawerFooter>          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  );}

import {  Button,  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function TopDrawerDemo() {  return (    <Drawer swipeDirection="up">      <DrawerTrigger render={<Button />}>Open top drawer</DrawerTrigger>      <DrawerContent>        <DrawerHeader>          <DrawerTitle>Top panel</DrawerTitle>          <DrawerDescription>Set swipeDirection to up for a top drawer.</DrawerDescription>        </DrawerHeader>        <DrawerFooter>          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  );}

import {  Button,  Drawer,  DrawerBody,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function LeftDrawerDemo() {  return (    <Drawer swipeDirection="left">      <DrawerTrigger render={<Button />}>Open left drawer</DrawerTrigger>      <DrawerContent className={styles.sideContent}>        <DrawerHeader>          <DrawerTitle>Filters</DrawerTitle>          <DrawerDescription>Side drawers use the same composition.</DrawerDescription>        </DrawerHeader>        <DrawerBody>Use side drawers for filters, navigation, or contextual panels.</DrawerBody>        <DrawerFooter>          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  );}

.sideContent {  --drawer-side-width: 26rem;}

import {  Button,  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function RightDrawerDemo() {  return (    <Drawer swipeDirection="right">      <DrawerTrigger render={<Button />}>Open right drawer</DrawerTrigger>      <DrawerContent className={styles.sideContent}>        <DrawerHeader>          <DrawerTitle>Details</DrawerTitle>          <DrawerDescription>Set width through CSS variables or className.</DrawerDescription>        </DrawerHeader>        <DrawerFooter>          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  );}

.sideContent {  --drawer-side-width: 26rem;}

import {  Button,  Drawer,  DrawerBody,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  ScrollArea,  DrawerTrigger,} from "moduix";import { useState } from "react";const releaseSections = [  {    title: "Migration",    body: "Verify migration scripts, rollback steps, and staging smoke tests.",  },  {    title: "Monitoring",    body: "Check dashboards, alerts, and post-release health checks.",  },  {    title: "Rollout",    body: "Confirm feature flags, analytics events, and support notes.",  },];export function SnapPointsDrawerDemo() {  const snapPoints = [0.35, 0.65, 1];  const [snapPoint, setSnapPoint] = useState(snapPoints[1] as number | string | null);  return (    <Drawer snapPoints={snapPoints} snapPoint={snapPoint} onSnapPointChange={setSnapPoint}>      <DrawerTrigger render={<Button />}>Open snap drawer</DrawerTrigger>      <DrawerContent snapLayout>        <DrawerHeader>          <DrawerTitle>Release checklist</DrawerTitle>          <DrawerDescription>Current snap point: {String(snapPoint)}</DrawerDescription>        </DrawerHeader>        <DrawerBody>          <ScrollArea            className={styles.scrollArea}            classNames={{ content: styles.scrollContent }}          >            {releaseSections.map((item) => (              <section key={item.title}>                <h3>{item.title}</h3>                <p>{item.body}</p>              </section>            ))}          </ScrollArea>        </DrawerBody>      </DrawerContent>    </Drawer>  );}

.scrollArea {  height: 100%;  min-height: 0;}.scrollContent {  display: grid;  gap: var(--spacing-4);  padding-right: var(--spacing-5);}

import {  Button,  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function WithoutBackdropDrawerDemo() {  return (    <Drawer>      <DrawerTrigger render={<Button />}>Open without backdrop</DrawerTrigger>      <DrawerContent withBackdrop={false}>        <DrawerHeader>          <DrawerTitle>No backdrop</DrawerTitle>          <DrawerDescription>Use this when the page should stay visually available.</DrawerDescription>        </DrawerHeader>        <DrawerFooter>          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  );}

import {  Button,  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function NestedDrawerDemo() {  return (    <Drawer>      <DrawerTrigger render={<Button />}>Open drawer stack</DrawerTrigger>      <DrawerContent>        <DrawerHeader>          <DrawerTitle>Account</DrawerTitle>          <DrawerDescription>Nested drawers visually recede while the child is active.</DrawerDescription>        </DrawerHeader>        <DrawerFooter>          <div className={styles.nestedActionsStart}>            <Drawer>              <DrawerTrigger render={<Button />}>Open nested</DrawerTrigger>              <DrawerContent>                <DrawerHeader>                  <DrawerTitle>Nested drawer</DrawerTitle>                  <DrawerDescription>Second layer in the stack.</DrawerDescription>                </DrawerHeader>                <DrawerFooter>                  <DrawerClose render={<Button variant="outline" />}>Close nested</DrawerClose>                </DrawerFooter>              </DrawerContent>            </Drawer>          </div>          <DrawerClose render={<Button variant="outline" />}>Close root</DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  );}

.nestedActionsStart {  margin-right: auto;}

import {  Button,  Drawer,  DrawerContent,  DrawerDescription,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function BottomIslandDrawerDemo() {  return (    <Drawer>      <DrawerTrigger render={<Button />}>Open bottom island</DrawerTrigger>      <DrawerContent variant="island" className={styles.islandContent}>        <DrawerHeader>          <DrawerTitle>Bottom island</DrawerTitle>          <DrawerDescription>Island drawers remove the bleed tail.</DrawerDescription>        </DrawerHeader>      </DrawerContent>    </Drawer>  );}

.islandContent {  --drawer-width: 32rem;  --drawer-side-width: 26rem;}

import {  Button,  Drawer,  DrawerContent,  DrawerDescription,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function TopIslandDrawerDemo() {  return (    <Drawer swipeDirection="up">      <DrawerTrigger render={<Button />}>Open top island</DrawerTrigger>      <DrawerContent variant="island" className={styles.islandContent}>        <DrawerHeader>          <DrawerTitle>Top island</DrawerTitle>          <DrawerDescription>The same variant works from the top edge.</DrawerDescription>        </DrawerHeader>      </DrawerContent>    </Drawer>  );}

.islandContent {  --drawer-width: 32rem;  --drawer-side-width: 26rem;}

import {  Button,  Drawer,  DrawerContent,  DrawerDescription,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function LeftIslandDrawerDemo() {  return (    <Drawer swipeDirection="left">      <DrawerTrigger render={<Button />}>Open left island</DrawerTrigger>      <DrawerContent variant="island" className={styles.islandContent}>        <DrawerHeader>          <DrawerTitle>Left island</DrawerTitle>          <DrawerDescription>Side island drawers keep an inset around the viewport.</DrawerDescription>        </DrawerHeader>      </DrawerContent>    </Drawer>  );}

.islandContent {  --drawer-width: 32rem;  --drawer-side-width: 26rem;}

import {  Button,  Drawer,  DrawerContent,  DrawerDescription,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function RightIslandDrawerDemo() {  return (    <Drawer swipeDirection="right">      <DrawerTrigger render={<Button />}>Open right island</DrawerTrigger>      <DrawerContent variant="island" className={styles.islandContent}>        <DrawerHeader>          <DrawerTitle>Right island</DrawerTitle>          <DrawerDescription>Use className to tune important slots for your layout.</DrawerDescription>        </DrawerHeader>      </DrawerContent>    </Drawer>  );}

.islandContent {  --drawer-width: 32rem;  --drawer-side-width: 26rem;}

import {  Button,  Drawer,  DrawerContent,  DrawerHeader,  DrawerTitle,  DrawerSnapToggle,  DrawerDescription,  DrawerBody,  ScrollArea,} from "moduix";import { useState, Fragment } from "react";const releaseSections = [  {    title: "Migration",    body: "Verify migration scripts, rollback steps, and staging smoke tests.",  },  {    title: "Monitoring",    body: "Check dashboards, alerts, and post-release health checks.",  },  {    title: "Rollout",    body: "Confirm feature flags, analytics events, and support notes.",  },];export function PersistentSnapDrawerDemo() {  const snapPoints = [0.35, 0.85] as const;  const [open, setOpen] = useState(false);  const [snapPoint, setSnapPoint] = useState(snapPoints[0] as number | string | null);  const expanded = snapPoint === snapPoints[1];  return (    <Fragment>      <Button type="button" onClick={() => setOpen(true)}>        Open persistent drawer      </Button>      <Drawer        open={open}        persistent        modal={false}        disablePointerDismissal        snapPoints={[...snapPoints]}        defaultSnapPoint={snapPoints[0]}        snapPoint={snapPoint}        onSnapPointChange={setSnapPoint}      >        <DrawerContent snapLayout withBackdrop={false} disableInitialAnimation>          <DrawerHeader>            <DrawerTitle>Persistent drawer</DrawerTitle>            <DrawerSnapToggle              expanded={expanded}              onClick={() => setSnapPoint(expanded ? snapPoints[0] : snapPoints[1])}            />            <DrawerDescription>Switch between compact and expanded states.</DrawerDescription>          </DrawerHeader>          <DrawerBody>            <ScrollArea              className={styles.scrollArea}              classNames={{ content: styles.scrollContent }}            >              {releaseSections.map((item) => (                <section key={item.title}>                  <h3>{item.title}</h3>                  <p>{item.body}</p>                </section>              ))}            </ScrollArea>          </DrawerBody>        </DrawerContent>      </Drawer>    </Fragment>  );}

.scrollArea {  height: 100%;  min-height: 0;}.scrollContent {  display: grid;  gap: var(--spacing-4);  padding-right: var(--spacing-5);}

import {  Button,  Drawer,  DrawerSwipeArea,  DrawerContent,  DrawerDescription,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from "moduix";export function SwipeAreaDrawerDemo() {  return (    <Drawer swipeDirection="right" modal={false}>      <DrawerSwipeArea />      <DrawerTrigger render={<Button />}>Open with trigger</DrawerTrigger>      <DrawerContent withBackdrop={false}>        <DrawerHeader>          <DrawerTitle>Swipe area</DrawerTitle>          <DrawerDescription>Swipe from the left edge or use the trigger.</DrawerDescription>        </DrawerHeader>      </DrawerContent>    </Drawer>  );}

import {  Button,  Drawer,  DrawerContent,  DrawerDescription,  DrawerHeader,  DrawerProvider,  DrawerIndentBackground,  DrawerIndent,  DrawerTitle,  DrawerTrigger,} from "moduix";export function IndentEffectDrawerDemo() {  return (    <DrawerProvider>      <div className={styles.indentStage}>        <DrawerIndentBackground />        <DrawerIndent className={styles.indentSurface}>          <Drawer modal={false}>            <DrawerTrigger render={<Button />}>Open indented drawer</DrawerTrigger>            <DrawerContent>              <DrawerHeader>                <DrawerTitle>Indent effect</DrawerTitle>                <DrawerDescription>                  Provider, indent, and background parts react to open drawers.                </DrawerDescription>              </DrawerHeader>            </DrawerContent>          </Drawer>        </DrawerIndent>      </div>    </DrawerProvider>  );}

.indentStage {  position: relative;  width: min(42rem, 100%);  min-height: 360px;  overflow: hidden;  border: var(--border-width-sm) solid var(--color-border);  border-radius: var(--radius-lg);  background-color: var(--color-muted);}.indentSurface {  min-height: 360px;  padding: var(--spacing-6);  background-color: var(--color-background);}

import {  Drawer,  DrawerTrigger,  Button,  DrawerContent,  DrawerHeader,  DrawerTitle,  DrawerSnapToggle,  DrawerFooter,  DrawerClose,  ChevronDownIcon,  ChevronUpIcon,  DrawerDescription,} from "moduix";import { useState } from "react";export function CustomStylesDrawerDemo() {  const snapPoints = [0.35, 0.75] as const;  const [snapPoint, setSnapPoint] = useState<number | string | null>(snapPoints[0]);  const expanded = snapPoint === snapPoints[1];  return (    <Drawer snapPoints={[...snapPoints]} snapPoint={snapPoint} onSnapPointChange={setSnapPoint}>      <DrawerTrigger render={<Button />}>Open custom drawer</DrawerTrigger>      <DrawerContent        snapLayout        className={styles.customPopup}        classNames={{          backdrop: styles.customBackdrop,          viewport: styles.customViewport,          handle: styles.customHandle,          content: styles.customContent,        }}      >        <DrawerHeader>          <DrawerTitle>Custom styles</DrawerTitle>          <DrawerSnapToggle            expanded={expanded}            onClick={() => setSnapPoint(expanded ? snapPoints[0] : snapPoints[1])}          >            {expanded ? <ChevronDownIcon /> : <ChevronUpIcon />}          </DrawerSnapToggle>          <DrawerDescription>            Popup styles use className. Internal slots use classNames.          </DrawerDescription>        </DrawerHeader>        <DrawerFooter>          <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>        </DrawerFooter>      </DrawerContent>    </Drawer>  );}

.customPopup {  --drawer-bg: var(--color-card);  --drawer-border-color: var(--color-ring);  --drawer-shadow: var(--shadow-xl);  --drawer-max-height: 30rem;}.customBackdrop {  --drawer-backdrop-bg: color-mix(in oklab, var(--color-foreground) 60%, transparent);}.customViewport {  --drawer-viewport-padding: var(--spacing-4);}.customHandle {  --drawer-handle-bg: var(--color-destructive);  --drawer-handle-opacity: 0.8;}.customContent {  gap: var(--spacing-4);}