@cerberus-design/react 0.9.2 → 0.10.0

package/build/modern/index.js

@@ -1,164 +1,172 @@
+import {
+  ThemeProvider,
+  useThemeContext
+} from "./chunk-EB37HRCN.js";
+import {
+  Toggle
+} from "./chunk-GMG3B34U.js";
+import {
+  ConfirmModal,
+  useConfirmModal
+} from "./chunk-ILZKQP6R.js";
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-O6WHVUEW.js";
+} from "./chunk-NUGDTZCL.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-T7TOXGZT.js";
+} from "./chunk-E6QFLLXH.js";
+import {
+  TabPanel
+} from "./chunk-HHVQ6LCA.js";
+import {
+  Table,
+  Tr
+} from "./chunk-B4CVET74.js";
 import {
   Tag
-} from "./chunk-Z6IWNVPN.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 {
-  Toggle
-} from "./chunk-4YJOK7JJ.js";
-import {
-  ConfirmModal,
-  useConfirmModal
-} from "./chunk-WWJRKSM5.js";
+  Portal
+} from "./chunk-2VX52EEJ.js";
 import {
   Radio
-} from "./chunk-PH64POOB.js";
+} from "./chunk-LJYCFFX7.js";
 import {
   Option,
   Select
-} from "./chunk-VRPAW76S.js";
+} from "./chunk-O6JYYVO7.js";
+import {
+  Spinner
+} from "./chunk-7SYJFI5E.js";
 import {
   Tab
-} from "./chunk-SONHHNYQ.js";
+} from "./chunk-LFWAJ5DX.js";
 import {
   TabList
-} from "./chunk-ISPTI4GC.js";
-import {
-  TabPanel
-} from "./chunk-U72VPIZA.js";
+} from "./chunk-EZYCKM7R.js";
 import {
-  Table,
-  Tr
-} from "./chunk-A5WYZVUR.js";
+  ModalHeader
+} 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";
-import {
-  Portal
-} from "./chunk-4CAT3FHV.js";
+} from "./chunk-SXIXDXG3.js";
 import {
   FileStatus,
   processStatus
-} from "./chunk-DGJPW76I.js";
+} from "./chunk-2RPWSVRX.js";
 import {
   ProgressBar
-} from "./chunk-TYTEREKZ.js";
+} from "./chunk-ZFK33MVD.js";
+import {
+  FieldMessage
+} from "./chunk-JWIJHSI6.js";
 import {
   FileUploader
-} from "./chunk-XOVQGPIE.js";
+} from "./chunk-JCGWTIR4.js";
 import {
   IconButton
-} from "./chunk-SLHX5K6I.js";
+} from "./chunk-UBJBMOG7.js";
 import {
   Input
-} from "./chunk-FMFKM2AB.js";
+} from "./chunk-WZOYPFUU.js";
 import {
   Label
-} from "./chunk-2FK7NR7Y.js";
+} from "./chunk-I35HMGJQ.js";
 import {
   Modal
-} from "./chunk-2UFNQM55.js";
+} from "./chunk-BE4EOU2P.js";
 import {
   ModalDescription
-} from "./chunk-4M4LCQ43.js";
-import {
-  ModalHeader
-} from "./chunk-QU7UV5DB.js";
+} from "./chunk-Q7BRMIBR.js";
 import {
   MODE_KEY,
   THEME_KEY,
-  ThemeProvider,
-  useTheme,
-  useThemeContext
-} from "./chunk-SXXWC6UD.js";
+  useTheme
+} 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-ZCIJRM2X.js";
+} from "./chunk-AUAPBPGW.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-UZDVOIW5.js";
+import {
+  CircularProgress
+} 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";
-import {
-  FieldMessage
-} from "./chunk-VGHVH2T3.js";
-import {
-  Field,
-  useFieldContext
-} from "./chunk-ZAU4JVLL.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";
@@ -170,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";
@@ -179,6 +187,7 @@ export {
   Avatar,
   Button,
   Checkbox,
+  CircularProgress,
   ConfirmModal,
   Droppable,
   FeatureFlag,
@@ -210,6 +219,7 @@ export {
   Radio,
   Select,
   Show,
+  Spinner,
   THEME_KEY,
   Tab,
   TabList,

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/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\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/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/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'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,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/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/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\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/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'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,15 +26,14 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.9.2"
+    "@cerberus-design/styled-system": "0.10.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "files": [
     "build/**/*",
-    "src/**/*",
-    "index.ts"
+    "src/**/*"
   ],
   "keywords": [
     "panda-css",

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

@@ -0,0 +1,170 @@
+'use client'
+
+import { cq } from '@cerberus/styled-system/patterns'
+import { css } from '@cerberus/styled-system/css'
+import type { SVGProps } from 'react'
+
+/**
+ * This module contains the CircularProgress component.
+ * @module
+ */
+
+export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
+  /**
+   * The current value of the CircularProgress
+   */
+  now: number
+  /**
+   * The title of the CircularProgress for a11y
+   */
+  title: string
+  /**
+   * What is shown below the now value (default: 'Done')
+   */
+  label?: string
+}
+
+/**
+ * The CircularProgress component is used to display a loading indicator.
+ * @param props - SVG element attributes
+ * @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')
+ * @see https://cerberus.digitalu.design/react/progress-indicators
+ * @example
+ * ```tsx
+ * <CircularProgress now={24} title="Course completion" label="done" />
+ * ```
+ */
+export function CircularProgress(props: CircularProgressProps) {
+  const strokeW: number = 14
+  const radius = `calc(50% * (1 - ${strokeW}/100))`
+  const status: string = props.label ?? 'Done'
+  const now: number = props.now >= 100 ? 100 : props.now
+
+  return (
+    <div
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={now}
+      className={cq({
+        alignSelf: 'stretch',
+        flex: 1,
+        m: '4px',
+        position: 'relative',
+      })}
+      role="progressbar"
+    >
+      <svg
+        data-complete={now === 100}
+        className={css({
+          display: 'block',
+          rounded: 'full',
+          transition: 'all 0.5s ease',
+        })}
+        fill="none"
+        strokeLinecap="round"
+        strokeWidth={strokeW}
+        viewBox="0 0 100 100"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>{props.title}</title>
+        <desc>{`${now}% ${status}`}</desc>
+        <mask id="progMask">
+          <rect fill="white" width="100%" height="100%" />
+          <circle
+            className={css({
+              stroke: 'page.bg.100',
+            })}
+            cx="50%"
+            cy="50%"
+            r={radius}
+            pathLength="100"
+          />
+          <circle
+            className={css({
+              transition: 'stroke-dashoffset 0.5s ease',
+            })}
+            cx="50%"
+            cy="50%"
+            r={radius}
+            pathLength="100"
+            stroke="black"
+            strokeDasharray="100"
+            strokeDashoffset={100 - now}
+            transform="rotate(-90 50 50)"
+          />
+        </mask>
+
+        {/* <circle
+          fill="var(--cerberus-colors-page-surface-initial)"
+          cx="50%"
+          cy="50%"
+          r={`calc(50% * (1.15 - ${strokeW}/100))`}
+          pathLength="100"
+          mask="url(#progMask)"
+        /> */}
+
+        <circle
+          className={css({
+            fill: 'page.surface.initial',
+          })}
+          cx="50%"
+          cy="50%"
+          r={`calc(50% * (1 - ${strokeW}/100))`}
+          pathLength="100"
+        />
+        <circle
+          className={css({
+            stroke: 'page.bg.100',
+          })}
+          cx="50%"
+          cy="50%"
+          r={radius}
+          pathLength="100"
+        />
+        <circle
+          data-complete={now === 100}
+          className={css({
+            stroke: 'action.bg.initial',
+            transition: 'stroke-dashoffset 0.5s ease',
+            '&:is([data-complete=true])': {
+              stroke: 'success.bg.initial',
+            },
+          })}
+          cx="50%"
+          cy="50%"
+          r={radius}
+          pathLength="100"
+          strokeDasharray="100"
+          strokeDashoffset={100 - now}
+          transform="rotate(-90 50 50)"
+        />
+
+        <g>
+          <text
+            className={css({
+              fill: 'page.text.initial',
+              fontFamily: 'mono',
+              textStyle: '1.25rem',
+            })}
+            x="35%"
+            y="50%"
+          >
+            {now}%
+          </text>
+          <text
+            className={css({
+              fill: 'page.text.100',
+              fontSize: '0.5rem',
+            })}
+            x="39%"
+            y="60%"
+          >
+            {status}
+          </text>
+        </g>
+      </svg>
+    </div>
+  )
+}

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>