@cerberus-design/react 0.0.1-next-e57a52b → 0.0.1-next-07911db

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

@@ -3,7 +3,14 @@ export interface NavTriggerAriaValues {
   expanded?: boolean
 }
 
-export function createNavTriggerProps(values: NavTriggerAriaValues) {
+interface NavTriggerAriaReturn {
+  ['aria-controls']: string
+  ['aria-expanded']: boolean
+}
+
+export function createNavTriggerProps(
+  values: NavTriggerAriaValues,
+): NavTriggerAriaReturn {
   return {
     ['aria-controls']: values.controls,
     ['aria-expanded']: values.expanded ?? false,

package/src/components/Button.tsx

@@ -12,7 +12,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * 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) {
+export function Button(props: ButtonProps): JSX.Element {
   const { palette, usage, shape, ...nativeProps } = props
   return (
     <button

package/src/components/NavMenuLink.tsx

@@ -7,7 +7,7 @@ export interface NavMenuLinkProps
   as?: ElementType
 }
 
-export function NavMenuLink(props: NavMenuLinkProps) {
+export function NavMenuLink(props: NavMenuLinkProps): JSX.Element {
   const { as, ...nativeProps } = props
   const hasAs = Boolean(as)
   const AsSub: ElementType = as!

package/src/components/NavMenuList.tsx

@@ -7,7 +7,14 @@ 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) {
+interface GetPositionResult {
+  left: string
+  right: string
+  top: string
+  bottom: string
+}
+
+export function getPosition(position: Positions): GetPositionResult {
   const defaultPositions = {
     left: 'auto',
     right: 'auto',
@@ -59,14 +66,25 @@ const navListStyles = vstack({
   },
 })
 
-// <NavMenuList />
-
 export interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {
   id: string
   position?: Positions
 }
 
-export function NavMenuList(props: NavMenuListProps) {
+/**
+ * A component that allows the user to display a menu of navigation links.
+ * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
+ * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
+ *
+ * @example
+ * ```tsx
+ * <NavMenuList id="nav-menu-list" position="bottom">
+ *  <NavMenuLink href="/home">Home</NavMenuLink>
+ * <NavMenuLink href="/about">About</NavMenuLink>
+ * </NavMenuList>
+ * ```
+ **/
+export function NavMenuList(props: NavMenuListProps): JSX.Element {
   const { position, ...nativeProps } = props
   const { menuRef, expanded } = useNavMenuContext()
   const locationStyles = useMemo(

package/src/components/NavMenuTrigger.tsx

@@ -25,9 +25,17 @@ export interface NavMenuTriggerProps
 
 /**
  * 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
+ * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
+ * @example
+ * ```tsx
+ * <NavMenu>
+ *   <NavMenuTrigger controls="nav-menu-list">
+ *     Menu
+ *   </NavMenuTrigger>
+ * </NavMenu>
+ * ```
  */
-export function NavMenuTrigger(props: NavMenuTriggerProps) {
+export function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {
   const {
     as,
     palette,

package/src/components/Show.tsx

@@ -10,9 +10,14 @@ export interface ShowProps {
 /**
  * Conditionally render its children or an optional fallback component
  * based on the SolidJS component.
- * @description https://docs.solidjs.com/reference/components/show
+ * @definition [Show docs](https://cerberus.digitalu.design/react/show)
+ * @example
+ * ```tsx
+ * <Show when={condition}>
+ *  <div>Content</div>
+ * </Show>
  */
-export function Show(props: PropsWithChildren<ShowProps>) {
+export function Show(props: PropsWithChildren<ShowProps>): ReactNode {
   const { when, children, fallback } = props
   const condition = useMemo(() => when ?? false, [when])
 

package/src/context/navMenu.tsx

@@ -24,7 +24,7 @@ export interface NavMenuContextValue {
 
 const NavMenuContext = createContext<NavMenuContextValue | null>(null)
 
-export function NavMenu(props: PropsWithChildren) {
+export function NavMenu(props: PropsWithChildren): JSX.Element {
   const triggerRef = useRef<HTMLButtonElement>(null)
   const menuRef = useRef<HTMLUListElement>(null)
   const [expanded, setExpanded] = useState<boolean>(false)
@@ -56,7 +56,7 @@ export function NavMenu(props: PropsWithChildren) {
   )
 }
 
-export function useNavMenuContext() {
+export function useNavMenuContext(): NavMenuContextValue {
   const context = useContext(NavMenuContext)
   if (!context) {
     throw new Error('useNavMenuContext must be used within a NavMenu.')

package/src/context/theme.tsx

@@ -7,7 +7,7 @@ export type DefaultThemes = 'cerberus'
 export type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K
 export type ColorModes = 'light' | 'dark'
 
-export interface ThemeContextValue<T extends DefaultThemes> {
+export interface ThemeContextValue<T extends string = DefaultThemes> {
   theme: CustomThemes<T>
   mode: ColorModes
   updateTheme: (theme: T) => void
@@ -21,7 +21,16 @@ const ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(
   null,
 )
 
-export function ThemeProvider(props: PropsWithChildren<unknown>) {
+/**
+ * A context provider that allows the user to set the theme and mode of the application.
+ * @example
+ * ```tsx
+ * <ThemeProvider>
+ *  <App />
+ * </ThemeProvider>
+ * ```
+ */
+export function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element {
   const state = useTheme()
   return (
     <ThemeContext.Provider value={state}>

package/src/hooks/useTheme.ts

@@ -13,12 +13,13 @@ import {
   type ColorModes,
   type CustomThemes,
   type DefaultThemes,
+  type ThemeContextValue,
 } from '../context/theme'
 
 export function useTheme<C extends string = DefaultThemes>(
   defaultTheme: CustomThemes<C> = 'cerberus',
   defaultColorMode: ColorModes = 'light',
-) {
+): ThemeContextValue<C> {
   const [theme, setTheme] = useState<CustomThemes<C>>(defaultTheme)
   const [colorMode, setColorMode] = useState<ColorModes>(defaultColorMode)