{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-01",
  "title": "Sidebar Navigation",
  "description": "A complete workspace sidebar with search, usage and account controls.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@rivelle/utils",
    "@rivelle/avatar",
    "@rivelle/badge",
    "@rivelle/button",
    "@rivelle/input"
  ],
  "files": [
    {
      "path": "registry/nova/blocks/sidebar-01.tsx",
      "content": "import * as React from \"react\";\nimport {\n  Bell,\n  Blocks,\n  ChevronDown,\n  CreditCard,\n  Home,\n  LifeBuoy,\n  Search,\n  Settings,\n  Sparkles,\n  Users,\n} from \"lucide-react\";\n\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\nconst navigation = [\n  { icon: Home, label: \"Overview\", active: true },\n  { icon: Blocks, label: \"Projects\", badge: \"12\" },\n  { icon: Users, label: \"Team\" },\n  { icon: CreditCard, label: \"Billing\" },\n];\n\nfunction Sidebar01({ className, ...props }: React.ComponentProps<\"aside\">) {\n  return (\n    <aside\n      className={cn(\n        \"flex h-[680px] w-full max-w-[280px] flex-col rounded-[2rem] border border-foreground/10 bg-background p-3 shadow-[0_24px_70px_-50px_var(--foreground)]\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-2.5 px-2 py-2 font-semibold\">\n        <span className=\"grid size-8 place-items-center rounded-xl bg-primary text-primary-foreground\">\n          <Sparkles className=\"size-4\" />\n        </span>\n        Rivelle\n        <span className=\"ml-auto\">\n          <ChevronDown className=\"size-4 text-muted-foreground\" />\n        </span>\n      </div>\n      <div className=\"relative mt-4\">\n        <Search className=\"absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n        <Input className=\"h-9 pl-9\" placeholder=\"Search\" />\n      </div>\n      <nav className=\"mt-5 space-y-1\">\n        {navigation.map(({ icon: Icon, label, active, badge }) => (\n          <a\n            className={cn(\n              \"flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-foreground/[.045] hover:text-foreground\",\n              active && \"bg-primary/10 text-primary\",\n            )}\n            href=\"#\"\n            key={label}\n          >\n            <Icon className=\"size-4\" />\n            {label}\n            {badge && (\n              <Badge className=\"ml-auto\" variant=\"secondary\">\n                {badge}\n              </Badge>\n            )}\n          </a>\n        ))}\n      </nav>\n      <div className=\"mt-6 px-3 text-[.65rem] font-semibold uppercase tracking-[.12em] text-muted-foreground\">\n        Workspace\n      </div>\n      <nav className=\"mt-2 space-y-1\">\n        <a\n          className=\"flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-foreground/[.045] hover:text-foreground\"\n          href=\"#\"\n        >\n          <Settings className=\"size-4\" />\n          Settings\n        </a>\n        <a\n          className=\"flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-foreground/[.045] hover:text-foreground\"\n          href=\"#\"\n        >\n          <LifeBuoy className=\"size-4\" />\n          Support\n        </a>\n      </nav>\n      <div className=\"mt-auto rounded-2xl border border-primary/15 bg-primary/[.055] p-4\">\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-xs font-semibold\">Pro plan</p>\n          <Badge variant=\"secondary\">72%</Badge>\n        </div>\n        <div className=\"mt-3 h-1.5 overflow-hidden rounded-full bg-primary/10\">\n          <div className=\"h-full w-[72%] rounded-full bg-primary\" />\n        </div>\n        <p className=\"mt-2 text-[.68rem] text-muted-foreground\">\n          7.2 GB of 10 GB used\n        </p>\n      </div>\n      <div className=\"mt-3 flex items-center gap-3 rounded-2xl p-2 hover:bg-foreground/[.04]\">\n        <Avatar>\n          <AvatarFallback>MC</AvatarFallback>\n        </Avatar>\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"truncate text-xs font-semibold\">Maya Chen</p>\n          <p className=\"truncate text-[.68rem] text-muted-foreground\">\n            maya@rivelle.dev\n          </p>\n        </div>\n        <Button aria-label=\"Notifications\" size=\"icon-sm\" variant=\"ghost\">\n          <Bell />\n        </Button>\n      </div>\n    </aside>\n  );\n}\n\nexport { Sidebar01 };\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}