@pcoi/components 0.1.2 → 1.0.0

package/src/SectionHeader/SectionHeader.tsx

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

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

package/src/Select/Select.css

@@ -1,90 +0,0 @@
-/* Select — @pcoi/components */
-
-.pcoi-select {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-form-gap-compact);
-}
-
-.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-semantic-spacing-inline-2xs);
-}
-
-.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-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);
-}
-
-.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-semantic-spacing-input-x-compact);
-  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.figma.tsx

@@ -1,33 +0,0 @@
-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,100 +0,0 @@
-import React from "react";
-import { ChevronDownIcon } from "@pcoi/icons";
-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

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

package/src/SignalsPanel/SignalsPanel.css

@@ -1,51 +0,0 @@
-/* SignalsPanel — @pcoi/components */
-
-.pcoi-signals {
-  background: var(--pcoi-semantic-bg-surface);
-  border: 1px solid var(--pcoi-semantic-border-default);
-  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-semantic-spacing-panel-padding) 0;
-}
-
-.pcoi-signals__list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-stack-compact);
-}
-
-.pcoi-signals__item {
-  position: relative;
-  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);
-}
-
-.pcoi-signals__item::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 8px;
-  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;
-}
-
-/* ── Responsive ── */
-@media (max-width: 768px) {
-  .pcoi-signals {
-    padding: var(--pcoi-semantic-spacing-panel-padding) var(--pcoi-semantic-spacing-inline-lg);
-  }
-}

package/src/SignalsPanel/SignalsPanel.tsx

@@ -1,35 +0,0 @@
-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;
-}
-
-/**
- * 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

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

package/src/SuggestionCard/SuggestionCard.css

@@ -1,51 +0,0 @@
-/* SuggestionCard — @pcoi/components */
-
-.pcoi-suggestion-card {
-  display: flex;
-  align-items: center;
-  gap: var(--pcoi-semantic-spacing-panel-gap);
-  width: 100%;
-  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-semantic-bg-card);
-  border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-semantic-radius-card);
-  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-semantic-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

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

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

package/src/SuggestionCards/SuggestionCards.css

@@ -1,15 +0,0 @@
-/* SuggestionCards — @pcoi/components */
-
-.pcoi-suggestion-cards {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-stack-md);
-}
-
-/* ── 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.test.tsx

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

@@ -1,40 +0,0 @@
-import React from "react";
-import { SuggestionCard } from "../SuggestionCard/SuggestionCard";
-import type { Suggestion } from "../types";
-
-export interface SuggestionCardsProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
-  /** 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

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

package/src/Toast/Toast.css

@@ -1,85 +0,0 @@
-/* Toast — @pcoi/components */
-
-.pcoi-toast {
-  position: fixed;
-  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-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-semantic-radius-card);
-  box-shadow: var(--pcoi-effect-shadow-elevated);
-  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-semantic-sizing-accent-border-width) solid var(--pcoi-semantic-border-success);
-}
-
-.pcoi-toast--error .pcoi-toast__content {
-  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-semantic-sizing-accent-border-width) solid var(--pcoi-semantic-border-warning);
-}
-
-.pcoi-toast--info .pcoi-toast__content {
-  border-left: var(--pcoi-semantic-sizing-accent-border-width) 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-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);
-}
-
-.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;
-  }
-}