Drawer

import { useState } from "react"
import * as stylex from "@stylexjs/stylex"
import { Minus, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { HStack, VStack } from "@/components/ui/stack"
import { color, font, leading, radius, space, text, tracking } from "@/theme/tokens.stylex"

const styles = stylex.create({
  body: { maxWidth: "24rem", marginInline: "auto", width: "100%" },
  round: { borderRadius: radius.full },
  goal: {
    fontFamily: font.mono,
    fontSize: text.xl4,
    lineHeight: leading.xl4,
    fontWeight: 600,
    letterSpacing: tracking.tight,
    fontVariantNumeric: "tabular-nums",
  },
  unit: { fontSize: text.xs, lineHeight: leading.xs, color: color.mutedForeground },
  chart: { display: "flex", alignItems: "flex-end", gap: space.s1, height: space.s16 },
  bar: { flexGrow: 1, borderRadius: radius.xs, backgroundColor: color.muted },
})

const bars = [40, 62, 35, 78, 55, 90, 48]

export default function DrawerDemo() {
  const [goal, setGoal] = useState(350)

  return (
    <Drawer showSwipeHandle>
      <DrawerTrigger render={<Button variant="outline" />}>Open drawer</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Move goal</DrawerTitle>
          <DrawerDescription>Set your daily activity goal.</DrawerDescription>
        </DrawerHeader>
        <VStack gap={6} padding={4} xstyle={styles.body}>
          <HStack align="center" justify="between" gap={4}>
            <Button
              variant="outline"
              size="icon"
              xstyle={styles.round}
              aria-label="Decrease goal"
              onClick={() => setGoal((value) => Math.max(200, value - 10))}
            >
              <Minus />
            </Button>
            <VStack align="center" gap={0.5}>
              <span {...stylex.props(styles.goal)}>{goal}</span>
              <span {...stylex.props(styles.unit)}>calories / day</span>
            </VStack>
            <Button
              variant="outline"
              size="icon"
              xstyle={styles.round}
              aria-label="Increase goal"
              onClick={() => setGoal((value) => Math.min(600, value + 10))}
            >
              <Plus />
            </Button>
          </HStack>
          <div {...stylex.props(styles.chart)} aria-hidden="true">
            {bars.map((height) => {
              const sx = stylex.props(styles.bar)
              return <div key={height} {...sx} style={{ ...sx.style, height: `${height}%` }} />
            })}
          </div>
        </VStack>
        <DrawerFooter>
          <DrawerClose render={<Button variant="secondary" />}>Cancel</DrawerClose>
          <Button>Submit</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

import * as stylex from "@stylexjs/stylex"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { HStack, VStack } from "@/components/ui/stack"
import { color, radius } from "@/theme/tokens.stylex"

const directions = ["up", "right", "down", "left"] as const

const styles = stylex.create({
  placeholder: {
    flexGrow: 1,
    minHeight: "8rem",
    borderRadius: radius.xl,
    backgroundColor: color.muted,
  },
})

export default function DrawerSides() {
  return (
    <HStack gap={2} wrap="wrap" justify="center">
      {directions.map((direction) => (
        <Drawer key={direction} swipeDirection={direction}>
          <DrawerTrigger render={<Button variant="outline" />}>{direction}</DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Swipe {direction}</DrawerTitle>
              <DrawerDescription>
                A drawer enters from the edge it is dismissed toward.
              </DrawerDescription>
            </DrawerHeader>
            <VStack grow padding={4}>
              <div {...stylex.props(styles.placeholder)} />
            </VStack>
            <DrawerFooter>
              <DrawerClose render={<Button variant="secondary" />}>Close</DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      ))}
    </HStack>
  )
}

import * as stylex from "@stylexjs/stylex"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { HStack, VStack } from "@/components/ui/stack"
import { color, radius } from "@/theme/tokens.stylex"

const styles = stylex.create({
  placeholder: {
    flexGrow: 1,
    minHeight: "8rem",
    borderRadius: radius.xl,
    backgroundColor: color.muted,
  },
})

export default function DrawerSwipeHandleDemo() {
  return (
    <HStack gap={2} wrap="wrap" justify="center">
      <Drawer showSwipeHandle>
        <DrawerTrigger render={<Button variant="outline" />}>Bottom</DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Drag me down</DrawerTitle>
            <DrawerDescription>
              The bar marks the grab target; the strip around it drags too.
            </DrawerDescription>
          </DrawerHeader>
          <VStack grow padding={4}>
            <div {...stylex.props(styles.placeholder)} />
          </VStack>
          <DrawerFooter>
            <DrawerClose render={<Button variant="secondary" />}>Close</DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <Drawer showSwipeHandle swipeDirection="right">
        <DrawerTrigger render={<Button variant="outline" />}>Side</DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Drag me right</DrawerTitle>
            <DrawerDescription>A side drawer stands its handle on end.</DrawerDescription>
          </DrawerHeader>
          <VStack grow padding={4}>
            <div {...stylex.props(styles.placeholder)} />
          </VStack>
          <DrawerFooter>
            <DrawerClose render={<Button variant="secondary" />}>Close</DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </HStack>
  )
}

import * as stylex from "@stylexjs/stylex"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { VStack } from "@/components/ui/stack"
import { color, radius, space } from "@/theme/tokens.stylex"

const styles = stylex.create({
  body: { overflowY: "auto" },
  row: {
    borderRadius: radius.md,
    borderWidth: 1,
    borderStyle: "solid",
    paddingInline: space.s3,
    paddingBlock: space.s2,
  },
  meta: { color: color.mutedForeground },
})

const releases = [
  { version: "2.4.0", note: "Drawer, hover card", date: "12 Sep" },
  { version: "2.3.1", note: "Checkbox indicator exit", date: "5 Sep" },
  { version: "2.3.0", note: "Checkbox, collapsible", date: "1 Sep" },
  { version: "2.2.0", note: "Avatar, card", date: "24 Aug" },
  { version: "2.1.0", note: "Input, input group, OTP", date: "18 Aug" },
  { version: "2.0.2", note: "Dialog footer bleed", date: "11 Aug" },
  { version: "2.0.1", note: "Alert dialog sizing", date: "7 Aug" },
  { version: "2.0.0", note: "StyleX migration", date: "29 Jul" },
  { version: "1.8.0", note: "Breadcrumb", date: "20 Jul" },
  { version: "1.7.0", note: "Button group", date: "14 Jul" },
]

export default function DrawerScrollable() {
  return (
    <Drawer showSwipeHandle>
      <DrawerTrigger render={<Button variant="outline" />}>Open changelog</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Changelog</DrawerTitle>
          <DrawerDescription>The body scrolls; the header and footer do not.</DrawerDescription>
        </DrawerHeader>
        <VStack grow gap={2} padding={4} xstyle={styles.body}>
          {releases.map((release) => (
            <div key={release.version} {...stylex.props(styles.row)}>
              <p>
                {release.version} &middot; {release.note}
              </p>
              <p {...stylex.props(styles.meta)}>{release.date}</p>
            </div>
          ))}
        </VStack>
        <DrawerFooter>
          <DrawerClose render={<Button variant="secondary" />}>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

import * as stylex from "@stylexjs/stylex"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { VStack } from "@/components/ui/stack"
import { color, radius } from "@/theme/tokens.stylex"

const styles = stylex.create({
  placeholder: {
    flexGrow: 1,
    minHeight: "6rem",
    borderRadius: radius.xl,
    backgroundColor: color.muted,
  },
})

export default function DrawerNested() {
  return (
    <Drawer showSwipeHandle>
      <DrawerTrigger render={<Button variant="outline" />}>Open drawer</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Shipping address</DrawerTitle>
          <DrawerDescription>The drawer behind scales back and dims.</DrawerDescription>
        </DrawerHeader>
        <VStack grow padding={4}>
          <div {...stylex.props(styles.placeholder)} />
        </VStack>
        <DrawerFooter>
          <Drawer showSwipeHandle>
            <DrawerTrigger render={<Button variant="outline" />}>Add a note</DrawerTrigger>
            <DrawerContent>
              <DrawerHeader>
                <DrawerTitle>Delivery note</DrawerTitle>
                <DrawerDescription>
                  Swipe this one down and the drawer underneath comes back with it.
                </DrawerDescription>
              </DrawerHeader>
              <VStack grow padding={4}>
                <div {...stylex.props(styles.placeholder)} />
              </VStack>
              <DrawerFooter>
                <DrawerClose render={<Button variant="secondary" />}>Cancel</DrawerClose>
                <Button>Save note</Button>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
          <Button>Save address</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

import * as stylex from "@stylexjs/stylex"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { VStack } from "@/components/ui/stack"
import { color, radius } from "@/theme/tokens.stylex"

const styles = stylex.create({
  placeholder: {
    flexGrow: 1,
    minHeight: "8rem",
    borderRadius: radius.xl,
    backgroundColor: color.muted,
  },
})

export default function DrawerNonModal() {
  return (
    <Drawer modal={false} disablePointerDismissal swipeDirection="right">
      <DrawerTrigger render={<Button variant="outline" />}>Open inspector</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Inspector</DrawerTitle>
          <DrawerDescription>
            No scrim and no focus trap. Scroll the page behind it, and it stays open until you close
            it.
          </DrawerDescription>
        </DrawerHeader>
        <VStack grow padding={4}>
          <div {...stylex.props(styles.placeholder)} />
        </VStack>
        <DrawerFooter>
          <DrawerClose render={<Button variant="secondary" />}>Close</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

import { useState } from "react"
import * as stylex from "@stylexjs/stylex"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { VStack } from "@/components/ui/stack"
import { color, radius, space } from "@/theme/tokens.stylex"

const snapPoints = [0.3, 0.6, 1]

const styles = stylex.create({
  body: { overflowY: "auto" },
  row: {
    borderRadius: radius.md,
    borderWidth: 1,
    borderStyle: "solid",
    paddingInline: space.s3,
    paddingBlock: space.s2,
  },
  meta: { color: color.mutedForeground },
})

const commits = [
  { message: "Fix the drawer bleed at fractional zoom", author: "sarah", sha: "9f3a12c" },
  { message: "Pin the scrim to the layout viewport on iOS", author: "mike", sha: "4b81ef0" },
  { message: "Derive the stack scale from the nesting count", author: "lisa", sha: "2c7d445" },
  { message: "Drop the duration while a swipe is live", author: "james", sha: "e10b93a" },
  { message: "Move the swipe handle to the leaving edge", author: "sarah", sha: "77c5d21" },
  { message: "Clamp a vertical drawer to the viewport", author: "mike", sha: "0ab34f9" },
  { message: "Read the snap offset off the popup", author: "lisa", sha: "5de70b6" },
  { message: "Give the handle a full-strip grab target", author: "james", sha: "c92f108" },
]

export default function DrawerSnapPoints() {
  const [snapPoint, setSnapPoint] = useState<number | string | null>(0.3)

  return (
    <Drawer
      showSwipeHandle
      snapPoints={snapPoints}
      snapPoint={snapPoint}
      onSnapPointChange={setSnapPoint}
    >
      <DrawerTrigger render={<Button variant="outline" />}>Open activity</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Recent activity</DrawerTitle>
          <DrawerDescription>
            Drag the handle to move between a peek, a half sheet and full height.
          </DrawerDescription>
        </DrawerHeader>
        <VStack grow gap={2} padding={4} xstyle={styles.body}>
          {commits.map((commit) => (
            <div key={commit.sha} {...stylex.props(styles.row)}>
              <p>{commit.message}</p>
              <p {...stylex.props(styles.meta)}>
                {commit.author} &middot; {commit.sha}
              </p>
            </div>
          ))}
        </VStack>
      </DrawerContent>
    </Drawer>
  )
}

import { useCallback, useSyncExternalStore } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { VStack } from "@/components/ui/stack"

function useMediaQuery(query: string) {
  const subscribe = useCallback(
    (onChange: () => void) => {
      const list = window.matchMedia(query)
      list.addEventListener("change", onChange)
      return () => list.removeEventListener("change", onChange)
    },
    [query],
  )

  return useSyncExternalStore(
    subscribe,
    () => window.matchMedia(query).matches,
    () => false,
  )
}

function ProfileFields() {
  return (
    <VStack gap={4}>
      <VStack gap={2}>
        <Label htmlFor="responsive-email">Email</Label>
        <Input id="responsive-email" type="email" defaultValue="rudro@arc1.io" />
      </VStack>
      <VStack gap={2}>
        <Label htmlFor="responsive-username">Username</Label>
        <Input id="responsive-username" defaultValue="@rudro" />
      </VStack>
    </VStack>
  )
}

export default function DrawerResponsive() {
  const isDesktop = useMediaQuery("(width >= 48rem)")

  if (isDesktop) {
    return (
      <Dialog>
        <DialogTrigger render={<Button variant="outline" />}>Edit profile</DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>Narrow the window to get the drawer instead.</DialogDescription>
          </DialogHeader>
          <ProfileFields />
          <DialogFooter>
            <Button>Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    )
  }

  return (
    <Drawer showSwipeHandle>
      <DrawerTrigger render={<Button variant="outline" />}>Edit profile</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Edit profile</DrawerTitle>
          <DrawerDescription>Widen the window to get the dialog instead.</DrawerDescription>
        </DrawerHeader>
        <VStack padding={4}>
          <ProfileFields />
        </VStack>
        <DrawerFooter>
          <DrawerClose render={<Button variant="secondary" />}>Cancel</DrawerClose>
          <Button>Save changes</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}