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

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