@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-5d7dc1e

package/build/modern/index.js

@@ -1,14 +1,3 @@
-import {
-  NavMenuList,
-  getPosition
-} from "./chunk-AIJ75ENY.js";
-import {
-  NavMenuTrigger
-} from "./chunk-245SMQ45.js";
-import {
-  ThemeProvider,
-  useThemeContext
-} from "./chunk-EB37HRCN.js";
 import {
   Modal
 } from "./chunk-Q3I4H6EC.js";
@@ -24,14 +13,31 @@ import {
 import {
   NavMenuLink
 } from "./chunk-YOTXFCCC.js";
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-AIJ75ENY.js";
+import {
+  NavMenuTrigger
+} from "./chunk-245SMQ45.js";
+import {
+  ThemeProvider,
+  useThemeContext
+} from "./chunk-EB37HRCN.js";
+import {
+  FieldMessage
+} from "./chunk-L7N24B6B.js";
+import {
+  Label
+} from "./chunk-LT62577B.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-7S47NSGR.js";
+} from "./chunk-H54FR7IP.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-3RGRHMJQ.js";
+} from "./chunk-ZDANBCM3.js";
 import {
   NavMenu,
   useNavMenuContext
@@ -39,20 +45,17 @@ import {
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-Z7FGXAND.js";
+} from "./chunk-FMRWRVUS.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-Q4IV5NUT.js";
+} from "./chunk-CMYD5KWA.js";
 import {
   Tbody
 } from "./chunk-ZR37P4NZ.js";
 import {
   Td
 } from "./chunk-3R4TIF2X.js";
-import {
-  Textarea
-} from "./chunk-JIJM6JFJ.js";
 import {
   Th
 } from "./chunk-SGKHA4EB.js";
@@ -61,23 +64,23 @@ import {
 } from "./chunk-Y6QQCRQV.js";
 import {
   Toggle
-} from "./chunk-XQICKZH4.js";
+} from "./chunk-GENS32QO.js";
 import {
   Tooltip
 } from "./chunk-LPALHB6R.js";
+import {
+  For
+} from "./chunk-77FJSNGD.js";
 import {
   Radio
-} from "./chunk-FTPZHG6J.js";
+} from "./chunk-6WOJAMZV.js";
 import {
   Option,
   OptionGroup,
   OptionGroupLabel,
   Select,
   createSelectCollection
-} from "./chunk-5QONP7GT.js";
-import {
-  Text
-} from "./chunk-RU5LOXWI.js";
+} from "./chunk-S2X5OEPK.js";
 import {
   SelectClearTrigger,
   SelectContent,
@@ -113,12 +116,9 @@ import {
 import {
   Tag
 } from "./chunk-MISIUX63.js";
-import {
-  Label
-} from "./chunk-NMF2HYWO.js";
 import {
   Legend
-} from "./chunk-ILQW5VZT.js";
+} from "./chunk-RBNOEAWJ.js";
 import {
   Menu,
   MenuContent,
@@ -137,6 +137,23 @@ import {
 import {
   NotificationHeading
 } from "./chunk-SLHYBPJ5.js";
+import {
+  DialogCloseIconTrigger
+} from "./chunk-6BN3XKQF.js";
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogProvider,
+  DialogTrigger
+} from "./chunk-TFL56AYR.js";
+import {
+  Droppable
+} from "./chunk-TKI2CKHH.js";
 import {
   FeatureFlag
 } from "./chunk-BIDE4IJG.js";
@@ -146,29 +163,32 @@ import {
 } from "./chunk-CJFW36DZ.js";
 import {
   Fieldset
-} from "./chunk-3ZDFQO25.js";
+} from "./chunk-6EUC3SUI.js";
 import {
   FieldsetLabel
-} from "./chunk-PZAZKQMO.js";
+} from "./chunk-OYT7RGC7.js";
 import {
   FileStatus,
   processStatus
-} from "./chunk-7P7OWBGV.js";
+} from "./chunk-CF3EHG42.js";
 import {
   ProgressBar
 } from "./chunk-WZJ5UQNM.js";
-import {
-  FieldMessage
-} from "./chunk-JWIJHSI6.js";
 import {
   FileUploader
 } from "./chunk-7SU6FCTJ.js";
 import {
-  Input
-} from "./chunk-VYCU7I4J.js";
+  AccordionItemGroup
+} from "./chunk-WN7TJX6J.js";
 import {
-  Checkbox
-} from "./chunk-NGOLRISW.js";
+  Admonition,
+  AdmonitionDescription,
+  AdmonitionHeading
+} from "./chunk-DXBZ3HMY.js";
+import "./chunk-2HOUQ2DX.js";
+import {
+  Avatar
+} from "./chunk-SXLPDPOZ.js";
 import {
   CircularProgress
 } from "./chunk-6QHOKCV3.js";
@@ -183,11 +203,13 @@ import {
   DatePickerViewControlGroup,
   DatePickerYearView,
   RangePickerInput
-} from "./chunk-KU2AWAK3.js";
+} from "./chunk-FK52US7K.js";
 import {
-  Field,
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
+  Portal
+} from "./chunk-IQJDVFPP.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
 import {
   DatePickerContext,
   DatePickerLabel,
@@ -198,55 +220,63 @@ import {
   DatePickerView,
   DatePickerViewControl
 } from "./chunk-5EWCH7AI.js";
+import "./chunk-TIJAFPHQ.js";
 import {
-  DialogCloseIconTrigger
-} from "./chunk-6BN3XKQF.js";
+  Checkbox
+} from "./chunk-UNN4LHRS.js";
+import "./chunk-EL4MX2PG.js";
 import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
+  Text
+} from "./chunk-RU5LOXWI.js";
 import {
-  Dialog,
-  DialogBackdrop,
-  DialogCloseTrigger,
-  DialogContent,
-  DialogDescription,
-  DialogHeading,
-  DialogPositioner,
-  DialogProvider,
-  DialogTrigger
-} from "./chunk-TFL56AYR.js";
+  CheckboxParts
+} from "./chunk-KWZ3CEG6.js";
+import {
+  CheckboxControl,
+  CheckboxGroup,
+  CheckboxHiddenInput,
+  CheckboxIndicator,
+  CheckboxLabel,
+  CheckboxRoot
+} from "./chunk-BPRF34DU.js";
+import "./chunk-TYPULJMJ.js";
+import {
+  Field
+} from "./chunk-FBS7AX76.js";
+import {
+  FieldParts
+} from "./chunk-6I2FW4WI.js";
+import {
+  FieldErrorText,
+  FieldHelperText,
+  FieldInput,
+  FieldLabel,
+  FieldRequiredIndicator,
+  FieldRoot,
+  FieldTextarea,
+  Input,
+  Textarea
+} from "./chunk-VSTOSLFS.js";
 import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
+  FieldStartIndicator
+} from "./chunk-Z52R6ABJ.js";
 import {
-  Droppable
-} from "./chunk-TKI2CKHH.js";
+  FieldStatusIndicator
+} from "./chunk-CNA2VKAH.js";
 import "./chunk-V3M3ZOQI.js";
-import {
-  AccordionItemGroup
-} from "./chunk-WN7TJX6J.js";
 import {
   AccordionItemIndicator
 } from "./chunk-XZGXRRSQ.js";
+import {
+  CerberusProvider,
+  useCerberusContext
+} from "./chunk-GITT5645.js";
 import {
   Accordion,
   AccordionItem,
   AccordionItemContent,
   AccordionItemTrigger
 } from "./chunk-AZRFYQO7.js";
-import {
-  Admonition,
-  AdmonitionDescription,
-  AdmonitionHeading
-} from "./chunk-DXBZ3HMY.js";
-import "./chunk-2HOUQ2DX.js";
-import {
-  Avatar
-} from "./chunk-SXLPDPOZ.js";
-import {
-  CerberusProvider,
-  useCerberusContext
-} from "./chunk-GITT5645.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
@@ -262,8 +292,9 @@ import {
   useToggle
 } from "./chunk-REO5GUNC.js";
 import {
-  formatNotifyCount
-} from "./chunk-C5EHJUS5.js";
+  formatNotifyCount,
+  splitProps
+} from "./chunk-BL7G3577.js";
 import {
   getLocalStorage,
   setLocalStorage
@@ -271,11 +302,11 @@ import {
 import "./chunk-CYC2YUKU.js";
 import {
   ButtonParts
-} from "./chunk-2JX27W6Y.js";
+} from "./chunk-2BIHLH4V.js";
 import {
   Button,
   ButtonIcon
-} from "./chunk-MER66QUY.js";
+} from "./chunk-6KZVE4HC.js";
 import {
   Spinner
 } from "./chunk-7SYJFI5E.js";
@@ -304,7 +335,7 @@ import {
   formatMilitaryDate,
   formatMilitaryToISO,
   useDate
-} from "./chunk-3BM6MZ4A.js";
+} from "./chunk-MWRO5QYD.js";
 
 // src/index.ts
 export * from "@dnd-kit/core";
@@ -325,6 +356,13 @@ export {
   CTAModal,
   CerberusProvider,
   Checkbox,
+  CheckboxControl,
+  CheckboxGroup,
+  CheckboxHiddenInput,
+  CheckboxIndicator,
+  CheckboxLabel,
+  CheckboxParts,
+  CheckboxRoot,
   CircularProgress,
   ConfirmModal,
   DateFormats,
@@ -359,11 +397,22 @@ export {
   FeatureFlag,
   FeatureFlags,
   Field,
+  FieldErrorText,
+  FieldHelperText,
+  FieldInput,
+  FieldLabel,
   FieldMessage,
+  FieldParts,
+  FieldRequiredIndicator,
+  FieldRoot,
+  FieldStartIndicator,
+  FieldStatusIndicator,
+  FieldTextarea,
   Fieldset,
   FieldsetLabel,
   FileStatus,
   FileUploader,
+  For,
   IconButton,
   Input,
   Label,
@@ -445,13 +494,13 @@ export {
   makeSystemConfig,
   processStatus,
   setLocalStorage,
+  splitProps,
   trapFocus,
   useCTAModal,
   useCerberusContext,
   useConfirmModal,
   useDate,
   useFeatureFlags,
-  useFieldContext,
   useModal,
   useNavMenuContext,
   useNotificationCenter,

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// deprecated\n\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/button/index'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Dialog'\nexport * from './components/Dialog.client'\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/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Spinner'\nexport * from './components/Tabs.client'\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/Text'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Select'\nexport * from './components/Select.server'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/cerberus'\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/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoGA,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// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './hooks/useDate'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Dialog'\nexport * from './components/Dialog.client'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Legend'\nexport * from './components/Menu'\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/Spinner'\nexport * from './components/Tabs.client'\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/Text'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Select'\nexport * from './components/Select.server'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\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'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,cAAc;","names":[]}

package/build/modern/utils/index.js

@@ -1,6 +1,7 @@
 import {
-  formatNotifyCount
-} from "../chunk-C5EHJUS5.js";
+  formatNotifyCount,
+  splitProps
+} from "../chunk-BL7G3577.js";
 import {
   getLocalStorage,
   setLocalStorage
@@ -8,6 +9,7 @@ import {
 export {
   formatNotifyCount,
   getLocalStorage,
-  setLocalStorage
+  setLocalStorage,
+  splitProps
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.15.0-next-e0ce56e",
+  "version": "0.15.0-next-5d7dc1e",
   "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/styled-system": "npm:@cerberus-design/styled-system@0.15.0-next-e0ce56e"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.15.0-next-5d7dc1e"
   },
   "publishConfig": {
     "access": "public"

package/src/components/DatePicker.client.tsx

@@ -12,7 +12,6 @@ import {
 import { Portal } from './Portal'
 import { datePicker, iconButton } from '@cerberus/styled-system/recipes'
 import { css, cx } from '@cerberus/styled-system/css'
-import { useFieldContext } from '../context/field'
 import {
   DatePickerView,
   DatePickerContext,
@@ -50,12 +49,10 @@ const datePickerStyles = datePicker()
  * ```
  */
 export function DatePicker(props: DatePickerRootProps) {
-  const states = useFieldContext()
-
-  // TODO: Remove this once the bug is fixed: https://github.com/chakra-ui/ark/issues/3112
-
   // There is a bug with the Root component that causes random date selection
   // onBlur after the first selection if the format prop is used.
+  // ref: https://github.com/chakra-ui/ark/issues/3112#event-16047829195
+
   // const handleFormat = useCallback((value: DateValue) => {
   //   return formatISOToMilitary(value.toString())
   // }, [])
@@ -63,7 +60,6 @@ export function DatePicker(props: DatePickerRootProps) {
   return (
     <ArkDP.Root
       {...props}
-      {...states}
       positioning={{
         placement: 'bottom-start',
       }}
@@ -157,14 +153,11 @@ export function DatePickerTrigger(props: DatePickerTriggerProps) {
  * ```
  */
 export function DatePickerInput(props: DatePickerInputProps) {
-  const { invalid, ...fieldStates } = useFieldContext()
   return (
     <ArkDP.Control className={datePickerStyles.control}>
       <DatePickerTrigger />
       <ArkDP.Input
         {...props}
-        {...fieldStates}
-        {...(invalid && { 'aria-invalid': true })}
         className={cx(props.className, datePickerStyles.input)}
         placeholder={props.placeholder ?? 'DD MMM YYYY'}
         maxLength={11}
@@ -200,7 +193,6 @@ export interface RangePickerInputProps
  * ```
  */
 export function RangePickerInput(props: RangePickerInputProps) {
-  const { invalid, ...fieldStates } = useFieldContext()
   const { defaultValue, ...nativeProps } = props
 
   const startDate = useMemo(() => defaultValue?.[0], [defaultValue])
@@ -211,8 +203,6 @@ export function RangePickerInput(props: RangePickerInputProps) {
       <DatePickerTrigger />
       <ArkDP.Input
         {...nativeProps}
-        {...fieldStates}
-        {...(invalid && { 'aria-invalid': true })}
         data-range-input
         defaultValue={startDate}
         className={cx(props.className, datePickerStyles.input)}
@@ -222,8 +212,6 @@ export function RangePickerInput(props: RangePickerInputProps) {
       />
       <ArkDP.Input
         {...nativeProps}
-        {...fieldStates}
-        {...(invalid && { 'aria-invalid': true })}
         data-range-input
         defaultValue={endDate}
         data-range-end-input

package/src/components/Fieldset.tsx

@@ -1,8 +1,8 @@
 'use client'
 
+import { useFieldContext } from '@ark-ui/react/field'
 import { css, cx } from '@cerberus/styled-system/css'
 import type { FieldsetHTMLAttributes } from 'react'
-import { useFieldContext } from '../context/field'
 
 /**
  * This module contains the Fieldset component.
@@ -45,12 +45,12 @@ export type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>
  * }
  */
 export function Fieldset(props: FieldsetProps) {
-  const { invalid, ...formState } = useFieldContext()
+  const { invalid, disabled } = useFieldContext()
 
   return (
     <fieldset
       {...props}
-      {...formState}
+      disabled={disabled}
       {...(invalid && { 'aria-invalid': true })}
       className={cx(
         props.className,

package/src/components/FieldsetLabel.tsx

@@ -1,13 +1,16 @@
 import { cx } from '@cerberus/styled-system/css'
 import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
-import type { LabelProps } from './Label'
+import type { LabelProps } from './deprecated/Label'
 
 /**
  * This module contains the FieldsetLabel component.
  * @module FieldsetLabel
  */
 
-export type FieldsetLabelProps = LabelProps & LabelVariantProps
+export type FieldsetLabelProps = LabelProps &
+  LabelVariantProps & {
+    htmlFor?: string
+  }
 
 /**
  * Used for labeling inputs that are children of a Fieldset group.

package/src/components/FileStatus.tsx

@@ -12,12 +12,11 @@ import {
 } from '@cerberus/styled-system/recipes'
 import { css, cx } from '@cerberus/styled-system/css'
 import { hstack, vstack } from '@cerberus/styled-system/patterns'
-import { Field } from '../context/field'
 import { useCerberusContext } from '../context/cerberus'
-import { FieldMessage } from './FieldMessage'
 import { ProgressBar, type ProgressBarProps } from './ProgressBar'
 import { IconButton } from './IconButton'
 import { Avatar } from './Avatar'
+import { Field, FieldHelperText } from './field/index'
 
 /**
  * This module contains the FileStatus component.
@@ -157,15 +156,15 @@ export function FileStatus(props: FileStatusProps) {
           now={now}
           size="sm"
         />
-        <Field invalid={modalIconPalette === 'hades-dark'}>
-          <FieldMessage
+        <Field label="" invalid={modalIconPalette === 'hades-dark'}>
+          <FieldHelperText
             className={css({
               color: 'page.text.100',
             })}
             id={`help:${file}`}
           >
             <MatchFileStatusText status={status} now={now} />
-          </FieldMessage>
+          </FieldHelperText>
         </Field>
       </div>
 

package/src/components/Legend.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import { css, cx } from '@cerberus/styled-system/css'
-import { type HTMLAttributes } from 'react'
-import { useFieldContext } from '../context/field'
-import { Show } from './Show'
 import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
 import { hstack } from '@cerberus/styled-system/patterns'
+import { type HTMLAttributes } from 'react'
+import { Show } from './Show'
+import { useFieldContext } from '@ark-ui/react/field'
 
 /**
  * This module contains the Fieldset component.
@@ -50,12 +50,11 @@ export type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps
  */
 export function Legend(props: LegendProps) {
   const { size, ...nativeProps } = props
-  const { invalid, ...formState } = useFieldContext()
+  const { invalid, required } = useFieldContext()
 
   return (
     <legend
       {...nativeProps}
-      {...formState}
       {...(invalid && { 'aria-invalid': true })}
       className={cx(
         nativeProps.className,
@@ -69,7 +68,7 @@ export function Legend(props: LegendProps) {
       )}
     >
       {nativeProps.children}
-      <Show when={formState.required}>
+      <Show when={required}>
         <span
           className={css({
             color: 'page.text.100',

package/src/components/Radio.tsx

@@ -1,11 +1,9 @@
-'use client'
-
+import { Field } from '@ark-ui/react/field'
 import { cx } from '@cerberus/styled-system/css'
 import { hstack } from '@cerberus/styled-system/patterns'
 import { radio } from '@cerberus/styled-system/recipes'
 import type { RecipeVariantProps } from '@cerberus/styled-system/types'
 import type { InputHTMLAttributes, PropsWithChildren } from 'react'
-import { useFieldContext } from '../context/field'
 
 /**
  * This module contains the Radio component.
@@ -45,7 +43,6 @@ export type RadioProps = RadioBaseProps & RadioRecipe
  */
 export function Radio(props: PropsWithChildren<RadioProps>) {
   const { children, size, ...nativeProps } = props
-  const { invalid, ...state } = useFieldContext()
   const styles = radio({ size })
 
   return (
@@ -59,10 +56,8 @@ export function Radio(props: PropsWithChildren<RadioProps>) {
       )}
       tabIndex={0}
     >
-      <input
+      <Field.Input
         {...nativeProps}
-        {...state}
-        {...(invalid && { 'aria-invalid': true })}
         className={cx(nativeProps.className, styles.input)}
         tabIndex={-1}
         type="radio"