@w5-ui/react 0.1.0

package/src/components/DualAxisChart.tsx

@@ -0,0 +1,209 @@
+import { useMemo } from 'react'
+
+export interface DualAxisSeries {
+  label: string
+  color: string
+  values: number[]
+}
+
+export interface DualAxisChartProps {
+  bars: DualAxisSeries
+  line: DualAxisSeries
+  labels?: string[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 16, r: 44, b: 28, l: 44 }
+
+function fmtTick(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(0)}k`
+  return String(Math.round(n))
+}
+
+export function DualAxisChart({
+  bars,
+  line,
+  labels = [],
+  height = 160,
+  ariaLabel = 'Dual axis chart',
+}: DualAxisChartProps) {
+  const { barRects, linePath, lineArea, gridLines, leftTicks, rightTicks } = useMemo(() => {
+    const n = bars.values.length
+    if (!n)
+      return {
+        barRects: [],
+        linePath: '',
+        lineArea: '',
+        gridLines: [],
+        leftTicks: [],
+        rightTicks: [],
+      }
+
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+    const bot = PAD.t + chartH
+    const gw = chartW / n
+    const barW = gw * 0.55
+
+    const barMax = Math.max(...bars.values, 1)
+    const lineMin = Math.min(...line.values)
+    const lineMax = Math.max(...line.values, lineMin + 1)
+    const lineRange = lineMax - lineMin || 1
+
+    const toBarH = (v: number) => (v / barMax) * chartH
+    const toLineX = (i: number) => PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2)
+    const toLineY = (v: number) => PAD.t + chartH - ((v - lineMin) / lineRange) * chartH
+
+    const gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH)
+
+    const barRects = bars.values.map((v, i) => ({
+      key: i,
+      x: (PAD.l + i * gw + gw / 2 - barW / 2).toFixed(1),
+      y: (bot - toBarH(v)).toFixed(1),
+      w: barW.toFixed(1),
+      h: toBarH(v).toFixed(1),
+    }))
+
+    const linePts = line.values.map((v, i) => `${toLineX(i).toFixed(1)},${toLineY(v).toFixed(1)}`)
+    const linePath = `M ${linePts.join(' L ')}`
+    const lineArea = `M ${toLineX(0).toFixed(1)},${bot} L ${linePts.join(' L ')} L ${toLineX(n - 1).toFixed(1)},${bot} Z`
+
+    const leftTicks = [0, 0.5, 1].map((f) => ({
+      y: PAD.t + (1 - f) * chartH,
+      label: fmtTick(barMax * f),
+    }))
+    const rightTicks = [0, 0.5, 1].map((f) => ({
+      y: PAD.t + (1 - f) * chartH,
+      label: fmtTick(lineMin + lineRange * f),
+    }))
+
+    return { barRects, linePath, lineArea, gridLines, leftTicks, rightTicks }
+  }, [bars, line, height])
+
+  const chartW = VW - PAD.l - PAD.r
+  const n = bars.values.length
+  const gw = n > 0 ? chartW / n : chartW
+
+  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"
+      >
+        {gridLines.map((y, i) => (
+          <line
+            key={i}
+            x1={PAD.l}
+            y1={y}
+            x2={VW - PAD.r}
+            y2={y}
+            stroke="rgba(255,255,255,0.06)"
+            strokeWidth={1}
+          />
+        ))}
+        {leftTicks.map((t, i) => (
+          <text
+            key={i}
+            x={PAD.l - 4}
+            y={t.y + 4}
+            textAnchor="end"
+            fill={bars.color}
+            fontSize={9}
+            fontFamily="inherit"
+            fillOpacity={0.8}
+          >
+            {t.label}
+          </text>
+        ))}
+        {rightTicks.map((t, i) => (
+          <text
+            key={i}
+            x={VW - PAD.r + 4}
+            y={t.y + 4}
+            textAnchor="start"
+            fill={line.color}
+            fontSize={9}
+            fontFamily="inherit"
+            fillOpacity={0.8}
+          >
+            {t.label}
+          </text>
+        ))}
+        {barRects.map((b) => (
+          <rect
+            key={b.key}
+            x={b.x}
+            y={b.y}
+            width={b.w}
+            height={b.h}
+            fill={bars.color}
+            fillOpacity={0.75}
+            rx={2}
+          />
+        ))}
+        <path d={lineArea} fill={line.color} fillOpacity={0.12} />
+        <path
+          d={linePath}
+          fill="none"
+          stroke={line.color}
+          strokeWidth={2}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+        {labels.map((lbl, i) => (
+          <text
+            key={i}
+            x={(PAD.l + (i + 0.5) * gw).toFixed(1)}
+            y={height - 4}
+            textAnchor="middle"
+            fill="#6E7079"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {lbl}
+          </text>
+        ))}
+      </svg>
+      <div
+        style={{
+          display: 'flex',
+          gap: 16,
+          justifyContent: 'center',
+          fontSize: 11,
+          color: '#A4A7B5',
+          marginTop: 4,
+        }}
+      >
+        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+          <span
+            style={{
+              display: 'inline-block',
+              width: 10,
+              height: 10,
+              background: bars.color,
+              borderRadius: 2,
+              opacity: 0.75,
+            }}
+          />
+          {bars.label}
+        </span>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+          <span
+            style={{
+              display: 'inline-block',
+              width: 16,
+              height: 2,
+              background: line.color,
+              borderRadius: 1,
+            }}
+          />
+          {line.label}
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/components/DumbbellChart.tsx

@@ -0,0 +1,102 @@
+export interface DumbbellItem {
+  label: string
+  start: number
+  end: number
+  color?: string
+}
+
+export interface DumbbellChartProps {
+  items: DumbbellItem[]
+  unit?: string
+  color?: string
+  ariaLabel?: string
+}
+
+const VW = 340
+const LABEL_W = 110
+const PAD_R = 8
+const TRACK_W = VW - LABEL_W - PAD_R
+const DOT_R = 5
+const ROW_H = 26
+const PAD_T = 6
+const AXIS_H = 18
+const TICKS = 4
+
+export function DumbbellChart({
+  items,
+  unit = '',
+  color = '#006FFF',
+  ariaLabel = 'Dumbbell chart',
+}: DumbbellChartProps) {
+  const allValues = items.flatMap((it) => [it.start, it.end])
+  const minVal = allValues.length ? Math.min(...allValues) : 0
+  const maxVal = allValues.length ? Math.max(...allValues) : 1
+  const range = maxVal - minVal || 1
+  const svgH = PAD_T + items.length * ROW_H + AXIS_H
+
+  const tx = (v: number) => LABEL_W + ((v - minVal) / range) * TRACK_W
+
+  const ticks = Array.from({ length: TICKS + 1 }, (_, i) =>
+    Math.round(minVal + (i / TICKS) * range),
+  )
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${svgH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {ticks.map((t, i) => (
+          <g key={i}>
+            <line
+              x1={tx(t)}
+              y1={PAD_T}
+              x2={tx(t)}
+              y2={PAD_T + items.length * ROW_H}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={tx(t)}
+              y={PAD_T + items.length * ROW_H + 13}
+              fill="#6E7079"
+              fontSize={9}
+              textAnchor="middle"
+              fontFamily="inherit"
+            >
+              {t}
+              {unit}
+            </text>
+          </g>
+        ))}
+
+        {items.map((item, i) => {
+          const cy = PAD_T + i * ROW_H + ROW_H / 2
+          const cx1 = tx(item.start)
+          const cx2 = tx(item.end)
+          const c = item.color ?? color
+
+          return (
+            <g key={i}>
+              <text
+                x={LABEL_W - 6}
+                y={cy + 4}
+                fill="#A4A7B5"
+                fontSize={10}
+                textAnchor="end"
+                fontFamily="inherit"
+              >
+                {item.label}
+              </text>
+              <line x1={cx1} y1={cy} x2={cx2} y2={cy} stroke={c} strokeWidth={2} opacity={0.4} />
+              <circle cx={cx1} cy={cy} r={DOT_R} fill="#13131A" stroke={c} strokeWidth={1.5} />
+              <circle cx={cx2} cy={cy} r={DOT_R} fill={c} />
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/DurationInput.tsx

@@ -0,0 +1,144 @@
+import { useId, useRef, useState } from 'react'
+import type { KeyboardEvent, ChangeEvent } from 'react'
+
+export interface DurationInputProps {
+  label?: string
+  value?: number
+  defaultValue?: number
+  maxHours?: number
+  disabled?: boolean
+  onChange?: (seconds: number) => void
+  id?: string
+  className?: string
+}
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0')
+}
+
+function toHMS(secs: number): [number, number, number] {
+  const t = Math.max(0, secs)
+  return [Math.floor(t / 3600), Math.floor((t % 3600) / 60), t % 60]
+}
+
+function fromHMS(h: number, m: number, s: number): number {
+  return h * 3600 + m * 60 + s
+}
+
+export function DurationInput({
+  label,
+  value: valueProp,
+  defaultValue = 0,
+  maxHours = 99,
+  disabled = false,
+  onChange,
+  id,
+  className = '',
+}: DurationInputProps) {
+  const gid = useId()
+  const inputId = id ?? gid
+  const [internal, setInternal] = useState<number>(valueProp ?? defaultValue)
+  const refs = useRef<[HTMLInputElement | null, HTMLInputElement | null, HTMLInputElement | null]>([
+    null,
+    null,
+    null,
+  ])
+
+  const [hours, minutes, seconds] = toHMS(valueProp !== undefined ? valueProp : internal)
+
+  function commit(h: number, m: number, s: number) {
+    const total = fromHMS(Math.min(maxHours, h), m, s)
+    if (valueProp === undefined) setInternal(total)
+    onChange?.(total)
+  }
+
+  function handleKey(field: 0 | 1 | 2, e: KeyboardEvent<HTMLInputElement>) {
+    const vals: [number, number, number] = [hours, minutes, seconds]
+    const maxes = [maxHours, 59, 59]
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const next = vals[field] >= maxes[field] ? 0 : vals[field] + 1
+      vals[field] = next
+      commit(...vals)
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const next = vals[field] <= 0 ? maxes[field] : vals[field] - 1
+      vals[field] = next
+      commit(...vals)
+    } else if ((e.key === ':' || e.key === 'ArrowRight') && field < 2) {
+      e.preventDefault()
+      refs.current[field + 1]?.focus()
+    } else if (e.key === 'ArrowLeft' && field > 0) {
+      e.preventDefault()
+      refs.current[field - 1]?.focus()
+    }
+  }
+
+  function handleChange(field: 0 | 1 | 2, e: ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value
+    if (!/^\d{0,2}$/.test(raw)) return
+    const n = parseInt(raw, 10)
+    if (isNaN(n)) return
+    const maxes = [maxHours, 59, 59]
+    const updated: [number, number, number] = [hours, minutes, seconds]
+    updated[field] = Math.min(maxes[field], n)
+    commit(...updated)
+    if (raw.length === 2 && field < 2) refs.current[field + 1]?.focus()
+  }
+
+  const FIELDS = [
+    { idx: 0 as const, val: hours, ariaLabel: 'Hours', ariaMax: maxHours },
+    { idx: 1 as const, val: minutes, ariaLabel: 'Minutes', ariaMax: 59 },
+    { idx: 2 as const, val: seconds, ariaLabel: 'Seconds', ariaMax: 59 },
+  ]
+
+  return (
+    <div className={`dur-input-wrapper${className ? ` ${className}` : ''}`}>
+      {label && (
+        <label htmlFor={`${inputId}-h`} className="dur-input__label">
+          {label}
+        </label>
+      )}
+      <div
+        className={`dur-input${disabled ? ' dur-input--disabled' : ''}`}
+        role="group"
+        aria-label={label ?? 'Duration'}
+      >
+        {FIELDS.flatMap(({ idx, val, ariaLabel, ariaMax }, i) => {
+          const nodes = [
+            <input
+              key={`f${idx}`}
+              ref={(el) => {
+                refs.current[idx] = el
+              }}
+              id={idx === 0 ? `${inputId}-h` : undefined}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              role="spinbutton"
+              aria-label={ariaLabel}
+              aria-valuenow={val}
+              aria-valuemin={0}
+              aria-valuemax={ariaMax}
+              aria-valuetext={pad(val)}
+              value={pad(val)}
+              disabled={disabled}
+              maxLength={2}
+              className="dur-input__field"
+              onChange={(e) => handleChange(idx, e)}
+              onKeyDown={(e) => handleKey(idx, e)}
+              onFocus={(e) => e.currentTarget.select()}
+            />,
+          ]
+          if (i < 2)
+            nodes.push(
+              <span key={`c${idx}`} className="dur-input__sep" aria-hidden="true">
+                :
+              </span>,
+            )
+          return nodes
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/EmptyState.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+
+export interface EmptyStateProps {
+  title: string
+  description?: string
+  action?: ReactNode
+  className?: string
+}
+
+export function EmptyState({ title, description, action, className = '' }: EmptyStateProps) {
+  return (
+    <div role="status" aria-live="polite" className={`empty-state ${className}`.trim()}>
+      <svg
+        className="empty-state__icon"
+        viewBox="0 0 48 48"
+        fill="none"
+        aria-hidden="true"
+        focusable={false}
+      >
+        <rect x="6" y="11" width="36" height="28" rx="4" stroke="currentColor" strokeWidth="1.5" />
+        <path
+          d="M6 30h10l3 5h10l3-5h10"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15 20h18M15 25h12"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          opacity=".4"
+        />
+      </svg>
+      <p className="empty-state__title">{title}</p>
+      {description && <p className="empty-state__desc">{description}</p>}
+      {action && <div className="empty-state__action">{action}</div>}
+    </div>
+  )
+}

package/src/components/ErrorBandChart.tsx

@@ -0,0 +1,124 @@
+export interface ErrorBandSeries {
+  label: string
+  color: string
+  mean: number[]
+  lower: number[]
+  upper: number[]
+}
+
+export interface ErrorBandChartProps {
+  series: ErrorBandSeries[]
+  xLabels?: string[]
+  yRange?: [number, number]
+  height?: number
+  unit?: string
+  ariaLabel?: string
+}
+
+const VW = 340
+const PAD_L = 28
+const PAD_R = 8
+const PAD_T = 8
+const PAD_B = 20
+const PLOT_W = VW - PAD_L - PAD_R
+
+export function ErrorBandChart({
+  series,
+  xLabels = [],
+  yRange,
+  height = 180,
+  unit = '',
+  ariaLabel = 'Error band chart',
+}: ErrorBandChartProps) {
+  if (!series.length || !series[0].mean.length) return null
+
+  const n = series[0].mean.length
+  const PLOT_H = height - PAD_T - PAD_B
+
+  const allVals = series.flatMap((s) => [...s.lower, ...s.upper])
+  const minV = yRange ? yRange[0] : Math.min(...allVals)
+  const maxV = yRange ? yRange[1] : Math.max(...allVals)
+  const range = maxV - minV || 1
+
+  const tx = (i: number) => PAD_L + (i / (n - 1 || 1)) * PLOT_W
+  const ty = (v: number) => PAD_T + (1 - (v - minV) / range) * PLOT_H
+
+  const bandPath = (lower: number[], upper: number[]) => {
+    const top = upper
+      .map((v, i) => `${i === 0 ? 'M' : 'L'}${tx(i).toFixed(1)},${ty(v).toFixed(1)}`)
+      .join(' ')
+    const bot = [...lower]
+      .reverse()
+      .map((v, i) => `L${tx(n - 1 - i).toFixed(1)},${ty(v).toFixed(1)}`)
+      .join(' ')
+    return `${top} ${bot} Z`
+  }
+
+  const linePath = (mean: number[]) =>
+    mean.map((v, i) => `${i === 0 ? 'M' : 'L'}${tx(i).toFixed(1)},${ty(v).toFixed(1)}`).join(' ')
+
+  const yTicks = [minV, (minV + maxV) / 2, maxV]
+
+  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"
+      >
+        {yTicks.map((v, i) => (
+          <g key={i}>
+            <line
+              x1={PAD_L}
+              y1={ty(v)}
+              x2={PAD_L + PLOT_W}
+              y2={ty(v)}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={PAD_L - 4}
+              y={ty(v) + 4}
+              fill="#6E7079"
+              fontSize={8}
+              textAnchor="end"
+              fontFamily="inherit"
+            >
+              {Math.round(v)}
+              {unit}
+            </text>
+          </g>
+        ))}
+
+        {series.map((s, si) => (
+          <g key={si}>
+            <path d={bandPath(s.lower, s.upper)} fill={s.color} opacity={0.12} />
+            <path
+              d={linePath(s.mean)}
+              fill="none"
+              stroke={s.color}
+              strokeWidth={1.5}
+              strokeLinejoin="round"
+              strokeLinecap="round"
+            />
+          </g>
+        ))}
+
+        {xLabels.map((lbl, i) => (
+          <text
+            key={i}
+            x={PAD_L + (i / (xLabels.length - 1 || 1)) * PLOT_W}
+            y={height - 4}
+            fill="#6E7079"
+            fontSize={9}
+            textAnchor="middle"
+            fontFamily="inherit"
+          >
+            {lbl}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/ExpandableRow.tsx

@@ -0,0 +1,58 @@
+import { useId, useState, type ReactNode } from 'react'
+
+export interface ExpandableRowProps {
+  row: ReactNode
+  detail: ReactNode
+  colSpan: number
+  defaultExpanded?: boolean
+}
+
+export function ExpandableRow({
+  row,
+  detail,
+  colSpan,
+  defaultExpanded = false,
+}: ExpandableRowProps) {
+  const [open, setOpen] = useState(defaultExpanded)
+  const detailId = useId()
+  return (
+    <tbody className="exp-tbody">
+      <tr className="exp-row">
+        <td className="exp-toggle-cell">
+          <button
+            type="button"
+            className="exp-toggle"
+            aria-expanded={open}
+            aria-controls={detailId}
+            onClick={() => setOpen((o) => !o)}
+          >
+            <svg
+              className={`exp-chevron${open ? ' exp-chevron--open' : ''}`}
+              viewBox="0 0 10 6"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path
+                d="M1 1l4 4 4-4"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        </td>
+        {row}
+      </tr>
+      <tr
+        id={detailId}
+        className={`exp-detail${open ? ' exp-detail--open' : ''}`}
+        aria-hidden={!open}
+      >
+        <td colSpan={colSpan + 1} className="exp-detail-cell">
+          {detail}
+        </td>
+      </tr>
+    </tbody>
+  )
+}