medos-sdk 1.1.10 → 1.1.12

package/dist/vanilla/EnquiryFormWidget.d.ts

@@ -13,6 +13,7 @@ declare class EnquiryFormWidget {
     private mounted;
     private state;
     private countryCodeSelect;
+    private contactMethodSelect;
     constructor(container: HTMLElement | string, options: EnquiryFormWidgetOptions);
     private init;
     private validateContactStep;

package/dist/vanilla/EnquiryFormWidget.js

@@ -2,7 +2,7 @@ import { EnquiryService } from "../services/EnquiryService";
 import { MedosClient } from "../client/MedosClient";
 import { validateName, validateEmail, validatePhoneNumber, validateSubject, validateMessage, validateCountryCode, } from "../enquiry-form/validation";
 import { VanillaIcons } from "./components/VanillaIcons";
-import { VanillaSelect } from "./components/VanillaSelect";
+import { VanillaSelect, createContactMethodSelect, } from "./components/VanillaSelect";
 import { injectThemedStyles } from "./components/theme-injector";
 const COUNTRY_CODES_ENQUIRY = [
     { value: "+91", label: "🇮🇳 +91" },
@@ -15,6 +15,7 @@ class EnquiryFormWidget {
     constructor(container, options) {
         this.mounted = true;
         this.countryCodeSelect = null;
+        this.contactMethodSelect = null;
         injectThemedStyles();
         if (typeof container === "string") {
             const el = document.getElementById(container);
@@ -64,7 +65,7 @@ class EnquiryFormWidget {
             this.setState({ error: "Please enter a valid name." });
             return false;
         }
-        if (!validateEmail(this.state.patientEmail)) {
+        if (this.state.patientEmail && !validateEmail(this.state.patientEmail)) {
             this.setState({ error: "Please enter a valid email address." });
             return false;
         }
@@ -180,7 +181,7 @@ class EnquiryFormWidget {
             ? `
             <div class="medos-enquiry-header">
               <h2 class="medos-enquiry-title">Submit Inquiry</h2>
-              <p class="medos-enquiry-step-indicator">Step ${this.state.step + 1} of 4</p>
+              <p class="medos-enquiry-step-indicator">Step ${this.state.step + 1} of 3</p>
             </div>
 
             ${this.state.loading
@@ -214,6 +215,14 @@ class EnquiryFormWidget {
                 }
             }
         }
+        if (this.state.step === 2) {
+            const contactMethodContainer = this.container.querySelector("#medos-enquiry-contact-method-container");
+            if (contactMethodContainer) {
+                this.contactMethodSelect = createContactMethodSelect(contactMethodContainer, this.state.preferredContactMethod, (value) => {
+                    this.state.preferredContactMethod = value;
+                });
+            }
+        }
     }
     renderStep() {
         switch (this.state.step) {
@@ -249,7 +258,7 @@ class EnquiryFormWidget {
           </div>
           
           <div class="medos-form-group">
-            <label class="medos-label">Email Address <span class="medos-required">*</span></label>
+            <label class="medos-label">Email Address</label>
             <input 
               type="email" 
               class="medos-input" 
@@ -333,37 +342,9 @@ class EnquiryFormWidget {
         </div>
         <div class="medos-section-body">
           <p class="medos-section-description">How would you prefer to be contacted?</p>
-          <div class="medos-contact-options">
-            <label class="medos-radio-option ${this.state.preferredContactMethod === "PHONE" ? "selected" : ""}">
-              <input 
-                type="radio" 
-                name="contact-method" 
-                value="PHONE"
-                ${this.state.preferredContactMethod === "PHONE" ? "checked" : ""}
-                class="medos-radio-input"
-              />
-              <span class="medos-radio-label">Phone</span>
-            </label>
-            <label class="medos-radio-option ${this.state.preferredContactMethod === "EMAIL" ? "selected" : ""}">
-              <input 
-                type="radio" 
-                name="contact-method" 
-                value="EMAIL"
-                ${this.state.preferredContactMethod === "EMAIL" ? "checked" : ""}
-                class="medos-radio-input"
-              />
-              <span class="medos-radio-label">Email</span>
-            </label>
-            <label class="medos-radio-option ${this.state.preferredContactMethod === "BOTH" ? "selected" : ""}">
-              <input 
-                type="radio" 
-                name="contact-method" 
-                value="BOTH"
-                ${this.state.preferredContactMethod === "BOTH" ? "checked" : ""}
-                class="medos-radio-input"
-              />
-              <span class="medos-radio-label">Both</span>
-            </label>
+          <div class="medos-form-group">
+            <label class="medos-label">Preferred Contact Method</label>
+            <div class="medos-contact-method-container" id="medos-enquiry-contact-method-container"></div>
           </div>
         </div>
       </div>
@@ -426,7 +407,7 @@ class EnquiryFormWidget {
       <div style="position: relative; display: inline-block;">
         <svg width="64" height="64" viewBox="0 0 41 41" fill="none">
           <path
-            d="M31.1309 4.90254C32.388 4.98797 33.0166 5.03069 33.5247 5.25288C34.2598 5.57438 34.8467 6.16126 35.1682 6.8964C35.3904 7.40445 35.4331 8.03302 35.5185 9.29016L35.7135 12.159C35.748 12.6674 35.7653 12.9217 35.8206 13.1645C35.9004 13.5154 36.0391 13.8503 36.2308 14.1549C36.3634 14.3657 36.531 14.5576 36.8661 14.9416L38.7568 17.108C39.5853 18.0574 39.9996 18.532 40.2017 19.0484C40.4942 19.7955 40.4942 20.6255 40.2017 21.3727C39.9996 21.889 39.5853 22.3637 38.7568 23.313L36.8661 25.4795C36.531 25.8634 36.3634 26.0554 36.2308 26.2662C36.0391 26.5708 35.9004 26.9056 35.8206 27.2566C35.7653 27.4994 35.748 27.7536 35.7135 28.2621L35.5185 31.1309C35.4331 32.388 35.3904 33.0166 35.1682 33.5247C34.8467 34.2598 34.2598 34.8467 33.5247 35.1682C33.0166 35.3904 32.388 35.4331 31.1309 35.5185L28.2621 35.7135C27.7536 35.748 27.4994 35.7653 27.2566 35.8206C26.9056 35.9004 26.5708 36.0391 26.2662 36.2308C26.0554 36.3634 25.8634 36.531 25.4795 36.8661L23.313 38.7568C22.3637 39.5853 21.889 39.9996 21.3727 40.2017C20.6255 40.4942 19.7955 40.4942 19.0484 40.2017C18.532 39.9996 18.0574 39.5853 17.108 38.7568L14.9416 36.8661C14.5576 36.531 14.3657 36.3634 14.1549 36.2308C13.8503 36.0391 13.5154 35.9004 13.1645 35.8206C12.9217 35.7653 12.6674 35.748 12.159 35.7135L9.29016 35.5185C8.03302 35.4331 7.40445 35.3904 6.8964 35.1682C6.16126 34.8467 5.57438 34.2598 5.25288 33.5247C5.03069 33.0166 4.98797 32.388 4.90254 31.1309L4.70759 28.2621C4.67304 27.7536 4.65576 27.4994 4.60049 27.2566C4.52063 26.9056 4.38193 26.5708 4.19028 26.2662C4.05764 26.0554 3.89009 25.8634 3.555 25.4795L1.66428 23.313C0.83576 22.3637 0.421499 21.889 0.219363 21.3727C-0.073121 20.6255 -0.0731209 19.7955 0.219363 19.0484C0.421499 18.532 0.83576 18.0574 1.66428 17.108L3.555 14.9416C3.89009 14.5576 4.05764 14.3657 4.19027 14.1549C4.38193 13.8503 4.52063 13.5154 4.60049 13.1645C4.65576 12.9217 4.67304 12.6674 4.70759 12.159L4.90254 9.29016C4.98797 8.03302 5.03069 7.40445 5.25288 6.8964C5.57438 6.16126 6.16126 5.57438 6.8964 5.25288C7.40445 5.03069 8.03302 4.98797 9.29016 4.90254L12.159 4.70759C12.6674 4.67304 12.9217 4.65577 13.1645 4.6005C13.5154 4.52063 13.8503 4.38193 14.1549 4.19028C14.3657 4.05764 14.5576 3.89009 14.9416 3.555L17.108 1.66428C18.0574 0.83576 18.532 0.421499 19.0484 0.219363C19.7955 -0.073121 20.6255 -0.073121 21.3727 0.219363C21.889 0.421499 22.3637 0.83576 23.313 1.66428L25.4795 3.555C25.8634 3.89009 26.0554 4.05764 26.2662 4.19028C26.5708 4.38193 26.9056 4.52063 27.2566 4.6005C27.4994 4.65577 27.7536 4.67304 28.2621 4.70759L31.1309 4.90254Z"
+            d="M31.1309 4.90254C32.388 4.98797 33.0166 5.03069 33.5247 5.25288             C34.2598 5.57438 34.8467 6.16126 35.1682 6.8964C35.3904 7.40445 35.4331 8.03302 35.5185 9.29016L35.7135 12.159C35.748 12.6674 35.7653 12.9217 35.8206 13.1645C35.9004 13.5154 36.0391 13.8503 36.2308 14.1549C36.3634 14.3657 36.531 14.5576 36.8661 14.9416L38.7568 17.108C39.5853 18.0574 39.9996 18.532 40.2017 19.0484C40.4942 19.7955 40.4942 20.6255 40.2017 21.3727C39.9996 21.889 39.5853 22.3637 38.7568 23.313L36.8661 25.4795C36.531 25.8634 36.3634 26.0554 36.2308 26.2662C36.0391 26.5708 35.9004 26.9056 35.8206 27.2566C35.7653 27.4994 35.748 27.7536 35.7135 28.2621L35.5185 31.1309C35.4331 32.388 35.3904 33.0166 35.1682 33.5247C34.8467 34.2598 34.2598 34.8467 33.5247 35.1682C33.0166 35.3904 32.388 35.4331 31.1309 35.5185L28.2621 35.7135C27.7536 35.748 27.4994 35.7653 27.2566 35.8206C26.9056 35.9004 26.5708 36.0391 26.2662 36.2308C26.0554 36.3634 25.8634 36.531 25.4795 36.8661L23.313 38.7568C22.3637 39.5853 21.889 39.9996 21.3727 40.2017C20.6255 40.4942 19.7955 40.4942 19.0484 40.2017C18.532 39.9996 18.0574 39.5853 17.108 38.7568L14.9416 36.8661C14.5576 36.531 14.3657 36.3634 14.1549 36.2308C13.8503 36.0391 13.5154 35.9004 13.1645 35.8206C12.9217 35.7653 12.6674 35.748 12.159 35.7135L9.29016 35.5185C8.03302 35.4331 7.40445 35.3904 6.8964 35.1682C6.16126 34.8467 5.57438 34.2598 5.25288 33.5247C5.03069 33.0166 4.98797 32.388 4.90254 31.1309L4.70759 28.2621C4.67304 27.7536 4.65576 27.4994 4.60049 27.2566C4.52063 26.9056 4.38193 26.5708 4.19028 26.2662C4.05764 26.0554 3.89009 25.8634 3.555 25.4795L1.66428 23.313C0.83576 22.3637 0.421499 21.889 0.219363 21.3727C-0.073121 20.6255 -0.0731209 19.7955 0.219363 19.0484C0.421499 18.532 0.83576 18.0574 1.66428 17.108L3.555 14.9416C3.89009 14.5576 4.05764 14.3657 4.19027 14.1549C4.38193 13.8503 4.52063 13.5154 4.60049 13.1645C4.65576 12.9217 4.67304 12.6674 4.70759 12.159L4.90254 9.29016C4.98797 8.03302 5.03069 7.40445 5.25288 6.8964C5.57438 6.16126 6.16126 5.57438 6.8964 5.25288C7.40445 5.03069 8.03302 4.98797 9.29016 4.90254L12.159 4.70759C12.6674 4.67304 12.9217 4.65577 13.1645 4.6005C13.5154 4.52063 13.8503 4.38193 14.1549 4.19028C14.3657 4.05764 14.5576 3.89009 14.9416 3.555L17.108 1.66428C18.0574 0.83576 18.532 0.421499 19.0484 0.219363C19.7955 -0.073121 20.6255 -0.073121 21.3727 0.219363C21.889 0.421499 22.3637 0.83576 23.313 1.66428L25.4795 3.555C25.8634 3.89009 26.0554 4.05764 26.2662 4.19028C26.5708 4.38193 26.9056 4.52063 27.2566 4.6005C27.4994 4.65577 27.7536 4.67304 28.2621 4.70759L31.1309 4.90254Z"
             fill="#006E0F"
           />
         </svg>
@@ -490,13 +471,6 @@ class EnquiryFormWidget {
                 this.render();
             });
         }
-        const contactMethodRadios = this.container.querySelectorAll('input[name="contact-method"]');
-        contactMethodRadios.forEach((radio) => {
-            radio.addEventListener("change", (e) => {
-                const target = e.target;
-                this.state.preferredContactMethod = target.value;
-            });
-        });
         const nextBtn = this.container.querySelector("#medos-enquiry-btn-next");
         if (nextBtn) {
             nextBtn.addEventListener("click", () => this.goToNext());
@@ -521,6 +495,14 @@ class EnquiryFormWidget {
     }
     destroy() {
         this.mounted = false;
+        if (this.countryCodeSelect) {
+            this.countryCodeSelect.destroy();
+            this.countryCodeSelect = null;
+        }
+        if (this.contactMethodSelect) {
+            this.contactMethodSelect.destroy();
+            this.contactMethodSelect = null;
+        }
         this.container.innerHTML = "";
     }
 }

package/dist/vanilla/client/MedosClient.d.ts

@@ -21,6 +21,7 @@ declare class MedosClient {
     static fetchAppointments(workspaceId: number, addressId: number, doctorId: number, appointmentDate: string): Promise<any[]>;
     static sendPhoneVerificationOtp(payload: SendPhoneVerificationOtpPayload): Promise<any>;
     static verifyPhoneVerificationOtp(payload: VerifyPhoneVerificationOtpPayload): Promise<any>;
+    static fetchTheme(): Promise<string | undefined>;
     static get client(): AxiosInstance;
     static ensureInitialized(): Promise<AxiosInstance>;
     static isInitialized(): boolean;

package/dist/vanilla/components/AppointmentConfirmationStep.d.ts

@@ -22,6 +22,7 @@ interface AppointmentConfirmationStepProps {
     selectedDoctor?: Doctor | null;
     selectedAddress?: AddressItem | null;
     onClose: () => void;
+    onGoBackToSlots?: () => void;
 }
 declare const AppointmentConfirmationStep: React.FC<AppointmentConfirmationStepProps>;
 export default AppointmentConfirmationStep;

package/dist/vanilla/components/AppointmentDateTimeModal.d.ts

@@ -12,6 +12,7 @@ type AppointmentModalProps = {
     onCancel: () => void;
     onContinue: (mode: AppointmentMode, date: Date, slot: Slot, charge: string, paymentMode: PaymentMode) => void;
     onDateChange?: (date: Date) => void;
+    initialStep?: "consultation" | "datetime";
 };
 export declare const AppointmentDateTimeModal: React.FC<AppointmentModalProps>;
 export {};

package/dist/vanilla/components/AppointmentSummaryStep.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { AppointmentState } from "./appointment-booking/types";
+import { Doctor, AddressItem } from "../services/AppointmentService";
+export interface AppointmentSummaryStepProps {
+    state: AppointmentState;
+    selectedDoctor: Doctor | null;
+    selectedAddress: AddressItem | null;
+    onBack: () => void;
+    onConfirm: () => void;
+}
+export declare const AppointmentSummaryStep: React.FC<AppointmentSummaryStepProps>;
+export default AppointmentSummaryStep;

package/dist/vanilla/components/BookingOptionStep.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { SessionPack, AvailablePackage } from "./appointment-booking/types";
+export interface BookingOptionStepProps {
+    userSessionPacks: SessionPack[];
+    availablePackages: AvailablePackage[];
+    showPackageExplorer: boolean;
+    selectedSessionPack: SessionPack | null;
+    selectedNewPackage: AvailablePackage | null;
+    onSelectOption: (optionType: "session-pack" | "new-appointment" | "explore-packages", sessionPack?: SessionPack, newPackage?: AvailablePackage) => void;
+    onSelectPackage: (pkg: AvailablePackage) => void;
+    onBack: () => void;
+}
+export declare const BookingOptionStep: React.FC<BookingOptionStepProps>;
+export default BookingOptionStep;

package/dist/vanilla/components/Icons/CloseIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface CloseIconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const CloseIcon: React.FC<CloseIconProps>;
+export default CloseIcon;

package/dist/vanilla/components/PatientSelectionStep.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Patient } from "./appointment-booking/types";
+interface PatientSelectionStepProps {
+    verifiedPatients: Patient[];
+    selectedPatient: Patient | null;
+    onSelectPatient: (patient: Patient) => void;
+    onProceedAsNewPatient: () => void;
+    onBack: () => void;
+    isFirstStep?: boolean;
+}
+export declare const PatientSelectionStep: React.FC<PatientSelectionStepProps>;
+export {};

package/dist/vanilla/components/VanillaCalendar.js

@@ -8,6 +8,12 @@ function injectCalendarStyles() {
     const styleElement = document.createElement("style");
     styleElement.id = styleId;
     styleElement.innerHTML = `
+    .medos-calendar-wrapper {
+      overflow-x: auto;
+      overflow-y: visible;
+      -webkit-overflow-scrolling: touch;
+    }
+
     .medos-calendar {
       width: 340px;
       background-color: var(--medos-color-background, #ffffff);
@@ -19,6 +25,13 @@ function injectCalendarStyles() {
       box-sizing: border-box;
     }
 
+    @media (max-width: 767px) {
+      .medos-calendar {
+        width: 320px;
+        min-width: 320px;
+      }
+    }
+
     .medos-calendar-header {
       display: flex;
       justify-content: space-between;
@@ -226,26 +239,28 @@ export class VanillaCalendar {
         })
             .join("");
         this.container.innerHTML = `
-      <div class="medos-calendar">
-        <div class="medos-calendar-header">
-          <button class="medos-calendar-nav" data-action="prev" type="button">
-            ${VanillaIcons.chevronLeft(20)}
-          </button>
-          <p class="medos-calendar-month">
-            ${VanillaCalendar.MONTHS[this.currentMonth]} ${this.currentYear}
-          </p>
-          <button class="medos-calendar-nav" data-action="next" type="button">
-            ${VanillaIcons.chevronRight(20)}
-          </button>
-        </div>
+      <div class="medos-calendar-wrapper">
+        <div class="medos-calendar">
+          <div class="medos-calendar-header">
+            <button class="medos-calendar-nav" data-action="prev" type="button">
+              ${VanillaIcons.chevronLeft(20)}
+            </button>
+            <p class="medos-calendar-month">
+              ${VanillaCalendar.MONTHS[this.currentMonth]} ${this.currentYear}
+            </p>
+            <button class="medos-calendar-nav" data-action="next" type="button">
+              ${VanillaIcons.chevronRight(20)}
+            </button>
+          </div>
 
-        <div class="medos-calendar-days-header">
-          ${VanillaCalendar.DAYS_OF_WEEK.map((d) => `<div class="medos-calendar-day-name">${d}</div>`).join("")}
-        </div>
+          <div class="medos-calendar-days-header">
+            ${VanillaCalendar.DAYS_OF_WEEK.map((d) => `<div class="medos-calendar-day-name">${d}</div>`).join("")}
+          </div>
 
-        <div class="medos-calendar-grid">
-          ${emptyCells}
-          ${dayCells}
+          <div class="medos-calendar-grid">
+            ${emptyCells}
+            ${dayCells}
+          </div>
         </div>
       </div>
     `;

package/dist/vanilla/components/VanillaIcons.d.ts

@@ -12,6 +12,11 @@ export declare const VanillaIcons: {
     phone: (size?: number) => string;
     mail: (size?: number) => string;
     clock: (size?: number) => string;
+    calendar: (size?: number) => string;
+    giftBox: (size?: number) => string;
+    arrowLeft: (size?: number) => string;
+    users: (size?: number) => string;
+    plus: (size?: number) => string;
     medosLogo: (width?: number, height?: number) => string;
 };
 export default VanillaIcons;

package/dist/vanilla/components/VanillaIcons.js

@@ -203,6 +203,98 @@ export const VanillaIcons = {
       <circle cx="12" cy="12" r="10"></circle>
       <polyline points="12 6 12 12 16 14"></polyline>
     </svg>
+  `,
+    calendar: (size = 20) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-calendar"
+    >
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+      <line x1="16" y1="2" x2="16" y2="6"></line>
+      <line x1="8" y1="2" x2="8" y2="6"></line>
+      <line x1="3" y1="10" x2="21" y2="10"></line>
+    </svg>
+  `,
+    giftBox: (size = 20) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-gift"
+    >
+      <polyline points="20 12 20 22 4 22 4 12"></polyline>
+      <rect x="2" y="7" width="20" height="5"></rect>
+      <line x1="12" y1="22" x2="12" y2="7"></line>
+      <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
+      <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
+    </svg>
+  `,
+    arrowLeft: (size = 20) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-arrow-left"
+    >
+      <line x1="19" y1="12" x2="5" y2="12"></line>
+      <polyline points="12 19 5 12 12 5"></polyline>
+    </svg>
+  `,
+    users: (size = 20) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-users"
+    >
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+      <circle cx="9" cy="7" r="4"></circle>
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+    </svg>
+  `,
+    plus: (size = 20) => `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="medos-icon medos-icon-plus"
+    >
+      <line x1="12" y1="5" x2="12" y2="19"></line>
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+    </svg>
   `,
     medosLogo: (width = 120, height = 114) => `
     <svg

package/dist/vanilla/components/VanillaSelect.d.ts

@@ -33,6 +33,8 @@ export declare class VanillaSelect {
     private attachPortalEvents;
     private detachPortalEvents;
     private focusNextItem;
+    private focusFirstItem;
+    private focusLastItem;
     private selectValue;
     setValue(value: string): void;
     getValue(): string;
@@ -42,5 +44,6 @@ export declare class VanillaSelect {
     destroy(): void;
     private escapeHtml;
 }
+export declare function createContactMethodSelect(container: HTMLElement | string, currentValue?: "PHONE" | "EMAIL" | "BOTH", onValueChange?: (value: "PHONE" | "EMAIL" | "BOTH") => void): VanillaSelect;
 export declare function upgradeNativeSelect(selectElement: HTMLSelectElement, config?: VanillaSelectOptions): VanillaSelect;
 export default VanillaSelect;

package/dist/vanilla/components/VanillaSelect.js

@@ -36,10 +36,12 @@ function injectSelectStyles() {
       text-align: left;
       box-sizing: border-box;
       color: var(--medos-color-text, #111827);
+      min-height: 40px;
     }
 
     .medos-select-trigger:hover:not(:disabled) {
       border-color: var(--medos-color-border-hover, #d1d5db);
+      background-color: #f8fafc;
     }
 
     .medos-select-trigger:focus:not(:disabled) {
@@ -73,6 +75,8 @@ function injectSelectStyles() {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      display: flex;
+      align-items: center;
     }
 
     .medos-select-placeholder {
@@ -112,6 +116,7 @@ function injectSelectStyles() {
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       animation: medos-select-show 0.15s ease-out;
       box-sizing: border-box;
+      min-width: 180px;
     }
 
     @keyframes medos-select-show {
@@ -147,6 +152,7 @@ function injectSelectStyles() {
       transition: background-color 0.1s ease;
       box-sizing: border-box;
       color: #1e293b;
+      min-height: 36px;
     }
 
     .medos-select-item:hover:not(.medos-select-item-disabled) {
@@ -159,6 +165,7 @@ function injectSelectStyles() {
 
     .medos-select-item-selected {
       background-color: #f3f4f6;
+      font-weight: 500;
     }
 
     .medos-select-item-disabled {
@@ -182,6 +189,8 @@ function injectSelectStyles() {
     /* Item Text */
     .medos-select-item-text {
       flex: 1;
+      display: flex;
+      align-items: center;
     }
 
     /* Scrollbar styling */
@@ -202,6 +211,24 @@ function injectSelectStyles() {
     .medos-select-viewport::-webkit-scrollbar-thumb:hover {
       background: #94a3b8;
     }
+
+    /* Label styling for forms */
+    .medos-form-label {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: #374151;
+    }
+
+    .medos-form-group {
+      margin-bottom: 16px;
+    }
+
+    /* Contact method specific styling */
+    .medos-contact-method-container {
+      margin-top: 8px;
+    }
   `;
     document.head.appendChild(styleElement);
 }
@@ -245,6 +272,7 @@ export class VanillaSelect {
         button.className = `medos-select-trigger ${this.config.error ? "medos-select-trigger-error" : ""}`;
         button.setAttribute("aria-expanded", this.isOpen.toString());
         button.setAttribute("aria-haspopup", "listbox");
+        button.setAttribute("aria-label", "Select option");
         if (this.config.disabled) {
             button.disabled = true;
         }
@@ -276,6 +304,10 @@ export class VanillaSelect {
                 e.preventDefault();
                 this.open();
             }
+            else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                this.open();
+            }
         });
     }
     toggleOpen() {
@@ -323,9 +355,17 @@ export class VanillaSelect {
         this.contentElement = document.createElement("div");
         this.contentElement.className = "medos-select-content";
         this.contentElement.setAttribute("role", "listbox");
-        this.contentElement.style.top = `${rect.bottom + scrollTop + 4}px`;
+        this.contentElement.setAttribute("aria-label", "Options");
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const dropdownHeight = Math.min(256, this.options.length * 36 + 8);
+        let top = rect.bottom + scrollTop + 4;
+        if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+            top = rect.top + scrollTop - dropdownHeight - 4;
+        }
+        this.contentElement.style.top = `${top}px`;
         this.contentElement.style.left = `${rect.left + scrollLeft}px`;
-        this.contentElement.style.width = `${rect.width}px`;
+        this.contentElement.style.width = `${Math.max(rect.width, 180)}px`;
         this.contentElement.innerHTML = `
       <div class="medos-select-viewport">
         ${this.options
@@ -340,6 +380,7 @@ export class VanillaSelect {
             data-label="${this.escapeHtml(option.label)}"
             ${option.disabled ? 'data-disabled="true"' : ""}
             tabindex="${option.disabled ? "-1" : "0"}"
+            aria-label="${this.escapeHtml(option.label)}"
           >
             ${this.selectedValue === option.value
             ? `
@@ -366,9 +407,16 @@ export class VanillaSelect {
         const rect = this.triggerElement.getBoundingClientRect();
         const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
         const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-        this.contentElement.style.top = `${rect.bottom + scrollTop + 4}px`;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const dropdownHeight = Math.min(256, this.options.length * 36 + 8);
+        let top = rect.bottom + scrollTop + 4;
+        if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+            top = rect.top + scrollTop - dropdownHeight - 4;
+        }
+        this.contentElement.style.top = `${top}px`;
         this.contentElement.style.left = `${rect.left + scrollLeft}px`;
-        this.contentElement.style.width = `${rect.width}px`;
+        this.contentElement.style.width = `${Math.max(rect.width, 180)}px`;
     }
     attachPortalEvents() {
         this.handleDocumentClick = (e) => {
@@ -419,6 +467,14 @@ export class VanillaSelect {
                         this.selectValue(value, label);
                     }
                 }
+                else if (e.key === "Home") {
+                    e.preventDefault();
+                    this.focusFirstItem();
+                }
+                else if (e.key === "End") {
+                    e.preventDefault();
+                    this.focusLastItem();
+                }
             });
         }
     }
@@ -444,6 +500,11 @@ export class VanillaSelect {
             return;
         const currentFocused = document.activeElement;
         let currentIndex = items.indexOf(currentFocused);
+        if (currentIndex === -1) {
+            const targetIndex = direction > 0 ? 0 : items.length - 1;
+            items[targetIndex]?.focus();
+            return;
+        }
         let nextIndex = currentIndex + direction;
         if (nextIndex < 0)
             nextIndex = items.length - 1;
@@ -451,6 +512,19 @@ export class VanillaSelect {
             nextIndex = 0;
         items[nextIndex]?.focus();
     }
+    focusFirstItem() {
+        if (!this.contentElement)
+            return;
+        const firstItem = this.contentElement.querySelector(".medos-select-item:not(.medos-select-item-disabled)");
+        firstItem?.focus();
+    }
+    focusLastItem() {
+        if (!this.contentElement)
+            return;
+        const items = this.contentElement.querySelectorAll(".medos-select-item:not(.medos-select-item-disabled)");
+        const lastItem = items[items.length - 1];
+        lastItem?.focus();
+    }
     selectValue(value, label) {
         this.selectedValue = value;
         this.selectedLabel = label;
@@ -480,7 +554,6 @@ export class VanillaSelect {
     setDisabled(disabled) {
         this.config.disabled = disabled;
         this.renderTrigger();
-        this.attachTriggerEvents();
     }
     setError(error) {
         this.config.error = error;
@@ -496,6 +569,21 @@ export class VanillaSelect {
         return div.innerHTML;
     }
 }
+export function createContactMethodSelect(container, currentValue = "PHONE", onValueChange) {
+    const contactOptions = [
+        { value: "PHONE", label: "Phone" },
+        { value: "EMAIL", label: "Email" },
+        { value: "BOTH", label: "Both" },
+    ];
+    const select = new VanillaSelect(container, contactOptions, {
+        placeholder: "Select contact method",
+        onValueChange: (value) => {
+            onValueChange?.(value);
+        },
+    });
+    select.setValue(currentValue);
+    return select;
+}
 export function upgradeNativeSelect(selectElement, config = {}) {
     const options = Array.from(selectElement.options).map((opt) => ({
         value: opt.value,