keystone-design-bootstrap 1.0.75 → 1.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.75",
+  "version": "1.0.76",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/portal/LoginForm.tsx

@@ -18,10 +18,6 @@ const inputClass =
   'block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-base text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors';
 const labelClass = 'block text-sm text-secondary mb-1';
 
-function isValidEmail(value: string): boolean {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
-}
-
 export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   const router = useRouter();
   const [step, setStep] = useState<Step>('identifier');
@@ -31,7 +27,6 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   }, []);
 
   // Identifier step state
-  const [email, setEmail] = useState('');
   const [phoneValue, setPhoneValue] = useState(''); // formatted national number
   const [selectedCountry, setSelectedCountry] = useState('US');
 
@@ -64,7 +59,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
   // Computed API values
   const phoneDigits = phoneValue.replace(/\D/g, '');
   const fullPhone = phoneDigits.length > 0 ? `${phoneCode}${phoneDigits}` : null;
-  const emailVal = email.trim() || null;
+  const emailVal = null;
 
   const emailInput = (value: string, onChange: (v: string) => void, required = false) => (
     <input
@@ -107,8 +102,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
 
   const handleContinue = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!emailVal && !fullPhone) { setError('Enter your email address or phone number to continue.'); return; }
-    if (emailVal && !isValidEmail(emailVal)) { setError('Enter a valid email address.'); return; }
+    if (!fullPhone) { setError('Enter your phone number to continue.'); return; }
     setError(null);
     setLoading(true);
     try {
@@ -118,14 +112,14 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         body: JSON.stringify({ email: emailVal, phone: fullPhone }),
       });
       const result = await res.json().catch(() => ({ exists: null }));
-      const method = emailVal && fullPhone ? 'email_and_phone' : emailVal ? 'email' : 'phone';
+      const method = 'phone';
       if (result.exists === true) {
         await setPixelUserData({ email: emailVal, phone: fullPhone });
         firePixelEvent('Lead');
         captureEvent('portal_login_identified', { method, user_exists: true });
         setWelcomeName(result.firstName ?? null);
         if (result.hasPassword === false) {
-          setIdentifiedWith(emailVal ? 'email' : 'phone');
+          setIdentifiedWith('phone');
           setStep('new');
         } else {
           setStep('returning');
@@ -134,7 +128,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
         await setPixelUserData({ email: emailVal, phone: fullPhone });
         firePixelEvent('Lead');
         captureEvent('portal_login_identified', { method, user_exists: false });
-        setIdentifiedWith(emailVal ? 'email' : 'phone');
+        setIdentifiedWith('phone');
         setStep('new');
       } else {
         captureEvent('portal_login_failed', { step: 'identifier', reason: 'unknown_error' });
@@ -229,7 +223,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     setError(null);
   };
 
-  const identifierSummary = [emailVal, fullPhone].filter(Boolean).join(' / ');
+  const identifierSummary = fullPhone ?? '';
 
   const headerTitle =
     step === 'identifier' ? 'Pricing & Booking Portal' :
@@ -237,7 +231,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
     (welcomeName ? `Welcome back, ${welcomeName}!` : 'Welcome!');
 
   const headerSubtitle =
-    step === 'identifier' ? 'Enter your email or phone number to get started.' :
+    step === 'identifier' ? 'Enter your phone number to get started.' :
     step === 'returning' ? 'Enter your password to sign in.' :
     (welcomeName ? 'Create a password to access your account.' : "Let's get you set up.");
 
@@ -272,18 +266,9 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       {/* Step: identifier */}
       {step === 'identifier' && (
         <form onSubmit={handleContinue} className="space-y-3">
-          <div>
-            <label className={labelClass}>Email address</label>
-            {emailInput(email, setEmail)}
-          </div>
-          <div className="flex items-center gap-3">
-            <hr className="flex-1 border-secondary" />
-            <span className="text-xs text-quaternary">or</span>
-            <hr className="flex-1 border-secondary" />
-          </div>
           <div>
             <label className={labelClass}>Phone number</label>
-            {phoneInput(phoneValue, setPhoneValue)}
+            {phoneInput(phoneValue, setPhoneValue, true)}
           </div>
           <div className="pt-1">
             <button
@@ -326,7 +311,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             onClick={goBack}
             className="w-full text-center text-sm text-tertiary hover:text-primary transition-colors"
           >
-            ← {identifierSummary ? `Not ${identifierSummary}?` : 'Change email or phone'}
+            ← {identifierSummary ? `Not ${identifierSummary}?` : 'Change phone number'}
           </button>
         </form>
       )}

package/src/utils/gradient-placeholder.ts

@@ -1,10 +1,8 @@
 /**
  * Generates a beautiful gradient SVG data URL using the full color palette
- * Based on gradients used in corporate marketing site animations
  * Each seed (post ID or index) will consistently return the same gradient
  */
 export const getGradientUrl = (seed: string | number): string => {
-  // Beautiful gradient combinations using the full palette from corporate marketing site
   // Colors match Tailwind's default palette (purple, pink, blue, green, orange, indigo)
   const gradients = [
     // Purple gradients (like from-purple-200 to-purple-300)