love-ui 1.2.12 → 1.2.14

package/public/r/comp-601.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-601",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/badge.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-601.tsx",
+      "content": "import { Badge } from \"@/registry/building-blocks/default/ui/badge\";\nimport { Card, CardContent, CardTitle } from \"@/registry/building-blocks/default/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport { TrendingDown, TrendingUp } from \"lucide-react\";\n\nconst stats = [\n  {\n    metric: \"Active Users\",\n    current: \"128,456\",\n    previous: \"115,789\",\n    difference: \"10.9%\",\n    trend: \"up\",\n  },\n  {\n    metric: \"Conversion Rate\",\n    current: \"5.32%\",\n    previous: \"6.18%\",\n    difference: \"0.86%\",\n    trend: \"down\",\n  },\n  {\n    metric: \"Avg. Session Duration\",\n    current: \"3m 42s\",\n    previous: \"3m 15s\",\n    difference: \"13.8%\",\n    trend: \"up\",\n  },\n];\n\nexport default function Stats02() {\n  return (\n    <div className=\"flex items-center justify-center p-10\">\n      <div className=\"grid grid-cols-1 divide-y bg-border divide-border overflow-hidden rounded-lg md:grid-cols-3 md:divide-x md:divide-y-0\">\n        {stats.map((item) => (\n          <Card\n            key={item.metric}\n            className=\"rounded-none border-0 shadow-sm py-0\"\n          >\n            <CardContent className=\"p-4 sm:p-6\">\n              <CardTitle className=\"text-base font-normal\">\n                {item.metric}\n              </CardTitle>\n              <div className=\"mt-1 flex items-baseline gap-2 md:block lg:flex\">\n                <div className=\"tabular-nums flex items-baseline text-2xl font-semibold text-primary\">\n                  {item.current}\n                  <span className=\"tabular-nums ml-2 text-sm font-medium text-muted-foreground\">\n                    from {item.previous}\n                  </span>\n                </div>\n\n                <Badge\n                  variant=\"outline\"\n                  className={cn(\n                    \"tabular-nums inline-flex items-center px-1.5 ps-2.5 py-0.5 text-xs font-medium md:mt-2 lg:mt-0\",\n                    item.trend === \"up\"\n                      ? \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400\"\n                      : \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400\"\n                  )}\n                >\n                  {item.trend === \"up\" ? (\n                    <TrendingUp className=\"mr-0.5 -ml-1 h-5 w-5 shrink-0 self-center text-green-500\" />\n                  ) : (\n                    <TrendingDown className=\"mr-0.5 -ml-1 h-5 w-5 shrink-0 self-center text-red-500\" />\n                  )}\n\n                  <span className=\"sr-only\">\n                    {\" \"}\n                    {item.trend === \"up\" ? \"Increased\" : \"Decreased\"} by{\" \"}\n                  </span>\n                  {item.difference}\n                </Badge>\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </div>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-602.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-602",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-602.tsx",
+      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\nimport { cn } from \"@/lib/utils\";\n\nconst data = [\n  {\n    name: \"Unique visitors\",\n    stat: \"10,450\",\n    change: \"-12.5%\",\n    changeType: \"negative\",\n  },\n  {\n    name: \"Bounce rate\",\n    stat: \"56.1%\",\n    change: \"+1.8%\",\n    changeType: \"positive\",\n  },\n  {\n    name: \"Visit duration\",\n    stat: \"5.2min\",\n    change: \"+19.7%\",\n    changeType: \"positive\",\n  },\n  {\n    name: \"Conversion rate\",\n    stat: \"3.2%\",\n    change: \"-2.4%\",\n    changeType: \"negative\",\n  },\n];\n\nexport default function Stats03() {\n  return (\n    <div className=\"flex items-center justify-center p-10 w-full\">\n      <dl className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 w-full\">\n        {data.map((item) => (\n          <Card key={item.name} className=\"p-6 py-4\">\n            <CardContent className=\"p-0\">\n              <dt className=\"text-sm font-medium text-muted-foreground\">\n                {item.name}\n              </dt>\n              <dd className=\"mt-2 flex items-baseline space-x-2.5\">\n                <span className=\"tabular-nums tabular-nums text-3xl font-semibold text-foreground\">\n                  {item.stat}\n                </span>\n                <span\n                  className={cn(\n                    item.changeType === \"positive\"\n                      ? \"text-green-800 dark:text-green-400\"\n                      : \"text-red-800 dark:text-red-400\",\n                    \"text-sm font-medium\"\n                  )}\n                >\n                  {item.change}\n                </span>\n              </dd>\n            </CardContent>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-603.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-603",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/badge.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-603.tsx",
+      "content": "\"use client\";\n\nimport { Badge } from \"@/registry/building-blocks/default/ui/badge\";\nimport { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport { TrendingDown, TrendingUp } from \"lucide-react\";\n\nconst data = [\n  {\n    name: \"Daily active users\",\n    stat: \"3,450\",\n    change: \"+12.1%\",\n    changeType: \"positive\",\n  },\n  {\n    name: \"Weekly sessions\",\n    stat: \"1,342\",\n    change: \"-9.8%\",\n    changeType: \"negative\",\n  },\n  {\n    name: \"Duration\",\n    stat: \"5.2min\",\n    change: \"+7.7%\",\n    changeType: \"positive\",\n  },\n];\n\nexport default function Stats04() {\n  return (\n    <div className=\"flex items-center justify-center p-10 w-full\">\n      <dl className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 w-full\">\n        {data.map((item) => (\n          <Card key={item.name} className=\"p-6 py-4 w-full\">\n            <CardContent className=\"p-0\">\n              <div className=\"flex items-center justify-between\">\n                <dt className=\"text-sm font-medium text-muted-foreground\">\n                  {item.name}\n                </dt>\n                <Badge\n                  variant=\"outline\"\n                  className={cn(\n                    \"font-medium inline-flex items-center px-1.5 ps-2.5 py-0.5 text-xs\",\n                    item.changeType === \"positive\"\n                      ? \"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400\"\n                      : \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400\"\n                  )}\n                >\n                  {item.changeType === \"positive\" ? (\n                    <TrendingUp className=\"mr-0.5 -ml-1 h-5 w-5 shrink-0 self-center text-green-500\" />\n                  ) : (\n                    <TrendingDown className=\"mr-0.5 -ml-1 h-5 w-5 shrink-0 self-center text-red-500\" />\n                  )}\n                  <span className=\"sr-only\">\n                    {\" \"}\n                    {item.changeType === \"positive\"\n                      ? \"Increased\"\n                      : \"Decreased\"}{\" \"}\n                    by{\" \"}\n                  </span>\n                  {item.change}\n                </Badge>\n              </div>\n              <dd className=\"tabular-nums tabular-nums text-3xl font-semibold text-foreground mt-2\">\n                {item.stat}\n              </dd>\n            </CardContent>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-604.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-604",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-604.tsx",
+      "content": "\"use client\";\n\nimport { Card, CardContent, CardFooter } from \"@/registry/building-blocks/default/ui/card\";\nimport { cn } from \"@/lib/utils\";\n\nconst data = [\n  {\n    name: \"Monthly recurring revenue\",\n    value: \"$34.1K\",\n    change: \"+6.1%\",\n    changeType: \"positive\",\n    href: \"#\",\n  },\n  {\n    name: \"Users\",\n    value: \"500.1K\",\n    change: \"+19.2%\",\n    changeType: \"positive\",\n    href: \"#\",\n  },\n  {\n    name: \"User growth\",\n    value: \"11.3%\",\n    change: \"-1.2%\",\n    changeType: \"negative\",\n    href: \"#\",\n  },\n];\n\nexport default function Stats05() {\n  return (\n    <div className=\"flex items-center justify-center p-10 w-full\">\n      <dl className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 w-full\">\n        {data.map((item) => (\n          <Card key={item.name} className=\"p-0 gap-0\">\n            <CardContent className=\"p-6\">\n              <dd className=\"flex items-start justify-between space-x-2\">\n                <span className=\"truncate text-sm text-muted-foreground\">\n                  {item.name}\n                </span>\n                <span\n                  className={cn(\n                    \"text-sm font-medium\",\n                    item.changeType === \"positive\"\n                      ? \"text-emerald-700 dark:text-emerald-500\"\n                      : \"text-red-700 dark:text-red-500\"\n                  )}\n                >\n                  {item.change}\n                </span>\n              </dd>\n              <dd className=\"tabular-nums mt-1 text-3xl font-semibold text-foreground\">\n                {item.value}\n              </dd>\n            </CardContent>\n            <CardFooter className=\"flex justify-end border-t border-border p-0!\">\n              <a\n                href={item.href}\n                className=\"px-6 py-3 text-sm font-medium text-primary hover:text-primary/90\"\n              >\n                View more &#8594;\n              </a>\n            </CardFooter>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-605.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-605",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-605.tsx",
+      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport { AlertTriangle, Check, ChevronRight, Eye } from \"lucide-react\";\nimport Link from \"next/link\";\n\nconst data = [\n  {\n    name: \"Europe\",\n    stat: \"$10,023\",\n    goalsAchieved: 3,\n    status: \"observe\",\n    href: \"#\",\n  },\n  {\n    name: \"North America\",\n    stat: \"$14,092\",\n    goalsAchieved: 5,\n    status: \"within\",\n    href: \"#\",\n  },\n  {\n    name: \"Asia\",\n    stat: \"$113,232\",\n    goalsAchieved: 1,\n    status: \"critical\",\n    href: \"#\",\n  },\n];\n\nexport default function Stats06() {\n  return (\n    <div className=\"flex items-center justify-center p-10 w-full\">\n      <dl className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 w-full\">\n        {data.map((item) => (\n          <Card key={item.name} className=\"p-6 relative\">\n            <CardContent className=\"p-0\">\n              <dt className=\"text-sm font-medium text-muted-foreground\">\n                {item.name}\n              </dt>\n              <dd className=\"tabular-nums tabular-nums text-3xl font-semibold text-foreground\">\n                {item.stat}\n              </dd>\n              <div className=\"group relative mt-6 flex items-center space-x-4 rounded-md bg-muted/60 p-2 hover:bg-muted\">\n                <div className=\"flex w-full items-center justify-between truncate\">\n                  <div className=\"flex items-center space-x-3\">\n                    <span\n                      className={cn(\n                        \"flex h-9 w-9 shrink-0 items-center justify-center rounded\",\n                        item.status === \"within\"\n                          ? \"bg-emerald-500 text-white\"\n                          : item.status === \"observe\"\n                          ? \"bg-yellow-500 text-white\"\n                          : \"bg-red-500 text-white\"\n                      )}\n                    >\n                      {item.status === \"within\" ? (\n                        <Check className=\"size-4 shrink-0\" aria-hidden={true} />\n                      ) : item.status === \"observe\" ? (\n                        <Eye className=\"size-4 shrink-0\" aria-hidden={true} />\n                      ) : (\n                        <AlertTriangle\n                          className=\"size-4 shrink-0\"\n                          aria-hidden={true}\n                        />\n                      )}\n                    </span>\n                    <dd>\n                      <p className=\"text-pretty text-sm text-muted-foreground\">\n                        <Link href={item.href} className=\"focus:outline-none\">\n                          {/* Extend link to entire card */}\n                          <span\n                            className=\"absolute inset-0\"\n                            aria-hidden={true}\n                          />\n                          {item.goalsAchieved}/5 goals\n                        </Link>\n                      </p>\n                      <p\n                        className={cn(\n                          \"text-sm font-medium\",\n                          item.status === \"within\"\n                            ? \"text-emerald-800 dark:text-emerald-500\"\n                            : item.status === \"observe\"\n                            ? \"text-yellow-800 dark:text-yellow-500\"\n                            : \"text-red-800 dark:text-red-500\"\n                        )}\n                      >\n                        {item.status}\n                      </p>\n                    </dd>\n                  </div>\n                  <ChevronRight\n                    className=\"size-5 shrink-0 text-muted-foreground/60 group-hover:text-muted-foreground\"\n                    aria-hidden={true}\n                  />\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-606.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-606",
+  "type": "registry:component",
+  "dependencies": [
+    "recharts"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-606.tsx",
+      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\nimport { type ChartConfig, ChartContainer } from \"@/registry/building-blocks/default/ui/chart\";\nimport { ExternalLink } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\";\n\nconst data = [\n  {\n    name: \"Workspaces\",\n    capacity: 20,\n    current: 1,\n    allowed: 5,\n    fill: \"var(--chart-1)\",\n  },\n  {\n    name: \"Dashboards\",\n    capacity: 10,\n    current: 2,\n    allowed: 20,\n    fill: \"var(--chart-2)\",\n  },\n  {\n    name: \"Chart widgets\",\n    capacity: 30,\n    current: 15,\n    allowed: 50,\n    fill: \"var(--chart-3)\",\n  },\n  {\n    name: \"Storage\",\n    capacity: 50,\n    current: 25,\n    allowed: 100,\n    fill: \"var(--chart-4)\",\n  },\n];\n\nconst chartConfig = {\n  capacity: {\n    label: \"Capacity\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig;\n\nexport default function Stats07() {\n  return (\n    <div className=\"flex items-center justify-center p-10 w-full\">\n      <div className=\"w-full\">\n        <h2 className=\"text-balance text-xl font-medium text-foreground\">Plan overview</h2>\n        <p className=\"text-pretty mt-1 text-sm leading-6 text-muted-foreground\">\n          You are currently on the{\" \"}\n          <span className=\"font-medium text-foreground\">starter plan</span>.{\" \"}\n          <Link\n            href=\"#\"\n            className=\"inline-flex items-center gap-1 text-primary hover:underline hover:underline-offset-4\"\n          >\n            View other plans\n            <ExternalLink className=\"size-4\" aria-hidden={true} />\n          </Link>\n        </p>\n        <dl className=\"mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n          {data.map((item) => (\n            <Card key={item.name} className=\"p-4\">\n              <CardContent className=\"p-0 flex items-center space-x-4\">\n                <div className=\"relative flex items-center justify-center\">\n                  <ChartContainer\n                    config={chartConfig}\n                    className=\"h-[80px] w-[80px]\"\n                  >\n                    <RadialBarChart\n                      data={[item]}\n                      innerRadius={24}\n                      outerRadius={36}\n                      barSize={6}\n                      startAngle={90}\n                      endAngle={-270}\n                    >\n                      <PolarAngleAxis\n                        type=\"number\"\n                        domain={[0, 100]}\n                        angleAxisId={0}\n                        tick={false}\n                        axisLine={false}\n                      />\n                      <RadialBar\n                        dataKey=\"capacity\"\n                        background\n                        cornerRadius={10}\n                        fill=\"var(--primary)\"\n                        angleAxisId={0}\n                      />\n                    </RadialBarChart>\n                  </ChartContainer>\n                  <div className=\"absolute inset-0 flex items-center justify-center\">\n                    <span className=\"text-base font-medium text-foreground\">\n                      {item.capacity}%\n                    </span>\n                  </div>\n                </div>\n                <div>\n                  <dt className=\"text-sm font-medium text-foreground\">\n                    {item.name}\n                  </dt>\n                  <dd className=\"text-sm text-muted-foreground\">\n                    {item.current} of {item.allowed} used\n                  </dd>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </dl>\n      </div>\n    </div>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-607.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-607",
+  "type": "registry:component",
+  "dependencies": [
+    "recharts"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-607.tsx",
+      "content": "\"use client\";\n\nimport { Card, CardContent, CardFooter } from \"@/registry/building-blocks/default/ui/card\";\nimport { type ChartConfig, ChartContainer } from \"@/registry/building-blocks/default/ui/chart\";\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\";\n\nconst data = [\n  {\n    name: \"HR\",\n    progress: 25,\n    budget: \"$1,000\",\n    current: \"$250\",\n    href: \"#\",\n    fill: \"var(--chart-1)\",\n  },\n  {\n    name: \"Marketing\",\n    progress: 55,\n    budget: \"$1,000\",\n    current: \"$550\",\n    href: \"#\",\n    fill: \"var(--chart-2)\",\n  },\n  {\n    name: \"Finance\",\n    progress: 85,\n    budget: \"$1,000\",\n    current: \"$850\",\n    href: \"#\",\n    fill: \"var(--chart-3)\",\n  },\n  {\n    name: \"Engineering\",\n    progress: 70,\n    budget: \"$2,000\",\n    current: \"$1,400\",\n    href: \"#\",\n    fill: \"var(--chart-4)\",\n  },\n];\n\nconst chartConfig = {\n  progress: {\n    label: \"Progress\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig;\n\nexport default function Stats08() {\n  return (\n    <div className=\"flex items-center justify-center p-10 w-full\">\n      <dl className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 w-full\">\n        {data.map((item) => (\n          <Card key={item.name} className=\"p-0 gap-0\">\n            <CardContent className=\"p-4\">\n              <div className=\"flex items-center space-x-3\">\n                <div className=\"relative flex items-center justify-center\">\n                  <ChartContainer\n                    config={chartConfig}\n                    className=\"h-[80px] w-[80px]\"\n                  >\n                    <RadialBarChart\n                      data={[item]}\n                      innerRadius={24}\n                      outerRadius={36}\n                      barSize={6}\n                      startAngle={90}\n                      endAngle={-270}\n                    >\n                      <PolarAngleAxis\n                        type=\"number\"\n                        domain={[0, 100]}\n                        angleAxisId={0}\n                        tick={false}\n                        axisLine={false}\n                      />\n                      <RadialBar\n                        dataKey=\"progress\"\n                        background\n                        cornerRadius={10}\n                        fill={item.fill}\n                        angleAxisId={0}\n                      />\n                    </RadialBarChart>\n                  </ChartContainer>\n                  <div className=\"absolute inset-0 flex items-center justify-center\">\n                    <span className=\"text-base font-medium text-foreground\">\n                      {item.progress}%\n                    </span>\n                  </div>\n                </div>\n                <div>\n                  <dd className=\"text-base font-medium text-foreground\">\n                    {item.current} / {item.budget}\n                  </dd>\n                  <dt className=\"text-sm text-muted-foreground\">\n                    Budget {item.name}\n                  </dt>\n                </div>\n              </div>\n            </CardContent>\n            <CardFooter className=\"flex items-center justify-end border-t border-border p-0!\">\n              <a\n                href={item.href}\n                className=\"text-sm font-medium text-primary px-6 py-3 hover:text-primary/90\"\n              >\n                View more &#8594;\n              </a>\n            </CardFooter>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-608.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-608",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/progress.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-608.tsx",
+      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\nimport { Progress } from \"@/registry/building-blocks/default/ui/progress\";\n\nconst data = [\n  {\n    name: \"Requests\",\n    stat: \"996\",\n    limit: \"10,000\",\n    percentage: 9.96,\n  },\n  {\n    name: \"Credits\",\n    stat: \"$672\",\n    limit: \"$1,000\",\n    percentage: 67.2,\n  },\n  {\n    name: \"Storage\",\n    stat: \"1.85\",\n    limit: \"10GB\",\n    percentage: 18.5,\n  },\n  {\n    name: \"API Calls\",\n    stat: \"4,328\",\n    limit: \"5,000\",\n    percentage: 86.56,\n  },\n];\n\nexport default function Stats09() {\n  return (\n    <div className=\"flex items-center justify-center p-10 w-full\">\n      <dl className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 w-full\">\n        {data.map((item) => (\n          <Card key={item.name} className=\"py-4\">\n            <CardContent className=\"\">\n              <dt className=\"text-sm text-muted-foreground\">{item.name}</dt>\n              <dd className=\"tabular-nums tabular-nums text-2xl font-semibold text-foreground\">\n                {item.stat}\n              </dd>\n              <Progress value={item.percentage} className=\"mt-6 h-2\" />\n              <dd className=\"mt-2 flex items-center justify-between text-sm\">\n                <span className=\"text-primary\">{item.percentage}&#37;</span>\n                <span className=\"text-muted-foreground\">\n                  {item.stat} of {item.limit}\n                </span>\n              </dd>\n            </CardContent>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-609.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-609",
+  "type": "registry:component",
+  "dependencies": [
+    "recharts"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-609.tsx",
+      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\nimport { ChartContainer } from \"@/registry/building-blocks/default/ui/chart\";\nimport { cn } from \"@/lib/utils\";\nimport { Area, AreaChart, XAxis } from \"recharts\";\n\nconst data = [\n  {\n    date: \"Nov 24, 2023\",\n    \"Alpha Corp\": 142.87,\n    \"Beta Solutions\": 65.32,\n    \"Gamma Industries\": 83.25,\n  },\n  {\n    date: \"Nov 25, 2023\",\n    \"Alpha Corp\": 151.43,\n    \"Beta Solutions\": 59.78,\n    \"Gamma Industries\": 79.64,\n  },\n  {\n    date: \"Nov 26, 2023\",\n    \"Alpha Corp\": 157.28,\n    \"Beta Solutions\": 64.21,\n    \"Gamma Industries\": 76.19,\n  },\n  {\n    date: \"Nov 27, 2023\",\n    \"Alpha Corp\": 162.94,\n    \"Beta Solutions\": 57.46,\n    \"Gamma Industries\": 72.84,\n  },\n  {\n    date: \"Nov 28, 2023\",\n    \"Alpha Corp\": 148.37,\n    \"Beta Solutions\": 49.82,\n    \"Gamma Industries\": 81.56,\n  },\n  {\n    date: \"Nov 29, 2023\",\n    \"Alpha Corp\": 139.56,\n    \"Beta Solutions\": 55.63,\n    \"Gamma Industries\": 92.38,\n  },\n  {\n    date: \"Nov 30, 2023\",\n    \"Alpha Corp\": 145.83,\n    \"Beta Solutions\": 61.27,\n    \"Gamma Industries\": 88.75,\n  },\n  {\n    date: \"Dec 01, 2023\",\n    \"Alpha Corp\": 138.29,\n    \"Beta Solutions\": 68.94,\n    \"Gamma Industries\": 93.42,\n  },\n  {\n    date: \"Dec 02, 2023\",\n    \"Alpha Corp\": 129.64,\n    \"Beta Solutions\": 74.56,\n    \"Gamma Industries\": 97.18,\n  },\n  {\n    date: \"Dec 03, 2023\",\n    \"Alpha Corp\": 119.82,\n    \"Beta Solutions\": 71.38,\n    \"Gamma Industries\": 89.43,\n  },\n  {\n    date: \"Dec 04, 2023\",\n    \"Alpha Corp\": 128.54,\n    \"Beta Solutions\": 63.95,\n    \"Gamma Industries\": 92.76,\n  },\n  {\n    date: \"Dec 05, 2023\",\n    \"Alpha Corp\": 137.21,\n    \"Beta Solutions\": 58.47,\n    \"Gamma Industries\": 84.29,\n  },\n  {\n    date: \"Dec 06, 2023\",\n    \"Alpha Corp\": 134.68,\n    \"Beta Solutions\": 69.12,\n    \"Gamma Industries\": 79.38,\n  },\n  {\n    date: \"Dec 07, 2023\",\n    \"Alpha Corp\": 152.73,\n    \"Beta Solutions\": 73.89,\n    \"Gamma Industries\": 81.42,\n  },\n  {\n    date: \"Dec 08, 2023\",\n    \"Alpha Corp\": 168.59,\n    \"Beta Solutions\": 78.54,\n    \"Gamma Industries\": 75.68,\n  },\n];\n\nconst summary = [\n  {\n    name: \"Alpha Corp\",\n    tickerSymbol: \"ACP\",\n    value: \"$168.59\",\n    change: \"+15.86\",\n    percentageChange: \"+10.4%\",\n    changeType: \"positive\",\n  },\n  {\n    name: \"Beta Solutions\",\n    tickerSymbol: \"BTS\",\n    value: \"$78.54\",\n    change: \"+4.65\",\n    percentageChange: \"+6.3%\",\n    changeType: \"positive\",\n  },\n  {\n    name: \"Gamma Industries\",\n    tickerSymbol: \"GMI\",\n    value: \"$75.68\",\n    change: \"-5.74\",\n    percentageChange: \"-7.1%\",\n    changeType: \"negative\",\n  },\n];\n\nconst sanitizeName = (name: string) => {\n  return name\n    .replace(/\\\\s+/g, \"-\")\n    .replace(/[^a-zA-Z0-9-]/g, \"_\")\n    .toLowerCase();\n};\n\nexport default function Stats10() {\n  return (\n    <div className=\"flex items-center justify-center p-10 w-full\">\n      <dl className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 w-full\">\n        {summary.map((item) => {\n          const sanitizedName = sanitizeName(item.name);\n          const gradientId = `gradient-${sanitizedName}`;\n\n          const color =\n            item.changeType === \"positive\"\n              ? \"hsl(142.1 76.2% 36.3%)\"\n              : \"hsl(0 72.2% 50.6%)\";\n\n          return (\n            <Card key={item.name} className=\"p-0\">\n              <CardContent className=\"p-4 pb-0\">\n                <div>\n                  <dt className=\"text-sm font-medium text-foreground\">\n                    {item.name}{\" \"}\n                    <span className=\"font-normal text-muted-foreground\">\n                      ({item.tickerSymbol})\n                    </span>\n                  </dt>\n                  <div className=\"flex items-baseline justify-between\">\n                    <dd\n                      className={cn(\n                        item.changeType === \"positive\"\n                          ? \"text-green-600 dark:text-green-500\"\n                          : \"text-red-600 dark:text-red-500\",\n                        \"text-lg font-semibold\"\n                      )}\n                    >\n                      {item.value}\n                    </dd>\n                    <dd className=\"flex items-center space-x-1 text-sm\">\n                      <span className=\"font-medium text-foreground\">\n                        {item.change}\n                      </span>\n                      <span\n                        className={cn(\n                          item.changeType === \"positive\"\n                            ? \"text-green-600 dark:text-green-500\"\n                            : \"text-red-600 dark:text-red-500\"\n                        )}\n                      >\n                        ({item.percentageChange})\n                      </span>\n                    </dd>\n                  </div>\n                </div>\n\n                <div className=\"mt-2 h-16 overflow-hidden\">\n                  <ChartContainer\n                    className=\"w-full h-full\"\n                    config={{\n                      [item.name]: {\n                        label: item.name,\n                        color: color,\n                      },\n                    }}\n                  >\n                    <AreaChart data={data}>\n                      <defs>\n                        <linearGradient\n                          id={gradientId}\n                          x1=\"0\"\n                          y1=\"0\"\n                          x2=\"0\"\n                          y2=\"1\"\n                        >\n                          <stop\n                            offset=\"5%\"\n                            stopColor={color}\n                            stopOpacity={0.3}\n                          />\n                          <stop\n                            offset=\"95%\"\n                            stopColor={color}\n                            stopOpacity={0}\n                          />\n                        </linearGradient>\n                      </defs>\n                      <XAxis dataKey=\"date\" hide={true} />\n                      <Area\n                        dataKey={item.name}\n                        stroke={color}\n                        fill={`url(#${gradientId})`}\n                        fillOpacity={0.4}\n                        strokeWidth={1.5}\n                        type=\"monotone\"\n                      />\n                    </AreaChart>\n                  </ChartContainer>\n                </div>\n              </CardContent>\n            </Card>\n          );\n        })}\n      </dl>\n    </div>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-61.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-61",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/textarea.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-61.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with helper text</Label>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Please add as many details as you can\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "textarea",
+      "helper"
+    ]
+  }
+}

package/public/r/comp-610.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-610",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-610.tsx",
+      "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useState } from \"react\";\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\";\nimport { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/building-blocks/default/ui/dialog\";\nimport { Input } from \"@/registry/building-blocks/default/ui/input\";\nimport { Label } from \"@/registry/building-blocks/default/ui/label\";\nimport { Box, Edit } from \"lucide-react\";\n\ninterface MetricCardProps {\n  title: string;\n  value: string;\n  limit: string;\n  percentage: number;\n  status?: string;\n  statusColor?: string;\n  progressColor: string;\n  details?: Array<{ label: string; value: string; color: string }>;\n  actionLabel: string;\n  actionIcon: React.ReactNode;\n  warningMessage?: string;\n  onActionClick?: () => void;\n}\n\nfunction MetricCard({\n  title,\n  value,\n  limit,\n  percentage,\n  status,\n  statusColor = \"text-emerald-600 dark:text-emerald-400\",\n  progressColor,\n  details,\n  actionLabel,\n  actionIcon,\n  warningMessage,\n  onActionClick,\n}: MetricCardProps) {\n  const renderProgressBar = () => {\n    if (details && title === \"Commands\") {\n      const writes = Number.parseInt(details[0].value.replace(/,/g, \"\"));\n      const reads = Number.parseInt(details[1].value.replace(/,/g, \"\"));\n      const total = writes + reads;\n      const writesPercentage = (writes / total) * 100;\n      const readsPercentage = (reads / total) * 100;\n\n      return (\n        <div className=\"relative h-1 w-full overflow-hidden rounded-full bg-muted\">\n          <div\n            className=\"absolute left-0 h-full w-full origin-left bg-emerald-500 transition-transform duration-200 ease-out\"\n            style={{ transform: `scaleX(${writesPercentage / 100})` }}\n          />\n          <div\n            className=\"absolute left-0 h-full w-full origin-left bg-blue-500 transition-transform duration-200 ease-out\"\n            style={{\n              transform: `translateX(${writesPercentage}%) scaleX(${readsPercentage / 100})`,\n            }}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"relative h-1 w-full overflow-hidden rounded-full bg-muted\">\n        <div\n          className={`h-full w-full origin-left transition-transform duration-200 ease-out ${progressColor}`}\n          style={{ transform: `scaleX(${Math.min(percentage, 100) / 100})` }}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Card className=\"relative overflow-hidden max-w-[280px]\">\n      <CardContent className=\"p-4 py-0\">\n        <h5 className=\"text-xs font-normal leading-none tracking-wide text-muted-foreground dark:text-foreground/80 uppercase\">\n          {title}\n        </h5>\n\n        <div className=\"mt-2 flex items-baseline gap-1\">\n          <div className=\"text-[1.2rem] font-medium leading-none text-foreground tabular-nums\">\n            {value}\n          </div>\n          <div className=\"text-xs leading-none text-muted-foreground\">\n            / {limit}\n          </div>\n        </div>\n\n        <div className=\"mt-3\">\n          {renderProgressBar()}\n\n          {details && (\n            <div className=\"my-6 mb-8\">\n              <div className=\"flex flex-col gap-3\">\n                {details.map((detail, index) => (\n                  <div\n                    key={index}\n                    className=\"flex w-full items-center text-xs leading-none text-muted-foreground dark:text-foreground/70\"\n                  >\n                    <div\n                      className={`mr-[6px] h-2 w-2 rounded-full ${detail.color}`}\n                    />\n                    <div className=\"mr-1\">{detail.label}</div>\n                    <div className=\"h-[9px] flex-1 border-b-2 border-dotted border-border\" />\n                    <div className=\"ml-1 tabular-nums\">{detail.value}</div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {status && (\n            <div className=\"pt-2\">\n              <div className={statusColor}>{status}</div>\n            </div>\n          )}\n\n          {warningMessage && (\n            <div className=\"pt-2\">\n              <div className=\"text-sm text-amber-700 dark:text-amber-400\">\n                {warningMessage}\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className=\"absolute bottom-0 left-0 right-0\">\n          <Button\n            variant=\"ghost\"\n            className=\"h-8 w-full rounded-none text-blue-500 gap-0 justify-start hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 bg-muted/50\"\n            onClick={onActionClick}\n          >\n            {actionIcon}\n            <span className=\"ml-1 text-xs\">{actionLabel}</span>\n          </Button>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n\nfunction BudgetDialog({\n  open,\n  onOpenChange,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}) {\n  const [budget, setBudget] = useState(\"150\");\n\n  const handleUpdate = () => {\n    onOpenChange(false);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Update budget</DialogTitle>\n          <DialogDescription>\n            When your monthly cost reaches the max budget, we send an email and\n            throttle your database. You will not be charged beyond your set\n            budget for this database.\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"budget\">Max budget per month</Label>\n          <Input\n            id=\"budget\"\n            value={budget}\n            onChange={(e) => setBudget(e.target.value)}\n            type=\"number\"\n            placeholder=\"150\"\n          />\n        </div>\n\n        <DialogFooter className=\"pt-2\">\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)}>\n            Cancel\n          </Button>\n          <Button onClick={handleUpdate}>Update</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport default function Stats11() {\n  const [budgetDialogOpen, setBudgetDialogOpen] = useState(false);\n\n  return (\n    <>\n      <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4\">\n        <MetricCard\n          title=\"Commands\"\n          value=\"13.8M\"\n          limit=\"Unlimited\"\n          percentage={67}\n          progressColor=\"bg-blue-500\"\n          details={[\n            { label: \"Writes\", value: \"11,276,493\", color: \"bg-emerald-500\" },\n            { label: \"Reads\", value: \"2,548,921\", color: \"bg-blue-500\" },\n          ]}\n          actionLabel=\"Upgrade\"\n          actionIcon={<Box className=\"h-4 w-4\" />}\n        />\n\n        <MetricCard\n          title=\"Bandwidth\"\n          value=\"141 GB\"\n          limit=\"150 GB\"\n          percentage={94}\n          progressColor=\"bg-orange-500\"\n          warningMessage=\"There will be a charge for the excessive bandwidth over the limit.\"\n          actionLabel=\"Upgrade\"\n          actionIcon={<Box className=\"h-4 w-4\" />}\n        />\n\n        <MetricCard\n          title=\"Storage\"\n          value=\"37 GB\"\n          limit=\"500 GB\"\n          percentage={7.4}\n          progressColor=\"bg-emerald-500\"\n          status=\"It's all right.\"\n          actionLabel=\"Upgrade\"\n          actionIcon={<Box className=\"h-4 w-4\" />}\n        />\n\n        <MetricCard\n          title=\"Cost\"\n          value=\"$73.42\"\n          limit=\"$150 Budget\"\n          percentage={48.95}\n          progressColor=\"bg-emerald-500\"\n          status=\"It's all right.\"\n          actionLabel=\"Change Budget\"\n          actionIcon={<Edit className=\"h-4 w-4\" />}\n          onActionClick={() => setBudgetDialogOpen(true)}\n        />\n      </div>\n\n      <BudgetDialog\n        open={budgetDialogOpen}\n        onOpenChange={setBudgetDialogOpen}\n      />\n    </>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-611.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-611",
+  "type": "registry:component",
+  "dependencies": [
+    "recharts"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-611.tsx",
+      "content": "\"use client\";\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\";\nimport { Card, CardContent, CardHeader } from \"@/registry/building-blocks/default/ui/card\";\nimport { ChartContainer, type ChartConfig } from \"@/registry/building-blocks/default/ui/chart\";\nimport { Cell, Pie, PieChart } from \"recharts\";\n\ninterface UsageItem {\n  name: string;\n  current: string;\n  limit: string;\n  percentage: number;\n  href?: string;\n}\n\nconst usageData: UsageItem[] = [\n  { name: \"ISR Reads\", current: \"358K\", limit: \"1M\", percentage: 35.8 },\n  { name: \"Edge Requests\", current: \"317K\", limit: \"1M\", percentage: 31.7 },\n  {\n    name: \"Fast Origin Transfer\",\n    current: \"3.07 GB\",\n    limit: \"10 GB\",\n    percentage: 30.7,\n  },\n  {\n    name: \"Speed Insights Data Points\",\n    current: \"791\",\n    limit: \"10K\",\n    percentage: 7.9,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    current: \"4.98 GB\",\n    limit: \"100 GB\",\n    percentage: 5.0,\n  },\n  {\n    name: \"Function Duration\",\n    current: \"3.1 GB-Hrs\",\n    limit: \"100 GB-Hrs\",\n    percentage: 3.1,\n  },\n  {\n    name: \"Web Analytics Events\",\n    current: \"1.3K\",\n    limit: \"50K\",\n    percentage: 2.6,\n  },\n  { name: \"ISR Writes\", current: \"4.8K\", limit: \"200K\", percentage: 2.4 },\n  {\n    name: \"Function Invocations\",\n    current: \"19K\",\n    limit: \"1M\",\n    percentage: 1.9,\n  },\n  {\n    name: \"Image Optimization - Cache Reads\",\n    current: \"4.3K\",\n    limit: \"300K\",\n    percentage: 1.4,\n  },\n];\n\nconst chartConfig = {\n  used: {\n    label: \"Used\",\n    color: \"hsl(var(--primary))\",\n  },\n  remaining: {\n    label: \"Remaining\",\n    color: \"hsl(var(--muted))\",\n  },\n} satisfies ChartConfig;\n\nfunction DonutChart({ percentage }: { percentage: number }) {\n  const backgroundData = [{ name: \"background\", value: 100, fill: \"#E5E7EB\" }];\n  const foregroundData = [\n    {\n      name: \"used\",\n      value: Math.max(0, Math.min(100, Number(percentage))),\n      fill: \"#3B82F6\",\n    },\n    {\n      name: \"empty\",\n      value: 100 - Math.max(0, Math.min(100, Number(percentage))),\n      fill: \"transparent\",\n    },\n  ];\n\n  return (\n    <ChartContainer\n      config={chartConfig}\n      className=\"w-6 h-6 shrink-0 aspect-square\"\n    >\n      <PieChart>\n        <Pie\n          data={backgroundData}\n          dataKey=\"value\"\n          nameKey=\"name\"\n          cx=\"50%\"\n          cy=\"50%\"\n          innerRadius={6}\n          outerRadius={10}\n          isAnimationActive={false}\n        >\n          {backgroundData.map((entry, index) => (\n            <Cell key={`bg-cell-${index}`} fill={entry.fill} />\n          ))}\n        </Pie>\n        <Pie\n          data={foregroundData}\n          dataKey=\"value\"\n          nameKey=\"name\"\n          cx=\"50%\"\n          cy=\"50%\"\n          innerRadius={6}\n          outerRadius={10}\n          startAngle={90}\n          endAngle={-270}\n        >\n          {foregroundData.map((entry, index) => (\n            <Cell key={`fg-cell-${index}`} fill={entry.fill} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ChartContainer>\n  );\n}\n\nexport default function Stats12() {\n  return (\n    <Card className=\"w-full max-w-md gap-3 py-5\">\n      <CardHeader className=\"px-5\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex flex-col\">\n            <h3 className=\"text-balance text-sm font-medium\">Last 30 days</h3>\n            <p className=\"text-pretty text-xs text-muted-foreground font-medium\">\n              Updated just now\n            </p>\n          </div>\n          <Button size=\"sm\" className=\"h-6 text-xs font-medium\">\n            Upgrade\n          </Button>\n        </div>\n      </CardHeader>\n\n      <CardContent className=\"pt-0 px-3\">\n        <div className=\"space-y-0\">\n          {usageData.map((item, index) => (\n            <div\n              key={item.name}\n              className={`flex items-center gap-3 p-2 rounded-sm transition-colors hover:bg-muted/50 ${\n                index % 2 === 1 ? \"bg-muted/20\" : \"\"\n              }`}\n            >\n              <DonutChart percentage={item.percentage} />\n              <span className=\"text-sm flex-1 truncate leading-4\">\n                {item.name}\n              </span>\n              <span className=\"text-xs font-medium tabular-nums tracking-tighter text-muted-foreground\">\n                {item.current} /{\" \"}\n                <span className=\"text-foreground\">{item.limit}</span>\n              </span>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-612.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-612",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-612.tsx",
+      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props {\n  title?: string;\n  used?: number;\n  total?: number;\n  usedLabel?: string;\n  totalLabel?: string;\n  segments?: {\n    label: string;\n    value: number;\n    color: string;\n  }[];\n  className?: string;\n}\n\nconst defaultSegments: NonNullable<Props[\"segments\"]> = [\n  { label: \"Documents\", value: 2400, color: \"bg-blue-500\" },\n  { label: \"Photos\", value: 1800, color: \"bg-emerald-500\" },\n  { label: \"Videos\", value: 3200, color: \"bg-amber-500\" },\n  { label: \"Music\", value: 900, color: \"bg-purple-500\" },\n];\n\nexport default function Stats13({\n  title = \"Using Storage\",\n  used = 8300,\n  total = 15,\n  usedLabel = \"MB\",\n  totalLabel = \"GB\",\n  segments = defaultSegments,\n  className,\n}: Props) {\n  const totalValue = total * 1000;\n  const freeValue = totalValue - used;\n\n  return (\n    <Card className={cn(\"w-full max-w-4xl shadow-sm\", className)}>\n      <CardContent className=\"py-0\">\n        <p className=\"text-pretty mb-4 text-base text-muted-foreground\">\n          {title}{\" \"}\n          <span className=\"font-semibold tabular-nums text-foreground\">\n            {used.toLocaleString(undefined, {\n              minimumFractionDigits: 0,\n              maximumFractionDigits: 2,\n            })}{\" \"}\n            {usedLabel}\n          </span>{\" \"}\n          of {total} {totalLabel}\n        </p>\n\n        <div className=\"mb-4 flex h-2.5 w-full overflow-hidden rounded-full bg-muted\">\n          {segments.map((segment) => {\n            const percentage = (segment.value / totalValue) * 100;\n            return (\n              <div\n                key={segment.label}\n                className={cn(\"h-full\", segment.color)}\n                style={{ width: `${percentage}%` }}\n                role=\"progressbar\"\n                aria-label={segment.label}\n                aria-valuenow={segment.value}\n                aria-valuemin={0}\n                aria-valuemax={totalValue}\n              />\n            );\n          })}\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-x-8 gap-y-2\">\n          {segments.map((segment) => (\n            <div key={segment.label} className=\"flex items-center gap-2\">\n              <span\n                className={cn(\"size-3 shrink-0 rounded\", segment.color)}\n                aria-hidden=\"true\"\n              />\n              <span className=\"text-sm text-muted-foreground\">\n                {segment.label}\n              </span>\n              <span className=\"text-sm tabular-nums text-muted-foreground\">\n                {Math.round(segment.value)}\n                {usedLabel}\n              </span>\n            </div>\n          ))}\n          <div className=\"flex items-center gap-2\">\n            <span\n              className=\"size-3 shrink-0 rounded-sm bg-muted\"\n              aria-hidden=\"true\"\n            />\n            <span className=\"text-sm text-muted-foreground\">Free</span>\n            <span className=\"text-sm tabular-nums text-muted-foreground\">\n              {Math.round(freeValue)}\n              {usedLabel}\n            </span>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-613.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-613",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/badge.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-613.tsx",
+      "content": "import { Badge } from \"@/registry/building-blocks/default/ui/badge\";\nimport { Card, CardContent } from \"@/registry/building-blocks/default/ui/card\";\n\ninterface UsageItem {\n  label: string;\n  amount: number;\n  percentage: number;\n  color: \"emerald\" | \"amber\" | \"rose\";\n}\n\nconst data: UsageItem[] = [\n  { label: \"Compute\", amount: 450, percentage: 52.3, color: \"emerald\" },\n  { label: \"Storage\", amount: 285, percentage: 33.1, color: \"amber\" },\n  { label: \"Bandwidth\", amount: 125, percentage: 14.6, color: \"rose\" },\n];\n\nconst colorClasses = {\n  emerald: \"bg-emerald-500 dark:bg-emerald-400\",\n  amber: \"bg-amber-500 dark:bg-amber-400\",\n  rose: \"bg-rose-500 dark:bg-rose-400\",\n};\n\nexport default function Stats14() {\n  return (\n    <Card className=\"w-full max-w-sm shadow-none\">\n      <CardContent className=\"flex flex-col justify-between pt-0\">\n        <div>\n          <div className=\"flex items-center gap-2\">\n            <h3 className=\"text-balance text-sm font-bold text-foreground\">Usage</h3>\n            <Badge\n              variant=\"secondary\"\n              className=\"bg-amber-50 text-amber-700 ring-1 ring-amber-500/30 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-400/20\"\n            >\n              +12.5%\n            </Badge>\n          </div>\n\n          <p className=\"text-pretty mt-2 flex items-baseline gap-2\">\n            <span className=\"text-xl text-foreground\">$860</span>\n            <span className=\"text-sm text-muted-foreground\">this month</span>\n          </p>\n\n          <div className=\"mt-4\">\n            <p className=\"text-pretty text-sm font-medium text-foreground\">\n              Resource breakdown\n            </p>\n            <div className=\"mt-2 flex items-center gap-0.5\">\n              {data.map((item, index) => (\n                <div\n                  key={index}\n                  className={`${colorClasses[item.color]} h-1.5 rounded-xs`}\n                  style={{ width: `${item.percentage}%` }}\n                />\n              ))}\n            </div>\n          </div>\n\n          <ul role=\"list\" className=\"mt-5 space-y-2\">\n            {data.map((item, index) => (\n              <li key={index} className=\"flex items-center gap-2 text-xs\">\n                <span\n                  className={`${colorClasses[item.color]} size-2.5 rounded-xs`}\n                  aria-hidden=\"true\"\n                />\n                <span className=\"text-foreground\">{item.label}</span>\n                <span className=\"text-muted-foreground\">\n                  (${item.amount} / {item.percentage}%)\n                </span>\n              </li>\n            ))}\n          </ul>\n        </div>\n\n        <p className=\"text-pretty mt-6 text-xs text-muted-foreground\">\n          Configure limits in{\" \"}\n          <a\n            href=\"#\"\n            className=\"text-emerald-600 hover:underline dark:text-emerald-400\"\n          >\n            resource settings.\n          </a>\n        </p>\n      </CardContent>\n    </Card>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-614.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-614",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-614.tsx",
+      "content": "import { cn } from \"@/lib/utils\";\n\nconst data = [\n  {\n    label: \"After 1 year\",\n    value: \"$2,400\",\n    percentage: \"+8.2%\",\n  },\n  {\n    label: \"After 5 years\",\n    value: \"$14,800\",\n    percentage: \"+24.6%\",\n  },\n  {\n    label: \"After 10 years\",\n    value: \"$38,500\",\n    percentage: \"+52.1%\",\n  },\n];\n\nexport default function Stats15() {\n  return (\n    <div className=\"w-full max-w-2xs\">\n      <h3 className=\"text-balance text-sm font-medium text-foreground\">\n        Investment growth projection\n      </h3>\n      <ul role=\"list\" className=\"mt-2 divide-y divide-border text-sm\">\n        {data.map((item, index) => (\n          <li key={index} className=\"flex items-center justify-between py-3\">\n            <span className=\"text-muted-foreground\">{item.label}</span>\n            <span className=\"flex items-center gap-3 tabular-nums\">\n              <span className=\"text-right font-medium text-foreground\">\n                {item.value}\n              </span>\n              <span className=\"h-5 w-px bg-border\" aria-hidden=\"true\" />\n              <span\n                className={cn(\n                  \"rounded px-1.5 py-1 text-center text-xs font-semibold w-15\",\n                  \"bg-emerald-50 text-emerald-600 dark:bg-emerald-400/10 dark:text-emerald-400\"\n                )}\n              >\n                {item.percentage}\n              </span>\n            </span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stats"
+    ]
+  }
+}

package/public/r/comp-615.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-615",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/command.json",
+    "https://loveui.dev/building-blocks/r/kbd.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-615.tsx",
+      "content": "\"use client\";\n\nimport {\n  IconBell,\n  IconBolt,\n  IconCalendar,\n  IconChartBar,\n  IconChartPie,\n  IconClock,\n  IconFileText,\n  IconHelp,\n  IconKeyboard,\n  IconLayoutDashboard,\n  IconLayoutKanban,\n  IconLogout,\n  IconMessage,\n  IconPalette,\n  IconSettings,\n  IconSquareCheck,\n  IconTarget,\n  IconTrendingUp,\n  IconUsers,\n} from \"@tabler/icons-react\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/building-blocks/default/ui/command\";\nimport { Kbd } from \"@/registry/building-blocks/default/ui/kbd\";\n\nconst workspaceItems = [\n  { icon: IconLayoutDashboard, label: \"Dashboard\" },\n  { icon: IconLayoutKanban, label: \"Projects\" },\n  { icon: IconSquareCheck, label: \"Tasks\" },\n  { icon: IconCalendar, label: \"Calendar\" },\n  { icon: IconUsers, label: \"Team members\" },\n  { icon: IconMessage, label: \"Messages\" },\n  { icon: IconFileText, label: \"Documents\" },\n  { icon: IconBell, label: \"Notifications\" },\n  { icon: IconClock, label: \"Time tracking\" },\n  { icon: IconTarget, label: \"Goals\" },\n];\n\nconst analyticsItems = [\n  { icon: IconChartBar, label: \"Overview\" },\n  { icon: IconTrendingUp, label: \"Performance\" },\n  { icon: IconChartPie, label: \"Reports\" },\n  { icon: IconBolt, label: \"Insights\" },\n];\n\nconst settingsItems = [\n  { icon: IconSettings, label: \"Preferences\" },\n  { icon: IconPalette, label: \"Appearance\" },\n  { icon: IconKeyboard, label: \"Keyboard shortcuts\" },\n  { icon: IconHelp, label: \"Help & support\" },\n  { icon: IconLogout, label: \"Sign out\" },\n];\n\nexport default function CommandMenu01() {\n  return (\n    <div className=\"w-full max-w-lg overflow-hidden rounded-xl border border-border/50 bg-popover shadow-lg\">\n      <Command className=\"rounded-none border-0 bg-transparent [&_[cmdk-item]_svg]:size-4\">\n        <CommandInput\n          className=\"h-12\"\n          placeholder=\"Type a command or search...\"\n        />\n        <CommandList className=\"h-[320px] max-h-[320px]\">\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Workspace\">\n            {workspaceItems.map((item) => (\n              <CommandItem key={item.label}>\n                <item.icon className=\"mr-2 h-4 w-4\" />\n                <span>{item.label}</span>\n              </CommandItem>\n            ))}\n          </CommandGroup>\n          <CommandGroup heading=\"Analytics\">\n            {analyticsItems.map((item) => (\n              <CommandItem key={item.label}>\n                <item.icon className=\"mr-2 h-4 w-4\" />\n                <span>{item.label}</span>\n              </CommandItem>\n            ))}\n          </CommandGroup>\n          <CommandGroup heading=\"Settings\">\n            {settingsItems.map((item) => (\n              <CommandItem key={item.label}>\n                <item.icon className=\"mr-2 h-4 w-4\" />\n                <span>{item.label}</span>\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <div className=\"flex h-12 items-center justify-end border-t px-3\">\n        <span className=\"flex items-center gap-1 text-muted-foreground text-sm\">\n          <span>Close</span>\n          <Kbd className=\"ml-1\">Esc</Kbd>\n        </span>\n      </div>\n    </div>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "command",
+      "menu",
+      "search",
+      "kbd",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-616.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-616",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/command.json",
+    "https://loveui.dev/building-blocks/r/kbd.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-616.tsx",
+      "content": "\"use client\";\n\nimport {\n  IconArrowRight,\n  IconAt,\n  IconCopy,\n  IconDeviceDesktop,\n  IconDownload,\n  IconFile,\n  IconFileSearch,\n  IconKeyboard,\n  IconLink,\n  IconLogout,\n  IconMessage,\n  IconPencil,\n  IconPlus,\n  IconSend,\n  IconSettings,\n  IconTemplate,\n  IconUser,\n  IconUsers,\n} from \"@tabler/icons-react\";\nimport { useState } from \"react\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/building-blocks/default/ui/command\";\nimport { Kbd, KbdGroup } from \"@/registry/building-blocks/default/ui/kbd\";\n\nexport default function CommandMenu02() {\n  const [inputValue, setInputValue] = useState(\"\");\n\n  return (\n    <div className=\"w-full max-w-lg overflow-hidden rounded-xl border border-border/50 bg-popover shadow-lg\">\n      <Command className=\"flex h-full w-full flex-col overflow-hidden bg-popover [&_[cmdk-item]_svg]:size-4\">\n        <div className=\"relative\">\n          <CommandInput\n            className=\"h-10 pe-16 text-sm\"\n            onValueChange={setInputValue}\n            placeholder=\"What do you need?\"\n            value={inputValue}\n          />\n          <Kbd className=\"absolute top-1/2 right-4 -translate-y-1/2\">Esc</Kbd>\n        </div>\n\n        <CommandList className=\"max-h-[400px] py-2\">\n          <CommandEmpty>No results found.</CommandEmpty>\n\n          <CommandGroup>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconSettings aria-hidden />\n                  Account Settings...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>,</Kbd>\n                  </KbdGroup>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconUser aria-hidden />\n                  Switch Workspace...\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconLogout aria-hidden />\n                  Log Out\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>Q</Kbd>\n                  </KbdGroup>\n            </CommandItem>\n          </CommandGroup>\n\n          <CommandGroup heading=\"Documents\">\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconFile aria-hidden />\n                  Search Documents...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>F</Kbd>\n                  </KbdGroup>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconPlus aria-hidden />\n                  Create New Document...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>N</Kbd>\n                  </KbdGroup>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconFile aria-hidden />\n                  Upload Document...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>U</Kbd>\n                  </KbdGroup>\n            </CommandItem>\n          </CommandGroup>\n\n          <CommandGroup heading=\"Signing\">\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconSend aria-hidden />\n                  Request Signature...\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconPencil aria-hidden />\n                  Sign a Document...\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconUsers aria-hidden />\n                  Bulk Send for Signature...\n            </CommandItem>\n          </CommandGroup>\n\n          <CommandGroup heading=\"Templates\">\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconTemplate aria-hidden />\n                  Search Templates...\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconPlus aria-hidden />\n                  Create New Template...\n            </CommandItem>\n          </CommandGroup>\n\n          <CommandGroup heading=\"General\">\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconDeviceDesktop aria-hidden />\n                  Change Theme...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>T</Kbd>\n                  </KbdGroup>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconCopy aria-hidden />\n                  Copy Current URL\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>⇧</Kbd>\n                    <Kbd>C</Kbd>\n                  </KbdGroup>\n            </CommandItem>\n          </CommandGroup>\n\n          <CommandGroup heading=\"Navigation\">\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;<strong className=\"font-semibold\">Inbox</strong>\n                  </span>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Action Required</strong>\n                  </span>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">\n                      Waiting for Others\n                    </strong>\n                  </span>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Completed</strong>\n                  </span>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;<strong className=\"font-semibold\">Drafts</strong>\n                  </span>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Templates</strong>\n                  </span>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Archive</strong>\n                  </span>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;<strong className=\"font-semibold\">Trash</strong>\n                  </span>\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Settings</strong>\n                  </span>\n            </CommandItem>\n          </CommandGroup>\n\n          <CommandGroup heading=\"Quick Actions\">\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconLink aria-hidden />\n                  Copy Signing Link\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconDownload aria-hidden />\n                  Download Document\n            </CommandItem>\n          </CommandGroup>\n\n          <CommandGroup heading=\"Help\">\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconFileSearch aria-hidden />\n                  Search Help Center...\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconMessage aria-hidden />\n                  Send Feedback...\n            </CommandItem>\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconAt aria-hidden />\n                  Contact Support\n            </CommandItem>\n          </CommandGroup>\n\n          <CommandGroup heading=\"Keyboard Shortcuts\">\n            <CommandItem className=\"mx-2 rounded-lg py-2.5\">\n                  <IconKeyboard aria-hidden />\n                  View Keyboard Shortcuts\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>/</Kbd>\n                  </KbdGroup>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </div>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "command",
+      "menu",
+      "search",
+      "kbd",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-617.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-617",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/command.json",
+    "https://loveui.dev/building-blocks/r/kbd.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-617.tsx",
+      "content": "\"use client\";\n\nimport { IconArrowRight, IconCornerDownLeft } from \"@tabler/icons-react\";\nimport { useRouter } from \"next/navigation\";\nimport { useCallback } from \"react\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/building-blocks/default/ui/command\";\nimport { Kbd } from \"@/registry/building-blocks/default/ui/kbd\";\n\nconst navItems = [\n  { href: \"/\", label: \"Home\", keywords: [\"home\", \"main\", \"index\"] },\n  {\n    href: \"/dashboard\",\n    label: \"Dashboard\",\n    keywords: [\"dashboard\", \"overview\"],\n  },\n  {\n    href: \"/settings\",\n    label: \"Settings\",\n    keywords: [\"settings\", \"preferences\"],\n  },\n];\n\nconst pageGroups = [\n  {\n    name: \"Getting Started\",\n    pages: [\n      {\n        name: \"Introduction\",\n        href: \"/docs/introduction\",\n        keywords: [\"intro\", \"start\"],\n      },\n      {\n        name: \"Installation\",\n        href: \"/docs/installation\",\n        keywords: [\"install\", \"setup\"],\n      },\n      {\n        name: \"Quick Start\",\n        href: \"/docs/quick-start\",\n        keywords: [\"quick\", \"begin\"],\n      },\n    ],\n  },\n  {\n    name: \"Utilities\",\n    pages: [\n      {\n        name: \"Typography\",\n        href: \"/docs/utilities/typography\",\n        keywords: [\"text\", \"font\"],\n      },\n      {\n        name: \"Colors\",\n        href: \"/docs/utilities/colors\",\n        keywords: [\"color\", \"theme\"],\n      },\n      {\n        name: \"Spacing\",\n        href: \"/docs/utilities/spacing\",\n        keywords: [\"margin\", \"padding\"],\n      },\n    ],\n  },\n];\n\nconst colorGroups = [\n  {\n    name: \"Neutral\",\n    colors: [\n      {\n        name: \"Neutral 50\",\n        className: \"neutral-50\",\n        value: \"oklch(0.985 0 0)\",\n      },\n      {\n        name: \"Neutral 100\",\n        className: \"neutral-100\",\n        value: \"oklch(0.97 0 0)\",\n      },\n      {\n        name: \"Neutral 200\",\n        className: \"neutral-200\",\n        value: \"oklch(0.922 0 0)\",\n      },\n      {\n        name: \"Neutral 500\",\n        className: \"neutral-500\",\n        value: \"oklch(0.556 0 0)\",\n      },\n      {\n        name: \"Neutral 900\",\n        className: \"neutral-900\",\n        value: \"oklch(0.205 0 0)\",\n      },\n    ],\n  },\n  {\n    name: \"Blue\",\n    colors: [\n      {\n        name: \"Blue 50\",\n        className: \"blue-50\",\n        value: \"oklch(0.97 0.014 254.604)\",\n      },\n      {\n        name: \"Blue 500\",\n        className: \"blue-500\",\n        value: \"oklch(0.623 0.214 259.815)\",\n      },\n      {\n        name: \"Blue 600\",\n        className: \"blue-600\",\n        value: \"oklch(0.546 0.245 262.881)\",\n      },\n    ],\n  },\n];\n\nexport default function CommandMenu03() {\n  const router = useRouter();\n\n  const copyToClipboard = useCallback((text: string) => {\n    navigator.clipboard.writeText(text);\n  }, []);\n\n  const runCommand = useCallback((command: () => unknown) => {\n    command();\n  }, []);\n\n  return (\n    <div className=\"relative w-full max-w-2xl rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800\">\n      <Command className=\"rounded-none bg-transparent [&_[cmdk-item]_svg]:size-4\">\n        <CommandInput className=\"h-10 text-sm\" placeholder=\"Search documentation...\" />\n        <CommandList className=\"no-scrollbar min-h-80 scroll-pt-2 scroll-pb-1.5\">\n          <CommandEmpty className=\"py-12 text-center text-muted-foreground text-sm\">\n            No results found.\n          </CommandEmpty>\n\n          {navItems.length > 0 && (\n            <CommandGroup\n              className=\"p-0! **:[[cmdk-group-heading]]:scroll-mt-16 **:[[cmdk-group-heading]]:p-3! **:[[cmdk-group-heading]]:pb-1!\"\n              heading=\"Pages\"\n            >\n              {navItems.map((item) => (\n                <CommandItem\n                  className=\"px-3! h-9 rounded-md border border-transparent font-medium hover:border-input hover:bg-input/50\"\n                  key={item.href}\n                  keywords={item.keywords}\n                  onSelect={() => {\n                    runCommand(() => router.push(item.href));\n                  }}\n                  value={`Navigation ${item.label}`}\n                >\n                  <IconArrowRight aria-hidden=\"true\" className=\"size-4\" />\n                  {item.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          )}\n\n          {pageGroups.map((group) => (\n            <CommandGroup\n              className=\"p-0! **:[[cmdk-group-heading]]:scroll-mt-16 **:[[cmdk-group-heading]]:p-3! **:[[cmdk-group-heading]]:pb-1!\"\n              heading={group.name}\n              key={group.name}\n            >\n              {group.pages.map((page) => {\n                const isComponent = page.href.includes(\"/components/\");\n                return (\n                  <CommandItem\n                    className=\"px-3! h-9 rounded-md border border-transparent font-medium hover:border-input hover:bg-input/50\"\n                    key={page.href}\n                    keywords={page.keywords}\n                    onSelect={() => {\n                      runCommand(() => router.push(page.href));\n                    }}\n                    value={`${group.name} ${page.name}`}\n                  >\n                    {isComponent ? (\n                      <div className=\"aspect-square size-4 rounded-full border border-muted-foreground border-dashed\" />\n                    ) : (\n                      <IconArrowRight aria-hidden=\"true\" className=\"size-4\" />\n                    )}\n                    {page.name}\n                  </CommandItem>\n                );\n              })}\n            </CommandGroup>\n          ))}\n\n          {colorGroups.map((colorGroup) => (\n            <CommandGroup\n              className=\"p-0! **:[[cmdk-group-heading]]:p-3!\"\n              heading={colorGroup.name}\n              key={colorGroup.name}\n            >\n              {colorGroup.colors.map((color) => (\n                <CommandItem\n                  className=\"px-3! h-9 rounded-md border border-transparent font-medium hover:border-input hover:bg-input/50\"\n                  key={color.className}\n                  keywords={[\"color\", color.name, color.className]}\n                  onSelect={() => {\n                    runCommand(() => copyToClipboard(color.value));\n                  }}\n                  value={color.className}\n                >\n                  <div\n                    className=\"aspect-square size-4 rounded-sm border\"\n                    style={{ backgroundColor: color.value }}\n                  />\n                  {color.className}\n                  <span className=\"ml-auto font-mono font-normal text-muted-foreground text-xs tabular-nums\">\n                    {color.value}\n                  </span>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          ))}\n        </CommandList>\n      </Command>\n\n      <div className=\"absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 font-medium text-muted-foreground text-xs dark:border-t-neutral-700 dark:bg-neutral-800\">\n        <Kbd>\n          <IconCornerDownLeft aria-hidden=\"true\" className=\"size-3\" />\n        </Kbd>\n        Select\n      </div>\n    </div>\n  );\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "command",
+      "menu",
+      "search",
+      "kbd",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-62.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-62",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/textarea.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-62.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label htmlFor={id} className=\"leading-6\">\n          Textarea with hint\n        </Label>\n        <span className=\"text-sm text-muted-foreground\">Optional</span>\n      </div>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "textarea",
+      "hint"
+    ]
+  }
+}

package/public/r/comp-63.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-63",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/textarea.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-63.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"[--ring:var(--color-indigo-300)] *:not-first:mt-2 in-[.dark]:[--ring:var(--color-indigo-900)]\">\n      <Label htmlFor={id}>Textarea with colored border and ring</Label>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "label",
+      "textarea"
+    ]
+  }
+}