snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/aria/examples/sheet-example.tsx

@@ -0,0 +1,131 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/aria/components/example"
+import { Button } from "@/registry/bases/aria/ui/button"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/aria/ui/field"
+import { Input } from "@/registry/bases/aria/ui/input"
+import {
+  Sheet,
+  SheetClose,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/bases/aria/ui/sheet"
+
+export default function SheetExample() {
+  return (
+    <ExampleWrapper>
+      <SheetWithForm />
+      <SheetNoCloseButton />
+      <SheetWithSides />
+    </ExampleWrapper>
+  )
+}
+
+function SheetWithForm() {
+  return (
+    <Example title="With Form">
+      <SheetTrigger>
+        <Button variant="outline">Open</Button>
+        <Sheet>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-rhea:px-6">
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
+                <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="sheet-demo-username">Username</FieldLabel>
+                <Input id="sheet-demo-username" defaultValue="@peduarte" />
+              </Field>
+            </FieldGroup>
+          </div>
+          <SheetFooter>
+            <Button type="submit">Save changes</Button>
+            <SheetClose variant="outline">Close</SheetClose>
+          </SheetFooter>
+        </Sheet>
+      </SheetTrigger>
+    </Example>
+  )
+}
+
+function SheetNoCloseButton() {
+  return (
+    <Example title="No Close Button">
+      <SheetTrigger>
+        <Button variant="outline">No Close Button</Button>
+        <Sheet showCloseButton={false}>
+          <SheetHeader>
+            <SheetTitle>No Close Button</SheetTitle>
+            <SheetDescription>
+              This sheet doesn&apos;t have a close button in the top-right
+              corner. You can only close it using the button below.
+            </SheetDescription>
+          </SheetHeader>
+        </Sheet>
+      </SheetTrigger>
+    </Example>
+  )
+}
+
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
+
+function SheetWithSides() {
+  return (
+    <Example title="Sides">
+      <div className="flex flex-wrap gap-2">
+        {SHEET_SIDES.map((side) => (
+          <SheetTrigger key={side}>
+            <Button variant="outline" className="capitalize">
+              {side}
+            </Button>
+            <Sheet
+              side={side}
+              className="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]"
+            >
+              <SheetHeader>
+                <SheetTitle>Edit profile</SheetTitle>
+                <SheetDescription>
+                  Make changes to your profile here. Click save when you&apos;re
+                  done.
+                </SheetDescription>
+              </SheetHeader>
+              <div className="no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-rhea:px-6">
+                {Array.from({ length: 10 }).map((_, index) => (
+                  <p
+                    key={index}
+                    className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
+                  >
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit
+                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+                    occaecat cupidatat non proident, sunt in culpa qui officia
+                    deserunt mollit anim id est laborum.
+                  </p>
+                ))}
+              </div>
+              <SheetFooter>
+                <Button type="submit">Save changes</Button>
+                <SheetClose variant="outline">Cancel</SheetClose>
+              </SheetFooter>
+            </Sheet>
+          </SheetTrigger>
+        ))}
+      </div>
+    </Example>
+  )
+}