blocks-dusted 0.1.5 → 0.1.8

package/README.md

@@ -356,6 +356,8 @@ pnpm dlx blocks-dusted doctor
 pnpm dlx blocks-dusted add DD-Hero --dry-run
 pnpm dlx blocks-dusted add DD-Hero
 pnpm dlx blocks-dusted add RichText
+pnpm dlx blocks-dusted header add HeaderDD02 --dry-run
+pnpm dlx blocks-dusted header add HeaderDD02
 ```
 
 Use `blocks-dusted list` first to see the exact available block names in the package. `DD-Hero` is an existing block in the current manifest registry.
@@ -378,6 +380,8 @@ blocks-dusted add DD-Hero --dry-run
 blocks-dusted add DD-Hero --no-register
 blocks-dusted add DD-Hero --cwd C:\Projects\my-payload-site
 blocks-dusted add RichText --cwd C:\Projects\my-payload-site
+blocks-dusted header add HeaderDD02 --dry-run
+blocks-dusted header add HeaderDD02
 ```
 
 `--cwd` targets a Payload project directory without changing your shell directory. Relative `--cwd` values resolve from the directory where you launched the command.
@@ -403,6 +407,17 @@ pnpm payload generate:importmap
 
 The CLI does not run migrations or build the target project.
 
+### Header workflows
+
+Headers are active Payload globals and layout wiring, not ordinary page blocks. Use the dedicated header workflow when you want to activate a reusable header implementation.
+
+```bash
+pnpm dlx blocks-dusted header add HeaderDD02 --dry-run
+pnpm dlx blocks-dusted header add HeaderDD02
+```
+
+The HeaderDD02 workflow backs up the active Header config, Nav renderer, and RowLabel before patching them. It installs the HeaderDD02 variant files, copies missing shared UI primitives, patches `src/Header/Nav/index.tsx` to render HeaderDD02, and patches `src/Header/config.ts` to expose HeaderDD02 fields while retaining legacy starter `navItems` as hidden data. Run Payload type and import-map generation after reviewing the changes.
+
 ## Payload Block Standard
 
 ### Purpose

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blocks-dusted",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "Manifest-driven CLI for installing reusable Payload CMS blocks.",
   "type": "module",
   "bin": {

package/src/cli.js

@@ -2,6 +2,7 @@ import { readFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
 import { addTemplate } from './commands/add.js'
 import { doctor } from './commands/doctor.js'
+import { addHeader } from './commands/header.js'
 import { list } from './commands/list.js'
 import { error, info } from './utils/logger.js'
 import { packageRoot } from './utils/paths.js'
@@ -12,7 +13,8 @@ function printHelp() {
   info('Usage:')
   info('  blocks-dusted list')
   info('  blocks-dusted doctor [--cwd <path>]')
-  info('  blocks-dusted add <BlockName> [--dry-run] [--no-register] [--cwd <path>]')
+  info('  blocks-dusted add <TemplateName> [--dry-run] [--no-register] [--cwd <path>]')
+  info('  blocks-dusted header add <HeaderName> [--dry-run] [--cwd <path>]')
   info('  blocks-dusted --version')
 }
 
@@ -34,6 +36,17 @@ export async function runCli(args, options = {}) {
 
   if (command === 'list') return list()
   if (command === 'doctor') return doctor({ targetDirectory })
+  if (command === 'header') {
+    const [subcommand, ...headerRest] = rest
+    if (subcommand !== 'add') throw new Error('Usage: blocks-dusted header add <HeaderName> [--dry-run]')
+    const headerName = headerRest.find((argument) => !argument.startsWith('-'))
+    return addHeader({
+      headerName,
+      targetDirectory,
+      dryRun: headerRest.includes('--dry-run'),
+    })
+  }
+
   if (command === 'add') {
     const templateName = rest.find((argument) => !argument.startsWith('-'))
     return addTemplate({

package/src/commands/header.js

@@ -0,0 +1,145 @@
+import { writeFile } from 'node:fs/promises'
+import { copySharedFiles, copyTemplateFiles, backupExistingDestination, plannedBackupPath } from '../installers/copyTemplateFiles.js'
+import { checkDependencies } from '../installers/installDependencies.js'
+import { checkRequirements } from '../installers/checkRequirements.js'
+import { loadTemplateManifest } from '../registry/loadTemplateManifest.js'
+import { validateTemplateManifest } from '../registry/validateTemplateManifest.js'
+import { heading, info, item, status } from '../utils/logger.js'
+import { packageRoot } from '../utils/paths.js'
+import { fileExists, validateTargetProject } from '../utils/project.js'
+
+const SUPPORTED_HEADERS = new Set(['HeaderDD02'])
+const ACTIVE_HEADER_FILES = [
+  'src/Header/config.ts',
+  'src/Header/Nav/index.tsx',
+  'src/Header/RowLabel.tsx',
+]
+
+export async function addHeader({ headerName, targetDirectory = process.cwd(), dryRun = false }) {
+  if (!headerName) throw new Error('A header name is required. Example: blocks-dusted header add HeaderDD02 --dry-run')
+  if (!SUPPORTED_HEADERS.has(headerName)) throw new Error(`Unsupported header workflow: ${headerName}`)
+
+  const { manifest, templateDirectory } = await loadTemplateManifest(headerName)
+  validateTemplateManifest(manifest)
+  if (manifest.type !== 'component') throw new Error(`${headerName} must be a component template.`)
+
+  const checks = await checkRequirements({ manifest, targetDirectory })
+  const dependencyChecks = await checkDependencies({ manifest, targetDirectory })
+  const project = await validateTargetProject(targetDirectory)
+  const missingRequired = checks.missingRequirements ?? []
+  if (missingRequired.length > 0) {
+    throw new Error(`Required project files are missing:\n${missingRequired.map(formatMissingRequirement).join('\n')}`)
+  }
+
+  const activeFileChecks = await Promise.all(
+    ACTIVE_HEADER_FILES.map(async (path) => ({ path, exists: await fileExists(`${targetDirectory}/${path}`) })),
+  )
+  const missingActive = activeFileChecks.filter((check) => !check.exists)
+  if (missingActive.length > 0) {
+    throw new Error(`Active Header files are missing:\n${missingActive.map((check) => `- ${check.path}`).join('\n')}`)
+  }
+
+  const destinationBackupPath = checks.collisions.destinationExists
+    ? await plannedBackupPath({ destinationPath: checks.collisions.destinationPath, targetDirectory })
+    : null
+  const activeBackups = await Promise.all(
+    ACTIVE_HEADER_FILES.map(async (path) => ({
+      path,
+      backupPath: await plannedBackupPath({ destinationPath: path, targetDirectory }),
+    })),
+  )
+
+  heading('Header workflow')
+  info(`Name: ${manifest.name}`)
+  info(`Target directory: ${targetDirectory}`)
+  info(`Payload config: ${project.payloadConfigPath}`)
+  info(`Source template path: ${templateDirectory}`)
+  info(`Target install path: ${checks.collisions.destinationPath}`)
+
+  heading(dryRun ? 'Files that would be installed' : 'Files to install')
+  for (const file of manifest.files) item(`${file.from} -> ${file.to}`)
+
+  heading('Required project files')
+  for (const check of checks.requiredFiles) status(check.exists, check.path, check.reason)
+
+  heading('Shared files')
+  if ((manifest.sharedFiles ?? []).length === 0) item('None')
+  for (const file of manifest.sharedFiles ?? []) item(`${file.from} -> ${file.to}`)
+
+  heading('Package dependencies')
+  for (const dependency of dependencyChecks.declared) {
+    const isMissing = dependencyChecks.missing.some((missing) => missing.name === dependency.name)
+    status(!isMissing, formatDependency(dependency), isMissing ? 'missing' : 'already listed')
+  }
+  if (dependencyChecks.missing.length > 0) item(`Install command: ${installCommandText(dependencyChecks.packageManager, dependencyChecks.missing)}`)
+
+  heading('Active Header backups')
+  for (const backup of activeBackups) {
+    item(dryRun ? `Would back up ${backup.path} to ${backup.backupPath}` : `Will back up ${backup.path} to ${backup.backupPath}`)
+  }
+  if (destinationBackupPath) {
+    item(dryRun ? `Would back up ${checks.collisions.destinationPath} to ${destinationBackupPath}` : `Will back up ${checks.collisions.destinationPath} to ${destinationBackupPath}`)
+  }
+
+  heading('Activation patches')
+  item('Patch src/Header/Nav/index.tsx to render HeaderDD02')
+  item('Patch src/Header/config.ts to expose HeaderDD02 fields and preserve legacy navItems as hidden data')
+
+  if (dryRun) {
+    const sharedResults = await copySharedFiles({ manifest, packageRoot, targetDirectory, dryRun: true })
+    heading('Dry-run shared file results')
+    if (sharedResults.length === 0) item('None')
+    sharedResults.forEach((result) => item(`${result.status}: ${result.to}${result.reason ? ` - ${result.reason}` : ''}`))
+    info('Dry run complete: no files were changed.')
+    return
+  }
+
+  const sharedResults = await copySharedFiles({ manifest, packageRoot, targetDirectory })
+
+  if (checks.collisions.destinationExists) {
+    await backupExistingDestination({ destinationPath: checks.collisions.destinationPath, targetDirectory })
+  }
+  for (const file of ACTIVE_HEADER_FILES) {
+    await backupExistingDestination({ destinationPath: file, targetDirectory })
+  }
+
+  const copiedFiles = await copyTemplateFiles({ manifest, templateDirectory, targetDirectory })
+  await writeFile(`${targetDirectory}/src/Header/Nav/index.tsx`, renderHeaderNav())
+  await writeFile(`${targetDirectory}/src/Header/config.ts`, renderHeaderConfig())
+
+  heading('Copied files')
+  copiedFiles.forEach((file) => item(file))
+  heading('Shared file results')
+  if (sharedResults.length === 0) item('None')
+  sharedResults.forEach((result) => item(`${result.status}: ${result.to}${result.reason ? ` - ${result.reason}` : ''}`))
+  heading('Dependency install')
+  item('Skipped: dependency installation is manual')
+  if (dependencyChecks.missing.length > 0) item(`Run manually: ${installCommandText(dependencyChecks.packageManager, dependencyChecks.missing)}`)
+  heading('Payload commands to run manually')
+  const payloadCommand = dependencyChecks.packageManager === 'npm' ? 'npx payload' : `${dependencyChecks.packageManager} payload`
+  item(`${payloadCommand} generate:types`)
+  item(`${payloadCommand} generate:importmap`)
+  info('Header workflow complete.')
+}
+
+function renderHeaderNav() {
+  return `import React from 'react'\n\nimport type { Header as HeaderType } from '@/payload-types'\n\nimport HeaderDD02 from '@/Header/variants/HeaderDD02'\n\nexport const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {\n  return <HeaderDD02 data={data} />\n}\n`
+}
+
+function renderHeaderConfig() {
+  return `import type { GlobalConfig } from 'payload'\n\nimport { iconPicker } from '@/fields/lucide-icon-picker/field'\nimport { link } from '@/fields/link'\nimport { HeaderDD02 } from '@/Header/variants/HeaderDD02/config'\nimport { revalidateHeader } from './hooks/revalidateHeader'\n\nexport const Header: GlobalConfig = {\n  slug: 'header',\n  access: {\n    read: () => true,\n    update: () => true,\n  },\n  fields: [\n    {\n      name: 'variant',\n      label: 'Variant',\n      type: 'select',\n      defaultValue: 'header02',\n      options: [{ label: 'Header DD 02', value: 'header02' }],\n      admin: {\n        position: 'sidebar',\n      },\n    },\n    {\n      name: 'header02',\n      type: 'group',\n      fields: HeaderDD02,\n    },\n    {\n      name: 'navItems',\n      type: 'array',\n      admin: {\n        hidden: true,\n        description: 'Legacy starter Header navItems retained so existing stored header data is not discarded.',\n      },\n      fields: [\n        link({ appearances: false }),\n        iconPicker({\n          name: 'icon',\n          required: false,\n          description: 'Legacy optional icon to display with the navigation item',\n        }),\n      ],\n    },\n  ],\n  hooks: {\n    afterChange: [revalidateHeader],\n  },\n}\n`
+}
+
+function formatMissingRequirement(check) {
+  const resolution = check.resolution ? `\n  Resolve: ${check.resolution}` : ''
+  return `- ${check.path}: ${check.reason}${resolution}`
+}
+
+function formatDependency(dependency) {
+  return `${dependency.name}${dependency.version ? `@${dependency.version}` : ''}`
+}
+
+function installCommandText(packageManager, dependencies) {
+  const command = packageManager === 'yarn' ? ['yarn', 'add'] : packageManager === 'bun' ? ['bun', 'add'] : packageManager === 'npm' ? ['npm', 'install'] : ['pnpm', 'add']
+  return [...command, ...dependencies.map(formatDependency)].join(' ')
+}

package/templates/components/HeaderDD02/MobileBottomNav/index.tsx

@@ -133,7 +133,7 @@ export default function MobileBottomNav({ data }: MobileBottomNavProps) {
   const pathname = usePathname()
   const normalizedCurrentPathname = useMemo(() => normalizePath(pathname), [pathname])
 
-  const navItems = data?.header02?.navItems || []
+  const navItems = data?.header02?.navItems || (data as any)?.navItems || []
   const showLabels = data?.header02?.showMobileLabels ?? true
 
   useEffect(() => {

package/templates/components/HeaderDD02/README.md

@@ -43,3 +43,9 @@ Do not modify database records automatically.
 Do not run destructive migrations.
 Do not remove the existing header until the replacement is verified.
 ```
+
+## Bundled shared UI primitives
+
+HeaderDD02 includes shared templates for `src/components/ui/navigation-menu.tsx`, `src/components/animate-ui/components/animate/tooltip.tsx`, `src/components/animate-ui/primitives/animate/tooltip.tsx`, `src/components/animate-ui/primitives/animate/slot.tsx`, and `src/lib/get-strict-context.tsx`. The installer copies them only when missing and preserves existing target files.
+
+If package dependencies are missing, run the install command printed by the CLI, for example `pnpm add @radix-ui/react-navigation-menu class-variance-authority motion @floating-ui/react`.

package/templates/components/HeaderDD02/index.tsx

@@ -251,7 +251,7 @@ export default function HeaderDD02({ data, variant = 'default', sticky = true }:
   }, [enableHideOnScroll, scrollThreshold])
 
   // Extract navItems from header02 data
-  const navItems = data?.header02?.navItems || []
+  const navItems = data?.header02?.navItems || (data as any)?.navItems || []
 
   return (
     <>

package/templates/components/HeaderDD02/manifest.json

@@ -56,6 +56,18 @@
     },
     {
       "name": "lucide-react"
+    },
+    {
+      "name": "@radix-ui/react-navigation-menu"
+    },
+    {
+      "name": "class-variance-authority"
+    },
+    {
+      "name": "motion"
+    },
+    {
+      "name": "@floating-ui/react"
     }
   ],
   "requiredProjectFiles": [
@@ -71,11 +83,6 @@
       "path": "src/fields/lucide-icon-picker/field.ts",
       "reason": "HeaderDD02 dropdown trigger icons reuse the shared icon picker field."
     },
-    {
-      "path": "src/components/ui/navigation-menu.tsx",
-      "reason": "HeaderDD02 desktop navigation renders the target project's NavigationMenu primitives.",
-      "resolution": "Install the shadcn/radix NavigationMenu primitive used by the target project, or copy the target project's existing navigation-menu.tsx to src/components/ui/navigation-menu.tsx before installing HeaderDD02."
-    },
     {
       "path": "src/components/RichText/index.tsx",
       "reason": "HeaderDD02 renders richTextContent and floatingContent through the target project's RichText renderer."
@@ -83,11 +90,6 @@
     {
       "path": "src/utilities/ui.ts",
       "reason": "HeaderDD02 uses cn from @/utilities/ui."
-    },
-    {
-      "path": "src/components/animate-ui/components/animate/tooltip.tsx",
-      "reason": "HeaderDD02 MobileBottomNav uses the target tooltip primitives.",
-      "resolution": "Install or copy the animate-ui tooltip primitive that exports TooltipProvider, Tooltip, TooltipTrigger, and TooltipContent at src/components/animate-ui/components/animate/tooltip.tsx before installing HeaderDD02."
     }
   ],
   "collectionRegistration": {
@@ -104,7 +106,7 @@
     "Inspect any existing target Header richText data before replacing an active Header schema. Do not apply the empty nested blocks extension point to stored content that already depends on registered block node types.",
     "Verify the target `src/fields/defaultLexical.ts` exports a compatible `defaultLexical` helper that accepts `defaultLexical({ features: [] })` and does not inject unrelated project-specific blocks.",
     "Wire `HeaderDD02` into the target Header global or render it directly after confirming the target project will not render two headers.",
-    "If HeaderDD02 reports missing UI primitives, add `src/components/ui/navigation-menu.tsx` and `src/components/animate-ui/components/animate/tooltip.tsx` from the target design system before rerunning the installer."
+    "HeaderDD02 can install its missing NavigationMenu and animate-ui tooltip primitives as shared files. Existing target files are preserved and skipped instead of overwritten."
   ],
   "manualSteps": [
     "This header uses the shared `defaultLexical` editor standard from `@/fields/defaultLexical`. Project-specific Lexical blocks are intentionally not bundled. The nested `BlocksFeature` uses an empty `blocks` array so each target project can register only the blocks it requires.",
@@ -114,14 +116,47 @@
     "Inspect any existing target Header richText data before replacing an active Header schema. Do not apply the empty nested blocks extension point to stored content that already depends on registered block node types.",
     "Verify the target `src/fields/defaultLexical.ts` exports a compatible `defaultLexical` helper that accepts `defaultLexical({ features: [] })` and does not inject unrelated project-specific blocks.",
     "Wire `HeaderDD02` into the target Header global or render it directly after confirming the target project will not render two headers.",
-    "If HeaderDD02 reports missing UI primitives, add `src/components/ui/navigation-menu.tsx` and `src/components/animate-ui/components/animate/tooltip.tsx` from the target design system before rerunning the installer."
+    "HeaderDD02 can install its missing NavigationMenu and animate-ui tooltip primitives as shared files. Existing target files are preserved and skipped instead of overwritten."
   ],
   "notes": [
     "Converted from DesignsDustedv3 Header02 after tracing Header/variants/Header02/index.tsx and its direct imports.",
     "Header02 styling is inline Tailwind class usage plus style jsx global blocks in index.tsx and MobileBottomNav/index.tsx; no separate Header02 stylesheet was imported.",
-    "Parent Header files were audited but excluded because the reusable export targets Header02 only, not the multi-variant app header shell."
+    "Parent Header files were audited but excluded because the reusable export targets Header02 only, not the multi-variant app header shell.",
+    "NavigationMenu and animate-ui tooltip primitives are bundled as shared files because HeaderDD02 imports them directly."
   ],
   "backupExistingDestination": true,
   "exportName": "HeaderDD02",
-  "interfaceName": "HeaderDD02"
+  "interfaceName": "HeaderDD02",
+  "sharedFiles": [
+    {
+      "from": "templates/shared/components/ui/navigation-menu.tsx",
+      "to": "src/components/ui/navigation-menu.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/components/animate-ui/components/animate/tooltip.tsx",
+      "to": "src/components/animate-ui/components/animate/tooltip.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/components/animate-ui/primitives/animate/tooltip.tsx",
+      "to": "src/components/animate-ui/primitives/animate/tooltip.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/components/animate-ui/primitives/animate/slot.tsx",
+      "to": "src/components/animate-ui/primitives/animate/slot.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/lib/get-strict-context.tsx",
+      "to": "src/lib/get-strict-context.tsx",
+      "required": true,
+      "safeToCopy": true
+    }
+  ]
 }

package/templates/shared/components/animate-ui/components/animate/tooltip.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import * as motion from 'motion/react-client';
+
+import {
+  TooltipProvider as TooltipProviderPrimitive,
+  Tooltip as TooltipPrimitive,
+  TooltipTrigger as TooltipTriggerPrimitive,
+  TooltipContent as TooltipContentPrimitive,
+  TooltipArrow as TooltipArrowPrimitive,
+  type TooltipProviderProps as TooltipProviderPrimitiveProps,
+  type TooltipProps as TooltipPrimitiveProps,
+  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,
+  type TooltipContentProps as TooltipContentPrimitiveProps,
+} from '@/components/animate-ui/primitives/animate/tooltip';
+import { cn } from '@/utilities/ui';
+
+type TooltipProviderProps = TooltipProviderPrimitiveProps;
+
+function TooltipProvider({ openDelay = 0, ...props }: TooltipProviderProps) {
+  return <TooltipProviderPrimitive openDelay={openDelay} {...props} />;
+}
+
+type TooltipProps = TooltipPrimitiveProps;
+
+function Tooltip({ sideOffset = 10, ...props }: TooltipProps) {
+  return <TooltipPrimitive sideOffset={sideOffset} {...props} />;
+}
+
+type TooltipTriggerProps = TooltipTriggerPrimitiveProps;
+
+function TooltipTrigger({ ...props }: TooltipTriggerProps) {
+  return <TooltipTriggerPrimitive {...props} />;
+}
+
+type TooltipContentProps = Omit<TooltipContentPrimitiveProps, 'asChild'> & {
+  children: React.ReactNode;
+  layout?: boolean | 'position' | 'size' | 'preserve-aspect';
+};
+
+function TooltipContent({
+  className,
+  children,
+  layout = 'preserve-aspect',
+  ...props
+}: TooltipContentProps) {
+  return (
+    <TooltipContentPrimitive
+      className={cn(
+        'z-50 w-fit bg-primary text-primary-foreground rounded-md',
+        className,
+      )}
+      {...props}
+    >
+      <motion.div className="overflow-hidden px-3 py-1.5 text-xs text-balance">
+        <motion.div layout={layout}>{children}</motion.div>
+      </motion.div>
+      <TooltipArrowPrimitive
+        className="fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]"
+        tipRadius={2}
+      />
+    </TooltipContentPrimitive>
+  );
+}
+
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  type TooltipProviderProps,
+  type TooltipProps,
+  type TooltipTriggerProps,
+  type TooltipContentProps,
+};

package/templates/shared/components/animate-ui/primitives/animate/slot.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import { motion, isMotionComponent, type HTMLMotionProps } from 'motion/react';
+import { cn } from '@/utilities/ui';
+
+type AnyProps = Record<string, unknown>;
+
+type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<
+  HTMLMotionProps<keyof HTMLElementTagNameMap>,
+  'ref'
+> & { ref?: React.Ref<T> };
+
+type WithAsChild<Base extends object> =
+  | (Base & { asChild: true; children: React.ReactElement })
+  | (Base & { asChild?: false | undefined });
+
+type SlotProps<T extends HTMLElement = HTMLElement> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children?: any;
+} & DOMMotionProps<T>;
+
+function mergeRefs<T>(
+  ...refs: (React.Ref<T> | undefined)[]
+): React.RefCallback<T> {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        (ref as React.RefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+
+function mergeProps<T extends HTMLElement>(
+  childProps: AnyProps,
+  slotProps: DOMMotionProps<T>,
+): AnyProps {
+  const merged: AnyProps = { ...childProps, ...slotProps };
+
+  if (childProps.className || slotProps.className) {
+    merged.className = cn(
+      childProps.className as string,
+      slotProps.className as string,
+    );
+  }
+
+  if (childProps.style || slotProps.style) {
+    merged.style = {
+      ...(childProps.style as React.CSSProperties),
+      ...(slotProps.style as React.CSSProperties),
+    };
+  }
+
+  return merged;
+}
+
+function Slot<T extends HTMLElement = HTMLElement>({
+  children,
+  ref,
+  ...props
+}: SlotProps<T>) {
+  const isAlreadyMotion =
+    typeof children.type === 'object' &&
+    children.type !== null &&
+    isMotionComponent(children.type);
+
+  const Base = React.useMemo(
+    () =>
+      isAlreadyMotion
+        ? (children.type as React.ElementType)
+        : motion.create(children.type as React.ElementType),
+    [isAlreadyMotion, children.type],
+  );
+
+  if (!React.isValidElement(children)) return null;
+
+  const { ref: childRef, ...childProps } = children.props as AnyProps;
+
+  const mergedProps = mergeProps(childProps, props);
+
+  return (
+    <Base {...mergedProps} ref={mergeRefs(childRef as React.Ref<T>, ref)} />
+  );
+}
+
+export {
+  Slot,
+  type SlotProps,
+  type WithAsChild,
+  type DOMMotionProps,
+  type AnyProps,
+};

package/templates/shared/components/animate-ui/primitives/animate/tooltip.tsx

@@ -0,0 +1,547 @@
+'use client'
+
+import * as React from 'react'
+import {
+  motion,
+  AnimatePresence,
+  LayoutGroup,
+  type Transition,
+  type HTMLMotionProps
+} from 'motion/react'
+import {
+  useFloating,
+  autoUpdate,
+  offset as floatingOffset,
+  flip,
+  shift,
+  arrow as floatingArrow,
+  FloatingPortal,
+  FloatingArrow,
+  type UseFloatingReturn
+} from '@floating-ui/react'
+
+import { getStrictContext } from '@/lib/get-strict-context'
+import { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot'
+
+type Side = 'top' | 'bottom' | 'left' | 'right'
+type Align = 'start' | 'center' | 'end'
+
+type TooltipData = {
+  contentProps: HTMLMotionProps<'div'>
+  contentAsChild: boolean
+  rect: DOMRect
+  side: Side
+  sideOffset: number
+  align: Align
+  alignOffset: number
+  id: string
+}
+
+type GlobalTooltipContextType = {
+  showTooltip: (data: TooltipData) => void
+  hideTooltip: () => void
+  hideImmediate: () => void
+  currentTooltip: TooltipData | null
+  transition: Transition
+  globalId: string
+  setReferenceEl: (el: HTMLElement | null) => void
+  referenceElRef: React.RefObject<HTMLElement | null>
+}
+
+const [GlobalTooltipProvider, useGlobalTooltip] =
+  getStrictContext<GlobalTooltipContextType>('GlobalTooltipProvider')
+
+type TooltipContextType = {
+  props: HTMLMotionProps<'div'>
+  setProps: React.Dispatch<React.SetStateAction<HTMLMotionProps<'div'>>>
+  asChild: boolean
+  setAsChild: React.Dispatch<React.SetStateAction<boolean>>
+  side: Side
+  sideOffset: number
+  align: Align
+  alignOffset: number
+  id: string
+}
+
+const [LocalTooltipProvider, useTooltip] =
+  getStrictContext<TooltipContextType>('LocalTooltipProvider')
+
+type TooltipPosition = { x: number; y: number }
+
+function getResolvedSide(placement: Side | `${Side}-${Align}`) {
+  if (placement.includes('-')) {
+    return placement.split('-')[0] as Side
+  }
+  return placement as Side
+}
+
+function initialFromSide(side: Side): Partial<Record<'x' | 'y', number>> {
+  if (side === 'top') return { y: 15 }
+  if (side === 'bottom') return { y: -15 }
+  if (side === 'left') return { x: 15 }
+  return { x: -15 }
+}
+
+type TooltipProviderProps = {
+  children: React.ReactNode
+  id?: string
+  openDelay?: number
+  closeDelay?: number
+  transition?: Transition
+}
+
+function TooltipProvider({
+  children,
+  id,
+  openDelay = 700,
+  closeDelay = 300,
+  transition = { type: 'spring', stiffness: 300, damping: 35 }
+}: TooltipProviderProps) {
+  const globalId = React.useId()
+  const [currentTooltip, setCurrentTooltip] = React.useState<TooltipData | null>(null)
+  const timeoutRef = React.useRef<number | null>(null)
+  const lastCloseTimeRef = React.useRef<number>(0)
+  const referenceElRef = React.useRef<HTMLElement | null>(null)
+
+  const showTooltip = React.useCallback(
+    (data: TooltipData) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      if (currentTooltip !== null) {
+        setCurrentTooltip(data)
+        return
+      }
+      const now = Date.now()
+      const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay
+      timeoutRef.current = window.setTimeout(() => setCurrentTooltip(data), delay)
+    },
+    [openDelay, closeDelay, currentTooltip]
+  )
+
+  const hideTooltip = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    timeoutRef.current = window.setTimeout(() => {
+      setCurrentTooltip(null)
+      lastCloseTimeRef.current = Date.now()
+    }, closeDelay)
+  }, [closeDelay])
+
+  const hideImmediate = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    setCurrentTooltip(null)
+    lastCloseTimeRef.current = Date.now()
+  }, [])
+
+  const setReferenceEl = React.useCallback((el: HTMLElement | null) => {
+    referenceElRef.current = el
+  }, [])
+
+  React.useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') hideImmediate()
+    }
+    window.addEventListener('keydown', onKeyDown, true)
+    window.addEventListener('scroll', hideImmediate, true)
+    window.addEventListener('resize', hideImmediate, true)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown, true)
+      window.removeEventListener('scroll', hideImmediate, true)
+      window.removeEventListener('resize', hideImmediate, true)
+    }
+  }, [hideImmediate])
+
+  return (
+    <GlobalTooltipProvider
+      value={{
+        showTooltip,
+        hideTooltip,
+        hideImmediate,
+        currentTooltip,
+        transition,
+        globalId: id ?? globalId,
+        setReferenceEl,
+        referenceElRef
+      }}
+    >
+      <LayoutGroup>{children}</LayoutGroup>
+      <TooltipOverlay />
+    </GlobalTooltipProvider>
+  )
+}
+
+type RenderedTooltipContextType = {
+  side: Side
+  align: Align
+  open: boolean
+}
+
+const [RenderedTooltipProvider, useRenderedTooltip] =
+  getStrictContext<RenderedTooltipContextType>('RenderedTooltipContext')
+
+type FloatingContextType = {
+  context: UseFloatingReturn['context']
+  arrowRef: React.RefObject<SVGSVGElement | null>
+}
+
+const [FloatingProvider, useFloatingContext] =
+  getStrictContext<FloatingContextType>('FloatingContext')
+
+const MotionTooltipArrow = motion.create(FloatingArrow)
+
+type TooltipArrowProps = Omit<React.ComponentProps<typeof MotionTooltipArrow>, 'context'> & {
+  withTransition?: boolean
+}
+
+function TooltipArrow({ ref, withTransition = true, ...props }: TooltipArrowProps) {
+  const { side, align, open } = useRenderedTooltip()
+  const { context, arrowRef } = useFloatingContext()
+  const { transition, globalId } = useGlobalTooltip()
+  React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement)
+
+  const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side]
+
+  return (
+    <MotionTooltipArrow
+      ref={arrowRef}
+      context={context}
+      data-state={open ? 'open' : 'closed'}
+      data-side={side}
+      data-align={align}
+      data-slot="tooltip-arrow"
+      style={{ rotate: deg }}
+      layoutId={withTransition ? `tooltip-arrow-${globalId}` : undefined}
+      transition={withTransition ? transition : undefined}
+      {...props}
+    />
+  )
+}
+
+type TooltipPortalProps = React.ComponentProps<typeof FloatingPortal>
+
+function TooltipPortal(props: TooltipPortalProps) {
+  return <FloatingPortal {...props} />
+}
+
+function TooltipOverlay() {
+  const { currentTooltip, transition, globalId, referenceElRef } = useGlobalTooltip()
+
+  const [rendered, setRendered] = React.useState<{
+    data: TooltipData | null
+    open: boolean
+  }>({ data: null, open: false })
+
+  const arrowRef = React.useRef<SVGSVGElement | null>(null)
+
+  const side = rendered.data?.side ?? 'top'
+  const align = rendered.data?.align ?? 'center'
+
+  const { refs, x, y, strategy, context, update } = useFloating({
+    placement: align === 'center' ? side : `${side}-${align}`,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      floatingOffset({
+        mainAxis: rendered.data?.sideOffset ?? 0,
+        crossAxis: rendered.data?.alignOffset ?? 0
+      }),
+      flip(),
+      shift({ padding: 8 }),
+      floatingArrow({ element: arrowRef })
+    ]
+  })
+
+  React.useEffect(() => {
+    if (currentTooltip) {
+      setRendered({ data: currentTooltip, open: true })
+    } else {
+      setRendered((p) => (p.data ? { ...p, open: false } : p))
+    }
+  }, [currentTooltip])
+
+  React.useLayoutEffect(() => {
+    if (referenceElRef.current) {
+      refs.setReference(referenceElRef.current)
+      update()
+    }
+  }, [referenceElRef, refs, update, rendered.data])
+
+  const ready = x != null && y != null
+  const Component = rendered.data?.contentAsChild ? Slot : motion.div
+  const resolvedSide = getResolvedSide(context.placement)
+
+  return (
+    <AnimatePresence mode="wait">
+      {rendered.data && ready && (
+        <TooltipPortal>
+          <div
+            ref={refs.setFloating}
+            data-slot="tooltip-overlay"
+            data-side={resolvedSide}
+            data-align={rendered.data.align}
+            data-state={rendered.open ? 'open' : 'closed'}
+            style={{
+              position: strategy,
+              top: 0,
+              left: 0,
+              zIndex: 50,
+              transform: `translate3d(${x!}px, ${y!}px, 0)`
+            }}
+          >
+            <FloatingProvider value={{ context, arrowRef }}>
+              <RenderedTooltipProvider
+                value={{
+                  side: resolvedSide,
+                  align: rendered.data.align,
+                  open: rendered.open
+                }}
+              >
+                <Component
+                  data-slot="tooltip-content"
+                  data-side={resolvedSide}
+                  data-align={rendered.data.align}
+                  data-state={rendered.open ? 'open' : 'closed'}
+                  layoutId={`tooltip-content-${globalId}`}
+                  initial={{
+                    opacity: 0,
+                    scale: 0,
+                    ...initialFromSide(rendered.data.side)
+                  }}
+                  animate={
+                    rendered.open
+                      ? { opacity: 1, scale: 1, x: 0, y: 0 }
+                      : {
+                          opacity: 0,
+                          scale: 0,
+                          ...initialFromSide(rendered.data.side)
+                        }
+                  }
+                  exit={{
+                    opacity: 0,
+                    scale: 0,
+                    ...initialFromSide(rendered.data.side)
+                  }}
+                  onAnimationComplete={() => {
+                    if (!rendered.open) setRendered({ data: null, open: false })
+                  }}
+                  transition={transition}
+                  {...rendered.data.contentProps}
+                  style={{
+                    position: 'relative',
+                    ...(rendered.data.contentProps?.style || {})
+                  }}
+                />
+              </RenderedTooltipProvider>
+            </FloatingProvider>
+          </div>
+        </TooltipPortal>
+      )}
+    </AnimatePresence>
+  )
+}
+
+type TooltipProps = {
+  children: React.ReactNode
+  side?: Side
+  sideOffset?: number
+  align?: Align
+  alignOffset?: number
+}
+
+function Tooltip({
+  children,
+  side = 'top',
+  sideOffset = 0,
+  align = 'center',
+  alignOffset = 0
+}: TooltipProps) {
+  const id = React.useId()
+  const [props, setProps] = React.useState<HTMLMotionProps<'div'>>({})
+  const [asChild, setAsChild] = React.useState(false)
+
+  return (
+    <LocalTooltipProvider
+      value={{
+        props,
+        setProps,
+        asChild,
+        setAsChild,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        id
+      }}
+    >
+      {children}
+    </LocalTooltipProvider>
+  )
+}
+
+type TooltipContentProps = WithAsChild<HTMLMotionProps<'div'>>
+
+function shallowEqualWithoutChildren(a?: HTMLMotionProps<'div'>, b?: HTMLMotionProps<'div'>) {
+  if (a === b) return true
+  if (!a || !b) return false
+  const keysA = Object.keys(a).filter((k) => k !== 'children')
+  const keysB = Object.keys(b).filter((k) => k !== 'children')
+  if (keysA.length !== keysB.length) return false
+  for (const k of keysA) {
+    if ((a as Record<string, unknown>)[k] !== (b as Record<string, unknown>)[k]) return false
+  }
+  return true
+}
+
+function TooltipContent({ asChild = false, ...props }: TooltipContentProps) {
+  const { setProps, setAsChild } = useTooltip()
+  const lastPropsRef = React.useRef<HTMLMotionProps<'div'> | undefined>(undefined)
+
+  React.useEffect(() => {
+    if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {
+      lastPropsRef.current = props
+      setProps(props)
+    }
+  }, [props, setProps])
+
+  React.useEffect(() => {
+    setAsChild(asChild)
+  }, [asChild, setAsChild])
+
+  return null
+}
+
+type TooltipTriggerProps = WithAsChild<HTMLMotionProps<'div'>>
+
+function TooltipTrigger({
+  ref,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  onPointerDown,
+  asChild = false,
+  ...props
+}: TooltipTriggerProps) {
+  const {
+    props: contentProps,
+    asChild: contentAsChild,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    id
+  } = useTooltip()
+  const { showTooltip, hideTooltip, hideImmediate, currentTooltip, setReferenceEl } =
+    useGlobalTooltip()
+
+  const triggerRef = React.useRef<HTMLDivElement>(null)
+  React.useImperativeHandle(ref, () => triggerRef.current as HTMLDivElement)
+
+  const suppressNextFocusRef = React.useRef(false)
+
+  const handleOpen = React.useCallback(() => {
+    if (!triggerRef.current) return
+    setReferenceEl(triggerRef.current)
+    const rect = triggerRef.current.getBoundingClientRect()
+    showTooltip({
+      contentProps,
+      contentAsChild,
+      rect,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      id
+    })
+  }, [
+    showTooltip,
+    setReferenceEl,
+    contentProps,
+    contentAsChild,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    id
+  ])
+
+  const handlePointerDown = React.useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      onPointerDown?.(e)
+      if (currentTooltip?.id === id) {
+        suppressNextFocusRef.current = true
+        hideImmediate()
+        Promise.resolve().then(() => {
+          suppressNextFocusRef.current = false
+        })
+      }
+    },
+    [onPointerDown, currentTooltip?.id, id, hideImmediate]
+  )
+
+  const handleMouseEnter = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseEnter?.(e)
+      handleOpen()
+    },
+    [handleOpen, onMouseEnter]
+  )
+
+  const handleMouseLeave = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseLeave?.(e)
+      hideTooltip()
+    },
+    [hideTooltip, onMouseLeave]
+  )
+
+  const handleFocus = React.useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      onFocus?.(e)
+      if (suppressNextFocusRef.current) return
+      handleOpen()
+    },
+    [handleOpen, onFocus]
+  )
+
+  const handleBlur = React.useCallback(
+    (e: React.FocusEvent<HTMLDivElement>) => {
+      onBlur?.(e)
+      hideTooltip()
+    },
+    [hideTooltip, onBlur]
+  )
+
+  const Component = asChild ? Slot : motion.div
+
+  return (
+    <Component
+      ref={triggerRef}
+      onPointerDown={handlePointerDown}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      data-slot="tooltip-trigger"
+      data-side={side}
+      data-align={align}
+      data-state={currentTooltip?.id === id ? 'open' : 'closed'}
+      {...props}
+    />
+  )
+}
+
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipArrow,
+  useGlobalTooltip,
+  useTooltip,
+  type TooltipProviderProps,
+  type TooltipProps,
+  type TooltipContentProps,
+  type TooltipTriggerProps,
+  type TooltipArrowProps,
+  type TooltipPosition,
+  type GlobalTooltipContextType,
+  type TooltipContextType
+}

package/templates/shared/components/ui/navigation-menu.tsx

@@ -0,0 +1,161 @@
+// Todo: Fix dropdown motion issue on first open (looks like a flash) - https://reui.io/docs/navigation-menu
+'use client'
+
+import * as React from 'react'
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cn } from '@/utilities/ui'
+import { cva } from 'class-variance-authority'
+import { ChevronDownIcon } from 'lucide-react'
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center z-10',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  'cursor-pointer group inline-flex h-9 w-max items-center justify-center px-4 py-2 text-sm font-medium disabled:pointer-events-none disabled:opacity-50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 text-stone-200 dark:text-stone-200'
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <ChevronDownIcon
+        className="relative top-[1px] ms-1 size-3.5 opacity-60 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+        '!bg-[linear-gradient(90deg,_rgba(26,_26,_30,_.8),_rgba(25,_22,_38,_.85))] backdrop-blur-md',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:left-0 group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu: group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div className={cn('absolute top-full left-0 isolate z-50 flex justify-center')}>
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'shadow-md shadow-black/5 rounded-md border border-border bg-popover text-popover-foreground p-1.5 origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        'NavigationMenuPrimitive flex flex-col gap-1 text-sm transition-colors focus:outline-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn('z-[1] flex h-1.5 items-end justify-center overflow-hidden', className)}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle
+}

package/templates/shared/lib/get-strict-context.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+function getStrictContext<T>(
+  name?: string,
+): readonly [
+  ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => React.JSX.Element,
+  () => T,
+] {
+  const Context = React.createContext<T | undefined>(undefined);
+
+  const Provider = ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => <Context.Provider value={value}>{children}</Context.Provider>;
+
+  const useSafeContext = () => {
+    const ctx = React.useContext(Context);
+    if (ctx === undefined) {
+      throw new Error(`useContext must be used within ${name ?? 'a Provider'}`);
+    }
+    return ctx;
+  };
+
+  return [Provider, useSafeContext] as const;
+}
+
+export { getStrictContext };