love-ui 1.2.12 → 1.2.14

package/public/r/dashboard-2.json

@@ -0,0 +1,264 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dashboard-2",
+  "type": "registry:block",
+  "title": "Business Dashboard",
+  "description": "A business-focused dashboard application with metrics, charts, and data management features",
+  "files": [
+    {
+      "path": "registry/example-apps/default/dashboard-2/components/dashboard/content.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-2/components/dashboard/content.tsx",
+      "content": "\"use client\"\n\nimport { WelcomeSection } from \"./header\"\nimport { LeadsChart } from \"./leads-chart\"\nimport { LeadsTable } from \"./leads-table\"\nimport { StatsCards } from \"./stats-cards\"\nimport { TopPerformers } from \"./top-performers\"\n\nexport function DashboardContent() {\n  return (\n    <main className=\"w-full flex-1 space-y-6 overflow-auto bg-background p-4 sm:p-6\">\n      <WelcomeSection />\n      <StatsCards />\n      <div className=\"flex flex-col gap-4 sm:gap-6 lg:flex-row\">\n        <LeadsChart />\n        <TopPerformers />\n      </div>\n      <LeadsTable />\n    </main>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-2/components/dashboard/header.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-2/components/dashboard/header.tsx",
+      "content": "\"use client\"\n\nimport {\n  Add01Icon,\n  DashboardSquare01Icon,\n  FileAddIcon,\n  Link01Icon,\n  Mail01Icon,\n  Share01Icon,\n  SparklesIcon,\n  UserAdd01Icon,\n  UserGroupIcon,\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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { ThemeToggle } from \"../theme-toggle\"\nimport { SidebarTrigger } from \"../ui/sidebar\"\n\nexport function DashboardHeader() {\n  return (\n    <header className=\"sticky top-0 z-10 flex w-full items-center justify-between gap-4 border-b bg-card px-4 py-3 sm:px-6\">\n      <div className=\"flex items-center gap-3\">\n        <SidebarTrigger className=\"-ml-2\" />\n        <div className=\"hidden items-center gap-2 text-muted-foreground sm:flex\">\n          <HugeiconsIcon icon={DashboardSquare01Icon} className=\"size-4\" />\n          <span className=\"text-sm font-medium\">Realty Pipeline</span>\n        </div>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        <div className=\"hidden items-center lg:flex\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <button className=\"mr-3 flex cursor-pointer -space-x-2 transition-opacity hover:opacity-80\">\n                  <Avatar className=\"size-6 border-2 border-card\">\n                    <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=user1\" />\n                    <AvatarFallback>U1</AvatarFallback>\n                  </Avatar>\n                  <Avatar className=\"size-6 border-2 border-card\">\n                    <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=user2\" />\n                    <AvatarFallback>U2</AvatarFallback>\n                  </Avatar>\n                  <Avatar className=\"size-6 border-2 border-card\">\n                    <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=user3\" />\n                    <AvatarFallback>U3</AvatarFallback>\n                  </Avatar>\n                  <div className=\"flex size-6 items-center justify-center rounded-full border-2 border-card bg-muted\">\n                    <HugeiconsIcon icon={Add01Icon} className=\"size-3\" />\n                  </div>\n                </button>\n              }\n            />\n            <DropdownMenuContent align=\"end\" className=\"w-52\">\n              <DropdownMenuGroup>\n                <div className=\"px-2 py-1.5\">\n                  <p className=\"text-xs font-medium text-muted-foreground\">\n                    Team Members\n                  </p>\n                </div>\n                <DropdownMenuItem>\n                  <Avatar className=\"mr-2 size-5\">\n                    <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=user1\" />\n                    <AvatarFallback>U1</AvatarFallback>\n                  </Avatar>\n                  <span>Maya R.</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Avatar className=\"mr-2 size-5\">\n                    <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=user2\" />\n                    <AvatarFallback>U2</AvatarFallback>\n                  </Avatar>\n                  <span>Jordan F.</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Avatar className=\"mr-2 size-5\">\n                    <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=user3\" />\n                    <AvatarFallback>U3</AvatarFallback>\n                  </Avatar>\n                  <span>Evan K.</span>\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <HugeiconsIcon icon={Mail01Icon} className=\"mr-2 size-4\" />\n                  <span>Invite by email</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <HugeiconsIcon icon={Link01Icon} className=\"mr-2 size-4\" />\n                  <span>Copy invite link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <HugeiconsIcon icon={UserGroupIcon} className=\"mr-2 size-4\" />\n                  <span>Manage team</span>\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <div className=\"mx-2 h-5 w-px bg-border\" />\n        </div>\n\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"hidden h-7 gap-1.5 sm:flex\"\n              >\n                <HugeiconsIcon icon={SparklesIcon} className=\"size-3.5\" />\n                <span className=\"text-sm\">Ask AI</span>\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>Summarize pipeline risks</DropdownMenuItem>\n              <DropdownMenuItem>Flag tour-ready buyers</DropdownMenuItem>\n              <DropdownMenuItem>Draft open-house follow-up</DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"hidden h-7 gap-1.5 sm:flex\"\n              >\n                <HugeiconsIcon icon={Share01Icon} className=\"size-3.5\" />\n                <span className=\"text-sm\">Share</span>\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>Copy listing board link</DropdownMenuItem>\n              <DropdownMenuItem>Export weekly market snapshot</DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Share with brokerage team</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <ThemeToggle />\n      </div>\n    </header>\n  )\n}\n\nexport function WelcomeSection() {\n  return (\n    <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div>\n        <h1 className=\"text-xl font-semibold tracking-tight sm:text-2xl\">\n          Good to see you, Connor\n        </h1>\n        <p className=\"mt-0.5 text-sm text-muted-foreground\">\n          Buyer activity is up ahead of this weekend&apos;s showings\n        </p>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        <Button\n          variant=\"outline\"\n          className=\"h-9 gap-1.5 border-border/50 bg-card hover:bg-card/80\"\n        >\n          <HugeiconsIcon icon={FileAddIcon} className=\"size-4\" />\n          <span className=\"hidden sm:inline\">Add Listing</span>\n        </Button>\n        <Button className=\"h-9 gap-1.5 border border-border/50 bg-neutral-800 text-white hover:bg-neutral-700\">\n          <HugeiconsIcon icon={UserAdd01Icon} className=\"size-4\" />\n          <span className=\"hidden sm:inline\">New Buyer</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-2/components/dashboard/leads-chart.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-2/components/dashboard/leads-chart.tsx",
+      "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport {\n  ArrowDown01Icon,\n  Calendar01Icon,\n  Settings01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { useTheme } from \"next-themes\"\nimport {\n  Area,\n  AreaChart,\n  CartesianGrid,\n  Line,\n  LineChart as RechartsLineChart,\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  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport {\n  leadsChartDataMonth,\n  leadsChartDataQuarter,\n  leadsChartDataWeek,\n} from \"../../mock-data/dashboard\"\n\ntype ChartType = \"line\" | \"area\"\ntype Period = \"last_week\" | \"last_month\" | \"last_quarter\"\n\nconst periodLabels: Record<Period, string> = {\n  last_week: \"Last Week\",\n  last_month: \"Last Month\",\n  last_quarter: \"Last Quarter\",\n}\n\nconst lineColors = {\n  line1: \"#ec4899\",\n  line2: \"#06b6d4\",\n  line3: \"#f97316\",\n  line4: \"#22c55e\",\n}\n\ninterface CustomTooltipProps {\n  active?: boolean\n  payload?: Array<{\n    value: number\n    dataKey: string\n    color: string\n  }>\n  label?: string\n}\n\nfunction CustomTooltip({ active, payload, label }: CustomTooltipProps) {\n  if (active && payload && payload.length) {\n    return (\n      <div className=\"rounded-md border bg-card p-3 shadow-lg\">\n        <p className=\"mb-2 text-xs text-muted-foreground\">{label}</p>\n        <div className=\"grid grid-cols-2 gap-x-4 gap-y-1\">\n          {payload.map((entry, index) => (\n            <div key={index} className=\"flex items-center gap-1.5\">\n              <span\n                className=\"size-2 rounded-full\"\n                style={{ backgroundColor: entry.color }}\n              />\n              <span className=\"text-xs font-medium\">{entry.value}</span>\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n  return null\n}\n\nexport function LeadsChart() {\n  const { theme } = useTheme()\n  const [chartType, setChartType] = useState<ChartType>(\"line\")\n  const [period, setPeriod] = useState<Period>(\"last_month\")\n  const [showGrid, setShowGrid] = useState(true)\n  const [visibleLines, setVisibleLines] = useState({\n    line1: true,\n    line2: true,\n    line3: true,\n    line4: true,\n  })\n\n  const axisColor = theme === \"dark\" ? \"#71717a\" : \"#868c98\"\n  const gridColor = theme === \"dark\" ? \"#3f3f46\" : \"#e2e4e9\"\n\n  const chartData = useMemo(() => {\n    switch (period) {\n      case \"last_week\":\n        return leadsChartDataWeek\n      case \"last_month\":\n        return leadsChartDataMonth\n      case \"last_quarter\":\n        return leadsChartDataQuarter\n      default:\n        return leadsChartDataMonth\n    }\n  }, [period])\n\n  const toggleLine = (line: keyof typeof visibleLines) => {\n    setVisibleLines((prev) => ({\n      ...prev,\n      [line]: !prev[line],\n    }))\n  }\n\n  const resetToDefault = () => {\n    setChartType(\"line\")\n    setPeriod(\"last_month\")\n    setShowGrid(true)\n    setVisibleLines({\n      line1: true,\n      line2: true,\n      line3: true,\n      line4: true,\n    })\n  }\n\n  return (\n    <div className=\"flex-1 rounded-lg border bg-card text-card-foreground\">\n      <div className=\"flex flex-col gap-3 border-b border-border/50 p-4 sm:flex-row sm:items-center sm:justify-between\">\n        <h3 className=\"text-sm font-medium sm:text-base\">\n          Buyer Inquiry Trend\n        </h3>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <Button variant=\"outline\" size=\"sm\" className=\"h-7 gap-1.5\">\n                  <HugeiconsIcon icon={Calendar01Icon} className=\"size-3.5\" />\n                  <span className=\"text-sm\">{periodLabels[period]}</span>\n                  <HugeiconsIcon icon={ArrowDown01Icon} className=\"size-3\" />\n                </Button>\n              }\n            />\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuGroup>\n                {(Object.keys(periodLabels) as Period[]).map((p) => (\n                  <DropdownMenuItem key={p} onClick={() => setPeriod(p)}>\n                    {periodLabels[p]} {period === p && \"✓\"}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <Button variant=\"outline\" size=\"icon\" className=\"size-7\">\n                  <HugeiconsIcon icon={Settings01Icon} className=\"size-3.5\" />\n                </Button>\n              }\n            />\n            <DropdownMenuContent align=\"end\" className=\"w-48\">\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>Chart Type</DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\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                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuCheckboxItem\n                checked={showGrid}\n                onCheckedChange={setShowGrid}\n              >\n                Show Grid\n              </DropdownMenuCheckboxItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>Show Lines</DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    {Object.entries(visibleLines).map(([key, value]) => (\n                      <DropdownMenuCheckboxItem\n                        key={key}\n                        checked={value}\n                        onCheckedChange={() =>\n                          toggleLine(key as keyof typeof visibleLines)\n                        }\n                      >\n                        <span\n                          className=\"mr-2 size-2 rounded-full\"\n                          style={{\n                            backgroundColor:\n                              lineColors[key as keyof typeof lineColors],\n                          }}\n                        />\n                        Series {key.replace(\"line\", \"\")}\n                      </DropdownMenuCheckboxItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem onClick={resetToDefault}>\n                Reset to Default\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n      <div className=\"p-4\">\n        <div className=\"h-[200px] w-full sm:h-[250px]\">\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            {chartType === \"area\" ? (\n              <AreaChart\n                data={chartData}\n                margin={{ top: 10, 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=\"date\"\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 10, fill: axisColor }}\n                />\n                <YAxis\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 10, fill: axisColor }}\n                  domain={[0, 1000]}\n                />\n                <Tooltip content={<CustomTooltip />} />\n                <defs>\n                  {Object.entries(lineColors).map(([key, color]) => (\n                    <linearGradient\n                      key={key}\n                      id={`gradient-${key}`}\n                      x1=\"0\"\n                      y1=\"0\"\n                      x2=\"0\"\n                      y2=\"1\"\n                    >\n                      <stop offset=\"0%\" stopColor={color} stopOpacity={0.3} />\n                      <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n                    </linearGradient>\n                  ))}\n                </defs>\n                {Object.entries(visibleLines).map(\n                  ([key, visible]) =>\n                    visible && (\n                      <Area\n                        key={key}\n                        type=\"monotone\"\n                        dataKey={key}\n                        stroke={lineColors[key as keyof typeof lineColors]}\n                        strokeWidth={2}\n                        fill={`url(#gradient-${key})`}\n                        dot={false}\n                      />\n                    )\n                )}\n              </AreaChart>\n            ) : (\n              <RechartsLineChart\n                data={chartData}\n                margin={{ top: 10, 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=\"date\"\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 10, fill: axisColor }}\n                />\n                <YAxis\n                  axisLine={false}\n                  tickLine={false}\n                  tick={{ fontSize: 10, fill: axisColor }}\n                  domain={[0, 1000]}\n                />\n                <Tooltip content={<CustomTooltip />} />\n                {Object.entries(visibleLines).map(\n                  ([key, visible]) =>\n                    visible && (\n                      <Line\n                        key={key}\n                        type=\"monotone\"\n                        dataKey={key}\n                        stroke={lineColors[key as keyof typeof lineColors]}\n                        strokeWidth={2}\n                        dot={false}\n                        activeDot={{ r: 4, strokeWidth: 0 }}\n                      />\n                    )\n                )}\n              </RechartsLineChart>\n            )}\n          </ResponsiveContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-2/components/dashboard/leads-table.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-2/components/dashboard/leads-table.tsx",
+      "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport {\n  Activity01Icon,\n  ArrowDown01Icon,\n  ArrowLeft01Icon,\n  ArrowLeftDoubleIcon,\n  ArrowRight01Icon,\n  ArrowRightDoubleIcon,\n  ArrowUp01Icon,\n  ArrowUpDownIcon,\n  CallIcon,\n  Cancel01Icon,\n  FireIcon,\n  FlashIcon,\n  Globe02Icon,\n  HandPointingRight01Icon,\n  Linkedin01Icon,\n  Mail01Icon,\n  PieChartIcon,\n  Search01Icon,\n  SlidersHorizontalIcon,\n  SnowIcon,\n  Target01Icon,\n  Tick01Icon,\n  Upload01Icon,\n  UserIcon,\n  UserMultiple02Icon,\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 { Checkbox } from \"@loveui/ui/ui/checkbox\"\nimport { Input } from \"@loveui/ui/ui/input\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\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 { cn } from \"../../lib/utils\"\nimport {\n  leads,\n  LeadSource,\n  LeadStatus,\n  LeadType,\n} from \"../../mock-data/dashboard\"\nimport { useDashboardStore } from \"../../store/dashboard-store\"\n\ntype SortField = \"name\" | \"email\" | \"followUp\" | \"status\" | \"score\"\ntype SortOrder = \"asc\" | \"desc\"\n\nfunction getSortIcon(\n  sortField: SortField,\n  sortOrder: SortOrder,\n  field: SortField\n) {\n  if (sortField !== field)\n    return <HugeiconsIcon icon={ArrowUpDownIcon} className=\"size-3\" />\n  return sortOrder === \"asc\" ? (\n    <HugeiconsIcon icon={ArrowUp01Icon} className=\"size-3\" />\n  ) : (\n    <HugeiconsIcon icon={ArrowDown01Icon} className=\"size-3\" />\n  )\n}\n\nfunction TypeBadge({ type }: { type: LeadType }) {\n  if (type === \"cold\") {\n    return (\n      <div\n        className=\"flex w-fit items-center gap-1 rounded-lg border border-cyan-500/40 px-2 py-1\"\n        style={{\n          backgroundImage:\n            \"linear-gradient(90deg, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.06) 30%, rgba(6, 182, 212, 0) 100%), linear-gradient(90deg, hsl(var(--card)) 0%, hsl(var(--card)) 100%)\",\n        }}\n      >\n        <HugeiconsIcon icon={SnowIcon} className=\"size-3.5 text-cyan-400\" />\n        <span className=\"text-sm font-medium text-cyan-400\">Cold</span>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className=\"flex w-fit items-center gap-1 rounded-lg border border-pink-500/40 px-2 py-1\"\n      style={{\n        backgroundImage:\n          \"linear-gradient(90deg, rgba(236, 72, 153, 0.12) 0%, rgba(236, 72, 153, 0.06) 30%, rgba(236, 72, 153, 0) 100%), linear-gradient(90deg, hsl(var(--card)) 0%, hsl(var(--card)) 100%)\",\n      }}\n    >\n      <HugeiconsIcon icon={FireIcon} className=\"size-3.5 text-pink-400\" />\n      <span className=\"text-sm font-medium text-pink-400\">Warm</span>\n    </div>\n  )\n}\n\nfunction StatusBadge({ status }: { status: LeadStatus }) {\n  if (status === \"closed\") {\n    return (\n      <div\n        className=\"flex w-fit items-center gap-1 rounded-lg border border-emerald-500/40 px-2 py-1\"\n        style={{\n          backgroundImage:\n            \"linear-gradient(90deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.06) 30%, rgba(16, 185, 129, 0) 100%), linear-gradient(90deg, hsl(var(--card)) 0%, hsl(var(--card)) 100%)\",\n        }}\n      >\n        <HugeiconsIcon\n          icon={Tick01Icon}\n          className=\"size-3.5 text-emerald-400\"\n        />\n        <span className=\"text-sm font-medium text-emerald-400\">Closed</span>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className=\"flex w-fit items-center gap-1 rounded-lg border border-amber-500/40 px-2 py-1\"\n      style={{\n        backgroundImage:\n          \"linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.06) 30%, rgba(245, 158, 11, 0) 100%), linear-gradient(90deg, hsl(var(--card)) 0%, hsl(var(--card)) 100%)\",\n      }}\n    >\n      <HugeiconsIcon icon={Cancel01Icon} className=\"size-3.5 text-amber-400\" />\n      <span className=\"text-sm font-medium text-amber-400\">Lost</span>\n    </div>\n  )\n}\n\nfunction ScoreBadge({ score }: { score: number }) {\n  const getScoreStyle = () => {\n    if (score >= 80)\n      return { barClass: \"bg-emerald-500\", textClass: \"text-emerald-400\" }\n    if (score >= 50)\n      return { barClass: \"bg-cyan-500\", textClass: \"text-cyan-400\" }\n    return { barClass: \"bg-amber-500\", textClass: \"text-amber-400\" }\n  }\n\n  const { barClass, textClass } = getScoreStyle()\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <div className=\"relative h-1.5 w-12 overflow-hidden rounded-full bg-muted\">\n        <div\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full transition-all\",\n            barClass\n          )}\n          style={{ width: `${score}%` }}\n        />\n      </div>\n      <span className={cn(\"min-w-[28px] text-xs font-semibold\", textClass)}>\n        {score}\n      </span>\n    </div>\n  )\n}\n\nfunction SourceBadge({ source }: { source: LeadSource }) {\n  const sourceConfig: Record<\n    LeadSource,\n    {\n      icon: typeof Linkedin01Icon\n      label: string\n      bgClass: string\n      textClass: string\n    }\n  > = {\n    linkedin: {\n      icon: Linkedin01Icon,\n      label: \"LinkedIn\",\n      bgClass: \"bg-blue-500/10\",\n      textClass: \"text-blue-400\",\n    },\n    google: {\n      icon: Search01Icon,\n      label: \"Google\",\n      bgClass: \"bg-red-500/10\",\n      textClass: \"text-red-400\",\n    },\n    referral: {\n      icon: UserMultiple02Icon,\n      label: \"Referral\",\n      bgClass: \"bg-violet-500/10\",\n      textClass: \"text-violet-400\",\n    },\n    website: {\n      icon: Globe02Icon,\n      label: \"Website\",\n      bgClass: \"bg-cyan-500/10\",\n      textClass: \"text-cyan-400\",\n    },\n    \"cold-call\": {\n      icon: CallIcon,\n      label: \"Cold Call\",\n      bgClass: \"bg-orange-500/10\",\n      textClass: \"text-orange-400\",\n    },\n  }\n\n  const config = sourceConfig[source]\n\n  return (\n    <div\n      className={cn(\n        \"flex w-fit items-center gap-1.5 rounded-md px-2 py-1\",\n        config.bgClass\n      )}\n    >\n      <HugeiconsIcon\n        icon={config.icon}\n        className={cn(\"size-3\", config.textClass)}\n      />\n      <span className={cn(\"text-xs font-medium\", config.textClass)}>\n        {config.label}\n      </span>\n    </div>\n  )\n}\n\nexport function LeadsTable() {\n  const {\n    searchQuery,\n    typeFilter,\n    statusFilter,\n    sourceFilter,\n    setSearchQuery,\n    setTypeFilter,\n    setStatusFilter,\n    setSourceFilter,\n    clearFilters,\n  } = useDashboardStore()\n\n  const [sortField, setSortField] = useState<SortField>(\"name\")\n  const [sortOrder, setSortOrder] = useState<SortOrder>(\"asc\")\n  const [selectedLeads, setSelectedLeads] = useState<string[]>([])\n  const [currentPage, setCurrentPage] = useState(1)\n  const [itemsPerPage, setItemsPerPage] = useState(10)\n\n  const filteredAndSortedLeads = useMemo(() => {\n    const result = leads.filter((lead) => {\n      const matchesSearch =\n        searchQuery === \"\" ||\n        lead.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        lead.email.toLowerCase().includes(searchQuery.toLowerCase())\n\n      const matchesType = typeFilter === \"all\" || lead.type === typeFilter\n      const matchesStatus =\n        statusFilter === \"all\" || lead.status === statusFilter\n      const matchesSource =\n        sourceFilter === \"all\" || lead.source === sourceFilter\n\n      return matchesSearch && matchesType && matchesStatus && matchesSource\n    })\n\n    result.sort((a, b) => {\n      let comparison = 0\n      switch (sortField) {\n        case \"name\":\n          comparison = a.name.localeCompare(b.name)\n          break\n        case \"email\":\n          comparison = a.email.localeCompare(b.email)\n          break\n        case \"followUp\":\n          comparison = a.followUp.localeCompare(b.followUp)\n          break\n        case \"status\":\n          comparison = a.status.localeCompare(b.status)\n          break\n        case \"score\":\n          comparison = a.score - b.score\n          break\n      }\n      return sortOrder === \"asc\" ? comparison : -comparison\n    })\n\n    return result\n  }, [\n    searchQuery,\n    typeFilter,\n    statusFilter,\n    sourceFilter,\n    sortField,\n    sortOrder,\n  ])\n\n  const totalPages = Math.ceil(filteredAndSortedLeads.length / itemsPerPage)\n  const paginatedLeads = useMemo(() => {\n    const startIndex = (currentPage - 1) * itemsPerPage\n    return filteredAndSortedLeads.slice(startIndex, startIndex + itemsPerPage)\n  }, [filteredAndSortedLeads, currentPage, itemsPerPage])\n\n  const toggleSort = (field: SortField) => {\n    if (sortField === field) {\n      setSortOrder(sortOrder === \"asc\" ? \"desc\" : \"asc\")\n    } else {\n      setSortField(field)\n      setSortOrder(\"asc\")\n    }\n  }\n\n  const toggleSelectAll = () => {\n    if (selectedLeads.length === paginatedLeads.length) {\n      setSelectedLeads([])\n    } else {\n      setSelectedLeads(paginatedLeads.map((lead) => lead.id))\n    }\n  }\n\n  const toggleSelectLead = (id: string) => {\n    setSelectedLeads((prev) =>\n      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]\n    )\n  }\n\n  const hasActiveFilters =\n    searchQuery !== \"\" ||\n    typeFilter !== \"all\" ||\n    statusFilter !== \"all\" ||\n    sourceFilter !== \"all\"\n\n  const handlePageChange = (page: number) => {\n    setCurrentPage(page)\n    setSelectedLeads([])\n  }\n\n  const handleItemsPerPageChange = (value: string | null) => {\n    if (value) {\n      setItemsPerPage(Number(value))\n      setCurrentPage(1)\n      setSelectedLeads([])\n    }\n  }\n\n  return (\n    <div className=\"overflow-hidden rounded-xl border bg-card text-card-foreground\">\n      <div className=\"flex flex-col gap-3 border-b px-4 py-3.5 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <h3 className=\"text-base font-medium\">Lead Management</h3>\n          <div className=\"hidden h-5 w-px bg-border sm:block\" />\n          <div className=\"hidden items-center gap-2 sm:flex\">\n            <div className=\"relative\">\n              <HugeiconsIcon\n                icon={Search01Icon}\n                className=\"pointer-events-none absolute top-1/2 left-2.5 z-10 size-3.5 -translate-y-1/2 text-muted-foreground\"\n              />\n              <Input\n                placeholder=\"Search\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"h-8 w-[200px] border-border/50 bg-muted/50 pl-8 text-sm\"\n              />\n            </div>\n\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"h-8 gap-1.5 border-border/50 bg-muted/50\"\n                  >\n                    <HugeiconsIcon\n                      icon={SlidersHorizontalIcon}\n                      className=\"size-3.5\"\n                    />\n                    <span>Filter</span>\n                    {hasActiveFilters && (\n                      <span className=\"size-1.5 rounded-full bg-primary\" />\n                    )}\n                  </Button>\n                }\n              />\n              <DropdownMenuContent align=\"start\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <div className=\"px-2 py-1.5\">\n                    <p className=\"mb-1.5 text-xs font-medium text-muted-foreground\">\n                      Type\n                    </p>\n                    <div className=\"space-y-1\">\n                      <DropdownMenuCheckboxItem\n                        checked={typeFilter === \"all\"}\n                        onCheckedChange={() => setTypeFilter(\"all\")}\n                      >\n                        All Types\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem\n                        checked={typeFilter === \"cold\"}\n                        onCheckedChange={() => setTypeFilter(\"cold\")}\n                      >\n                        <HugeiconsIcon\n                          icon={SnowIcon}\n                          className=\"mr-1.5 size-3 text-cyan-400\"\n                        />\n                        Cold\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem\n                        checked={typeFilter === \"warm\"}\n                        onCheckedChange={() => setTypeFilter(\"warm\")}\n                      >\n                        <HugeiconsIcon\n                          icon={FireIcon}\n                          className=\"mr-1.5 size-3 text-pink-400\"\n                        />\n                        Warm\n                      </DropdownMenuCheckboxItem>\n                    </div>\n                  </div>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <div className=\"px-2 py-1.5\">\n                    <p className=\"mb-1.5 text-xs font-medium text-muted-foreground\">\n                      Status\n                    </p>\n                    <div className=\"space-y-1\">\n                      <DropdownMenuCheckboxItem\n                        checked={statusFilter === \"all\"}\n                        onCheckedChange={() => setStatusFilter(\"all\")}\n                      >\n                        All Status\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem\n                        checked={statusFilter === \"closed\"}\n                        onCheckedChange={() => setStatusFilter(\"closed\")}\n                      >\n                        <HugeiconsIcon\n                          icon={Tick01Icon}\n                          className=\"mr-1.5 size-3 text-emerald-400\"\n                        />\n                        Closed\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem\n                        checked={statusFilter === \"lost\"}\n                        onCheckedChange={() => setStatusFilter(\"lost\")}\n                      >\n                        <HugeiconsIcon\n                          icon={Cancel01Icon}\n                          className=\"mr-1.5 size-3 text-amber-400\"\n                        />\n                        Lost\n                      </DropdownMenuCheckboxItem>\n                    </div>\n                  </div>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <div className=\"px-2 py-1.5\">\n                    <p className=\"mb-1.5 text-xs font-medium text-muted-foreground\">\n                      Source\n                    </p>\n                    <div className=\"space-y-1\">\n                      <DropdownMenuCheckboxItem\n                        checked={sourceFilter === \"all\"}\n                        onCheckedChange={() => setSourceFilter(\"all\")}\n                      >\n                        All Sources\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem\n                        checked={sourceFilter === \"linkedin\"}\n                        onCheckedChange={() => setSourceFilter(\"linkedin\")}\n                      >\n                        <HugeiconsIcon\n                          icon={Linkedin01Icon}\n                          className=\"mr-1.5 size-3 text-blue-400\"\n                        />\n                        LinkedIn\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem\n                        checked={sourceFilter === \"google\"}\n                        onCheckedChange={() => setSourceFilter(\"google\")}\n                      >\n                        <HugeiconsIcon\n                          icon={Search01Icon}\n                          className=\"mr-1.5 size-3 text-red-400\"\n                        />\n                        Google\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem\n                        checked={sourceFilter === \"referral\"}\n                        onCheckedChange={() => setSourceFilter(\"referral\")}\n                      >\n                        <HugeiconsIcon\n                          icon={UserMultiple02Icon}\n                          className=\"mr-1.5 size-3 text-violet-400\"\n                        />\n                        Referral\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem\n                        checked={sourceFilter === \"website\"}\n                        onCheckedChange={() => setSourceFilter(\"website\")}\n                      >\n                        <HugeiconsIcon\n                          icon={Globe02Icon}\n                          className=\"mr-1.5 size-3 text-cyan-400\"\n                        />\n                        Website\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem\n                        checked={sourceFilter === \"cold-call\"}\n                        onCheckedChange={() => setSourceFilter(\"cold-call\")}\n                      >\n                        <HugeiconsIcon\n                          icon={CallIcon}\n                          className=\"mr-1.5 size-3 text-orange-400\"\n                        />\n                        Cold Call\n                      </DropdownMenuCheckboxItem>\n                    </div>\n                  </div>\n                </DropdownMenuGroup>\n                {hasActiveFilters && (\n                  <>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem onClick={clearFilters}>\n                      Clear all filters\n                    </DropdownMenuItem>\n                  </>\n                )}\n              </DropdownMenuContent>\n            </DropdownMenu>\n\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"h-8 gap-1.5 border-border/50 bg-muted/50\"\n                  >\n                    <HugeiconsIcon\n                      icon={ArrowUpDownIcon}\n                      className=\"size-3.5\"\n                    />\n                    <span>Sort</span>\n                  </Button>\n                }\n              />\n              <DropdownMenuContent align=\"start\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem onClick={() => toggleSort(\"name\")}>\n                    Name{\" \"}\n                    {sortField === \"name\" && (sortOrder === \"asc\" ? \"↑\" : \"↓\")}\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => toggleSort(\"email\")}>\n                    Email{\" \"}\n                    {sortField === \"email\" && (sortOrder === \"asc\" ? \"↑\" : \"↓\")}\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => toggleSort(\"followUp\")}>\n                    Follow-up{\" \"}\n                    {sortField === \"followUp\" &&\n                      (sortOrder === \"asc\" ? \"↑\" : \"↓\")}\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => toggleSort(\"status\")}>\n                    Status{\" \"}\n                    {sortField === \"status\" &&\n                      (sortOrder === \"asc\" ? \"↑\" : \"↓\")}\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => toggleSort(\"score\")}>\n                    Score{\" \"}\n                    {sortField === \"score\" && (sortOrder === \"asc\" ? \"↑\" : \"↓\")}\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"h-8 gap-1.5 border-border/50 bg-muted/50\"\n                >\n                  <HugeiconsIcon icon={Upload01Icon} className=\"size-3.5\" />\n                  <span className=\"hidden sm:inline\">Export/Import</span>\n                </Button>\n              }\n            />\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Export as CSV</DropdownMenuItem>\n                <DropdownMenuItem>Export as Excel</DropdownMenuItem>\n                <DropdownMenuItem>Export as PDF</DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Import from CSV</DropdownMenuItem>\n                <DropdownMenuItem>Import from Excel</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"size-8 border-border/50 bg-muted/50\"\n                >\n                  <HugeiconsIcon icon={PieChartIcon} className=\"size-3.5\" />\n                </Button>\n              }\n            />\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>View analytics</DropdownMenuItem>\n                <DropdownMenuItem>Lead distribution</DropdownMenuItem>\n                <DropdownMenuItem>Conversion rates</DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Generate report</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-2 border-b px-4 py-3 sm:hidden\">\n        <div className=\"relative flex-1\">\n          <HugeiconsIcon\n            icon={Search01Icon}\n            className=\"pointer-events-none absolute top-1/2 left-2.5 z-10 size-3.5 -translate-y-1/2 text-muted-foreground\"\n          />\n          <Input\n            placeholder=\"Search\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"h-8 w-full border-border/50 bg-muted/50 pl-8 text-sm\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-8 gap-1.5 border-border/50 bg-muted/50\"\n              >\n                <HugeiconsIcon\n                  icon={SlidersHorizontalIcon}\n                  className=\"size-3.5\"\n                />\n                {hasActiveFilters && (\n                  <span className=\"size-1.5 rounded-full bg-primary\" />\n                )}\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-48\">\n            <DropdownMenuGroup>\n              <div className=\"px-2 py-1.5\">\n                <p className=\"mb-1.5 text-xs font-medium text-muted-foreground\">\n                  Type\n                </p>\n                <div className=\"space-y-1\">\n                  <DropdownMenuCheckboxItem\n                    checked={typeFilter === \"all\"}\n                    onCheckedChange={() => setTypeFilter(\"all\")}\n                  >\n                    All Types\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={typeFilter === \"cold\"}\n                    onCheckedChange={() => setTypeFilter(\"cold\")}\n                  >\n                    Cold\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={typeFilter === \"warm\"}\n                    onCheckedChange={() => setTypeFilter(\"warm\")}\n                  >\n                    Warm\n                  </DropdownMenuCheckboxItem>\n                </div>\n              </div>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <div className=\"px-2 py-1.5\">\n                <p className=\"mb-1.5 text-xs font-medium text-muted-foreground\">\n                  Status\n                </p>\n                <div className=\"space-y-1\">\n                  <DropdownMenuCheckboxItem\n                    checked={statusFilter === \"all\"}\n                    onCheckedChange={() => setStatusFilter(\"all\")}\n                  >\n                    All Status\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={statusFilter === \"closed\"}\n                    onCheckedChange={() => setStatusFilter(\"closed\")}\n                  >\n                    Closed\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={statusFilter === \"lost\"}\n                    onCheckedChange={() => setStatusFilter(\"lost\")}\n                  >\n                    Lost\n                  </DropdownMenuCheckboxItem>\n                </div>\n              </div>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <div className=\"px-2 py-1.5\">\n                <p className=\"mb-1.5 text-xs font-medium text-muted-foreground\">\n                  Source\n                </p>\n                <div className=\"space-y-1\">\n                  <DropdownMenuCheckboxItem\n                    checked={sourceFilter === \"all\"}\n                    onCheckedChange={() => setSourceFilter(\"all\")}\n                  >\n                    All Sources\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={sourceFilter === \"linkedin\"}\n                    onCheckedChange={() => setSourceFilter(\"linkedin\")}\n                  >\n                    LinkedIn\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={sourceFilter === \"google\"}\n                    onCheckedChange={() => setSourceFilter(\"google\")}\n                  >\n                    Google\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={sourceFilter === \"referral\"}\n                    onCheckedChange={() => setSourceFilter(\"referral\")}\n                  >\n                    Referral\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={sourceFilter === \"website\"}\n                    onCheckedChange={() => setSourceFilter(\"website\")}\n                  >\n                    Website\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={sourceFilter === \"cold-call\"}\n                    onCheckedChange={() => setSourceFilter(\"cold-call\")}\n                  >\n                    Cold Call\n                  </DropdownMenuCheckboxItem>\n                </div>\n              </div>\n            </DropdownMenuGroup>\n            {hasActiveFilters && (\n              <>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem onClick={clearFilters}>\n                  Clear all filters\n                </DropdownMenuItem>\n              </>\n            )}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-8 border-border/50 bg-muted/50\"\n              >\n                <HugeiconsIcon icon={ArrowUpDownIcon} className=\"size-3.5\" />\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem onClick={() => toggleSort(\"name\")}>\n                Name\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => toggleSort(\"email\")}>\n                Email\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => toggleSort(\"followUp\")}>\n                Follow-up\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => toggleSort(\"status\")}>\n                Status\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => toggleSort(\"score\")}>\n                Score\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n\n      <div className=\"overflow-x-auto\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"bg-muted/30 hover:bg-transparent\">\n              <TableHead className=\"w-[160px]\">\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox\n                    checked={\n                      selectedLeads.length === paginatedLeads.length &&\n                      paginatedLeads.length > 0\n                    }\n                    onCheckedChange={toggleSelectAll}\n                    className=\"border-border/50 bg-background/70\"\n                  />\n                  <button\n                    className=\"flex items-center gap-1.5 text-muted-foreground hover:text-foreground\"\n                    onClick={() => toggleSort(\"name\")}\n                  >\n                    <span>Name</span>\n                    {getSortIcon(sortField, sortOrder, \"name\")}\n                  </button>\n                </div>\n              </TableHead>\n              <TableHead className=\"w-[85px]\">\n                <div className=\"flex items-center gap-1.5 text-muted-foreground\">\n                  <HugeiconsIcon icon={UserIcon} className=\"size-3.5\" />\n                  <span>Type</span>\n                </div>\n              </TableHead>\n              <TableHead className=\"w-[180px]\">\n                <button\n                  className=\"flex items-center gap-1.5 text-muted-foreground hover:text-foreground\"\n                  onClick={() => toggleSort(\"email\")}\n                >\n                  <HugeiconsIcon icon={Mail01Icon} className=\"size-3.5\" />\n                  <span>Email</span>\n                  {getSortIcon(sortField, sortOrder, \"email\")}\n                </button>\n              </TableHead>\n              <TableHead className=\"w-[95px]\">\n                <button\n                  className=\"flex items-center gap-1.5 text-muted-foreground hover:text-foreground\"\n                  onClick={() => toggleSort(\"followUp\")}\n                >\n                  <HugeiconsIcon\n                    icon={HandPointingRight01Icon}\n                    className=\"size-3.5\"\n                  />\n                  <span>Follow-up</span>\n                  {getSortIcon(sortField, sortOrder, \"followUp\")}\n                </button>\n              </TableHead>\n              <TableHead className=\"w-[90px]\">\n                <button\n                  className=\"flex items-center gap-1.5 text-muted-foreground hover:text-foreground\"\n                  onClick={() => toggleSort(\"status\")}\n                >\n                  <HugeiconsIcon icon={Activity01Icon} className=\"size-3.5\" />\n                  <span>Status</span>\n                  {getSortIcon(sortField, sortOrder, \"status\")}\n                </button>\n              </TableHead>\n              <TableHead className=\"w-[85px]\">\n                <button\n                  className=\"flex items-center gap-1.5 text-muted-foreground hover:text-foreground\"\n                  onClick={() => toggleSort(\"score\")}\n                >\n                  <HugeiconsIcon icon={FlashIcon} className=\"size-3.5\" />\n                  <span>Score</span>\n                  {getSortIcon(sortField, sortOrder, \"score\")}\n                </button>\n              </TableHead>\n              <TableHead className=\"w-[95px]\">\n                <div className=\"flex items-center gap-1.5 text-muted-foreground\">\n                  <HugeiconsIcon icon={Target01Icon} className=\"size-3.5\" />\n                  <span>Source</span>\n                </div>\n              </TableHead>\n              <TableHead className=\"w-[120px]\">\n                <div className=\"flex items-center gap-1.5 text-muted-foreground\">\n                  <HugeiconsIcon icon={Globe02Icon} className=\"size-3.5\" />\n                  <span>Website</span>\n                </div>\n              </TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {paginatedLeads.map((lead) => (\n              <TableRow key={lead.id} className=\"border-border/50\">\n                <TableCell>\n                  <div className=\"flex items-center gap-2.5\">\n                    <Checkbox\n                      checked={selectedLeads.includes(lead.id)}\n                      onCheckedChange={() => toggleSelectLead(lead.id)}\n                      className=\"border-border/50 bg-background/70\"\n                    />\n                    <Avatar className=\"size-6\">\n                      <AvatarImage src={lead.avatar} />\n                      <AvatarFallback className=\"text-xs\">\n                        {lead.name[0]}\n                      </AvatarFallback>\n                    </Avatar>\n                    <span className=\"text-sm font-medium\">{lead.name}</span>\n                  </div>\n                </TableCell>\n                <TableCell>\n                  <TypeBadge type={lead.type} />\n                </TableCell>\n                <TableCell className=\"max-w-[180px]\">\n                  <span className=\"block truncate text-sm\">{lead.email}</span>\n                </TableCell>\n                <TableCell>\n                  <span className=\"text-sm whitespace-nowrap\">\n                    {lead.followUp}\n                  </span>\n                </TableCell>\n                <TableCell>\n                  <StatusBadge status={lead.status} />\n                </TableCell>\n                <TableCell>\n                  <ScoreBadge score={lead.score} />\n                </TableCell>\n                <TableCell>\n                  <SourceBadge source={lead.source} />\n                </TableCell>\n                <TableCell className=\"max-w-[120px]\">\n                  <span className=\"block truncate text-sm text-muted-foreground\">\n                    {lead.website || \"-\"}\n                  </span>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n\n      <div className=\"flex flex-col items-center justify-between gap-4 border-t px-4 py-3 sm:flex-row\">\n        <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n          <span>\n            Showing {(currentPage - 1) * itemsPerPage + 1} to{\" \"}\n            {Math.min(\n              currentPage * itemsPerPage,\n              filteredAndSortedLeads.length\n            )}{\" \"}\n            of {filteredAndSortedLeads.length} leads\n          </span>\n          <div className=\"hidden h-4 w-px bg-border sm:block\" />\n          <div className=\"flex items-center gap-2\">\n            <span className=\"hidden sm:inline\">Show</span>\n            <Select\n              value={itemsPerPage.toString()}\n              onValueChange={handleItemsPerPageChange}\n            >\n              <SelectTrigger className=\"h-8 w-[70px] bg-muted/50\">\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 className=\"hidden sm:inline\">per page</span>\n          </div>\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={() => handlePageChange(1)}\n            disabled={currentPage === 1}\n          >\n            <HugeiconsIcon icon={ArrowLeftDoubleIcon} className=\"size-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"size-8\"\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={currentPage === 1}\n          >\n            <HugeiconsIcon icon={ArrowLeft01Icon} className=\"size-4\" />\n          </Button>\n\n          <div className=\"mx-2 flex items-center gap-1\">\n            {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {\n              let pageNum: number\n              if (totalPages <= 5) {\n                pageNum = i + 1\n              } else if (currentPage <= 3) {\n                pageNum = i + 1\n              } else if (currentPage >= totalPages - 2) {\n                pageNum = totalPages - 4 + i\n              } else {\n                pageNum = currentPage - 2 + i\n              }\n              return (\n                <Button\n                  key={pageNum}\n                  variant={currentPage === pageNum ? \"default\" : \"outline\"}\n                  size=\"icon\"\n                  className=\"size-8\"\n                  onClick={() => handlePageChange(pageNum)}\n                >\n                  {pageNum}\n                </Button>\n              )\n            })}\n          </div>\n\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"size-8\"\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={currentPage === totalPages}\n          >\n            <HugeiconsIcon icon={ArrowRight01Icon} className=\"size-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"size-8\"\n            onClick={() => handlePageChange(totalPages)}\n            disabled={currentPage === totalPages}\n          >\n            <HugeiconsIcon icon={ArrowRightDoubleIcon} className=\"size-4\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-2/components/dashboard/sidebar.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-2/components/dashboard/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n  Add01Icon,\n  ArrowDown01Icon,\n  ArrowRight01Icon,\n  Building02Icon,\n  Calendar01Icon,\n  DashboardSquare01Icon,\n  File01Icon,\n  FileEmpty01Icon,\n  Folder01Icon,\n  Globe02Icon,\n  HeadphonesIcon,\n  Layers01Icon,\n  Logout01Icon,\n  Mail01Icon,\n  Notification01Icon,\n  Search01Icon,\n  Settings01Icon,\n  SourceCodeIcon,\n  Task01Icon,\n  UnfoldMoreIcon,\n  UserAdd01Icon,\n  UserGroupIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\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  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"../ui/sidebar\"\n\nconst navItems = [\n  { title: \"Search\", icon: Search01Icon, shortcut: \"/\" },\n  { title: \"Client Inbox\", icon: Mail01Icon },\n  { title: \"Listings Board\", icon: DashboardSquare01Icon, isActive: true },\n  { title: \"Tours\", icon: Task01Icon },\n  { title: \"Neighborhoods\", icon: Layers01Icon },\n  { title: \"Open Houses\", icon: Calendar01Icon },\n  { title: \"Contracts\", icon: File01Icon },\n  { title: \"Agent Teams\", icon: UserGroupIcon },\n  { title: \"Brokerage\", icon: Building02Icon },\n]\n\nconst workgroups = [\n  {\n    id: \"all-work\",\n    name: \"Property Segments\",\n    icon: Globe02Icon,\n    children: [\n      {\n        id: \"luxury-homes\",\n        name: \"Luxury Homes\",\n        icon: Folder01Icon,\n        children: [\n          { id: \"waterfront\", name: \"Waterfront\", icon: FileEmpty01Icon },\n          { id: \"penthouse\", name: \"Penthouse\", icon: FileEmpty01Icon },\n        ],\n      },\n      { id: \"suburban\", name: \"Suburban\", icon: Folder01Icon },\n      { id: \"investment\", name: \"Investment\", icon: Folder01Icon },\n    ],\n  },\n  { id: \"market-alerts\", name: \"Market Alerts\", icon: Notification01Icon },\n  { id: \"mls-sync\", name: \"MLS Sync\", icon: SourceCodeIcon },\n  { id: \"buyer-support\", name: \"Buyer Support\", icon: HeadphonesIcon },\n]\n\nexport function DashboardSidebar({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  const [expandedItems, setExpandedItems] = React.useState<string[]>([\n    \"all-work\",\n    \"luxury-homes\",\n  ])\n\n  const toggleItem = (id: string) => {\n    setExpandedItems((prev) =>\n      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]\n    )\n  }\n\n  const renderWorkgroupItem = (\n    item: (typeof workgroups)[0],\n    level: number = 0\n  ) => {\n    const hasChildren = \"children\" in item && item.children\n    const isExpanded = expandedItems.includes(item.id)\n    const Icon = item.icon\n    const paddingLeft = level * 12\n\n    if (hasChildren) {\n      return (\n        <Collapsible\n          key={item.id}\n          open={isExpanded}\n          onOpenChange={() => toggleItem(item.id)}\n        >\n          <SidebarMenuItem>\n            <CollapsibleTrigger\n              nativeButton={false}\n              render={\n                <SidebarMenuButton\n                  className=\"h-7 text-sm\"\n                  style={{ paddingLeft: `${8 + paddingLeft}px` }}\n                >\n                  <HugeiconsIcon icon={Icon} className=\"size-3.5\" />\n                  <span className=\"flex-1\">{item.name}</span>\n                  {isExpanded ? (\n                    <HugeiconsIcon icon={ArrowDown01Icon} className=\"size-3\" />\n                  ) : (\n                    <HugeiconsIcon icon={ArrowRight01Icon} className=\"size-3\" />\n                  )}\n                </SidebarMenuButton>\n              }\n            />\n            <CollapsibleContent>\n              <SidebarMenuSub className=\"mr-0 pr-0\">\n                {item.children?.map((child) => (\n                  <SidebarMenuSubItem key={child.id}>\n                    {renderWorkgroupItem(\n                      child as (typeof workgroups)[0],\n                      level + 1\n                    )}\n                  </SidebarMenuSubItem>\n                ))}\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n      )\n    }\n\n    return (\n      <SidebarMenuItem key={item.id}>\n        <SidebarMenuButton\n          className=\"h-7 text-sm\"\n          style={{ paddingLeft: `${8 + paddingLeft}px` }}\n        >\n          <HugeiconsIcon icon={Icon} className=\"size-3.5\" />\n          <span>{item.name}</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    )\n  }\n\n  return (\n    <Sidebar className=\"lg:border-r-0!\" collapsible=\"icon\" {...props}>\n      <SidebarHeader className=\"px-2.5 py-3\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <button className=\"-m-1 flex w-full shrink-0 items-center gap-2.5 rounded-md p-1 transition-colors hover:bg-sidebar-accent\">\n                <div className=\"flex size-7 shrink-0 items-center justify-center rounded-lg bg-foreground text-background\">\n                  <span className=\"text-sm font-bold\">R</span>\n                </div>\n                <div className=\"flex items-center gap-1 group-data-[collapsible=icon]:hidden\">\n                  <span className=\"text-sm font-medium\">Harbor Realty</span>\n                  <HugeiconsIcon\n                    icon={UnfoldMoreIcon}\n                    className=\"size-3 text-muted-foreground\"\n                  />\n                </div>\n              </button>\n            }\n          />\n          <DropdownMenuContent align=\"start\" className=\"w-56\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={Settings01Icon} className=\"size-4\" />\n                <span>Settings</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={UserAdd01Icon} className=\"size-4\" />\n                <span>Invite agents</span>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem variant=\"destructive\">\n              <HugeiconsIcon icon={Logout01Icon} className=\"size-4\" />\n              <span>Log out</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarHeader>\n\n      <SidebarContent className=\"px-2.5\">\n        <SidebarGroup className=\"p-0\">\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {navItems.map((item) => (\n                <SidebarMenuItem key={item.title}>\n                  <SidebarMenuButton\n                    render={<Link href=\"#\" />}\n                    isActive={item.isActive}\n                    className=\"h-7\"\n                  >\n                    <HugeiconsIcon icon={item.icon} className=\"size-3.5\" />\n                    <span className=\"text-sm\">{item.title}</span>\n                    {item.shortcut && (\n                      <span className=\"ml-auto flex size-5 items-center justify-center rounded bg-muted text-[10px] font-medium text-muted-foreground\">\n                        {item.shortcut}\n                      </span>\n                    )}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarGroup className=\"mt-4 p-0\">\n          <SidebarGroupLabel className=\"flex h-6 items-center justify-between px-0\">\n            <span className=\"text-[10px] font-medium tracking-wider text-muted-foreground\">\n              Workgroups\n            </span>\n            <div className=\"flex items-center gap-1\">\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-5\">\n                <HugeiconsIcon icon={Search01Icon} className=\"size-3\" />\n              </Button>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-5\">\n                <HugeiconsIcon icon={Add01Icon} className=\"size-3\" />\n              </Button>\n            </div>\n          </SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {workgroups.map((item) => renderWorkgroupItem(item))}\n              <SidebarMenuItem>\n                <SidebarMenuButton className=\"h-7 text-sm text-muted-foreground\">\n                  <HugeiconsIcon icon={Add01Icon} className=\"size-3.5\" />\n                  <span>Create Group</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-2/components/dashboard/stats-cards.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-2/components/dashboard/stats-cards.tsx",
+      "content": "\"use client\"\n\nimport {\n  ArrowDownRightIcon,\n  ArrowUpRightIcon,\n  Building02Icon,\n  Comment01Icon,\n  DollarSquareIcon,\n  UserGroupIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { dashboardStats } from \"../../mock-data/dashboard\"\n\nconst stats = [\n  {\n    title: \"Closed Volume\",\n    value: dashboardStats.generatedRevenue.value,\n    change: dashboardStats.generatedRevenue.change,\n    icon: DollarSquareIcon,\n    trend: \"up\" as const,\n  },\n  {\n    title: \"Signed Buyers\",\n    value: dashboardStats.signedClients.value,\n    change: dashboardStats.signedClients.change,\n    icon: UserGroupIcon,\n    trend: \"up\" as const,\n  },\n  {\n    title: \"Active Buyer Leads\",\n    value: dashboardStats.totalLeads.value,\n    change: dashboardStats.totalLeads.change,\n    icon: Comment01Icon,\n    trend: \"up\" as const,\n  },\n  {\n    title: \"Active Agents\",\n    value: dashboardStats.teamMembers.value,\n    extra: { active: dashboardStats.teamMembers.activeCount },\n    icon: Building02Icon,\n  },\n]\n\nexport function StatsCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {stats.map((stat, index) => (\n        <div\n          key={index}\n          className=\"rounded-xl border bg-card p-4 text-card-foreground\"\n        >\n          <div className=\"mb-3 flex items-center justify-between\">\n            <span className=\"text-sm font-medium\">{stat.title}</span>\n            <HugeiconsIcon\n              icon={stat.icon}\n              className=\"size-4 text-muted-foreground\"\n            />\n          </div>\n\n          <div className=\"rounded-lg border bg-muted/50 p-4 dark:bg-neutral-800/50\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-2xl font-medium tracking-tight sm:text-3xl\">\n                {stat.value}\n              </span>\n\n              <div className=\"flex items-center gap-3\">\n                <div className=\"h-9 w-px bg-border\" />\n\n                {stat.change !== undefined && stat.trend ? (\n                  <div\n                    className={cn(\n                      \"flex items-center gap-1.5\",\n                      stat.trend === \"up\" ? \"text-green-400\" : \"text-pink-400\"\n                    )}\n                    style={{\n                      textShadow:\n                        stat.trend === \"up\"\n                          ? \"0 1px 6px rgba(68, 255, 118, 0.25)\"\n                          : \"0 1px 6px rgba(255, 68, 193, 0.25)\",\n                    }}\n                  >\n                    {stat.trend === \"up\" ? (\n                      <HugeiconsIcon\n                        icon={ArrowUpRightIcon}\n                        className=\"size-3.5\"\n                      />\n                    ) : (\n                      <HugeiconsIcon\n                        icon={ArrowDownRightIcon}\n                        className=\"size-3.5\"\n                      />\n                    )}\n                    <span className=\"text-sm font-medium\">{stat.change}%</span>\n                  </div>\n                ) : stat.extra ? (\n                  <div className=\"text-sm font-medium\">\n                    <span className=\"text-foreground\">{stat.extra.active}</span>{\" \"}\n                    <span className=\"text-muted-foreground\">Active</span>\n                  </div>\n                ) : null}\n              </div>\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-2/components/dashboard/top-performers.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-2/components/dashboard/top-performers.tsx",
+      "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport {\n  Award01Icon,\n  MoreHorizontalIcon,\n  StarIcon,\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  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { cn } from \"../../lib/utils\"\nimport { topPerformers } from \"../../mock-data/dashboard\"\n\ntype SortBy = \"score_desc\" | \"score_asc\" | \"name_asc\" | \"name_desc\"\ntype Period = \"week\" | \"month\" | \"quarter\" | \"year\"\n\nconst periodLabels: Record<Period, string> = {\n  week: \"This Week\",\n  month: \"This Month\",\n  quarter: \"This Quarter\",\n  year: \"This Year\",\n}\n\nconst barStyles = [\n  {\n    borderColor: \"border-pink-500\",\n    bgGradient:\n      \"bg-linear-to-r from-pink-500/40 via-pink-500/20 to-transparent\",\n    isDashed: false,\n  },\n  {\n    borderColor: \"border-cyan-400\",\n    bgGradient:\n      \"bg-linear-to-r from-cyan-400/30 via-cyan-400/15 to-transparent\",\n    isDashed: true,\n  },\n  {\n    borderColor: \"border-green-400\",\n    bgGradient:\n      \"bg-linear-to-r from-green-400/30 via-green-400/15 to-transparent\",\n    isDashed: true,\n  },\n  {\n    borderColor: \"border-amber-400\",\n    bgGradient:\n      \"bg-linear-to-r from-amber-400/30 via-amber-400/15 to-transparent\",\n    isDashed: true,\n  },\n  {\n    borderColor: \"border-purple-400\",\n    bgGradient:\n      \"bg-linear-to-r from-purple-400/30 via-purple-400/15 to-transparent\",\n    isDashed: true,\n  },\n  {\n    borderColor: \"border-rose-400\",\n    bgGradient:\n      \"bg-linear-to-r from-rose-400/30 via-rose-400/15 to-transparent\",\n    isDashed: true,\n  },\n]\n\nexport function TopPerformers() {\n  const [sortBy, setSortBy] = useState<SortBy>(\"score_desc\")\n  const [period, setPeriod] = useState<Period>(\"month\")\n\n  const maxScore = useMemo(() => {\n    return Math.max(...topPerformers.map((p) => p.score))\n  }, [])\n\n  const sortedPerformers = useMemo(() => {\n    const performers = [...topPerformers]\n    switch (sortBy) {\n      case \"score_desc\":\n        return performers.sort((a, b) => b.score - a.score)\n      case \"score_asc\":\n        return performers.sort((a, b) => a.score - b.score)\n      case \"name_asc\":\n        return performers.sort((a, b) => a.name.localeCompare(b.name))\n      case \"name_desc\":\n        return performers.sort((a, b) => b.name.localeCompare(a.name))\n      default:\n        return performers\n    }\n  }, [sortBy])\n\n  return (\n    <div className=\"w-full shrink-0 rounded-lg border bg-card text-card-foreground lg:w-[332px]\">\n      <div className=\"flex items-center justify-between border-b border-border/50 p-4\">\n        <h3 className=\"text-sm font-medium sm:text-base\">Top Agents</h3>\n        <div className=\"flex items-center gap-1\">\n          <HugeiconsIcon\n            icon={Award01Icon}\n            className=\"size-4 text-muted-foreground\"\n          />\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <Button variant=\"ghost\" size=\"icon\" className=\"size-7\">\n                  <HugeiconsIcon icon={MoreHorizontalIcon} className=\"size-4\" />\n                </Button>\n              }\n            />\n            <DropdownMenuContent align=\"end\" className=\"w-44\">\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>Time Period</DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    {(Object.keys(periodLabels) as Period[]).map((p) => (\n                      <DropdownMenuItem key={p} onClick={() => setPeriod(p)}>\n                        {periodLabels[p]} {period === p && \"✓\"}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>Sort By</DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem onClick={() => setSortBy(\"score_desc\")}>\n                      Score (High to Low) {sortBy === \"score_desc\" && \"✓\"}\n                    </DropdownMenuItem>\n                    <DropdownMenuItem onClick={() => setSortBy(\"score_asc\")}>\n                      Score (Low to High) {sortBy === \"score_asc\" && \"✓\"}\n                    </DropdownMenuItem>\n                    <DropdownMenuItem onClick={() => setSortBy(\"name_asc\")}>\n                      Name (A to Z) {sortBy === \"name_asc\" && \"✓\"}\n                    </DropdownMenuItem>\n                    <DropdownMenuItem onClick={() => setSortBy(\"name_desc\")}>\n                      Name (Z to A) {sortBy === \"name_desc\" && \"✓\"}\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                onClick={() => {\n                  setSortBy(\"score_desc\")\n                  setPeriod(\"month\")\n                }}\n              >\n                Reset to Default\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n      <div className=\"space-y-4 p-4\">\n        {sortedPerformers.map((performer, index) => {\n          const style = barStyles[index % barStyles.length]\n          const progressWidth = (performer.score / maxScore) * 100\n          const isFirst = index === 0\n\n          return (\n            <div key={performer.id} className=\"flex items-center gap-3\">\n              <Avatar className=\"size-10\">\n                <AvatarImage src={performer.avatar} />\n                <AvatarFallback>\n                  {performer.name\n                    .split(\" \")\n                    .map((n) => n[0])\n                    .join(\"\")}\n                </AvatarFallback>\n              </Avatar>\n              <div className=\"relative flex-1\">\n                <div\n                  className={cn(\n                    \"relative h-[42px] overflow-hidden rounded-lg border\",\n                    style.borderColor,\n                    style.isDashed ? \"border-dashed\" : \"border-solid\"\n                  )}\n                >\n                  <div\n                    className={cn(\n                      \"absolute inset-0 transition-all duration-300\",\n                      style.bgGradient\n                    )}\n                    style={{\n                      width: `${Math.max(progressWidth, 30)}%`,\n                    }}\n                  />\n                  <div className=\"absolute top-1/2 left-2 flex -translate-y-1/2 items-center gap-1.5 rounded-md border border-border bg-card/90 px-2 py-1 shadow-sm dark:bg-neutral-900/90\">\n                    {isFirst ? (\n                      <HugeiconsIcon\n                        icon={StarIcon}\n                        className=\"size-3.5 fill-amber-400 text-amber-400\"\n                      />\n                    ) : (\n                      <HugeiconsIcon\n                        icon={UserIcon}\n                        className=\"size-3.5 text-muted-foreground\"\n                      />\n                    )}\n                    <span\n                      className={cn(\n                        \"text-sm font-medium\",\n                        isFirst ? \"text-foreground\" : \"text-muted-foreground\"\n                      )}\n                    >\n                      {performer.score}\n                    </span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-2/components/theme-provider.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/theme-toggle.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/alert-dialog.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/avatar.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/badge.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/button.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/card.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/chart.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/checkbox.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/collapsible.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/combobox.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/dropdown-menu.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/field.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/components/ui/field.tsx",
+      "content": "\"use client\"\n\nimport { useMemo, type ComponentPropsWithoutRef, type 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/dashboard-2/components/ui/input-group.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/input.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/label.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/select.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/separator.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/sheet.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/sidebar.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/skeleton.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/table.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/textarea.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/components/ui/tooltip.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/hooks/use-mobile.ts",
+      "type": "registry:hook",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/index.tsx",
+      "type": "registry:file",
+      "target": "components/example-apps/dashboard-2/index.tsx",
+      "content": "/**\n * Wrapper export for embedding the dashboard in the docs app\n */\n\"use client\"\n\nimport { DashboardContent } from \"./components/dashboard/content\"\nimport { DashboardHeader } from \"./components/dashboard/header\"\nimport { DashboardSidebar } from \"./components/dashboard/sidebar\"\nimport { SidebarProvider } from \"./components/ui/sidebar\"\n\nexport default function Dashboard2Wrapper() {\n  return (\n    <SidebarProvider className=\"bg-sidebar\">\n      <DashboardSidebar />\n      <div className=\"h-full min-h-0 w-full overflow-hidden lg:px-2 lg:pb-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/dashboard-2/lib/utils.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/dashboard-2/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/dashboard-2/mock-data/dashboard.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/dashboard-2/mock-data/dashboard.ts",
+      "content": "export type LeadType = \"cold\" | \"warm\"\nexport type LeadStatus = \"closed\" | \"lost\"\nexport type LeadSource =\n  | \"linkedin\"\n  | \"google\"\n  | \"referral\"\n  | \"website\"\n  | \"cold-call\"\n\nexport interface Lead {\n  id: string\n  name: string\n  avatar: string\n  type: LeadType\n  email: string\n  followUp: string\n  status: LeadStatus\n  website: string\n  score: number\n  source: LeadSource\n}\n\nexport interface TopPerformer {\n  id: string\n  name: string\n  avatar: string\n  score: number\n  icon: \"star\" | \"user\"\n}\n\nexport const dashboardStats = {\n  generatedRevenue: {\n    value: \"$9.4M\",\n    change: 14,\n  },\n  signedClients: {\n    value: \"38\",\n    change: 10,\n  },\n  totalLeads: {\n    value: \"712\",\n    change: 8,\n  },\n  teamMembers: {\n    value: \"16\",\n    activeCount: 12,\n  },\n}\n\nexport const leadsChartDataWeek = [\n  { date: \"Mon\", line1: 55, line2: 74, line3: 88, line4: 110 },\n  { date: \"Tue\", line1: 62, line2: 80, line3: 96, line4: 124 },\n  { date: \"Wed\", line1: 58, line2: 76, line3: 92, line4: 118 },\n  { date: \"Thu\", line1: 68, line2: 88, line3: 105, line4: 132 },\n  { date: \"Fri\", line1: 72, line2: 94, line3: 116, line4: 141 },\n  { date: \"Sat\", line1: 84, line2: 102, line3: 130, line4: 156 },\n  { date: \"Sun\", line1: 70, line2: 90, line3: 108, line4: 136 },\n]\n\nexport const leadsChartDataMonth = [\n  { date: \"Jan 3\", line1: 180, line2: 220, line3: 260, line4: 320 },\n  { date: \"Jan 7\", line1: 190, line2: 234, line3: 278, line4: 338 },\n  { date: \"Jan 11\", line1: 205, line2: 250, line3: 295, line4: 355 },\n  { date: \"Jan 15\", line1: 218, line2: 266, line3: 315, line4: 374 },\n  { date: \"Jan 19\", line1: 225, line2: 282, line3: 330, line4: 392 },\n  { date: \"Jan 23\", line1: 214, line2: 274, line3: 320, line4: 382 },\n  { date: \"Jan 27\", line1: 236, line2: 298, line3: 346, line4: 410 },\n  { date: \"Jan 31\", line1: 244, line2: 312, line3: 360, line4: 428 },\n  { date: \"Feb 4\", line1: 252, line2: 320, line3: 372, line4: 440 },\n]\n\nexport const leadsChartDataQuarter = [\n  { date: \"Jan\", line1: 210, line2: 275, line3: 320, line4: 385 },\n  { date: \"Feb\", line1: 232, line2: 298, line3: 346, line4: 412 },\n  { date: \"Mar\", line1: 248, line2: 318, line3: 370, line4: 438 },\n  { date: \"Apr\", line1: 262, line2: 336, line3: 392, line4: 464 },\n  { date: \"May\", line1: 276, line2: 352, line3: 412, line4: 488 },\n  { date: \"Jun\", line1: 288, line2: 368, line3: 428, line4: 510 },\n  { date: \"Jul\", line1: 274, line2: 354, line3: 408, line4: 486 },\n  { date: \"Aug\", line1: 296, line2: 382, line3: 438, line4: 522 },\n  { date: \"Sep\", line1: 308, line2: 396, line3: 452, line4: 540 },\n]\n\nexport const topPerformers: TopPerformer[] = [\n  {\n    id: \"1\",\n    name: \"Maya R.\",\n    avatar: \"https://api.dicebear.com/9.x/icons/svg?seed=maya\",\n    score: 118,\n    icon: \"star\",\n  },\n  {\n    id: \"2\",\n    name: \"Jordan F.\",\n    avatar: \"https://api.dicebear.com/9.x/icons/svg?seed=jordan\",\n    score: 96,\n    icon: \"user\",\n  },\n  {\n    id: \"3\",\n    name: \"Evan K.\",\n    avatar: \"https://api.dicebear.com/9.x/icons/svg?seed=evan\",\n    score: 88,\n    icon: \"user\",\n  },\n  {\n    id: \"4\",\n    name: \"Lena P.\",\n    avatar: \"https://api.dicebear.com/9.x/icons/svg?seed=lena\",\n    score: 73,\n    icon: \"user\",\n  },\n  {\n    id: \"5\",\n    name: \"Omar T.\",\n    avatar: \"https://api.dicebear.com/9.x/icons/svg?seed=omar\",\n    score: 67,\n    icon: \"user\",\n  },\n]\n\nexport const leads: Lead[] = [\n  {\n    id: \"1\",\n    name: \"Ava Mitchell\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=ava-mitchell\",\n    type: \"warm\",\n    email: \"ava.mitchell@email.com\",\n    followUp: \"Today\",\n    status: \"closed\",\n    website: \"harborheightshomes.com\",\n    score: 94,\n    source: \"website\",\n  },\n  {\n    id: \"2\",\n    name: \"Noah Bennett\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=noah-bennett\",\n    type: \"cold\",\n    email: \"noah.bennett@email.com\",\n    followUp: \"In 2 days\",\n    status: \"lost\",\n    website: \"-\",\n    score: 41,\n    source: \"google\",\n  },\n  {\n    id: \"3\",\n    name: \"Mia Carter\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=mia-carter\",\n    type: \"warm\",\n    email: \"mia.carter@email.com\",\n    followUp: \"Tomorrow\",\n    status: \"closed\",\n    website: \"oakglenrealty.com\",\n    score: 89,\n    source: \"referral\",\n  },\n  {\n    id: \"4\",\n    name: \"Liam Flores\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=liam-flores\",\n    type: \"cold\",\n    email: \"liam.flores@email.com\",\n    followUp: \"In 3 days\",\n    status: \"lost\",\n    website: \"-\",\n    score: 36,\n    source: \"cold-call\",\n  },\n  {\n    id: \"5\",\n    name: \"Emma King\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=emma-king\",\n    type: \"warm\",\n    email: \"emma.king@email.com\",\n    followUp: \"In 1 week\",\n    status: \"closed\",\n    website: \"baylineproperties.com\",\n    score: 91,\n    source: \"linkedin\",\n  },\n  {\n    id: \"6\",\n    name: \"Ethan Cruz\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=ethan-cruz\",\n    type: \"cold\",\n    email: \"ethan.cruz@email.com\",\n    followUp: \"In 4 days\",\n    status: \"lost\",\n    website: \"maplecrestliving.com\",\n    score: 48,\n    source: \"google\",\n  },\n  {\n    id: \"7\",\n    name: \"Sophia Ward\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=sophia-ward\",\n    type: \"warm\",\n    email: \"sophia.ward@email.com\",\n    followUp: \"In 2 days\",\n    status: \"closed\",\n    website: \"northgatehomes.com\",\n    score: 87,\n    source: \"website\",\n  },\n  {\n    id: \"8\",\n    name: \"James Price\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=james-price\",\n    type: \"cold\",\n    email: \"james.price@email.com\",\n    followUp: \"In 5 days\",\n    status: \"lost\",\n    website: \"-\",\n    score: 39,\n    source: \"cold-call\",\n  },\n  {\n    id: \"9\",\n    name: \"Olivia Reed\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=olivia-reed\",\n    type: \"warm\",\n    email: \"olivia.reed@email.com\",\n    followUp: \"In 1 day\",\n    status: \"closed\",\n    website: \"cedarpointrealty.com\",\n    score: 93,\n    source: \"referral\",\n  },\n  {\n    id: \"10\",\n    name: \"Benjamin Hale\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=benjamin-hale\",\n    type: \"cold\",\n    email: \"benjamin.hale@email.com\",\n    followUp: \"In 1 week\",\n    status: \"lost\",\n    website: \"-\",\n    score: 33,\n    source: \"google\",\n  },\n  {\n    id: \"11\",\n    name: \"Charlotte Kim\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=charlotte-kim\",\n    type: \"warm\",\n    email: \"charlotte.kim@email.com\",\n    followUp: \"In 3 days\",\n    status: \"closed\",\n    website: \"riversideestates.com\",\n    score: 85,\n    source: \"linkedin\",\n  },\n  {\n    id: \"12\",\n    name: \"Lucas Patel\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=lucas-patel\",\n    type: \"cold\",\n    email: \"lucas.patel@email.com\",\n    followUp: \"In 6 days\",\n    status: \"lost\",\n    website: \"greystoneproperties.com\",\n    score: 52,\n    source: \"website\",\n  },\n  {\n    id: \"13\",\n    name: \"Amelia Ross\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=amelia-ross\",\n    type: \"warm\",\n    email: \"amelia.ross@email.com\",\n    followUp: \"Tomorrow\",\n    status: \"closed\",\n    website: \"seaviewresidences.com\",\n    score: 90,\n    source: \"referral\",\n  },\n  {\n    id: \"14\",\n    name: \"Henry Moore\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=henry-moore\",\n    type: \"cold\",\n    email: \"henry.moore@email.com\",\n    followUp: \"In 2 weeks\",\n    status: \"lost\",\n    website: \"-\",\n    score: 29,\n    source: \"cold-call\",\n  },\n  {\n    id: \"15\",\n    name: \"Harper Young\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=harper-young\",\n    type: \"warm\",\n    email: \"harper.young@email.com\",\n    followUp: \"In 2 days\",\n    status: \"closed\",\n    website: \"hillsidehomes.com\",\n    score: 88,\n    source: \"website\",\n  },\n  {\n    id: \"16\",\n    name: \"Alexander Scott\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=alexander-scott\",\n    type: \"cold\",\n    email: \"alexander.scott@email.com\",\n    followUp: \"In 4 days\",\n    status: \"lost\",\n    website: \"sunridge-realty.com\",\n    score: 47,\n    source: \"google\",\n  },\n  {\n    id: \"17\",\n    name: \"Evelyn Diaz\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=evelyn-diaz\",\n    type: \"warm\",\n    email: \"evelyn.diaz@email.com\",\n    followUp: \"In 1 week\",\n    status: \"closed\",\n    website: \"harborlightliving.com\",\n    score: 82,\n    source: \"linkedin\",\n  },\n  {\n    id: \"18\",\n    name: \"Sebastian Clark\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=sebastian-clark\",\n    type: \"cold\",\n    email: \"sebastian.clark@email.com\",\n    followUp: \"In 5 days\",\n    status: \"lost\",\n    website: \"-\",\n    score: 38,\n    source: \"cold-call\",\n  },\n  {\n    id: \"19\",\n    name: \"Ella Rivera\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=ella-rivera\",\n    type: \"warm\",\n    email: \"ella.rivera@email.com\",\n    followUp: \"Today\",\n    status: \"closed\",\n    website: \"citypointcondos.com\",\n    score: 96,\n    source: \"referral\",\n  },\n  {\n    id: \"20\",\n    name: \"Jack Nguyen\",\n    avatar: \"https://api.dicebear.com/9.x/glass/svg?seed=jack-nguyen\",\n    type: \"cold\",\n    email: \"jack.nguyen@email.com\",\n    followUp: \"In 3 days\",\n    status: \"lost\",\n    website: \"pinegroverealty.com\",\n    score: 43,\n    source: \"google\",\n  },\n]\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-2/store/dashboard-store.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/dashboard-2/store/dashboard-store.ts",
+      "content": "import { create } from \"zustand\"\n\nimport { LeadSource, LeadStatus, LeadType } from \"../mock-data/dashboard\"\n\ninterface DashboardStore {\n  searchQuery: string\n  typeFilter: LeadType | \"all\"\n  statusFilter: LeadStatus | \"all\"\n  sourceFilter: LeadSource | \"all\"\n  sortBy: \"name\" | \"email\" | \"followUp\" | \"status\" | \"score\"\n  sortOrder: \"asc\" | \"desc\"\n  chartPeriod: \"last_week\" | \"last_month\" | \"last_quarter\"\n  currentPage: number\n  itemsPerPage: number\n  setSearchQuery: (query: string) => void\n  setTypeFilter: (filter: LeadType | \"all\") => void\n  setStatusFilter: (filter: LeadStatus | \"all\") => void\n  setSourceFilter: (filter: LeadSource | \"all\") => void\n  setSortBy: (sort: \"name\" | \"email\" | \"followUp\" | \"status\" | \"score\") => void\n  setSortOrder: (order: \"asc\" | \"desc\") => void\n  setChartPeriod: (period: \"last_week\" | \"last_month\" | \"last_quarter\") => void\n  setCurrentPage: (page: number) => void\n  setItemsPerPage: (items: number) => void\n  clearFilters: () => void\n}\n\nexport const useDashboardStore = create<DashboardStore>((set) => ({\n  searchQuery: \"\",\n  typeFilter: \"all\",\n  statusFilter: \"all\",\n  sourceFilter: \"all\",\n  sortBy: \"name\",\n  sortOrder: \"asc\",\n  chartPeriod: \"last_month\",\n  currentPage: 1,\n  itemsPerPage: 10,\n  setSearchQuery: (query) => set({ searchQuery: query }),\n  setTypeFilter: (filter) => set({ typeFilter: filter, currentPage: 1 }),\n  setStatusFilter: (filter) => set({ statusFilter: filter, currentPage: 1 }),\n  setSourceFilter: (filter) => set({ sourceFilter: filter, currentPage: 1 }),\n  setSortBy: (sort) => set({ sortBy: sort }),\n  setSortOrder: (order) => set({ sortOrder: order }),\n  setChartPeriod: (period) => set({ chartPeriod: period }),\n  setCurrentPage: (page) => set({ currentPage: page }),\n  setItemsPerPage: (items) => set({ itemsPerPage: items, currentPage: 1 }),\n  clearFilters: () =>\n    set({\n      searchQuery: \"\",\n      typeFilter: \"all\",\n      statusFilter: \"all\",\n      sourceFilter: \"all\",\n      sortBy: \"name\",\n      sortOrder: \"asc\",\n      currentPage: 1,\n    }),\n}))\n"
+    }
+  ],
+  "categories": [
+    "example-app",
+    "dashboards",
+    "business",
+    "analytics",
+    "metrics"
+  ],
+  "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/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": "dashboard-2",
+    "routes": [
+      {
+        "path": "/",
+        "title": "Dashboard",
+        "description": "Business dashboard overview"
+      }
+    ]
+  }
+}