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

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/examples/aria/drawer-demo.tsx
+++ b/apps/v4/examples/aria/drawer-demo.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { toast } from "sonner"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Badge } from "@/styles/aria-nova/ui/badge"
+import { Button } from "@/styles/aria-nova/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/styles/aria-nova/ui/drawer"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldTitle,
+} from "@/styles/aria-nova/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/styles/aria-nova/ui/radio-group"
+
+const deliveryTimes = [
+  {
+    value: "asap",
+    id: "delivery-asap",
+    label: "Standard delivery",
+    description: "25–35 min · Driver assigned now",
+    badge: "Fastest",
+  },
+  {
+    value: "5-00",
+    id: "delivery-5-00",
+    label: "5:00 PM – 5:15 PM",
+    description: "Prep starts at 4:45 PM",
+  },
+  {
+    value: "5-30",
+    id: "delivery-5-30",
+    label: "5:30 PM – 5:45 PM",
+    description: "Good if you're heading home",
+  },
+  {
+    value: "6-00",
+    id: "delivery-6-00",
+    label: "6:00 PM – 6:15 PM",
+    description: "Most popular · High demand",
+  },
+  {
+    value: "6-30",
+    id: "delivery-6-30",
+    label: "6:30 PM – 6:45 PM",
+    description: "Last slot before kitchen closes",
+  },
+]
+
+export function DrawerDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [deliveryTime, setDeliveryTime] = React.useState("asap")
+  const isMobile = useIsMobile()
+
+  function handleConfirm() {
+    const selected = deliveryTimes.find((time) => time.value === deliveryTime)
+
+    if (!selected) {
+      return
+    }
+
+    setOpen(false)
+    toast("Delivery time confirmed", {
+      description: selected.label,
+    })
+  }
+
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={setOpen}
+      showSwipeHandle={isMobile}
+      swipeDirection={isMobile ? "down" : "right"}
+    >
+      <DrawerTrigger render={<Button variant="secondary" />}>
+        Open Drawer
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Pick a delivery time</DrawerTitle>
+          <DrawerDescription>
+            We&apos;ll prepare your order as soon as possible.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="flex-1 scroll-fade overflow-y-auto p-4">
+          <RadioGroup
+            value={deliveryTime}
+            onChange={setDeliveryTime}
+            className="gap-2"
+          >
+            {deliveryTimes.map((time) => (
+              <FieldLabel key={time.value} htmlFor={time.id}>
+                <Field orientation="horizontal">
+                  <FieldContent>
+                    <FieldTitle className="flex items-center gap-2">
+                      {time.label}
+                      {time.badge ? (
+                        <Badge variant="secondary">{time.badge}</Badge>
+                      ) : null}
+                    </FieldTitle>
+                    <FieldDescription>{time.description}</FieldDescription>
+                  </FieldContent>
+                  <RadioGroupItem value={time.value} id={time.id} />
+                </Field>
+              </FieldLabel>
+            ))}
+          </RadioGroup>
+        </div>
+        <DrawerFooter>
+          <Button onClick={handleConfirm} className="h-[34px]">
+            Confirm Delivery Time
+          </Button>
+          <DrawerClose render={<Button variant="outline" />}>
+            Cancel
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}