@w5-ui/react 0.1.0

package/src/components/ChordDiagram.tsx

@@ -0,0 +1,133 @@
+import { useMemo } from 'react'
+
+export interface ChordNode {
+  label: string
+  color?: string
+}
+
+export interface ChordDiagramProps {
+  nodes: ChordNode[]
+  matrix: number[][]
+  ariaLabel?: string
+}
+
+const PALETTE = ['#006FFF', '#00C875', '#A78BFA', '#F5A623', '#50B8E7', '#F04949']
+const CX = 160,
+  CY = 160,
+  R_IN = 108,
+  R_ARC = 125,
+  R_LBL = 138,
+  PAD = 0.04
+
+function pt(r: number, a: number) {
+  return `${(CX + r * Math.cos(a)).toFixed(1)},${(CY + r * Math.sin(a)).toFixed(1)}`
+}
+
+function arcSlice(r1: number, r2: number, a1: number, a2: number) {
+  const lg = a2 - a1 > Math.PI ? 1 : 0
+  return `M${pt(r2, a1)} A${r2},${r2} 0 ${lg},1 ${pt(r2, a2)} L${pt(r1, a2)} A${r1},${r1} 0 ${lg},0 ${pt(r1, a1)} Z`
+}
+
+function ribbon(a1: number, a2: number, b1: number, b2: number) {
+  const la = +(a2 - a1 > Math.PI)
+  const lb = +(b2 - b1 > Math.PI)
+  return `M${pt(R_IN, a1)} A${R_IN},${R_IN} 0 ${la},1 ${pt(R_IN, a2)} Q${CX},${CY} ${pt(R_IN, b2)} A${R_IN},${R_IN} 0 ${lb},0 ${pt(R_IN, b1)} Q${CX},${CY} ${pt(R_IN, a1)}Z`
+}
+
+export function ChordDiagram({ nodes, matrix, ariaLabel = 'Chord diagram' }: ChordDiagramProps) {
+  const { arcs, chords, labels } = useMemo(() => {
+    const n = nodes.length
+    const totals = nodes.map((_, i) => matrix[i].reduce((s, v) => s + v, 0))
+    const grand = totals.reduce((s, v) => s + v, 0)
+    if (!grand)
+      return {
+        arcs: [] as { d: string; fill: string }[],
+        chords: [] as { d: string; fill: string }[],
+        labels: [] as { x: number; y: number; anchor: 'start' | 'end' | 'middle'; text: string }[],
+      }
+
+    const scale = (2 * Math.PI - PAD * n) / grand
+
+    const nodeA: { start: number; end: number; offsets: number[] }[] = []
+    let angle = -Math.PI / 2
+    for (let i = 0; i < n; i++) {
+      const span = totals[i] * scale
+      const offsets: number[] = []
+      let off = angle
+      for (let j = 0; j < n; j++) {
+        offsets.push(off)
+        off += matrix[i][j] * scale
+      }
+      nodeA.push({ start: angle, end: angle + span, offsets })
+      angle += span + PAD
+    }
+
+    const arcs = nodeA.map((a, i) => ({
+      d: arcSlice(R_IN + 2, R_ARC, a.start, a.end),
+      fill: nodes[i].color ?? PALETTE[i % PALETTE.length],
+    }))
+
+    const chords: { d: string; fill: string }[] = []
+    for (let i = 0; i < n; i++) {
+      for (let j = i + 1; j < n; j++) {
+        const vij = matrix[i][j],
+          vji = matrix[j][i]
+        if (!vij && !vji) continue
+        const a1 = nodeA[i].offsets[j],
+          a2 = a1 + vij * scale
+        const b1 = nodeA[j].offsets[i],
+          b2 = b1 + vji * scale
+        chords.push({
+          d: ribbon(a1, a2, b1, b2),
+          fill: (nodes[i].color ?? PALETTE[i % PALETTE.length]) + '55',
+        })
+      }
+    }
+
+    const labels = nodeA.map((a, i) => {
+      const mid = (a.start + a.end) / 2
+      const anchor: 'start' | 'end' | 'middle' =
+        Math.cos(mid) > 0.2 ? 'start' : Math.cos(mid) < -0.2 ? 'end' : 'middle'
+      return {
+        x: CX + R_LBL * Math.cos(mid),
+        y: CY + R_LBL * Math.sin(mid) + 4,
+        anchor,
+        text: nodes[i].label,
+      }
+    })
+
+    return { arcs, chords, labels }
+  }, [nodes, matrix])
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox="0 0 320 320"
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {chords.map((c, i) => (
+          <path key={i} d={c.d} fill={c.fill} />
+        ))}
+        {arcs.map((a, i) => (
+          <path key={i} d={a.d} fill={a.fill} />
+        ))}
+        {labels.map((l, i) => (
+          <text
+            key={i}
+            x={l.x.toFixed(1)}
+            y={l.y.toFixed(1)}
+            textAnchor={l.anchor}
+            fill="#fff"
+            fontSize={10}
+            fontWeight={600}
+            fontFamily="inherit"
+          >
+            {l.text}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/CirclePacking.tsx

@@ -0,0 +1,189 @@
+import { useMemo } from 'react'
+
+export interface CirclePackItem {
+  id: string
+  label: string
+  value: number
+  color?: string
+}
+
+export interface CirclePackingProps {
+  items: CirclePackItem[]
+  height?: number
+  ariaLabel?: string
+}
+
+const PALETTE = [
+  '#006FFF',
+  '#00C875',
+  '#F5A623',
+  '#A78BFA',
+  '#FF7B7B',
+  '#00C8C8',
+  '#FB923C',
+  '#4797FF',
+]
+const VW = 360
+const MAX_R = 72
+const MIN_R = 10
+
+function pack(radii: number[]): { cx: number; cy: number }[] {
+  const pos: { cx: number; cy: number; r: number }[] = []
+
+  for (let i = 0; i < radii.length; i++) {
+    const r = radii[i]
+    if (i === 0) {
+      pos.push({ cx: 0, cy: 0, r })
+      continue
+    }
+    if (i === 1) {
+      pos.push({ cx: pos[0].r + r, cy: 0, r })
+      continue
+    }
+
+    // Candidates: tangent to each pair of placed circles
+    const candidates: { cx: number; cy: number }[] = []
+    for (let a = 0; a < pos.length; a++) {
+      for (let b = a + 1; b < pos.length; b++) {
+        const pa = pos[a],
+          pb = pos[b]
+        const da = pa.r + r,
+          db = pb.r + r
+        const dx = pb.cx - pa.cx,
+          dy = pb.cy - pa.cy
+        const dist = Math.hypot(dx, dy)
+        if (dist > da + db || dist < Math.abs(da - db)) continue
+        const cosA = (da * da + dist * dist - db * db) / (2 * da * dist)
+        if (cosA < -1 || cosA > 1) continue
+        const acos = Math.acos(Math.max(-1, Math.min(1, cosA)))
+        const base = Math.atan2(dy, dx)
+        for (const sign of [1, -1]) {
+          candidates.push({
+            cx: pa.cx + da * Math.cos(base + sign * acos),
+            cy: pa.cy + da * Math.sin(base + sign * acos),
+          })
+        }
+      }
+      // Also tangent to single circle toward origin
+      const pa = pos[a]
+      const ang = Math.atan2(-pa.cy, -pa.cx)
+      candidates.push({
+        cx: pa.cx + (pa.r + r) * Math.cos(ang),
+        cy: pa.cy + (pa.r + r) * Math.sin(ang),
+      })
+    }
+
+    let best: { cx: number; cy: number } | null = null
+    let bestDist = Infinity
+    for (const c of candidates) {
+      const overlap = pos.some((p) => Math.hypot(c.cx - p.cx, c.cy - p.cy) < p.r + r - 0.4)
+      if (!overlap) {
+        const d = Math.hypot(c.cx, c.cy)
+        if (d < bestDist) {
+          bestDist = d
+          best = c
+        }
+      }
+    }
+    const last = pos[pos.length - 1]
+    pos.push({ cx: best?.cx ?? last.cx + last.r + r + 2, cy: best?.cy ?? 0, r })
+  }
+
+  return pos.map(({ cx, cy }) => ({ cx, cy }))
+}
+
+export function CirclePacking({
+  items,
+  height = 200,
+  ariaLabel = 'Circle packing chart',
+}: CirclePackingProps) {
+  const layout = useMemo(() => {
+    if (!items.length) return null
+    const sorted = [...items].sort((a, b) => b.value - a.value)
+    const maxV = sorted[0].value
+    const radii = sorted.map((it) =>
+      Math.max(MIN_R, Math.round(MAX_R * Math.sqrt(it.value / maxV))),
+    )
+    const positions = pack(radii)
+
+    // Compute bounding box and center in viewBox
+    let minX = Infinity,
+      minY = Infinity,
+      maxX = -Infinity,
+      maxY = -Infinity
+    positions.forEach((p, i) => {
+      minX = Math.min(minX, p.cx - radii[i])
+      minY = Math.min(minY, p.cy - radii[i])
+      maxX = Math.max(maxX, p.cx + radii[i])
+      maxY = Math.max(maxY, p.cy + radii[i])
+    })
+    const w = maxX - minX,
+      h = maxY - minY
+    const pad = 8
+    const scale = Math.min((VW - pad * 2) / w, (height - pad * 2) / h)
+    const offX = (VW - w * scale) / 2 - minX * scale
+    const offY = (height - h * scale) / 2 - minY * scale
+
+    return sorted.map((item, i) => {
+      const r = radii[i] * scale
+      const cx = positions[i].cx * scale + offX
+      const cy = positions[i].cy * scale + offY
+      const color = item.color ?? PALETTE[i % PALETTE.length]
+      return { id: item.id, label: item.label, value: item.value, cx, cy, r, color }
+    })
+  }, [items, height])
+
+  if (!layout) return null
+
+  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"
+      >
+        {layout.map((c) => (
+          <g key={c.id}>
+            <circle
+              cx={c.cx}
+              cy={c.cy}
+              r={c.r}
+              fill={c.color}
+              fillOpacity={0.25}
+              stroke={c.color}
+              strokeWidth={1.5}
+            />
+            {c.r >= 18 && (
+              <text
+                x={c.cx}
+                y={c.cy - (c.r >= 26 ? 5 : 0)}
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize={Math.min(11, c.r * 0.38)}
+                fill="#E2E4ED"
+                fontFamily="inherit"
+                fontWeight={500}
+              >
+                {c.label}
+              </text>
+            )}
+            {c.r >= 26 && (
+              <text
+                x={c.cx}
+                y={c.cy + 10}
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize={Math.min(9, c.r * 0.3)}
+                fill={c.color}
+                fontFamily="inherit"
+              >
+                {c.value}
+              </text>
+            )}
+          </g>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/CodeBlock.tsx

@@ -0,0 +1,27 @@
+import { CopyButton } from './CopyButton.js'
+
+export interface CodeBlockProps {
+  code: string
+  label?: string
+  language?: string
+  className?: string
+}
+
+export function CodeBlock({
+  code,
+  label = 'Code block',
+  language,
+  className = '',
+}: CodeBlockProps) {
+  return (
+    <div role="region" aria-label={label} className={`code-block ${className}`.trim()}>
+      <div className="code-block__header">
+        {language && <span className="code-block__lang">{language}</span>}
+        <CopyButton text={code} label="Copy code" />
+      </div>
+      <pre className="code-block__pre">
+        <code className="code-block__code">{code}</code>
+      </pre>
+    </div>
+  )
+}

package/src/components/ColorPicker.tsx

@@ -0,0 +1,120 @@
+import { useId, useState, useRef, useCallback } from 'react'
+
+export interface ColorSwatchDef {
+  value: string
+  label: string
+  color: string
+}
+
+export const COLOR_SWATCHES: ColorSwatchDef[] = [
+  { value: 'blue', label: 'Blue', color: '#006FFF' },
+  { value: 'green', label: 'Green', color: '#00B070' },
+  { value: 'amber', label: 'Amber', color: '#F5A623' },
+  { value: 'red', label: 'Red', color: '#F03A3A' },
+  { value: 'purple', label: 'Purple', color: '#9B59B6' },
+  { value: 'teal', label: 'Teal', color: '#1ABC9C' },
+  { value: 'pink', label: 'Pink', color: '#E91E8C' },
+  { value: 'orange', label: 'Orange', color: '#FF6B35' },
+  { value: 'slate', label: 'Slate', color: '#6E7079' },
+  { value: 'light', label: 'Light', color: '#E8E8EC' },
+]
+
+export interface ColorPickerProps {
+  label?: string
+  srOnlyLabel?: boolean
+  value?: string
+  defaultValue?: string
+  swatches?: ColorSwatchDef[]
+  onChange?: (value: string) => void
+  disabled?: boolean
+}
+
+export function ColorPicker({
+  label = 'Colour',
+  srOnlyLabel = false,
+  value,
+  defaultValue,
+  swatches = COLOR_SWATCHES,
+  onChange,
+  disabled = false,
+}: ColorPickerProps) {
+  const groupId = useId()
+  const [internal, setInternal] = useState(defaultValue ?? swatches[0]?.value ?? '')
+  const controlled = value !== undefined
+  const current = controlled ? value : internal
+  const gridRef = useRef<HTMLDivElement>(null)
+
+  const set = useCallback(
+    (v: string) => {
+      if (!controlled) setInternal(v)
+      onChange?.(v)
+    },
+    [controlled, onChange],
+  )
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const cells = Array.from(
+        gridRef.current?.querySelectorAll<HTMLInputElement>('input[type="radio"]') ?? [],
+      )
+      if (!cells.length) return
+      const idx = cells.findIndex((c) => c.value === current)
+      let next = idx
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (idx + 1) % cells.length
+      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
+        next = (idx - 1 + cells.length) % cells.length
+      else if (e.key === 'Home') next = 0
+      else if (e.key === 'End') next = cells.length - 1
+      else return
+      e.preventDefault()
+      cells[next].focus()
+      set(cells[next].value)
+    },
+    [current, set],
+  )
+
+  const hasMatch = swatches.some((s) => s.value === current)
+
+  return (
+    <div className={`color-picker${disabled ? ' color-picker--disabled' : ''}`}>
+      <div
+        id={`${groupId}-label`}
+        className={`color-picker__label${srOnlyLabel ? ' sr-only' : ''}`}
+      >
+        {label}
+      </div>
+      <div
+        ref={gridRef}
+        role="radiogroup"
+        aria-labelledby={`${groupId}-label`}
+        className="color-picker__grid"
+        onKeyDown={handleKeyDown}
+      >
+        {swatches.map((sw, i) => {
+          const checked = sw.value === current
+          const tabIdx = checked || (i === 0 && !hasMatch) ? 0 : -1
+          return (
+            <label key={sw.value} className="color-picker__swatch" title={sw.label}>
+              <input
+                type="radio"
+                name={groupId}
+                value={sw.value}
+                checked={checked}
+                onChange={() => set(sw.value)}
+                disabled={disabled}
+                className="sr-only"
+                tabIndex={tabIdx}
+                aria-label={sw.label}
+              />
+              <span
+                className={`color-picker__circle${checked ? ' color-picker__circle--selected' : ''}`}
+                style={{ background: sw.color }}
+                aria-hidden="true"
+              />
+            </label>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/ColumnToggle.tsx

@@ -0,0 +1,106 @@
+import { useState, useRef, useCallback, useEffect, useId } from 'react'
+
+const ColumnsIcon = () => (
+  <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable={false}>
+    <rect x="1" y="2" width="3" height="10" rx="1" stroke="currentColor" strokeWidth="1.3" />
+    <rect x="5.5" y="2" width="3" height="10" rx="1" stroke="currentColor" strokeWidth="1.3" />
+    <rect x="10" y="2" width="3" height="10" rx="1" stroke="currentColor" strokeWidth="1.3" />
+  </svg>
+)
+
+export interface ColumnDef {
+  key: string
+  label: string
+  required?: boolean
+}
+
+export interface ColumnToggleProps {
+  columns: ColumnDef[]
+  visible: Set<string>
+  onChange: (visible: Set<string>) => void
+}
+
+export function ColumnToggle({ columns, visible, onChange }: ColumnToggleProps) {
+  const [open, setOpen] = useState(false)
+  const btnRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const panelId = useId()
+
+  const close = useCallback(() => {
+    setOpen(false)
+    btnRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') close()
+    }
+    function onDown(e: MouseEvent) {
+      if (
+        !panelRef.current?.contains(e.target as Node) &&
+        !btnRef.current?.contains(e.target as Node)
+      )
+        close()
+    }
+    document.addEventListener('keydown', onKey)
+    document.addEventListener('mousedown', onDown)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.removeEventListener('mousedown', onDown)
+    }
+  }, [open, close])
+
+  function toggle(key: string) {
+    const next = new Set(visible)
+    if (next.has(key)) next.delete(key)
+    else next.add(key)
+    onChange(next)
+  }
+
+  return (
+    <div className="col-toggle">
+      <button
+        ref={btnRef}
+        type="button"
+        className={`col-toggle__btn${open ? ' col-toggle__btn--active' : ''}`}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <ColumnsIcon />
+        <span>Columns</span>
+      </button>
+      {open && (
+        <div
+          ref={panelRef}
+          id={panelId}
+          className="col-toggle__panel"
+          role="dialog"
+          aria-label="Toggle columns"
+        >
+          <div className="col-toggle__header">Columns</div>
+          <ul className="col-toggle__list">
+            {columns.map((col) => (
+              <li key={col.key} className="col-toggle__item">
+                <label className="col-toggle__label">
+                  <input
+                    type="checkbox"
+                    className="col-toggle__check"
+                    checked={visible.has(col.key)}
+                    disabled={col.required}
+                    onChange={() => {
+                      if (!col.required) toggle(col.key)
+                    }}
+                  />
+                  <span>{col.label}</span>
+                </label>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}