@pcoi/components 0.1.0

package/src/Toast/Toast.css

@@ -0,0 +1,85 @@
+/* Toast — @pcoi/components */
+
+.pcoi-toast {
+  position: fixed;
+  bottom: var(--pcoi-spacing-24);
+  right: var(--pcoi-spacing-24);
+  z-index: var(--pcoi-layout-zIndex-toast, 600);
+  animation: pcoi-toast-slide-in 0.3s ease;
+}
+
+.pcoi-toast__content {
+  display: flex;
+  align-items: center;
+  gap: var(--pcoi-spacing-12);
+  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-md);
+  box-shadow: var(--pcoi-effect-shadow-elevated);
+  padding: var(--pcoi-spacing-14) var(--pcoi-spacing-20);
+  min-width: var(--pcoi-layout-container-toast-min);
+  max-width: var(--pcoi-layout-container-toast-max);
+}
+
+/* ── Left accent border per variant ── */
+.pcoi-toast--success .pcoi-toast__content {
+  border-left: var(--pcoi-layout-component-accent-border-w) solid var(--pcoi-semantic-border-success);
+}
+
+.pcoi-toast--error .pcoi-toast__content {
+  border-left: var(--pcoi-layout-component-accent-border-w) solid var(--pcoi-semantic-border-error);
+}
+
+.pcoi-toast--warning .pcoi-toast__content {
+  border-left: var(--pcoi-layout-component-accent-border-w) solid var(--pcoi-semantic-border-warning);
+}
+
+.pcoi-toast--info .pcoi-toast__content {
+  border-left: var(--pcoi-layout-component-accent-border-w) solid var(--pcoi-semantic-border-info);
+}
+
+.pcoi-toast__message {
+  flex: 1;
+  font-size: var(--pcoi-semantic-type-body-size);
+  color: var(--pcoi-semantic-text-primary);
+  line-height: var(--pcoi-semantic-type-body-compact-line-height);
+}
+
+.pcoi-toast__close {
+  background: none;
+  border: none;
+  color: var(--pcoi-semantic-text-secondary);
+  font-size: var(--pcoi-semantic-type-close-sm-size);
+  line-height: var(--pcoi-semantic-type-none-line-height);
+  cursor: pointer;
+  padding: var(--pcoi-spacing-4);
+  border-radius: var(--pcoi-radius-sm);
+  flex-shrink: 0;
+  transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-toast__close:hover {
+  color: var(--pcoi-semantic-text-primary);
+}
+
+.pcoi-toast__close:active {
+  transform: var(--pcoi-effect-transform-press-scale-icon);
+}
+
+.pcoi-toast__close:focus-visible {
+  outline: none;
+  box-shadow: var(--pcoi-effect-shadow-focus-ring);
+}
+
+/* ── Animation ── */
+@keyframes pcoi-toast-slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}

package/src/Toast/Toast.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { CloseIcon } from "../../../icons/src/react/CloseIcon";
+
+export type ToastVariant = "success" | "error" | "warning" | "info";
+
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Toast message */
+  message: string;
+  /** Visual variant determining color */
+  variant?: ToastVariant;
+  /** Whether the toast is visible */
+  open: boolean;
+  /** Called when the toast should dismiss */
+  onClose?: () => void;
+  /** Auto-dismiss duration in ms (default 5000, 0 = no auto-dismiss) */
+  duration?: number;
+}
+
+/**
+ * PCOI Toast — Non-blocking notification
+ * Tokens: surface/elevated, border/success|error|warning|info,
+ *         text/primary, text/success|error|warning|info,
+ *         shadow/elevated, zIndex/toast, radius-md
+ */
+export const Toast: React.FC<ToastProps> = ({
+  message,
+  variant = "info",
+  open,
+  onClose,
+  duration = 5000,
+  className = "",
+  ...rest
+}) => {
+  const handleClose = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+
+  useEffect(() => {
+    if (!open || duration === 0) return;
+
+    const timer = setTimeout(handleClose, duration);
+    return () => clearTimeout(timer);
+  }, [open, duration, handleClose]);
+
+  if (!open) return null;
+
+  const wrapperClasses = [
+    "pcoi-toast",
+    `pcoi-toast--${variant}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return createPortal(
+    <div className={wrapperClasses} role="alert" {...rest}>
+      <div className="pcoi-toast__content">
+        <span className="pcoi-toast__message">{message}</span>
+        {onClose && (
+          <button
+            type="button"
+            className="pcoi-toast__close"
+            onClick={handleClose}
+            aria-label="Dismiss notification"
+          >
+            <CloseIcon size={16} />
+          </button>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+Toast.displayName = "Toast";
+export default Toast;

package/src/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast, type ToastProps, type ToastVariant } from "./Toast";
+export { default } from "./Toast";

package/src/Toggle/Toggle.css

@@ -0,0 +1,110 @@
+/* Toggle — @pcoi/components */
+
+.pcoi-toggle {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pcoi-spacing-6);
+}
+
+.pcoi-toggle__control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pcoi-spacing-12);
+  cursor: pointer;
+}
+
+.pcoi-toggle__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-toggle__track {
+  width: var(--pcoi-layout-component-toggle-track-w);
+  height: var(--pcoi-layout-component-toggle-track-h);
+  flex-shrink: 0;
+  border-radius: var(--pcoi-radius-full);
+  background: var(--pcoi-semantic-action-toggle-bg);
+  position: relative;
+  transition: background var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-toggle__thumb {
+  position: absolute;
+  top: var(--pcoi-layout-component-toggle-thumb-inset);
+  left: var(--pcoi-layout-component-toggle-thumb-inset);
+  width: var(--pcoi-layout-component-toggle-thumb);
+  height: var(--pcoi-layout-component-toggle-thumb);
+  border-radius: var(--pcoi-radius-full);
+  background: var(--pcoi-semantic-action-toggle-thumb);
+  transition: transform var(--pcoi-effect-transition-fast, 0.2s ease),
+              background var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-toggle__thumb::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--pcoi-layout-component-toggle-check-w);
+  height: var(--pcoi-layout-component-toggle-check-h);
+  border: solid var(--pcoi-semantic-action-success);
+  border-width: 0 var(--pcoi-layout-component-toggle-check-stroke) var(--pcoi-layout-component-toggle-check-stroke) 0;
+  transform: translate(-50%, -60%) rotate(45deg);
+  opacity: 0;
+  transition: opacity var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-toggle__control:hover .pcoi-toggle__track {
+  box-shadow: 0 0 0 1px var(--pcoi-semantic-border-input-hover);
+}
+
+.pcoi-toggle__control:active .pcoi-toggle__track {
+  transform: var(--pcoi-effect-transform-press-scale-track);
+}
+
+.pcoi-toggle__input:checked + .pcoi-toggle__track {
+  background: var(--pcoi-semantic-action-toggle-bg-on);
+}
+
+.pcoi-toggle__input:checked + .pcoi-toggle__track .pcoi-toggle__thumb {
+  transform: translateX(var(--pcoi-layout-component-toggle-thumb-travel)) var(--pcoi-effect-transform-toggle-thumb-on);
+}
+
+.pcoi-toggle__input:checked + .pcoi-toggle__track .pcoi-toggle__thumb::after {
+  opacity: 1;
+}
+
+.pcoi-toggle__input:focus-visible + .pcoi-toggle__track {
+  outline: none;
+  box-shadow: var(--pcoi-effect-shadow-focus-ring);
+}
+
+.pcoi-toggle__label {
+  font-size: var(--pcoi-semantic-type-body-size);
+  color: var(--pcoi-semantic-text-primary);
+}
+
+/* ── Error state ── */
+.pcoi-toggle--error .pcoi-toggle__track {
+  box-shadow: 0 0 0 1px var(--pcoi-semantic-border-error);
+}
+
+.pcoi-toggle__error {
+  font-size: var(--pcoi-semantic-type-label-size);
+  color: var(--pcoi-semantic-text-error);
+  margin: 0;
+  padding-left: calc(var(--pcoi-layout-component-toggle-track-w) + var(--pcoi-spacing-12));
+}
+
+/* ── Disabled state ── */
+.pcoi-toggle--disabled {
+  opacity: var(--pcoi-effect-opacity-disabled);
+  pointer-events: none;
+}

package/src/Toggle/Toggle.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+export interface ToggleProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+  /** Visible label text */
+  label: string;
+  /** Unique field name, also used to generate id */
+  name: string;
+  /** Error message — when truthy, field enters error state */
+  error?: string;
+}
+
+/**
+ * PCOI Toggle — Switch-style boolean control
+ * Tokens: action/toggle-bg, action/toggle-bg-on, action/toggle-thumb,
+ *         focus/border, focus/glow, text/primary, text/error, radius-full
+ */
+export const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
+  (
+    {
+      label,
+      name,
+      error,
+      disabled = false,
+      className = "",
+      ...props
+    },
+    ref
+  ) => {
+    const fieldId = `pcoi-field-${name}`;
+    const errorId = error ? `${fieldId}-error` : undefined;
+
+    const wrapperClasses = [
+      "pcoi-toggle",
+      error ? "pcoi-toggle--error" : "",
+      disabled ? "pcoi-toggle--disabled" : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div className={wrapperClasses}>
+        <label htmlFor={fieldId} className="pcoi-toggle__control">
+          <input
+            ref={ref}
+            type="checkbox"
+            id={fieldId}
+            name={name}
+            disabled={disabled}
+            aria-invalid={!!error}
+            aria-describedby={errorId}
+            className="pcoi-toggle__input"
+            role="switch"
+            {...props}
+          />
+          <span className="pcoi-toggle__track" aria-hidden="true">
+            <span className="pcoi-toggle__thumb" />
+          </span>
+          <span className="pcoi-toggle__label">{label}</span>
+        </label>
+        {error && (
+          <span id={errorId} className="pcoi-toggle__error" role="alert">
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+Toggle.displayName = "Toggle";
+export default Toggle;

package/src/Toggle/index.ts

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

package/src/TypingIndicator/TypingIndicator.css

@@ -0,0 +1,70 @@
+/* TypingIndicator — @pcoi/components */
+
+.pcoi-typing-indicator {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pcoi-spacing-8);
+  padding: var(--pcoi-spacing-16);
+  background: var(--pcoi-semantic-surface-accent-dim);
+  border: 1px solid var(--pcoi-semantic-border-card);
+  border-radius: var(--pcoi-radius-md);
+  animation: pcoi-typing-fade-in 0.2s ease;
+}
+
+.pcoi-typing-indicator__header {
+  display: flex;
+  align-items: center;
+}
+
+.pcoi-typing-indicator__dots {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: var(--pcoi-spacing-4) 0;
+}
+
+.pcoi-typing-indicator__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--pcoi-radius-full);
+  background: var(--pcoi-semantic-text-accent);
+  opacity: 0.4;
+  animation: pcoi-typing-bounce 1.4s ease-in-out infinite;
+}
+
+.pcoi-typing-indicator__dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.pcoi-typing-indicator__dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes pcoi-typing-bounce {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-6px);
+    opacity: 1;
+  }
+}
+
+@keyframes pcoi-typing-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ── Responsive: offset to match assistant messages on desktop ── */
+@media (min-width: 1025px) {
+  .pcoi-typing-indicator {
+    margin-right: var(--pcoi-spacing-48);
+  }
+}

package/src/TypingIndicator/TypingIndicator.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Badge } from "../Badge/Badge";
+
+export interface TypingIndicatorProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Label shown in the badge (default: "PCOI") */
+  label?: string;
+}
+
+/**
+ * PCOI TypingIndicator — Three bouncing dots indicating the assistant is composing a response
+ * Tokens: bg/card, border/card, radius-md, text/accent
+ */
+export const TypingIndicator = React.forwardRef<
+  HTMLDivElement,
+  TypingIndicatorProps
+>(({ label = "PCOI", className = "", ...rest }, ref) => {
+  const classes = ["pcoi-typing-indicator", className]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div ref={ref} className={classes} {...rest}>
+      <div className="pcoi-typing-indicator__header">
+        <Badge>{label}</Badge>
+      </div>
+      <div className="pcoi-typing-indicator__dots" aria-label="Typing">
+        <span className="pcoi-typing-indicator__dot" />
+        <span className="pcoi-typing-indicator__dot" />
+        <span className="pcoi-typing-indicator__dot" />
+      </div>
+    </div>
+  );
+});
+
+TypingIndicator.displayName = "TypingIndicator";
+export default TypingIndicator;

package/src/TypingIndicator/index.ts

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

package/src/index.ts

@@ -0,0 +1,37 @@
+// @pcoi/components — Barrel Export
+// All components from the PCOI Design System
+import "./styles.css";
+
+export { type HeadingLevel, type LinkItem, type OptionItem, type ChatMessageRole, type Citation, type Suggestion, type TrackingProps } from "./types";
+export { LogoMark, type LogoMarkProps } from "./LogoMark";
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./Button";
+export { FormField, type FormFieldProps } from "./FormField";
+export { Card, type CardProps, type CardVariant } from "./Card";
+export { Nav, type NavProps, type NavLink } from "./Nav";
+export { SectionHeader, type SectionHeaderProps } from "./SectionHeader";
+export { HowStep, type HowStepProps } from "./HowStep";
+export { ComparisonTable, type ComparisonTableProps, type ComparisonRow } from "./ComparisonTable";
+export { ContactForm, type ContactFormProps } from "./ContactForm";
+export { Callout, type CalloutProps } from "./Callout";
+export { SignalsPanel, type SignalsPanelProps } from "./SignalsPanel";
+export { Footer, type FooterProps, type FooterLink } from "./Footer";
+export { Select, type SelectProps } from "./Select";
+export { Checkbox, type CheckboxProps } from "./Checkbox";
+export { Toggle, type ToggleProps } from "./Toggle";
+export { RadioGroup, type RadioGroupProps } from "./RadioGroup";
+export { Panel, type PanelProps } from "./Panel";
+export { DataTable, type DataTableProps, type DataTableColumn } from "./DataTable";
+export { Badge, type BadgeProps, type BadgeVariant } from "./Badge";
+export { Modal, type ModalProps } from "./Modal";
+export { Toast, type ToastProps, type ToastVariant } from "./Toast";
+
+// Chat Interface components
+export { SuggestionCard, type SuggestionCardProps } from "./SuggestionCard";
+export { CitedExcerpt, type CitedExcerptProps } from "./CitedExcerpt";
+export { PromptBar, type PromptBarProps } from "./PromptBar";
+export { ChatMessage, type ChatMessageProps } from "./ChatMessage";
+export { SuggestionCards, type SuggestionCardsProps } from "./SuggestionCards";
+export { ChatMessageList, type ChatMessageListProps } from "./ChatMessageList";
+export { DocumentOverlay, type DocumentOverlayProps } from "./DocumentOverlay";
+export { TypingIndicator, type TypingIndicatorProps } from "./TypingIndicator";
+export { ChatInterface, type ChatInterfaceProps, type ChatInterfaceMessage } from "./ChatInterface";

package/src/styles/utilities.css

@@ -0,0 +1,14 @@
+/* @pcoi/components — Global Utilities */
+
+/* Screen-reader only: visually hidden but accessible to assistive technology */
+.pcoi-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/src/styles.css

@@ -0,0 +1,32 @@
+/* @pcoi/components — All component styles */
+@import "./styles/utilities.css";
+@import "./Badge/Badge.css";
+@import "./LogoMark/LogoMark.css";
+@import "./Button/Button.css";
+@import "./FormField/FormField.css";
+@import "./Card/Card.css";
+@import "./Nav/Nav.css";
+@import "./SectionHeader/SectionHeader.css";
+@import "./HowStep/HowStep.css";
+@import "./ComparisonTable/ComparisonTable.css";
+@import "./ContactForm/ContactForm.css";
+@import "./Callout/Callout.css";
+@import "./SignalsPanel/SignalsPanel.css";
+@import "./Footer/Footer.css";
+@import "./Select/Select.css";
+@import "./Checkbox/Checkbox.css";
+@import "./Toggle/Toggle.css";
+@import "./RadioGroup/RadioGroup.css";
+@import "./Panel/Panel.css";
+@import "./DataTable/DataTable.css";
+@import "./Modal/Modal.css";
+@import "./Toast/Toast.css";
+@import "./SuggestionCard/SuggestionCard.css";
+@import "./SuggestionCards/SuggestionCards.css";
+@import "./CitedExcerpt/CitedExcerpt.css";
+@import "./PromptBar/PromptBar.css";
+@import "./ChatMessage/ChatMessage.css";
+@import "./ChatMessageList/ChatMessageList.css";
+@import "./TypingIndicator/TypingIndicator.css";
+@import "./DocumentOverlay/DocumentOverlay.css";
+@import "./ChatInterface/ChatInterface.css";

package/src/types.ts

@@ -0,0 +1,65 @@
+// @pcoi/components — Shared Types
+
+/** Semantic heading level for document outline (h1–h6) */
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+/** Navigation link used by Nav, Footer, and any link-list component */
+export interface LinkItem {
+  label: string;
+  href: string;
+  /** Optional tracking identifier rendered as data-track-id on the anchor */
+  trackingId?: string;
+}
+
+/** Option item used by Select, RadioGroup */
+export interface OptionItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+/** Chat message sender role */
+export type ChatMessageRole = "user" | "assistant";
+
+/** Citation reference from an assistant response */
+export interface Citation {
+  /** Unique citation index (1-based) */
+  index: number;
+  /** Short excerpt from the source document */
+  excerpt: string;
+  /** Source document title */
+  sourceTitle: string;
+  /** Source document identifier (e.g. URL or document ID) */
+  sourceId: string;
+}
+
+/** Suggestion prompt for the chat empty state */
+export interface Suggestion {
+  /** Unique identifier */
+  id: string;
+  /** Display text */
+  label: string;
+  /** Optional icon rendered before the label */
+  icon?: React.ReactNode;
+}
+
+/**
+ * Standard data-track-* attributes for analytics integration.
+ * Supported on all components via HTML attribute pass-through.
+ * Exported for documentation and IDE discoverability.
+ *
+ * @example
+ * <Button data-track-id="hero-cta" data-track-action="click" data-track-category="engagement">
+ *   Get Started
+ * </Button>
+ */
+export interface TrackingProps {
+  /** Unique identifier for the tracked element */
+  "data-track-id"?: string;
+  /** Action type (e.g. "click", "submit", "view", "toggle") */
+  "data-track-action"?: string;
+  /** Category grouping (e.g. "navigation", "form", "engagement") */
+  "data-track-category"?: string;
+  /** Human-readable label for analytics dashboards */
+  "data-track-label"?: string;
+}