@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/radio/Radio.tsx

@@ -1,98 +0,0 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode, useContext, useRef } from 'react'
-import classNames from 'classnames'
-import { AriaRadioProps, useRadio } from 'react-aria'
-
-import { useForkedRef } from '../../hooks'
-import { ContextColor } from '../../types'
-import { validationClassName } from '../../utils/validationClassName'
-
-import { RadioGroupContext } from './context'
-import { ButtonObject, renderFormCheck } from '../form/renderFormCheck'
-
-export interface RadioProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'checked' | 'defaultChecked' | 'onChange' | 'size'
-> {
-  /**
-   * Create button-like radios. Combine with `<RadioGroup>` to build radio toggle-button groups.
-   */
-  button?: ButtonObject
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the radio indicator to one of Chassis context colors. Ignored when `button` is set.
-   */
-  color?: ContextColor
-  /**
-   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-   */
-  id?: string
-  /**
-   * The element represents a caption for a component.
-   *
-   * Children are accepted as an alias for this prop — `label` wins when both are given.
-   * react-aria, which backs this component, calls the same thing `children`; this package renames
-   * it to `label`, and honouring both means the shape React developers reach for first still
-   * names the control instead of silently producing an unlabelled one.
-   */
-  label?: ReactNode
-  /**
-   * Size the component sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * The value of the radio button, used to identify it within its `<RadioGroup>`.
-   */
-  value: string
-}
-
-// `<Radio>` must be rendered inside a `<RadioGroup>` — react-aria has no standalone
-// radio hook, only useRadio(props, RadioGroupState, ref), because a lone radio with no group is
-// not a meaningful accessible control (see https://chassis-ui.com/css/docs/forms/checkbox-radio).
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ button, children, className, color, disabled, id, label, size, ...rest }, ref) => {
-    const group = useContext(RadioGroupContext)
-
-    if (!group) {
-      throw new Error('Radio must be rendered inside a RadioGroup.')
-    }
-
-    const { state: groupState, valid } = group
-    const invalid = groupState.isInvalid
-
-    const inputRef = useRef<HTMLInputElement>(null)
-    const forkedRef = useForkedRef(ref, inputRef)
-
-    // `label` is this package's name for what react-aria calls `children`. Accept either, so the
-    // shape React developers reach for first (`<Radio>Label</Radio>`) names the control instead of
-    // being silently dropped — see the note on `label` in `RadioProps`.
-    const resolvedLabel = label ?? children
-
-    const { inputProps } = useRadio(
-      {
-        ...rest,
-        children: resolvedLabel,
-        isDisabled: disabled
-      } as AriaRadioProps,
-      groupState,
-      inputRef
-    )
-
-    const inputClassName = classNames(validationClassName(invalid, valid))
-
-    return renderFormCheck({
-      button,
-      className,
-      color,
-      input: <input {...inputProps} className={inputClassName} id={id} ref={forkedRef} />,
-      invalid,
-      label: resolvedLabel,
-      size,
-      valid
-    })
-  }
-)
-
-Radio.displayName = 'Radio'

package/src/components/radio/RadioGroup.tsx

@@ -1,142 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import classNames from 'classnames'
-import { AriaRadioGroupProps, useRadioGroup } from 'react-aria'
-import { RadioGroupProps as StatelyRadioGroupProps, useRadioGroupState } from 'react-stately'
-
-import { validationClassName } from '../../utils/validationClassName'
-
-import { RadioGroupContext } from './context'
-import { FormFeedback } from '../form/FormFeedback'
-import { FormHelp } from '../form/FormHelp'
-import { Flex } from '../flex'
-
-export interface RadioGroupProps extends Omit<
-  HTMLAttributes<HTMLFieldSetElement>,
-  'defaultValue' | 'onChange'
-> {
-  /**
-   * One or more `<Radio>` elements.
-   */
-  children: ReactNode
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * The selected value, uncontrolled.
-   */
-  defaultValue?: string
-  /**
-   * A description for the group, rendered below the options.
-   */
-  description?: ReactNode
-  /**
-   * Disables every radio in the group.
-   */
-  disabled?: boolean
-  /**
-   * An error message for the group, rendered below the options when `invalid` is set.
-   */
-  errorMessage?: ReactNode
-  /**
-   * Set group validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * The group's caption, rendered as a `<legend>`.
-   */
-  label?: ReactNode
-  /**
-   * The name for the group, used for native form submission.
-   */
-  name?: string
-  /**
-   * Callback fired when the selected value changes.
-   */
-  onChange?: (value: string) => void
-  /**
-   * Lay the group's radios out on the same horizontal row instead of stacking them.
-   */
-  orientation?: 'horizontal' | 'vertical'
-  /**
-   * Marks the group as required.
-   */
-  required?: boolean
-  /**
-   * Set group validation state to valid.
-   */
-  valid?: boolean
-  /**
-   * The selected value, controlled.
-   */
-  value?: string
-}
-
-export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
-  (
-    {
-      children,
-      className,
-      defaultValue,
-      description,
-      disabled,
-      errorMessage,
-      invalid,
-      label,
-      name,
-      onChange,
-      orientation,
-      required,
-      valid,
-      value,
-      ...rest
-    },
-    ref
-  ) => {
-    const groupProps = {
-      ...rest,
-      defaultValue,
-      description,
-      errorMessage,
-      isDisabled: disabled,
-      isInvalid: invalid,
-      isRequired: required,
-      label,
-      name,
-      onChange,
-      orientation,
-      value
-    }
-
-    const state = useRadioGroupState(groupProps as StatelyRadioGroupProps)
-    const { radioGroupProps, labelProps, descriptionProps, errorMessageProps } = useRadioGroup(
-      groupProps as AriaRadioGroupProps,
-      state
-    )
-
-    const _className = classNames('form-field', validationClassName(invalid, valid), className)
-
-    const items = (
-      <RadioGroupContext.Provider value={{ state, valid }}>{children}</RadioGroupContext.Provider>
-    )
-
-    return (
-      <fieldset {...rest} {...radioGroupProps} className={_className} ref={ref}>
-        {label && (
-          <legend className="form-label" {...labelProps}>
-            {label}
-          </legend>
-        )}
-        {orientation === 'horizontal' ? <Flex gap="md">{items}</Flex> : items}
-        {description && <FormHelp {...descriptionProps}>{description}</FormHelp>}
-        {invalid && errorMessage && (
-          <FormFeedback invalid {...errorMessageProps}>
-            {errorMessage}
-          </FormFeedback>
-        )}
-      </fieldset>
-    )
-  }
-)
-
-RadioGroup.displayName = 'RadioGroup'

package/src/components/radio/context.ts

@@ -1,14 +0,0 @@
-import { createContext } from 'react'
-import { RadioGroupState } from 'react-stately'
-
-export interface RadioGroupContextValue {
-  state: RadioGroupState
-  /**
-   * `RadioGroup`'s own `valid` prop, mirrored here since it has no react-stately equivalent to
-   * read off `state` the way `isInvalid` does — each `Radio` needs it to apply its own
-   * `is-valid` class.
-   */
-  valid?: boolean
-}
-
-export const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)

package/src/components/radio/index.ts

@@ -1,4 +0,0 @@
-export { Radio } from './Radio'
-export type { RadioProps } from './Radio'
-export { RadioGroup } from './RadioGroup'
-export type { RadioGroupProps } from './RadioGroup'

package/src/components/range-input/RangeInput.tsx

@@ -1,109 +0,0 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, ReactNode } from 'react'
-import classNames from 'classnames'
-
-import { useFormField } from '../../hooks'
-import { validationClassName } from '../../utils/validationClassName'
-import { renderFormField } from '../form-field/renderFormField'
-
-export interface RangeInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * A description for the field, rendered below the range input.
-   */
-  help?: ReactNode
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * An error message for the field, rendered below the range input when `invalid` is set.
-   */
-  invalidFeedback?: ReactNode
-  /**
-   * The field's caption, rendered as a `FormLabel` associated with this range input.
-   */
-  label?: ReactNode
-  /**
-   * Specifies the maximum value for the component.
-   */
-  max?: number
-  /**
-   * Specifies the minimum value for the component.
-   */
-  min?: number
-  /**
-   * Method called immediately after the `value` prop changes.
-   */
-  onChange?: ChangeEventHandler<HTMLInputElement>
-  /**
-   * Toggle the readonly state for the component.
-   */
-  readOnly?: boolean
-  /**
-   * Specifies the interval between legal numbers in the component.
-   */
-  step?: number
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-  /**
-   * A success message for the field, rendered below the range input when `valid` is set.
-   */
-  validFeedback?: ReactNode
-  /**
-   * The `value` attribute of component.
-   *
-   * @controllable onChange
-   * */
-  value?: string | number
-}
-
-export const RangeInput = forwardRef<HTMLInputElement, RangeInputProps>(
-  (
-    { className, help, id, invalid, invalidFeedback, label, valid, validFeedback, ...rest },
-    ref
-  ) => {
-    const { describedBy, feedbackId, helpId, inputId } = useFormField({
-      ariaDescribedBy: rest['aria-describedby'],
-      help,
-      id,
-      invalid,
-      invalidFeedback,
-      valid,
-      validFeedback
-    })
-
-    const _className = classNames('form-range', validationClassName(invalid, valid), className)
-
-    return renderFormField({
-      children: (
-        <input
-          {...rest}
-          aria-describedby={describedBy}
-          aria-invalid={invalid || undefined}
-          className={_className}
-          id={inputId}
-          ref={ref}
-          type="range"
-        />
-      ),
-      help,
-      ids: { feedback: feedbackId, help: helpId, input: inputId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-  }
-)
-
-RangeInput.displayName = 'RangeInput'

package/src/components/range-input/index.ts

@@ -1,2 +0,0 @@
-export { RangeInput } from './RangeInput'
-export type { RangeInputProps } from './RangeInput'

package/src/components/select/Select.tsx

@@ -1,277 +0,0 @@
-import React, {
-  ChangeEventHandler,
-  forwardRef,
-  InputHTMLAttributes,
-  MouseEventHandler,
-  ReactNode,
-  useRef
-} from 'react'
-import classNames from 'classnames'
-
-import { useForkedRef, useFormField } from '../../hooks'
-import { validationClassName } from '../../utils/validationClassName'
-import { renderFormField } from '../form-field/renderFormField'
-import { devWarning } from '../../utils/devWarning'
-
-export interface SelectOptionDef {
-  /**
-   * Marks the option as disabled — it can't be clicked or reached via the keyboard.
-   */
-  disabled?: boolean
-  /**
-   * Label text rendered inside the option. Falls back to the browser's default (the `value`,
-   * stringified) when omitted.
-   */
-  label?: string
-  /**
-   * Marks the option as selected by default (uncontrolled) — resolved into the select's own
-   * `defaultValue`, and ignored when the select's `value`/`defaultValue` is set directly. Set on
-   * more than one option only when `multiple` is also set on `Select` — otherwise, matching
-   * native `<select>` behavior, only the last option with `selected` set wins.
-   */
-  selected?: boolean
-  /**
-   * The option's value attribute.
-   */
-  value?: string | number
-}
-export interface SelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
-  /**
-   * Content rendered at the select's trailing edge, e.g. a `InputAdorn` icon, text, or button.
-   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a
-   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.
-   * Clicking anywhere in the wrapper (other than an actionable adorn) opens the select, since the
-   * native element itself no longer fills the wrapper's full width.
-   */
-  adornEnd?: ReactNode
-  /**
-   * Content rendered at the select's leading edge, e.g. a `InputAdorn` icon, text, or button.
-   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a
-   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.
-   * Clicking anywhere in the wrapper (other than an actionable adorn) opens the select, since the
-   * native element itself no longer fills the wrapper's full width.
-   */
-  adornStart?: ReactNode
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * A description for the field, rendered below the select.
-   */
-  help?: ReactNode
-  /**
-   * Specifies the number of visible options in a drop-down list.
-   */
-  htmlSize?: number
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * An error message for the field, rendered below the select when `invalid` is set.
-   */
-  invalidFeedback?: ReactNode
-  /**
-   * The field's caption, rendered as a `FormLabel` associated with this select.
-   */
-  label?: ReactNode
-  /**
-   * Allows more than one option to be selected at once. Pass `value` as a string array (or set
-   * `selected` on more than one `options` entry) to control the selection.
-   */
-  multiple?: boolean
-  /**
-   * Method called immediately after the `value` prop changes.
-   */
-  onChange?: ChangeEventHandler<HTMLSelectElement>
-  /**
-   * Options list of the select component. Available keys: `label`, `value`, `disabled`,
-   * `selected`.
-   * Examples:
-   * - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
-   * - `options={['js', 'html']}`
-   */
-  options?: SelectOptionDef[] | string[]
-  /**
-   * Renders a disabled placeholder option as the first item (e.g. `"Select a country…"`).
-   * The option has an empty value so it is not selectable once another option is chosen.
-   */
-  placeholder?: string
-  /**
-   * Size the component sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-  /**
-   * A success message for the field, rendered below the select when `valid` is set.
-   */
-  validFeedback?: ReactNode
-  /**
-   * The `value` attribute of component.
-   *
-   * @controllable onChange
-   * */
-  value?: string | string[] | number
-}
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  (
-    {
-      adornEnd,
-      adornStart,
-      children,
-      className,
-      help,
-      htmlSize,
-      id,
-      invalid,
-      invalidFeedback,
-      label,
-      multiple,
-      options,
-      placeholder,
-      size,
-      valid,
-      validFeedback,
-      ...rest
-    },
-    ref
-  ) => {
-    const selectRef = useRef<HTMLSelectElement>(null)
-    const forkedRef = useForkedRef(ref, selectRef)
-
-    const selectedValues = Array.isArray(options)
-      ? options
-          .filter(
-            (option): option is SelectOptionDef => typeof option === 'object' && !!option.selected
-          )
-          .map((option) => String(option.value ?? ''))
-      : []
-
-    devWarning(
-      !multiple && selectedValues.length > 1,
-      'Select: more than one option has `selected: true` but `multiple` is not set — only ' +
-        'the last one will be selected, matching native <select> behavior.'
-    )
-
-    // React warns against setting `selected` directly on <option>, recommending `defaultValue`/
-    // `value` on <select> instead — so `options[].selected` is resolved into a `defaultValue`
-    // here rather than rendered as an attribute. Left alone when the caller already controls
-    // `value`/`defaultValue` themselves.
-    const inferredDefaultValue =
-      selectedValues.length && rest.value === undefined && rest.defaultValue === undefined
-        ? multiple
-          ? selectedValues
-          : selectedValues[selectedValues.length - 1]
-        : undefined
-
-    const { describedBy, feedbackId, helpId, inputId } = useFormField({
-      ariaDescribedBy: rest['aria-describedby'],
-      help,
-      id,
-      invalid,
-      invalidFeedback,
-      valid,
-      validFeedback
-    })
-
-    const hasAdorn = adornStart != null || adornEnd != null
-    // A caret can only pop the dropdown open when the select actually renders as one - an inline
-    // listbox (`multiple`, or a `size` greater than 1) has no picker to show.
-    const isDropdown = !multiple && (!htmlSize || htmlSize <= 1)
-
-    // chassis-css's `.form-input:has(.ghost-input.is-valid)` selector reads validation state off
-    // the inner select, not the wrapper, once adorns turn `.form-input` into a flex container -
-    // see https://chassis-ui.com/css/docs/forms/input-adorn.
-    const selectClassName = classNames(
-      hasAdorn ? 'ghost-input' : 'form-input',
-      !hasAdorn && size,
-      validationClassName(invalid, valid),
-      !hasAdorn && className
-    )
-
-    const handleWrapperClick: MouseEventHandler<HTMLDivElement> = (event) => {
-      const node = selectRef.current
-      const target = event.target as HTMLElement
-      if (!node || node.disabled || !isDropdown || target === node || target.closest('button, a'))
-        return
-      node.focus()
-      try {
-        // showPicker() opens the native dropdown from a proxy click; unsupported browsers fall
-        // back to the focus() above, same as tabbing to a bare select and pressing Space/Down.
-        node.showPicker?.()
-      } catch {
-        // Can throw without a user activation or under a policy-restricted embed - focus() still
-        // leaves the select reachable via the keyboard.
-      }
-    }
-
-    const select = (
-      <select
-        {...rest}
-        aria-describedby={describedBy}
-        aria-invalid={invalid || undefined}
-        className={selectClassName}
-        id={inputId}
-        multiple={multiple}
-        ref={forkedRef}
-        size={htmlSize}
-        {...(inferredDefaultValue !== undefined && { defaultValue: inferredDefaultValue })}
-      >
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options
-          ? options.map((option, index) => {
-              return (
-                <option
-                  {...(typeof option === 'object' &&
-                    option.disabled && { disabled: option.disabled })}
-                  {...(typeof option === 'object' &&
-                    option.value != null && { value: option.value })}
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={index}
-                >
-                  {typeof option === 'string'
-                    ? option
-                    : (option.label ?? String(option.value ?? ''))}
-                </option>
-              )
-            })
-          : children}
-      </select>
-    )
-
-    const rendered = hasAdorn ? (
-      <div
-        className={classNames('form-input', isDropdown && 'form-caret', size, className)}
-        onClick={handleWrapperClick}
-      >
-        {adornStart}
-        {select}
-        {adornEnd}
-      </div>
-    ) : (
-      select
-    )
-
-    return renderFormField({
-      children: rendered,
-      help,
-      ids: { feedback: feedbackId, help: helpId, input: inputId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-  }
-)
-
-Select.displayName = 'Select'

package/src/components/select/index.ts

@@ -1,2 +0,0 @@
-export { Select } from './Select'
-export type { SelectProps, SelectOptionDef } from './Select'