@cerberus-design/react 0.0.1-next-b88d5af → 0.0.1-next-ef8d639

package/build/modern/types.d.cts

@@ -0,0 +1 @@
+export { Positions_alias_1 as Positions } from './_tsup-dts-rollup';

package/build/modern/types.d.ts

@@ -0,0 +1 @@
+export { Positions_alias_1 as Positions } from './_tsup-dts-rollup';

package/build/modern/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/build/modern/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.0.1-next-b88d5af",
+  "version": "0.0.1-next-ef8d639",
   "description": "The Cerberus Design React component library",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -20,8 +20,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.0.2",
-    "@cerberus-design/styled-system": "0.0.0",
-    "@cerberus-design/configs": "0.0.0"
+    "@cerberus-design/configs": "0.0.0",
+    "@cerberus-design/styled-system": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/aria-helpers/nav-menu.aria.ts

@@ -0,0 +1,11 @@
+export interface NavTriggerAriaValues {
+  controls: string
+  expanded?: boolean
+}
+
+export function createNavTriggerProps(values: NavTriggerAriaValues) {
+  return {
+    ['aria-controls']: values.controls,
+    ['aria-expanded']: values.expanded ?? false,
+  }
+}

package/src/components/Button.tsx

@@ -8,6 +8,10 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   shape?: 'sharp' | 'rounded'
 }
 
+/**
+ * A component that allows the user to perform actions
+ * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx
+ */
 export function Button(props: ButtonProps) {
   const { palette, usage, shape, ...nativeProps } = props
   return (

package/src/components/NavMenuLink.tsx

@@ -0,0 +1,43 @@
+import type { AnchorHTMLAttributes, ElementType } from 'react'
+import { Show } from './Show'
+import { css, cx } from '@cerberus-design/styled-system/css'
+
+export interface NavMenuLinkProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  as?: ElementType
+}
+
+export function NavMenuLink(props: NavMenuLinkProps) {
+  const { as, ...nativeProps } = props
+  const hasAs = Boolean(as)
+  const AsSub: ElementType = as!
+
+  return (
+    <li
+      className={css({
+        w: 'full',
+      })}
+    >
+      <Show
+        when={hasAs}
+        fallback={
+          <a
+            {...nativeProps}
+            className={cx(
+              nativeProps.className,
+              css({
+                color: 'action.navigation.initial',
+                textStyle: 'link',
+                _hover: {
+                  color: 'action.navigation.hover',
+                },
+              }),
+            )}
+          />
+        }
+      >
+        {hasAs && <AsSub {...nativeProps} />}
+      </Show>
+    </li>
+  )
+}

package/src/components/NavMenuList.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useMemo, type HTMLAttributes } from 'react'
+import { useNavMenuContext } from '../context/navMenu'
+import { Show } from './Show'
+import type { Positions } from '../types'
+import { cx } from '@cerberus-design/styled-system/css'
+import { vstack } from '@cerberus-design/styled-system/patterns'
+
+export function getPosition(position: Positions) {
+  const defaultPositions = {
+    left: 'auto',
+    right: 'auto',
+    top: 'auto',
+    bottom: 'auto',
+  }
+  switch (position) {
+    case 'right':
+      return { ...defaultPositions, top: '0%', left: '105%' }
+    case 'left':
+      return { ...defaultPositions, top: '0%', right: '105%' }
+    case 'bottom':
+      return { ...defaultPositions, top: '110%' }
+    case 'top':
+      return { ...defaultPositions, bottom: '110%' }
+    default:
+      return defaultPositions
+  }
+}
+
+const navListStyles = vstack({
+  alignItems: 'flex-start',
+  bgColor: 'neutral.surface.100',
+  boxShadow: 'lg',
+  gap: '2',
+  opacity: '0',
+  p: '4',
+  position: 'absolute',
+  rounded: 'md',
+  zIndex: 'dropdown',
+  _motionSafe: {
+    animationName: 'zoomIn',
+    animationDelay: '100ms',
+    animationDuration: '150ms',
+    animationFillMode: 'both',
+    animationTimingFunction: 'ease-in-out',
+  },
+  _positionBottom: {
+    transformOrigin: 'top left',
+  },
+  _positionTop: {
+    transformOrigin: 'bottom left',
+  },
+  _positionLeft: {
+    transformOrigin: 'top right',
+  },
+  _positionRight: {
+    transformOrigin: 'top left',
+  },
+})
+
+// <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}
+        data-position={position ?? 'bottom'}
+        className={cx(nativeProps.className, navListStyles)}
+        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'