@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/components/pagination/Pagination.tsx

@@ -0,0 +1,160 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { useEffect, useId, useRef } from 'react'
+import { Button as AriaButton, useLocale } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { breakpoints, useMinWidth } from '../../internal/media'
+import { useMessages } from '../../internal/provider'
+
+export interface PaginationLabels {
+  navigation: string
+  previous: string
+  next: string
+  pageSize: string
+  range: (from: number, to: number, total: number) => string
+  page: (n: number) => string
+  pageOf: (n: number, count: number) => string
+}
+
+export interface PaginationProps {
+  /** Current page, 1-based. */
+  page: number
+  pageCount: number
+  totalItems: number
+  pageSize: number
+  onPageChange: (page: number) => void
+  /** When present, shows the page size selector. */
+  pageSizeOptions?: number[]
+  /** The host resets to page 1. */
+  onPageSizeChange?: (size: number) => void
+  siblingCount?: number
+  busy?: boolean
+  labels?: Partial<PaginationLabels>
+  hideWhenSinglePage?: boolean
+  className?: string
+}
+
+export type PageSlot = number | 'gap'
+
+/** Page numbers to show: first, last, current and its siblings, with gaps. */
+export function pageSlots(page: number, pageCount: number, siblingCount = 1): PageSlot[] {
+  const pages = new Set<number>([1, pageCount])
+  for (let p = page - siblingCount; p <= page + siblingCount; p++) if (p >= 1 && p <= pageCount) pages.add(p)
+  if (page <= 1 + siblingCount) pages.add(Math.min(pageCount, 2))
+  const sorted = [...pages].filter((p) => p >= 1).sort((a, b) => a - b)
+  const out: PageSlot[] = []
+  sorted.forEach((p, i) => {
+    const prev = sorted[i - 1]
+    if (prev !== undefined && p - prev === 2) out.push(prev + 1)
+    else if (prev !== undefined && p - prev > 2) out.push('gap')
+    out.push(p)
+  })
+  return out
+}
+
+/** Moves through a paged collection (spec: wave-1/pagination.md). */
+export function Pagination(props: PaginationProps) {
+  const {
+    page,
+    pageCount,
+    totalItems,
+    pageSize,
+    onPageChange,
+    pageSizeOptions,
+    onPageSizeChange,
+    siblingCount = 1,
+    busy = false,
+    hideWhenSinglePage = true,
+    className,
+  } = props
+  const messages = useMessages()
+  const labels: PaginationLabels = { ...messages.pagination, ...props.labels }
+  const wide = useMinWidth(breakpoints.sm)
+  const { locale } = useLocale()
+  const numeral = new Intl.NumberFormat(locale)
+  const selectId = useId()
+  const prevRef = useRef<HTMLButtonElement>(null)
+  const nextRef = useRef<HTMLButtonElement>(null)
+
+  const atStart = page <= 1
+  const atEnd = page >= pageCount
+
+  // If the focused arrow became disabled, move focus to the other arrow.
+  useEffect(() => {
+    const active = document.activeElement
+    if (atStart && active === prevRef.current) nextRef.current?.focus()
+    else if (atEnd && active === nextRef.current) prevRef.current?.focus()
+  }, [atStart, atEnd])
+
+  if (hideWhenSinglePage && pageCount <= 1 && !pageSizeOptions) return null
+
+  const from = totalItems === 0 ? 0 : (page - 1) * pageSize + 1
+  const to = Math.min(totalItems, page * pageSize)
+  const go = (p: number) => {
+    if (!busy && p >= 1 && p <= pageCount && p !== page) onPageChange(p)
+  }
+
+  return (
+    <nav aria-label={labels.navigation} aria-busy={busy || undefined} className={cx('ty-pagination', className)}>
+      <p className="ty-pagination__range" role="status">
+        {labels.range(from, to, totalItems)}
+      </p>
+      <div className="ty-pagination__controls">
+        <AriaButton ref={prevRef} className="ty-pagination__button" data-arrow="" isDisabled={busy || atStart} onPress={() => go(page - 1)}>
+          <ChevronLeft className="ty-icon ty-mirror-rtl" aria-hidden="true" focusable="false" />
+          <span className="ty-pagination__arrow-label">{labels.previous}</span>
+        </AriaButton>
+        {wide ? (
+          <ul className="ty-pagination__pages">
+            {pageSlots(page, pageCount, siblingCount).map((slot, i) =>
+              slot === 'gap' ? (
+                <li key={`gap-${i}`} className="ty-pagination__gap" aria-hidden="true">
+                  …
+                </li>
+              ) : (
+                <li key={slot}>
+                  <AriaButton
+                    className="ty-pagination__button"
+                    data-page=""
+                    aria-label={labels.page(slot)}
+                    aria-current={slot === page ? 'page' : undefined}
+                    data-current={slot === page || undefined}
+                    isDisabled={busy}
+                    onPress={() => go(slot)}
+                  >
+                    {numeral.format(slot)}
+                  </AriaButton>
+                </li>
+              ),
+            )}
+          </ul>
+        ) : (
+          <span className="ty-pagination__compact">{labels.pageOf(page, pageCount)}</span>
+        )}
+        <AriaButton ref={nextRef} className="ty-pagination__button" data-arrow="" isDisabled={busy || atEnd} onPress={() => go(page + 1)}>
+          <span className="ty-pagination__arrow-label">{labels.next}</span>
+          <ChevronRight className="ty-icon ty-mirror-rtl" aria-hidden="true" focusable="false" />
+        </AriaButton>
+      </div>
+      {pageSizeOptions ? (
+        <div className="ty-pagination__size">
+          <label htmlFor={selectId} className="ty-pagination__size-label">
+            {labels.pageSize}
+          </label>
+          <select
+            id={selectId}
+            className="ty-pagination__select"
+            value={pageSize}
+            disabled={busy}
+            onChange={(e) => onPageSizeChange?.(Number(e.target.value))}
+          >
+            {pageSizeOptions.map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+        </div>
+      ) : null}
+    </nav>
+  )
+}

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

@@ -0,0 +1,85 @@
+/* PasswordStrength (spec: wave-2/password-strength.md; design direction §2.3, §2.7). */
+@layer tympan.components {
+  .ty-password-strength {
+    --ty-pws-fill: var(--ty-danger);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-2);
+    inline-size: 100%;
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-password-strength[data-tone='pending'] {
+    --ty-pws-fill: var(--ty-warning);
+  }
+  .ty-password-strength[data-tone='success'] {
+    --ty-pws-fill: var(--ty-success);
+  }
+  .ty-password-strength__meter {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-3);
+  }
+  .ty-password-strength__bar {
+    display: grid;
+    flex: 1;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--ty-space-1);
+  }
+  .ty-password-strength__segment {
+    block-size: 4px;
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-line);
+    transition: background-color var(--ty-dur-quick) var(--ty-ease);
+  }
+  .ty-password-strength__segment[data-filled] {
+    background: var(--ty-pws-fill);
+  }
+  .ty-password-strength__word {
+    min-inline-size: 7ch;
+    color: var(--ty-ink);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-password-strength__rules {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .ty-password-strength__rule {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    color: var(--ty-ink-3);
+  }
+  .ty-password-strength__rule[data-met] {
+    color: var(--ty-ink-2);
+  }
+  .ty-password-strength__glyph {
+    flex: none;
+    inline-size: 14px;
+    block-size: 14px;
+  }
+  .ty-password-strength__rule[data-met] .ty-password-strength__glyph {
+    color: var(--ty-success);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-password-strength__segment {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-password-strength__segment {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      forced-color-adjust: none;
+    }
+    .ty-password-strength__segment[data-filled] {
+      background: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+import { render, screen, within } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { PasswordStrength } from './PasswordStrength'
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+const word = () => screen.getByRole('meter').getAttribute('aria-valuetext')
+
+describe('PasswordStrength', () => {
+  it('renders nothing for an empty password', () => {
+    const { container } = render(<PasswordStrength password="" />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('"abc" is Weak', () => {
+    render(<PasswordStrength password="abc" />)
+    expect(word()).toBe('Weak')
+  })
+
+  it('eight lowercase letters are Fair under the default policy', () => {
+    render(<PasswordStrength password="abcdefgh" />)
+    expect(word()).toBe('Fair')
+  })
+
+  it('all default rules except uppercase is Good', () => {
+    render(<PasswordStrength password="abcdefg1" />)
+    expect(word()).toBe('Good')
+  })
+
+  it('a long password meeting all rules is Strong', () => {
+    render(<PasswordStrength password="Correct-Horse-42-Staple" />)
+    expect(word()).toBe('Strong')
+  })
+
+  it('the length rule mentions the minimum', () => {
+    render(<PasswordStrength password="abc" showRequirements policy={{ minLength: 12 }} />)
+    expect(screen.getByText(/At least 12 characters/)).toBeInTheDocument()
+  })
+
+  it('marks the symbol rule met when the password has "!"', () => {
+    render(<PasswordStrength password="abc!" showRequirements policy={{ symbol: true }} />)
+    const item = screen.getByText(/A symbol/).closest('li')!
+    expect(item).toHaveAttribute('data-met')
+    expect(item).toHaveTextContent(/^met:/)
+  })
+
+  it('always shows four segments and exposes the level word as value text', () => {
+    const { container } = render(<PasswordStrength password="x" />)
+    expect(container.querySelectorAll('.ty-password-strength__segment')).toHaveLength(4)
+    expect(screen.getByRole('meter')).toHaveAttribute('aria-valuetext', 'Weak')
+    expect(within(screen.getByRole('meter')).getByText('Weak')).toBeVisible()
+  })
+
+  it('announces politely and is not focusable', () => {
+    render(<PasswordStrength password="abc" />)
+    expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite')
+    expect(screen.getByRole('meter')).not.toHaveAttribute('tabindex')
+  })
+
+  it('stops the fill transition under reduced motion and draws segments in forced colours', () => {
+    const css = cssOf('components/password-strength/PasswordStrength.css')
+    expect(mediaBlock(css, /\(prefers-reduced-motion:\s*reduce\)/)).toMatch(/transition:\s*none/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/CanvasText/)
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((scheme) => (
+          <ThemeScope key={scheme} scheme={scheme}>
+            <PasswordStrength password="abcdefg1" showRequirements />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('PasswordStrength in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<PasswordStrength password="كلمةسرطويلة1" showRequirements />)
+    expect(rtlDom.screen.getByRole('meter')).toBeInTheDocument()
+    await axeRtl(container)
+  })
+})

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

@@ -0,0 +1,109 @@
+import { CircleCheck, CircleDashed } from 'lucide-react'
+import { cx } from '../../internal/cx'
+import { LiveNote } from '../../internal/forms-a/LiveNote'
+import { useMessages } from '../../internal/provider'
+
+export interface PasswordPolicy {
+  minLength?: number
+  uppercase?: boolean
+  lowercase?: boolean
+  digit?: boolean
+  symbol?: boolean
+}
+
+type RuleKey = 'minLength' | 'uppercase' | 'lowercase' | 'digit' | 'symbol'
+
+export interface PasswordStrengthProps {
+  password: string
+  policy?: PasswordPolicy
+  showRequirements?: boolean
+  levelLabels?: [string, string, string, string]
+  /** Checklist text per rule; the length rule receives the minimum. */
+  ruleLabels?: Partial<{ minLength: (count: number) => string; uppercase: string; lowercase: string; digit: string; symbol: string }>
+  /** Id for the host's `aria-describedby` on the password field. */
+  id?: string
+  className?: string
+}
+
+export const defaultPasswordPolicy: Required<PasswordPolicy> = { minLength: 8, uppercase: true, lowercase: true, digit: true, symbol: false }
+
+const TESTS: Record<Exclude<RuleKey, 'minLength'>, RegExp> = {
+  uppercase: /\p{Lu}/u,
+  lowercase: /\p{Ll}/u,
+  digit: /\p{Nd}/u,
+  symbol: /[^\p{L}\p{Nd}\s]/u,
+}
+
+export interface PasswordRuleResult {
+  key: RuleKey
+  met: boolean
+}
+
+/** Pure evaluation: which rules hold, and the level 1 to 4 (0 for an empty password). */
+export function evaluatePassword(password: string, policy: PasswordPolicy = defaultPasswordPolicy) {
+  const p = { ...defaultPasswordPolicy, ...policy }
+  const rules: PasswordRuleResult[] = [{ key: 'minLength', met: password.length >= p.minLength }]
+  for (const key of Object.keys(TESTS) as Array<keyof typeof TESTS>) {
+    if (p[key]) rules.push({ key, met: TESTS[key].test(password) })
+  }
+  if (!password) return { rules, level: 0 as const }
+  const share = rules.filter((r) => r.met).length / rules.length
+  const long = password.length >= Math.max(12, p.minLength + 4)
+  // Mostly the share of rules met, plus a smaller bonus for length; only a
+  // password meeting every rule and reasonably long reaches the top level.
+  const points = share * 3 + (long ? 0.75 : 0)
+  const level = share === 1 && long ? 4 : Math.min(3, 1 + Math.floor(points))
+  return { rules, level: level as 1 | 2 | 3 | 4 }
+}
+
+const TONE = ['danger', 'danger', 'pending', 'success', 'success'] as const
+
+/** Advisory strength meter under a new-password field (spec: wave-2/password-strength.md). */
+export function PasswordStrength({ password, policy, showRequirements = false, levelLabels, ruleLabels, id, className }: PasswordStrengthProps) {
+  const copy = useMessages().passwordStrength
+  const { rules, level } = evaluatePassword(password, policy)
+  if (level === 0) return null
+  const words = levelLabels ?? copy.levels
+  const word = words[level - 1]!
+  const min = { ...defaultPasswordPolicy, ...policy }.minLength
+  const textOf = (key: RuleKey) => {
+    if (key === 'minLength') return (ruleLabels?.minLength ?? copy.rules.minLength)(min)
+    return ruleLabels?.[key] ?? copy.rules[key]
+  }
+
+  return (
+    <div id={id} className={cx('ty-password-strength', className)} data-level={level} data-tone={TONE[level]}>
+      <div
+        className="ty-password-strength__meter"
+        role="meter"
+        aria-label={copy.label}
+        aria-valuemin={0}
+        aria-valuemax={4}
+        aria-valuenow={level}
+        aria-valuetext={word}
+      >
+        <span className="ty-password-strength__bar" aria-hidden="true">
+          {[1, 2, 3, 4].map((n) => (
+            <span key={n} className="ty-password-strength__segment" data-filled={n <= level || undefined} />
+          ))}
+        </span>
+        <span className="ty-password-strength__word">{word}</span>
+      </div>
+      <LiveNote text={copy.announce(word)} delay={700} />
+      {showRequirements ? (
+        <ul className="ty-password-strength__rules">
+          {rules.map((r) => {
+            const Glyph = r.met ? CircleCheck : CircleDashed
+            return (
+              <li key={r.key} className="ty-password-strength__rule" data-met={r.met || undefined}>
+                <Glyph className="ty-password-strength__glyph" aria-hidden="true" focusable="false" />
+                <span className="ty-visually-hidden">{r.met ? copy.met : copy.notMet} </span>
+                {textOf(r.key)}
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </div>
+  )
+}

package/src/components/phase-bar/PhaseBar.css

@@ -0,0 +1,95 @@
+/* PhaseBar (spec: wave-4/phase-bar.md; design direction §2.3, §2.11 textures, §3.5). */
+@layer tympan.components {
+  .ty-phase-bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-3);
+    margin: 0;
+  }
+  .ty-phase-bar__track {
+    display: flex;
+    gap: 2px;
+    block-size: 12px;
+    overflow: hidden;
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-surface-sunken);
+  }
+  .ty-phase-bar__segment {
+    flex: 0 0 auto;
+    inline-size: var(--ty-phase-share);
+    min-inline-size: 2px;
+    background: var(--ty-phase-fill);
+  }
+  /* Tones: proof colours with the §2.11 textures (stripes, cross-hatch, dots). */
+  [data-tone='proved'] {
+    --ty-phase-fill: var(--ty-proof-proved);
+  }
+  [data-tone='pending'] {
+    --ty-phase-fill: repeating-linear-gradient(90deg, var(--ty-proof-pending) 0 3px, var(--ty-proof-pending-soft) 3px 5px);
+  }
+  [data-tone='refuted'] {
+    --ty-phase-fill: repeating-linear-gradient(45deg, var(--ty-proof-refuted) 0 2px, var(--ty-proof-refuted-soft) 2px 5px),
+      var(--ty-proof-refuted);
+  }
+  [data-tone='not_disclosed'] {
+    --ty-phase-fill: radial-gradient(circle, var(--ty-proof-not-disclosed) 1.2px, var(--ty-proof-not-disclosed-soft) 1.5px) 0 0 / 5px 5px;
+  }
+  [data-tone='none'] {
+    --ty-phase-fill: var(--ty-proof-none);
+  }
+  [data-tone='accent'] {
+    --ty-phase-fill: var(--ty-accent);
+  }
+  [data-tone='neutral'] {
+    --ty-phase-fill: var(--ty-ink-3);
+  }
+  .ty-phase-bar__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-2) var(--ty-space-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-phase-bar__key {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+  }
+  .ty-phase-bar__swatch {
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: 2px;
+    background: var(--ty-phase-fill);
+  }
+  .ty-phase-bar__word {
+    color: var(--ty-ink-2);
+  }
+  .ty-phase-bar__count {
+    color: var(--ty-ink);
+    font-family: var(--ty-font-mono);
+    font-variant-numeric: tabular-nums;
+  }
+  .ty-phase-bar__caption {
+    max-inline-size: 68ch;
+    color: var(--ty-ink-2);
+    font-family: var(--ty-font-serif);
+    font-size: var(--ty-font-size-body-lg);
+    font-style: italic;
+    line-height: var(--ty-font-line-height-body-lg);
+  }
+
+  @media (forced-colors: active) {
+    .ty-phase-bar__track {
+      border: 1px solid CanvasText;
+    }
+    .ty-phase-bar__segment,
+    .ty-phase-bar__swatch {
+      forced-color-adjust: none;
+      border: 1px solid CanvasText;
+      background: var(--ty-phase-fill), Canvas;
+    }
+  }
+}

package/src/components/phase-bar/PhaseBar.test.tsx

@@ -0,0 +1,67 @@
+import { I18nProvider } from 'react-aria-components'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { PhaseBar, shares, type PhaseSegment } from './PhaseBar'
+
+const segments: PhaseSegment[] = [
+  { id: 'p', label: 'proved', value: 512, tone: 'proved' },
+  { id: 'w', label: 'pending', value: 145, tone: 'pending' },
+  { id: 'r', label: 'refuted', value: 7, tone: 'refuted' },
+  { id: 'n', label: 'not disclosed', value: 64, tone: 'not_disclosed' },
+]
+
+describe('PhaseBar', () => {
+  it('names the image with every segment and count', () => {
+    render(<PhaseBar segments={segments} label="State of proof" locale="en" />)
+    expect(screen.getByRole('img', { name: 'State of proof: proved 512, pending 145, refuted 7, not disclosed 64' })).toBeInTheDocument()
+  })
+
+  it('computes shares by value', () => {
+    expect(shares([3, 1])).toEqual([75, 25])
+    const { container } = render(<PhaseBar segments={[{ id: 'a', label: 'a', value: 3, tone: 'accent' }, { id: 'b', label: 'b', value: 1, tone: 'neutral' }]} label="Split" />)
+    expect((container.querySelector('.ty-phase-bar__segment') as HTMLElement).style.getPropertyValue('--ty-phase-share')).toBe('75%')
+  })
+
+  it('renders an empty track with zero total and still lists zeros', () => {
+    const { container } = render(<PhaseBar segments={[{ id: 'a', label: 'proved', value: 0, tone: 'proved' }]} label="Empty" locale="en" />)
+    expect(container.querySelectorAll('.ty-phase-bar__segment')).toHaveLength(0)
+    expect(screen.getByText('0')).toBeInTheDocument()
+  })
+
+  it('keeps thin segments visible and uses textures, with borders when colours are forced', () => {
+    const css = cssOf('components/phase-bar/PhaseBar.css')
+    expect(css).toMatch(/min-inline-size:\s*2px/)
+    expect(css).toMatch(/\[data-tone='pending'\]\s*\{[^}]*repeating-linear-gradient/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/CanvasText/)
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((scheme) => (
+          <ThemeScope key={scheme} scheme={scheme}>
+            <PhaseBar segments={segments} label={`Proof ${scheme}`} caption="Two thirds of the claims already have an open source." />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('PhaseBar in right-to-left', () => {
+  it('names the bar with the locale list style and passes axe', async () => {
+    const { container } = render(
+      <I18nProvider locale="ar-EG">
+        <div dir="rtl" lang="ar">
+          <PhaseBar segments={segments.slice(0, 2)} label="الإثبات" />
+        </div>
+      </I18nProvider>,
+    )
+    expect(screen.getByRole('img').getAttribute('aria-label')).toMatch(/٥١٢/)
+    await expectNoAxeViolations(container)
+  })
+})

package/src/components/phase-bar/PhaseBar.tsx

@@ -0,0 +1,66 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { useLocale } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { useLocaleText } from '../../internal/speech'
+import { useMessages } from '../../internal/provider'
+import type { ProofState } from '../proof-badge/ProofBadge'
+
+export type PhaseTone = ProofState | 'none' | 'accent' | 'neutral'
+
+export interface PhaseSegment {
+  id: string
+  label: string
+  value: number
+  tone: PhaseTone
+}
+
+export interface PhaseBarProps {
+  segments: PhaseSegment[]
+  label: string
+  /** Reading sentence under the bar. */
+  caption?: ReactNode
+  locale?: string
+  className?: string
+}
+
+/** Share (0–100) of each value in the total; zero total gives zeros. */
+export function shares(values: number[]): number[] {
+  const total = values.reduce((sum, v) => sum + Math.max(0, v), 0)
+  return values.map((v) => (total > 0 ? (Math.max(0, v) / total) * 100 : 0))
+}
+
+/** One bar split by share, with a textual legend (spec: wave-4/phase-bar.md; §2.11 textures). */
+export function PhaseBar({ segments, label, caption, locale, className }: PhaseBarProps) {
+  const words = useMessages().phaseBar
+  const adapter = useLocale().locale
+  const fmt = new Intl.NumberFormat(locale ?? adapter)
+  const percent = shares(segments.map((s) => s.value))
+  const speech = useLocaleText()
+  const spoken = segments.length ? speech.join(...segments.map((s) => words.part(s.label, fmt.format(s.value)))) : words.empty
+  return (
+    <figure className={cx('ty-phase-bar', className)}>
+      <div className="ty-phase-bar__track" role="img" aria-label={words.named(label, spoken)}>
+        {segments.map((segment, i) =>
+          segment.value > 0 ? (
+            <span
+              key={segment.id}
+              className="ty-phase-bar__segment"
+              data-tone={segment.tone}
+              style={{ '--ty-phase-share': `${percent[i]}%` } as CSSProperties}
+            />
+          ) : null,
+        )}
+      </div>
+      <ul className="ty-phase-bar__legend">
+        {segments.map((segment) => (
+          <li key={segment.id} className="ty-phase-bar__key" data-tone={segment.tone}>
+            <span className="ty-phase-bar__swatch" aria-hidden="true" />
+            <span className="ty-phase-bar__word" dir="auto">{segment.label}</span>
+            <span className="ty-phase-bar__count">{fmt.format(segment.value)}</span>
+          </li>
+        ))}
+      </ul>
+      {caption ? <figcaption className="ty-phase-bar__caption" dir="auto">{caption}</figcaption> : null}
+    </figure>
+  )
+}