@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/text-input/TextInput.tsx

@@ -1,188 +0,0 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react'
-import classNames from 'classnames'
-import { AriaTextFieldProps, useTextField } from 'react-aria'
-
-import { useForkedRef, useFormField } from '../../hooks'
-import { validationClassName } from '../../utils/validationClassName'
-import { renderFormField } from '../form-field/renderFormField'
-
-export interface TextInputProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'defaultValue' | 'onChange' | 'size' | 'value'
-> {
-  /**
-   * Content rendered at the input'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.
-   */
-  adornEnd?: ReactNode
-  /**
-   * Content rendered at the input'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.
-   */
-  adornStart?: ReactNode
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * The value of the input, uncontrolled.
-   */
-  defaultValue?: string
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * A description for the field, rendered below the input.
-   */
-  help?: ReactNode
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * An error message for the field, rendered below the input when `invalid` is set.
-   */
-  invalidFeedback?: ReactNode
-  /**
-   * The field's caption, rendered as a `FormLabel` associated with this input.
-   */
-  label?: ReactNode
-  /**
-   * Handler that is called when the value changes.
-   */
-  onChange?: (value: string) => void
-  /**
-   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]
-   */
-  plainText?: boolean
-  /**
-   * Toggle the readonly state for the component.
-   */
-  readOnly?: boolean
-  /**
-   * Size the component sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Specifies the type of component. For `color` or `file` inputs, use the dedicated `ColorInput` or `FileInput` components instead.
-   */
-  type?:
-    | 'date'
-    | 'datetime-local'
-    | 'email'
-    | 'month'
-    | 'password'
-    | 'search'
-    | 'tel'
-    | 'text'
-    | 'time'
-    | 'url'
-    | 'week'
-    | (string & {})
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-  /**
-   * A success message for the field, rendered below the input when `valid` is set.
-   */
-  validFeedback?: ReactNode
-  /**
-   * The value of the input, controlled.
-   */
-  value?: string
-}
-
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-  (
-    {
-      adornEnd,
-      adornStart,
-      className,
-      disabled,
-      help,
-      id,
-      invalid,
-      invalidFeedback,
-      label,
-      plainText,
-      readOnly,
-      size,
-      type = 'text',
-      valid,
-      validFeedback,
-      ...rest
-    },
-    ref
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const forkedRef = useForkedRef(ref, inputRef)
-
-    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({
-      ariaDescribedBy: rest['aria-describedby'],
-      ariaLabelledBy: rest['aria-labelledby'],
-      help,
-      id,
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-
-    const { inputProps } = useTextField(
-      {
-        ...rest,
-        'aria-describedby': describedBy,
-        'aria-labelledby': labelledBy,
-        id: inputId,
-        isDisabled: disabled,
-        isInvalid: invalid,
-        isReadOnly: readOnly,
-        type
-      } as AriaTextFieldProps,
-      inputRef
-    )
-
-    const hasAdorn = adornStart != null || adornEnd != null
-
-    // chassis-css's `.form-input:has(.ghost-input.is-valid)` selector reads validation state off
-    // the inner input, not the wrapper, once adorns turn `.form-input` into a flex container - see
-    // https://chassis-ui.com/css/docs/forms/input-adorn.
-    const inputClassName = classNames(
-      hasAdorn ? 'ghost-input' : 'form-input',
-      !hasAdorn && plainText && 'plaintext',
-      !hasAdorn && size,
-      validationClassName(invalid, valid),
-      !hasAdorn && className
-    )
-
-    const input = <input {...inputProps} className={inputClassName} ref={forkedRef} />
-
-    const children = hasAdorn ? (
-      <div className={classNames('form-input', plainText && 'plaintext', size, className)}>
-        {adornStart}
-        {input}
-        {adornEnd}
-      </div>
-    ) : (
-      input
-    )
-
-    return renderFormField({
-      children,
-      help,
-      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-  }
-)
-
-TextInput.displayName = 'TextInput'

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

@@ -1,6 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { TextInput } from './TextInput'
-export type { TextInputProps } from './TextInput'

package/src/components/textarea/Textarea.tsx

@@ -1,145 +0,0 @@
-import React, { forwardRef, ReactNode, TextareaHTMLAttributes, useRef } from 'react'
-import classNames from 'classnames'
-import { AriaTextFieldOptions, useTextField } from 'react-aria'
-
-import { useForkedRef, useFormField } from '../../hooks'
-import { validationClassName } from '../../utils/validationClassName'
-import { renderFormField } from '../form-field/renderFormField'
-
-export interface TextareaProps extends Omit<
-  TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'defaultValue' | 'onChange' | 'value'
-> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * The value of the textarea, uncontrolled.
-   */
-  defaultValue?: string
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * A description for the field, rendered below the textarea.
-   */
-  help?: ReactNode
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * An error message for the field, rendered below the textarea when `invalid` is set.
-   */
-  invalidFeedback?: ReactNode
-  /**
-   * The field's caption, rendered as a `FormLabel` associated with this textarea.
-   */
-  label?: ReactNode
-  /**
-   * Handler that is called when the value changes.
-   */
-  onChange?: (value: string) => void
-  /**
-   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-   */
-  plainText?: boolean
-  /**
-   * Toggle the readonly state for the component.
-   */
-  readOnly?: boolean
-  /**
-   * The number of visible text lines for the control.
-   */
-  rows?: number
-  /**
-   * 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 textarea when `valid` is set.
-   */
-  validFeedback?: ReactNode
-  /**
-   * The value of the textarea, controlled.
-   */
-  value?: string
-}
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      className,
-      disabled,
-      help,
-      id,
-      invalid,
-      invalidFeedback,
-      label,
-      plainText,
-      readOnly,
-      rows,
-      size,
-      valid,
-      validFeedback,
-      ...rest
-    },
-    ref
-  ) => {
-    const textareaRef = useRef<HTMLTextAreaElement>(null)
-    const forkedRef = useForkedRef(ref, textareaRef)
-
-    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({
-      ariaDescribedBy: rest['aria-describedby'],
-      ariaLabelledBy: rest['aria-labelledby'],
-      help,
-      id,
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-
-    const { inputProps } = useTextField<'textarea'>(
-      {
-        ...rest,
-        'aria-describedby': describedBy,
-        'aria-labelledby': labelledBy,
-        id: inputId,
-        inputElementType: 'textarea',
-        isDisabled: disabled,
-        isInvalid: invalid,
-        isReadOnly: readOnly
-      } as AriaTextFieldOptions<'textarea'>,
-      textareaRef
-    )
-
-    const _className = classNames(
-      'form-input',
-      plainText && 'plaintext',
-      size,
-      validationClassName(invalid, valid),
-      className
-    )
-
-    return renderFormField({
-      children: <textarea {...inputProps} rows={rows} className={_className} ref={forkedRef} />,
-      help,
-      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-  }
-)
-
-Textarea.displayName = 'Textarea'

package/src/components/textarea/index.ts

@@ -1,6 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Textarea } from './Textarea'
-export type { TextareaProps } from './Textarea'

package/src/components/toast/Toast.tsx

@@ -1,220 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import { mergeProps } from 'react-aria'
-import { Transition } from 'react-transition-group'
-import classNames from 'classnames'
-
-import { ContextColor } from '../../types'
-import { useAutoDismiss, useDismissibleTransition } from '../../hooks'
-import { ToastContext } from './context'
-import { ToastBody } from './ToastBody'
-import { ToastFooter } from './ToastFooter'
-import { ToastHeader } from './ToastHeader'
-
-export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * Apply a CSS fade transition to the toast.
-   */
-  animation?: boolean
-  /**
-   * Auto hide the toast. The timer starts once the show transition completes and pauses
-   * while the pointer is over the toast or focus is within it.
-   */
-  autohide?: boolean
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Adds a close button — shorthand for `ToastHeader`'s/`ToastBody`'s `closeButton` prop.
-   * Placed in the header when `icon`/`title`/`time` is set; otherwise placed in the body
-   * alongside `message`, or in a header containing only the close button if `message` is
-   * also unset.
-   */
-  closeButton?: boolean
-  /**
-   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
-   * non-English UIs. Shorthand for `ToastHeader`'s `closeLabel` prop.
-   */
-  closeLabel?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Delay hiding the toast (ms).
-   */
-  delay?: number
-  /**
-   * Trailing content — typically a row of `Button`s — rendered via a single `ToastFooter`,
-   * after `message`/`children`. Pass a function to receive `close` directly, instead of
-   * calling `useToast()` from a child component to wire up a "Close" action.
-   */
-  footer?: ReactNode | ((close: () => void) => ReactNode)
-  /**
-   * Leading icon for the header. A string is an icon name, rendered like
-   * `<ToastIcon name={icon} />` (or by `IconProvider`'s `component`); pass
-   * any other node for a fully custom icon (typically a logo or avatar). Shorthand for
-   * `ToastHeader`'s `icon` prop; hidden from assistive technology by default, since it
-   * duplicates `title` visually.
-   */
-  icon?: string | ReactNode
-  /**
-   * Message body, rendered via a single `ToastBody`. For multi-block content, compose
-   * `children` manually instead — `message` wraps everything in one element.
-   */
-  message?: ReactNode
-  /**
-   * Header timestamp, rendered after `title`. Shorthand for `ToastHeader`'s `time` prop.
-   */
-  time?: ReactNode
-  /**
-   * Header heading, rendered before `time`. Shorthand for `ToastHeader`'s children. When set
-   * alongside `message`, wires the toast's `aria-labelledby`/`aria-describedby` to them
-   * automatically.
-   */
-  title?: ReactNode
-  /**
-   * Callback fired when the component requests to be closed.
-   */
-  onClose?: () => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * ARIA live-region role. Use `status` (the default) for confirmation, progress, and
-   * informational messages, which announce politely. Use `alert` for messages that need
-   * immediate attention — validation errors, failed operations — which interrupt speech.
-   */
-  role?: 'status' | 'alert'
-  /**
-   * Apply a full-color background with inverted text. Only meaningful alongside `color`.
-   */
-  solid?: boolean
-  /**
-   * Apply a semi-transparent background.
-   */
-  translucent?: boolean
-  /**
-   * Toggle the visibility of component.
-   */
-  visible?: boolean
-}
-
-export const Toast = forwardRef<HTMLDivElement, ToastProps>(
-  (
-    {
-      children,
-      animation = true,
-      autohide = true,
-      className,
-      closeButton,
-      closeLabel,
-      color,
-      delay = 5000,
-      footer,
-      icon,
-      message,
-      role = 'status',
-      solid,
-      time,
-      title,
-      translucent,
-      visible = false,
-      onClose,
-      onShow,
-      ...rest
-    },
-    ref
-  ) => {
-    const {
-      close,
-      entered,
-      forkedRef,
-      getTransitionClass,
-      textId,
-      titleId,
-      transitionProps,
-      visible: _visible
-    } = useDismissibleTransition({ onClose, onShow, ref, visible })
-
-    // The autohide timer is only meaningful once the show transition has actually finished (see
-    // `autohide`'s JSDoc) — gating on `_visible` alone would start it the instant `visible` flips
-    // true, while the toast is still fading/sliding in.
-    const autoDismissProps = useAutoDismiss({
-      enabled: autohide,
-      delay,
-      visible: _visible && entered,
-      onHide: close
-    })
-
-    const contextValues = {
-      visible: _visible,
-      close
-    }
-
-    const _className = classNames(
-      'toast',
-      {
-        fade: animation,
-        context: !!color,
-        solid: Boolean(solid && color),
-        translucent
-      },
-      color,
-      className
-    )
-
-    const hasHeaderShorthand = icon != null || title != null || time != null
-    const headerGetsCloseButton = closeButton && (hasHeaderShorthand || message == null)
-    const bodyGetsCloseButton = closeButton && !hasHeaderShorthand && message != null
-    const hasHeaderContent = hasHeaderShorthand || headerGetsCloseButton
-
-    return (
-      <Transition {...transitionProps} timeout={250}>
-        {(state) => {
-          const transitionClass = getTransitionClass(state)
-          return (
-            <ToastContext.Provider value={contextValues}>
-              <div
-                className={classNames(_className, transitionClass)}
-                role={role}
-                aria-labelledby={title != null ? titleId : undefined}
-                aria-describedby={title != null && message != null ? textId : undefined}
-                {...mergeProps(rest, autoDismissProps)}
-                ref={forkedRef}
-              >
-                {hasHeaderContent && (
-                  <ToastHeader
-                    icon={icon}
-                    time={time}
-                    titleId={title != null ? titleId : undefined}
-                    closeButton={headerGetsCloseButton}
-                    closeLabel={closeLabel}
-                  >
-                    {title}
-                  </ToastHeader>
-                )}
-                {message != null && (
-                  <ToastBody
-                    id={title != null && message != null ? textId : undefined}
-                    closeButton={bodyGetsCloseButton}
-                    closeLabel={closeLabel}
-                  >
-                    {message}
-                  </ToastBody>
-                )}
-                {children}
-                {footer != null && (
-                  <ToastFooter>{typeof footer === 'function' ? footer(close) : footer}</ToastFooter>
-                )}
-              </div>
-            </ToastContext.Provider>
-          )
-        }}
-      </Transition>
-    )
-  }
-)
-
-Toast.displayName = 'Toast'

package/src/components/toast/ToastBody.tsx

@@ -1,64 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { CloseButton } from '../close-button/CloseButton'
-import { useToast } from '../../hooks'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type ToastBodyOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Adds a close button alongside the body content, so a toast composed without a
-   * `ToastHeader` still gets a dismiss control without any manual layout markup.
-   */
-  closeButton?: boolean
-  /**
-   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
-   * non-English UIs.
-   */
-  closeLabel?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-}
-
-export type ToastBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  ToastBodyOwnProps<C>
->
-
-type ToastBodyComponent = (<C extends ElementType = 'div'>(
-  props: ToastBodyProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ToastBodyRender<C extends ElementType = 'div'>(
-  { children, className, closeButton, closeLabel, component, ...rest }: ToastBodyProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const { close } = useToast()
-  const Component = component ?? 'div'
-  const _className = classNames(
-    'toast-body',
-    { 'd-flex align-items-start justify-content-between gap-sm': closeButton },
-    className
-  )
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {closeButton ? <div>{children}</div> : children}
-      {closeButton && <CloseButton label={closeLabel} onClick={close} />}
-    </Component>
-  )
-}
-
-export const ToastBody = createPolymorphicComponent<ToastBodyComponent>(
-  ToastBodyRender as ForwardRefRenderFunction<Element, ToastBodyProps<ElementType>>,
-  'ToastBody'
-)

package/src/components/toast/ToastFooter.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type ToastFooterOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-}
-
-export type ToastFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  ToastFooterOwnProps<C>
->
-
-type ToastFooterComponent = (<C extends ElementType = 'div'>(
-  props: ToastFooterProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ToastFooterRender<C extends ElementType = 'div'>(
-  { children, className, component, ...rest }: ToastFooterProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('toast-footer', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const ToastFooter = createPolymorphicComponent<ToastFooterComponent>(
-  ToastFooterRender as ForwardRefRenderFunction<Element, ToastFooterProps<ElementType>>,
-  'ToastFooter'
-)