{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-07",
  "title": "Sidebar 07",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/sidebar-07/Sidebar07.tsx",
      "content": "'use client'\n\n// App sidebar with a bottom action bar. Workspace pill + search at the top,\n// three grouped nav sections, user pill above an icon toolbar (Settings,\n// Help, Notifications, Command palette, Log out) anchored at the very\n// bottom. Every row is spelled out inline so you can edit in place.\n\nimport * as React from 'react'\nimport {\n  Bell,\n  ChartBar,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  FileText,\n  HelpCircle,\n  LineChart,\n  Mail,\n  Moon,\n  Package,\n  Plus,\n  Search,\n  Settings as SettingsIcon,\n  ShoppingCart,\n  Sun,\n  Users,\n} from 'lucide-react'\nimport { useTheme } from 'next-themes'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from '@/components/ui/sidebar'\n\nexport function Sidebar07() {\n  const { state } = useSidebar()\n  const { theme, setTheme } = useTheme()\n\n  // `mounted` stays false during SSR + the client's first synchronous\n  // render, so isDark is also false on both sides -- no hydration\n  // mismatch on the Sun/Moon icon. Once hydration settles the effect\n  // flips the flag and the computed re-runs against the real\n  // matchMedia/system signal. Mirrors the sidebar-05 pattern.\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => setMounted(true), [])\n  const isDark =\n    mounted &&\n    (theme === 'dark' ||\n      (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches))\n\n  return (\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" tooltip=\"uipkge\" className=\"group-data-[collapsible=icon]:!justify-center\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6\">\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  className=\"size-4 group-data-[collapsible=icon]:size-3.5\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                  <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                  <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                  <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                </svg>\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n                <span className=\"font-display truncate font-semibold\">uipkge</span>\n                <span className=\"text-muted-foreground truncate text-xs\">uipkge.dev</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <div className=\"px-1 pt-1 group-data-[collapsible=icon]:hidden\">\n          <SidebarInput\n            type=\"text\"\n            placeholder=\"Search...\"\n            allowClear\n            prefix={<Search className=\"text-muted-foreground size-3.5\" />}\n            suffix={\n              <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-[10px] font-medium select-none\">\n                <span>&#8984;</span>K\n              </kbd>\n            }\n          />\n        </div>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                {/* Active row gets a subtle success-tinted gradient to mark it\n                    without competing with the rest of the nav. */}\n                <SidebarMenuButton\n                  isActive\n                  tooltip=\"Analytics\"\n                  className=\"data-[active=true]:!bg-success/20 data-[active=true]:!text-foreground\"\n                >\n                  <ChartBar className=\"size-4\" />\n                  <span>Analytics</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Performance\">\n                  <LineChart className=\"size-4\" />\n                  <span>Performance</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarGroup>\n          <SidebarGroupLabel>Management</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Products\">\n                  <Package className=\"size-4\" />\n                  <span>Products</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Orders\">\n                  <ShoppingCart className=\"size-4\" />\n                  <span>Orders</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Subscribers\">\n                  <Users className=\"size-4\" />\n                  <span>Subscribers</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Transactions\">\n                  <CreditCard className=\"size-4\" />\n                  <span>Transactions</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarGroup>\n          <SidebarGroupLabel>Content</SidebarGroupLabel>\n          <SidebarGroupAction aria-label=\"Add content\">\n            <Plus className=\"size-4\" />\n          </SidebarGroupAction>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Posts\">\n                  <FileText className=\"size-4\" />\n                  <span>Posts</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge className=\"bg-destructive text-white\">10</SidebarMenuBadge>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Pages\">\n                  <Mail className=\"size-4\" />\n                  <span>Pages</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" className=\"group-data-[collapsible=icon]:!justify-center\">\n              <Avatar className=\"size-8 rounded-lg group-data-[collapsible=icon]:size-6\">\n                <AvatarFallback className=\"bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]\">\n                  SW\n                </AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n                <span className=\"truncate font-medium\">Sarah Wilson</span>\n                <span className=\"text-muted-foreground truncate text-xs\">Admin Account</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4 group-data-[collapsible=icon]:hidden\" />\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        {state === 'expanded' ? (\n          <>\n            <SidebarSeparator className=\"my-1\" />\n\n            {/* Action toolbar -- evenly spaced quick icons. Last button is the\n                SidebarTrigger collapse toggle. Replace others with\n                <Link> / <button onClick={...}> as needed. */}\n            <div className=\"flex items-center justify-between px-1 pb-1\">\n              <button\n                type=\"button\"\n                aria-label=\"Settings\"\n                className=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors\"\n              >\n                <SettingsIcon className=\"size-4\" />\n              </button>\n              <button\n                type=\"button\"\n                aria-label=\"Help\"\n                className=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors\"\n              >\n                <HelpCircle className=\"size-4\" />\n              </button>\n              <button\n                type=\"button\"\n                aria-label=\"Notifications\"\n                className=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors\"\n              >\n                <Bell className=\"size-4\" />\n              </button>\n              <button\n                type=\"button\"\n                aria-label=\"Command palette\"\n                className=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors\"\n              >\n                <Command className=\"size-4\" />\n              </button>\n              <button\n                type=\"button\"\n                aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}\n                className=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors\"\n                onClick={() => setTheme(isDark ? 'light' : 'dark')}\n              >\n                {isDark ? <Sun className=\"size-4\" /> : <Moon className=\"size-4\" />}\n              </button>\n              <SidebarTrigger className=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground size-8 rounded-md\" />\n            </div>\n          </>\n        ) : (\n          /* Collapsed-state: surface the trigger on its own so the rail always\n             has an expand affordance. */\n          <div className=\"flex items-center justify-center pb-1\">\n            <SidebarTrigger className=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground size-8 rounded-md\" />\n          </div>\n        )}\n      </SidebarFooter>\n\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Sidebar07.tsx"
    },
    {
      "path": "packages/registry-react/blocks/sidebar-07/page.tsx",
      "content": "// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-07.json`.\n// Visit /sidebar-07-demo after install to see the block without\n// editing your own pages. Free to edit or delete me.\nimport { Sidebar07 } from '@/components/blocks/Sidebar07'\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar07 />\n      <SidebarInset>\n        <header className=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n          <SidebarTrigger className=\"size-7\" />\n          <h1 className=\"text-sm font-semibold\">sidebar-07 demo</h1>\n        </header>\n        <div className=\"flex-1 p-6\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 mt-4 min-h-[60vh] rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}",
      "type": "registry:block",
      "target": "~/app/sidebar-07-demo/page.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/sidebar.json",
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/use-theme.json"
  ],
  "description": "App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard / Management / Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, Log out). Built on sidebar-01.",
  "categories": [
    "sidebar",
    "layout"
  ]
}