chordia-ui 3.3.0 → 3.3.2

package/package.json

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

package/src/components/common/FileUploadingState.jsx

@@ -153,7 +153,7 @@ export default function FileUploadingState({
  */
 export function FileUploadSuccessState({
   title = "File uploaded successfully!",
-  subtitle = "13 files have been uploaded to your project",
+  subtitle = "Redirecting...",
   actionLabel = "Add more files",
   onAction,
   width = 648,
@@ -210,15 +210,15 @@ export function FileUploadSuccessState({
       {/* Subtitle */}
       <p
         style={{
-          fontSize: "13px",
-          fontWeight: 400,
+          fontSize: "14px",
+          fontWeight: 500,
           color: "var(--Grey-Strong, #808183)",
           margin: 0,
           lineHeight: "140%",
           textAlign: "center",
         }}
       >
-        {/* {subtitle} */}
+        {subtitle}
       </p>
 
       {/* Action button */}

package/src/components/login/LoginPage.jsx

@@ -180,6 +180,7 @@ export default function LoginPage({
   const [signupConfirm, setSignupConfirm] = useState('');
   const [showSignupPassword, setShowSignupPassword] = useState(false);
   const [showSignupConfirm, setShowSignupConfirm] = useState(false);
+  const [signupError, setSignupError] = useState('');
   const [resetEmail, setResetEmail] = useState('');
   const [activeSlide, setActiveSlide] = useState(0);
   const SLIDE_COUNT = 3;
@@ -513,7 +514,7 @@ export default function LoginPage({
                 <Field label="Create Password" gap={8}>
                   <div style={{ position: 'relative' }}>
                     <input type={showSignupPassword ? 'text' : 'password'} value={signupPassword}
-                      onChange={(e) => setSignupPassword(e.target.value)}
+                      onChange={(e) => { setSignupPassword(e.target.value); setSignupError(''); }}
                       placeholder="Enter password" autoComplete="new-password"
                       style={{ ...inputBase, padding: '10px 44px 10px 14px' }}
                       onFocus={focusGreen} onBlur={blurGray} />
@@ -524,7 +525,7 @@ export default function LoginPage({
                 <Field label="Confirm Password" gap={8}>
                   <div style={{ position: 'relative' }}>
                     <input type={showSignupConfirm ? 'text' : 'password'} value={signupConfirm}
-                      onChange={(e) => setSignupConfirm(e.target.value)}
+                      onChange={(e) => { setSignupConfirm(e.target.value); setSignupError(''); }}
                       placeholder="Enter password" autoComplete="new-password"
                       style={{ ...inputBase, padding: '10px 44px 10px 14px' }}
                       onFocus={focusGreen} onBlur={blurGray} />
@@ -532,10 +533,27 @@ export default function LoginPage({
                   </div>
                 </Field>
 
+                {signupError && (
+                  <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', padding: 8, gap: 6, width: '100%', boxSizing: 'border-box', background: 'var(--color-error-bg)', borderRadius: 5, fontSize: 15, fontWeight: 400, lineHeight: '22px', color: 'var(--color-text)', fontFamily: FF }}>
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="var(--color-text)" style={{ flexShrink: 0 }}>
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+                    </svg>
+                    {signupError}
+                  </div>
+                )}
+
                 {(() => {
                   const canCreate = firstName && lastName && signupEmail && signupPassword && signupConfirm;
                   return (
-                    <GreenButton onClick={() => { onSignUp?.({ firstName, lastName, email: signupEmail, password: signupPassword }); setView('verifyemail'); }} disabled={!canCreate}>
+                    <GreenButton onClick={() => {
+                      setSignupError('');
+                      if (signupPassword !== signupConfirm) {
+                        setSignupError('Password and Confirm Password do not match!');
+                        return;
+                      }
+                      onSignUp?.({ firstName, lastName, email: signupEmail, password: signupPassword });
+                      setView('verifyemail');
+                    }} disabled={!canCreate}>
                       Create Account
                     </GreenButton>
                   );

package/src/components/onboarding/AddTeammates.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
-import { ChevronDown, Trash, SquareUser } from 'lucide-react';
+import { ChevronDown, Trash, SquareUser, Check } from 'lucide-react';
 
 const FF = 'var(--font-sans)';
 
@@ -29,14 +29,21 @@ const AddTeammates = ({
   onInvite,
 }) => {
   const [inputValue, setInputValue] = useState('');
+  const [emailTags, setEmailTags] = useState([]);
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [editingValue, setEditingValue] = useState('');
+  const [emailError, setEmailError] = useState('');
   const [members, setMembers] = useState([]);
   const [openDropdownIdx, setOpenDropdownIdx] = useState(null);
   const [openProjectIdx, setOpenProjectIdx] = useState(null);
   const inputRef = useRef(null);
+  const editInputRef = useRef(null);
   const dropdownRef = useRef(null);
 
   const resolvedDefaultProject = defaultProject || projects[0] || '';
 
+  const isValidEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
   // Close dropdowns on outside click
   useEffect(() => {
     if (openDropdownIdx === null && openProjectIdx === null) return;
@@ -50,19 +57,102 @@ const AddTeammates = ({
     return () => document.removeEventListener('mousedown', handleClick);
   }, [openDropdownIdx, openProjectIdx]);
 
+  // Focus the inline edit input when editingIndex changes
+  useEffect(() => {
+    if (editingIndex !== null && editInputRef.current) {
+      editInputRef.current.focus();
+    }
+  }, [editingIndex]);
+
+  const handleInputChange = (e) => {
+    const val = e.target.value;
+    setEmailError('');
+    if (val.endsWith(',')) {
+      const email = val.slice(0, -1).trim();
+      if (!email) { setInputValue(''); return; }
+      if (!isValidEmail(email)) {
+        setEmailError(`"${email}" is not a valid email address.`);
+        return;
+      }
+      if (!emailTags.includes(email)) {
+        setEmailTags([...emailTags, email]);
+      }
+      setInputValue('');
+    } else {
+      setInputValue(val);
+    }
+  };
+
+  const handleTagClick = (idx) => {
+    setEditingIndex(idx);
+    setEditingValue(emailTags[idx]);
+  };
+
+  const commitEdit = (idx) => {
+    const trimmed = editingValue.trim();
+    setEmailError('');
+    if (!trimmed) {
+      setEmailTags(emailTags.filter((_, i) => i !== idx));
+    } else if (!isValidEmail(trimmed)) {
+      setEmailError(`"${trimmed}" is not a valid email address.`);
+      return;
+    } else if (trimmed !== emailTags[idx]) {
+      setEmailTags(emailTags.map((t, i) => (i === idx ? trimmed : t)));
+    }
+    setEditingIndex(null);
+    setEditingValue('');
+  };
+
+  const handleEditChange = (e) => {
+    const val = e.target.value;
+    if (val.endsWith(',')) {
+      // Commit the edit (strip comma)
+      setEditingValue(val.slice(0, -1));
+      commitEdit(editingIndex);
+    } else {
+      setEditingValue(val);
+    }
+  };
+
+  const handleEditKeyDown = (e, idx) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commitEdit(idx);
+    }
+    if (e.key === 'Escape') {
+      // Cancel editing, revert
+      setEditingIndex(null);
+      setEditingValue('');
+    }
+    if (e.key === 'Backspace' && !editingValue) {
+      // Empty and backspace — remove the tag
+      setEmailTags(emailTags.filter((_, i) => i !== idx));
+      setEditingIndex(null);
+      setEditingValue('');
+    }
+  };
+
   const addEmails = () => {
-    const raw = inputValue
-      .split(',')
-      .map((e) => e.trim())
-      .filter((e) => e.includes('@'));
+    setEmailError('');
+    const trimmed = inputValue.trim();
+    if (trimmed && !isValidEmail(trimmed)) {
+      setEmailError(`"${trimmed}" is not a valid email address.`);
+      return;
+    }
+    const allEmails = [...emailTags];
+    if (trimmed && isValidEmail(trimmed)) {
+      allEmails.push(trimmed);
+    }
+    if (!allEmails.length) return;
     const existing = new Set(members.map((m) => m.email));
-    const newMembers = raw
+    const newMembers = [...new Set(allEmails)]
       .filter((e) => !existing.has(e))
-      .map((email) => ({ email, role: defaultRole, project: resolvedDefaultProject }));
+      .map((email) => ({ email, role: defaultRole, project: resolvedDefaultProject, invited: false }));
     if (newMembers.length) {
       setMembers([...members, ...newMembers]);
-      setInputValue('');
     }
+    setEmailTags([]);
+    setInputValue('');
   };
 
   const handleKeyDown = (e) => {
@@ -70,6 +160,10 @@ const AddTeammates = ({
       e.preventDefault();
       addEmails();
     }
+    if (e.key === 'Backspace' && !inputValue && emailTags.length) {
+      // Start editing the last tag
+      handleTagClick(emailTags.length - 1);
+    }
   };
 
   const removeMember = (idx) => {
@@ -83,11 +177,14 @@ const AddTeammates = ({
 
   const handleSendInvite = () => {
     if (members.length) {
+      setMembers(members.map((m) => ({ ...m, invited: true })));
       onSendInvite?.(members);
       onInvite?.(members.map((m) => m.email));
     }
   };
 
+  const hasPermissions = (m) => m.role && m.project;
+
   return (
     <div style={{ fontFamily: FF }}>
       {/* Header */}
@@ -115,40 +212,68 @@ const AddTeammates = ({
             flexWrap: 'wrap',
           }}
         >
-          {/* Email tags from input */}
-          {inputValue.split(',').filter((s) => s.trim()).length > 1 &&
-            inputValue
-              .split(',')
-              .map((s) => s.trim())
-              .filter((s) => s.includes('@'))
-              .map((email, i) => (
+          {emailTags.map((email, i) => (
+            <span
+              key={i}
+              style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
+            >
+              {editingIndex === i ? (
+                <input
+                  ref={editInputRef}
+                  type="text"
+                  autoComplete="off"
+                  value={editingValue}
+                  onChange={handleEditChange}
+                  onKeyDown={(e) => handleEditKeyDown(e, i)}
+                  onBlur={() => commitEdit(i)}
+                  style={{
+                    border: 'none',
+                    outline: 'none',
+                    fontSize: 14,
+                    fontWeight: 500,
+                    fontFamily: FF,
+                    color: 'var(--grey-strong, #2E3236)',
+                    background: '#F3F7F7',
+                    borderRadius: 6,
+                    padding: '4px 8px',
+                    width: `${Math.max(editingValue.length, 1) * 8.5 + 16}px`,
+                  }}
+                />
+              ) : (
                 <span
-                  key={i}
+                  onClick={(e) => { e.stopPropagation(); handleTagClick(i); }}
                   style={{
-                    display: 'inline-flex',
+                    display: 'flex',
+                    padding: '4px 8px',
+                    justifyContent: 'center',
                     alignItems: 'center',
-                    padding: '4px 10px',
+                    gap: 10,
                     borderRadius: 6,
-                    background: 'var(--hover-warm, #F5F0E8)',
+                    background: '#F3F7F7',
                     fontSize: 14,
                     fontWeight: 500,
                     color: 'var(--grey-strong, #2E3236)',
                     whiteSpace: 'nowrap',
+                    cursor: 'text',
                   }}
                 >
                   {email}
                 </span>
-              ))}
+              )}
+              <span style={{ fontSize: 14, color: 'var(--grey-strong, #2E3236)' }}>,</span>
+            </span>
+          ))}
           <input
             ref={inputRef}
             type="text"
-            placeholder="Enter email addresses separated by commas"
+            autoComplete="off"
+            placeholder={emailTags.length ? '' : 'Enter email addresses separated by commas'}
             value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
+            onChange={handleInputChange}
             onKeyDown={handleKeyDown}
             style={{
               flex: 1,
-              minWidth: 200,
+              minWidth: 80,
               border: 'none',
               outline: 'none',
               fontSize: 14,
@@ -183,6 +308,16 @@ const AddTeammates = ({
         </button>
       </div>
 
+      {/* Validation error */}
+      {emailError && (
+        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', padding: 8, gap: 6, width: '100%', boxSizing: 'border-box', background: 'var(--color-error-bg, #F5F0E8)', borderRadius: 5, fontSize: 15, fontWeight: 400, lineHeight: '22px', color: 'var(--color-text, #2E3236)', fontFamily: FF, marginTop: 8 }}>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="var(--color-text, #2E3236)" style={{ flexShrink: 0 }}>
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+          </svg>
+          {emailError}
+        </div>
+      )}
+
       {/* Invited Members section */}
       {members.length > 0 && (
         <div style={{ marginTop: 24 }}>
@@ -191,27 +326,53 @@ const AddTeammates = ({
             <span style={{ fontSize: 14, fontWeight: 400, fontFamily: 'Varta, var(--font-sans)', fontStyle: 'normal', lineHeight: 'normal', color: 'var(--Content-Tertiary, #676767)' }}>
               Invited Members
             </span>
-            <button
-              onClick={handleSendInvite}
-              style={{
-                display: 'flex',
-                height: 28,
-                padding: 10,
-                justifyContent: 'center',
-                alignItems: 'center',
-                gap: 10,
-                borderRadius: 10,
-                border: '1px solid var(--Base-absent, #D9D9D9)',
-                background: 'var(--Base-White, #FFF)',
-                fontSize: 14,
-                fontWeight: 600,
-                fontFamily: FF,
-                color: 'var(--Content-Primary, #2E3236)',
-                cursor: 'pointer',
-              }}
-            >
-              Send Invite
-            </button>
+            {members.every((m) => m.invited) ? (
+              <button
+                style={{
+                  display: 'flex',
+                  height: 28,
+                  minWidth: 80,
+                  padding: '16px 12px',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  gap: 10,
+                  borderRadius: 10,
+                  border: '1px solid var(--Base-absent, #D9D9D9)',
+                  background: 'var(--Base-White, #FFF)',
+                  fontSize: 14,
+                  fontWeight: 500,
+                  fontFamily: FF,
+                  color: 'var(--Content-Primary, #2E3236)',
+                  cursor: 'default',
+                }}
+              >
+                <Check size={16} />
+                Sent
+              </button>
+            ) : (
+              <button
+                onClick={handleSendInvite}
+                style={{
+                  display: 'flex',
+                  height: 28,
+                  minWidth: 80,
+                  padding: '16px 12px',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  gap: 10,
+                  borderRadius: 10,
+                  border: '1px solid var(--Base-absent, #D9D9D9)',
+                  background: 'var(--Base-White, #FFF)',
+                  fontSize: 14,
+                  fontWeight: 500,
+                  fontFamily: FF,
+                  color: 'var(--Content-Primary, #2E3236)',
+                  cursor: 'pointer',
+                }}
+              >
+                Send Invite
+              </button>
+            )}
           </div>
 
           {/* Members list */}
@@ -256,28 +417,46 @@ const AddTeammates = ({
                   </div>
                 </div>
 
-                {/* Right: Set Permissions dropdown */}
-                <div style={{ position: 'relative' }} ref={openDropdownIdx === idx ? dropdownRef : null}>
-                  <button
-                    onClick={() => setOpenDropdownIdx(openDropdownIdx === idx ? null : idx)}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 8,
-                      padding: '8px 12px',
-                      borderRadius: 10,
-                      border: '1px solid var(--Border-Subtle, #E6E6E6)',
-                      background: 'var(--Base-White, #FFF)',
-                      fontSize: 14,
-                      fontWeight: 500,
-                      fontFamily: FF,
-                      color: 'var(--Content-Primary, #2E3236)',
-                      cursor: 'pointer',
-                      whiteSpace: 'nowrap',
-                    }}
-                  >
-                    Set Permissions
-                    <ChevronDown size={16} color="var(--Grey-Strong, #808183)" />
+                {/* Right: Invite sent + dropdown */}
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                  {/* Invite sent label */}
+                  {member.invited && hasPermissions(member) && (
+                    <span style={{ fontFamily: 'Varta, var(--font-sans)', fontSize: 14, fontStyle: 'normal', fontWeight: 400, lineHeight: 'normal', color: 'var(--Content-Tertiary, #676767)', whiteSpace: 'nowrap' }}>
+                      Invite sent
+                    </span>
+                  )}
+
+                  {/* Dropdown trigger */}
+                  <div style={{ position: 'relative' }} ref={openDropdownIdx === idx ? dropdownRef : null}>
+                    <button
+                      onClick={() => setOpenDropdownIdx(openDropdownIdx === idx ? null : idx)}
+                      style={{
+                        display: 'flex',
+                        width: 160,
+                        height: 32,
+                        minWidth: 96,
+                        padding: '16px 12px 16px 16px',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        gap: 10,
+                        borderRadius: 10,
+                        border: '1px solid var(--Base-absent, #D9D9D9)',
+                        background: 'var(--Base-White, #FFF)',
+                        fontSize: 13,
+                        fontWeight: 500,
+                        fontFamily: FF,
+                        color: 'var(--Content-Primary, #2E3236)',
+                        cursor: 'pointer',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        boxSizing: 'border-box',
+                      }}
+                    >
+                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', flex: 1, textAlign: 'left' }}>
+                        {hasPermissions(member) ? `${member.role}, ${member.project}` : 'Set Permissions'}
+                      </span>
+                      <ChevronDown size={16} color="var(--Grey-Strong, #808183)" style={{ flexShrink: 0 }} />
                   </button>
 
                   {/* Dropdown */}
@@ -438,6 +617,7 @@ const AddTeammates = ({
                       </div>
                     </div>
                   )}
+                  </div>
                 </div>
               </div>
             ))}