@pcoi/components 0.1.1 → 1.0.0

package/src/Checkbox/Checkbox.tsx

@@ -1,70 +0,0 @@
-import React from "react";
-
-export interface CheckboxProps
-  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 Checkbox — Custom styled checkbox with label
- * Tokens: bg/default, border/default, border/error, focus/border, focus/glow,
- *         action/primary-bg, action/primary-text, text/primary, text/error, radius-sm
- */
-export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  (
-    {
-      label,
-      name,
-      error,
-      disabled = false,
-      className = "",
-      ...props
-    },
-    ref
-  ) => {
-    const fieldId = `pcoi-field-${name}`;
-    const errorId = error ? `${fieldId}-error` : undefined;
-
-    const wrapperClasses = [
-      "pcoi-checkbox",
-      error ? "pcoi-checkbox--error" : "",
-      disabled ? "pcoi-checkbox--disabled" : "",
-      className,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return (
-      <div className={wrapperClasses}>
-        <label htmlFor={fieldId} className="pcoi-checkbox__control">
-          <input
-            ref={ref}
-            type="checkbox"
-            id={fieldId}
-            name={name}
-            disabled={disabled}
-            aria-invalid={!!error}
-            aria-describedby={errorId}
-            className="pcoi-checkbox__input"
-            {...props}
-          />
-          <span className="pcoi-checkbox__box" aria-hidden="true" />
-          <span className="pcoi-checkbox__label">{label}</span>
-        </label>
-        {error && (
-          <span id={errorId} className="pcoi-checkbox__error" role="alert">
-            {error}
-          </span>
-        )}
-      </div>
-    );
-  }
-);
-
-Checkbox.displayName = "Checkbox";
-export default Checkbox;

package/src/Checkbox/index.ts

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

package/src/CitationMark/CitationMark.css

@@ -1,40 +0,0 @@
-/* CitationMark — @pcoi/components */
-
-.pcoi-citation-mark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 32px;
-  min-height: 32px;
-  padding: var(--pcoi-semantic-spacing-inline-2xs) var(--pcoi-semantic-spacing-chip-x);
-  font-family: var(--pcoi-semantic-type-mono-font);
-  font-size: var(--pcoi-semantic-type-body-compact-size);
-  font-weight: var(--pcoi-semantic-type-label-weight);
-  line-height: var(--pcoi-semantic-type-none-line-height);
-  color: var(--pcoi-semantic-text-accent);
-  background: var(--pcoi-semantic-surface-accent-dim);
-  border: 1px solid var(--pcoi-semantic-border-accent-dim);
-  border-radius: var(--pcoi-semantic-radius-badge);
-  cursor: pointer;
-  vertical-align: middle;
-  transition:
-    background var(--pcoi-effect-transition-fast),
-    color var(--pcoi-effect-transition-fast),
-    border-color var(--pcoi-effect-transition-fast),
-    transform var(--pcoi-effect-transition-fast);
-}
-
-.pcoi-citation-mark:hover {
-  color: var(--pcoi-semantic-text-accent-hover);
-  background: var(--pcoi-semantic-surface-accent-dim);
-  border-color: var(--pcoi-semantic-border-accent-subtle);
-}
-
-.pcoi-citation-mark:active {
-  transform: var(--pcoi-effect-transform-press-scale-control);
-}
-
-.pcoi-citation-mark:focus-visible {
-  outline: none;
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-}

package/src/CitationMark/CitationMark.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-
-export interface CitationMarkProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** 1-based citation index displayed in the button */
-  index: number;
-  /** Tooltip text (defaults to "Citation {index}") */
-  sourceLabel?: string;
-}
-
-/**
- * PCOI CitationMark — Inline pill-shaped citation button [1]
- * Tokens: text/accent, surface/accent-dim, border/accent-dim,
- *         radius-full, font-family/mono, transition-fast,
- *         shadow/focus-ring, transform/press-scale-control
- */
-export const CitationMark = React.forwardRef<
-  HTMLButtonElement,
-  CitationMarkProps
->(({ index, sourceLabel, className = "", ...rest }, ref) => {
-  const classes = ["pcoi-citation-mark", className].filter(Boolean).join(" ");
-
-  return (
-    <button
-      ref={ref}
-      type="button"
-      className={classes}
-      title={sourceLabel ?? `Citation ${index}`}
-      aria-label={sourceLabel ?? `Citation ${index}`}
-      {...rest}
-    >
-      {index}
-    </button>
-  );
-});
-
-CitationMark.displayName = "CitationMark";
-export default CitationMark;

package/src/CitationMark/index.ts

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

package/src/CitedExcerpt/CitedExcerpt.css

@@ -1,75 +0,0 @@
-/* CitedExcerpt — @pcoi/components */
-
-.pcoi-cited-excerpt {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-form-gap-compact);
-  padding: var(--pcoi-semantic-spacing-input-y);
-  background: var(--pcoi-semantic-surface-accent-dim);
-  border-left: var(--pcoi-semantic-sizing-accent-border-width) solid
-    var(--pcoi-semantic-border-accent-dim);
-  border-radius: var(--pcoi-semantic-radius-input);
-}
-
-.pcoi-cited-excerpt__source {
-  display: inline-flex;
-  align-items: center;
-  align-self: flex-start;
-  padding: 0;
-  font-family: var(--pcoi-semantic-type-body-font);
-  font-size: var(--pcoi-semantic-type-body-sm-size);
-  color: var(--pcoi-semantic-text-accent);
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition:
-    color var(--pcoi-effect-transition-fast);
-}
-
-.pcoi-cited-excerpt__source:hover {
-  color: var(--pcoi-semantic-text-accent-hover);
-  text-decoration: underline;
-}
-
-.pcoi-cited-excerpt__source:focus-visible {
-  outline: none;
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-semantic-radius-btn);
-}
-
-.pcoi-cited-excerpt__body {
-  display: flex;
-  align-items: baseline;
-  gap: var(--pcoi-semantic-spacing-form-gap-compact);
-}
-
-.pcoi-cited-excerpt__index {
-  flex-shrink: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-family: var(--pcoi-semantic-type-mono-font);
-  font-size: var(--pcoi-semantic-type-body-compact-size);
-  font-weight: var(--pcoi-semantic-type-label-weight);
-  color: var(--pcoi-semantic-text-accent);
-  transition: color var(--pcoi-effect-transition-fast);
-}
-
-.pcoi-cited-excerpt__index:hover {
-  color: var(--pcoi-semantic-text-accent-hover);
-}
-
-.pcoi-cited-excerpt__index:focus-visible {
-  outline: none;
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-semantic-radius-btn);
-}
-
-.pcoi-cited-excerpt__text {
-  margin: 0;
-  font-family: var(--pcoi-semantic-type-body-font);
-  font-size: var(--pcoi-semantic-type-body-compact-size);
-  color: var(--pcoi-semantic-text-secondary);
-  line-height: var(--pcoi-semantic-type-body-line-height);
-}

package/src/CitedExcerpt/CitedExcerpt.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-
-export interface CitedExcerptProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /** 1-based citation index */
-  index: number;
-  /** Short excerpt from the source document */
-  excerpt: string;
-  /** Source document title */
-  sourceTitle: string;
-  /** Called when the source link is clicked */
-  onSourceClick?: () => void;
-}
-
-/**
- * PCOI CitedExcerpt — Blockquote with excerpt text above, clickable index + source below
- * Tokens: surface/accent-dim, border/accent-dim, accent-border-w,
- *         radius-sm, text/secondary, text/accent, type/body-compact-size
- */
-export const CitedExcerpt = React.forwardRef<HTMLDivElement, CitedExcerptProps>(
-  ({ index, excerpt, sourceTitle, onSourceClick, className = "", ...rest }, ref) => {
-    const classes = ["pcoi-cited-excerpt", className]
-      .filter(Boolean)
-      .join(" ");
-
-    return (
-      <div ref={ref} className={classes} {...rest}>
-        <button
-          type="button"
-          className="pcoi-cited-excerpt__source"
-          onClick={onSourceClick}
-        >
-          {sourceTitle}
-        </button>
-        <div className="pcoi-cited-excerpt__body">
-          <button
-            type="button"
-            className="pcoi-cited-excerpt__index"
-            onClick={onSourceClick}
-          >
-            [{index}]
-          </button>
-          <p className="pcoi-cited-excerpt__text">{excerpt}</p>
-        </div>
-      </div>
-    );
-  }
-);
-
-CitedExcerpt.displayName = "CitedExcerpt";
-export default CitedExcerpt;

package/src/CitedExcerpt/index.ts

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

package/src/ComparisonTable/ComparisonTable.css

@@ -1,66 +0,0 @@
-/* ComparisonTable — @pcoi/components */
-
-.pcoi-comparison {
-  max-width: var(--pcoi-semantic-sizing-comparison-width, 900px);
-  border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-semantic-radius-card);
-  overflow: hidden;
-}
-
-.pcoi-comparison__table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.pcoi-comparison__header .pcoi-comparison__col {
-  font-family: var(--pcoi-semantic-type-mono-font);
-  font-size: var(--pcoi-semantic-type-body-sm-size);
-  font-weight: var(--pcoi-semantic-type-emphasis-weight);
-  letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
-  text-transform: uppercase;
-  color: var(--pcoi-semantic-text-secondary);
-  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
-  background: var(--pcoi-semantic-bg-alt);
-  text-align: left;
-}
-
-.pcoi-comparison__row {
-  border-top: 1px solid var(--pcoi-semantic-border-card);
-}
-
-.pcoi-comparison__col {
-  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
-  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-comparison__col--label {
-  font-weight: var(--pcoi-semantic-type-label-weight);
-  color: var(--pcoi-semantic-text-primary);
-  text-align: left;
-}
-
-.pcoi-comparison__col--highlight {
-  background: var(--pcoi-semantic-surface-highlight);
-  color: var(--pcoi-semantic-text-accent);
-  font-weight: var(--pcoi-semantic-type-label-weight);
-}
-
-.pcoi-comparison__header .pcoi-comparison__col--highlight {
-  color: var(--pcoi-semantic-text-accent);
-  font-weight: var(--pcoi-semantic-type-emphasis-weight);
-}
-
-/* ── Responsive ── */
-/* 768px = mobile breakpoint (CSS vars are not supported in @media) */
-@media (max-width: 768px) {
-  .pcoi-comparison {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .pcoi-comparison__table {
-    min-width: var(--pcoi-semantic-sizing-comparison-scroll-width);
-  }
-}

package/src/ComparisonTable/ComparisonTable.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-
-export interface ComparisonRow {
-  label: string;
-  competitor: string;
-  pcoi: string;
-}
-
-export interface ComparisonTableProps extends React.HTMLAttributes<HTMLDivElement> {
-  competitorName?: string;
-  pcoiName?: string;
-  rows: ComparisonRow[];
-}
-
-/**
- * PCOI Comparison Table
- * Semantic <table> with 3 columns: label | competitor | PCOI (highlighted)
- * Tokens: radius-md, border/default, bg/alt, surface/accent-dim, text/accent
- */
-export const ComparisonTable = React.forwardRef<HTMLDivElement, ComparisonTableProps>(
-  ({ competitorName = "Typical SaaS AI", pcoiName = "PCOI", rows, className = "", ...rest }, ref) => (
-    <div ref={ref} className={`pcoi-comparison ${className}`} {...rest}>
-      <table className="pcoi-comparison__table">
-        <thead>
-          <tr className="pcoi-comparison__header">
-            <th className="pcoi-comparison__col" scope="col">
-              <span className="pcoi-sr-only">Feature</span>
-            </th>
-            <th className="pcoi-comparison__col" scope="col">{competitorName}</th>
-            <th className="pcoi-comparison__col pcoi-comparison__col--highlight" scope="col">{pcoiName}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row, i) => (
-            <tr key={i} className="pcoi-comparison__row">
-              <th className="pcoi-comparison__col pcoi-comparison__col--label" scope="row">{row.label}</th>
-              <td className="pcoi-comparison__col">{row.competitor}</td>
-              <td className="pcoi-comparison__col pcoi-comparison__col--highlight">{row.pcoi}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-);
-
-ComparisonTable.displayName = "ComparisonTable";
-export default ComparisonTable;

package/src/ComparisonTable/index.ts

@@ -1 +0,0 @@
-export { ComparisonTable, type ComparisonTableProps, type ComparisonRow } from "./ComparisonTable";

package/src/ContactForm/ContactForm.css

@@ -1,38 +0,0 @@
-/* ContactForm — @pcoi/components */
-
-.pcoi-form {
-  background: var(--pcoi-semantic-bg-surface);
-  border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-semantic-radius-panel);
-  padding: var(--pcoi-semantic-spacing-form-padding);
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-form-gap);
-}
-
-.pcoi-form__row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--pcoi-semantic-spacing-form-gap);
-}
-
-.pcoi-form__full {
-  grid-column: 1 / -1;
-}
-
-.pcoi-form__note {
-  font-size: var(--pcoi-semantic-type-label-size);
-  color: var(--pcoi-semantic-text-muted);
-  margin: 0;
-}
-
-/* ── Responsive ── */
-@media (max-width: 768px) {
-  .pcoi-form {
-    padding: var(--pcoi-semantic-spacing-panel-padding);
-  }
-
-  .pcoi-form__row {
-    grid-template-columns: 1fr;
-  }
-}

package/src/ContactForm/ContactForm.tsx

@@ -1,57 +0,0 @@
-import React, { useState } from "react";
-import { Button } from "../Button";
-import { FormField } from "../FormField";
-
-export interface ContactFormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
-  onSubmit?: (data: Record<string, string>) => void;
-}
-
-/**
- * PCOI Contact Form
- * Composes: FormField (atom), Button (atom)
- * Tokens: bg/surface, border/default, radius-lg, spacing-40 (padding), spacing-20 (gap)
- */
-export const ContactForm = React.forwardRef<HTMLFormElement, ContactFormProps>(
-  ({ onSubmit, className = "", ...rest }, ref) => {
-    const [submitted, setSubmitted] = useState(false);
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      const form = e.currentTarget;
-      const formData = new FormData(form);
-      const data = Object.fromEntries(formData.entries()) as Record<string, string>;
-      onSubmit?.(data);
-      setSubmitted(true);
-      form.reset();
-      setTimeout(() => setSubmitted(false), 3000);
-    };
-
-    return (
-      <form ref={ref} className={`pcoi-form ${className}`} onSubmit={handleSubmit} aria-label="Contact form" {...rest}>
-        <div className="pcoi-form__row">
-          <FormField label="Name" name="name" placeholder="Your name" required />
-          <FormField label="Company" name="company" placeholder="Company name" required />
-        </div>
-        <div className="pcoi-form__row">
-          <FormField label="Email" name="email" type="email" placeholder="you@company.com" required />
-          <FormField label="Your Role" name="role" placeholder="CEO, COO, VP Ops, etc." />
-        </div>
-        <FormField
-          label="What problem are you trying to solve?"
-          name="context"
-          multiline
-          rows={3}
-          placeholder="Tell us about the knowledge challenges in your organization..."
-          className="pcoi-form__full"
-        />
-        <Button type="submit" variant="primary" size="large" disabled={submitted}>
-          {submitted ? "Message Received" : "Start the Conversation"}
-        </Button>
-        <p className="pcoi-form__note">No sales automation. A real person reads this and responds personally.</p>
-      </form>
-    );
-  }
-);
-
-ContactForm.displayName = "ContactForm";
-export default ContactForm;

package/src/ContactForm/index.ts

@@ -1 +0,0 @@
-export { ContactForm, type ContactFormProps } from "./ContactForm";

package/src/DataTable/DataTable.css

@@ -1,56 +0,0 @@
-/* DataTable — @pcoi/components */
-
-.pcoi-data-table {
-  width: 100%;
-  overflow: hidden;
-  overflow-x: auto;
-  border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-semantic-radius-card);
-}
-
-.pcoi-data-table__table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.pcoi-data-table__th {
-  font-family: var(--pcoi-semantic-type-mono-font);
-  font-size: var(--pcoi-semantic-type-body-sm-size);
-  font-weight: var(--pcoi-semantic-type-emphasis-weight);
-  letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
-  text-transform: uppercase;
-  color: var(--pcoi-semantic-text-secondary);
-  text-align: left;
-  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
-  background: var(--pcoi-semantic-bg-alt);
-}
-
-.pcoi-data-table__th--center { text-align: center; }
-.pcoi-data-table__th--right  { text-align: right; }
-
-.pcoi-data-table__td {
-  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);
-  text-align: left;
-  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
-}
-
-.pcoi-data-table__td--center { text-align: center; }
-.pcoi-data-table__td--right  { text-align: right; }
-
-.pcoi-data-table__row {
-  border-top: 1px solid var(--pcoi-semantic-border-card);
-  transition: background var(--pcoi-effect-transition-fast, 0.2s ease);
-}
-
-.pcoi-data-table__row:hover {
-  background: var(--pcoi-semantic-bg-card-hover);
-}
-
-.pcoi-data-table__empty {
-  font-size: var(--pcoi-semantic-type-body-size);
-  color: var(--pcoi-semantic-text-muted);
-  text-align: center;
-  padding: var(--pcoi-semantic-spacing-component-gap) var(--pcoi-semantic-spacing-stack-md);
-}

package/src/DataTable/DataTable.tsx

@@ -1,104 +0,0 @@
-import React from "react";
-
-export interface DataTableColumn<T = Record<string, unknown>> {
-  /** Unique key matching a property on the row data */
-  key: string;
-  /** Column header text */
-  header: string;
-  /** Text alignment (default: "left") */
-  align?: "left" | "center" | "right";
-  /** Custom cell renderer */
-  render?: (value: unknown, row: T) => React.ReactNode;
-}
-
-export interface DataTableProps<T = Record<string, unknown>> extends React.HTMLAttributes<HTMLDivElement> {
-  /** Column definitions */
-  columns: DataTableColumn<T>[];
-  /** Row data */
-  rows: T[];
-  /** Key extractor for row identity */
-  rowKey?: keyof T | ((row: T, index: number) => string);
-  /** Empty state message */
-  emptyText?: string;
-  /** Accessible label for the table (describes its content for screen readers) */
-  ariaLabel?: string;
-}
-
-/**
- * PCOI DataTable — Presentational data table for dashboards
- * Tokens: bg/card-hover, border/default, text/primary, text/secondary,
- *         font-size/caption/body-default, spacing-12/16
- */
-export const DataTable = React.forwardRef<HTMLDivElement, DataTableProps>(
-  (
-    {
-      columns,
-      rows,
-      rowKey,
-      emptyText = "No data available",
-      ariaLabel,
-      className = "",
-      ...rest
-    },
-    ref
-  ) => {
-    const getRowKey = (row: Record<string, unknown>, index: number): string => {
-      if (!rowKey) return String(index);
-      if (typeof rowKey === "function") return rowKey(row, index);
-      return String(row[rowKey as string]);
-    };
-
-    return (
-      <div ref={ref} className={`pcoi-data-table ${className}`} {...rest}>
-        <table className="pcoi-data-table__table" aria-label={ariaLabel}>
-          <thead className="pcoi-data-table__head">
-            <tr className="pcoi-data-table__head-row">
-              {columns.map((col) => (
-                <th
-                  key={col.key}
-                  className={`pcoi-data-table__th${col.align ? ` pcoi-data-table__th--${col.align}` : ""}`}
-                >
-                  {col.header}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody className="pcoi-data-table__body">
-            {rows.length === 0 ? (
-              <tr>
-                <td
-                  colSpan={columns.length}
-                  className="pcoi-data-table__empty"
-                >
-                  {emptyText}
-                </td>
-              </tr>
-            ) : (
-              rows.map((row, index) => (
-                <tr
-                  key={getRowKey(row as Record<string, unknown>, index)}
-                  className="pcoi-data-table__row"
-                >
-                  {columns.map((col) => {
-                    const value = (row as Record<string, unknown>)[col.key];
-                    return (
-                      <td
-                        key={col.key}
-                        className={`pcoi-data-table__td${col.align ? ` pcoi-data-table__td--${col.align}` : ""}`}
-                      >
-                        {col.render ? col.render(value, row) : String(value ?? "")}
-                      </td>
-                    );
-                  })}
-                </tr>
-              ))
-            )}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-);
-
-DataTable.displayName = "DataTable";
-export default DataTable;

package/src/DataTable/index.ts

@@ -1,2 +0,0 @@
-export { DataTable, type DataTableProps, type DataTableColumn } from "./DataTable";
-export { default } from "./DataTable";