@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/toast/Toast.tsx

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

@@ -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'
-)

package/src/components/toast/ToastHeader.tsx

@@ -1,104 +0,0 @@
-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-sm">
-            <ToastIcon name={icon} />
-          </span>
-        ) : (
-          <span className="me-sm">{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

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

@@ -1,87 +0,0 @@
-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-md',
-      {
-        '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'

package/src/components/toast/context.ts

@@ -1,14 +0,0 @@
-import { createContext } from 'react'
-
-export interface ToastContextProps {
-  /**
-   * Whether the toast is currently visible.
-   */
-  visible?: boolean
-  /**
-   * Dismisses the toast. Wire this to any element's `onClick` — see `useToast`.
-   */
-  close: () => void
-}
-
-export const ToastContext = createContext<ToastContextProps>({ close: () => {} })

package/src/components/toast/index.ts

@@ -1,18 +0,0 @@
-export { Toast } from './Toast'
-export type { ToastProps } from './Toast'
-export { ToastBody } from './ToastBody'
-export type { ToastBodyProps } from './ToastBody'
-export { ToastFooter } from './ToastFooter'
-export type { ToastFooterProps } from './ToastFooter'
-export { ToastHeader } from './ToastHeader'
-export type { ToastHeaderProps } from './ToastHeader'
-export { ToastIcon } from './ToastIcon'
-export type { ToastIconProps } from './ToastIcon'
-
-// Toaster is an independent manager/container component (react-hot-toast-style), not a Toast
-// sub-part — it subscribes to the shared toastQueue and renders Toast instances from it, rather
-// than being composed as a child of Toast. Stays a separate top-level export.
-export { Toaster } from './Toaster'
-export type { ToasterProps } from './Toaster'
-export { addToast, closeToast, toastQueue } from './toastQueue'
-export type { ToastContent } from './toastQueue'

package/src/components/toast/toastQueue.ts

@@ -1,56 +0,0 @@
-import { ReactNode } from 'react'
-import { ToastQueue } from 'react-stately'
-
-import { ContextColor } from '../../types'
-
-export interface ToastContent {
-  /**
-   * 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
-  /**
-   * Content of the toast — typically a `Toast.Header`/`Toast.Body`/`Toast.Footer`.
-   */
-  children: ReactNode
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Delay hiding the toast (ms).
-   */
-  delay?: number
-  /**
-   * Apply a full-color background with inverted text. Only meaningful alongside `color`.
-   */
-  solid?: boolean
-  /**
-   * Apply a semi-transparent background.
-   */
-  translucent?: boolean
-}
-
-// The queue backing `Toaster` — a module-level singleton so `addToast()` is callable from
-// anywhere (an event handler, an async callback) without threading a `push` prop through
-// render. `Toaster` subscribes to it via `useToastQueue`; nothing renders until a
-// `<Toaster />` is actually mounted somewhere to display the queue's contents.
-export const toastQueue = new ToastQueue<ToastContent>()
-
-// Adds a toast to the queue. Returns the toast's key, which can be passed to `closeToast` to
-// dismiss it programmatically.
-export function addToast(
-  children: ReactNode,
-  options: Omit<ToastContent, 'children'> = {}
-): string {
-  return toastQueue.add({ children, ...options })
-}
-
-// Removes a queued toast immediately, bypassing its own exit animation.
-export function closeToast(key: string): void {
-  toastQueue.close(key)
-}