chordia-ui 3.2.3 → 3.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -54,6 +54,10 @@
       "import": "./dist/components/login.es.js",
       "require": "./dist/components/login.cjs.js"
     },
+    "./components/onboarding": {
+      "import": "./dist/components/onboarding.es.js",
+      "require": "./dist/components/onboarding.cjs.js"
+    },
     "./pages/interactionDetails": {
       "import": "./dist/pages/interactionDetails.es.js",
       "require": "./dist/pages/interactionDetails.cjs.js"

package/src/components/index.js

@@ -47,5 +47,8 @@ export { NotificationPanel, NotificationItem } from './notifications';
 
 export { OverlayPanel } from './models';
 
+// Onboarding
+export { UploadEvaluate, GettingStarted, UploadInteraction, ConnectData, AddTeammates } from './onboarding';
+
 // Login
 export { LoginPage } from './login';

package/src/components/onboarding/AddTeammates.jsx

@@ -0,0 +1,278 @@
+import { useState } from 'react';
+import { Search } from 'lucide-react';
+
+const FF = 'var(--font-sans)';
+
+// ─── Styles ───
+
+const containerStyle = {
+  fontFamily: FF,
+};
+
+const sectionTitleStyle = {
+  fontSize: 20,
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontFamily: FF,
+  color: 'var(--grey-strong)',
+  margin: 0,
+  lineHeight: 'normal',
+};
+
+const sectionSubtitleStyle = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontStyle: 'normal',
+  color: 'var(--color-text-secondary)',
+  fontFamily: FF,
+  margin: '4px 0 0',
+  lineHeight: '140%',
+};
+
+const searchRowStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+  marginTop: 24,
+};
+
+const searchInputWrapStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  flex: 1,
+  height: 44,
+  padding: '0 14px',
+  borderRadius: 10,
+  border: '1px solid var(--color-input-border)',
+  background: 'var(--grey-white)',
+  boxSizing: 'border-box',
+  gap: 8,
+};
+
+const searchIconStyle = {
+  flexShrink: 0,
+  color: 'var(--color-text-secondary)',
+};
+
+const emailTagStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 4,
+  padding: '4px 10px',
+  borderRadius: 6,
+  background: 'var(--hover-warm)',
+  fontSize: 14,
+  fontWeight: 500,
+  fontFamily: FF,
+  color: 'var(--grey-strong)',
+  whiteSpace: 'nowrap',
+};
+
+const emailTagRemoveStyle = {
+  cursor: 'pointer',
+  fontSize: 16,
+  lineHeight: 1,
+  color: 'var(--color-text-secondary)',
+  marginLeft: 2,
+};
+
+const searchInputStyle = {
+  flex: 1,
+  border: 'none',
+  outline: 'none',
+  fontSize: 14,
+  fontWeight: 400,
+  fontFamily: FF,
+  color: 'var(--grey-strong)',
+  background: 'transparent',
+  height: '100%',
+};
+
+const inviteBtnStyle = {
+  display: 'flex',
+  height: 44,
+  padding: '0 24px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: 10,
+  background: 'var(--grey-strong)',
+  fontSize: 14,
+  fontWeight: 600,
+  fontFamily: FF,
+  color: 'var(--grey-white)',
+  border: 'none',
+  cursor: 'pointer',
+  transition: 'var(--transition-fast)',
+  outline: 'none',
+  flexShrink: 0,
+};
+
+const suggestionsListStyle = {
+  marginTop: 8,
+  border: '1px solid var(--border)',
+  borderRadius: 10,
+  overflow: 'hidden',
+  background: 'var(--grey-white)',
+};
+
+const suggestionItemStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+  padding: '14px 16px',
+  cursor: 'pointer',
+  transition: 'var(--transition-fast)',
+  borderBottom: '1px solid var(--border-subtle)',
+};
+
+const avatarStyle = (color) => ({
+  width: 40,
+  height: 40,
+  borderRadius: 9999,
+  background: color || 'var(--hover-warm)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: 14,
+  fontWeight: 600,
+  fontFamily: FF,
+  color: 'var(--color-green)',
+  flexShrink: 0,
+});
+
+const suggestionNameStyle = {
+  fontSize: 14,
+  fontWeight: 600,
+  fontFamily: FF,
+  color: 'var(--grey-strong)',
+  margin: 0,
+  lineHeight: '120%',
+};
+
+const suggestionEmailStyle = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontFamily: FF,
+  color: 'var(--color-text-secondary)',
+  margin: '2px 0 0',
+  lineHeight: '140%',
+};
+
+// ─── Default Suggestions ───
+
+const DEFAULT_SUGGESTIONS = [
+  { name: 'Alex Rivera', email: 'alex.rivera@company.com', initials: 'AR' },
+  { name: 'Alexandra Smith', email: 'a.smith@design.co', initials: 'AS' },
+];
+
+// ─── Component ───
+
+const AddTeammates = ({ suggestions = DEFAULT_SUGGESTIONS, onInvite }) => {
+  const [inputValue, setInputValue] = useState('');
+  const [emails, setEmails] = useState([]);
+  const [focused, setFocused] = useState(false);
+
+  const filteredSuggestions = suggestions.filter(
+    (s) =>
+      !emails.includes(s.email) &&
+      (s.name.toLowerCase().includes(inputValue.toLowerCase()) ||
+        s.email.toLowerCase().includes(inputValue.toLowerCase()))
+  );
+
+  const addEmail = (email) => {
+    if (email && !emails.includes(email)) {
+      setEmails([...emails, email]);
+      setInputValue('');
+    }
+  };
+
+  const removeEmail = (email) => {
+    setEmails(emails.filter((e) => e !== email));
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && inputValue.includes('@')) {
+      e.preventDefault();
+      addEmail(inputValue.trim());
+    }
+    if (e.key === 'Backspace' && !inputValue && emails.length) {
+      removeEmail(emails[emails.length - 1]);
+    }
+  };
+
+  const handleInvite = () => {
+    if (emails.length) {
+      onInvite?.(emails);
+    }
+  };
+
+  return (
+    <div style={containerStyle}>
+      <h2 style={sectionTitleStyle}>Add Teammates</h2>
+      <p style={sectionSubtitleStyle}>Collaborate with your team to accelerate your workflow.</p>
+
+      <div style={searchRowStyle}>
+        <div
+          style={{
+            ...searchInputWrapStyle,
+            borderColor: focused ? 'var(--color-green)' : 'var(--color-input-border)',
+            boxShadow: focused ? '0 0 0 3px var(--color-green-ring)' : 'none',
+          }}
+        >
+          <Search size={18} style={searchIconStyle} />
+          {emails.map((email) => (
+            <span key={email} style={emailTagStyle}>
+              {email}
+              <span style={emailTagRemoveStyle} onClick={() => removeEmail(email)}>×</span>
+            </span>
+          ))}
+          <input
+            type="text"
+            placeholder={emails.length ? '' : 'Search by name or email...'}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setTimeout(() => setFocused(false), 150)}
+            onKeyDown={handleKeyDown}
+            style={searchInputStyle}
+          />
+        </div>
+        <button
+          style={inviteBtnStyle}
+          onClick={handleInvite}
+          onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.85'; }}
+          onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}
+        >
+          Invite
+        </button>
+      </div>
+
+      {focused && filteredSuggestions.length > 0 && (
+        <div style={suggestionsListStyle}>
+          {filteredSuggestions.map((suggestion, idx) => (
+            <div
+              key={suggestion.email}
+              style={{
+                ...suggestionItemStyle,
+                ...(idx === filteredSuggestions.length - 1 ? { borderBottom: 'none' } : {}),
+              }}
+              onMouseDown={() => addEmail(suggestion.email)}
+              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--hover-warm-subtle)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--grey-white)'; }}
+            >
+              <div style={avatarStyle()}>
+                {suggestion.initials}
+              </div>
+              <div>
+                <p style={suggestionNameStyle}>{suggestion.name}</p>
+                <p style={suggestionEmailStyle}>{suggestion.email}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AddTeammates;

package/src/components/onboarding/GettingStarted.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { MessageSquare, Database, Users, BookOpen, SlidersHorizontal, Briefcase } from 'lucide-react';
 import UploadInteraction from './UploadInteraction';
 import ConnectData from './ConnectData';
+import AddTeammates from './AddTeammates';
 
 const FF = 'var(--font-sans)';
 
@@ -511,6 +512,9 @@ const GettingStarted = ({
           {activeStepId === 'connect' && (
             <ConnectData />
           )}
+          {activeStepId === 'invite' && (
+            <AddTeammates />
+          )}
         </div>
       </div>
     </div>

package/src/components/onboarding/index.js

@@ -0,0 +1,5 @@
+export { default as UploadEvaluate } from './UploadEvaluate';
+export { default as GettingStarted } from './GettingStarted';
+export { default as UploadInteraction } from './UploadInteraction';
+export { default as ConnectData } from './ConnectData';
+export { default as AddTeammates } from './AddTeammates';