@chassis-ui/react 0.0.0-20260831090525

package/src/components/radio/Radio.tsx

@@ -0,0 +1,88 @@
+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.
+   */
+  label?: ReactNode
+  /**
+   * Size the component small or large.
+   */
+  size?: 'small' | 'large'
+  /**
+   * 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, 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)
+
+    const { inputProps } = useRadio(
+      {
+        ...rest,
+        children: label,
+        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,
+      size,
+      valid
+    })
+  }
+)
+
+Radio.displayName = 'Radio'

package/src/components/radio/RadioGroup.tsx

@@ -0,0 +1,142 @@
+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="medium">{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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,109 @@
+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

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

package/src/components/select/Select.tsx

@@ -0,0 +1,277 @@
+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'
+
+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 small or large.
+   */
+  size?: 'small' | 'large'
+  /**
+   * 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 ?? ''))
+      : []
+
+    if (!multiple && selectedValues.length > 1) {
+      console.warn(
+        '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

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