@w5-ui/react 0.1.0

package/src/components/ArcDiagram.tsx

@@ -0,0 +1,114 @@
+import { useMemo } from 'react'
+
+export interface ArcNode {
+  id: string
+  label: string
+  color?: string
+}
+
+export interface ArcLink {
+  source: string
+  target: string
+  value?: number
+  color?: string
+}
+
+export interface ArcDiagramProps {
+  nodes: ArcNode[]
+  links: ArcLink[]
+  height?: number
+  ariaLabel?: string
+}
+
+const PALETTE = ['#006FFF', '#00C875', '#F5A623', '#A78BFA', '#FF7B7B', '#00C8C8', '#FB923C']
+const VW = 400
+const PAD = { t: 12, r: 20, b: 36, l: 20 }
+
+export function ArcDiagram({
+  nodes,
+  links,
+  height = 180,
+  ariaLabel = 'Arc diagram',
+}: ArcDiagramProps) {
+  const layout = useMemo(() => {
+    const n = nodes.length
+    if (!n) return null
+    const chartW = VW - PAD.l - PAD.r
+    const baseY = height - PAD.b
+    const maxArcH = baseY - PAD.t
+
+    const xMap: Record<string, number> = {}
+    const colorMap: Record<string, string> = {}
+
+    const dots = nodes.map((node, i) => {
+      const x = n > 1 ? PAD.l + (i / (n - 1)) * chartW : VW / 2
+      xMap[node.id] = x
+      const color = node.color ?? PALETTE[i % PALETTE.length]
+      colorMap[node.id] = color
+      return { x, y: baseY, color, label: node.label }
+    })
+
+    const arcs = links.flatMap((link) => {
+      const x1 = xMap[link.source]
+      const x2 = xMap[link.target]
+      if (x1 == null || x2 == null) return []
+      const midX = (x1 + x2) / 2
+      const dist = Math.abs(x2 - x1)
+      const arcH = Math.min(dist * 0.45, maxArcH * 0.9)
+      const ctl = baseY - arcH
+      const color = link.color ?? colorMap[link.source] ?? PALETTE[0]
+      const sw = link.value != null ? Math.max(1, Math.min(4, link.value / 10)) : 1.5
+      return [{ d: `M ${x1} ${baseY} Q ${midX} ${ctl} ${x2} ${baseY}`, color, sw }]
+    })
+
+    return { dots, arcs, baseY }
+  }, [nodes, links, 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"
+      >
+        <line
+          x1={PAD.l}
+          y1={layout.baseY}
+          x2={VW - PAD.r}
+          y2={layout.baseY}
+          stroke="rgba(255,255,255,0.08)"
+          strokeWidth={1}
+        />
+        {layout.arcs.map((arc, i) => (
+          <path
+            key={i}
+            d={arc.d}
+            fill="none"
+            stroke={arc.color}
+            strokeWidth={arc.sw}
+            strokeOpacity={0.6}
+          />
+        ))}
+        {layout.dots.map((dot, i) => (
+          <circle key={i} cx={dot.x} cy={dot.y} r={5} fill={dot.color} />
+        ))}
+        {layout.dots.map((dot, i) => (
+          <text
+            key={i}
+            x={dot.x}
+            y={layout.baseY + 18}
+            textAnchor="middle"
+            fontSize={9}
+            fill="#A4A7B5"
+            fontFamily="inherit"
+          >
+            {dot.label}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/AreaChart.tsx

@@ -0,0 +1,101 @@
+import { useMemo } from 'react'
+
+export interface AreaChartSeries {
+  label: string
+  color: string
+  values: number[]
+}
+
+export interface AreaChartProps {
+  series: AreaChartSeries[]
+  labels?: string[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 12, r: 8, b: 28, l: 8 }
+
+export function AreaChart({
+  series,
+  labels = [],
+  height = 160,
+  ariaLabel = 'Area chart',
+}: AreaChartProps) {
+  const { areas, gridLines, chartW } = useMemo(() => {
+    const n = series[0]?.values.length ?? 0
+    if (!n) return { areas: [], gridLines: [], chartW: VW - PAD.l - PAD.r }
+
+    const totals = Array.from({ length: n }, (_, i) =>
+      series.reduce((acc, s) => acc + (s.values[i] ?? 0), 0),
+    )
+    const maxV = Math.max(...totals, 1)
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+
+    const toX = (i: number) => PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2)
+    const toY = (v: number) => PAD.t + chartH - (v / maxV) * chartH
+
+    const gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH)
+
+    const areas = series.map((s, j) => {
+      const bottoms = Array.from({ length: n }, (_, i) =>
+        series.slice(0, j).reduce((acc, sr) => acc + (sr.values[i] ?? 0), 0),
+      )
+      const tops = bottoms.map((b, i) => b + (s.values[i] ?? 0))
+
+      const topPts = tops.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`)
+      const botPts = bottoms.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`).reverse()
+
+      return {
+        color: s.color,
+        label: s.label,
+        d: `M ${topPts.join(' L ')} L ${botPts.join(' L ')} Z`,
+      }
+    })
+
+    return { areas, gridLines, chartW }
+  }, [series, height])
+
+  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}
+          />
+        ))}
+        {areas.map((s) => (
+          <path key={s.label} d={s.d} fill={s.color} fillOpacity={0.75} />
+        ))}
+        {labels.map((lbl, i) => {
+          const x = PAD.l + (labels.length > 1 ? (i / (labels.length - 1)) * chartW : chartW / 2)
+          return (
+            <text
+              key={i}
+              x={x}
+              y={height - 4}
+              textAnchor="middle"
+              fill="#6E7079"
+              fontSize={9}
+              fontFamily="inherit"
+            >
+              {lbl}
+            </text>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/Avatar.tsx

@@ -0,0 +1,37 @@
+import type { CSSProperties } from 'react'
+
+export type AvatarSize = 'sm' | 'md' | 'lg'
+export type AvatarStatus = 'online' | 'offline' | 'away'
+
+export interface AvatarProps {
+  initials?: string
+  src?: string
+  alt?: string
+  size?: AvatarSize
+  status?: AvatarStatus
+  className?: string
+  style?: CSSProperties
+}
+
+export function Avatar({
+  initials = '?',
+  src,
+  alt,
+  size = 'md',
+  status,
+  className = '',
+  style,
+}: AvatarProps) {
+  const label = alt ?? (src ? '' : initials)
+  return (
+    <span
+      className={`avatar avatar-${size}${className ? ` ${className}` : ''}`}
+      role="img"
+      aria-label={label}
+      style={style}
+    >
+      {src ? <img src={src} alt="" /> : initials}
+      {status && <span className={`avatar-status avatar-status-${status}`} aria-hidden="true" />}
+    </span>
+  )
+}

package/src/components/AvatarGroup.tsx

@@ -0,0 +1,36 @@
+import { Avatar, type AvatarProps } from './Avatar.js'
+
+export interface AvatarGroupProps {
+  avatars: AvatarProps[]
+  max?: number
+  size?: AvatarProps['size']
+  ariaLabel?: string
+}
+
+export function AvatarGroup({
+  avatars,
+  max = 5,
+  size = 'md',
+  ariaLabel = 'Avatar group',
+}: AvatarGroupProps) {
+  const visible = avatars.slice(0, max)
+  const overflow = avatars.length - visible.length
+  return (
+    <span className="avatar-group" role="list" aria-label={ariaLabel}>
+      {visible.map((av, i) => (
+        <span key={i} role="listitem" className="avatar-group-item">
+          <Avatar {...av} size={size} />
+        </span>
+      ))}
+      {overflow > 0 && (
+        <span
+          role="listitem"
+          className={`avatar avatar-${size} avatar-overflow`}
+          aria-label={`${overflow} more`}
+        >
+          +{overflow}
+        </span>
+      )}
+    </span>
+  )
+}

package/src/components/Badge.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+
+export type BadgeColor = 'danger' | 'warn' | 'info' | 'success' | 'neutral'
+
+export interface BadgeProps {
+  children: ReactNode
+  count?: number
+  dot?: boolean
+  max?: number
+  showZero?: boolean
+  color?: BadgeColor
+  className?: string
+}
+
+export function Badge({
+  children,
+  count,
+  dot = false,
+  max = 99,
+  showZero = false,
+  color = 'danger',
+  className = '',
+}: BadgeProps) {
+  const show = dot || (count !== undefined && (showZero || count > 0))
+  const label = count !== undefined ? (count > max ? `${max}+` : String(count)) : ''
+  return (
+    <span className={`badge-wrapper${className ? ` ${className}` : ''}`}>
+      {children}
+      {show && (
+        <span className={`badge badge-${color}${dot ? ' badge-dot' : ''}`} aria-hidden="true">
+          {!dot && label}
+        </span>
+      )}
+    </span>
+  )
+}

package/src/components/Banner.tsx

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react'
+import { CloseIcon } from '../icons.js'
+
+export type BannerVariant = 'info' | 'success' | 'warn' | 'danger'
+
+export interface BannerAction {
+  label: string
+  onClick: () => void
+}
+
+export interface BannerProps {
+  variant?: BannerVariant
+  title?: string
+  children: ReactNode
+  action?: BannerAction
+  onDismiss?: () => void
+}
+
+export function Banner({ variant = 'info', title, children, action, onDismiss }: BannerProps) {
+  const isUrgent = variant === 'danger' || variant === 'warn'
+  return (
+    <div
+      className={`banner banner--${variant}`}
+      role={isUrgent ? 'alert' : 'status'}
+      aria-live={isUrgent ? 'assertive' : 'polite'}
+      aria-atomic="true"
+    >
+      <div className="banner__body">
+        {title && <span className="banner__title">{title}</span>}
+        <span>{children}</span>
+      </div>
+      {action && (
+        <button type="button" className="banner__action" onClick={action.onClick}>
+          {action.label}
+        </button>
+      )}
+      {onDismiss && (
+        <button
+          type="button"
+          className="banner__dismiss icon-btn"
+          onClick={onDismiss}
+          aria-label="Dismiss banner"
+        >
+          <CloseIcon aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/BarChart.tsx

@@ -0,0 +1,106 @@
+import { useMemo } from 'react'
+
+export interface BarChartSeries {
+  label: string
+  color: string
+  values: number[]
+}
+
+export interface BarChartProps {
+  series: BarChartSeries[]
+  labels?: string[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 12, r: 8, b: 28, l: 8 }
+
+export function BarChart({
+  series,
+  labels = [],
+  height = 160,
+  ariaLabel = 'Bar chart',
+}: BarChartProps) {
+  const { bars, gridLines, groupW } = useMemo(() => {
+    if (!series.length || !series[0].values.length) return { bars: [], gridLines: [], groupW: 0 }
+    const n = series[0].values.length
+    const m = series.length
+    const maxV = Math.max(...series.flatMap((s) => s.values)) || 1
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+    const bot = PAD.t + chartH
+    const gw = chartW / n
+    const gap = gw * 0.15
+    const barW = (gw - gap * (m + 1)) / m
+    const gridLines = [0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH)
+    const bars = series.flatMap((s, si) =>
+      s.values.map((v, gi) => {
+        const x = PAD.l + gi * gw + gap * (si + 1) + barW * si
+        const bh = (v / maxV) * chartH
+        return {
+          x: x.toFixed(1),
+          y: (bot - bh).toFixed(1),
+          w: Math.max(barW, 1).toFixed(1),
+          h: bh.toFixed(1),
+          color: s.color,
+          key: `${si}-${gi}`,
+        }
+      }),
+    )
+    return { bars, gridLines, groupW: gw }
+  }, [series, height])
+
+  const chartW = VW - PAD.l - PAD.r
+  const n = series[0]?.values.length ?? 0
+  const gw = n > 0 ? chartW / n : chartW
+  const effectiveGroupW = groupW || gw
+
+  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}
+          />
+        ))}
+        {bars.map((b) => (
+          <rect
+            key={b.key}
+            x={b.x}
+            y={b.y}
+            width={b.w}
+            height={b.h}
+            fill={b.color}
+            fillOpacity={0.9}
+            rx={2}
+          />
+        ))}
+        {labels.map((lbl, i) => (
+          <text
+            key={i}
+            x={(PAD.l + (i + 0.5) * effectiveGroupW).toFixed(1)}
+            y={height - 4}
+            textAnchor="middle"
+            fill="#6E7079"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {lbl}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/BeeswarmChart.tsx

@@ -0,0 +1,142 @@
+export interface BeeswarmSeries {
+  label: string
+  points: number[]
+  color?: string
+}
+
+export interface BeeswarmChartProps {
+  series: BeeswarmSeries[]
+  yRange?: [number, number]
+  height?: number
+  unit?: string
+  dotRadius?: number
+  ariaLabel?: string
+}
+
+const PALETTE = ['#006FFF', '#00C875', '#FF7B7B', '#F5C26B', '#A78BFA', '#34D399']
+const VW = 340
+const PAD_L = 28
+const PAD_R = 8
+const PAD_T = 8
+const PAD_B = 24
+
+function swarmedPositions(
+  values: number[],
+  tyFn: (v: number) => number,
+  r: number,
+  halfWidth: number,
+): { x: number; y: number }[] {
+  const pts: { x: number; y: number }[] = []
+  const sorted = [...values].sort((a, b) => a - b)
+  const step = r * 2 + 0.5
+  for (const v of sorted) {
+    const cy = tyFn(v)
+    let chosen = 0
+    let found = false
+    for (let dist = 0; dist <= halfWidth && !found; dist += step) {
+      const candidates = dist === 0 ? [0] : [dist, -dist]
+      for (const cx of candidates) {
+        if (pts.every((p) => Math.hypot(cx - p.x, cy - p.y) >= r * 2)) {
+          chosen = cx
+          found = true
+          break
+        }
+      }
+    }
+    pts.push({ x: chosen, y: cy })
+  }
+  return pts
+}
+
+export function BeeswarmChart({
+  series,
+  yRange,
+  height = 200,
+  unit = '',
+  dotRadius = 4,
+  ariaLabel = 'Beeswarm chart',
+}: BeeswarmChartProps) {
+  if (!series.length) return null
+
+  const PLOT_W = VW - PAD_L - PAD_R
+  const PLOT_H = height - PAD_T - PAD_B
+  const n = series.length
+  const colWidth = PLOT_W / n
+  const halfWidth = colWidth / 2 - dotRadius
+
+  const allPts = series.flatMap((s) => s.points)
+  const minV = yRange ? yRange[0] : Math.min(...allPts)
+  const maxV = yRange ? yRange[1] : Math.max(...allPts)
+  const vRange = maxV - minV || 1
+
+  const ty = (v: number) => PAD_T + (1 - (v - minV) / vRange) * PLOT_H
+  const colCx = (i: number) => PAD_L + (i + 0.5) * colWidth
+  const yTicks = [minV, (minV + maxV) / 2, maxV]
+
+  const swarmed = series.map((s) => swarmedPositions(s.points, ty, dotRadius, halfWidth))
+
+  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) => {
+          const cx = colCx(si)
+          const color = s.color ?? PALETTE[si % PALETTE.length]
+          const pts = swarmed[si]
+          return (
+            <g key={si}>
+              {pts.map((p, pi) => (
+                <circle
+                  key={pi}
+                  cx={cx + p.x}
+                  cy={p.y}
+                  r={dotRadius}
+                  fill={color}
+                  fillOpacity={0.75}
+                />
+              ))}
+              <text
+                x={cx}
+                y={height - 4}
+                fill="#6E7079"
+                fontSize={9}
+                textAnchor="middle"
+                fontFamily="inherit"
+              >
+                {s.label}
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}