@w5-ui/react 0.1.0

package/src/components/SortableList.tsx

@@ -0,0 +1,130 @@
+import { useState } from 'react'
+
+export interface SortableItem {
+  id: string
+  label: string
+  meta?: string
+}
+
+export interface SortableListProps {
+  items: SortableItem[]
+  onChange: (items: SortableItem[]) => void
+  ariaLabel?: string
+}
+
+function GrabIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <rect x="3" y="2" width="2" height="2" rx="1" />
+      <rect x="9" y="2" width="2" height="2" rx="1" />
+      <rect x="3" y="6" width="2" height="2" rx="1" />
+      <rect x="9" y="6" width="2" height="2" rx="1" />
+      <rect x="3" y="10" width="2" height="2" rx="1" />
+      <rect x="9" y="10" width="2" height="2" rx="1" />
+    </svg>
+  )
+}
+
+export function SortableList({ items, onChange, ariaLabel }: SortableListProps) {
+  const [grabbed, setGrabbed] = useState<string | null>(null)
+  const [dragSrc, setDragSrc] = useState<string | null>(null)
+  const [dragOver, setDragOver] = useState<string | null>(null)
+
+  function reorder(fromId: string, toId: string) {
+    if (fromId === toId) return
+    const from = items.findIndex((i) => i.id === fromId)
+    const to = items.findIndex((i) => i.id === toId)
+    const arr = [...items]
+    const [item] = arr.splice(from, 1)
+    arr.splice(to, 0, item)
+    onChange(arr)
+  }
+
+  function move(id: string, dir: -1 | 1) {
+    const idx = items.findIndex((i) => i.id === id)
+    const next = idx + dir
+    if (next < 0 || next >= items.length) return
+    const arr = [...items]
+    ;[arr[idx], arr[next]] = [arr[next], arr[idx]]
+    onChange(arr)
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLButtonElement>, id: string) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault()
+      setGrabbed((g) => (g === id ? null : id))
+    } else if (grabbed === id) {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        move(id, -1)
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        move(id, 1)
+      } else if (e.key === 'Escape') {
+        setGrabbed(null)
+      }
+    }
+  }
+
+  return (
+    <ol className="sortable-list" aria-label={ariaLabel}>
+      {items.map((item, idx) => (
+        <li
+          key={item.id}
+          className={[
+            'sortable-list__item',
+            grabbed === item.id ? 'is-grabbed' : '',
+            dragOver === item.id ? 'is-drag-over' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          draggable
+          onDragStart={(e) => {
+            e.dataTransfer.effectAllowed = 'move'
+            setDragSrc(item.id)
+          }}
+          onDragEnd={() => {
+            setDragSrc(null)
+            setDragOver(null)
+          }}
+          onDragOver={(e) => {
+            e.preventDefault()
+            e.dataTransfer.dropEffect = 'move'
+            if (dragOver !== item.id) setDragOver(item.id)
+          }}
+          onDragLeave={() => setDragOver(null)}
+          onDrop={(e) => {
+            e.preventDefault()
+            if (dragSrc) reorder(dragSrc, item.id)
+            setDragSrc(null)
+            setDragOver(null)
+          }}
+        >
+          <button
+            type="button"
+            className="sortable-list__handle"
+            aria-label={`${grabbed === item.id ? 'Release' : 'Grab'} ${item.label}. Use arrow keys to reorder.`}
+            aria-pressed={grabbed === item.id}
+            onKeyDown={(e) => handleKeyDown(e, item.id)}
+          >
+            <GrabIcon />
+          </button>
+          <span className="sortable-list__content">
+            <span className="sortable-list__label">{item.label}</span>
+            {item.meta && <span className="sortable-list__meta">{item.meta}</span>}
+          </span>
+          <span className="sortable-list__index" aria-hidden="true">
+            {idx + 1}
+          </span>
+        </li>
+      ))}
+    </ol>
+  )
+}

package/src/components/SortableTable.tsx

@@ -0,0 +1,46 @@
+import { useState, type CSSProperties, type ReactNode } from 'react'
+
+export type SortDir = 'asc' | 'desc'
+
+export function useSortable() {
+  const [sortKey, setSortKey] = useState<string | null>(null)
+  const [dir, setDir] = useState<SortDir>('asc')
+
+  function onSort(key: string) {
+    if (sortKey === key) setDir((d) => (d === 'asc' ? 'desc' : 'asc'))
+    else {
+      setSortKey(key)
+      setDir('asc')
+    }
+  }
+
+  return { sortKey, dir, onSort }
+}
+
+export interface SortHeaderProps {
+  sortKey: string
+  activeKey: string | null
+  dir: SortDir
+  onSort: (key: string) => void
+  children: ReactNode
+  style?: CSSProperties
+}
+
+export function SortHeader({ sortKey, activeKey, dir, onSort, children, style }: SortHeaderProps) {
+  const active = activeKey === sortKey
+  return (
+    <th
+      scope="col"
+      aria-sort={active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'}
+      style={style}
+    >
+      <button type="button" className="sort-header-btn" onClick={() => onSort(sortKey)}>
+        {children}
+        <svg className="sort-icon" viewBox="0 0 8 11" aria-hidden="true" fill="currentColor">
+          <path d="M4 0L7 4H1Z" opacity={active && dir === 'asc' ? 1 : 0.3} />
+          <path d="M4 11L1 7H7Z" opacity={active && dir === 'desc' ? 1 : 0.3} />
+        </svg>
+      </button>
+    </th>
+  )
+}

package/src/components/Sparkline.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react'
+
+export interface SparklineProps {
+  bars?: number
+  active?: boolean
+  seed?: number
+  ariaLabel?: string
+}
+
+function rng(seed: number) {
+  let s = seed
+  return () => {
+    s = (s * 9301 + 49297) % 233280
+    return s / 233280
+  }
+}
+
+export function Sparkline({
+  bars = 36,
+  active = false,
+  seed = 1,
+  ariaLabel = 'Activity sparkline',
+}: SparklineProps) {
+  const heights = useMemo(() => {
+    const out: number[] = []
+    let prev = 12
+    const r = rng(seed)
+    for (let i = 0; i < bars; i++) {
+      const v = Math.max(4, Math.min(40, prev + (r() * 10 - 5)))
+      prev = v
+      out.push(v)
+    }
+    return out
+  }, [bars, seed])
+  return (
+    <div className="spark" role="img" aria-label={ariaLabel}>
+      {heights.map((h, i) => (
+        <div
+          key={i}
+          aria-hidden="true"
+          className="b"
+          style={{
+            height: `${h}px`,
+            opacity: active ? 0.4 + i / (bars * 1.4) : 0.5 + i / (bars * 1.6),
+          }}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/SparklineMatrix.tsx

@@ -0,0 +1,117 @@
+export interface SparklineMatrixRow {
+  label: string
+  values: number[]
+  unit?: string
+  color?: string
+}
+
+export interface SparklineMatrixProps {
+  rows: SparklineMatrixRow[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 380
+const PAD_L = 76
+const PAD_R = 44
+const SPARK_PAD_X = 8
+const SPARK_PAD_Y = 5
+const PALETTE = ['#006FFF', '#00C875', '#7FB6FF', '#F5A623', '#FF7B7B', '#A78BFA']
+
+export function SparklineMatrix({
+  rows,
+  height = 160,
+  ariaLabel = 'Sparkline matrix',
+}: SparklineMatrixProps) {
+  if (!rows.length) return null
+
+  const rowH = height / rows.length
+  const sparkX0 = PAD_L + SPARK_PAD_X
+  const sparkW = VW - PAD_L - PAD_R - SPARK_PAD_X * 2
+  const sparkH = rowH - SPARK_PAD_Y * 2
+
+  const computed = rows.map((row, i) => {
+    const y0 = i * rowH + SPARK_PAD_Y
+    const color = row.color ?? PALETTE[i % PALETTE.length]
+    const min = Math.min(...row.values)
+    const max = Math.max(...row.values)
+    const range = max - min || 1
+    const lastVal = row.values[row.values.length - 1]
+
+    const d =
+      row.values.length < 2
+        ? ''
+        : row.values
+            .map((v, j) => {
+              const x = sparkX0 + (j / (row.values.length - 1)) * sparkW
+              const y = y0 + sparkH - ((v - min) / range) * sparkH
+              return `${j === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
+            })
+            .join(' ')
+
+    const dotY = y0 + sparkH - ((lastVal - min) / range) * sparkH
+    return { color, lastVal, d, dotX: sparkX0 + sparkW, dotY }
+  })
+
+  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"
+      >
+        {rows.map((row, i) => {
+          const midY = i * rowH + rowH / 2
+          const { color, lastVal, d, dotX, dotY } = computed[i]
+          return (
+            <g key={i}>
+              {i > 0 && (
+                <line
+                  x1={0}
+                  y1={i * rowH}
+                  x2={VW}
+                  y2={i * rowH}
+                  stroke="rgba(255,255,255,0.06)"
+                  strokeWidth={1}
+                />
+              )}
+              <text
+                x={PAD_L - 6}
+                y={midY + 3.5}
+                textAnchor="end"
+                fill="#6E7079"
+                fontSize={9}
+                fontFamily="inherit"
+              >
+                {row.label}
+              </text>
+              {d && (
+                <path
+                  d={d}
+                  fill="none"
+                  stroke={color}
+                  strokeWidth={1.5}
+                  strokeLinejoin="round"
+                  strokeLinecap="round"
+                />
+              )}
+              <circle cx={dotX} cy={dotY} r={2.5} fill={color} />
+              <text
+                x={VW - PAD_R + 6}
+                y={midY + 3.5}
+                textAnchor="start"
+                fill={color}
+                fontSize={9}
+                fontFamily="inherit"
+              >
+                {Math.round(lastVal)}
+                {row.unit ?? ''}
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,8 @@
+export interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg'
+  label?: string
+}
+
+export function Spinner({ size = 'md', label = 'Loading' }: SpinnerProps) {
+  return <span role="status" aria-label={label} className={`spinner ${size}`} />
+}

package/src/components/SplitButton.tsx

@@ -0,0 +1,151 @@
+import { useState, useRef, useEffect, useId } from 'react'
+import type { KeyboardEvent } from 'react'
+import type { ButtonVariant } from './Button.js'
+
+export interface SplitButtonItem {
+  id: string
+  label: string
+  disabled?: boolean
+}
+
+export interface SplitButtonProps {
+  label: string
+  variant?: ButtonVariant
+  disabled?: boolean
+  items: SplitButtonItem[]
+  onPrimaryClick?: () => void
+  onAction?: (id: string) => void
+}
+
+export function SplitButton({
+  label,
+  variant = 'ghost',
+  disabled,
+  items,
+  onPrimaryClick,
+  onAction,
+}: SplitButtonProps) {
+  const uid = useId()
+  const menuId = `${uid}-menu`
+  const [open, setOpen] = useState(false)
+  const [activeIdx, setActiveIdx] = useState(0)
+  const caretRef = useRef<HTMLButtonElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    function handler(e: MouseEvent) {
+      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  function toggleMenu() {
+    setOpen((prev) => {
+      if (!prev) setActiveIdx(0)
+      return !prev
+    })
+  }
+
+  function activate(id: string) {
+    onAction?.(id)
+    setOpen(false)
+    caretRef.current?.focus()
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (!open) {
+      if (['ArrowDown', 'Enter', ' '].includes(e.key)) {
+        e.preventDefault()
+        setActiveIdx(0)
+        setOpen(true)
+      }
+      return
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      setOpen(false)
+      caretRef.current?.focus()
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, items.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      setActiveIdx(0)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      setActiveIdx(items.length - 1)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      const item = items[activeIdx]
+      if (item && !item.disabled) activate(item.id)
+    } else if (e.key === 'Tab') {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <div ref={wrapperRef} className="split-btn">
+      <button
+        type="button"
+        className={`btn btn-${variant} split-btn-primary`}
+        disabled={disabled}
+        onClick={onPrimaryClick}
+      >
+        {label}
+      </button>
+      <button
+        ref={caretRef}
+        type="button"
+        className={`btn btn-${variant} split-btn-caret`}
+        disabled={disabled}
+        aria-label={`${label} options`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={open ? menuId : undefined}
+        onClick={toggleMenu}
+        onKeyDown={onKeyDown}
+      >
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          aria-hidden="true"
+          focusable="false"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M1 3 L5 7 L9 3" />
+        </svg>
+      </button>
+      {open && (
+        <ul id={menuId} role="menu" aria-label={`${label} options`} className="action-menu">
+          {items.map((item, idx) => (
+            <li
+              key={item.id}
+              role="menuitem"
+              tabIndex={-1}
+              aria-disabled={item.disabled}
+              data-active={idx === activeIdx ? 'true' : undefined}
+              className="action-menu-item"
+              onMouseEnter={() => setActiveIdx(idx)}
+              onMouseDown={(e) => {
+                e.preventDefault()
+                if (!item.disabled) activate(item.id)
+              }}
+            >
+              {item.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/Spoiler.tsx

@@ -0,0 +1,47 @@
+import { useState, useRef, useLayoutEffect, type ReactNode } from 'react'
+
+export interface SpoilerProps {
+  children: ReactNode
+  maxHeight?: number
+  showLabel?: string
+  hideLabel?: string
+  className?: string
+}
+
+export function Spoiler({
+  children,
+  maxHeight = 80,
+  showLabel = 'Show more',
+  hideLabel = 'Show less',
+  className,
+}: SpoilerProps) {
+  const [expanded, setExpanded] = useState(false)
+  const [clipped, setClipped] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (el) setClipped(el.scrollHeight > maxHeight)
+  }, [maxHeight])
+
+  return (
+    <div className={`spoiler${className ? ' ' + className : ''}`}>
+      <div className="spoiler-outer" style={{ position: 'relative' }}>
+        <div ref={ref} style={!expanded && clipped ? { maxHeight, overflow: 'hidden' } : undefined}>
+          {children}
+        </div>
+        {!expanded && clipped && <div className="spoiler-fade" aria-hidden="true" />}
+      </div>
+      {clipped && (
+        <button
+          type="button"
+          className="spoiler-toggle"
+          aria-expanded={expanded}
+          onClick={() => setExpanded((v) => !v)}
+        >
+          {expanded ? hideLabel : showLabel}
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/StackedBarChart.tsx

@@ -0,0 +1,145 @@
+import { useMemo } from 'react'
+
+export interface StackedBarSeries {
+  label: string
+  color: string
+  values: number[]
+}
+
+export interface StackedBarChartProps {
+  series: StackedBarSeries[]
+  labels?: string[]
+  height?: number
+  normalized?: boolean
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 10, r: 8, b: 28, l: 36 }
+
+export function StackedBarChart({
+  series,
+  labels = [],
+  height = 180,
+  normalized = false,
+  ariaLabel = 'Stacked bar chart',
+}: StackedBarChartProps) {
+  const { stacks, gridLines, xLabels } = useMemo(() => {
+    if (!series.length || !series[0].values.length) {
+      return { stacks: [], gridLines: [], xLabels: [] }
+    }
+    const n = series[0].values.length
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+    const bot = PAD.t + chartH
+
+    const totals = Array.from({ length: n }, (_, i) =>
+      series.reduce((s, ser) => s + (ser.values[i] ?? 0), 0),
+    )
+    const maxTotal = normalized ? 1 : Math.max(...totals) || 1
+
+    const barW = (chartW / n) * 0.72
+    const gap = (chartW / n) * 0.28
+
+    const stacks = Array.from({ length: n }, (_, gi) => {
+      let y = bot
+      const total = totals[gi] || 1
+      return series.map((ser) => {
+        const raw = ser.values[gi] ?? 0
+        const v = normalized ? raw / total : raw
+        const bh = (v / maxTotal) * chartH
+        const rect = {
+          x: PAD.l + gi * (barW + gap) + gap / 2,
+          y: y - bh,
+          w: barW,
+          h: bh,
+          color: ser.color,
+          key: `${gi}-${ser.label}`,
+        }
+        y -= bh
+        return rect
+      })
+    })
+
+    const gridFracs = [0.25, 0.5, 0.75, 1]
+    const gridLines = gridFracs.map((f) => ({
+      y: PAD.t + (1 - f) * chartH,
+      label: normalized ? `${Math.round(f * 100)}%` : String(Math.round(f * maxTotal)),
+    }))
+
+    const xLabels = Array.from({ length: n }, (_, i) => ({
+      x: PAD.l + i * (barW + gap) + gap / 2 + barW / 2,
+      text: labels[i] ?? String(i),
+    }))
+
+    const yTicks = gridLines.map((g) => g)
+
+    return { stacks, gridLines, xLabels, yTicks }
+  }, [series, labels, height, normalized])
+
+  if (!stacks.length) 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"
+      >
+        {gridLines.map((g, i) => (
+          <g key={i}>
+            <line
+              x1={PAD.l}
+              y1={g.y}
+              x2={VW - PAD.r}
+              y2={g.y}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={PAD.l - 4}
+              y={g.y + 3}
+              fill="#6E7079"
+              fontSize={8}
+              textAnchor="end"
+              fontFamily="inherit"
+            >
+              {g.label}
+            </text>
+          </g>
+        ))}
+
+        {stacks.map((rects) =>
+          rects.map((r) =>
+            r.h > 0 ? (
+              <rect
+                key={r.key}
+                x={r.x.toFixed(1)}
+                y={r.y.toFixed(1)}
+                width={r.w.toFixed(1)}
+                height={r.h.toFixed(1)}
+                fill={r.color}
+                fillOpacity={0.9}
+              />
+            ) : null,
+          ),
+        )}
+
+        {xLabels.map((l, i) => (
+          <text
+            key={i}
+            x={l.x.toFixed(1)}
+            y={height - 6}
+            fill="#6E7079"
+            fontSize={8}
+            textAnchor="middle"
+            fontFamily="inherit"
+          >
+            {l.text}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}