@pcoi/components 0.1.0

package/src/Footer/Footer.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { LogoMark } from "../LogoMark";
+import type { LinkItem } from "../types";
+
+/** @deprecated Use `LinkItem` from `@pcoi/components` instead */
+export type FooterLink = LinkItem;
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+  links?: LinkItem[];
+  tagline?: string;
+  copyright?: string;
+}
+
+/**
+ * PCOI Footer
+ * Tokens: border/default, spacing-60/40/24, text/secondary, text/muted
+ */
+export const Footer = React.forwardRef<HTMLElement, FooterProps>(
+  (
+    {
+      links = [
+        { label: "Problem", href: "#problem" },
+        { label: "How It Works", href: "#how-it-works" },
+        { label: "Difference", href: "#difference" },
+        { label: "Principles", href: "#principles" },
+        { label: "Who It's For", href: "#who" },
+        { label: "Contact", href: "#contact" },
+      ],
+      tagline = "Portable, Company-Owned\nOperational Intelligence",
+      copyright = `© ${new Date().getFullYear()} PCOI. Operational intelligence you own.`,
+      className = "",
+      ...rest
+    },
+    ref
+  ) => (
+    <footer ref={ref} className={`pcoi-footer ${className}`} {...rest}>
+      <div className="pcoi-footer__inner">
+        <div className="pcoi-footer__brand">
+          <LogoMark className="pcoi-footer__logo" />
+          <p className="pcoi-footer__tagline">{tagline}</p>
+        </div>
+        <div className="pcoi-footer__links">
+          {links.map((link) => (
+            <a key={link.href} href={link.href} data-track-id={link.trackingId}>{link.label}</a>
+          ))}
+        </div>
+      </div>
+      <div className="pcoi-footer__bottom">
+        <p>{copyright}</p>
+      </div>
+    </footer>
+  )
+);
+
+Footer.displayName = "Footer";
+export default Footer;

package/src/Footer/index.ts

@@ -0,0 +1 @@
+export { Footer, type FooterProps, type FooterLink } from "./Footer";

package/src/FormField/FormField.css

@@ -0,0 +1,78 @@
+/* FormField — @pcoi/components */
+
+.pcoi-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pcoi-spacing-6);
+}
+
+.pcoi-field__label {
+  font-size: var(--pcoi-semantic-type-label-size);
+  font-weight: var(--pcoi-semantic-type-label-weight);
+  letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
+  text-transform: uppercase;
+  color: var(--pcoi-semantic-text-secondary);
+}
+
+.pcoi-field__required {
+  color: var(--pcoi-semantic-text-error);
+  margin-left: var(--pcoi-spacing-4);
+}
+
+.pcoi-field__input,
+.pcoi-field__textarea {
+  font-family: var(--pcoi-semantic-type-body-font);
+  font-size: var(--pcoi-semantic-type-body-size);
+  color: var(--pcoi-semantic-text-primary);
+  background: var(--pcoi-semantic-bg-default);
+  border: 1px solid var(--pcoi-semantic-border-default);
+  border-radius: var(--pcoi-radius-sm);
+  padding: var(--pcoi-spacing-12) var(--pcoi-spacing-14);
+  transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease),
+              box-shadow var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-field__input::placeholder,
+.pcoi-field__textarea::placeholder {
+  color: var(--pcoi-semantic-text-muted);
+}
+
+.pcoi-field__input:not(:disabled):not(:focus):hover,
+.pcoi-field__textarea:not(:disabled):not(:focus):hover {
+  border-color: var(--pcoi-semantic-border-input-hover);
+}
+
+.pcoi-field__input:focus,
+.pcoi-field__textarea:focus {
+  outline: none;
+  border-color: var(--pcoi-semantic-focus-border);
+  box-shadow: var(--pcoi-effect-shadow-focus-ring);
+}
+
+.pcoi-field__textarea {
+  resize: vertical;
+  min-height: var(--pcoi-semantic-sizing-textarea-min-height);
+}
+
+/* ── Error state ── */
+.pcoi-field--error .pcoi-field__input,
+.pcoi-field--error .pcoi-field__textarea {
+  border-color: var(--pcoi-semantic-border-error);
+}
+
+.pcoi-field--error .pcoi-field__input:focus,
+.pcoi-field--error .pcoi-field__textarea:focus {
+  box-shadow: var(--pcoi-effect-shadow-focus-ring-error);
+}
+
+.pcoi-field__error {
+  font-size: var(--pcoi-semantic-type-label-size);
+  color: var(--pcoi-semantic-text-error);
+  margin: 0;
+}
+
+/* ── Disabled state ── */
+.pcoi-field--disabled {
+  opacity: var(--pcoi-effect-opacity-disabled);
+  pointer-events: none;
+}

package/src/FormField/FormField.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+
+export interface FormFieldProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
+    "size"
+  > {
+  /** Visible label text */
+  label: string;
+  /** Unique field name, also used to generate id */
+  name: string;
+  /** Render as textarea instead of input */
+  multiline?: boolean;
+  /** Number of visible text rows when multiline (default 3) */
+  rows?: number;
+  /** Error message — when truthy, field enters error state */
+  error?: string;
+}
+
+/**
+ * PCOI FormField — Label + input/textarea atom
+ * Tokens: bg/default, border/default, border/error, focus/border, focus/glow,
+ *         text/primary, text/secondary, text/muted, text/error,
+ *         radius-sm, spacing-6/12/14, font-size/caption/body-default
+ */
+export const FormField = React.forwardRef<
+  HTMLInputElement | HTMLTextAreaElement,
+  FormFieldProps
+>(
+  (
+    {
+      label,
+      name,
+      multiline = false,
+      rows = 3,
+      error,
+      required = false,
+      disabled = false,
+      className = "",
+      ...props
+    },
+    ref
+  ) => {
+    const fieldId = `pcoi-field-${name}`;
+    const errorId = error ? `${fieldId}-error` : undefined;
+
+    const wrapperClasses = [
+      "pcoi-field",
+      error ? "pcoi-field--error" : "",
+      disabled ? "pcoi-field--disabled" : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div className={wrapperClasses}>
+        <label htmlFor={fieldId} className="pcoi-field__label">
+          {label}
+          {required && (
+            <span className="pcoi-field__required" aria-hidden="true">
+              *
+            </span>
+          )}
+        </label>
+        {multiline ? (
+          <textarea
+            ref={ref as React.Ref<HTMLTextAreaElement>}
+            id={fieldId}
+            name={name}
+            rows={rows}
+            required={required}
+            disabled={disabled}
+            aria-invalid={!!error}
+            aria-describedby={errorId}
+            className="pcoi-field__textarea"
+            {...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+          />
+        ) : (
+          <input
+            ref={ref as React.Ref<HTMLInputElement>}
+            id={fieldId}
+            name={name}
+            required={required}
+            disabled={disabled}
+            aria-invalid={!!error}
+            aria-describedby={errorId}
+            className="pcoi-field__input"
+            {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
+          />
+        )}
+        {error && (
+          <span id={errorId} className="pcoi-field__error" role="alert">
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+FormField.displayName = "FormField";
+export default FormField;

package/src/FormField/index.ts

@@ -0,0 +1,2 @@
+export { FormField, type FormFieldProps } from "./FormField";
+export { default } from "./FormField";

package/src/HowStep/HowStep.css

@@ -0,0 +1,48 @@
+/* HowStep — @pcoi/components */
+
+.pcoi-how-step {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pcoi-spacing-32);
+  padding: var(--pcoi-spacing-40) 0;
+  border-bottom: 1px solid var(--pcoi-semantic-border-default);
+}
+
+.pcoi-how-step--last {
+  border-bottom: none;
+}
+
+.pcoi-how-step__number {
+  flex-shrink: 0;
+  width: var(--pcoi-semantic-sizing-step-number);
+  height: var(--pcoi-semantic-sizing-step-number);
+  border-radius: var(--pcoi-radius-full);
+  background: var(--pcoi-semantic-surface-accent-dim);
+  border: 1px solid var(--pcoi-semantic-border-accent-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--pcoi-semantic-type-mono-font);
+  font-size: var(--pcoi-semantic-type-body-sm-size);
+  font-weight: var(--pcoi-semantic-type-emphasis-weight);
+  color: var(--pcoi-semantic-text-accent);
+}
+
+.pcoi-how-step__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.pcoi-how-step__title {
+  font-size: var(--pcoi-semantic-type-step-title-size);
+  font-weight: var(--pcoi-semantic-type-emphasis-weight);
+  color: var(--pcoi-semantic-text-primary);
+  margin: 0 0 var(--pcoi-spacing-8) 0;
+}
+
+.pcoi-how-step__desc {
+  font-size: var(--pcoi-semantic-type-body-size);
+  color: var(--pcoi-semantic-text-secondary);
+  line-height: var(--pcoi-semantic-type-step-line-height);
+  margin: 0;
+}

package/src/HowStep/HowStep.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { HeadingLevel } from "../types";
+
+export interface HowStepProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Step number displayed in circle (e.g., "01") */
+  number: string;
+  /** Step title */
+  title: string;
+  /** Step description */
+  description: string;
+  /** Whether this is the last step (no bottom border) */
+  isLast?: boolean;
+  /** Heading level for the title (default: "h3") */
+  headingLevel?: HeadingLevel;
+}
+
+/**
+ * PCOI How-It-Works Step
+ * Tokens: spacing-32 (gap), spacing-40 (padding-y), border/default, radius-full (number circle)
+ */
+export const HowStep = React.forwardRef<HTMLDivElement, HowStepProps>(
+  ({ number, title, description, isLast = false, headingLevel = "h3", className = "", ...rest }, ref) => {
+    const Heading = headingLevel;
+
+    return (
+      <div ref={ref} className={`pcoi-how-step ${isLast ? "pcoi-how-step--last" : ""} ${className}`} {...rest}>
+        <div className="pcoi-how-step__number">{number}</div>
+        <div className="pcoi-how-step__content">
+          <Heading className="pcoi-how-step__title">{title}</Heading>
+          <p className="pcoi-how-step__desc">{description}</p>
+        </div>
+      </div>
+    );
+  }
+);
+
+HowStep.displayName = "HowStep";
+export default HowStep;

package/src/HowStep/index.ts

@@ -0,0 +1 @@
+export { HowStep, type HowStepProps } from "./HowStep";

package/src/LogoMark/LogoMark.css

@@ -0,0 +1,16 @@
+/* LogoMark — @pcoi/components */
+
+.pcoi-logo {
+  font-family: var(--pcoi-semantic-type-body-font);
+  font-size: var(--pcoi-semantic-type-logo-size);
+  font-weight: var(--pcoi-semantic-type-emphasis-weight);
+  letter-spacing: var(--pcoi-semantic-type-logo-letter-spacing);
+  color: var(--pcoi-semantic-text-primary);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pcoi-logo__mark {
+  color: var(--pcoi-semantic-text-accent);
+}

package/src/LogoMark/LogoMark.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export interface LogoMarkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+}
+
+/**
+ * PCOI Logo Mark — Atom
+ *
+ * Renders the brand mark: accent-colored "P" + "COI" text wrapped in an anchor.
+ * Single-sourced so Nav, Footer, and any future component share one implementation.
+ *
+ * Tokens consumed:
+ *   - font-family/sans, font-size/logo, letterSpacing/logo
+ *   - text/primary, text/accent
+ */
+export const LogoMark = React.forwardRef<HTMLAnchorElement, LogoMarkProps>(
+  ({ href = "#", className = "", ...rest }, ref) => (
+    <a ref={ref} href={href} className={`pcoi-logo ${className}`} {...rest}>
+      <span className="pcoi-logo__mark">P</span>COI
+    </a>
+  )
+);
+
+LogoMark.displayName = "LogoMark";
+export default LogoMark;

package/src/LogoMark/index.ts

@@ -0,0 +1,2 @@
+export { LogoMark, type LogoMarkProps } from "./LogoMark";
+export { default } from "./LogoMark";

package/src/Modal/Modal.css

@@ -0,0 +1,101 @@
+/* Modal — @pcoi/components */
+
+.pcoi-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--pcoi-layout-zIndex-modal, 500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--pcoi-semantic-bg-overlay);
+  padding: var(--pcoi-spacing-24);
+  animation: pcoi-modal-fade-in 0.2s ease;
+}
+
+.pcoi-modal__dialog {
+  font-family: var(--pcoi-semantic-type-body-font);
+  background: var(--pcoi-semantic-surface-elevated);
+  border: 1px solid var(--pcoi-semantic-border-default);
+  border-radius: var(--pcoi-radius-lg);
+  box-shadow: var(--pcoi-effect-shadow-elevated);
+  width: 100%;
+  max-width: var(--pcoi-layout-container-modal);
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  animation: pcoi-modal-slide-up 0.2s ease;
+}
+
+.pcoi-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--pcoi-spacing-20) var(--pcoi-spacing-24);
+  border-bottom: 1px solid var(--pcoi-semantic-border-default);
+}
+
+.pcoi-modal__title {
+  font-size: var(--pcoi-semantic-type-heading-sm-size);
+  font-weight: var(--pcoi-semantic-type-emphasis-weight);
+  color: var(--pcoi-semantic-text-primary);
+  margin: 0;
+}
+
+.pcoi-modal__close {
+  background: none;
+  border: none;
+  color: var(--pcoi-semantic-text-secondary);
+  font-size: var(--pcoi-semantic-type-close-lg-size);
+  line-height: var(--pcoi-semantic-type-none-line-height);
+  cursor: pointer;
+  padding: var(--pcoi-spacing-4);
+  border-radius: var(--pcoi-radius-sm);
+  transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-modal__close:hover {
+  color: var(--pcoi-semantic-text-primary);
+}
+
+.pcoi-modal__close:active {
+  transform: var(--pcoi-effect-transform-press-scale-icon);
+}
+
+.pcoi-modal__close:focus-visible {
+  outline: none;
+  box-shadow: var(--pcoi-effect-shadow-focus-ring);
+}
+
+.pcoi-modal__body {
+  padding: var(--pcoi-spacing-24);
+  overflow-y: auto;
+  flex: 1;
+  font-size: var(--pcoi-semantic-type-body-size);
+  color: var(--pcoi-semantic-text-secondary);
+  line-height: var(--pcoi-semantic-type-body-line-height);
+}
+
+.pcoi-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--pcoi-spacing-12);
+  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-24);
+  border-top: 1px solid var(--pcoi-semantic-border-default);
+}
+
+/* ── Size variants ── */
+.pcoi-modal__dialog--wide {
+  max-width: var(--pcoi-layout-container-document, 900px);
+}
+
+/* ── Animations ── */
+@keyframes pcoi-modal-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes pcoi-modal-slide-up {
+  from { transform: translateY(16px); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}

package/src/Modal/Modal.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useRef, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { CloseIcon } from "../../../icons/src/react/CloseIcon";
+import type { HeadingLevel } from "../types";
+
+export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Whether the modal is visible */
+  open: boolean;
+  /** Called when the modal should close */
+  onClose: () => void;
+  /** Modal title */
+  title?: string;
+  /** Heading level for the title (default: "h2") */
+  headingLevel?: HeadingLevel;
+  /** Dialog width: "default" (520px) or "wide" (900px) */
+  size?: "default" | "wide";
+  /** Modal body content */
+  children: React.ReactNode;
+  /** Footer content (e.g. action buttons) */
+  footer?: React.ReactNode;
+}
+
+/**
+ * PCOI Modal — Dialog overlay with focus trap
+ * Tokens: bg/overlay, surface/elevated, border/default, shadow/elevated,
+ *         zIndex/modal, radius-lg, text/primary, text/secondary
+ */
+export const Modal: React.FC<ModalProps> = ({
+  open,
+  onClose,
+  title,
+  headingLevel = "h2",
+  size = "default",
+  children,
+  footer,
+  className = "",
+  ...rest
+}) => {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  const Heading = headingLevel;
+  const titleId = title ? "pcoi-modal-title" : undefined;
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+
+      if (e.key === "Tab" && dialogRef.current) {
+        const focusable = dialogRef.current.querySelectorAll<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length === 0) return;
+
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (open) {
+      previousFocusRef.current = document.activeElement as HTMLElement;
+      document.addEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "hidden";
+
+      // Focus the dialog after render
+      requestAnimationFrame(() => {
+        const focusable = dialogRef.current?.querySelector<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        focusable?.focus();
+      });
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+      previousFocusRef.current?.focus();
+    };
+  }, [open, handleKeyDown]);
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  if (!open) return null;
+
+  const wrapperClasses = ["pcoi-modal", className].filter(Boolean).join(" ");
+
+  return createPortal(
+    <div className={wrapperClasses} onClick={handleBackdropClick}>
+      <div
+        ref={dialogRef}
+        className={`pcoi-modal__dialog${size === "wide" ? " pcoi-modal__dialog--wide" : ""}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        {...rest}
+      >
+        {(title || true) && (
+          <div className="pcoi-modal__header">
+            {title && (
+              <Heading id={titleId} className="pcoi-modal__title">
+                {title}
+              </Heading>
+            )}
+            <button
+              type="button"
+              className="pcoi-modal__close"
+              onClick={onClose}
+              aria-label="Close modal"
+            >
+              <CloseIcon size={20} />
+            </button>
+          </div>
+        )}
+        <div className="pcoi-modal__body">{children}</div>
+        {footer && <div className="pcoi-modal__footer">{footer}</div>}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+Modal.displayName = "Modal";
+export default Modal;

package/src/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal, type ModalProps } from "./Modal";
+export { default } from "./Modal";