@pcoi/components 0.1.1 → 1.0.0

package/src/HowStep/HowStep.tsx

@@ -1,38 +0,0 @@
-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

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

package/src/LogoMark/LogoMark.css

@@ -1,16 +0,0 @@
-/* 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

@@ -1,24 +0,0 @@
-import React from "react";
-
-export type LogoMarkProps = 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

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

package/src/Modal/Modal.css

@@ -1,101 +0,0 @@
-/* Modal — @pcoi/components */
-
-.pcoi-modal {
-  position: fixed;
-  inset: 0;
-  z-index: var(--pcoi-semantic-layout-z-modal, 500);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--pcoi-semantic-bg-overlay);
-  padding: var(--pcoi-semantic-spacing-panel-padding);
-  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-semantic-radius-panel);
-  box-shadow: var(--pcoi-effect-shadow-elevated);
-  width: 100%;
-  max-width: var(--pcoi-semantic-sizing-modal-width);
-  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-semantic-spacing-card-gap) var(--pcoi-semantic-spacing-panel-padding);
-  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-semantic-spacing-control-padding-2xs);
-  border-radius: var(--pcoi-semantic-radius-btn);
-  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-semantic-spacing-panel-padding);
-  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-semantic-spacing-panel-gap);
-  padding: var(--pcoi-semantic-spacing-panel-padding-sm) var(--pcoi-semantic-spacing-panel-padding);
-  border-top: 1px solid var(--pcoi-semantic-border-default);
-}
-
-/* ── Size variants ── */
-.pcoi-modal__dialog--wide {
-  max-width: var(--pcoi-semantic-sizing-document-width, 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.figma.tsx

@@ -1,28 +0,0 @@
-import figma from "@figma/code-connect";
-import { Modal } from "./Modal";
-
-/**
- * Code Connect: Modal
- * Maps Figma modal variants to React Modal props
- */
-figma.connect(Modal, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=104-1", {
-  props: {
-    size: figma.enum("Size", {
-      Default: "default",
-      Wide: "wide",
-    }),
-    title: figma.string("Title"),
-    withFooter: figma.boolean("Footer"),
-  },
-  example: ({ size, title, withFooter }) => (
-    <Modal
-      open
-      onClose={() => undefined}
-      size={size}
-      title={title}
-      footer={withFooter ? <button type="button">Confirm</button> : undefined}
-    >
-      <p>Modal body content</p>
-    </Modal>
-  ),
-});

package/src/Modal/Modal.test.tsx

@@ -1,46 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { Modal } from "./Modal";
-
-describe("Modal", () => {
-  it("does not render when closed", () => {
-    render(
-      <Modal open={false} onClose={vi.fn()} title="Dialog title">
-        Body
-      </Modal>
-    );
-
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-  });
-
-  it("renders dialog content when open", () => {
-    render(
-      <Modal open onClose={vi.fn()} title="Dialog title">
-        Body content
-      </Modal>
-    );
-
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-    expect(screen.getByText("Dialog title")).toBeInTheDocument();
-    expect(screen.getByText("Body content")).toBeInTheDocument();
-  });
-
-  it("calls onClose for close button, Escape key, and backdrop click", () => {
-    const onClose = vi.fn();
-
-    render(
-      <Modal open onClose={onClose} title="Dialog title">
-        Body
-      </Modal>
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Close modal" }));
-    fireEvent.keyDown(document, { key: "Escape" });
-
-    const backdrop = document.querySelector(".pcoi-modal");
-    if (!backdrop) throw new Error("Expected modal backdrop to exist");
-    fireEvent.click(backdrop);
-
-    expect(onClose).toHaveBeenCalledTimes(3);
-  });
-});

package/src/Modal/Modal.tsx

@@ -1,139 +0,0 @@
-import React, { useEffect, useRef, useCallback } from "react";
-import { createPortal } from "react-dom";
-import { CloseIcon } from "@pcoi/icons";
-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}
-      >
-        <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

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

package/src/Nav/Nav.css

@@ -1,161 +0,0 @@
-/* Nav — @pcoi/components */
-
-.pcoi-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: var(--pcoi-semantic-layout-z-nav, 1000);
-  height: var(--pcoi-semantic-spacing-nav-height, 72px);
-  transition: background var(--pcoi-effect-transition-medium, 0.3s ease),
-              box-shadow var(--pcoi-effect-transition-medium, 0.3s ease);
-}
-
-.pcoi-nav--scrolled {
-  background: var(--pcoi-semantic-bg-nav-scrolled);
-  -webkit-backdrop-filter: blur(var(--pcoi-effect-blur-nav-backdrop, 20px));
-  backdrop-filter: blur(var(--pcoi-effect-blur-nav-backdrop, 20px));
-  box-shadow: var(--pcoi-effect-shadow-nav-scrolled);
-}
-
-.pcoi-nav__inner {
-  max-width: var(--pcoi-semantic-sizing-container-max);
-  margin: 0 auto;
-  padding: 0 var(--pcoi-semantic-spacing-btn-x);
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-/* ── Desktop Links ── */
-.pcoi-nav__links {
-  display: flex;
-  align-items: center;
-  gap: var(--pcoi-semantic-spacing-stack-lg);
-}
-
-.pcoi-nav__links a {
-  font-size: var(--pcoi-semantic-type-nav-size);
-  font-weight: var(--pcoi-semantic-type-label-weight);
-  color: var(--pcoi-semantic-text-secondary);
-  text-decoration: none;
-  transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
-}
-
-.pcoi-nav__links a:hover {
-  color: var(--pcoi-semantic-text-primary);
-}
-
-.pcoi-nav__links a:focus-visible {
-  outline: none;
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-semantic-radius-btn);
-}
-
-.pcoi-nav__links a:active {
-  transform: var(--pcoi-effect-transform-press-scale);
-}
-
-/* ── Hamburger ── */
-.pcoi-nav__hamburger {
-  display: none;
-  flex-direction: column;
-  justify-content: center;
-  gap: var(--pcoi-semantic-spacing-hamburger-gap);
-  width: var(--pcoi-semantic-sizing-hamburger-size);
-  height: var(--pcoi-semantic-sizing-hamburger-size);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
-
-.pcoi-nav__hamburger:hover {
-  color: var(--pcoi-semantic-text-primary);
-}
-
-.pcoi-nav__hamburger:focus-visible {
-  outline: none;
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-semantic-radius-btn);
-}
-
-.pcoi-nav__hamburger:active {
-  transform: var(--pcoi-effect-transform-press-scale-icon);
-}
-
-.pcoi-nav__hamburger span {
-  display: block;
-  width: 100%;
-  height: 2px;
-  background: var(--pcoi-semantic-text-primary);
-  border-radius: 1px;
-  transition: transform var(--pcoi-effect-transition-fast, 0.2s ease),
-              opacity var(--pcoi-effect-transition-fast, 0.2s ease);
-}
-
-.pcoi-nav__hamburger--active span:nth-child(1) {
-  transform: translateY(var(--pcoi-semantic-spacing-hamburger-bar-offset)) rotate(45deg);
-}
-
-.pcoi-nav__hamburger--active span:nth-child(2) {
-  opacity: 0;
-}
-
-.pcoi-nav__hamburger--active span:nth-child(3) {
-  transform: translateY(calc(-1 * var(--pcoi-semantic-spacing-hamburger-bar-offset))) rotate(-45deg);
-}
-
-/* ── Mobile Menu ── */
-.pcoi-nav__mobile-menu {
-  display: none;
-  flex-direction: column;
-  padding: var(--pcoi-semantic-spacing-btn-x) var(--pcoi-semantic-spacing-btn-x) var(--pcoi-semantic-spacing-stack-lg);
-  background: var(--pcoi-semantic-bg-default);
-  box-shadow: var(--pcoi-effect-shadow-mobile-menu);
-}
-
-.pcoi-nav__mobile-menu a {
-  font-size: var(--pcoi-semantic-type-body-lg-size);
-  font-weight: var(--pcoi-semantic-type-label-weight);
-  color: var(--pcoi-semantic-text-secondary);
-  text-decoration: none;
-  padding: var(--pcoi-semantic-spacing-input-y) 0;
-  transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
-}
-
-.pcoi-nav__mobile-menu a:hover {
-  color: var(--pcoi-semantic-text-primary);
-}
-
-.pcoi-nav__mobile-menu a:focus-visible {
-  outline: none;
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-semantic-radius-btn);
-}
-
-.pcoi-nav__mobile-menu a:active {
-  transform: var(--pcoi-effect-transform-press-scale);
-}
-
-.pcoi-nav__mobile-menu .pcoi-btn {
-  margin-top: var(--pcoi-semantic-spacing-stack-md);
-  width: 100%;
-  justify-content: center;
-}
-
-/* ── Responsive ── */
-@media (max-width: 768px) {
-  .pcoi-nav__links {
-    display: none;
-  }
-
-  .pcoi-nav__hamburger {
-    display: flex;
-  }
-
-  .pcoi-nav--menu-open .pcoi-nav__mobile-menu {
-    display: flex;
-  }
-}

package/src/Nav/Nav.tsx

@@ -1,101 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Button } from "../Button";
-import { LogoMark } from "../LogoMark";
-import type { LinkItem } from "../types";
-
-/** @deprecated Use `LinkItem` from `@pcoi/components` instead */
-export type NavLink = LinkItem;
-
-export interface NavProps extends React.HTMLAttributes<HTMLElement> {
-  links?: LinkItem[];
-  ctaLabel?: string;
-  ctaHref?: string;
-  onCtaClick?: () => void;
-}
-
-/**
- * PCOI Navigation Bar
- *
- * Fixed navbar with scroll-triggered backdrop, responsive hamburger menu.
- * Tokens: bg/nav-scrolled, blur/nav-backdrop, border/nav, spacing-72 (height)
- */
-export const Nav = React.forwardRef<HTMLElement, NavProps>(
-  (
-    {
-      links = [
-        { label: "Problem", href: "#problem" },
-        { label: "How It Works", href: "#how-it-works" },
-        { label: "Difference", href: "#difference" },
-        { label: "Who It's For", href: "#who" },
-      ],
-      ctaLabel = "Start a Conversation",
-      ctaHref = "#contact",
-      onCtaClick,
-      className = "",
-      ...rest
-    },
-    ref
-  ) => {
-    const [scrolled, setScrolled] = useState(false);
-    const [menuOpen, setMenuOpen] = useState(false);
-
-    useEffect(() => {
-      const handleScroll = () => setScrolled(window.scrollY > 40);
-      window.addEventListener("scroll", handleScroll, { passive: true });
-      handleScroll();
-      return () => window.removeEventListener("scroll", handleScroll);
-    }, []);
-
-    useEffect(() => {
-      if (!menuOpen) return;
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === "Escape") setMenuOpen(false);
-      };
-      document.addEventListener("keydown", handleEscape);
-      return () => document.removeEventListener("keydown", handleEscape);
-    }, [menuOpen]);
-
-    return (
-      <nav
-        ref={ref}
-        className={`pcoi-nav ${scrolled ? "pcoi-nav--scrolled" : ""} ${menuOpen ? "pcoi-nav--menu-open" : ""} ${className}`}
-        aria-label="Main"
-        {...rest}
-      >
-        <div className="pcoi-nav__inner">
-          <LogoMark />
-          <div className="pcoi-nav__links">
-            {links.map((link) => (
-              <a key={link.href} href={link.href} data-track-id={link.trackingId}>{link.label}</a>
-            ))}
-            <a href={ctaHref}>
-              <Button variant="nav-cta" onClick={onCtaClick}>{ctaLabel}</Button>
-            </a>
-          </div>
-          <button
-            className={`pcoi-nav__hamburger ${menuOpen ? "pcoi-nav__hamburger--active" : ""}`}
-            onClick={() => setMenuOpen(!menuOpen)}
-            aria-label="Toggle menu"
-            aria-expanded={menuOpen}
-            aria-controls="pcoi-mobile-menu"
-          >
-            <span /><span /><span />
-          </button>
-        </div>
-        <div className="pcoi-nav__mobile-menu" id="pcoi-mobile-menu">
-          {links.map((link) => (
-            <a key={link.href} href={link.href} data-track-id={link.trackingId} onClick={() => setMenuOpen(false)}>
-              {link.label}
-            </a>
-          ))}
-          <a href={ctaHref}>
-            <Button variant="nav-cta" onClick={() => { onCtaClick?.(); setMenuOpen(false); }}>{ctaLabel}</Button>
-          </a>
-        </div>
-      </nav>
-    );
-  }
-);
-
-Nav.displayName = "Nav";
-export default Nav;

package/src/Nav/index.ts

@@ -1 +0,0 @@
-export { Nav, type NavProps, type NavLink } from "./Nav";