@chassis-ui/react 0.2.0 → 0.3.0

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,8 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-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,6 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-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,6 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Select } from './Select'
-export type { SelectProps, SelectOptionDef } from './Select'

package/src/components/skeleton/Skeleton.tsx

@@ -1,89 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { Span, buildResponsiveClassNames } from '../../utils/breakpoints'
-import { Breakpoint, ContextColor } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type SkeletonOwnProps<C extends ElementType> = {
-  /**
-   * Adds `skeleton-{animation}` alongside the base `skeleton` class, so the element animates
-   * itself as well as any nested `<Skeleton>` children. Nest plain `<Skeleton>` children inside
-   * it for the glow pulse to reach them too, or apply `wave` to a container of one or more
-   * `<Skeleton>` children for a directional sweep across the whole group.
-   */
-  animation?: 'glow' | 'wave'
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the root node. Either a string to use an HTML element or a component —
-   * e.g. `Avatar` or `Button`. Its own props are type-checked at the call site once passed here.
-   *
-   * @default 'span'
-   */
-  component?: C
-  /**
-   * Width of the skeleton, expressed as a column span (of 12), or `'auto'`/`true` for a
-   * natural-width skeleton. Unset by default, so the rendered element's own intrinsic width
-   * applies — set it explicitly (e.g. `span={12}`) for a full-width text line; leave it unset
-   * when `component` is something that sizes itself, like `Avatar` or `Button`.
-   *
-   * @type { 'auto' | number | string | boolean }
-   */
-  span?: Span
-  /**
-   * Overrides `span` at a breakpoint and up.
-   *
-   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', 'auto' | number | string | boolean>> }
-   */
-  responsive?: Partial<Record<Breakpoint, Span>>
-}
-
-export type SkeletonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  SkeletonOwnProps<C>
->
-
-type SkeletonComponent = (<C extends ElementType = 'span'>(
-  props: SkeletonProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-const spanClassNames = (span: Span | undefined, prefix: string) => [
-  typeof span === 'number' || typeof span === 'string' ? `${prefix}col-${span}` : null,
-  span === true ? `${prefix}col` : null
-]
-
-function SkeletonRender<C extends ElementType = 'span'>(
-  { children, animation, className, color, component, span, responsive, ...rest }: SkeletonProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'span'
-  const _className = classNames(
-    'skeleton',
-    animation && `skeleton-${animation}`,
-    { [`bg-${color}`]: color },
-    buildResponsiveClassNames(spanClassNames, span, responsive),
-    className
-  )
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const Skeleton = createPolymorphicComponent<SkeletonComponent>(
-  SkeletonRender as ForwardRefRenderFunction<Element, SkeletonProps<ElementType>>,
-  'Skeleton'
-)