@pcoi/components 0.1.0

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@pcoi/components",
+  "version": "0.1.0",
+  "description": "PCOI Design System — React UI components",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "src/**/*"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./css": "./dist/components.css"
+  },
+  "scripts": {
+    "build": "vite build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@pcoi/tokens": "^0.1.0",
+    "@pcoi/icons": "^0.1.0"
+  },
+  "keywords": ["components", "pcoi", "design-system", "react"],
+  "license": "MIT",
+  "sideEffects": ["*.css"]
+}

package/src/Badge/Badge.css

@@ -0,0 +1,40 @@
+/* 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-spacing-4) var(--pcoi-spacing-10);
+  border-radius: var(--pcoi-radius-full);
+  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

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

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

package/src/Button/Button.css

@@ -0,0 +1,93 @@
+/* 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-spacing-14) var(--pcoi-spacing-28);
+  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-radius-sm);
+  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-spacing-10) var(--pcoi-spacing-22);
+  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-spacing-16) var(--pcoi-spacing-36);
+  font-size: var(--pcoi-semantic-type-body-lg-size);  /* 1rem */
+}

package/src/Button/Button.figma.tsx

@@ -0,0 +1,29 @@
+import figma from "@figma/code-connect";
+import { Button } from "./Button";
+
+/**
+ * Code Connect: Button/Primary
+ * Maps Figma Button component properties to React Button props
+ */
+// TODO: Replace with your Figma component URL from the Figma file
+// e.g. "https://www.figma.com/file/FILEID/NAME?node-id=NODEID"
+figma.connect(Button, "https://figma.com/REPLACE_WITH_BUTTON_COMPONENT_URL", {
+  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 }) => (
+    <Button variant={variant} size={size}>
+      {label}
+    </Button>
+  ),
+});

package/src/Button/Button.tsx

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

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

package/src/Callout/Callout.css

@@ -0,0 +1,43 @@
+/* Callout — @pcoi/components */
+
+.pcoi-callout {
+  text-align: center;
+  padding: var(--pcoi-spacing-40) var(--pcoi-spacing-24);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.pcoi-callout__line {
+  width: var(--pcoi-layout-component-accent-line-w);
+  height: 2px;
+  background: var(--pcoi-semantic-text-accent);
+  margin-bottom: var(--pcoi-spacing-32);
+}
+
+.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-layout-container-chamath, 640px);
+  margin: 0 0 var(--pcoi-spacing-24) 0;
+  font-style: italic;
+}
+
+.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.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+export interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Quote text */
+  quote: string;
+  /** Attribution name */
+  attribution?: string;
+  /** Attribution title/context */
+  attributionTitle?: string;
+  /** Link URL */
+  sourceUrl?: string;
+  /** Link label */
+  sourceLabel?: string;
+}
+
+/**
+ * PCOI Callout / Blockquote
+ * Tokens: spacing-40 (padding), text/secondary, text/accent (link)
+ */
+export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
+  ({ quote, attribution, attributionTitle, sourceUrl, sourceLabel, className = "", ...rest }, ref) => (
+    <div ref={ref} className={`pcoi-callout ${className}`} {...rest}>
+      <div className="pcoi-callout__line" />
+      <p className="pcoi-callout__quote">{quote}</p>
+      {(attribution || sourceUrl) && (
+        <p 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></>
+          )}
+        </p>
+      )}
+    </div>
+  )
+);
+
+Callout.displayName = "Callout";
+export default Callout;

package/src/Callout/index.ts

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

package/src/Card/Card.css

@@ -0,0 +1,88 @@
+/* Card — @pcoi/components */
+
+.pcoi-card {
+  border: 1px solid var(--pcoi-semantic-border-card);
+  border-radius: var(--pcoi-radius-md);
+  padding: var(--pcoi-spacing-36);
+  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-radius-sm);
+  background: var(--pcoi-semantic-surface-accent-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--pcoi-spacing-20);
+  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-spacing-10) 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-spacing-10) 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-spacing-16);
+}
+
+.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-spacing-10) 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.tsx

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

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

package/src/ChatInterface/ChatInterface.css

@@ -0,0 +1,49 @@
+/* ChatInterface — @pcoi/components */
+
+.pcoi-chat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: var(--pcoi-layout-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-spacing-16);
+}
+
+.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-spacing-16);
+}
+
+/* ── Responsive ── */
+@media (min-width: 768px) {
+  .pcoi-chat__empty-state {
+    padding: var(--pcoi-spacing-24);
+  }
+
+  .pcoi-chat__prompt {
+    padding: var(--pcoi-spacing-24);
+  }
+}