medos-sdk 1.1.10 → 1.1.11

package/dist/components/theme-styles.js

@@ -1,258 +1,349 @@
-export function getContainerStyles(theme, prefix = "medos") {
+export function getContainerStyles(theme, prefix = "medos", breakpoint) {
+    const isMobile = breakpoint === "mobile";
+    const isTablet = breakpoint === "tablet";
     return {
         container: {
             display: "flex",
             justifyContent: "center",
-            padding: theme.spacing.xl,
+            padding: isMobile ? "16px" : "20px",
             fontFamily: theme.typography.fontFamily,
             background: theme.colors.background,
         },
         card: {
             width: "100%",
-            maxWidth: 720,
+            maxWidth: isMobile || isTablet ? "100%" : 720,
             background: theme.colors.surface,
-            borderRadius: theme.radii.lg,
-            boxShadow: theme.shadows.lg,
-            padding: theme.spacing["2xl"],
+            borderRadius: "12px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+            padding: isMobile ? "20px" : "24px",
             boxSizing: "border-box",
         },
         header: {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            marginBottom: theme.spacing.lg,
+            marginBottom: "20px",
+            flexWrap: isMobile ? "wrap" : "nowrap",
         },
         title: {
-            marginLeft: 10,
-            fontSize: theme.typography.fontSizeXl,
-            fontWeight: theme.typography.fontWeightSemibold,
+            marginLeft: isMobile ? 0 : 10,
+            fontSize: isMobile ? "18px" : "20px",
+            fontWeight: 600,
             color: theme.colors.text,
+            margin: 0,
         },
         section: {
-            marginTop: theme.spacing.md,
+            marginTop: "16px",
         },
         errorMessage: {
-            marginBottom: theme.spacing.md,
+            marginBottom: "16px",
+            padding: "12px 16px",
+            borderRadius: "8px",
+            backgroundColor: theme.colors.errorBackground,
             color: theme.colors.error,
-            fontWeight: theme.typography.fontWeightSemibold,
+            fontWeight: 500,
+            fontSize: "14px",
+            border: `1px solid ${theme.colors.error}20`,
         },
         actions: {
             display: "flex",
-            gap: theme.spacing.sm,
-            marginTop: theme.spacing.lg,
-            justifyContent: "flex-end",
+            gap: "12px",
+            marginTop: "24px",
+            paddingTop: "20px",
+            borderTop: `1px solid ${theme.colors.border}`,
+            justifyContent: isMobile ? "stretch" : "flex-end",
+            flexDirection: isMobile ? "column" : "row",
         },
     };
 }
-export function getButtonStyles(theme, prefix = "medos") {
+export function getButtonStyles(theme, prefix = "medos", breakpoint) {
+    const isMobile = breakpoint === "mobile";
+    const minHeight = isMobile ? "44px" : "40px";
+    const basePadding = isMobile ? "12px 20px" : "10px 20px";
+    const borderRadius = "8px";
     return {
         primary: {
             background: theme.colors.secondary,
             color: theme.colors.textOnSecondary,
             border: "none",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
+            padding: basePadding,
+            borderRadius,
             cursor: "pointer",
-            fontWeight: theme.typography.fontWeightSemibold,
-            fontSize: theme.typography.fontSizeSm,
-            transition: theme.transitions.normal,
+            fontWeight: 600,
+            fontSize: "14px",
+            transition: "all 0.2s ease",
+            minHeight,
+            width: isMobile ? "100%" : "auto",
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+            lineHeight: "1.5",
         },
         primaryHover: {
             background: theme.colors.secondaryHover,
+            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+        },
+        primaryDisabled: {
+            opacity: 0.6,
+            cursor: "not-allowed",
         },
         secondary: {
             background: theme.colors.surface,
             color: theme.colors.primary,
-            border: `1px solid ${theme.colors.primary}`,
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
+            border: `1px solid ${theme.colors.border}`,
+            padding: basePadding,
+            borderRadius,
             cursor: "pointer",
-            fontSize: theme.typography.fontSizeSm,
-            transition: theme.transitions.normal,
+            fontWeight: 600,
+            fontSize: "14px",
+            transition: "all 0.2s ease",
+            minHeight,
+            width: isMobile ? "100%" : "auto",
+            lineHeight: "1.5",
         },
         secondaryHover: {
             background: theme.colors.surfaceHover,
+            borderColor: theme.colors.borderHover,
+        },
+        outline: {
+            background: "transparent",
+            color: theme.colors.text,
+            border: `1px solid ${theme.colors.border}`,
+            padding: basePadding,
+            borderRadius,
+            cursor: "pointer",
+            fontWeight: 500,
+            fontSize: "14px",
+            transition: "all 0.2s ease",
+            minHeight,
+            width: isMobile ? "100%" : "auto",
+            lineHeight: "1.5",
+        },
+        outlineHover: {
+            background: theme.colors.backgroundSecondary,
+            borderColor: theme.colors.borderHover,
+        },
+        ghost: {
+            background: "transparent",
+            color: theme.colors.primary,
+            border: "none",
+            padding: basePadding,
+            borderRadius,
+            cursor: "pointer",
+            fontWeight: 500,
+            fontSize: "14px",
+            transition: "all 0.2s ease",
+            minHeight,
+            width: isMobile ? "100%" : "auto",
+            lineHeight: "1.5",
+        },
+        ghostHover: {
+            background: `${theme.colors.primary}10`,
         },
     };
 }
-export function getPhoneVerifyStyles(theme, prefix = "medos") {
+export function getPhoneVerifyStyles(theme, prefix = "medos", breakpoint) {
+    const isMobile = breakpoint === "mobile";
+    const borderRadius = "12px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
     return {
         container: {
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: theme.radii.lg,
+            border: cardBorder,
+            borderRadius,
             overflow: "hidden",
             backgroundColor: theme.colors.surface,
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
         },
         header: {
-            padding: "20px 24px 10px 24px",
+            padding: isMobile ? "16px 20px" : "18px 24px",
+            borderBottom: cardBorder,
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+        },
+        title: {
+            fontSize: isMobile ? "16px" : "18px",
+            fontWeight: 600,
+            margin: 0,
+            color: theme.colors.textOnPrimary,
         },
-        title: { fontSize: 20, fontWeight: 600, margin: 0 },
         content: {
-            padding: theme.spacing["2xl"],
+            padding: isMobile ? "20px" : "24px",
         },
         label: {
             display: "block",
-            fontSize: theme.typography.fontSizeSm,
-            fontWeight: theme.typography.fontWeightMedium,
+            fontSize: "14px",
+            fontWeight: 500,
             color: theme.colors.text,
-            marginBottom: theme.spacing.sm,
+            marginBottom: "8px",
         },
         phoneInputContainer: {
             display: "flex",
-            gap: theme.spacing.sm,
+            gap: "10px",
+            flexDirection: isMobile ? "column" : "row",
         },
         phoneInput: {
             flex: 1,
             width: "100%",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
+            padding: "10px 14px",
+            borderRadius: "8px",
             border: `1px solid ${theme.colors.border}`,
-            fontSize: theme.typography.fontSizeSm,
+            fontSize: "14px",
             outline: "none",
             color: theme.colors.text,
             boxSizing: "border-box",
-            transition: theme.transitions.normal,
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+            minHeight: isMobile ? "44px" : "40px",
+            backgroundColor: theme.colors.surface,
         },
         phoneInputFocus: {
-            borderColor: theme.colors.borderFocus,
-            outline: `2px solid ${theme.colors.borderFocus}20`,
+            borderColor: theme.colors.primary,
+            boxShadow: `0 0 0 3px ${theme.colors.primary}15`,
         },
         phoneDisplay: {
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            padding: "10px 14px",
             background: theme.colors.backgroundSecondary,
-            borderRadius: theme.radii.md,
-            fontSize: theme.typography.fontSizeSm,
-            color: theme.colors.textSecondary,
-            fontWeight: theme.typography.fontWeightMedium,
+            borderRadius: "8px",
+            fontSize: "14px",
+            color: theme.colors.text,
+            fontWeight: 500,
+            border: `1px solid ${theme.colors.border}`,
         },
         otpInput: {
             width: "100%",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            border: `1px solid ${theme.colors.borderHover}`,
-            borderRadius: theme.radii.md,
-            fontSize: theme.typography.fontSizeSm,
+            padding: "10px 14px",
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: "8px",
+            fontSize: "14px",
             outline: "none",
             color: theme.colors.text,
             boxSizing: "border-box",
-            transition: theme.transitions.normal,
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+            backgroundColor: theme.colors.surface,
         },
         otpInputFocus: {
-            borderColor: theme.colors.borderFocus,
-            outline: `2px solid ${theme.colors.borderFocus}20`,
+            borderColor: theme.colors.primary,
+            boxShadow: `0 0 0 3px ${theme.colors.primary}15`,
         },
         otpHint: {
-            marginTop: theme.spacing.sm,
-            fontSize: theme.typography.fontSizeXs,
-            color: theme.colors.textTertiary,
+            marginTop: "8px",
+            fontSize: "12px",
+            color: theme.colors.textSecondary,
         },
         successMessage: {
-            marginTop: theme.spacing.xl,
-            padding: theme.spacing.lg,
-            borderRadius: theme.radii.md,
+            marginTop: "20px",
+            padding: "16px",
+            borderRadius: "8px",
             backgroundColor: theme.colors.successBackground,
             border: `1px solid ${theme.colors.success}`,
             display: "flex",
             alignItems: "center",
-            gap: theme.spacing.md,
+            gap: "12px",
         },
         successIcon: {
-            fontSize: theme.typography.fontSize2xl,
+            fontSize: "24px",
             color: theme.colors.success,
         },
         successTitle: {
-            fontSize: theme.typography.fontSizeSm,
-            fontWeight: theme.typography.fontWeightSemibold,
+            fontSize: "14px",
+            fontWeight: 600,
             color: theme.colors.success,
         },
         successSubtitle: {
-            fontSize: theme.typography.fontSizeXs,
-            color: theme.colors.textTertiary,
-            marginTop: 2,
+            fontSize: "12px",
+            color: theme.colors.textSecondary,
+            marginTop: "2px",
         },
         footer: {
-            padding: `${theme.spacing.lg} ${theme.spacing["2xl"]}`,
+            padding: isMobile ? "16px 20px" : "18px 24px",
             borderTop: `1px solid ${theme.colors.border}`,
             backgroundColor: theme.colors.surface,
             display: "flex",
-            gap: theme.spacing.md,
-            justifyContent: "flex-end",
+            gap: "12px",
+            justifyContent: isMobile ? "stretch" : "flex-end",
+            flexDirection: isMobile ? "column" : "row",
         },
     };
 }
-export function getPatientDetailsStyles(theme, prefix = "medos") {
+export function getPatientDetailsStyles(theme, prefix = "medos", breakpoint) {
+    const isMobile = breakpoint === "mobile";
+    const borderRadius = "12px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
     return {
         sectionCard: {
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: theme.radii.lg,
-            marginBottom: theme.spacing["2xl"],
+            border: cardBorder,
+            borderRadius,
+            marginBottom: "24px",
+            overflow: "visible",
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
         },
         sectionHeader: {
             backgroundColor: theme.colors.primary,
-            padding: `${theme.spacing.lg} ${theme.spacing.xl}`,
+            padding: isMobile ? "16px 20px" : "18px 24px",
             display: "flex",
             alignItems: "center",
-            gap: theme.spacing.md,
-            borderBottom: `1px solid ${theme.colors.border}`,
+            gap: "12px",
+            borderBottom: cardBorder,
             color: theme.colors.textOnPrimary,
         },
         sectionTitle: {
-            fontSize: theme.typography.fontSizeLg,
-            fontWeight: theme.typography.fontWeightSemibold,
+            fontSize: isMobile ? "16px" : "18px",
+            fontWeight: 600,
             margin: 0,
             color: theme.colors.textOnPrimary,
         },
         sectionBody: {
-            padding: theme.spacing["2xl"],
+            padding: isMobile ? "20px" : "24px",
         },
         gridRow: {
             display: "grid",
-            gridTemplateColumns: "1fr 1fr",
-            gap: theme.spacing.xl,
-            marginTop: theme.spacing.xl,
+            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
+            gap: isMobile ? "16px" : "20px",
+            marginTop: "20px",
         },
         label: {
             display: "block",
-            fontSize: theme.typography.fontSizeXs,
-            marginBottom: theme.spacing.xs,
-            color: theme.colors.textSecondary,
-            fontWeight: theme.typography.fontWeightMedium,
+            fontSize: "14px",
+            marginBottom: "8px",
+            color: theme.colors.text,
+            fontWeight: 500,
         },
         input: {
             width: "100%",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
-            border: `1px solid ${theme.colors.border}`,
+            padding: "10px 14px",
+            borderRadius: "8px",
+            border: cardBorder,
             outline: "none",
-            fontSize: theme.typography.fontSizeSm,
+            fontSize: "14px",
             boxSizing: "border-box",
             color: theme.colors.text,
-            transition: theme.transitions.normal,
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+            minHeight: isMobile ? "44px" : "40px",
+            backgroundColor: theme.colors.surface,
         },
         inputFocus: {
-            borderColor: theme.colors.borderFocus,
-            outline: `2px solid ${theme.colors.borderFocus}20`,
+            borderColor: theme.colors.primary,
+            boxShadow: `0 0 0 3px ${theme.colors.primary}15`,
         },
         phoneDisplay: {
             display: "flex",
-            gap: theme.spacing.sm,
+            gap: "10px",
+            flexDirection: isMobile ? "column" : "row",
         },
         phoneCode: {
-            width: "100px",
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
-            border: `1px solid ${theme.colors.border}`,
+            width: isMobile ? "100%" : "100px",
+            padding: "10px 14px",
+            borderRadius: "8px",
+            border: cardBorder,
             backgroundColor: theme.colors.backgroundSecondary,
-            fontSize: theme.typography.fontSizeSm,
+            fontSize: "14px",
             boxSizing: "border-box",
             color: theme.colors.textSecondary,
         },
         phoneNumber: {
             flex: 1,
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radii.md,
-            border: `1px solid ${theme.colors.border}`,
+            padding: "10px 14px",
+            borderRadius: "8px",
+            border: cardBorder,
             backgroundColor: theme.colors.backgroundSecondary,
-            fontSize: theme.typography.fontSizeSm,
+            fontSize: "14px",
             boxSizing: "border-box",
             color: theme.colors.textSecondary,
         },
@@ -263,51 +354,56 @@ export function getSuccessStyles(theme, prefix = "medos") {
         container: {
             display: "flex",
             flexDirection: "column",
-            height: "100%",
-        },
-        header: {
-            marginTop: `-${theme.spacing.lg}`,
             alignItems: "center",
+            padding: "32px 24px",
             textAlign: "center",
-            color: theme.colors.success,
-            fontWeight: theme.typography.fontWeightBold,
-            fontSize: theme.typography.fontSizeLg,
-            marginBottom: theme.spacing.xl,
+        },
+        header: {
+            marginBottom: "24px",
         },
         iconContainer: {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            padding: `${theme.spacing.md} 0`,
+            width: "72px",
+            height: "72px",
+            borderRadius: "50%",
+            backgroundColor: theme.colors.successBackground,
+            marginBottom: "20px",
         },
         detailsContainer: {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
-            gap: theme.spacing.md,
+            gap: "12px",
             textAlign: "center",
-            color: theme.colors.success,
         },
         detailsTitle: {
-            fontWeight: theme.typography.fontWeightSemibold,
-            fontSize: theme.typography.fontSizeMd,
+            fontWeight: 600,
+            fontSize: "18px",
+            color: theme.colors.success,
+            margin: 0,
         },
         detailsList: {
             display: "flex",
             flexDirection: "column",
-            gap: theme.spacing.xs,
-            fontSize: theme.typography.fontSizeSm,
+            gap: "4px",
+            fontSize: "14px",
             width: "100%",
-            maxWidth: "28rem",
+            maxWidth: "400px",
             textAlign: "center",
+            color: theme.colors.textSecondary,
         },
         confirmationNote: {
-            marginTop: theme.spacing.sm,
-            fontSize: theme.typography.fontSizeXs,
-            color: theme.colors.textTertiary,
+            marginTop: "12px",
+            fontSize: "14px",
+            color: theme.colors.textSecondary,
+            lineHeight: "1.5",
         },
         actionContainer: {
-            marginTop: theme.spacing["2xl"],
+            marginTop: "32px",
+            display: "flex",
+            justifyContent: "center",
         },
     };
 }

package/dist/components/types.d.ts

@@ -1,4 +1,4 @@
-export type { AppointmentState, AppointmentAction, } from "./appointment-booking/types";
+export type { AppointmentState, AppointmentAction, Patient, SessionPack, AvailablePackage, BookingOptionType, } from "./appointment-booking/types";
 export { INITIAL_STATE } from "./appointment-booking/types";
 export type PhoneVerificationStepProps = {
     state: any;
@@ -13,6 +13,7 @@ export type PatientDetailsStepProps = {
     dispatch: React.Dispatch<any>;
     onBack: () => void;
     onSubmit: () => Promise<void>;
+    isFirstStep?: boolean;
 };
 export type SuccessStepProps = {
     onReset: () => void;
@@ -50,3 +51,4 @@ export declare const BLOOD_GROUP_OPTIONS: {
     value: string;
     label: string;
 }[];
+export declare const mapBloodGroupToApi: (uiBloodGroup: string) => string;

package/dist/components/types.js

@@ -20,4 +20,19 @@ export const BLOOD_GROUP_OPTIONS = [
     { value: "AB-", label: "AB-" },
     { value: "O+", label: "O+" },
     { value: "O-", label: "O-" },
+    { value: "UNKNOWN", label: "Unknown" },
 ];
+export const mapBloodGroupToApi = (uiBloodGroup) => {
+    const bloodGroupMap = {
+        "A+": "A_POSITIVE",
+        "A-": "A_NEGATIVE",
+        "B+": "B_POSITIVE",
+        "B-": "B_NEGATIVE",
+        "AB+": "AB_POSITIVE",
+        "AB-": "AB_NEGATIVE",
+        "O+": "O_POSITIVE",
+        "O-": "O_NEGATIVE",
+        UNKNOWN: "UNKNOWN",
+    };
+    return bloodGroupMap[uiBloodGroup] || "UNKNOWN";
+};

package/dist/components/utils.d.ts

@@ -1,4 +1,7 @@
 export declare const formatDateToISO: (date: Date) => string;
+export declare const formatDate: (date: Date | string | null) => string;
+export declare const formatTime: (timeStr: string | number) => string;
+export declare const calculateDuration: (startTime?: string | number, endTime?: string | number, defaultDuration?: number) => number;
 export declare const parsePatientName: (fullName: string) => {
     firstName: string;
     lastName: string;

package/dist/components/utils.js

@@ -4,6 +4,65 @@ export const formatDateToISO = (date) => {
     const day = String(date.getDate()).padStart(2, "0");
     return `${year}-${month}-${day}`;
 };
+export const formatDate = (date) => {
+    if (!date)
+        return "Not selected";
+    try {
+        const dateObj = typeof date === "string" ? new Date(date) : date;
+        return dateObj.toLocaleDateString("en-US", {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+        });
+    }
+    catch {
+        return String(date);
+    }
+};
+export const formatTime = (timeStr) => {
+    try {
+        if (typeof timeStr === "number" || !Number.isNaN(Number(timeStr))) {
+            const time = new Date(Number(timeStr));
+            return time.toLocaleTimeString("en-US", {
+                hour: "numeric",
+                minute: "2-digit",
+                hour12: true,
+            });
+        }
+        if (timeStr.includes(":") && timeStr.length <= 5) {
+            const time = new Date(`2000-01-01T${timeStr}`);
+            return time.toLocaleTimeString("en-US", {
+                hour: "numeric",
+                minute: "2-digit",
+                hour12: true,
+            });
+        }
+        const time = new Date(timeStr);
+        return time.toLocaleTimeString("en-US", {
+            hour: "numeric",
+            minute: "2-digit",
+            hour12: true,
+        });
+    }
+    catch {
+        return String(timeStr);
+    }
+};
+export const calculateDuration = (startTime, endTime, defaultDuration = 60) => {
+    if (!startTime || !endTime)
+        return defaultDuration;
+    try {
+        const start = new Date(startTime);
+        const end = new Date(endTime);
+        const diffMs = end.getTime() - start.getTime();
+        const diffMinutes = Math.round(diffMs / (1000 * 60));
+        return diffMinutes > 0 ? diffMinutes : defaultDuration;
+    }
+    catch {
+        return defaultDuration;
+    }
+};
 export const parsePatientName = (fullName) => {
     const nameParts = fullName.trim().split(/\s+/);
     const firstName = nameParts[0] || "Patient";

package/dist/components/validation.d.ts

@@ -1,2 +1,4 @@
 export declare const validatePhoneNumber: (phone: string) => boolean;
 export declare const validateCountryCode: (code: string) => boolean;
+export declare const validateBloodGroup: (bloodGroup: string) => boolean;
+export declare const validateDateOfBirth: (dob: string) => boolean;