love-ui 1.2.13 → 1.2.15

package/public/r/leads.json

@@ -1,271 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "leads",
-  "type": "registry:block",
-  "title": "Leads Dashboard",
-  "description": "A sales leads dashboard with filtering, funnel metrics, growth charts, and lead tracking.",
-  "files": [
-    {
-      "path": "registry/example-apps/default/leads/components/dashboard/content.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/components/dashboard/content.tsx",
-      "content": "\"use client\"\n\nimport { FilterSection } from \"./filter-section\"\nimport { LeadsByStatusChart } from \"./leads-by-status-chart\"\nimport { LeadsTable } from \"./leads-table\"\nimport { MonthlyLeadGrowthChart } from \"./monthly-lead-growth-chart\"\nimport { StatsCards } from \"./stats-cards\"\n\nexport function DashboardContent() {\n  return (\n    <main className=\"w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:space-y-6 sm:p-4 md:p-6\">\n      <FilterSection />\n      <StatsCards />\n      <div className=\"flex flex-col gap-4 sm:gap-6 xl:flex-row\">\n        <MonthlyLeadGrowthChart />\n        <LeadsByStatusChart />\n      </div>\n      <LeadsTable />\n    </main>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/dashboard/filter-section.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/components/dashboard/filter-section.tsx",
-      "content": "\"use client\"\n\nimport {\n  Add01Icon,\n  ArrowDown01Icon,\n  Invoice01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { DateFilter, useLeadsStore } from \"../../store/leads-store\"\n\nconst dateFilterLabels: Record<DateFilter, string> = {\n  all: \"All Time\",\n  today: \"Today\",\n  yesterday: \"Yesterday\",\n  last_7_days: \"Last 7 Days\",\n  last_30_days: \"Last 30 Days\",\n  this_month: \"This Month\",\n}\n\nexport function FilterSection() {\n  const { dateFilter, setDateFilter } = useLeadsStore()\n\n  return (\n    <div className=\"flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button variant=\"outline\" className=\"gap-2\">\n              <span>{dateFilterLabels[dateFilter]}</span>\n              <HugeiconsIcon\n                icon={ArrowDown01Icon}\n                className=\"size-4 text-muted-foreground\"\n              />\n            </Button>\n          }\n        />\n        <DropdownMenuContent align=\"start\">\n          {Object.entries(dateFilterLabels).map(([key, label]) => (\n            <DropdownMenuItem\n              key={key}\n              onClick={() => setDateFilter(key as DateFilter)}\n              className={dateFilter === key ? \"bg-accent\" : \"\"}\n            >\n              {label}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n\n      <div className=\"flex items-center gap-2 sm:gap-3\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"outline\" className=\"gap-2\">\n                <span>Import/Export</span>\n                <HugeiconsIcon\n                  icon={ArrowDown01Icon}\n                  className=\"size-4 text-muted-foreground\"\n                />\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <HugeiconsIcon icon={Invoice01Icon} className=\"mr-2 size-4\" />\n              Import Sponsor Contacts\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <HugeiconsIcon icon={Invoice01Icon} className=\"mr-2 size-4\" />\n              Export Sponsor List (CSV)\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <HugeiconsIcon icon={Invoice01Icon} className=\"mr-2 size-4\" />\n              Export Sponsor List (Excel)\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <Button className=\"gap-2 bg-foreground text-background hover:bg-foreground/90\">\n          <HugeiconsIcon icon={Add01Icon} className=\"size-4\" />\n          <span>Add Sponsor</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/dashboard/header.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/components/dashboard/header.tsx",
-      "content": "\"use client\"\n\nimport {\n  ChartLineData01Icon,\n  Comment01Icon,\n  Invoice01Icon,\n  MoreHorizontalIcon,\n  Notification01Icon,\n  Search01Icon,\n  Settings01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Input } from \"@loveui/ui/ui/input\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { SidebarTrigger } from \"@/components/ui/sidebar\"\n\nimport { ThemeToggle } from \"../theme-toggle\"\n\nexport function DashboardHeader() {\n  return (\n    <header className=\"sticky top-0 z-10 flex w-full items-center gap-2 border-b bg-card px-3 py-3 sm:gap-3 sm:px-6 sm:py-4\">\n      <SidebarTrigger className=\"-ml-1 sm:-ml-2\" />\n\n      <div className=\"flex flex-1 items-center gap-2 sm:gap-3\">\n        <HugeiconsIcon\n          icon={ChartLineData01Icon}\n          className=\"hidden size-5 text-muted-foreground sm:block sm:size-6\"\n        />\n        <h1 className=\"truncate text-base font-medium sm:text-lg\">\n          Sponsorships\n        </h1>\n      </div>\n\n      <div className=\"relative hidden md:block\">\n        <HugeiconsIcon\n          icon={Search01Icon}\n          className=\"pointer-events-none absolute top-1/2 left-3 z-10 size-5 -translate-y-1/2 text-muted-foreground\"\n        />\n        <Input\n          placeholder=\"Search Anything...\"\n          className=\"h-9 w-[180px] border bg-card pr-14 pl-10 lg:w-[220px]\"\n        />\n        <div className=\"absolute top-1/2 right-2 flex -translate-y-1/2 items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-xs text-muted-foreground\">\n          <span>⌘K</span>\n        </div>\n      </div>\n\n      <div className=\"hidden items-center gap-2 sm:flex\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"outline\" size=\"icon\" className=\"relative size-9\">\n                <HugeiconsIcon icon={Notification01Icon} />\n                <span className=\"absolute -top-0.5 -right-0.5 size-2.5 rounded-full border-2 border-card bg-rose-500\" />\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-80\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"flex items-center justify-between\">\n                <span>Notifications</span>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"h-auto p-0 text-xs text-muted-foreground hover:text-foreground\"\n                >\n                  Mark all as read\n                </Button>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"flex cursor-pointer items-start gap-3 p-3\">\n              <Avatar className=\"mt-0.5 size-8\">\n                <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=Alex\" />\n                <AvatarFallback>AR</AvatarFallback>\n              </Avatar>\n              <div className=\"flex-1 space-y-1\">\n                <p className=\"text-sm font-medium\">New sponsor assigned</p>\n                <p className=\"text-xs text-muted-foreground\">\n                  Mara Quinn assigned a new sponsor prospect\n                </p>\n                <p className=\"text-xs text-muted-foreground\">2 min ago</p>\n              </div>\n              <span className=\"mt-2 size-2 rounded-full bg-blue-500\" />\n            </DropdownMenuItem>\n            <DropdownMenuItem className=\"flex cursor-pointer items-start gap-3 p-3\">\n              <Avatar className=\"mt-0.5 size-8\">\n                <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=Mina\" />\n                <AvatarFallback>MS</AvatarFallback>\n              </Avatar>\n              <div className=\"flex-1 space-y-1\">\n                <p className=\"text-sm font-medium\">Sponsor stage updated</p>\n                <p className=\"text-xs text-muted-foreground\">\n                  Nora Chen moved sponsor to Deck Sent\n                </p>\n                <p className=\"text-xs text-muted-foreground\">15 min ago</p>\n              </div>\n              <span className=\"mt-2 size-2 rounded-full bg-blue-500\" />\n            </DropdownMenuItem>\n            <DropdownMenuItem className=\"flex cursor-pointer items-start gap-3 p-3 opacity-60\">\n              <Avatar className=\"mt-0.5 size-8\">\n                <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=John\" />\n                <AvatarFallback>JK</AvatarFallback>\n              </Avatar>\n              <div className=\"flex-1 space-y-1\">\n                <p className=\"text-sm font-medium\">Comment added</p>\n                <p className=\"text-xs text-muted-foreground\">\n                  Dylan Park commented on Sponsor #SPN-0908\n                </p>\n                <p className=\"text-xs text-muted-foreground\">1 hour ago</p>\n              </div>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"justify-center text-sm text-muted-foreground\">\n              View all notifications\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"outline\" size=\"icon\" className=\"size-9\">\n                <HugeiconsIcon icon={Comment01Icon} />\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-80\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"flex items-center justify-between\">\n                <span>Messages</span>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"h-auto p-0 text-xs text-muted-foreground hover:text-foreground\"\n                >\n                  <HugeiconsIcon\n                    icon={Settings01Icon}\n                    className=\"mr-1 size-3.5\"\n                  />\n                  Settings\n                </Button>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"flex cursor-pointer items-start gap-3 p-3\">\n              <Avatar className=\"mt-0.5 size-8\">\n                <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=Sarah\" />\n                <AvatarFallback>SL</AvatarFallback>\n              </Avatar>\n              <div className=\"flex-1 space-y-1\">\n                <div className=\"flex items-center justify-between\">\n                  <p className=\"text-sm font-medium\">Sarah Lee</p>\n                  <span className=\"text-xs text-muted-foreground\">5m</span>\n                </div>\n                <p className=\"line-clamp-2 text-xs text-muted-foreground\">\n                  Can you send updated booth benefits to NorthPeak before noon?\n                </p>\n              </div>\n              <span className=\"mt-2 size-2 rounded-full bg-blue-500\" />\n            </DropdownMenuItem>\n            <DropdownMenuItem className=\"flex cursor-pointer items-start gap-3 p-3\">\n              <Avatar className=\"mt-0.5 size-8\">\n                <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=Alex\" />\n                <AvatarFallback>AR</AvatarFallback>\n              </Avatar>\n              <div className=\"flex-1 space-y-1\">\n                <div className=\"flex items-center justify-between\">\n                  <p className=\"text-sm font-medium\">Alex Ray</p>\n                  <span className=\"text-xs text-muted-foreground\">1h</span>\n                </div>\n                <p className=\"line-clamp-2 text-xs text-muted-foreground\">\n                  HarborLabs confirmed a call tomorrow at 2 PM to review tiers.\n                </p>\n              </div>\n            </DropdownMenuItem>\n            <DropdownMenuItem className=\"flex cursor-pointer items-start gap-3 p-3 opacity-60\">\n              <Avatar className=\"mt-0.5 size-8\">\n                <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=Mina\" />\n                <AvatarFallback>MS</AvatarFallback>\n              </Avatar>\n              <div className=\"flex-1 space-y-1\">\n                <div className=\"flex items-center justify-between\">\n                  <p className=\"text-sm font-medium\">Mina Swan</p>\n                  <span className=\"text-xs text-muted-foreground\">2d</span>\n                </div>\n                <p className=\"line-clamp-2 text-xs text-muted-foreground\">\n                  Great update. I will follow up on legal terms next week.\n                </p>\n              </div>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"justify-center text-sm text-muted-foreground\">\n              View all messages\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n\n      <ThemeToggle />\n\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button variant=\"ghost\" size=\"icon\" className=\"h-8 w-8 sm:hidden\">\n              <HugeiconsIcon icon={MoreHorizontalIcon} className=\"size-4\" />\n            </Button>\n          }\n        />\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuItem>\n            <HugeiconsIcon icon={Search01Icon} className=\"mr-2 size-4\" />\n            Search\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <HugeiconsIcon icon={Notification01Icon} className=\"mr-2 size-4\" />\n            Notifications\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <HugeiconsIcon icon={Comment01Icon} className=\"mr-2 size-4\" />\n            Messages\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </header>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/dashboard/leads-by-status-chart.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/components/dashboard/leads-by-status-chart.tsx",
-      "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport {\n  ArrowDown01Icon,\n  MoreHorizontalIcon,\n  Notification01Icon,\n  Settings01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\ntype Period = \"month\" | \"quarter\" | \"6months\" | \"year\"\ntype SortBy = \"value_desc\" | \"value_asc\" | \"name_asc\" | \"name_desc\"\n\ninterface StatusData {\n  name: string\n  value: number\n  color: string\n}\n\nconst periodData: Record<\n  Period,\n  {\n    total: number\n    totalChange: number\n    totalChangeValue: number\n    data: StatusData[]\n  }\n> = {\n  month: {\n    total: 128,\n    totalChange: 11,\n    totalChangeValue: 13,\n    data: [\n      { name: \"Prospect\", value: 42, color: \"#375dfb\" },\n      { name: \"Contacted\", value: 28, color: \"#6985fc\" },\n      { name: \"Deck Sent\", value: 24, color: \"#9baefd\" },\n      { name: \"Contract Review\", value: 14, color: \"#7f69fc\" },\n      { name: \"On Hold\", value: 11, color: \"#aa9bfd\" },\n      { name: \"Re-engage\", value: 9, color: \"#b069fc\" },\n    ],\n  },\n  quarter: {\n    total: 362,\n    totalChange: 14,\n    totalChangeValue: 44,\n    data: [\n      { name: \"Prospect\", value: 118, color: \"#375dfb\" },\n      { name: \"Contacted\", value: 82, color: \"#6985fc\" },\n      { name: \"Deck Sent\", value: 66, color: \"#9baefd\" },\n      { name: \"Contract Review\", value: 42, color: \"#7f69fc\" },\n      { name: \"On Hold\", value: 31, color: \"#aa9bfd\" },\n      { name: \"Re-engage\", value: 23, color: \"#b069fc\" },\n    ],\n  },\n  \"6months\": {\n    total: 710,\n    totalChange: 16,\n    totalChangeValue: 98,\n    data: [\n      { name: \"Prospect\", value: 226, color: \"#375dfb\" },\n      { name: \"Contacted\", value: 172, color: \"#6985fc\" },\n      { name: \"Deck Sent\", value: 138, color: \"#9baefd\" },\n      { name: \"Contract Review\", value: 79, color: \"#7f69fc\" },\n      { name: \"On Hold\", value: 53, color: \"#aa9bfd\" },\n      { name: \"Re-engage\", value: 42, color: \"#b069fc\" },\n    ],\n  },\n  year: {\n    total: 1482,\n    totalChange: 19,\n    totalChangeValue: 236,\n    data: [\n      { name: \"Prospect\", value: 468, color: \"#375dfb\" },\n      { name: \"Contacted\", value: 356, color: \"#6985fc\" },\n      { name: \"Deck Sent\", value: 284, color: \"#9baefd\" },\n      { name: \"Contract Review\", value: 166, color: \"#7f69fc\" },\n      { name: \"On Hold\", value: 116, color: \"#aa9bfd\" },\n      { name: \"Re-engage\", value: 92, color: \"#b069fc\" },\n    ],\n  },\n}\n\nconst periodLabels: Record<Period, string> = {\n  month: \"This Month\",\n  quarter: \"Last 3 Months\",\n  \"6months\": \"Last 6 Months\",\n  year: \"Last 12 Months\",\n}\n\nexport function LeadsByStatusChart() {\n  const [period, setPeriod] = useState<Period>(\"month\")\n  const [sortBy, setSortBy] = useState<SortBy>(\"value_desc\")\n  const [visibleStatuses, setVisibleStatuses] = useState<\n    Record<string, boolean>\n  >({\n    Prospect: true,\n    Contacted: true,\n    \"Deck Sent\": true,\n    \"Contract Review\": true,\n    \"On Hold\": true,\n    \"Re-engage\": true,\n  })\n\n  const currentData = periodData[period]\n\n  const filteredAndSortedData = useMemo(() => {\n    let data = currentData.data.filter((item) => visibleStatuses[item.name])\n\n    switch (sortBy) {\n      case \"value_desc\":\n        data = [...data].sort((a, b) => b.value - a.value)\n        break\n      case \"value_asc\":\n        data = [...data].sort((a, b) => a.value - b.value)\n        break\n      case \"name_asc\":\n        data = [...data].sort((a, b) => a.name.localeCompare(b.name))\n        break\n      case \"name_desc\":\n        data = [...data].sort((a, b) => b.name.localeCompare(a.name))\n        break\n    }\n\n    return data\n  }, [currentData.data, sortBy, visibleStatuses])\n\n  const maxValue = useMemo(() => {\n    return Math.max(...filteredAndSortedData.map((d) => d.value), 1)\n  }, [filteredAndSortedData])\n\n  const visibleTotal = useMemo(() => {\n    return filteredAndSortedData.reduce((sum, item) => sum + item.value, 0)\n  }, [filteredAndSortedData])\n\n  const toggleStatus = (statusName: string) => {\n    setVisibleStatuses((prev) => ({\n      ...prev,\n      [statusName]: !prev[statusName],\n    }))\n  }\n\n  const resetToDefault = () => {\n    setPeriod(\"month\")\n    setSortBy(\"value_desc\")\n    setVisibleStatuses({\n      Prospect: true,\n      Contacted: true,\n      \"Deck Sent\": true,\n      \"Contract Review\": true,\n      \"On Hold\": true,\n      \"Re-engage\": true,\n    })\n  }\n\n  return (\n    <div className=\"w-full shrink-0 rounded-xl border bg-card text-card-foreground xl:w-[337px]\">\n      <div className=\"flex flex-row items-center justify-between px-5 py-5\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\" className=\"size-8\">\n            <HugeiconsIcon\n              icon={Notification01Icon}\n              className=\"size-4 text-muted-foreground\"\n            />\n          </Button>\n          <h3 className=\"text-sm font-medium sm:text-base\">\n            Sponsors by Stage\n          </h3>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <HugeiconsIcon\n                  icon={MoreHorizontalIcon}\n                  className=\"size-4 text-muted-foreground\"\n                />\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-48\">\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <HugeiconsIcon icon={Settings01Icon} className=\"mr-2 size-4\" />\n                Time Period\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent>\n                {(Object.keys(periodLabels) as Period[]).map((p) => (\n                  <DropdownMenuItem key={p} onClick={() => setPeriod(p)}>\n                    {periodLabels[p]} {period === p && \"✓\"}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <HugeiconsIcon icon={ArrowDown01Icon} className=\"mr-2 size-4\" />\n                Sort By\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem onClick={() => setSortBy(\"value_desc\")}>\n                  <HugeiconsIcon\n                    icon={ArrowDown01Icon}\n                    className=\"mr-2 size-4\"\n                  />\n                  Value (High to Low) {sortBy === \"value_desc\" && \"✓\"}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setSortBy(\"value_asc\")}>\n                  <HugeiconsIcon\n                    icon={ArrowDown01Icon}\n                    className=\"mr-2 size-4 rotate-180\"\n                  />\n                  Value (Low to High) {sortBy === \"value_asc\" && \"✓\"}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setSortBy(\"name_asc\")}>\n                  <HugeiconsIcon\n                    icon={ArrowDown01Icon}\n                    className=\"mr-2 size-4\"\n                  />\n                  Name (A to Z) {sortBy === \"name_asc\" && \"✓\"}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setSortBy(\"name_desc\")}>\n                  <HugeiconsIcon\n                    icon={ArrowDown01Icon}\n                    className=\"mr-2 size-4 rotate-180\"\n                  />\n                  Name (Z to A) {sortBy === \"name_desc\" && \"✓\"}\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <HugeiconsIcon\n                  icon={Notification01Icon}\n                  className=\"mr-2 size-4\"\n                />\n                Show Statuses\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent>\n                {currentData.data.map((item) => (\n                  <DropdownMenuCheckboxItem\n                    key={item.name}\n                    checked={visibleStatuses[item.name]}\n                    onCheckedChange={() => toggleStatus(item.name)}\n                  >\n                    <span\n                      className=\"mr-2 size-2 rounded-full\"\n                      style={{ backgroundColor: item.color }}\n                    />\n                    {item.name}\n                  </DropdownMenuCheckboxItem>\n                ))}\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onClick={resetToDefault}>\n              Reset to Default\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"space-y-6 px-5 pb-5 sm:space-y-8\">\n        <div className=\"flex items-end gap-2\">\n          <span className=\"text-2xl font-semibold tracking-tight sm:text-[28px]\">\n            {visibleTotal.toLocaleString()}\n          </span>\n          <div className=\"flex items-center gap-2 pb-1 text-xs sm:text-sm\">\n            <span className=\"font-medium text-emerald-600 dark:text-emerald-400\">\n              +{currentData.totalChange}%({currentData.totalChangeValue})\n            </span>\n            <span className=\"hidden text-muted-foreground sm:inline\">\n              vs Last Month\n            </span>\n          </div>\n        </div>\n\n        <div className=\"space-y-3 sm:space-y-4\">\n          {filteredAndSortedData.map((item) => (\n            <div key={item.name} className=\"flex items-center gap-3 sm:gap-4\">\n              <span className=\"w-16 shrink-0 truncate text-xs text-muted-foreground sm:w-[62px]\">\n                {item.name}\n              </span>\n              <div className=\"h-[15px] flex-1 rounded bg-muted\">\n                <div\n                  className=\"h-full rounded transition-all duration-300\"\n                  style={{\n                    width: `${(item.value / maxValue) * 100}%`,\n                    backgroundColor: item.color,\n                  }}\n                />\n              </div>\n              <span className=\"w-10 shrink-0 text-right text-xs font-semibold sm:w-[30px]\">\n                {item.value.toLocaleString()}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/dashboard/leads-table.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/components/dashboard/leads-table.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport {\n  ArrowRight01Icon,\n  Invoice01Icon,\n  MoreHorizontalIcon,\n  Search01Icon,\n  Settings01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Badge } from \"@loveui/ui/ui/badge\"\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Checkbox } from \"@loveui/ui/ui/checkbox\"\nimport { Input } from \"@loveui/ui/ui/input\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@loveui/ui/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@loveui/ui/ui/table\"\n\nimport { leads } from \"../../mock-data/leads\"\nimport { LeadSource, LeadStatus, useLeadsStore } from \"../../store/leads-store\"\n\nconst statusConfig: Record<LeadStatus, { label: string; className: string }> = {\n  new: {\n    label: \"Prospect\",\n    className:\n      \"bg-blue-100 text-blue-800 dark:bg-blue-950/30 dark:text-blue-400 border-blue-200 dark:border-blue-800\",\n  },\n  contacted: {\n    label: \"Contacted\",\n    className:\n      \"bg-purple-100 text-purple-800 dark:bg-purple-950/30 dark:text-purple-400 border-purple-200 dark:border-purple-800\",\n  },\n  qualified: {\n    label: \"Deck Sent\",\n    className:\n      \"bg-emerald-100 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800\",\n  },\n  negotiation: {\n    label: \"Contract Review\",\n    className:\n      \"bg-amber-100 text-amber-800 dark:bg-amber-950/30 dark:text-amber-400 border-amber-200 dark:border-amber-800\",\n  },\n  inactive: {\n    label: \"On Hold\",\n    className:\n      \"bg-gray-100 text-gray-800 dark:bg-gray-950/30 dark:text-gray-400 border-gray-200 dark:border-gray-800\",\n  },\n  recycled: {\n    label: \"Re-engage\",\n    className:\n      \"bg-pink-100 text-pink-800 dark:bg-pink-950/30 dark:text-pink-400 border-pink-200 dark:border-pink-800\",\n  },\n}\n\nconst sourceConfig: Record<LeadSource, string> = {\n  website: \"Inbound Form\",\n  paid_ads: \"Campaign\",\n  referral: \"Partner Intro\",\n  social: \"Social DM\",\n  email: \"Email Outreach\",\n}\n\nexport function LeadsTable() {\n  const {\n    searchQuery,\n    statusFilter,\n    sourceFilter,\n    ownerFilter,\n    currentPage,\n    itemsPerPage,\n    setSearchQuery,\n    setStatusFilter,\n    setSourceFilter,\n    setOwnerFilter,\n    setCurrentPage,\n    setItemsPerPage,\n    clearFilters,\n  } = useLeadsStore()\n\n  const owners = useMemo(() => {\n    return [...new Set(leads.map((lead) => lead.owner))]\n  }, [])\n\n  const filteredLeads = useMemo(() => {\n    return leads.filter((lead) => {\n      const matchesSearch =\n        searchQuery === \"\" ||\n        lead.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        lead.email.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        lead.leadId.toLowerCase().includes(searchQuery.toLowerCase())\n\n      const matchesStatus =\n        statusFilter === \"all\" || lead.status === statusFilter\n      const matchesSource =\n        sourceFilter === \"all\" || lead.source === sourceFilter\n      const matchesOwner = ownerFilter === \"all\" || lead.owner === ownerFilter\n\n      return matchesSearch && matchesStatus && matchesSource && matchesOwner\n    })\n  }, [searchQuery, statusFilter, sourceFilter, ownerFilter])\n\n  const totalPages = Math.ceil(filteredLeads.length / itemsPerPage)\n  const startIndex = (currentPage - 1) * itemsPerPage\n  const paginatedLeads = filteredLeads.slice(\n    startIndex,\n    startIndex + itemsPerPage\n  )\n\n  const hasActiveFilters =\n    searchQuery !== \"\" ||\n    statusFilter !== \"all\" ||\n    sourceFilter !== \"all\" ||\n    ownerFilter !== \"all\"\n\n  return (\n    <div className=\"rounded-xl border bg-card text-card-foreground\">\n      <div className=\"flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5 sm:py-5\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\" className=\"size-8\">\n            <HugeiconsIcon\n              icon={Invoice01Icon}\n              className=\"size-4 text-muted-foreground\"\n            />\n          </Button>\n          <h3 className=\"text-sm font-medium sm:text-base\">Sponsor Pipeline</h3>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <div className=\"relative flex-1 sm:flex-none\">\n            <HugeiconsIcon\n              icon={Search01Icon}\n              className=\"pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-muted-foreground\"\n            />\n            <Input\n              placeholder=\"Search sponsors...\"\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              className=\"h-9 w-full pl-9 sm:w-[180px]\"\n            />\n          </div>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <Button variant=\"outline\" className=\"h-9 gap-2\">\n                  <HugeiconsIcon icon={Settings01Icon} className=\"size-4\" />\n                  <span>Filter</span>\n                  {hasActiveFilters && (\n                    <Badge\n                      variant=\"secondary\"\n                      className=\"size-5 justify-center p-0\"\n                    >\n                      !\n                    </Badge>\n                  )}\n                </Button>\n              }\n            />\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              <div className=\"px-2 py-1.5\">\n                <p className=\"mb-2 text-xs font-medium text-muted-foreground\">\n                  Status\n                </p>\n                <Select\n                  value={statusFilter}\n                  onValueChange={(value) =>\n                    setStatusFilter(value as LeadStatus | \"all\")\n                  }\n                >\n                  <SelectTrigger className=\"h-8 w-full\">\n                    <SelectValue placeholder=\"All Status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"all\">All Status</SelectItem>\n                    {Object.entries(statusConfig).map(([key, { label }]) => (\n                      <SelectItem key={key} value={key}>\n                        {label}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"px-2 py-1.5\">\n                <p className=\"mb-2 text-xs font-medium text-muted-foreground\">\n                  Source\n                </p>\n                <Select\n                  value={sourceFilter}\n                  onValueChange={(value) =>\n                    setSourceFilter(value as LeadSource | \"all\")\n                  }\n                >\n                  <SelectTrigger className=\"h-8 w-full\">\n                    <SelectValue placeholder=\"All Sources\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"all\">All Sources</SelectItem>\n                    {Object.entries(sourceConfig).map(([key, label]) => (\n                      <SelectItem key={key} value={key}>\n                        {label}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"px-2 py-1.5\">\n                <p className=\"mb-2 text-xs font-medium text-muted-foreground\">\n                  Owner\n                </p>\n                <Select\n                  value={ownerFilter}\n                  onValueChange={(value) => value && setOwnerFilter(value)}\n                >\n                  <SelectTrigger className=\"h-8 w-full\">\n                    <SelectValue placeholder=\"All Owners\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"all\">All Owners</SelectItem>\n                    {owners.map((owner) => (\n                      <SelectItem key={owner} value={owner}>\n                        {owner}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n              {hasActiveFilters && (\n                <>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem onClick={clearFilters}>\n                    Clear all filters\n                  </DropdownMenuItem>\n                </>\n              )}\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <Button variant=\"outline\" className=\"h-9 gap-2\">\n            <HugeiconsIcon icon={Invoice01Icon} className=\"size-4\" />\n            <span className=\"hidden sm:inline\">Import List</span>\n          </Button>\n        </div>\n      </div>\n\n      <div>\n        <div className=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow className=\"bg-muted/50\">\n                <TableHead className=\"w-[120px]\">\n                  <div className=\"flex items-center gap-2\">\n                    <Checkbox />\n                    <span>Sponsor ID</span>\n                  </div>\n                </TableHead>\n                <TableHead className=\"min-w-[160px]\">Contact Name</TableHead>\n                <TableHead className=\"hidden min-w-[180px] md:table-cell\">\n                  Email\n                </TableHead>\n                <TableHead className=\"w-[110px]\">Status</TableHead>\n                <TableHead className=\"hidden w-[100px] lg:table-cell\">\n                  Source\n                </TableHead>\n                <TableHead className=\"hidden w-[140px] xl:table-cell\">\n                  Owner\n                </TableHead>\n                <TableHead className=\"w-[130px]\">Created On</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {paginatedLeads.map((lead) => (\n                <TableRow key={lead.id}>\n                  <TableCell>\n                    <div className=\"flex items-center gap-2\">\n                      <Checkbox />\n                      <span className=\"text-sm font-medium\">{lead.leadId}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell>\n                    <div className=\"flex items-center gap-2\">\n                      <Avatar className=\"size-6\">\n                        <AvatarImage src={lead.avatar} />\n                        <AvatarFallback className=\"text-xs\">\n                          {lead.name\n                            .split(\" \")\n                            .map((n) => n[0])\n                            .join(\"\")}\n                        </AvatarFallback>\n                      </Avatar>\n                      <span className=\"text-sm font-medium\">{lead.name}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"hidden md:table-cell\">\n                    <span className=\"text-sm text-muted-foreground\">\n                      {lead.email}\n                    </span>\n                  </TableCell>\n                  <TableCell>\n                    <Badge\n                      variant=\"outline\"\n                      className={`text-xs font-medium ${\n                        statusConfig[lead.status].className\n                      }`}\n                    >\n                      {statusConfig[lead.status].label}\n                    </Badge>\n                  </TableCell>\n                  <TableCell className=\"hidden lg:table-cell\">\n                    <Badge variant=\"secondary\" className=\"text-xs font-medium\">\n                      {sourceConfig[lead.source]}\n                    </Badge>\n                  </TableCell>\n                  <TableCell className=\"hidden xl:table-cell\">\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"flex size-6 items-center justify-center rounded-full bg-muted\">\n                        <span className=\"text-[10px] font-bold text-muted-foreground uppercase\">\n                          {lead.ownerInitials}\n                        </span>\n                      </div>\n                      <span className=\"text-sm text-muted-foreground\">\n                        {lead.owner}\n                      </span>\n                    </div>\n                  </TableCell>\n                  <TableCell>\n                    <div className=\"flex items-center justify-between\">\n                      <span className=\"text-sm text-muted-foreground\">\n                        {lead.createdAt}\n                      </span>\n                      <DropdownMenu>\n                        <DropdownMenuTrigger\n                          render={\n                            <Button\n                              variant=\"ghost\"\n                              size=\"icon\"\n                              className=\"size-7\"\n                            >\n                              <HugeiconsIcon\n                                icon={MoreHorizontalIcon}\n                                className=\"size-4 text-muted-foreground\"\n                              />\n                            </Button>\n                          }\n                        />\n                        <DropdownMenuContent align=\"end\">\n                          <DropdownMenuItem>View Details</DropdownMenuItem>\n                          <DropdownMenuItem>Edit Sponsor</DropdownMenuItem>\n                          <DropdownMenuSeparator />\n                          <DropdownMenuItem className=\"text-destructive\">\n                            Delete Sponsor\n                          </DropdownMenuItem>\n                        </DropdownMenuContent>\n                      </DropdownMenu>\n                    </div>\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n\n        <div className=\"flex flex-col items-center justify-between gap-3 border-t px-4 py-3 sm:flex-row sm:px-6\">\n          <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n            <span>\n              Showing {startIndex + 1}-\n              {Math.min(startIndex + itemsPerPage, filteredLeads.length)} of{\" \"}\n              {filteredLeads.length}\n            </span>\n            <Select\n              value={itemsPerPage.toString()}\n              onValueChange={(value) => setItemsPerPage(Number(value))}\n            >\n              <SelectTrigger className=\"h-8 w-[70px]\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"5\">5</SelectItem>\n                <SelectItem value=\"10\">10</SelectItem>\n                <SelectItem value=\"20\">20</SelectItem>\n                <SelectItem value=\"50\">50</SelectItem>\n              </SelectContent>\n            </Select>\n            <span>per page</span>\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"size-8\"\n              onClick={() => setCurrentPage(currentPage - 1)}\n              disabled={currentPage === 1}\n            >\n              <HugeiconsIcon\n                icon={ArrowRight01Icon}\n                className=\"size-4 rotate-180\"\n              />\n            </Button>\n            {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {\n              const page = i + 1\n              return (\n                <Button\n                  key={page}\n                  variant={currentPage === page ? \"default\" : \"outline\"}\n                  size=\"icon\"\n                  className=\"size-8\"\n                  onClick={() => setCurrentPage(page)}\n                >\n                  {page}\n                </Button>\n              )\n            })}\n            {totalPages > 5 && (\n              <>\n                <span className=\"px-1 text-muted-foreground\">...</span>\n                <Button\n                  variant={currentPage === totalPages ? \"default\" : \"outline\"}\n                  size=\"icon\"\n                  className=\"size-8\"\n                  onClick={() => setCurrentPage(totalPages)}\n                >\n                  {totalPages}\n                </Button>\n              </>\n            )}\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"size-8\"\n              onClick={() => setCurrentPage(currentPage + 1)}\n              disabled={currentPage === totalPages}\n            >\n              <HugeiconsIcon icon={ArrowRight01Icon} className=\"size-4\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/dashboard/monthly-lead-growth-chart.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/components/dashboard/monthly-lead-growth-chart.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  ChartLineData01Icon,\n  MoreHorizontalIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { useTheme } from \"next-themes\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nconst fullYearData = [\n  { month: \"Jan\", week: 1, leads: 74 },\n  { month: \"\", week: 2, leads: 86 },\n  { month: \"\", week: 3, leads: 92 },\n  { month: \"\", week: 4, leads: 101 },\n  { month: \"Feb\", week: 5, leads: 88 },\n  { month: \"\", week: 6, leads: 82 },\n  { month: \"\", week: 7, leads: 95 },\n  { month: \"\", week: 8, leads: 110 },\n  { month: \"Mar\", week: 9, leads: 98 },\n  { month: \"\", week: 10, leads: 104 },\n  { month: \"\", week: 11, leads: 112 },\n  { month: \"\", week: 12, leads: 118 },\n  { month: \"Apr\", week: 13, leads: 122 },\n  { month: \"\", week: 14, leads: 126 },\n  { month: \"\", week: 15, leads: 134 },\n  { month: \"\", week: 16, leads: 128 },\n  { month: \"May\", week: 17, leads: 132 },\n  { month: \"\", week: 18, leads: 139 },\n  { month: \"\", week: 19, leads: 142 },\n  { month: \"\", week: 20, leads: 136 },\n  { month: \"Jun\", week: 21, leads: 148 },\n  { month: \"\", week: 22, leads: 154 },\n  { month: \"\", week: 23, leads: 150 },\n  { month: \"\", week: 24, leads: 158 },\n  { month: \"Jul\", week: 25, leads: 146 },\n  { month: \"\", week: 26, leads: 140 },\n  { month: \"\", week: 27, leads: 152 },\n  { month: \"\", week: 28, leads: 149 },\n  { month: \"Aug\", week: 29, leads: 136 },\n  { month: \"\", week: 30, leads: 144 },\n  { month: \"\", week: 31, leads: 156 },\n  { month: \"\", week: 32, leads: 162 },\n  { month: \"Sep\", week: 33, leads: 151 },\n  { month: \"\", week: 34, leads: 159 },\n  { month: \"\", week: 35, leads: 147 },\n  { month: \"\", week: 36, leads: 154 },\n  { month: \"Oct\", week: 37, leads: 149 },\n  { month: \"\", week: 38, leads: 157 },\n  { month: \"\", week: 39, leads: 153 },\n  { month: \"\", week: 40, leads: 160 },\n]\n\ntype ChartType = \"line\" | \"area\" | \"bar\"\ntype Period = \"3m\" | \"6m\" | \"12m\"\n\ninterface CustomTooltipProps {\n  active?: boolean\n  payload?: Array<{\n    value: number\n    payload: { month: string; week: number; leads: number }\n  }>\n}\n\nconst monthNames = [\n  \"Jan\",\n  \"Feb\",\n  \"Mar\",\n  \"Apr\",\n  \"May\",\n  \"Jun\",\n  \"Jul\",\n  \"Aug\",\n  \"Sep\",\n  \"Oct\",\n  \"Nov\",\n  \"Dec\",\n]\n\nfunction CustomTooltip({ active, payload }: CustomTooltipProps) {\n  if (active && payload && payload.length) {\n    const data = payload[0]\n    const weekIndex = data.payload.week - 1\n    const monthIndex = Math.floor(weekIndex / 4)\n    const monthName = monthNames[monthIndex] || \"Apr\"\n\n    const prevIndex =\n      fullYearData.findIndex((d) => d.week === data.payload.week) - 1\n    const prevValue =\n      prevIndex >= 0 ? fullYearData[prevIndex].leads : data.value\n    const change =\n      prevValue > 0\n        ? (((data.value - prevValue) / prevValue) * 100).toFixed(1)\n        : 0\n\n    return (\n      <div className=\"rounded-md border bg-card p-2\">\n        <p className=\"text-xs text-muted-foreground\">{monthName}, 2026</p>\n        <div className=\"mt-1 flex items-center gap-2\">\n          <span className=\"text-sm font-semibold\">{data.value}</span>\n          <span className=\"flex items-center gap-0.5 text-xs text-emerald-600 dark:text-emerald-400\">\n            <HugeiconsIcon icon={ChartLineData01Icon} className=\"size-3\" />\n            {change}%\n          </span>\n        </div>\n      </div>\n    )\n  }\n  return null\n}\n\nexport function MonthlyLeadGrowthChart() {\n  const { theme } = useTheme()\n  const [chartType, setChartType] = useState<ChartType>(\"area\")\n  const [period, setPeriod] = useState<Period>(\"12m\")\n  const [showGrid, setShowGrid] = useState(true)\n  const [smoothCurve, setSmoothCurve] = useState(true)\n\n  const axisColor = theme === \"dark\" ? \"#525866\" : \"#868c98\"\n  const gridColor = theme === \"dark\" ? \"#27272a\" : \"#e2e4e9\"\n  const lineColor = \"#6e3ff3\"\n\n  const getDataForPeriod = () => {\n    switch (period) {\n      case \"3m\":\n        return fullYearData.slice(-12)\n      case \"6m\":\n        return fullYearData.slice(-24)\n      case \"12m\":\n      default:\n        return fullYearData\n    }\n  }\n\n  const data = getDataForPeriod()\n\n  const resetToDefault = () => {\n    setChartType(\"area\")\n    setPeriod(\"12m\")\n    setShowGrid(true)\n    setSmoothCurve(true)\n  }\n\n  return (\n    <div className=\"flex-1 rounded-xl border bg-card text-card-foreground\">\n      <div className=\"flex flex-row items-center justify-between px-5 py-5\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\" className=\"size-8\">\n            <HugeiconsIcon\n              icon={ChartLineData01Icon}\n              className=\"size-4 text-muted-foreground\"\n            />\n          </Button>\n          <h3 className=\"text-sm font-medium sm:text-base\">\n            Monthly Sponsor Pipeline\n          </h3>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <HugeiconsIcon\n                  icon={MoreHorizontalIcon}\n                  className=\"size-4 text-muted-foreground\"\n                />\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-48\">\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Chart Type</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem onClick={() => setChartType(\"line\")}>\n                  Line Chart {chartType === \"line\" && \"✓\"}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setChartType(\"area\")}>\n                  Area Chart {chartType === \"area\" && \"✓\"}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setChartType(\"bar\")}>\n                  Bar Chart {chartType === \"bar\" && \"✓\"}\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Time Period</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem onClick={() => setPeriod(\"3m\")}>\n                  Last 3 Months {period === \"3m\" && \"✓\"}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setPeriod(\"6m\")}>\n                  Last 6 Months {period === \"6m\" && \"✓\"}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setPeriod(\"12m\")}>\n                  Last 12 Months {period === \"12m\" && \"✓\"}\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuCheckboxItem\n              checked={showGrid}\n              onCheckedChange={setShowGrid}\n            >\n              Show Grid\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={smoothCurve}\n              onCheckedChange={setSmoothCurve}\n              disabled={chartType === \"bar\"}\n            >\n              Smooth Curve\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onClick={resetToDefault}>\n              Reset to Default\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"px-5 pb-5\">\n        <div className=\"h-[200px] w-full sm:h-[250px]\">\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            {chartType === \"bar\" ? (\n              <BarChart\n                data={data}\n                margin={{ top: 20, right: 10, left: -20, bottom: 0 }}\n              >\n                {showGrid && (\n                  <CartesianGrid\n                    strokeDasharray=\"3 3\"\n                    stroke={gridColor}\n                    vertical={false}\n                  />\n                )}\n                <XAxis\n                  dataKey=\"month\"\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 12, fill: axisColor }}\n                  interval=\"preserveStartEnd\"\n                />\n                <YAxis\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 10, fill: axisColor }}\n                  domain={[0, 500]}\n                  ticks={[0, 100, 200, 300, 400, 500]}\n                />\n                <Tooltip content={<CustomTooltip />} />\n                <defs>\n                  <linearGradient\n                    id=\"leadBarGradient\"\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop offset=\"0%\" stopColor=\"#6e3ff3\" />\n                    <stop offset=\"100%\" stopColor=\"#aa8ef9\" />\n                  </linearGradient>\n                </defs>\n                <Bar\n                  dataKey=\"leads\"\n                  fill=\"url(#leadBarGradient)\"\n                  radius={[4, 4, 0, 0]}\n                />\n              </BarChart>\n            ) : chartType === \"area\" ? (\n              <AreaChart\n                data={data}\n                margin={{ top: 20, right: 10, left: -20, bottom: 0 }}\n              >\n                {showGrid && (\n                  <CartesianGrid\n                    strokeDasharray=\"3 3\"\n                    stroke={gridColor}\n                    vertical={false}\n                  />\n                )}\n                <XAxis\n                  dataKey=\"month\"\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 12, fill: axisColor }}\n                  interval=\"preserveStartEnd\"\n                />\n                <YAxis\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 10, fill: axisColor }}\n                  domain={[0, 500]}\n                  ticks={[0, 100, 200, 300, 400, 500]}\n                />\n                <Tooltip content={<CustomTooltip />} />\n                <defs>\n                  <linearGradient\n                    id=\"leadAreaGradient\"\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop offset=\"0%\" stopColor=\"#6e3ff3\" stopOpacity={0.15} />\n                    <stop offset=\"100%\" stopColor=\"#6e3ff3\" stopOpacity={0} />\n                  </linearGradient>\n                </defs>\n                <Area\n                  type={smoothCurve ? \"monotone\" : \"linear\"}\n                  dataKey=\"leads\"\n                  stroke={lineColor}\n                  strokeWidth={2}\n                  fill=\"url(#leadAreaGradient)\"\n                  dot={false}\n                  activeDot={{\n                    r: 6,\n                    fill: lineColor,\n                    stroke: \"#fff\",\n                    strokeWidth: 2,\n                  }}\n                />\n              </AreaChart>\n            ) : (\n              <LineChart\n                data={data}\n                margin={{ top: 20, right: 10, left: -20, bottom: 0 }}\n              >\n                {showGrid && (\n                  <CartesianGrid\n                    strokeDasharray=\"3 3\"\n                    stroke={gridColor}\n                    vertical={false}\n                  />\n                )}\n                <XAxis\n                  dataKey=\"month\"\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 12, fill: axisColor }}\n                  interval=\"preserveStartEnd\"\n                />\n                <YAxis\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 10, fill: axisColor }}\n                  domain={[0, 500]}\n                  ticks={[0, 100, 200, 300, 400, 500]}\n                />\n                <Tooltip content={<CustomTooltip />} />\n                <Line\n                  type={smoothCurve ? \"monotone\" : \"linear\"}\n                  dataKey=\"leads\"\n                  stroke={lineColor}\n                  strokeWidth={2}\n                  dot={false}\n                  activeDot={{\n                    r: 6,\n                    fill: lineColor,\n                    stroke: \"#fff\",\n                    strokeWidth: 2,\n                  }}\n                />\n              </LineChart>\n            )}\n          </ResponsiveContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/dashboard/sidebar.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/components/dashboard/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n  ArrowDown01Icon,\n  ArrowRight01Icon,\n  Calendar01Icon,\n  ChartLineData01Icon,\n  Coins01Icon,\n  DashboardSquare01Icon,\n  Folder01Icon,\n  Globe02Icon,\n  HelpCircleIcon,\n  Invoice01Icon,\n  Logout01Icon,\n  MoreHorizontalIcon,\n  Notification01Icon,\n  Settings01Icon,\n  Task01Icon,\n  UserGroupIcon,\n  UserIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@loveui/ui/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst menuItems = [\n  {\n    title: \"Sponsor AI\",\n    icon: Invoice01Icon,\n    href: \"#\",\n    isGradient: true,\n  },\n  {\n    title: \"Dashboard\",\n    icon: DashboardSquare01Icon,\n    href: \"#\",\n  },\n  {\n    title: \"Sponsors\",\n    icon: ChartLineData01Icon,\n    href: \"#\",\n    isActive: true,\n  },\n  {\n    title: \"Outreach\",\n    icon: Notification01Icon,\n    href: \"#\",\n  },\n  {\n    title: \"Event Schedule\",\n    icon: Calendar01Icon,\n    href: \"#\",\n  },\n  {\n    title: \"Deliverables\",\n    icon: Task01Icon,\n    href: \"#\",\n  },\n  {\n    title: \"Partners\",\n    icon: UserGroupIcon,\n    href: \"#\",\n  },\n]\n\nconst folders = [\n  { name: \"Title Sponsors\", hasNotification: true },\n  { name: \"Booth Partners\", hasNotification: true },\n  { name: \"Media Sponsors\", hasNotification: true },\n]\n\nexport function DashboardSidebar({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  const [foldersOpen, setFoldersOpen] = React.useState(true)\n\n  return (\n    <Sidebar collapsible=\"offExamples\" className=\"lg:border-r-0!\" {...props}>\n      <SidebarHeader className=\"p-3 pb-0 sm:p-4 lg:p-5\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"flex size-5 items-center justify-center rounded bg-linear-to-b from-[#6e3ff3] to-[#aa8ef9] text-white\">\n            <HugeiconsIcon icon={Invoice01Icon} className=\"size-3\" />\n          </div>\n          <span className=\"text-base font-semibold sm:text-lg\">SummitOps</span>\n        </div>\n      </SidebarHeader>\n\n      <SidebarContent className=\"px-3 sm:px-4 lg:px-5\">\n        <div className=\"mb-3 flex items-center gap-2 rounded-lg border bg-card p-2 sm:mb-4 sm:gap-3 sm:p-3\">\n          <div className=\"flex size-8 shrink-0 items-center justify-center rounded-lg bg-linear-to-b from-[#6e3ff3] to-[#aa8ef9] text-white sm:size-[34px]\">\n            <HugeiconsIcon icon={Invoice01Icon} className=\"size-4 sm:size-5\" />\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"text-xs font-semibold sm:text-sm\">Sponsorship Desk</p>\n            <div className=\"flex items-center gap-1 text-muted-foreground\">\n              <HugeiconsIcon\n                icon={UserGroupIcon}\n                className=\"size-3 sm:size-3.5\"\n              />\n              <span className=\"text-[10px] sm:text-xs\">12 Coordinators</span>\n            </div>\n          </div>\n        </div>\n\n        <SidebarGroup className=\"p-0\">\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {menuItems.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton\n                    render={<Link href={item.href} />}\n                    isActive={item.isActive}\n                    className=\"h-9 sm:h-[38px]\"\n                  >\n                    <HugeiconsIcon\n                      icon={item.icon}\n                      className={`size-4 sm:size-5 ${\n                        item.isGradient ? \"text-[#6e3ff3]\" : \"\"\n                      }`}\n                    />\n                    <span\n                      className={`text-sm ${\n                        item.isGradient\n                          ? \"bg-linear-to-r from-[#6e3ff3] to-[#df3674] bg-clip-text text-transparent\"\n                          : \"\"\n                      }`}\n                    >\n                      {item.title}\n                    </span>\n                    {item.isActive && (\n                      <HugeiconsIcon\n                        icon={ArrowRight01Icon}\n                        className=\"ml-auto size-4 text-muted-foreground opacity-60\"\n                      />\n                    )}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <Collapsible open={foldersOpen} onOpenChange={setFoldersOpen}>\n          <SidebarGroup className=\"p-0\">\n            <SidebarGroupLabel className=\"flex items-center justify-between px-0 text-[10px] font-semibold tracking-wider text-muted-foreground sm:text-[11px]\">\n              <CollapsibleTrigger className=\"flex cursor-pointer items-center gap-1.5\">\n                <HugeiconsIcon\n                  icon={ArrowDown01Icon}\n                  className={`size-3 transition-transform sm:size-3.5 ${\n                    foldersOpen ? \"\" : \"-rotate-90\"\n                  }`}\n                />\n                FOLDERS\n              </CollapsibleTrigger>\n              <HugeiconsIcon\n                icon={MoreHorizontalIcon}\n                className=\"size-4 cursor-pointer transition-colors hover:text-foreground\"\n              />\n            </SidebarGroupLabel>\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu className=\"mt-2\">\n                  {folders.map((folder) => (\n                    <SidebarMenuItem key={folder.name}>\n                      <SidebarMenuButton\n                        render={<Link href=\"#\" />}\n                        className=\"h-9 sm:h-[38px]\"\n                      >\n                        <HugeiconsIcon\n                          icon={Folder01Icon}\n                          className=\"size-4 text-muted-foreground sm:size-5\"\n                        />\n                        <span className=\"flex-1 truncate text-sm text-muted-foreground\">\n                          {folder.name}\n                        </span>\n                        {folder.hasNotification && (\n                          <div className=\"size-1.5 shrink-0 rounded-full bg-[#6e3ff3]\" />\n                        )}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n      </SidebarContent>\n\n      <SidebarFooter className=\"px-3 pb-3 sm:px-4 sm:pb-4 lg:px-5 lg:pb-5\">\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              render={<Link href=\"#\" />}\n              className=\"h-9 sm:h-[38px]\"\n            >\n              <HugeiconsIcon\n                icon={HelpCircleIcon}\n                className=\"size-4 sm:size-5\"\n              />\n              <span className=\"text-sm\">Help Center</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              render={<Link href=\"#\" />}\n              className=\"h-9 sm:h-[38px]\"\n            >\n              <HugeiconsIcon\n                icon={Settings01Icon}\n                className=\"size-4 sm:size-5\"\n              />\n              <span className=\"text-sm\">Settings</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <div className=\"flex cursor-pointer items-center gap-2 rounded-lg p-2 transition-colors hover:bg-accent sm:gap-3 sm:p-3\">\n                <Avatar className=\"size-7 sm:size-8\">\n                  <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=LN\" />\n                  <AvatarFallback className=\"text-xs\">CL</AvatarFallback>\n                </Avatar>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-xs font-semibold sm:text-sm\">\n                    Connor Love\n                  </p>\n                  <p className=\"truncate text-[10px] text-muted-foreground sm:text-xs\">\n                    connorlove@gmail.com\n                  </p>\n                </div>\n                <HugeiconsIcon\n                  icon={ArrowDown01Icon}\n                  className=\"size-4 shrink-0 text-muted-foreground\"\n                />\n              </div>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n            <DropdownMenuItem>\n              <HugeiconsIcon icon={UserIcon} className=\"mr-2 size-4\" />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <HugeiconsIcon icon={Coins01Icon} className=\"mr-2 size-4\" />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <HugeiconsIcon icon={Settings01Icon} className=\"mr-2 size-4\" />\n              Settings\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-destructive\">\n              <HugeiconsIcon icon={Logout01Icon} className=\"mr-2 size-4\" />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/dashboard/stats-cards.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/components/dashboard/stats-cards.tsx",
-      "content": "\"use client\"\n\nimport {\n  Invoice01Icon,\n  Notification01Icon,\n  Task01Icon,\n  UserGroupIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { leadStats } from \"../../mock-data/leads\"\n\nconst stats = [\n  {\n    title: \"Sponsor Prospects\",\n    value: leadStats.totalLeads,\n    change: leadStats.totalLeadsChange,\n    changeValue: leadStats.totalLeadsChangeValue,\n    icon: Invoice01Icon,\n  },\n  {\n    title: \"Contacted Sponsors\",\n    value: leadStats.contactedLeads,\n    change: leadStats.contactedLeadsChange,\n    changeValue: leadStats.contactedLeadsChangeValue,\n    icon: UserGroupIcon,\n  },\n  {\n    title: \"Deck Sent\",\n    value: leadStats.qualifiedLeads,\n    change: leadStats.qualifiedLeadsChange,\n    changeValue: leadStats.qualifiedLeadsChangeValue,\n    icon: Task01Icon,\n  },\n  {\n    title: \"Contract Ready\",\n    value: leadStats.hotLeads,\n    change: leadStats.hotLeadsChange,\n    changeValue: leadStats.hotLeadsChangeValue,\n    icon: Notification01Icon,\n  },\n]\n\nexport function StatsCards() {\n  return (\n    <div className=\"rounded-xl border bg-card text-card-foreground\">\n      <div className=\"grid grid-cols-1 divide-x-0 divide-y divide-border sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-4 lg:divide-x\">\n        {stats.map((stat, index) => (\n          <div key={index} className=\"space-y-4 p-4 sm:p-6\">\n            <div className=\"flex items-center gap-1.5 text-muted-foreground\">\n              <HugeiconsIcon\n                icon={stat.icon}\n                className=\"size-4 sm:size-[18px]\"\n              />\n              <span className=\"text-xs font-medium sm:text-sm\">\n                {stat.title}\n              </span>\n            </div>\n            <p className=\"text-2xl font-semibold tracking-tight sm:text-[28px]\">\n              {stat.value}\n            </p>\n            <div className=\"flex items-center gap-2 text-xs sm:text-sm\">\n              <span className=\"font-medium text-emerald-600 dark:text-emerald-400\">\n                +{stat.change}%(\n                {stat.changeValue > 0\n                  ? `$${stat.changeValue}`\n                  : stat.changeValue}\n                )\n              </span>\n              <span className=\"size-1 rounded-full bg-muted-foreground\" />\n              <span className=\"hidden text-muted-foreground sm:inline\">\n                vs Last Month\n              </span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/theme-provider.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/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/leads/components/theme-toggle.tsx",
-      "type": "registry:component",
-      "target": "components/example-apps/leads/components/theme-toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon01Icon, Sun01Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\n\nexport function ThemeToggle() {\n  const { setTheme, theme } = useTheme()\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={() => setTheme(theme === \"light\" ? \"dark\" : \"light\")}\n    >\n      <HugeiconsIcon\n        icon={Sun01Icon}\n        className=\"size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\"\n      />\n      <HugeiconsIcon\n        icon={Moon01Icon}\n        className=\"absolute size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\"\n      />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/alert-dialog.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-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 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\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 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/avatar.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/badge.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/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/leads/components/ui/button.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/button.tsx",
-      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\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 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\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/card.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/chart.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"../../lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as any\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/checkbox.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\nimport { Tick02Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/collapsible.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/collapsible.tsx",
-      "content": "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n  )\n}\n\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n  return (\n    <CollapsiblePrimitive.Panel data-slot=\"collapsible-content\" {...props} />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/combobox.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\nimport {\n  ArrowDown01Icon,\n  Cancel01Icon,\n  Tick02Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <HugeiconsIcon\n        icon={ArrowDown01Icon}\n        strokeWidth={2}\n        className=\"pointer-events-none size-4 text-muted-foreground\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <HugeiconsIcon\n        icon={Cancel01Icon}\n        strokeWidth={2}\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\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 group/combobox-content relative max-h-(--available-height) max-h-72 w-(--anchor-width) max-w-(--available-width) min-w-36 min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**: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      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <HugeiconsIcon\n          icon={Tick02Icon}\n          strokeWidth={2}\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <HugeiconsIcon\n            icon={Cancel01Icon}\n            strokeWidth={2}\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/dropdown-menu.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { ArrowRight01Icon, Tick02Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/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      <HugeiconsIcon\n        icon={ArrowRight01Icon}\n        strokeWidth={2}\n        className=\"ml-auto\"\n      />\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          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />\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          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />\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/leads/components/ui/field.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Label } from \"./label\"\nimport { Separator } from \"./separator\"\n\nfunction FieldSet({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: ComponentPropsWithoutRef<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ComponentPropsWithoutRef<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border dark:has-data-checked:bg-primary/10 [&>*]:data-[slot=field]:p-3\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: ComponentPropsWithoutRef<\"div\"> & {\n  children?: ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: ComponentPropsWithoutRef<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/input-group.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/input.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/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/leads/components/ui/label.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/label.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Label({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/select.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\nimport {\n  ArrowDown01Icon,\n  ArrowUp01Icon,\n  Tick02Icon,\n  UnfoldMoreIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  className,\n  placeholder,\n  ...props\n}: SelectPrimitive.Value.Props & { placeholder?: string }) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    >\n      {(value) => value ?? placeholder}\n    </SelectPrimitive.Value>\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <HugeiconsIcon\n            icon={UnfoldMoreIcon}\n            strokeWidth={2}\n            className=\"pointer-events-none size-4 text-muted-foreground\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-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 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full 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 not-data-[variant=destructive]: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <HugeiconsIcon\n          icon={Tick02Icon}\n          strokeWidth={2}\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <HugeiconsIcon icon={ArrowUp01Icon} strokeWidth={2} />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <HugeiconsIcon icon={ArrowDown01Icon} strokeWidth={2} />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/separator.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/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/leads/components/ui/sheet.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\nimport { Cancel01Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/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            <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />\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/leads/components/ui/sidebar.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/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 { SidebarLeftIcon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\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 = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"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=offExamples]: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=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]: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      <HugeiconsIcon icon={SidebarLeftIcon} strokeWidth={2} />\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=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full hover:group-data-[collapsible=offExamples]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-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/leads/components/ui/skeleton.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/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/leads/components/ui/table.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/textarea.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/components/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 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 { Textarea }\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/components/ui/tooltip.tsx",
-      "type": "registry:ui",
-      "target": "components/example-apps/leads/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/leads/hooks/use-mobile.ts",
-      "type": "registry:hook",
-      "target": "components/example-apps/leads/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/leads/index.tsx",
-      "type": "registry:file",
-      "target": "components/example-apps/leads/index.tsx",
-      "content": "/**\n * Wrapper export for embedding the app in the docs app\n */\n\"use client\"\n\nimport { SidebarProvider } from \"@/components/ui/sidebar\"\n\nimport { DashboardContent } from \"./components/dashboard/content\"\nimport { DashboardHeader } from \"./components/dashboard/header\"\nimport { DashboardSidebar } from \"./components/dashboard/sidebar\"\n\nexport default function LeadsWrapper() {\n  return (\n    <SidebarProvider className=\"bg-sidebar\">\n      <DashboardSidebar />\n      <div className=\"h-full min-h-0 w-full overflow-hidden lg:p-2\">\n        <div className=\"bg-container flex h-full min-h-0 w-full flex-col items-center justify-start overflow-hidden bg-background lg:rounded-md lg:border\">\n          <DashboardHeader />\n          <DashboardContent />\n        </div>\n      </div>\n    </SidebarProvider>\n  )\n}\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/lib/utils.ts",
-      "type": "registry:lib",
-      "target": "components/example-apps/leads/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/leads/mock-data/leads.ts",
-      "type": "registry:lib",
-      "target": "components/example-apps/leads/mock-data/leads.ts",
-      "content": "import { LeadSource, LeadStatus } from \"../store/leads-store\"\n\nexport interface Lead {\n  id: string\n  leadId: string\n  name: string\n  email: string\n  avatar: string\n  status: LeadStatus\n  source: LeadSource\n  owner: string\n  ownerInitials: string\n  createdAt: string\n  createdTimestamp: number\n}\n\nconst firstNames = [\n  \"Avery\",\n  \"Blake\",\n  \"Casey\",\n  \"Dakota\",\n  \"Elliot\",\n  \"Finley\",\n  \"Gray\",\n  \"Hayden\",\n  \"Indigo\",\n  \"Jules\",\n  \"Kai\",\n  \"Logan\",\n  \"Morgan\",\n  \"Noel\",\n  \"Oakley\",\n  \"Parker\",\n  \"Quincy\",\n  \"Reese\",\n  \"Sage\",\n  \"Taylor\",\n  \"Urban\",\n  \"Vale\",\n  \"Winter\",\n  \"Xen\",\n  \"Yael\",\n  \"Zion\",\n]\n\nconst lastNames = [\n  \"Adler\",\n  \"Bennett\",\n  \"Coleman\",\n  \"Dalton\",\n  \"Ellis\",\n  \"Foster\",\n  \"Greer\",\n  \"Hayes\",\n  \"Iverson\",\n  \"Jordan\",\n  \"Keller\",\n  \"Lane\",\n  \"Monroe\",\n  \"Nash\",\n  \"Owens\",\n  \"Perry\",\n  \"Quinn\",\n  \"Reed\",\n  \"Sullivan\",\n  \"Turner\",\n  \"Underwood\",\n  \"Vasquez\",\n  \"Walker\",\n  \"Xu\",\n  \"Young\",\n  \"Zimmerman\",\n]\n\nconst sponsorDomains = [\n  \"northpeak.com\",\n  \"harborlabs.io\",\n  \"cedarworks.co\",\n  \"atlasgrid.com\",\n  \"summitforge.io\",\n  \"lumenbridge.ai\",\n  \"ravenpoint.dev\",\n  \"stonepath.co\",\n  \"beaconfield.com\",\n  \"wildshore.io\",\n]\n\nconst owners = [\n  { name: \"Mara Quinn\", initials: \"MQ\" },\n  { name: \"Dylan Park\", initials: \"DP\" },\n  { name: \"Nora Chen\", initials: \"NC\" },\n  { name: \"Ibrahim Lee\", initials: \"IL\" },\n]\n\nconst statuses: LeadStatus[] = [\n  \"new\",\n  \"contacted\",\n  \"qualified\",\n  \"negotiation\",\n  \"inactive\",\n  \"recycled\",\n]\n\nconst sources: LeadSource[] = [\n  \"website\",\n  \"paid_ads\",\n  \"referral\",\n  \"social\",\n  \"email\",\n]\n\nfunction getDateString(daysAgo: number): string {\n  const date = new Date()\n  date.setDate(date.getDate() - daysAgo)\n  const months = [\n    \"Jan\",\n    \"Feb\",\n    \"Mar\",\n    \"Apr\",\n    \"May\",\n    \"Jun\",\n    \"Jul\",\n    \"Aug\",\n    \"Sep\",\n    \"Oct\",\n    \"Nov\",\n    \"Dec\",\n  ]\n  return `${months[date.getMonth()]} ${date.getDate().toString().padStart(2, \"0\")}, ${date.getFullYear()}`\n}\n\nfunction getTimestamp(daysAgo: number): number {\n  const date = new Date()\n  date.setDate(date.getDate() - daysAgo)\n  return date.getTime()\n}\n\nexport const leads: Lead[] = Array.from({ length: 50 }, (_, index) => {\n  const firstName = firstNames[index % firstNames.length]\n  const lastName = lastNames[index % lastNames.length]\n  const owner = owners[index % owners.length]\n  const status = statuses[index % statuses.length]\n  const source = sources[index % sources.length]\n  const domain = sponsorDomains[index % sponsorDomains.length]\n  const daysAgo = index % 30\n\n  return {\n    id: (index + 1).toString(),\n    leadId: `SPN-${(901 + index).toString().padStart(4, \"0\")}`,\n    name: `${firstName} ${lastName}`,\n    email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@${domain}`,\n    avatar: `https://api.dicebear.com/9.x/glass/svg?seed=sponsor-${firstName}${lastName}`,\n    status,\n    source,\n    owner: owner.name,\n    ownerInitials: owner.initials,\n    createdAt: getDateString(daysAgo),\n    createdTimestamp: getTimestamp(daysAgo),\n  }\n})\n\nexport const leadStats = {\n  totalLeads: 128,\n  totalLeadsChange: 11,\n  totalLeadsChangeValue: 13,\n  contactedLeads: 76,\n  contactedLeadsChange: 9,\n  contactedLeadsChangeValue: 6,\n  qualifiedLeads: 34,\n  qualifiedLeadsChange: 14,\n  qualifiedLeadsChangeValue: 4,\n  hotLeads: 18,\n  hotLeadsChange: 20,\n  hotLeadsChangeValue: 3,\n}\n\nexport const leadsByStatus = {\n  total: 128,\n  totalChange: 11,\n  totalChangeValue: 13,\n  data: [\n    { name: \"Sponsor Prospects\", value: 42, color: \"#375dfb\" },\n    { name: \"Contacted\", value: 28, color: \"#6985fc\" },\n    { name: \"Deck Sent\", value: 24, color: \"#9baefd\" },\n    { name: \"Contract Review\", value: 14, color: \"#7f69fc\" },\n    { name: \"On Hold\", value: 11, color: \"#aa9bfd\" },\n    { name: \"Re-engage\", value: 9, color: \"#b069fc\" },\n  ],\n}\n\nexport const monthlyLeadGrowth = [\n  { month: \"Jan\", leads: 14 },\n  { month: \"Feb\", leads: 18 },\n  { month: \"Mar\", leads: 22 },\n  { month: \"Apr\", leads: 27 },\n  { month: \"May\", leads: 24 },\n  { month: \"Jun\", leads: 30 },\n  { month: \"Jul\", leads: 34 },\n  { month: \"Aug\", leads: 38 },\n  { month: \"Sep\", leads: 42 },\n  { month: \"Oct\", leads: 46 },\n  { month: \"Nov\", leads: 40 },\n  { month: \"Dec\", leads: 48 },\n]\n"
-    },
-    {
-      "path": "registry/example-apps/default/leads/store/leads-store.ts",
-      "type": "registry:lib",
-      "target": "components/example-apps/leads/store/leads-store.ts",
-      "content": "import { create } from \"zustand\"\n\nexport type LeadStatus =\n  | \"new\"\n  | \"contacted\"\n  | \"qualified\"\n  | \"negotiation\"\n  | \"inactive\"\n  | \"recycled\"\nexport type LeadSource =\n  | \"website\"\n  | \"paid_ads\"\n  | \"referral\"\n  | \"social\"\n  | \"email\"\nexport type DateFilter =\n  | \"all\"\n  | \"today\"\n  | \"yesterday\"\n  | \"last_7_days\"\n  | \"last_30_days\"\n  | \"this_month\"\n\ninterface LeadsState {\n  searchQuery: string\n  statusFilter: LeadStatus | \"all\"\n  sourceFilter: LeadSource | \"all\"\n  ownerFilter: string\n  dateFilter: DateFilter\n  currentPage: number\n  itemsPerPage: number\n  setSearchQuery: (query: string) => void\n  setStatusFilter: (filter: LeadStatus | \"all\") => void\n  setSourceFilter: (filter: LeadSource | \"all\") => void\n  setOwnerFilter: (filter: string) => void\n  setDateFilter: (filter: DateFilter) => void\n  setCurrentPage: (page: number) => void\n  setItemsPerPage: (items: number) => void\n  clearFilters: () => void\n}\n\nexport const useLeadsStore = create<LeadsState>((set) => ({\n  searchQuery: \"\",\n  statusFilter: \"all\",\n  sourceFilter: \"all\",\n  ownerFilter: \"all\",\n  dateFilter: \"this_month\",\n  currentPage: 1,\n  itemsPerPage: 10,\n  setSearchQuery: (query) => set({ searchQuery: query, currentPage: 1 }),\n  setStatusFilter: (filter) => set({ statusFilter: filter, currentPage: 1 }),\n  setSourceFilter: (filter) => set({ sourceFilter: filter, currentPage: 1 }),\n  setOwnerFilter: (filter) => set({ ownerFilter: filter, currentPage: 1 }),\n  setDateFilter: (filter) => set({ dateFilter: filter, currentPage: 1 }),\n  setCurrentPage: (page) => set({ currentPage: page }),\n  setItemsPerPage: (items) => set({ itemsPerPage: items, currentPage: 1 }),\n  clearFilters: () =>\n    set({\n      searchQuery: \"\",\n      statusFilter: \"all\",\n      sourceFilter: \"all\",\n      ownerFilter: \"all\",\n      dateFilter: \"this_month\",\n      currentPage: 1,\n    }),\n}))\n"
-    }
-  ],
-  "categories": [
-    "example-app",
-    "project-management",
-    "leads",
-    "crm",
-    "analytics"
-  ],
-  "dependencies": [
-    "@base-ui/react",
-    "@hugeicons/core-free-icons",
-    "@hugeicons/react",
-    "class-variance-authority",
-    "clsx",
-    "next-themes",
-    "recharts",
-    "tailwind-merge",
-    "zustand"
-  ],
-  "registryDependencies": [
-    "https://www.loveui.dev/r/avatar.json",
-    "https://www.loveui.dev/r/badge.json",
-    "https://www.loveui.dev/r/button.json",
-    "https://www.loveui.dev/r/checkbox.json",
-    "https://www.loveui.dev/r/collapsible.json",
-    "https://www.loveui.dev/r/input.json",
-    "https://www.loveui.dev/r/menu.json",
-    "https://www.loveui.dev/r/select.json",
-    "https://www.loveui.dev/r/table.json"
-  ],
-  "meta": {
-    "source": "example-app",
-    "appName": "leads",
-    "routes": [
-      {
-        "path": "/",
-        "title": "Leads",
-        "description": "Leads overview dashboard"
-      }
-    ]
-  }
-}