@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/notification/Notification.scss

@@ -1,15 +0,0 @@
-/*
- * `Notification` applies chassis-css's generic `.fade` utility (`_transitions.scss`) for its base
- * opacity transition and `:not(.show) { opacity: 0 }` resting state — no chassis-css edit needed
- * for that part. `../chassis-css/scss/_notification.scss` has no `.showing` equivalent of its own
- * (unlike `_toast.scss`'s `.toast.showing { opacity: 0 }`), since a persistent banner has no
- * built-in notion of a fade transition. This file adds just that one Toast-parity rule, so the
- * entering/exiting halfway state (both `show` and `showing` present, per `Notification.tsx`'s
- * `getTransitionClass`) renders at opacity 0 instead of snapping straight to `.fade`'s `1`.
- */
-
-@layer components {
-  .notification.showing {
-    opacity: 0;
-  }
-}

package/src/components/notification/Notification.tsx

@@ -1,188 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes, ReactNode } from 'react'
-import classNames from 'classnames'
-import { mergeProps } from 'react-aria'
-import { Transition } from 'react-transition-group'
-
-import { ContextColor } from '../../types'
-import { CloseButton } from '../close-button/CloseButton'
-import { useAutoDismiss, useDismissibleTransition } from '../../hooks'
-import { NotificationContext } from './context'
-import { ResolvedIcon } from '../../utils/iconSlot'
-import { NotificationText } from './NotificationText'
-import { NotificationTitle } from './NotificationTitle'
-import './Notification.scss'
-
-export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * Optional trailing content — e.g. a row of `Button`s — rendered after `text`/`children`.
-   */
-  actions?: ReactNode
-  /**
-   * Automatically dismiss the notification after `delay`. The timer pauses while the pointer
-   * or focus is on the notification, and only starts once the notification is visible.
-   * Defaults to `false` — unlike `Toast`, notifications are persistent banners by default.
-   */
-  autohide?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Overrides the dismiss button's accessible name (defaults to `'Close'`). Set this for
-   * non-English UIs.
-   */
-  closeLabel?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Delay in ms before an `autohide` notification dismisses itself.
-   */
-  delay?: number
-  /**
-   * Optionally add a close button to the notification and allow it to self dismiss.
-   */
-  dismissible?: boolean
-  /**
-   * Leading icon. A string is an icon name, rendered like `<NotificationIcon name={icon} />` (or
-   * by `IconProvider`'s `component`); pass any other
-   * node for a fully custom icon. Automatically top-aligns with `title` when both are set —
-   * a custom icon node is responsible for its own alignment.
-   */
-  icon?: string | ReactNode
-  /**
-   * Applies the solid context style to the notification.
-   */
-  solid?: boolean
-  /**
-   * Message body, rendered via a single `<NotificationText>`. For multi-block content, compose
-   * `children` manually instead — `text` wraps everything in one element.
-   */
-  text?: ReactNode
-  /**
-   * Heading, rendered via `<NotificationTitle>`.
-   */
-  title?: ReactNode
-  /**
-   * Element or component used for the `title` heading. Passed through to `NotificationTitle`'s
-   * own `component` prop. Defaults to `'h4'`.
-   */
-  titleComponent?: ElementType
-  /**
-   * 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'
-  /**
-   * Toggle the visibility of component.
-   */
-  visible?: boolean
-}
-
-export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
-  (
-    {
-      actions,
-      autohide = false,
-      children,
-      className,
-      closeLabel = 'Close',
-      color = 'primary',
-      delay = 5000,
-      dismissible,
-      icon,
-      solid,
-      text,
-      title,
-      titleComponent = 'h4',
-      role = 'status',
-      visible = true,
-      onClose,
-      onShow,
-      ...rest
-    },
-    ref
-  ) => {
-    const {
-      close,
-      entered,
-      forkedRef,
-      getTransitionClass,
-      textId,
-      titleId,
-      transitionProps,
-      visible: _visible
-    } = useDismissibleTransition({ onClose, onShow, ref, visible })
-
-    // Gated on `entered`, not just `_visible` (see `Toast`'s identical comment) — the entrance
-    // transition finishing is what `autohide`'s JSDoc means by "the timer starts once the
-    // notification is visible".
-    const autoDismissProps = useAutoDismiss({
-      enabled: autohide,
-      delay,
-      visible: _visible && entered,
-      onHide: close
-    })
-
-    const _className = classNames(
-      'notification',
-      'fade',
-      color,
-      {
-        solid
-      },
-      className
-    )
-
-    return (
-      <Transition {...transitionProps} mountOnEnter timeout={150}>
-        {(state) => {
-          const transitionClass = getTransitionClass(state)
-          return (
-            <NotificationContext.Provider value={{ visible: _visible, close }}>
-              <div
-                className={classNames(_className, transitionClass)}
-                role={role}
-                aria-labelledby={title ? titleId : undefined}
-                aria-describedby={title && text ? textId : undefined}
-                {...mergeProps(rest, autoDismissProps)}
-                ref={forkedRef}
-              >
-                {icon &&
-                  (typeof icon === 'string' ? (
-                    <ResolvedIcon
-                      value={icon}
-                      className={classNames('notification-icon', { 'align-self-start': !!title })}
-                    />
-                  ) : (
-                    icon
-                  ))}
-                {title && (
-                  <NotificationTitle id={titleId} component={titleComponent}>
-                    {title}
-                  </NotificationTitle>
-                )}
-                {text && <NotificationText id={textId}>{text}</NotificationText>}
-                {children}
-                {actions}
-                {dismissible && <CloseButton label={closeLabel} onClick={close} />}
-              </div>
-            </NotificationContext.Provider>
-          )
-        }}
-      </Transition>
-    )
-  }
-)
-
-Notification.displayName = 'Notification'

package/src/components/notification/NotificationIcon.tsx

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

package/src/components/notification/NotificationStack.tsx

@@ -1,66 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-
-import { useToastRegionQueue } from '../../hooks'
-import { Stack } from '../stack'
-import { Notification } from './Notification'
-import { notificationQueue } from './notificationQueue'
-
-export interface NotificationStackProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Queued notifications show newest-first by default — the typical toast pattern. Set
-   * `reverse` for a chronological transcript instead, oldest-first.
-   */
-  reverse?: boolean
-}
-
-// Renders the shared `notificationQueue` (see `notificationQueue.ts` — `addNotification()` is
-// how notifications get added to it from anywhere in the app) plus any statically-passed
-// `children`, e.g. a permanently pinned notification alongside dynamic ones — the same static
-// children still render with nothing queued, so this doubles as a plain grouping/spacing
-// wrapper for hand-placed notifications. Unlike `Toaster`, this always renders in normal
-// document flow rather than a fixed/portaled overlay — Chassis notifications are in-page
-// banners, not floating toasts.
-export const NotificationStack = forwardRef<HTMLDivElement, NotificationStackProps>(
-  ({ children, className, reverse, ...rest }, ref) => {
-    const { forkedRef, regionProps, state } = useToastRegionQueue(notificationQueue, ref)
-
-    if (state.visibleToasts.length === 0 && !children) {
-      return null
-    }
-
-    // The queue is already newest-first (each add unshifts); `reverse` opts into chronological
-    // order instead.
-    const queued = reverse ? [...state.visibleToasts].reverse() : state.visibleToasts
-
-    return (
-      <Stack
-        direction="vertical"
-        gap="sm"
-        className={className}
-        {...regionProps}
-        {...rest}
-        ref={forkedRef}
-      >
-        {children}
-        {queued.map((item) => {
-          const { children: notificationChildren, ...notificationProps } = item.content
-          return (
-            <Notification
-              key={item.key}
-              {...notificationProps}
-              onClose={() => state.close(item.key)}
-            >
-              {notificationChildren}
-            </Notification>
-          )
-        })}
-      </Stack>
-    )
-  }
-)
-
-NotificationStack.displayName = 'NotificationStack'

package/src/components/notification/NotificationText.tsx

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

package/src/components/notification/NotificationTitle.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type NotificationTitleOwnProps<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 NotificationTitleProps<C extends ElementType = 'h4'> = PolymorphicComponentProps<
-  C,
-  NotificationTitleOwnProps<C>
->
-
-type NotificationTitleComponent = (<C extends ElementType = 'h4'>(
-  props: NotificationTitleProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function NotificationTitleRender<C extends ElementType = 'h4'>(
-  { children, className, component, ...rest }: NotificationTitleProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'h4'
-  const _className = classNames('notification-title', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const NotificationTitle = createPolymorphicComponent<NotificationTitleComponent>(
-  NotificationTitleRender as ForwardRefRenderFunction<Element, NotificationTitleProps<ElementType>>,
-  'NotificationTitle'
-)

package/src/components/notification/context.ts

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

package/src/components/notification/index.ts

@@ -1,25 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Notification } from './Notification'
-export type { NotificationProps } from './Notification'
-export { NotificationTitle } from './NotificationTitle'
-export type { NotificationTitleProps } from './NotificationTitle'
-export { NotificationIcon } from './NotificationIcon'
-export type { NotificationIconProps } from './NotificationIcon'
-export { NotificationText } from './NotificationText'
-export type { NotificationTextProps } from './NotificationText'
-
-// NotificationStack is an independent manager/container component (react-hot-toast-style), not
-// a Notification sub-part — it subscribes to the shared notificationQueue and renders
-// Notification instances from it, rather than being composed as a child of Notification. Stays
-// a separate top-level export, mirroring Toast/Toaster.
-export { NotificationStack } from './NotificationStack'
-export type { NotificationStackProps } from './NotificationStack'
-export { addNotification, closeNotification, notificationQueue } from './notificationQueue'
-export type { NotificationContent } from './notificationQueue'
-// 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 { useNotification } from '../../hooks/useNotification'
-export type { UseNotificationResult } from '../../hooks/useNotification'

package/src/components/notification/notificationQueue.ts

@@ -1,48 +0,0 @@
-import { ReactNode } from 'react'
-import { ToastQueue } from 'react-stately'
-
-import { NotificationProps } from './Notification'
-
-export interface NotificationContent extends Pick<
-  NotificationProps,
-  | 'actions'
-  | 'autohide'
-  | 'closeLabel'
-  | 'color'
-  | 'delay'
-  | 'dismissible'
-  | 'icon'
-  | 'role'
-  | 'solid'
-  | 'text'
-  | 'title'
-  | 'titleComponent'
-> {
-  /**
-   * Content of the notification. Compose manually (typically a `NotificationIcon`/
-   * `NotificationTitle`/`NotificationText`), or leave empty and use the `icon`/`title`/`text`
-   * shorthand options instead.
-   */
-  children?: ReactNode
-}
-
-// The queue backing `NotificationStack` — a module-level singleton so `addNotification()` is
-// callable from anywhere (an event handler, an async callback) without threading a `push` prop
-// through render. `NotificationStack` subscribes to it via `useToastQueue`; nothing renders
-// until a `<NotificationStack />` is actually mounted somewhere to display the queue's contents.
-export const notificationQueue = new ToastQueue<NotificationContent>()
-
-// Adds a notification to the queue. Returns the notification's key, which can be passed to
-// `closeNotification` to dismiss it programmatically. `children` is optional — omit it for a
-// notification composed entirely from the `icon`/`title`/`text` shorthand options.
-export function addNotification(
-  children?: ReactNode,
-  options: Omit<NotificationContent, 'children'> = {}
-): string {
-  return notificationQueue.add({ children, ...options })
-}
-
-// Removes a queued notification immediately, bypassing its own exit animation.
-export function closeNotification(key: string): void {
-  notificationQueue.close(key)
-}

package/src/components/otp-input/OtpBox.tsx

@@ -1,68 +0,0 @@
-import React, { ClipboardEvent, ForwardedRef, forwardRef, KeyboardEvent } from 'react'
-import classNames from 'classnames'
-import { mergeProps, useFocusRing, useObjectRef, useTextField } from 'react-aria'
-
-import { validationClassName } from '../../utils/validationClassName'
-
-interface OtpBoxProps {
-  disabled?: boolean
-  index: number
-  invalid?: boolean
-  mask?: boolean
-  onChangeValue: (value: string) => void
-  onKeyDownBox: (event: KeyboardEvent<HTMLInputElement>) => void
-  onPasteBox: (event: ClipboardEvent<HTMLInputElement>) => void
-  size?: 'sm' | 'lg'
-  valid?: boolean
-  value: string
-}
-
-export const OtpBox = forwardRef(
-  (
-    {
-      disabled,
-      index,
-      invalid,
-      mask,
-      onChangeValue,
-      onKeyDownBox,
-      onPasteBox,
-      size,
-      valid,
-      value
-    }: OtpBoxProps,
-    forwardedRef: ForwardedRef<HTMLInputElement>
-  ) => {
-    const ref = useObjectRef(forwardedRef)
-    const { focusProps, isFocusVisible } = useFocusRing()
-    const { inputProps } = useTextField(
-      {
-        'aria-label': `Digit ${index + 1}`,
-        autoComplete: index === 0 ? 'one-time-code' : 'off',
-        isDisabled: disabled,
-        isInvalid: invalid,
-        maxLength: 1,
-        onChange: onChangeValue,
-        onFocus: (event) => (event.target as HTMLInputElement).select(),
-        onKeyDown: onKeyDownBox,
-        type: mask ? 'password' : 'text',
-        value
-      },
-      ref
-    )
-
-    return (
-      <input
-        {...mergeProps(inputProps, focusProps)}
-        className={classNames('form-input', size, validationClassName(invalid, valid))}
-        data-focus-visible={isFocusVisible || undefined}
-        inputMode="numeric"
-        onPaste={onPasteBox}
-        pattern="\d*"
-        ref={ref}
-      />
-    )
-  }
-)
-
-OtpBox.displayName = 'OtpBox'