love-ui 1.2.12 → 1.2.14

package/public/r/deck-product-cards.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/deck-product-cards.tsx",
-      "content": "\"use client\"\n\nimport Image from \"next/image\"\nimport { StarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  Deck,\n  DeckCards,\n  DeckEmpty,\n  DeckItem,\n} from \"../../../../../packages/deck\"\nimport { Badge } from \"../../../../../packages/ui/src/ui/badge\"\n\nconst products = [\n  {\n    id: 1,\n    name: \"Wireless Headphones\",\n    price: \"$199\",\n    rating: 4.5,\n    image: \"https://placehold.co/400x300/ff6b6b/fff?text=Headphones\",\n    category: \"Electronics\",\n    description: \"Premium wireless headphones with noise cancellation\",\n  },\n  {\n    id: 2,\n    name: \"Smart Watch\",\n    price: \"$299\",\n    rating: 4.8,\n    image: \"https://placehold.co/400x300/4ecdc4/fff?text=Watch\",\n    category: \"Wearables\",\n    description: \"Feature-rich smartwatch with health tracking\",\n  },\n  {\n    id: 3,\n    name: \"Coffee Maker\",\n    price: \"$149\",\n    rating: 4.3,\n    image: \"https://placehold.co/400x300/45b7d1/fff?text=Coffee\",\n    category: \"Kitchen\",\n    description: \"Programmable coffee maker with built-in grinder\",\n  },\n  {\n    id: 4,\n    name: \"Laptop Stand\",\n    price: \"$79\",\n    rating: 4.6,\n    image: \"https://placehold.co/400x300/96ceb4/fff?text=Stand\",\n    category: \"Accessories\",\n    description: \"Adjustable aluminum laptop stand for better ergonomics\",\n  },\n]\n\nconst Example = () => (\n  <div className=\"mx-auto w-80\">\n    <Deck>\n      <DeckCards className=\"aspect-[4/5]\" onSwipe={console.log}>\n        {products.map((product) => (\n          <DeckItem className=\"flex flex-col p-0\" key={product.id}>\n            <div className=\"relative\">\n              <Image\n                alt={product.name}\n                className=\"h-64 w-full rounded-t-lg object-cover\"\n                draggable={false}\n                height={300}\n                src={product.image}\n                unoptimized\n                width={400}\n              />\n              <Badge className=\"absolute top-3 right-3\">\n                {product.category}\n              </Badge>\n            </div>\n\n            <div className=\"flex flex-1 flex-col p-4\">\n              <div className=\"flex items-start justify-between\">\n                <h3 className=\"text-lg font-semibold\">{product.name}</h3>\n                <span className=\"text-lg font-bold text-primary\">\n                  {product.price}\n                </span>\n              </div>\n\n              <div className=\"mt-1 flex items-center gap-1\">\n                <div className=\"flex\">\n                  {[...new Array(5)].map((_, i) => (\n                    <StarIcon\n                      className={cn(\n                        \"h-4 w-4\",\n                        i < Math.floor(product.rating)\n                          ? \"fill-yellow-400 text-yellow-400\"\n                          : \"text-muted-foreground\"\n                      )}\n                      key={`star-${product.id}-${i}`}\n                    />\n                  ))}\n                </div>\n                <span className=\"text-sm text-muted-foreground\">\n                  ({product.rating})\n                </span>\n              </div>\n\n              <p className=\"mt-2 flex-1 text-sm text-muted-foreground\">\n                {product.description}\n              </p>\n            </div>\n          </DeckItem>\n        ))}\n      </DeckCards>\n      <DeckEmpty />\n    </Deck>\n  </div>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport Image from \"next/image\"\nimport { StarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  Deck,\n  DeckCards,\n  DeckEmpty,\n  DeckItem,\n} from \"../../../../../packages/deck\"\nimport { Badge } from \"../../../../../packages/ui/src/ui/badge\"\n\nconst products = [\n  {\n    id: 1,\n    name: \"Updated Wireless Headphones\",\n    price: \"$199\",\n    rating: 4.5,\n    image: \"https://placehold.co/400x300/ff6b6b/fff?text=Headphones\",\n    category: \"Electronics\",\n    description: \"Updated Premium wireless headphones with noise cancellation\",\n  },\n  {\n    id: 2,\n    name: \"Updated Smart Watch\",\n    price: \"$299\",\n    rating: 4.8,\n    image: \"https://placehold.co/400x300/4ecdc4/fff?text=Watch\",\n    category: \"Wearables\",\n    description: \"Updated Feature-rich smartwatch with health tracking\",\n  },\n  {\n    id: 3,\n    name: \"Updated Coffee Maker\",\n    price: \"$149\",\n    rating: 4.3,\n    image: \"https://placehold.co/400x300/45b7d1/fff?text=Coffee\",\n    category: \"Kitchen\",\n    description: \"Updated Programmable coffee maker with built-in grinder\",\n  },\n  {\n    id: 4,\n    name: \"Updated Laptop Stand\",\n    price: \"$79\",\n    rating: 4.6,\n    image: \"https://placehold.co/400x300/96ceb4/fff?text=Stand\",\n    category: \"Accessories\",\n    description:\n      \"Updated Adjustable aluminum laptop stand for better ergonomics\",\n  },\n]\n\nconst Example = () => (\n  <div className=\"mx-auto w-80\">\n    <Deck>\n      <DeckCards className=\"aspect-[4/5]\" onSwipe={console.log}>\n        {products.map((product) => (\n          <DeckItem className=\"flex flex-col p-0\" key={product.id}>\n            <div className=\"relative\">\n              <Image\n                alt={product.name}\n                className=\"h-64 w-full rounded-t-lg object-cover\"\n                draggable={false}\n                height={300}\n                src={product.image}\n                unoptimized\n                width={400}\n              />\n              <Badge className=\"absolute top-3 right-3\">\n                {product.category}\n              </Badge>\n            </div>\n\n            <div className=\"flex flex-1 flex-col p-4\">\n              <div className=\"flex items-start justify-between\">\n                <h3 className=\"text-lg font-semibold\">{product.name}</h3>\n                <span className=\"text-lg font-bold text-primary\">\n                  {product.price}\n                </span>\n              </div>\n\n              <div className=\"mt-1 flex items-center gap-1\">\n                <div className=\"flex\">\n                  {[...new Array(5)].map((_, i) => (\n                    <StarIcon\n                      className={cn(\n                        \"h-4 w-4\",\n                        i < Math.floor(product.rating)\n                          ? \"fill-yellow-400 text-yellow-400\"\n                          : \"text-muted-foreground\"\n                      )}\n                      key={`star-${product.id}-${i}`}\n                    />\n                  ))}\n                </div>\n                <span className=\"text-sm text-muted-foreground\">\n                  ({product.rating})\n                </span>\n              </div>\n\n              <p className=\"mt-2 flex-1 text-sm text-muted-foreground\">\n                {product.description}\n              </p>\n            </div>\n          </DeckItem>\n        ))}\n      </DeckCards>\n      <DeckEmpty />\n    </Deck>\n  </div>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/deck.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/deck.tsx",
-      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport {\n  Deck,\n  DeckCards,\n  DeckEmpty,\n  DeckItem,\n} from \"../../../../../packages/deck\"\n\nconst images = [\n  {\n    id: 1,\n    src: \"https://placehold.co/400x600/ff6b6b/fff?text=Card+1\",\n    title: \"Card 1\",\n  },\n  {\n    id: 2,\n    src: \"https://placehold.co/400x600/4ecdc4/fff?text=Card+2\",\n    title: \"Card 2\",\n  },\n  {\n    id: 3,\n    src: \"https://placehold.co/400x600/45b7d1/fff?text=Card+3\",\n    title: \"Card 3\",\n  },\n  {\n    id: 4,\n    src: \"https://placehold.co/400x600/96ceb4/fff?text=Card+4\",\n    title: \"Card 4\",\n  },\n  {\n    id: 5,\n    src: \"https://placehold.co/400x600/feca57/fff?text=Card+5\",\n    title: \"Card 5\",\n  },\n]\n\nconst Example = () => (\n  <Deck className=\"size-full\">\n    <DeckCards>\n      {images.map((image) => (\n        <DeckItem className=\"p-0\" key={image.id}>\n          <Image\n            alt={image.title}\n            className=\"h-full w-full rounded-lg object-cover\"\n            draggable={false}\n            height={600}\n            src={image.src}\n            unoptimized\n            width={400}\n          />\n        </DeckItem>\n      ))}\n    </DeckCards>\n    <DeckEmpty />\n  </Deck>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport {\n  Deck,\n  DeckCards,\n  DeckEmpty,\n  DeckItem,\n} from \"../../../../../packages/deck\"\n\nconst images = [\n  {\n    id: 1,\n    src: \"https://placehold.co/400x600/ff6b6b/fff?text=Card+1\",\n    title: \"Updated Card 1\",\n  },\n  {\n    id: 2,\n    src: \"https://placehold.co/400x600/4ecdc4/fff?text=Card+2\",\n    title: \"Updated Card 2\",\n  },\n  {\n    id: 3,\n    src: \"https://placehold.co/400x600/45b7d1/fff?text=Card+3\",\n    title: \"Updated Card 3\",\n  },\n  {\n    id: 4,\n    src: \"https://placehold.co/400x600/96ceb4/fff?text=Card+4\",\n    title: \"Updated Card 4\",\n  },\n  {\n    id: 5,\n    src: \"https://placehold.co/400x600/feca57/fff?text=Card+5\",\n    title: \"Updated Card 5\",\n  },\n]\n\nconst Example = () => (\n  <Deck className=\"size-full\">\n    <DeckCards>\n      {images.map((image) => (\n        <DeckItem className=\"p-0\" key={image.id}>\n          <Image\n            alt={image.title}\n            className=\"h-full w-full rounded-lg object-cover\"\n            draggable={false}\n            height={600}\n            src={image.src}\n            unoptimized\n            width={400}\n          />\n        </DeckItem>\n      ))}\n    </DeckCards>\n    <DeckEmpty />\n  </Deck>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/dialog-close-confirmation.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/examples/dialog-close-confirmation.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Field } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function DialogCloseConfirmationDemo() {\n  const [dialogOpen, setDialogOpen] = React.useState(false)\n  const [confirmOpen, setConfirmOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Dialog\n      open={dialogOpen}\n      onOpenChange={(o) => {\n        if (!o && value) {\n          setConfirmOpen(true)\n        } else {\n          setDialogOpen(o)\n        }\n      }}\n    >\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Compose\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>New message</DialogTitle>\n          <DialogDescription>Type something and try closing.</DialogDescription>\n        </DialogHeader>\n        <Form\n          onSubmit={(event) => {\n            event.preventDefault()\n            // Close the dialog when submitting\n            setDialogOpen(false)\n          }}\n        >\n          <Field>\n            <Textarea\n              value={value}\n              onChange={(e) => setValue(e.target.value)}\n            />\n          </Field>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Cancel\n            </DialogClose>\n            <Button\n              onClick={() => {\n                setValue(\"\")\n                setDialogOpen(false)\n              }}\n            >\n              Send\n            </Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n\n      {/* Confirmation dialog */}\n      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>\n        <AlertDialogPopup>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Discard changes?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Your message will be lost.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogClose render={<Button variant=\"ghost\" />}>\n              Go back\n            </AlertDialogClose>\n            <Button\n              onClick={() => {\n                setConfirmOpen(false)\n                setValue(\"\")\n                setDialogOpen(false)\n              }}\n            >\n              Discard\n            </Button>\n          </AlertDialogFooter>\n        </AlertDialogPopup>\n      </AlertDialog>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Field } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function DialogCloseConfirmationDemo() {\n  const [dialogOpen, setDialogOpen] = React.useState(false)\n  const [confirmOpen, setConfirmOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Dialog\n      open={dialogOpen}\n      onOpenChange={(o) => {\n        if (!o && value) {\n          setConfirmOpen(true)\n        } else {\n          setDialogOpen(o)\n        }\n      }}\n    >\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Updated Compose\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>Updated New message</DialogTitle>\n          <DialogDescription>\n            Updated Type something and try closing.\n          </DialogDescription>\n        </DialogHeader>\n        <Form\n          onSubmit={(event) => {\n            event.preventDefault()\n            // Close the dialog when submitting\n            setDialogOpen(false)\n          }}\n        >\n          <Field>\n            <Textarea\n              value={value}\n              onChange={(e) => setValue(e.target.value)}\n            />\n          </Field>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Updated Cancel\n            </DialogClose>\n            <Button\n              onClick={() => {\n                setValue(\"\")\n                setDialogOpen(false)\n              }}\n            >\n              Updated Send\n            </Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n\n      {/* Confirmation dialog */}\n      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>\n        <AlertDialogPopup>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Updated Discard changes?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Updated Your message will be lost.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogClose render={<Button variant=\"ghost\" />}>\n              Updated Go back\n            </AlertDialogClose>\n            <Button\n              onClick={() => {\n                setConfirmOpen(false)\n                setValue(\"\")\n                setDialogOpen(false)\n              }}\n            >\n              Updated Discard\n            </Button>\n          </AlertDialogFooter>\n        </AlertDialogPopup>\n      </AlertDialog>\n    </Dialog>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/dialog-demo.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/dialog-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Field, FieldControl, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nexport default function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Open Dialog\n      </DialogTrigger>\n      <DialogPopup className=\"sm:max-w-sm\">\n        <Form>\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <FieldControl type=\"text\" defaultValue=\"Connor Love\" />\n            </Field>\n            <Field>\n              <FieldLabel>Username</FieldLabel>\n              <FieldControl type=\"text\" defaultValue=\"@loveconnor\" />\n            </Field>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Save</Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n    </Dialog>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Field, FieldControl, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nexport default function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Updated Open Dialog\n      </DialogTrigger>\n      <DialogPopup className=\"sm:max-w-sm\">\n        <Form>\n          <DialogHeader>\n            <DialogTitle>Updated Edit profile</DialogTitle>\n            <DialogDescription>\n              Updated Make changes to your profile here. Click save when\n              you&apos;re done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <Field>\n              <FieldLabel>Updated Name</FieldLabel>\n              <FieldControl type=\"text\" defaultValue=\"Connor Love\" />\n            </Field>\n            <Field>\n              <FieldLabel>Updated Username</FieldLabel>\n              <FieldControl type=\"text\" defaultValue=\"@loveconnor\" />\n            </Field>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Updated Cancel\n            </DialogClose>\n            <Button type=\"submit\">Updated Save</Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n    </Dialog>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/dialog-from-menu.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/dialog-from-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n} from \"@/registry/default/ui/dialog\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function DialogFromMenuDemo() {\n  const [dialogOpen, setDialogOpen] = React.useState(false)\n  return (\n    <>\n      <Menu>\n        <MenuTrigger render={<Button variant=\"outline\" />}>\n          Open menu\n        </MenuTrigger>\n        <MenuPopup align=\"start\">\n          <MenuItem onClick={() => setDialogOpen(true)}>Open dialog</MenuItem>\n        </MenuPopup>\n      </Menu>\n      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>\n        <DialogPopup>\n          <DialogHeader>\n            <DialogTitle>Settings</DialogTitle>\n            <DialogDescription>Change your preferences</DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>Close</DialogClose>\n          </DialogFooter>\n        </DialogPopup>\n      </Dialog>\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n} from \"@/registry/default/ui/dialog\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function DialogFromMenuDemo() {\n  const [dialogOpen, setDialogOpen] = React.useState(false)\n  return (\n    <>\n      <Menu>\n        <MenuTrigger render={<Button variant=\"outline\" />}>\n          Updated Open menu\n        </MenuTrigger>\n        <MenuPopup align=\"start\">\n          <MenuItem onClick={() => setDialogOpen(true)}>\n            Updated Open dialog\n          </MenuItem>\n        </MenuPopup>\n      </Menu>\n      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>\n        <DialogPopup>\n          <DialogHeader>\n            <DialogTitle>Updated Settings</DialogTitle>\n            <DialogDescription>\n              Updated Change your preferences\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Updated Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogPopup>\n      </Dialog>\n    </>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/dialog-nested.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/dialog-nested.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Field, FieldControl, FieldLabel } from \"@/registry/default/ui/field\"\n\nexport default function DialogNestedDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Open parent\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>Manage team member</DialogTitle>\n          <DialogDescription>\n            View and manage a user in your team.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4\">\n          <div className=\"grid gap-1\">\n            <p className=\"text-sm text-muted-foreground\">Name</p>\n            <p className=\"text-sm font-medium\">Connor Love</p>\n          </div>\n          <div className=\"grid gap-1\">\n            <p className=\"text-sm text-muted-foreground\">Email</p>\n            <p className=\"text-sm font-medium\">clove@loveui.dev</p>\n          </div>\n        </div>\n        <DialogFooter>\n          <Dialog>\n            <DialogTrigger render={<Button variant=\"outline\" />}>\n              Edit details\n            </DialogTrigger>\n            <DialogPopup showCloseButton={false}>\n              <DialogHeader>\n                <DialogTitle>Edit details</DialogTitle>\n                <DialogDescription>\n                  Make changes to the member&apos;s information.\n                </DialogDescription>\n              </DialogHeader>\n              <div className=\"flex flex-col gap-4\">\n                <Field>\n                  <FieldLabel>Name</FieldLabel>\n                  <FieldControl type=\"text\" defaultValue=\"Connor Love\" />\n                </Field>\n                <Field>\n                  <FieldLabel>Email</FieldLabel>\n                  <FieldControl type=\"text\" defaultValue=\"clove@loveui.dev\" />\n                </Field>\n              </div>\n              <DialogFooter>\n                <DialogClose render={<Button variant=\"ghost\" />}>\n                  Cancel\n                </DialogClose>\n                <Button type=\"submit\">Save changes</Button>\n              </DialogFooter>\n            </DialogPopup>\n          </Dialog>\n        </DialogFooter>\n      </DialogPopup>\n    </Dialog>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Field, FieldControl, FieldLabel } from \"@/registry/default/ui/field\"\n\nexport default function DialogNestedDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Updated Open parent\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>Updated Manage team member</DialogTitle>\n          <DialogDescription>\n            Updated View and manage a user in your team.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4\">\n          <div className=\"grid gap-1\">\n            <p className=\"text-sm text-muted-foreground\">Updated Name</p>\n            <p className=\"text-sm font-medium\">Updated Connor Love</p>\n          </div>\n          <div className=\"grid gap-1\">\n            <p className=\"text-sm text-muted-foreground\">Updated Email</p>\n            <p className=\"text-sm font-medium\">clove@loveui.dev</p>\n          </div>\n        </div>\n        <DialogFooter>\n          <Dialog>\n            <DialogTrigger render={<Button variant=\"outline\" />}>\n              Updated Edit details\n            </DialogTrigger>\n            <DialogPopup showCloseButton={false}>\n              <DialogHeader>\n                <DialogTitle>Updated Edit details</DialogTitle>\n                <DialogDescription>\n                  Updated Make changes to the member&apos;s information.\n                </DialogDescription>\n              </DialogHeader>\n              <div className=\"flex flex-col gap-4\">\n                <Field>\n                  <FieldLabel>Updated Name</FieldLabel>\n                  <FieldControl type=\"text\" defaultValue=\"Connor Love\" />\n                </Field>\n                <Field>\n                  <FieldLabel>Updated Email</FieldLabel>\n                  <FieldControl type=\"text\" defaultValue=\"clove@loveui.dev\" />\n                </Field>\n              </div>\n              <DialogFooter>\n                <DialogClose render={<Button variant=\"ghost\" />}>\n                  Updated Cancel\n                </DialogClose>\n                <Button type=\"submit\">Updated Save changes</Button>\n              </DialogFooter>\n            </DialogPopup>\n          </Dialog>\n        </DialogFooter>\n      </DialogPopup>\n    </Dialog>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/dialog-stack-controlled.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/dialog-stack-controlled.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  DialogStack,\n  DialogStackBody,\n  DialogStackContent,\n  DialogStackDescription,\n  DialogStackFooter,\n  DialogStackHeader,\n  DialogStackNext,\n  DialogStackOverlay,\n  DialogStackPrevious,\n  DialogStackTitle,\n} from \"../../../../../packages/dialog-stack\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst Example = () => {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <>\n      <Button onClick={() => setOpen(!open)} variant=\"outline\">\n        Toggle Dialog\n      </Button>\n\n      <DialogStack onOpenChange={setOpen} open={open}>\n        <DialogStackOverlay />\n        <DialogStackBody>\n          <DialogStackContent>\n            <DialogStackHeader>\n              <DialogStackTitle>I'm the first dialog</DialogStackTitle>\n              <DialogStackDescription>\n                With a fancy description\n              </DialogStackDescription>\n            </DialogStackHeader>\n            <DialogStackFooter className=\"justify-end\">\n              <DialogStackNext asChild>\n                <Button variant=\"outline\">Next</Button>\n              </DialogStackNext>\n            </DialogStackFooter>\n          </DialogStackContent>\n\n          <DialogStackContent>\n            <DialogStackHeader>\n              <DialogStackTitle>I'm the second dialog</DialogStackTitle>\n              <DialogStackDescription>\n                With a fancy description\n              </DialogStackDescription>\n            </DialogStackHeader>\n            <DialogStackFooter className=\"justify-between\">\n              <DialogStackPrevious asChild>\n                <Button variant=\"outline\">Previous</Button>\n              </DialogStackPrevious>\n              <DialogStackNext asChild>\n                <Button variant=\"outline\">Next</Button>\n              </DialogStackNext>\n            </DialogStackFooter>\n          </DialogStackContent>\n\n          <DialogStackContent>\n            <DialogStackHeader>\n              <DialogStackTitle>I'm the third dialog</DialogStackTitle>\n              <DialogStackDescription>\n                With a fancy description\n              </DialogStackDescription>\n            </DialogStackHeader>\n            <DialogStackFooter className=\"justify-between\">\n              <DialogStackPrevious asChild>\n                <Button variant=\"outline\">Previous</Button>\n              </DialogStackPrevious>\n            </DialogStackFooter>\n          </DialogStackContent>\n        </DialogStackBody>\n      </DialogStack>\n    </>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  DialogStack,\n  DialogStackBody,\n  DialogStackContent,\n  DialogStackDescription,\n  DialogStackFooter,\n  DialogStackHeader,\n  DialogStackNext,\n  DialogStackOverlay,\n  DialogStackPrevious,\n  DialogStackTitle,\n} from \"../../../../../packages/dialog-stack\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst Example = () => {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <>\n      <Button onClick={() => setOpen(!open)} variant=\"outline\">\n        Updated Toggle Dialog\n      </Button>\n\n      <DialogStack onOpenChange={setOpen} open={open}>\n        <DialogStackOverlay />\n        <DialogStackBody>\n          <DialogStackContent>\n            <DialogStackHeader>\n              <DialogStackTitle>Updated I'm the first dialog</DialogStackTitle>\n              <DialogStackDescription>\n                Updated With a fancy description\n              </DialogStackDescription>\n            </DialogStackHeader>\n            <DialogStackFooter className=\"justify-end\">\n              <DialogStackNext asChild>\n                <Button variant=\"outline\">Updated Next</Button>\n              </DialogStackNext>\n            </DialogStackFooter>\n          </DialogStackContent>\n\n          <DialogStackContent>\n            <DialogStackHeader>\n              <DialogStackTitle>Updated I'm the second dialog</DialogStackTitle>\n              <DialogStackDescription>\n                Updated With a fancy description\n              </DialogStackDescription>\n            </DialogStackHeader>\n            <DialogStackFooter className=\"justify-between\">\n              <DialogStackPrevious asChild>\n                <Button variant=\"outline\">Updated Previous</Button>\n              </DialogStackPrevious>\n              <DialogStackNext asChild>\n                <Button variant=\"outline\">Updated Next</Button>\n              </DialogStackNext>\n            </DialogStackFooter>\n          </DialogStackContent>\n\n          <DialogStackContent>\n            <DialogStackHeader>\n              <DialogStackTitle>Updated I'm the third dialog</DialogStackTitle>\n              <DialogStackDescription>\n                Updated With a fancy description\n              </DialogStackDescription>\n            </DialogStackHeader>\n            <DialogStackFooter className=\"justify-between\">\n              <DialogStackPrevious asChild>\n                <Button variant=\"outline\">Updated Previous</Button>\n              </DialogStackPrevious>\n            </DialogStackFooter>\n          </DialogStackContent>\n        </DialogStackBody>\n      </DialogStack>\n    </>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/dialog-stack-navigation.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/dialog-stack-navigation.tsx",
-      "content": "\"use client\"\n\nimport {\n  DialogStack,\n  DialogStackBody,\n  DialogStackContent,\n  DialogStackDescription,\n  DialogStackFooter,\n  DialogStackHeader,\n  DialogStackNext,\n  DialogStackOverlay,\n  DialogStackPrevious,\n  DialogStackTitle,\n  DialogStackTrigger,\n} from \"../../../../../packages/dialog-stack\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst Example = () => (\n  <DialogStack clickable>\n    <DialogStackTrigger asChild>\n      <Button variant=\"outline\">Show me</Button>\n    </DialogStackTrigger>\n    <DialogStackOverlay />\n\n    <DialogStackBody>\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the first dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-end\">\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the second dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the third dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Previous</Button>\n          </DialogStackPrevious>\n        </DialogStackFooter>\n      </DialogStackContent>\n    </DialogStackBody>\n  </DialogStack>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  DialogStack,\n  DialogStackBody,\n  DialogStackContent,\n  DialogStackDescription,\n  DialogStackFooter,\n  DialogStackHeader,\n  DialogStackNext,\n  DialogStackOverlay,\n  DialogStackPrevious,\n  DialogStackTitle,\n  DialogStackTrigger,\n} from \"../../../../../packages/dialog-stack\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst Example = () => (\n  <DialogStack clickable>\n    <DialogStackTrigger asChild>\n      <Button variant=\"outline\">Updated Show me</Button>\n    </DialogStackTrigger>\n    <DialogStackOverlay />\n\n    <DialogStackBody>\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the first dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-end\">\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Updated Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the second dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Updated Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Updated Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the third dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Updated Previous</Button>\n          </DialogStackPrevious>\n        </DialogStackFooter>\n      </DialogStackContent>\n    </DialogStackBody>\n  </DialogStack>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/dialog-stack-six.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/dialog-stack-six.tsx",
-      "content": "\"use client\"\n\nimport {\n  DialogStack,\n  DialogStackBody,\n  DialogStackContent,\n  DialogStackDescription,\n  DialogStackFooter,\n  DialogStackHeader,\n  DialogStackNext,\n  DialogStackOverlay,\n  DialogStackPrevious,\n  DialogStackTitle,\n  DialogStackTrigger,\n} from \"../../../../../packages/dialog-stack\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst Example = () => (\n  <DialogStack>\n    <DialogStackTrigger asChild>\n      <Button variant=\"outline\">Show me</Button>\n    </DialogStackTrigger>\n    <DialogStackOverlay />\n\n    <DialogStackBody>\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the first dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-end\">\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the second dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the third dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the fourth dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the fifth dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the sixth dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-start\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Previous</Button>\n          </DialogStackPrevious>\n        </DialogStackFooter>\n      </DialogStackContent>\n    </DialogStackBody>\n  </DialogStack>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  DialogStack,\n  DialogStackBody,\n  DialogStackContent,\n  DialogStackDescription,\n  DialogStackFooter,\n  DialogStackHeader,\n  DialogStackNext,\n  DialogStackOverlay,\n  DialogStackPrevious,\n  DialogStackTitle,\n  DialogStackTrigger,\n} from \"../../../../../packages/dialog-stack\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst Example = () => (\n  <DialogStack>\n    <DialogStackTrigger asChild>\n      <Button variant=\"outline\">Updated Show me</Button>\n    </DialogStackTrigger>\n    <DialogStackOverlay />\n\n    <DialogStackBody>\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the first dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-end\">\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Updated Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the second dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Updated Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Updated Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the third dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Updated Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Updated Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the fourth dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Updated Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Updated Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the fifth dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Updated Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Updated Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the sixth dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-start\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Updated Previous</Button>\n          </DialogStackPrevious>\n        </DialogStackFooter>\n      </DialogStackContent>\n    </DialogStackBody>\n  </DialogStack>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/dialog-stack.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/dialog-stack.tsx",
-      "content": "\"use client\"\n\nimport {\n  DialogStack,\n  DialogStackBody,\n  DialogStackContent,\n  DialogStackDescription,\n  DialogStackFooter,\n  DialogStackHeader,\n  DialogStackNext,\n  DialogStackOverlay,\n  DialogStackPrevious,\n  DialogStackTitle,\n  DialogStackTrigger,\n} from \"../../../../../packages/dialog-stack\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst Example = () => (\n  <DialogStack>\n    <DialogStackTrigger asChild>\n      <Button variant=\"outline\">Show me</Button>\n    </DialogStackTrigger>\n    <DialogStackOverlay />\n\n    <DialogStackBody>\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the first dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-end\">\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the second dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>I'm the third dialog</DialogStackTitle>\n          <DialogStackDescription>\n            With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Previous</Button>\n          </DialogStackPrevious>\n        </DialogStackFooter>\n      </DialogStackContent>\n    </DialogStackBody>\n  </DialogStack>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  DialogStack,\n  DialogStackBody,\n  DialogStackContent,\n  DialogStackDescription,\n  DialogStackFooter,\n  DialogStackHeader,\n  DialogStackNext,\n  DialogStackOverlay,\n  DialogStackPrevious,\n  DialogStackTitle,\n  DialogStackTrigger,\n} from \"../../../../../packages/dialog-stack\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst Example = () => (\n  <DialogStack>\n    <DialogStackTrigger asChild>\n      <Button variant=\"outline\">Updated Show me</Button>\n    </DialogStackTrigger>\n    <DialogStackOverlay />\n\n    <DialogStackBody>\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the first dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-end\">\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Updated Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the second dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Updated Previous</Button>\n          </DialogStackPrevious>\n          <DialogStackNext asChild>\n            <Button variant=\"outline\">Updated Next</Button>\n          </DialogStackNext>\n        </DialogStackFooter>\n      </DialogStackContent>\n\n      <DialogStackContent>\n        <DialogStackHeader>\n          <DialogStackTitle>Updated I'm the third dialog</DialogStackTitle>\n          <DialogStackDescription>\n            Updated With a fancy description\n          </DialogStackDescription>\n        </DialogStackHeader>\n        <DialogStackFooter className=\"justify-between\">\n          <DialogStackPrevious asChild>\n            <Button variant=\"outline\">Updated Previous</Button>\n          </DialogStackPrevious>\n        </DialogStackFooter>\n      </DialogStackContent>\n    </DialogStackBody>\n  </DialogStack>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/dropdown-menu.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "type": "registry:ui",
+  "dependencies": [
+    "radix-ui"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\n\ntype PointerDownEvent = Parameters<\n  NonNullable<DropdownMenuPrimitive.DropdownMenuContentProps[\"onPointerDown\"]>\n>[0]\ntype PointerDownOutsideEvent = Parameters<\n  NonNullable<\n    DropdownMenuPrimitive.DropdownMenuContentProps[\"onPointerDownOutside\"]\n  >\n>[0]\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  onPointerDown,\n  onPointerDownOutside,\n  onCloseAutoFocus,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  const isCloseFromMouse = React.useRef<boolean>(false)\n\n  const handlePointerDown = React.useCallback(\n    (e: PointerDownEvent) => {\n      isCloseFromMouse.current = true\n      onPointerDown?.(e)\n    },\n    [onPointerDown]\n  )\n\n  const handlePointerDownOutside = React.useCallback(\n    (e: PointerDownOutsideEvent) => {\n      isCloseFromMouse.current = true\n      onPointerDownOutside?.(e)\n    },\n    [onPointerDownOutside]\n  )\n\n  const handleCloseAutoFocus = React.useCallback(\n    (e: Event) => {\n      if (onCloseAutoFocus) {\n        return onCloseAutoFocus(e)\n      }\n\n      if (!isCloseFromMouse.current) {\n        return\n      }\n\n      e.preventDefault()\n      isCloseFromMouse.current = false\n    },\n    [onCloseAutoFocus]\n  )\n\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-40 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className\n        )}\n        onPointerDown={handlePointerDown}\n        onPointerDownOutside={handlePointerDownOutside}\n        onCloseAutoFocus={handleCloseAutoFocus}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive-foreground dark:data-[variant=destructive]:focus:bg-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:!text-destructive-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon size={16} />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <kbd\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ms-auto -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon\n        size={16}\n        className=\"ml-auto text-muted-foreground/80\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-40 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/public/r/dropzone-custom-empty-state.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/dropzone-custom-empty-state.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { UploadIcon } from \"lucide-react\"\n\nimport {\n  Dropzone,\n  DropzoneContent,\n  DropzoneEmptyState,\n} from \"../../../../../packages/dropzone\"\n\nconst Example = () => {\n  const [files, setFiles] = useState<File[] | undefined>()\n\n  const handleDrop = (files: File[]) => {\n    console.log(files)\n    setFiles(files)\n  }\n\n  return (\n    <Dropzone onDrop={handleDrop} onError={console.error} src={files}>\n      <DropzoneEmptyState>\n        <div className=\"flex w-full items-center gap-4 p-8\">\n          <div className=\"flex size-16 items-center justify-center rounded-lg bg-muted text-muted-foreground\">\n            <UploadIcon size={24} />\n          </div>\n          <div className=\"text-left\">\n            <p className=\"text-sm font-medium\">Upload a file</p>\n            <p className=\"text-xs text-muted-foreground\">\n              Drag and drop or click to upload\n            </p>\n          </div>\n        </div>\n      </DropzoneEmptyState>\n      <DropzoneContent />\n    </Dropzone>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { UploadIcon } from \"lucide-react\"\n\nimport {\n  Dropzone,\n  DropzoneContent,\n  DropzoneEmptyState,\n} from \"../../../../../packages/dropzone\"\n\nconst Example = () => {\n  const [files, setFiles] = useState<File[] | undefined>()\n\n  const handleDrop = (files: File[]) => {\n    console.log(files)\n    setFiles(files)\n  }\n\n  return (\n    <Dropzone onDrop={handleDrop} onError={console.error} src={files}>\n      <DropzoneEmptyState>\n        <div className=\"flex w-full items-center gap-4 p-8\">\n          <div className=\"flex size-16 items-center justify-center rounded-lg bg-muted text-muted-foreground\">\n            <UploadIcon size={24} />\n          </div>\n          <div className=\"text-left\">\n            <p className=\"text-sm font-medium\">Updated Upload a file</p>\n            <p className=\"text-xs text-muted-foreground\">\n              Updated Drag and drop or click to upload\n            </p>\n          </div>\n        </div>\n      </DropzoneEmptyState>\n      <DropzoneContent />\n    </Dropzone>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/dropzone-image-preview.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/dropzone-image-preview.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Dropzone,\n  DropzoneContent,\n  DropzoneEmptyState,\n} from \"../../../../../packages/dropzone\"\n\nconst Example = () => {\n  const [files, setFiles] = useState<File[] | undefined>()\n  const [filePreview, setFilePreview] = useState<string | undefined>()\n\n  const handleDrop = (files: File[]) => {\n    console.log(files)\n    setFiles(files)\n\n    if (files.length > 0) {\n      const reader = new FileReader()\n      reader.onload = (e) => {\n        if (typeof e.target?.result === \"string\") {\n          setFilePreview(e.target?.result)\n        }\n      }\n      reader.readAsDataURL(files[0])\n    }\n  }\n\n  return (\n    <Dropzone\n      accept={{ \"image/*\": [\".png\", \".jpg\", \".jpeg\"] }}\n      onDrop={handleDrop}\n      onError={console.error}\n      src={files}\n    >\n      <DropzoneEmptyState />\n      <DropzoneContent>\n        {filePreview && (\n          <div className=\"h-[102px] w-full\">\n            <img\n              alt=\"Preview\"\n              className=\"absolute top-0 left-0 h-full w-full object-cover\"\n              src={filePreview}\n            />\n          </div>\n        )}\n      </DropzoneContent>\n    </Dropzone>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Dropzone,\n  DropzoneContent,\n  DropzoneEmptyState,\n} from \"../../../../../packages/dropzone\"\n\nconst Example = () => {\n  const [files, setFiles] = useState<File[] | undefined>()\n  const [filePreview, setFilePreview] = useState<string | undefined>()\n\n  const handleDrop = (files: File[]) => {\n    console.log(files)\n    setFiles(files)\n\n    if (files.length > 0) {\n      const reader = new FileReader()\n      reader.onload = (e) => {\n        if (typeof e.target?.result === \"string\") {\n          setFilePreview(e.target?.result)\n        }\n      }\n      reader.readAsDataURL(files[0])\n    }\n  }\n\n  return (\n    <Dropzone\n      accept={{ \"image/*\": [\".png\", \".jpg\", \".jpeg\"] }}\n      onDrop={handleDrop}\n      onError={console.error}\n      src={files}\n    >\n      <DropzoneEmptyState />\n      <DropzoneContent>\n        {filePreview && (\n          <div className=\"h-[102px] w-full\">\n            <img\n              alt=\"Updated Preview\"\n              className=\"absolute top-0 left-0 h-full w-full object-cover\"\n              src={filePreview}\n            />\n          </div>\n        )}\n      </DropzoneContent>\n    </Dropzone>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/editor.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/editor.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport type { Editor, JSONContent } from \"../../../../../packages/editor\"\nimport {\n  EditorBubbleMenu,\n  EditorCharacterCount,\n  EditorClearFormatting,\n  EditorFloatingMenu,\n  EditorFormatBold,\n  EditorFormatCode,\n  EditorFormatItalic,\n  EditorFormatStrike,\n  EditorFormatSubscript,\n  EditorFormatSuperscript,\n  EditorFormatUnderline,\n  EditorLinkSelector,\n  EditorNodeBulletList,\n  EditorNodeCode,\n  EditorNodeHeading1,\n  EditorNodeHeading2,\n  EditorNodeHeading3,\n  EditorNodeOrderedList,\n  EditorNodeQuote,\n  EditorNodeTable,\n  EditorNodeTaskList,\n  EditorNodeText,\n  EditorProvider,\n  EditorSelector,\n  EditorTableColumnAfter,\n  EditorTableColumnBefore,\n  EditorTableColumnDelete,\n  EditorTableColumnMenu,\n  EditorTableDelete,\n  EditorTableFix,\n  EditorTableGlobalMenu,\n  EditorTableHeaderColumnToggle,\n  EditorTableHeaderRowToggle,\n  EditorTableMenu,\n  EditorTableMergeCells,\n  EditorTableRowAfter,\n  EditorTableRowBefore,\n  EditorTableRowDelete,\n  EditorTableRowMenu,\n  EditorTableSplitCell,\n} from \"../../../../../packages/editor\"\n\nconst Example = () => {\n  const [content, setContent] = useState<JSONContent>({\n    type: \"doc\",\n    content: [\n      {\n        type: \"heading\",\n        attrs: { level: 1 },\n        content: [{ type: \"text\", text: \"Heading 1\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 2 },\n        content: [{ type: \"text\", text: \"Heading 2\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 3 },\n        content: [{ type: \"text\", text: \"Heading 3\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 4 },\n        content: [{ type: \"text\", text: \"Heading 4\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 5 },\n        content: [{ type: \"text\", text: \"Heading 5\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 6 },\n        content: [{ type: \"text\", text: \"Heading 6\" }],\n      },\n      { type: \"paragraph\" },\n      { type: \"paragraph\", content: [{ type: \"text\", text: \"Hello, world.\" }] },\n      { type: \"paragraph\" },\n      {\n        type: \"taskList\",\n        content: [\n          {\n            type: \"taskItem\",\n            attrs: { checked: false },\n            content: [\n              {\n                type: \"paragraph\",\n                content: [{ type: \"text\", text: \"This is a todo list\" }],\n              },\n            ],\n          },\n          {\n            type: \"taskItem\",\n            attrs: { checked: false },\n            content: [\n              {\n                type: \"paragraph\",\n                content: [{ type: \"text\", text: \"With two items\" }],\n              },\n            ],\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"bulletList\",\n        content: [\n          {\n            type: \"listItem\",\n            content: [\n              {\n                type: \"paragraph\",\n                content: [{ type: \"text\", text: \"This is an unordered list\" }],\n              },\n              {\n                type: \"bulletList\",\n                content: [\n                  {\n                    type: \"listItem\",\n                    content: [\n                      {\n                        type: \"paragraph\",\n                        content: [{ type: \"text\", text: \"With a nested item\" }],\n                      },\n                    ],\n                  },\n                ],\n              },\n            ],\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"orderedList\",\n        attrs: { start: 1 },\n        content: [\n          {\n            type: \"listItem\",\n            content: [\n              {\n                type: \"paragraph\",\n                content: [{ type: \"text\", text: \"This is an ordered list\" }],\n              },\n            ],\n          },\n          {\n            type: \"listItem\",\n            content: [\n              {\n                type: \"paragraph\",\n                content: [{ type: \"text\", text: \"With two items\" }],\n              },\n            ],\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"blockquote\",\n        content: [\n          {\n            type: \"paragraph\",\n            content: [\n              {\n                type: \"text\",\n                text: \"This is a quote, probably by someone famous.\",\n              },\n            ],\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"paragraph\",\n        content: [\n          { type: \"text\", text: \"This is some \" },\n          { type: \"text\", marks: [{ type: \"code\" }], text: \"inline code\" },\n          { type: \"text\", text: \", while this is a code block:\" },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"codeBlock\",\n        attrs: { language: null },\n        content: [\n          {\n            type: \"text\",\n            text: \"function x () {\\\\n  console.log('hello, world.');\\\\n}\",\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"paragraph\",\n        content: [\n          {\n            type: \"text\",\n            text: \"You can also create complex tables, like so:\",\n          },\n        ],\n      },\n      {\n        type: \"table\",\n        content: [\n          {\n            type: \"tableRow\",\n            content: [\n              {\n                type: \"tableHeader\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Here’s a column\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableHeader\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Another column\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableHeader\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Yet another\" }],\n                  },\n                ],\n              },\n            ],\n          },\n          {\n            type: \"tableRow\",\n            content: [\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Cell 1A\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Cell 2A\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Cell 3A\" }],\n                  },\n                ],\n              },\n            ],\n          },\n          {\n            type: \"tableRow\",\n            content: [\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Cell 1B\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Cell 2B\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Cell 3B\" }],\n                  },\n                ],\n              },\n            ],\n          },\n        ],\n      },\n    ],\n  })\n\n  const handleUpdate = ({ editor }: { editor: Editor }) => {\n    const json = editor.getJSON()\n\n    setContent(json)\n    console.log(JSON.stringify(json))\n  }\n\n  return (\n    <EditorProvider\n      className=\"h-full w-full overflow-y-auto rounded-lg border bg-background p-4\"\n      content={content}\n      onUpdate={handleUpdate}\n      placeholder=\"Start typing...\"\n    >\n      <EditorFloatingMenu>\n        <EditorNodeHeading1 hideName />\n        <EditorNodeBulletList hideName />\n        <EditorNodeQuote hideName />\n        <EditorNodeCode hideName />\n        <EditorNodeTable hideName />\n      </EditorFloatingMenu>\n      <EditorBubbleMenu>\n        <EditorSelector title=\"Text\">\n          <EditorNodeText />\n          <EditorNodeHeading1 />\n          <EditorNodeHeading2 />\n          <EditorNodeHeading3 />\n          <EditorNodeBulletList />\n          <EditorNodeOrderedList />\n          <EditorNodeTaskList />\n          <EditorNodeQuote />\n          <EditorNodeCode />\n        </EditorSelector>\n        <EditorSelector title=\"Format\">\n          <EditorFormatBold />\n          <EditorFormatItalic />\n          <EditorFormatUnderline />\n          <EditorFormatStrike />\n          <EditorFormatCode />\n          <EditorFormatSuperscript />\n          <EditorFormatSubscript />\n        </EditorSelector>\n        <EditorLinkSelector />\n        <EditorClearFormatting />\n      </EditorBubbleMenu>\n      <EditorTableMenu>\n        <EditorTableColumnMenu>\n          <EditorTableColumnBefore />\n          <EditorTableColumnAfter />\n          <EditorTableColumnDelete />\n        </EditorTableColumnMenu>\n        <EditorTableRowMenu>\n          <EditorTableRowBefore />\n          <EditorTableRowAfter />\n          <EditorTableRowDelete />\n        </EditorTableRowMenu>\n        <EditorTableGlobalMenu>\n          <EditorTableHeaderColumnToggle />\n          <EditorTableHeaderRowToggle />\n          <EditorTableDelete />\n          <EditorTableMergeCells />\n          <EditorTableSplitCell />\n          <EditorTableFix />\n        </EditorTableGlobalMenu>\n      </EditorTableMenu>\n      <EditorCharacterCount.Words>Words: </EditorCharacterCount.Words>\n    </EditorProvider>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport type { Editor, JSONContent } from \"../../../../../packages/editor\"\nimport {\n  EditorBubbleMenu,\n  EditorCharacterCount,\n  EditorClearFormatting,\n  EditorFloatingMenu,\n  EditorFormatBold,\n  EditorFormatCode,\n  EditorFormatItalic,\n  EditorFormatStrike,\n  EditorFormatSubscript,\n  EditorFormatSuperscript,\n  EditorFormatUnderline,\n  EditorLinkSelector,\n  EditorNodeBulletList,\n  EditorNodeCode,\n  EditorNodeHeading1,\n  EditorNodeHeading2,\n  EditorNodeHeading3,\n  EditorNodeOrderedList,\n  EditorNodeQuote,\n  EditorNodeTable,\n  EditorNodeTaskList,\n  EditorNodeText,\n  EditorProvider,\n  EditorSelector,\n  EditorTableColumnAfter,\n  EditorTableColumnBefore,\n  EditorTableColumnDelete,\n  EditorTableColumnMenu,\n  EditorTableDelete,\n  EditorTableFix,\n  EditorTableGlobalMenu,\n  EditorTableHeaderColumnToggle,\n  EditorTableHeaderRowToggle,\n  EditorTableMenu,\n  EditorTableMergeCells,\n  EditorTableRowAfter,\n  EditorTableRowBefore,\n  EditorTableRowDelete,\n  EditorTableRowMenu,\n  EditorTableSplitCell,\n} from \"../../../../../packages/editor\"\n\nconst Example = () => {\n  const [content, setContent] = useState<JSONContent>({\n    type: \"doc\",\n    content: [\n      {\n        type: \"heading\",\n        attrs: { level: 1 },\n        content: [{ type: \"text\", text: \"Updated Heading 1\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 2 },\n        content: [{ type: \"text\", text: \"Updated Heading 2\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 3 },\n        content: [{ type: \"text\", text: \"Updated Heading 3\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 4 },\n        content: [{ type: \"text\", text: \"Updated Heading 4\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 5 },\n        content: [{ type: \"text\", text: \"Updated Heading 5\" }],\n      },\n      {\n        type: \"heading\",\n        attrs: { level: 6 },\n        content: [{ type: \"text\", text: \"Updated Heading 6\" }],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"paragraph\",\n        content: [{ type: \"text\", text: \"Updated Hello, world.\" }],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"taskList\",\n        content: [\n          {\n            type: \"taskItem\",\n            attrs: { checked: false },\n            content: [\n              {\n                type: \"paragraph\",\n                content: [\n                  { type: \"text\", text: \"Updated This is a todo list\" },\n                ],\n              },\n            ],\n          },\n          {\n            type: \"taskItem\",\n            attrs: { checked: false },\n            content: [\n              {\n                type: \"paragraph\",\n                content: [{ type: \"text\", text: \"Updated With two items\" }],\n              },\n            ],\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"bulletList\",\n        content: [\n          {\n            type: \"listItem\",\n            content: [\n              {\n                type: \"paragraph\",\n                content: [\n                  { type: \"text\", text: \"Updated This is an unordered list\" },\n                ],\n              },\n              {\n                type: \"bulletList\",\n                content: [\n                  {\n                    type: \"listItem\",\n                    content: [\n                      {\n                        type: \"paragraph\",\n                        content: [\n                          { type: \"text\", text: \"Updated With a nested item\" },\n                        ],\n                      },\n                    ],\n                  },\n                ],\n              },\n            ],\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"orderedList\",\n        attrs: { start: 1 },\n        content: [\n          {\n            type: \"listItem\",\n            content: [\n              {\n                type: \"paragraph\",\n                content: [\n                  { type: \"text\", text: \"Updated This is an ordered list\" },\n                ],\n              },\n            ],\n          },\n          {\n            type: \"listItem\",\n            content: [\n              {\n                type: \"paragraph\",\n                content: [{ type: \"text\", text: \"Updated With two items\" }],\n              },\n            ],\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"blockquote\",\n        content: [\n          {\n            type: \"paragraph\",\n            content: [\n              {\n                type: \"text\",\n                text: \"Updated This is a quote, probably by someone famous.\",\n              },\n            ],\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"paragraph\",\n        content: [\n          { type: \"text\", text: \"Updated This is some \" },\n          {\n            type: \"text\",\n            marks: [{ type: \"code\" }],\n            text: \"Updated inline code\",\n          },\n          { type: \"text\", text: \"Updated , while this is a code block:\" },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"codeBlock\",\n        attrs: { language: null },\n        content: [\n          {\n            type: \"text\",\n            text: \"Updated function x () {\\\\n  console.log('hello, world.');\\\\n}\",\n          },\n        ],\n      },\n      { type: \"paragraph\" },\n      {\n        type: \"paragraph\",\n        content: [\n          {\n            type: \"text\",\n            text: \"Updated You can also create complex tables, like so:\",\n          },\n        ],\n      },\n      {\n        type: \"table\",\n        content: [\n          {\n            type: \"tableRow\",\n            content: [\n              {\n                type: \"tableHeader\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [\n                      { type: \"text\", text: \"Updated Here’s a column\" },\n                    ],\n                  },\n                ],\n              },\n              {\n                type: \"tableHeader\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Updated Another column\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableHeader\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Updated Yet another\" }],\n                  },\n                ],\n              },\n            ],\n          },\n          {\n            type: \"tableRow\",\n            content: [\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Updated Cell 1A\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Updated Cell 2A\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Updated Cell 3A\" }],\n                  },\n                ],\n              },\n            ],\n          },\n          {\n            type: \"tableRow\",\n            content: [\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Updated Cell 1B\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Updated Cell 2B\" }],\n                  },\n                ],\n              },\n              {\n                type: \"tableCell\",\n                attrs: { colspan: 1, rowspan: 1, colwidth: null },\n                content: [\n                  {\n                    type: \"paragraph\",\n                    content: [{ type: \"text\", text: \"Updated Cell 3B\" }],\n                  },\n                ],\n              },\n            ],\n          },\n        ],\n      },\n    ],\n  })\n\n  const handleUpdate = ({ editor }: { editor: Editor }) => {\n    const json = editor.getJSON()\n\n    setContent(json)\n    console.log(JSON.stringify(json))\n  }\n\n  return (\n    <EditorProvider\n      className=\"h-full w-full overflow-y-auto rounded-lg border bg-background p-4\"\n      content={content}\n      onUpdate={handleUpdate}\n      placeholder=\"Updated Start typing...\"\n    >\n      <EditorFloatingMenu>\n        <EditorNodeHeading1 hideName />\n        <EditorNodeBulletList hideName />\n        <EditorNodeQuote hideName />\n        <EditorNodeCode hideName />\n        <EditorNodeTable hideName />\n      </EditorFloatingMenu>\n      <EditorBubbleMenu>\n        <EditorSelector title=\"Updated Text\">\n          <EditorNodeText />\n          <EditorNodeHeading1 />\n          <EditorNodeHeading2 />\n          <EditorNodeHeading3 />\n          <EditorNodeBulletList />\n          <EditorNodeOrderedList />\n          <EditorNodeTaskList />\n          <EditorNodeQuote />\n          <EditorNodeCode />\n        </EditorSelector>\n        <EditorSelector title=\"Updated Format\">\n          <EditorFormatBold />\n          <EditorFormatItalic />\n          <EditorFormatUnderline />\n          <EditorFormatStrike />\n          <EditorFormatCode />\n          <EditorFormatSuperscript />\n          <EditorFormatSubscript />\n        </EditorSelector>\n        <EditorLinkSelector />\n        <EditorClearFormatting />\n      </EditorBubbleMenu>\n      <EditorTableMenu>\n        <EditorTableColumnMenu>\n          <EditorTableColumnBefore />\n          <EditorTableColumnAfter />\n          <EditorTableColumnDelete />\n        </EditorTableColumnMenu>\n        <EditorTableRowMenu>\n          <EditorTableRowBefore />\n          <EditorTableRowAfter />\n          <EditorTableRowDelete />\n        </EditorTableRowMenu>\n        <EditorTableGlobalMenu>\n          <EditorTableHeaderColumnToggle />\n          <EditorTableHeaderRowToggle />\n          <EditorTableDelete />\n          <EditorTableMergeCells />\n          <EditorTableSplitCell />\n          <EditorTableFix />\n        </EditorTableGlobalMenu>\n      </EditorTableMenu>\n      <EditorCharacterCount.Words>Updated Words: </EditorCharacterCount.Words>\n    </EditorProvider>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],