love-ui 1.2.12 → 1.2.14

package/public/r/dashboard-1.json

@@ -0,0 +1,263 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dashboard-1",
+  "type": "registry:block",
+  "title": "Analytics Dashboard",
+  "description": "A comprehensive analytics dashboard with financial charts, employee management, and customizable stats cards",
+  "files": [
+    {
+      "path": "registry/example-apps/default/dashboard-1/components/dashboard/alert-banner.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-1/components/dashboard/alert-banner.tsx",
+      "content": "\"use client\"\n\nimport { ArrowDown01Icon, FileExportIcon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\n\nexport function AlertBanner() {\n  return (\n    <div className=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\">\n      <div className=\"flex items-start gap-4 sm:items-center\">\n        <span className=\"text-4xl\">🗒️</span>\n        <p className=\"text-sm leading-relaxed sm:text-base\">\n          <span className=\"text-muted-foreground\">You have </span>\n          <span className=\"font-semibold\">9 ICU Coverage Gaps,</span>\n          <span> and </span>\n          <span className=\"font-semibold\">4 Critical Lab Escalations</span>\n          <span className=\"text-muted-foreground\"> that need action!</span>\n        </p>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <Button variant=\"outline\" size=\"sm\" className=\"gap-2\">\n          <HugeiconsIcon icon={FileExportIcon} className=\"size-4\" />\n          Export\n        </Button>\n        <Button\n          size=\"sm\"\n          className=\"gap-2 bg-foreground text-background hover:bg-foreground/90\"\n        >\n          New\n          <span className=\"h-4 w-px bg-background/20\" />\n          <HugeiconsIcon icon={ArrowDown01Icon} className=\"size-4\" />\n        </Button>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-1/components/dashboard/content.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-1/components/dashboard/content.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useDashboardStore } from \"../../store/dashboard-store\"\nimport { AlertBanner } from \"./alert-banner\"\nimport { EmployeesTable } from \"./employees-table\"\nimport { FinancialFlowChart } from \"./financial-flow-chart\"\nimport { StatsCards } from \"./stats-cards\"\n\nexport function DashboardContent() {\n  const showAlertBanner = useDashboardStore((state) => state.showAlertBanner)\n  const showStatsCards = useDashboardStore((state) => state.showStatsCards)\n  const showChart = useDashboardStore((state) => state.showChart)\n  const showTable = useDashboardStore((state) => state.showTable)\n  const layoutDensity = useDashboardStore((state) => state.layoutDensity)\n\n  return (\n    <main\n      className={cn(\n        \"w-full flex-1 overflow-auto\",\n        layoutDensity === \"compact\" && \"space-y-4 p-2 sm:p-4\",\n        layoutDensity === \"default\" && \"space-y-6 p-4 sm:space-y-8 sm:p-6\",\n        layoutDensity === \"comfortable\" && \"space-y-8 p-6 sm:space-y-10 sm:p-8\"\n      )}\n    >\n      {showAlertBanner && <AlertBanner />}\n      {showStatsCards && <StatsCards />}\n      {showChart && <FinancialFlowChart />}\n      {showTable && <EmployeesTable />}\n    </main>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-1/components/dashboard/employees-table.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-1/components/dashboard/employees-table.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowLeft01Icon,\n  ArrowRight01Icon,\n  FileImportIcon,\n  FilterIcon,\n  Search01Icon,\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 { 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  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@loveui/ui/ui/table\"\n\nimport { cn } from \"../../lib/utils\"\nimport { employees, type Employee } from \"../../mock-data/employees\"\nimport { useDashboardStore } from \"../../store/dashboard-store\"\n\nconst PAGE_SIZE_OPTIONS = [8, 15, 25, 50]\n\nconst statusColors: Record<\n  Employee[\"status\"],\n  { bg: string; text: string; border: string }\n> = {\n  Active: {\n    bg: \"bg-emerald-50 dark:bg-emerald-950/30\",\n    text: \"text-emerald-600 dark:text-emerald-400\",\n    border: \"border-emerald-200 dark:border-emerald-800\",\n  },\n  \"On Leave\": {\n    bg: \"bg-amber-50 dark:bg-amber-950/30\",\n    text: \"text-amber-600 dark:text-amber-400\",\n    border: \"border-amber-200 dark:border-amber-800\",\n  },\n  Probation: {\n    bg: \"bg-blue-50 dark:bg-blue-950/30\",\n    text: \"text-blue-600 dark:text-blue-400\",\n    border: \"border-blue-200 dark:border-blue-800\",\n  },\n  Inactive: {\n    bg: \"bg-red-50 dark:bg-red-950/30\",\n    text: \"text-red-600 dark:text-red-400\",\n    border: \"border-red-200 dark:border-red-800\",\n  },\n}\n\nexport function EmployeesTable() {\n  const searchQuery = useDashboardStore((state) => state.searchQuery)\n  const departmentFilter = useDashboardStore((state) => state.departmentFilter)\n  const statusFilter = useDashboardStore((state) => state.statusFilter)\n  const setSearchQuery = useDashboardStore((state) => state.setSearchQuery)\n  const setDepartmentFilter = useDashboardStore(\n    (state) => state.setDepartmentFilter\n  )\n  const setStatusFilter = useDashboardStore((state) => state.setStatusFilter)\n  const clearFilters = useDashboardStore((state) => state.clearFilters)\n\n  const [currentPage, setCurrentPage] = React.useState(1)\n  const [pageSize, setPageSize] = React.useState(8)\n  const [selectedRows, setSelectedRows] = React.useState<Set<string>>(new Set())\n\n  const hasActiveFilters = departmentFilter !== \"all\" || statusFilter !== \"all\"\n\n  const filteredEmployees = React.useMemo(() => {\n    return employees.filter((emp) => {\n      const matchesSearch =\n        emp.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        emp.email.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        emp.userId.toLowerCase().includes(searchQuery.toLowerCase())\n\n      const matchesDepartment =\n        departmentFilter === \"all\" || emp.department === departmentFilter\n\n      const matchesStatus =\n        statusFilter === \"all\" || emp.status === statusFilter\n\n      return matchesSearch && matchesDepartment && matchesStatus\n    })\n  }, [searchQuery, departmentFilter, statusFilter])\n\n  const totalPages = Math.ceil(filteredEmployees.length / pageSize)\n\n  const paginatedEmployees = React.useMemo(() => {\n    const startIndex = (currentPage - 1) * pageSize\n    return filteredEmployees.slice(startIndex, startIndex + pageSize)\n  }, [filteredEmployees, currentPage, pageSize])\n\n  React.useEffect(() => {\n    setCurrentPage(1)\n  }, [searchQuery, departmentFilter, statusFilter, pageSize])\n\n  const toggleSelectAll = () => {\n    if (selectedRows.size === paginatedEmployees.length) {\n      setSelectedRows(new Set())\n    } else {\n      setSelectedRows(new Set(paginatedEmployees.map((e) => e.id)))\n    }\n  }\n\n  const toggleSelectRow = (id: string) => {\n    const newSet = new Set(selectedRows)\n    if (newSet.has(id)) {\n      newSet.delete(id)\n    } else {\n      newSet.add(id)\n    }\n    setSelectedRows(newSet)\n  }\n\n  return (\n    <div className=\"overflow-hidden rounded-xl border bg-card\">\n      <div className=\"flex flex-col justify-between gap-3 border-b px-5 py-4 sm:flex-row sm:items-center\">\n        <div className=\"flex items-center gap-2\">\n          <HugeiconsIcon\n            icon={UserGroupIcon}\n            className=\"size-5 text-muted-foreground\"\n          />\n          <span className=\"font-medium text-muted-foreground\">\n            Employee list\n          </span>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <div className=\"relative flex-1 sm:flex-none\">\n            <HugeiconsIcon\n              icon={Search01Icon}\n              className=\"pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-muted-foreground\"\n            />\n            <Input\n              placeholder=\"Search Anything...\"\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              className=\"h-9 w-full pl-9 sm:w-[220px]\"\n            />\n          </div>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              className={cn(\n                \"inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium\",\n                \"border-border bg-muted shadow-xs hover:bg-background\"\n              )}\n            >\n              <HugeiconsIcon icon={FilterIcon} className=\"size-4\" />\n              Filter\n              {hasActiveFilters && (\n                <span className=\"size-1.5 rounded-full bg-primary\" />\n              )}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n              <DropdownMenuGroup>\n                <p className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n                  Department\n                </p>\n                {[\n                  \"all\",\n                  \"Nursing\",\n                  \"Clinical\",\n                  \"Operations\",\n                  \"Admin\",\n                  \"Support\",\n                ].map((dept) => (\n                  <DropdownMenuCheckboxItem\n                    key={dept}\n                    checked={departmentFilter === dept}\n                    onCheckedChange={() => setDepartmentFilter(dept)}\n                  >\n                    {dept === \"all\" ? \"All Departments\" : dept}\n                  </DropdownMenuCheckboxItem>\n                ))}\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <p className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n                  Status\n                </p>\n                {[\"all\", \"Active\", \"On Leave\", \"Probation\", \"Inactive\"].map(\n                  (status) => (\n                    <DropdownMenuCheckboxItem\n                      key={status}\n                      checked={statusFilter === status}\n                      onCheckedChange={() => setStatusFilter(status)}\n                    >\n                      {status === \"all\" ? \"All Statuses\" : status}\n                    </DropdownMenuCheckboxItem>\n                  )\n                )}\n              </DropdownMenuGroup>\n              {hasActiveFilters && (\n                <>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem\n                    onClick={clearFilters}\n                    className=\"text-destructive\"\n                  >\n                    Clear all filters\n                  </DropdownMenuItem>\n                </>\n              )}\n            </DropdownMenuContent>\n          </DropdownMenu>\n\n          <div className=\"hidden h-6 w-px bg-border sm:block\" />\n\n          <Button variant=\"outline\" className=\"gap-2\">\n            <HugeiconsIcon icon={FileImportIcon} className=\"size-4\" />\n            Import\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"overflow-x-auto\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"bg-muted/50 hover:bg-muted/50\">\n              <TableHead className=\"w-[50px]\">\n                <Checkbox\n                  checked={\n                    selectedRows.size === paginatedEmployees.length &&\n                    paginatedEmployees.length > 0\n                  }\n                  onCheckedChange={toggleSelectAll}\n                />\n              </TableHead>\n              <TableHead className=\"min-w-[100px] font-medium text-muted-foreground\">\n                User ID\n              </TableHead>\n              <TableHead className=\"min-w-[150px] font-medium text-muted-foreground\">\n                Name\n              </TableHead>\n              <TableHead className=\"hidden min-w-[200px] font-medium text-muted-foreground md:table-cell\">\n                Email Address\n              </TableHead>\n              <TableHead className=\"hidden min-w-[100px] font-medium text-muted-foreground lg:table-cell\">\n                Department\n              </TableHead>\n              <TableHead className=\"hidden min-w-[140px] font-medium text-muted-foreground lg:table-cell\">\n                Job Title\n              </TableHead>\n              <TableHead className=\"hidden min-w-[120px] font-medium text-muted-foreground sm:table-cell\">\n                Joined Date\n              </TableHead>\n              <TableHead className=\"min-w-[100px] font-medium text-muted-foreground\">\n                Status\n              </TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {paginatedEmployees.length === 0 ? (\n              <TableRow>\n                <TableCell\n                  colSpan={8}\n                  className=\"h-24 text-center text-muted-foreground\"\n                >\n                  No employees found matching your filters.\n                </TableCell>\n              </TableRow>\n            ) : (\n              paginatedEmployees.map((employee) => (\n                <TableRow key={employee.id}>\n                  <TableCell>\n                    <Checkbox\n                      checked={selectedRows.has(employee.id)}\n                      onCheckedChange={() => toggleSelectRow(employee.id)}\n                    />\n                  </TableCell>\n                  <TableCell className=\"font-medium text-muted-foreground\">\n                    {employee.userId}\n                  </TableCell>\n                  <TableCell>\n                    <div className=\"flex items-center gap-2.5\">\n                      <Avatar className=\"size-6\">\n                        {employee.avatar ? (\n                          <AvatarImage src={employee.avatar} />\n                        ) : null}\n                        <AvatarFallback className=\"text-[10px] font-semibold\">\n                          {employee.name\n                            .split(\" \")\n                            .map((n) => n[0])\n                            .join(\"\")}\n                        </AvatarFallback>\n                      </Avatar>\n                      <span className=\"font-medium\">{employee.name}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell className=\"hidden text-muted-foreground md:table-cell\">\n                    {employee.email}\n                  </TableCell>\n                  <TableCell className=\"hidden lg:table-cell\">\n                    <span className=\"rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">\n                      {employee.department}\n                    </span>\n                  </TableCell>\n                  <TableCell className=\"hidden lg:table-cell\">\n                    <span className=\"rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground\">\n                      {employee.jobTitle}\n                    </span>\n                  </TableCell>\n                  <TableCell className=\"hidden text-muted-foreground sm:table-cell\">\n                    {employee.joinedDate}\n                  </TableCell>\n                  <TableCell>\n                    <span\n                      className={cn(\n                        \"inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium\",\n                        statusColors[employee.status].bg,\n                        statusColors[employee.status].text,\n                        statusColors[employee.status].border\n                      )}\n                    >\n                      {employee.status}\n                    </span>\n                  </TableCell>\n                </TableRow>\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      <div className=\"flex flex-col items-center justify-between gap-4 border-t px-5 py-4 sm:flex-row\">\n        <div className=\"flex items-center gap-6\">\n          <Button\n            variant=\"outline\"\n            size=\"icon-sm\"\n            onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}\n            disabled={currentPage === 1}\n          >\n            <HugeiconsIcon icon={ArrowLeft01Icon} className=\"size-4\" />\n          </Button>\n\n          <div className=\"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\n              if (i === 3 && totalPages > 5 && currentPage < totalPages - 2) {\n                return (\n                  <span key=\"ellipsis\" className=\"px-3 py-1 text-sm\">\n                    ...\n                  </span>\n                )\n              }\n\n              if (i === 4 && totalPages > 5) {\n                pageNum = totalPages\n              }\n\n              return (\n                <Button\n                  key={pageNum}\n                  variant={currentPage === pageNum ? \"secondary\" : \"ghost\"}\n                  size=\"icon-sm\"\n                  onClick={() => setCurrentPage(pageNum)}\n                  className={cn(currentPage === pageNum && \"bg-muted\")}\n                >\n                  {pageNum}\n                </Button>\n              )\n            })}\n          </div>\n\n          <Button\n            variant=\"outline\"\n            size=\"icon-sm\"\n            onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}\n            disabled={currentPage === totalPages}\n          >\n            <HugeiconsIcon icon={ArrowRight01Icon} className=\"size-4\" />\n          </Button>\n        </div>\n\n        <div className=\"flex items-center gap-4\">\n          <span className=\"text-xs text-muted-foreground\">\n            Showing {(currentPage - 1) * pageSize + 1} to{\" \"}\n            {Math.min(currentPage * pageSize, filteredEmployees.length)} of{\" \"}\n            {filteredEmployees.length} entries\n          </span>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"inline-flex h-8 items-center justify-center gap-2 rounded-md border border-border bg-background px-2.5 text-sm font-medium shadow-xs hover:bg-muted\">\n              Show {pageSize}\n              <HugeiconsIcon\n                icon={ArrowRight01Icon}\n                className=\"size-3 rotate-90\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              {PAGE_SIZE_OPTIONS.map((size) => (\n                <DropdownMenuItem\n                  key={size}\n                  onClick={() => setPageSize(size)}\n                  className={cn(pageSize === size && \"bg-muted\")}\n                >\n                  Show {size}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-1/components/dashboard/financial-flow-chart.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-1/components/dashboard/financial-flow-chart.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  Calendar01Icon,\n  ChartAverageIcon,\n  ChartBarLineIcon,\n  ChartLineData01Icon,\n  GridIcon,\n  Invoice01Icon,\n  MoreHorizontalIcon,\n  RefreshIcon,\n  Tick01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { useTheme } from \"next-themes\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipProps,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\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\nconst fullYearData = [\n  {\n    month: \"Jan\",\n    moneyIn: 198000,\n    moneyOut: 142000,\n    moneyInChange: 6.4,\n    moneyOutChange: -2.1,\n  },\n  {\n    month: \"Feb\",\n    moneyIn: 205000,\n    moneyOut: 151000,\n    moneyInChange: 3.5,\n    moneyOutChange: 6.3,\n  },\n  {\n    month: \"Mar\",\n    moneyIn: 226000,\n    moneyOut: 158000,\n    moneyInChange: 10.2,\n    moneyOutChange: 4.6,\n  },\n  {\n    month: \"Apr\",\n    moneyIn: 232000,\n    moneyOut: 163000,\n    moneyInChange: 2.7,\n    moneyOutChange: 3.1,\n  },\n  {\n    month: \"May\",\n    moneyIn: 241000,\n    moneyOut: 169000,\n    moneyInChange: 3.9,\n    moneyOutChange: 3.6,\n  },\n  {\n    month: \"Jun\",\n    moneyIn: 248000,\n    moneyOut: 172000,\n    moneyInChange: 2.9,\n    moneyOutChange: 1.8,\n  },\n  {\n    month: \"Jul\",\n    moneyIn: 256000,\n    moneyOut: 178000,\n    moneyInChange: 3.2,\n    moneyOutChange: 3.4,\n  },\n  {\n    month: \"Aug\",\n    moneyIn: 264000,\n    moneyOut: 181000,\n    moneyInChange: 3.1,\n    moneyOutChange: 1.7,\n  },\n  {\n    month: \"Sep\",\n    moneyIn: 258000,\n    moneyOut: 176000,\n    moneyInChange: -2.2,\n    moneyOutChange: -2.8,\n  },\n  {\n    month: \"Oct\",\n    moneyIn: 271000,\n    moneyOut: 184000,\n    moneyInChange: 5.0,\n    moneyOutChange: 4.5,\n  },\n  {\n    month: \"Nov\",\n    moneyIn: 279000,\n    moneyOut: 191000,\n    moneyInChange: 3.0,\n    moneyOutChange: 3.8,\n  },\n  {\n    month: \"Dec\",\n    moneyIn: 292000,\n    moneyOut: 198000,\n    moneyInChange: 4.7,\n    moneyOutChange: 3.7,\n  },\n]\n\ntype ChartType = \"bar\" | \"line\" | \"area\"\ntype TimePeriod = \"3months\" | \"6months\" | \"year\" | \"q1\" | \"q2\" | \"q3\" | \"q4\"\n\nconst periodLabels: Record<TimePeriod, string> = {\n  \"3months\": \"Last 3 Months\",\n  \"6months\": \"Last 6 Months\",\n  year: \"Full Year\",\n  q1: \"Q1 (Jan-Mar)\",\n  q2: \"Q2 (Apr-Jun)\",\n  q3: \"Q3 (Jul-Sep)\",\n  q4: \"Q4 (Oct-Dec)\",\n}\n\nfunction getDataForPeriod(period: TimePeriod) {\n  switch (period) {\n    case \"3months\":\n      return fullYearData.slice(-3)\n    case \"6months\":\n      return fullYearData.slice(-6)\n    case \"q1\":\n      return fullYearData.slice(0, 3)\n    case \"q2\":\n      return fullYearData.slice(3, 6)\n    case \"q3\":\n      return fullYearData.slice(6, 9)\n    case \"q4\":\n      return fullYearData.slice(9, 12)\n    default:\n      return fullYearData\n  }\n}\n\nfunction CustomTooltip({\n  active,\n  payload,\n  label,\n}: TooltipProps<number, string>) {\n  if (!active || !payload?.length) return null\n\n  const moneyInData = payload.find((p) => p.dataKey === \"moneyIn\")\n  const moneyOutData = payload.find((p) => p.dataKey === \"moneyOut\")\n  const moneyIn = moneyInData?.value || 0\n  const moneyOut = moneyOutData?.value || 0\n  const moneyInChange =\n    (moneyInData?.payload as { moneyInChange?: number })?.moneyInChange || 0\n  const moneyOutChange =\n    (moneyOutData?.payload as { moneyOutChange?: number })?.moneyOutChange || 0\n\n  return (\n    <div className=\"min-w-[160px] rounded-lg border border-border bg-popover p-3 shadow-lg\">\n      <p className=\"mb-3 text-sm font-medium text-foreground\">{label}, 2025</p>\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"size-2 rounded-full bg-emerald-500\" />\n            <span className=\"text-sm font-semibold text-foreground\">\n              ${(Number(moneyIn) / 1000).toFixed(0)}k\n            </span>\n          </div>\n          <span\n            className={`text-xs font-medium ${moneyInChange >= 0 ? \"text-red-500\" : \"text-emerald-500\"}`}\n          >\n            {moneyInChange >= 0 ? \"↘\" : \"↗\"}{\" \"}\n            {Math.abs(moneyInChange).toFixed(1)}%\n          </span>\n        </div>\n        <div className=\"flex items-center justify-between gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"size-2 rounded-full bg-[#162664] dark:bg-indigo-500\" />\n            <span className=\"text-sm font-semibold text-foreground\">\n              ${(Number(moneyOut) / 1000).toFixed(0)}k\n            </span>\n          </div>\n          <span\n            className={`text-xs font-medium ${moneyOutChange >= 0 ? \"text-emerald-500\" : \"text-red-500\"}`}\n          >\n            {moneyOutChange >= 0 ? \"↗\" : \"↘\"}{\" \"}\n            {Math.abs(moneyOutChange).toFixed(1)}%\n          </span>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport function FinancialFlowChart() {\n  const { theme } = useTheme()\n  const [chartType, setChartType] = useState<ChartType>(\"line\")\n  const [period, setPeriod] = useState<TimePeriod>(\"year\")\n  const [showGrid, setShowGrid] = useState(true)\n  const [showMoneyIn, setShowMoneyIn] = useState(true)\n  const [showMoneyOut, setShowMoneyOut] = useState(true)\n  const [smoothCurve, setSmoothCurve] = useState(false)\n\n  const isDark = theme === \"dark\"\n  const axisColor = isDark ? \"#71717a\" : \"#a1a1aa\"\n  const gridColor = isDark ? \"#27272a\" : \"#e5e7eb\"\n  const moneyOutColor = isDark ? \"#6366f1\" : \"#162664\"\n\n  const chartData = getDataForPeriod(period)\n\n  const resetToDefault = () => {\n    setChartType(\"line\")\n    setPeriod(\"year\")\n    setShowGrid(true)\n    setShowMoneyIn(true)\n    setShowMoneyOut(true)\n    setSmoothCurve(false)\n  }\n\n  return (\n    <div className=\"overflow-hidden rounded-xl border bg-card\">\n      <div className=\"flex flex-col justify-between gap-4 px-5 py-4 sm:flex-row sm:items-center\">\n        <div className=\"flex items-center gap-2\">\n          <HugeiconsIcon\n            icon={Invoice01Icon}\n            className=\"size-5 text-muted-foreground\"\n          />\n          <span className=\"font-medium text-muted-foreground\">\n            Staffing Budget Flow\n          </span>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-4 sm:gap-6\">\n          <div className=\"hidden items-center gap-4 sm:flex\">\n            <div className=\"flex items-center gap-1.5\">\n              <div className=\"size-3 rounded-full bg-emerald-500\" />\n              <span className=\"text-xs font-medium text-muted-foreground\">\n                Budget Allocated\n              </span>\n            </div>\n            <div className=\"flex items-center gap-1.5\">\n              <div className=\"size-3 rounded-full bg-[#162664] dark:bg-indigo-500\" />\n              <span className=\"text-xs font-medium text-muted-foreground\">\n                Budget Used\n              </span>\n            </div>\n          </div>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"inline-flex size-8 items-center justify-center rounded-md hover:bg-muted\">\n              <HugeiconsIcon icon={MoreHorizontalIcon} className=\"size-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              <DropdownMenuGroup>\n                <p className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n                  Chart Type\n                </p>\n                <DropdownMenuItem onClick={() => setChartType(\"bar\")}>\n                  <HugeiconsIcon\n                    icon={ChartBarLineIcon}\n                    className=\"mr-2 size-4\"\n                  />\n                  Bar Chart\n                  {chartType === \"bar\" && (\n                    <HugeiconsIcon\n                      icon={Tick01Icon}\n                      className=\"ml-auto size-4\"\n                    />\n                  )}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setChartType(\"line\")}>\n                  <HugeiconsIcon\n                    icon={ChartLineData01Icon}\n                    className=\"mr-2 size-4\"\n                  />\n                  Line Chart\n                  {chartType === \"line\" && (\n                    <HugeiconsIcon\n                      icon={Tick01Icon}\n                      className=\"ml-auto size-4\"\n                    />\n                  )}\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setChartType(\"area\")}>\n                  <HugeiconsIcon\n                    icon={ChartAverageIcon}\n                    className=\"mr-2 size-4\"\n                  />\n                  Area Chart\n                  {chartType === \"area\" && (\n                    <HugeiconsIcon\n                      icon={Tick01Icon}\n                      className=\"ml-auto size-4\"\n                    />\n                  )}\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n\n              <DropdownMenuSeparator />\n\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <HugeiconsIcon\n                    icon={Calendar01Icon}\n                    className=\"mr-2 size-4\"\n                  />\n                  Time Period\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  {(Object.keys(periodLabels) as TimePeriod[]).map((key) => (\n                    <DropdownMenuItem key={key} onClick={() => setPeriod(key)}>\n                      {periodLabels[key]}\n                      {period === key && (\n                        <HugeiconsIcon\n                          icon={Tick01Icon}\n                          className=\"ml-auto size-4\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n\n              <DropdownMenuSeparator />\n\n              <DropdownMenuGroup>\n                <p className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n                  Display Options\n                </p>\n                <DropdownMenuCheckboxItem\n                  checked={showGrid}\n                  onCheckedChange={setShowGrid}\n                >\n                  <HugeiconsIcon icon={GridIcon} className=\"mr-2 size-4\" />\n                  Show Grid Lines\n                </DropdownMenuCheckboxItem>\n\n                {(chartType === \"line\" || chartType === \"area\") && (\n                  <DropdownMenuCheckboxItem\n                    checked={smoothCurve}\n                    onCheckedChange={setSmoothCurve}\n                  >\n                    <HugeiconsIcon\n                      icon={ChartAverageIcon}\n                      className=\"mr-2 size-4\"\n                    />\n                    Smooth Curve\n                  </DropdownMenuCheckboxItem>\n                )}\n              </DropdownMenuGroup>\n\n              <DropdownMenuSeparator />\n\n              <DropdownMenuGroup>\n                <p className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n                  Data Series\n                </p>\n                <DropdownMenuCheckboxItem\n                  checked={showMoneyIn}\n                  onCheckedChange={setShowMoneyIn}\n                >\n                  <div className=\"mr-2 size-3 rounded-full bg-emerald-500\" />\n                  Show Money In\n                </DropdownMenuCheckboxItem>\n\n                <DropdownMenuCheckboxItem\n                  checked={showMoneyOut}\n                  onCheckedChange={setShowMoneyOut}\n                >\n                  <div className=\"mr-2 size-3 rounded-full bg-[#162664] dark:bg-indigo-500\" />\n                  Show Money Out\n                </DropdownMenuCheckboxItem>\n              </DropdownMenuGroup>\n\n              <DropdownMenuSeparator />\n\n              <DropdownMenuItem onClick={resetToDefault}>\n                <HugeiconsIcon icon={RefreshIcon} className=\"mr-2 size-4\" />\n                Reset to Default\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <div className=\"h-[250px] px-2 pb-4 sm:h-[280px]\">\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          {chartType === \"bar\" ? (\n            <BarChart data={chartData} barGap={4}>\n              <defs>\n                <linearGradient\n                  id=\"moneyInGradient\"\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"0\"\n                  y2=\"1\"\n                >\n                  <stop offset=\"0%\" stopColor=\"#2d9f75\" stopOpacity={1} />\n                  <stop offset=\"100%\" stopColor=\"#2d9f75\" stopOpacity={0.6} />\n                </linearGradient>\n                <linearGradient\n                  id=\"moneyOutGradient\"\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"0\"\n                  y2=\"1\"\n                >\n                  <stop offset=\"0%\" stopColor={moneyOutColor} stopOpacity={1} />\n                  <stop\n                    offset=\"100%\"\n                    stopColor={moneyOutColor}\n                    stopOpacity={0.6}\n                  />\n                </linearGradient>\n              </defs>\n              {showGrid && (\n                <CartesianGrid\n                  strokeDasharray=\"0\"\n                  stroke={gridColor}\n                  vertical={false}\n                />\n              )}\n              <XAxis\n                dataKey=\"month\"\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: axisColor, fontSize: 12 }}\n                dy={10}\n              />\n              <YAxis\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: axisColor, fontSize: 10 }}\n                tickFormatter={(value) => `$${value / 1000}k`}\n                width={50}\n              />\n              <Tooltip\n                content={<CustomTooltip />}\n                cursor={{ fill: \"#f4f4f5\", radius: 4 }}\n              />\n              {showMoneyIn && (\n                <Bar\n                  dataKey=\"moneyIn\"\n                  fill=\"url(#moneyInGradient)\"\n                  radius={[4, 4, 0, 0]}\n                  maxBarSize={22}\n                />\n              )}\n              {showMoneyOut && (\n                <Bar\n                  dataKey=\"moneyOut\"\n                  fill=\"url(#moneyOutGradient)\"\n                  radius={[4, 4, 0, 0]}\n                  maxBarSize={22}\n                />\n              )}\n            </BarChart>\n          ) : chartType === \"line\" ? (\n            <LineChart data={chartData}>\n              {showGrid && (\n                <CartesianGrid\n                  strokeDasharray=\"3 3\"\n                  stroke={gridColor}\n                  vertical={true}\n                />\n              )}\n              <XAxis\n                dataKey=\"month\"\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: axisColor, fontSize: 12 }}\n                dy={10}\n              />\n              <YAxis\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: axisColor, fontSize: 10 }}\n                tickFormatter={(value) => `$${value / 1000}k`}\n                width={50}\n              />\n              <Tooltip\n                content={<CustomTooltip />}\n                cursor={{ stroke: \"#d4d4d8\" }}\n              />\n              {showMoneyIn && (\n                <Line\n                  type={smoothCurve ? \"monotone\" : \"linear\"}\n                  dataKey=\"moneyIn\"\n                  stroke=\"#2d9f75\"\n                  strokeWidth={2}\n                  dot={false}\n                  activeDot={{\n                    r: 6,\n                    fill: \"#2d9f75\",\n                    stroke: \"white\",\n                    strokeWidth: 2,\n                  }}\n                />\n              )}\n              {showMoneyOut && (\n                <Line\n                  type={smoothCurve ? \"monotone\" : \"linear\"}\n                  dataKey=\"moneyOut\"\n                  stroke={moneyOutColor}\n                  strokeWidth={2}\n                  dot={false}\n                  activeDot={{\n                    r: 6,\n                    fill: moneyOutColor,\n                    stroke: \"white\",\n                    strokeWidth: 2,\n                  }}\n                />\n              )}\n            </LineChart>\n          ) : (\n            <AreaChart data={chartData}>\n              <defs>\n                <linearGradient\n                  id=\"moneyInAreaGradient\"\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"0\"\n                  y2=\"1\"\n                >\n                  <stop offset=\"0%\" stopColor=\"#2d9f75\" stopOpacity={0.3} />\n                  <stop offset=\"100%\" stopColor=\"#2d9f75\" stopOpacity={0.05} />\n                </linearGradient>\n                <linearGradient\n                  id=\"moneyOutAreaGradient\"\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"0\"\n                  y2=\"1\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    stopColor={moneyOutColor}\n                    stopOpacity={0.3}\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stopColor={moneyOutColor}\n                    stopOpacity={0.05}\n                  />\n                </linearGradient>\n              </defs>\n              {showGrid && (\n                <CartesianGrid\n                  strokeDasharray=\"0\"\n                  stroke={gridColor}\n                  vertical={false}\n                />\n              )}\n              <XAxis\n                dataKey=\"month\"\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: axisColor, fontSize: 12 }}\n                dy={10}\n              />\n              <YAxis\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: axisColor, fontSize: 10 }}\n                tickFormatter={(value) => `$${value / 1000}k`}\n                width={50}\n              />\n              <Tooltip\n                content={<CustomTooltip />}\n                cursor={{ stroke: \"#d4d4d8\" }}\n              />\n              {showMoneyIn && (\n                <Area\n                  type={smoothCurve ? \"monotone\" : \"linear\"}\n                  dataKey=\"moneyIn\"\n                  stroke=\"#2d9f75\"\n                  strokeWidth={2}\n                  fill=\"url(#moneyInAreaGradient)\"\n                />\n              )}\n              {showMoneyOut && (\n                <Area\n                  type={smoothCurve ? \"monotone\" : \"linear\"}\n                  dataKey=\"moneyOut\"\n                  stroke={moneyOutColor}\n                  strokeWidth={2}\n                  fill=\"url(#moneyOutAreaGradient)\"\n                />\n              )}\n            </AreaChart>\n          )}\n        </ResponsiveContainer>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-1/components/dashboard/header.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-1/components/dashboard/header.tsx",
+      "content": "\"use client\"\n\nimport {\n  DashboardSquare01Icon,\n  RefreshIcon,\n  SidebarLeft01Icon,\n  Tick01Icon,\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  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport {\n  useDashboardStore,\n  type LayoutDensity,\n} from \"../../store/dashboard-store\"\nimport { ThemeToggle } from \"../theme-toggle\"\nimport { SidebarTrigger } from \"../ui/sidebar\"\n\nconst densityLabels: Record<LayoutDensity, string> = {\n  default: \"Default\",\n  compact: \"Compact\",\n  comfortable: \"Comfortable\",\n}\n\nexport function DashboardHeader() {\n  const showAlertBanner = useDashboardStore((state) => state.showAlertBanner)\n  const showStatsCards = useDashboardStore((state) => state.showStatsCards)\n  const showChart = useDashboardStore((state) => state.showChart)\n  const showTable = useDashboardStore((state) => state.showTable)\n  const layoutDensity = useDashboardStore((state) => state.layoutDensity)\n  const setShowAlertBanner = useDashboardStore(\n    (state) => state.setShowAlertBanner\n  )\n  const setShowStatsCards = useDashboardStore(\n    (state) => state.setShowStatsCards\n  )\n  const setShowChart = useDashboardStore((state) => state.setShowChart)\n  const setShowTable = useDashboardStore((state) => state.setShowTable)\n  const setLayoutDensity = useDashboardStore((state) => state.setLayoutDensity)\n  const resetLayout = useDashboardStore((state) => state.resetLayout)\n\n  return (\n    <header className=\"flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6\">\n      <SidebarTrigger className=\"lg:hidden\">\n        <HugeiconsIcon icon={SidebarLeft01Icon} className=\"size-5\" />\n      </SidebarTrigger>\n\n      <HugeiconsIcon icon={DashboardSquare01Icon} className=\"size-6\" />\n      <h1 className=\"flex-1 text-base font-medium\">Care Workforce</h1>\n\n      <span className=\"hidden text-sm text-muted-foreground sm:block\">\n        Last update 5 min ago\n      </span>\n\n      <div className=\"flex items-center -space-x-2\">\n        <Avatar className=\"size-7 ring-2 ring-background\">\n          <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=user1\" />\n          <AvatarFallback>U1</AvatarFallback>\n        </Avatar>\n        <Avatar className=\"size-7 ring-2 ring-background\">\n          <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=user2\" />\n          <AvatarFallback>U2</AvatarFallback>\n        </Avatar>\n        <Avatar className=\"size-7 ring-2 ring-background\">\n          <AvatarImage src=\"https://api.dicebear.com/9.x/glass/svg?seed=user3\" />\n          <AvatarFallback>U3</AvatarFallback>\n        </Avatar>\n      </div>\n\n      <div className=\"hidden h-6 w-px bg-border sm:block\" />\n\n      <ThemeToggle />\n\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"hidden gap-2 sm:flex\"\n            >\n              <HugeiconsIcon icon={SidebarLeft01Icon} className=\"size-4\" />\n              Edit Layout\n            </Button>\n          }\n        />\n        <DropdownMenuContent align=\"end\" className=\"w-56\">\n          <DropdownMenuGroup>\n            <p className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n              Layout Density\n            </p>\n            {(Object.keys(densityLabels) as LayoutDensity[]).map((key) => (\n              <DropdownMenuItem key={key} onClick={() => setLayoutDensity(key)}>\n                {densityLabels[key]}\n                {layoutDensity === key && (\n                  <HugeiconsIcon icon={Tick01Icon} className=\"ml-auto size-4\" />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n\n          <DropdownMenuSeparator />\n\n          <DropdownMenuGroup>\n            <p className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n              Show / Hide Sections\n            </p>\n            <DropdownMenuCheckboxItem\n              checked={showAlertBanner}\n              onCheckedChange={setShowAlertBanner}\n            >\n              Alert Banner\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatsCards}\n              onCheckedChange={setShowStatsCards}\n            >\n              Statistics Cards\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showChart}\n              onCheckedChange={setShowChart}\n            >\n              Financial Flow Chart\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showTable}\n              onCheckedChange={setShowTable}\n            >\n              Employees Table\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n\n          <DropdownMenuSeparator />\n\n          <DropdownMenuItem onClick={resetLayout}>\n            <HugeiconsIcon icon={RefreshIcon} className=\"mr-2 size-4\" />\n            Reset to Default\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </header>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-1/components/dashboard/sidebar.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-1/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  Calendar01Icon,\n  Cancel01Icon,\n  Coins01Icon,\n  Comment01Icon,\n  DashboardSquare01Icon,\n  Folder01Icon,\n  HelpCircleIcon,\n  Invoice01Icon,\n  Logout01Icon,\n  Notification01Icon,\n  Search01Icon,\n  Settings01Icon,\n  Task01Icon,\n  Tick01Icon,\n  UserGroupIcon,\n  UserIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Input } from \"@loveui/ui/ui/input\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { cn } from \"../../lib/utils\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"../ui/sidebar\"\n\nconst menuItems = [\n  { icon: DashboardSquare01Icon, label: \"Dashboard\", active: true },\n  { icon: Notification01Icon, label: \"Clinical Alerts\", badge: \"6\" },\n  { icon: UserGroupIcon, label: \"Care Teams\" },\n  { icon: Calendar01Icon, label: \"Shift Planner\" },\n  { icon: Coins01Icon, label: \"Unit Budgets\" },\n  { icon: Invoice01Icon, label: \"Claims\" },\n  { icon: Task01Icon, label: \"Safety Checks\" },\n]\n\nconst favorites = [\n  { icon: Folder01Icon, label: \"ER Coverage\" },\n  { icon: Folder01Icon, label: \"ICU Staffing\" },\n  { icon: Folder01Icon, label: \"Discharge Ops\" },\n]\n\nconst footerItems = [\n  { icon: Comment01Icon, label: \"Feedback\" },\n  { icon: Settings01Icon, label: \"Settings\" },\n  { icon: HelpCircleIcon, label: \"Help Center\" },\n]\n\nexport function DashboardSidebar({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  const [favoritesOpen, setFavoritesOpen] = React.useState(true)\n  const [showUpgradeModal, setShowUpgradeModal] = React.useState(true)\n\n  return (\n    <Sidebar collapsible=\"offExamples\" className=\"lg:border-r-0!\" {...props}>\n      <SidebarHeader className=\"p-5 pb-0\">\n        <div className=\"flex items-center justify-between\">\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-2 outline-none\">\n              <div className=\"flex size-7 items-center justify-center overflow-hidden rounded-full bg-linear-to-br from-purple-400 via-pink-500 to-red-500 shadow-lg ring-1 ring-white/40\" />\n              <span className=\"font-medium text-muted-foreground\">\n                Riverbend Health\n              </span>\n              <HugeiconsIcon\n                icon={ArrowDown01Icon}\n                className=\"size-3 text-muted-foreground\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-56\">\n              <DropdownMenuGroup>\n                <p className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n                  Workspaces\n                </p>\n                <DropdownMenuItem>\n                  <div className=\"mr-2 size-5 rounded-full bg-linear-to-br from-purple-400 via-pink-500 to-red-500\" />\n                  Main Campus\n                  <HugeiconsIcon icon={Tick01Icon} className=\"ml-auto size-4\" />\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <div className=\"mr-2 size-5 rounded-full bg-linear-to-br from-blue-400 to-cyan-500\" />\n                  East Wing\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <div className=\"mr-2 size-5 rounded-full bg-linear-to-br from-green-400 to-emerald-500\" />\n                  Outpatient Center\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n\n              <DropdownMenuSeparator />\n\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={Add01Icon} className=\"mr-2 size-4\" />\n                Create Workspace\n              </DropdownMenuItem>\n\n              <DropdownMenuSeparator />\n\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <HugeiconsIcon icon={UserIcon} className=\"mr-2 size-4\" />\n                  Account Settings\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <HugeiconsIcon\n                    icon={Settings01Icon}\n                    className=\"mr-2 size-4\"\n                  />\n                  Workspace Settings\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n\n              <DropdownMenuSeparator />\n\n              <DropdownMenuItem className=\"text-destructive\">\n                <HugeiconsIcon icon={Logout01Icon} className=\"mr-2 size-4\" />\n                Log out\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Avatar className=\"size-7\">\n            <AvatarImage src=\"/ln.png\" />\n            <AvatarFallback>AD</AvatarFallback>\n          </Avatar>\n        </div>\n      </SidebarHeader>\n\n      <SidebarContent className=\"px-5 pt-5\">\n        <div className=\"relative mb-4\">\n          <HugeiconsIcon\n            icon={Search01Icon}\n            className=\"pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-muted-foreground\"\n          />\n          <Input\n            placeholder=\"Search Anything...\"\n            className=\"h-9 bg-background pr-10 pl-9\"\n          />\n          <div className=\"absolute top-1/2 right-2 -translate-y-1/2 rounded bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground\">\n            ⌘K\n          </div>\n        </div>\n\n        <SidebarGroup className=\"p-0\">\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {menuItems.map((item) => (\n                <SidebarMenuItem key={item.label}>\n                  <SidebarMenuButton\n                    isActive={item.active}\n                    className=\"h-[38px]\"\n                  >\n                    <HugeiconsIcon icon={item.icon} className=\"size-5\" />\n                    <span className=\"flex-1\">{item.label}</span>\n                    {item.badge && (\n                      <span className=\"rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-semibold text-white\">\n                        {item.badge}\n                      </span>\n                    )}\n                    {item.active && (\n                      <HugeiconsIcon\n                        icon={ArrowRight01Icon}\n                        className=\"size-4 text-muted-foreground opacity-60\"\n                      />\n                    )}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarGroup className=\"p-0\">\n          <SidebarGroupLabel className=\"flex items-center gap-1.5 px-0 text-[10px] font-semibold tracking-wider text-muted-foreground\">\n            <button\n              onClick={() => setFavoritesOpen(!favoritesOpen)}\n              className=\"flex cursor-pointer items-center gap-1.5\"\n            >\n              <HugeiconsIcon\n                icon={ArrowDown01Icon}\n                className={cn(\n                  \"size-3.5 transition-transform\",\n                  !favoritesOpen && \"-rotate-90\"\n                )}\n              />\n              FAVORITES\n            </button>\n          </SidebarGroupLabel>\n          {favoritesOpen && (\n            <SidebarGroupContent>\n              <SidebarMenu className=\"mt-2\">\n                {favorites.map((item) => (\n                  <SidebarMenuItem key={item.label}>\n                    <SidebarMenuButton className=\"h-[38px]\">\n                      <HugeiconsIcon\n                        icon={item.icon}\n                        className=\"size-5 text-foreground\"\n                      />\n                      <span className=\"text-muted-foreground\">\n                        {item.label}\n                      </span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          )}\n        </SidebarGroup>\n\n        {showUpgradeModal && (\n          <div className=\"relative mt-4 rounded-2xl border bg-card p-5 shadow-lg\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              className=\"absolute top-3 right-3 bg-muted\"\n              onClick={() => setShowUpgradeModal(false)}\n            >\n              <HugeiconsIcon icon={Cancel01Icon} className=\"size-3\" />\n            </Button>\n            <p className=\"mb-2 text-sm font-semibold\">\n              🏥 3 high-priority units\n            </p>\n            <div className=\"mb-2 h-1.5 w-full rounded-sm bg-muted\">\n              <div className=\"h-full w-[62%] rounded-sm bg-foreground\" />\n            </div>\n            <p className=\"mb-4 text-sm text-muted-foreground\">\n              Reassign floating nurses to maintain patient-to-staff ratios\n            </p>\n            <Link\n              href=\"#\"\n              className=\"flex items-center gap-1 text-sm font-medium\"\n            >\n              Optimize coverage\n              <HugeiconsIcon icon={ArrowRight01Icon} className=\"size-3.5\" />\n            </Link>\n          </div>\n        )}\n\n        <SidebarGroup className=\"p-0\">\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {footerItems.map((item) => (\n                <SidebarMenuItem key={item.label}>\n                  <SidebarMenuButton className=\"h-[38px]\">\n                    <HugeiconsIcon icon={item.icon} className=\"size-5\" />\n                    <span>{item.label}</span>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-1/components/dashboard/stats-cards.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-1/components/dashboard/stats-cards.tsx",
+      "content": "\"use client\"\n\nimport {\n  Calendar01Icon,\n  File01Icon,\n  InformationCircleIcon,\n  Invoice01Icon,\n  UserGroupIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\n\nconst stats = [\n  {\n    title: \"On-Duty Staff\",\n    value: \"182\",\n    subtitle: \"27 currently on night shift\",\n    icon: UserGroupIcon,\n    subtitleIcon: File01Icon,\n  },\n  {\n    title: \"Shift Budget\",\n    value: \"$412,800\",\n    subtitle: \"Weekly staffing spend\",\n    icon: Invoice01Icon,\n    subtitleIcon: File01Icon,\n  },\n  {\n    title: \"Patient Coverage\",\n    value: \"96.3%\",\n    subtitle: \"Across all care units\",\n    icon: Calendar01Icon,\n    subtitleIcon: InformationCircleIcon,\n  },\n]\n\nexport function StatsCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3\">\n      {stats.map((stat) => (\n        <div\n          key={stat.title}\n          className=\"relative overflow-hidden rounded-xl border bg-card p-5\"\n        >\n          <div className=\"pointer-events-none absolute inset-0 bg-linear-to-br from-black/5 to-transparent\" />\n          <div className=\"relative flex items-start justify-between\">\n            <div className=\"flex flex-col gap-6\">\n              <p className=\"text-sm font-medium text-muted-foreground\">\n                {stat.title}\n              </p>\n              <p className=\"text-2xl font-semibold tracking-tight sm:text-[26px]\">\n                {stat.value}\n              </p>\n              <div className=\"flex items-center gap-1.5 text-muted-foreground\">\n                <HugeiconsIcon icon={stat.subtitleIcon} className=\"size-4\" />\n                <span className=\"text-sm font-medium\">{stat.subtitle}</span>\n              </div>\n            </div>\n            <Button variant=\"outline\" size=\"icon\" className=\"size-10\">\n              <HugeiconsIcon icon={stat.icon} className=\"size-5\" />\n            </Button>\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-1/components/theme-provider.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-1/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-1/components/theme-toggle.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/alert-dialog.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/avatar.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/badge.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/button.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/card.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/chart.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/checkbox.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/collapsible.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/combobox.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/dropdown-menu.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/field.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/input-group.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/input.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/label.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/select.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\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-1/components/ui/separator.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/sheet.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/sidebar.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/skeleton.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/table.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/textarea.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/components/ui/tooltip.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/dashboard-1/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-1/hooks/use-mobile.ts",
+      "type": "registry:hook",
+      "target": "components/example-apps/dashboard-1/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-1/index.tsx",
+      "type": "registry:file",
+      "target": "components/example-apps/dashboard-1/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 Dashboard1Wrapper() {\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-1/lib/utils.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/dashboard-1/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-1/mock-data/employees.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/dashboard-1/mock-data/employees.ts",
+      "content": "export interface Employee {\n  id: string\n  userId: string\n  name: string\n  email: string\n  department: \"Nursing\" | \"Clinical\" | \"Operations\" | \"Admin\" | \"Support\"\n  jobTitle: string\n  joinedDate: string\n  status: \"Active\" | \"On Leave\" | \"Probation\" | \"Inactive\"\n  avatar?: string\n}\n\nconst departments: Employee[\"department\"][] = [\n  \"Nursing\",\n  \"Clinical\",\n  \"Operations\",\n  \"Admin\",\n  \"Support\",\n]\nconst statuses: Employee[\"status\"][] = [\n  \"Active\",\n  \"On Leave\",\n  \"Probation\",\n  \"Inactive\",\n]\n\nconst jobTitles: Record<Employee[\"department\"], string[]> = {\n  Nursing: [\n    \"Charge Nurse\",\n    \"ICU Nurse\",\n    \"ER Nurse\",\n    \"Ward Nurse\",\n    \"Float Nurse\",\n  ],\n  Clinical: [\n    \"Resident Physician\",\n    \"Lab Technician\",\n    \"Pharmacist\",\n    \"Radiology Tech\",\n    \"Respiratory Therapist\",\n  ],\n  Operations: [\n    \"Facility Coordinator\",\n    \"Supply Chain Lead\",\n    \"Shift Scheduler\",\n    \"Transport Supervisor\",\n    \"Safety Officer\",\n  ],\n  Admin: [\n    \"Front Desk Lead\",\n    \"Billing Specialist\",\n    \"Records Coordinator\",\n    \"Admissions Manager\",\n    \"Compliance Admin\",\n  ],\n  Support: [\n    \"IT Support\",\n    \"Patient Services\",\n    \"Social Worker\",\n    \"Interpreter\",\n    \"Nutrition Coordinator\",\n  ],\n}\n\nconst firstNames = [\n  \"Ariana\",\n  \"Brandon\",\n  \"Camila\",\n  \"Diego\",\n  \"Elena\",\n  \"Felix\",\n  \"Gia\",\n  \"Hector\",\n  \"Iris\",\n  \"Jonah\",\n  \"Kara\",\n  \"Leo\",\n  \"Marta\",\n  \"Nico\",\n  \"Opal\",\n  \"Pablo\",\n  \"Quinn\",\n  \"Raina\",\n  \"Soren\",\n  \"Talia\",\n  \"Uma\",\n  \"Vince\",\n  \"Willa\",\n  \"Xavier\",\n  \"Yara\",\n  \"Zane\",\n]\n\nconst lastNames = [\n  \"Abbott\",\n  \"Bennett\",\n  \"Carver\",\n  \"Delgado\",\n  \"Esposito\",\n  \"Fulton\",\n  \"Graves\",\n  \"Hale\",\n  \"Ibrahim\",\n  \"Jensen\",\n  \"Kline\",\n  \"Larsen\",\n  \"Mendoza\",\n  \"Nolan\",\n  \"Ortiz\",\n  \"Patel\",\n  \"Quintero\",\n  \"Russo\",\n  \"Silva\",\n  \"Tran\",\n  \"Usman\",\n  \"Valdez\",\n  \"Webb\",\n  \"Xu\",\n  \"Yates\",\n  \"Zimmer\",\n]\n\nconst dates = [\n  \"07 Jan 2025\",\n  \"16 Jan 2025\",\n  \"30 Jan 2025\",\n  \"11 Feb 2025\",\n  \"24 Feb 2025\",\n  \"06 Mar 2025\",\n  \"18 Mar 2025\",\n  \"27 Mar 2025\",\n  \"08 Apr 2025\",\n  \"22 Apr 2025\",\n  \"07 May 2025\",\n  \"19 May 2025\",\n  \"04 Jun 2025\",\n  \"17 Jun 2025\",\n  \"01 Jul 2025\",\n  \"15 Jul 2025\",\n  \"29 Jul 2025\",\n  \"12 Aug 2025\",\n  \"26 Aug 2025\",\n  \"09 Sep 2025\",\n  \"23 Sep 2025\",\n  \"08 Oct 2025\",\n  \"21 Oct 2025\",\n  \"05 Nov 2025\",\n  \"19 Nov 2025\",\n  \"03 Dec 2025\",\n  \"17 Dec 2025\",\n  \"06 Jan 2026\",\n]\n\nconst statusPattern = [\n  \"Active\",\n  \"Active\",\n  \"Active\",\n  \"On Leave\",\n  \"Active\",\n  \"Probation\",\n  \"Active\",\n  \"Inactive\",\n  \"Active\",\n  \"Active\",\n  \"On Leave\",\n  \"Active\",\n  \"Probation\",\n  \"Active\",\n  \"Active\",\n  \"Active\",\n  \"Inactive\",\n  \"Active\",\n  \"Active\",\n  \"On Leave\",\n  \"Active\",\n  \"Active\",\n  \"Probation\",\n  \"Active\",\n  \"Active\",\n  \"Active\",\n  \"On Leave\",\n  \"Active\",\n  \"Active\",\n  \"Inactive\",\n  \"Active\",\n  \"Active\",\n  \"Active\",\n  \"Probation\",\n  \"Active\",\n  \"On Leave\",\n  \"Active\",\n  \"Active\",\n  \"Active\",\n  \"Active\",\n  \"Inactive\",\n  \"Active\",\n  \"On Leave\",\n  \"Active\",\n  \"Probation\",\n  \"Active\",\n  \"Active\",\n  \"Active\",\n  \"On Leave\",\n  \"Active\",\n] as Employee[\"status\"][]\n\nconst jobTitleIndices = [\n  0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0,\n  1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4,\n]\n\nconst hasAvatar = [\n  true,\n  true,\n  true,\n  false,\n  true,\n  true,\n  true,\n  true,\n  false,\n  true,\n  true,\n  false,\n  true,\n  true,\n  true,\n  true,\n  true,\n  false,\n  true,\n  true,\n  false,\n  true,\n  true,\n  true,\n  true,\n  true,\n  false,\n  true,\n  true,\n  true,\n  true,\n  true,\n  true,\n  false,\n  true,\n  true,\n  true,\n  false,\n  true,\n  true,\n  true,\n  true,\n  false,\n  true,\n  true,\n  true,\n  true,\n  true,\n  false,\n  true,\n]\n\nexport const employees: Employee[] = Array.from({ length: 50 }, (_, i) => {\n  const firstName = firstNames[i % firstNames.length]\n  const lastName = lastNames[i % lastNames.length]\n  const department = departments[i % departments.length]\n  const jobTitle =\n    jobTitles[department][jobTitleIndices[i] % jobTitles[department].length]\n  const status = statusPattern[i]\n\n  return {\n    id: (i + 1).toString(),\n    userId: `MED-${(4201 + i).toString()}`,\n    name: `${firstName} ${lastName}`,\n    email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@riverbend.health`,\n    department,\n    jobTitle,\n    joinedDate: dates[i % dates.length],\n    status,\n    avatar: hasAvatar[i]\n      ? `https://api.dicebear.com/9.x/glass/svg?seed=ops-${firstName}${lastName}`\n      : undefined,\n  }\n})\n\nexport const financialFlowData = [\n  { month: \"Jan\", moneyIn: 198000, moneyOut: 142000 },\n  { month: \"Feb\", moneyIn: 205000, moneyOut: 151000 },\n  { month: \"Mar\", moneyIn: 226000, moneyOut: 158000 },\n  { month: \"Apr\", moneyIn: 232000, moneyOut: 163000 },\n  { month: \"May\", moneyIn: 241000, moneyOut: 169000 },\n  { month: \"Jun\", moneyIn: 248000, moneyOut: 172000 },\n  { month: \"Jul\", moneyIn: 256000, moneyOut: 178000 },\n  { month: \"Aug\", moneyIn: 264000, moneyOut: 181000 },\n  { month: \"Sep\", moneyIn: 258000, moneyOut: 176000 },\n  { month: \"Oct\", moneyIn: 271000, moneyOut: 184000 },\n  { month: \"Nov\", moneyIn: 279000, moneyOut: 191000 },\n  { month: \"Dec\", moneyIn: 292000, moneyOut: 198000 },\n]\n"
+    },
+    {
+      "path": "registry/example-apps/default/dashboard-1/store/dashboard-store.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/dashboard-1/store/dashboard-store.ts",
+      "content": "import { create } from \"zustand\"\n\nexport type LayoutDensity = \"default\" | \"compact\" | \"comfortable\"\n\ninterface DashboardState {\n  searchQuery: string\n  departmentFilter: string\n  statusFilter: string\n  setSearchQuery: (query: string) => void\n  setDepartmentFilter: (filter: string) => void\n  setStatusFilter: (filter: string) => void\n  clearFilters: () => void\n\n  // Layout options\n  showAlertBanner: boolean\n  showStatsCards: boolean\n  showChart: boolean\n  showTable: boolean\n  layoutDensity: LayoutDensity\n  setShowAlertBanner: (show: boolean) => void\n  setShowStatsCards: (show: boolean) => void\n  setShowChart: (show: boolean) => void\n  setShowTable: (show: boolean) => void\n  setLayoutDensity: (density: LayoutDensity) => void\n  resetLayout: () => void\n}\n\nexport const useDashboardStore = create<DashboardState>((set) => ({\n  searchQuery: \"\",\n  departmentFilter: \"all\",\n  statusFilter: \"all\",\n  setSearchQuery: (query) => set({ searchQuery: query }),\n  setDepartmentFilter: (filter) => set({ departmentFilter: filter }),\n  setStatusFilter: (filter) => set({ statusFilter: filter }),\n  clearFilters: () =>\n    set({\n      searchQuery: \"\",\n      departmentFilter: \"all\",\n      statusFilter: \"all\",\n    }),\n\n  // Layout options\n  showAlertBanner: true,\n  showStatsCards: true,\n  showChart: true,\n  showTable: true,\n  layoutDensity: \"default\",\n  setShowAlertBanner: (show) => set({ showAlertBanner: show }),\n  setShowStatsCards: (show) => set({ showStatsCards: show }),\n  setShowChart: (show) => set({ showChart: show }),\n  setShowTable: (show) => set({ showTable: show }),\n  setLayoutDensity: (density) => set({ layoutDensity: density }),\n  resetLayout: () =>\n    set({\n      showAlertBanner: true,\n      showStatsCards: true,\n      showChart: true,\n      showTable: true,\n      layoutDensity: \"default\",\n    }),\n}))\n"
+    }
+  ],
+  "categories": [
+    "example-app",
+    "dashboards",
+    "analytics",
+    "charts",
+    "tables",
+    "data-visualization"
+  ],
+  "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/input.json",
+    "https://www.loveui.dev/r/menu.json",
+    "https://www.loveui.dev/r/table.json"
+  ],
+  "meta": {
+    "source": "example-app",
+    "appName": "dashboard-1",
+    "routes": [
+      {
+        "path": "/",
+        "title": "Dashboard",
+        "description": "Main analytics dashboard with charts and tables"
+      }
+    ]
+  }
+}