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

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/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,48 @@
+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
+ * @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 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/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,77 @@
+import type { ElementType } from 'react'
+import {
+  FieldErrorText,
+  FieldHelperText,
+  FieldInput,
+  FieldLabel,
+  FieldRequiredIndicator,
+  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
+  /**
+   * The indicator that appears at the end of the field.
+   */
+  RequiredIndicator: 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,
+  RequiredIndicator: FieldRequiredIndicator,
+}