@chassis-ui/react 0.2.0 → 0.3.0

package/src/components/pagination/index.ts

@@ -1,12 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Pagination } from './Pagination'
-export type { PaginationProps } from './Pagination'
-export { PaginationItem } from './PaginationItem'
-export type { PaginationItemProps } from './PaginationItem'
-// 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 { usePagination } from '../../hooks/usePagination'
-export type { UsePaginationResult } from '../../hooks/usePagination'

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,6 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-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'
-}

package/src/components/placeholder/Placeholder.tsx

@@ -1,178 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { ContextColor, ContextStyle } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type PlaceholderAlign = 'start' | 'center' | 'end'
-
-type PlaceholderOwnProps<C extends ElementType> = {
-  /**
-   * Set the horizontal alignment. Only applies when `src` is set.
-   */
-  align?: PlaceholderAlign
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the generated placeholder graphic to one of Chassis context colors. Has no
-   * effect when `src` is set.
-   */
-  color?: ContextColor
-  /**
-   * Sets the variant of the generated placeholder graphic to one of Chassis context styles. Has no
-   * effect when `src` is set.
-   */
-  variant?: Exclude<ContextStyle, 'basic' | 'outline'>
-  /**
-   * Component used for the root node when `src` is set. Either a string to use an HTML element
-   * or a component — e.g. a framework's own `Image` component. Its own props (`src`, `fill`,
-   * `priority`, etc.) are type-checked at the call site once passed here.
-   */
-  component?: C
-  /**
-   * Make the image responsive, so it never grows larger than its parent. Only applies when `src`
-   * is set.
-   */
-  fluid?: boolean
-  /**
-   * Placeholder height.
-   */
-  height?: number | string
-  /**
-   * Give the image a rounded border-radius. Only applies when `src` is set.
-   */
-  rounded?: boolean
-  /**
-   * Renders a real image instead of the generated placeholder graphic, e.g. a default asset or a
-   * `placehold.co` URL.
-   */
-  src?: string
-  /**
-   * Text shown in the generated placeholder graphic. Defaults to `{width}x{height}`. Pass `false`
-   * to hide it. Has no effect when `src` is set.
-   */
-  text?: string | false
-  /**
-   * Give the image a thumbnail appearance (padding, background, border, box-shadow). Only
-   * applies when `src` is set.
-   */
-  thumbnail?: boolean
-  /**
-   * Accessible title for the generated placeholder graphic, rendered as an SVG `<title>`. Pass
-   * `false` to hide it. Has no effect when `src` is set.
-   *
-   * @default 'Placeholder'
-   */
-  title?: string | false
-  /**
-   * Placeholder width.
-   */
-  width?: number | string
-}
-
-export type PlaceholderProps<C extends ElementType = 'img'> = PolymorphicComponentProps<
-  C,
-  PlaceholderOwnProps<C>
->
-
-type PlaceholderComponent = (<C extends ElementType = 'img'>(
-  props: PlaceholderProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-const alignClassNames = (align: PlaceholderAlign | undefined) => [
-  align === 'start' || align === 'end' ? `float-${align}` : null,
-  align === 'center' ? 'd-block mx-auto' : null
-]
-
-function PlaceholderRender<C extends ElementType = 'img'>(
-  {
-    align,
-    alt,
-    className,
-    color,
-    component,
-    fluid,
-    height,
-    rounded,
-    src,
-    text,
-    thumbnail,
-    title = 'Placeholder',
-    variant,
-    width,
-    ...rest
-  }: PlaceholderProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const showTitle = title !== false
-  const displayText =
-    text === false
-      ? undefined
-      : (text ?? (width !== undefined && height !== undefined ? `${width}x${height}` : undefined))
-  const showText = displayText !== undefined
-  const label =
-    [showTitle && title, showText && displayText].filter(Boolean).join(': ') || undefined
-
-  if (src) {
-    const Component = component ?? 'img'
-    const _className = classNames(
-      { image: fluid || thumbnail, fluid, rounded, thumbnail },
-      alignClassNames(align),
-      className
-    )
-
-    return (
-      <Component
-        src={src}
-        width={width}
-        height={height}
-        alt={alt ?? label ?? ''}
-        className={_className}
-        {...rest}
-        ref={ref}
-      />
-    )
-  }
-
-  const _className = classNames(
-    'image',
-    { context: Boolean(color || variant) },
-    color,
-    variant ? variant : 'bg-evident',
-    'fg-subtle',
-    className
-  )
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      aria-label={label}
-      aria-hidden={label ? undefined : true}
-      className={_className}
-      preserveAspectRatio="xMidYMid slice"
-      role={label ? 'img' : undefined}
-      {...rest}
-      ref={ref as PolymorphicRef<'svg'>}
-    >
-      {showTitle && <title>{title}</title>}
-      {showText && (
-        <text dy=".3em" fill="currentColor" textAnchor="middle" x="50%" y="50%">
-          {displayText}
-        </text>
-      )}
-    </svg>
-  )
-}
-
-export const Placeholder = createPolymorphicComponent<PlaceholderComponent>(
-  PlaceholderRender as ForwardRefRenderFunction<Element, PlaceholderProps<ElementType>>,
-  'Placeholder'
-)

package/src/components/placeholder/index.ts

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