@w5-ui/react 0.1.0

package/src/components/CIDRInput.tsx

@@ -0,0 +1,191 @@
+import { useId, useRef, useState } from 'react'
+import type { ReactNode, ClipboardEvent, KeyboardEvent, ChangeEvent } from 'react'
+
+export interface CIDRInputProps {
+  label?: string
+  value?: string
+  defaultValue?: string
+  disabled?: boolean
+  onChange?: (value: string) => void
+  id?: string
+  className?: string
+}
+
+function clampOctet(s: string): string {
+  if (s === '') return s
+  const n = Number(s)
+  if (isNaN(n)) return s
+  return String(Math.min(255, Math.max(0, n)))
+}
+
+function clampPrefix(s: string): string {
+  if (s === '') return s
+  const n = Number(s)
+  if (isNaN(n)) return s
+  return String(Math.min(32, Math.max(0, n)))
+}
+
+function parseCIDR(cidr: string): [string, string, string, string, string] {
+  const [ip = '0.0.0.0', prefix = '24'] = cidr.split('/')
+  const parts = ip.split('.')
+  return [parts[0] ?? '0', parts[1] ?? '0', parts[2] ?? '0', parts[3] ?? '0', prefix]
+}
+
+export function CIDRInput({
+  label,
+  value: valueProp,
+  defaultValue = '0.0.0.0/0',
+  disabled = false,
+  onChange,
+  id,
+  className = '',
+}: CIDRInputProps) {
+  const gid = useId()
+  const inputId = id ?? gid
+  const [internal, setInternal] = useState<[string, string, string, string, string]>(() =>
+    parseCIDR(valueProp ?? defaultValue),
+  )
+  const refs = useRef<(HTMLInputElement | null)[]>([null, null, null, null, null])
+
+  const fields = valueProp !== undefined ? parseCIDR(valueProp) : internal
+
+  function focusAt(i: number) {
+    const el = refs.current[i]
+    if (el) {
+      el.focus()
+      el.select()
+    }
+  }
+
+  function commitFields(next: [string, string, string, string, string]) {
+    if (valueProp === undefined) setInternal(next)
+    onChange?.(`${next.slice(0, 4).join('.')}/${next[4]}`)
+  }
+
+  function handleChange(i: number, e: ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value
+    const next = [...fields] as [string, string, string, string, string]
+    if (i < 4) {
+      if (!/^\d{0,3}$/.test(raw)) return
+      next[i] = clampOctet(raw)
+      commitFields(next)
+      if (raw.length === 3 && i < 4) focusAt(i + 1)
+    } else {
+      if (!/^\d{0,2}$/.test(raw)) return
+      next[4] = clampPrefix(raw)
+      commitFields(next)
+    }
+  }
+
+  function handleKey(i: number, e: KeyboardEvent<HTMLInputElement>) {
+    const el = refs.current[i]!
+    if (e.key === '.' && i < 3) {
+      e.preventDefault()
+      focusAt(i + 1)
+    } else if (e.key === '/' && i <= 3) {
+      e.preventDefault()
+      focusAt(4)
+    } else if (e.key === 'ArrowRight' && el.selectionStart === el.value.length) {
+      if (i < 4) {
+        e.preventDefault()
+        focusAt(i + 1)
+      }
+    } else if (e.key === 'ArrowLeft' && el.selectionStart === 0) {
+      if (i > 0) {
+        e.preventDefault()
+        focusAt(i - 1)
+      }
+    } else if (e.key === 'Backspace' && el.value === '' && i > 0) {
+      e.preventDefault()
+      focusAt(i - 1)
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent<HTMLInputElement>) {
+    const text = e.clipboardData.getData('text').trim()
+    if (/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\/\d{1,2}$/.test(text)) {
+      e.preventDefault()
+      const [ip = '0.0.0.0', prefix = '0'] = text.split('/')
+      const next = [...ip.split('.').map(clampOctet), clampPrefix(prefix)] as [
+        string,
+        string,
+        string,
+        string,
+        string,
+      ]
+      if (valueProp === undefined) setInternal(next)
+      onChange?.(`${next.slice(0, 4).join('.')}/${next[4]}`)
+      focusAt(4)
+    }
+  }
+
+  return (
+    <div className={`cidr-input-wrapper ${className}`.trim()}>
+      {label && (
+        <label htmlFor={`${inputId}-0`} className="cidr-input__label">
+          {label}
+        </label>
+      )}
+      <div
+        className={`cidr-input${disabled ? ' cidr-input--disabled' : ''}`}
+        role="group"
+        aria-label={label ?? 'CIDR'}
+      >
+        {([0, 1, 2, 3] as const).flatMap((i) => {
+          const nodes: ReactNode[] = [
+            <input
+              key={`o${i}`}
+              ref={(el) => {
+                refs.current[i] = el
+              }}
+              id={i === 0 ? `${inputId}-0` : undefined}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              role="spinbutton"
+              aria-label={`Octet ${i + 1} of 4`}
+              aria-valuenow={fields[i] === '' ? 0 : Number(fields[i])}
+              aria-valuemin={0}
+              aria-valuemax={255}
+              value={fields[i]}
+              disabled={disabled}
+              maxLength={3}
+              className="cidr-input__octet"
+              onChange={(e) => handleChange(i, e)}
+              onKeyDown={(e) => handleKey(i, e)}
+              onPaste={handlePaste}
+              onFocus={(e) => e.currentTarget.select()}
+            />,
+          ]
+          nodes.push(
+            <span key={`d${i}`} className="cidr-input__dot" aria-hidden="true">
+              {i < 3 ? '.' : '/'}
+            </span>,
+          )
+          return nodes
+        })}
+        <input
+          ref={(el) => {
+            refs.current[4] = el
+          }}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          role="spinbutton"
+          aria-label="Prefix length"
+          aria-valuenow={fields[4] === '' ? 0 : Number(fields[4])}
+          aria-valuemin={0}
+          aria-valuemax={32}
+          value={fields[4]}
+          disabled={disabled}
+          maxLength={2}
+          className="cidr-input__prefix"
+          onChange={(e) => handleChange(4, e)}
+          onKeyDown={(e) => handleKey(4, e)}
+          onPaste={handlePaste}
+          onFocus={(e) => e.currentTarget.select()}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/CalendarHeatmap.tsx

@@ -0,0 +1,117 @@
+import { useMemo } from 'react'
+
+export interface CalendarDay {
+  date: string
+  value: number
+}
+
+export interface CalendarHeatmapProps {
+  data: CalendarDay[]
+  maxValue?: number
+  ariaLabel?: string
+}
+
+const CELL = 10
+const GAP = 2
+const STEP = CELL + GAP
+const WEEKS = 52
+const DAYS = 7
+const LEFT = 22
+const TOP = 16
+const COLORS = ['rgba(255,255,255,0.06)', '#0d2a5e', '#1a4da6', '#2979ff', '#5ba4ff']
+const DAY_LABELS = ['Mon', '', 'Wed', '', 'Fri', '', '']
+
+function lvl(v: number, mx: number): number {
+  if (!v) return 0
+  const r = v / mx
+  return r < 0.25 ? 1 : r < 0.5 ? 2 : r < 0.75 ? 3 : 4
+}
+
+function toDateStr(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+const W = LEFT + WEEKS * STEP
+const H = TOP + DAYS * STEP + 2
+
+export function CalendarHeatmap({
+  data,
+  maxValue,
+  ariaLabel = 'Calendar heatmap',
+}: CalendarHeatmapProps) {
+  const { cells, monthLabels } = useMemo(() => {
+    const byDate = new Map(data.map((d) => [d.date, d.value]))
+    const mx = maxValue ?? Math.max(1, ...data.map((d) => d.value))
+
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+    const start = new Date(today)
+    start.setDate(start.getDate() - WEEKS * 7 + 1)
+    start.setDate(start.getDate() - start.getDay())
+
+    const cells: { x: number; y: number; fill: string }[] = []
+    const seenMonths = new Set<string>()
+    const monthLabels: { x: number; label: string }[] = []
+
+    for (let w = 0; w < WEEKS; w++) {
+      for (let d = 0; d < DAYS; d++) {
+        const date = new Date(start)
+        date.setDate(start.getDate() + w * 7 + d)
+        const monthKey = `${date.getFullYear()}-${date.getMonth()}`
+        if (!seenMonths.has(monthKey) && d === 0) {
+          seenMonths.add(monthKey)
+          monthLabels.push({
+            x: LEFT + w * STEP,
+            label: date.toLocaleString('en', { month: 'short' }),
+          })
+        }
+        const val = byDate.get(toDateStr(date)) ?? 0
+        cells.push({ x: LEFT + w * STEP, y: TOP + d * STEP, fill: COLORS[lvl(val, mx)] })
+      }
+    }
+
+    return { cells, monthLabels }
+  }, [data, maxValue])
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%', overflowX: 'auto' }}>
+      <svg
+        viewBox={`0 0 ${W} ${H}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {DAY_LABELS.map((label, d) =>
+          label ? (
+            <text
+              key={d}
+              x={LEFT - 3}
+              y={TOP + d * STEP + CELL * 0.8}
+              textAnchor="end"
+              fill="#6E7079"
+              fontSize={7}
+              fontFamily="inherit"
+            >
+              {label}
+            </text>
+          ) : null,
+        )}
+        {monthLabels.map((m) => (
+          <text
+            key={`${m.label}-${m.x}`}
+            x={m.x}
+            y={TOP - 3}
+            fill="#6E7079"
+            fontSize={7}
+            fontFamily="inherit"
+          >
+            {m.label}
+          </text>
+        ))}
+        {cells.map((c, i) => (
+          <rect key={i} x={c.x} y={c.y} width={CELL} height={CELL} rx={2} fill={c.fill} />
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/Callout.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode } from 'react'
+
+export type CalloutVariant = 'info' | 'success' | 'warn' | 'danger' | 'tip'
+
+export interface CalloutProps {
+  variant?: CalloutVariant
+  title?: string
+  children: ReactNode
+}
+
+function InfoIcon() {
+  return (
+    <svg className="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM7.25 5.5a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM7 7.5h2v4H7v-4Z"
+      />
+    </svg>
+  )
+}
+
+function SuccessIcon() {
+  return (
+    <svg className="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm3.78 5.47-4.25 4.5a.75.75 0 0 1-1.06.03L4.72 9.22a.75.75 0 1 1 1.06-1.06l1.22 1.22 3.72-3.94a.75.75 0 1 1 1.06 1.03Z"
+      />
+    </svg>
+  )
+}
+
+function WarnIcon() {
+  return (
+    <svg className="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M8.9 1.6a1 1 0 0 0-1.8 0L.6 13a1 1 0 0 0 .9 1.5h13a1 1 0 0 0 .9-1.5L8.9 1.6ZM7.25 6.5a.75.75 0 1 1 1.5 0v3a.75.75 0 0 1-1.5 0v-3Zm.75 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
+      />
+    </svg>
+  )
+}
+
+function DangerIcon() {
+  return (
+    <svg className="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM5.97 5.97a.75.75 0 0 1 1.06 0L8 6.94l.97-.97a.75.75 0 1 1 1.06 1.06L9.06 8l.97.97a.75.75 0 0 1-1.06 1.06L8 9.06l-.97.97a.75.75 0 0 1-1.06-1.06L6.94 8l-.97-.97a.75.75 0 0 1 0-1.06Z"
+      />
+    </svg>
+  )
+}
+
+function TipIcon() {
+  return (
+    <svg className="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M8 1a5 5 0 0 1 3 9.01V11H5v-.99A5 5 0 0 1 8 1Zm-1 12h2v1.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V13Z" />
+    </svg>
+  )
+}
+
+const ICON: Record<CalloutVariant, () => JSX.Element> = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warn: WarnIcon,
+  danger: DangerIcon,
+  tip: TipIcon,
+}
+
+export function Callout({ variant = 'info', title, children }: CalloutProps) {
+  const Icon = ICON[variant]
+  return (
+    <div className={`callout callout--${variant}`} role="note">
+      <Icon />
+      <div className="callout-body">
+        {title && <div className="callout-title">{title}</div>}
+        <div>{children}</div>
+      </div>
+    </div>
+  )
+}

package/src/components/CandlestickChart.tsx

@@ -0,0 +1,113 @@
+export interface CandlestickBar {
+  label: string
+  open: number
+  close: number
+  high: number
+  low: number
+}
+
+export interface CandlestickChartProps {
+  bars: CandlestickBar[]
+  yRange?: [number, number]
+  height?: number
+  unit?: string
+  upColor?: string
+  downColor?: string
+  ariaLabel?: string
+}
+
+const VW = 340
+const PAD_L = 28
+const PAD_R = 8
+const PAD_T = 8
+const PAD_B = 20
+const PLOT_W = VW - PAD_L - PAD_R
+
+export function CandlestickChart({
+  bars,
+  yRange,
+  height = 180,
+  unit = '',
+  upColor = '#00C875',
+  downColor = '#FF7B7B',
+  ariaLabel = 'Candlestick chart',
+}: CandlestickChartProps) {
+  if (!bars.length) return null
+
+  const n = bars.length
+  const PLOT_H = height - PAD_T - PAD_B
+
+  const allVals = bars.flatMap((b) => [b.low, b.high])
+  const minV = yRange ? yRange[0] : Math.min(...allVals)
+  const maxV = yRange ? yRange[1] : Math.max(...allVals)
+  const range = maxV - minV || 1
+
+  const tx = (i: number) => PAD_L + ((i + 0.5) / n) * PLOT_W
+  const ty = (v: number) => PAD_T + (1 - (v - minV) / range) * PLOT_H
+
+  const candleW = Math.max(4, (PLOT_W / n) * 0.5)
+  const yTicks = [minV, (minV + maxV) / 2, maxV]
+
+  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"
+      >
+        {yTicks.map((v, i) => (
+          <g key={i}>
+            <line
+              x1={PAD_L}
+              y1={ty(v)}
+              x2={PAD_L + PLOT_W}
+              y2={ty(v)}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={PAD_L - 4}
+              y={ty(v) + 4}
+              fill="#6E7079"
+              fontSize={8}
+              textAnchor="end"
+              fontFamily="inherit"
+            >
+              {Math.round(v)}
+              {unit}
+            </text>
+          </g>
+        ))}
+
+        {bars.map((b, i) => {
+          const x = tx(i)
+          const color = b.close >= b.open ? upColor : downColor
+          const bodyTop = ty(Math.max(b.open, b.close))
+          const bodyBot = ty(Math.min(b.open, b.close))
+          const bodyH = Math.max(1, bodyBot - bodyTop)
+          return (
+            <g key={i}>
+              <line x1={x} y1={ty(b.high)} x2={x} y2={ty(b.low)} stroke={color} strokeWidth={1} />
+              <rect x={x - candleW / 2} y={bodyTop} width={candleW} height={bodyH} fill={color} />
+            </g>
+          )
+        })}
+
+        {bars.map((b, i) => (
+          <text
+            key={i}
+            x={tx(i)}
+            y={height - 4}
+            fill="#6E7079"
+            fontSize={9}
+            textAnchor="middle"
+            fontFamily="inherit"
+          >
+            {b.label}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/Card.tsx

@@ -0,0 +1,27 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  span?: number
+  children?: ReactNode
+}
+
+export function Card({ span, style, className = '', children, ...rest }: CardProps) {
+  const merged: CSSProperties = { ...style, ...(span ? { gridColumn: `span ${span}` } : null) }
+  return (
+    <div className={`card ${className}`.trim()} style={merged} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  children?: ReactNode
+}
+
+export function CardTitle({ children, className = '', ...rest }: CardTitleProps) {
+  return (
+    <h3 className={className} {...rest}>
+      {children}
+    </h3>
+  )
+}

package/src/components/Carousel.tsx

@@ -0,0 +1,78 @@
+import { useState, useCallback } from 'react'
+
+export interface CarouselSlide {
+  id: string
+  title: string
+  description?: string
+  color?: string
+}
+
+export interface CarouselProps {
+  slides: CarouselSlide[]
+  label: string
+  className?: string
+}
+
+export function Carousel({ slides, label, className }: CarouselProps) {
+  const [index, setIndex] = useState(0)
+
+  const prev = useCallback(
+    () => setIndex((i) => (i - 1 + slides.length) % slides.length),
+    [slides.length],
+  )
+  const next = useCallback(() => setIndex((i) => (i + 1) % slides.length), [slides.length])
+
+  return (
+    <section
+      className={`carousel${className ? ' ' + className : ''}`}
+      aria-roledescription="carousel"
+      aria-label={label}
+    >
+      <div className="carousel-track" aria-live="polite" aria-atomic="false">
+        {slides.map((slide, i) => (
+          <div
+            key={slide.id}
+            role="group"
+            aria-roledescription="slide"
+            aria-label={`${i + 1} of ${slides.length}`}
+            className={`carousel-slide${i === index ? ' is-active' : ''}`}
+            aria-hidden={i !== index ? true : undefined}
+          >
+            {slide.color && (
+              <div
+                className="carousel-slide-accent"
+                style={{ background: slide.color }}
+                aria-hidden="true"
+              />
+            )}
+            <div className="carousel-slide-body">
+              <div className="carousel-slide-title">{slide.title}</div>
+              {slide.description && <div className="carousel-slide-desc">{slide.description}</div>}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="carousel-controls">
+        <button type="button" className="carousel-btn" aria-label="Previous slide" onClick={prev}>
+          &#8249;
+        </button>
+        <div role="tablist" aria-label="Choose slide to display" className="carousel-indicators">
+          {slides.map((slide, i) => (
+            <button
+              key={slide.id}
+              type="button"
+              role="tab"
+              aria-selected={i === index}
+              aria-label={`Slide ${i + 1}: ${slide.title}`}
+              className={`carousel-dot${i === index ? ' is-active' : ''}`}
+              onClick={() => setIndex(i)}
+            />
+          ))}
+        </div>
+        <button type="button" className="carousel-btn" aria-label="Next slide" onClick={next}>
+          &#8250;
+        </button>
+      </div>
+    </section>
+  )
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,42 @@
+import { useId, useRef, useEffect } from 'react'
+import type { InputHTMLAttributes } from 'react'
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string
+  indeterminate?: boolean
+}
+
+export function Checkbox({
+  label,
+  indeterminate = false,
+  id,
+  className = '',
+  ...rest
+}: CheckboxProps) {
+  const generatedId = useId()
+  const inputId = id ?? generatedId
+  const ref = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate
+  }, [indeterminate])
+
+  const input = (
+    <input
+      ref={ref}
+      type="checkbox"
+      id={inputId}
+      className={`checkbox ${className}`.trim()}
+      {...rest}
+    />
+  )
+
+  if (!label) return input
+
+  return (
+    <label className="checkbox-label" htmlFor={inputId}>
+      {input}
+      <span>{label}</span>
+    </label>
+  )
+}