Sheet

npx shadcn@latest add https://docs.nasaqui.com/r/sheet.json

import {
  Sheet, SheetTrigger, SheetClose, SheetContent,
  SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter,
} from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

import {
  Button, Field, FieldLabel, Input, Sheet, SheetBody, SheetClose, SheetContent,
  SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger,
} from "@fadymondy/nasaq/web";

export function EditProject() {
  return (
    <Sheet>
      <SheetTrigger render={<Button />}>Edit project</SheetTrigger>
      <SheetContent side="end">
        <SheetHeader>
          <SheetTitle>Edit project</SheetTitle>
          <SheetDescription>Changes save when you press Save.</SheetDescription>
        </SheetHeader>
        <SheetBody className="flex flex-col gap-4 p-4">
          <Field>
            <FieldLabel>Name</FieldLabel>
            <Input defaultValue="Nasaq" />
          </Field>
        </SheetBody>
        <SheetFooter className="justify-end">
          <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
          <SheetClose render={<Button variant="primary" />}>Save</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

Sheet                            Base UI Dialog.Root
├─ SheetTrigger                  Base UI Dialog.Trigger
└─ SheetContent                  data-slot="sheet-content", data-side="end|start|bottom"
   ├─ SheetBackdrop              data-slot="sheet-backdrop" (rendered for you)
   ├─ SheetHeader                data-slot="sheet-header"
   │  ├─ SheetTitle              data-slot="sheet-title"
   │  └─ SheetDescription        data-slot="sheet-description"
   ├─ SheetBody                  data-slot="sheet-body"  (scrolls)
   ├─ SheetFooter                data-slot="sheet-footer"
   │  └─ SheetClose              Base UI Dialog.Close
   └─ close (×) button           data-slot="sheet-close" (when showClose)

import {
  Button, Sheet, SheetBody, SheetContent, SheetDescription,
  SheetHeader, SheetTitle, SheetTrigger,
} from "@fadymondy/nasaq/web";

export function Sides() {
  return (
    <div className="flex gap-3">
      {(["end", "start", "bottom"] as const).map((side) => (
        <Sheet key={side}>
          <SheetTrigger render={<Button />}>Open {side}</SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle>Filters</SheetTitle>
              <SheetDescription>Narrow the list.</SheetDescription>
            </SheetHeader>
            <SheetBody className="p-4">Content</SheetBody>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  );
}

import { Button, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function NotificationsAr() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>الإشعارات</Button>
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetContent closeLabel="إغلاق">
          <SheetHeader>
            <SheetTitle>الإشعارات</SheetTitle>
          </SheetHeader>
          <SheetBody className="p-4">لا توجد إشعارات جديدة.</SheetBody>
        </SheetContent>
      </Sheet>
    </>
  );
}