@chassis-ui/react 0.0.0-20260831090525

package/src/components/textarea/Textarea.tsx

@@ -0,0 +1,145 @@
+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 small or large.
+   */
+  size?: 'small' | 'large'
+  /**
+   * 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

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea'
+export type { TextareaProps } from './Textarea'

package/src/components/toast/Toast.tsx

@@ -0,0 +1,219 @@
+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 rendered as `<ToastIcon name={icon} />`; 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

@@ -0,0 +1,64 @@
+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-small': 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

@@ -0,0 +1,47 @@
+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'
+)

package/src/components/toast/ToastHeader.tsx

@@ -0,0 +1,104 @@
+import React, { ElementType, ForwardRefRenderFunction, ReactElement, ReactNode } from 'react'
+import classNames from 'classnames'
+
+import { CloseButton } from '../close-button/CloseButton'
+import { useToast } from '../../hooks'
+import {
+  createPolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicRef
+} from '../../utils/polymorphic'
+import { ToastIcon } from './ToastIcon'
+
+type ToastHeaderOwnProps<C extends ElementType> = {
+  /**
+   * Heading, rendered before `time` as a `<strong>`.
+   */
+  children?: ReactNode
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Automatically add a close button to the header.
+   */
+  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
+  /**
+   * Leading icon. A string is rendered as `<ToastIcon name={icon} />` and hidden from
+   * assistive technology by default, since it duplicates the heading visually. Pass any other
+   * node for a fully custom icon (typically a logo or avatar) — a custom node is left as-is,
+   * since it may carry its own meaningful accessible name (e.g. an avatar's `alt` text).
+   */
+  icon?: string | ReactNode
+  /**
+   * Trailing timestamp, rendered after the heading.
+   */
+  time?: ReactNode
+  /**
+   * Sets the `id` on the rendered heading element, for `aria-labelledby` wiring. Set
+   * automatically by `Toast` when both `title` and `message` are used together; only needed
+   * here for manual wiring in a fully custom composition.
+   */
+  titleId?: string
+}
+
+export type ToastHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
+  C,
+  ToastHeaderOwnProps<C>
+>
+
+type ToastHeaderComponent = (<C extends ElementType = 'div'>(
+  props: ToastHeaderProps<C> & { ref?: PolymorphicRef<C> }
+) => ReactElement | null) & { displayName?: string }
+
+function ToastHeaderRender<C extends ElementType = 'div'>(
+  {
+    children,
+    className,
+    closeButton,
+    closeLabel,
+    component,
+    icon,
+    time,
+    titleId,
+    ...rest
+  }: ToastHeaderProps<C>,
+  ref: PolymorphicRef<C>
+) {
+  const { close } = useToast()
+  const Component = component ?? 'div'
+  const _className = classNames('toast-header', className)
+  return (
+    <Component className={_className} {...rest} ref={ref}>
+      {icon != null &&
+        (typeof icon === 'string' ? (
+          <span aria-hidden="true" className="me-small">
+            <ToastIcon name={icon} />
+          </span>
+        ) : (
+          <span className="me-small">{icon}</span>
+        ))}
+      {children != null && (
+        <strong id={titleId} className="me-auto">
+          {children}
+        </strong>
+      )}
+      {time != null && <small>{time}</small>}
+      {closeButton && <CloseButton label={closeLabel} onClick={close} />}
+    </Component>
+  )
+}
+
+export const ToastHeader = createPolymorphicComponent<ToastHeaderComponent>(
+  ToastHeaderRender as ForwardRefRenderFunction<Element, ToastHeaderProps<ElementType>>,
+  'ToastHeader'
+)

package/src/components/toast/ToastIcon.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react'
+import classNames from 'classnames'
+
+import { Icon, IconProps } from '../icon/Icon'
+
+export type ToastIconProps = IconProps & {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+}
+
+export const ToastIcon = forwardRef<HTMLSpanElement | SVGSVGElement, ToastIconProps>(
+  ({ className, ...rest }, ref) => {
+    const _className = classNames('toast-icon', className)
+
+    return <Icon className={_className} {...rest} ref={ref} />
+  }
+)
+
+ToastIcon.displayName = 'ToastIcon'

package/src/components/toast/Toaster.tsx

@@ -0,0 +1,87 @@
+import React, { forwardRef, HTMLAttributes } from 'react'
+import { createPortal } from 'react-dom'
+import classNames from 'classnames'
+
+import { useToastRegionQueue } from '../../hooks'
+import { Toast } from './Toast'
+import { toastQueue } from './toastQueue'
+
+export interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Overrides the toast region's accessible name (defaults to `'Notifications'`, per
+   * react-aria). Set this for non-English UIs, or to distinguish multiple toasters on the
+   * same page.
+   */
+  'aria-label'?: string
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Describes the placement of your component.
+   *
+   * @type 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | string
+   */
+  placement?:
+    | 'top-start'
+    | 'top-center'
+    | 'top-end'
+    | 'middle-start'
+    | 'middle-center'
+    | 'middle-end'
+    | 'bottom-start'
+    | 'bottom-center'
+    | 'bottom-end'
+    | string
+}
+
+// Renders the shared `toastQueue` (see `toastQueue.ts` — `addToast()` is how toasts get added
+// to it from anywhere in the app) plus any statically-passed `children`, e.g. a permanently
+// pinned toast alongside dynamic ones.
+export const Toaster = forwardRef<HTMLDivElement, ToasterProps>(
+  ({ children, className, placement, ...rest }, ref) => {
+    const { forkedRef, regionProps, state } = useToastRegionQueue(toastQueue, ref)
+
+    const _className = classNames(
+      'toaster toast-container p-medium',
+      {
+        'position-fixed': placement,
+        'position-static': !placement,
+        'top-0': placement && placement.includes('top'),
+        'top-50 translate-middle-y': placement && placement.includes('middle'),
+        'bottom-0': placement && placement.includes('bottom'),
+        'start-0': placement && placement.includes('start'),
+        'start-50 translate-middle-x': placement && placement.includes('center'),
+        'end-0': placement && placement.includes('end')
+      },
+      className
+    )
+
+    const toaster = (toasterRef?: React.Ref<HTMLDivElement>) => {
+      return state.visibleToasts.length > 0 || children ? (
+        <div className={_className} {...regionProps} {...rest} ref={toasterRef}>
+          {children}
+          {state.visibleToasts.map((queued) => {
+            const { children: toastChildren, ...toastProps } = queued.content
+            return (
+              <Toast
+                key={queued.key}
+                visible
+                {...toastProps}
+                onClose={() => state.close(queued.key)}
+              >
+                {toastChildren}
+              </Toast>
+            )
+          })}
+        </div>
+      ) : null
+    }
+
+    return typeof window !== 'undefined' && placement
+      ? createPortal(toaster(forkedRef), document.body)
+      : toaster(forkedRef)
+  }
+)
+
+Toaster.displayName = 'Toaster'