@pcoi/components 0.1.0

package/src/Nav/Nav.css

@@ -0,0 +1,161 @@
+/* Nav — @pcoi/components */
+
+.pcoi-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--pcoi-layout-zIndex-nav, 1000);
+  height: var(--pcoi-layout-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-layout-container-max);
+  margin: 0 auto;
+  padding: 0 var(--pcoi-spacing-24);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* ── Desktop Links ── */
+.pcoi-nav__links {
+  display: flex;
+  align-items: center;
+  gap: var(--pcoi-spacing-32);
+}
+
+.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-radius-sm);
+}
+
+.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-spacing-5);
+  width: var(--pcoi-layout-component-hamburger);
+  height: var(--pcoi-layout-component-hamburger);
+  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-radius-sm);
+}
+
+.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-layout-component-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-layout-component-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);
+  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-spacing-12) 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-radius-sm);
+}
+
+.pcoi-nav__mobile-menu a:active {
+  transform: var(--pcoi-effect-transform-press-scale);
+}
+
+.pcoi-nav__mobile-menu .pcoi-btn {
+  margin-top: var(--pcoi-spacing-16);
+  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

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

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

package/src/Panel/Panel.css

@@ -0,0 +1,35 @@
+/* Panel — @pcoi/components */
+
+.pcoi-panel {
+  background: var(--pcoi-semantic-bg-card);
+  border: 1px solid var(--pcoi-semantic-border-default);
+  border-radius: var(--pcoi-radius-md);
+  overflow: hidden;
+}
+
+.pcoi-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-24);
+  border-bottom: 1px solid var(--pcoi-semantic-border-default);
+}
+
+.pcoi-panel__title {
+  font-size: var(--pcoi-semantic-type-body-size);
+  font-weight: var(--pcoi-semantic-type-emphasis-weight);
+  color: var(--pcoi-semantic-text-primary);
+  margin: 0;
+}
+
+.pcoi-panel__action {
+  flex-shrink: 0;
+}
+
+.pcoi-panel__body {
+  padding: var(--pcoi-spacing-24);
+}
+
+.pcoi-panel--flush .pcoi-panel__body {
+  padding: 0;
+}

package/src/Panel/Panel.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import type { HeadingLevel } from "../types";
+
+export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Panel title rendered in a header bar */
+  title?: string;
+  /** Heading level for the title (default: "h3") */
+  headingLevel?: HeadingLevel;
+  /** Action slot in the header (e.g. a Button or filter) */
+  action?: React.ReactNode;
+  /** Panel body content */
+  children: React.ReactNode;
+  /** Remove default body padding (for tables/charts that need edge-to-edge content) */
+  flush?: boolean;
+}
+
+/**
+ * PCOI Panel — Dashboard section container with optional header
+ * Tokens: bg/card, border/default, radius-md, spacing-16/24, text/primary
+ */
+export const Panel = React.forwardRef<HTMLDivElement, PanelProps>(
+  (
+    {
+      title,
+      headingLevel = "h3",
+      action,
+      children,
+      flush = false,
+      className = "",
+      ...rest
+    },
+    ref
+  ) => {
+    const Heading = headingLevel;
+
+    const wrapperClasses = [
+      "pcoi-panel",
+      flush ? "pcoi-panel--flush" : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={wrapperClasses} {...rest}>
+        {(title || action) && (
+          <div className="pcoi-panel__header">
+            {title && (
+              <Heading className="pcoi-panel__title">{title}</Heading>
+            )}
+            {action && <div className="pcoi-panel__action">{action}</div>}
+          </div>
+        )}
+        <div className="pcoi-panel__body">{children}</div>
+      </div>
+    );
+  }
+);
+
+Panel.displayName = "Panel";
+export default Panel;

package/src/Panel/index.ts

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

package/src/PromptBar/PromptBar.css

@@ -0,0 +1,68 @@
+/* PromptBar — @pcoi/components */
+
+.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);
+  border: 1px solid var(--pcoi-semantic-border-default);
+  border-radius: var(--pcoi-radius-md);
+  transition:
+    border-color var(--pcoi-effect-transition-fast),
+    box-shadow var(--pcoi-effect-transition-fast);
+}
+
+.pcoi-prompt-bar:not(:focus-within):hover {
+  border-color: var(--pcoi-semantic-border-input-hover);
+}
+
+.pcoi-prompt-bar:focus-within {
+  border-color: var(--pcoi-color-focus-border);
+  box-shadow: var(--pcoi-effect-shadow-focus-ring);
+}
+
+.pcoi-prompt-bar__input {
+  flex: 1;
+  min-height: 24px;
+  max-height: 120px;
+  padding: var(--pcoi-spacing-4) 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);
+  color: var(--pcoi-semantic-text-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+}
+
+.pcoi-prompt-bar__input::placeholder {
+  color: var(--pcoi-semantic-text-muted);
+}
+
+.pcoi-prompt-bar__actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.pcoi-prompt-bar__send.pcoi-btn {
+  padding: var(--pcoi-spacing-6);
+  min-width: 0;
+  min-height: 0;
+  width: 32px;
+  height: 32px;
+}
+
+.pcoi-prompt-bar__send-icon {
+  display: flex;
+  transform: rotate(-90deg);
+}
+
+/* ── Responsive: compact send on small mobile ── */
+@media (max-width: 480px) {
+  .pcoi-prompt-bar {
+    padding: var(--pcoi-spacing-8) var(--pcoi-spacing-12);
+  }
+}

package/src/PromptBar/PromptBar.tsx

@@ -0,0 +1,93 @@
+import React, { useRef, useCallback } from "react";
+import { Button } from "../Button/Button";
+import { ArrowRightIcon } from "../../../icons/src/react/ArrowRightIcon";
+
+export interface PromptBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Current textarea value */
+  value: string;
+  /** Called when the textarea value changes */
+  onChange: (value: string) => void;
+  /** Called when the user submits (Enter or send button) */
+  onSubmit: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Disable input and send */
+  disabled?: boolean;
+  /** Show loading state on send button */
+  loading?: boolean;
+}
+
+/**
+ * PCOI PromptBar — Textarea + send button for chat input
+ * Tokens: bg/card, border/default, focus-border, radius-md,
+ *         text/primary, text/muted, transition-fast
+ */
+export const PromptBar = React.forwardRef<HTMLDivElement, PromptBarProps>(
+  (
+    {
+      value,
+      onChange,
+      onSubmit,
+      placeholder = "Ask a question…",
+      disabled = false,
+      loading = false,
+      className = "",
+      ...rest
+    },
+    ref
+  ) => {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          if (value.trim() && !disabled && !loading) {
+            onSubmit(value.trim());
+          }
+        }
+      },
+      [value, disabled, loading, onSubmit]
+    );
+
+    const handleSubmit = useCallback(() => {
+      if (value.trim() && !disabled && !loading) {
+        onSubmit(value.trim());
+      }
+    }, [value, disabled, loading, onSubmit]);
+
+    const classes = ["pcoi-prompt-bar", className].filter(Boolean).join(" ");
+
+    return (
+      <div ref={ref} className={classes} {...rest}>
+        <textarea
+          ref={textareaRef}
+          className="pcoi-prompt-bar__input"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={1}
+          aria-label={placeholder}
+        />
+        <div className="pcoi-prompt-bar__actions">
+          <Button
+            variant="primary"
+            className="pcoi-prompt-bar__send"
+            onClick={handleSubmit}
+            disabled={disabled || loading || !value.trim()}
+            aria-label="Send message"
+          >
+            <span className="pcoi-prompt-bar__send-icon">
+              <ArrowRightIcon size={16} />
+            </span>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+);
+
+PromptBar.displayName = "PromptBar";
+export default PromptBar;

package/src/PromptBar/index.ts

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

package/src/RadioGroup/RadioGroup.css

@@ -0,0 +1,117 @@
+/* RadioGroup — @pcoi/components */
+
+.pcoi-radio-group {
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pcoi-spacing-10);
+}
+
+.pcoi-radio-group__legend {
+  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);
+  margin-bottom: var(--pcoi-spacing-4);
+}
+
+.pcoi-radio-group__required {
+  color: var(--pcoi-semantic-text-error);
+  margin-left: var(--pcoi-spacing-4);
+}
+
+.pcoi-radio-group__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pcoi-spacing-12);
+}
+
+.pcoi-radio-group__option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pcoi-spacing-8);
+  cursor: pointer;
+}
+
+.pcoi-radio-group__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.pcoi-radio-group__circle {
+  width: var(--pcoi-layout-component-control-box);
+  height: var(--pcoi-layout-component-control-box);
+  flex-shrink: 0;
+  border: 1px solid var(--pcoi-semantic-border-default);
+  border-radius: var(--pcoi-radius-full);
+  background: var(--pcoi-semantic-bg-default);
+  position: relative;
+  transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-radio-group__circle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--pcoi-layout-component-radio-dot);
+  height: var(--pcoi-layout-component-radio-dot);
+  border-radius: var(--pcoi-radius-full);
+  background: var(--pcoi-semantic-action-primary-bg);
+  opacity: 0;
+  transition: opacity var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-radio-group__input:checked + .pcoi-radio-group__circle {
+  border-color: var(--pcoi-semantic-action-primary-bg);
+}
+
+.pcoi-radio-group__input:checked + .pcoi-radio-group__circle::after {
+  opacity: 1;
+}
+
+.pcoi-radio-group__option:hover .pcoi-radio-group__circle {
+  border-color: var(--pcoi-semantic-border-input-hover);
+}
+
+.pcoi-radio-group__option:active .pcoi-radio-group__circle {
+  transform: var(--pcoi-effect-transform-press-scale-control);
+}
+
+.pcoi-radio-group__input:focus-visible + .pcoi-radio-group__circle {
+  border-color: var(--pcoi-semantic-focus-border);
+  box-shadow: var(--pcoi-effect-shadow-focus-ring);
+}
+
+.pcoi-radio-group__label {
+  font-size: var(--pcoi-semantic-type-body-size);
+  color: var(--pcoi-semantic-text-primary);
+}
+
+/* ── Error state ── */
+.pcoi-radio-group--error .pcoi-radio-group__circle {
+  border-color: var(--pcoi-semantic-border-error);
+}
+
+.pcoi-radio-group__error {
+  font-size: var(--pcoi-semantic-type-label-size);
+  color: var(--pcoi-semantic-text-error);
+  margin: 0;
+}
+
+/* ── Disabled state ── */
+.pcoi-radio-group--disabled {
+  opacity: var(--pcoi-effect-opacity-disabled);
+  pointer-events: none;
+}