@w5-ui/react 0.1.0

package/src/components/SegmentedControl.tsx

@@ -0,0 +1,78 @@
+import { useState, useRef } from 'react'
+import type { KeyboardEvent } from 'react'
+
+export interface SegmentOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface SegmentedControlProps {
+  label: string
+  options: SegmentOption[]
+  value?: string
+  defaultValue?: string
+  onChange?: (value: string) => void
+}
+
+export function SegmentedControl({
+  label,
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+}: SegmentedControlProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? options[0]?.value ?? '')
+  const active = controlledValue !== undefined ? controlledValue : internalValue
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  function select(val: string) {
+    if (controlledValue === undefined) setInternalValue(val)
+    onChange?.(val)
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
+    const enabled = options.filter((o) => !o.disabled)
+    const idx = enabled.findIndex((o) => o.value === active)
+    let next = -1
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      next = (idx + 1) % enabled.length
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      next = (idx - 1 + enabled.length) % enabled.length
+    }
+    if (next !== -1) {
+      select(enabled[next].value)
+      const btns = rootRef.current?.querySelectorAll<HTMLButtonElement>('button[role="radio"]')
+      btns?.[next]?.focus()
+    }
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      role="radiogroup"
+      aria-label={label}
+      className="seg-ctrl"
+      onKeyDown={handleKeyDown}
+    >
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          role="radio"
+          aria-checked={active === opt.value}
+          disabled={opt.disabled}
+          tabIndex={active === opt.value ? 0 : -1}
+          className={['seg-ctrl__btn', active === opt.value && 'seg-ctrl__btn--active']
+            .filter(Boolean)
+            .join(' ')}
+          onClick={() => select(opt.value)}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/components/Select.tsx

@@ -0,0 +1,158 @@
+import { useState, useRef, useEffect, useId } from 'react'
+import type { KeyboardEvent } from 'react'
+
+export interface SelectOption {
+  value: string
+  label: string
+}
+
+export interface SelectProps {
+  options: SelectOption[]
+  value?: string
+  onChange?: (value: string) => void
+  label?: string
+  placeholder?: string
+  id?: string
+  disabled?: boolean
+  className?: string
+}
+
+export function Select({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = 'Select…',
+  id,
+  disabled = false,
+  className = '',
+}: SelectProps) {
+  const generatedId = useId()
+  const triggerId = id ?? generatedId
+  const listboxId = `${triggerId}-lb`
+  const [open, setOpen] = useState(false)
+  const [activeIdx, setActiveIdx] = useState(-1)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  const selected = options.find((o) => o.value === value)
+  const displayLabel = selected?.label ?? placeholder
+
+  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 toggle() {
+    if (disabled) return
+    setOpen((prev) => {
+      if (!prev) {
+        const idx = options.findIndex((o) => o.value === value)
+        setActiveIdx(idx >= 0 ? idx : 0)
+      }
+      return !prev
+    })
+  }
+
+  function pick(val: string) {
+    onChange?.(val)
+    setOpen(false)
+    triggerRef.current?.focus()
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (disabled) return
+    if (e.key === 'Escape') {
+      setOpen(false)
+      triggerRef.current?.focus()
+      return
+    }
+    if (!open) {
+      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+        e.preventDefault()
+        const idx = options.findIndex((o) => o.value === value)
+        setActiveIdx(idx >= 0 ? idx : 0)
+        setOpen(true)
+      }
+      return
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, options.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(options.length - 1)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      if (activeIdx >= 0) pick(options[activeIdx].value)
+    } else if (e.key === 'Tab') {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <div ref={wrapperRef} className={`select-wrapper ${className}`.trim()}>
+      {label && (
+        <label htmlFor={triggerId} className="sr-only">
+          {label}
+        </label>
+      )}
+      <button
+        ref={triggerRef}
+        id={triggerId}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={listboxId}
+        aria-label={label}
+        disabled={disabled}
+        className="select-trigger"
+        onClick={toggle}
+        onKeyDown={onKeyDown}
+        type="button"
+      >
+        <span>{displayLabel}</span>
+        <svg className="select-chevron" 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>
+      {open && (
+        <ul id={listboxId} role="listbox" aria-label={label} className="select-listbox">
+          {options.map((opt, idx) => (
+            <li
+              key={opt.value}
+              role="option"
+              aria-selected={opt.value === value}
+              data-active={idx === activeIdx ? 'true' : undefined}
+              className="select-option"
+              onMouseDown={(e) => {
+                e.preventDefault()
+                pick(opt.value)
+              }}
+              onMouseEnter={() => setActiveIdx(idx)}
+            >
+              {opt.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/SelectionToolbar.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react'
+import { CloseIcon } from '../icons.js'
+
+export interface SelectionToolbarAction {
+  label: string
+  onClick: () => void
+  variant?: 'default' | 'danger'
+}
+
+export interface SelectionToolbarProps {
+  count: number
+  actions: SelectionToolbarAction[]
+  onClear: () => void
+  /** sr-only label for the toolbar (default: "Selection actions") */
+  ariaLabel?: string
+  children?: ReactNode
+}
+
+export function SelectionToolbar({
+  count,
+  actions,
+  onClear,
+  ariaLabel = 'Selection actions',
+  children,
+}: SelectionToolbarProps) {
+  if (count === 0) return null
+  return (
+    <div className="sel-toolbar" role="toolbar" aria-label={ariaLabel}>
+      <span className="sel-toolbar__count" aria-live="polite" aria-atomic="true">
+        <strong>{count}</strong> selected
+      </span>
+      <div className="sel-toolbar__actions">
+        {actions.map((a) => (
+          <button
+            key={a.label}
+            type="button"
+            className={`sel-toolbar__btn${a.variant === 'danger' ? ' sel-toolbar__btn--danger' : ''}`}
+            onClick={a.onClick}
+          >
+            {a.label}
+          </button>
+        ))}
+        {children}
+      </div>
+      <button
+        type="button"
+        className="sel-toolbar__clear icon-btn"
+        onClick={onClear}
+        aria-label="Clear selection"
+      >
+        <CloseIcon aria-hidden="true" />
+      </button>
+    </div>
+  )
+}

package/src/components/Signal.tsx

@@ -0,0 +1,19 @@
+export interface SignalProps {
+  weak?: boolean
+  label?: string
+}
+
+export function Signal({ weak = false, label }: SignalProps) {
+  return (
+    <span
+      className={`signal ${weak ? 'weak' : ''}`.trim()}
+      role="img"
+      aria-label={label ?? (weak ? 'Signal: weak' : 'Signal: strong')}
+    >
+      <i />
+      <i />
+      <i />
+      <i />
+    </span>
+  )
+}

package/src/components/Skeleton.tsx

@@ -0,0 +1,37 @@
+import type { CSSProperties } from 'react'
+
+export type SkeletonVariant = 'text' | 'title' | 'stat' | 'circle' | 'block'
+
+export interface SkeletonProps {
+  variant?: SkeletonVariant
+  width?: number | string
+  height?: number | string
+  className?: string
+  style?: CSSProperties
+  ariaLabel?: string
+}
+
+export function Skeleton({
+  variant = 'text',
+  width,
+  height,
+  className = '',
+  style,
+  ariaLabel = 'Loading',
+}: SkeletonProps) {
+  const variantClass = variant === 'block' ? '' : variant
+  const mergedStyle: CSSProperties = {
+    width: width ?? (variant === 'circle' ? height : undefined),
+    height,
+    ...style,
+  }
+  return (
+    <span
+      className={`skeleton ${variantClass} ${className}`.trim()}
+      style={mergedStyle}
+      role="status"
+      aria-label={ariaLabel}
+      aria-busy="true"
+    />
+  )
+}

package/src/components/SkipLink.tsx

@@ -0,0 +1,19 @@
+import type { AnchorHTMLAttributes } from 'react'
+
+export interface SkipLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string
+  children?: React.ReactNode
+}
+
+export function SkipLink({
+  href = '#main-content',
+  children = 'Skip to main content',
+  className = '',
+  ...rest
+}: SkipLinkProps) {
+  return (
+    <a className={`skip-link ${className}`.trim()} href={href} {...rest}>
+      {children}
+    </a>
+  )
+}

package/src/components/Slider.tsx

@@ -0,0 +1,74 @@
+import { useState, useId } from 'react'
+import type { ChangeEvent, CSSProperties } from 'react'
+
+export interface SliderProps {
+  label?: string
+  value?: number
+  defaultValue?: number
+  min?: number
+  max?: number
+  step?: number
+  suffix?: string
+  disabled?: boolean
+  onChange?: (value: number) => void
+  id?: string
+  className?: string
+}
+
+export function Slider({
+  label,
+  value: valueProp,
+  defaultValue = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  suffix,
+  disabled = false,
+  onChange,
+  id,
+  className = '',
+}: SliderProps) {
+  const generatedId = useId()
+  const inputId = id ?? generatedId
+  const [internalValue, setInternalValue] = useState(defaultValue)
+  const value = valueProp !== undefined ? valueProp : internalValue
+
+  const pct = max === min ? 0 : ((value - min) / (max - min)) * 100
+  const fillStyle: CSSProperties = { '--slider-fill': `${pct}%` } as CSSProperties
+
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    const next = Number(e.target.value)
+    if (valueProp === undefined) setInternalValue(next)
+    onChange?.(next)
+  }
+
+  return (
+    <div className={`slider ${className}`.trim()}>
+      {label && (
+        <div className="slider__header">
+          <label htmlFor={inputId} className="slider__label">
+            {label}
+          </label>
+          <span className="slider__value" aria-live="polite">
+            {value}
+            {suffix && <span className="slider__suffix">{suffix}</span>}
+          </span>
+        </div>
+      )}
+      <input
+        id={inputId}
+        type="range"
+        className="slider__track"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        disabled={disabled}
+        style={fillStyle}
+        onChange={handleChange}
+        aria-label={label}
+        aria-valuetext={suffix ? `${value} ${suffix}` : undefined}
+      />
+    </div>
+  )
+}

package/src/components/SlopeChart.tsx

@@ -0,0 +1,205 @@
+export interface SlopeItem {
+  label: string
+  before: number
+  after: number
+}
+
+export interface SlopeChartProps {
+  items: SlopeItem[]
+  labelBefore?: string
+  labelAfter?: string
+  unit?: string
+  ariaLabel?: string
+  positiveIsGood?: boolean
+}
+
+const VW = 340
+const COL_L = 108
+const COL_R = 232
+const PAD_T = 26
+const CHART_H = 192
+const PAD_B = 8
+const SVG_H = PAD_T + CHART_H + PAD_B
+const DOT_R = 4
+const LABEL_GAP = 15
+
+function nudge(ys: number[], gap: number): number[] {
+  const out = [...ys]
+  const ord = out.map((y, i) => ({ y, i })).sort((a, b) => a.y - b.y)
+  for (let k = 1; k < ord.length; k++) {
+    if (ord[k].y < ord[k - 1].y + gap) ord[k].y = ord[k - 1].y + gap
+  }
+  for (let k = ord.length - 2; k >= 0; k--) {
+    if (ord[k].y > ord[k + 1].y - gap) ord[k].y = ord[k + 1].y - gap
+  }
+  const res: number[] = Array.from({ length: ys.length })
+  ord.forEach(({ y, i }) => {
+    res[i] = y
+  })
+  return res
+}
+
+export function SlopeChart({
+  items,
+  labelBefore = 'Before',
+  labelAfter = 'After',
+  unit = '',
+  ariaLabel = 'Slope chart',
+  positiveIsGood = false,
+}: SlopeChartProps) {
+  if (!items.length) return null
+
+  const allVals = items.flatMap((it) => [it.before, it.after])
+  const minV = Math.min(...allVals)
+  const maxV = Math.max(...allVals)
+  const range = maxV - minV || 1
+  const ty = (v: number) => PAD_T + (1 - (v - minV) / range) * CHART_H
+
+  const leftDotY = items.map((it) => ty(it.before))
+  const rightDotY = items.map((it) => ty(it.after))
+  const leftLabelY = nudge(leftDotY, LABEL_GAP)
+  const rightLabelY = nudge(rightDotY, LABEL_GAP)
+
+  const itemsWithColor = items.map((it) => {
+    const diff = it.after - it.before
+    const c = diff === 0 ? '#A4A7B5' : diff > 0 === positiveIsGood ? '#00C875' : '#FF7B7B'
+    return { ...it, c }
+  })
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${SVG_H}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        <text
+          x={COL_L}
+          y={14}
+          fill="#6E7079"
+          fontSize={10}
+          textAnchor="middle"
+          fontFamily="inherit"
+        >
+          {labelBefore}
+        </text>
+        <text
+          x={COL_R}
+          y={14}
+          fill="#6E7079"
+          fontSize={10}
+          textAnchor="middle"
+          fontFamily="inherit"
+        >
+          {labelAfter}
+        </text>
+        <line
+          x1={COL_L}
+          y1={PAD_T}
+          x2={COL_L}
+          y2={PAD_T + CHART_H}
+          stroke="rgba(255,255,255,0.07)"
+          strokeWidth={1}
+        />
+        <line
+          x1={COL_R}
+          y1={PAD_T}
+          x2={COL_R}
+          y2={PAD_T + CHART_H}
+          stroke="rgba(255,255,255,0.07)"
+          strokeWidth={1}
+        />
+
+        {itemsWithColor.map((it, i) => {
+          const ly = leftDotY[i]
+          const ry = rightDotY[i]
+          const lly = leftLabelY[i]
+          const rly = rightLabelY[i]
+          return (
+            <g key={i}>
+              <line
+                x1={COL_L}
+                y1={ly}
+                x2={COL_R}
+                y2={ry}
+                stroke={it.c}
+                strokeWidth={1.5}
+                opacity={0.65}
+              />
+              {Math.abs(lly - ly) > 1 && (
+                <line
+                  x1={COL_L - 6}
+                  y1={ly}
+                  x2={COL_L - 6}
+                  y2={lly}
+                  stroke="rgba(255,255,255,0.12)"
+                  strokeWidth={0.75}
+                />
+              )}
+              {Math.abs(rly - ry) > 1 && (
+                <line
+                  x1={COL_R + 6}
+                  y1={ry}
+                  x2={COL_R + 6}
+                  y2={rly}
+                  stroke="rgba(255,255,255,0.12)"
+                  strokeWidth={0.75}
+                />
+              )}
+              <circle cx={COL_L} cy={ly} r={DOT_R} fill={it.c} />
+              <circle cx={COL_R} cy={ry} r={DOT_R} fill={it.c} />
+              <text
+                x={COL_L - 10}
+                y={lly + 4}
+                fill="#A4A7B5"
+                fontSize={9}
+                textAnchor="end"
+                fontFamily="inherit"
+              >
+                {it.label}
+              </text>
+              <text
+                x={COL_L - 10}
+                y={lly + 15}
+                fill="#6E7079"
+                fontSize={9}
+                textAnchor="end"
+                fontFamily="inherit"
+                style={{ fontVariantNumeric: 'tabular-nums' }}
+              >
+                {it.before}
+                {unit}
+              </text>
+              <text
+                x={COL_R + 10}
+                y={rly + 4}
+                fill="#A4A7B5"
+                fontSize={9}
+                textAnchor="start"
+                fontFamily="inherit"
+                style={{ fontVariantNumeric: 'tabular-nums' }}
+              >
+                {it.after}
+                {unit}
+              </text>
+              <text
+                x={COL_R + 10}
+                y={rly + 15}
+                fill={it.c}
+                fontSize={9}
+                textAnchor="start"
+                fontFamily="inherit"
+                style={{ fontVariantNumeric: 'tabular-nums' }}
+              >
+                {it.after > it.before ? '+' : ''}
+                {it.after - it.before}
+                {unit}
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}