@cerberus-design/react 0.9.2-next-5604236 → 0.9.2-next-74f2c67

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

@@ -2,23 +2,23 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-ZBEHDXFT.js";
-import "../chunk-4CAT3FHV.js";
-import "../chunk-QU7UV5DB.js";
-import "../chunk-JB7IQ2BM.js";
-import "../chunk-SSY3KX3F.js";
-import "../chunk-RQPDRHRP.js";
-import "../chunk-2UFNQM55.js";
-import "../chunk-4M4LCQ43.js";
-import "../chunk-UN3OAW56.js";
-import "../chunk-6F34A7NZ.js";
-import "../chunk-ZAU4JVLL.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-E6QFLLXH.js";
+import "../chunk-2VX52EEJ.js";
+import "../chunk-WLEX22KS.js";
+import "../chunk-2UXE5PDG.js";
+import "../chunk-WZOYPFUU.js";
+import "../chunk-I35HMGJQ.js";
+import "../chunk-BE4EOU2P.js";
+import "../chunk-Q7BRMIBR.js";
+import "../chunk-477G5ZEL.js";
+import "../chunk-EXGKZGML.js";
+import "../chunk-UZDVOIW5.js";
+import "../chunk-BUVVRQLZ.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-NBG2OSYI.js";
 import "../chunk-BDCFYW34.js";
 import "../chunk-CP7OUC2Q.js";
-import "../chunk-C5HLLGME.js";
+import "../chunk-OW62FLJ6.js";
 export {
   PromptModal,
   usePromptModal

package/build/modern/context/tabs.js

@@ -3,7 +3,7 @@ import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "../chunk-KF24CS4S.js";
+} from "../chunk-RIFQSCHT.js";
 export {
   Tabs,
   TabsContext,

package/build/modern/context/theme.js

@@ -2,8 +2,8 @@
 import {
   ThemeProvider,
   useThemeContext
-} from "../chunk-S3MTABYX.js";
-import "../chunk-JXJ6VFZO.js";
+} from "../chunk-EB37HRCN.js";
+import "../chunk-EJOXOICK.js";
 export {
   ThemeProvider,
   useThemeContext

package/build/modern/hooks/useModal.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useModal
-} from "../chunk-C5HLLGME.js";
+} from "../chunk-OW62FLJ6.js";
 export {
   useModal
 };

package/build/modern/hooks/useTheme.js

@@ -3,7 +3,7 @@ import {
   MODE_KEY,
   THEME_KEY,
   useTheme
-} from "../chunk-JXJ6VFZO.js";
+} from "../chunk-EJOXOICK.js";
 export {
   MODE_KEY,
   THEME_KEY,

package/build/modern/hooks/useToggle.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useToggle
-} from "../chunk-QEA6N6TN.js";
+} from "../chunk-REO5GUNC.js";
 export {
   useToggle
 };

package/build/modern/index.js

@@ -1,172 +1,172 @@
 import {
   ThemeProvider,
   useThemeContext
-} from "./chunk-S3MTABYX.js";
+} from "./chunk-EB37HRCN.js";
 import {
   Toggle
-} from "./chunk-4YJOK7JJ.js";
+} from "./chunk-GMG3B34U.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-CMKBUSGN.js";
+} from "./chunk-ILZKQP6R.js";
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-AEDGCR25.js";
+} from "./chunk-NUGDTZCL.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-ZBEHDXFT.js";
+} from "./chunk-E6QFLLXH.js";
 import {
   TabPanel
-} from "./chunk-U72VPIZA.js";
+} from "./chunk-HHVQ6LCA.js";
 import {
   Table,
   Tr
-} from "./chunk-A5WYZVUR.js";
+} from "./chunk-B4CVET74.js";
 import {
   Tag
-} from "./chunk-RBZAEOKN.js";
+} from "./chunk-S7XGIQY6.js";
 import {
   Tbody
-} from "./chunk-PJ3744I6.js";
+} from "./chunk-PKQTTFWA.js";
 import {
   Td
-} from "./chunk-XREC5IJE.js";
+} from "./chunk-HPM2XRWT.js";
 import {
   Textarea
-} from "./chunk-TCO46FK7.js";
+} from "./chunk-JIJM6JFJ.js";
 import {
   Th
-} from "./chunk-3GXISGPS.js";
+} from "./chunk-7K6PZBHN.js";
 import {
   Thead
-} from "./chunk-N3FUF4TB.js";
+} from "./chunk-PKY46RRA.js";
 import {
   Portal
-} from "./chunk-4CAT3FHV.js";
+} from "./chunk-2VX52EEJ.js";
 import {
   Radio
-} from "./chunk-PH64POOB.js";
+} from "./chunk-LJYCFFX7.js";
 import {
   Option,
   Select
-} from "./chunk-XPVDT4VF.js";
+} from "./chunk-O6JYYVO7.js";
 import {
   Spinner
-} from "./chunk-IXOJLCNO.js";
+} from "./chunk-7SYJFI5E.js";
 import {
   Tab
-} from "./chunk-SONHHNYQ.js";
+} from "./chunk-LFWAJ5DX.js";
 import {
   TabList
-} from "./chunk-ISPTI4GC.js";
+} from "./chunk-EZYCKM7R.js";
 import {
   ModalHeader
-} from "./chunk-QU7UV5DB.js";
+} from "./chunk-WLEX22KS.js";
 import {
   ModalHeading
-} from "./chunk-JB7IQ2BM.js";
+} from "./chunk-2UXE5PDG.js";
 import {
   NavMenuLink
-} from "./chunk-6DIGPXAD.js";
+} from "./chunk-KBBASJIY.js";
 import {
   NavMenuList,
   getPosition
-} from "./chunk-PMCYXRAH.js";
+} from "./chunk-5V5MBSM3.js";
 import {
   NavMenuTrigger
-} from "./chunk-RPZAPUCF.js";
+} from "./chunk-OWKN5IV7.js";
 import {
   NavMenu,
   useNavMenuContext
-} from "./chunk-KJUCHZHV.js";
+} from "./chunk-O75QAT4Z.js";
 import {
   Notification
-} from "./chunk-QZ6NS6VN.js";
+} from "./chunk-VG46RHBJ.js";
 import {
   NotificationDescription
-} from "./chunk-HW76XVA3.js";
+} from "./chunk-XEW6TJJ4.js";
 import {
   NotificationHeading
-} from "./chunk-3C2DJSEE.js";
+} from "./chunk-SXIXDXG3.js";
 import {
   FileStatus,
   processStatus
-} from "./chunk-LAOQSNMN.js";
+} from "./chunk-2RPWSVRX.js";
 import {
   ProgressBar
-} from "./chunk-G6O7KRQ6.js";
+} from "./chunk-ZFK33MVD.js";
 import {
   FieldMessage
-} from "./chunk-VGHVH2T3.js";
+} from "./chunk-JWIJHSI6.js";
 import {
   FileUploader
-} from "./chunk-BTEEBIVN.js";
+} from "./chunk-JCGWTIR4.js";
 import {
   IconButton
-} from "./chunk-SLHX5K6I.js";
+} from "./chunk-UBJBMOG7.js";
 import {
   Input
-} from "./chunk-SSY3KX3F.js";
+} from "./chunk-WZOYPFUU.js";
 import {
   Label
-} from "./chunk-RQPDRHRP.js";
+} from "./chunk-I35HMGJQ.js";
 import {
   Modal
-} from "./chunk-2UFNQM55.js";
+} from "./chunk-BE4EOU2P.js";
 import {
   ModalDescription
-} from "./chunk-4M4LCQ43.js";
+} from "./chunk-Q7BRMIBR.js";
 import {
   MODE_KEY,
   THEME_KEY,
   useTheme
-} from "./chunk-JXJ6VFZO.js";
+} from "./chunk-EJOXOICK.js";
 import {
   useToggle
-} from "./chunk-QEA6N6TN.js";
+} from "./chunk-REO5GUNC.js";
 import {
   Avatar
-} from "./chunk-UN3OAW56.js";
+} from "./chunk-477G5ZEL.js";
 import {
   Button
-} from "./chunk-6F34A7NZ.js";
+} from "./chunk-EXGKZGML.js";
 import {
   Checkbox
-} from "./chunk-GABTVDSB.js";
+} from "./chunk-AUAPBPGW.js";
 import {
   Field,
   useFieldContext
-} from "./chunk-ZAU4JVLL.js";
+} from "./chunk-UZDVOIW5.js";
 import {
   CircularProgress
-} from "./chunk-A6CLBPFE.js";
+} from "./chunk-3O6UTN3J.js";
 import {
   Droppable
-} from "./chunk-7VJOPJVX.js";
+} from "./chunk-TKI2CKHH.js";
 import {
   FeatureFlag
-} from "./chunk-VULPMZUW.js";
+} from "./chunk-BIDE4IJG.js";
 import {
   FeatureFlags,
   useFeatureFlags
-} from "./chunk-4M3EUP57.js";
+} from "./chunk-CJFW36DZ.js";
 import {
   Show
-} from "./chunk-4O4QFF4S.js";
+} from "./chunk-BUVVRQLZ.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
 } from "./chunk-JF76VIL3.js";
 import {
   useTabsKeyboardNavigation
-} from "./chunk-GKUDLVOV.js";
+} from "./chunk-ITOIXNJS.js";
 import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "./chunk-KF24CS4S.js";
+} from "./chunk-RIFQSCHT.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -178,7 +178,7 @@ import "./chunk-BDCFYW34.js";
 import "./chunk-CP7OUC2Q.js";
 import {
   useModal
-} from "./chunk-C5HLLGME.js";
+} from "./chunk-OW62FLJ6.js";
 
 // src/index.ts
 export * from "@dnd-kit/core";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.9.2-next-5604236",
+  "version": "0.9.2-next-74f2c67",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.9.2-next-5604236"
+    "@cerberus-design/styled-system": "0.9.2-next-74f2c67"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatar.tsx

@@ -14,19 +14,46 @@ import { Show } from './Show'
  */
 
 export type SharedAvatarProps = {
+  /**
+   * An optional icon to show when no src or ariaLabel is provided.
+   */
   icon?: ReactNode
+  /**
+   * The size of the avatar.
+   */
   width?: number
+  /**
+   * The size of the avatar.
+   */
   height?: number
 }
 export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &
   SharedAvatarProps & {
+    /**
+     * The aria-label for the avatar needed for accessibility.
+     */
     ariaLabel: string
+    /**
+     * An optional element to replace the image. Recommended for Next.js Image component.
+     */
     as?: never
+    /**
+     * The source of the image.
+     */
     src: string
   }
 export type AvatarAsProps = SharedAvatarProps & {
+  /**
+   * An optional element to replace the image. Recommended for Next.js Image component.
+   */
   as: ReactNode
+  /**
+   * The aria-label for the avatar needed for accessibility.
+   */
   ariaLabel?: never
+  /**
+   * The source of the image.
+   */
   src?: never
 }
 
@@ -36,7 +63,7 @@ export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
 
 /**
  * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.
- * @definition [Avatar docs](https://cerberus.digitalu.design/react/avatar)
+ * @see https://cerberus.digitalu.design/react/avatar
  * @example
  * ```tsx
  * <Avatar

package/src/components/Button.tsx

@@ -15,7 +15,7 @@ export type ButtonProps = 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
+ * @see https://cerberus.digitalu.design/react/button
  */
 export function Button(props: ButtonProps): JSX.Element {
   const { palette, usage, shape, ...nativeProps } = props

package/src/components/Checkbox.tsx

@@ -18,8 +18,18 @@ import { $cerberusIcons } from '../config/defineIcons'
 
 export type CheckboxProps = CheckboxVariantProps &
   Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
+    /**
+     * The id of the FieldMessage element describing the Checkbox.
+     */
     describedBy?: string
+    /**
+     * The unique identifier for the checkbox. Required for accessibility.
+     */
     id: string
+    /**
+     * Used to display a mixed checked state.
+     * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)
+     */
     mixed?: boolean
   }
 
@@ -27,7 +37,7 @@ export type CheckboxProps = CheckboxVariantProps &
  * Checkbox component
  * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
  * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @definition [Checkbox docs](https://cerberus.digitalu.design/react/checkbox)
+ * @see https://cerberus.digitalu.design/react/checkbox
  * @example
  * ```tsx
  * <Field>

package/src/components/CircularProgress.tsx

@@ -30,7 +30,7 @@ export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
  * @param props.now - The current value of the CircularProgress
  * @param props.title - The title of the CircularProgress for a11y
  * @param props.label - What is shown below the now value (default: 'Done')
- * @description [CircularProgress Docs](https://cerberus.digitalu.design/react/progress/)
+ * @see https://cerberus.digitalu.design/react/progress-indicators
  * @example
  * ```tsx
  * <CircularProgress now={24} title="Course completion" label="done" />

package/src/components/Droppable.tsx

@@ -6,9 +6,22 @@ import { useId, type HtmlHTMLAttributes, type PropsWithChildren } from 'react'
 export interface DroppableProps
   extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'id'>,
     UseDroppableArguments {
+  /**
+   * If the item has been dropped.
+   */
   dropped?: boolean
 }
 
+/**
+ * A Cerberus component is used to define a drop target for draggable elements.
+ * @see https://dndkit.com/
+ * @example
+ * ```tsx
+ * <Droppable id="dropzone">
+ *   <Draggable id="draggable">Drag me</Draggable>
+ * </Droppable>
+ * ```
+ */
 export function Droppable(props: PropsWithChildren<DroppableProps>) {
   const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } =
     props

package/src/components/FeatureFlag.tsx

@@ -5,9 +5,16 @@ import { useFeatureFlags } from '../context/feature-flags'
 import { Show } from './Show'
 
 export interface FeatureFlagProps {
+  /**
+   * The name of the feature flag to check.
+   */
   flag: string
 }
 
+/**
+ * A component that allows you to show or hide content based on a feature flag.
+ * @see https://cerberus.digitalu.design/react/feature-flags
+ */
 export function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {
   const showContent = useFeatureFlags(props.flag)
   return <Show when={showContent}>{props.children}</Show>

package/src/components/FieldMessage.tsx

@@ -1,25 +1,32 @@
 'use client'
 
 import type { HTMLAttributes } from 'react'
-import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
-import { fieldMessage } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  fieldMessage,
+  type FieldMessageVariantProps,
+} from '@cerberus/styled-system/recipes'
 import { useFieldContext } from '../context/field'
 
 /**
  * This module contains the FieldMessage component.
  * @module
  */
-
-export type FieldMessageRecipe = RecipeVariantProps<typeof fieldMessage>
 export interface FieldMessageBaseProps
   extends HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * The id of the FieldMessage element describing the field. Required for accessibility. It is considered best practice to use the `help` or `error` prefix to help screen readers identify the type of message.
+   *
+   * @example For help messages: `help:field_id`
+   * @example For error messages: `error:field_id`
+   */
   id: string
 }
-export type FieldMessageProps = FieldMessageBaseProps & FieldMessageRecipe
+export type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps
 
 /**
  * A component that provides feedback about the field.
- * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)
+ * @see https://cerberus.digitalu.design/react/field-message
  * @example
  * ```tsx
  * <Field>

package/src/components/FileStatus.tsx

@@ -6,8 +6,6 @@ import {
   type HTMLAttributes,
   type MouseEvent,
 } from 'react'
-import { ProgressBar } from './ProgressBar'
-import { IconButton } from './IconButton'
 import {
   fileStatus,
   type FileStatusVariantProps,
@@ -15,8 +13,10 @@ import {
 import { css, cx } from '@cerberus/styled-system/css'
 import { hstack, vstack } from '@cerberus/styled-system/patterns'
 import { $cerberusIcons } from '../config/defineIcons'
-import { FieldMessage } from './FieldMessage'
 import { Field } from '../context/field'
+import { FieldMessage } from './FieldMessage'
+import { ProgressBar, type ProgressBarProps } from './ProgressBar'
+import { IconButton } from './IconButton'
 import { Avatar } from './Avatar'
 
 /**
@@ -24,13 +24,45 @@ import { Avatar } from './Avatar'
  * @module
  */
 
+/**
+ * The available values of the fileStatus helper Object.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
 export type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]
+
+/**
+ * The actions that can be performed on a file.
+ */
 export type FileStatusActions = 'cancel' | 'retry' | 'delete'
 export interface FileBaseStatusProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+  /**
+   * The name of the file.
+   */
   file: string
-  now: number
+  /**
+   * The percentage of the file that has been processed.
+   */
+  now: ProgressBarProps['now']
+  /**
+   * The status of the file.
+   */
   status: processStatus
+  /**
+   * The action to perform on the file when a user clicks the
+   * button located at the end of the status card.
+   * @param status - The status of the file.
+   * @param e - The event object.
+   * @example
+   * ```tsx
+   * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+   * ```
+   * @default () => {}
+   */
   onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
 }
 export type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps
@@ -51,13 +83,8 @@ export const enum processStatus {
 }
 
 /**
- * This component displays the status of a file.
- * @param props - {
- *  file: string,
- *  now: number,
- *  status: keyof typeof fileStatus,
- *  action: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
- * }.
+ * A component that displays the status of a file during file processing.
+ * @see https://cerberus.digitalu.design/react/file-uploader
  * @example
  * ```tsx
  * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />

package/src/components/FileUploader.tsx

@@ -10,10 +10,20 @@ import { Avatar } from './Avatar'
 
 export interface FileUploaderProps
   extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * The optional heading to display in the FileUploader component.
+   */
   heading?: string
+  /**
+   * The name of the file input element.
+   */
   name: string
 }
 
+/**
+ * A component that allows the user to upload files.
+ * @see https://cerberus.digitalu.design/react/file-uploader
+ */
 export function FileUploader(props: FileUploaderProps) {
   const styles = fileUploader()
   const Icon = $cerberusIcons.fileUploader

package/src/components/IconButton.tsx

@@ -1,6 +1,9 @@
 import type { ButtonHTMLAttributes } from 'react'
-import { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'
-import { iconButton } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  iconButton,
+  type IconButtonVariantProps,
+} from '@cerberus/styled-system/recipes'
 import type { Positions } from '../types'
 
 /**
@@ -10,15 +13,22 @@ import type { Positions } from '../types'
 
 export interface IconButtonRawProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * The aria-label attribute for the icon button.
+   */
   ariaLabel: string
+  /**
+   * The position of the tooltip relative to the icon button.
+   * @example 'top' | 'right' | 'bottom' | 'left'
+   * @default 'top'
+   */
   tooltipPosition?: Positions
 }
-export type IconButtonRecipeProps = RecipeVariantProps<typeof iconButton>
-export type IconButtonProps = IconButtonRawProps & IconButtonRecipeProps
+export type IconButtonProps = IconButtonRawProps & IconButtonVariantProps
 
 /**
  * A component that allows the user to perform actions using an icon
- * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx
+ * @see https://cerberus.digitalu.design/react/icon-button
  */
 export function IconButton(props: IconButtonProps): JSX.Element {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props