chordia-ui 3.2.5 → 3.2.7

package/package.json

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

package/src/components/common/FileUploadingState.jsx

@@ -0,0 +1,256 @@
+"use client";
+
+import React from "react";
+import { FolderCheck } from "lucide-react";
+
+/**
+ * ThreeCirclesSpinner — animated concentric spinner matching the Figma asset.
+ * Three arcs (outer gold, middle green, inner gold) rotating at different speeds.
+ */
+function ThreeCirclesSpinner({ size = 48 }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ animation: "file-upload-spin 1.2s linear infinite" }}
+    >
+      <path
+        d="M43 24C43 26.4951 42.5086 28.9658 41.5537 31.271C40.5989 33.5762 39.1993 35.6707 37.435 37.435C35.6707 39.1993 33.5762 40.5989 31.271 41.5537C28.9658 42.5086 26.4951 43 24 43C21.5049 43 19.0342 42.5086 16.729 41.5537C14.4238 40.5989 12.3293 39.1993 10.565 37.435C8.80066 35.6707 7.40113 33.5762 6.44629 31.271C5.49145 28.9658 5 26.4951 5 24"
+        stroke="#F3E7C7"
+        strokeWidth="4"
+        strokeLinecap="round"
+      />
+      <path
+        d="M12 24C12 22.4241 12.3104 20.8637 12.9134 19.4078C13.5165 17.9519 14.4004 16.629 15.5147 15.5147C16.629 14.4004 17.9519 13.5165 19.4078 12.9134C20.8637 12.3104 22.4241 12 24 12C25.5759 12 27.1363 12.3104 28.5922 12.9134C30.0481 13.5165 31.371 14.4004 32.4853 15.5147C33.5996 16.629 34.4835 17.9519 35.0866 19.4078C35.6896 20.8637 36 22.4241 36 24"
+        stroke="#00A66E"
+        strokeWidth="4"
+        strokeLinecap="round"
+      />
+      <path
+        d="M20 24C20 24.5253 20.1035 25.0454 20.3045 25.5307C20.5055 26.016 20.8001 26.457 21.1716 26.8284C21.543 27.1999 21.984 27.4945 22.4693 27.6955C22.9546 27.8965 23.4747 28 24 28C24.5253 28 25.0454 27.8965 25.5307 27.6955C26.016 27.4945 26.457 27.1999 26.8284 26.8284C27.1999 26.457 27.4945 26.016 27.6955 25.5307C27.8965 25.0454 28 24.5253 28 24"
+        stroke="#F3E7C7"
+        strokeWidth="4"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * FileUploadingState — shows file upload progress with spinner.
+ *
+ * Props:
+ *  - title        string   Main message (default "Uploading your file...")
+ *  - subtitle     string   Secondary message (default "Please wait while we process your file")
+ *  - progress     number   Optional progress percentage (0-100)
+ *  - width        number|string  Container width (default 648)
+ *  - height       number|string  Container height (default 281)
+ */
+export default function FileUploadingState({
+  title = "Uploading your file...",
+  subtitle = "Please wait while we process your file",
+  progress,
+  width = 648,
+  height = 281,
+}) {
+  return (
+    <>
+      <style>{`
+        @keyframes file-upload-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+
+      <div
+        style={{
+          display: "flex",
+          width,
+          height,
+          padding: "88px 64px 64px 64px",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "8px",
+          borderRadius: "12px",
+          border: "2px dashed #D9D9D9",
+          background: "var(--Grey-White, #FFF)",
+          boxSizing: "border-box",
+        }}
+      >
+        {/* Spinner */}
+        <ThreeCirclesSpinner size={48} />
+
+        {/* Title */}
+        <p
+          style={{
+            fontSize: "16px",
+            fontWeight: 600,
+            color: "var(--Base-Strong, #2E3236)",
+            margin: 0,
+            lineHeight: "normal",
+            textAlign: "center",
+          }}
+        >
+          {title}
+        </p>
+
+        {/* Subtitle */}
+        <p
+          style={{
+            fontSize: "13px",
+            fontWeight: 400,
+            color: "var(--Grey-Strong, #808183)",
+            margin: 0,
+            lineHeight: "140%",
+            textAlign: "center",
+          }}
+        >
+          {subtitle}
+        </p>
+
+        {/* Optional progress bar */}
+        {progress !== undefined && (
+          <div
+            style={{
+              width: "200px",
+              height: "4px",
+              borderRadius: "2px",
+              background: "#ECEEF2",
+              marginTop: "8px",
+              overflow: "hidden",
+            }}
+          >
+            <div
+              style={{
+                width: `${Math.min(100, Math.max(0, progress))}%`,
+                height: "100%",
+                borderRadius: "2px",
+                background: "var(--Green-Primary, #00A66E)",
+                transition: "width 0.3s ease",
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+/**
+ * FileUploadSuccessState — shows upload complete with folder-check icon.
+ *
+ * Props:
+ *  - title        string      Main message (default "File uploaded successfully!")
+ *  - subtitle     string      Secondary message (default "13 files have been uploaded to your project")
+ *  - actionLabel  string      Button label (default "Add more files")
+ *  - onAction     function    Button click callback
+ *  - width        number|string  Container width (default 648)
+ *  - height       number|string  Container height (default 281)
+ */
+export function FileUploadSuccessState({
+  title = "File uploaded successfully!",
+  subtitle = "13 files have been uploaded to your project",
+  actionLabel = "Add more files",
+  onAction,
+  width = 648,
+  height = 281,
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        width,
+        height,
+        padding: "88px 64px 64px 64px",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        borderRadius: "12px",
+        border: "1px solid #D9D9D9",
+        background: "var(--Grey-White, #FFF)",
+        boxSizing: "border-box",
+      }}
+    >
+      {/* Icon circle */}
+      <div
+        style={{
+          display: "flex",
+          width: "64px",
+          height: "64px",
+          justifyContent: "center",
+          alignItems: "center",
+          borderRadius: "9999px",
+          background: "var(--Focus-2, #FAF5E9)",
+          flexShrink: 0,
+          marginBottom: "8px",
+        }}
+      >
+        <FolderCheck size={24} strokeWidth={2} color="var(--Base-Strong, #2E3236)" />
+      </div>
+
+      {/* Title */}
+      <p
+        style={{
+          fontSize: "16px",
+          fontWeight: 600,
+          color: "var(--Base-Strong, #2E3236)",
+          margin: 0,
+          lineHeight: "normal",
+          textAlign: "center",
+        }}
+      >
+        {title}
+      </p>
+
+      {/* Subtitle */}
+      <p
+        style={{
+          fontSize: "13px",
+          fontWeight: 400,
+          color: "var(--Grey-Strong, #808183)",
+          margin: 0,
+          lineHeight: "140%",
+          textAlign: "center",
+        }}
+      >
+        {/* {subtitle} */}
+      </p>
+
+      {/* Action button */}
+      {actionLabel && onAction && (
+        <button
+          onClick={onAction}
+          style={{
+            display: "flex",
+            padding: "8px 20px",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: "8px",
+            borderRadius: "6px",
+            border: "1px solid #D9D9D9",
+            background: "var(--Base-White, #FFF)",
+            color: "var(--Grey-Strong, #808183)",
+            fontSize: "14px",
+            fontWeight: 500,
+            cursor: "pointer",
+            marginTop: "8px",
+            transition: "all 0.15s ease",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = "#ECEEF2";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "var(--Base-White, #FFF)";
+          }}
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/common/SideDrawer.jsx

@@ -93,11 +93,12 @@ export default function SideDrawer({
         >
           <h2
             style={{
-              fontSize: "20px",
-              fontWeight: 700,
-              color: "var(--Base-Strong, #0B0B0B)",
+              fontSize: "24px",
+              fontWeight: 600,
+              fontStyle: "normal",
+              color: "var(--Grey-3, #252525)",
               margin: 0,
-              lineHeight: 1.3,
+              lineHeight: "normal",
             }}
           >
             {title}
@@ -154,8 +155,10 @@ export default function SideDrawer({
               <p
                 style={{
                   fontSize: "13px",
-                  lineHeight: 1.5,
-                  color: "var(--Grey-Strong, #808183)",
+                  fontStyle: "normal",
+                  fontWeight: 400,
+                  lineHeight: "140%",
+                  color: "#0B0B0B",
                   margin: 0,
                   flex: 1,
                 }}
@@ -298,7 +301,7 @@ export function DrawerButton({
           ? "var(--Base-Strong, #0B0B0B)"
           : "var(--Base-White, #FFF)",
         color: isPrimary ? "#FFF" : "var(--Base-Strong, #1E1E1E)",
-        fontSize: "14px",
+        fontSize: "16px",
         fontWeight: 600,
         cursor: disabled ? "default" : "pointer",
         opacity: disabled ? 0.5 : 1,
@@ -319,3 +322,67 @@ export function DrawerButton({
     </button>
   );
 }
+
+/**
+ * DrawerLabel — form label for use inside SideDrawer.
+ *
+ * Props:
+ *  - children   ReactNode
+ *  - htmlFor    string
+ */
+export function DrawerLabel({ children, htmlFor }) {
+  return (
+    <label
+      htmlFor={htmlFor}
+      style={{
+        display: "block",
+        color: "var(--Base-Strong, #2E3236)",
+        fontSize: "16px",
+        fontStyle: "normal",
+        fontWeight: 400,
+        lineHeight: "normal",
+        marginBottom: "6px",
+      }}
+    >
+      {children}
+    </label>
+  );
+}
+
+/**
+ * DrawerInput — text input for use inside SideDrawer.
+ *
+ * Props:
+ *  - All standard <input> props (type, placeholder, value, onChange, etc.)
+ */
+export function DrawerInput(props) {
+  return (
+    <input
+      {...props}
+      style={{
+        width: "100%",
+        padding: "10px 12px",
+        borderRadius: "6px",
+        border: "1px solid #D9D9D9",
+        color: "var(--Base-Strong, #2E3236)",
+        fontSize: "16px",
+        fontStyle: "normal",
+        fontWeight: 400,
+        lineHeight: "normal",
+        outline: "none",
+        boxSizing: "border-box",
+        background: "#FFF",
+        transition: "border-color 0.15s ease",
+        ...props.style,
+      }}
+      onFocus={(e) => {
+        e.currentTarget.style.borderColor = "#808183";
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        e.currentTarget.style.borderColor = "#D9D9D9";
+        props.onBlur?.(e);
+      }}
+    />
+  );
+}

package/src/components/common/index.js

@@ -11,4 +11,5 @@ 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';
+export { default as SideDrawer, DrawerButton, DrawerLabel, DrawerInput } from './SideDrawer.jsx';
+export { default as FileUploadingState, FileUploadSuccessState } from './FileUploadingState.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, SideDrawer, DrawerButton } from './common';
+export { SignalCard, ObservationCard, SmallObservationCard, ScoreDriverCard, ScoreDriverCardVariant, ConditionCard, ModelScoreCard, SummarySection, AutoSearch, SideDrawer, DrawerButton, DrawerLabel, DrawerInput, FileUploadingState, FileUploadSuccessState } from './common';
 
 // Media / transcript
 export { TranscriptCard, Timeline, ConversationTurn, InteractionSummaryCard } from './media';

package/src/components/layout/IntegrationCard.jsx

@@ -31,8 +31,9 @@ export default function IntegrationCard({
   const statusConfig = {
     connected: {
       label: "Connected",
-      color: "var(--Grey-Strong, #808183)",
-      icon: <CheckCircle2 size={16} strokeWidth={2} />,
+      color: "var(--Grey-White, #FFF)",
+      bgColor: "var(--Green-Primary, #00A66E)",
+      icon: <CheckCircle2 size={16} strokeWidth={2} color="#FFF" />,
       actionLabel: "Disconnect",
       actionFilled: false,
     },
@@ -122,10 +123,15 @@ export default function IntegrationCard({
         <div
           style={{
             display: "flex",
+            padding: config.bgColor ? "4px 8px 4px 6px" : "0",
             alignItems: "center",
-            gap: "6px",
-            fontSize: "13px",
+            gap: "4px",
+            borderRadius: config.bgColor ? "16px" : "0",
+            background: config.bgColor || "transparent",
+            fontSize: "12px",
+            fontStyle: "normal",
             fontWeight: 400,
+            lineHeight: "16px",
             color: config.color,
           }}
         >

package/src/components/login/LoginPage.jsx

@@ -101,7 +101,7 @@ function NavRow({ text, linkText, onClick }) {
 
 function TermsFooter({ onTerms, onPrivacyPolicy, paddingTop }) {
   return (
-    <div style={{ display: 'flex', justifyContent: 'center', width: '100%', position: 'absolute', bottom: 40, left: 0, right: 0 }}>
+    <div style={{ display: 'flex', justifyContent: 'center', width: '100%', marginTop: 'auto', paddingTop: paddingTop || 40, flexShrink: 0 }}>
       <span style={{ fontSize: 15, fontWeight: 400, lineHeight: '22px', color: 'var(--color-text)', fontFamily: FF, textAlign: 'center', whiteSpace: 'nowrap' }}>
         By continuing, you agree to our{' '}
         <a href="https://pages.chordia.ai/terms-of-use/" target="_blank" rel="noopener noreferrer"
@@ -462,7 +462,7 @@ export default function LoginPage({
           </div>
 
           {/* Dots */}
-          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, height: 4, position: 'absolute', bottom: 40, left: 48 }}>
+          <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, height: 4, marginTop: 'auto', flexShrink: 0 }}>
             {Array.from({ length: SLIDE_COUNT }).map((_, i) => (
               <button key={i} onClick={() => setActiveSlide(i)}
                 style={{

package/src/components/navigation/Sidebar.jsx

@@ -250,9 +250,12 @@ function SidebarItem({ item, active, onNavigate, collapsed }) {
         borderBottom: "none",
         borderLeft: "none",
         background: active ? "var(--Background-MonoPressed, #323232)" : "transparent",
-        color: active ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
-        fontWeight: active ? 550 : 400,
-        fontSize: "var(--text-sm)",
+        color: active ? "var(--Brand-400, #33B88B)" : "var(--Content-TertiaryInverse, #B2AEA8)",
+        fontWeight: 500,
+        fontSize: "12px",
+        fontStyle: "normal",
+        lineHeight: "120%",
+        textTransform: "uppercase",
         fontFamily: "var(--font-sans)",
         cursor: "pointer",
         textAlign: "left",
@@ -262,7 +265,7 @@ function SidebarItem({ item, active, onNavigate, collapsed }) {
       onMouseEnter={(e) => {
         if (!active) {
           e.currentTarget.style.background = "var(--Background-MonoPressed, #323232)";
-          e.currentTarget.style.color = "#00A66E";
+          e.currentTarget.style.color = "var(--Brand-400, #33B88B)";
         }
       }}
       onMouseLeave={(e) => {
@@ -317,7 +320,7 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
           borderRadius: "4px",
           border: "none",
           background: hasActiveChild ? "var(--Background-MonoPressed, #323232)" : "transparent",
-          color: hasActiveChild ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
+          color: hasActiveChild ? "var(--Brand-400, #33B88B)" : "var(--Content-TertiaryInverse, #B2AEA8)",
           cursor: "pointer",
           marginBottom: 2,
           transition: "background 0.15s ease",
@@ -325,7 +328,7 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
         onMouseEnter={(e) => {
           if (!hasActiveChild) {
             e.currentTarget.style.background = "var(--Background-MonoPressed, #323232)";
-            e.currentTarget.style.color = "#00A66E";
+            e.currentTarget.style.color = "var(--Brand-400, #33B88B)";
           }
         }}
         onMouseLeave={(e) => {
@@ -357,9 +360,12 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
           borderRadius: "4px",
           border: "none",
           background: "transparent",
-          color: hasActiveChild ? "#00A66E" : "var(--Content-TertiaryInverse, #B2AEA8)",
-          fontWeight: hasActiveChild ? 550 : 400,
-          fontSize: "var(--text-sm)",
+          color: hasActiveChild ? "var(--Brand-400, #33B88B)" : "var(--Content-TertiaryInverse, #B2AEA8)",
+          fontWeight: 700,
+          fontSize: "12px",
+          fontStyle: "normal",
+          lineHeight: "120%",
+          textTransform: "uppercase",
           fontFamily: "var(--font-sans)",
           cursor: "pointer",
           textAlign: "left",
@@ -367,12 +373,12 @@ function SidebarGroup({ item, activeId, expanded, onToggle, onNavigate, collapse
         }}
         onMouseEnter={(e) => {
           e.currentTarget.style.background = "var(--Background-MonoPressed, #323232)";
-          e.currentTarget.style.color = "#00A66E";
+          e.currentTarget.style.color = "var(--Brand-400, #33B88B)";
         }}
         onMouseLeave={(e) => {
           e.currentTarget.style.background = "transparent";
           if (!hasActiveChild) e.currentTarget.style.color = "var(--Content-TertiaryInverse, #B2AEA8)";
-          else e.currentTarget.style.color = "#00A66E";
+          else e.currentTarget.style.color = "var(--Brand-400, #33B88B)";
         }}
       >
         <Icon

package/dist/SideDrawer.cjs.js

@@ -1,2 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),f=require("react"),b=require("lucide-react"),z=require("./TextInput.cjs.js"),k=require("./SmallButton.cjs.js"),L=({options:c=[],value:a=null,onChange:n,placeholder:o="Search...",disabled:d=!1,showSuggestions:l=!0,styling:y,isAddNew:p=!1})=>{const[s,u]=f.useState(""),[h,x]=f.useState(!1),[i,m]=f.useState(null),v=f.useRef(null),w=f.useMemo(()=>{if(!l)return[];const t=s.toLowerCase();return c.filter(r=>{if(!r)return!1;const g=r.label||"",j=r.value||"";return(g.toLowerCase().includes(t)||j.toLowerCase().includes(t))&&(!i||r.value!==i.value)})},[s,c,l,i]),S=f.useMemo(()=>{if(!p)return!1;const t=s.toLowerCase();return c.some(r=>{if(!r)return!1;const g=r.label||"",j=r.value||"";return g.toLowerCase()===t||j.toLowerCase()===t})},[c,s,p]);f.useEffect(()=>{if(!h)return;const t=r=>{v.current&&!v.current.contains(r.target)&&x(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[h]);const E=t=>{n==null||n(t),u(""),x(!1),m(null)},F=()=>{const t={label:s,value:s};m(t),n==null||n(t),x(!1),u("")},B=()=>{n==null||n(null),u(""),x(!1),m(null)},D=t=>{const r=t.target.value;l?(u(r),x(!0)):p?(u(r),x(r.length>=3)):n==null||n(r)},I=()=>{(l||p)&&x(!0)},R=h&&!a&&s.length>=3;return e.jsxs("div",{className:"relative w-full",ref:v,children:[e.jsxs("div",{className:y||"flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm",children:[e.jsx(b.Search,{className:"w-4 h-4 text-gray-400"}),e.jsx("div",{className:"flex-1",children:l&&a?e.jsx("div",{className:"text-gray-800 truncate",title:a.label,style:{fontSize:"var(--text-sm)",fontWeight:"var(--font-medium)",letterSpacing:"var(--tracking-normal)",lineHeight:"var(--leading-normal)",textTransform:"none",textDecoration:"none",fontFamily:"var(--font-sans)"},children:a.label}):e.jsx(z.TextInput,{value:l||p?s:a||"",onChange:t=>D({target:{value:t}}),placeholder:o,disabled:d,style:{border:"none",boxShadow:"none",padding:0,backgroundColor:"transparent"},onFocus:I})}),(a||i)&&e.jsx(k.SmallButton,{type:"button",variant:"ghost",size:"sm",onClick:B,style:{padding:0,width:20,height:20,border:"none",backgroundColor:"transparent",color:"rgba(107,114,128,1)"},children:e.jsx(b.X,{className:"w-3 h-3"})})]}),R&&e.jsxs("div",{className:"absolute w-full rounded-md border border-gray-300 bg-white shadow-lg custom-thin-scrollbar-library",style:{maxHeight:240,overflowY:"auto",zIndex:30},children:[w.length>0&&e.jsx("ul",{className:"m-0 p-0 list-none",children:w.map(t=>e.jsx("li",{onClick:()=>E(t),onMouseEnter:r=>{r.currentTarget.style.backgroundColor="var(--hover-warm)"},onMouseLeave:r=>{r.currentTarget.style.backgroundColor="transparent"},className:"cursor-pointer px-4 py-2",title:t.label,children:e.jsx("span",{className:"truncate block w-full",style:{fontFamily:"var(--font-sans)",color:"var(--text-base)",fontSize:"var(--text-sm)",fontWeight:"var(--font-medium)",letterSpacing:"var(--tracking-normal)",lineHeight:"var(--leading-normal)",textTransform:"none",textDecoration:"none"},children:t.label})},t.value))}),p&&!S&&!i&&s.length>=3&&e.jsxs(k.SmallButton,{type:"button",variant:"secondary",onClick:F,style:{width:"100%",justifyContent:"space-between",padding:"8px 10px",border:"none",borderTop:"1px solid rgba(229, 231, 235, 1)",borderRadius:0,backgroundColor:"transparent",color:"rgba(107,114,128,1)"},children:[e.jsx("span",{children:`Add "${s}"`}),e.jsx(b.PlusCircle,{className:"w-5 h-5 text-green-500"})]})]})]})};function M({open:c,onClose:a,title:n,subtitle:o,children:d,footer:l,width:y=515,height:p=762,toggleLabel:s,toggleChecked:u,onToggle:h}){const x=f.useRef(null);return f.useEffect(()=>{if(!c)return;const i=m=>{m.key==="Escape"&&(a==null||a())};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[c,a]),c?e.jsxs(e.Fragment,{children:[e.jsx("div",{onClick:a,style:{position:"fixed",inset:0,zIndex:1200,background:"rgba(0, 0, 0, 0.20)"}}),e.jsxs("div",{ref:x,style:{position:"fixed",top:"50%",right:0,transform:"translateY(-50%)",zIndex:1201,display:"flex",width:y,height:p,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)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",flexShrink:0},children:[e.jsx("h2",{style:{fontSize:"20px",fontWeight:700,color:"var(--Base-Strong, #0B0B0B)",margin:0,lineHeight:1.3},children:n}),e.jsx("button",{onClick:a,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:i=>{i.currentTarget.style.background="#ECEEF2"},onMouseLeave:i=>{i.currentTarget.style.background="transparent"},children:e.jsx(b.X,{size:20,strokeWidth:2})})]}),e.jsx("div",{style:{width:"100%",height:"1px",background:"#ECEEF2",flexShrink:0}}),(o||s)&&e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:"12px",flexShrink:0},children:[o&&e.jsx("p",{style:{fontSize:"13px",lineHeight:1.5,color:"var(--Grey-Strong, #808183)",margin:0,flex:1},children:o}),s&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",flexShrink:0},children:[e.jsx("button",{onClick:()=>h==null?void 0:h(!u),style:{position:"relative",width:"40px",height:"22px",borderRadius:"11px",border:"none",background:u?"var(--Base-Strong, #0B0B0B)":"var(--Base-Faint, #D9D9D9)",cursor:"pointer",transition:"background 0.2s ease",padding:0,flexShrink:0},children:e.jsx("div",{style:{position:"absolute",top:"2px",left:u?"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)"}})}),e.jsx("span",{style:{fontSize:"13px",fontWeight:500,color:"var(--Base-Strong, #1E1E1E)",lineHeight:1.4},children:s})]})]}),e.jsx("div",{style:{flex:1,width:"100%",overflowY:"auto",display:"flex",flexDirection:"column",gap:"16px",minHeight:0},children:d}),l&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{width:"100%",height:"1px",background:"#ECEEF2",flexShrink:0}}),e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:"12px",width:"100%",flexShrink:0},children:l})]})]})]}):null}function H({label:c,variant:a="secondary",onClick:n,disabled:o}){const d=a==="primary";return e.jsx("button",{onClick:n,disabled:o,style:{display:"flex",height:"36px",padding:"0 20px",justifyContent:"center",alignItems:"center",gap:"8px",borderRadius:"6px",border:d?"none":"1px solid #D9D9D9",background:d?"var(--Base-Strong, #0B0B0B)":"var(--Base-White, #FFF)",color:d?"#FFF":"var(--Base-Strong, #1E1E1E)",fontSize:"14px",fontWeight:600,cursor:o?"default":"pointer",opacity:o?.5:1,transition:"all 0.15s ease"},onMouseEnter:l=>{!o&&!d&&(l.currentTarget.style.background="#ECEEF2")},onMouseLeave:l=>{!o&&!d&&(l.currentTarget.style.background="var(--Base-White, #FFF)")},children:c})}exports.AutoSearch=L;exports.DrawerButton=H;exports.SideDrawer=M;
-//# sourceMappingURL=SideDrawer.cjs.js.map

package/dist/SideDrawer.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SideDrawer.cjs.js","sources":["../src/components/common/AutoSearch.jsx","../src/components/common/SideDrawer.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useMemo, useRef, useEffect } from \"react\";\nimport { X, Search, PlusCircle } from \"lucide-react\";\nimport TextInput from \"../primitives/TextInput\";\nimport SmallButton from \"../primitives/SmallButton\";\n\nconst AutoSearch = ({\n  options = [],\n  value = null,\n  onChange,\n  placeholder = \"Search...\",\n  disabled = false,\n  showSuggestions = true,\n  styling,\n  isAddNew = false,\n}) => {\n  const [search, setSearch] = useState(\"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [addedOption, setAddedOption] = useState(null);\n\n  const containerRef = useRef(null);\n\n  const filteredOptions = useMemo(() => {\n    if (!showSuggestions) return [];\n    const lower = search.toLowerCase();\n\n    return options.filter((opt) => {\n      if (!opt) return false;\n      const label = opt.label || \"\";\n      const val = opt.value || \"\";\n      return (\n        (label.toLowerCase().includes(lower) ||\n          val.toLowerCase().includes(lower)) &&\n        (!addedOption || opt.value !== addedOption.value)\n      );\n    });\n  }, [search, options, showSuggestions, addedOption]);\n\n  const exactMatchExists = useMemo(() => {\n    if (!isAddNew) return false;\n    const lower = search.toLowerCase();\n    return options.some((opt) => {\n      if (!opt) return false;\n      const label = opt.label || \"\";\n      const val = opt.value || \"\";\n      return label.toLowerCase() === lower || val.toLowerCase() === lower;\n    });\n  }, [options, search, isAddNew]);\n\n  // Close dropdown on outside click\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (event) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  const handleSelect = (opt) => {\n    onChange?.(opt);\n    setSearch(\"\");\n    setIsOpen(false);\n    setAddedOption(null);\n  };\n\n  const handleAddNew = () => {\n    const newOpt = { label: search, value: search };\n    setAddedOption(newOpt);\n    onChange?.(newOpt);\n    setIsOpen(false);\n    setSearch(\"\");\n  };\n\n  const handleClear = () => {\n    onChange?.(null);\n    setSearch(\"\");\n    setIsOpen(false);\n    setAddedOption(null);\n  };\n\n  const handleInputChange = (e) => {\n    const newValue = e.target.value;\n    if (showSuggestions) {\n      setSearch(newValue);\n      setIsOpen(true);\n    } else if (isAddNew) {\n      setSearch(newValue);\n      setIsOpen(newValue.length >= 3);\n    } else {\n      onChange?.(newValue);\n    }\n  };\n\n  const handleInputFocus = () => {\n    if (showSuggestions || isAddNew) {\n      setIsOpen(true);\n    }\n  };\n\n  const shouldShowDropdown =\n    isOpen && !value && (showSuggestions ? search.length >= 3 : search.length >= 3);\n\n  return (\n    <div className=\"relative w-full\" ref={containerRef}>\n      <div\n        className={\n          styling\n            ? styling\n            : \"flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm\"\n        }\n      >\n        <Search className=\"w-4 h-4 text-gray-400\" />\n        <div className=\"flex-1\">\n          {showSuggestions && value ? (\n            <div\n              className=\"text-gray-800 truncate\"\n              title={value.label}\n              style={{\n                fontSize: 'var(--text-sm)',\n                fontWeight: 'var(--font-medium)',\n                letterSpacing: 'var(--tracking-normal)',\n                lineHeight: 'var(--leading-normal)',\n                textTransform: 'none',\n                textDecoration: 'none',\n                fontFamily: 'var(--font-sans)',\n              }}\n            >\n              {value.label}\n            </div>\n          ) : (\n            <TextInput\n              value={showSuggestions || isAddNew ? search : value || \"\"}\n              onChange={(val) =>\n                handleInputChange({ target: { value: val } })\n              }\n              placeholder={placeholder}\n              disabled={disabled}\n              style={{\n                border: \"none\",\n                boxShadow: \"none\",\n                padding: 0,\n                backgroundColor: \"transparent\",\n              }}\n              onFocus={handleInputFocus}\n            />\n          )}\n        </div>\n        {(value || addedOption) && (\n          <SmallButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleClear}\n            style={{\n              padding: 0,\n              width: 20,\n              height: 20,\n              border: \"none\",\n              backgroundColor: \"transparent\",\n              color: \"rgba(107,114,128,1)\",\n            }}\n          >\n            <X className=\"w-3 h-3\" />\n          </SmallButton>\n        )}\n      </div>\n\n      {shouldShowDropdown && (\n        <div\n          className=\"absolute w-full rounded-md border border-gray-300 bg-white shadow-lg custom-thin-scrollbar-library\"\n          style={{\n            maxHeight: 240,\n            overflowY: \"auto\",\n            zIndex: 30,\n          }}\n        >\n          {filteredOptions.length > 0 && (\n            <ul className=\"m-0 p-0 list-none\">\n              {filteredOptions.map((opt) => (\n                <li\n                  key={opt.value}\n                  onClick={() => handleSelect(opt)}\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.backgroundColor = \"var(--hover-warm)\";\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor = \"transparent\";\n                  }}\n                  className=\"cursor-pointer px-4 py-2\"\n                  title={opt.label}\n                >\n                  <span\n                    className=\"truncate block w-full\"\n                    style={{\n                      fontFamily: \"var(--font-sans)\",\n                      color: \"var(--text-base)\",\n                      fontSize: \"var(--text-sm)\",\n                      fontWeight: \"var(--font-medium)\",\n                      letterSpacing: \"var(--tracking-normal)\",\n                      lineHeight: \"var(--leading-normal)\",\n                      textTransform: \"none\",\n                      textDecoration: \"none\",\n                    }}\n                  >\n                    {opt.label}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n\n          {isAddNew &&\n            !exactMatchExists &&\n            !addedOption &&\n            search.length >= 3 && (\n              <SmallButton\n                type=\"button\"\n                variant=\"secondary\"\n                onClick={handleAddNew}\n                style={{\n                  width: \"100%\",\n                  justifyContent: \"space-between\",\n                  padding: \"8px 10px\",\n                  border: \"none\",\n                  borderTop: \"1px solid rgba(229, 231, 235, 1)\",\n                  borderRadius: 0,\n                  backgroundColor: \"transparent\",\n                  color: \"rgba(107,114,128,1)\",\n                }}\n              >\n                <span>{`Add \"${search}\"`}</span>\n                <PlusCircle className=\"w-5 h-5 text-green-500\" />\n              </SmallButton>\n            )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AutoSearch;\n\n","\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\n\n/**\n * SideDrawer — slide-in panel from the right edge.\n *\n * Props:\n *  - open          boolean       Whether the drawer is visible\n *  - onClose       function      Close callback\n *  - title         string        Header title\n *  - subtitle      string        Optional description below the divider\n *  - children      ReactNode     Drawer body content\n *  - footer        ReactNode     Optional fixed footer (e.g. Cancel/Save buttons)\n *  - width         number|string Drawer width (default 515)\n *  - height        number|string Drawer height (default 762)\n *  - toggleLabel   string        Optional toggle label (right side of subtitle row)\n *  - toggleChecked boolean       Toggle state\n *  - onToggle      function      Toggle callback\n */\nexport default function SideDrawer({\n  open,\n  onClose,\n  title,\n  subtitle,\n  children,\n  footer,\n  width = 515,\n  height = 762,\n  toggleLabel,\n  toggleChecked,\n  onToggle,\n}) {\n  const drawerRef = useRef(null);\n\n  // Close on Escape key\n  useEffect(() => {\n    if (!open) return;\n    const handleKey = (e) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div\n        onClick={onClose}\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 1200,\n          background: \"rgba(0, 0, 0, 0.20)\",\n        }}\n      />\n\n      {/* Drawer panel */}\n      <div\n        ref={drawerRef}\n        style={{\n          position: \"fixed\",\n          top: \"50%\",\n          right: 0,\n          transform: \"translateY(-50%)\",\n          zIndex: 1201,\n          display: \"flex\",\n          width,\n          height,\n          maxHeight: \"100vh\",\n          padding: \"20px\",\n          flexDirection: \"column\",\n          alignItems: \"flex-start\",\n          gap: \"20px\",\n          borderRadius: \"12px 0 0 12px\",\n          background: \"#FFF\",\n          boxShadow: \"648px 0 100px 0 rgba(0, 0, 0, 0.20)\",\n        }}\n      >\n        {/* Header: Title + Close */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            flexShrink: 0,\n          }}\n        >\n          <h2\n            style={{\n              fontSize: \"20px\",\n              fontWeight: 700,\n              color: \"var(--Base-Strong, #0B0B0B)\",\n              margin: 0,\n              lineHeight: 1.3,\n            }}\n          >\n            {title}\n          </h2>\n          <button\n            onClick={onClose}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"28px\",\n              height: \"28px\",\n              border: \"none\",\n              background: \"transparent\",\n              color: \"var(--Grey-Strong, #808183)\",\n              cursor: \"pointer\",\n              borderRadius: \"4px\",\n              transition: \"background 0.15s ease\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.background = \"#ECEEF2\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.background = \"transparent\";\n            }}\n          >\n            <X size={20} strokeWidth={2} />\n          </button>\n        </div>\n\n        {/* Divider */}\n        <div\n          style={{\n            width: \"100%\",\n            height: \"1px\",\n            background: \"#ECEEF2\",\n            flexShrink: 0,\n          }}\n        />\n\n        {/* Subtitle row with optional toggle */}\n        {(subtitle || toggleLabel) && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              width: \"100%\",\n              gap: \"12px\",\n              flexShrink: 0,\n            }}\n          >\n            {subtitle && (\n              <p\n                style={{\n                  fontSize: \"13px\",\n                  lineHeight: 1.5,\n                  color: \"var(--Grey-Strong, #808183)\",\n                  margin: 0,\n                  flex: 1,\n                }}\n              >\n                {subtitle}\n              </p>\n            )}\n            {toggleLabel && (\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  flexShrink: 0,\n                }}\n              >\n                {/* Toggle switch */}\n                <button\n                  onClick={() => onToggle?.(!toggleChecked)}\n                  style={{\n                    position: \"relative\",\n                    width: \"40px\",\n                    height: \"22px\",\n                    borderRadius: \"11px\",\n                    border: \"none\",\n                    background: toggleChecked\n                      ? \"var(--Base-Strong, #0B0B0B)\"\n                      : \"var(--Base-Faint, #D9D9D9)\",\n                    cursor: \"pointer\",\n                    transition: \"background 0.2s ease\",\n                    padding: 0,\n                    flexShrink: 0,\n                  }}\n                >\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      top: \"2px\",\n                      left: toggleChecked ? \"20px\" : \"2px\",\n                      width: \"18px\",\n                      height: \"18px\",\n                      borderRadius: \"50%\",\n                      background: \"#FFF\",\n                      transition: \"left 0.2s ease\",\n                      boxShadow: \"0 1px 3px rgba(0,0,0,0.15)\",\n                    }}\n                  />\n                </button>\n                <span\n                  style={{\n                    fontSize: \"13px\",\n                    fontWeight: 500,\n                    color: \"var(--Base-Strong, #1E1E1E)\",\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {toggleLabel}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Body content — scrollable */}\n        <div\n          style={{\n            flex: 1,\n            width: \"100%\",\n            overflowY: \"auto\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"16px\",\n            minHeight: 0,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <>\n            <div\n              style={{\n                width: \"100%\",\n                height: \"1px\",\n                background: \"#ECEEF2\",\n                flexShrink: 0,\n              }}\n            />\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-end\",\n                gap: \"12px\",\n                width: \"100%\",\n                flexShrink: 0,\n              }}\n            >\n              {footer}\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * DrawerButton — standard button for use in SideDrawer footer.\n *\n * Props:\n *  - label     string\n *  - variant   \"primary\" | \"secondary\" (default \"secondary\")\n *  - onClick   function\n *  - disabled  boolean\n */\nexport function DrawerButton({\n  label,\n  variant = \"secondary\",\n  onClick,\n  disabled,\n}) {\n  const isPrimary = variant === \"primary\";\n\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        display: \"flex\",\n        height: \"36px\",\n        padding: \"0 20px\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        borderRadius: \"6px\",\n        border: isPrimary ? \"none\" : \"1px solid #D9D9D9\",\n        background: isPrimary\n          ? \"var(--Base-Strong, #0B0B0B)\"\n          : \"var(--Base-White, #FFF)\",\n        color: isPrimary ? \"#FFF\" : \"var(--Base-Strong, #1E1E1E)\",\n        fontSize: \"14px\",\n        fontWeight: 600,\n        cursor: disabled ? \"default\" : \"pointer\",\n        opacity: disabled ? 0.5 : 1,\n        transition: \"all 0.15s ease\",\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"#ECEEF2\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n        }\n      }}\n    >\n      {label}\n    </button>\n  );\n}\n"],"names":["AutoSearch","options","value","onChange","placeholder","disabled","showSuggestions","styling","isAddNew","search","setSearch","useState","isOpen","setIsOpen","addedOption","setAddedOption","containerRef","useRef","filteredOptions","useMemo","lower","opt","label","val","exactMatchExists","useEffect","handleClickOutside","event","handleSelect","handleAddNew","newOpt","handleClear","handleInputChange","e","newValue","handleInputFocus","shouldShowDropdown","jsxs","jsx","Search","TextInput","SmallButton","X","PlusCircle","SideDrawer","open","onClose","title","subtitle","children","footer","width","height","toggleLabel","toggleChecked","onToggle","drawerRef","handleKey","Fragment","DrawerButton","variant","onClick","isPrimary"],"mappings":"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"}