@chassis-ui/react 0.0.0-20260831090525

package/src/components/pagination/Pagination.tsx

@@ -0,0 +1,199 @@
+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 small or large.
+   */
+  size?: 'small' | 'large'
+}
+
+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

@@ -0,0 +1,133 @@
+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
+} 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?: PolymorphicRef<C> }
+) => 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
+  )
+
+  const Component = (component ?? (active ? 'span' : 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
+  })
+
+  return (
+    <li className={_className} {...(active && { 'aria-current': 'page' })}>
+      {Component === 'button' ? (
+        <button
+          {...(rest as Record<string, unknown>)}
+          className="pagination-link"
+          type="button"
+          disabled={disabled}
+          onClick={handleClick}
+          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 })}
+          ref={ref as Ref<HTMLAnchorElement>}
+        >
+          {children}
+        </a>
+      ) : (
+        <Component
+          className="pagination-link"
+          {...(mergeProps(rest, needsButtonSemantics ? buttonProps : {}) as Record<
+            string,
+            unknown
+          >)}
+          {...(!needsButtonSemantics && { onClick: handleClick })}
+          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

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

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

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

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

@@ -0,0 +1,79 @@
+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'
+}