@cerberus-design/react 0.0.1-next-bbce7d4 → 0.0.1-next-7d9e858

package/src/components/NavMenuList.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useMemo, type HTMLAttributes } from 'react'
+import { useNavMenuContext } from '../context/navMenu'
+import { Show } from './Show'
+import type { Positions } from '../types'
+import { css, cx } from '@cerberus-design/styled-system/css'
+
+export function getPosition(position: Positions) {
+  const defaultPositions = {
+    left: 'auto',
+    right: 'auto',
+    top: 'auto',
+    bottom: 'auto',
+  }
+  switch (position) {
+    case 'right':
+      return { ...defaultPositions, bottom: '50%', left: '110%' }
+    case 'left':
+      return { ...defaultPositions, bottom: '50%', right: '110%' }
+    case 'bottom':
+      return { ...defaultPositions, top: '110%' }
+    case 'top':
+      return { ...defaultPositions, bottom: '110%' }
+    default:
+      return defaultPositions
+  }
+}
+
+// <NavMenuList />
+
+export interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {
+  id: string
+  position?: Positions
+}
+
+export function NavMenuList(props: NavMenuListProps) {
+  const { position, ...nativeProps } = props
+  const { menuRef, expanded } = useNavMenuContext()
+  const locationStyles = useMemo(
+    () => getPosition(position ?? 'bottom'),
+    [position],
+  )
+
+  return (
+    <Show when={expanded}>
+      <ul
+        {...nativeProps}
+        className={cx(
+          nativeProps.className,
+          css({
+            position: 'absolute',
+            zIndex: 'dropdown',
+          }),
+        )}
+        ref={menuRef}
+        style={locationStyles}
+      />
+    </Show>
+  )
+}

package/src/components/NavMenuTrigger.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import {
+  useCallback,
+  type ButtonHTMLAttributes,
+  type ElementType,
+  type MouseEvent,
+} from 'react'
+import { cx } from '@cerberus-design/styled-system/css'
+import { button } from '@cerberus-design/styled-system/recipes'
+import {
+  createNavTriggerProps,
+  type NavTriggerAriaValues,
+} from '../aria-helpers/nav-menu.aria'
+import { Show } from './Show'
+import type { ButtonProps } from './Button'
+import { useNavMenuContext } from '../context/navMenu'
+
+export interface NavMenuTriggerProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    ButtonProps,
+    NavTriggerAriaValues {
+  as?: ElementType
+}
+
+/**
+ * A component that allows the user to trigger a navigation menu.
+ * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/NavMenuTrigger.tsx
+ */
+export function NavMenuTrigger(props: NavMenuTriggerProps) {
+  const {
+    as,
+    palette,
+    usage,
+    shape,
+    controls,
+    expanded: propsExpanded,
+    onClick,
+    ...nativeProps
+  } = props
+  const { triggerRef, onToggle, expanded } = useNavMenuContext()
+  const ariaProps = createNavTriggerProps({
+    controls,
+    expanded: propsExpanded ?? expanded,
+  })
+  const hasAs = Boolean(as)
+  const AsSub: ElementType = as!
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (onClick) return onClick(e)
+      onToggle()
+    },
+    [onClick, onToggle],
+  )
+
+  return (
+    <Show
+      when={hasAs}
+      fallback={
+        <button
+          {...nativeProps}
+          {...ariaProps}
+          className={cx(
+            nativeProps.className,
+            button({
+              palette,
+              usage,
+              shape,
+            }),
+          )}
+          onClick={handleClick}
+          ref={triggerRef}
+        >
+          {props.children}
+        </button>
+      }
+    >
+      {hasAs && (
+        <AsSub
+          {...nativeProps}
+          {...ariaProps}
+          onClick={handleClick}
+          ref={triggerRef}
+        />
+      )}
+    </Show>
+  )
+}

package/src/context/navMenu.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { css } from '@cerberus-design/styled-system/css'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type PropsWithChildren,
+  type RefObject,
+} from 'react'
+
+export type NavTriggerRef = RefObject<HTMLButtonElement>
+export type NavMenuRef = RefObject<HTMLUListElement>
+
+export interface NavMenuContextValue {
+  triggerRef: NavTriggerRef | null
+  menuRef: NavMenuRef | null
+  expanded: boolean
+  onToggle: () => void
+}
+
+const NavMenuContext = createContext<NavMenuContextValue | null>(null)
+
+export function NavMenu(props: PropsWithChildren) {
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLUListElement>(null)
+  const [expanded, setExpanded] = useState<boolean>(false)
+
+  const handleToggle = useCallback(() => {
+    setExpanded((prev) => !prev)
+  }, [])
+
+  const value = useMemo(
+    () => ({
+      triggerRef,
+      menuRef,
+      expanded,
+      onToggle: handleToggle,
+    }),
+    [expanded, handleToggle],
+  )
+
+  return (
+    <NavMenuContext.Provider value={value}>
+      <nav
+        className={css({
+          position: 'relative',
+        })}
+      >
+        {props.children}
+      </nav>
+    </NavMenuContext.Provider>
+  )
+}
+
+export function useNavMenuContext() {
+  const context = useContext(NavMenuContext)
+  if (!context) {
+    throw new Error('useNavMenuContext must be used within a NavMenu.')
+  }
+  return context
+}

package/src/context/theme.tsx

@@ -17,15 +17,9 @@ export interface ThemeContextValue<T extends DefaultThemes> {
 export const THEME_KEY = 'cerberus-theme'
 export const MODE_KEY = 'cerberus-mode'
 
-const initialThemeState = {
-  theme: 'cerberus' as const,
-  mode: 'light' as const,
-  updateTheme: () => {},
-  updateMode: () => {},
-}
-
-const ThemeContext =
-  createContext<ThemeContextValue<DefaultThemes>>(initialThemeState)
+const ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(
+  null,
+)
 
 export function ThemeProvider(props: PropsWithChildren<unknown>) {
   const state = useTheme()

package/src/index.ts

@@ -1,12 +1,24 @@
 // components
 
 export * from './components/Button'
+export * from './components/NavMenuTrigger'
+export * from './components/NavMenuList'
+export * from './components/NavMenuLink'
 export * from './components/Show'
 
 // context
 
+export * from './context/navMenu'
 export * from './context/theme'
 
 // hooks
 
 export * from './hooks/useTheme'
+
+// aria-helpers
+
+export * from './aria-helpers/nav-menu.aria'
+
+// shared types
+
+export * from './types'

package/src/types.ts

@@ -0,0 +1 @@
+export type Positions = 'top' | 'right' | 'bottom' | 'left'