@chassis-ui/react 0.2.0 → 0.4.0

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

@@ -1,342 +0,0 @@
-import React, {
-  ClipboardEvent,
-  forwardRef,
-  Fragment,
-  HTMLAttributes,
-  KeyboardEvent,
-  ReactNode,
-  useMemo,
-  useRef
-} from 'react'
-import classNames from 'classnames'
-
-import { useControllableState, useForkedRef, useFormField } from '../../hooks'
-import { validationClassName } from '../../utils/validationClassName'
-import { renderFormField } from '../form-field/renderFormField'
-import { OtpBox } from './OtpBox'
-import { isRTL } from '../../utils/direction'
-
-export interface OtpInputProps extends Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'onChange' | 'defaultValue'
-> {
-  /**
-   * Identifies the element that describes the group, e.g. a `FormHelp` help element.
-   */
-  'aria-describedby'?: string
-  /**
-   * An accessible label for the group, used when there's no visible `<label>`.
-   */
-  'aria-label'?: string
-  /**
-   * Identifies a visible `<label>` element for the group.
-   */
-  'aria-labelledby'?: string
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * The initial code (uncontrolled), e.g. `"123"` for a partially filled code.
-   */
-  defaultValue?: string
-  /**
-   * Prevents input and makes every box non-interactive.
-   */
-  disabled?: boolean
-  /**
-   * Splits the boxes into groups (e.g. `[3, 3]` for a "123-456" layout), rendering a
-   * `.form-otp-separator` between each group. The total number of boxes becomes the sum of
-   * `groupSizes`, overriding `length`.
-   */
-  groupSizes?: number[]
-  /**
-   * A description for the field, rendered below the boxes.
-   */
-  help?: ReactNode
-  /**
-   * `id` forwarded to the group container.
-   */
-  id?: string
-  /**
-   * Visually connects the boxes into a single bordered control. When `groupSizes` is set, each
-   * group is connected separately.
-   */
-  inputGroup?: boolean
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * An error message for the field, rendered below the boxes when `invalid` is set.
-   */
-  invalidFeedback?: ReactNode
-  /**
-   * The field's caption, rendered as a `FormLabel` associated with the group via
-   * `aria-labelledby` (there's no single input to target with `htmlFor`).
-   */
-  label?: ReactNode
-  /**
-   * Number of digit boxes. Ignored when `groupSizes` is set. Defaults to `6`.
-   */
-  length?: number
-  /**
-   * Mask entered digits using `type="password"` boxes.
-   */
-  mask?: boolean
-  /**
-   * `name` of an auto-created hidden input kept in sync with the code, for native form
-   * submission. Omit to skip creating it.
-   */
-  name?: string
-  /**
-   * Callback fired whenever the code changes.
-   */
-  onChange?: (value: string) => void
-  /**
-   * Callback fired once every box is filled.
-   */
-  onComplete?: (value: string) => void
-  /**
-   * Content of the separator rendered between groups when `groupSizes` is set. Defaults to `–`.
-   */
-  separator?: ReactNode
-  /**
-   * Size the boxes sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-  /**
-   * A success message for the field, rendered below the boxes when `valid` is set.
-   */
-  validFeedback?: ReactNode
-  /**
-   * The code (controlled), digits only, e.g. `"123456"`.
-   */
-  value?: string
-}
-
-const onlyDigits = (raw: string) => raw.replace(/\D/g, '')
-
-const toBoxes = (raw: string, total: number): string[] => {
-  const digits = [...onlyDigits(raw)].slice(0, total)
-  return Array.from({ length: total }, (_, i) => digits[i] ?? '')
-}
-
-export const OtpInput = forwardRef<HTMLDivElement, OtpInputProps>(
-  (
-    {
-      className,
-      defaultValue,
-      disabled,
-      groupSizes,
-      help,
-      id,
-      inputGroup,
-      invalid,
-      invalidFeedback,
-      label,
-      length = 6,
-      mask,
-      name,
-      onChange,
-      onComplete,
-      separator = '–',
-      size,
-      valid,
-      validFeedback,
-      value,
-      ...rest
-    }: OtpInputProps,
-    ref
-  ): ReactNode => {
-    const total =
-      groupSizes && groupSizes.length > 0 ? groupSizes.reduce((a, b) => a + b, 0) : length
-
-    const [rawValue, setRawValue] = useControllableState(value, defaultValue ?? '', onChange)
-    const boxes = useMemo(() => toBoxes(rawValue, total), [rawValue, total])
-
-    const boxRefs = useRef<Array<HTMLInputElement | null>>([])
-    const focusBox = (index: number) => boxRefs.current[index]?.focus()
-    const containerRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, containerRef)
-
-    const commit = (nextBoxes: string[]) => {
-      const next = nextBoxes.join('')
-      setRawValue(next)
-      if (nextBoxes.length === total && nextBoxes.every((box) => box !== '')) {
-        onComplete?.(next)
-      }
-    }
-
-    const handleChange = (index: number, raw: string) => {
-      const digits = onlyDigits(raw)
-
-      if (digits.length > 1) {
-        // Multi-character value landing in a single box (autofill, or a fast typist outrunning
-        // the auto-advance) — distribute across this and subsequent boxes, matching chassis-css's
-        // vanilla otp-input.js `_handleInput`.
-        const chars = [...digits]
-        const nextBoxes = [...boxes]
-        for (let i = 0; i < chars.length && index + i < total; i++) {
-          nextBoxes[index + i] = chars[i]!
-        }
-        commit(nextBoxes)
-        focusBox(Math.min(index + chars.length, total - 1))
-        return
-      }
-
-      const nextBoxes = [...boxes]
-      nextBoxes[index] = digits
-      commit(nextBoxes)
-      if (digits && index < total - 1) focusBox(index + 1)
-    }
-
-    const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {
-      if (disabled) return
-
-      switch (event.key) {
-        case 'Backspace': {
-          if (!boxes[index] && index > 0) {
-            event.preventDefault()
-            const nextBoxes = [...boxes]
-            nextBoxes[index - 1] = ''
-            commit(nextBoxes)
-            focusBox(index - 1)
-          }
-          break
-        }
-        case 'Delete': {
-          event.preventDefault()
-          // `boxes` (and every copy derived from it) is always exactly `total` entries long — see
-          // `toBoxes` — so `i + 1` (bounded by `i < total - 1`) never reads past the end.
-          const nextBoxes = [...boxes]
-          for (let i = index; i < total - 1; i++) nextBoxes[i] = nextBoxes[i + 1]!
-          nextBoxes[total - 1] = ''
-          commit(nextBoxes)
-          break
-        }
-        // Arrow keys move by *visual* direction, so they mirror under RTL: the box to the left of
-        // the focused one is the next box, not the previous. `Carousel` and `MenuSubmenu` already
-        // mirror their own arrow handling this way; this used to hardcode the LTR mapping and sent
-        // an RTL user backwards through the field.
-        case 'ArrowLeft':
-        case 'ArrowRight': {
-          const movesForward = (event.key === 'ArrowRight') !== isRTL(event.currentTarget)
-          const nextIndex = movesForward ? index + 1 : index - 1
-          if (nextIndex >= 0 && nextIndex < total) {
-            event.preventDefault()
-            focusBox(nextIndex)
-          }
-          break
-        }
-        default:
-          break
-      }
-    }
-
-    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
-      event.preventDefault()
-      if (disabled) return
-      const digits = onlyDigits(event.clipboardData.getData('text')).slice(0, total)
-      if (!digits) return
-      commit(toBoxes(digits, total))
-      focusBox(Math.min(digits.length, total) - 1)
-    }
-
-    const renderBoxes = (start: number, count: number) =>
-      Array.from({ length: count }, (_, i) => start + i).map((i) => (
-        <OtpBox
-          disabled={disabled}
-          index={i}
-          invalid={invalid}
-          key={i}
-          mask={mask}
-          onChangeValue={(next) => handleChange(i, next)}
-          onKeyDownBox={(event) => handleKeyDown(i, event)}
-          onPasteBox={handlePaste}
-          ref={(el) => {
-            boxRefs.current[i] = el
-          }}
-          size={size}
-          valid={valid}
-          value={boxes[i] ?? ''}
-        />
-      ))
-
-    let content: ReactNode
-    if (groupSizes && groupSizes.length > 0) {
-      let cursor = 0
-      content = groupSizes.map((groupSize, groupIndex) => {
-        const start = cursor
-        cursor += groupSize
-        return (
-          // eslint-disable-next-line react/no-array-index-key
-          <Fragment key={groupIndex}>
-            {groupIndex > 0 && <span className="form-otp-separator">{separator}</span>}
-            {inputGroup ? (
-              <div className="input-group">{renderBoxes(start, groupSize)}</div>
-            ) : (
-              renderBoxes(start, groupSize)
-            )}
-          </Fragment>
-        )
-      })
-    } else {
-      content = renderBoxes(0, total)
-    }
-
-    const {
-      describedBy,
-      feedbackId,
-      helpId,
-      inputId: groupId,
-      labelId,
-      labelledBy
-    } = useFormField({
-      ariaDescribedBy: rest['aria-describedby'],
-      ariaLabelledBy: rest['aria-labelledby'],
-      help,
-      id,
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-
-    return renderFormField({
-      children: (
-        <div
-          {...rest}
-          aria-describedby={describedBy}
-          aria-labelledby={labelledBy}
-          className={classNames(
-            'form-otp',
-            { 'input-group': inputGroup && !(groupSizes && groupSizes.length > 0) },
-            validationClassName(invalid, valid),
-            className
-          )}
-          id={groupId}
-          ref={forkedRef}
-          role="group"
-        >
-          {content}
-          {name && <input disabled={disabled} name={name} type="hidden" value={boxes.join('')} />}
-        </div>
-      ),
-      help,
-      ids: { feedback: feedbackId, help: helpId, label: labelId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-  }
-)
-
-OtpInput.displayName = 'OtpInput'

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

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

package/src/components/pagination/Pagination.tsx

@@ -1,212 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import { IconValue } from '../../utils/iconConfig'
-import { IconSlot } from '../../utils/iconSlot'
-import classNames from 'classnames'
-
-import { PaginationItem } from './PaginationItem'
-import { usePagination } from '../../hooks'
-
-export interface PaginationProps extends HTMLAttributes<HTMLElement> {
-  /**
-   * Current active page (1-indexed). Used with `pages` for data-driven mode.
-   */
-  activePage?: number
-  /**
-   * Set the alignment of pagination components.
-   */
-  align?: 'start' | 'center' | 'end'
-  /**
-   * Accessible label for the pagination `<nav>` landmark. Override for non-English locales,
-   * or when multiple paginators appear on the same page.
-   *
-   * @default 'Pagination'
-   */
-  'aria-label'?: string
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Maximum number of visible page buttons (default: 5). Flanking pages are collapsed to ellipsis.
-   */
-  maxVisiblePages?: number
-  /**
-   * The "next page" control's icon in smart pagination mode: an icon name, or an element of your
-   * own icon set. Defaults to `IconProvider`'s `next` icon.
-   */
-  nextIcon?: IconValue
-  /**
-   * Accessible label for the "next page" control, used in smart pagination mode. Override for
-   * non-English locales.
-   *
-   * @default 'Next'
-   */
-  nextLabel?: string
-  /**
-   * Callback fired when the active page changes.
-   */
-  onActivePageChange?: (page: number) => void
-  /**
-   * Total number of pages. When provided alongside `activePage` and `onActivePageChange`,
-   * the component renders a fully-controlled smart paginator with Prev/Next and ellipsis.
-   */
-  pages?: number
-  /**
-   * The "previous page" control's icon in smart pagination mode: an icon name, or an element of
-   * your own icon set. Defaults to `IconProvider`'s `previous` icon.
-   */
-  previousIcon?: IconValue
-  /**
-   * Accessible label for the "previous page" control, used in smart pagination mode. Override
-   * for non-English locales.
-   *
-   * @default 'Previous'
-   */
-  previousLabel?: string
-  /**
-   * Show the numbered page buttons in smart pagination mode. Set `false` alongside
-   * `showPrevNext` to build a Prev/Next-only paginator.
-   *
-   * @default true
-   */
-  showPageNumbers?: boolean
-  /**
-   * Show the Prev/Next controls in smart pagination mode. Set `false` alongside
-   * `showPageNumbers` to build a page-numbers-only paginator.
-   *
-   * @default true
-   */
-  showPrevNext?: boolean
-  /**
-   * Size the component sm or lg.
-   */
-  size?: 'sm' | 'lg'
-}
-
-function getPageRange(activePage: number, pages: number, maxVisible: number): (number | '...')[] {
-  const safeMaxVisible = Math.max(1, maxVisible)
-
-  if (pages <= safeMaxVisible) {
-    return Array.from({ length: pages }, (_, i) => i + 1)
-  }
-
-  const half = Math.floor(safeMaxVisible / 2)
-  let start = Math.max(1, activePage - half)
-  const end = Math.min(pages, start + safeMaxVisible - 1)
-
-  if (end - start < safeMaxVisible - 1) {
-    start = Math.max(1, end - safeMaxVisible + 1)
-  }
-
-  const result: (number | '...')[] = []
-
-  if (start > 1) {
-    result.push(1)
-    if (start > 2) result.push('...')
-  }
-
-  for (let i = start; i <= end; i++) {
-    result.push(i)
-  }
-
-  if (end < pages) {
-    if (end < pages - 1) result.push('...')
-    result.push(pages)
-  }
-
-  return result
-}
-
-export const Pagination = forwardRef<HTMLElement, PaginationProps>(
-  (
-    {
-      activePage = 1,
-      align,
-      'aria-label': ariaLabel = 'Pagination',
-      children,
-      className,
-      maxVisiblePages = 5,
-      nextIcon,
-      nextLabel = 'Next',
-      onActivePageChange,
-      pages,
-      previousIcon,
-      previousLabel = 'Previous',
-      showPageNumbers = true,
-      showPrevNext = true,
-      size,
-      ...rest
-    },
-    ref
-  ) => {
-    const _className = classNames(
-      'pagination',
-      size,
-      {
-        [`justify-content-${align}`]: align
-      },
-      className
-    )
-
-    const clampedActivePage = pages ? Math.min(Math.max(activePage, 1), pages) : activePage
-    const prevDisabled = pages ? clampedActivePage <= 1 : false
-    const nextDisabled = pages ? clampedActivePage >= pages : false
-
-    const { prevRef, nextRef, handlePrevClick, handleNextClick } = usePagination({
-      prevDisabled,
-      nextDisabled,
-      onPrev: () => onActivePageChange && onActivePageChange(clampedActivePage - 1),
-      onNext: () => onActivePageChange && onActivePageChange(clampedActivePage + 1)
-    })
-
-    const smartContent = pages ? (
-      <>
-        {showPrevNext && (
-          <PaginationItem
-            ref={prevRef}
-            disabled={prevDisabled}
-            onClick={handlePrevClick}
-            aria-label={previousLabel}
-          >
-            <IconSlot icon="previous" override={previousIcon} className="directional-icon" />
-          </PaginationItem>
-        )}
-        {showPageNumbers &&
-          getPageRange(clampedActivePage, pages, maxVisiblePages).map((page, idx) =>
-            page === '...' ? (
-              // eslint-disable-next-line react/no-array-index-key
-              <PaginationItem key={`ellipsis-${idx}`} disabled component="span" aria-hidden="true">
-                &hellip;
-              </PaginationItem>
-            ) : (
-              <PaginationItem
-                key={page}
-                active={page === clampedActivePage}
-                onClick={() => onActivePageChange && onActivePageChange(page)}
-              >
-                {page}
-              </PaginationItem>
-            )
-          )}
-        {showPrevNext && (
-          <PaginationItem
-            ref={nextRef}
-            disabled={nextDisabled}
-            onClick={handleNextClick}
-            aria-label={nextLabel}
-          >
-            <IconSlot icon="next" override={nextIcon} className="directional-icon" />
-          </PaginationItem>
-        )}
-      </>
-    ) : null
-
-    return (
-      <nav aria-label={ariaLabel} ref={ref} {...rest}>
-        <ul className={_className}>{smartContent ?? children}</ul>
-      </nav>
-    )
-  }
-)
-
-Pagination.displayName = 'Pagination'

package/src/components/pagination/PaginationItem.tsx

@@ -1,152 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  MouseEvent,
-  MouseEventHandler,
-  ReactElement,
-  Ref
-} from 'react'
-import classNames from 'classnames'
-import { mergeProps } from 'react-aria'
-
-import { useButtonSemantics } from '../../hooks'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef,
-  PolymorphicRefWithFallback
-} from '../../utils/polymorphic'
-
-type PaginationItemOwnProps<C extends ElementType> = {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * The href attribute. When provided the item renders as an `<a>` tag; otherwise as a `<button>`.
-   */
-  href?: string
-}
-
-export type PaginationItemProps<C extends ElementType = 'button'> = PolymorphicComponentProps<
-  C,
-  PaginationItemOwnProps<C>
->
-
-type PaginationItemComponent = (<C extends ElementType = 'button'>(
-  props: PaginationItemProps<C> & {
-    ref?: PolymorphicRefWithFallback<C, HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>
-  }
-) => ReactElement | null) & { displayName?: string }
-
-function PaginationItemRender<C extends ElementType = 'button'>(
-  {
-    active,
-    children,
-    className,
-    component,
-    disabled,
-    href,
-    onClick,
-    ...rest
-  }: PaginationItemProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const _className = classNames(
-    'pagination-item',
-    {
-      active,
-      disabled
-    },
-    className
-  )
-
-  // The active page keeps whatever element it would render anyway (`<button>`, or `<a>` when
-  // given `href`) rather than collapsing to a `<span>`. Swapping the tag on activation made React
-  // unmount the focused control and mount a different element in its place, so a keyboard user who
-  // activated a page was dropped to `<body>` and had to tab in from the top of the document again
-  // (WCAG 2.4.3). The `<span>` wasn't even inert: `Pagination`'s smart mode passes an `onClick`,
-  // so `useButtonSemantics` gave it `role="button"` and `tabIndex={0}` — a synthetic button,
-  // strictly worse than the real one it replaced. Styling is unaffected either way: chassis-css
-  // matches `.pagination-link { &.active, .active > & }`, and `active` still lands on the `<li>`.
-  const Component = (component ?? (href ? 'a' : 'button')) as ElementType
-
-  // `<a>` has no real `disabled` attribute, so a disabled anchor pagination item still fires
-  // click (and still navigates) unless it's blocked here, same guard `Button` applies.
-  const handleClick = (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
-    if (Component === 'a' && disabled) {
-      event.preventDefault()
-      return
-    }
-    onClick?.(event as never)
-  }
-
-  // A custom `component`/default (non-`button`/`a`) branch gets a raw `onClick` with no keyboard
-  // semantics otherwise — the same gap `Link` fills via `useButtonSemantics`.
-  const needsButtonSemantics = Component !== 'button' && Component !== 'a' && !!onClick
-  const { buttonProps, forkedRef } = useButtonSemantics<HTMLElement>(ref as Ref<HTMLElement>, {
-    disabled,
-    onClick: onClick as MouseEventHandler<HTMLElement> | undefined
-  })
-
-  // `aria-current="page"` goes on the control itself, not the wrapping `<li>` — that's where the
-  // WAI-ARIA pagination pattern puts it, and it's what a screen reader conveys when focus lands on
-  // the control. On the `<li>` it was attached to a presentational list item nothing focuses.
-  const currentProps = active ? { 'aria-current': 'page' as const } : {}
-
-  return (
-    <li className={_className}>
-      {Component === 'button' ? (
-        <button
-          {...(rest as Record<string, unknown>)}
-          className="pagination-link"
-          type="button"
-          disabled={disabled}
-          onClick={handleClick}
-          {...currentProps}
-          ref={ref as Ref<HTMLButtonElement>}
-        >
-          {children}
-        </button>
-      ) : Component === 'a' ? (
-        <a
-          {...(rest as Record<string, unknown>)}
-          className="pagination-link"
-          href={href}
-          onClick={handleClick}
-          {...(disabled && { 'aria-disabled': true, tabIndex: -1 })}
-          {...currentProps}
-          ref={ref as Ref<HTMLAnchorElement>}
-        >
-          {children}
-        </a>
-      ) : (
-        <Component
-          className="pagination-link"
-          {...(mergeProps(rest, needsButtonSemantics ? buttonProps : {}) as Record<
-            string,
-            unknown
-          >)}
-          {...(!needsButtonSemantics && { onClick: handleClick })}
-          {...currentProps}
-          ref={needsButtonSemantics ? forkedRef : ref}
-        >
-          {children}
-        </Component>
-      )}
-    </li>
-  )
-}
-
-export const PaginationItem = createPolymorphicComponent<PaginationItemComponent>(
-  PaginationItemRender as ForwardRefRenderFunction<Element, PaginationItemProps<ElementType>>,
-  'PaginationItem'
-)