{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet-4",
  "type": "registry:component",
  "title": "Sheet 4",
  "description": "Sheet 4. A panel that slides in from the edge of the screen to display additional content, forms, or actions without navigating away.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "collapsible",
    "sheet"
  ],
  "files": [
    {
      "path": "components/watermelon/sheet-4.tsx",
      "type": "registry:component",
      "content": "import type { IconType } from 'react-icons';\nimport {\n  HiHome,\n  HiSquares2X2,\n  HiViewColumns,\n  HiChatBubbleLeftRight,\n  HiEnvelope,\n  HiCalendarDays,\n  HiShoppingCart,\n  HiArrowRightOnRectangle,\n  HiArrowLeftOnRectangle,\n  HiHeart,\n  HiBookOpen,\n  HiChevronRight,\n} from 'react-icons/hi2';\n\nimport { Button } from '@/components/base-ui/button';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/base-ui/collapsible';\nimport {\n  Sheet,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/components/base-ui/sheet';\n\ntype NavigationItem = {\n  name: string;\n  icon: IconType;\n} & (\n  | {\n      type: 'page';\n      children?: never;\n    }\n  | {\n      type: 'category';\n      children: NavigationItem[];\n    }\n);\n\nconst navigationMenu: NavigationItem[] = [\n  {\n    name: 'Overview',\n    icon: HiHome,\n    type: 'page',\n  },\n  {\n    name: 'Workspace',\n    icon: HiViewColumns,\n    type: 'category',\n    children: [\n      {\n        name: 'Top Navigation',\n        icon: HiViewColumns,\n        type: 'page',\n      },\n      {\n        name: 'Split Layout',\n        icon: HiViewColumns,\n        type: 'page',\n      },\n      {\n        name: 'Focus Mode',\n        icon: HiViewColumns,\n        type: 'page',\n      },\n    ],\n  },\n  {\n    name: 'Pages',\n    icon: HiSquares2X2,\n    type: 'category',\n    children: [\n      {\n        name: 'Welcome',\n        icon: HiSquares2X2,\n        type: 'page',\n      },\n      {\n        name: 'Subscriptions',\n        icon: HiSquares2X2,\n        type: 'page',\n      },\n      {\n        name: 'Checkout Flow',\n        icon: HiSquares2X2,\n        type: 'page',\n      },\n    ],\n  },\n  {\n    name: 'Conversations',\n    icon: HiChatBubbleLeftRight,\n    type: 'page',\n  },\n  {\n    name: 'Inbox',\n    icon: HiEnvelope,\n    type: 'page',\n  },\n  {\n    name: 'Planner',\n    icon: HiCalendarDays,\n    type: 'page',\n  },\n  {\n    name: 'Commerce',\n    icon: HiShoppingCart,\n    type: 'category',\n    children: [\n      {\n        name: 'Catalog',\n        icon: HiShoppingCart,\n        type: 'page',\n      },\n      {\n        name: 'Collections',\n        icon: HiShoppingCart,\n        type: 'page',\n      },\n      {\n        name: 'Orders',\n        icon: HiShoppingCart,\n        type: 'page',\n      },\n      {\n        name: 'Regions',\n        icon: HiShoppingCart,\n        type: 'page',\n      },\n    ],\n  },\n  {\n    name: 'Login',\n    icon: HiArrowRightOnRectangle,\n    type: 'page',\n  },\n  {\n    name: 'Logout',\n    icon: HiArrowLeftOnRectangle,\n    type: 'page',\n  },\n  {\n    name: 'Support',\n    icon: HiHeart,\n    type: 'page',\n  },\n  {\n    name: 'Resources',\n    icon: HiBookOpen,\n    type: 'page',\n  },\n];\n\nconst NavigationMenu = ({\n  item,\n  level,\n}: {\n  level: number;\n  item: NavigationItem;\n}) => {\n  if (item.type === 'page') {\n    const Icon = item.icon;\n    return (\n      <div\n        className=\"focus-visible:ring-ring/50 flex items-center gap-2 rounded-md p-1 outline-none focus-visible:ring-[3px]\"\n        style={{ paddingLeft: `${level === 0 ? 0.25 : 1.75}rem` }}\n      >\n        <Icon className=\"size-4 shrink-0\" />\n        <span className=\"text-sm\">{item.name}</span>\n      </div>\n    );\n  }\n\n  const Icon = item.icon;\n\n  return (\n    <Collapsible\n      className=\"flex flex-col gap-1.5\"\n      style={{ paddingLeft: `${level === 0 ? 0 : 1.5}rem` }}\n    >\n      <CollapsibleTrigger className=\"focus-visible:ring-ring/50 flex items-center gap-2 rounded-md p-1 outline-none focus-visible:ring-[3px]\">\n        <Icon className=\"size-4 shrink-0\" />\n        <span className=\"flex-1 text-start text-sm\">{item.name}</span>\n        <HiChevronRight className=\"size-4 shrink-0 transition-transform [[data-state=open]>&]:rotate-90\" />\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down flex flex-col gap-1.5 overflow-hidden transition-all duration-300\">\n        {item.children.map((child) => (\n          <NavigationMenu key={child.name} item={child} level={level + 1} />\n        ))}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nconst Sheet4 = () => {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open Panel</Button>\n      </SheetTrigger>\n      <SheetContent side=\"left\" className=\"w-75\">\n        <SheetHeader>\n          <SheetTitle>Workspace</SheetTitle>\n        </SheetHeader>\n        <div className=\"flex flex-col gap-2.5 p-4 pt-0\">\n          {navigationMenu.map((item) => (\n            <NavigationMenu key={item.name} item={item} level={0} />\n          ))}\n        </div>\n      </SheetContent>\n    </Sheet>\n  );\n};\n\nexport default Sheet4;\n"
    }
  ]
}