even-toolkit 0.4.0 → 1.0.0

package/web/components/list-item.tsx

@@ -0,0 +1,106 @@
+import { cn } from '../utils/cn';
+import { useRef, useState, useCallback } from 'react';
+import type { ReactNode, TouchEvent as ReactTouchEvent } from 'react';
+import { IcEditTrash } from '../icons/svg-icons';
+
+interface ListItemProps {
+  title: string;
+  subtitle?: string;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  onPress?: () => void;
+  onDelete?: () => void;
+  className?: string;
+}
+
+const SWIPE_THRESHOLD = 80;
+const DELETE_WIDTH = 72;
+const DIRECTION_LOCK_PX = 10;
+
+function ListItem({ title, subtitle, leading, trailing, onPress, onDelete, className }: ListItemProps) {
+  const [offset, setOffset] = useState(0);
+  const [swiping, setSwiping] = useState(false);
+  const startX = useRef(0);
+  const startY = useRef(0);
+  const currentOffset = useRef(0);
+  const direction = useRef<'none' | 'horizontal' | 'vertical'>('none');
+
+  const onTouchStart = useCallback((e: ReactTouchEvent) => {
+    if (!onDelete) return;
+    startX.current = e.touches[0].clientX;
+    startY.current = e.touches[0].clientY;
+    currentOffset.current = offset;
+    direction.current = 'none';
+    setSwiping(true);
+  }, [onDelete, offset]);
+
+  const onTouchMove = useCallback((e: ReactTouchEvent) => {
+    if (!swiping) return;
+    const dx = e.touches[0].clientX - startX.current;
+    const dy = e.touches[0].clientY - startY.current;
+
+    // Lock direction on first significant move
+    if (direction.current === 'none') {
+      if (Math.abs(dx) > DIRECTION_LOCK_PX || Math.abs(dy) > DIRECTION_LOCK_PX) {
+        direction.current = Math.abs(dx) > Math.abs(dy) ? 'horizontal' : 'vertical';
+      }
+      return;
+    }
+
+    // Vertical scroll — don't interfere
+    if (direction.current === 'vertical') return;
+
+    const next = Math.min(0, Math.max(-DELETE_WIDTH, currentOffset.current + dx));
+    setOffset(next);
+  }, [swiping]);
+
+  const onTouchEnd = useCallback(() => {
+    if (!swiping) return;
+    setSwiping(false);
+    if (direction.current === 'vertical') return;
+    setOffset(offset < -SWIPE_THRESHOLD / 2 ? -DELETE_WIDTH : 0);
+  }, [swiping, offset]);
+
+  const Comp = onPress ? 'button' : 'div';
+
+  return (
+    <div className="relative overflow-hidden">
+      {onDelete && offset < 0 && (
+        <button
+          type="button"
+          onClick={onDelete}
+          className="absolute right-0 top-0 bottom-0 flex items-center justify-center bg-negative text-text-highlight cursor-pointer"
+          style={{ width: DELETE_WIDTH }}
+        >
+          <IcEditTrash width={20} height={20} />
+        </button>
+      )}
+      <Comp
+        type={onPress ? 'button' : undefined}
+        onClick={onPress}
+        onTouchStart={onTouchStart}
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
+        className={cn(
+          'flex items-center gap-4 w-full bg-surface p-4 text-left transition-colors relative',
+          onPress && 'cursor-pointer hover:bg-surface-light',
+          className,
+        )}
+        style={{
+          transform: `translateX(${offset}px)`,
+          transition: swiping ? 'none' : 'transform 200ms ease',
+        }}
+      >
+        {leading && <div className="shrink-0">{leading}</div>}
+        <div className="min-w-0 flex-1">
+          <div className="text-[15px] tracking-[-0.15px] font-normal text-text truncate">{title}</div>
+          {subtitle && <div className="text-[13px] tracking-[-0.13px] text-text-dim mt-1 truncate">{subtitle}</div>}
+        </div>
+        {trailing && <div className="shrink-0">{trailing}</div>}
+      </Comp>
+    </div>
+  );
+}
+
+export { ListItem };
+export type { ListItemProps };

package/web/components/loading.tsx

@@ -0,0 +1,79 @@
+import { cn } from '../utils/cn';
+import { useState, useEffect } from 'react';
+
+interface LoadingProps {
+  size?: number;
+  className?: string;
+}
+
+/*
+ * Pixel-art loading spinner — progressive cell-by-cell fill on a 4×4 grid.
+ * Quadrant order: BL → BR → TR → TL (clockwise from bottom-left).
+ * Within each quadrant, cells follow the clockwise sweep direction
+ * so adjacent pixels fill sequentially — no visual jumps.
+ * 32 frames: 16 fill + 16 empty, 50ms each = ~1.6s cycle.
+ */
+
+const fillOrder: [number, number][] = [
+  // BL: column-by-column left→right, top→bottom
+  [2, 0], [3, 0], [2, 1], [3, 1],
+  // BR: column-by-column left→right, top→bottom
+  [2, 2], [3, 2], [2, 3], [3, 3],
+  // TR: column-by-column right→left, bottom→top (reverse — continuing clockwise)
+  [1, 3], [0, 3], [1, 2], [0, 2],
+  // TL: column-by-column right→left, bottom→top (reverse — continuing clockwise)
+  [1, 1], [0, 1], [1, 0], [0, 0],
+];
+
+const N = 16;
+const TOTAL = N * 2;
+
+function Loading({ size = 24, className }: LoadingProps) {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setFrame((f) => (f + 1) % TOTAL);
+    }, 50);
+    return () => clearInterval(id);
+  }, []);
+
+  const filling = frame < N;
+  const t = filling ? frame : frame - N;
+
+  const cellSize = 2;
+  const viewSize = 8;
+
+  return (
+    <div
+      className={cn('inline-flex items-center justify-center', className)}
+      style={{ width: Math.max(size, 8), height: Math.max(size, 8) }}
+    >
+      <svg
+        width={Math.max(size, 8)}
+        height={Math.max(size, 8)}
+        viewBox={`0 0 ${viewSize} ${viewSize}`}
+        shapeRendering="crispEdges"
+      >
+        {fillOrder.map(([r, c], i) => {
+          const on = filling ? i <= t : i > t;
+          return (
+            <rect
+              key={i}
+              x={c * cellSize}
+              y={r * cellSize}
+              width={cellSize}
+              height={cellSize}
+              fill="currentColor"
+              opacity={on ? 1 : 0}
+              style={{ transition: 'opacity 40ms ease' }}
+            />
+          );
+        })}
+      </svg>
+    </div>
+  );
+}
+
+export { Loading };
+export type { LoadingProps };

package/web/components/nav-bar.tsx

@@ -0,0 +1,43 @@
+import { cn } from '../utils/cn';
+
+interface NavItem {
+  id: string;
+  label: string;
+}
+
+interface NavBarProps {
+  items: NavItem[];
+  activeId: string;
+  onNavigate: (id: string) => void;
+  className?: string;
+}
+
+function NavBar({ items, activeId, onNavigate, className }: NavBarProps) {
+  return (
+    <nav
+      className={cn(
+        'flex items-center gap-1 w-full box-border px-3 h-[52px] bg-surface rounded-b-[6px] overflow-x-auto scrollbar-hide',
+        className,
+      )}
+    >
+      {items.map((item) => (
+        <button
+          key={item.id}
+          type="button"
+          onClick={() => onNavigate(item.id)}
+          className={cn(
+            'px-3 text-[17px] tracking-[-0.17px] font-normal cursor-pointer transition-colors whitespace-nowrap',
+            activeId === item.id
+              ? 'text-accent'
+              : 'text-text-dim hover:text-text',
+          )}
+        >
+          {item.label}
+        </button>
+      ))}
+    </nav>
+  );
+}
+
+export { NavBar };
+export type { NavBarProps, NavItem };

package/web/components/nav-header.tsx

@@ -0,0 +1,24 @@
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface NavHeaderProps {
+  title: string;
+  left?: ReactNode;
+  right?: ReactNode;
+  className?: string;
+}
+
+function NavHeader({ title, left, right, className }: NavHeaderProps) {
+  return (
+    <div className={cn('flex items-center justify-between w-full box-border px-3 h-[52px] bg-surface rounded-b-[6px]', className)}>
+      <div className="flex items-center gap-2 shrink-0 min-w-[40px]">{left}</div>
+      <span className="text-[17px] tracking-[-0.17px] font-normal text-text text-center flex-1 truncate">
+        {title}
+      </span>
+      <div className="flex items-center gap-2 justify-end shrink-0 min-w-[40px]">{right}</div>
+    </div>
+  );
+}
+
+export { NavHeader };
+export type { NavHeaderProps };

package/web/components/page.tsx

@@ -0,0 +1,14 @@
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface PageProps {
+  children: ReactNode;
+  className?: string;
+}
+
+function Page({ children, className }: PageProps) {
+  return <div className={cn('min-h-[400px] pb-8', className)}>{children}</div>;
+}
+
+export { Page };
+export type { PageProps };

package/web/components/pill.tsx

@@ -0,0 +1,32 @@
+import { cn } from '../utils/cn';
+
+interface PillProps {
+  label: string;
+  onRemove?: () => void;
+  className?: string;
+}
+
+function Pill({ label, onRemove, className }: PillProps) {
+  return (
+    <span
+      className={cn(
+        'bg-surface-light px-3 py-1.5 rounded-[6px] text-[13px] tracking-[-0.13px] inline-flex items-center gap-2',
+        className,
+      )}
+    >
+      {label}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="text-text-dim hover:text-negative text-[11px] leading-none cursor-pointer bg-transparent border-none p-0"
+        >
+          ✕
+        </button>
+      )}
+    </span>
+  );
+}
+
+export { Pill };
+export type { PillProps };

package/web/components/progress.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: number;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ value, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('h-1 w-full rounded-full bg-surface-lighter overflow-hidden', className)}
+      {...props}
+    >
+      <div
+        className="h-full rounded-full bg-accent transition-all duration-500 ease-out"
+        style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
+      />
+    </div>
+  ),
+);
+
+Progress.displayName = 'Progress';
+
+export { Progress };
+export type { ProgressProps };

package/web/components/radio-group.tsx

@@ -0,0 +1,59 @@
+import { cn } from '../utils/cn';
+
+interface RadioOption {
+  value: string;
+  label: string;
+}
+
+interface RadioGroupProps {
+  options: RadioOption[];
+  value: string;
+  onChange: (value: string) => void;
+  direction?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  className?: string;
+}
+
+function RadioGroup({ options, value, onChange, direction = 'vertical', disabled, className }: RadioGroupProps) {
+  return (
+    <div
+      role="radiogroup"
+      className={cn(
+        'flex gap-3',
+        direction === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',
+        disabled && 'opacity-50 pointer-events-none',
+        className,
+      )}
+    >
+      {options.map((opt) => {
+        const selected = opt.value === value;
+        return (
+          <label
+            key={opt.value}
+            className="inline-flex items-center gap-3 cursor-pointer select-none"
+          >
+            <button
+              type="button"
+              role="radio"
+              aria-checked={selected}
+              disabled={disabled}
+              onClick={() => onChange(opt.value)}
+              className={cn(
+                'relative shrink-0 w-5 h-5 rounded-full border-2 transition-colors cursor-pointer',
+                selected ? 'border-accent' : 'border-surface-lighter',
+              )}
+            >
+              {selected && (
+                <span className="absolute inset-[4px] rounded-full bg-accent" />
+              )}
+            </button>
+            <span className="text-[15px] tracking-[-0.15px] text-text">{opt.label}</span>
+          </label>
+        );
+      })}
+    </div>
+  );
+}
+
+export { RadioGroup };
+export type { RadioGroupProps, RadioOption };

package/web/components/screen-header.tsx

@@ -0,0 +1,26 @@
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface ScreenHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: ReactNode;
+  className?: string;
+}
+
+function ScreenHeader({ title, subtitle, actions, className }: ScreenHeaderProps) {
+  return (
+    <div className={cn('mt-4 mb-3', className)}>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-[24px] tracking-[-0.72px] font-normal">{title}</h1>
+          {subtitle && <p className="text-[13px] tracking-[-0.13px] text-text-dim mt-0.5">{subtitle}</p>}
+        </div>
+        {actions}
+      </div>
+    </div>
+  );
+}
+
+export { ScreenHeader };
+export type { ScreenHeaderProps };