@cerberus-design/react 0.15.0 → 0.16.0-next-feeb186

package/src/components/Checkbox.tsx

@@ -1,93 +0,0 @@
-'use client'
-
-import {
-  checkbox,
-  type CheckboxVariantProps,
-} from '@cerberus/styled-system/recipes'
-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'
-
-/**
- * This module contains the Checkbox component.
- * @module
- */
-
-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
-  }
-
-/**
- * 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 { describedBy, size, checked, mixed, ...nativeProps } = props
-  const { invalid, ...fieldStates } = useFieldContext()
-  const styles = checkbox({ size })
-  const { icons } = useCerberusContext()
-  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons
-
-  if (!CheckIcon) {
-    throw new Error('The CerberusProvider is missing the checkbox icon.')
-  }
-  if (!IndeterminateIcon) {
-    throw new Error('The CerberusProvider is missing the indeterminate icon.')
-  }
-
-  return (
-    <div
-      className={cx(
-        styles.root,
-        vstack({
-          gap: '0',
-          justify: 'center',
-        }),
-      )}
-    >
-      <input
-        {...nativeProps}
-        {...fieldStates}
-        {...(describedBy && { 'aria-describedby': describedBy })}
-        {...(invalid && { 'aria-invalid': true })}
-        {...(mixed && { 'aria-checked': 'mixed' })}
-        className={cx('peer', nativeProps.className, styles.input)}
-        type="checkbox"
-      />
-      <Show when={checked && !mixed}>
-        <span className={styles.icon}>
-          <CheckIcon />
-        </span>
-      </Show>
-      <Show when={mixed}>
-        <span className={styles.icon}>
-          <IndeterminateIcon />
-        </span>
-      </Show>
-    </div>
-  )
-}

package/src/components/Fieldset.tsx

@@ -1,65 +0,0 @@
-'use client'
-
-import { css, cx } from '@cerberus/styled-system/css'
-import type { FieldsetHTMLAttributes } from 'react'
-import { useFieldContext } from '../context/field'
-
-/**
- * This module contains the Fieldset component.
- * @module Fieldset
- */
-
-export type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>
-
-/**
- * A component to group related elements in a form for accessibility.
- * @memberof Field
- * @see https://cerberus.digitalu.com/react/fieldset
- * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)
- * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
- * @example
- * ```tsx
- * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
- * import { Hstack } from '@cerberus/styled-system/jsx'
- *
- * function SomeForm() {
- *   return (
- *    <form>
- *     <Fieldset>
- *      <Legend>Do you like cats?</Legend>
- *      <Hstack>
- *        <Field>
- *          <Radio id="yes" name="cats" value="yes" />
- *          <Label htmlFor="yes">Yes</Label>
- *        </Field>
- *      </Hstack>
- *      <Hstack>
- *        <Field>
- *         <Radio id="no" name="cats" value="no" />
- *         <Label htmlFor="no">No</Label>
- *        </Field>
- *      </Hstack>
- *     </Fieldset>
- *    </form>
- *   )
- * }
- */
-export function Fieldset(props: FieldsetProps) {
-  const { invalid, ...formState } = useFieldContext()
-
-  return (
-    <fieldset
-      {...props}
-      {...formState}
-      {...(invalid && { 'aria-invalid': true })}
-      className={cx(
-        props.className,
-        css({
-          border: 'none',
-          pt: 2,
-          margin: 0,
-        }),
-      )}
-    />
-  )
-}

package/src/components/FieldsetLabel.tsx

@@ -1,59 +0,0 @@
-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
-
-/**
- * Used for labeling inputs that are children of a Fieldset group.
- * @memberof Fieldset
- * @see https://cerberus.digitalu.design/react/fieldset
- * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @example
- * ```tsx
- * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
- * import { Hstack } from '@cerberus/styled-system/jsx'
- *
- * function SomeForm() {
- *   return (
- *    <form>
- *     <Fieldset>
- *      <Legend>Do you like cats?</Legend>
- *      <Hstack>
- *        <Field>
- *          <Radio id="yes" name="cats" value="yes" />
- *          <FieldsetLabel htmlFor="yes">Yes</FieldsetLabel>
- *        </Field>
- *      </Hstack>
- *      <Hstack>
- *        <Field>
- *         <Radio id="no" name="cats" value="no" />
- *         <FieldsetLabel htmlFor="no">No</FieldsetLabel>
- *        </Field>
- *      </Hstack>
- *     </Fieldset>
- *    </form>
- *   )
- * }
- * ```
- */
-export function FieldsetLabel(props: FieldsetLabelProps) {
-  const { size, usage, ...nativeProps } = props
-  return (
-    <label
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        label({
-          size,
-          usage,
-        }),
-      )}
-    />
-  )
-}

package/src/components/Input.tsx

@@ -1,69 +0,0 @@
-'use client'
-
-import type { InputHTMLAttributes, ReactNode } from 'react'
-import { input, type InputVariantProps } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
-import { useFieldContext } from '../context/field'
-import { useCerberusContext } from '../context/cerberus'
-import { Show } from './Show'
-
-export interface InputBaseProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
-  /**
-   * The id of the FieldMessage component used to describe the input. Required for accessibility.
-   */
-  describedBy?: string
-  /**
-   * The unique identifier for the input element. Required for accessibility.
-   */
-  id: string
-  /**
-   * An optional icon to display at the start of the input.
-   */
-  startIcon?: ReactNode
-  /**
-   * An optional icon to display at the end of the input.
-   */
-  endIcon?: ReactNode
-}
-export type InputProps = InputBaseProps & InputVariantProps
-
-/**
- * A component that allows the user to input text. Must be wrapped in a Field
- * component to keep track of the state for entire group of elements related to
- * the field.
- * @see https://cerberus.digitalu.design/react/input
- */
-export function Input(props: InputProps) {
-  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props
-  const inputStyles = input({ size })
-  const { invalid, ...fieldStates } = useFieldContext()
-  const hasEndIcon = Boolean(endIcon)
-
-  const { icons } = useCerberusContext()
-  const { invalid: InvalidIcon } = icons
-
-  return (
-    <div className={inputStyles.root}>
-      <Show when={Boolean(startIcon)}>
-        <span className={inputStyles.startIcon}>{startIcon}</span>
-      </Show>
-
-      <input
-        {...nativeProps}
-        {...fieldStates}
-        {...(describedBy && { 'aria-describedby': describedBy })}
-        {...(invalid && { 'aria-invalid': true })}
-        data-start-icon={Boolean(startIcon)}
-        className={cx('peer', nativeProps.className, inputStyles.input)}
-      />
-
-      <Show when={invalid}>
-        <InvalidIcon className={inputStyles.icon} />
-      </Show>
-      <Show when={hasEndIcon && !invalid}>
-        <span className={inputStyles.icon}>{endIcon}</span>
-      </Show>
-    </div>
-  )
-}

package/src/components/Label.tsx

@@ -1,69 +0,0 @@
-'use client'
-
-import type { HTMLAttributes, PropsWithChildren } from 'react'
-import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
-import { css, cx } from '@cerberus/styled-system/css'
-import { hstack } from '@cerberus/styled-system/patterns'
-import { useFieldContext } from '../context/field'
-import { Show } from './Show'
-
-/**
- * This module contains the Label component.
- * @module
- */
-export interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {
-  /**
-   * The unique identifier for the input element. Required for accessibility.
-   */
-  htmlFor: string
-  /**
-   * Used to hide the label from the UI while keeping it accessible to screen readers. Typically used for global search inputs that have no visible label.
-   */
-  hidden?: boolean
-}
-export type LabelProps = LabelBaseProps & LabelVariantProps
-
-/**
- * A a11y compliant label component.
- * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @see https://cerberus.digitalu.design/react/label
- * @example
- * ```tsx
- * <Field required>
- *   <Label htmlFor="search" hidden>Search everything</Label>
- *   <Input id="search" startIcon={Search} type="text" />
- * </Field>
- * ```
- */
-export function Label(props: PropsWithChildren<LabelProps>) {
-  const { hidden, size, ...nativeProps } = props
-  const { required, disabled } = useFieldContext()
-  const usage = hidden ? 'hidden' : 'visible'
-
-  return (
-    <label
-      {...nativeProps}
-      {...(disabled && { 'data-disabled': true })}
-      className={cx(
-        nativeProps.className,
-        label({ size, usage }),
-        hstack({
-          justify: 'space-between',
-          w: 'full',
-        }),
-      )}
-    >
-      {props.children}
-      <Show when={required}>
-        <span
-          className={css({
-            color: 'page.text.100',
-            fontSize: 'inherit',
-          })}
-        >
-          (required)
-        </span>
-      </Show>
-    </label>
-  )
-}

package/src/components/Radio.tsx

@@ -1,73 +0,0 @@
-'use client'
-
-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.
- * @module
- */
-
-export type RadioRecipe = RecipeVariantProps<typeof radio>
-export interface RadioBaseProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /**
-   * A unique identifier for the radio button. Required for accessibility.
-   */
-  id: string
-}
-export type RadioProps = RadioBaseProps & RadioRecipe
-
-/**
- * The Radio component is used to allow users to select a single option from a list of options.
- * @see https://cerberus.digitalu.design/react/radio
- * @memberof module:Field
- * @example
- * ```tsx
- * <Field>
- *  <fieldset name="fruit">
- *    <Radio id="radio-1" name="fruit" value="1">
- *     Option 1
- *    </Radio>
- *    <Radio id="radio-2" name="fruit" value="2">
- *     Option 2
- *    </Radio>
- *    <Radio id="radio-3" name="fruit" value="3">
- *     Option 3
- *    </Radio>
- *   </fieldset>
- * </Field>
- * ```
- */
-export function Radio(props: PropsWithChildren<RadioProps>) {
-  const { children, size, ...nativeProps } = props
-  const { invalid, ...state } = useFieldContext()
-  const styles = radio({ size })
-
-  return (
-    <div
-      className={cx(
-        'group',
-        hstack({
-          gap: 'sm',
-        }),
-        styles.root,
-      )}
-      tabIndex={0}
-    >
-      <input
-        {...nativeProps}
-        {...state}
-        {...(invalid && { 'aria-invalid': true })}
-        className={cx(nativeProps.className, styles.input)}
-        tabIndex={-1}
-        type="radio"
-      />
-      {children}
-    </div>
-  )
-}

package/src/components/Select.tsx

@@ -1,108 +0,0 @@
-'use client'
-
-import { cx } from '@cerberus/styled-system/css'
-import { hstack } from '@cerberus/styled-system/patterns'
-import {
-  select,
-  type SelectVariantProps,
-} from '@cerberus/styled-system/recipes'
-import type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'
-import { useFieldContext } from '../context/field'
-import { useCerberusContext } from '../context/cerberus'
-import { Show } from './Show'
-
-/**
- * This module contains the select components.
- * @module
- */
-
-export type SelectProps = Omit<
-  SelectHTMLAttributes<HTMLSelectElement>,
-  'size'
-> &
-  SelectVariantProps & {
-    /**
-     * The unique id of the select element. Required for accessibility.
-     */
-    id: string
-    /**
-     * The id of the FieldMessage that describes the select element.
-     */
-    describedBy?: string
-  }
-
-/**
- * Used to allow users to select a single option from a list of options.
- * @see https://cerberus.digitalu.design/react/select
- * @memberof module:Field
- * @example
- * ```tsx
- * <Field>
- *   <Select describedby="help:fruit" id="fruit">
- *    <Option value="">Choose option</Option>
- *    <Option value="one">Option 1</Option>
- *    <Option value="two">Option 2</Option>
- *    <Option value="three">Option 3</Option>
- *   </Select>
- * </Field>
- * ```
- */
-export function Select(props: SelectProps) {
-  const { describedBy, size, ...nativeProps } = props
-  const { invalid, ...fieldStates } = useFieldContext()
-
-  const { icons } = useCerberusContext()
-  const { invalid: InvalidIcon, selectArrow: SelectArrow } = icons
-
-  const styles = select({
-    size,
-  })
-
-  return (
-    <div className={styles.root}>
-      <select
-        {...nativeProps}
-        {...fieldStates}
-        {...(describedBy && { 'aria-describedby': describedBy })}
-        {...(invalid && { 'aria-invalid': true })}
-        className={styles.input}
-      />
-      <span
-        className={cx(
-          styles.iconStack,
-          hstack({
-            gap: '2',
-          }),
-        )}
-      >
-        <Show when={invalid}>
-          <span
-            {...(invalid && { 'data-invalid': true })}
-            className={styles.stateIcon}
-          >
-            <InvalidIcon />
-          </span>
-        </Show>
-        <span className={styles.arrowIcon}>
-          <SelectArrow />
-        </span>
-      </span>
-    </div>
-  )
-}
-
-// We only export this component for consistency with the other components
-
-export type OptionProps = OptionHTMLAttributes<HTMLOptionElement>
-
-/**
- * Option component
- * props: OptionHTMLAttributes<HTMLOptionElement>
- * @example
- * ```tsx
- * <Option value="one">Option 1</Option>
- * ```
- */
-export function Option(props: OptionProps) {
-  return <option {...props} />
-}

package/src/components/Textarea.tsx

@@ -1,52 +0,0 @@
-'use client'
-
-import type { TextareaHTMLAttributes } from 'react'
-import { css, cx } from '@cerberus/styled-system/css'
-import { input, type InputVariantProps } from '@cerberus/styled-system/recipes'
-import { useFieldContext } from '../context/field'
-
-/**
- * This module contains the Textarea component.
- * @module
- */
-
-export interface TextareaBaseProps
-  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
-  /**
-   * The ID of the FieldMessage that describes the textarea.
-   */
-  describedBy?: string
-  /**
-   * The unique id of the textarea.
-   */
-  id: string
-}
-export type TextareaProps = InputVariantProps & TextareaBaseProps
-
-/**
- * A component that allows the user to input large blocks of text.
- * @see https://cerberus.digitalu.design/react/textarea
- */
-export function Textarea(props: TextareaProps): JSX.Element {
-  const { describedBy, ...nativeProps } = props
-  const { invalid, ...fieldState } = useFieldContext()
-
-  return (
-    <textarea
-      {...nativeProps}
-      {...fieldState}
-      {...(describedBy && { 'aria-describedby': describedBy })}
-      {...(invalid && { 'aria-invalid': true })}
-      className={cx(
-        props.className,
-        input().input,
-        css({
-          pxi: '2',
-          py: '2',
-          resize: 'vertical',
-        }),
-      )}
-      rows={4}
-    />
-  )
-}

package/src/components/Toggle.tsx

@@ -1,91 +0,0 @@
-'use client'
-
-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'
-
-/**
- * This module provides a toggle component.
- * @module
- */
-
-export type ToggleBase = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'size' | 'id' | 'value'
-> & {
-  /**
-   * The FieldMessage providing context for the Toggle.
-   */
-  describedBy?: string
-  /**
-   * A unique identifier for the Toggle. Required for accessibility.
-   */
-  id: string
-  /**
-   * The value of the Toggle.
-   */
-  value: string
-}
-export type ToggleProps = ToggleBase & ToggleVariantProps
-
-/**
- * The Toggle component is used to switch between two states. Optionally
- * combine with the `useToggle` hook.
- * @see https://cerberus.digitalu.design/react/toggle
- * @example
- * ```tsx
- * const { checked, handleChange } = useToggle({ checked: 'toggle' })
- *
- * <Hstack justify="space-between" w="full">
- *  <Field>
- *    <Label htmlFor="toggle">Show notifications</Label>
- *    <Toggle
- *     checked={checked === 'toggle'}
- *     id="toggle"
- *     onChange={handleChange}
- *     value="toggle"
- *    />
- *  </Field>
- * </Hstack>
- * ```
- */
-export function Toggle(props: ToggleProps) {
-  const { size, describedBy, ...nativeProps } = props
-  const styles = toggle({ size })
-  const { invalid, ...state } = useFieldContext()
-  const { icons } = useCerberusContext()
-  const CheckedIcon = icons.toggleChecked
-
-  return (
-    <span
-      className={cx('group', styles.track, hstack())}
-      data-checked={props.checked || props.defaultChecked}
-    >
-      <input
-        {...nativeProps}
-        {...state}
-        {...(describedBy && { 'aria-describedby': describedBy })}
-        {...(invalid && { 'aria-invalid': true })}
-        className={cx('peer', styles.input)}
-        role="switch"
-        type="checkbox"
-      />
-      <span
-        className={cx(
-          styles.thumb,
-          vstack({
-            justify: 'center',
-          }),
-        )}
-      >
-        <CheckedIcon />
-      </span>
-    </span>
-  )
-}