@justin_evo/evo-ui 1.0.1

package/src/CommandPalette/CommandPalette.tsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import styles from '../css/commandpalette.module.scss';
+
+export interface CommandPaletteItem {
+  label: string;
+  description?: string;
+  group?: string;
+  icon?: React.ReactNode;
+  shortcut?: string[];
+  onSelect: () => void;
+}
+
+interface EvoCommandPaletteProps {
+  items: CommandPaletteItem[];
+  placeholder?: string;
+  open?: boolean;
+  onClose?: () => void;
+}
+
+// Detect Mac for shortcut display only — keyboard handler uses ctrlKey||metaKey for both
+const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+
+const SearchIcon = () => (
+  <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+    <circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.5" />
+    <path d="M10.5 10.5L13 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+);
+
+export const EvoCommandPalette = ({
+  items,
+  placeholder = 'Search commands…',
+  open: controlledOpen,
+  onClose,
+}: EvoCommandPaletteProps) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [activeIdx, setActiveIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const close = useCallback(() => {
+    if (!isControlled) setInternalOpen(false);
+    onClose?.();
+  }, [isControlled, onClose]);
+
+  // Ctrl+K (Windows/Linux) / ⌘+K (Mac)
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        if (!isControlled) setInternalOpen(o => !o);
+      }
+      if (e.key === 'Escape' && isOpen) close();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [isControlled, isOpen, close]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('');
+      setActiveIdx(0);
+      // Small delay so the element is mounted before focus
+      const t = setTimeout(() => inputRef.current?.focus(), 30);
+      return () => clearTimeout(t);
+    }
+  }, [isOpen]);
+
+  const filtered = query.trim()
+    ? items.filter(item =>
+        item.label.toLowerCase().includes(query.toLowerCase()) ||
+        item.description?.toLowerCase().includes(query.toLowerCase()) ||
+        item.group?.toLowerCase().includes(query.toLowerCase())
+      )
+    : items;
+
+  const grouped = filtered.reduce<Record<string, CommandPaletteItem[]>>((acc, item) => {
+    const g = item.group ?? 'Actions';
+    if (!acc[g]) acc[g] = [];
+    acc[g].push(item);
+    return acc;
+  }, {});
+
+  const flat = Object.values(grouped).flat();
+
+  const scrollActiveIntoView = (idx: number) => {
+    const el = listRef.current?.querySelector(`[data-idx="${idx}"]`) as HTMLElement | null;
+    el?.scrollIntoView({ block: 'nearest' });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIdx(i => {
+        const next = Math.min(i + 1, flat.length - 1);
+        scrollActiveIntoView(next);
+        return next;
+      });
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIdx(i => {
+        const next = Math.max(i - 1, 0);
+        scrollActiveIntoView(next);
+        return next;
+      });
+    } else if (e.key === 'Enter' && flat[activeIdx]) {
+      flat[activeIdx].onSelect();
+      close();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  let globalIdx = 0;
+
+  return (
+    <div className={styles.overlay} onClick={close} role="dialog" aria-modal="true">
+      <div
+        className={styles.palette}
+        onClick={e => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+      >
+        <div className={styles.searchRow}>
+          <span className={styles.searchIconWrap}><SearchIcon /></span>
+          <input
+            ref={inputRef}
+            className={styles.searchInput}
+            placeholder={placeholder}
+            value={query}
+            onChange={e => { setQuery(e.target.value); setActiveIdx(0); }}
+            aria-label="Command search"
+          />
+          <kbd className={styles.escBadge}>Esc</kbd>
+        </div>
+
+        <div className={styles.results} ref={listRef}>
+          {flat.length === 0 && (
+            <div className={styles.empty}>No results for &ldquo;{query}&rdquo;</div>
+          )}
+          {Object.entries(grouped).map(([group, groupItems]) => (
+            <div key={group} className={styles.group}>
+              <div className={styles.groupLabel}>{group}</div>
+              {groupItems.map(item => {
+                const idx = globalIdx++;
+                return (
+                  <button
+                    key={item.label}
+                    data-idx={idx}
+                    className={[styles.resultItem, idx === activeIdx ? styles.resultActive : '']
+                      .filter(Boolean)
+                      .join(' ')}
+                    onClick={() => { item.onSelect(); close(); }}
+                    onMouseEnter={() => setActiveIdx(idx)}
+                  >
+                    {item.icon && <span className={styles.resultIcon}>{item.icon}</span>}
+                    <span className={styles.resultLabel}>{item.label}</span>
+                    {item.description && <span className={styles.resultDesc}>{item.description}</span>}
+                    {item.shortcut && (
+                      <span className={styles.resultShortcut}>
+                        {item.shortcut.map((k, i) => <kbd key={i}>{k}</kbd>)}
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+
+        <div className={styles.footer}>
+          <span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
+          <span><kbd>↵</kbd> select</span>
+          <span><kbd>Esc</kbd> close</span>
+          <span className={styles.footerRight}>
+            <kbd>{isMac ? '⌘' : 'Ctrl'}</kbd><kbd>K</kbd> toggle
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Container/Container.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from '../css/container.module.scss';
+
+type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+interface EvoContainerProps {
+  children: React.ReactNode;
+  size?: ContainerSize;
+  centered?: boolean;
+  className?: string;
+}
+
+export const EvoContainer = ({
+  children,
+  size = 'lg',
+  centered = true,
+  className = '',
+}: EvoContainerProps) => (
+  <div
+    className={[
+      styles.container,
+      styles[size],
+      centered ? styles.centered : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')}
+  >
+    {children}
+  </div>
+);

package/src/Divider/Divider.tsx

@@ -0,0 +1,31 @@
+import styles from '../css/divider.module.scss';
+
+interface EvoDividerProps {
+  orientation?: 'horizontal' | 'vertical';
+  label?: string;
+  className?: string;
+}
+
+export const EvoDivider = ({ orientation = 'horizontal', label, className = '' }: EvoDividerProps) => {
+  if (label) {
+    return (
+      <div className={`${styles.labeled} ${className}`}>
+        <div className={styles.line} />
+        <span className={styles.labelText}>{label}</span>
+        <div className={styles.line} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={[
+        styles.divider,
+        orientation === 'vertical' ? styles.vertical : styles.horizontal,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    />
+  );
+};

package/src/Form/Form.tsx

@@ -0,0 +1,185 @@
+import React, { createContext, useContext, useId } from 'react';
+import styles from '../css/form.module.scss';
+
+type FormSize = 'sm' | 'md' | 'lg';
+type FormLayout = 'vertical' | 'horizontal';
+
+interface FormContextType {
+  disabled?: boolean;
+  size?: FormSize;
+  layout?: FormLayout;
+}
+
+const FormContext = createContext<FormContextType>({});
+
+export const useFormContext = () => useContext(FormContext);
+
+const cx = (...c: (string | false | null | undefined)[]) => c.filter(Boolean).join(' ');
+
+// ---------- Root ----------
+interface EvoFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  children: React.ReactNode;
+  disabled?: boolean;
+  size?: FormSize;
+  layout?: FormLayout;
+  maxWidth?: number | string;
+  className?: string;
+}
+
+export const EvoForm = ({
+  children,
+  disabled = false,
+  size = 'md',
+  layout = 'vertical',
+  maxWidth,
+  className = '',
+  style,
+  ...rest
+}: EvoFormProps) => (
+  <FormContext.Provider value={{ disabled, size, layout }}>
+    <form
+      className={cx(styles.form, styles[`form_${size}`], styles[`form_${layout}`], className)}
+      style={maxWidth !== undefined ? { maxWidth, ...style } : style}
+      {...rest}
+    >
+      {children}
+    </form>
+  </FormContext.Provider>
+);
+
+// ---------- Header ----------
+interface EvoFormHeaderProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  badge?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const EvoFormHeader = ({ title, description, badge, children, className = '' }: EvoFormHeaderProps) => (
+  <header className={cx(styles.header, className)}>
+    {badge && <div className={styles.headerBadge}>{badge}</div>}
+    {title && <h2 className={styles.headerTitle}>{title}</h2>}
+    {description && <p className={styles.headerDesc}>{description}</p>}
+    {children}
+  </header>
+);
+
+// ---------- Section ----------
+interface EvoFormSectionProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  variant?: 'stacked' | 'split';
+  children: React.ReactNode;
+  className?: string;
+}
+
+const EvoFormSection = ({
+  title,
+  description,
+  variant = 'stacked',
+  children,
+  className = '',
+}: EvoFormSectionProps) => (
+  <section className={cx(styles.section, styles[`section_${variant}`], className)}>
+    {(title || description) && (
+      <div className={styles.sectionHead}>
+        {title && <h3 className={styles.sectionTitle}>{title}</h3>}
+        {description && <p className={styles.sectionDesc}>{description}</p>}
+      </div>
+    )}
+    <div className={styles.sectionBody}>{children}</div>
+  </section>
+);
+
+// ---------- Row (side-by-side fields) ----------
+interface EvoFormRowProps {
+  children: React.ReactNode;
+  gap?: 'sm' | 'md' | 'lg';
+  align?: 'start' | 'center' | 'end';
+  className?: string;
+}
+
+const EvoFormRow = ({ children, gap = 'md', align = 'start', className = '' }: EvoFormRowProps) => (
+  <div className={cx(styles.row, styles[`row_${gap}`], styles[`row_align_${align}`], className)}>
+    {children}
+  </div>
+);
+
+// ---------- Field ----------
+interface EvoFormFieldProps {
+  children: React.ReactNode;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  error?: React.ReactNode;
+  required?: boolean;
+  htmlFor?: string;
+  className?: string;
+}
+
+const EvoFormField = ({
+  children,
+  label,
+  description,
+  error,
+  required,
+  htmlFor,
+  className = '',
+}: EvoFormFieldProps) => {
+  const reactId = useId();
+  const fieldId = htmlFor ?? `evo-field-${reactId}`;
+  const hasMeta = label || description || error;
+
+  if (!hasMeta) {
+    return <div className={cx(styles.field, className)}>{children}</div>;
+  }
+
+  return (
+    <div className={cx(styles.field, error ? styles.field_error : '', className)}>
+      {label && (
+        <label htmlFor={fieldId} className={styles.fieldLabel}>
+          {label}
+          {required && <span className={styles.fieldRequired} aria-hidden="true">*</span>}
+        </label>
+      )}
+      <div className={styles.fieldControl}>{children}</div>
+      {error ? (
+        <p className={styles.fieldError} role="alert">{error}</p>
+      ) : description ? (
+        <p className={styles.fieldDesc}>{description}</p>
+      ) : null}
+    </div>
+  );
+};
+
+// ---------- Actions (footer) ----------
+interface EvoFormActionsProps {
+  children: React.ReactNode;
+  align?: 'left' | 'right' | 'between' | 'center';
+  divider?: boolean;
+  className?: string;
+}
+
+const EvoFormActions = ({
+  children,
+  align = 'right',
+  divider = true,
+  className = '',
+}: EvoFormActionsProps) => (
+  <div
+    className={cx(
+      styles.actions,
+      styles[`actions_${align}`],
+      divider ? styles.actions_divider : '',
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+EvoForm.Header = EvoFormHeader;
+EvoForm.Section = EvoFormSection;
+EvoForm.Row = EvoFormRow;
+EvoForm.Field = EvoFormField;
+EvoForm.Actions = EvoFormActions;

package/src/Grid/Grid.tsx

@@ -0,0 +1,66 @@
+import React, { CSSProperties } from 'react';
+
+interface EvoGridProps {
+  children: React.ReactNode;
+  cols?: number | string;
+  rows?: number | string;
+  gap?: number | string;
+  colGap?: number | string;
+  rowGap?: number | string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+interface EvoGridItemProps {
+  children: React.ReactNode;
+  colSpan?: number;
+  rowSpan?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const toSize = (v: number | string | undefined) =>
+  v === undefined ? undefined : typeof v === 'number' ? `${v}px` : v;
+
+const EvoGridItem = ({ children, colSpan, rowSpan, className = '', style }: EvoGridItemProps) => (
+  <div
+    className={className}
+    style={{
+      gridColumn: colSpan ? `span ${colSpan}` : undefined,
+      gridRow: rowSpan ? `span ${rowSpan}` : undefined,
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const EvoGrid = ({
+  children,
+  cols = 3,
+  rows,
+  gap = '1rem',
+  colGap,
+  rowGap,
+  className = '',
+  style,
+}: EvoGridProps) => (
+  <div
+    className={className}
+    style={{
+      display: 'grid',
+      gridTemplateColumns: typeof cols === 'number' ? `repeat(${cols}, 1fr)` : cols,
+      gridTemplateRows: rows
+        ? typeof rows === 'number' ? `repeat(${rows}, auto)` : rows
+        : undefined,
+      gap: toSize(gap),
+      columnGap: toSize(colGap),
+      rowGap: toSize(rowGap),
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);
+
+EvoGrid.Item = EvoGridItem;