even-toolkit 0.4.0 → 1.0.0

package/web/components/cta-group.tsx

@@ -0,0 +1,85 @@
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface CTAAction {
+  label: string;
+  onClick: () => void;
+  variant?: 'default' | 'highlight' | 'danger';
+  icon?: ReactNode;
+}
+
+interface CTAGroupProps {
+  actions: CTAAction[];
+  layout?: 'stacked' | 'side-by-side' | 'icon-row';
+  className?: string;
+}
+
+function CTAGroup({ actions, layout = 'stacked', className }: CTAGroupProps) {
+  if (layout === 'icon-row') {
+    return (
+      <div className={cn('flex items-center gap-3 px-3', className)}>
+        {actions.map((action) => (
+          <button
+            key={action.label}
+            type="button"
+            onClick={action.onClick}
+            className="flex-1 flex flex-col items-center gap-1 h-[72px] justify-center rounded-[6px] bg-surface text-text cursor-pointer hover:bg-surface-light transition-colors"
+          >
+            {action.icon && <span className="w-6 h-6">{action.icon}</span>}
+            <span className="text-[13px] tracking-[-0.13px]">{action.label}</span>
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  if (layout === 'side-by-side') {
+    return (
+      <div className={cn('flex items-center gap-3 px-3', className)}>
+        {actions.map((action) => (
+          <button
+            key={action.label}
+            type="button"
+            onClick={action.onClick}
+            className={cn(
+              'flex-1 h-12 rounded-[6px] text-[17px] tracking-[-0.17px] font-normal cursor-pointer transition-colors',
+              action.variant === 'highlight'
+                ? 'bg-accent text-text-highlight hover:opacity-90'
+                : action.variant === 'danger'
+                  ? 'bg-surface text-negative hover:bg-surface-light'
+                  : 'bg-surface text-text hover:bg-surface-light',
+            )}
+          >
+            {action.label}
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  // stacked (default)
+  return (
+    <div className={cn('flex flex-col gap-3 px-3', className)}>
+      {actions.map((action) => (
+        <button
+          key={action.label}
+          type="button"
+          onClick={action.onClick}
+          className={cn(
+            'w-full h-12 rounded-[6px] text-[17px] tracking-[-0.17px] font-normal cursor-pointer transition-colors',
+            action.variant === 'highlight'
+              ? 'bg-accent text-text-highlight hover:opacity-90'
+              : action.variant === 'danger'
+                ? 'bg-surface text-negative hover:bg-surface-light'
+                : 'bg-surface text-text hover:bg-surface-light',
+          )}
+        >
+          {action.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export { CTAGroup };
+export type { CTAGroupProps, CTAAction };

package/web/components/dialog.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface DialogAction {
+  label: string;
+  onClick: () => void;
+  variant?: 'default' | 'danger';
+}
+
+interface DialogProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  icon?: ReactNode;
+  children?: ReactNode;
+  actions?: DialogAction[];
+  className?: string;
+}
+
+function Dialog({ open, onClose, title, icon, children, actions, className }: DialogProps) {
+  const [visible, setVisible] = React.useState(false);
+  const [closing, setClosing] = React.useState(false);
+
+  React.useEffect(() => {
+    if (open) {
+      setVisible(true);
+      setClosing(false);
+    } else if (visible) {
+      setClosing(true);
+      const timer = setTimeout(() => { setVisible(false); setClosing(false); }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  React.useEffect(() => {
+    if (!visible) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [visible, onClose]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center px-6"
+      style={{ animation: closing ? 'fadeOut 200ms ease forwards' : 'fadeIn 200ms ease' }}
+    >
+      <div className="absolute inset-0 bg-overlay" onClick={onClose} />
+      <div
+        className={cn(
+          'relative z-10 w-full max-w-[311px] bg-surface rounded-[6px] shadow-[0_4px_24px_rgba(0,0,0,0.16)] p-4',
+          className,
+        )}
+        style={{ animation: closing ? 'fadeOut 200ms ease forwards' : 'fadeIn 250ms ease' }}
+      >
+        <div className="flex items-start gap-2 mb-2">
+          {icon && <div className="shrink-0 w-5 h-5 text-text mt-0.5">{icon}</div>}
+          <h2 className="text-[15px] tracking-[-0.15px] font-normal text-text">{title}</h2>
+        </div>
+        {children && (
+          <div className="text-[13px] tracking-[-0.13px] text-text-dim leading-[18px]">
+            {children}
+          </div>
+        )}
+        {actions && actions.length > 0 && (
+          <div className="flex gap-3 mt-4">
+            {actions.map((action) => (
+              <button
+                key={action.label}
+                type="button"
+                onClick={action.onClick}
+                className={cn(
+                  'flex-1 h-10 rounded-[6px] text-[15px] tracking-[-0.15px] font-normal cursor-pointer transition-colors',
+                  action.variant === 'danger'
+                    ? 'bg-surface-light text-negative hover:bg-surface-lighter'
+                    : 'bg-surface-light text-text hover:bg-surface-lighter',
+                )}
+              >
+                {action.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { Dialog };
+export type { DialogProps, DialogAction };

package/web/components/divider.tsx

@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const dividerVariants = cva('border-t border-border w-full', {
+  variants: {
+    variant: {
+      default: 'my-0',
+      spaced: 'my-6',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+interface DividerProps
+  extends React.HTMLAttributes<HTMLHRElement>,
+    VariantProps<typeof dividerVariants> {}
+
+function Divider({ className, variant, ...props }: DividerProps) {
+  return <hr className={cn(dividerVariants({ variant, className }))} {...props} />;
+}
+
+export { Divider, dividerVariants };
+export type { DividerProps };

package/web/components/empty-state.tsx

@@ -0,0 +1,32 @@
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: { label: string; onClick: () => void };
+  className?: string;
+}
+
+function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-16 text-center', className)}>
+      {icon && <div className="mb-4 text-text-dim">{icon}</div>}
+      <h3 className="text-[17px] tracking-[-0.17px] font-normal text-text mb-1">{title}</h3>
+      {description && <p className="text-[13px] tracking-[-0.13px] text-text-dim max-w-xs">{description}</p>}
+      {action && (
+        <button
+          type="button"
+          onClick={action.onClick}
+          className="mt-4 h-12 px-4 rounded-[6px] bg-accent text-text-highlight text-[17px] tracking-[-0.17px] font-normal cursor-pointer hover:opacity-90 transition-opacity"
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export { EmptyState };
+export type { EmptyStateProps };

package/web/components/file-upload.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+import { IcEditUploadToCloud } from '../icons/svg-icons';
+
+interface FileUploadProps {
+  onFiles: (files: File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number; // bytes
+  label?: string;
+  className?: string;
+}
+
+function FileUpload({ onFiles, accept, multiple = false, maxSize, label, className }: FileUploadProps) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [files, setFiles] = React.useState<File[]>([]);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleFiles = (fileList: FileList | null) => {
+    if (!fileList) return;
+    const arr = Array.from(fileList).filter((f) => !maxSize || f.size <= maxSize);
+    setFiles((prev) => multiple ? [...prev, ...arr] : arr);
+    onFiles(arr);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => {
+      const next = prev.filter((_, i) => i !== index);
+      onFiles(next);
+      return next;
+    });
+  };
+
+  const formatSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  return (
+    <div className={cn('', className)}>
+      <div
+        onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={handleDrop}
+        onClick={() => inputRef.current?.click()}
+        className={cn(
+          'border-2 border-dashed rounded-[6px] p-6 text-center cursor-pointer transition-colors',
+          isDragging ? 'border-accent bg-accent-alpha' : 'border-border hover:border-accent',
+        )}
+      >
+        <IcEditUploadToCloud className="w-8 h-8 mx-auto mb-2 text-text-dim" />
+        <p className="text-[15px] tracking-[-0.15px] text-text-dim">
+          {label ?? 'Drop files or tap to browse'}
+        </p>
+        {maxSize && (
+          <p className="text-[11px] tracking-[-0.11px] text-text-muted mt-1">
+            Max {formatSize(maxSize)}
+          </p>
+        )}
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={(e) => handleFiles(e.target.files)}
+          className="hidden"
+        />
+      </div>
+
+      {/* File list */}
+      {files.length > 0 && (
+        <div className="flex flex-wrap gap-2 mt-3">
+          {files.map((f, i) => (
+            <span key={i} className="bg-surface-light px-3 py-1.5 rounded-[6px] text-[13px] tracking-[-0.13px] inline-flex items-center gap-2">
+              {f.name}
+              <span className="text-text-muted">{formatSize(f.size)}</span>
+              <button
+                type="button"
+                onClick={(e) => { e.stopPropagation(); removeFile(i); }}
+                className="text-text-dim hover:text-negative cursor-pointer bg-transparent border-none p-0 text-[11px]"
+              >
+                ✕
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { FileUpload };
+export type { FileUploadProps };

package/web/components/image-viewer.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+// ─── Types ──────────────────────────────────────────────────────
+
+interface ImageItem {
+  src: string;
+  alt?: string;
+  thumbnail?: string;
+}
+
+// ─── ImageGrid ──────────────────────────────────────────────────
+
+interface ImageGridProps {
+  images: ImageItem[];
+  columns?: 2 | 3 | 4;
+  onSelect?: (index: number) => void;
+  className?: string;
+}
+
+function ImageGrid({ images, columns = 3, onSelect, className }: ImageGridProps) {
+  return (
+    <div
+      className={cn(
+        'grid gap-1',
+        columns === 2 && 'grid-cols-2',
+        columns === 3 && 'grid-cols-3',
+        columns === 4 && 'grid-cols-4',
+        className,
+      )}
+    >
+      {images.map((img, i) => (
+        <button
+          key={i}
+          type="button"
+          onClick={() => onSelect?.(i)}
+          className="aspect-square overflow-hidden rounded-[6px] cursor-pointer bg-surface-lighter"
+        >
+          <img
+            src={img.thumbnail ?? img.src}
+            alt={img.alt ?? ''}
+            className="w-full h-full object-cover transition-transform hover:scale-105"
+            loading="lazy"
+          />
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ─── ImageViewer ────────────────────────────────────────────────
+
+interface ImageViewerProps {
+  images: ImageItem[];
+  currentIndex: number;
+  onClose: () => void;
+  onNavigate: (index: number) => void;
+  className?: string;
+}
+
+function ImageViewer({ images, currentIndex, onClose, onNavigate, className }: ImageViewerProps) {
+  const image = images[currentIndex];
+  if (!image) return null;
+
+  const hasPrev = currentIndex > 0;
+  const hasNext = currentIndex < images.length - 1;
+
+  // Keyboard navigation
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+      if (e.key === 'ArrowLeft' && hasPrev) onNavigate(currentIndex - 1);
+      if (e.key === 'ArrowRight' && hasNext) onNavigate(currentIndex + 1);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [currentIndex, hasPrev, hasNext, onClose, onNavigate]);
+
+  return (
+    <div className={cn('fixed inset-0 z-50 flex items-center justify-center', className)}>
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-overlay" onClick={onClose} />
+
+      {/* Image */}
+      <div className="relative z-10 max-w-[90vw] max-h-[80vh]">
+        <img
+          src={image.src}
+          alt={image.alt ?? ''}
+          className="max-w-full max-h-[80vh] object-contain rounded-[6px]"
+        />
+      </div>
+
+      {/* Navigation */}
+      {hasPrev && (
+        <button
+          type="button"
+          onClick={() => onNavigate(currentIndex - 1)}
+          className="absolute left-4 z-20 w-10 h-10 rounded-full bg-surface/80 flex items-center justify-center cursor-pointer text-text hover:bg-surface transition-colors"
+        >
+          <svg viewBox="0 0 24 24" className="w-5 h-5"><rect x={14} y={4} width={2} height={2} fill="currentColor" /><rect x={12} y={6} width={2} height={2} fill="currentColor" /><rect x={10} y={8} width={2} height={2} fill="currentColor" /><rect x={8} y={10} width={2} height={2} fill="currentColor" /><rect x={10} y={12} width={2} height={2} fill="currentColor" /><rect x={12} y={14} width={2} height={2} fill="currentColor" /><rect x={14} y={16} width={2} height={2} fill="currentColor" /></svg>
+        </button>
+      )}
+      {hasNext && (
+        <button
+          type="button"
+          onClick={() => onNavigate(currentIndex + 1)}
+          className="absolute right-4 z-20 w-10 h-10 rounded-full bg-surface/80 flex items-center justify-center cursor-pointer text-text hover:bg-surface transition-colors"
+        >
+          <svg viewBox="0 0 24 24" className="w-5 h-5"><rect x={8} y={4} width={2} height={2} fill="currentColor" /><rect x={10} y={6} width={2} height={2} fill="currentColor" /><rect x={12} y={8} width={2} height={2} fill="currentColor" /><rect x={14} y={10} width={2} height={2} fill="currentColor" /><rect x={12} y={12} width={2} height={2} fill="currentColor" /><rect x={10} y={14} width={2} height={2} fill="currentColor" /><rect x={8} y={16} width={2} height={2} fill="currentColor" /></svg>
+        </button>
+      )}
+
+      {/* Close */}
+      <button
+        type="button"
+        onClick={onClose}
+        className="absolute top-4 right-4 z-20 w-10 h-10 rounded-full bg-surface/80 flex items-center justify-center cursor-pointer text-text hover:bg-surface transition-colors"
+      >
+        <svg viewBox="0 0 24 24" className="w-5 h-5"><rect x={4} y={4} width={2} height={2} fill="currentColor" /><rect x={6} y={6} width={2} height={2} fill="currentColor" /><rect x={8} y={8} width={2} height={2} fill="currentColor" /><rect x={10} y={10} width={2} height={2} fill="currentColor" /><rect x={12} y={12} width={2} height={2} fill="currentColor" /><rect x={14} y={14} width={2} height={2} fill="currentColor" /><rect x={16} y={16} width={2} height={2} fill="currentColor" /><rect x={16} y={4} width={2} height={2} fill="currentColor" /><rect x={14} y={6} width={2} height={2} fill="currentColor" /><rect x={12} y={8} width={2} height={2} fill="currentColor" /><rect x={8} y={12} width={2} height={2} fill="currentColor" /><rect x={6} y={14} width={2} height={2} fill="currentColor" /><rect x={4} y={16} width={2} height={2} fill="currentColor" /></svg>
+        </button>
+
+      {/* Counter */}
+      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 bg-surface/80 rounded-full px-3 py-1 text-[13px] tracking-[-0.13px] text-text tabular-nums">
+        {currentIndex + 1} / {images.length}
+      </div>
+    </div>
+  );
+}
+
+export { ImageGrid, ImageViewer };
+export type { ImageGridProps, ImageViewerProps, ImageItem };

package/web/components/indicator.tsx

@@ -0,0 +1,50 @@
+import { cn } from '../utils/cn';
+
+interface SliderIndicatorProps {
+  count: number;
+  active: number;
+  className?: string;
+}
+
+function SliderIndicator({ count, active, className }: SliderIndicatorProps) {
+  return (
+    <div className={cn('flex items-center justify-center gap-1.5', className)}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          className={cn(
+            'rounded-full transition-all',
+            i === active
+              ? 'w-[18px] h-1 bg-accent'
+              : 'w-1 h-1 bg-surface-lighter',
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface PageIndicatorProps {
+  count: number;
+  active: number;
+  className?: string;
+}
+
+function PageIndicator({ count, active, className }: PageIndicatorProps) {
+  return (
+    <div className={cn('flex w-full h-[3px] gap-0.5', className)}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          className={cn(
+            'flex-1 rounded-full transition-colors',
+            i === active ? 'bg-accent' : 'bg-surface-lighter',
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+export { SliderIndicator, PageIndicator };
+export type { SliderIndicatorProps, PageIndicatorProps };

package/web/components/input-group.tsx

@@ -0,0 +1,39 @@
+import { cn } from '../utils/cn';
+import { Children, cloneElement, isValidElement } from 'react';
+import type { ReactNode } from 'react';
+
+interface InputGroupProps {
+  children: ReactNode;
+  className?: string;
+}
+
+function InputGroup({ children, className }: InputGroupProps) {
+  const items = Children.toArray(children).filter(isValidElement);
+  const count = items.length;
+
+  return (
+    <div className={cn('flex items-stretch', className)}>
+      {items.map((child, i) => {
+        const isFirst = i === 0;
+        const isLast = i === count - 1;
+        const radius = isFirst
+          ? '6px 0 0 6px'
+          : isLast
+            ? '0 6px 6px 0'
+            : '0';
+        const props = child.props as Record<string, unknown>;
+        const existingStyle = (props.style ?? {}) as Record<string, unknown>;
+        return cloneElement(child, {
+          style: {
+            ...existingStyle,
+            borderRadius: radius,
+            ...(isFirst ? {} : { borderLeft: 'none' }),
+          },
+        } as Record<string, unknown>);
+      })}
+    </div>
+  );
+}
+
+export { InputGroup };
+export type { InputGroupProps };

package/web/components/input.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = 'text', ...props }, ref) => (
+    <input
+      ref={ref}
+      type={type}
+      className={cn(
+        'h-9 w-full bg-input-bg text-text rounded-[6px] px-4 text-[17px] tracking-[-0.17px] outline-none placeholder:text-text-dim transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+Input.displayName = 'Input';
+
+export { Input };
+export type { InputProps };

package/web/components/kbd.tsx

@@ -0,0 +1,22 @@
+import { cn } from '../utils/cn';
+
+interface KbdProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function Kbd({ children, className }: KbdProps) {
+  return (
+    <kbd
+      className={cn(
+        'bg-surface-light rounded-[4px] px-1.5 py-0.5 text-[13px] tracking-[-0.13px] text-text',
+        className,
+      )}
+    >
+      {children}
+    </kbd>
+  );
+}
+
+export { Kbd };
+export type { KbdProps };