@pcoi/components 0.1.0 → 0.1.2

package/src/Modal/Modal.css

@@ -3,12 +3,12 @@
 .pcoi-modal {
   position: fixed;
   inset: 0;
-  z-index: var(--pcoi-layout-zIndex-modal, 500);
+  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-spacing-24);
+  padding: var(--pcoi-semantic-spacing-panel-padding);
   animation: pcoi-modal-fade-in 0.2s ease;
 }
 
@@ -16,10 +16,10 @@
   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);
+  border-radius: var(--pcoi-semantic-radius-panel);
   box-shadow: var(--pcoi-effect-shadow-elevated);
   width: 100%;
-  max-width: var(--pcoi-layout-container-modal);
+  max-width: var(--pcoi-semantic-sizing-modal-width);
   max-height: 85vh;
   display: flex;
   flex-direction: column;
@@ -30,7 +30,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--pcoi-spacing-20) var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-card-gap) var(--pcoi-semantic-spacing-panel-padding);
   border-bottom: 1px solid var(--pcoi-semantic-border-default);
 }
 
@@ -48,8 +48,8 @@
   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);
+  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);
 }
 
@@ -67,7 +67,7 @@
 }
 
 .pcoi-modal__body {
-  padding: var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-panel-padding);
   overflow-y: auto;
   flex: 1;
   font-size: var(--pcoi-semantic-type-body-size);
@@ -79,14 +79,14 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--pcoi-spacing-12);
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-24);
+  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-layout-container-document, 900px);
+  max-width: var(--pcoi-semantic-sizing-document-width, 900px);
 }
 
 /* ── Animations ── */

package/src/Modal/Modal.figma.tsx

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

@@ -0,0 +1,46 @@
+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,6 +1,6 @@
 import React, { useEffect, useRef, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { CloseIcon } from "../../../icons/src/react/CloseIcon";
+import { CloseIcon } from "@pcoi/icons";
 import type { HeadingLevel } from "../types";
 
 export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
@@ -15,7 +15,7 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
   /** Dialog width: "default" (520px) or "wide" (900px) */
   size?: "default" | "wide";
   /** Modal body content */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /** Footer content (e.g. action buttons) */
   footer?: React.ReactNode;
 }
@@ -25,94 +25,97 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
  * 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);
+export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
+  (
+    {
+      open,
+      onClose,
+      title,
+      headingLevel = "h2",
+      size = "default",
+      children,
+      footer,
+      className = "",
+      ...rest
+    },
+    _ref
+  ) => {
+    const dialogRef = useRef<HTMLDivElement>(null);
+    const previousFocusRef = useRef<HTMLElement | null>(null);
 
-  const Heading = headingLevel;
-  const titleId = title ? "pcoi-modal-title" : undefined;
+    const Heading = headingLevel;
+    const titleId = title ? "pcoi-modal-title" : undefined;
 
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose();
-        return;
-      }
+    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;
+        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];
+          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();
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
         }
-      }
-    },
-    [onClose]
-  );
+      },
+      [onClose]
+    );
 
-  useEffect(() => {
-    if (open) {
-      previousFocusRef.current = document.activeElement as HTMLElement;
-      document.addEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = "hidden";
+    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();
-      });
-    }
+        // 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]);
+      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();
-    }
-  };
+    const handleBackdropClick = (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) {
+        onClose();
+      }
+    };
 
-  if (!open) return null;
+    if (!open) return null;
 
-  const wrapperClasses = ["pcoi-modal", className].filter(Boolean).join(" ");
+    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) && (
+    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">
@@ -128,14 +131,14 @@ export const Modal: React.FC<ModalProps> = ({
               <CloseIcon size={20} />
             </button>
           </div>
-        )}
-        <div className="pcoi-modal__body">{children}</div>
-        {footer && <div className="pcoi-modal__footer">{footer}</div>}
-      </div>
-    </div>,
-    document.body
-  );
-};
+          <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/Nav/Nav.css

@@ -5,8 +5,8 @@
   top: 0;
   left: 0;
   right: 0;
-  z-index: var(--pcoi-layout-zIndex-nav, 1000);
-  height: var(--pcoi-layout-nav-height, 72px);
+  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);
 }
@@ -19,9 +19,9 @@
 }
 
 .pcoi-nav__inner {
-  max-width: var(--pcoi-layout-container-max);
+  max-width: var(--pcoi-semantic-sizing-container-max);
   margin: 0 auto;
-  padding: 0 var(--pcoi-spacing-24);
+  padding: 0 var(--pcoi-semantic-spacing-btn-x);
   height: 100%;
   display: flex;
   align-items: center;
@@ -32,7 +32,7 @@
 .pcoi-nav__links {
   display: flex;
   align-items: center;
-  gap: var(--pcoi-spacing-32);
+  gap: var(--pcoi-semantic-spacing-stack-lg);
 }
 
 .pcoi-nav__links a {
@@ -50,7 +50,7 @@
 .pcoi-nav__links a:focus-visible {
   outline: none;
   box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-btn);
 }
 
 .pcoi-nav__links a:active {
@@ -62,9 +62,9 @@
   display: none;
   flex-direction: column;
   justify-content: center;
-  gap: var(--pcoi-spacing-5);
-  width: var(--pcoi-layout-component-hamburger);
-  height: var(--pcoi-layout-component-hamburger);
+  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;
@@ -78,7 +78,7 @@
 .pcoi-nav__hamburger:focus-visible {
   outline: none;
   box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-btn);
 }
 
 .pcoi-nav__hamburger:active {
@@ -96,7 +96,7 @@
 }
 
 .pcoi-nav__hamburger--active span:nth-child(1) {
-  transform: translateY(var(--pcoi-layout-component-hamburger-bar-offset)) rotate(45deg);
+  transform: translateY(var(--pcoi-semantic-spacing-hamburger-bar-offset)) rotate(45deg);
 }
 
 .pcoi-nav__hamburger--active span:nth-child(2) {
@@ -104,14 +104,14 @@
 }
 
 .pcoi-nav__hamburger--active span:nth-child(3) {
-  transform: translateY(calc(-1 * var(--pcoi-layout-component-hamburger-bar-offset))) rotate(-45deg);
+  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-spacing-24) var(--pcoi-spacing-24) var(--pcoi-spacing-32);
+  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);
 }
@@ -121,7 +121,7 @@
   font-weight: var(--pcoi-semantic-type-label-weight);
   color: var(--pcoi-semantic-text-secondary);
   text-decoration: none;
-  padding: var(--pcoi-spacing-12) 0;
+  padding: var(--pcoi-semantic-spacing-input-y) 0;
   transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
 }
 
@@ -132,7 +132,7 @@
 .pcoi-nav__mobile-menu a:focus-visible {
   outline: none;
   box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-btn);
 }
 
 .pcoi-nav__mobile-menu a:active {
@@ -140,7 +140,7 @@
 }
 
 .pcoi-nav__mobile-menu .pcoi-btn {
-  margin-top: var(--pcoi-spacing-16);
+  margin-top: var(--pcoi-semantic-spacing-stack-md);
   width: 100%;
   justify-content: center;
 }

package/src/Nav/Nav.tsx

@@ -7,9 +7,13 @@ import type { LinkItem } from "../types";
 export type NavLink = LinkItem;
 
 export interface NavProps extends React.HTMLAttributes<HTMLElement> {
+  /** Navigation links rendered in the navbar */
   links?: LinkItem[];
+  /** Label text for the call-to-action button */
   ctaLabel?: string;
+  /** URL the CTA button links to */
   ctaHref?: string;
+  /** Called when the CTA button is clicked */
   onCtaClick?: () => void;
 }
 
@@ -82,9 +86,9 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(
             <span /><span /><span />
           </button>
         </div>
-        <div className="pcoi-nav__mobile-menu" id="pcoi-mobile-menu">
+        <div className="pcoi-nav__mobile-menu" id="pcoi-mobile-menu" role="menu" aria-hidden={!menuOpen}>
           {links.map((link) => (
-            <a key={link.href} href={link.href} data-track-id={link.trackingId} onClick={() => setMenuOpen(false)}>
+            <a key={link.href} href={link.href} data-track-id={link.trackingId} role="menuitem" tabIndex={menuOpen ? 0 : -1} onClick={() => setMenuOpen(false)}>
               {link.label}
             </a>
           ))}

package/src/Panel/Panel.css

@@ -3,7 +3,7 @@
 .pcoi-panel {
   background: var(--pcoi-semantic-bg-card);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   overflow: hidden;
 }
 
@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-panel-padding-sm) var(--pcoi-semantic-spacing-panel-padding);
   border-bottom: 1px solid var(--pcoi-semantic-border-default);
 }
 
@@ -27,7 +27,7 @@
 }
 
 .pcoi-panel__body {
-  padding: var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-panel-padding);
 }
 
 .pcoi-panel--flush .pcoi-panel__body {

package/src/PromptBar/PromptBar.css

@@ -3,11 +3,11 @@
 .pcoi-prompt-bar {
   display: flex;
   align-items: flex-end;
-  gap: var(--pcoi-spacing-12);
-  padding: var(--pcoi-spacing-12) var(--pcoi-spacing-16);
-  background: var(--pcoi-color-bg-card);
+  gap: var(--pcoi-semantic-spacing-panel-gap);
+  padding: var(--pcoi-semantic-spacing-input-y) var(--pcoi-semantic-spacing-input-x);
+  background: var(--pcoi-semantic-bg-card);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   transition:
     border-color var(--pcoi-effect-transition-fast),
     box-shadow var(--pcoi-effect-transition-fast);
@@ -18,7 +18,7 @@
 }
 
 .pcoi-prompt-bar:focus-within {
-  border-color: var(--pcoi-color-focus-border);
+  border-color: var(--pcoi-semantic-focus-border);
   box-shadow: var(--pcoi-effect-shadow-focus-ring);
 }
 
@@ -26,7 +26,7 @@
   flex: 1;
   min-height: 24px;
   max-height: 120px;
-  padding: var(--pcoi-spacing-4) 0;
+  padding: var(--pcoi-semantic-spacing-control-padding-2xs) 0;
   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);
@@ -48,11 +48,11 @@
 }
 
 .pcoi-prompt-bar__send.pcoi-btn {
-  padding: var(--pcoi-spacing-6);
+  padding: var(--pcoi-semantic-spacing-control-padding-xs);
   min-width: 0;
   min-height: 0;
-  width: 32px;
-  height: 32px;
+  width: var(--pcoi-semantic-sizing-btn-height-nav);
+  height: var(--pcoi-semantic-sizing-btn-height-nav);
 }
 
 .pcoi-prompt-bar__send-icon {
@@ -63,6 +63,6 @@
 /* ── Responsive: compact send on small mobile ── */
 @media (max-width: 480px) {
   .pcoi-prompt-bar {
-    padding: var(--pcoi-spacing-8) var(--pcoi-spacing-12);
+    padding: var(--pcoi-semantic-spacing-control-padding-sm) var(--pcoi-semantic-spacing-input-y);
   }
 }

package/src/PromptBar/PromptBar.figma.tsx

@@ -0,0 +1,25 @@
+import figma from "@figma/code-connect";
+import { PromptBar } from "./PromptBar";
+
+/**
+ * Code Connect: PromptBar
+ * Maps Figma prompt bar states to React PromptBar props
+ */
+figma.connect(PromptBar, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=105-1", {
+  props: {
+    value: figma.string("Value"),
+    placeholder: figma.string("Placeholder"),
+    disabled: figma.boolean("Disabled"),
+    loading: figma.boolean("Loading"),
+  },
+  example: ({ value, placeholder, disabled, loading }) => (
+    <PromptBar
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      loading={loading}
+      onChange={() => undefined}
+      onSubmit={() => undefined}
+    />
+  ),
+});