@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/components/chart/chartMath.ts

@@ -0,0 +1,73 @@
+// Pure geometry for Chart: value extraction, domain, ticks and label thinning.
+/** A datum value as a number, or null when it is missing or not numeric. */
+export function toNumber(raw: unknown): number | null {
+  if (typeof raw === 'number') return Number.isFinite(raw) ? raw : null
+  if (typeof raw === 'string' && raw.trim() !== '') {
+    const n = Number(raw)
+    return Number.isFinite(n) ? n : null
+  }
+  return null
+}
+
+/**
+ * Value span: an explicit pair wins when ordered; otherwise the readings'
+ * extent with a 5 % margin (a floor at zero when `floorAtZero` and every
+ * reading is non-negative); a flat extent gets a symmetric margin; no
+ * readings give [0, 1].
+ */
+export function spanOf(readings: readonly number[], explicit: readonly number[] | undefined, floorAtZero: boolean): [number, number] {
+  if (explicit?.length === 2 && explicit[0]! < explicit[1]!) return [explicit[0]!, explicit[1]!]
+  if (readings.length === 0) return [0, 1]
+  const low = Math.min(...readings)
+  const high = Math.max(...readings)
+  if (low === high) {
+    const room = Math.abs(low) * 0.1 || 1
+    return [low - room, high + room]
+  }
+  const room = (high - low) * 0.05
+  return [floorAtZero && low >= 0 ? 0 : low - room, high + room]
+}
+
+/** About `count` evenly spaced ticks on 1-2-5 steps covering the domain. */
+export function niceTicks([lo, hi]: [number, number], count = 5): number[] {
+  const span = hi - lo
+  if (!(span > 0)) return [lo]
+  const raw = span / Math.max(1, count - 1)
+  const magnitude = 10 ** Math.floor(Math.log10(raw))
+  const step = [1, 2, 2.5, 5, 10].map((f) => f * magnitude).find((s) => s >= raw) ?? raw
+  const first = Math.ceil(lo / step) * step
+  const ticks: number[] = []
+  for (let t = first; t <= hi + step * 1e-9; t += step) ticks.push(Number(t.toPrecision(12)))
+  return ticks
+}
+
+/** Maps [d0, d1] to [r0, r1]. */
+export function linear(domain: [number, number], range: [number, number]): (v: number) => number {
+  const [d0, d1] = domain
+  const [r0, r1] = range
+  const k = (r1 - r0) / (d1 - d0 || 1)
+  return (v) => r0 + (v - d0) * k
+}
+
+/** Indices of category labels to draw so neighbours never overlap. */
+export function visibleLabelIndices(count: number, plotWidth: number, minGap = 56): number[] {
+  if (count <= 0) return []
+  const every = Math.max(1, Math.ceil((count * minGap) / Math.max(plotWidth, 1)))
+  const keep: number[] = []
+  for (let i = 0; i < count; i += every) keep.push(i)
+  return keep
+}
+
+/** Runs of consecutive defined points; a missing value breaks the line. */
+export function segments<T>(points: Array<T | null>): T[][] {
+  const runs: T[][] = []
+  let current: T[] = []
+  for (const p of points) {
+    if (p === null) {
+      if (current.length) runs.push(current)
+      current = []
+    } else current.push(p)
+  }
+  if (current.length) runs.push(current)
+  return runs
+}

package/src/components/chart/plot.ts

@@ -0,0 +1,53 @@
+// Crosses from the input description to the drawing model (see types.ts).
+import { spanOf, toNumber } from './chartMath'
+import type { ChartFigure, ChartForm, ChartLayer, ChartRecord, Glyph, Plot, Stroke, Track } from './types'
+
+const GLYPH_CYCLE: readonly Glyph[] = ['dot', 'box', 'wedge', 'rhomb']
+const DASH_CYCLE: readonly string[] = ['6 4', '2 3', '10 3 2 3', '4 4']
+const PAINT = /^(?:--ty-)?(chart|categorical)-([1-8])$/
+
+/** Drawing mode per kind: bars and histograms stand on the floor, histogram bins touch. */
+const STROKES: Record<ChartForm, Stroke> = {
+  trend: { mode: 'path', fill: false },
+  band: { mode: 'path', fill: true },
+  columns: { mode: 'block', flush: false },
+  bins: { mode: 'block', flush: true },
+}
+
+/** Resolved token colour; unknown tokens fall back to the chart cycle. */
+function hueFor(layer: ChartLayer, position: number): string {
+  const hit = layer.tone ? PAINT.exec(layer.tone) : null
+  return hit ? `var(--ty-${hit[1]}-${hit[2]})` : `var(--ty-chart-${(position % 8) + 1})`
+}
+
+/** Category text of a record. */
+export function stopLabel(record: ChartRecord, field: string): string {
+  const raw = record[field]
+  return raw == null ? '' : String(raw)
+}
+
+export function toPlot(figure: ChartFigure): Plot {
+  const stops = figure.records.map((record) => stopLabel(record, figure.across.field))
+  const tracks: Track[] = figure.layers.map((layer, position) => ({
+    label: layer.field,
+    hue: hueFor(layer, position),
+    dash: layer.projected ? DASH_CYCLE[position % DASH_CYCLE.length] : undefined,
+    glyph: GLYPH_CYCLE[position % GLYPH_CYCLE.length]!,
+    readings: figure.records.map((record) => toNumber(record[layer.field])),
+  }))
+  const known = tracks.flatMap((t) => t.readings.filter((r): r is number => r !== null))
+  const pins = (figure.notes ?? []).flatMap((note) => {
+    const slot = stops.indexOf(String(note.at))
+    return slot < 0 ? [] : [{ slot, text: note.text }]
+  })
+  return {
+    kind: figure.form,
+    stroke: STROKES[figure.form],
+    stops,
+    tracks,
+    pins,
+    span: spanOf(known, figure.up?.bounds, figure.form !== 'trend'),
+    unit: figure.up?.unit,
+    stopsHeader: figure.across.caption,
+  }
+}

package/src/components/chart/types.ts

@@ -0,0 +1,72 @@
+// Two vocabularies live here (spec: wave-2/chart.md; spec names are mapped in
+// its "Renamed in implementation" section):
+//   figure        what hosts and agents send (ChartFigure);
+//   drawing model what the component works on (Plot), built by toPlot().
+// Shapes are composed from ambient descriptor tables and two helpers, so the
+// allowed values and the required/optional split are each written once.
+
+/** `R` required, `O` optional. */
+type Shape<R, O = unknown> = R & { [K in keyof O]?: O[K] }
+/** Low and high end of a numeric range. */
+type Ends = [low: number, high: number]
+
+declare const figureForms: readonly ['trend', 'band', 'columns', 'bins']
+declare const figureFaces: readonly ['drawing', 'table']
+declare const markerOutlines: readonly ['dot', 'box', 'wedge', 'rhomb']
+
+/* ---------------------------------------------------------------- input -- */
+
+/** `trend` [line], `band` [area], `columns` [bar], `bins` [histogram]. */
+export type ChartForm = (typeof figureForms)[number]
+
+/** Which face of the figure is shown. */
+export type ChartFace = (typeof figureFaces)[number]
+
+/** One record: the category field plus one value per layer field. */
+export type ChartRecord = Record<string, string | number | null | undefined>
+
+/**
+ * One measured layer: `field` is its label and the record key read; `tone` a
+ * paint token (`chart-3`, `categorical-5`); `projected` draws it dashed.
+ */
+export type ChartLayer = Shape<{ field: string }, { tone: string; projected: boolean }>
+
+/** A labelled rule at one category. */
+export type ChartNote = Shape<{ at: string | number; text: string }>
+
+/** The category dimension (record field and caption). */
+type Across = Shape<{ field: string }, { caption: string }>
+/** The value dimension (caption, unit, fixed bounds). */
+type Up = Shape<unknown, { caption: string; unit: string; bounds: Ends }>
+
+/**
+ * The declarative figure a Chart draws: `heading` names it, `aside` is the
+ * secondary line, `reading` the finding sentence (design direction §5).
+ */
+export type ChartFigure = Shape<
+  { form: ChartForm; heading: string; across: Across; layers: ChartLayer[]; records: ChartRecord[] },
+  { aside: string; reading: string; up: Up; notes: ChartNote[] }
+>
+
+/* -------------------------------------------------------- drawing model -- */
+
+/** A finite number, or `null` for a gap. */
+export type Reading = number | null
+
+/** Marker outline, cycled per track so colour never carries identity alone. */
+export type Glyph = (typeof markerOutlines)[number]
+
+/** How tracks are drawn, decided once from the form. */
+export type Stroke = Shape<{ mode: 'path'; fill: boolean }> | Shape<{ mode: 'block'; flush: boolean }>
+
+/** One drawn series: declared label, token colour, optional dash, readings. */
+export type Track = Shape<{ label: string; hue: string; glyph: Glyph; readings: Reading[] }, { dash: string }>
+
+/** A reference line at an existing category slot. */
+export type Pin = Shape<{ slot: number; text: string }>
+
+/** The resolved drawing: categories (`stops`), tracks, pins and value span. */
+export type Plot = Shape<
+  { kind: ChartForm; stroke: Stroke; stops: string[]; tracks: Track[]; pins: Pin[]; span: Ends },
+  { unit: string; stopsHeader: string }
+>

package/src/components/checkbox/Checkbox.css

@@ -0,0 +1,168 @@
+/* Checkbox and CheckboxGroup (spec: wave-1/checkbox.md; design direction §2.3, §2.6, §2.7). */
+@layer tympan.components {
+  .ty-checkbox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+  }
+
+  .ty-checkbox__row {
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ty-space-3);
+    min-block-size: var(--ty-control-target);
+    padding-block: calc((var(--ty-control-target) - var(--ty-font-line-height-body)) / 2);
+    color: var(--ty-ink-2);
+    cursor: pointer;
+    outline: none;
+  }
+
+  .ty-checkbox[data-appearance='tile'] .ty-checkbox__row {
+    padding: var(--ty-space-3);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-surface-solid);
+    transition: background-color var(--ty-dur-instant) var(--ty-ease), border-color var(--ty-dur-instant) var(--ty-ease);
+  }
+
+  .ty-checkbox[data-appearance='tile'] .ty-checkbox__row[data-hovered] {
+    border-color: var(--ty-line-strong);
+  }
+
+  /* Checked tile: accent-soft surface plus the visible mark (never colour alone). */
+  .ty-checkbox[data-appearance='tile'] .ty-checkbox__row[data-selected],
+  .ty-checkbox[data-appearance='tile'] .ty-checkbox__row[data-indeterminate] {
+    border-color: var(--ty-accent);
+    background: var(--ty-accent-soft);
+  }
+
+  .ty-checkbox__row[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+    border-radius: var(--ty-radius-control);
+  }
+
+  .ty-checkbox__row[data-disabled] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .ty-checkbox__indicator {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 20px;
+    block-size: 20px;
+    margin-block-start: 1px;
+    border: 1.5px solid var(--ty-input);
+    border-radius: calc(var(--ty-radius-control) / 2);
+    background: var(--ty-surface-solid);
+    color: var(--ty-accent-ink);
+    transition: background-color var(--ty-dur-instant) var(--ty-ease), border-color var(--ty-dur-instant) var(--ty-ease);
+  }
+
+  .ty-checkbox__indicator .ty-icon {
+    inline-size: 14px;
+    block-size: 14px;
+    stroke-width: 3;
+  }
+
+  .ty-checkbox__row[data-selected] .ty-checkbox__indicator,
+  .ty-checkbox__row[data-indeterminate] .ty-checkbox__indicator {
+    border-color: var(--ty-accent);
+    background: var(--ty-accent);
+  }
+
+  .ty-checkbox__row[data-invalid] .ty-checkbox__indicator {
+    border-color: var(--ty-danger);
+  }
+
+  .ty-checkbox__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    min-inline-size: 0;
+  }
+
+  .ty-checkbox__label {
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+  }
+
+  .ty-checkbox__description {
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+
+  .ty-checkbox__error {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ty-space-1);
+    margin: 0;
+    color: var(--ty-danger);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+
+  .ty-checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-2);
+  }
+
+  .ty-checkbox-group__label {
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-label);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-label);
+  }
+
+  .ty-checkbox-group__description {
+    margin: 0;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+
+  .ty-checkbox-group__items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-2);
+  }
+
+  .ty-checkbox-group[data-orientation='horizontal'] .ty-checkbox-group__items {
+    flex-flow: row wrap;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-checkbox__indicator,
+    .ty-checkbox[data-appearance='tile'] .ty-checkbox__row {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-checkbox__indicator {
+      border-color: CanvasText;
+      color: CanvasText;
+      forced-color-adjust: none;
+    }
+    .ty-checkbox__row[data-selected] .ty-checkbox__indicator,
+    .ty-checkbox__row[data-indeterminate] .ty-checkbox__indicator {
+      border-color: Highlight;
+      background: Highlight;
+      color: HighlightText;
+    }
+    .ty-checkbox[data-appearance='tile'] .ty-checkbox__row {
+      border: 1px solid CanvasText;
+    }
+    .ty-checkbox__row[data-focus-visible] {
+      outline-color: Highlight;
+    }
+  }
+}

package/src/components/checkbox/Checkbox.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { Checkbox, CheckboxGroup } from './Checkbox'
+
+import * as rtlDom from '@testing-library/react'
+import rtlUser from '@testing-library/user-event'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+describe('Checkbox', () => {
+  it('toggles when the row text is clicked and reports the next value', async () => {
+    const onChange = vi.fn()
+    render(<Checkbox label="I agree" description="Terms of use" onChange={onChange} />)
+    await userEvent.click(screen.getByText('I agree'))
+    expect(onChange).toHaveBeenCalledWith(true)
+    expect(screen.getByRole('checkbox', { name: 'I agree' })).toBeChecked()
+    expect(screen.getByRole('checkbox')).toHaveAccessibleDescription('Terms of use')
+  })
+
+  it('toggles with Space when focused', async () => {
+    render(<Checkbox label="Notify" />)
+    await userEvent.tab()
+    await userEvent.keyboard(' ')
+    expect(screen.getByRole('checkbox', { name: 'Notify' })).toBeChecked()
+  })
+
+  it('uses accessibleLabel as the name when there is no label', () => {
+    render(<Checkbox accessibleLabel="Select Centro" />)
+    expect(screen.getByRole('checkbox', { name: 'Select Centro' })).toBeInTheDocument()
+  })
+
+  it('exposes the mixed state', () => {
+    render(<Checkbox label="All rows" isIndeterminate />)
+    const box = screen.getByRole('checkbox', { name: 'All rows' }) as HTMLInputElement
+    expect(box.indeterminate).toBe(true)
+    expect(box).toBePartiallyChecked()
+  })
+
+  it('does nothing when disabled', async () => {
+    const onChange = vi.fn()
+    render(<Checkbox label="Locked" disabled onChange={onChange} />)
+    await userEvent.click(screen.getByText('Locked'))
+    expect(onChange).not.toHaveBeenCalled()
+    expect(screen.getByRole('checkbox')).not.toBeChecked()
+  })
+
+  it('adds a value to a group', async () => {
+    const onChange = vi.fn()
+    render(
+      <CheckboxGroup label="Fruits" defaultValue={['a']} onChange={onChange}>
+        <Checkbox value="a" label="Apple" />
+        <Checkbox value="b" label="Banana" />
+      </CheckboxGroup>,
+    )
+    expect(screen.getByRole('group', { name: 'Fruits' })).toBeInTheDocument()
+    await userEvent.click(screen.getByText('Banana'))
+    expect(onChange).toHaveBeenCalledWith(['a', 'b'])
+  })
+
+  it('marks invalid and describes the error', () => {
+    render(<Checkbox label="Consent" errorMessage="Consent is required" />)
+    const box = screen.getByRole('checkbox', { name: 'Consent' })
+    expect(box).toHaveAttribute('aria-invalid', 'true')
+    expect(box).toHaveAccessibleDescription('Consent is required')
+  })
+
+  it('keeps a 44 px row and declares motion and forced-colours rules', () => {
+    const css = cssOf('components/checkbox/Checkbox.css')
+    expect(css).toMatch(/\.ty-checkbox__row\s*\{[^}]*min-block-size:\s*var\(--ty-control-target\)/)
+    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 when checked, unchecked and invalid', async () => {
+    const { container } = render(
+      <>
+        <Checkbox label="Unchecked" />
+        <Checkbox label="Checked" defaultSelected />
+        <Checkbox label="Invalid" errorMessage="Required" appearance="bare" />
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('Checkbox in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<Checkbox label="أؤكد أنني فتحت المصدر" />)
+    const box = rtlDom.screen.getByRole('checkbox', { name: 'أؤكد أنني فتحت المصدر' })
+    await rtlUser.click(box)
+    expect(box).toBeChecked()
+    await axeRtl(container)
+  })
+})

package/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,168 @@
+import { Check, CircleAlert, Minus } from 'lucide-react'
+import { forwardRef, useId, type ReactNode } from 'react'
+import { Checkbox as AriaCheckbox, CheckboxGroup as AriaCheckboxGroup, Label } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { devWarning } from '../../internal/dev'
+import { useAppearedAfterMount } from '../field/Field'
+
+export interface CheckboxProps {
+  isSelected?: boolean
+  defaultSelected?: boolean
+  /** Mixed state for "select all" rows. */
+  isIndeterminate?: boolean
+  onChange?: (isSelected: boolean) => void
+  label?: string
+  /** Name when the visible text lives elsewhere. */
+  accessibleLabel?: string
+  description?: ReactNode
+  /** Tile draws a surface around the row; bare is indicator plus text. */
+  appearance?: 'tile' | 'bare'
+  disabled?: boolean
+  errorMessage?: string
+  name?: string
+  /** Form value; also the item key inside a CheckboxGroup. */
+  value?: string
+  required?: boolean
+  id?: string
+  className?: string
+}
+
+/** Whole-row checkbox with label and description (spec: wave-1/checkbox.md). */
+export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(function Checkbox(props, ref) {
+  const {
+    isSelected,
+    defaultSelected,
+    isIndeterminate,
+    onChange,
+    label,
+    accessibleLabel,
+    description,
+    appearance = 'tile',
+    disabled = false,
+    errorMessage,
+    name,
+    value,
+    required,
+    id,
+    className,
+  } = props
+  const base = useId()
+  devWarning(!label && !accessibleLabel, 'Checkbox: provide `label` or `accessibleLabel`.')
+  const labelId = label ? `${base}-label` : undefined
+  const descId = description != null ? `${base}-desc` : undefined
+  const errorId = errorMessage ? `${base}-error` : undefined
+  const describedBy = [descId, errorId].filter(Boolean).join(' ') || undefined
+  const appeared = useAppearedAfterMount(!!errorMessage)
+  return (
+    <div className={cx('ty-checkbox', className)} data-appearance={appearance}>
+      <AriaCheckbox
+        ref={ref}
+        id={id}
+        isSelected={isSelected}
+        defaultSelected={defaultSelected}
+        isIndeterminate={isIndeterminate}
+        onChange={onChange}
+        isDisabled={disabled}
+        isInvalid={!!errorMessage}
+        isRequired={required}
+        name={name}
+        value={value}
+        aria-label={label ? undefined : accessibleLabel}
+        aria-labelledby={labelId}
+        aria-describedby={describedBy}
+        className="ty-checkbox__row"
+      >
+        {({ isSelected: checked, isIndeterminate: mixed }) => (
+          <>
+            <span className="ty-checkbox__indicator" aria-hidden="true">
+              {mixed ? <Minus className="ty-icon" focusable="false" /> : checked ? <Check className="ty-icon" focusable="false" /> : null}
+            </span>
+            {label || description != null ? (
+              <span className="ty-checkbox__text">
+                {label ? (
+                  <span id={labelId} className="ty-checkbox__label">
+                    {label}
+                  </span>
+                ) : null}
+                {description != null ? (
+                  <span id={descId} className="ty-checkbox__description">
+                    {description}
+                  </span>
+                ) : null}
+              </span>
+            ) : null}
+          </>
+        )}
+      </AriaCheckbox>
+      {errorMessage ? (
+        <p id={errorId} className="ty-checkbox__error" aria-live={appeared ? 'polite' : undefined}>
+          <CircleAlert className="ty-icon" aria-hidden="true" focusable="false" />
+          <span>{errorMessage}</span>
+        </p>
+      ) : null}
+    </div>
+  )
+})
+
+export interface CheckboxGroupProps {
+  label: string
+  description?: ReactNode
+  value?: string[]
+  defaultValue?: string[]
+  onChange?: (values: string[]) => void
+  orientation?: 'vertical' | 'horizontal'
+  errorMessage?: string
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  children: ReactNode
+  className?: string
+}
+
+/** A labelled set of checkbox rows. */
+export function CheckboxGroup({
+  label,
+  description,
+  value,
+  defaultValue,
+  onChange,
+  orientation = 'vertical',
+  errorMessage,
+  disabled,
+  required,
+  name,
+  children,
+  className,
+}: CheckboxGroupProps) {
+  const base = useId()
+  const descId = description != null ? `${base}-desc` : undefined
+  const errorId = errorMessage ? `${base}-error` : undefined
+  return (
+    <AriaCheckboxGroup
+      className={cx('ty-checkbox-group', className)}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={onChange}
+      isDisabled={disabled}
+      isRequired={required}
+      isInvalid={!!errorMessage}
+      name={name}
+      aria-describedby={[descId, errorId].filter(Boolean).join(' ') || undefined}
+      data-orientation={orientation}
+    >
+      <Label className="ty-checkbox-group__label">{label}</Label>
+      {description != null ? (
+        <p id={descId} className="ty-checkbox-group__description">
+          {description}
+        </p>
+      ) : null}
+      <div className="ty-checkbox-group__items">{children}</div>
+      {errorMessage ? (
+        <p id={errorId} className="ty-checkbox__error">
+          <CircleAlert className="ty-icon" aria-hidden="true" focusable="false" />
+          <span>{errorMessage}</span>
+        </p>
+      ) : null}
+    </AriaCheckboxGroup>
+  )
+}