@w5-ui/react 0.1.0

package/src/components/MirroredBarChart.tsx

@@ -0,0 +1,148 @@
+export interface MirroredBarItem {
+  label: string
+  left: number
+  right: number
+}
+
+export interface MirroredBarChartProps {
+  items: MirroredBarItem[]
+  leftLabel?: string
+  rightLabel?: string
+  leftColor?: string
+  rightColor?: string
+  unit?: string
+  ariaLabel?: string
+}
+
+const VW = 340
+const LABEL_W = 80
+const PAD_T = 20
+const PAD_B = 8
+const ROW_H = 26
+const HALF_W = (VW - LABEL_W) / 2
+const CX = VW / 2
+
+export function MirroredBarChart({
+  items,
+  leftLabel = 'Download',
+  rightLabel = 'Upload',
+  leftColor = '#006FFF',
+  rightColor = '#00C8C8',
+  unit = '',
+  ariaLabel = 'Mirrored bar chart',
+}: MirroredBarChartProps) {
+  const svgH = PAD_T + items.length * ROW_H + PAD_B
+  const maxVal = Math.max(...items.flatMap((it) => [it.left, it.right]), 1)
+
+  function bw(val: number): number {
+    return (val / maxVal) * HALF_W
+  }
+
+  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"
+      >
+        <text
+          x={CX - LABEL_W / 2 - 6}
+          y={13}
+          fill="#6E7079"
+          fontSize={9}
+          textAnchor="end"
+          fontFamily="inherit"
+        >
+          {leftLabel}
+        </text>
+        <text
+          x={CX + LABEL_W / 2 + 6}
+          y={13}
+          fill="#6E7079"
+          fontSize={9}
+          textAnchor="start"
+          fontFamily="inherit"
+        >
+          {rightLabel}
+        </text>
+
+        <line
+          x1={CX}
+          y1={PAD_T - 4}
+          x2={CX}
+          y2={PAD_T + items.length * ROW_H}
+          stroke="rgba(255,255,255,0.12)"
+          strokeWidth={1}
+        />
+
+        {items.map((item, i) => {
+          const y = PAD_T + i * ROW_H
+          const midY = y + ROW_H / 2
+          const bh = ROW_H - 8
+          const by = y + 4
+          const lw = bw(item.left)
+          const rw = bw(item.right)
+          return (
+            <g key={i}>
+              <rect
+                x={CX - LABEL_W / 2 - lw}
+                y={by}
+                width={lw}
+                height={bh}
+                fill={leftColor}
+                opacity={0.85}
+                rx={2}
+              />
+              <rect
+                x={CX + LABEL_W / 2}
+                y={by}
+                width={rw}
+                height={bh}
+                fill={rightColor}
+                opacity={0.85}
+                rx={2}
+              />
+              <text
+                x={CX}
+                y={midY + 4}
+                fill="#CDD0DB"
+                fontSize={10}
+                textAnchor="middle"
+                fontFamily="inherit"
+              >
+                {item.label}
+              </text>
+              {lw >= 28 && (
+                <text
+                  x={CX - LABEL_W / 2 - lw + 4}
+                  y={midY + 4}
+                  fill="rgba(255,255,255,0.55)"
+                  fontSize={9}
+                  textAnchor="start"
+                  fontFamily="inherit"
+                >
+                  {item.left}
+                  {unit}
+                </text>
+              )}
+              {rw >= 28 && (
+                <text
+                  x={CX + LABEL_W / 2 + rw - 4}
+                  y={midY + 4}
+                  fill="rgba(255,255,255,0.55)"
+                  fontSize={9}
+                  textAnchor="end"
+                  fontFamily="inherit"
+                >
+                  {item.right}
+                  {unit}
+                </text>
+              )}
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/Modal.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useId, useRef, type ReactNode } from 'react'
+import { CloseIcon } from '../icons.js'
+import { IconButton } from './Button.js'
+
+export interface ModalProps {
+  open: boolean
+  title: string
+  onClose: () => void
+  children?: ReactNode
+  footer?: ReactNode
+}
+
+const FOCUSABLE =
+  'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+
+export function Modal({ open, title, onClose, children, footer }: ModalProps) {
+  const titleId = useId()
+  const modalRef = useRef<HTMLDivElement>(null)
+  const downOnBackdropRef = useRef(false)
+  useEffect(() => {
+    if (!open) return
+    const previouslyFocused = document.activeElement as HTMLElement | null
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    const node = modalRef.current
+    const first = node?.querySelector<HTMLElement>(FOCUSABLE)
+    ;(first ?? node)?.focus()
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+        return
+      }
+      if (e.key !== 'Tab' || !node) return
+      const items = Array.from(node.querySelectorAll<HTMLElement>(FOCUSABLE))
+      if (items.length === 0) {
+        e.preventDefault()
+        return
+      }
+      const f = items[0]!
+      const l = items[items.length - 1]!
+      const active = document.activeElement
+      if (e.shiftKey && active === f) {
+        e.preventDefault()
+        l.focus()
+      } else if (!e.shiftKey && active === l) {
+        e.preventDefault()
+        f.focus()
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      document.body.style.overflow = prevOverflow
+      previouslyFocused?.focus?.()
+    }
+  }, [open, onClose])
+  return (
+    <div
+      className={`backdrop ${open ? 'show' : ''}`}
+      onMouseDown={(e) => {
+        downOnBackdropRef.current = e.target === e.currentTarget
+      }}
+      onClick={(e) => {
+        if (downOnBackdropRef.current && e.target === e.currentTarget) onClose()
+        downOnBackdropRef.current = false
+      }}
+    >
+      <div
+        ref={modalRef}
+        className="modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+      >
+        <div className="modal-h">
+          <h2 id={titleId}>{title}</h2>
+          <IconButton onClick={onClose} aria-label="Close">
+            <CloseIcon />
+          </IconButton>
+        </div>
+        <div className="modal-b">{children}</div>
+        {footer && <div className="modal-f">{footer}</div>}
+      </div>
+    </div>
+  )
+}

package/src/components/MultiSelect.tsx

@@ -0,0 +1,232 @@
+import { useState, useRef, useEffect, useId } from 'react'
+import type { KeyboardEvent } from 'react'
+import { Tag } from './Tag.js'
+
+export interface MultiSelectOption {
+  value: string
+  label: string
+}
+
+export interface MultiSelectProps {
+  options: MultiSelectOption[]
+  value?: string[]
+  onChange?: (values: string[]) => void
+  label?: string
+  placeholder?: string
+  id?: string
+  disabled?: boolean
+  className?: string
+}
+
+export function MultiSelect({
+  options,
+  value = [],
+  onChange,
+  label,
+  placeholder = 'Select…',
+  id,
+  disabled = false,
+  className = '',
+}: MultiSelectProps) {
+  const generatedId = useId()
+  const inputId = id ?? generatedId
+  const listboxId = `${inputId}-lb`
+
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [activeIdx, setActiveIdx] = useState(-1)
+
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const selectedSet = new Set(value)
+
+  const filtered =
+    query.trim() === ''
+      ? options
+      : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+
+  const activeOptionId =
+    activeIdx >= 0 && filtered[activeIdx] ? `${listboxId}-opt-${activeIdx}` : undefined
+
+  useEffect(() => {
+    if (!open) return
+    function handler(e: MouseEvent) {
+      if (!wrapperRef.current?.contains(e.target as Node)) {
+        setOpen(false)
+        setQuery('')
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  function toggle(optValue: string) {
+    const next = new Set(selectedSet)
+    if (next.has(optValue)) next.delete(optValue)
+    else next.add(optValue)
+    onChange?.(Array.from(next))
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (disabled) return
+    if (e.key === 'Escape') {
+      setOpen(false)
+      setQuery('')
+      return
+    }
+    if (e.key === 'Backspace' && query === '' && value.length > 0) {
+      onChange?.(value.slice(0, -1))
+      return
+    }
+    if (!open) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault()
+        setOpen(true)
+        setActiveIdx(0)
+      }
+      return
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, filtered.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(filtered.length - 1)
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (activeIdx >= 0 && filtered[activeIdx]) toggle(filtered[activeIdx].value)
+    } else if (e.key === 'Tab') {
+      setOpen(false)
+      setQuery('')
+    }
+  }
+
+  return (
+    <div ref={wrapperRef} className={`multiselect-wrapper ${className}`.trim()}>
+      {label && (
+        <label htmlFor={inputId} className="sr-only">
+          {label}
+        </label>
+      )}
+      <div
+        className={`multiselect-field${open ? ' multiselect-field--open' : ''}`}
+        onClick={() => {
+          if (!disabled) inputRef.current?.focus()
+        }}
+      >
+        {value.map((v) => {
+          const opt = options.find((o) => o.value === v)
+          return opt ? <Tag key={v} label={opt.label} onRemove={() => toggle(v)} /> : null
+        })}
+        <input
+          ref={inputRef}
+          id={inputId}
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listboxId}
+          aria-autocomplete="list"
+          aria-activedescendant={activeOptionId}
+          aria-label={label}
+          autoComplete="off"
+          spellCheck={false}
+          disabled={disabled}
+          placeholder={value.length === 0 ? placeholder : ''}
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value)
+            setActiveIdx(-1)
+            if (!open) setOpen(true)
+          }}
+          onFocus={() => {
+            if (!disabled) setOpen(true)
+          }}
+          onKeyDown={onKeyDown}
+          className="multiselect-input"
+        />
+        <button
+          type="button"
+          tabIndex={-1}
+          aria-hidden="true"
+          className="combobox-chevron-btn"
+          onClick={(e) => {
+            e.stopPropagation()
+            if (open) {
+              setOpen(false)
+              setQuery('')
+            } else {
+              inputRef.current?.focus()
+              setOpen(true)
+            }
+          }}
+        >
+          <svg
+            className={`select-chevron${open ? ' combobox-chevron-open' : ''}`}
+            viewBox="0 0 16 16"
+            aria-hidden="true"
+            focusable={false}
+          >
+            <path
+              d="M4 6l4 4 4-4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </svg>
+        </button>
+      </div>
+      {open && (
+        <ul
+          id={listboxId}
+          role="listbox"
+          aria-label={label}
+          aria-multiselectable="true"
+          className="select-listbox multiselect-listbox"
+        >
+          {filtered.length === 0 ? (
+            <li className="combobox-empty">No results</li>
+          ) : (
+            filtered.map((opt, idx) => (
+              <li
+                key={opt.value}
+                id={`${listboxId}-opt-${idx}`}
+                role="option"
+                aria-selected={selectedSet.has(opt.value)}
+                data-active={idx === activeIdx ? 'true' : undefined}
+                className="select-option multiselect-option"
+                onMouseDown={(e) => {
+                  e.preventDefault()
+                  toggle(opt.value)
+                }}
+                onMouseEnter={() => setActiveIdx(idx)}
+              >
+                <span className="multiselect-check" aria-hidden="true">
+                  {selectedSet.has(opt.value) && (
+                    <svg viewBox="0 0 12 12" width="12" height="12" fill="none" aria-hidden="true">
+                      <path
+                        d="M2 6l3 3 5-5"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  )}
+                </span>
+                {opt.label}
+              </li>
+            ))
+          )}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/NightingaleChart.tsx

@@ -0,0 +1,101 @@
+export interface NightingaleSegment {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface NightingaleChartProps {
+  segments: NightingaleSegment[]
+  color?: string
+  ariaLabel?: string
+}
+
+const SIZE = 280
+const CX = SIZE / 2
+const CY = SIZE / 2
+const MAX_R = 108
+const MIN_R = 8
+
+function wedgePath(cx: number, cy: number, r: number, sa: number, ea: number): string {
+  const x1 = cx + r * Math.cos(sa)
+  const y1 = cy + r * Math.sin(sa)
+  const x2 = cx + r * Math.cos(ea)
+  const y2 = cy + r * Math.sin(ea)
+  return `M ${cx} ${cy} L ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 1 ${x2.toFixed(2)} ${y2.toFixed(2)} Z`
+}
+
+export function NightingaleChart({
+  segments,
+  color = '#006FFF',
+  ariaLabel = 'Nightingale chart',
+}: NightingaleChartProps) {
+  if (!segments.length) return null
+  const n = segments.length
+  const maxVal = Math.max(...segments.map((s) => s.value), 1)
+  const step = (2 * Math.PI) / n
+  const BASE = -Math.PI / 2
+  const LABEL_R = MAX_R + 16
+  const labelEvery = n <= 8 ? 1 : Math.round(n / 8)
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${SIZE} ${SIZE}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {[0.25, 0.5, 0.75, 1].map((f) => (
+          <circle
+            key={f}
+            cx={CX}
+            cy={CY}
+            r={MIN_R + (MAX_R - MIN_R) * f}
+            fill="none"
+            stroke="rgba(255,255,255,0.06)"
+            strokeWidth={1}
+          />
+        ))}
+        {segments.map((seg, i) => {
+          const sa = BASE + i * step
+          const ea = BASE + (i + 1) * step
+          const r = MIN_R + (seg.value / maxVal) * (MAX_R - MIN_R)
+          const c = seg.color ?? color
+          const mid = sa + step / 2
+          const lx = CX + LABEL_R * Math.cos(mid)
+          const ly = CY + LABEL_R * Math.sin(mid)
+          return (
+            <g key={i}>
+              <path
+                d={wedgePath(CX, CY, r, sa, ea)}
+                fill={c}
+                opacity={0.3 + 0.7 * (seg.value / maxVal)}
+              />
+              {i % labelEvery === 0 && (
+                <text
+                  x={lx.toFixed(1)}
+                  y={ly.toFixed(1)}
+                  fill="#6E7079"
+                  fontSize={8}
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  fontFamily="inherit"
+                >
+                  {seg.label}
+                </text>
+              )}
+            </g>
+          )
+        })}
+        <circle
+          cx={CX}
+          cy={CY}
+          r={MIN_R}
+          fill="#13131A"
+          stroke="rgba(255,255,255,0.1)"
+          strokeWidth={1}
+        />
+      </svg>
+    </div>
+  )
+}