@w5-ui/react 0.1.0

package/src/components/SunburstChart.tsx

@@ -0,0 +1,142 @@
+import { useMemo } from 'react'
+
+export interface SunburstNode {
+  label: string
+  value?: number
+  color?: string
+  children?: SunburstNode[]
+}
+
+export interface SunburstChartProps {
+  root: SunburstNode
+  ariaLabel?: string
+}
+
+const PALETTE = ['#006FFF', '#00C875', '#A78BFA', '#F5A623', '#50B8E7', '#F04949']
+const CX = 160,
+  CY = 160,
+  R_HOLE = 48,
+  R_MID = 97,
+  R_OUTER = 142,
+  GAP = 0.01
+
+function arcPath(r1: number, r2: number, a1: number, a2: number): string {
+  const lg = a2 - a1 > Math.PI ? 1 : 0
+  const p = (r: number, a: number) =>
+    `${(CX + r * Math.cos(a)).toFixed(1)},${(CY + r * Math.sin(a)).toFixed(1)}`
+  return `M${p(r2, a1)} A${r2},${r2} 0 ${lg},1 ${p(r2, a2)} L${p(r1, a2)} A${r1},${r1} 0 ${lg},0 ${p(r1, a1)} Z`
+}
+
+export function SunburstChart({ root, ariaLabel = 'Sunburst chart' }: SunburstChartProps) {
+  const { paths, labels, total } = useMemo(() => {
+    const items = root.children ?? []
+    const total = items.reduce(
+      (s, c) => s + (c.value ?? c.children?.reduce((cs, x) => cs + (x.value ?? 0), 0) ?? 0),
+      0,
+    )
+    if (!total)
+      return {
+        paths: [] as { d: string; fill: string }[],
+        labels: [] as { x: number; y: number; anchor: 'start' | 'end' | 'middle'; text: string }[],
+        total: 0,
+      }
+
+    const paths: { d: string; fill: string }[] = []
+    const labels: { x: number; y: number; anchor: 'start' | 'end' | 'middle'; text: string }[] = []
+    let a = -Math.PI / 2
+
+    for (let i = 0; i < items.length; i++) {
+      const c = items[i]
+      const fill = c.color ?? PALETTE[i % PALETTE.length]
+      const cv = c.value ?? c.children?.reduce((s, x) => s + (x.value ?? 0), 0) ?? 0
+      const span = (cv / total) * 2 * Math.PI
+      const a2 = a + span
+      const midA = (a + a2) / 2
+
+      paths.push({ d: arcPath(R_MID + 2, R_OUTER, a + GAP, a2 - GAP), fill })
+
+      if (span > 0.22) {
+        const r = (R_MID + 2 + R_OUTER) / 2
+        const anchor: 'start' | 'end' | 'middle' =
+          Math.cos(midA) > 0.15 ? 'start' : Math.cos(midA) < -0.15 ? 'end' : 'middle'
+        labels.push({
+          x: CX + r * Math.cos(midA),
+          y: CY + r * Math.sin(midA) + 4,
+          anchor,
+          text: c.label,
+        })
+      }
+
+      if (c.children?.length) {
+        let ca = a
+        for (const child of c.children) {
+          const cs = ((child.value ?? 0) / cv) * span
+          if (cs > GAP * 2)
+            paths.push({
+              d: arcPath(R_HOLE, R_MID - 2, ca + GAP, ca + cs - GAP),
+              fill: fill + '99',
+            })
+          ca += cs
+        }
+      } else {
+        paths.push({ d: arcPath(R_HOLE, R_MID - 2, a + GAP, a2 - GAP), fill: fill + '99' })
+      }
+
+      a = a2
+    }
+
+    return { paths, labels, total }
+  }, [root])
+
+  const fmt = (n: number) => (n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n))
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox="0 0 320 320"
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {paths.map((p, i) => (
+          <path key={i} d={p.d} fill={p.fill} />
+        ))}
+        {labels.map((l, i) => (
+          <text
+            key={i}
+            x={l.x.toFixed(1)}
+            y={l.y.toFixed(1)}
+            textAnchor={l.anchor}
+            fill="#fff"
+            fontSize={10}
+            fontWeight={600}
+            fontFamily="inherit"
+          >
+            {l.text}
+          </text>
+        ))}
+        <text
+          x={CX}
+          y={CY - 8}
+          textAnchor="middle"
+          fill="#fff"
+          fontSize={22}
+          fontWeight={700}
+          fontFamily="inherit"
+        >
+          {fmt(total)}
+        </text>
+        <text
+          x={CX}
+          y={CY + 12}
+          textAnchor="middle"
+          fill="#6E7079"
+          fontSize={10}
+          fontFamily="inherit"
+        >
+          {root.label}
+        </text>
+      </svg>
+    </div>
+  )
+}

package/src/components/SwitchPortGrid.tsx

@@ -0,0 +1,59 @@
+export type SwitchPortStatus = 'up' | 'poe' | 'down'
+
+export interface SwitchPort {
+  status: SwitchPortStatus
+  speed?: string
+  label?: string
+}
+
+export interface SwitchPortGridProps {
+  ports: SwitchPort[]
+  columns?: number
+  onPortClick?: (index: number) => void
+  ariaLabel?: string
+}
+
+const STATUS_LABEL: Record<SwitchPortStatus, string> = {
+  up: 'Connected',
+  poe: 'PoE Active',
+  down: 'Down',
+}
+
+export function SwitchPortGrid({
+  ports,
+  columns = 12,
+  onPortClick,
+  ariaLabel = 'Switch port panel',
+}: SwitchPortGridProps) {
+  return (
+    <ul
+      className="spg"
+      aria-label={ariaLabel}
+      style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
+    >
+      {ports.map((port, i) => {
+        const n = i + 1
+        const desc = `Port ${n}: ${STATUS_LABEL[port.status]}${port.speed ? ` · ${port.speed}` : ''}${port.label ? ` · ${port.label}` : ''}`
+        return (
+          <li key={i}>
+            <button
+              type="button"
+              className="spg__btn"
+              data-status={port.status}
+              aria-label={desc}
+              onClick={() => onPortClick?.(i)}
+            >
+              <span className="spg__num">{n}</span>
+              {port.speed && <span className={`spg__speed--${port.status}`}>{port.speed}</span>}
+              {port.status === 'poe' && (
+                <span className="spg__poe" aria-hidden="true">
+                  PoE
+                </span>
+              )}
+            </button>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

package/src/components/Tabs.tsx

@@ -0,0 +1,91 @@
+import { useRef, type HTMLAttributes, type KeyboardEvent, type ReactNode } from 'react'
+
+export interface TabItem {
+  id: string
+  label: ReactNode
+  badge?: ReactNode
+}
+
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  id: string
+  active: string
+  children?: ReactNode
+}
+
+export function TabPanel({ id, active, children, ...rest }: TabPanelProps) {
+  const isActive = id === active
+  return (
+    <div
+      role="tabpanel"
+      id={`tabpanel-${id}`}
+      aria-labelledby={`tab-${id}`}
+      hidden={!isActive}
+      tabIndex={0}
+      {...rest}
+    >
+      {isActive ? children : null}
+    </div>
+  )
+}
+
+export interface TabsProps {
+  items: TabItem[]
+  active: string
+  onChange?: (id: string) => void
+  ariaLabel?: string
+}
+
+export function Tabs({ items, active, onChange, ariaLabel }: TabsProps) {
+  const refs = useRef<(HTMLButtonElement | null)[]>([])
+
+  const focusAt = (idx: number) => {
+    const next = items[(idx + items.length) % items.length]
+    if (!next) return
+    onChange?.(next.id)
+    refs.current[(idx + items.length) % items.length]?.focus()
+  }
+
+  const onKey = (e: KeyboardEvent<HTMLButtonElement>, i: number) => {
+    if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      focusAt(i + 1)
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      focusAt(i - 1)
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      focusAt(0)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      focusAt(items.length - 1)
+    }
+  }
+
+  return (
+    <div className="tabs" role="tablist" aria-label={ariaLabel}>
+      {items.map((t, i) => {
+        const selected = t.id === active
+        return (
+          <button
+            key={t.id}
+            ref={(el) => {
+              refs.current[i] = el
+            }}
+            type="button"
+            role="tab"
+            id={`tab-${t.id}`}
+            aria-selected={selected}
+            aria-controls={`tabpanel-${t.id}`}
+            tabIndex={selected ? 0 : -1}
+            className={`tab ${selected ? 'active' : ''}`}
+            onClick={() => onChange?.(t.id)}
+            onKeyDown={(e) => onKey(e, i)}
+          >
+            {t.label}
+            {t.badge !== undefined && <span className="badge">{t.badge}</span>}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/Tag.tsx

@@ -0,0 +1,37 @@
+export interface TagProps {
+  label: string
+  onRemove?: () => void
+  className?: string
+}
+
+export function Tag({ label, onRemove, className = '' }: TagProps) {
+  return (
+    <span className={`tag ${className}`.trim()}>
+      <span className="tag__label">{label}</span>
+      {onRemove && (
+        <button
+          type="button"
+          className="tag__remove"
+          aria-label={`Remove ${label} filter`}
+          onClick={onRemove}
+        >
+          <svg
+            viewBox="0 0 10 10"
+            width="10"
+            height="10"
+            fill="none"
+            aria-hidden="true"
+            focusable={false}
+          >
+            <path
+              d="M2 2l6 6M8 2l-6 6"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      )}
+    </span>
+  )
+}

package/src/components/TagInput.tsx

@@ -0,0 +1,99 @@
+import { useId, useRef, useState } from 'react'
+import type { KeyboardEvent } from 'react'
+import { Tag } from './Tag.js'
+
+export interface TagInputProps {
+  label?: string
+  value?: string[]
+  defaultValue?: string[]
+  onChange?: (tags: string[]) => void
+  placeholder?: string
+  id?: string
+  disabled?: boolean
+  className?: string
+}
+
+export function TagInput({
+  label,
+  value: valueProp,
+  defaultValue = [],
+  onChange,
+  placeholder = 'Type and press Enter…',
+  id,
+  disabled = false,
+  className = '',
+}: TagInputProps) {
+  const gid = useId()
+  const inputId = id ?? gid
+  const listId = `${inputId}-list`
+
+  const [internal, setInternal] = useState<string[]>(defaultValue)
+  const [draft, setDraft] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const tags = valueProp !== undefined ? valueProp : internal
+
+  function commit(next: string[]) {
+    if (valueProp === undefined) setInternal(next)
+    onChange?.(next)
+  }
+
+  function addTag(raw: string) {
+    const trimmed = raw.trim()
+    if (!trimmed || tags.includes(trimmed)) return
+    commit([...tags, trimmed])
+    setDraft('')
+  }
+
+  function removeTag(index: number) {
+    commit(tags.filter((_, i) => i !== index))
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter' || e.key === ',' || e.key === 'Tab') {
+      if (draft.trim()) {
+        e.preventDefault()
+        addTag(draft)
+      }
+    } else if (e.key === 'Backspace' && draft === '' && tags.length > 0) {
+      removeTag(tags.length - 1)
+    }
+  }
+
+  return (
+    <div className={`tag-input-wrapper${className ? ` ${className}` : ''}`}>
+      {label && (
+        <label htmlFor={inputId} className="tag-input__label">
+          {label}
+        </label>
+      )}
+      <div
+        id={listId}
+        role="group"
+        aria-label={label ?? 'Tags'}
+        className={`tag-input${disabled ? ' tag-input--disabled' : ''}`}
+        onClick={() => inputRef.current?.focus()}
+      >
+        {tags.map((t, i) => (
+          <Tag key={t} label={t} onRemove={disabled ? undefined : () => removeTag(i)} />
+        ))}
+        <input
+          ref={inputRef}
+          id={inputId}
+          type="text"
+          className="tag-input__field"
+          value={draft}
+          disabled={disabled}
+          placeholder={tags.length === 0 ? placeholder : ''}
+          aria-label={label ?? 'Add tag'}
+          autoComplete="off"
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={() => {
+            if (draft.trim()) addTag(draft)
+          }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/Textarea.tsx

@@ -0,0 +1,9 @@
+import type { TextareaHTMLAttributes } from 'react'
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  rows?: number
+}
+
+export function Textarea({ className = '', rows = 4, ...rest }: TextareaProps) {
+  return <textarea className={`input textarea ${className}`.trim()} rows={rows} {...rest} />
+}

package/src/components/ThresholdAreaChart.tsx

@@ -0,0 +1,113 @@
+import { useId } from 'react'
+
+export interface ThresholdAreaChartProps {
+  values: number[]
+  labels?: string[]
+  threshold: number
+  thresholdLabel?: string
+  belowColor?: string
+  aboveColor?: string
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD = { t: 16, r: 8, b: 28, l: 8 }
+
+export function ThresholdAreaChart({
+  values,
+  labels = [],
+  threshold,
+  thresholdLabel,
+  belowColor = '#00C875',
+  aboveColor = '#FF7B7B',
+  height = 160,
+  ariaLabel = 'Threshold area chart',
+}: ThresholdAreaChartProps) {
+  const uid = useId()
+  const n = values.length
+  if (!n) return null
+
+  const chartW = VW - PAD.l - PAD.r
+  const chartH = height - PAD.t - PAD.b
+  const maxV = Math.max(...values, threshold, 1)
+
+  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 threshY = toY(threshold)
+  const baseY = PAD.t + chartH
+  const pts = values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`)
+  const d = `M ${pts.join(' L ')} L ${toX(n - 1).toFixed(1)},${baseY} L ${toX(0).toFixed(1)},${baseY} Z`
+  const tLabel = thresholdLabel ?? String(threshold)
+
+  const belowId = `${uid}b`
+  const aboveId = `${uid}a`
+
+  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"
+      >
+        <defs>
+          <clipPath id={belowId}>
+            <rect x={0} y={threshY} width={VW} height={height - threshY} />
+          </clipPath>
+          <clipPath id={aboveId}>
+            <rect x={0} y={0} width={VW} height={threshY} />
+          </clipPath>
+        </defs>
+        {[0.25, 0.5, 0.75, 1].map((f, i) => (
+          <line
+            key={i}
+            x1={PAD.l}
+            y1={PAD.t + (1 - f) * chartH}
+            x2={VW - PAD.r}
+            y2={PAD.t + (1 - f) * chartH}
+            stroke="rgba(255,255,255,0.06)"
+            strokeWidth={1}
+          />
+        ))}
+        <path d={d} fill={belowColor} fillOpacity={0.7} clipPath={`url(#${belowId})`} />
+        <path d={d} fill={aboveColor} fillOpacity={0.7} clipPath={`url(#${aboveId})`} />
+        <line
+          x1={PAD.l}
+          y1={threshY}
+          x2={VW - PAD.r}
+          y2={threshY}
+          stroke={aboveColor}
+          strokeWidth={1}
+          strokeDasharray="4 3"
+          opacity={0.8}
+        />
+        <text
+          x={VW - PAD.r - 2}
+          y={threshY - 4}
+          fill={aboveColor}
+          fontSize={9}
+          textAnchor="end"
+          fontFamily="inherit"
+          opacity={0.9}
+        >
+          {tLabel}
+        </text>
+        {labels.map((lbl, i) => (
+          <text
+            key={i}
+            x={toX(i)}
+            y={height - 4}
+            textAnchor="middle"
+            fill="#6E7079"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {lbl}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/TimePicker.tsx

@@ -0,0 +1,144 @@
+import { useId, useRef, useState } from 'react'
+import type { KeyboardEvent, ChangeEvent } from 'react'
+
+export interface TimePickerProps {
+  label?: string
+  value?: string
+  defaultValue?: string
+  disabled?: boolean
+  onChange?: (value: string) => void
+  id?: string
+  className?: string
+}
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0')
+}
+
+function parseTime(t: string): [number, number] {
+  const [h = '0', m = '0'] = t.split(':')
+  return [
+    Math.min(23, Math.max(0, parseInt(h, 10) || 0)),
+    Math.min(59, Math.max(0, parseInt(m, 10) || 0)),
+  ]
+}
+
+export function TimePicker({
+  label,
+  value: valueProp,
+  defaultValue = '00:00',
+  disabled = false,
+  onChange,
+  id,
+  className = '',
+}: TimePickerProps) {
+  const gid = useId()
+  const inputId = id ?? gid
+  const [internal, setInternal] = useState<[number, number]>(() =>
+    parseTime(valueProp ?? defaultValue),
+  )
+  const refs = useRef<[HTMLInputElement | null, HTMLInputElement | null]>([null, null])
+
+  const [hours, minutes] = valueProp !== undefined ? parseTime(valueProp) : internal
+
+  function commit(h: number, m: number) {
+    if (valueProp === undefined) setInternal([h, m])
+    onChange?.(`${pad(h)}:${pad(m)}`)
+  }
+
+  function handleKey(field: 0 | 1, e: KeyboardEvent<HTMLInputElement>) {
+    const val = field === 0 ? hours : minutes
+    const max = field === 0 ? 23 : 59
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const next = val >= max ? 0 : val + 1
+      if (field === 0) commit(next, minutes)
+      else commit(hours, next)
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const next = val <= 0 ? max : val - 1
+      if (field === 0) commit(next, minutes)
+      else commit(hours, next)
+    } else if ((e.key === ':' || e.key === 'ArrowRight') && field === 0) {
+      e.preventDefault()
+      refs.current[1]?.focus()
+    } else if (e.key === 'ArrowLeft' && field === 1) {
+      e.preventDefault()
+      refs.current[0]?.focus()
+    }
+  }
+
+  function handleChange(field: 0 | 1, e: ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value
+    if (!/^\d{0,2}$/.test(raw)) return
+    const n = parseInt(raw, 10)
+    if (isNaN(n)) return
+    const max = field === 0 ? 23 : 59
+    const clamped = Math.min(max, n)
+    if (field === 0) commit(clamped, minutes)
+    else commit(hours, clamped)
+    if (raw.length === 2 && field === 0) refs.current[1]?.focus()
+  }
+
+  return (
+    <div className={`time-picker-wrapper${className ? ` ${className}` : ''}`}>
+      {label && (
+        <label htmlFor={`${inputId}-h`} className="time-picker__label">
+          {label}
+        </label>
+      )}
+      <div
+        className={`time-picker${disabled ? ' time-picker--disabled' : ''}`}
+        role="group"
+        aria-label={label ?? 'Time'}
+      >
+        <input
+          ref={(el) => {
+            refs.current[0] = el
+          }}
+          id={`${inputId}-h`}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          role="spinbutton"
+          aria-label="Hours"
+          aria-valuenow={hours}
+          aria-valuemin={0}
+          aria-valuemax={23}
+          aria-valuetext={pad(hours)}
+          value={pad(hours)}
+          disabled={disabled}
+          maxLength={2}
+          className="time-picker__field"
+          onChange={(e) => handleChange(0, e)}
+          onKeyDown={(e) => handleKey(0, e)}
+          onFocus={(e) => e.currentTarget.select()}
+        />
+        <span className="time-picker__sep" aria-hidden="true">
+          :
+        </span>
+        <input
+          ref={(el) => {
+            refs.current[1] = el
+          }}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          role="spinbutton"
+          aria-label="Minutes"
+          aria-valuenow={minutes}
+          aria-valuemin={0}
+          aria-valuemax={59}
+          aria-valuetext={pad(minutes)}
+          value={pad(minutes)}
+          disabled={disabled}
+          maxLength={2}
+          className="time-picker__field"
+          onChange={(e) => handleChange(1, e)}
+          onKeyDown={(e) => handleKey(1, e)}
+          onFocus={(e) => e.currentTarget.select()}
+        />
+      </div>
+    </div>
+  )
+}