@w5-ui/react 0.1.0

package/src/components/ParetoChart.tsx

@@ -0,0 +1,159 @@
+import { useMemo } from 'react'
+
+export interface ParetoItem {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface ParetoChartProps {
+  items: ParetoItem[]
+  height?: number
+  ariaLabel?: string
+  barColor?: string
+  lineColor?: string
+  threshold?: number
+}
+
+const VW = 400
+const PAD = { t: 12, r: 40, b: 28, l: 8 }
+const DEF_BAR = '#006FFF'
+const DEF_LINE = '#F5A623'
+
+export function ParetoChart({
+  items,
+  height = 160,
+  ariaLabel = 'Pareto chart',
+  barColor = DEF_BAR,
+  lineColor = DEF_LINE,
+  threshold = 0.8,
+}: ParetoChartProps) {
+  const { bars, linePoints, thresholdY, pctLabels, gridLines } = useMemo(() => {
+    if (!items.length)
+      return { bars: [], linePoints: '', thresholdY: null, pctLabels: [], gridLines: [] }
+
+    const sorted = [...items].sort((a, b) => b.value - a.value)
+    const total = sorted.reduce((s, it) => s + it.value, 0) || 1
+    const chartW = VW - PAD.l - PAD.r
+    const chartH = height - PAD.t - PAD.b
+    const bot = PAD.t + chartH
+    const maxV = sorted[0].value
+    const barW = chartW / sorted.length
+    const gap = barW * 0.15
+    const bw = Math.max(barW - gap * 2, 1)
+
+    const gridLines = [0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH)
+
+    const bars = sorted.map((item, i) => {
+      const bh = (item.value / maxV) * chartH
+      const x = PAD.l + i * barW + gap
+      return {
+        x: x.toFixed(1),
+        y: (bot - bh).toFixed(1),
+        w: bw.toFixed(1),
+        h: bh.toFixed(1),
+        label: item.label,
+        color: item.color ?? barColor,
+        key: `b${i}`,
+      }
+    })
+
+    let cumSum = 0
+    const pts: string[] = [`${PAD.l},${bot}`]
+    sorted.forEach((item, i) => {
+      cumSum += item.value
+      const pct = cumSum / total
+      const x = PAD.l + (i + 1) * barW
+      const y = PAD.t + (1 - pct) * chartH
+      pts.push(`${x.toFixed(1)},${y.toFixed(1)}`)
+    })
+    const linePoints = pts.join(' ')
+
+    const thresholdY = threshold > 0 ? (PAD.t + (1 - threshold) * chartH).toFixed(1) : null
+
+    const pctLabels = [0, 50, 100].map((pct) => ({
+      label: `${pct}%`,
+      y: (PAD.t + (1 - pct / 100) * chartH + 3).toFixed(1),
+    }))
+
+    return { bars, linePoints, thresholdY, pctLabels, gridLines }
+  }, [items, height, barColor, threshold])
+
+  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}
+          />
+        ))}
+        {bars.map((b) => (
+          <rect
+            key={b.key}
+            x={b.x}
+            y={b.y}
+            width={b.w}
+            height={b.h}
+            fill={b.color}
+            fillOpacity={0.85}
+            rx={2}
+          />
+        ))}
+        {thresholdY && (
+          <line
+            x1={PAD.l}
+            y1={thresholdY}
+            x2={VW - PAD.r}
+            y2={thresholdY}
+            stroke="rgba(255,255,255,0.3)"
+            strokeWidth={1}
+            strokeDasharray="4 3"
+          />
+        )}
+        <polyline
+          points={linePoints}
+          fill="none"
+          stroke={lineColor}
+          strokeWidth={1.5}
+          strokeLinejoin="round"
+        />
+        {pctLabels.map((pl) => (
+          <text
+            key={pl.label}
+            x={VW - PAD.r + 4}
+            y={pl.y}
+            fill="#6E7079"
+            fontSize={8}
+            fontFamily="inherit"
+          >
+            {pl.label}
+          </text>
+        ))}
+        {bars.map((b, i) => (
+          <text
+            key={`l${i}`}
+            x={(parseFloat(b.x) + parseFloat(b.w) / 2).toFixed(1)}
+            y={height - 4}
+            textAnchor="middle"
+            fill="#6E7079"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {b.label.length > 8 ? `${b.label.slice(0, 7)}…` : b.label}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/PasswordInput.tsx

@@ -0,0 +1,112 @@
+import { useId, useState } from 'react'
+import type { ChangeEvent } from 'react'
+
+export interface PasswordInputProps {
+  label?: string
+  value?: string
+  defaultValue?: string
+  placeholder?: string
+  disabled?: boolean
+  autocomplete?: 'current-password' | 'new-password' | 'off'
+  onChange?: (value: string) => void
+  id?: string
+  className?: string
+}
+
+function EyeIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path
+        d="M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+      <circle cx="8" cy="8" r="2" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  )
+}
+
+function EyeOffIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path
+        d="M2 2l12 12M6.5 6.6A2 2 0 0 0 9.4 9.5M4.2 4.3C2.7 5.3 1.5 7 1.5 8s2.2 4.5 6.5 4.5c1.3 0 2.4-.3 3.3-.8M7 3.6C7.3 3.5 7.7 3.5 8 3.5c4.3 0 6.5 3.5 6.5 4.5 0 .6-.6 1.7-1.7 2.7"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function PasswordInput({
+  label,
+  value: valueProp,
+  defaultValue = '',
+  placeholder,
+  disabled = false,
+  autocomplete = 'current-password',
+  onChange,
+  id,
+  className = '',
+}: PasswordInputProps) {
+  const gid = useId()
+  const inputId = id ?? gid
+  const [shown, setShown] = useState(false)
+  const [internal, setInternal] = useState(defaultValue)
+
+  const value = valueProp !== undefined ? valueProp : internal
+
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    if (valueProp === undefined) setInternal(e.target.value)
+    onChange?.(e.target.value)
+  }
+
+  return (
+    <div className={`pwd-input-wrapper${className ? ` ${className}` : ''}`}>
+      {label && (
+        <label htmlFor={inputId} className="pwd-input__label">
+          {label}
+        </label>
+      )}
+      <div className={`pwd-input${disabled ? ' pwd-input--disabled' : ''}`}>
+        <input
+          id={inputId}
+          type={shown ? 'text' : 'password'}
+          className="pwd-input__field"
+          value={value}
+          placeholder={placeholder}
+          disabled={disabled}
+          autoComplete={autocomplete}
+          onChange={handleChange}
+        />
+        <button
+          type="button"
+          className="pwd-input__toggle"
+          aria-pressed={shown}
+          aria-label={shown ? 'Hide password' : 'Show password'}
+          disabled={disabled}
+          onClick={() => setShown((v) => !v)}
+        >
+          {shown ? <EyeOffIcon /> : <EyeIcon />}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/PieChart.tsx

@@ -0,0 +1,109 @@
+export interface PieSlice {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface PieChartProps {
+  slices: PieSlice[]
+  size?: number
+  ariaLabel?: string
+}
+
+const COLORS = [
+  '#006FFF',
+  '#00C8C8',
+  '#F5A623',
+  '#A878F5',
+  '#FF6B6B',
+  '#00C875',
+  '#7FB6FF',
+  '#6E7079',
+]
+const TAU = 2 * Math.PI
+const START = -Math.PI / 2
+
+function arc(cx: number, cy: number, r: number, a0: number, a1: number): string {
+  const x0 = cx + r * Math.cos(a0)
+  const y0 = cy + r * Math.sin(a0)
+  const x1 = cx + r * Math.cos(a1)
+  const y1 = cy + r * Math.sin(a1)
+  const large = a1 - a0 > Math.PI ? 1 : 0
+  return `M ${cx} ${cy} L ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${x1.toFixed(2)} ${y1.toFixed(2)} Z`
+}
+
+export function PieChart({ slices, size = 140, ariaLabel = 'Pie chart' }: PieChartProps) {
+  const total = slices.reduce((s, sl) => s + sl.value, 0) || 1
+  const cx = size / 2
+  const cy = size / 2
+  const r = (size / 2) * 0.82
+  const LEGEND_ROW = 18
+  const legendH = Math.ceil(slices.length / 2) * LEGEND_ROW + 6
+  const VW = size
+  const VH = size + legendH
+
+  const segments: { path: string; color: string; mid: number }[] = []
+  let angle = START
+  for (const sl of slices) {
+    const span = (sl.value / total) * TAU
+    const color = sl.color ?? COLORS[segments.length % COLORS.length]
+    segments.push({ path: arc(cx, cy, r, angle, angle + span), color, mid: angle + span / 2 })
+    angle += span
+  }
+
+  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"
+      >
+        {segments.map((seg, i) => (
+          <path key={i} d={seg.path} fill={seg.color} stroke="#1a1d2b" strokeWidth={1.5} />
+        ))}
+
+        {slices.map((sl, i) => {
+          const pct = Math.round((sl.value / total) * 100)
+          if (pct < 5) return null
+          const mid = segments[i].mid
+          const lr = r * 0.6
+          const tx = cx + lr * Math.cos(mid)
+          const ty = cy + lr * Math.sin(mid)
+          return (
+            <text
+              key={i}
+              x={tx.toFixed(1)}
+              y={ty.toFixed(1)}
+              fill="#fff"
+              fontSize={9}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              fontFamily="inherit"
+              fontWeight="600"
+            >
+              {pct}%
+            </text>
+          )
+        })}
+
+        {slices.map((sl, i) => {
+          const col = Math.floor(i / Math.ceil(slices.length / 2))
+          const row = i % Math.ceil(slices.length / 2)
+          const colW = VW / 2
+          const lx = col * colW + 10
+          const ly = size + 6 + row * LEGEND_ROW
+          const c = sl.color ?? COLORS[i % COLORS.length]
+          return (
+            <g key={i}>
+              <rect x={lx} y={ly + 2} width={8} height={8} rx={2} fill={c} />
+              <text x={lx + 12} y={ly + 9} fill="#A4A7B5" fontSize={9} fontFamily="inherit">
+                {sl.label} ({sl.value})
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/Pill.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode, CSSProperties } from 'react'
+
+export type PillVariant = 'success' | 'warn' | 'danger' | 'info' | 'neutral'
+
+export interface PillProps {
+  variant?: PillVariant
+  showDot?: boolean
+  children: ReactNode
+  style?: CSSProperties
+  className?: string
+}
+
+export function Pill({
+  variant = 'neutral',
+  showDot = true,
+  children,
+  style,
+  className = '',
+}: PillProps) {
+  return (
+    <span className={`pill pill-${variant} ${className}`.trim()} style={style}>
+      {showDot && <span className="dot" aria-hidden="true" />}
+      {children}
+    </span>
+  )
+}

package/src/components/PolarHeatmap.tsx

@@ -0,0 +1,118 @@
+export interface PolarCell {
+  row: number
+  col: number
+  value: number
+}
+
+export interface PolarHeatmapProps {
+  data: PolarCell[]
+  rows: number
+  cols: number
+  colLabels?: string[]
+  color?: string
+  ariaLabel?: string
+}
+
+const SIZE = 280
+const CX = SIZE / 2
+const CY = SIZE / 2
+const MIN_R = 24
+const MAX_R = 110
+const BASE = -Math.PI / 2
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '')
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]
+}
+
+function annularSector(ir: number, or: number, sa: number, ea: number): string {
+  const { cos, sin } = Math
+  const f = (v: number) => v.toFixed(2)
+  return [
+    `M ${f(CX + ir * cos(sa))} ${f(CY + ir * sin(sa))}`,
+    `A ${f(ir)} ${f(ir)} 0 0 1 ${f(CX + ir * cos(ea))} ${f(CY + ir * sin(ea))}`,
+    `L ${f(CX + or * cos(ea))} ${f(CY + or * sin(ea))}`,
+    `A ${f(or)} ${f(or)} 0 0 0 ${f(CX + or * cos(sa))} ${f(CY + or * sin(sa))}`,
+    'Z',
+  ].join(' ')
+}
+
+export function PolarHeatmap({
+  data,
+  rows,
+  cols,
+  colLabels = [],
+  color = '#006FFF',
+  ariaLabel = 'Polar heatmap',
+}: PolarHeatmapProps) {
+  if (!data.length) return null
+  const maxVal = Math.max(...data.map((d) => d.value), 1)
+  const ringH = (MAX_R - MIN_R) / rows
+  const segA = (2 * Math.PI) / cols
+  const [r, g, b] = hexToRgb(color)
+  const LABEL_R = MAX_R + 14
+  const labelEvery = cols <= 12 ? 1 : cols <= 24 ? 3 : Math.round(cols / 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"
+      >
+        {Array.from({ length: rows + 1 }, (_, i) => MIN_R + i * ringH).map((rr, i) => (
+          <circle
+            key={i}
+            cx={CX}
+            cy={CY}
+            r={rr.toFixed(2)}
+            fill="none"
+            stroke="rgba(255,255,255,0.05)"
+            strokeWidth={0.5}
+          />
+        ))}
+        {data.map((cell, i) => {
+          const ir = MIN_R + cell.row * ringH
+          const or = ir + ringH - 0.5
+          const sa = BASE + cell.col * segA + 0.01
+          const ea = BASE + (cell.col + 1) * segA - 0.01
+          const norm = cell.value / maxVal
+          return (
+            <path
+              key={i}
+              d={annularSector(ir, or, sa, ea)}
+              fill={`rgba(${r},${g},${b},${(0.08 + 0.92 * norm).toFixed(3)})`}
+            />
+          )
+        })}
+        {colLabels.map((label, i) => {
+          if (i % labelEvery !== 0) return null
+          const a = BASE + (i + 0.5) * segA
+          return (
+            <text
+              key={i}
+              x={(CX + LABEL_R * Math.cos(a)).toFixed(1)}
+              y={(CY + LABEL_R * Math.sin(a)).toFixed(1)}
+              fill="#6E7079"
+              fontSize={7}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              fontFamily="inherit"
+            >
+              {label}
+            </text>
+          )
+        })}
+        <circle
+          cx={CX}
+          cy={CY}
+          r={MIN_R}
+          fill="#13131A"
+          stroke="rgba(255,255,255,0.08)"
+          strokeWidth={0.5}
+        />
+      </svg>
+    </div>
+  )
+}

package/src/components/Popover.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
+
+export type PopoverPlacement = 'bottom-start' | 'bottom-end' | 'bottom'
+
+export interface PopoverProps {
+  label: string
+  variant?: 'ghost' | 'primary'
+  title?: string
+  children: ReactNode
+  placement?: PopoverPlacement
+}
+
+const FOCUSABLE =
+  'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+
+export function Popover({
+  label,
+  variant = 'ghost',
+  title,
+  children,
+  placement = 'bottom-start',
+}: PopoverProps) {
+  const titleId = useId()
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const panel = panelRef.current
+    const first = panel?.querySelector<HTMLElement>(FOCUSABLE)
+    ;(first ?? panel)?.focus()
+
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        setOpen(false)
+        triggerRef.current?.focus()
+        return
+      }
+      if (e.key === 'Tab' && panel) {
+        const items = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE))
+        if (!items.length) {
+          e.preventDefault()
+          return
+        }
+        const first = items[0]!
+        const last = items[items.length - 1]!
+        const active = document.activeElement
+        if (e.shiftKey && active === first) {
+          e.preventDefault()
+          last.focus()
+        } else if (!e.shiftKey && active === last) {
+          e.preventDefault()
+          first.focus()
+        }
+      }
+    }
+
+    function onPointer(e: PointerEvent) {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+
+    window.addEventListener('keydown', onKey)
+    document.addEventListener('pointerdown', onPointer)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      document.removeEventListener('pointerdown', onPointer)
+    }
+  }, [open])
+
+  return (
+    <div ref={rootRef} className="popover-root">
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`btn btn-${variant}`}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen((o) => !o)}
+      >
+        {label}
+      </button>
+      {open && (
+        <div
+          ref={panelRef}
+          role="dialog"
+          aria-labelledby={title ? titleId : undefined}
+          className={`popover popover-${placement}`}
+          tabIndex={-1}
+        >
+          {title && (
+            <div id={titleId} className="popover-h">
+              {title}
+            </div>
+          )}
+          <div className="popover-b">{children}</div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ProgressBar.tsx

@@ -0,0 +1,33 @@
+export interface ProgressBarProps {
+  value: number
+  label?: string
+  valueText?: string
+  color?: string
+}
+
+export function ProgressBar({ value, label, valueText, color = '#006FFF' }: ProgressBarProps) {
+  const clamped = Math.max(0, Math.min(100, value))
+  const displayed = valueText ?? `${Math.round(clamped)}%`
+  const hasHeader = label !== undefined || valueText !== undefined
+  return (
+    <div className="pb">
+      {hasHeader && (
+        <div className="pb-header">
+          {label && <span className="pb-label">{label}</span>}
+          <span className="pb-value">{displayed}</span>
+        </div>
+      )}
+      <div
+        className="pb-track"
+        role="progressbar"
+        aria-valuenow={Math.round(clamped)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label={label}
+        aria-valuetext={displayed}
+      >
+        <div className="pb-fill" style={{ width: `${clamped}%`, background: color }} />
+      </div>
+    </div>
+  )
+}