love-ui 1.2.12 → 1.2.14

package/public/r/relative-time-controlled.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/relative-time-controlled.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport {\n  RelativeTime,\n  RelativeTimeZone,\n  RelativeTimeZoneDate,\n  RelativeTimeZoneDisplay,\n  RelativeTimeZoneLabel,\n} from \"../../../../../packages/relative-time\"\n\nconst timezones = [\n  { label: \"EST\", zone: \"America/New_York\" },\n  { label: \"GMT\", zone: \"Europe/London\" },\n  { label: \"JST\", zone: \"Asia/Tokyo\" },\n]\n\nconst Example = () => {\n  const [time, setTime] = useState(new Date())\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setTime(new Date())\n    }, 1000)\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <div className=\"rounded-md border bg-background p-4\">\n      <RelativeTime onTimeChange={setTime} time={time}>\n        {timezones.map(({ zone, label }) => (\n          <RelativeTimeZone key={zone} zone={zone}>\n            <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>\n            <RelativeTimeZoneDate />\n            <RelativeTimeZoneDisplay />\n          </RelativeTimeZone>\n        ))}\n      </RelativeTime>\n    </div>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport {\n  RelativeTime,\n  RelativeTimeZone,\n  RelativeTimeZoneDate,\n  RelativeTimeZoneDisplay,\n  RelativeTimeZoneLabel,\n} from \"../../../../../packages/relative-time\"\n\nconst timezones = [\n  { label: \"Updated EST\", zone: \"America/New_York\" },\n  { label: \"Updated GMT\", zone: \"Europe/London\" },\n  { label: \"Updated JST\", zone: \"Asia/Tokyo\" },\n]\n\nconst Example = () => {\n  const [time, setTime] = useState(new Date())\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setTime(new Date())\n    }, 1000)\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <div className=\"rounded-md border bg-background p-4\">\n      <RelativeTime onTimeChange={setTime} time={time}>\n        {timezones.map(({ zone, label }) => (\n          <RelativeTimeZone key={zone} zone={zone}>\n            <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>\n            <RelativeTimeZoneDate />\n            <RelativeTimeZoneDisplay />\n          </RelativeTimeZone>\n        ))}\n      </RelativeTime>\n    </div>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/relative-time-format-date.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/relative-time-format-date.tsx",
-      "content": "\"use client\"\n\nimport {\n  RelativeTime,\n  RelativeTimeZone,\n  RelativeTimeZoneDate,\n  RelativeTimeZoneDisplay,\n  RelativeTimeZoneLabel,\n} from \"../../../../../packages/relative-time\"\n\nconst timezones = [\n  { label: \"EST\", zone: \"America/New_York\" },\n  { label: \"GMT\", zone: \"Europe/London\" },\n  { label: \"JST\", zone: \"Asia/Tokyo\" },\n]\n\nconst Example = () => (\n  <div className=\"rounded-md border bg-background p-4\">\n    <RelativeTime dateFormatOptions={{ dateStyle: \"full\" }}>\n      {timezones.map(({ zone, label }) => (\n        <RelativeTimeZone key={zone} zone={zone}>\n          <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>\n          <RelativeTimeZoneDate />\n          <RelativeTimeZoneDisplay />\n        </RelativeTimeZone>\n      ))}\n    </RelativeTime>\n  </div>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  RelativeTime,\n  RelativeTimeZone,\n  RelativeTimeZoneDate,\n  RelativeTimeZoneDisplay,\n  RelativeTimeZoneLabel,\n} from \"../../../../../packages/relative-time\"\n\nconst timezones = [\n  { label: \"Updated EST\", zone: \"America/New_York\" },\n  { label: \"Updated GMT\", zone: \"Europe/London\" },\n  { label: \"Updated JST\", zone: \"Asia/Tokyo\" },\n]\n\nconst Example = () => (\n  <div className=\"rounded-md border bg-background p-4\">\n    <RelativeTime dateFormatOptions={{ dateStyle: \"full\" }}>\n      {timezones.map(({ zone, label }) => (\n        <RelativeTimeZone key={zone} zone={zone}>\n          <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>\n          <RelativeTimeZoneDate />\n          <RelativeTimeZoneDisplay />\n        </RelativeTimeZone>\n      ))}\n    </RelativeTime>\n  </div>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/relative-time-format-time.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/relative-time-format-time.tsx",
-      "content": "\"use client\"\n\nimport {\n  RelativeTime,\n  RelativeTimeZone,\n  RelativeTimeZoneDate,\n  RelativeTimeZoneDisplay,\n  RelativeTimeZoneLabel,\n} from \"../../../../../packages/relative-time\"\n\nconst timezones = [\n  { label: \"EST\", zone: \"America/New_York\" },\n  { label: \"GMT\", zone: \"Europe/London\" },\n  { label: \"JST\", zone: \"Asia/Tokyo\" },\n]\n\nconst Example = () => (\n  <div className=\"rounded-md border bg-background p-4\">\n    <RelativeTime timeFormatOptions={{ hour: \"2-digit\", minute: \"2-digit\" }}>\n      {timezones.map(({ zone, label }) => (\n        <RelativeTimeZone key={zone} zone={zone}>\n          <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>\n          <RelativeTimeZoneDate />\n          <RelativeTimeZoneDisplay />\n        </RelativeTimeZone>\n      ))}\n    </RelativeTime>\n  </div>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  RelativeTime,\n  RelativeTimeZone,\n  RelativeTimeZoneDate,\n  RelativeTimeZoneDisplay,\n  RelativeTimeZoneLabel,\n} from \"../../../../../packages/relative-time\"\n\nconst timezones = [\n  { label: \"Updated EST\", zone: \"America/New_York\" },\n  { label: \"Updated GMT\", zone: \"Europe/London\" },\n  { label: \"Updated JST\", zone: \"Asia/Tokyo\" },\n]\n\nconst Example = () => (\n  <div className=\"rounded-md border bg-background p-4\">\n    <RelativeTime timeFormatOptions={{ hour: \"2-digit\", minute: \"2-digit\" }}>\n      {timezones.map(({ zone, label }) => (\n        <RelativeTimeZone key={zone} zone={zone}>\n          <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>\n          <RelativeTimeZoneDate />\n          <RelativeTimeZoneDisplay />\n        </RelativeTimeZone>\n      ))}\n    </RelativeTime>\n  </div>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/relative-time.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/relative-time.tsx",
-      "content": "\"use client\"\n\nimport {\n  RelativeTime,\n  RelativeTimeZone,\n  RelativeTimeZoneDate,\n  RelativeTimeZoneDisplay,\n  RelativeTimeZoneLabel,\n} from \"../../../../../packages/relative-time\"\n\nconst timezones = [\n  { label: \"EST\", zone: \"America/New_York\" },\n  { label: \"GMT\", zone: \"Europe/London\" },\n  { label: \"JST\", zone: \"Asia/Tokyo\" },\n]\n\nconst Example = () => (\n  <div className=\"rounded-md border bg-background p-4\">\n    <RelativeTime>\n      {timezones.map(({ zone, label }) => (\n        <RelativeTimeZone key={zone} zone={zone}>\n          <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>\n          <RelativeTimeZoneDate />\n          <RelativeTimeZoneDisplay />\n        </RelativeTimeZone>\n      ))}\n    </RelativeTime>\n  </div>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  RelativeTime,\n  RelativeTimeZone,\n  RelativeTimeZoneDate,\n  RelativeTimeZoneDisplay,\n  RelativeTimeZoneLabel,\n} from \"../../../../../packages/relative-time\"\n\nconst timezones = [\n  { label: \"Updated EST\", zone: \"America/New_York\" },\n  { label: \"Updated GMT\", zone: \"Europe/London\" },\n  { label: \"Updated JST\", zone: \"Asia/Tokyo\" },\n]\n\nconst Example = () => (\n  <div className=\"rounded-md border bg-background p-4\">\n    <RelativeTime>\n      {timezones.map(({ zone, label }) => (\n        <RelativeTimeZone key={zone} zone={zone}>\n          <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>\n          <RelativeTimeZoneDate />\n          <RelativeTimeZoneDisplay />\n        </RelativeTimeZone>\n      ))}\n    </RelativeTime>\n  </div>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/rentals.json

@@ -0,0 +1,187 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "rentals",
+  "type": "registry:block",
+  "title": "Gear Marketplace",
+  "description": "An e-commerce gear marketplace with map-based discovery, sorting, and favorites.",
+  "files": [
+    {
+      "path": "registry/example-apps/default/rentals/components/dashboard/listings-panel.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/rentals/components/dashboard/listings-panel.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpDown,\n  Check,\n  DollarSign,\n  Grid3x3,\n  Heart,\n  List,\n  MapPin,\n  MessageSquare,\n  Search,\n  Sparkles,\n  Star,\n  TrendingUp,\n  X,\n} from \"lucide-react\"\nimport { useMediaQuery } from \"usehooks-ts\"\n\nimport { Badge } from \"@loveui/ui/ui/badge\"\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Input } from \"@loveui/ui/ui/input\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { SidebarTrigger } from \"@/components/ui/sidebar\"\n\nimport { cn } from \"../../lib/utils\"\nimport { propertyTypeLabels, type Listing } from \"../../mock-data/listings\"\nimport { useRentalsStore } from \"../../store/rentals-store\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"../ui/carousel\"\n\ntype PanelMode = \"all\" | \"favorites\"\n\ninterface ListingsPanelProps {\n  mode?: PanelMode\n}\n\nexport function ListingsPanel({ mode = \"all\" }: ListingsPanelProps) {\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n  const {\n    selectedListingId,\n    searchQuery,\n    sortBy,\n    selectListing,\n    toggleFavorite,\n    setSearchQuery,\n    setSortBy,\n    getFilteredListings,\n    getFavoriteListings,\n    setMapCenter,\n    setMapZoom,\n    setUserLocation,\n  } = useRentalsStore()\n\n  const isDesktop = useMediaQuery(\"(min-width: 640px)\")\n  const [isPanelVisible, setIsPanelVisible] = React.useState(true)\n  const [viewMode, setViewMode] = React.useState<\"grid\" | \"list\">(\"grid\")\n\n  React.useEffect(() => {\n    if (isDesktop && !isPanelVisible) {\n      setIsPanelVisible(true)\n    }\n  }, [isDesktop, isPanelVisible])\n\n  const getListings = () => {\n    switch (mode) {\n      case \"favorites\":\n        return getFavoriteListings()\n      default:\n        return getFilteredListings()\n    }\n  }\n\n  const listings = getListings()\n\n  React.useEffect(() => {\n    if (selectedListingId && scrollContainerRef.current) {\n      scrollContainerRef.current.scrollTo({ top: 0, behavior: \"smooth\" })\n    }\n  }, [selectedListingId])\n\n  const handleListingClick = (listing: Listing) => {\n    if (selectedListingId === listing.id) {\n      selectListing(null)\n    } else {\n      selectListing(listing.id)\n      setMapCenter(listing.coordinates)\n      setMapZoom(14)\n    }\n  }\n\n  if (!isPanelVisible) {\n    return (\n      <Button\n        variant=\"outline\"\n        size=\"icon\"\n        className=\"absolute top-4 left-4 z-20 size-10 bg-background shadow-xl sm:hidden\"\n        onClick={() => setIsPanelVisible(true)}\n      >\n        <Search className=\"size-5\" />\n      </Button>\n    )\n  }\n\n  return (\n    <div className=\"absolute top-4 bottom-4 left-4 z-20 flex w-80 flex-col overflow-hidden rounded-xl border bg-background shadow-xl sm:w-[420px]\">\n      <div className=\"flex items-center justify-between border-b p-3\">\n        <div>\n          <h2 className=\"text-base font-semibold\">\n            {mode === \"favorites\" ? \"Favorites\" : \"All Gear\"}\n          </h2>\n          <p className=\"text-xs text-muted-foreground\">\n            {listings.length} {listings.length === 1 ? \"listing\" : \"listings\"}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-1\">\n          <SidebarTrigger className=\"size-7\" />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"size-7 sm:hidden\"\n            onClick={() => setIsPanelVisible(false)}\n          >\n            <X className=\"size-4\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"border-b p-2\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"relative flex-1\">\n            <Search className=\"pointer-events-none absolute top-1/2 left-2.5 z-10 size-4 -translate-y-1/2 text-muted-foreground\" />\n            <Input\n              placeholder=\"Search gear...\"\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              className={cn(\"h-9 pl-8\", searchQuery && \"pr-8\")}\n            />\n            {searchQuery && (\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"absolute top-1/2 right-1 size-7 -translate-y-1/2\"\n                onClick={() => setSearchQuery(\"\")}\n              >\n                <X className=\"size-3.5\" />\n              </Button>\n            )}\n          </div>\n          <div className=\"flex items-center gap-1 rounded-lg border p-0.5\">\n            <Button\n              variant={viewMode === \"list\" ? \"default\" : \"ghost\"}\n              size=\"icon\"\n              className=\"h-7 w-7\"\n              onClick={() => setViewMode(\"list\")}\n            >\n              <List className=\"h-3.5 w-3.5\" />\n            </Button>\n            <Button\n              variant={viewMode === \"grid\" ? \"default\" : \"ghost\"}\n              size=\"icon\"\n              className=\"h-7 w-7\"\n              onClick={() => setViewMode(\"grid\")}\n            >\n              <Grid3x3 className=\"h-3.5 w-3.5\" />\n            </Button>\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"size-9 shrink-0\"\n                >\n                  <ArrowUpDown className=\"size-4\" />\n                </Button>\n              }\n            />\n            <DropdownMenuContent align=\"end\" className=\"w-48\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"price-low\")}\n                  className=\"gap-2\"\n                >\n                  <DollarSign className=\"size-4\" />\n                  <span className=\"flex-1\">Price: Low to High</span>\n                  {sortBy === \"price-low\" && <Check className=\"size-4\" />}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"price-high\")}\n                  className=\"gap-2\"\n                >\n                  <TrendingUp className=\"size-4\" />\n                  <span className=\"flex-1\">Price: High to Low</span>\n                  {sortBy === \"price-high\" && <Check className=\"size-4\" />}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"rating\")}\n                  className=\"gap-2\"\n                >\n                  <Star className=\"size-4\" />\n                  <span className=\"flex-1\">Best rated</span>\n                  {sortBy === \"rating\" && <Check className=\"size-4\" />}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"newest\")}\n                  className=\"gap-2\"\n                >\n                  <Sparkles className=\"size-4\" />\n                  <span className=\"flex-1\">Newest first</span>\n                  {sortBy === \"newest\" && <Check className=\"size-4\" />}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => setSortBy(\"reviews\")}\n                  className=\"gap-2\"\n                >\n                  <MessageSquare className=\"size-4\" />\n                  <span className=\"flex-1\">Most reviews</span>\n                  {sortBy === \"reviews\" && <Check className=\"size-4\" />}\n                </DropdownMenuItem>\n                <DropdownMenuItem\n                  onClick={() => {\n                    if (!navigator.geolocation) {\n                      alert(\"Geolocation is not supported by your browser.\")\n                      return\n                    }\n                    navigator.geolocation.getCurrentPosition(\n                      (position) => {\n                        const location = {\n                          lat: position.coords.latitude,\n                          lng: position.coords.longitude,\n                        }\n                        setUserLocation(location)\n                        setSortBy(\"nearest\")\n                      },\n                      () => {\n                        alert(\n                          \"Unable to get your location. Please try again later.\"\n                        )\n                      },\n                      {\n                        enableHighAccuracy: false,\n                        timeout: 5000,\n                        maximumAge: 300000,\n                      }\n                    )\n                  }}\n                  className=\"gap-2\"\n                >\n                  <MapPin className=\"size-4\" />\n                  <span className=\"flex-1\">Nearest to me</span>\n                  {sortBy === \"nearest\" && <Check className=\"size-4\" />}\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <div ref={scrollContainerRef} className=\"flex-1 overflow-y-auto\">\n        {listings.length === 0 ? (\n          <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n            <Search className=\"mb-2 size-8 text-muted-foreground\" />\n            <p className=\"text-sm font-medium\">No products found</p>\n            <p className=\"mt-1 text-xs text-muted-foreground\">\n              Try adjusting your search or filters\n            </p>\n          </div>\n        ) : viewMode === \"grid\" ? (\n          <div className=\"grid grid-cols-1 gap-3 p-2\">\n            {listings.map((listing) => {\n              const isSelected = selectedListingId === listing.id\n\n              return (\n                <div\n                  key={listing.id}\n                  onClick={() => handleListingClick(listing)}\n                  className={cn(\n                    \"group cursor-pointer overflow-hidden rounded-xl border bg-card transition-all hover:shadow-lg\",\n                    isSelected &&\n                      \"border-primary shadow-lg ring-2 ring-primary/20\"\n                  )}\n                >\n                  <div className=\"relative aspect-4/3 overflow-hidden\">\n                    <Carousel className=\"h-full w-full\">\n                      <CarouselContent className=\"h-full\">\n                        {listing.images.map((image, imageIndex) => (\n                          <CarouselItem key={imageIndex} className=\"h-full\">\n                            <img\n                              src={image}\n                              alt={`${listing.title} - Image ${imageIndex + 1}`}\n                              className=\"h-full w-full object-cover\"\n                              onError={(e) => {\n                                const target = e.target as HTMLImageElement\n                                target.src =\n                                  \"https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=800&h=600&fit=crop\"\n                              }}\n                            />\n                          </CarouselItem>\n                        ))}\n                      </CarouselContent>\n                      <CarouselPrevious className=\"left-2 h-8 w-8 bg-white/90 opacity-0! transition-opacity group-hover:opacity-100! hover:bg-white\" />\n                      <CarouselNext className=\"right-2 h-8 w-8 bg-white/90 opacity-0! transition-opacity group-hover:opacity-100! hover:bg-white\" />\n                    </Carousel>\n                    <div className=\"absolute top-2 right-2 z-10\">\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"h-8 w-8 rounded-full bg-background/80 backdrop-blur-sm hover:bg-background\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          toggleFavorite(listing.id)\n                        }}\n                      >\n                        <Heart\n                          className={cn(\n                            \"h-4 w-4 transition-colors\",\n                            listing.isFavorite\n                              ? \"fill-destructive text-destructive\"\n                              : \"text-foreground\"\n                          )}\n                        />\n                      </Button>\n                    </div>\n                    {listing.isNew && (\n                      <div className=\"absolute top-2 left-2 z-10\">\n                        <Badge\n                          variant=\"default\"\n                          className=\"bg-primary text-xs text-primary-foreground\"\n                        >\n                          New\n                        </Badge>\n                      </div>\n                    )}\n                    {listing.instantBook && (\n                      <div className=\"absolute bottom-2 left-2 z-10\">\n                        <Badge\n                          variant=\"secondary\"\n                          className=\"bg-background/80 text-xs backdrop-blur-sm\"\n                        >\n                          Fast Checkout\n                        </Badge>\n                      </div>\n                    )}\n                  </div>\n                  <div className=\"p-3\">\n                    <div className=\"mb-1 flex items-start justify-between gap-2\">\n                      <div className=\"min-w-0 flex-1\">\n                        <h3 className=\"mb-1 truncate text-sm font-semibold\">\n                          {listing.title}\n                        </h3>\n                        <div className=\"mb-1 flex items-center gap-1 text-xs text-muted-foreground\">\n                          <MapPin className=\"h-3 w-3\" />\n                          <span className=\"truncate\">\n                            {listing.city}, {listing.country}\n                          </span>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"mb-2 flex items-center gap-3 text-xs\">\n                      <div className=\"flex items-center gap-1\">\n                        <Star className=\"h-3.5 w-3.5 fill-yellow-400 text-yellow-400\" />\n                        <span className=\"font-medium\">\n                          {listing.rating.toFixed(1)}\n                        </span>\n                        <span className=\"text-muted-foreground\">\n                          ({listing.reviewCount})\n                        </span>\n                      </div>\n                      <span className=\"text-muted-foreground\">•</span>\n                      <span className=\"text-muted-foreground\">\n                        {propertyTypeLabels[listing.propertyType]}\n                      </span>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <div>\n                        <span className=\"text-base font-semibold\">\n                          ${listing.pricePerNight}\n                        </span>\n                        <span className=\"text-xs text-muted-foreground\">\n                          {\" \"}\n                          / day\n                        </span>\n                      </div>\n                      <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                        {listing.bedrooms > 0 && (\n                          <span>\n                            {listing.bedrooms} kit\n                            {listing.bedrooms > 1 ? \"s\" : \"\"}\n                          </span>\n                        )}\n                        {listing.bathrooms > 0 && (\n                          <span>\n                            • {listing.bathrooms} add-on\n                            {listing.bathrooms > 1 ? \"s\" : \"\"}\n                          </span>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        ) : (\n          <div className=\"space-y-3 p-2\">\n            {listings.map((listing) => {\n              const isSelected = selectedListingId === listing.id\n\n              return (\n                <div\n                  key={listing.id}\n                  onClick={() => handleListingClick(listing)}\n                  className={cn(\n                    \"group cursor-pointer overflow-hidden rounded-xl border bg-card transition-all hover:shadow-lg\",\n                    isSelected &&\n                      \"border-primary shadow-lg ring-2 ring-primary/20\",\n                    \"flex flex-col sm:flex-row\"\n                  )}\n                >\n                  <div className=\"relative h-48 w-full flex-shrink-0 overflow-hidden sm:h-32 sm:w-32 md:h-40 md:w-40\">\n                    <img\n                      src={listing.images[0]}\n                      alt={listing.title}\n                      className=\"h-full w-full object-cover transition-transform group-hover:scale-105\"\n                      onError={(e) => {\n                        const target = e.target as HTMLImageElement\n                        target.src =\n                          \"https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=800&h=600&fit=crop\"\n                      }}\n                    />\n                    <div className=\"absolute top-2 right-2\">\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"h-7 w-7 rounded-full bg-background/80 backdrop-blur-sm hover:bg-background sm:h-6 sm:w-6\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          toggleFavorite(listing.id)\n                        }}\n                      >\n                        <Heart\n                          className={cn(\n                            \"h-3.5 w-3.5 transition-colors sm:h-3 sm:w-3\",\n                            listing.isFavorite\n                              ? \"fill-destructive text-destructive\"\n                              : \"text-foreground\"\n                          )}\n                        />\n                      </Button>\n                    </div>\n                    {listing.isNew && (\n                      <div className=\"absolute top-2 left-2\">\n                        <Badge\n                          variant=\"default\"\n                          className=\"bg-primary px-1.5 py-0.5 text-[10px] text-primary-foreground\"\n                        >\n                          New\n                        </Badge>\n                      </div>\n                    )}\n                  </div>\n                  <div className=\"flex min-w-0 flex-1 flex-col justify-between p-3 sm:p-2.5\">\n                    <div className=\"flex-1\">\n                      <div className=\"mb-1.5 sm:mb-1\">\n                        <h3 className=\"mb-1 line-clamp-2 text-sm font-semibold sm:line-clamp-1 sm:text-xs\">\n                          {listing.title}\n                        </h3>\n                        <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n                          <MapPin className=\"h-3 w-3 flex-shrink-0\" />\n                          <span className=\"truncate\">\n                            {listing.city}, {listing.country}\n                          </span>\n                        </div>\n                      </div>\n                      <div className=\"mb-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\">\n                        <div className=\"flex items-center gap-1\">\n                          <Star className=\"h-3 w-3 fill-yellow-400 text-yellow-400\" />\n                          <span className=\"font-medium\">\n                            {listing.rating.toFixed(1)}\n                          </span>\n                          <span className=\"text-muted-foreground\">\n                            ({listing.reviewCount})\n                          </span>\n                        </div>\n                        <span className=\"hidden text-muted-foreground sm:inline\">\n                          •\n                        </span>\n                        <span className=\"text-muted-foreground\">\n                          {propertyTypeLabels[listing.propertyType]}\n                        </span>\n                        {listing.instantBook && (\n                          <>\n                            <span className=\"hidden text-muted-foreground sm:inline\">\n                              •\n                            </span>\n                            <Badge\n                              variant=\"secondary\"\n                              className=\"px-1.5 py-0 text-[10px]\"\n                            >\n                              Fast\n                            </Badge>\n                          </>\n                        )}\n                      </div>\n                    </div>\n                    <div className=\"flex items-center justify-between gap-2 border-t pt-2 sm:border-t-0 sm:pt-0\">\n                      <div className=\"flex-shrink-0\">\n                        <span className=\"text-base font-semibold sm:text-sm\">\n                          ${listing.pricePerNight}\n                        </span>\n                        <span className=\"text-xs text-muted-foreground\">\n                          {\" \"}\n                          / day\n                        </span>\n                      </div>\n                      <div className=\"flex flex-shrink-0 items-center gap-1.5 text-xs text-muted-foreground sm:gap-2\">\n                        {listing.bedrooms > 0 && (\n                          <span className=\"whitespace-nowrap\">\n                            {listing.bedrooms} kit\n                            {listing.bedrooms > 1 ? \"s\" : \"\"}\n                          </span>\n                        )}\n                        {listing.bathrooms > 0 && (\n                          <>\n                            <span className=\"hidden sm:inline\">•</span>\n                            <span className=\"whitespace-nowrap\">\n                              {listing.bathrooms} add-on\n                              {listing.bathrooms > 1 ? \"s\" : \"\"}\n                            </span>\n                          </>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/dashboard/map-controls.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/rentals/components/dashboard/map-controls.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Circle,\n  Layers,\n  Map,\n  Mountain,\n  Navigation,\n  Satellite,\n  ZoomIn,\n  ZoomOut,\n} from \"lucide-react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@loveui/ui/ui/tooltip\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useRentalsStore } from \"../../store/rentals-store\"\nimport { ThemeToggle } from \"../theme-toggle\"\n\nconst mapStyles = [\n  {\n    id: \"default\",\n    name: \"Default\",\n    icon: Circle,\n    description: \"Follows theme\",\n  },\n  { id: \"streets\", name: \"Streets\", icon: Map, description: \"Detailed roads\" },\n  {\n    id: \"outdoors\",\n    name: \"Outdoors\",\n    icon: Mountain,\n    description: \"Terrain & trails\",\n  },\n  {\n    id: \"satellite\",\n    name: \"Satellite\",\n    icon: Satellite,\n    description: \"Aerial view\",\n  },\n] as const\n\nexport function MapControls() {\n  const {\n    mapZoom,\n    setMapZoom,\n    setMapCenter,\n    setUserLocation,\n    mapStyle,\n    setMapStyle,\n  } = useRentalsStore()\n\n  const handleZoomIn = () => {\n    setMapZoom(Math.min(mapZoom + 1, 18))\n  }\n\n  const handleZoomOut = () => {\n    setMapZoom(Math.max(mapZoom - 1, 3))\n  }\n\n  const handleLocate = () => {\n    if (\"geolocation\" in navigator) {\n      navigator.geolocation.getCurrentPosition(\n        (position) => {\n          const location = {\n            lat: position.coords.latitude,\n            lng: position.coords.longitude,\n          }\n          setUserLocation(location)\n          setMapCenter(location)\n          setMapZoom(15)\n        },\n        () => {\n          alert(\"Unable to get your location. Please try again later.\")\n        },\n        { enableHighAccuracy: false, timeout: 5000, maximumAge: 300000 }\n      )\n    } else {\n      alert(\"Geolocation is not supported by your browser.\")\n    }\n  }\n\n  return (\n    <div className=\"absolute top-4 right-4 z-20 flex flex-col gap-2\">\n      <div className=\"flex flex-col gap-2 rounded-lg border bg-background p-1 shadow-lg\">\n        <DropdownMenu>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"h-9 w-9\">\n                      <Layers className=\"h-4 w-4\" />\n                    </Button>\n                  }\n                />\n              }\n            />\n            <TooltipContent>Map style</TooltipContent>\n          </Tooltip>\n          <DropdownMenuContent align=\"end\" className=\"w-48\">\n            {mapStyles.map((style) => {\n              const Icon = style.icon\n              return (\n                <DropdownMenuItem\n                  key={style.id}\n                  onClick={() =>\n                    setMapStyle(\n                      style.id as\n                        | \"default\"\n                        | \"streets\"\n                        | \"outdoors\"\n                        | \"satellite\"\n                    )\n                  }\n                  className={cn(\"gap-3\", mapStyle === style.id && \"bg-accent\")}\n                >\n                  <Icon className=\"size-4 shrink-0\" />\n                  <div className=\"flex flex-col\">\n                    <span className=\"font-medium\">{style.name}</span>\n                    <span className=\"text-xs text-muted-foreground\">\n                      {style.description}\n                    </span>\n                  </div>\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={handleZoomIn}\n                className=\"h-9 w-9\"\n              >\n                <ZoomIn className=\"h-4 w-4\" />\n              </Button>\n            }\n          />\n          <TooltipContent>Zoom in</TooltipContent>\n        </Tooltip>\n\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={handleZoomOut}\n                className=\"h-9 w-9\"\n              >\n                <ZoomOut className=\"h-4 w-4\" />\n              </Button>\n            }\n          />\n          <TooltipContent>Zoom out</TooltipContent>\n        </Tooltip>\n\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={handleLocate}\n                className=\"h-9 w-9\"\n              >\n                <Navigation className=\"h-4 w-4\" />\n              </Button>\n            }\n          />\n          <TooltipContent>Locate me</TooltipContent>\n        </Tooltip>\n      </div>\n\n      <div className=\"flex flex-col gap-2 rounded-lg border bg-background p-1 shadow-lg\">\n        <ThemeToggle />\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/dashboard/map-view.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/rentals/components/dashboard/map-view.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport maplibregl from \"maplibre-gl\"\n\nimport \"maplibre-gl/dist/maplibre-gl.css\"\n\nimport { useTheme } from \"next-themes\"\n\nimport { propertyTypeLabels } from \"../../mock-data/listings\"\nimport { useRentalsStore } from \"../../store/rentals-store\"\n\nconst MAP_STYLES = {\n  light: \"https://basemaps.cartocdn.com/gl/positron-gl-style/style.json\",\n  dark: \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\",\n  streets: \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n  outdoors: \"https://tiles.stadiamaps.com/styles/outdoors.json\",\n  satellite: \"https://tiles.stadiamaps.com/styles/alidade_satellite.json\",\n}\n\nexport function MapView() {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const mapRef = React.useRef<maplibregl.Map | null>(null)\n  const markersRef = React.useRef<Map<string, maplibregl.Marker>>(new Map())\n  const popupRef = React.useRef<maplibregl.Popup | null>(null)\n  const isAnimatingRef = React.useRef(false)\n  const { resolvedTheme } = useTheme()\n\n  const {\n    mapCenter,\n    mapZoom,\n    mapStyle,\n    setMapCenter,\n    setMapZoom,\n    selectListing,\n    selectedListingId,\n    getFilteredListings,\n  } = useRentalsStore()\n\n  const listings = getFilteredListings()\n\n  const getMapStyleUrl = React.useCallback(() => {\n    if (mapStyle === \"default\") {\n      return resolvedTheme === \"dark\" ? MAP_STYLES.dark : MAP_STYLES.light\n    }\n    return MAP_STYLES[mapStyle]\n  }, [mapStyle, resolvedTheme])\n\n  React.useEffect(() => {\n    if (!containerRef.current || mapRef.current) return\n\n    const map = new maplibregl.Map({\n      container: containerRef.current,\n      style: getMapStyleUrl(),\n      center: [mapCenter.lng, mapCenter.lat],\n      zoom: mapZoom,\n      minZoom: 3,\n      maxZoom: 18,\n      attributionControl: false,\n    })\n\n    map.addControl(\n      new maplibregl.AttributionControl({ compact: true }),\n      \"bottom-right\"\n    )\n\n    map.on(\"moveend\", () => {\n      if (isAnimatingRef.current) {\n        isAnimatingRef.current = false\n        return\n      }\n      const center = map.getCenter()\n      const zoom = map.getZoom()\n      setMapCenter({ lat: center.lat, lng: center.lng })\n      setMapZoom(zoom)\n    })\n\n    mapRef.current = map\n\n    const handleMapClick = (e: maplibregl.MapMouseEvent) => {\n      if (popupRef.current) {\n        const popupElement = popupRef.current.getElement()\n        if (\n          popupElement &&\n          !popupElement.contains(e.originalEvent.target as Node)\n        ) {\n          const target = e.originalEvent.target as HTMLElement\n          if (!target.closest(\".listing-marker-container\")) {\n            popupRef.current.remove()\n            popupRef.current = null\n            selectListing(null)\n          }\n        }\n      }\n    }\n\n    map.on(\"click\", handleMapClick)\n\n    return () => {\n      map.off(\"click\", handleMapClick)\n      map.remove()\n      mapRef.current = null\n    }\n  }, [selectListing])\n\n  React.useEffect(() => {\n    if (!mapRef.current) return\n    mapRef.current.setStyle(getMapStyleUrl())\n  }, [mapStyle, resolvedTheme, getMapStyleUrl])\n\n  React.useEffect(() => {\n    if (!mapRef.current) return\n\n    markersRef.current.forEach((marker) => marker.remove())\n    markersRef.current.clear()\n\n    listings.forEach((listing) => {\n      const isSelected = selectedListingId === listing.id\n\n      const el = document.createElement(\"div\")\n      el.className = \"listing-marker-container\"\n      const priceText = `$${listing.pricePerNight}`\n      el.innerHTML = `\n        <div class=\"relative cursor-pointer transition-all ${\n          isSelected ? \"scale-110 z-10\" : \"hover:scale-105\"\n        }\">\n          <div class=\"px-2.5 py-1.5 rounded-lg bg-card border-2 ${\n            isSelected\n              ? \"border-primary shadow-xl\"\n              : \"border-border shadow-lg hover:shadow-xl\"\n          } flex items-center justify-center min-w-[60px]\">\n            <span class=\"text-sm font-semibold text-card-foreground whitespace-nowrap\">${priceText}</span>\n          </div>\n          ${\n            isSelected\n              ? '<div class=\"absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full bg-primary animate-ping\"></div>'\n              : \"\"\n          }\n        </div>\n      `\n\n      el.addEventListener(\"click\", (e) => {\n        e.stopPropagation()\n\n        if (popupRef.current) {\n          const currentPopup = popupRef.current\n          const currentLngLat = currentPopup.getLngLat()\n          if (\n            currentLngLat.lng === listing.coordinates.lng &&\n            currentLngLat.lat === listing.coordinates.lat\n          ) {\n            currentPopup.remove()\n            popupRef.current = null\n            selectListing(null)\n            return\n          }\n          currentPopup.remove()\n        }\n\n        if (!mapRef.current) return\n\n        const popupContent = `\n          <div class=\"listing-popup-content\">\n            <div class=\"relative w-full h-64 mb-4 rounded-t-lg overflow-hidden\">\n              <img \n                src=\"${listing.images[0]}\" \n                alt=\"${listing.title}\"\n                class=\"w-full h-full object-cover\"\n                onerror=\"this.src='https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=600&h=400&fit=crop'\"\n              />\n              <button \n                class=\"close-popup-btn absolute top-3 right-3 w-8 h-8 rounded-full bg-white/95 backdrop-blur-sm hover:bg-white flex items-center justify-center transition-all shadow-md hover:shadow-lg z-10\"\n                aria-label=\"Close\"\n              >\n                <svg class=\"w-4 h-4 text-gray-700\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n                </svg>\n              </button>\n            </div>\n            <div class=\"px-4 pb-4\">\n              <div class=\"flex items-start justify-between mb-2\">\n                <div class=\"flex-1 min-w-0\">\n                  <h3 class=\"font-semibold text-base mb-1\">${\n                    propertyTypeLabels[listing.propertyType]\n                  } • ${listing.city}</h3>\n                  <p class=\"text-sm text-muted-foreground mb-2 line-clamp-2\">${\n                    listing.title\n                  }</p>\n                </div>\n                <div class=\"flex items-center gap-1 ml-2 shrink-0\">\n                  <svg class=\"w-4 h-4 fill-yellow-400 text-yellow-400\" viewBox=\"0 0 20 20\">\n                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" />\n                  </svg>\n                  <span class=\"text-sm font-medium\">${listing.rating.toFixed(\n                    1\n                  )}</span>\n                  <span class=\"text-xs text-muted-foreground\">(${\n                    listing.reviewCount\n                  })</span>\n                </div>\n              </div>\n              <div class=\"flex items-center gap-2 text-sm text-muted-foreground mb-3\">\n                ${\n                  listing.bedrooms > 0\n                    ? `<span>${listing.bedrooms} kit${\n                        listing.bedrooms > 1 ? \"s\" : \"\"\n                      }</span>`\n                    : \"\"\n                }\n                ${\n                  listing.bedrooms > 0 && listing.bathrooms > 0\n                    ? \"<span>•</span>\"\n                    : \"\"\n                }\n                ${\n                  listing.bathrooms > 0\n                    ? `<span>${listing.bathrooms} add-on${\n                        listing.bathrooms > 1 ? \"s\" : \"\"\n                      }</span>`\n                    : \"\"\n                }\n              </div>\n              <div class=\"flex items-baseline gap-2\">\n                <span class=\"text-xl font-semibold\">$${\n                  listing.pricePerNight\n                }</span>\n                <span class=\"text-sm text-muted-foreground\">/ day</span>\n              </div>\n            </div>\n          </div>\n        `\n\n        const point = mapRef.current.project([\n          listing.coordinates.lng,\n          listing.coordinates.lat,\n        ])\n        const mapHeight = mapRef.current.getContainer().clientHeight\n        const mapWidth = mapRef.current.getContainer().clientWidth\n\n        const isNearBottom = point.y > mapHeight * 0.7\n        const isNearTop = point.y < mapHeight * 0.3\n        const isNearRight = point.x > mapWidth * 0.7\n        const isNearLeft = point.x < mapWidth * 0.3\n\n        let offsetX = 0\n        let offsetY = -30\n\n        if (isNearBottom) {\n          offsetY = 20\n        } else if (isNearTop) {\n          offsetY = -60\n        }\n\n        if (isNearRight) {\n          offsetX = -20\n        } else if (isNearLeft) {\n          offsetX = 20\n        }\n\n        const popup = new maplibregl.Popup({\n          offset: [offsetX, offsetY],\n          closeButton: false,\n          closeOnClick: false,\n          className: \"listing-popup\",\n          maxWidth: \"400px\",\n        })\n          .setLngLat([listing.coordinates.lng, listing.coordinates.lat])\n          .setHTML(popupContent)\n          .addTo(mapRef.current!)\n\n        const popupElement = popup.getElement()\n        if (popupElement) {\n          popupElement.style.zIndex = \"1000\"\n\n          const closeButton = popupElement.querySelector(\".close-popup-btn\")\n          if (closeButton) {\n            closeButton.addEventListener(\"click\", (e) => {\n              e.stopPropagation()\n              popup.remove()\n              popupRef.current = null\n              selectListing(null)\n            })\n          }\n\n          popupElement.addEventListener(\"click\", (e) => {\n            e.stopPropagation()\n            if (mapRef.current) {\n              isAnimatingRef.current = true\n              mapRef.current.flyTo({\n                center: [listing.coordinates.lng, listing.coordinates.lat],\n                zoom: Math.max(mapRef.current.getZoom(), 14),\n                essential: true,\n              })\n            }\n          })\n        }\n\n        popupRef.current = popup\n        selectListing(listing.id)\n      })\n\n      const marker = new maplibregl.Marker({ element: el })\n        .setLngLat([listing.coordinates.lng, listing.coordinates.lat])\n        .addTo(mapRef.current!)\n\n      markersRef.current.set(listing.id, marker)\n    })\n  }, [listings, selectedListingId, selectListing])\n\n  const lastCenterRef = React.useRef({\n    lat: mapCenter.lat,\n    lng: mapCenter.lng,\n  })\n  const lastZoomRef = React.useRef(mapZoom)\n\n  React.useEffect(() => {\n    if (!mapRef.current) return\n\n    const centerChanged =\n      Math.abs(lastCenterRef.current.lat - mapCenter.lat) > 0.0001 ||\n      Math.abs(lastCenterRef.current.lng - mapCenter.lng) > 0.0001\n    const zoomChanged = Math.abs(lastZoomRef.current - mapZoom) > 0.1\n\n    if (centerChanged || zoomChanged) {\n      isAnimatingRef.current = true\n      mapRef.current.flyTo({\n        center: [mapCenter.lng, mapCenter.lat],\n        zoom: mapZoom,\n        essential: true,\n      })\n      lastCenterRef.current = { lat: mapCenter.lat, lng: mapCenter.lng }\n      lastZoomRef.current = mapZoom\n    }\n  }, [mapCenter, mapZoom])\n\n  return <div ref={containerRef} className=\"absolute inset-0 h-full w-full\" />\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/dashboard/sidebar.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/rentals/components/dashboard/sidebar.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport {\n  ChevronsUpDown,\n  Heart,\n  Home,\n  LogOut,\n  Minus,\n  Plus,\n  Search,\n  Settings,\n} from \"lucide-react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Input } from \"@loveui/ui/ui/input\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\nimport { Separator } from \"@loveui/ui/ui/separator\"\nimport { Slider } from \"@loveui/ui/ui/slider\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nimport { cn } from \"../../lib/utils\"\nimport { propertyTypeLabels, type PropertyType } from \"../../mock-data/listings\"\nimport { useRentalsStore } from \"../../store/rentals-store\"\n\nconst navItems = [\n  { id: \"all\", title: \"All Gear\", icon: Home, href: \"/\" },\n  { id: \"favorites\", title: \"Favorites\", icon: Heart, href: \"/favorites\" },\n]\n\nconst propertyTypes: PropertyType[] = [\n  \"apartment\",\n  \"house\",\n  \"villa\",\n  \"studio\",\n  \"loft\",\n  \"cottage\",\n]\n\nexport function RentalsSidebar({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  const pathname = usePathname()\n  const {\n    listings,\n    searchQuery,\n    setSearchQuery,\n    selectedPropertyTypes,\n    togglePropertyType,\n    priceRange,\n    setPriceRange,\n    bedrooms,\n    setBedrooms,\n    bathrooms,\n    setBathrooms,\n    getFilteredListings,\n    getFavoriteListings,\n    resetFilters,\n  } = useRentalsStore()\n\n  const favoriteCount = listings.filter((l) => l.isFavorite).length\n  const allCount = listings.length\n  const filteredCount = getFilteredListings().length\n\n  const activeFiltersCount =\n    selectedPropertyTypes.length +\n    (priceRange[0] !== 0 || priceRange[1] !== 500 ? 1 : 0) +\n    (bedrooms !== null ? 1 : 0) +\n    (bathrooms !== null ? 1 : 0)\n\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader className=\"px-2.5 py-3\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <button className=\"-m-1 flex w-full shrink-0 items-center gap-2.5 rounded-md p-1 transition-colors hover:bg-sidebar-accent\">\n                <div className=\"flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground\">\n                  <Home className=\"size-4\" />\n                </div>\n                <div className=\"flex items-center gap-1 group-data-[collapsible=icon]:hidden\">\n                  <span className=\"text-sm font-medium\">\n                    LoveUI - Gear Market\n                  </span>\n                  <ChevronsUpDown className=\"size-3 text-muted-foreground\" />\n                </div>\n              </button>\n            }\n          />\n          <DropdownMenuContent align=\"start\" className=\"w-56\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Settings className=\"size-4\" />\n                <span>Settings</span>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n                <LogOut className=\"size-4\" />\n                <span>Log out</span>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarHeader>\n\n      <SidebarContent className=\"px-2.5\">\n        <SidebarGroup className=\"p-0\">\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {navItems.map((item) => {\n                const isActive = pathname === item.href\n                let badge: number | undefined\n                if (item.id === \"favorites\") badge = favoriteCount\n                if (item.id === \"all\") badge = allCount\n\n                return (\n                  <SidebarMenuItem key={item.id}>\n                    <SidebarMenuButton\n                      render={<Link href={item.href} />}\n                      isActive={isActive}\n                      className=\"h-8\"\n                    >\n                      <item.icon className=\"size-4\" />\n                      <span className=\"text-sm\">{item.title}</span>\n                    </SidebarMenuButton>\n                    {badge !== undefined && badge > 0 && (\n                      <SidebarMenuBadge>{badge}</SidebarMenuBadge>\n                    )}\n                  </SidebarMenuItem>\n                )\n              })}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarGroup className=\"mt-4 p-0\">\n          <SidebarGroupLabel className=\"h-6 px-0\">\n            <span className=\"text-[10px] font-medium tracking-wider text-muted-foreground uppercase\">\n              Search\n            </span>\n          </SidebarGroupLabel>\n          <SidebarGroupContent>\n            <div className=\"px-2 pb-2\">\n              <div className=\"relative\">\n                <Search className=\"pointer-events-none absolute top-1/2 left-2 z-10 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground\" />\n                <Input\n                  type=\"text\"\n                  placeholder=\"Search products...\"\n                  value={searchQuery}\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  className=\"h-8 pl-7 text-sm\"\n                />\n              </div>\n            </div>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarGroup className=\"mt-4 p-0\">\n          <SidebarGroupLabel className=\"flex h-6 items-center justify-between px-0\">\n            <span className=\"text-[10px] font-medium tracking-wider text-muted-foreground uppercase\">\n              Filters\n            </span>\n            {activeFiltersCount > 0 && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-5 px-1.5 text-[10px]\"\n                onClick={resetFilters}\n              >\n                Clear\n              </Button>\n            )}\n          </SidebarGroupLabel>\n          <SidebarGroupContent>\n            <div className=\"space-y-4 px-2\">\n              <div>\n                <p className=\"mb-2 text-xs font-medium text-sidebar-foreground\">\n                  Category\n                </p>\n                <div className=\"flex flex-wrap gap-1.5\">\n                  {propertyTypes.map((type) => (\n                    <Button\n                      key={type}\n                      variant={\n                        selectedPropertyTypes.includes(type)\n                          ? \"default\"\n                          : \"outline\"\n                      }\n                      size=\"sm\"\n                      onClick={() => togglePropertyType(type)}\n                      className={cn(\n                        \"h-7 px-2 text-xs\",\n                        selectedPropertyTypes.includes(type) &&\n                          \"bg-primary text-primary-foreground\"\n                      )}\n                    >\n                      {propertyTypeLabels[type]}\n                    </Button>\n                  ))}\n                </div>\n              </div>\n\n              <Separator />\n\n              <div>\n                <p className=\"mb-2 text-xs font-medium text-sidebar-foreground\">\n                  Daily rate\n                </p>\n                <div className=\"space-y-2\">\n                  <div className=\"px-2\">\n                    <Slider\n                      value={[priceRange[0], priceRange[1]]}\n                      onValueChange={(value) => {\n                        const range = (\n                          Array.isArray(value) ? value : [value, value]\n                        ) as readonly number[]\n                        setPriceRange([\n                          range[0] ?? 0,\n                          range[1] ?? range[0] ?? 0,\n                        ])\n                      }}\n                      min={0}\n                      max={500}\n                      step={10}\n                      className=\"w-full\"\n                    />\n                    <div className=\"mt-2 flex items-center justify-between\">\n                      <span className=\"text-xs text-muted-foreground\">\n                        ${priceRange[0]}\n                      </span>\n                      <span className=\"text-xs text-muted-foreground\">\n                        ${priceRange[1]}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <Separator />\n\n              <div>\n                <p className=\"mb-2 text-xs font-medium text-sidebar-foreground\">\n                  Inventory\n                </p>\n                <div className=\"space-y-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-xs text-sidebar-foreground\">\n                      Kits\n                    </span>\n                    <div className=\"flex items-center gap-1\">\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"h-6 w-6\"\n                        onClick={() =>\n                          setBedrooms(\n                            bedrooms !== null && bedrooms > 0\n                              ? bedrooms - 1\n                              : null\n                          )\n                        }\n                      >\n                        <Minus className=\"h-3 w-3\" />\n                      </Button>\n                      <span className=\"w-6 text-center text-xs\">\n                        {bedrooms ?? \"Any\"}\n                      </span>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"h-6 w-6\"\n                        onClick={() => setBedrooms((bedrooms ?? 0) + 1)}\n                      >\n                        <Plus className=\"h-3 w-3\" />\n                      </Button>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-xs text-sidebar-foreground\">\n                      Add-ons\n                    </span>\n                    <div className=\"flex items-center gap-1\">\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"h-6 w-6\"\n                        onClick={() =>\n                          setBathrooms(\n                            bathrooms !== null && bathrooms > 0\n                              ? bathrooms - 1\n                              : null\n                          )\n                        }\n                      >\n                        <Minus className=\"h-3 w-3\" />\n                      </Button>\n                      <span className=\"w-6 text-center text-xs\">\n                        {bathrooms ?? \"Any\"}\n                      </span>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"h-6 w-6\"\n                        onClick={() => setBathrooms((bathrooms ?? 0) + 1)}\n                      >\n                        <Plus className=\"h-3 w-3\" />\n                      </Button>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/theme-provider.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/rentals/components/theme-provider.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\"\n\nexport function ThemeProvider({\n  children,\n  ...props\n}: React.ComponentProps<typeof NextThemesProvider>) {\n  return <NextThemesProvider {...props}>{children}</NextThemesProvider>\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/theme-toggle.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/rentals/components/theme-toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\n\ninterface ThemeToggleProps {\n  className?: string\n}\n\nexport function ThemeToggle({ className }: ThemeToggleProps) {\n  const { setTheme, theme } = useTheme()\n\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"icon\"\n      className={className}\n      onClick={() => setTheme(theme === \"light\" ? \"dark\" : \"light\")}\n    >\n      <Sun className=\"size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\" />\n      <Moon className=\"absolute size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\" />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/badge.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/badge.tsx",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ className, variant })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/button.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/button.tsx",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: ButtonProps) {\n  const Comp: any = asChild ? Slot : \"button\"\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...(props as any)}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/carousel.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/carousel.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <>\n      {canScrollPrev && (\n        <Button\n          data-slot=\"carousel-previous\"\n          variant={variant}\n          size={size}\n          className={cn(\n            \"absolute size-8 rounded-full\",\n            orientation === \"horizontal\"\n              ? \"top-1/2 -left-12 -translate-y-1/2\"\n              : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className\n          )}\n          onClick={(e) => {\n            e.stopPropagation()\n            scrollPrev()\n          }}\n          {...props}\n        >\n          <ArrowLeft className=\"size-4\" />\n          <span className=\"sr-only\">Previous slide</span>\n        </Button>\n      )}\n    </>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <>\n      {canScrollNext && (\n        <Button\n          data-slot=\"carousel-next\"\n          variant={variant}\n          size={size}\n          className={cn(\n            \"absolute size-8 rounded-full\",\n            orientation === \"horizontal\"\n              ? \"top-1/2 -right-12 -translate-y-1/2\"\n              : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n            className\n          )}\n          onClick={(e) => {\n            e.stopPropagation()\n            scrollNext()\n          }}\n          {...props}\n        >\n          <ArrowRight className=\"size-4\" />\n          <span className=\"sr-only\">Next slide</span>\n        </Button>\n      )}\n    </>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/dropdown-menu.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\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 DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item 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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"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 not-data-[variant=destructive]:focus:**:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100\",\n        className\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.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-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <Check className=\"size-4\" />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.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-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <Check className=\"size-4\" />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.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    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/input.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/input.tsx",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/separator.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/separator.tsx",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/sheet.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/sheet.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/sidebar.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"../../hooks/use-mobile\"\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Separator } from \"./separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"./sheet\"\nimport { Skeleton } from \"./skeleton\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"./tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as any\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"top-[var(--sidebar-top-offset,0px)] h-[calc(100svh-var(--sidebar-top-offset,0px))] w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as any\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed top-[var(--sidebar-top-offset,0px)] bottom-0 z-10 hidden h-[calc(100svh-var(--sidebar-top-offset,0px))] w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeft className=\"size-4\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          showOnHover &&\n            \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as any\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-[size=md]:text-sm data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/skeleton.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/skeleton.tsx",
+      "content": "import type { ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Skeleton({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/slider.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/slider.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(\n            \"absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/components/ui/tooltip.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/rentals/components/ui/tooltip.tsx",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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 z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md bg-foreground px-3 py-1.5 text-xs text-background\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/hooks/use-mobile.ts",
+      "type": "registry:hook",
+      "target": "components/example-apps/rentals/hooks/use-mobile.ts",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/index.tsx",
+      "type": "registry:file",
+      "target": "components/example-apps/rentals/index.tsx",
+      "content": "/**\n * Wrapper export for embedding the app in the docs app\n */\n\"use client\"\n\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\"\n\nimport { ListingsPanel } from \"./components/dashboard/listings-panel\"\nimport { MapControls } from \"./components/dashboard/map-controls\"\nimport { MapView } from \"./components/dashboard/map-view\"\nimport { RentalsSidebar } from \"./components/dashboard/sidebar\"\n\nexport default function RentalsWrapper() {\n  return (\n    <SidebarProvider>\n      <RentalsSidebar />\n      <SidebarInset className=\"overflow-hidden\">\n        <div className=\"relative h-full w-full overflow-hidden\">\n          <MapView />\n          <ListingsPanel />\n          <MapControls />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/lib/utils.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/rentals/lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/mock-data/listings.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/rentals/mock-data/listings.ts",
+      "content": "export type PropertyType =\n  | \"apartment\"\n  | \"house\"\n  | \"villa\"\n  | \"studio\"\n  | \"loft\"\n  | \"cottage\"\n\nexport type Listing = {\n  id: string\n  title: string\n  description: string\n  address: string\n  city: string\n  country: string\n  coordinates: {\n    lat: number\n    lng: number\n  }\n  pricePerNight: number\n  propertyType: PropertyType\n  bedrooms: number\n  beds: number\n  bathrooms: number\n  guests: number\n  rating: number\n  reviewCount: number\n  images: string[]\n  amenities: string[]\n  host: {\n    name: string\n    avatar: string\n    isSuperhost: boolean\n  }\n  isFavorite: boolean\n  isNew: boolean\n  instantBook: boolean\n}\n\nconst cameraImages = [\n  \"https://images.unsplash.com/photo-1516035069371-29a1b244cc32?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1495707902641-75cac588d2e9?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1502982720700-bfff97f2ecac?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1452780212940-6f5c0d14d848?w=900&h=700&fit=crop\",\n]\n\nconst audioImages = [\n  \"https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1589903308904-1010c2294adc?w=900&h=700&fit=crop\",\n]\n\nconst cyclingImages = [\n  \"https://images.unsplash.com/photo-1511994298241-608e28f14fde?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1529422643029-d4585747aaf2?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1485965120184-e220f721d03e?w=900&h=700&fit=crop\",\n]\n\nconst campingImages = [\n  \"https://images.unsplash.com/photo-1504851149312-7a075b496cc7?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1470246973918-29a93221c455?w=900&h=700&fit=crop\",\n]\n\nconst droneImages = [\n  \"https://images.unsplash.com/photo-1508614589041-895b88991e3e?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1521405924368-64c5b84bec60?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1524143986875-3b098d78b363?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1527977966376-1c8408f9f108?w=900&h=700&fit=crop\",\n]\n\nconst gamingImages = [\n  \"https://images.unsplash.com/photo-1542751371-adc38448a05e?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1545239351-1141bd82e8a6?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?w=900&h=700&fit=crop\",\n  \"https://images.unsplash.com/photo-1598550476439-6847785fcea6?w=900&h=700&fit=crop\",\n]\n\nexport const listings: Listing[] = [\n  {\n    id: \"gear-1\",\n    title: \"Sony FX3 Creator Cinema Kit\",\n    description:\n      \"Full-frame camera kit with cage, monitor, and dual batteries for short-form shoots.\",\n    address: \"1141 W Colfax Ave\",\n    city: \"Denver\",\n    country: \"USA\",\n    coordinates: { lat: 39.7392, lng: -104.9903 },\n    pricePerNight: 185,\n    propertyType: \"apartment\",\n    bedrooms: 3,\n    beds: 5,\n    bathrooms: 2,\n    guests: 6,\n    rating: 4.9,\n    reviewCount: 132,\n    images: cameraImages,\n    amenities: [\n      \"Damage waiver\",\n      \"Same-day pickup\",\n      \"Tripod included\",\n      \"ND filters\",\n    ],\n    host: {\n      name: \"Mia Park\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=MiaPark\",\n      isSuperhost: true,\n    },\n    isFavorite: true,\n    isNew: false,\n    instantBook: true,\n  },\n  {\n    id: \"gear-2\",\n    title: \"Canon R6 Mark II Event Bundle\",\n    description:\n      \"Low-light camera setup with two lenses and flash for events and portraits.\",\n    address: \"219 SW Pine St\",\n    city: \"Portland\",\n    country: \"USA\",\n    coordinates: { lat: 45.5152, lng: -122.6784 },\n    pricePerNight: 165,\n    propertyType: \"apartment\",\n    bedrooms: 2,\n    beds: 4,\n    bathrooms: 2,\n    guests: 4,\n    rating: 4.8,\n    reviewCount: 88,\n    images: cameraImages,\n    amenities: [\"Insurance included\", \"Lens cleaning kit\", \"Express return\"],\n    host: {\n      name: \"Noah Kim\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=NoahKim\",\n      isSuperhost: true,\n    },\n    isFavorite: false,\n    isNew: true,\n    instantBook: true,\n  },\n  {\n    id: \"gear-3\",\n    title: \"Rode Podcast Studio Rack\",\n    description:\n      \"Two-mic recording station with interface, acoustic panels, and backup recorder.\",\n    address: \"802 E 6th St\",\n    city: \"Austin\",\n    country: \"USA\",\n    coordinates: { lat: 30.2672, lng: -97.7431 },\n    pricePerNight: 95,\n    propertyType: \"house\",\n    bedrooms: 2,\n    beds: 4,\n    bathrooms: 3,\n    guests: 5,\n    rating: 4.7,\n    reviewCount: 61,\n    images: audioImages,\n    amenities: [\"On-site sound check\", \"USB-C cables\", \"Pop filters\"],\n    host: {\n      name: \"Camden Lee\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=CamdenLee\",\n      isSuperhost: false,\n    },\n    isFavorite: true,\n    isNew: false,\n    instantBook: true,\n  },\n  {\n    id: \"gear-4\",\n    title: \"Pioneer DJ Booth Starter Set\",\n    description:\n      \"Controller, monitors, and lighting for club practice sessions and pop-up sets.\",\n    address: \"1430 2nd Ave\",\n    city: \"Seattle\",\n    country: \"USA\",\n    coordinates: { lat: 47.6062, lng: -122.3321 },\n    pricePerNight: 140,\n    propertyType: \"house\",\n    bedrooms: 3,\n    beds: 5,\n    bathrooms: 4,\n    guests: 8,\n    rating: 4.9,\n    reviewCount: 109,\n    images: audioImages,\n    amenities: [\"Speaker stands\", \"MIDI cables\", \"Late-night pickup\"],\n    host: {\n      name: \"Zara Patel\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=ZaraPatel\",\n      isSuperhost: true,\n    },\n    isFavorite: false,\n    isNew: true,\n    instantBook: false,\n  },\n  {\n    id: \"gear-5\",\n    title: \"Trek Domane Carbon Road Package\",\n    description:\n      \"Race-ready road bike with helmet, meter pedals, and roadside repair kit.\",\n    address: \"1745 28th St\",\n    city: \"Boulder\",\n    country: \"USA\",\n    coordinates: { lat: 40.015, lng: -105.2705 },\n    pricePerNight: 125,\n    propertyType: \"villa\",\n    bedrooms: 2,\n    beds: 3,\n    bathrooms: 2,\n    guests: 2,\n    rating: 4.8,\n    reviewCount: 73,\n    images: cyclingImages,\n    amenities: [\"Bike fit included\", \"Tube pack\", \"GPS mount\"],\n    host: {\n      name: \"Ethan Ruiz\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=EthanRuiz\",\n      isSuperhost: true,\n    },\n    isFavorite: true,\n    isNew: false,\n    instantBook: true,\n  },\n  {\n    id: \"gear-6\",\n    title: \"Specialized Trail e-MTB Set\",\n    description:\n      \"Electric mountain bike package with charger, pads, and hydration vest.\",\n    address: \"5025 N Harbor Dr\",\n    city: \"San Diego\",\n    country: \"USA\",\n    coordinates: { lat: 32.7157, lng: -117.1611 },\n    pricePerNight: 160,\n    propertyType: \"villa\",\n    bedrooms: 2,\n    beds: 3,\n    bathrooms: 3,\n    guests: 2,\n    rating: 4.9,\n    reviewCount: 96,\n    images: cyclingImages,\n    amenities: [\"Helmet included\", \"Trail map pack\", \"Battery swap option\"],\n    host: {\n      name: \"Ava Brooks\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=AvaBrooks\",\n      isSuperhost: true,\n    },\n    isFavorite: false,\n    isNew: true,\n    instantBook: true,\n  },\n  {\n    id: \"gear-7\",\n    title: \"4-Person Basecamp Weekend Kit\",\n    description:\n      \"Tent, stove, lanterns, and insulated sleeping system for quick camp escapes.\",\n    address: \"8812 N 3rd St\",\n    city: \"Phoenix\",\n    country: \"USA\",\n    coordinates: { lat: 33.4484, lng: -112.074 },\n    pricePerNight: 84,\n    propertyType: \"studio\",\n    bedrooms: 4,\n    beds: 8,\n    bathrooms: 4,\n    guests: 6,\n    rating: 4.6,\n    reviewCount: 57,\n    images: campingImages,\n    amenities: [\"Cooler included\", \"Fuel canister\", \"Camp chairs\"],\n    host: {\n      name: \"Leo Clark\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=LeoClark\",\n      isSuperhost: false,\n    },\n    isFavorite: false,\n    isNew: false,\n    instantBook: true,\n  },\n  {\n    id: \"gear-8\",\n    title: \"Winter Touring Shelter Bundle\",\n    description:\n      \"Cold-weather tent system, avalanche beacons, and insulated cook station.\",\n    address: \"311 W 200 S\",\n    city: \"Salt Lake City\",\n    country: \"USA\",\n    coordinates: { lat: 40.7608, lng: -111.891 },\n    pricePerNight: 112,\n    propertyType: \"studio\",\n    bedrooms: 3,\n    beds: 7,\n    bathrooms: 5,\n    guests: 5,\n    rating: 4.7,\n    reviewCount: 48,\n    images: campingImages,\n    amenities: [\"Emergency beacon\", \"Snow stakes\", \"Warm liner set\"],\n    host: {\n      name: \"Iris Shaw\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=IrisShaw\",\n      isSuperhost: true,\n    },\n    isFavorite: true,\n    isNew: false,\n    instantBook: false,\n  },\n  {\n    id: \"gear-9\",\n    title: \"DJI Mavic 3 Fly More Pack\",\n    description:\n      \"Long-range drone bundle with ND set, charging dock, and dual operator screens.\",\n    address: \"810 Broadway\",\n    city: \"Nashville\",\n    country: \"USA\",\n    coordinates: { lat: 36.1627, lng: -86.7816 },\n    pricePerNight: 210,\n    propertyType: \"loft\",\n    bedrooms: 2,\n    beds: 4,\n    bathrooms: 3,\n    guests: 3,\n    rating: 4.9,\n    reviewCount: 143,\n    images: droneImages,\n    amenities: [\"Flight insurance\", \"Landing pad\", \"48-hour support\"],\n    host: {\n      name: \"Remy Foster\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=RemyFoster\",\n      isSuperhost: true,\n    },\n    isFavorite: true,\n    isNew: true,\n    instantBook: true,\n  },\n  {\n    id: \"gear-10\",\n    title: \"FPV Racing Drone Starter Crate\",\n    description:\n      \"Complete FPV setup with goggles, spare props, and training simulator access.\",\n    address: \"155 NE 40th St\",\n    city: \"Miami\",\n    country: \"USA\",\n    coordinates: { lat: 25.7617, lng: -80.1918 },\n    pricePerNight: 132,\n    propertyType: \"loft\",\n    bedrooms: 3,\n    beds: 5,\n    bathrooms: 4,\n    guests: 4,\n    rating: 4.7,\n    reviewCount: 77,\n    images: droneImages,\n    amenities: [\"Extra propellers\", \"Practice gates\", \"Battery bag\"],\n    host: {\n      name: \"Skye Morgan\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=SkyeMorgan\",\n      isSuperhost: false,\n    },\n    isFavorite: false,\n    isNew: false,\n    instantBook: true,\n  },\n  {\n    id: \"gear-11\",\n    title: \"Pro Streaming Battle Station\",\n    description:\n      \"Dual-PC gaming setup with capture card, scene lights, and creator mic arm.\",\n    address: \"227 W Hubbard St\",\n    city: \"Chicago\",\n    country: \"USA\",\n    coordinates: { lat: 41.8781, lng: -87.6298 },\n    pricePerNight: 118,\n    propertyType: \"cottage\",\n    bedrooms: 2,\n    beds: 4,\n    bathrooms: 4,\n    guests: 3,\n    rating: 4.8,\n    reviewCount: 84,\n    images: gamingImages,\n    amenities: [\"Scene presets\", \"Cable management\", \"Overlays included\"],\n    host: {\n      name: \"Jules Quinn\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=JulesQuinn\",\n      isSuperhost: true,\n    },\n    isFavorite: false,\n    isNew: true,\n    instantBook: true,\n  },\n  {\n    id: \"gear-12\",\n    title: \"VR Event Pop-up Arena Kit\",\n    description:\n      \"Portable VR package for activations with signage, chargers, and queue display.\",\n    address: \"443 W 14th St\",\n    city: \"New York\",\n    country: \"USA\",\n    coordinates: { lat: 40.7128, lng: -74.006 },\n    pricePerNight: 225,\n    propertyType: \"cottage\",\n    bedrooms: 4,\n    beds: 8,\n    bathrooms: 5,\n    guests: 10,\n    rating: 4.9,\n    reviewCount: 101,\n    images: gamingImages,\n    amenities: [\"On-site setup\", \"Safety mats\", \"Fast replacement\"],\n    host: {\n      name: \"Theo Reed\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=TheoReed\",\n      isSuperhost: true,\n    },\n    isFavorite: true,\n    isNew: false,\n    instantBook: false,\n  },\n  {\n    id: \"gear-13\",\n    title: \"Portable Film Lighting Grid\",\n    description:\n      \"RGB panel package with softboxes and remote dimmer for interviews and product shots.\",\n    address: \"780 N Highland Ave\",\n    city: \"Los Angeles\",\n    country: \"USA\",\n    coordinates: { lat: 34.0522, lng: -118.2437 },\n    pricePerNight: 138,\n    propertyType: \"house\",\n    bedrooms: 3,\n    beds: 5,\n    bathrooms: 4,\n    guests: 5,\n    rating: 4.8,\n    reviewCount: 92,\n    images: cameraImages,\n    amenities: [\"Diffusion kit\", \"Sandbags\", \"Color cards\"],\n    host: {\n      name: \"Rae Dalton\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=RaeDalton\",\n      isSuperhost: false,\n    },\n    isFavorite: false,\n    isNew: false,\n    instantBook: true,\n  },\n  {\n    id: \"gear-14\",\n    title: \"Wedding Photo Duo Package\",\n    description:\n      \"Two-camera setup with portrait primes, wireless flash triggers, and backup drive.\",\n    address: \"940 Peachtree St NE\",\n    city: \"Atlanta\",\n    country: \"USA\",\n    coordinates: { lat: 33.749, lng: -84.388 },\n    pricePerNight: 196,\n    propertyType: \"apartment\",\n    bedrooms: 3,\n    beds: 6,\n    bathrooms: 3,\n    guests: 6,\n    rating: 4.9,\n    reviewCount: 128,\n    images: cameraImages,\n    amenities: [\"Lens insurance\", \"Rain cover\", \"Color checker\"],\n    host: {\n      name: \"Kira Holt\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=KiraHolt\",\n      isSuperhost: true,\n    },\n    isFavorite: true,\n    isNew: false,\n    instantBook: true,\n  },\n  {\n    id: \"gear-15\",\n    title: \"Field Audio Interview Pack\",\n    description:\n      \"Compact audio kit with lavs, boom mic, and timecode recorder for documentary crews.\",\n    address: \"1810 Rue Sainte-Catherine O\",\n    city: \"Montreal\",\n    country: \"Canada\",\n    coordinates: { lat: 45.5017, lng: -73.5673 },\n    pricePerNight: 104,\n    propertyType: \"house\",\n    bedrooms: 2,\n    beds: 4,\n    bathrooms: 3,\n    guests: 4,\n    rating: 4.7,\n    reviewCount: 59,\n    images: audioImages,\n    amenities: [\"Rechargeable battery bank\", \"Wind protection\", \"Hard case\"],\n    host: {\n      name: \"Nina Vale\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=NinaVale\",\n      isSuperhost: false,\n    },\n    isFavorite: false,\n    isNew: true,\n    instantBook: true,\n  },\n  {\n    id: \"gear-16\",\n    title: \"Urban Courier Bike Fleet Kit\",\n    description:\n      \"Three-bike city set with helmets, pannier bags, and tracking mounts.\",\n    address: \"390 W Cordova St\",\n    city: \"Vancouver\",\n    country: \"Canada\",\n    coordinates: { lat: 49.2827, lng: -123.1207 },\n    pricePerNight: 148,\n    propertyType: \"villa\",\n    bedrooms: 3,\n    beds: 6,\n    bathrooms: 4,\n    guests: 6,\n    rating: 4.8,\n    reviewCount: 68,\n    images: cyclingImages,\n    amenities: [\"Helmet cleaning\", \"Bike locks\", \"Frame lights\"],\n    host: {\n      name: \"Owen Cross\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=OwenCross\",\n      isSuperhost: true,\n    },\n    isFavorite: false,\n    isNew: false,\n    instantBook: false,\n  },\n  {\n    id: \"gear-17\",\n    title: \"Creator Office Workstation Set\",\n    description:\n      \"Desk setup with monitor arm, key light, and webcam for remote brand shoots.\",\n    address: \"96 Shoreditch High St\",\n    city: \"London\",\n    country: \"UK\",\n    coordinates: { lat: 51.5074, lng: -0.1278 },\n    pricePerNight: 89,\n    propertyType: \"cottage\",\n    bedrooms: 2,\n    beds: 3,\n    bathrooms: 2,\n    guests: 2,\n    rating: 4.6,\n    reviewCount: 53,\n    images: gamingImages,\n    amenities: [\"Cable kit\", \"Desk mount\", \"Audio interface\"],\n    host: {\n      name: \"Sage Bennett\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=SageBennett\",\n      isSuperhost: false,\n    },\n    isFavorite: true,\n    isNew: false,\n    instantBook: true,\n  },\n  {\n    id: \"gear-18\",\n    title: \"Street Documentary Drone Rig\",\n    description:\n      \"Compact travel drone setup with fast charger and compliance checklist.\",\n    address: \"27 Linienstrasse\",\n    city: \"Berlin\",\n    country: \"Germany\",\n    coordinates: { lat: 52.52, lng: 13.405 },\n    pricePerNight: 172,\n    propertyType: \"loft\",\n    bedrooms: 2,\n    beds: 4,\n    bathrooms: 3,\n    guests: 3,\n    rating: 4.9,\n    reviewCount: 117,\n    images: droneImages,\n    amenities: [\"Flight log template\", \"Insurance PDF\", \"Travel case\"],\n    host: {\n      name: \"Arlo Finch\",\n      avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=ArloFinch\",\n      isSuperhost: true,\n    },\n    isFavorite: true,\n    isNew: true,\n    instantBook: true,\n  },\n]\n\nexport const propertyTypeLabels: Record<PropertyType, string> = {\n  apartment: \"Cameras\",\n  house: \"Audio\",\n  villa: \"Cycling\",\n  studio: \"Camping\",\n  loft: \"Drones\",\n  cottage: \"Gaming\",\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/rentals/store/rentals-store.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/rentals/store/rentals-store.ts",
+      "content": "import { create } from \"zustand\"\n\nimport {\n  listings as initialListings,\n  type Listing,\n  type PropertyType,\n} from \"../mock-data/listings\"\n\ntype SortBy =\n  | \"price-low\"\n  | \"price-high\"\n  | \"rating\"\n  | \"newest\"\n  | \"reviews\"\n  | \"nearest\"\n\ntype MapStyle = \"default\" | \"streets\" | \"outdoors\" | \"satellite\"\n\ninterface RentalsState {\n  listings: Listing[]\n  searchQuery: string\n  selectedPropertyTypes: PropertyType[]\n  priceRange: [number, number]\n  bedrooms: number | null\n  bathrooms: number | null\n  beds: number | null\n  guests: number | null\n  amenities: string[]\n  sortBy: SortBy\n  selectedListingId: string | null\n  mapCenter: { lat: number; lng: number }\n  mapZoom: number\n  mapStyle: MapStyle\n  userLocation: { lat: number; lng: number } | null\n  setSearchQuery: (query: string) => void\n  togglePropertyType: (type: PropertyType) => void\n  setPriceRange: (range: [number, number]) => void\n  setBedrooms: (count: number | null) => void\n  setBathrooms: (count: number | null) => void\n  setBeds: (count: number | null) => void\n  setGuests: (count: number | null) => void\n  toggleAmenity: (amenity: string) => void\n  setSortBy: (sort: SortBy) => void\n  toggleFavorite: (listingId: string) => void\n  selectListing: (listingId: string | null) => void\n  setMapCenter: (center: { lat: number; lng: number }) => void\n  setMapZoom: (zoom: number) => void\n  setMapStyle: (style: MapStyle) => void\n  setUserLocation: (location: { lat: number; lng: number } | null) => void\n  getFilteredListings: () => Listing[]\n  getFavoriteListings: () => Listing[]\n  resetFilters: () => void\n}\n\nconst defaultPriceRange: [number, number] = [0, 500]\n\nfunction calculateDistance(\n  lat1: number,\n  lng1: number,\n  lat2: number,\n  lng2: number\n): number {\n  const R = 6371\n  const dLat = ((lat2 - lat1) * Math.PI) / 180\n  const dLng = ((lng2 - lng1) * Math.PI) / 180\n  const a =\n    Math.sin(dLat / 2) * Math.sin(dLat / 2) +\n    Math.cos((lat1 * Math.PI) / 180) *\n      Math.cos((lat2 * Math.PI) / 180) *\n      Math.sin(dLng / 2) *\n      Math.sin(dLng / 2)\n  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))\n  return R * c\n}\n\nexport const useRentalsStore = create<RentalsState>((set, get) => ({\n  listings: initialListings,\n  searchQuery: \"\",\n  selectedPropertyTypes: [],\n  priceRange: defaultPriceRange,\n  bedrooms: null,\n  bathrooms: null,\n  beds: null,\n  guests: null,\n  amenities: [],\n  sortBy: \"price-low\",\n  selectedListingId: null,\n  mapCenter: { lat: 39.7392, lng: -104.9903 },\n  mapZoom: 4,\n  mapStyle: \"default\",\n  userLocation: null,\n\n  setSearchQuery: (query) => set({ searchQuery: query }),\n\n  togglePropertyType: (type) =>\n    set((state) => ({\n      selectedPropertyTypes: state.selectedPropertyTypes.includes(type)\n        ? state.selectedPropertyTypes.filter((t) => t !== type)\n        : [...state.selectedPropertyTypes, type],\n    })),\n\n  setPriceRange: (range) => set({ priceRange: range }),\n\n  setBedrooms: (count) => set({ bedrooms: count }),\n\n  setBathrooms: (count) => set({ bathrooms: count }),\n\n  setBeds: (count) => set({ beds: count }),\n\n  setGuests: (count) => set({ guests: count }),\n\n  toggleAmenity: (amenity) =>\n    set((state) => ({\n      amenities: state.amenities.includes(amenity)\n        ? state.amenities.filter((a) => a !== amenity)\n        : [...state.amenities, amenity],\n    })),\n\n  setSortBy: (sort) => set({ sortBy: sort }),\n\n  toggleFavorite: (listingId) =>\n    set((state) => ({\n      listings: state.listings.map((listing) =>\n        listing.id === listingId\n          ? { ...listing, isFavorite: !listing.isFavorite }\n          : listing\n      ),\n    })),\n\n  selectListing: (listingId) => set({ selectedListingId: listingId }),\n\n  setMapCenter: (center) => set({ mapCenter: center }),\n\n  setMapZoom: (zoom) => set({ mapZoom: zoom }),\n\n  setMapStyle: (style) => set({ mapStyle: style }),\n\n  setUserLocation: (location) => set({ userLocation: location }),\n\n  resetFilters: () =>\n    set({\n      searchQuery: \"\",\n      selectedPropertyTypes: [],\n      priceRange: defaultPriceRange,\n      bedrooms: null,\n      bathrooms: null,\n      beds: null,\n      guests: null,\n      amenities: [],\n      sortBy: \"price-low\",\n    }),\n\n  getFilteredListings: () => {\n    const state = get()\n    let filtered = [...state.listings]\n\n    if (state.searchQuery) {\n      const query = state.searchQuery.toLowerCase()\n      filtered = filtered.filter(\n        (listing) =>\n          listing.title.toLowerCase().includes(query) ||\n          listing.description.toLowerCase().includes(query) ||\n          listing.city.toLowerCase().includes(query) ||\n          listing.address.toLowerCase().includes(query)\n      )\n    }\n\n    if (state.selectedPropertyTypes.length > 0) {\n      filtered = filtered.filter((listing) =>\n        state.selectedPropertyTypes.includes(listing.propertyType)\n      )\n    }\n\n    filtered = filtered.filter(\n      (listing) =>\n        listing.pricePerNight >= state.priceRange[0] &&\n        listing.pricePerNight <= state.priceRange[1]\n    )\n\n    if (state.bedrooms !== null) {\n      filtered = filtered.filter(\n        (listing) => listing.bedrooms >= state.bedrooms!\n      )\n    }\n\n    if (state.bathrooms !== null) {\n      filtered = filtered.filter(\n        (listing) => listing.bathrooms >= state.bathrooms!\n      )\n    }\n\n    if (state.beds !== null) {\n      filtered = filtered.filter((listing) => listing.beds >= state.beds!)\n    }\n\n    if (state.guests !== null) {\n      filtered = filtered.filter((listing) => listing.guests >= state.guests!)\n    }\n\n    if (state.amenities.length > 0) {\n      filtered = filtered.filter((listing) =>\n        state.amenities.every((amenity) => listing.amenities.includes(amenity))\n      )\n    }\n\n    switch (state.sortBy) {\n      case \"price-low\":\n        filtered.sort((a, b) => a.pricePerNight - b.pricePerNight)\n        break\n      case \"price-high\":\n        filtered.sort((a, b) => b.pricePerNight - a.pricePerNight)\n        break\n      case \"rating\":\n        filtered.sort((a, b) => b.rating - a.rating)\n        break\n      case \"newest\":\n        filtered.sort((a, b) => (b.isNew ? 1 : 0) - (a.isNew ? 1 : 0))\n        break\n      case \"reviews\":\n        filtered.sort((a, b) => b.reviewCount - a.reviewCount)\n        break\n      case \"nearest\":\n        if (state.userLocation) {\n          filtered.sort((a, b) => {\n            const distA = calculateDistance(\n              state.userLocation!.lat,\n              state.userLocation!.lng,\n              a.coordinates.lat,\n              a.coordinates.lng\n            )\n            const distB = calculateDistance(\n              state.userLocation!.lat,\n              state.userLocation!.lng,\n              b.coordinates.lat,\n              b.coordinates.lng\n            )\n            return distA - distB\n          })\n        }\n        break\n    }\n\n    if (state.selectedListingId) {\n      const selectedIndex = filtered.findIndex(\n        (listing) => listing.id === state.selectedListingId\n      )\n      if (selectedIndex > 0) {\n        const selected = filtered.splice(selectedIndex, 1)[0]\n        filtered.unshift(selected)\n      }\n    }\n\n    return filtered\n  },\n\n  getFavoriteListings: () => {\n    const state = get()\n    let favorites = state.listings.filter((listing) => listing.isFavorite)\n\n    if (state.selectedListingId) {\n      const selectedIndex = favorites.findIndex(\n        (listing) => listing.id === state.selectedListingId\n      )\n      if (selectedIndex > 0) {\n        const selected = favorites.splice(selectedIndex, 1)[0]\n        favorites.unshift(selected)\n      }\n    }\n\n    return favorites\n  },\n}))\n"
+    }
+  ],
+  "categories": [
+    "example-app",
+    "e-commerce",
+    "gear",
+    "marketplace",
+    "maps"
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@radix-ui/react-slider",
+    "@radix-ui/react-slot",
+    "class-variance-authority",
+    "clsx",
+    "embla-carousel-react",
+    "lucide-react",
+    "maplibre-gl",
+    "next-themes",
+    "tailwind-merge",
+    "usehooks-ts",
+    "zustand"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/badge.json",
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/input.json",
+    "https://www.loveui.dev/r/menu.json",
+    "https://www.loveui.dev/r/separator.json",
+    "https://www.loveui.dev/r/slider.json",
+    "https://www.loveui.dev/r/tooltip.json"
+  ],
+  "meta": {
+    "source": "example-app",
+    "appName": "rentals",
+    "routes": [
+      {
+        "path": "/",
+        "title": "All Gear",
+        "description": "All gear listings map view"
+      },
+      {
+        "path": "/favorites",
+        "title": "Favorites",
+        "description": "Saved gear listings"
+      }
+    ]
+  }
+}