@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-739c492

package/package.json

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

package/src/components/Checkbox.tsx

@@ -7,9 +7,9 @@ import {
 import { vstack } from '@cerberus/styled-system/patterns'
 import { cx } from '@cerberus/styled-system/css'
 import type { InputHTMLAttributes } from 'react'
-import { Show } from './Show'
-import { useFieldContext } from '../context/field'
 import { useCerberusContext } from '../context/cerberus'
+import { Show } from './Show'
+import { useFieldContext } from '@ark-ui/react/field'
 
 /**
  * This module contains the Checkbox component.
@@ -19,13 +19,13 @@ import { useCerberusContext } from '../context/cerberus'
 export type CheckboxProps = CheckboxVariantProps &
   Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
     /**
-     * The id of the FieldMessage element describing the Checkbox.
+     * @deprecated
      */
     describedBy?: string
     /**
-     * The unique identifier for the checkbox. Required for accessibility.
+     * @deprecated use the Field.ids.control instead
      */
-    id: string
+    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/)
@@ -46,8 +46,9 @@ export type CheckboxProps = CheckboxVariantProps &
  * ```
  */
 export function Checkbox(props: CheckboxProps) {
-  const { describedBy, size, checked, mixed, ...nativeProps } = props
-  const { invalid, ...fieldStates } = useFieldContext()
+  const { size, checked, mixed, ...nativeProps } = props
+  const { invalid, disabled, readOnly, required, ariaDescribedby, ids } =
+    useFieldContext()
   const styles = checkbox({ size })
   const { icons } = useCerberusContext()
   const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons
@@ -71,10 +72,13 @@ export function Checkbox(props: CheckboxProps) {
     >
       <input
         {...nativeProps}
-        {...fieldStates}
-        {...(describedBy && { 'aria-describedby': describedBy })}
+        {...(disabled && { disabled: true })}
+        {...(readOnly && { readOnly: true })}
+        {...(required && { required: true })}
+        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
         {...(invalid && { 'aria-invalid': true })}
         {...(mixed && { 'aria-checked': 'mixed' })}
+        id={ids.control}
         className={cx('peer', nativeProps.className, styles.input)}
         type="checkbox"
       />

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"

package/src/components/Select.tsx

@@ -19,7 +19,6 @@ import { HStack } from '@cerberus/styled-system/jsx'
 import { useCerberusContext } from '../context/cerberus'
 import { Portal } from './Portal'
 import { Show } from './Show'
-import { Text } from './Text'
 import {
   SelectContent,
   SelectControl,
@@ -29,7 +28,6 @@ import {
   SelectItemGroupLabel,
   SelectItemIndicator,
   SelectItemText,
-  SelectLabel,
   SelectPositioner,
   SelectRoot,
   SelectTrigger,
@@ -68,10 +66,6 @@ export interface BaseSelectProps {
    * The placeholder text when no option is selected.
    */
   placeholder?: string
-  /**
-   * The label of the select.
-   */
-  label: string
 }
 
 export type SelectProps = SelectRootProps<SelectCollectionItem> &
@@ -110,7 +104,7 @@ export type SelectProps = SelectRootProps<SelectCollectionItem> &
  * }
  */
 export function Select(props: SelectProps) {
-  const { collection, label, placeholder, size, ...rootProps } = props
+  const { collection, placeholder, size, ...rootProps } = props
   const { icons } = useCerberusContext()
   const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons
 
@@ -118,15 +112,6 @@ export function Select(props: SelectProps) {
 
   return (
     <SelectRoot className={styles.root} collection={collection} {...rootProps}>
-      <SelectLabel className={styles.label}>
-        {label}
-        <Show when={props.required}>
-          <Text as="span" color="page.text.100">
-            (required)
-          </Text>
-        </Show>
-      </SelectLabel>
-
       <SelectControl className={styles.control}>
         <SelectTrigger className={styles.trigger}>
           <SelectValueText placeholder={placeholder} />

package/src/components/Toggle.tsx

@@ -1,13 +1,13 @@
 'use client'
 
+import { useFieldContext } from '@ark-ui/react/field'
+import type { InputHTMLAttributes } from 'react'
 import { cx } from '@cerberus/styled-system/css'
 import { hstack, vstack } from '@cerberus/styled-system/patterns'
 import {
   toggle,
   type ToggleVariantProps,
 } from '@cerberus/styled-system/recipes'
-import type { InputHTMLAttributes } from 'react'
-import { useFieldContext } from '../context/field'
 import { useCerberusContext } from '../context/cerberus'
 
 /**
@@ -20,7 +20,7 @@ export type ToggleBase = Omit<
   'size' | 'id' | 'value'
 > & {
   /**
-   * The FieldMessage providing context for the Toggle.
+   * @deprecated
    */
   describedBy?: string
   /**
@@ -56,9 +56,12 @@ export type ToggleProps = ToggleBase & ToggleVariantProps
  * ```
  */
 export function Toggle(props: ToggleProps) {
-  const { size, describedBy, ...nativeProps } = props
+  const { size, ...nativeProps } = props
   const styles = toggle({ size })
-  const { invalid, ...state } = useFieldContext()
+
+  const { invalid, disabled, readOnly, required, ariaDescribedby } =
+    useFieldContext()
+
   const { icons } = useCerberusContext()
   const CheckedIcon = icons.toggleChecked
 
@@ -69,8 +72,12 @@ export function Toggle(props: ToggleProps) {
     >
       <input
         {...nativeProps}
-        {...state}
-        {...(describedBy && { 'aria-describedby': describedBy })}
+        {...(disabled && { disabled: true })}
+        {...(readOnly && { readOnly: true })}
+        {...(required && { required: true })}
+        {...(ariaDescribedby && {
+          'aria-describedby': ariaDescribedby,
+        })}
         {...(invalid && { 'aria-invalid': true })}
         className={cx('peer', styles.input)}
         role="switch"

package/src/components/button/button.tsx

@@ -12,9 +12,9 @@ import {
   button,
   type ButtonVariantProps,
 } from '@cerberus/styled-system/recipes'
+import { Box } from '@cerberus/styled-system/jsx'
 import { Show } from '../Show'
 import { Spinner } from '../Spinner'
-import { Box } from '@cerberus/styled-system/jsx'
 
 /**
  * This module contains the Button component.

package/src/components/button/parts.ts

@@ -7,7 +7,13 @@ import { Button, ButtonIcon } from './button'
  */
 
 interface ButtonPartsValue {
+  /**
+   * The context provider of the button.
+   */
   Root: ElementType
+  /**
+   * The icon of the button.
+   */
   Icon: ElementType
 }
 

package/src/components/{FieldMessage.tsx → deprecated/FieldMessage.tsx}

@@ -6,7 +6,7 @@ import {
   fieldMessage,
   type FieldMessageVariantProps,
 } from '@cerberus/styled-system/recipes'
-import { useFieldContext } from '../context/field'
+import { useFieldContext } from '@ark-ui/react/field'
 
 /**
  * This module contains the FieldMessage component.
@@ -25,18 +25,7 @@ export interface FieldMessageBaseProps
 export type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps
 
 /**
- * A component that provides feedback about the field.
- * @see https://cerberus.digitalu.design/react/field-message
- * @example
- * ```tsx
- * <Field>
- *  <Label htmlFor="first_name">First Name</Label>
- *  <Input aria-describedBy="help:first_name" id="first_name" type="text" />
- *  <FieldMessage id="help:first_name">
- *   This will only be used in your account information.
- *  </FieldMessage>
- * </Field>
- * ```
+ * @deprecated use FieldHelperText, FieldErrorText, or FieldParts instead
  */
 export function FieldMessage(props: FieldMessageProps) {
   const { invalid } = useFieldContext()

package/src/components/deprecated/Label.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import { FieldLabel } from '../field'
+
+/**
+ * This module contains the Label component.
+ * @module
+ */
+export type LabelBaseProps = HTMLAttributes<HTMLLabelElement>
+export type LabelProps = LabelBaseProps & LabelVariantProps
+
+/**
+ * @deprecated Use FieldLabel or FieldParts.Label instead.
+ */
+export function Label(props: PropsWithChildren<LabelProps>) {
+  const { size, ...nativeProps } = props
+  return (
+    <FieldLabel
+      {...nativeProps}
+      className={cx(label({ size }), props.className)}
+    />
+  )
+}

package/src/components/field/field.tsx

@@ -0,0 +1,77 @@
+import { type FieldRootProps } from '@ark-ui/react/field'
+import { splitProps } from '../../utils/index'
+import {
+  FieldErrorText,
+  FieldHelperText,
+  FieldLabel,
+  FieldRoot,
+} from './primitives'
+import { HStack } from '@cerberus/styled-system/jsx'
+import { Show } from '../Show'
+
+export interface FieldProps extends FieldRootProps {
+  /**
+   * The label of the field.
+   */
+  label?: string
+  /**
+   * The helper text of the field.
+   */
+  helperText?: string
+  /**
+   * A helper text positioned at the end of the field. Good for Textarea fields.
+   */
+  secondaryHelperText?: string
+  /**
+   * The error text of the field. Shown when the field is invalid.
+   */
+  errorText?: string
+}
+
+/**
+ * The Field component is the context provider for all FieldParts and displays
+ * the label, helperText, and ErrorText.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <Field
+ *  ids={{
+ *   control: 'firstName',
+ *  }}
+ *  label="Label"
+ *  helperText="This is what people will see on your profile."
+ *  errorText="A first name is required to create an account."
+ *  required
+ * >
+ *   <Input name="firstName" type="text" />
+ * </Field>
+ * ```
+ */
+export function Field(props: FieldProps) {
+  const [statusProps, fieldProps, rootProps] = splitProps(
+    props,
+    ['disabled', 'required', 'readOnly', 'invalid'],
+    ['label', 'helperText', 'secondaryHelperText', 'errorText', 'children'],
+  )
+
+  return (
+    <FieldRoot {...statusProps} {...rootProps}>
+      <Show when={Boolean(fieldProps.label)}>
+        <FieldLabel>{fieldProps.label}</FieldLabel>
+      </Show>
+
+      {fieldProps.children}
+
+      <Show when={Boolean(fieldProps.helperText && !statusProps.invalid)}>
+        <HStack justifyContent="space-between" w="full">
+          <FieldHelperText>{fieldProps.helperText}</FieldHelperText>
+          <Show when={Boolean(fieldProps.secondaryHelperText)}>
+            <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>
+          </Show>
+        </HStack>
+      </Show>
+
+      <FieldErrorText>{fieldProps.errorText}</FieldErrorText>
+    </FieldRoot>
+  )
+}

package/src/components/field/index.ts

@@ -0,0 +1,5 @@
+export * from './field'
+export * from './primitives'
+export * from './start-indicator'
+export * from './status-indicator'
+export * from './parts'

package/src/components/field/parts.ts

@@ -0,0 +1,71 @@
+import type { ElementType } from 'react'
+import {
+  FieldErrorText,
+  FieldHelperText,
+  FieldInput,
+  FieldLabel,
+  FieldRoot,
+  FieldTextarea,
+} from './primitives'
+import { FieldStatusIndicator } from './status-indicator'
+import { FieldStartIndicator } from './start-indicator'
+
+/**
+ * This module contains the parts of the Field component.
+ * @module 'field/parts'
+ */
+
+interface FieldPartsValue {
+  /**
+   * The container of the field.
+   */
+  Root: ElementType
+  /**
+   * The label of the field.
+   */
+  Label: ElementType
+  /**
+   * The input of the field.
+   */
+  Input: ElementType
+  /**
+   * The textarea of the field.
+   */
+  Textarea: ElementType
+  /**
+   * The text that displays when the field is valid.
+   */
+  HelperText: ElementType
+  /**
+   * The text that displays when the field is invalid.
+   */
+  ErrorText: ElementType
+  /**
+   * The indicator that appears at the start of the field.
+   */
+  StartIndicator: ElementType
+  /**
+   * The status indicator of the field.
+   */
+  StatusIndicator: ElementType
+}
+
+/**
+ * An Object containing the parts of the Field component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the FieldParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const FieldParts: FieldPartsValue = {
+  Root: FieldRoot,
+  Label: FieldLabel,
+  Input: FieldInput,
+  Textarea: FieldTextarea,
+  HelperText: FieldHelperText,
+  ErrorText: FieldErrorText,
+  StartIndicator: FieldStartIndicator,
+  StatusIndicator: FieldStatusIndicator,
+}