@pcoi/components 0.1.0 → 0.1.2

package/src/PromptBar/PromptBar.test.tsx

@@ -0,0 +1,83 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { PromptBar } from "./PromptBar";
+
+describe("PromptBar", () => {
+  it("calls onChange with textarea value", () => {
+    const onChange = vi.fn();
+    const onSubmit = vi.fn();
+
+    render(
+      <PromptBar
+        value=""
+        onChange={onChange}
+        onSubmit={onSubmit}
+        placeholder="Ask"
+      />
+    );
+
+    fireEvent.change(screen.getByRole("textbox", { name: "Ask" }), {
+      target: { value: "hello" },
+    });
+
+    expect(onChange).toHaveBeenCalledWith("hello");
+  });
+
+  it("submits trimmed value on Enter", () => {
+    const onChange = vi.fn();
+    const onSubmit = vi.fn();
+
+    render(
+      <PromptBar
+        value="  hello world  "
+        onChange={onChange}
+        onSubmit={onSubmit}
+        placeholder="Ask"
+      />
+    );
+
+    fireEvent.keyDown(screen.getByRole("textbox", { name: "Ask" }), {
+      key: "Enter",
+      code: "Enter",
+      shiftKey: false,
+    });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith("hello world");
+  });
+
+  it("does not submit on Shift+Enter", () => {
+    const onChange = vi.fn();
+    const onSubmit = vi.fn();
+
+    render(
+      <PromptBar
+        value="hello"
+        onChange={onChange}
+        onSubmit={onSubmit}
+        placeholder="Ask"
+      />
+    );
+
+    fireEvent.keyDown(screen.getByRole("textbox", { name: "Ask" }), {
+      key: "Enter",
+      code: "Enter",
+      shiftKey: true,
+    });
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("disables send button when value is empty/whitespace", () => {
+    render(
+      <PromptBar
+        value="   "
+        onChange={vi.fn()}
+        onSubmit={vi.fn()}
+        placeholder="Ask"
+      />
+    );
+
+    expect(screen.getByRole("button", { name: "Send message" })).toBeDisabled();
+  });
+});

package/src/PromptBar/PromptBar.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useCallback } from "react";
 import { Button } from "../Button/Button";
-import { ArrowRightIcon } from "../../../icons/src/react/ArrowRightIcon";
+import { ArrowRightIcon } from "@pcoi/icons";
 
-export interface PromptBarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PromptBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit"> {
   /** Current textarea value */
   value: string;
   /** Called when the textarea value changes */

package/src/RadioGroup/RadioGroup.css

@@ -6,7 +6,7 @@
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-10);
+  gap: var(--pcoi-semantic-spacing-text-gap-sm);
 }
 
 .pcoi-radio-group__legend {
@@ -15,24 +15,24 @@
   letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
   text-transform: uppercase;
   color: var(--pcoi-semantic-text-secondary);
-  margin-bottom: var(--pcoi-spacing-4);
+  margin-bottom: var(--pcoi-semantic-spacing-inline-2xs);
 }
 
 .pcoi-radio-group__required {
   color: var(--pcoi-semantic-text-error);
-  margin-left: var(--pcoi-spacing-4);
+  margin-left: var(--pcoi-semantic-spacing-inline-2xs);
 }
 
 .pcoi-radio-group__options {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-12);
+  gap: var(--pcoi-semantic-spacing-panel-gap);
 }
 
 .pcoi-radio-group__option {
   display: inline-flex;
   align-items: center;
-  gap: var(--pcoi-spacing-8);
+  gap: var(--pcoi-semantic-spacing-inline-sm);
   cursor: pointer;
 }
 
@@ -49,11 +49,11 @@
 }
 
 .pcoi-radio-group__circle {
-  width: var(--pcoi-layout-component-control-box);
-  height: var(--pcoi-layout-component-control-box);
+  width: var(--pcoi-semantic-sizing-control-box-size);
+  height: var(--pcoi-semantic-sizing-control-box-size);
   flex-shrink: 0;
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-full);
+  border-radius: var(--pcoi-semantic-radius-badge);
   background: var(--pcoi-semantic-bg-default);
   position: relative;
   transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease);
@@ -65,9 +65,9 @@
   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);
+  width: var(--pcoi-semantic-sizing-radio-dot-size);
+  height: var(--pcoi-semantic-sizing-radio-dot-size);
+  border-radius: var(--pcoi-semantic-radius-badge);
   background: var(--pcoi-semantic-action-primary-bg);
   opacity: 0;
   transition: opacity var(--pcoi-effect-transition-fast, 0.2s ease);

package/src/SectionHeader/SectionHeader.css

@@ -2,8 +2,8 @@
 
 .pcoi-section-header {
   text-align: center;
-  max-width: var(--pcoi-layout-container-narrow);
-  margin: 0 auto var(--pcoi-spacing-64);
+  max-width: var(--pcoi-semantic-sizing-container-narrow);
+  margin: 0 auto var(--pcoi-semantic-spacing-section-header-margin);
 }
 
 .pcoi-section-header__label {
@@ -14,7 +14,7 @@
   letter-spacing: var(--pcoi-semantic-type-section-label-letter-spacing);
   text-transform: uppercase;
   color: var(--pcoi-semantic-text-accent);
-  margin-bottom: var(--pcoi-spacing-16);
+  margin-bottom: var(--pcoi-semantic-spacing-stack-md);
 }
 
 .pcoi-section-header__title {
@@ -23,7 +23,7 @@
   line-height: var(--pcoi-semantic-type-heading-line-height);
   letter-spacing: var(--pcoi-semantic-type-heading-letter-spacing);
   color: var(--pcoi-semantic-text-primary);
-  margin: 0 0 var(--pcoi-spacing-16) 0;
+  margin: 0 0 var(--pcoi-semantic-spacing-stack-md) 0;
 }
 
 .pcoi-section-header__title em {

package/src/SectionHeader/SectionHeader.figma.tsx

@@ -0,0 +1,23 @@
+import figma from "@figma/code-connect";
+import { SectionHeader } from "./SectionHeader";
+
+/**
+ * Code Connect: SectionHeader
+ * Maps Figma section header properties to React SectionHeader props
+ */
+figma.connect(SectionHeader, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=106-1", {
+  props: {
+    label: figma.string("Label"),
+    title: figma.string("Title"),
+    titleEmphasis: figma.string("Title Emphasis"),
+    description: figma.string("Description"),
+  },
+  example: ({ label, title, titleEmphasis, description }) => (
+    <SectionHeader
+      label={label}
+      title={title}
+      titleEmphasis={titleEmphasis || undefined}
+      description={description || undefined}
+    />
+  ),
+});

package/src/Select/Select.css

@@ -3,7 +3,7 @@
 .pcoi-select {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
 }
 
 .pcoi-select__label {
@@ -16,7 +16,7 @@
 
 .pcoi-select__required {
   color: var(--pcoi-semantic-text-error);
-  margin-left: var(--pcoi-spacing-4);
+  margin-left: var(--pcoi-semantic-spacing-inline-2xs);
 }
 
 .pcoi-select__wrapper {
@@ -31,8 +31,8 @@
   color: var(--pcoi-semantic-text-primary);
   background: var(--pcoi-semantic-bg-default);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-sm);
-  padding: var(--pcoi-spacing-12) var(--pcoi-spacing-36) var(--pcoi-spacing-12) var(--pcoi-spacing-14);
+  border-radius: var(--pcoi-semantic-radius-input);
+  padding: var(--pcoi-semantic-spacing-input-y) var(--pcoi-semantic-spacing-btn-x-lg) var(--pcoi-semantic-spacing-input-y) var(--pcoi-semantic-spacing-input-x-compact);
   cursor: pointer;
   transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease),
               box-shadow var(--pcoi-effect-transition-fast, 0.2s ease);
@@ -59,7 +59,7 @@
 
 .pcoi-select__chevron {
   position: absolute;
-  right: var(--pcoi-spacing-14);
+  right: var(--pcoi-semantic-spacing-input-x-compact);
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;

package/src/Select/Select.figma.tsx

@@ -0,0 +1,33 @@
+import figma from "@figma/code-connect";
+import { Select } from "./Select";
+
+const options = [
+  { value: "one", label: "Option One" },
+  { value: "two", label: "Option Two" },
+  { value: "three", label: "Option Three" },
+];
+
+/**
+ * Code Connect: Select
+ * Maps Figma select field states to React Select props
+ */
+figma.connect(Select, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=109-1", {
+  props: {
+    label: figma.string("Label"),
+    placeholder: figma.string("Placeholder"),
+    required: figma.boolean("Required"),
+    disabled: figma.boolean("Disabled"),
+    hasError: figma.boolean("Error"),
+  },
+  example: ({ label, placeholder, required, disabled, hasError }) => (
+    <Select
+      name="mapped-select"
+      label={label}
+      options={options}
+      placeholder={placeholder || undefined}
+      required={required}
+      disabled={disabled}
+      error={hasError ? "Please select an option." : undefined}
+    />
+  ),
+});

package/src/Select/Select.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ChevronDownIcon } from "../../../icons/src/react/ChevronDownIcon";
+import { ChevronDownIcon } from "@pcoi/icons";
 import type { OptionItem } from "../types";
 
 export interface SelectProps

package/src/SignalsPanel/SignalsPanel.css

@@ -3,15 +3,15 @@
 .pcoi-signals {
   background: var(--pcoi-semantic-bg-surface);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-md);
-  padding: var(--pcoi-spacing-40) var(--pcoi-spacing-48);
+  border-radius: var(--pcoi-semantic-radius-card);
+  padding: var(--pcoi-semantic-spacing-component-gap) var(--pcoi-semantic-spacing-inline-xl);
 }
 
 .pcoi-signals__title {
   font-size: var(--pcoi-semantic-type-heading-sm-size);
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
   color: var(--pcoi-semantic-text-accent);
-  margin: 0 0 var(--pcoi-spacing-24) 0;
+  margin: 0 0 var(--pcoi-semantic-spacing-panel-padding) 0;
 }
 
 .pcoi-signals__list {
@@ -20,12 +20,12 @@
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-14);
+  gap: var(--pcoi-semantic-spacing-stack-compact);
 }
 
 .pcoi-signals__item {
   position: relative;
-  padding-left: var(--pcoi-spacing-24);
+  padding-left: var(--pcoi-semantic-spacing-panel-padding);
   font-size: var(--pcoi-semantic-type-body-compact-size);
   color: var(--pcoi-semantic-text-secondary);
   line-height: var(--pcoi-semantic-type-body-compact-line-height);
@@ -36,9 +36,9 @@
   position: absolute;
   left: 0;
   top: 8px;
-  width: var(--pcoi-layout-component-bullet);
-  height: var(--pcoi-layout-component-bullet);
-  border-radius: var(--pcoi-radius-full);
+  width: var(--pcoi-semantic-sizing-bullet-size);
+  height: var(--pcoi-semantic-sizing-bullet-size);
+  border-radius: var(--pcoi-semantic-radius-badge);
   background: var(--pcoi-semantic-text-accent);
   opacity: 0.5;
 }
@@ -46,6 +46,6 @@
 /* ── Responsive ── */
 @media (max-width: 768px) {
   .pcoi-signals {
-    padding: var(--pcoi-spacing-24) var(--pcoi-spacing-28);
+    padding: var(--pcoi-semantic-spacing-panel-padding) var(--pcoi-semantic-spacing-inline-lg);
   }
 }

package/src/SignalsPanel/SignalsPanel.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import type { HeadingLevel } from "../types";
 
 export interface SignalsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Panel heading text */
   title?: string;
+  /** List of signal statements displayed as bullet points */
   signals: string[];
   /** Heading level for the title (default: "h3") */
   headingLevel?: HeadingLevel;

package/src/SuggestionCard/SuggestionCard.css

@@ -3,17 +3,17 @@
 .pcoi-suggestion-card {
   display: flex;
   align-items: center;
-  gap: var(--pcoi-spacing-12);
+  gap: var(--pcoi-semantic-spacing-panel-gap);
   width: 100%;
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-panel-padding-sm) var(--pcoi-semantic-spacing-card-gap);
   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-secondary);
   text-align: left;
-  background: var(--pcoi-color-bg-card);
+  background: var(--pcoi-semantic-bg-card);
   border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   cursor: pointer;
   transition:
     background var(--pcoi-effect-transition-medium),
@@ -23,7 +23,7 @@
 }
 
 .pcoi-suggestion-card:hover {
-  background: var(--pcoi-color-bg-card-hover);
+  background: var(--pcoi-semantic-bg-card-hover);
   border-color: var(--pcoi-semantic-border-card-hover);
   transform: var(--pcoi-effect-transform-hover-lift-sm);
 }

package/src/SuggestionCards/SuggestionCards.css

@@ -3,7 +3,7 @@
 .pcoi-suggestion-cards {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-16);
+  gap: var(--pcoi-semantic-spacing-stack-md);
 }
 
 /* ── Responsive: 3-col grid on tablet and up ── */

package/src/SuggestionCards/SuggestionCards.test.tsx

@@ -0,0 +1,27 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { Suggestion } from "../types";
+import { SuggestionCards } from "./SuggestionCards";
+
+describe("SuggestionCards", () => {
+  it("renders suggestions and calls onSelect with clicked item", () => {
+    const suggestions: Suggestion[] = [
+      { id: "s1", label: "What is PCOI?" },
+      { id: "s2", label: "How does indexing work?" },
+    ];
+
+    const onSelect = vi.fn();
+
+    render(<SuggestionCards suggestions={suggestions} onSelect={onSelect} />);
+
+    const first = screen.getByRole("button", { name: "What is PCOI?" });
+    const second = screen.getByRole("button", { name: "How does indexing work?" });
+
+    expect(first).toBeInTheDocument();
+    expect(second).toBeInTheDocument();
+
+    fireEvent.click(second);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(suggestions[1]);
+  });
+});

package/src/SuggestionCards/SuggestionCards.tsx

@@ -3,7 +3,7 @@ import { SuggestionCard } from "../SuggestionCard/SuggestionCard";
 import type { Suggestion } from "../types";
 
 export interface SuggestionCardsProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
   /** Array of suggestion prompts */
   suggestions: Suggestion[];
   /** Called when a suggestion card is clicked */

package/src/Toast/Toast.css

@@ -2,41 +2,41 @@
 
 .pcoi-toast {
   position: fixed;
-  bottom: var(--pcoi-spacing-24);
-  right: var(--pcoi-spacing-24);
-  z-index: var(--pcoi-layout-zIndex-toast, 600);
+  bottom: var(--pcoi-semantic-spacing-btn-x);
+  right: var(--pcoi-semantic-spacing-btn-x);
+  z-index: var(--pcoi-semantic-layout-z-toast, 600);
   animation: pcoi-toast-slide-in 0.3s ease;
 }
 
 .pcoi-toast__content {
   display: flex;
   align-items: center;
-  gap: var(--pcoi-spacing-12);
+  gap: var(--pcoi-semantic-spacing-panel-gap);
   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);
+  border-radius: var(--pcoi-semantic-radius-card);
   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);
+  padding: var(--pcoi-semantic-spacing-btn-y-comfortable) var(--pcoi-semantic-spacing-card-gap);
+  min-width: var(--pcoi-semantic-sizing-toast-width-min);
+  max-width: var(--pcoi-semantic-sizing-toast-width-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);
+  border-left: var(--pcoi-semantic-sizing-accent-border-width) 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);
+  border-left: var(--pcoi-semantic-sizing-accent-border-width) 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);
+  border-left: var(--pcoi-semantic-sizing-accent-border-width) 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);
+  border-left: var(--pcoi-semantic-sizing-accent-border-width) solid var(--pcoi-semantic-border-info);
 }
 
 .pcoi-toast__message {
@@ -53,8 +53,8 @@
   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);
+  padding: var(--pcoi-semantic-spacing-control-padding-2xs);
+  border-radius: var(--pcoi-semantic-radius-btn);
   flex-shrink: 0;
   transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
 }

package/src/Toast/Toast.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { CloseIcon } from "../../../icons/src/react/CloseIcon";
+import { CloseIcon } from "@pcoi/icons";
 
 export type ToastVariant = "success" | "error" | "warning" | "info";
 
@@ -23,55 +23,60 @@ export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
  *         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]);
+export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
+  (
+    {
+      message,
+      variant = "info",
+      open,
+      onClose,
+      duration = 5000,
+      className = "",
+      ...rest
+    },
+    ref
+  ) => {
+    const handleClose = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
 
-  useEffect(() => {
-    if (!open || duration === 0) return;
+    useEffect(() => {
+      if (!open || duration === 0) return;
 
-    const timer = setTimeout(handleClose, duration);
-    return () => clearTimeout(timer);
-  }, [open, duration, handleClose]);
+      const timer = setTimeout(handleClose, duration);
+      return () => clearTimeout(timer);
+    }, [open, duration, handleClose]);
 
-  if (!open) return null;
+    if (!open) return null;
 
-  const wrapperClasses = [
-    "pcoi-toast",
-    `pcoi-toast--${variant}`,
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
+    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
-  );
-};
+    return createPortal(
+      <div ref={ref} 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;