keystone-design-bootstrap 1.0.74 → 1.0.76

package/dist/themes/index.d.ts

@@ -7,6 +7,7 @@ declare const THEME_CONFIG: {
     readonly aman: ".aman";
     readonly barelux: ".barelux";
     readonly balance: ".balance";
+    readonly custom: "";
 };
 type Theme = keyof typeof THEME_CONFIG;
 declare function getAvailableThemes(): Theme[];

package/dist/themes/index.js

@@ -6,8 +6,10 @@ var THEME_CONFIG = {
   // Aman Hotels variant files (hero-home.aman.tsx)
   barelux: ".barelux",
   // Bare Lux Studio variant files (hero-home.barelux.tsx)
-  balance: ".balance"
+  balance: ".balance",
   // Balance Aesthetics variant files (hero-home.balance.tsx)
+  custom: ""
+  // Fully custom sites — no design-system CSS loaded, all styling built in the site itself
 };
 function getAvailableThemes() {
   return Object.keys(THEME_CONFIG);

package/dist/themes/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/themes/index.ts"],"sourcesContent":["/**\n * Theme Configuration\n * Single source of truth for all themes\n */\n\nexport const THEME_CONFIG = {\n  classic: '',           // Base files with no suffix (hero-home.tsx)\n  aman: '.aman',         // Aman Hotels variant files (hero-home.aman.tsx)\n  barelux: '.barelux',   // Bare Lux Studio variant files (hero-home.barelux.tsx)\n  balance: '.balance',   // Balance Aesthetics variant files (hero-home.balance.tsx)\n} as const;\n\nexport type Theme = keyof typeof THEME_CONFIG;\n\nexport function getAvailableThemes(): Theme[] {\n  return Object.keys(THEME_CONFIG) as Theme[];\n}\n\nexport function getThemeSuffix(theme: Theme): string {\n  return THEME_CONFIG[theme] || '';\n}\n\nexport function isValidTheme(theme: string): theme is Theme {\n  return theme in THEME_CONFIG;\n}\n"],"mappings":";AAKO,IAAM,eAAe;AAAA,EAC1B,SAAS;AAAA;AAAA,EACT,MAAM;AAAA;AAAA,EACN,SAAS;AAAA;AAAA,EACT,SAAS;AAAA;AACX;AAIO,SAAS,qBAA8B;AAC5C,SAAO,OAAO,KAAK,YAAY;AACjC;AAEO,SAAS,eAAe,OAAsB;AACnD,SAAO,aAAa,KAAK,KAAK;AAChC;AAEO,SAAS,aAAa,OAA+B;AAC1D,SAAO,SAAS;AAClB;","names":[]}
+{"version":3,"sources":["../../src/themes/index.ts"],"sourcesContent":["/**\n * Theme Configuration\n * Single source of truth for all themes\n */\n\nexport const THEME_CONFIG = {\n  classic: '',           // Base files with no suffix (hero-home.tsx)\n  aman: '.aman',         // Aman Hotels variant files (hero-home.aman.tsx)\n  barelux: '.barelux',   // Bare Lux Studio variant files (hero-home.barelux.tsx)\n  balance: '.balance',   // Balance Aesthetics variant files (hero-home.balance.tsx)\n  custom: '',            // Fully custom sites — no design-system CSS loaded, all styling built in the site itself\n} as const;\n\nexport type Theme = keyof typeof THEME_CONFIG;\n\nexport function getAvailableThemes(): Theme[] {\n  return Object.keys(THEME_CONFIG) as Theme[];\n}\n\nexport function getThemeSuffix(theme: Theme): string {\n  return THEME_CONFIG[theme] || '';\n}\n\nexport function isValidTheme(theme: string): theme is Theme {\n  return theme in THEME_CONFIG;\n}\n"],"mappings":";AAKO,IAAM,eAAe;AAAA,EAC1B,SAAS;AAAA;AAAA,EACT,MAAM;AAAA;AAAA,EACN,SAAS;AAAA;AAAA,EACT,SAAS;AAAA;AAAA,EACT,QAAQ;AAAA;AACV;AAIO,SAAS,qBAA8B;AAC5C,SAAO,OAAO,KAAK,YAAY;AACjC;AAEO,SAAS,eAAe,OAAsB;AACnD,SAAO,aAAa,KAAK,KAAK;AAChC;AAEO,SAAS,aAAa,OAA+B;AAC1D,SAAO,SAAS;AAClB;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.74",
+  "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/next/layouts/root-layout.tsx

@@ -194,19 +194,23 @@ export async function KeystoneRootLayout(props: {
             jobApplicationFormDefinition={jobApplicationFormDefinition ?? null}
             marketingListSignupFormDefinition={marketingListSignupFormDefinition ?? null}
           >
-            <HeaderNavigation
-              config={dynamicConfig}
-              companyInformation={companyInformation}
-              websitePhotos={websitePhotos}
-              props={headerProps}
-              logoText={headerOverrides?.logoText}
-            />
+            {theme !== 'custom' && (
+              <HeaderNavigation
+                config={dynamicConfig}
+                companyInformation={companyInformation}
+                websitePhotos={websitePhotos}
+                props={headerProps}
+                logoText={headerOverrides?.logoText}
+              />
+            )}
             {children}
-            <FooterHome
-              config={dynamicConfig}
-              companyInformation={companyInformation}
-              websitePhotos={websitePhotos}
-            />
+            {theme !== 'custom' && (
+              <FooterHome
+                config={dynamicConfig}
+                companyInformation={companyInformation}
+                websitePhotos={websitePhotos}
+              />
+            )}
             {chatEnabled ? (
               <ChatWidget
                 position={options?.chatPosition || 'bottom-right'}

package/src/themes/index.ts

@@ -8,6 +8,7 @@ export const THEME_CONFIG = {
   aman: '.aman',         // Aman Hotels variant files (hero-home.aman.tsx)
   barelux: '.barelux',   // Bare Lux Studio variant files (hero-home.barelux.tsx)
   balance: '.balance',   // Balance Aesthetics variant files (hero-home.balance.tsx)
+  custom: '',            // Fully custom sites — no design-system CSS loaded, all styling built in the site itself
 } as const;
 
 export type Theme = keyof typeof THEME_CONFIG;

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)