@w5-ui/react 0.1.0

package/src/components/StackedProgress.tsx

@@ -0,0 +1,47 @@
+export interface StackedProgressSegment {
+  label: string
+  value: number
+  color: string
+}
+
+export interface StackedProgressProps {
+  segments: StackedProgressSegment[]
+  total?: number
+  ariaLabel?: string
+  showLegend?: boolean
+}
+
+export function StackedProgress({
+  segments,
+  total,
+  ariaLabel,
+  showLegend = true,
+}: StackedProgressProps) {
+  const sum = total ?? segments.reduce((acc, s) => acc + s.value, 0)
+  const text =
+    ariaLabel ?? segments.map((s) => `${s.label} ${Math.round((s.value / sum) * 100)}%`).join(', ')
+  return (
+    <div className="sp" role="img" aria-label={text}>
+      <div className="sp-bar" aria-hidden="true">
+        {segments.map(({ label, value, color }) => (
+          <div
+            key={label}
+            className="sp-seg"
+            style={{ width: `${(value / sum) * 100}%`, background: color }}
+          />
+        ))}
+      </div>
+      {showLegend && (
+        <div className="sp-legend" aria-hidden="true">
+          {segments.map(({ label, value, color }) => (
+            <span key={label} className="sp-item">
+              <span className="sp-dot" style={{ background: color }} />
+              {label}
+              <span className="sp-pct">{Math.round((value / sum) * 100)}%</span>
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/StarRating.tsx

@@ -0,0 +1,103 @@
+import { useId, useState } from 'react'
+
+export interface StarRatingProps {
+  label: string
+  value?: number
+  defaultValue?: number
+  max?: number
+  readOnly?: boolean
+  size?: 'sm' | 'md'
+  onChange?: (value: number) => void
+  className?: string
+}
+
+function StarIcon({ filled }: { filled: boolean }) {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 24 24"
+      fill={filled ? 'currentColor' : 'none'}
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
+    </svg>
+  )
+}
+
+export function StarRating({
+  label,
+  value: valueProp,
+  defaultValue = 0,
+  max = 5,
+  readOnly = false,
+  size = 'md',
+  onChange,
+  className,
+}: StarRatingProps) {
+  const id = useId()
+  const [internalValue, setInternalValue] = useState(defaultValue)
+  const [hovered, setHovered] = useState(0)
+  const value = valueProp !== undefined ? valueProp : internalValue
+  const active = hovered || value
+
+  const cls = [
+    'star-rating',
+    size === 'sm' && 'star-rating--sm',
+    readOnly && 'star-rating--readonly',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  if (readOnly) {
+    return (
+      <span className={cls} role="img" aria-label={`${value} out of ${max} stars`}>
+        {Array.from({ length: max }, (_, i) => (
+          <span
+            key={i}
+            className={i < value ? 'star-icon star-icon--on' : 'star-icon'}
+            aria-hidden="true"
+          >
+            <StarIcon filled={i < value} />
+          </span>
+        ))}
+      </span>
+    )
+  }
+
+  return (
+    <fieldset className={cls}>
+      <legend className="sr-only">{label}</legend>
+      {Array.from({ length: max }, (_, i) => {
+        const star = i + 1
+        const on = star <= active
+        return (
+          <label
+            key={star}
+            htmlFor={`${id}-${star}`}
+            className={on ? 'star-label star-label--on' : 'star-label'}
+            onMouseEnter={() => setHovered(star)}
+            onMouseLeave={() => setHovered(0)}
+          >
+            <input
+              type="radio"
+              id={`${id}-${star}`}
+              name={`${id}`}
+              value={String(star)}
+              checked={value === star}
+              onChange={() => {
+                if (valueProp === undefined) setInternalValue(star)
+                onChange?.(star)
+              }}
+              className="star-radio"
+              aria-label={`${star} out of ${max}`}
+            />
+            <StarIcon filled={on} />
+          </label>
+        )
+      })}
+    </fieldset>
+  )
+}

package/src/components/Stat.tsx

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { Card } from './Card.js'
+
+export interface StatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+  label: string
+  value: ReactNode
+  unit?: string
+  sub?: string
+  delta?: string
+  deltaDir?: 'up' | 'down' | 'neutral'
+  span?: number
+  color?: string
+}
+
+export function Stat({
+  label,
+  value,
+  unit,
+  sub,
+  delta,
+  deltaDir = 'neutral',
+  span,
+  color,
+  ...rest
+}: StatProps) {
+  const deltaClass = deltaDir === 'up' ? 'delta-up' : deltaDir === 'down' ? 'delta-down' : ''
+  return (
+    <Card span={span} {...rest}>
+      <h3>{label}</h3>
+      <div className="stat" style={color ? { color } : undefined}>
+        {value}
+        {unit && <span className="unit">{unit}</span>}
+      </div>
+      {(sub || delta) && (
+        <div className="submeta">
+          {sub}
+          {sub && delta && ' · '}
+          {delta && (
+            <>
+              <span className="sr-only">Trend: </span>
+              <span className={deltaClass || undefined}>{delta}</span>
+            </>
+          )}
+        </div>
+      )}
+    </Card>
+  )
+}

package/src/components/StatusIndicator.tsx

@@ -0,0 +1,26 @@
+import type { CSSProperties } from 'react'
+
+export interface StatusIndicatorProps {
+  color: string
+  text: string
+  textColor?: string
+}
+
+export function StatusIndicator({ color, text, textColor }: StatusIndicatorProps) {
+  const style: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 6,
+    color: textColor ?? color,
+    fontSize: 12,
+  }
+  return (
+    <span style={style}>
+      <span
+        aria-hidden="true"
+        style={{ width: 6, height: 6, borderRadius: '50%', background: color }}
+      />
+      {text}
+    </span>
+  )
+}

package/src/components/StepChart.tsx

@@ -0,0 +1,130 @@
+import { useMemo } from 'react'
+
+export interface StepChartSeries {
+  label: string
+  color: string
+  values: number[]
+}
+
+export interface StepChartProps {
+  series: StepChartSeries[]
+  labels?: string[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 12, r: 8, b: 28, l: 8 }
+
+function stepPath(xs: number[], ys: number[]): string {
+  if (!xs.length) return ''
+  let d = `M ${xs[0].toFixed(1)},${ys[0].toFixed(1)}`
+  for (let i = 1; i < xs.length; i++) {
+    d += ` H ${xs[i].toFixed(1)} V ${ys[i].toFixed(1)}`
+  }
+  return d
+}
+
+function stepArea(xs: number[], ys: number[], bot: number): string {
+  if (!xs.length) return ''
+  const b = bot.toFixed(1)
+  let d = `M ${xs[0].toFixed(1)},${b} V ${ys[0].toFixed(1)}`
+  for (let i = 1; i < xs.length; i++) {
+    d += ` H ${xs[i].toFixed(1)} V ${ys[i].toFixed(1)}`
+  }
+  d += ` H ${xs[xs.length - 1].toFixed(1)} V ${b} Z`
+  return d
+}
+
+export function StepChart({
+  series,
+  labels = [],
+  height = 160,
+  ariaLabel = 'Step chart',
+}: StepChartProps) {
+  const { paths, areas, gridLines } = useMemo(() => {
+    const allValues = series.flatMap((s) => s.values)
+    if (!allValues.length) return { paths: [], areas: [], gridLines: [] }
+    const minV = Math.min(...allValues)
+    const maxV = Math.max(...allValues)
+    const range = maxV - minV || 1
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+    const n = series[0]?.values.length ?? 0
+
+    const toX = (i: number) => PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2)
+    const toY = (v: number) => PAD.t + chartH - ((v - minV) / range) * chartH
+
+    const gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH)
+    const bot = PAD.t + chartH
+
+    const paths = series.map((s) => {
+      const xs = s.values.map((_, i) => toX(i))
+      const ys = s.values.map((v) => toY(v))
+      return { color: s.color, label: s.label, d: stepPath(xs, ys) }
+    })
+
+    const areas = series.map((s) => {
+      const xs = s.values.map((_, i) => toX(i))
+      const ys = s.values.map((v) => toY(v))
+      return { color: s.color, label: s.label, d: stepArea(xs, ys, bot) }
+    })
+
+    return { paths, areas, gridLines }
+  }, [series, height])
+
+  const chartW = VW - PAD.l - PAD.r
+
+  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.1} />
+        ))}
+        {paths.map((s) => (
+          <path
+            key={s.label}
+            d={s.d}
+            fill="none"
+            stroke={s.color}
+            strokeWidth={2}
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
+        ))}
+        {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/Stepper.tsx

@@ -0,0 +1,51 @@
+export interface StepperStep {
+  id: string
+  label: string
+}
+
+export interface StepperProps {
+  steps: StepperStep[]
+  active: string
+  className?: string
+}
+
+export function Stepper({ steps, active, className = '' }: StepperProps) {
+  const activeIdx = steps.findIndex((s) => s.id === active)
+  return (
+    <nav aria-label="Progress" className={`stepper ${className}`.trim()}>
+      <ol className="stepper__list">
+        {steps.map((step, idx) => {
+          const isActive = step.id === active
+          const isDone = idx < activeIdx
+          const state = isActive ? 'active' : isDone ? 'done' : 'upcoming'
+          return (
+            <li key={step.id} className={`stepper__item stepper__item--${state}`}>
+              <span className="stepper__num" aria-hidden="true">
+                {isDone ? (
+                  <svg viewBox="0 0 12 12" width="12" height="12" fill="none">
+                    <path
+                      d="M2 6l3 3 5-5"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                ) : (
+                  idx + 1
+                )}
+              </span>
+              {isDone && <span className="sr-only">completed: </span>}
+              <span
+                className="stepper__label"
+                {...(isActive ? { 'aria-current': 'step' as const } : {})}
+              >
+                {step.label}
+              </span>
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/components/StreamGraph.tsx

@@ -0,0 +1,97 @@
+export interface StreamSeries {
+  label: string
+  values: number[]
+  color?: string
+}
+
+export interface StreamGraphProps {
+  labels: string[]
+  series: StreamSeries[]
+  ariaLabel?: string
+}
+
+const VW = 380
+const VH = 120
+const PAD_L = 8
+const PAD_R = 8
+const PAD_T = 8
+const PAD_B = 20
+const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342']
+
+export function StreamGraph({ labels, series, ariaLabel = 'Stream graph' }: StreamGraphProps) {
+  const n = labels.length
+  const TRACK_W = VW - PAD_L - PAD_R
+  const TRACK_H = VH - PAD_T - PAD_B
+
+  const totals = Array.from({ length: n }, (_, i) =>
+    series.reduce((sum, s) => sum + (s.values[i] ?? 0), 0),
+  )
+  const maxTotal = Math.max(...totals, 1)
+
+  function xOf(i: number) {
+    return n > 1 ? PAD_L + (i / (n - 1)) * TRACK_W : PAD_L + TRACK_W / 2
+  }
+
+  const layers = series.map((s, si) => {
+    const tops: number[] = []
+    const bots: number[] = []
+    for (let i = 0; i < n; i++) {
+      const total = totals[i]
+      const baseline = (maxTotal - total) / 2
+      let bottom = baseline
+      for (let k = 0; k < si; k++) bottom += series[k].values[i] ?? 0
+      const top = bottom + (s.values[i] ?? 0)
+      bots[i] = PAD_T + (bottom / maxTotal) * TRACK_H
+      tops[i] = PAD_T + (top / maxTotal) * TRACK_H
+    }
+    return { tops, bots }
+  })
+
+  function buildArea(tops: number[], bots: number[]): string {
+    const fwd = tops.map((y, i) => {
+      const x = xOf(i)
+      if (i === 0) return `M${x},${y}`
+      const px = xOf(i - 1)
+      const cpX = (px + x) / 2
+      return `C${cpX},${tops[i - 1]} ${cpX},${y} ${x},${y}`
+    })
+    const bwd = [...bots].reverse().map((y, ri) => {
+      const i = bots.length - 1 - ri
+      const x = xOf(i)
+      if (ri === 0) return `L${x},${y}`
+      const nx = xOf(i + 1)
+      const cpX = (nx + x) / 2
+      return `C${cpX},${bots[i + 1]} ${cpX},${y} ${x},${y}`
+    })
+    return [...fwd, ...bwd, 'Z'].join(' ')
+  }
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${VH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {layers.map(({ tops, bots }, si) => {
+          const color = series[si].color ?? COLORS[si % COLORS.length]
+          return <path key={si} d={buildArea(tops, bots)} fill={color} opacity={0.82} />
+        })}
+        {labels.map((label, i) => (
+          <text
+            key={i}
+            x={xOf(i)}
+            y={VH - 5}
+            fill="#6E7079"
+            fontSize={9}
+            textAnchor={i === 0 ? 'start' : i === n - 1 ? 'end' : 'middle'}
+            fontFamily="inherit"
+          >
+            {label}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/StripeChart.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+
+export interface StripeItem {
+  label: string
+  value: number
+}
+
+export interface StripeChartProps {
+  data: StripeItem[]
+  height?: number
+  colorLow?: string
+  colorHigh?: string
+  ariaLabel?: string
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '')
+  const n = parseInt(h, 16)
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+}
+
+function lerp(a: number, b: number, t: number) {
+  return Math.round(a + (b - a) * t)
+}
+
+function interpColor(low: string, high: string, t: number): string {
+  const [r1, g1, b1] = hexToRgb(low)
+  const [r2, g2, b2] = hexToRgb(high)
+  return `rgb(${lerp(r1, r2, t)},${lerp(g1, g2, t)},${lerp(b1, b2, t)})`
+}
+
+const VW = 400
+
+export function StripeChart({
+  data,
+  height = 48,
+  colorLow = '#0A2840',
+  colorHigh = '#FF4040',
+  ariaLabel = 'Stripe chart',
+}: StripeChartProps) {
+  const stripes = useMemo(() => {
+    if (!data.length) return []
+    const vals = data.map((d) => d.value)
+    const min = Math.min(...vals)
+    const max = Math.max(...vals)
+    const range = max - min || 1
+    const sw = VW / data.length
+    return data.map((d, i) => ({
+      x: i * sw,
+      w: sw,
+      color: interpColor(colorLow, colorHigh, (d.value - min) / range),
+      label: d.label,
+      value: d.value,
+    }))
+  }, [data, colorLow, colorHigh])
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ lineHeight: 0 }}>
+      <svg
+        viewBox={`0 0 ${VW} ${height}`}
+        width="100%"
+        height={height}
+        aria-hidden="true"
+        focusable="false"
+        preserveAspectRatio="none"
+      >
+        {stripes.map((s, i) => (
+          <g key={i}>
+            <rect x={s.x} y={0} width={s.w} height={height} fill={s.color} />
+            <title>{`${s.label}: ${s.value}`}</title>
+          </g>
+        ))}
+      </svg>
+    </div>
+  )
+}