@pcoi/components 0.1.2 → 1.0.0

package/src/DocumentOverlay/DocumentOverlay.css

@@ -1,57 +0,0 @@
-/* DocumentOverlay — @pcoi/components */
-
-/* ── Gold modal title ── */
-.pcoi-doc-overlay .pcoi-modal__title {
-  color: var(--pcoi-semantic-text-accent);
-}
-
-.pcoi-doc-overlay__content {
-  font-family: var(--pcoi-semantic-type-body-font);
-  font-size: var(--pcoi-semantic-type-body-size);
-  line-height: var(--pcoi-semantic-type-body-line-height);
-  color: var(--pcoi-semantic-text-primary);
-}
-
-.pcoi-doc-overlay__content p {
-  margin: 0 0 var(--pcoi-semantic-spacing-panel-gap);
-}
-
-.pcoi-doc-overlay__content p:last-child {
-  margin-bottom: 0;
-}
-
-.pcoi-doc-overlay__highlight {
-  display: flex;
-  align-items: baseline;
-  gap: var(--pcoi-semantic-spacing-form-gap-compact);
-  background: var(--pcoi-semantic-surface-highlight);
-  border-left: var(--pcoi-semantic-sizing-accent-border-width) solid
-    var(--pcoi-semantic-border-accent-subtle);
-  padding: var(--pcoi-semantic-spacing-inline-sm) var(--pcoi-semantic-spacing-input-y);
-  border-radius: var(--pcoi-semantic-radius-input);
-  animation: pcoi-doc-highlight-fade 0.4s ease;
-}
-
-.pcoi-doc-overlay__highlight[data-highlight-index]::before {
-  content: attr(data-highlight-index);
-  flex-shrink: 0;
-  font-family: var(--pcoi-semantic-type-mono-font);
-  font-size: var(--pcoi-semantic-type-body-compact-size);
-  font-weight: var(--pcoi-semantic-type-label-weight);
-  color: var(--pcoi-semantic-text-accent);
-}
-
-.pcoi-doc-overlay__source {
-  display: flex;
-  align-items: center;
-}
-
-/* ── Animation ── */
-@keyframes pcoi-doc-highlight-fade {
-  from {
-    background: var(--pcoi-semantic-surface-accent-dim);
-  }
-  to {
-    background: var(--pcoi-semantic-surface-highlight);
-  }
-}

package/src/DocumentOverlay/DocumentOverlay.test.tsx

@@ -1,95 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { DocumentOverlay } from "./DocumentOverlay";
-
-describe("DocumentOverlay", () => {
-  it("does not render when closed", () => {
-    render(
-      <DocumentOverlay open={false} onClose={vi.fn()} title="Source doc">
-        <p>Body content</p>
-      </DocumentOverlay>
-    );
-
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-  });
-
-  it("renders title, body, and source label when open", () => {
-    render(
-      <DocumentOverlay
-        open
-        onClose={vi.fn()}
-        title="Source doc"
-        sourceLabel="Internal Research"
-      >
-        <p>Body content</p>
-      </DocumentOverlay>
-    );
-
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-    expect(screen.getByText("Source doc")).toBeInTheDocument();
-    expect(screen.getByText("Body content")).toBeInTheDocument();
-    expect(screen.getByText("Internal Research")).toBeInTheDocument();
-  });
-
-  it("calls onClose from close button, Escape key, and backdrop click", () => {
-    const onClose = vi.fn();
-
-    render(
-      <DocumentOverlay open onClose={onClose} title="Source doc">
-        <p>Body content</p>
-      </DocumentOverlay>
-    );
-
-    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);
-  });
-
-  it("highlights and indexes cited content when highlight props are provided", () => {
-    // JSDOM may not provide CSS.escape by default.
-    if (!(globalThis.CSS && typeof globalThis.CSS.escape === "function")) {
-      const existing = globalThis.CSS ?? ({} as CSS);
-      globalThis.CSS = {
-        ...existing,
-        escape: (value: string) => value,
-      } as CSS;
-    }
-
-    const raf = vi
-      .spyOn(window, "requestAnimationFrame")
-      .mockImplementation((cb: FrameRequestCallback) => {
-        cb(0);
-        return 1;
-      });
-
-    const scrollIntoView = vi.fn();
-    Object.defineProperty(window.HTMLElement.prototype, "scrollIntoView", {
-      configurable: true,
-      value: scrollIntoView,
-    });
-
-    render(
-      <DocumentOverlay
-        open
-        onClose={vi.fn()}
-        title="Source doc"
-        highlightId="cite-1"
-        highlightIndex={2}
-      >
-        <p id="cite-1">Cited paragraph</p>
-      </DocumentOverlay>
-    );
-
-    const cited = screen.getByText("Cited paragraph");
-    expect(cited).toHaveClass("pcoi-doc-overlay__highlight");
-    expect(cited).toHaveAttribute("data-highlight-index", "[2]");
-    expect(scrollIntoView).toHaveBeenCalled();
-
-    raf.mockRestore();
-  });
-});

package/src/DocumentOverlay/DocumentOverlay.tsx

@@ -1,87 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { Modal } from "../Modal/Modal";
-import { Badge } from "../Badge/Badge";
-
-export interface DocumentOverlayProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-  /** Whether the overlay is visible */
-  open: boolean;
-  /** Called when the overlay should close */
-  onClose: () => void;
-  /** Document title shown in the header */
-  title: string;
-  /** Optional source label shown as a badge */
-  sourceLabel?: string;
-  /** Document body content */
-  children: React.ReactNode;
-  /** Element ID to scroll to and highlight on open */
-  highlightId?: string;
-  /** Citation index to display beside the highlighted element */
-  highlightIndex?: number;
-}
-
-/**
- * PCOI DocumentOverlay — Wide modal for viewing source documents with highlighted citations
- * Composes Modal (size="wide") + Badge
- * Tokens: surface/highlight, border/accent-subtle, container/document
- */
-export const DocumentOverlay = React.forwardRef<
-  HTMLDivElement,
-  DocumentOverlayProps
->(
-  (
-    { open, onClose, title, sourceLabel, children, highlightId, highlightIndex, className = "", ...rest },
-    ref
-  ) => {
-    const contentRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      if (open && highlightId && contentRef.current) {
-        requestAnimationFrame(() => {
-          const el = contentRef.current?.querySelector(`#${CSS.escape(highlightId)}`);
-          if (el) {
-            el.scrollIntoView({ behavior: "smooth", block: "center" });
-            el.classList.add("pcoi-doc-overlay__highlight");
-            if (highlightIndex !== undefined) {
-              el.setAttribute("data-highlight-index", `[${highlightIndex}]`);
-            }
-          }
-        });
-      }
-    }, [open, highlightId, highlightIndex]);
-
-    const classes = ["pcoi-doc-overlay", className]
-      .filter(Boolean)
-      .join(" ");
-
-    const footer = sourceLabel
-      ? React.createElement(
-          "div",
-          { className: "pcoi-doc-overlay__source" },
-          React.createElement(Badge, null, sourceLabel)
-        )
-      : undefined;
-
-    return React.createElement(
-      Modal,
-      {
-        ref,
-        open,
-        onClose,
-        title,
-        size: "wide",
-        footer,
-        className: classes,
-        ...rest,
-      },
-      React.createElement(
-        "div",
-        { ref: contentRef, className: "pcoi-doc-overlay__content" },
-        children
-      )
-    );
-  }
-);
-
-DocumentOverlay.displayName = "DocumentOverlay";
-export default DocumentOverlay;

package/src/DocumentOverlay/index.ts

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

package/src/Footer/Footer.css

@@ -1,72 +0,0 @@
-/* Footer — @pcoi/components */
-
-.pcoi-footer {
-  border-top: 1px solid var(--pcoi-semantic-border-default);
-  padding: var(--pcoi-semantic-spacing-section-y-md) var(--pcoi-semantic-spacing-btn-x) var(--pcoi-semantic-spacing-component-gap);
-}
-
-.pcoi-footer__inner {
-  max-width: var(--pcoi-semantic-sizing-container-max);
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-/* ── Brand (LogoMark overrides) ── */
-.pcoi-footer__logo {
-  margin-bottom: var(--pcoi-semantic-spacing-stack-sm);
-}
-
-.pcoi-footer__tagline {
-  font-size: var(--pcoi-semantic-type-body-sm-size);
-  color: var(--pcoi-semantic-text-secondary);
-  line-height: var(--pcoi-semantic-type-body-compact-line-height);
-  margin: 0;
-  white-space: pre-line;
-}
-
-/* ── Links ── */
-.pcoi-footer__links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--pcoi-semantic-spacing-inline-lg);
-}
-
-.pcoi-footer__links a {
-  font-size: var(--pcoi-semantic-type-nav-size);
-  color: var(--pcoi-semantic-text-secondary);
-  text-decoration: none;
-  transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
-}
-
-.pcoi-footer__links a:hover {
-  color: var(--pcoi-semantic-text-primary);
-}
-
-/* ── Bottom ── */
-.pcoi-footer__bottom {
-  max-width: var(--pcoi-semantic-sizing-container-max);
-  margin: var(--pcoi-semantic-spacing-component-gap) auto 0;
-  padding-top: var(--pcoi-semantic-spacing-panel-padding);
-  border-top: 1px solid var(--pcoi-semantic-border-default);
-}
-
-.pcoi-footer__bottom p {
-  font-size: var(--pcoi-semantic-type-label-size);
-  color: var(--pcoi-semantic-text-muted);
-  margin: 0;
-}
-
-/* ── Responsive ── */
-@media (max-width: 768px) {
-  .pcoi-footer__inner {
-    flex-direction: column;
-    gap: var(--pcoi-semantic-spacing-stack-lg);
-  }
-
-  .pcoi-footer__links {
-    flex-direction: column;
-    gap: var(--pcoi-semantic-spacing-stack-compact);
-  }
-}

package/src/Footer/Footer.tsx

@@ -1,59 +0,0 @@
-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> {
-  /** Navigation links rendered in the footer */
-  links?: LinkItem[];
-  /** Brand tagline displayed alongside the logo */
-  tagline?: string;
-  /** Copyright notice shown at the bottom */
-  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>
-        <nav className="pcoi-footer__links" aria-label="Footer">
-          {links.map((link) => (
-            <a key={link.href} href={link.href} data-track-id={link.trackingId}>{link.label}</a>
-          ))}
-        </nav>
-      </div>
-      <div className="pcoi-footer__bottom">
-        <p>{copyright}</p>
-      </div>
-    </footer>
-  )
-);
-
-Footer.displayName = "Footer";
-export default Footer;

package/src/Footer/index.ts

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

package/src/FormField/FormField.css

@@ -1,78 +0,0 @@
-/* FormField — @pcoi/components */
-
-.pcoi-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-form-gap-compact);
-}
-
-.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-semantic-spacing-inline-2xs);
-}
-
-.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-semantic-radius-input);
-  padding: var(--pcoi-semantic-spacing-input-y) var(--pcoi-semantic-spacing-input-x-compact);
-  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.figma.tsx

@@ -1,28 +0,0 @@
-import figma from "@figma/code-connect";
-import { FormField } from "./FormField";
-
-/**
- * Code Connect: FormField
- * Maps Figma form field properties to React FormField props
- */
-figma.connect(FormField, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=103-1", {
-  props: {
-    label: figma.string("Label"),
-    placeholder: figma.string("Placeholder"),
-    multiline: figma.boolean("Multiline"),
-    required: figma.boolean("Required"),
-    disabled: figma.boolean("Disabled"),
-    hasError: figma.boolean("Error"),
-  },
-  example: ({ label, placeholder, multiline, required, disabled, hasError }) => (
-    <FormField
-      name="field"
-      label={label}
-      placeholder={placeholder}
-      multiline={multiline}
-      required={required}
-      disabled={disabled}
-      error={hasError ? "This field is required." : undefined}
-    />
-  ),
-});

package/src/FormField/FormField.tsx

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

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

package/src/HowStep/HowStep.css

@@ -1,48 +0,0 @@
-/* HowStep — @pcoi/components */
-
-.pcoi-how-step {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--pcoi-semantic-spacing-stack-lg);
-  padding: var(--pcoi-semantic-spacing-component-gap) 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-semantic-radius-avatar);
-  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-semantic-spacing-stack-sm) 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.figma.tsx

@@ -1,23 +0,0 @@
-import figma from "@figma/code-connect";
-import { HowStep } from "./HowStep";
-
-/**
- * Code Connect: HowStep
- * Maps Figma step properties to React HowStep props
- */
-figma.connect(HowStep, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=107-1", {
-  props: {
-    number: figma.string("Step Number"),
-    title: figma.string("Title"),
-    description: figma.string("Description"),
-    isLast: figma.boolean("Last Step"),
-  },
-  example: ({ number, title, description, isLast }) => (
-    <HowStep
-      number={number}
-      title={title}
-      description={description}
-      isLast={isLast}
-    />
-  ),
-});