@pcoi/components 0.1.0 → 0.1.1

package/src/SuggestionCards/SuggestionCards.test.tsx

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

@@ -3,7 +3,7 @@ import { SuggestionCard } from "../SuggestionCard/SuggestionCard";
 import type { Suggestion } from "../types";
 
 export interface SuggestionCardsProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
   /** Array of suggestion prompts */
   suggestions: Suggestion[];
   /** Called when a suggestion card is clicked */

package/src/Toast/Toast.css

@@ -2,41 +2,41 @@
 
 .pcoi-toast {
   position: fixed;
-  bottom: var(--pcoi-spacing-24);
-  right: var(--pcoi-spacing-24);
-  z-index: var(--pcoi-layout-zIndex-toast, 600);
+  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-spacing-12);
+  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-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   box-shadow: var(--pcoi-effect-shadow-elevated);
-  padding: var(--pcoi-spacing-14) var(--pcoi-spacing-20);
-  min-width: var(--pcoi-layout-container-toast-min);
-  max-width: var(--pcoi-layout-container-toast-max);
+  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-layout-component-accent-border-w) solid var(--pcoi-semantic-border-success);
+  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-layout-component-accent-border-w) solid var(--pcoi-semantic-border-error);
+  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-layout-component-accent-border-w) solid var(--pcoi-semantic-border-warning);
+  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-layout-component-accent-border-w) solid var(--pcoi-semantic-border-info);
+  border-left: var(--pcoi-semantic-sizing-accent-border-width) solid var(--pcoi-semantic-border-info);
 }
 
 .pcoi-toast__message {
@@ -53,8 +53,8 @@
   font-size: var(--pcoi-semantic-type-close-sm-size);
   line-height: var(--pcoi-semantic-type-none-line-height);
   cursor: pointer;
-  padding: var(--pcoi-spacing-4);
-  border-radius: var(--pcoi-radius-sm);
+  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);
 }

package/src/Toast/Toast.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { CloseIcon } from "../../../icons/src/react/CloseIcon";
+import { CloseIcon } from "@pcoi/icons";
 
 export type ToastVariant = "success" | "error" | "warning" | "info";
 

package/src/Toggle/Toggle.css

@@ -3,13 +3,13 @@
 .pcoi-toggle {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
 }
 
 .pcoi-toggle__control {
   display: inline-flex;
   align-items: center;
-  gap: var(--pcoi-spacing-12);
+  gap: var(--pcoi-semantic-spacing-panel-gap);
   cursor: pointer;
 }
 
@@ -26,10 +26,10 @@
 }
 
 .pcoi-toggle__track {
-  width: var(--pcoi-layout-component-toggle-track-w);
-  height: var(--pcoi-layout-component-toggle-track-h);
+  width: var(--pcoi-semantic-sizing-toggle-track-width);
+  height: var(--pcoi-semantic-sizing-toggle-track-height);
   flex-shrink: 0;
-  border-radius: var(--pcoi-radius-full);
+  border-radius: var(--pcoi-semantic-radius-badge);
   background: var(--pcoi-semantic-action-toggle-bg);
   position: relative;
   transition: background var(--pcoi-effect-transition-fast, 0.2s ease);
@@ -37,11 +37,11 @@
 
 .pcoi-toggle__thumb {
   position: absolute;
-  top: var(--pcoi-layout-component-toggle-thumb-inset);
-  left: var(--pcoi-layout-component-toggle-thumb-inset);
-  width: var(--pcoi-layout-component-toggle-thumb);
-  height: var(--pcoi-layout-component-toggle-thumb);
-  border-radius: var(--pcoi-radius-full);
+  top: var(--pcoi-semantic-spacing-toggle-thumb-inset);
+  left: var(--pcoi-semantic-spacing-toggle-thumb-inset);
+  width: var(--pcoi-semantic-sizing-toggle-thumb-size);
+  height: var(--pcoi-semantic-sizing-toggle-thumb-size);
+  border-radius: var(--pcoi-semantic-radius-badge);
   background: var(--pcoi-semantic-action-toggle-thumb);
   transition: transform var(--pcoi-effect-transition-fast, 0.2s ease),
               background var(--pcoi-effect-transition-fast, 0.2s ease);
@@ -52,10 +52,10 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: var(--pcoi-layout-component-toggle-check-w);
-  height: var(--pcoi-layout-component-toggle-check-h);
+  width: var(--pcoi-semantic-sizing-toggle-check-width);
+  height: var(--pcoi-semantic-sizing-toggle-check-height);
   border: solid var(--pcoi-semantic-action-success);
-  border-width: 0 var(--pcoi-layout-component-toggle-check-stroke) var(--pcoi-layout-component-toggle-check-stroke) 0;
+  border-width: 0 var(--pcoi-semantic-sizing-toggle-check-stroke) var(--pcoi-semantic-sizing-toggle-check-stroke) 0;
   transform: translate(-50%, -60%) rotate(45deg);
   opacity: 0;
   transition: opacity var(--pcoi-effect-transition-fast, 0.2s ease);
@@ -74,7 +74,7 @@
 }
 
 .pcoi-toggle__input:checked + .pcoi-toggle__track .pcoi-toggle__thumb {
-  transform: translateX(var(--pcoi-layout-component-toggle-thumb-travel)) var(--pcoi-effect-transform-toggle-thumb-on);
+  transform: translateX(var(--pcoi-semantic-spacing-toggle-thumb-travel)) var(--pcoi-effect-transform-toggle-thumb-on);
 }
 
 .pcoi-toggle__input:checked + .pcoi-toggle__track .pcoi-toggle__thumb::after {
@@ -100,7 +100,7 @@
   font-size: var(--pcoi-semantic-type-label-size);
   color: var(--pcoi-semantic-text-error);
   margin: 0;
-  padding-left: calc(var(--pcoi-layout-component-toggle-track-w) + var(--pcoi-spacing-12));
+  padding-left: calc(var(--pcoi-semantic-sizing-toggle-track-width) + var(--pcoi-semantic-spacing-panel-gap));
 }
 
 /* ── Disabled state ── */

package/src/Toggle/Toggle.figma.tsx

@@ -0,0 +1,24 @@
+import figma from "@figma/code-connect";
+import { Toggle } from "./Toggle";
+
+/**
+ * Code Connect: Toggle
+ * Maps Figma toggle states to React Toggle props
+ */
+figma.connect(Toggle, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=110-1", {
+  props: {
+    label: figma.string("Label"),
+    checked: figma.boolean("Checked"),
+    disabled: figma.boolean("Disabled"),
+    hasError: figma.boolean("Error"),
+  },
+  example: ({ label, checked, disabled, hasError }) => (
+    <Toggle
+      name="mapped-toggle"
+      label={label}
+      defaultChecked={checked}
+      disabled={disabled}
+      error={hasError ? "Please resolve this setting." : undefined}
+    />
+  ),
+});

package/src/TypingIndicator/TypingIndicator.css

@@ -3,11 +3,11 @@
 .pcoi-typing-indicator {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-8);
-  padding: var(--pcoi-spacing-16);
+  gap: var(--pcoi-semantic-spacing-stack-sm);
+  padding: var(--pcoi-semantic-spacing-panel-padding-sm);
   background: var(--pcoi-semantic-surface-accent-dim);
   border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   animation: pcoi-typing-fade-in 0.2s ease;
 }
 
@@ -20,13 +20,13 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: var(--pcoi-spacing-4) 0;
+  padding: var(--pcoi-semantic-spacing-inline-2xs) 0;
 }
 
 .pcoi-typing-indicator__dot {
   width: 8px;
   height: 8px;
-  border-radius: var(--pcoi-radius-full);
+  border-radius: var(--pcoi-semantic-radius-avatar);
   background: var(--pcoi-semantic-text-accent);
   opacity: 0.4;
   animation: pcoi-typing-bounce 1.4s ease-in-out infinite;
@@ -65,6 +65,6 @@
 /* ── Responsive: offset to match assistant messages on desktop ── */
 @media (min-width: 1025px) {
   .pcoi-typing-indicator {
-    margin-right: var(--pcoi-spacing-48);
+    margin-right: var(--pcoi-semantic-spacing-inline-xl);
   }
 }