@w5-ui/react 0.1.0

package/src/components/PunchCard.tsx

@@ -0,0 +1,93 @@
+export interface PunchCardProps {
+  data: number[][]
+  rowLabels?: string[]
+  colLabels?: string[]
+  color?: string
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 16, r: 8, b: 28, l: 28 }
+const DEFAULT_ROWS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+export function PunchCard({
+  data,
+  rowLabels,
+  colLabels,
+  color = '#006FFF',
+  height = 180,
+  ariaLabel = 'Punch card chart',
+}: PunchCardProps) {
+  if (!data.length || !data[0]?.length) return null
+
+  const rows = data.length
+  const cols = data[0].length
+  const chartW = VW - PAD.l - PAD.r
+  const chartH = height - PAD.t - PAD.b
+  const cellW = chartW / cols
+  const cellH = chartH / rows
+  const maxR = (Math.min(cellW, cellH) / 2) * 0.85
+  const maxVal = Math.max(...data.flat(), 1)
+
+  const rLabels = rowLabels ?? DEFAULT_ROWS.slice(0, rows)
+  const cLabels =
+    colLabels ??
+    Array.from({ length: cols }, (_, i) => (i % 6 === 0 ? String(i).padStart(2, '0') : ''))
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${height}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {rLabels.map((lbl, ri) => (
+          <text
+            key={ri}
+            x={PAD.l - 4}
+            y={PAD.t + (ri + 0.5) * cellH + 3}
+            fontSize={8}
+            fill="#6E7079"
+            textAnchor="end"
+            fontFamily="inherit"
+          >
+            {lbl}
+          </text>
+        ))}
+        {cLabels.map((lbl, ci) =>
+          lbl ? (
+            <text
+              key={ci}
+              x={PAD.l + (ci + 0.5) * cellW}
+              y={height - 6}
+              fontSize={7}
+              fill="#6E7079"
+              textAnchor="middle"
+              fontFamily="inherit"
+            >
+              {lbl}
+            </text>
+          ) : null,
+        )}
+        {data.flatMap((row, ri) =>
+          row.map((val, ci) => {
+            const r = Math.sqrt(val / maxVal) * maxR
+            if (r < 0.4) return null
+            return (
+              <circle
+                key={`${ri}-${ci}`}
+                cx={PAD.l + (ci + 0.5) * cellW}
+                cy={PAD.t + (ri + 0.5) * cellH}
+                r={r}
+                fill={color}
+                fillOpacity={0.72}
+              />
+            )
+          }),
+        )}
+      </svg>
+    </div>
+  )
+}

package/src/components/QuadrantChart.tsx

@@ -0,0 +1,256 @@
+export interface QuadrantPoint {
+  x: number
+  y: number
+  label?: string
+  color?: string
+}
+
+export interface QuadrantChartProps {
+  points: QuadrantPoint[]
+  xThreshold: number
+  yThreshold: number
+  xRange?: [number, number]
+  yRange?: [number, number]
+  /** Labels: [top-left, top-right, bottom-left, bottom-right] */
+  quadrantLabels?: [string, string, string, string]
+  /** Fill colors for each quadrant zone */
+  quadrantColors?: [string, string, string, string]
+  xLabel?: string
+  yLabel?: string
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 360
+const PAD = { t: 8, r: 8, b: 28, l: 36 }
+
+const DEFAULT_LABELS: [string, string, string, string] = ['', '', '', '']
+const DEFAULT_COLORS: [string, string, string, string] = [
+  'rgba(0,200,117,0.06)',
+  'rgba(245,166,35,0.07)',
+  'rgba(0,111,255,0.06)',
+  'rgba(255,123,123,0.09)',
+]
+
+export function QuadrantChart({
+  points,
+  xThreshold,
+  yThreshold,
+  xRange,
+  yRange,
+  quadrantLabels = DEFAULT_LABELS,
+  quadrantColors = DEFAULT_COLORS,
+  xLabel,
+  yLabel,
+  height = 200,
+  ariaLabel = 'Quadrant chart',
+}: QuadrantChartProps) {
+  if (!points.length) return null
+
+  const xs = points.map((p) => p.x)
+  const ys = points.map((p) => p.y)
+  const x0 = xRange?.[0] ?? Math.min(...xs, xThreshold - 1)
+  const x1 = xRange?.[1] ?? Math.max(...xs, xThreshold + 1)
+  const y0 = yRange?.[0] ?? Math.min(...ys, yThreshold - 1)
+  const y1 = yRange?.[1] ?? Math.max(...ys, yThreshold + 1)
+  const xSpan = x1 - x0 || 1
+  const ySpan = y1 - y0 || 1
+  const cw = VW - PAD.l - PAD.r
+  const ch = height - PAD.t - PAD.b
+
+  const toX = (x: number) => PAD.l + ((x - x0) / xSpan) * cw
+  const toY = (y: number) => PAD.t + ch - ((y - y0) / ySpan) * ch
+
+  const tx = toX(xThreshold)
+  const ty = toY(yThreshold)
+
+  const xTicks = [x0, xThreshold, x1]
+  const yTicks = [y0, yThreshold, y1]
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${height}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {/* Quadrant zones */}
+        <rect x={PAD.l} y={PAD.t} width={tx - PAD.l} height={ty - PAD.t} fill={quadrantColors[0]} />
+        <rect
+          x={tx}
+          y={PAD.t}
+          width={PAD.l + cw - tx}
+          height={ty - PAD.t}
+          fill={quadrantColors[1]}
+        />
+        <rect
+          x={PAD.l}
+          y={ty}
+          width={tx - PAD.l}
+          height={PAD.t + ch - ty}
+          fill={quadrantColors[2]}
+        />
+        <rect
+          x={tx}
+          y={ty}
+          width={PAD.l + cw - tx}
+          height={PAD.t + ch - ty}
+          fill={quadrantColors[3]}
+        />
+
+        {/* Grid border */}
+        <rect
+          x={PAD.l}
+          y={PAD.t}
+          width={cw}
+          height={ch}
+          fill="none"
+          stroke="rgba(255,255,255,0.08)"
+          strokeWidth={1}
+        />
+
+        {/* Threshold lines */}
+        <line
+          x1={tx}
+          y1={PAD.t}
+          x2={tx}
+          y2={PAD.t + ch}
+          stroke="rgba(255,255,255,0.22)"
+          strokeWidth={1}
+          strokeDasharray="4 3"
+        />
+        <line
+          x1={PAD.l}
+          y1={ty}
+          x2={PAD.l + cw}
+          y2={ty}
+          stroke="rgba(255,255,255,0.22)"
+          strokeWidth={1}
+          strokeDasharray="4 3"
+        />
+
+        {/* Quadrant labels */}
+        {quadrantLabels[0] && (
+          <text
+            x={PAD.l + 5}
+            y={PAD.t + 11}
+            fill="rgba(255,255,255,0.22)"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {quadrantLabels[0]}
+          </text>
+        )}
+        {quadrantLabels[1] && (
+          <text
+            x={PAD.l + cw - 5}
+            y={PAD.t + 11}
+            fill="rgba(255,255,255,0.22)"
+            fontSize={9}
+            fontFamily="inherit"
+            textAnchor="end"
+          >
+            {quadrantLabels[1]}
+          </text>
+        )}
+        {quadrantLabels[2] && (
+          <text
+            x={PAD.l + 5}
+            y={PAD.t + ch - 5}
+            fill="rgba(255,255,255,0.22)"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {quadrantLabels[2]}
+          </text>
+        )}
+        {quadrantLabels[3] && (
+          <text
+            x={PAD.l + cw - 5}
+            y={PAD.t + ch - 5}
+            fill="rgba(255,255,255,0.22)"
+            fontSize={9}
+            fontFamily="inherit"
+            textAnchor="end"
+          >
+            {quadrantLabels[3]}
+          </text>
+        )}
+
+        {/* Y-axis ticks */}
+        {yTicks.map((v, i) => (
+          <text
+            key={i}
+            x={PAD.l - 4}
+            y={toY(v) + 3}
+            fill="#6E7079"
+            fontSize={8}
+            textAnchor="end"
+            fontFamily="inherit"
+          >
+            {Math.round(v)}
+          </text>
+        ))}
+
+        {/* X-axis ticks */}
+        {xTicks.map((v, i) => (
+          <text
+            key={i}
+            x={toX(v)}
+            y={height - 4}
+            fill="#6E7079"
+            fontSize={8}
+            textAnchor="middle"
+            fontFamily="inherit"
+          >
+            {Math.round(v)}
+          </text>
+        ))}
+
+        {/* Axis labels */}
+        {xLabel && (
+          <text
+            x={PAD.l + cw / 2}
+            y={height - 2}
+            fill="#6E7079"
+            fontSize={8}
+            textAnchor="middle"
+            fontFamily="inherit"
+          >
+            {xLabel}
+          </text>
+        )}
+        {yLabel && (
+          <text
+            x={8}
+            y={PAD.t + ch / 2}
+            fill="#6E7079"
+            fontSize={8}
+            textAnchor="middle"
+            fontFamily="inherit"
+            transform={`rotate(-90, 8, ${PAD.t + ch / 2})`}
+          >
+            {yLabel}
+          </text>
+        )}
+
+        {/* Points */}
+        {points.map((p, i) => {
+          const cx = toX(p.x)
+          const cy = toY(p.y)
+          return (
+            <g key={i}>
+              <circle cx={cx} cy={cy} r={5} fill={p.color ?? '#006FFF'} fillOpacity={0.85} />
+              {p.label && (
+                <text x={cx + 7} y={cy + 3} fill="#CDD0DB" fontSize={8} fontFamily="inherit">
+                  {p.label}
+                </text>
+              )}
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/RadarChart.tsx

@@ -0,0 +1,119 @@
+import { useMemo } from 'react'
+
+export interface RadarSeries {
+  label: string
+  color: string
+  values: number[] // each normalised 0–1
+}
+
+export interface RadarChartProps {
+  series: RadarSeries[]
+  axes: string[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = 36
+
+function pt(cx: number, cy: number, r: number, angle: number) {
+  return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)] as const
+}
+
+function pts(coords: readonly (readonly [number, number])[]) {
+  return coords.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' ')
+}
+
+export function RadarChart({
+  series,
+  axes,
+  height = 200,
+  ariaLabel = 'Radar chart',
+}: RadarChartProps) {
+  const { rings, axisLines, axisLabels, polygons } = useMemo(() => {
+    const n = axes.length
+    if (n < 3) return { rings: [], axisLines: [], axisLabels: [], polygons: [] }
+
+    const cx = VW / 2
+    const cy = height / 2
+    const R = Math.min(cx, cy) - PAD
+    const angles = axes.map((_, i) => (2 * Math.PI * i) / n - Math.PI / 2)
+
+    const rings = [0.25, 0.5, 0.75, 1.0].map((f) => pts(angles.map((a) => pt(cx, cy, R * f, a))))
+
+    const axisLines = angles.map((a) => {
+      const [x, y] = pt(cx, cy, R, a)
+      return { x: x.toFixed(1), y: y.toFixed(1) }
+    })
+
+    const axisLabels = axes.map((label, i) => {
+      const [x, y] = pt(cx, cy, R + 16, angles[i])
+      const cos = Math.cos(angles[i])
+      const anchor: 'middle' | 'end' | 'start' =
+        Math.abs(cos) < 0.3 ? 'middle' : cos < 0 ? 'end' : 'start'
+      return { x: x.toFixed(1), y: y.toFixed(1), label, anchor }
+    })
+
+    const polygons = series.map((s) => ({
+      pts: pts(angles.map((a, i) => pt(cx, cy, R * Math.max(0, Math.min(1, s.values[i] ?? 0)), a))),
+      color: s.color,
+      label: s.label,
+    }))
+
+    return { rings, axisLines, axisLabels, polygons }
+  }, [series, axes, height])
+
+  const cx = VW / 2
+  const cy = height / 2
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${height}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {rings.map((p, i) => (
+          <polygon key={i} points={p} fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
+        ))}
+        {axisLines.map((end, i) => (
+          <line
+            key={i}
+            x1={cx}
+            y1={cy}
+            x2={end.x}
+            y2={end.y}
+            stroke="rgba(255,255,255,0.08)"
+            strokeWidth={1}
+          />
+        ))}
+        {polygons.map((p) => (
+          <polygon
+            key={p.label}
+            points={p.pts}
+            fill={p.color}
+            fillOpacity={0.12}
+            stroke={p.color}
+            strokeWidth={1.5}
+            strokeLinejoin="round"
+          />
+        ))}
+        {axisLabels.map((l) => (
+          <text
+            key={l.label}
+            x={l.x}
+            y={l.y}
+            textAnchor={l.anchor}
+            fill="#6E7079"
+            fontSize={9}
+            fontFamily="inherit"
+            dominantBaseline="middle"
+          >
+            {l.label}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/RadialBarChart.tsx

@@ -0,0 +1,103 @@
+export interface RadialBarItem {
+  label: string
+  value: number
+  max: number
+  color?: string
+  unit?: string
+}
+
+export interface RadialBarChartProps {
+  items: RadialBarItem[]
+  ariaLabel?: string
+}
+
+const W = 280
+const H = 160
+const CX = 80
+const CY = 80
+const RING_W = 9
+const RING_GAP = 5
+const MIN_R = 20
+const LABEL_X = 170
+const ITEM_H = 22
+
+function arcPath(r: number, frac: number): string {
+  if (frac <= 0) return ''
+  const start = -Math.PI / 2
+  const clamped = Math.min(frac, 1)
+  const x1 = (CX + r * Math.cos(start)).toFixed(2)
+  const y1 = (CY + r * Math.sin(start)).toFixed(2)
+  if (clamped >= 1) {
+    const xm = (CX + r * Math.cos(start + Math.PI)).toFixed(2)
+    const ym = (CY + r * Math.sin(start + Math.PI)).toFixed(2)
+    return `M${x1},${y1} A${r},${r} 0 1 1 ${xm},${ym} A${r},${r} 0 1 1 ${x1},${y1}`
+  }
+  const sweep = clamped * 2 * Math.PI
+  const end = start + sweep
+  const x2 = (CX + r * Math.cos(end)).toFixed(2)
+  const y2 = (CY + r * Math.sin(end)).toFixed(2)
+  return `M${x1},${y1} A${r},${r} 0 ${sweep > Math.PI ? 1 : 0} 1 ${x2},${y2}`
+}
+
+export function RadialBarChart({ items, ariaLabel = 'Radial bar chart' }: RadialBarChartProps) {
+  if (!items.length) return null
+  const n = items.length
+  const yStart = CY - ((n - 1) * ITEM_H) / 2
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${W} ${H}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {items.map((item, i) => {
+          const r = MIN_R + (n - 1 - i) * (RING_W + RING_GAP)
+          const frac = Math.min(item.value / (item.max || 1), 1)
+          const color = item.color ?? '#006FFF'
+          const ly = yStart + i * ITEM_H
+          const d = arcPath(r, frac)
+          const pct = Math.round(frac * 100)
+          return (
+            <g key={i}>
+              <circle
+                cx={CX}
+                cy={CY}
+                r={r}
+                fill="none"
+                stroke="rgba(255,255,255,0.06)"
+                strokeWidth={RING_W}
+              />
+              {d && (
+                <path d={d} fill="none" stroke={color} strokeWidth={RING_W} strokeLinecap="round" />
+              )}
+              <circle cx={LABEL_X} cy={ly} r={3.5} fill={color} />
+              <text
+                x={LABEL_X + 10}
+                y={ly - 2}
+                fill="#C8C9D0"
+                fontSize={9}
+                fontFamily="inherit"
+                dominantBaseline="auto"
+              >
+                {item.label}
+              </text>
+              <text
+                x={LABEL_X + 10}
+                y={ly + 9}
+                fill="#6E7079"
+                fontSize={8}
+                fontFamily="inherit"
+                dominantBaseline="auto"
+              >
+                {item.value}
+                {item.unit ?? ''} · {pct}%
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/RadioGroup.tsx

@@ -0,0 +1,69 @@
+import { useId } from 'react'
+import type { ReactNode } from 'react'
+
+export interface RadioOption {
+  value: string
+  label: ReactNode
+  description?: string
+  disabled?: boolean
+}
+
+export interface RadioGroupProps {
+  legend: string
+  name?: string
+  options: RadioOption[]
+  value?: string
+  defaultValue?: string
+  onChange?: (value: string) => void
+  srOnlyLegend?: boolean
+  horizontal?: boolean
+}
+
+export function RadioGroup({
+  legend,
+  name,
+  options,
+  value,
+  defaultValue,
+  onChange,
+  srOnlyLegend = false,
+  horizontal = false,
+}: RadioGroupProps) {
+  const groupId = useId()
+  const groupName = name ?? groupId
+  const cls = ['radio-group', horizontal && 'radio-group--h'].filter(Boolean).join(' ')
+
+  return (
+    <fieldset className={cls}>
+      <legend className={srOnlyLegend ? 'sr-only' : 'radio-group__legend'}>{legend}</legend>
+      {options.map((opt) => {
+        const optId = `${groupName}-${opt.value}`
+        return (
+          <label
+            key={opt.value}
+            htmlFor={optId}
+            className={['radio-option', opt.disabled && 'radio-option--disabled']
+              .filter(Boolean)
+              .join(' ')}
+          >
+            <input
+              type="radio"
+              id={optId}
+              name={groupName}
+              value={opt.value}
+              checked={value !== undefined ? value === opt.value : undefined}
+              defaultChecked={defaultValue !== undefined ? defaultValue === opt.value : undefined}
+              disabled={opt.disabled}
+              onChange={() => onChange?.(opt.value)}
+              className="radio"
+            />
+            <span className="radio-text">
+              <span>{opt.label}</span>
+              {opt.description && <span className="radio-description">{opt.description}</span>}
+            </span>
+          </label>
+        )
+      })}
+    </fieldset>
+  )
+}