love-ui 1.2.12 → 1.2.14

package/public/r/accordion-single.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/accordion-single.tsx",
-      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport default function AccordionSingleDemo() {\n  return (\n    <Accordion className=\"w-full\" multiple={false}>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>What is Base UI?</AccordionTrigger>\n        <AccordionPanel>\n          Base UI is a library of high-quality unstyled React components for\n          design systems and web apps.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>How do I get started?</AccordionTrigger>\n        <AccordionPanel>\n          Head to the \"Quick start\" guide in the docs. If you've used unstyled\n          libraries before, you'll feel at home.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Can I use it for my project?</AccordionTrigger>\n        <AccordionPanel>\n          Of course! Base UI is free and open source.\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport default function AccordionSingleDemo() {\n  return (\n    <Accordion className=\"w-full\" multiple={false}>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Updated What is Base UI?</AccordionTrigger>\n        <AccordionPanel>\n          Updated Base UI is a library of high-quality unstyled React components\n          for design systems and web apps.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Updated How do I get started?</AccordionTrigger>\n        <AccordionPanel>\n          Updated Head to the \"Quick start\" guide in the docs. If you've used\n          unstyled libraries before, you'll feel at home.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>\n          Updated Can I use it for my project?\n        </AccordionTrigger>\n        <AccordionPanel>\n          Updated Of course! Base UI is free and open source.\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/alert-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/alert-demo.tsx",
-      "content": "import {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <Alert>\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        <p>Describe what can be done about it here.</p>\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "content": "import {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <Alert>\n      <AlertTitle>Updated Heads up!</AlertTitle>\n      <AlertDescription>\n        <p>Updated Describe what can be done about it here.</p>\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/alert-dialog-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/alert-dialog-demo.tsx",
-      "content": "import {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger render={<Button variant=\"destructive-outline\" />}>\n        Delete Account\n      </AlertDialogTrigger>\n      <AlertDialogPopup>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogClose render={<Button variant=\"ghost\" />}>\n            Cancel\n          </AlertDialogClose>\n          <AlertDialogClose render={<Button variant=\"destructive\" />}>\n            Delete Account\n          </AlertDialogClose>\n        </AlertDialogFooter>\n      </AlertDialogPopup>\n    </AlertDialog>\n  )\n}\n",
+      "content": "import {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger render={<Button variant=\"destructive-outline\" />}>\n        Updated Delete Account\n      </AlertDialogTrigger>\n      <AlertDialogPopup>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Updated Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            Updated This action cannot be undone. This will permanently delete\n            your account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogClose render={<Button variant=\"ghost\" />}>\n            Updated Cancel\n          </AlertDialogClose>\n          <AlertDialogClose render={<Button variant=\"destructive\" />}>\n            Updated Delete Account\n          </AlertDialogClose>\n        </AlertDialogFooter>\n      </AlertDialogPopup>\n    </AlertDialog>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/alert-error.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/alert-error.tsx",
-      "content": "import { CircleAlertIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertWarning() {\n  return (\n    <Alert variant=\"error\">\n      <CircleAlertIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "content": "import { CircleAlertIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertWarning() {\n  return (\n    <Alert variant=\"error\">\n      <CircleAlertIcon />\n      <AlertTitle>Updated Heads up!</AlertTitle>\n      <AlertDescription>\n        Updated Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/alert-info.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/alert-info.tsx",
-      "content": "import { InfoIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertInfo() {\n  return (\n    <Alert variant=\"info\">\n      <InfoIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "content": "import { InfoIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertInfo() {\n  return (\n    <Alert variant=\"info\">\n      <InfoIcon />\n      <AlertTitle>Updated Heads up!</AlertTitle>\n      <AlertDescription>\n        Updated Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/alert-success.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/alert-success.tsx",
-      "content": "import { CircleCheckIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AlertSuccess() {\n  return (\n    <Alert variant=\"success\">\n      <CircleCheckIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "content": "import { CircleCheckIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AlertSuccess() {\n  return (\n    <Alert variant=\"success\">\n      <CircleCheckIcon />\n      <AlertTitle>Updated Heads up!</AlertTitle>\n      <AlertDescription>\n        Updated Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/alert-warning.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/alert-warning.tsx",
-      "content": "import { TriangleAlertIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertWarning() {\n  return (\n    <Alert variant=\"warning\">\n      <TriangleAlertIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "content": "import { TriangleAlertIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertWarning() {\n  return (\n    <Alert variant=\"warning\">\n      <TriangleAlertIcon />\n      <AlertTitle>Updated Heads up!</AlertTitle>\n      <AlertDescription>\n        Updated Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/alert-with-icon-action.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/alert-with-icon-action.tsx",
-      "content": "import { InfoIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AlertWithIconAction() {\n  return (\n    <Alert>\n      <InfoIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n      <AlertAction>\n        <Button variant=\"ghost\" size=\"xs\">\n          Dismiss\n        </Button>\n        <Button size=\"xs\">Ok</Button>\n      </AlertAction>\n    </Alert>\n  )\n}\n",
+      "content": "import { InfoIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AlertWithIconAction() {\n  return (\n    <Alert>\n      <InfoIcon />\n      <AlertTitle>Updated Heads up!</AlertTitle>\n      <AlertDescription>\n        Updated Describe what can be done about it here.\n      </AlertDescription>\n      <AlertAction>\n        <Button variant=\"ghost\" size=\"xs\">\n          Updated Dismiss\n        </Button>\n        <Button size=\"xs\">Updated Ok</Button>\n      </AlertAction>\n    </Alert>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/alert-with-icon.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/alert-with-icon.tsx",
-      "content": "import { InfoIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertWithIcon() {\n  return (\n    <Alert>\n      <InfoIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "content": "import { InfoIcon } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport default function AlertWithIcon() {\n  return (\n    <Alert>\n      <InfoIcon />\n      <AlertTitle>Updated Heads up!</AlertTitle>\n      <AlertDescription>\n        Updated Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/announcement-tagless.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/announcement-tagless.tsx",
-      "content": "\"use client\"\n\nimport { ArrowUpRightIcon } from \"lucide-react\"\n\nimport {\n  Announcement,\n  AnnouncementTitle,\n} from \"../../../../../packages/announcement\"\n\nconst Example = () => (\n  <Announcement>\n    <AnnouncementTitle>\n      New feature added\n      <ArrowUpRightIcon className=\"shrink-0 text-muted-foreground\" size={16} />\n    </AnnouncementTitle>\n  </Announcement>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { ArrowUpRightIcon } from \"lucide-react\"\n\nimport {\n  Announcement,\n  AnnouncementTitle,\n} from \"../../../../../packages/announcement\"\n\nconst Example = () => (\n  <Announcement>\n    <AnnouncementTitle>\n      Updated New feature added\n      <ArrowUpRightIcon className=\"shrink-0 text-muted-foreground\" size={16} />\n    </AnnouncementTitle>\n  </Announcement>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/announcement-themes.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/announcement-themes.tsx",
-      "content": "\"use client\"\n\nimport { ArrowUpRightIcon } from \"lucide-react\"\n\nimport {\n  Announcement,\n  AnnouncementTag,\n  AnnouncementTitle,\n} from \"../../../../../packages/announcement\"\n\nconst Example = () => (\n  <>\n    <Announcement\n      className=\"bg-rose-100 text-rose-700 dark:bg-rose-700 dark:text-rose-100\"\n      themed\n    >\n      <AnnouncementTag>Error</AnnouncementTag>\n      <AnnouncementTitle>\n        Something went wrong\n        <ArrowUpRightIcon className=\"shrink-0 opacity-70\" size={16} />\n      </AnnouncementTitle>\n    </Announcement>\n\n    <Announcement\n      className=\"bg-emerald-100 text-emerald-700 dark:bg-emerald-700 dark:text-emerald-100\"\n      themed\n    >\n      <AnnouncementTag>Success</AnnouncementTag>\n      <AnnouncementTitle>\n        New feature added\n        <ArrowUpRightIcon className=\"shrink-0 opacity-70\" size={16} />\n      </AnnouncementTitle>\n    </Announcement>\n\n    <Announcement\n      className=\"bg-orange-100 text-orange-700 dark:bg-orange-700 dark:text-orange-100\"\n      themed\n    >\n      <AnnouncementTag>Warning</AnnouncementTag>\n      <AnnouncementTitle>\n        Approaching your limit\n        <ArrowUpRightIcon className=\"shrink-0 opacity-70\" size={16} />\n      </AnnouncementTitle>\n    </Announcement>\n\n    <Announcement\n      className=\"bg-sky-100 text-sky-700 dark:bg-sky-700 dark:text-sky-100\"\n      themed\n    >\n      <AnnouncementTag>Info</AnnouncementTag>\n      <AnnouncementTitle>\n        Welcome to the platform\n        <ArrowUpRightIcon className=\"shrink-0 opacity-70\" size={16} />\n      </AnnouncementTitle>\n    </Announcement>\n  </>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { ArrowUpRightIcon } from \"lucide-react\"\n\nimport {\n  Announcement,\n  AnnouncementTag,\n  AnnouncementTitle,\n} from \"../../../../../packages/announcement\"\n\nconst Example = () => (\n  <>\n    <Announcement\n      className=\"bg-rose-100 text-rose-700 dark:bg-rose-700 dark:text-rose-100\"\n      themed\n    >\n      <AnnouncementTag>Updated Error</AnnouncementTag>\n      <AnnouncementTitle>\n        Updated Something went wrong\n        <ArrowUpRightIcon className=\"shrink-0 opacity-70\" size={16} />\n      </AnnouncementTitle>\n    </Announcement>\n\n    <Announcement\n      className=\"bg-emerald-100 text-emerald-700 dark:bg-emerald-700 dark:text-emerald-100\"\n      themed\n    >\n      <AnnouncementTag>Updated Success</AnnouncementTag>\n      <AnnouncementTitle>\n        Updated New feature added\n        <ArrowUpRightIcon className=\"shrink-0 opacity-70\" size={16} />\n      </AnnouncementTitle>\n    </Announcement>\n\n    <Announcement\n      className=\"bg-orange-100 text-orange-700 dark:bg-orange-700 dark:text-orange-100\"\n      themed\n    >\n      <AnnouncementTag>Updated Warning</AnnouncementTag>\n      <AnnouncementTitle>\n        Updated Approaching your limit\n        <ArrowUpRightIcon className=\"shrink-0 opacity-70\" size={16} />\n      </AnnouncementTitle>\n    </Announcement>\n\n    <Announcement\n      className=\"bg-sky-100 text-sky-700 dark:bg-sky-700 dark:text-sky-100\"\n      themed\n    >\n      <AnnouncementTag>Updated Info</AnnouncementTag>\n      <AnnouncementTitle>\n        Updated Welcome to the platform\n        <ArrowUpRightIcon className=\"shrink-0 opacity-70\" size={16} />\n      </AnnouncementTitle>\n    </Announcement>\n  </>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/announcement.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/announcement.tsx",
-      "content": "\"use client\"\n\nimport { ArrowUpRightIcon } from \"lucide-react\"\n\nimport {\n  Announcement,\n  AnnouncementTag,\n  AnnouncementTitle,\n} from \"../../../../../packages/announcement\"\n\nconst Example = () => (\n  <Announcement>\n    <AnnouncementTag>Latest update</AnnouncementTag>\n    <AnnouncementTitle>\n      New feature added\n      <ArrowUpRightIcon className=\"shrink-0 text-muted-foreground\" size={16} />\n    </AnnouncementTitle>\n  </Announcement>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { ArrowUpRightIcon } from \"lucide-react\"\n\nimport {\n  Announcement,\n  AnnouncementTag,\n  AnnouncementTitle,\n} from \"../../../../../packages/announcement\"\n\nconst Example = () => (\n  <Announcement>\n    <AnnouncementTag>Updated Latest update</AnnouncementTag>\n    <AnnouncementTitle>\n      Updated New feature added\n      <ArrowUpRightIcon className=\"shrink-0 text-muted-foreground\" size={16} />\n    </AnnouncementTitle>\n  </Announcement>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-async.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-async.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui-components/react/autocomplete\"\nimport { LoaderCircleIcon } from \"lucide-react\"\n\nimport {\n  Autocomplete,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteStatus,\n} from \"@/registry/default/ui/autocomplete\"\n\ntype Movie = { id: string; title: string; year: number }\nconst top100Movies: Movie[] = [\n  { id: \"1\", title: \"The Shawshank Redemption\", year: 1994 },\n  { id: \"2\", title: \"The Godfather\", year: 1972 },\n  { id: \"3\", title: \"The Dark Knight\", year: 2008 },\n  { id: \"4\", title: \"The Godfather Part II\", year: 1974 },\n  { id: \"5\", title: \"12 Angry Men\", year: 1957 },\n  { id: \"8\", title: \"Pulp Fiction\", year: 1994 },\n  { id: \"11\", title: \"Forrest Gump\", year: 1994 },\n  { id: \"14\", title: \"Inception\", year: 2010 },\n]\n\nasync function searchMovies(\n  query: string,\n  filter: (item: string, query: string) => boolean\n): Promise<Movie[]> {\n  await new Promise((resolve) => setTimeout(resolve, Math.random() * 500 + 100))\n  if (Math.random() < 0.01 || query === \"will_error\") {\n    throw new Error(\"Network error\")\n  }\n  return top100Movies.filter(\n    (movie) =>\n      filter(movie.title, query) || filter(movie.year.toString(), query)\n  )\n}\n\nexport default function AutocompleteAsync() {\n  const [searchValue, setSearchValue] = React.useState(\"\")\n  const [isLoading, setIsLoading] = React.useState(false)\n  const [searchResults, setSearchResults] = React.useState<Movie[]>([])\n  const [error, setError] = React.useState<string | null>(null)\n\n  const { contains } = AutocompletePrimitive.useFilter({ sensitivity: \"base\" })\n\n  React.useEffect(() => {\n    if (!searchValue) {\n      setSearchResults([])\n      setIsLoading(false)\n      return\n    }\n\n    setIsLoading(true)\n    setError(null)\n    let ignore = false\n\n    const timeoutId = setTimeout(async () => {\n      try {\n        const results = await searchMovies(searchValue, contains)\n        if (!ignore) setSearchResults(results)\n      } catch (err) {\n        if (!ignore) {\n          setError(\"Failed to fetch movies. Please try again.\")\n          setSearchResults([])\n        }\n      } finally {\n        if (!ignore) setIsLoading(false)\n      }\n    }, 300)\n\n    return () => {\n      clearTimeout(timeoutId)\n      ignore = true\n    }\n  }, [searchValue, contains])\n\n  let status: React.ReactNode = `${searchResults.length} result${searchResults.length === 1 ? \"\" : \"s\"} found`\n  if (isLoading) {\n    status = (\n      <span className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n        Searching...\n        <LoaderCircleIcon className=\"size-4 animate-spin\" aria-hidden />\n      </span>\n    )\n  } else if (error) {\n    status = (\n      <span className=\"text-sm font-normal text-destructive\">{error}</span>\n    )\n  } else if (searchResults.length === 0 && searchValue) {\n    status = (\n      <span className=\"text-sm font-normal text-muted-foreground\">\n        Movie or year \"{searchValue}\" does not exist in the Top 100 IMDb movies\n      </span>\n    )\n  }\n\n  const shouldRenderPopup = searchValue !== \"\"\n\n  return (\n    <Autocomplete\n      items={searchResults}\n      value={searchValue}\n      onValueChange={setSearchValue}\n      itemToStringValue={(item: unknown) => (item as Movie).title}\n      filter={null}\n    >\n      <AutocompleteInput placeholder=\"e.g. Pulp Fiction or 1994\" />\n      {shouldRenderPopup && (\n        <AutocompletePopup aria-busy={isLoading || undefined}>\n          <AutocompleteStatus className=\"text-muted-foreground\">\n            {status}\n          </AutocompleteStatus>\n          <AutocompleteList>\n            {(movie: Movie) => (\n              <AutocompleteItem key={movie.id} value={movie as any}>\n                <div className=\"flex w-full flex-col gap-1\">\n                  <div className=\"font-medium\">{movie.title}</div>\n                  <div className=\"text-xs text-muted-foreground\">\n                    {movie.year}\n                  </div>\n                </div>\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompletePopup>\n      )}\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui-components/react/autocomplete\"\nimport { LoaderCircleIcon } from \"lucide-react\"\n\nimport {\n  Autocomplete,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteStatus,\n} from \"@/registry/default/ui/autocomplete\"\n\ntype Movie = { id: string; title: string; year: number }\nconst top100Movies: Movie[] = [\n  { id: \"1\", title: \"Updated The Shawshank Redemption\", year: 1994 },\n  { id: \"2\", title: \"Updated The Godfather\", year: 1972 },\n  { id: \"3\", title: \"Updated The Dark Knight\", year: 2008 },\n  { id: \"4\", title: \"Updated The Godfather Part II\", year: 1974 },\n  { id: \"5\", title: \"Updated 12 Angry Men\", year: 1957 },\n  { id: \"8\", title: \"Updated Pulp Fiction\", year: 1994 },\n  { id: \"11\", title: \"Updated Forrest Gump\", year: 1994 },\n  { id: \"14\", title: \"Updated Inception\", year: 2010 },\n]\n\nasync function searchMovies(\n  query: string,\n  filter: (item: string, query: string) => boolean\n): Promise<Movie[]> {\n  await new Promise((resolve) => setTimeout(resolve, Math.random() * 500 + 100))\n  if (Math.random() < 0.01 || query === \"will_error\") {\n    throw new Error(\"Network error\")\n  }\n  return top100Movies.filter(\n    (movie) =>\n      filter(movie.title, query) || filter(movie.year.toString(), query)\n  )\n}\n\nexport default function AutocompleteAsync() {\n  const [searchValue, setSearchValue] = React.useState(\"\")\n  const [isLoading, setIsLoading] = React.useState(false)\n  const [searchResults, setSearchResults] = React.useState<Movie[]>([])\n  const [error, setError] = React.useState<string | null>(null)\n\n  const { contains } = AutocompletePrimitive.useFilter({ sensitivity: \"base\" })\n\n  React.useEffect(() => {\n    if (!searchValue) {\n      setSearchResults([])\n      setIsLoading(false)\n      return\n    }\n\n    setIsLoading(true)\n    setError(null)\n    let ignore = false\n\n    const timeoutId = setTimeout(async () => {\n      try {\n        const results = await searchMovies(searchValue, contains)\n        if (!ignore) setSearchResults(results)\n      } catch (err) {\n        if (!ignore) {\n          setError(\"Failed to fetch movies. Please try again.\")\n          setSearchResults([])\n        }\n      } finally {\n        if (!ignore) setIsLoading(false)\n      }\n    }, 300)\n\n    return () => {\n      clearTimeout(timeoutId)\n      ignore = true\n    }\n  }, [searchValue, contains])\n\n  let status: React.ReactNode = `${searchResults.length} result${searchResults.length === 1 ? \"\" : \"s\"} found`\n  if (isLoading) {\n    status = (\n      <span className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n        Updated Searching...\n        <LoaderCircleIcon className=\"size-4 animate-spin\" aria-hidden />\n      </span>\n    )\n  } else if (error) {\n    status = (\n      <span className=\"text-sm font-normal text-destructive\">{error}</span>\n    )\n  } else if (searchResults.length === 0 && searchValue) {\n    status = (\n      <span className=\"text-sm font-normal text-muted-foreground\">\n        Updated Movie or year \"{searchValue}Updated \" does not exist in the Top\n        100 IMDb movies\n      </span>\n    )\n  }\n\n  const shouldRenderPopup = searchValue !== \"\"\n\n  return (\n    <Autocomplete\n      items={searchResults}\n      value={searchValue}\n      onValueChange={setSearchValue}\n      itemToStringValue={(item: unknown) => (item as Movie).title}\n      filter={null}\n    >\n      <AutocompleteInput placeholder=\"Updated e.g. Pulp Fiction or 1994\" />\n      {shouldRenderPopup && (\n        <AutocompletePopup aria-busy={isLoading || undefined}>\n          <AutocompleteStatus className=\"text-muted-foreground\">\n            {status}\n          </AutocompleteStatus>\n          <AutocompleteList>\n            {(movie: Movie) => (\n              <AutocompleteItem key={movie.id} value={movie as any}>\n                <div className=\"flex w-full flex-col gap-1\">\n                  <div className=\"font-medium\">{movie.title}</div>\n                  <div className=\"text-xs text-muted-foreground\">\n                    {movie.year}\n                  </div>\n                </div>\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompletePopup>\n      )}\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-autohighlight.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-autohighlight.tsx",
-      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteAutohighlight() {\n  return (\n    <Autocomplete items={items} autoHighlight>\n      <AutocompleteInput\n        placeholder=\"Search items…\"\n        aria-label=\"Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteAutohighlight() {\n  return (\n    <Autocomplete items={items} autoHighlight>\n      <AutocompleteInput\n        placeholder=\"Updated Search items…\"\n        aria-label=\"Updated Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-demo.tsx",
-      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteDemo() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        placeholder=\"Search items…\"\n        aria-label=\"Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteDemo() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        placeholder=\"Updated Search items…\"\n        aria-label=\"Updated Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-disabled.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-disabled.tsx",
-      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteDisabled() {\n  return (\n    <Autocomplete items={items} disabled>\n      <AutocompleteInput\n        placeholder=\"Search items…\"\n        aria-label=\"Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteDisabled() {\n  return (\n    <Autocomplete items={items} disabled>\n      <AutocompleteInput\n        placeholder=\"Updated Search items…\"\n        aria-label=\"Updated Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-form.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteForm() {\n  const [loading, setLoading] = React.useState(false)\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    const selectedItem = formData.get(\"item\")\n    // Base UI extracts the 'label' property from objects, so we need to find the corresponding value\n    const itemValue =\n      items.find((item) => item.label === selectedItem)?.value || selectedItem\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Favorite item: ${itemValue || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Favorite item</FieldLabel>\n        <Autocomplete items={items} name=\"item\" disabled={loading} required>\n          <AutocompleteInput placeholder=\"Search items…\" />\n          <AutocompletePopup>\n            <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n            <AutocompleteList>\n              {(item) => (\n                <AutocompleteItem key={item.value} value={item}>\n                  {item.label}\n                </AutocompleteItem>\n              )}\n            </AutocompleteList>\n          </AutocompletePopup>\n        </Autocomplete>\n        <FieldError>Please select a item.</FieldError>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Submit\n      </Button>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteForm() {\n  const [loading, setLoading] = React.useState(false)\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    const selectedItem = formData.get(\"item\")\n    // Base UI extracts the 'label' property from objects, so we need to find the corresponding value\n    const itemValue =\n      items.find((item) => item.label === selectedItem)?.value || selectedItem\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Favorite item: ${itemValue || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Updated Favorite item</FieldLabel>\n        <Autocomplete items={items} name=\"item\" disabled={loading} required>\n          <AutocompleteInput placeholder=\"Updated Search items…\" />\n          <AutocompletePopup>\n            <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n            <AutocompleteList>\n              {(item) => (\n                <AutocompleteItem key={item.value} value={item}>\n                  {item.label}\n                </AutocompleteItem>\n              )}\n            </AutocompleteList>\n          </AutocompletePopup>\n        </Autocomplete>\n        <FieldError>Updated Please select a item.</FieldError>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-grouped.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-grouped.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\"\n\n// Grouped items demo\ntype Tag = { id: string; label: string; group: \"Status\" | \"Priority\" | \"Team\" }\ntype TagGroup = { value: string; items: Tag[] }\n\nconst tagsData: Tag[] = [\n  // Status\n  { id: \"s-open\", label: \"Open\", group: \"Status\" },\n  { id: \"s-in-progress\", label: \"In progress\", group: \"Status\" },\n  { id: \"s-blocked\", label: \"Blocked\", group: \"Status\" },\n  { id: \"s-resolved\", label: \"Resolved\", group: \"Status\" },\n  { id: \"s-closed\", label: \"Closed\", group: \"Status\" },\n  // Priority\n  { id: \"p-low\", label: \"Low\", group: \"Priority\" },\n  { id: \"p-medium\", label: \"Medium\", group: \"Priority\" },\n  { id: \"p-high\", label: \"High\", group: \"Priority\" },\n  { id: \"p-urgent\", label: \"Urgent\", group: \"Priority\" },\n  // Team\n  { id: \"t-design\", label: \"Design\", group: \"Team\" },\n  { id: \"t-frontend\", label: \"Frontend\", group: \"Team\" },\n  { id: \"t-backend\", label: \"Backend\", group: \"Team\" },\n  { id: \"t-devops\", label: \"DevOps\", group: \"Team\" },\n  { id: \"t-qa\", label: \"QA\", group: \"Team\" },\n  { id: \"t-mobile\", label: \"Mobile\", group: \"Team\" },\n  { id: \"t-data\", label: \"Data\", group: \"Team\" },\n  { id: \"t-security\", label: \"Security\", group: \"Team\" },\n  { id: \"t-platform\", label: \"Platform\", group: \"Team\" },\n  { id: \"t-infra\", label: \"Infrastructure\", group: \"Team\" },\n  { id: \"t-product\", label: \"Product\", group: \"Team\" },\n  { id: \"t-marketing\", label: \"Marketing\", group: \"Team\" },\n  { id: \"t-sales\", label: \"Sales\", group: \"Team\" },\n  { id: \"t-support\", label: \"Support\", group: \"Team\" },\n  { id: \"t-research\", label: \"Research\", group: \"Team\" },\n  { id: \"t-content\", label: \"Content\", group: \"Team\" },\n  { id: \"t-analytics\", label: \"Analytics\", group: \"Team\" },\n  { id: \"t-operations\", label: \"Operations\", group: \"Team\" },\n  { id: \"t-finance\", label: \"Finance\", group: \"Team\" },\n  { id: \"t-hr\", label: \"HR\", group: \"Team\" },\n  { id: \"t-legal\", label: \"Legal\", group: \"Team\" },\n  { id: \"t-growth\", label: \"Growth\", group: \"Team\" },\n  { id: \"t-partner\", label: \"Partner\", group: \"Team\" },\n  { id: \"t-community\", label: \"Community\", group: \"Team\" },\n  { id: \"t-docs\", label: \"Docs\", group: \"Team\" },\n  { id: \"t-l10n\", label: \"Localization\", group: \"Team\" },\n  { id: \"t-a11y\", label: \"Accessibility\", group: \"Team\" },\n  { id: \"t-sre\", label: \"SRE\", group: \"Team\" },\n  { id: \"t-release\", label: \"Release\", group: \"Team\" },\n  { id: \"t-architecture\", label: \"Architecture\", group: \"Team\" },\n  { id: \"t-ux\", label: \"UX\", group: \"Team\" },\n  { id: \"t-ui\", label: \"UI\", group: \"Team\" },\n  { id: \"t-management\", label: \"Management\", group: \"Team\" },\n]\n\nfunction groupTags(tags: Tag[]): TagGroup[] {\n  const groups: Record<string, Tag[]> = {}\n  for (const t of tags) {\n    ;(groups[t.group] ??= []).push(t)\n  }\n  const order: Array<TagGroup[\"value\"]> = [\"Status\", \"Priority\", \"Team\"]\n  return order.map((value) => ({ value, items: groups[value] ?? [] }))\n}\n\nconst groupedTags: TagGroup[] = groupTags(tagsData)\n\nexport default function AutocompleteGrouped() {\n  return (\n    <Autocomplete items={groupedTags}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <AutocompleteInput\n          placeholder=\"e.g. feature\"\n          aria-label=\"Search tags\"\n        />\n      </div>\n      <AutocompletePopup>\n        <AutocompleteEmpty>No tags found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(group: TagGroup) => (\n            <React.Fragment key={group.value}>\n              <AutocompleteGroup items={group.items}>\n                <AutocompleteGroupLabel>{group.value}</AutocompleteGroupLabel>\n                <AutocompleteCollection>\n                  {(tag: Tag) => (\n                    <AutocompleteItem key={tag.id} value={tag}>\n                      {tag.label}\n                    </AutocompleteItem>\n                  )}\n                </AutocompleteCollection>\n              </AutocompleteGroup>\n              {group.value !== \"Team\" && <AutocompleteSeparator />}\n            </React.Fragment>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\"\n\n// Grouped items demo\ntype Tag = { id: string; label: string; group: \"Status\" | \"Priority\" | \"Team\" }\ntype TagGroup = { value: string; items: Tag[] }\n\nconst tagsData: Tag[] = [\n  // Status\n  { id: \"s-open\", label: \"Updated Open\", group: \"Status\" },\n  { id: \"s-in-progress\", label: \"Updated In progress\", group: \"Status\" },\n  { id: \"s-blocked\", label: \"Updated Blocked\", group: \"Status\" },\n  { id: \"s-resolved\", label: \"Updated Resolved\", group: \"Status\" },\n  { id: \"s-closed\", label: \"Updated Closed\", group: \"Status\" },\n  // Priority\n  { id: \"p-low\", label: \"Updated Low\", group: \"Priority\" },\n  { id: \"p-medium\", label: \"Updated Medium\", group: \"Priority\" },\n  { id: \"p-high\", label: \"Updated High\", group: \"Priority\" },\n  { id: \"p-urgent\", label: \"Updated Urgent\", group: \"Priority\" },\n  // Team\n  { id: \"t-design\", label: \"Updated Design\", group: \"Team\" },\n  { id: \"t-frontend\", label: \"Updated Frontend\", group: \"Team\" },\n  { id: \"t-backend\", label: \"Updated Backend\", group: \"Team\" },\n  { id: \"t-devops\", label: \"Updated DevOps\", group: \"Team\" },\n  { id: \"t-qa\", label: \"Updated QA\", group: \"Team\" },\n  { id: \"t-mobile\", label: \"Updated Mobile\", group: \"Team\" },\n  { id: \"t-data\", label: \"Updated Data\", group: \"Team\" },\n  { id: \"t-security\", label: \"Updated Security\", group: \"Team\" },\n  { id: \"t-platform\", label: \"Updated Platform\", group: \"Team\" },\n  { id: \"t-infra\", label: \"Updated Infrastructure\", group: \"Team\" },\n  { id: \"t-product\", label: \"Updated Product\", group: \"Team\" },\n  { id: \"t-marketing\", label: \"Updated Marketing\", group: \"Team\" },\n  { id: \"t-sales\", label: \"Updated Sales\", group: \"Team\" },\n  { id: \"t-support\", label: \"Updated Support\", group: \"Team\" },\n  { id: \"t-research\", label: \"Updated Research\", group: \"Team\" },\n  { id: \"t-content\", label: \"Updated Content\", group: \"Team\" },\n  { id: \"t-analytics\", label: \"Updated Analytics\", group: \"Team\" },\n  { id: \"t-operations\", label: \"Updated Operations\", group: \"Team\" },\n  { id: \"t-finance\", label: \"Updated Finance\", group: \"Team\" },\n  { id: \"t-hr\", label: \"Updated HR\", group: \"Team\" },\n  { id: \"t-legal\", label: \"Updated Legal\", group: \"Team\" },\n  { id: \"t-growth\", label: \"Updated Growth\", group: \"Team\" },\n  { id: \"t-partner\", label: \"Updated Partner\", group: \"Team\" },\n  { id: \"t-community\", label: \"Updated Community\", group: \"Team\" },\n  { id: \"t-docs\", label: \"Updated Docs\", group: \"Team\" },\n  { id: \"t-l10n\", label: \"Updated Localization\", group: \"Team\" },\n  { id: \"t-a11y\", label: \"Updated Accessibility\", group: \"Team\" },\n  { id: \"t-sre\", label: \"Updated SRE\", group: \"Team\" },\n  { id: \"t-release\", label: \"Updated Release\", group: \"Team\" },\n  { id: \"t-architecture\", label: \"Updated Architecture\", group: \"Team\" },\n  { id: \"t-ux\", label: \"Updated UX\", group: \"Team\" },\n  { id: \"t-ui\", label: \"Updated UI\", group: \"Team\" },\n  { id: \"t-management\", label: \"Updated Management\", group: \"Team\" },\n]\n\nfunction groupTags(tags: Tag[]): TagGroup[] {\n  const groups: Record<string, Tag[]> = {}\n  for (const t of tags) {\n    ;(groups[t.group] ??= []).push(t)\n  }\n  const order: Array<TagGroup[\"value\"]> = [\"Status\", \"Priority\", \"Team\"]\n  return order.map((value) => ({ value, items: groups[value] ?? [] }))\n}\n\nconst groupedTags: TagGroup[] = groupTags(tagsData)\n\nexport default function AutocompleteGrouped() {\n  return (\n    <Autocomplete items={groupedTags}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <AutocompleteInput\n          placeholder=\"Updated e.g. feature\"\n          aria-label=\"Updated Search tags\"\n        />\n      </div>\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No tags found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(group: TagGroup) => (\n            <React.Fragment key={group.value}>\n              <AutocompleteGroup items={group.items}>\n                <AutocompleteGroupLabel>{group.value}</AutocompleteGroupLabel>\n                <AutocompleteCollection>\n                  {(tag: Tag) => (\n                    <AutocompleteItem key={tag.id} value={tag}>\n                      {tag.label}\n                    </AutocompleteItem>\n                  )}\n                </AutocompleteCollection>\n              </AutocompleteGroup>\n              {group.value !== \"Team\" && <AutocompleteSeparator />}\n            </React.Fragment>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-inline.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-inline.tsx",
-      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteInline() {\n  return (\n    <Autocomplete items={items} mode=\"both\">\n      <AutocompleteInput\n        placeholder=\"Search items…\"\n        aria-label=\"Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteInline() {\n  return (\n    <Autocomplete items={items} mode=\"both\">\n      <AutocompleteInput\n        placeholder=\"Updated Search items…\"\n        aria-label=\"Updated Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-lg.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-lg.tsx",
-      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteLg() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        size=\"lg\"\n        placeholder=\"Search items…\"\n        aria-label=\"Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteLg() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        size=\"lg\"\n        placeholder=\"Updated Search items…\"\n        aria-label=\"Updated Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-limit.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-limit.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui-components/react/autocomplete\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteStatus,\n} from \"@/registry/default/ui/autocomplete\"\n\n// Limit results demo\nconst limit = 7\ntype SimpleTag = { id: string; value: string }\nconst manyTags: SimpleTag[] = [\n  { id: \"lang-js\", value: \"JavaScript\" },\n  { id: \"lang-ts\", value: \"TypeScript\" },\n  { id: \"lang-py\", value: \"Python\" },\n  { id: \"lang-java\", value: \"Java\" },\n  { id: \"lang-csharp\", value: \"C#\" },\n  { id: \"lang-cpp\", value: \"C++\" },\n  { id: \"lang-c\", value: \"C\" },\n  { id: \"lang-go\", value: \"Go\" },\n  { id: \"lang-rust\", value: \"Rust\" },\n  { id: \"lang-rb\", value: \"Ruby\" },\n  { id: \"lang-php\", value: \"PHP\" },\n  { id: \"lang-swift\", value: \"Swift\" },\n  { id: \"lang-kotlin\", value: \"Kotlin\" },\n  { id: \"lang-scala\", value: \"Scala\" },\n  { id: \"lang-elixir\", value: \"Elixir\" },\n  { id: \"lang-hs\", value: \"Haskell\" },\n  { id: \"lang-dart\", value: \"Dart\" },\n  { id: \"lang-objc\", value: \"Objective-C\" },\n  { id: \"lang-julia\", value: \"Julia\" },\n  { id: \"lang-r\", value: \"R\" },\n  { id: \"lang-perl\", value: \"Perl\" },\n  { id: \"lang-lua\", value: \"Lua\" },\n  { id: \"lang-ocaml\", value: \"OCaml\" },\n  { id: \"lang-fsharp\", value: \"F#\" },\n]\n\nexport default function AutocompleteLimit() {\n  const [value, setValue] = React.useState(\"\")\n  const { contains } = AutocompletePrimitive.useFilter({ sensitivity: \"base\" })\n\n  const totalMatches = React.useMemo(() => {\n    const trimmed = value.trim()\n    if (!trimmed) return manyTags.length\n    return manyTags.filter((t) => contains(t.value, trimmed)).length\n  }, [value, contains])\n\n  const moreCount = Math.max(0, totalMatches - limit)\n\n  return (\n    <Autocomplete\n      items={manyTags}\n      value={value}\n      onValueChange={setValue}\n      limit={limit}\n    >\n      <AutocompleteInput placeholder=\"e.g. feature\" />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No tags found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(tag: SimpleTag) => (\n            <AutocompleteItem key={tag.id} value={tag}>\n              {tag.value}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n        {moreCount > 0 && (\n          <AutocompleteStatus>\n            +{moreCount} more (keep typing to narrow down)\n          </AutocompleteStatus>\n        )}\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui-components/react/autocomplete\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteStatus,\n} from \"@/registry/default/ui/autocomplete\"\n\n// Limit results demo\nconst limit = 7\ntype SimpleTag = { id: string; value: string }\nconst manyTags: SimpleTag[] = [\n  { id: \"lang-js\", value: \"JavaScript\" },\n  { id: \"lang-ts\", value: \"TypeScript\" },\n  { id: \"lang-py\", value: \"Python\" },\n  { id: \"lang-java\", value: \"Java\" },\n  { id: \"lang-csharp\", value: \"C#\" },\n  { id: \"lang-cpp\", value: \"C++\" },\n  { id: \"lang-c\", value: \"C\" },\n  { id: \"lang-go\", value: \"Go\" },\n  { id: \"lang-rust\", value: \"Rust\" },\n  { id: \"lang-rb\", value: \"Ruby\" },\n  { id: \"lang-php\", value: \"PHP\" },\n  { id: \"lang-swift\", value: \"Swift\" },\n  { id: \"lang-kotlin\", value: \"Kotlin\" },\n  { id: \"lang-scala\", value: \"Scala\" },\n  { id: \"lang-elixir\", value: \"Elixir\" },\n  { id: \"lang-hs\", value: \"Haskell\" },\n  { id: \"lang-dart\", value: \"Dart\" },\n  { id: \"lang-objc\", value: \"Objective-C\" },\n  { id: \"lang-julia\", value: \"Julia\" },\n  { id: \"lang-r\", value: \"R\" },\n  { id: \"lang-perl\", value: \"Perl\" },\n  { id: \"lang-lua\", value: \"Lua\" },\n  { id: \"lang-ocaml\", value: \"OCaml\" },\n  { id: \"lang-fsharp\", value: \"F#\" },\n]\n\nexport default function AutocompleteLimit() {\n  const [value, setValue] = React.useState(\"\")\n  const { contains } = AutocompletePrimitive.useFilter({ sensitivity: \"base\" })\n\n  const totalMatches = React.useMemo(() => {\n    const trimmed = value.trim()\n    if (!trimmed) return manyTags.length\n    return manyTags.filter((t) => contains(t.value, trimmed)).length\n  }, [value, contains])\n\n  const moreCount = Math.max(0, totalMatches - limit)\n\n  return (\n    <Autocomplete\n      items={manyTags}\n      value={value}\n      onValueChange={setValue}\n      limit={limit}\n    >\n      <AutocompleteInput placeholder=\"Updated e.g. feature\" />\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No tags found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(tag: SimpleTag) => (\n            <AutocompleteItem key={tag.id} value={tag}>\n              {tag.value}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n        {moreCount > 0 && (\n          <AutocompleteStatus>\n            +{moreCount} Updated more (keep typing to narrow down)\n          </AutocompleteStatus>\n        )}\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-sm.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-sm.tsx",
-      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteSm() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        size=\"sm\"\n        placeholder=\"Search items…\"\n        aria-label=\"Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteSm() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        size=\"sm\"\n        placeholder=\"Updated Search items…\"\n        aria-label=\"Updated Search items\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-with-clear.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-with-clear.tsx",
-      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteWithClear() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        placeholder=\"Search items…\"\n        aria-label=\"Search items\"\n        showClear\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteWithClear() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        placeholder=\"Updated Search items…\"\n        aria-label=\"Updated Search items\"\n        showClear\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-with-label.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-with-label.tsx",
-      "content": "\"use client\"\n\nimport { useId } from \"react\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteWithLabel() {\n  const id = useId()\n  return (\n    <Autocomplete items={items}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <Label htmlFor={id}>Fruits</Label>\n        <AutocompleteInput\n          id={id}\n          placeholder=\"Search items…\"\n          aria-label=\"Search items\"\n        />\n      </div>\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteWithLabel() {\n  const id = useId()\n  return (\n    <Autocomplete items={items}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <Label htmlFor={id}>Updated Fruits</Label>\n        <AutocompleteInput\n          id={id}\n          placeholder=\"Updated Search items…\"\n          aria-label=\"Updated Search items\"\n        />\n      </div>\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/autocomplete-with-trigger-clear.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/autocomplete-with-trigger-clear.tsx",
-      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteWithTriggerClear() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        placeholder=\"Search items…\"\n        aria-label=\"Search items\"\n        showTrigger\n        showClear\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function AutocompleteWithTriggerClear() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        placeholder=\"Updated Search items…\"\n        aria-label=\"Updated Search items\"\n        showTrigger\n        showClear\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/avatar-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/avatar-demo.tsx",
-      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage\n        src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        alt=\"Luke Tracy\"\n      />\n      <AvatarFallback>LT</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage\n        src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        alt=\"Updated Luke Tracy\"\n      />\n      <AvatarFallback>Updated LT</AvatarFallback>\n    </Avatar>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/avatar-fallback.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/avatar-fallback.tsx",
-      "content": "import { Avatar, AvatarFallback } from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarFallbackDemo() {\n  return (\n    <Avatar>\n      <AvatarFallback>LT</AvatarFallback>\n    </Avatar>\n  )\n}\n",
+      "content": "import { Avatar, AvatarFallback } from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarFallbackDemo() {\n  return (\n    <Avatar>\n      <AvatarFallback>Updated LT</AvatarFallback>\n    </Avatar>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/avatar-group.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/avatar-group.tsx",
-      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarGroupDemo() {\n  return (\n    <div className=\"flex -space-x-[0.6rem]\">\n      <Avatar className=\"ring-2 ring-background\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80\"\n          alt=\"U1\"\n        />\n        <AvatarFallback>U1</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"ring-2 ring-background\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80\"\n          alt=\"U2\"\n        />\n        <AvatarFallback>U2</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"ring-2 ring-background\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80\"\n          alt=\"U3\"\n        />\n        <AvatarFallback>U3</AvatarFallback>\n      </Avatar>\n    </div>\n  )\n}\n",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarGroupDemo() {\n  return (\n    <div className=\"flex -space-x-[0.6rem]\">\n      <Avatar className=\"ring-2 ring-background\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80\"\n          alt=\"Updated U1\"\n        />\n        <AvatarFallback>Updated U1</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"ring-2 ring-background\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80\"\n          alt=\"Updated U2\"\n        />\n        <AvatarFallback>Updated U2</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"ring-2 ring-background\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80\"\n          alt=\"Updated U3\"\n        />\n        <AvatarFallback>Updated U3</AvatarFallback>\n      </Avatar>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/avatar-radius.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/avatar-radius.tsx",
-      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarRadiusDemo() {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Avatar className=\"rounded-md\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          alt=\"User\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-xl\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          alt=\"User\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-full\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          alt=\"User\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n    </div>\n  )\n}\n",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarRadiusDemo() {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Avatar className=\"rounded-md\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          alt=\"Updated User\"\n        />\n        <AvatarFallback>Updated AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-xl\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          alt=\"Updated User\"\n        />\n        <AvatarFallback>Updated AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-full\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          alt=\"Updated User\"\n        />\n        <AvatarFallback>Updated AV</AvatarFallback>\n      </Avatar>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/avatar-size.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/avatar-size.tsx",
-      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarSizeDemo() {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Avatar>\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80\"\n          alt=\"User\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-12\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=144&h=144&dpr=2&q=80\"\n          alt=\"User\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-16\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=192&h=192&dpr=2&q=80\"\n          alt=\"User\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n    </div>\n  )\n}\n",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport default function AvatarSizeDemo() {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Avatar>\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80\"\n          alt=\"Updated User\"\n        />\n        <AvatarFallback>Updated AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-12\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=144&h=144&dpr=2&q=80\"\n          alt=\"Updated User\"\n        />\n        <AvatarFallback>Updated AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-16\">\n        <AvatarImage\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=192&h=192&dpr=2&q=80\"\n          alt=\"Updated User\"\n        />\n        <AvatarFallback>Updated AV</AvatarFallback>\n      </Avatar>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/avatar-stack-hover.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/avatar-stack-hover.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nimport { AvatarStack } from \"../../../../../packages/avatar-stack\"\n\nconst Example = () => (\n  <AvatarStack animate>\n    <Avatar>\n      <AvatarImage src=\"https://github.com/loveconnor.png\" />\n      <AvatarFallback>CL</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://avatars.githubusercontent.com/u/91501317?v=4\" />\n      <AvatarFallback>MO</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://github.com/loveconnor.png\" />\n      <AvatarFallback>CL</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://avatars.githubusercontent.com/u/91501317?v=4\" />\n      <AvatarFallback>MO</AvatarFallback>\n    </Avatar>\n  </AvatarStack>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nimport { AvatarStack } from \"../../../../../packages/avatar-stack\"\n\nconst Example = () => (\n  <AvatarStack animate>\n    <Avatar>\n      <AvatarImage src=\"https://github.com/loveconnor.png\" />\n      <AvatarFallback>Updated CL</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://avatars.githubusercontent.com/u/91501317?v=4\" />\n      <AvatarFallback>Updated MO</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://github.com/loveconnor.png\" />\n      <AvatarFallback>Updated CL</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://avatars.githubusercontent.com/u/91501317?v=4\" />\n      <AvatarFallback>Updated MO</AvatarFallback>\n    </Avatar>\n  </AvatarStack>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/avatar-stack.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/avatar-stack.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nimport { AvatarStack } from \"../../../../../packages/avatar-stack\"\n\nconst Example = () => (\n  <AvatarStack>\n    <Avatar>\n      <AvatarImage src=\"https://github.com/loveconnor.png\" />\n      <AvatarFallback>CL</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://avatars.githubusercontent.com/u/91501317?v=4\" />\n      <AvatarFallback>MO</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://github.com/loveconnor.png\" />\n      <AvatarFallback>CL</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://avatars.githubusercontent.com/u/91501317?v=4\" />\n      <AvatarFallback>MO</AvatarFallback>\n    </Avatar>\n  </AvatarStack>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nimport { AvatarStack } from \"../../../../../packages/avatar-stack\"\n\nconst Example = () => (\n  <AvatarStack>\n    <Avatar>\n      <AvatarImage src=\"https://github.com/loveconnor.png\" />\n      <AvatarFallback>Updated CL</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://avatars.githubusercontent.com/u/91501317?v=4\" />\n      <AvatarFallback>Updated MO</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://github.com/loveconnor.png\" />\n      <AvatarFallback>Updated CL</AvatarFallback>\n    </Avatar>\n    <Avatar>\n      <AvatarImage src=\"https://avatars.githubusercontent.com/u/91501317?v=4\" />\n      <AvatarFallback>Updated MO</AvatarFallback>\n    </Avatar>\n  </AvatarStack>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/badge-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/badge-demo.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDemo() {\n  return <Badge>Updated Badge</Badge>\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/badge-destructive.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/badge-destructive.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Badge</Badge>\n}\n",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Updated Badge</Badge>\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/badge-error.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/badge-error.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeError() {\n  return <Badge variant=\"error\">Badge</Badge>\n}\n",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeError() {\n  return <Badge variant=\"error\">Updated Badge</Badge>\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/badge-info.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/badge-info.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeInfo() {\n  return <Badge variant=\"info\">Badge</Badge>\n}\n",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeInfo() {\n  return <Badge variant=\"info\">Updated Badge</Badge>\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/badge-lg.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/badge-lg.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeLg() {\n  return <Badge size=\"lg\">Badge</Badge>\n}\n",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport default function BadgeLg() {\n  return <Badge size=\"lg\">Updated Badge</Badge>\n}\n",
       "type": "registry:example"
     }
   ],