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

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/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}
-    />
-  )
-}