@cerberus-design/react 0.11.1-next-c28b077 → 0.12.0-next-c2bae7a

package/build/modern/context/cta-modal.js

@@ -2,12 +2,12 @@
 import {
   CTAModal,
   useCTAModal
-} from "../chunk-JVIFMN67.js";
+} from "../chunk-T6LS5P5W.js";
+import "../chunk-2UXE5PDG.js";
 import "../chunk-GLY7GU5S.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";
 import "../chunk-ZFAIE47A.js";
-import "../chunk-2UXE5PDG.js";
 import "../chunk-APD6IX5R.js";
 import "../chunk-SPZYPRZ6.js";
 import "../chunk-EXGKZGML.js";

package/build/modern/context/navMenu.js

@@ -2,7 +2,7 @@
 import {
   NavMenu,
   useNavMenuContext
-} from "../chunk-O75QAT4Z.js";
+} from "../chunk-6WS765J3.js";
 export {
   NavMenu,
   useNavMenuContext

package/build/modern/context/prompt-modal.js

@@ -2,14 +2,14 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-C7UVOGPZ.js";
+} from "../chunk-VP5ERLAY.js";
+import "../chunk-2UXE5PDG.js";
 import "../chunk-GLY7GU5S.js";
 import "../chunk-NKM6PISB.js";
 import "../chunk-NMF2HYWO.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";
 import "../chunk-ZFAIE47A.js";
-import "../chunk-2UXE5PDG.js";
 import "../chunk-SPZYPRZ6.js";
 import "../chunk-EXGKZGML.js";
 import "../chunk-UZDVOIW5.js";

package/build/modern/index.js

@@ -1,7 +1,15 @@
+import {
+  ThemeProvider,
+  useThemeContext
+} from "./chunk-EB37HRCN.js";
+import {
+  ConfirmModal,
+  useConfirmModal
+} from "./chunk-CSEHDNMJ.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-JVIFMN67.js";
+} from "./chunk-T6LS5P5W.js";
 import {
   NotificationCenter,
   useNotificationCenter
@@ -9,36 +17,32 @@ import {
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-C7UVOGPZ.js";
+} from "./chunk-VP5ERLAY.js";
 import {
-  ThemeProvider,
-  useThemeContext
-} from "./chunk-EB37HRCN.js";
+  Table,
+  Tr
+} from "./chunk-B4CVET74.js";
 import {
   Tag
 } from "./chunk-F72ZABKX.js";
 import {
   Tbody
-} from "./chunk-PKQTTFWA.js";
+} from "./chunk-ZR37P4NZ.js";
 import {
   Td
-} from "./chunk-HPM2XRWT.js";
+} from "./chunk-3R4TIF2X.js";
 import {
   Textarea
 } from "./chunk-JIJM6JFJ.js";
 import {
   Th
-} from "./chunk-CO4BKT7K.js";
+} from "./chunk-SGKHA4EB.js";
 import {
   Thead
-} from "./chunk-PKY46RRA.js";
+} from "./chunk-Y6QQCRQV.js";
 import {
   Toggle
 } from "./chunk-NMNONSHU.js";
-import {
-  ConfirmModal,
-  useConfirmModal
-} from "./chunk-PJGUYNKD.js";
 import {
   Radio
 } from "./chunk-FTPZHG6J.js";
@@ -59,23 +63,22 @@ import {
   TabPanel
 } from "./chunk-AYIRV5CL.js";
 import {
-  Table,
-  Tr
-} from "./chunk-B4CVET74.js";
+  ModalHeading
+} from "./chunk-2UXE5PDG.js";
 import {
   NavMenuLink
-} from "./chunk-KBBASJIY.js";
+} from "./chunk-WPVDQRRF.js";
 import {
   NavMenuList,
   getPosition
-} from "./chunk-5V5MBSM3.js";
+} from "./chunk-UZVQ4INR.js";
 import {
   NavMenuTrigger
-} from "./chunk-OWKN5IV7.js";
+} from "./chunk-PM7CWT3N.js";
 import {
   NavMenu,
   useNavMenuContext
-} from "./chunk-O75QAT4Z.js";
+} from "./chunk-6WS765J3.js";
 import {
   Notification
 } from "./chunk-7SGPJM66.js";
@@ -97,6 +100,15 @@ import {
 import {
   Legend
 } from "./chunk-ILQW5VZT.js";
+import {
+  Menu,
+  MenuContent,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemGroup,
+  MenuSeparator,
+  MenuTrigger
+} from "./chunk-RUR5MV54.js";
 import {
   Modal
 } from "./chunk-BE4EOU2P.js";
@@ -106,9 +118,6 @@ import {
 import {
   ModalHeader
 } from "./chunk-ZFAIE47A.js";
-import {
-  ModalHeading
-} from "./chunk-2UXE5PDG.js";
 import {
   CircularProgress
 } from "./chunk-6QHOKCV3.js";
@@ -229,6 +238,13 @@ export {
   Label,
   Legend,
   MODE_KEY,
+  Menu,
+  MenuContent,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemGroup,
+  MenuSeparator,
+  MenuTrigger,
   Modal,
   ModalDescription,
   ModalHeader,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.11.1-next-c28b077",
+  "version": "0.12.0-next-c2bae7a",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -16,6 +16,7 @@
     "react-dom": "*"
   },
   "dependencies": {
+    "@ark-ui/react": "^4.4.0",
     "@dnd-kit/core": "^6.1.0"
   },
   "devDependencies": {
@@ -26,7 +27,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.11.1-next-c28b077"
+    "@cerberus-design/styled-system": "0.12.0-next-c2bae7a"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Menu.tsx

@@ -0,0 +1,244 @@
+import { Menu as ArkMenu } from '@ark-ui/react'
+import { menu } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+
+/**
+ * This module contains the Menu component family.
+ * @module Menu
+ */
+
+const menuStyles = menu()
+
+/**
+ * The root Menu component which controls the menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>Trigger</MenuTrigger>
+ * </Menu>
+ */
+export const Menu = ArkMenu.Root
+
+/**
+ * The MenuTrigger component opens/closes the Menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ * </Menu>
+ */
+export function MenuTrigger(props: ArkMenu.TriggerProps) {
+  return <ArkMenu.Trigger {...props} asChild />
+}
+
+/**
+ * The MenuContent component is the container for the menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItem value="item_1">Item 1</MenuItem>
+ *   <MenuItem value="item_2">Item 2</MenuItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+export function MenuContent(props: ArkMenu.ContentProps) {
+  return (
+    <ArkMenu.Positioner>
+      <ArkMenu.Content
+        {...props}
+        className={cx(props.className, menuStyles.content)}
+      />
+    </ArkMenu.Positioner>
+  )
+}
+
+/**
+ * The MenuItem component is a single item in the menu.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItem value="item_1">Item 1</MenuItem>
+ *   <MenuItem value="item_2">Item 2</MenuItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+export function MenuItem(props: ArkMenu.ItemProps) {
+  return (
+    <ArkMenu.Item {...props} className={cx(props.className, menuStyles.item)} />
+  )
+}
+
+/**
+ * The MenuItemGroup component is a group of menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItemGroup>
+ *    <MenuItem value="item_1">Item 1</MenuItem>
+ *    <MenuItem value="item_2">Item 2</MenuItem>
+ *   </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+export const MenuItemGroup = ArkMenu.ItemGroup
+
+/**
+ * The MenuItemGroupLabel component is the label for a group of menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuItemGroup>
+ *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>
+ *    <MenuItem value="item_1">Item 1</MenuItem>
+ *    <MenuItem value="item_2">Item 2</MenuItem>
+ *   </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+export function MenuGroupLabel(props: ArkMenu.ItemGroupLabelProps) {
+  return (
+    <ArkMenu.ItemGroupLabel
+      {...props}
+      className={cx(props.className, menuStyles.itemGroupLabel)}
+    />
+  )
+}
+
+/**
+ * The MenuSeparator component is a visual divider between menu items.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *    <MenuItemGroup>
+ *      <MenuGroupLabel>Group Label</MenuGroupLabel>
+ *      <MenuSeparator />
+ *      <MenuItem value="item_1">Item 1</MenuItem>
+ *      <MenuItem value="item_2">Item 2</MenuItem>
+ *    </MenuItemGroup>
+ *  </MenuContent>
+ * </Menu>
+ */
+export function MenuSeparator(props: ArkMenu.SeparatorProps) {
+  return (
+    <ArkMenu.Separator
+      {...props}
+      className={cx(props.className, menuStyles.separator)}
+    />
+  )
+}
+
+/**
+ * The MenuCheckboxItem component is a menu item with a checkbox.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuCheckboxItem
+ *     checked={checked}
+ *     onCheckedChange={setChecked}
+ *     value="checked"
+ *   >
+ *    <MenuItemIndicator>✅</MenuItemIndicator>
+ *    <MenuItemText>Check me</MenuItemText>
+ *   </MenuCheckboxItem>
+ * </MenuContent>
+ */
+// export function MenuCheckboxItem(props: ArkMenu.CheckboxItemProps) {
+//   return (
+//     <ArkMenu.CheckboxItem
+//       {...props}
+//       className={cx(props.className, menuStyles.item)}
+//     />
+//   )
+// }
+
+/**
+ * The MenuItemText component is the text for a grouped menu item.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuCheckboxItem
+ *     checked={checked}
+ *     onCheckedChange={setChecked}
+ *     value="checked"
+ *   >
+ *    <MenuItemText>Item 1</MenuItemText>
+ *   </MenuCheckboxItem>
+ *  </MenuContent>
+ * </Menu>
+ */
+// export function MenuItemText(props: ArkMenu.ItemTextProps) {
+//   return (
+//     <ArkMenu.ItemText
+//       {...props}
+//       className={cx(props.className, menuStyles.itemText)}
+//     />
+//   )
+// }
+
+/**
+ * The MenuItemIndicator component is the indicator for a grouped menu item.
+ * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
+ * @example
+ * ```tsx
+ * <Menu>
+ *  <MenuTrigger>
+ *   <Button>Trigger</Button>
+ *  </MenuTrigger>
+ *  <MenuContent>
+ *   <MenuCheckboxItem
+ *    checked={checked}
+ *    onCheckedChange={setChecked}
+ *    value="checked"
+ *   >
+ *    <MenuItemIndicator>✅</MenuItemIndicator>
+ *    <MenuItemText>Check me</MenuItemText>
+ *   </MenuCheckboxItem>
+ *  </MenuContent>
+ */
+// export function MenuItemIndicator(props: ArkMenu.ItemIndicatorProps) {
+//   return (
+//     <ArkMenu.ItemIndicator
+//       {...props}
+//       className={cx(props.className, menuStyles.itemIndicator)}
+//     />
+//   )
+// }

package/src/components/NavMenuLink.tsx

@@ -17,17 +17,7 @@ export interface NavMenuLinkProps
 }
 
 /**
- * The NavMenuLink component is a link element that is used within the NavMenu.
- * @see https://cerberus.digitalu.design/react/nav-menu
- * @example
- * ```tsx
- * <NavMenu>
- *  <NavMenuList id="nav-menu-list" position="bottom">
- *   <NavMenuLink href="/home">Home</NavMenuLink>
- *   <NavMenuLink href="/about">About</NavMenuLink>
- *  </NavMenuList>
- * </NavMenu>
- * ```
+ * @deprecated use the {@link Menu} family instead
  */
 export function NavMenuLink(props: NavMenuLinkProps): JSX.Element {
   const { as, ...nativeProps } = props

package/src/components/NavMenuList.tsx

@@ -32,9 +32,7 @@ interface GetPositionResult {
 }
 
 /**
- * Returns the position of the NavMenuList based on the position prop.
- * @param position - The position of the NavMenuList.
- * @returns The position of the NavMenuList.
+ * @deprecated use the {@link Menu} family instead
  */
 export function getPosition(position: Positions): GetPositionResult {
   const defaultPositions = {

package/src/components/NavMenuTrigger.tsx

@@ -37,16 +37,7 @@ export interface NavMenuTriggerProps
 }
 
 /**
- * A component that allows the user to trigger a navigation menu.
- * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
- * @example
- * ```tsx
- * <NavMenu>
- *   <NavMenuTrigger controls="nav-menu-list">
- *     Menu
- *   </NavMenuTrigger>
- * </NavMenu>
- * ```
+ * @deprecated use the {@link Menu} family instead
  */
 export function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {
   const {

package/src/components/Tbody.tsx

@@ -1,13 +1,12 @@
 import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'
 import { cx } from '@cerberus/styled-system/css'
-import type { TableHTMLAttributes } from 'react'
 
 /**
  * This module provides a TBody component.
  * @module
  */
 
-export type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>
+export type TbodyBaseProps = JSX.IntrinsicElements['tbody']
 export type TbodyProps = TbodyBaseProps & TbodyVariantProps
 
 /**

package/src/components/Td.tsx

@@ -1,13 +1,12 @@
 import { cx } from '@cerberus/styled-system/css'
 import { td, type TdVariantProps } from '@cerberus/styled-system/recipes'
-import type { TableHTMLAttributes } from 'react'
 
 /**
  * Th component for the Td component
  * @module
  */
 
-export type TdBaseProps = TableHTMLAttributes<HTMLTableCellElement>
+export type TdBaseProps = JSX.IntrinsicElements['td']
 export type TdProps = TdBaseProps & TdVariantProps
 
 /**

package/src/components/Th.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 import { css, cx } from '@cerberus/styled-system/css'
 import { th, type ThVariantProps } from '@cerberus/styled-system/recipes'
-import type { MouseEvent, TableHTMLAttributes } from 'react'
+import type { MouseEvent } from 'react'
 import { Show } from './Show'
 
 /**
@@ -8,7 +10,7 @@ import { Show } from './Show'
  * @module
  */
 
-export type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {
+export type ThBaseProps = JSX.IntrinsicElements['th'] & {
   /**
    * Converts the Th into a actionable button. Called when the user clicks on
    * the Th.

package/src/components/Thead.tsx

@@ -1,13 +1,12 @@
 import { cx } from '@cerberus/styled-system/css'
 import { thead } from '@cerberus/styled-system/recipes'
-import type { TableHTMLAttributes } from 'react'
 
 /**
  * This module contains the Thead component.
  * @module
  */
 
-export type TheadProps = TableHTMLAttributes<HTMLTableSectionElement>
+export type TheadProps = JSX.IntrinsicElements['thead']
 
 /**
  * The Thead component is used to render a table header.

package/src/context/navMenu.tsx

@@ -42,8 +42,7 @@ export interface NavMenuContextValue {
 const NavMenuContext = createContext<NavMenuContextValue | null>(null)
 
 /**
- * Provides the nav menu state for all the NavMenu family components.
- * @see https://cerberus.digitalu.design/react/nav-menu
+ * @deprecated use the {@link Menu} family instead
  */
 export function NavMenu(props: PropsWithChildren): JSX.Element {
   const triggerRef = useRef<HTMLButtonElement>(null)

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './components/IconButton'
 export * from './components/Input'
 export * from './components/Label'
 export * from './components/Legend'
+export * from './components/Menu'
 export * from './components/Modal'
 export * from './components/ModalHeader'
 export * from './components/ModalHeading'

package/build/modern/chunk-5V5MBSM3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuList component.\n * @module\n */\n\ninterface GetPositionResult {\n  /**\n   * The left position of the element.\n   */\n  left: string\n  /**\n   * The right position of the element.\n   */\n  right: string\n  /**\n   * The top position of the element.\n   */\n  top: string\n  /**\n   * The bottom position of the element.\n   */\n  bottom: string\n}\n\n/**\n * Returns the position of the NavMenuList based on the position prop.\n * @param position - The position of the NavMenuList.\n * @returns The position of the NavMenuList.\n */\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'page.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  /**\n   * The unique identifier for the NavMenuList. Required for accessibility.\n   */\n  id: string\n  /**\n   * The position of the NavMenuList.\n   * @type 'top' | 'right' | 'bottom' | 'left'\n   * @default 'bottom'\n   */\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @see https://cerberus.digitalu.design/react/nav-menu\n *\n * @example\n * ```tsx\n * <NavMenu>\n *  <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *   <NavMenuLink href=\"/home\">Home</NavMenuLink>\n *   <NavMenuLink href=\"/about\">About</NavMenuLink>\n *  </NavMenuList>\n * </NavMenu>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4HjB;AA1FC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AA8BM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/build/modern/chunk-CO4BKT7K.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n  /**\n   * Converts the Th into a actionable button. Called when the user clicks on\n   * the Th.\n   */\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n * @example\n * ```tsx\n * <Th onClick={handleClick}>\n *   Names\n *   <SortIcon />\n * </Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, onClick, ...nativeProps } = props\n  return (\n    <Show\n      when={Boolean(onClick)}\n      fallback={\n        <th\n          {...nativeProps}\n          className={cx(nativeProps.className, th({ size }))}\n        />\n      }\n    >\n      <th {...nativeProps}>\n        <button\n          className={cx(\n            nativeProps.className,\n            th({ size }),\n            css({\n              alignItems: 'center',\n              display: 'inline-flex',\n              justifyContent: 'space-between',\n              userSelect: 'none',\n              w: 'full',\n              _hover: {\n                bgColor: 'page.bg.100',\n              },\n            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AAwChC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,cACH,QAAQ;AAAA,gBACN,SAAS;AAAA,cACX;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-KBBASJIY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The element type to render as. Recommended to use for Next apps with the\n   * `Link` component.\n   */\n  as?: ElementType\n}\n\n/**\n * The NavMenuLink component is a link element that is used within the NavMenu.\n * @see https://cerberus.digitalu.design/react/nav-menu\n * @example\n * ```tsx\n * <NavMenu>\n *  <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *   <NavMenuLink href=\"/home\">Home</NavMenuLink>\n *   <NavMenuLink href=\"/about\">About</NavMenuLink>\n *  </NavMenuList>\n * </NavMenu>\n * ```\n */\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n  const { as, ...nativeProps } = props\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  return (\n    <li\n      className={css({\n        w: 'full',\n      })}\n    >\n      <Show\n        when={hasAs}\n        fallback={\n          <a\n            {...nativeProps}\n            className={cx(\n              nativeProps.className,\n              css({\n                color: 'action.navigation.initial',\n                textStyle: 'link',\n                _hover: {\n                  color: 'action.navigation.hover',\n                },\n              }),\n            )}\n          />\n        }\n      >\n        {hasAs && <AsSub {...nativeProps} />}\n      </Show>\n    </li>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,KAAK,UAAU;AA4Cd;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,oBAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-O75QAT4Z.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n  /**\n   * The ref for the trigger button.\n   */\n  triggerRef: NavTriggerRef | null\n  /**\n   * The ref for the menu.\n   */\n  menuRef: NavMenuRef | null\n  /**\n   * Whether the menu is expanded.\n   */\n  expanded: boolean\n  /**\n   * Called when the menu button is clicked.\n   */\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * Provides the nav menu state for all the NavMenu family components.\n * @see https://cerberus.digitalu.design/react/nav-menu\n */\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLUListElement>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n"],"mappings":";AAEA,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAwDD;AA3BN,IAAM,iBAAiB,cAA0C,IAAI;AAM9D,SAAS,QAAQ,OAAuC;AAC7D,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,UAAU,OAAyB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,eAAe,YAAY,MAAM;AACrC,gBAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OACvB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAMO,SAAS,oBAAyC;AACvD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-OWKN5IV7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/NavMenuTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type MouseEvent,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\nimport {\n  createNavTriggerProps,\n  type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { ButtonProps } from './Button'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuTrigger component.\n * @module\n */\n\nexport interface NavMenuTriggerProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonProps,\n    NavTriggerAriaValues {\n  /**\n   * The element type to render as. Recommended to use for an IconButton trigger vs a standard Button.\n   * @default 'button'\n   * @example\n   * ```tsx\n   * <NavMenuTrigger as={IconButton} href=\"/home\" />\n   * ```\n   */\n  as?: ElementType\n}\n\n/**\n * A component that allows the user to trigger a navigation menu.\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n * @example\n * ```tsx\n * <NavMenu>\n *   <NavMenuTrigger controls=\"nav-menu-list\">\n *     Menu\n *   </NavMenuTrigger>\n * </NavMenu>\n * ```\n */\nexport function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {\n  const {\n    as,\n    palette,\n    usage,\n    shape,\n    controls,\n    expanded: propsExpanded,\n    onClick,\n    ...nativeProps\n  } = props\n  const { triggerRef, onToggle, expanded } = useNavMenuContext()\n  const ariaProps = createNavTriggerProps({\n    controls,\n    expanded: propsExpanded ?? expanded,\n  })\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      if (onClick) return onClick(e)\n      onToggle()\n    },\n    [onClick, onToggle],\n  )\n\n  return (\n    <Show\n      when={hasAs}\n      fallback={\n        <button\n          {...nativeProps}\n          {...ariaProps}\n          className={cx(\n            nativeProps.className,\n            button({\n              palette,\n              usage,\n              shape,\n            }),\n          )}\n          onClick={handleClick}\n          ref={triggerRef}\n        >\n          {props.children}\n        </button>\n      }\n    >\n      {hasAs && (\n        <AsSub\n          {...nativeProps}\n          {...ariaProps}\n          onClick={handleClick}\n          ref={triggerRef}\n        />\n      )}\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAwEf;AA/BD,SAAS,eAAe,OAAyC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,YAAY,UAAU,SAAS,IAAI,kBAAkB;AAC7D,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC7B,CAAC;AACD,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,QAAS,QAAO,QAAQ,CAAC;AAC7B,eAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,KAAK;AAAA,UAEJ,gBAAM;AAAA;AAAA,MACT;AAAA,MAGD,mBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,EAEJ;AAEJ;","names":[]}