@pcoi/components 0.1.0 → 0.1.2

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);
   }
 }

package/src/TypingIndicator/TypingIndicator.tsx

@@ -20,11 +20,11 @@ export const TypingIndicator = React.forwardRef<
     .join(" ");
 
   return (
-    <div ref={ref} className={classes} {...rest}>
+    <div ref={ref} className={classes} role="status" aria-live="polite" aria-label={`${label} is typing`} {...rest}>
       <div className="pcoi-typing-indicator__header">
         <Badge>{label}</Badge>
       </div>
-      <div className="pcoi-typing-indicator__dots" aria-label="Typing">
+      <div className="pcoi-typing-indicator__dots" aria-hidden="true">
         <span className="pcoi-typing-indicator__dot" />
         <span className="pcoi-typing-indicator__dot" />
         <span className="pcoi-typing-indicator__dot" />

package/src/index.ts

@@ -25,6 +25,8 @@ export { Badge, type BadgeProps, type BadgeVariant } from "./Badge";
 export { Modal, type ModalProps } from "./Modal";
 export { Toast, type ToastProps, type ToastVariant } from "./Toast";
 
+export { CitationMark, type CitationMarkProps } from "./CitationMark";
+
 // Chat Interface components
 export { SuggestionCard, type SuggestionCardProps } from "./SuggestionCard";
 export { CitedExcerpt, type CitedExcerptProps } from "./CitedExcerpt";

package/src/styles.css

@@ -21,6 +21,7 @@
 @import "./DataTable/DataTable.css";
 @import "./Modal/Modal.css";
 @import "./Toast/Toast.css";
+@import "./CitationMark/CitationMark.css";
 @import "./SuggestionCard/SuggestionCard.css";
 @import "./SuggestionCards/SuggestionCards.css";
 @import "./CitedExcerpt/CitedExcerpt.css";

package/src/types.ts

@@ -1,4 +1,5 @@
 // @pcoi/components — Shared Types
+import type React from "react";
 
 /** Semantic heading level for document outline (h1–h6) */
 export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";