@cerberus-design/react 0.15.0 → 0.16.0-next-4f6c716

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,
@@ -23,7 +22,7 @@ import {
   DatePickerViewControl,
 } from './DatePicker.server'
 import { IconButton } from './IconButton'
-import { Button } from './Button'
+import { Button } from './button/button'
 import { useCerberusContext } from '../context/cerberus'
 import { useMemo, type InputHTMLAttributes } from 'react'
 
@@ -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/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/button/button.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import {
+  type ButtonHTMLAttributes,
+  type PropsWithChildren,
+  createContext,
+  useContext,
+  useMemo,
+} from 'react'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  button,
+  type ButtonVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { Box } from '@cerberus/styled-system/jsx'
+import { Show } from '../Show'
+import { Spinner } from '../Spinner'
+
+/**
+ * This module contains the Button component.
+ * @module
+ */
+
+interface ButtonContextValue {
+  pending: boolean
+}
+
+const ButtonContext = createContext<ButtonContextValue>({
+  pending: false,
+})
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  ButtonVariantProps & {
+    pending?: boolean
+  }
+
+/**
+ * A component that allows the user to perform actions
+ * @see https://cerberus.digitalu.design/react/button
+ */
+export function Button(props: ButtonProps): JSX.Element {
+  const { palette, usage, shape, size, pending = false, ...nativeProps } = props
+  const value = useMemo(() => ({ pending }), [pending])
+
+  return (
+    <ButtonContext.Provider value={value}>
+      <button
+        {...nativeProps}
+        disabled={pending || nativeProps.disabled}
+        className={cx(
+          nativeProps.className,
+          button({
+            palette,
+            usage,
+            shape,
+            size,
+          }),
+        )}
+      />
+    </ButtonContext.Provider>
+  )
+}
+
+/**
+ * An icon to display in a button that utilizes the pending state to display
+ * a loading spinner.
+ */
+export function ButtonIcon(props: PropsWithChildren<object>) {
+  const { pending } = useContext(ButtonContext)
+  return (
+    <Show when={pending} fallback={<>{props.children}</>}>
+      <Box w="4">
+        <Spinner />
+      </Box>
+    </Show>
+  )
+}

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export * from './button'
+export * from './parts'

package/src/components/button/parts.ts

@@ -0,0 +1,32 @@
+import type { ElementType } from 'react'
+import { Button, ButtonIcon } from './button'
+
+/**
+ * This module contains the parts of the Button component.
+ * @module 'button/parts'
+ */
+
+interface ButtonPartsValue {
+  /**
+   * The context provider of the button.
+   */
+  Root: ElementType
+  /**
+   * The icon of the button.
+   */
+  Icon: ElementType
+}
+
+/**
+ * An Object containing the parts of the Button component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the ButtonParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const ButtonParts: ButtonPartsValue = {
+  Root: Button,
+  Icon: ButtonIcon,
+}

package/src/components/checkbox/checkbox-icon.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useCerberusContext } from '../../context/cerberus'
+import { CheckboxParts } from './parts'
+import { Show } from '../Show'
+
+/**
+ * This module contains the Checkbox Icon component.
+ * @module
+ */
+
+interface CheckboxIconProps {
+  indeterminate?: boolean
+}
+
+/**
+ * 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)
+ * @see https://cerberus.digitalu.design/react/checkbox
+ * @example
+ * ```tsx
+ * <Field>
+ *   <Checkbox id="legal" checked={checked.legal} onChange={handleChange} />
+ * </Field>
+ * ```
+ */
+export function CheckboxIcon(props: CheckboxIconProps) {
+  const { icons } = useCerberusContext()
+  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons
+
+  return (
+    <CheckboxParts.Indicator indeterminate={props.indeterminate}>
+      <Show when={props.indeterminate} fallback={<CheckIcon />}>
+        <IndeterminateIcon />
+      </Show>
+    </CheckboxParts.Indicator>
+  )
+}

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,42 @@
+import type { CheckboxRootProps } from '@ark-ui/react'
+import { type CheckboxVariantProps } from '@cerberus/styled-system/recipes'
+import { Show } from '../Show'
+import { Text } from '../Text'
+import { CheckboxParts } from './parts'
+import { CheckboxIcon } from './checkbox-icon'
+
+/**
+ * This module contains the Checkbox component.
+ * @module
+ */
+
+export type CheckboxProps = CheckboxVariantProps & CheckboxRootProps
+
+/**
+ * Checkbox component is an abstraction of the primitives that displays a
+ * controlled checkbox with a label.
+ * @description [Cerberus Docs] https://cerberus.digitalu.design/react/checkbox
+ * @description [Ark Docs] https://ark-ui.com/docs/components/checkbox
+ */
+export function Checkbox(props: CheckboxProps) {
+  const { size, children, ...rootProps } = props
+
+  return (
+    <CheckboxParts.Root {...rootProps}>
+      <CheckboxParts.Control size={size}>
+        <CheckboxIcon indeterminate={rootProps.checked === 'indeterminate'} />
+      </CheckboxParts.Control>
+
+      <CheckboxParts.Label size={size}>
+        {children}
+        <Show when={props.required}>
+          <Text as="span" data-part="required-indicator">
+            (required)
+          </Text>
+        </Show>
+      </CheckboxParts.Label>
+
+      <CheckboxParts.HiddenInput />
+    </CheckboxParts.Root>
+  )
+}

package/src/components/checkbox/index.ts

@@ -0,0 +1,3 @@
+export * from './checkbox'
+export * from './parts'
+export * from './primitives'

package/src/components/checkbox/parts.ts

@@ -0,0 +1,59 @@
+import type { ElementType } from 'react'
+import {
+  CheckboxRoot,
+  CheckboxLabel,
+  CheckboxControl,
+  CheckboxIndicator,
+  CheckboxHiddenInput,
+  CheckboxGroup,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Field component.
+ * @module 'field/parts'
+ */
+
+interface CheckboxPartsValue {
+  /**
+   * The container of the field.
+   */
+  Root: ElementType
+  /**
+   * The label of the field.
+   */
+  Label: ElementType
+  /**
+   * The control of the field.
+   */
+  Control: ElementType
+  /**
+   * The indicator of the field.
+   */
+  Indicator: ElementType
+  /**
+   * The hidden input of the field.
+   */
+  HiddenInput: ElementType
+  /**
+   * The checkbox group component.
+   */
+  Group: ElementType
+}
+
+/**
+ * An Object containing the parts of the Checkbox component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the CheckboxParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const CheckboxParts: CheckboxPartsValue = {
+  Root: CheckboxRoot,
+  Label: CheckboxLabel,
+  Control: CheckboxControl,
+  Indicator: CheckboxIndicator,
+  HiddenInput: CheckboxHiddenInput,
+  Group: CheckboxGroup,
+}

package/src/components/checkbox/primitives.tsx

@@ -0,0 +1,104 @@
+import {
+  Checkbox,
+  type CheckboxControlProps,
+  type CheckboxGroupProps,
+  type CheckboxIndicatorProps,
+  type CheckboxLabelProps,
+  type CheckboxRootProps,
+} from '@ark-ui/react'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  checkbox,
+  type CheckboxVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the Checkbox primitives.
+ * @module 'react/checkbox'
+ */
+
+/**
+ * Checkbox Root component used to provide the context to all other checkbox
+ * primitives.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+export function CheckboxRoot(props: CheckboxRootProps) {
+  const styles = checkbox()
+  return (
+    <Checkbox.Root {...props} className={cx(styles.root, props.className)} />
+  )
+}
+
+/**
+ * Checkbox Label component used to display the label of the checkbox.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+export function CheckboxLabel(
+  props: CheckboxLabelProps & CheckboxVariantProps,
+) {
+  const { size, ...labelProps } = props
+  const styles = checkbox({ size })
+  return (
+    <Checkbox.Label
+      {...labelProps}
+      className={cx(styles.label, labelProps.className)}
+    />
+  )
+}
+
+/**
+ * Checkbox Control component used to display the control of the checkbox.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+export function CheckboxControl(
+  props: CheckboxControlProps & CheckboxVariantProps,
+) {
+  const { size, ...controlProps } = props
+  const styles = checkbox({ size })
+  return (
+    <Checkbox.Control
+      {...controlProps}
+      className={cx(styles.control, controlProps.className)}
+    />
+  )
+}
+
+/**
+ * Checkbox Indicator component used to display the indicator of the checkbox.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+export function CheckboxIndicator(props: CheckboxIndicatorProps) {
+  const styles = checkbox()
+  return (
+    <Checkbox.Indicator
+      {...props}
+      className={cx(styles.indicator, props.className)}
+    />
+  )
+}
+
+/**
+ * Checkbox HiddenInput component used to provide the native checkbox input.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+export function CheckboxHiddenInput(props: CheckboxControlProps) {
+  return <Checkbox.HiddenInput {...props} />
+}
+
+/**
+ * Checkbox Group is used to group checkboxes together in a consistently styled
+ * way.
+ * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
+ */
+export function CheckboxGroup(props: CheckboxGroupProps) {
+  const styles = checkbox()
+  return (
+    <Checkbox.Group {...props} className={cx(styles.group, props.className)} />
+  )
+}

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/FieldsetLabel.tsx

@@ -0,0 +1,32 @@
+import { cx } from '@cerberus/styled-system/css'
+import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
+import type { LabelProps } from './Label'
+
+/**
+ * This module contains the FieldsetLabel component.
+ * @module FieldsetLabel
+ */
+
+export type FieldsetLabelProps = LabelProps &
+  LabelVariantProps & {
+    htmlFor?: string
+  }
+
+/**
+ * @deprecated
+ */
+export function FieldsetLabel(props: FieldsetLabelProps) {
+  const { size, usage, ...nativeProps } = props
+  return (
+    <label
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        label({
+          size,
+          usage,
+        }),
+      )}
+    />
+  )
+}

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/{NavMenuLink.tsx → deprecated/NavMenuLink.tsx}

@@ -1,6 +1,6 @@
 import type { AnchorHTMLAttributes, ElementType } from 'react'
 import { css, cx } from '@cerberus/styled-system/css'
-import { Show } from './Show'
+import { Show } from '../Show'
 
 /**
  * This module contains the NavMenuLink component.

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

@@ -3,9 +3,9 @@
 import { useMemo, type HTMLAttributes } from 'react'
 import { cx } from '@cerberus/styled-system/css'
 import { vstack } from '@cerberus/styled-system/patterns'
-import { useNavMenuContext } from '../context/navMenu'
-import type { Positions } from '../types'
-import { Show } from './Show'
+import { useNavMenuContext } from '../../context/navMenu'
+import type { Positions } from '../../types'
+import { Show } from '../Show'
 
 /**
  * This module contains the NavMenuList component.

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

@@ -11,10 +11,10 @@ import { button } from '@cerberus/styled-system/recipes'
 import {
   createNavTriggerProps,
   type NavTriggerAriaValues,
-} from '../aria-helpers/nav-menu.aria'
-import { useNavMenuContext } from '../context/navMenu'
-import type { ButtonProps } from './Button'
-import { Show } from './Show'
+} from '../../aria-helpers/nav-menu.aria'
+import { useNavMenuContext } from '../../context/navMenu'
+import type { ButtonProps } from '../button/button'
+import { Show } from '../Show'
 
 /**
  * This module contains the NavMenuTrigger component.