@pcoi/components 0.1.2 → 1.0.0

package/src/Badge/Badge.css

@@ -1,40 +0,0 @@
-/* Badge — @pcoi/components */
-
-.pcoi-badge {
-  display: inline-flex;
-  align-items: center;
-  font-family: var(--pcoi-semantic-type-mono-font);
-  font-size: var(--pcoi-semantic-type-badge-size);
-  font-weight: var(--pcoi-semantic-type-label-weight);
-  letter-spacing: var(--pcoi-semantic-type-badge-letter-spacing);
-  text-transform: uppercase;
-  padding: var(--pcoi-semantic-spacing-inline-2xs) var(--pcoi-semantic-spacing-chip-x);
-  border-radius: var(--pcoi-semantic-radius-badge);
-  line-height: var(--pcoi-semantic-type-none-line-height);
-}
-
-/* ── Variants ── */
-.pcoi-badge--default {
-  background: var(--pcoi-semantic-surface-accent-dim);
-  color: var(--pcoi-semantic-text-accent);
-}
-
-.pcoi-badge--success {
-  background: var(--pcoi-semantic-action-success-bg);
-  color: var(--pcoi-semantic-text-success);
-}
-
-.pcoi-badge--error {
-  background: var(--pcoi-semantic-action-error-bg);
-  color: var(--pcoi-semantic-text-error);
-}
-
-.pcoi-badge--warning {
-  background: var(--pcoi-semantic-action-warning-bg);
-  color: var(--pcoi-semantic-text-warning);
-}
-
-.pcoi-badge--info {
-  background: var(--pcoi-semantic-action-info-bg);
-  color: var(--pcoi-semantic-text-info);
-}

package/src/Badge/Badge.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-
-export type BadgeVariant = "default" | "success" | "error" | "warning" | "info";
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Badge content */
-  children: React.ReactNode;
-  /** Color variant */
-  variant?: BadgeVariant;
-}
-
-/**
- * PCOI Badge — Small label for status indicators, categories, and counts
- * Tokens: surface/accent-dim, text/accent, text/success, text/error,
- *         text/warning, text/info, radius-full, font-family/mono
- */
-export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ children, variant = "default", className = "", ...rest }, ref) => {
-    const classes = [
-      "pcoi-badge",
-      `pcoi-badge--${variant}`,
-      className,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return (
-      <span ref={ref} className={classes} {...rest}>
-        {children}
-      </span>
-    );
-  }
-);
-
-Badge.displayName = "Badge";
-export default Badge;

package/src/Badge/index.ts

@@ -1,2 +0,0 @@
-export { Badge, type BadgeProps, type BadgeVariant } from "./Badge";
-export { default } from "./Badge";

package/src/Button/Button.css

@@ -1,93 +0,0 @@
-/* Button — @pcoi/components
-   All visual properties reference @pcoi/tokens semantic layer */
-
-.pcoi-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--pcoi-semantic-spacing-btn-y-comfortable) var(--pcoi-semantic-spacing-btn-x-comfortable);
-  font-size: var(--pcoi-semantic-type-body-size);  /* 0.95rem */
-  font-weight: var(--pcoi-semantic-type-emphasis-weight);
-  font-family: var(--pcoi-semantic-type-body-font);
-  border-radius: var(--pcoi-semantic-radius-btn);
-  border: none;
-  cursor: pointer;
-  transition: all var(--pcoi-effect-transition-fast, 0.2s ease);
-  text-decoration: none;
-  line-height: var(--pcoi-semantic-type-none-line-height);
-  white-space: nowrap;
-}
-
-/* ── Primary ── */
-.pcoi-btn--primary {
-  background: var(--pcoi-semantic-action-primary-bg);
-  color: var(--pcoi-semantic-action-primary-text);
-}
-
-.pcoi-btn--primary:hover {
-  background: var(--pcoi-semantic-action-primary-bg-hover);
-  transform: var(--pcoi-effect-transform-hover-lift);
-  box-shadow: var(--pcoi-effect-shadow-btn-primary-hover);
-}
-
-/* ── Ghost ── */
-.pcoi-btn--ghost {
-  background: transparent;
-  color: var(--pcoi-semantic-action-ghost-text);
-  border: 1px solid var(--pcoi-semantic-action-ghost-border);
-}
-
-.pcoi-btn--ghost:hover {
-  color: var(--pcoi-semantic-action-ghost-text-hover);
-  border-color: var(--pcoi-semantic-action-ghost-border-hover);
-  background: var(--pcoi-semantic-action-ghost-bg-hover);
-}
-
-/* ── Nav CTA ── */
-.pcoi-btn--nav-cta {
-  background: var(--pcoi-semantic-action-primary-bg);
-  color: var(--pcoi-semantic-action-primary-text);
-  padding: var(--pcoi-semantic-spacing-btn-y) var(--pcoi-semantic-spacing-btn-x-nav);
-  font-weight: var(--pcoi-semantic-type-emphasis-weight);
-}
-
-.pcoi-btn--nav-cta:hover {
-  background: var(--pcoi-semantic-action-primary-bg-hover);
-  transform: var(--pcoi-effect-transform-hover-lift-sm);
-}
-
-/* ── Press ── */
-.pcoi-btn--primary:active {
-  transform: var(--pcoi-effect-transform-press-scale);
-  box-shadow: none;
-}
-
-.pcoi-btn--ghost:active {
-  transform: var(--pcoi-effect-transform-press-scale);
-}
-
-.pcoi-btn--nav-cta:active {
-  transform: var(--pcoi-effect-transform-press-scale);
-  box-shadow: none;
-}
-
-/* ── Focus ── */
-.pcoi-btn:focus-visible {
-  outline: none;
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-}
-
-/* ── Disabled ── */
-.pcoi-btn:disabled,
-.pcoi-btn[aria-disabled="true"] {
-  opacity: var(--pcoi-effect-opacity-disabled);
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
-}
-
-/* ── Size: Large ── */
-.pcoi-btn--large {
-  padding: var(--pcoi-semantic-spacing-btn-y-lg) var(--pcoi-semantic-spacing-btn-x-lg);
-  font-size: var(--pcoi-semantic-type-body-lg-size);  /* 1rem */
-}

package/src/Button/Button.figma.tsx

@@ -1,27 +0,0 @@
-import figma from "@figma/code-connect";
-import { Button } from "./Button";
-
-/**
- * Code Connect: Button/Primary
- * Maps Figma Button component properties to React Button props
- */
-figma.connect(Button, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=101-1", {
-  props: {
-    variant: figma.enum("Variant", {
-      Primary: "primary",
-      Ghost: "ghost",
-      "Nav CTA": "nav-cta",
-    }),
-    size: figma.enum("Size", {
-      Default: "default",
-      Large: "large",
-    }),
-    label: figma.string("Label"),
-    disabled: figma.boolean("Disabled"),
-  },
-  example: ({ variant, size, label, disabled }) => (
-    <Button variant={variant} size={size} disabled={disabled}>
-      {label}
-    </Button>
-  ),
-});

package/src/Button/Button.test.tsx

@@ -1,32 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { Button } from "./Button";
-
-describe("Button", () => {
-  it("renders children with default variant classes", () => {
-    render(<Button>Send</Button>);
-
-    const button = screen.getByRole("button", { name: "Send" });
-    expect(button).toHaveClass("pcoi-btn", "pcoi-btn--primary");
-    expect(button).not.toHaveClass("pcoi-btn--large");
-  });
-
-  it("applies variant and size classes", () => {
-    render(
-      <Button variant="ghost" size="large">
-        Cancel
-      </Button>
-    );
-
-    const button = screen.getByRole("button", { name: "Cancel" });
-    expect(button).toHaveClass("pcoi-btn--ghost", "pcoi-btn--large");
-  });
-
-  it("invokes onClick when enabled", () => {
-    const onClick = vi.fn();
-    render(<Button onClick={onClick}>Click</Button>);
-
-    fireEvent.click(screen.getByRole("button", { name: "Click" }));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});

package/src/Button/Button.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-
-export type ButtonVariant = "primary" | "ghost" | "nav-cta";
-export type ButtonSize = "default" | "large";
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Visual variant */
-  variant?: ButtonVariant;
-  /** Size preset */
-  size?: ButtonSize;
-  /** Content */
-  children: React.ReactNode;
-}
-
-/**
- * PCOI Button Component
- *
- * Variants:
- *   - primary: Gold accent bg, dark text. Hero CTA, form submit.
- *   - ghost: Transparent bg, subtle border. Secondary actions.
- *   - nav-cta: Compact primary for navigation bar.
- *
- * Tokens consumed:
- *   - action/primary-bg, action/primary-bg-hover, action/primary-text
- *   - action/ghost-bg, action/ghost-border, action/ghost-text
- *   - radius-sm, transition/fast
- *   - shadow/btn-primary-hover, transform/hover-lift
- */
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = "primary", size = "default", children, className = "", ...props }, ref) => {
-    const classes = [
-      "pcoi-btn",
-      `pcoi-btn--${variant}`,
-      size !== "default" ? `pcoi-btn--${size}` : "",
-      className,
-    ].filter(Boolean).join(" ");
-
-    return (
-      <button ref={ref} className={classes} {...props}>
-        {children}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "Button";
-export default Button;

package/src/Button/index.ts

@@ -1 +0,0 @@
-export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./Button";

package/src/Callout/Callout.css

@@ -1,48 +0,0 @@
-/* Callout — @pcoi/components */
-
-.pcoi-callout {
-  text-align: center;
-  padding: var(--pcoi-semantic-spacing-component-gap) var(--pcoi-semantic-spacing-btn-x);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.pcoi-callout__line {
-  width: var(--pcoi-semantic-sizing-accent-line-width);
-  height: 2px;
-  background: var(--pcoi-semantic-text-accent);
-  margin-bottom: var(--pcoi-semantic-spacing-stack-lg);
-}
-
-.pcoi-callout__quote {
-  font-size: var(--pcoi-semantic-type-callout-size);
-  font-weight: var(--pcoi-semantic-type-callout-weight);
-  color: var(--pcoi-semantic-text-secondary);
-  line-height: var(--pcoi-semantic-type-body-compact-line-height);
-  max-width: var(--pcoi-semantic-sizing-callout-width, 640px);
-  margin: 0 0 var(--pcoi-semantic-spacing-panel-padding) 0;
-  padding: 0;
-  font-style: italic;
-}
-
-.pcoi-callout__quote p {
-  margin: 0;
-}
-
-.pcoi-callout__attribution {
-  font-size: var(--pcoi-semantic-type-body-sm-size);
-  color: var(--pcoi-semantic-text-muted);
-  margin: 0;
-}
-
-.pcoi-callout__attribution a {
-  color: var(--pcoi-semantic-text-accent);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
-}
-
-.pcoi-callout__attribution a:hover {
-  color: var(--pcoi-semantic-text-accent-hover);
-}

package/src/Callout/Callout.figma.tsx

@@ -1,25 +0,0 @@
-import figma from "@figma/code-connect";
-import { Callout } from "./Callout";
-
-/**
- * Code Connect: Callout
- * Maps Figma callout content properties to React Callout props
- */
-figma.connect(Callout, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=108-1", {
-  props: {
-    quote: figma.string("Quote"),
-    attribution: figma.string("Attribution"),
-    attributionTitle: figma.string("Attribution Title"),
-    sourceUrl: figma.string("Source URL"),
-    sourceLabel: figma.string("Source Label"),
-  },
-  example: ({ quote, attribution, attributionTitle, sourceUrl, sourceLabel }) => (
-    <Callout
-      quote={quote}
-      attribution={attribution || undefined}
-      attributionTitle={attributionTitle || undefined}
-      sourceUrl={sourceUrl || undefined}
-      sourceLabel={sourceLabel || undefined}
-    />
-  ),
-});

package/src/Callout/Callout.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-
-export interface CalloutProps extends React.HTMLAttributes<HTMLElement> {
-  /** Quote text */
-  quote: string;
-  /** Attribution name */
-  attribution?: string;
-  /** Attribution title/context */
-  attributionTitle?: string;
-  /** Link URL for the source reference */
-  sourceUrl?: string;
-  /** Display label for the source link (default: "Source") */
-  sourceLabel?: string;
-}
-
-/**
- * PCOI Callout / Blockquote
- *
- * Renders a semantic `<figure>` with `<blockquote>` and optional `<figcaption>`.
- * Tokens: spacing-40 (padding), text/secondary, text/accent (link)
- */
-export const Callout = React.forwardRef<HTMLElement, CalloutProps>(
-  ({ quote, attribution, attributionTitle, sourceUrl, sourceLabel, className = "", ...rest }, ref) => (
-    <figure ref={ref} className={`pcoi-callout ${className}`} {...rest}>
-      <div className="pcoi-callout__line" aria-hidden="true" />
-      <blockquote className="pcoi-callout__quote">
-        <p>{quote}</p>
-      </blockquote>
-      {(attribution || sourceUrl) && (
-        <figcaption className="pcoi-callout__attribution">
-          {attributionTitle && <span>{attributionTitle} &nbsp;~&nbsp; </span>}
-          {attribution}
-          {sourceUrl && (
-            <> &nbsp;|&nbsp; <a href={sourceUrl} target="_blank" rel="noopener noreferrer">{sourceLabel || "Source"}</a></>
-          )}
-        </figcaption>
-      )}
-    </figure>
-  )
-);
-
-Callout.displayName = "Callout";
-export default Callout;

package/src/Callout/index.ts

@@ -1 +0,0 @@
-export { Callout, type CalloutProps } from "./Callout";

package/src/Card/Card.css

@@ -1,88 +0,0 @@
-/* Card — @pcoi/components */
-
-.pcoi-card {
-  border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-semantic-radius-card);
-  padding: var(--pcoi-semantic-spacing-card-padding);
-  transition: border-color var(--pcoi-effect-transition-medium, 0.3s ease),
-              transform var(--pcoi-effect-transition-medium, 0.3s ease);
-}
-
-.pcoi-card:hover {
-  border-color: var(--pcoi-semantic-border-card-hover);
-  transform: var(--pcoi-effect-transform-hover-lift);
-}
-
-/* ── Problem Card ── */
-.pcoi-card--problem {
-  background: var(--pcoi-semantic-bg-card);
-}
-
-.pcoi-card--problem .pcoi-card__icon {
-  width: var(--pcoi-semantic-sizing-icon-box);
-  height: var(--pcoi-semantic-sizing-icon-box);
-  border-radius: var(--pcoi-semantic-radius-btn);
-  background: var(--pcoi-semantic-surface-accent-dim);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: var(--pcoi-semantic-spacing-card-gap);
-  color: var(--pcoi-semantic-text-accent);
-}
-
-.pcoi-card--problem .pcoi-card__title {
-  font-size: var(--pcoi-semantic-type-heading-md-size);
-  font-weight: var(--pcoi-semantic-type-emphasis-weight);
-  color: var(--pcoi-semantic-text-primary);
-  margin: 0 0 var(--pcoi-semantic-spacing-text-gap-sm) 0;
-}
-
-.pcoi-card--problem .pcoi-card__description {
-  font-size: var(--pcoi-semantic-type-body-size);
-  color: var(--pcoi-semantic-text-secondary);
-  line-height: var(--pcoi-semantic-type-body-line-height);
-}
-
-/* ── Who Card ── */
-.pcoi-card--who {
-  background: var(--pcoi-semantic-bg-surface);
-}
-
-.pcoi-card--who .pcoi-card__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-text-gap-sm) 0;
-}
-
-.pcoi-card--who .pcoi-card__description {
-  font-size: var(--pcoi-semantic-type-body-compact-size);
-  color: var(--pcoi-semantic-text-secondary);
-  line-height: var(--pcoi-semantic-type-body-line-height);
-}
-
-/* ── Principle Card ── */
-.pcoi-card--principle {
-  background: var(--pcoi-semantic-bg-card);
-}
-
-.pcoi-card--principle .pcoi-card__number {
-  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);
-  color: var(--pcoi-semantic-text-accent);
-  margin-bottom: var(--pcoi-semantic-spacing-stack-md);
-}
-
-.pcoi-card--principle .pcoi-card__title {
-  font-size: var(--pcoi-semantic-type-card-subtitle-size);
-  font-weight: var(--pcoi-semantic-type-emphasis-weight);
-  color: var(--pcoi-semantic-text-primary);
-  margin: 0 0 var(--pcoi-semantic-spacing-text-gap-sm) 0;
-}
-
-.pcoi-card--principle .pcoi-card__description {
-  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/Card/Card.figma.tsx

@@ -1,28 +0,0 @@
-import figma from "@figma/code-connect";
-import { Card } from "./Card";
-
-/**
- * Code Connect: Card
- * Maps Figma Card component properties to React Card props
- */
-figma.connect(Card, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=102-1", {
-  props: {
-    variant: figma.enum("Variant", {
-      Problem: "problem",
-      Who: "who",
-      Principle: "principle",
-    }),
-    title: figma.string("Title"),
-    description: figma.string("Description"),
-    number: figma.string("Number"),
-  },
-  example: ({ variant, title, description, number }) => (
-    <Card
-      variant={variant}
-      title={title}
-      description={description}
-      number={number}
-      icon={variant === "problem" ? <span aria-hidden="true">!</span> : undefined}
-    />
-  ),
-});

package/src/Card/Card.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-import type { HeadingLevel } from "../types";
-
-export type CardVariant = "problem" | "who" | "principle";
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Card visual variant */
-  variant?: CardVariant;
-  /** Card title */
-  title: string;
-  /** Card body text */
-  description: string;
-  /** Icon element (for problem cards) */
-  icon?: React.ReactNode;
-  /** Roman numeral or number (for principle cards) */
-  number?: string;
-  /** Heading level for the title (default: "h3") */
-  headingLevel?: HeadingLevel;
-}
-
-/**
- * PCOI Card Component
- *
- * Three variants extracted from pcoi.ai:
- *   - problem: bg-card, icon box + title + description (Problem section)
- *   - who: surface bg, accent title (Who It's For section)
- *   - principle: bg-card, roman numeral + title + description (Principles section)
- *
- * Tokens consumed:
- *   - bg/card, bg/surface, border/default, border/hover
- *   - radius-md, spacing-36 (padding), spacing-20 (icon margin)
- *   - text/primary, text/secondary, text/accent
- *   - transition/medium, transform/hover-lift
- */
-export const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ variant = "problem", title, description, icon, number, headingLevel = "h3", className = "", ...rest }, ref) => {
-    const Heading = headingLevel;
-    const classes = [
-      "pcoi-card",
-      `pcoi-card--${variant}`,
-      className,
-    ].filter(Boolean).join(" ");
-
-    return (
-      <div ref={ref} className={classes} {...rest}>
-        {variant === "problem" && icon && (
-          <div className="pcoi-card__icon">{icon}</div>
-        )}
-        {variant === "principle" && number && (
-          <div className="pcoi-card__number">{number}</div>
-        )}
-        <Heading className="pcoi-card__title">{title}</Heading>
-        <p className="pcoi-card__description">{description}</p>
-      </div>
-    );
-  }
-);
-
-Card.displayName = "Card";
-export default Card;

package/src/Card/index.ts

@@ -1 +0,0 @@
-export { Card, type CardProps, type CardVariant } from "./Card";

package/src/ChatInterface/ChatInterface.css

@@ -1,50 +0,0 @@
-/* ChatInterface — @pcoi/components */
-
-.pcoi-chat {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-width: var(--pcoi-semantic-sizing-container-narrow, 800px);
-  margin: 0 auto;
-}
-
-/* ── Empty state ── */
-.pcoi-chat--empty {
-  justify-content: flex-end;
-}
-
-.pcoi-chat__empty-state {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: var(--pcoi-semantic-spacing-panel-padding-sm);
-}
-
-.pcoi-chat__suggestions {
-  max-width: 100%;
-}
-
-/* ── Messages ── */
-.pcoi-chat__messages {
-  flex: 1;
-  min-height: 0;
-}
-
-/* ── Prompt ── */
-.pcoi-chat__prompt {
-  flex-shrink: 0;
-  padding: var(--pcoi-semantic-spacing-panel-padding-sm);
-}
-
-/* ── Responsive ── */
-@media (min-width: 768px) {
-  .pcoi-chat__empty-state {
-    padding: var(--pcoi-semantic-spacing-panel-padding);
-  }
-
-  .pcoi-chat__prompt {
-    padding: var(--pcoi-semantic-spacing-panel-padding);
-  }
-}