@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/pagination/Pagination.tsx

@@ -1,199 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import { Icon } from '../icon'
-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
-  /**
-   * 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
-  /**
-   * 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,
-      nextLabel = 'Next',
-      onActivePageChange,
-      pages,
-      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}
-          >
-            <Icon name="chevron-left-solid" 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}
-          >
-            <Icon name="chevron-right-solid" 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'
-)

package/src/components/pagination/index.ts

@@ -1,4 +0,0 @@
-export { Pagination } from './Pagination'
-export type { PaginationProps } from './Pagination'
-export { PaginationItem } from './PaginationItem'
-export type { PaginationItemProps } from './PaginationItem'

package/src/components/password-strength/PasswordStrength.tsx

@@ -1,155 +0,0 @@
-import React, { Fragment, HTMLAttributes, useEffect, useMemo, useRef } from 'react'
-import classNames from 'classnames'
-import { useMeter } from 'react-aria'
-
-import {
-  calculateScore,
-  defaultMessages,
-  defaultThresholds,
-  defaultWeights,
-  scoreToStrength,
-  STRENGTH_LEVELS,
-  StrengthLevel,
-  StrengthWeights
-} from './strengthScore'
-
-export interface PasswordStrengthProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  /**
-   * An accessible label for the meter. Defaults to `"Password strength"`.
-   */
-  'aria-label'?: string
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * `id` forwarded to the meter element.
-   */
-  id?: string
-  /**
-   * The maximum possible score, used to compute the meter's `aria-valuemax`. Defaults to the sum
-   * of `weights`' values — set this explicitly when pairing a custom `scorer` whose scale doesn't
-   * match the built-in criteria weights, otherwise `aria-valuenow`/`aria-valuemax` get silently
-   * clamped to the built-in max.
-   */
-  maxScore?: number
-  /**
-   * Minimum password length required to earn the first strength point. Defaults to `8`.
-   */
-  minLength?: number
-  /**
-   * Feedback message shown for each strength level, when `showText` is `true`.
-   */
-  messages?: Partial<Record<StrengthLevel, string>>
-  /**
-   * Callback fired whenever the strength level changes, including once on mount with the
-   * initial `value`'s strength.
-   */
-  onStrengthChange?: (result: { score: number; strength: StrengthLevel | null }) => void
-  /**
-   * Custom scoring function overriding the built-in criteria. Receives the password and returns
-   * a numeric score.
-   */
-  scorer?: (password: string) => number
-  /**
-   * Renders a `.strength-text` element below the meter with the current level's message.
-   * Defaults to `true`.
-   */
-  showText?: boolean
-  /**
-   * Score boundaries `[weak, fair, good]` — scores above the last value are `"strong"`. Defaults
-   * to `[2, 4, 6]`.
-   */
-  thresholds?: [number, number, number]
-  /**
-   * The current password value to evaluate.
-   */
-  value: string
-  /**
-   * Render as four discrete segments, or a single growing bar. Defaults to `"segmented"`.
-   */
-  variant?: 'bar' | 'segmented'
-  /**
-   * Point values for each scoring criterion. Set a criterion to `0` to disable it. Merged with
-   * the built-in defaults.
-   */
-  weights?: Partial<StrengthWeights>
-}
-
-export const PasswordStrength = ({
-  'aria-label': ariaLabel = 'Password strength',
-  className,
-  id,
-  maxScore,
-  messages,
-  minLength = 8,
-  onStrengthChange,
-  scorer,
-  showText = true,
-  thresholds = defaultThresholds,
-  value,
-  variant = 'segmented',
-  weights,
-  ...rest
-}: PasswordStrengthProps) => {
-  const mergedWeights = useMemo(() => ({ ...defaultWeights, ...weights }), [weights])
-  const mergedMessages = useMemo(() => ({ ...defaultMessages, ...messages }), [messages])
-
-  const score = useMemo(
-    () => calculateScore(value, { minLength, scorer, weights: mergedWeights }),
-    [value, minLength, scorer, mergedWeights]
-  )
-  const strength = useMemo(() => scoreToStrength(score, thresholds), [score, thresholds])
-  const resolvedMaxScore = useMemo(
-    () => maxScore ?? Object.values(mergedWeights).reduce((total, weight) => total + weight, 0),
-    [maxScore, mergedWeights]
-  )
-
-  // Deliberately not initialized to `strength` — that would make the effect below skip firing
-  // for the mount-time value, and a consumer using this to gate e.g. a submit button needs the
-  // real initial state, not just subsequent changes.
-  const previousStrength = useRef<StrengthLevel | null | undefined>(undefined)
-  useEffect(() => {
-    if (previousStrength.current !== strength) {
-      previousStrength.current = strength
-      onStrengthChange?.({ score, strength })
-    }
-  }, [strength, score, onStrengthChange])
-
-  const { meterProps } = useMeter({
-    'aria-label': ariaLabel,
-    maxValue: resolvedMaxScore,
-    minValue: 0,
-    value: score,
-    valueLabel: strength ? mergedMessages[strength] : undefined
-  })
-
-  const strengthIndex = strength ? STRENGTH_LEVELS.indexOf(strength) : -1
-
-  return (
-    <Fragment>
-      <div
-        {...meterProps}
-        className={classNames(variant === 'bar' ? 'strength-bar' : 'strength', className)}
-        data-cx-strength={strength ?? undefined}
-        id={id}
-        {...rest}
-      >
-        {variant === 'segmented' &&
-          STRENGTH_LEVELS.map((level, index) => (
-            <div
-              className={classNames('strength-segment', { active: index <= strengthIndex })}
-              key={level}
-            />
-          ))}
-      </div>
-      {showText && (
-        <span aria-live="polite" className="strength-text" data-cx-strength={strength ?? undefined}>
-          {strength ? mergedMessages[strength] : ''}
-        </span>
-      )}
-    </Fragment>
-  )
-}
-
-PasswordStrength.displayName = 'PasswordStrength'

package/src/components/password-strength/index.ts

@@ -1,2 +0,0 @@
-export { PasswordStrength } from './PasswordStrength'
-export type { PasswordStrengthProps } from './PasswordStrength'

package/src/components/password-strength/strengthScore.ts

@@ -1,79 +0,0 @@
-export type StrengthLevel = 'weak' | 'fair' | 'good' | 'strong'
-
-export const STRENGTH_LEVELS: StrengthLevel[] = ['weak', 'fair', 'good', 'strong']
-
-export interface StrengthWeights {
-  extraLength: number
-  lowercase: number
-  longPassword: number
-  minLength: number
-  multipleSpecial: number
-  numbers: number
-  special: number
-  uppercase: number
-}
-
-export const defaultWeights: StrengthWeights = {
-  extraLength: 1,
-  lowercase: 1,
-  longPassword: 1,
-  minLength: 1,
-  multipleSpecial: 1,
-  numbers: 1,
-  special: 1,
-  uppercase: 1
-}
-
-export const defaultMessages: Record<StrengthLevel, string> = {
-  fair: 'Fair',
-  good: 'Good',
-  strong: 'Strong',
-  weak: 'Weak'
-}
-
-export const defaultThresholds: [number, number, number] = [2, 4, 6]
-
-const SPECIAL_CHARS = /[!"#$%&()*,.:<>?@^{|}]/
-const MULTIPLE_SPECIAL_CHARS = /[!"#$%&()*,.:<>?@^{|}].*[!"#$%&()*,.:<>?@^{|}]/
-
-interface CalculateScoreOptions {
-  minLength: number
-  scorer?: (password: string) => number
-  weights: StrengthWeights
-}
-
-// Ported from chassis-css's vanilla strength.js `_calculateScore` — kept in lockstep with it so
-// a password scores identically whether evaluated by the vanilla JS or this component.
-export const calculateScore = (
-  password: string,
-  { minLength, scorer, weights }: CalculateScoreOptions
-): number => {
-  if (!password) return 0
-  if (scorer) return scorer(password)
-
-  let score = 0
-
-  if (password.length >= minLength) score += weights.minLength
-  if (password.length >= minLength + 4) score += weights.extraLength
-  if (/[a-z]/.test(password)) score += weights.lowercase
-  if (/[A-Z]/.test(password)) score += weights.uppercase
-  if (/\d/.test(password)) score += weights.numbers
-  if (SPECIAL_CHARS.test(password)) score += weights.special
-  if (MULTIPLE_SPECIAL_CHARS.test(password)) score += weights.multipleSpecial
-  if (password.length >= 16) score += weights.longPassword
-
-  return score
-}
-
-export const scoreToStrength = (
-  score: number,
-  thresholds: [number, number, number]
-): StrengthLevel | null => {
-  if (score === 0) return null
-
-  const [weak, fair, good] = thresholds
-  if (score <= weak) return 'weak'
-  if (score <= fair) return 'fair'
-  if (score <= good) return 'good'
-  return 'strong'
-}