@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/toast/ToastHeader.tsx

@@ -1,105 +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 { ResolvedIcon } from '../../utils/iconSlot'
-
-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 an icon name, rendered like `<ToastIcon name={icon} />` (or by
-   * `IconProvider`'s `component`) 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">
-            <ResolvedIcon value={icon} className="toast-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,26 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-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'
-// Also exported from the package root; repeated here so this folder's subpath entry
-// (`@chassis-ui/react/<folder>`) covers the whole family without reaching back to the root.
-export { useToast } from '../../hooks/useToast'
-export type { UseToastResult } from '../../hooks/useToast'

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)
-}

package/src/components/tooltip/Tooltip.tsx

@@ -1,171 +0,0 @@
-import React, { FC, ReactElement, ReactNode, useCallback, useRef } from 'react'
-import { createPortal } from 'react-dom'
-import classNames from 'classnames'
-import { mergeProps, useOverlayPosition, useTooltip, useTooltipTrigger } from 'react-aria'
-import { useTooltipTriggerState } from 'react-stately'
-import { Transition } from 'react-transition-group'
-
-import {
-  getOverlayArrowStyle,
-  getOverlayTransitionClass,
-  useFloatingOverlay,
-  useForkedRef
-} from '../../hooks'
-import { Placement, resolveDataPlacement, toAriaPlacement } from '../../utils/overlayPlacement'
-import { asTriggerElement, getTriggerRef } from '../../utils/triggerElement'
-
-export type { Placement }
-
-export interface TooltipProps {
-  children: ReactElement
-  /**
-   * Content node for your component.
-   */
-  content: ReactNode | string
-  /**
-   * Offset of the tooltip relative to its target, as `[crossAxis, mainAxis]`.
-   */
-  offset?: [number, number]
-  /**
-   * Callback fired when the component requests to be hidden.
-   */
-  onHide?: () => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * Describes the preferred placement of your component. Chassis will flip it to keep it in
-   * view.
-   */
-  placement?: Placement
-  /**
-   * Tooltips always show on focus, since keyboard/screen-reader users need them too. Set to
-   * `'focus'` to disable the hover trigger and show on focus only.
-   */
-  trigger?: 'hover' | 'focus'
-  /**
-   * Toggle the visibility of the tooltip component.
-   */
-  visible?: boolean
-}
-
-export const Tooltip: FC<TooltipProps> = ({
-  children,
-  content,
-  placement = 'top',
-  offset: offsetProp = [0, 6],
-  onHide,
-  onShow,
-  trigger,
-  visible,
-  ...rest
-}) => {
-  const arrowRef = useRef<HTMLDivElement>(null)
-  const triggerRef = useRef<HTMLElement | null>(null)
-  const floatingRef = useRef<HTMLDivElement>(null)
-
-  // `cloneElement`'s config replaces the child's own `ref` outright rather than merging with it,
-  // so capturing the trigger node has to be forked with whatever ref the caller already put on
-  // that child — otherwise `<Tooltip><Button ref={mine} /></Tooltip>` silently never populates
-  // `mine`. Same reasoning for merging (rather than overwriting) the child's own props below:
-  // `triggerProps` carries the focus/hover handlers this component needs, and spreading them raw
-  // would drop a handler the caller put on their own trigger.
-  const setTriggerRef = useCallback((node: HTMLElement | null) => {
-    triggerRef.current = node
-  }, [])
-  const triggerElement = asTriggerElement(children)
-  const forkedTriggerRef = useForkedRef<HTMLElement>(setTriggerRef, getTriggerRef(triggerElement))
-
-  // react-stately defaults to a 1500ms warmup delay (and 500ms cooldown) before a first tooltip
-  // shows, spectrum-style — chassis-css's own JS plugin defaults to instant (`delay: 0`), so
-  // match that here rather than leaving new adopters to wonder why the first hover lags.
-  const state = useTooltipTriggerState({ trigger, delay: 0, closeDelay: 0 })
-  const { triggerProps, tooltipProps: tooltipTriggerProps } = useTooltipTrigger(
-    { trigger },
-    state,
-    triggerRef
-  )
-  const { tooltipProps } = useTooltip({}, state)
-
-  // Bypasses the hook's hover-warmup delay (`open`/`close`'s `immediate` argument) since a
-  // programmatic `visible` change, an `onShow`/`onHide` sync, or a containing dialog closing
-  // should all apply right away, same as before.
-  const portalContainer = useFloatingOverlay({
-    close: () => state.close(true),
-    isOpen: state.isOpen,
-    open: () => state.open(true),
-    onHide,
-    onShow,
-    triggerRef,
-    visible
-  })
-
-  const {
-    overlayProps,
-    arrowProps,
-    placement: resolvedPlacement
-  } = useOverlayPosition({
-    targetRef: triggerRef,
-    overlayRef: floatingRef,
-    placement: toAriaPlacement(placement),
-    offset: offsetProp[1],
-    crossOffset: offsetProp[0],
-    arrowSize: 8,
-    arrowRef,
-    isOpen: state.isOpen
-  })
-
-  const floatingStyle: React.CSSProperties = {
-    position: overlayProps.style?.position as React.CSSProperties['position'],
-    top: overlayProps.style?.top,
-    left: overlayProps.style?.left
-  }
-  const placementAttr = resolveDataPlacement(placement, resolvedPlacement)
-
-  return (
-    <>
-      {React.cloneElement(triggerElement, {
-        ...mergeProps(triggerElement.props, triggerProps),
-        ref: forkedTriggerRef
-      })}
-      {typeof window !== 'undefined' &&
-        createPortal(
-          <Transition
-            in={state.isOpen}
-            mountOnEnter
-            nodeRef={floatingRef}
-            timeout={{
-              enter: 0,
-              exit: 200
-            }}
-            unmountOnExit
-          >
-            {(transitionState) => {
-              const transitionClass = getOverlayTransitionClass(transitionState)
-              return (
-                <div
-                  className={classNames('tooltip cx-tooltip-auto', transitionClass)}
-                  data-cx-placement={placementAttr}
-                  ref={floatingRef}
-                  style={floatingStyle}
-                  {...mergeProps(tooltipTriggerProps, tooltipProps)}
-                  {...rest}
-                >
-                  <div
-                    className="tooltip-arrow"
-                    {...arrowProps}
-                    style={getOverlayArrowStyle(arrowProps)}
-                  ></div>
-                  <div className="tooltip-inner">{content}</div>
-                </div>
-              )
-            }}
-          </Transition>,
-          portalContainer ?? document.body
-        )}
-    </>
-  )
-}
-
-Tooltip.displayName = 'Tooltip'

package/src/components/tooltip/index.ts

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

package/src/global.d.ts

@@ -1,2 +0,0 @@
-declare module '*.css'
-declare module '*.scss'

package/src/hooks/index.ts

@@ -1,57 +0,0 @@
-import { useAutoDismiss } from './useAutoDismiss'
-import { useButtonSemantics } from './useButtonSemantics'
-import { useControllableState } from './useControllableState'
-import { useDialogElement } from './useDialogElement'
-import { useDisabledAnchorGuard } from './useDisabledAnchorGuard'
-import { useDismissibleTransition } from './useDismissibleTransition'
-import { useDrawer } from './useDrawer'
-import {
-  getOverlayArrowStyle,
-  getOverlayTransitionClass,
-  useFloatingOverlay
-} from './useFloatingOverlay'
-import { useForkedRef } from './useForkedRef'
-import { useFormField } from './useFormField'
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
-import { useModal } from './useModal'
-import { useNotification } from './useNotification'
-import { useOverlayPlacement } from './useOverlayPlacement'
-import { usePagination } from './usePagination'
-import { useToast } from './useToast'
-import { useToastRegionQueue } from './useToastRegionQueue'
-
-export {
-  getOverlayArrowStyle,
-  getOverlayTransitionClass,
-  useAutoDismiss,
-  useButtonSemantics,
-  useControllableState,
-  useDialogElement,
-  useDisabledAnchorGuard,
-  useDismissibleTransition,
-  useDrawer,
-  useFloatingOverlay,
-  useForkedRef,
-  useFormField,
-  useIsomorphicLayoutEffect,
-  useModal,
-  useNotification,
-  useOverlayPlacement,
-  usePagination,
-  useToast,
-  useToastRegionQueue
-}
-export type { UseAutoDismissOptions, UseAutoDismissResult } from './useAutoDismiss'
-export type { UseDialogElementOptions } from './useDialogElement'
-export type {
-  UseDismissibleTransitionOptions,
-  UseDismissibleTransitionResult
-} from './useDismissibleTransition'
-export type { UseDrawerResult } from './useDrawer'
-export type { UseFloatingOverlayOptions } from './useFloatingOverlay'
-export type { UseFormFieldOptions, UseFormFieldResult } from './useFormField'
-export type { UseModalResult } from './useModal'
-export type { UseNotificationResult } from './useNotification'
-export type { UsePaginationResult } from './usePagination'
-export type { UseToastResult } from './useToast'
-export type { UseToastRegionQueueResult } from './useToastRegionQueue'

package/src/hooks/useAutoDismiss.ts

@@ -1,91 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-
-export interface UseAutoDismissOptions {
-  /**
-   * Enables the auto-dismiss timer. When `false`, `onHide` is never called and the returned
-   * handlers are no-ops.
-   */
-  enabled?: boolean
-  /**
-   * Delay in ms before `onHide` fires once the timer is (re)started.
-   */
-  delay?: number
-  /**
-   * Whether the dismissible element is currently visible. The timer only runs while `true`.
-   */
-  visible: boolean
-  /**
-   * Called once the delay elapses without an intervening pointer/focus interaction.
-   */
-  onHide: () => void
-}
-
-export interface UseAutoDismissResult {
-  onMouseEnter: () => void
-  onMouseLeave: () => void
-  onFocus: () => void
-  onBlur: () => void
-}
-
-// Shared timer logic for components that auto-dismiss after a delay, pausing while the pointer
-// or focus is on the element (mirrors the behavior `Toast` already implements). Extracted so new
-// auto-dismissing components don't reimplement the pause/resume bookkeeping.
-export function useAutoDismiss({
-  enabled = false,
-  delay = 5000,
-  visible,
-  onHide
-}: UseAutoDismissOptions): UseAutoDismissResult {
-  // `useRef<number>()` (no argument) isn't valid under @types/react 19 — the overload requires
-  // an initial value, and the ref has to admit `undefined` for `clearAutoDismissTimeout` to reset
-  // it back to "no timer scheduled".
-  const timeout = useRef<number | undefined>(undefined)
-  const hasMouseInteraction = useRef(false)
-  const hasKeyboardInteraction = useRef(false)
-
-  const clearAutoDismissTimeout = useCallback(() => {
-    clearTimeout(timeout.current)
-    timeout.current = undefined
-  }, [])
-
-  const maybeScheduleHide = useCallback(() => {
-    clearAutoDismissTimeout()
-    if (!enabled || hasMouseInteraction.current || hasKeyboardInteraction.current) {
-      return
-    }
-    timeout.current = window.setTimeout(onHide, delay)
-  }, [enabled, delay, onHide, clearAutoDismissTimeout])
-
-  // Clears on unmount.
-  useEffect(() => clearAutoDismissTimeout, [clearAutoDismissTimeout])
-
-  useEffect(() => {
-    if (visible) {
-      maybeScheduleHide()
-    } else {
-      clearAutoDismissTimeout()
-    }
-  }, [visible, enabled, delay, maybeScheduleHide, clearAutoDismissTimeout])
-
-  const onMouseEnter = useCallback(() => {
-    hasMouseInteraction.current = true
-    clearAutoDismissTimeout()
-  }, [clearAutoDismissTimeout])
-
-  const onMouseLeave = useCallback(() => {
-    hasMouseInteraction.current = false
-    maybeScheduleHide()
-  }, [maybeScheduleHide])
-
-  const onFocus = useCallback(() => {
-    hasKeyboardInteraction.current = true
-    clearAutoDismissTimeout()
-  }, [clearAutoDismissTimeout])
-
-  const onBlur = useCallback(() => {
-    hasKeyboardInteraction.current = false
-    maybeScheduleHide()
-  }, [maybeScheduleHide])
-
-  return { onMouseEnter, onMouseLeave, onFocus, onBlur }
-}

package/src/hooks/useButtonSemantics.ts

@@ -1,33 +0,0 @@
-import { MouseEventHandler, Ref, RefObject, useRef } from 'react'
-import { AriaButtonProps, useButton } from 'react-aria'
-
-import { useForkedRef } from './useForkedRef'
-
-interface UseButtonSemanticsOptions<T extends HTMLElement> {
-  disabled?: boolean
-  onClick?: MouseEventHandler<T>
-}
-
-// Synthesizes native button semantics (role, tabIndex, Enter/Space activation) for a
-// non-native `component` — a `<button>`/`<a>`/`<input>` gets all of this for free from the
-// browser, but an arbitrary `component` (e.g. `'div'`, `'span'`) doesn't. Shared by
-// `Link`/`Button`/`CloseButton`, which otherwise duplicated this ref/hook wiring near-verbatim.
-// `elementType: 'div'` and the `HTMLDivElement` cast below are fixed regardless of the actual
-// rendered tag — `useButton` only uses `elementType` to pick which ARIA attributes apply
-// (a `div`-shaped set is the right one for an arbitrary non-native element either way), not to
-// constrain the ref's real type.
-export const useButtonSemantics = <T extends HTMLElement>(
-  ref: Ref<T>,
-  { disabled, onClick }: UseButtonSemanticsOptions<T>
-) => {
-  const buttonRef = useRef<T | null>(null)
-  const forkedRef = useForkedRef(ref, buttonRef)
-  const buttonAriaProps: AriaButtonProps<'div'> = {
-    elementType: 'div',
-    isDisabled: disabled,
-    onClick: onClick as unknown as AriaButtonProps<'div'>['onClick']
-  }
-  const { buttonProps } = useButton(buttonAriaProps, buttonRef as RefObject<HTMLDivElement | null>)
-
-  return { buttonProps, forkedRef }
-}