@astryxdesign/cli 0.0.0-bootstrap.0 → 0.0.15

package/templates/blocks/components/TopNav/TopNavMegaMenu.tsx

@@ -0,0 +1,97 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  TopNav,
+  TopNavHeading,
+  TopNavItem,
+  TopNavMegaMenu,
+  TopNavMegaMenuItem,
+  TopNavMegaMenuFeaturedCard,
+} from '@astryxdesign/core/TopNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Button} from '@astryxdesign/core/Button';
+import {Icon} from '@astryxdesign/core/Icon';
+import {
+  CubeIcon,
+  ChartBarIcon,
+  ShieldCheckIcon,
+  BoltIcon,
+  CodeBracketIcon,
+  GlobeAltIcon,
+} from '@heroicons/react/24/outline';
+
+export default function TopNavMegaMenuBlock() {
+  return (
+    <TopNav
+      label="Marketing navigation"
+      heading={
+        <TopNavHeading
+          heading="My App"
+          logo={<NavIcon icon={<Icon icon={CubeIcon} size="sm" />} />}
+          href="#"
+        />
+      }
+      startContent={
+        <>
+          <TopNavMegaMenu
+            label="Products"
+            items={
+              <>
+                <TopNavMegaMenuItem
+                  title="Analytics"
+                  description="Track and analyze user behavior across your apps"
+                  icon={<ChartBarIcon />}
+                  href="#analytics"
+                />
+                <TopNavMegaMenuItem
+                  title="Security"
+                  description="Enterprise-grade protection for your data"
+                  icon={<ShieldCheckIcon />}
+                  href="#security"
+                />
+                <TopNavMegaMenuItem
+                  title="Automation"
+                  description="Streamline workflows with intelligent tools"
+                  icon={<BoltIcon />}
+                  href="#automation"
+                />
+                <TopNavMegaMenuItem
+                  title="Developer Tools"
+                  description="APIs, SDKs, and CLI for integration"
+                  icon={<CodeBracketIcon />}
+                  href="#dev-tools"
+                />
+                <TopNavMegaMenuItem
+                  title="Global Network"
+                  description="Low-latency edge infra in 40+ regions"
+                  icon={<GlobeAltIcon />}
+                  href="#network"
+                />
+              </>
+            }
+            featured={
+              <TopNavMegaMenuFeaturedCard
+                title="What's new in v4.0"
+                description="AI-powered analytics and real-time collaboration."
+                image="https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png"
+                imageAlt="Team collaboration"
+                linkLabel="Read the announcement"
+                linkHref="#announcement"
+              />
+            }
+          />
+          <TopNavItem label="Pricing" href="#" />
+          <TopNavItem label="Docs" href="#" />
+        </>
+      }
+      endContent={
+        <>
+          <Button label="Sign in" variant="ghost" />
+          <Button label="Get started" variant="primary" />
+        </>
+      }
+    />
+  );
+}

package/templates/blocks/components/TopNav/TopNavMultipleDropdowns.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNav',
+  name: 'TopNav — Multiple Dropdowns',
+  displayName: 'TopNav — Multiple Dropdowns',
+  description:
+    'Navigation bar with multiple hover-triggered dropdown menus that auto-close when switching between them.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNav', 'TopNavMenu'],
+};

package/templates/blocks/components/TopNav/TopNavMultipleDropdowns.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  TopNav,
+  TopNavHeading,
+  TopNavItem,
+  TopNavMenu,
+} from '@astryxdesign/core/TopNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Icon} from '@astryxdesign/core/Icon';
+import {
+  CubeIcon,
+  ChartBarIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/outline';
+
+export default function TopNavMultipleDropdowns() {
+  return (
+    <TopNav
+      label="Main navigation"
+      heading={
+        <TopNavHeading
+          heading="My App"
+          logo={<NavIcon icon={<Icon icon={CubeIcon} size="sm" />} />}
+          href="#"
+        />
+      }
+      startContent={
+        <>
+          <TopNavMenu
+            label="Products"
+            items={[
+              {
+                title: 'Analytics',
+                description: 'Track behavior',
+                icon: <ChartBarIcon />,
+                href: '#',
+              },
+              {
+                title: 'Security',
+                description: 'Enterprise protection',
+                icon: <ShieldCheckIcon />,
+                href: '#',
+              },
+            ]}
+          />
+          <TopNavMenu
+            label="Resources"
+            items={[
+              {title: 'Documentation', href: '#'},
+              {title: 'API Reference', href: '#'},
+              {title: 'Community Forum', href: '#'},
+            ]}
+          />
+          <TopNavItem label="Pricing" href="#" />
+        </>
+      }
+    />
+  );
+}

package/templates/blocks/components/TopNav/TopNavShowcase.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNav',
+  name: 'TopNav',
+  displayName: 'Top Nav',
+  isReady: true,
+  aspectRatio: 3,
+  isShowcase: true,
+  componentsUsed: ['Button', 'Icon', 'TopNav'],
+};

package/templates/blocks/components/TopNav/TopNavShowcase.tsx

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Button} from '@astryxdesign/core/Button';
+import {Icon} from '@astryxdesign/core/Icon';
+import {BellIcon, CubeIcon, UserCircleIcon} from '@heroicons/react/24/outline';
+
+export default function TopNavShowcase() {
+  return (
+    <TopNav
+      style={{width: 600}}
+      label="Main navigation"
+      heading={
+        <TopNavHeading
+          heading="My App"
+          logo={<NavIcon icon={<Icon icon={CubeIcon} size="sm" />} />}
+        />
+      }
+      startContent={
+        <>
+          <TopNavItem label="Home" href="#" isSelected />
+          <TopNavItem label="Products" href="#" />
+          <TopNavItem label="About" href="#" />
+        </>
+      }
+      endContent={
+        <>
+          <Button
+            label="Search"
+            variant="ghost"
+            icon={<Icon icon="search" color="inherit" />}
+            isIconOnly
+          />
+          <Button
+            label="Notifications"
+            variant="ghost"
+            icon={<BellIcon />}
+            isIconOnly
+          />
+          <Button
+            label="Profile"
+            variant="ghost"
+            icon={<UserCircleIcon />}
+            isIconOnly
+          />
+        </>
+      }
+    />
+  );
+}

package/templates/blocks/components/TopNav/TopNavWithLogo.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNav',
+  name: 'TopNav — With Logo',
+  displayName: 'TopNav — With Logo',
+  description:
+    'Navigation bar with a branded logo icon, heading link, nav items, and a profile action.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNav', 'NavIcon', 'Button'],
+};

package/templates/blocks/components/TopNav/TopNavWithLogo.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Button} from '@astryxdesign/core/Button';
+import {Icon} from '@astryxdesign/core/Icon';
+import {CubeIcon, UserCircleIcon} from '@heroicons/react/24/outline';
+
+export default function TopNavWithLogo() {
+  return (
+    <TopNav
+      label="Main navigation"
+      heading={
+        <TopNavHeading
+          heading="My App"
+          logo={<NavIcon icon={<Icon icon={CubeIcon} size="sm" />} />}
+          href="#"
+        />
+      }
+      startContent={
+        <>
+          <TopNavItem label="Overview" href="#" isSelected />
+          <TopNavItem label="Analytics" href="#" />
+          <TopNavItem label="Reports" href="#" />
+        </>
+      }
+      endContent={
+        <Button
+          label="Profile"
+          variant="ghost"
+          icon={<UserCircleIcon />}
+          isIconOnly
+        />
+      }
+    />
+  );
+}

package/templates/blocks/components/TopNavHeading/TopNavHeadingShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNavHeading',
+  name: 'TopNavHeading',
+  displayName: 'Top Nav Heading',
+  description: 'Demonstrates TopNavHeading with a logo and text, both as a plain display and as a clickable link.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 3,
+  componentsUsed: ['TopNav', 'TopNavHeading'],
+};

package/templates/blocks/components/TopNavHeading/TopNavHeadingShowcase.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNav, TopNavHeading} from '@astryxdesign/core/TopNav';
+import {VStack} from '@astryxdesign/core/Layout';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+
+function AppIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z"
+      />
+    </svg>
+  );
+}
+
+export default function TopNavHeadingShowcase() {
+  return (
+    <VStack gap={4}>
+      <TopNav
+        label="Plain heading example"
+        heading={
+          <TopNavHeading
+            heading="Acme Platform"
+            logo={<NavIcon icon={<AppIcon />} />}
+          />
+        }
+      />
+      <TopNav
+        label="Linked heading example"
+        heading={
+          <TopNavHeading
+            heading="Acme Platform"
+            logo={<AppIcon />}
+            href="/"
+          />
+        }
+      />
+    </VStack>
+  );
+}

package/templates/blocks/components/TopNavItem/TopNavItemShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNavItem',
+  name: 'TopNavItem',
+  displayName: 'Top Nav Item',
+  description: 'Demonstrates TopNavItem with selected, icon, disabled, and default states.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 3,
+  componentsUsed: ['TopNav', 'TopNavItem'],
+};

package/templates/blocks/components/TopNavItem/TopNavItemShowcase.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';
+import {Icon} from '@astryxdesign/core/Icon';
+
+function HomeIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      />
+    </svg>
+  );
+}
+
+export default function TopNavItemShowcase() {
+  return (
+    <TopNav
+      style={{width: 600}}
+      label="Navigation items demo"
+      heading={<TopNavHeading heading="App" />}
+      startContent={
+        <>
+          <TopNavItem
+            label="Dashboard"
+            href="#"
+            isSelected
+            icon={<HomeIcon />}
+          />
+          <TopNavItem label="Projects" href="#" />
+          <TopNavItem label="Reports" href="#" />
+          <TopNavItem label="Archived" href="#" isDisabled />
+        </>
+      }
+      endContent={<Icon icon="search" />}
+    />
+  );
+}

package/templates/blocks/components/TopNavMegaMenu/TopNavMegaMenuShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNavMegaMenu',
+  name: 'TopNavMegaMenu',
+  displayName: 'Top Nav Mega Menu',
+  description: 'Demonstrates TopNavMegaMenu with items and a featured card in the mega menu panel.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNav', 'TopNavMegaMenu', 'TopNavMegaMenuItem', 'TopNavMegaMenuFeaturedCard'],
+};

package/templates/blocks/components/TopNavMegaMenu/TopNavMegaMenuShowcase.tsx

@@ -0,0 +1,74 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  TopNav,
+  TopNavHeading,
+  TopNavItem,
+  TopNavMegaMenu,
+  TopNavMegaMenuItem,
+  TopNavMegaMenuFeaturedCard,
+} from '@astryxdesign/core/TopNav';
+import {
+  RocketLaunchIcon,
+  BookOpenIcon,
+  CodeBracketIcon,
+  ShieldCheckIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
+
+export default function TopNavMegaMenuShowcase() {
+  return (
+    <TopNav
+      style={{width: 600}}
+      label="Mega menu demo"
+      heading={<TopNavHeading heading="DevTools" />}
+      startContent={
+        <>
+          <TopNavItem label="Overview" href="#" isSelected />
+          <TopNavMegaMenu
+            label="Products"
+            items={
+              <>
+                <TopNavMegaMenuItem
+                  title="Deploy"
+                  description="Ship to production in seconds"
+                  icon={<RocketLaunchIcon width={20} height={20} />}
+                  href="#deploy"
+                />
+                <TopNavMegaMenuItem
+                  title="Documentation"
+                  description="Guides, references, and tutorials"
+                  icon={<BookOpenIcon width={20} height={20} />}
+                  href="#docs"
+                />
+                <TopNavMegaMenuItem
+                  title="API"
+                  description="Programmatic access to all features"
+                  icon={<CodeBracketIcon width={20} height={20} />}
+                  href="#api"
+                />
+                <TopNavMegaMenuItem
+                  title="Security"
+                  description="Enterprise-grade protection"
+                  icon={<ShieldCheckIcon width={20} height={20} />}
+                  href="#security"
+                />
+              </>
+            }
+            featured={
+              <TopNavMegaMenuFeaturedCard
+                title="What's New"
+                description="Check out our latest features and improvements in the Q2 release."
+                linkLabel="Read the changelog"
+                linkHref="#changelog"
+              />
+            }
+          />
+        </>
+      }
+      endContent={<MagnifyingGlassIcon width={20} height={20} />}
+    />
+  );
+}

package/templates/blocks/components/TopNavMegaMenuFeaturedCard/TopNavMegaMenuFeaturedCardShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNavMegaMenuFeaturedCard',
+  name: 'TopNavMegaMenuFeaturedCard',
+  displayName: 'Top Nav Mega Menu Featured Card',
+  description: 'Demonstrates TopNavMegaMenuFeaturedCard with a title, description, and CTA link inside a mega menu.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNav', 'TopNavMegaMenu', 'TopNavMegaMenuFeaturedCard', 'TopNavMegaMenuItem'],
+};

package/templates/blocks/components/TopNavMegaMenuFeaturedCard/TopNavMegaMenuFeaturedCardShowcase.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNavMegaMenuFeaturedCard} from '@astryxdesign/core/TopNav';
+
+export default function TopNavMegaMenuFeaturedCardShowcase() {
+  return (
+    <TopNavMegaMenuFeaturedCard
+      title="Introducing v2.0"
+      description="Our biggest release yet with new components, faster builds, and a refreshed design language."
+      linkLabel="Explore the release"
+      linkHref="#release"
+    />
+  );
+}

package/templates/blocks/components/TopNavMegaMenuItem/TopNavMegaMenuItemShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNavMegaMenuItem',
+  name: 'TopNavMegaMenuItem',
+  displayName: 'Top Nav Mega Menu Item',
+  description: 'Demonstrates TopNavMegaMenuItem with icons, titles, and descriptions inside a mega menu.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNav', 'TopNavMegaMenu', 'TopNavMegaMenuItem'],
+};

package/templates/blocks/components/TopNavMegaMenuItem/TopNavMegaMenuItemShowcase.tsx

@@ -0,0 +1,69 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TopNavMegaMenuItem} from '@astryxdesign/core/TopNav';
+import {Grid} from '@astryxdesign/core/Grid';
+
+function BoltIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path strokeLinecap="round" strokeLinejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
+    </svg>
+  );
+}
+
+function CubeIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+    </svg>
+  );
+}
+
+function GlobeIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A8.966 8.966 0 0 1 3 12c0-1.264.26-2.466.732-3.558" />
+    </svg>
+  );
+}
+
+function WrenchIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.049.58.025 1.192-.14 1.743" />
+    </svg>
+  );
+}
+
+export default function TopNavMegaMenuItemShowcase() {
+  return (
+    <Grid columns={2} gap={2}>
+      <TopNavMegaMenuItem
+        title="Edge Functions"
+        description="Run serverless code at the network edge"
+        icon={<BoltIcon />}
+        href="#edge"
+      />
+      <TopNavMegaMenuItem
+        title="Storage"
+        description="Object and file storage for your application"
+        icon={<CubeIcon />}
+        href="#storage"
+      />
+      <TopNavMegaMenuItem
+        title="CDN"
+        description="Global content delivery with instant purging"
+        icon={<GlobeIcon />}
+        href="#cdn"
+      />
+      <TopNavMegaMenuItem
+        title="Build Tools"
+        description="Optimized bundling and compilation pipeline"
+        icon={<WrenchIcon />}
+        href="#build"
+      />
+    </Grid>
+  );
+}

package/templates/blocks/components/TopNavMenu/TopNavMenuShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TopNavMenu',
+  name: 'TopNavMenu',
+  displayName: 'Top Nav Menu',
+  description: 'Demonstrates TopNavMenu with a hover-triggered dropdown containing items with icons and descriptions.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TopNav', 'TopNavMenu', 'TopNavItem'],
+};