@pcoi/components 0.1.1 → 0.1.2

package/src/Toast/Toast.tsx

@@ -23,55 +23,60 @@ export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
  *         text/primary, text/success|error|warning|info,
  *         shadow/elevated, zIndex/toast, radius-md
  */
-export const Toast: React.FC<ToastProps> = ({
-  message,
-  variant = "info",
-  open,
-  onClose,
-  duration = 5000,
-  className = "",
-  ...rest
-}) => {
-  const handleClose = useCallback(() => {
-    onClose?.();
-  }, [onClose]);
+export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
+  (
+    {
+      message,
+      variant = "info",
+      open,
+      onClose,
+      duration = 5000,
+      className = "",
+      ...rest
+    },
+    ref
+  ) => {
+    const handleClose = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
 
-  useEffect(() => {
-    if (!open || duration === 0) return;
+    useEffect(() => {
+      if (!open || duration === 0) return;
 
-    const timer = setTimeout(handleClose, duration);
-    return () => clearTimeout(timer);
-  }, [open, duration, handleClose]);
+      const timer = setTimeout(handleClose, duration);
+      return () => clearTimeout(timer);
+    }, [open, duration, handleClose]);
 
-  if (!open) return null;
+    if (!open) return null;
 
-  const wrapperClasses = [
-    "pcoi-toast",
-    `pcoi-toast--${variant}`,
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
+    const wrapperClasses = [
+      "pcoi-toast",
+      `pcoi-toast--${variant}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
 
-  return createPortal(
-    <div className={wrapperClasses} role="alert" {...rest}>
-      <div className="pcoi-toast__content">
-        <span className="pcoi-toast__message">{message}</span>
-        {onClose && (
-          <button
-            type="button"
-            className="pcoi-toast__close"
-            onClick={handleClose}
-            aria-label="Dismiss notification"
-          >
-            <CloseIcon size={16} />
-          </button>
-        )}
-      </div>
-    </div>,
-    document.body
-  );
-};
+    return createPortal(
+      <div ref={ref} className={wrapperClasses} role="alert" {...rest}>
+        <div className="pcoi-toast__content">
+          <span className="pcoi-toast__message">{message}</span>
+          {onClose && (
+            <button
+              type="button"
+              className="pcoi-toast__close"
+              onClick={handleClose}
+              aria-label="Dismiss notification"
+            >
+              <CloseIcon size={16} />
+            </button>
+          )}
+        </div>
+      </div>,
+      document.body
+    );
+  }
+);
 
 Toast.displayName = "Toast";
 export default Toast;

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";