feat: add Filepicker Dropzone component with interactive examples

components/docs/interactive-examples/alert-dialog.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { useState } from "react"
+import { AlertDialogProvider, useAlert } from "@/registry/radix-nova/alert-provider"
+import { Button } from "@/registry/radix-nova/button"
+
+function AlertExampleContent() {
+  const alert = useAlert()
+  const [status, setStatus] = useState("No alert shown yet.")
+
+  const openAlert = async () => {
+    await alert({
+      title: "Heads up",
+      description: "This is an interactive alert demo.",
+      buttonLabel: "Understood",
+    })
+    setStatus("Alert dismissed.")
+  }
+
+  return (
+    <div className="space-y-2">
+      <Button type="button" onClick={() => void openAlert()}>
+        Open Alert
+      </Button>
+      <p className="text-xs text-muted-foreground">{status}</p>
+    </div>
+  )
+}
+
+export function AlertDialogInteractiveExample() {
+  return (
+    <AlertDialogProvider>
+      <AlertExampleContent />
+    </AlertDialogProvider>
+  )
+}

components/docs/interactive-examples/button.tsx

@@ -0,0 +1,11 @@
+import { Button } from "@/registry/radix-nova/button"
+
+export function ButtonInteractiveExample() {
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Button>Default</Button>
+      <Button variant="outline">Outline</Button>
+      <Button size="sm">Small</Button>
+    </div>
+  )
+}

components/docs/interactive-examples/confirm-dialog.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/registry/radix-nova/button"
+import { ConfirmDialogProvider, useConfirm } from "@/registry/radix-nova/confirm-provider"
+
+function ConfirmExampleContent() {
+  const confirm = useConfirm()
+  const [status, setStatus] = useState("No decision yet.")
+
+  const openConfirm = async () => {
+    const isConfirmed = await confirm({
+      title: "Delete item?",
+      description: "This action cannot be undone.",
+      confirmButtonText: "Delete",
+      cancelButtonText: "Cancel",
+      variant: "destructive",
+      requireConfirmationInput: {
+        confirmTerm: "DELETE",
+        hint: "Type DELETE to enable the button.",
+      },
+    })
+    setStatus(isConfirmed ? "Confirmed." : "Cancelled.")
+  }
+
+  return (
+    <div className="space-y-2">
+      <Button type="button" variant="destructive" onClick={() => void openConfirm()}>
+        Open Confirm
+      </Button>
+      <p className="text-xs text-muted-foreground">{status}</p>
+    </div>
+  )
+}
+
+export function ConfirmDialogInteractiveExample() {
+  return (
+    <ConfirmDialogProvider>
+      <ConfirmExampleContent />
+    </ConfirmDialogProvider>
+  )
+}

components/docs/interactive-examples/dialog.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@/registry/radix-nova/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/radix-nova/dialog"
+
+export function DialogInteractiveExample() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent closeLabel="Close dialog">
+        <DialogHeader>
+          <DialogTitle>Profile updated</DialogTitle>
+          <DialogDescription>
+            This example uses custom close labels and the footer close button.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter showCloseButton closeLabel="Dismiss" />
+      </DialogContent>
+    </Dialog>
+  )
+}

components/docs/interactive-examples/filepicker-dropzone.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useState } from "react"
+import { FilepickerDropzone } from "@/registry/radix-nova/filepicker-dropzone"
+
+export function FilepickerDropzoneInteractiveExample() {
+  const [files, setFiles] = useState<string[]>([])
+
+  return (
+    <div className="space-y-2">
+      <FilepickerDropzone
+        id="docs-filepicker-dropzone"
+        label="Upload files"
+        description="PDF, PNG, and JPG up to 1MB each."
+        accept={{
+          "application/pdf": [".pdf"],
+          "image/png": [".png"],
+          "image/jpeg": [".jpg", ".jpeg"],
+        }}
+        multiple
+        maxSize={1 * 1024 * 1024}
+        onChange={(selectedFiles) => {
+          setFiles(selectedFiles.map((file) => file.name))
+        }}
+      />
+      <p className="text-xs text-muted-foreground">
+        {files.length > 0 ? `${files.length} file(s): ${files.join(", ")}` : "No files selected yet."}
+      </p>
+    </div>
+  )
+}

components/docs/interactive-examples/index.ts

@@ -0,0 +1,6 @@
+export { AlertDialogInteractiveExample } from "./alert-dialog"
+export { ButtonInteractiveExample } from "./button"
+export { ConfirmDialogInteractiveExample } from "./confirm-dialog"
+export { DialogInteractiveExample } from "./dialog"
+export { FilepickerDropzoneInteractiveExample } from "./filepicker-dropzone"
+export { LoadingButtonInteractiveExample } from "./loading-button"

components/docs/interactive-examples/loading-button.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { useState } from "react"
+import { LoadingButton } from "@/registry/radix-nova/loading-button"
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+export function LoadingButtonInteractiveExample() {
+  const [isLoading, setIsLoading] = useState(false)
+  const [count, setCount] = useState(0)
+
+  const triggerLoading = async () => {
+    setIsLoading(true)
+    await wait(1200)
+    setIsLoading(false)
+    setCount((prev) => prev + 1)
+  }
+
+  return (
+    <div className="space-y-2">
+      <LoadingButton type="button" isLoading={isLoading} onClick={() => void triggerLoading()}>
+        {isLoading ? "Submitting..." : "Submit"}
+      </LoadingButton>
+      <p className="text-xs text-muted-foreground">Completed: {count}</p>
+    </div>
+  )
+}