chordia-ui 3.2.4 → 3.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.2.4",
+  "version": "3.2.5",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/common/SideDrawer.jsx

@@ -0,0 +1,321 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { X } from "lucide-react";
+
+/**
+ * SideDrawer — slide-in panel from the right edge.
+ *
+ * Props:
+ *  - open          boolean       Whether the drawer is visible
+ *  - onClose       function      Close callback
+ *  - title         string        Header title
+ *  - subtitle      string        Optional description below the divider
+ *  - children      ReactNode     Drawer body content
+ *  - footer        ReactNode     Optional fixed footer (e.g. Cancel/Save buttons)
+ *  - width         number|string Drawer width (default 515)
+ *  - height        number|string Drawer height (default 762)
+ *  - toggleLabel   string        Optional toggle label (right side of subtitle row)
+ *  - toggleChecked boolean       Toggle state
+ *  - onToggle      function      Toggle callback
+ */
+export default function SideDrawer({
+  open,
+  onClose,
+  title,
+  subtitle,
+  children,
+  footer,
+  width = 515,
+  height = 762,
+  toggleLabel,
+  toggleChecked,
+  onToggle,
+}) {
+  const drawerRef = useRef(null);
+
+  // Close on Escape key
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        style={{
+          position: "fixed",
+          inset: 0,
+          zIndex: 1200,
+          background: "rgba(0, 0, 0, 0.20)",
+        }}
+      />
+
+      {/* Drawer panel */}
+      <div
+        ref={drawerRef}
+        style={{
+          position: "fixed",
+          top: "50%",
+          right: 0,
+          transform: "translateY(-50%)",
+          zIndex: 1201,
+          display: "flex",
+          width,
+          height,
+          maxHeight: "100vh",
+          padding: "20px",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "20px",
+          borderRadius: "12px 0 0 12px",
+          background: "#FFF",
+          boxShadow: "648px 0 100px 0 rgba(0, 0, 0, 0.20)",
+        }}
+      >
+        {/* Header: Title + Close */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%",
+            flexShrink: 0,
+          }}
+        >
+          <h2
+            style={{
+              fontSize: "20px",
+              fontWeight: 700,
+              color: "var(--Base-Strong, #0B0B0B)",
+              margin: 0,
+              lineHeight: 1.3,
+            }}
+          >
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "28px",
+              height: "28px",
+              border: "none",
+              background: "transparent",
+              color: "var(--Grey-Strong, #808183)",
+              cursor: "pointer",
+              borderRadius: "4px",
+              transition: "background 0.15s ease",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = "#ECEEF2";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = "transparent";
+            }}
+          >
+            <X size={20} strokeWidth={2} />
+          </button>
+        </div>
+
+        {/* Divider */}
+        <div
+          style={{
+            width: "100%",
+            height: "1px",
+            background: "#ECEEF2",
+            flexShrink: 0,
+          }}
+        />
+
+        {/* Subtitle row with optional toggle */}
+        {(subtitle || toggleLabel) && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              gap: "12px",
+              flexShrink: 0,
+            }}
+          >
+            {subtitle && (
+              <p
+                style={{
+                  fontSize: "13px",
+                  lineHeight: 1.5,
+                  color: "var(--Grey-Strong, #808183)",
+                  margin: 0,
+                  flex: 1,
+                }}
+              >
+                {subtitle}
+              </p>
+            )}
+            {toggleLabel && (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  flexShrink: 0,
+                }}
+              >
+                {/* Toggle switch */}
+                <button
+                  onClick={() => onToggle?.(!toggleChecked)}
+                  style={{
+                    position: "relative",
+                    width: "40px",
+                    height: "22px",
+                    borderRadius: "11px",
+                    border: "none",
+                    background: toggleChecked
+                      ? "var(--Base-Strong, #0B0B0B)"
+                      : "var(--Base-Faint, #D9D9D9)",
+                    cursor: "pointer",
+                    transition: "background 0.2s ease",
+                    padding: 0,
+                    flexShrink: 0,
+                  }}
+                >
+                  <div
+                    style={{
+                      position: "absolute",
+                      top: "2px",
+                      left: toggleChecked ? "20px" : "2px",
+                      width: "18px",
+                      height: "18px",
+                      borderRadius: "50%",
+                      background: "#FFF",
+                      transition: "left 0.2s ease",
+                      boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
+                    }}
+                  />
+                </button>
+                <span
+                  style={{
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: "var(--Base-Strong, #1E1E1E)",
+                    lineHeight: 1.4,
+                  }}
+                >
+                  {toggleLabel}
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Body content — scrollable */}
+        <div
+          style={{
+            flex: 1,
+            width: "100%",
+            overflowY: "auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: "16px",
+            minHeight: 0,
+          }}
+        >
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <>
+            <div
+              style={{
+                width: "100%",
+                height: "1px",
+                background: "#ECEEF2",
+                flexShrink: 0,
+              }}
+            />
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
+                gap: "12px",
+                width: "100%",
+                flexShrink: 0,
+              }}
+            >
+              {footer}
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+/**
+ * DrawerButton — standard button for use in SideDrawer footer.
+ *
+ * Props:
+ *  - label     string
+ *  - variant   "primary" | "secondary" (default "secondary")
+ *  - onClick   function
+ *  - disabled  boolean
+ */
+export function DrawerButton({
+  label,
+  variant = "secondary",
+  onClick,
+  disabled,
+}) {
+  const isPrimary = variant === "primary";
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      style={{
+        display: "flex",
+        height: "36px",
+        padding: "0 20px",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        borderRadius: "6px",
+        border: isPrimary ? "none" : "1px solid #D9D9D9",
+        background: isPrimary
+          ? "var(--Base-Strong, #0B0B0B)"
+          : "var(--Base-White, #FFF)",
+        color: isPrimary ? "#FFF" : "var(--Base-Strong, #1E1E1E)",
+        fontSize: "14px",
+        fontWeight: 600,
+        cursor: disabled ? "default" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        transition: "all 0.15s ease",
+      }}
+      onMouseEnter={(e) => {
+        if (!disabled && !isPrimary) {
+          e.currentTarget.style.background = "#ECEEF2";
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!disabled && !isPrimary) {
+          e.currentTarget.style.background = "var(--Base-White, #FFF)";
+        }
+      }}
+    >
+      {label}
+    </button>
+  );
+}

package/src/components/common/index.js

@@ -11,3 +11,4 @@ export { default as AgentLiftCard } from './AgentLiftCard.jsx';
 export { default as Pagination } from './Pagination.jsx';
 export { default as CustomFilterChips } from './CustomFilterChips.jsx';
 export { default as AutoSearch } from './AutoSearch.jsx';
+export { default as SideDrawer, DrawerButton } from './SideDrawer.jsx';

package/src/components/index.js

@@ -26,7 +26,7 @@ export {
 export { DataTable, DataTableFilters, SummaryStatsPanel } from './data';
 
 // Compass evaluation
-export { SignalCard, ObservationCard, SmallObservationCard, ScoreDriverCard, ScoreDriverCardVariant, ConditionCard, ModelScoreCard, SummarySection, AutoSearch } from './common';
+export { SignalCard, ObservationCard, SmallObservationCard, ScoreDriverCard, ScoreDriverCardVariant, ConditionCard, ModelScoreCard, SummarySection, AutoSearch, SideDrawer, DrawerButton } from './common';
 
 // Media / transcript
 export { TranscriptCard, Timeline, ConversationTurn, InteractionSummaryCard } from './media';