@pcoi/components 0.1.0

package/src/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import type { OptionItem } from "../types";
+
+export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange"> {
+  /** Group label rendered as a fieldset legend */
+  label: string;
+  /** Shared name for all radio inputs */
+  name: string;
+  /** List of radio options */
+  options: OptionItem[];
+  /** Pre-selected value */
+  defaultValue?: string;
+  /** Error message — when truthy, group enters error state */
+  error?: string;
+  /** Marks the group as required */
+  required?: boolean;
+  /** Disables all radio inputs */
+  disabled?: boolean;
+  /** Called with the selected value when it changes */
+  onChange?: (value: string) => void;
+}
+
+/**
+ * PCOI RadioGroup — Accessible radio button group using fieldset/legend
+ * Tokens: bg/default, border/default, border/error, focus/border, focus/glow,
+ *         action/primary-bg, text/primary, text/secondary, text/error, radius-full
+ */
+export const RadioGroup = React.forwardRef<HTMLFieldSetElement, RadioGroupProps>(
+  (
+    {
+      label,
+      name,
+      options,
+      defaultValue,
+      error,
+      required = false,
+      disabled = false,
+      onChange,
+      className = "",
+      ...rest
+    },
+    ref
+  ) => {
+    const errorId = error ? `pcoi-field-${name}-error` : undefined;
+
+    const wrapperClasses = [
+      "pcoi-radio-group",
+      error ? "pcoi-radio-group--error" : "",
+      disabled ? "pcoi-radio-group--disabled" : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e.target.value);
+    };
+
+    return (
+      <fieldset
+        ref={ref}
+        className={wrapperClasses}
+        aria-invalid={!!error}
+        aria-describedby={errorId}
+        {...rest}
+      >
+        <legend className="pcoi-radio-group__legend">
+          {label}
+          {required && (
+            <span className="pcoi-radio-group__required" aria-hidden="true">
+              *
+            </span>
+          )}
+        </legend>
+        <div className="pcoi-radio-group__options">
+          {options.map((opt) => {
+            const optionId = `pcoi-field-${name}-${opt.value}`;
+            return (
+              <label
+                key={opt.value}
+                htmlFor={optionId}
+                className="pcoi-radio-group__option"
+              >
+                <input
+                  type="radio"
+                  id={optionId}
+                  name={name}
+                  value={opt.value}
+                  defaultChecked={defaultValue === opt.value}
+                  required={required}
+                  disabled={disabled || opt.disabled}
+                  onChange={handleChange}
+                  className="pcoi-radio-group__input"
+                />
+                <span className="pcoi-radio-group__circle" aria-hidden="true" />
+                <span className="pcoi-radio-group__label">{opt.label}</span>
+              </label>
+            );
+          })}
+        </div>
+        {error && (
+          <span id={errorId} className="pcoi-radio-group__error" role="alert">
+            {error}
+          </span>
+        )}
+      </fieldset>
+    );
+  }
+);
+
+RadioGroup.displayName = "RadioGroup";
+export default RadioGroup;

package/src/RadioGroup/index.ts

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

package/src/SectionHeader/SectionHeader.css

@@ -0,0 +1,38 @@
+/* SectionHeader — @pcoi/components */
+
+.pcoi-section-header {
+  text-align: center;
+  max-width: var(--pcoi-layout-container-narrow);
+  margin: 0 auto var(--pcoi-spacing-64);
+}
+
+.pcoi-section-header__label {
+  display: inline-block;
+  font-family: var(--pcoi-semantic-type-mono-font);
+  font-size: var(--pcoi-semantic-type-section-label-size);
+  font-weight: var(--pcoi-semantic-type-label-weight);
+  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);
+}
+
+.pcoi-section-header__title {
+  font-size: var(--pcoi-semantic-type-section-title-size);
+  font-weight: var(--pcoi-semantic-type-heading-weight);
+  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;
+}
+
+.pcoi-section-header__title em {
+  font-style: normal;
+  color: var(--pcoi-semantic-text-accent);
+}
+
+.pcoi-section-header__desc {
+  font-size: var(--pcoi-semantic-type-heading-sm-size);
+  color: var(--pcoi-semantic-text-secondary);
+  line-height: var(--pcoi-semantic-type-relaxed-line-height);
+}

package/src/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import type { HeadingLevel } from "../types";
+
+export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Section label (mono, uppercase, accent) e.g. "The Problem" */
+  label: string;
+  /** Main heading */
+  title: string;
+  /** Emphasized portion of title (renders in accent color) */
+  titleEmphasis?: string;
+  /** Optional subtitle/description */
+  description?: string;
+  /** Heading level for the title (default: "h2") */
+  headingLevel?: HeadingLevel;
+}
+
+/**
+ * PCOI Section Header
+ *
+ * Centered header pattern used across all major sections.
+ * Label + H2 + optional description, max-width 800px.
+ *
+ * Tokens consumed:
+ *   - text/accent (label), text/primary (h2), text/secondary (desc)
+ *   - font-mono (label), font-sans (h2, desc)
+ *   - spacing-16 (label mb, h2 mb), spacing-64 (section mb)
+ *   - container-narrow (800px max-width)
+ */
+export const SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(
+  ({ label, title, titleEmphasis, description, headingLevel = "h2", className = "", ...rest }, ref) => {
+    const Heading = headingLevel;
+
+    return (
+      <div ref={ref} className={`pcoi-section-header ${className}`} {...rest}>
+        <span className="pcoi-section-header__label">{label}</span>
+        <Heading className="pcoi-section-header__title">
+          {titleEmphasis ? (
+            <>
+              {title.replace(titleEmphasis, "")}
+              <em>{titleEmphasis}</em>
+            </>
+          ) : (
+            title
+          )}
+        </Heading>
+        {description && (
+          <p className="pcoi-section-header__desc">{description}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+SectionHeader.displayName = "SectionHeader";
+export default SectionHeader;

package/src/SectionHeader/index.ts

@@ -0,0 +1 @@
+export { SectionHeader, type SectionHeaderProps } from "./SectionHeader";

package/src/Select/Select.css

@@ -0,0 +1,90 @@
+/* Select — @pcoi/components */
+
+.pcoi-select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pcoi-spacing-6);
+}
+
+.pcoi-select__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-select__required {
+  color: var(--pcoi-semantic-text-error);
+  margin-left: var(--pcoi-spacing-4);
+}
+
+.pcoi-select__wrapper {
+  position: relative;
+}
+
+.pcoi-select__native {
+  appearance: none;
+  width: 100%;
+  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-radius-sm);
+  padding: var(--pcoi-spacing-12) var(--pcoi-spacing-36) var(--pcoi-spacing-12) var(--pcoi-spacing-14);
+  cursor: pointer;
+  transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease),
+              box-shadow var(--pcoi-effect-transition-fast, 0.2s ease);
+}
+
+.pcoi-select__native:hover {
+  border-color: var(--pcoi-semantic-border-input-hover);
+}
+
+.pcoi-select__native:active {
+  transform: var(--pcoi-effect-transform-press-scale-input);
+}
+
+.pcoi-select__native:focus {
+  outline: none;
+  border-color: var(--pcoi-semantic-focus-border);
+  box-shadow: var(--pcoi-effect-shadow-focus-ring);
+}
+
+.pcoi-select__native option {
+  background: var(--pcoi-semantic-bg-default);
+  color: var(--pcoi-semantic-text-primary);
+}
+
+.pcoi-select__chevron {
+  position: absolute;
+  right: var(--pcoi-spacing-14);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--pcoi-semantic-text-secondary);
+  display: flex;
+  align-items: center;
+}
+
+/* ── Error state ── */
+.pcoi-select--error .pcoi-select__native {
+  border-color: var(--pcoi-semantic-border-error);
+}
+
+.pcoi-select--error .pcoi-select__native:focus {
+  box-shadow: var(--pcoi-effect-shadow-focus-ring-error);
+}
+
+.pcoi-select__error {
+  font-size: var(--pcoi-semantic-type-label-size);
+  color: var(--pcoi-semantic-text-error);
+  margin: 0;
+}
+
+/* ── Disabled state ── */
+.pcoi-select--disabled {
+  opacity: var(--pcoi-effect-opacity-disabled);
+  pointer-events: none;
+}

package/src/Select/Select.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { ChevronDownIcon } from "../../../icons/src/react/ChevronDownIcon";
+import type { OptionItem } from "../types";
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  /** Visible label text */
+  label: string;
+  /** Unique field name, also used to generate id */
+  name: string;
+  /** List of options */
+  options: OptionItem[];
+  /** Placeholder text shown as first disabled option */
+  placeholder?: string;
+  /** Error message — when truthy, field enters error state */
+  error?: string;
+}
+
+/**
+ * PCOI Select — Native dropdown with custom styling
+ * Tokens: bg/default, border/default, border/error, focus/border, focus/glow,
+ *         text/primary, text/secondary, text/muted, text/error, radius-sm
+ */
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      label,
+      name,
+      options,
+      placeholder,
+      error,
+      required = false,
+      disabled = false,
+      className = "",
+      ...props
+    },
+    ref
+  ) => {
+    const fieldId = `pcoi-field-${name}`;
+    const errorId = error ? `${fieldId}-error` : undefined;
+
+    const wrapperClasses = [
+      "pcoi-select",
+      error ? "pcoi-select--error" : "",
+      disabled ? "pcoi-select--disabled" : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div className={wrapperClasses}>
+        <label htmlFor={fieldId} className="pcoi-select__label">
+          {label}
+          {required && (
+            <span className="pcoi-select__required" aria-hidden="true">
+              *
+            </span>
+          )}
+        </label>
+        <div className="pcoi-select__wrapper">
+          <select
+            ref={ref}
+            id={fieldId}
+            name={name}
+            required={required}
+            disabled={disabled}
+            aria-invalid={!!error}
+            aria-describedby={errorId}
+            className="pcoi-select__native"
+            defaultValue={placeholder ? "" : undefined}
+            {...props}
+          >
+            {placeholder && (
+              <option value="" disabled hidden>
+                {placeholder}
+              </option>
+            )}
+            {options.map((opt) => (
+              <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+          <span className="pcoi-select__chevron" aria-hidden="true">
+            <ChevronDownIcon size={16} />
+          </span>
+        </div>
+        {error && (
+          <span id={errorId} className="pcoi-select__error" role="alert">
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
+export default Select;

package/src/Select/index.ts

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

package/src/SignalsPanel/SignalsPanel.css

@@ -0,0 +1,51 @@
+/* SignalsPanel — @pcoi/components */
+
+.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);
+}
+
+.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;
+}
+
+.pcoi-signals__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pcoi-spacing-14);
+}
+
+.pcoi-signals__item {
+  position: relative;
+  padding-left: var(--pcoi-spacing-24);
+  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);
+}
+
+.pcoi-signals__item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 8px;
+  width: var(--pcoi-layout-component-bullet);
+  height: var(--pcoi-layout-component-bullet);
+  border-radius: var(--pcoi-radius-full);
+  background: var(--pcoi-semantic-text-accent);
+  opacity: 0.5;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .pcoi-signals {
+    padding: var(--pcoi-spacing-24) var(--pcoi-spacing-28);
+  }
+}

package/src/SignalsPanel/SignalsPanel.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import type { HeadingLevel } from "../types";
+
+export interface SignalsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  signals: string[];
+  /** Heading level for the title (default: "h3") */
+  headingLevel?: HeadingLevel;
+}
+
+/**
+ * PCOI Signals Panel — "You'll know this is for you if:" section
+ * Tokens: bg/surface, border/default, radius-md, spacing-40/48, text/accent
+ */
+export const SignalsPanel = React.forwardRef<HTMLDivElement, SignalsPanelProps>(
+  ({ title = "You'll know this is for you if:", signals, headingLevel = "h3", className = "", ...rest }, ref) => {
+    const Heading = headingLevel;
+
+    return (
+      <div ref={ref} className={`pcoi-signals ${className}`} {...rest}>
+        <Heading className="pcoi-signals__title">{title}</Heading>
+        <ul className="pcoi-signals__list">
+          {signals.map((signal, i) => (
+            <li key={i} className="pcoi-signals__item">{signal}</li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+);
+
+SignalsPanel.displayName = "SignalsPanel";
+export default SignalsPanel;

package/src/SignalsPanel/index.ts

@@ -0,0 +1 @@
+export { SignalsPanel, type SignalsPanelProps } from "./SignalsPanel";

package/src/SuggestionCard/SuggestionCard.css

@@ -0,0 +1,51 @@
+/* SuggestionCard — @pcoi/components */
+
+.pcoi-suggestion-card {
+  display: flex;
+  align-items: center;
+  gap: var(--pcoi-spacing-12);
+  width: 100%;
+  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  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);
+  border: 1px solid var(--pcoi-semantic-border-card);
+  border-radius: var(--pcoi-radius-md);
+  cursor: pointer;
+  transition:
+    background var(--pcoi-effect-transition-medium),
+    border-color var(--pcoi-effect-transition-medium),
+    transform var(--pcoi-effect-transition-medium),
+    box-shadow var(--pcoi-effect-transition-medium);
+}
+
+.pcoi-suggestion-card:hover {
+  background: var(--pcoi-color-bg-card-hover);
+  border-color: var(--pcoi-semantic-border-card-hover);
+  transform: var(--pcoi-effect-transform-hover-lift-sm);
+}
+
+.pcoi-suggestion-card:active {
+  transform: var(--pcoi-effect-transform-press-scale);
+}
+
+.pcoi-suggestion-card:focus-visible {
+  outline: none;
+  box-shadow: var(--pcoi-effect-shadow-focus-ring);
+}
+
+.pcoi-suggestion-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--pcoi-semantic-text-accent);
+}
+
+.pcoi-suggestion-card__label {
+  flex: 1;
+  min-width: 0;
+}

package/src/SuggestionCard/SuggestionCard.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export interface SuggestionCardProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Display text */
+  label: string;
+  /** Optional icon rendered before the label */
+  icon?: React.ReactNode;
+}
+
+/**
+ * PCOI SuggestionCard — Clickable FAQ card for chat empty state
+ * Tokens: bg/card, bg/card-hover, border/card, border/card-hover,
+ *         text/secondary, text/accent, radius-md, transition-medium,
+ *         transform/hover-lift-sm, transform/press-scale, shadow/focus-ring
+ */
+export const SuggestionCard = React.forwardRef<
+  HTMLButtonElement,
+  SuggestionCardProps
+>(({ label, icon, className = "", ...rest }, ref) => {
+  const classes = ["pcoi-suggestion-card", className]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <button ref={ref} type="button" className={classes} {...rest}>
+      {icon && <span className="pcoi-suggestion-card__icon">{icon}</span>}
+      <span className="pcoi-suggestion-card__label">{label}</span>
+    </button>
+  );
+});
+
+SuggestionCard.displayName = "SuggestionCard";
+export default SuggestionCard;

package/src/SuggestionCard/index.ts

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

package/src/SuggestionCards/SuggestionCards.css

@@ -0,0 +1,15 @@
+/* SuggestionCards — @pcoi/components */
+
+.pcoi-suggestion-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pcoi-spacing-16);
+}
+
+/* ── Responsive: 3-col grid on tablet and up ── */
+@media (min-width: 768px) {
+  .pcoi-suggestion-cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

package/src/SuggestionCards/SuggestionCards.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { SuggestionCard } from "../SuggestionCard/SuggestionCard";
+import type { Suggestion } from "../types";
+
+export interface SuggestionCardsProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Array of suggestion prompts */
+  suggestions: Suggestion[];
+  /** Called when a suggestion card is clicked */
+  onSelect: (suggestion: Suggestion) => void;
+}
+
+/**
+ * PCOI SuggestionCards — 3-column grid of suggestion cards for chat empty state
+ * Tokens: spacing-16 (gap), grid/suggestions
+ */
+export const SuggestionCards = React.forwardRef<
+  HTMLDivElement,
+  SuggestionCardsProps
+>(({ suggestions, onSelect, className = "", ...rest }, ref) => {
+  const classes = ["pcoi-suggestion-cards", className]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div ref={ref} className={classes} {...rest}>
+      {suggestions.map((s) => (
+        <SuggestionCard
+          key={s.id}
+          label={s.label}
+          icon={s.icon}
+          onClick={() => onSelect(s)}
+        />
+      ))}
+    </div>
+  );
+});
+
+SuggestionCards.displayName = "SuggestionCards";
+export default SuggestionCards;

package/src/SuggestionCards/index.ts

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