medos-sdk 1.1.10 → 1.1.12

package/dist/components/appointment-modal-styles.d.ts

@@ -0,0 +1,259 @@
+import React from "react";
+export declare const getMobileStyles: (theme: any, breakpoint: string) => {
+    container: {
+        backgroundColor: any;
+        padding: string;
+        maxWidth: string;
+        fontFamily: any;
+        color: any;
+        minHeight: string;
+        boxSizing: "border-box";
+    };
+    header: {
+        marginBottom: number;
+    };
+    title: {
+        fontSize: number;
+        fontWeight: number;
+        margin: number;
+        color: any;
+    };
+    section: {
+        marginBottom: number;
+    };
+    sectionTitle: {
+        fontSize: number;
+        fontWeight: number;
+        marginBottom: number;
+        color: any;
+    };
+    required: {
+        color: any;
+        marginLeft: number;
+    };
+    modeContainer: {
+        display: string;
+        flexDirection: "column";
+        gap: number;
+    };
+    modeOption: {
+        display: string;
+        alignItems: string;
+        gap: number;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        fontSize: number;
+        transition: string;
+        backgroundColor: any;
+    };
+    radioInput: {
+        width: number;
+        height: number;
+        accentColor: any;
+    };
+    chargeAmount: {
+        fontSize: number;
+        fontWeight: number;
+        color: any;
+    };
+    paymentOption: {
+        padding: string;
+        border: string;
+        borderRadius: string;
+        fontSize: number;
+        color: any;
+        backgroundColor: any;
+    };
+    dateSection: {
+        marginBottom: number;
+        padding: string;
+        backgroundColor: any;
+        borderRadius: string;
+        border: string;
+    };
+    dateSectionHeader: {
+        marginBottom: number;
+    };
+    dateSectionTitle: {
+        fontSize: number;
+        fontWeight: number;
+        color: any;
+        margin: number;
+        letterSpacing: string;
+        textTransform: "uppercase";
+    };
+    monthNavigationContainer: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        marginBottom: number;
+        position: "relative";
+    };
+    monthYearDisplay: {
+        fontSize: number;
+        fontWeight: number;
+        color: any;
+        textAlign: "center";
+        flex: number;
+    };
+    navButton: {
+        background: string;
+        border: string;
+        color: any;
+        cursor: string;
+        padding: number;
+        borderRadius: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        transition: string;
+        minWidth: number;
+        minHeight: number;
+        flexShrink: number;
+    };
+    dateCardsContainer: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        gap: number;
+        width: string;
+        maxWidth: string;
+        overflow: string;
+    };
+    dateCard: {
+        width: number;
+        height: number;
+        border: string;
+        borderRadius: string;
+        display: string;
+        flexDirection: "column";
+        alignItems: string;
+        justifyContent: string;
+        cursor: string;
+        transition: string;
+        backgroundColor: any;
+        position: "relative";
+        flex: string;
+    };
+    dateCardSelected: {
+        borderColor: any;
+        backgroundColor: any;
+        color: any;
+    };
+    dateCardWeekday: {
+        fontSize: number;
+        fontWeight: number;
+        textTransform: "uppercase";
+        marginBottom: number;
+        letterSpacing: string;
+        lineHeight: number;
+    };
+    dateCardDay: {
+        fontSize: number;
+        fontWeight: number;
+        lineHeight: number;
+    };
+    slotsContainer: {
+        marginBottom: number;
+    };
+    slotGrid: {
+        display: string;
+        gridTemplateColumns: string;
+        gap: number;
+        marginTop: number;
+        maxHeight: string;
+        overflowY: "auto";
+        paddingRight: string;
+        paddingBottom: string;
+        scrollbarWidth: "thin";
+        scrollbarColor: string;
+    };
+    slotButton: {
+        padding: string;
+        border: string;
+        borderRadius: string;
+        backgroundColor: any;
+        color: any;
+        fontSize: number;
+        fontWeight: number;
+        cursor: string;
+        transition: string;
+        minHeight: number;
+        boxShadow: string;
+        position: "relative";
+        letterSpacing: string;
+    };
+    slotButtonSelected: {
+        borderColor: any;
+        backgroundColor: any;
+        color: any;
+        boxShadow: string;
+        transform: string;
+    };
+    noSlots: {
+        textAlign: "center";
+        color: any;
+        fontSize: number;
+        marginTop: number;
+        padding: string;
+    };
+    footer: {
+        display: string;
+        gap: number;
+        marginTop: string;
+        paddingTop: number;
+        borderTop: string;
+    };
+    backButton: {
+        flex: number;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        backgroundColor: any;
+        color: any;
+        fontSize: number;
+        fontWeight: number;
+        cursor: string;
+        transition: string;
+        minHeight: number;
+    };
+    nextButton: {
+        flex: number;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        backgroundColor: any;
+        color: any;
+        fontSize: number;
+        fontWeight: number;
+        cursor: string;
+        transition: string;
+        minHeight: number;
+        boxShadow: string;
+    };
+};
+export declare const getDesktopStyles: (theme: any, breakpoint: string) => {
+    modalWrapper: React.CSSProperties;
+    sectionCard: React.CSSProperties;
+    sectionHeader: React.CSSProperties;
+    sectionTitle: React.CSSProperties;
+    sectionBody: React.CSSProperties;
+    label: React.CSSProperties;
+    modeContainer: React.CSSProperties;
+    radioLabel: React.CSSProperties;
+    radioInput: React.CSSProperties;
+    rupee: React.CSSProperties;
+    dateTimeContainer: React.CSSProperties;
+    calendarBox: React.CSSProperties;
+    timesContainer: React.CSSProperties;
+    timesLabel: React.CSSProperties;
+    dateLabel: React.CSSProperties;
+    noSlots: React.CSSProperties;
+    slotGrid: React.CSSProperties;
+    slotButton: React.CSSProperties;
+    footer: React.CSSProperties;
+    backBtn: React.CSSProperties;
+    continueBtn: React.CSSProperties;
+};

package/dist/components/appointment-modal-styles.js

@@ -0,0 +1,395 @@
+export const getMobileStyles = (theme, breakpoint) => {
+    const borderRadius = "12px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
+    const buttonRadius = "8px";
+    return {
+        container: {
+            backgroundColor: theme.colors.background,
+            padding: "20px 16px",
+            maxWidth: "100%",
+            fontFamily: theme.typography.fontFamily,
+            color: theme.colors.text,
+            minHeight: "100vh",
+            boxSizing: "border-box",
+        },
+        header: { marginBottom: 24 },
+        title: {
+            fontSize: 18,
+            fontWeight: 600,
+            margin: 0,
+            color: theme.colors.text,
+        },
+        section: { marginBottom: 24 },
+        sectionTitle: {
+            fontSize: 15,
+            fontWeight: 600,
+            marginBottom: 12,
+            color: theme.colors.text,
+        },
+        required: { color: theme.colors.error, marginLeft: 4 },
+        modeContainer: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+        },
+        modeOption: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: "14px 16px",
+            border: cardBorder,
+            borderRadius,
+            cursor: "pointer",
+            fontSize: 15,
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+        },
+        radioInput: { width: 18, height: 18, accentColor: theme.colors.primary },
+        chargeAmount: { fontSize: 18, fontWeight: 600, color: theme.colors.text },
+        paymentOption: {
+            padding: "14px 16px",
+            border: cardBorder,
+            borderRadius,
+            fontSize: 15,
+            color: theme.colors.textSecondary,
+            backgroundColor: theme.colors.surface,
+        },
+        dateSection: {
+            marginBottom: 24,
+            padding: "16px",
+            backgroundColor: theme.colors.backgroundSecondary,
+            borderRadius,
+            border: cardBorder,
+        },
+        dateSectionHeader: { marginBottom: 12 },
+        dateSectionTitle: {
+            fontSize: 12,
+            fontWeight: 600,
+            color: theme.colors.textSecondary,
+            margin: 0,
+            letterSpacing: "0.5px",
+            textTransform: "uppercase",
+        },
+        monthNavigationContainer: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: 16,
+            position: "relative",
+        },
+        monthYearDisplay: {
+            fontSize: 16,
+            fontWeight: 600,
+            color: theme.colors.text,
+            textAlign: "center",
+            flex: 1,
+        },
+        navButton: {
+            background: "none",
+            border: "none",
+            color: theme.colors.text,
+            cursor: "pointer",
+            padding: 8,
+            borderRadius: buttonRadius,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "all 0.2s ease",
+            minWidth: 36,
+            minHeight: 36,
+            flexShrink: 0,
+        },
+        dateCardsContainer: {
+            display: "flex",
+            justifyContent: "space-around",
+            alignItems: "center",
+            gap: 8,
+            width: "100%",
+            maxWidth: "100%",
+            overflow: "hidden",
+        },
+        dateCard: {
+            width: 56,
+            height: 56,
+            border: `2px solid ${theme.colors.border}`,
+            borderRadius: "50%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+            position: "relative",
+            flex: "0 0 auto",
+        },
+        dateCardSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+        },
+        dateCardWeekday: {
+            fontSize: 9,
+            fontWeight: 500,
+            textTransform: "uppercase",
+            marginBottom: 2,
+            letterSpacing: "0.3px",
+            lineHeight: 1,
+        },
+        dateCardDay: { fontSize: 14, fontWeight: 700, lineHeight: 1 },
+        slotsContainer: { marginBottom: 24 },
+        slotGrid: {
+            display: "grid",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gap: 12,
+            marginTop: 12,
+            maxHeight: "280px",
+            overflowY: "auto",
+            paddingRight: "8px",
+            paddingBottom: "4px",
+            scrollbarWidth: "thin",
+            scrollbarColor: `${theme.colors.primary}40 ${theme.colors.surface}`,
+        },
+        slotButton: {
+            padding: "14px 10px",
+            border: `2px solid ${theme.colors.border}`,
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.text,
+            fontSize: 13,
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+            minHeight: 48,
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
+            position: "relative",
+            letterSpacing: "0.3px",
+        },
+        slotButtonSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+            boxShadow: `0 4px 12px ${theme.colors.primary}30, 0 2px 4px ${theme.colors.primary}20`,
+            transform: "translateY(-1px)",
+        },
+        noSlots: {
+            textAlign: "center",
+            color: theme.colors.textSecondary,
+            fontSize: 14,
+            marginTop: 16,
+            padding: "20px",
+        },
+        footer: {
+            display: "flex",
+            gap: 12,
+            marginTop: "auto",
+            paddingTop: 20,
+            borderTop: cardBorder,
+        },
+        backButton: {
+            flex: 1,
+            padding: "12px 20px",
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.text,
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            minHeight: 44,
+        },
+        nextButton: {
+            flex: 1,
+            padding: "12px 20px",
+            border: "none",
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.secondary,
+            color: theme.colors.textOnSecondary,
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            minHeight: 44,
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        },
+    };
+};
+export const getDesktopStyles = (theme, breakpoint) => {
+    const borderRadius = "12px";
+    const buttonRadius = "8px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
+    return {
+        modalWrapper: {
+            backgroundColor: theme.colors.background,
+            borderRadius,
+            padding: "24px",
+            maxWidth: 800,
+            margin: "0 auto",
+            fontFamily: theme.typography.fontFamily,
+            color: theme.colors.text,
+            boxSizing: "border-box",
+        },
+        sectionCard: {
+            border: cardBorder,
+            borderRadius,
+            marginBottom: 20,
+            position: "relative",
+            overflow: "hidden",
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+        },
+        sectionHeader: {
+            background: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+            borderBottom: cardBorder,
+            padding: "14px 20px",
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+        },
+        sectionTitle: { fontSize: 16, fontWeight: 600 },
+        sectionBody: {
+            padding: "20px",
+            position: "relative",
+        },
+        label: {
+            fontSize: 14,
+            fontWeight: 500,
+            marginBottom: 8,
+            display: "block",
+            color: theme.colors.text,
+        },
+        modeContainer: {
+            display: "flex",
+            gap: 20,
+            marginTop: 8,
+            flexDirection: "row",
+        },
+        radioLabel: {
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            cursor: "pointer",
+            fontSize: 14,
+            padding: "8px 16px",
+            borderRadius: buttonRadius,
+            border: cardBorder,
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+        },
+        radioInput: {
+            width: 18,
+            height: 18,
+            accentColor: theme.colors.secondary,
+            cursor: "pointer",
+        },
+        rupee: {
+            fontWeight: 600,
+            fontSize: 18,
+            color: theme.colors.text,
+        },
+        dateTimeContainer: {
+            display: "flex",
+            gap: 24,
+            flexDirection: "row",
+            alignItems: "flex-start",
+        },
+        calendarBox: {
+            border: cardBorder,
+            borderRadius,
+            padding: 0,
+            width: "320px",
+            minWidth: "320px",
+            overflow: "visible",
+            backgroundColor: theme.colors.surface,
+        },
+        timesContainer: {
+            flex: 1,
+            minWidth: "320px",
+        },
+        timesLabel: {
+            fontWeight: 600,
+            fontSize: 15,
+            color: theme.colors.text,
+            marginBottom: 4,
+        },
+        dateLabel: {
+            color: theme.colors.textSecondary,
+            fontSize: 13,
+            fontWeight: 400,
+        },
+        noSlots: {
+            color: theme.colors.textSecondary,
+            fontSize: 14,
+            marginTop: 12,
+            padding: "16px",
+            textAlign: "center",
+            backgroundColor: theme.colors.backgroundSecondary,
+            borderRadius: buttonRadius,
+        },
+        slotGrid: {
+            display: "grid",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gap: 12,
+            marginTop: 16,
+            maxHeight: "340px",
+            overflowY: "auto",
+            paddingRight: "8px",
+            paddingBottom: "4px",
+            scrollbarWidth: "thin",
+            scrollbarColor: `${theme.colors.secondary}40 ${theme.colors.surface}`,
+        },
+        slotButton: {
+            borderRadius: buttonRadius,
+            padding: "12px 16px",
+            border: `2px solid ${theme.colors.border}`,
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+            minHeight: 48,
+            backgroundColor: theme.colors.surface,
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+            position: "relative",
+            letterSpacing: "0.3px",
+            textAlign: "center",
+        },
+        footer: {
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            marginTop: 24,
+            paddingTop: 20,
+            gap: 12,
+            flexDirection: "row",
+            borderTop: cardBorder,
+        },
+        backBtn: {
+            border: cardBorder,
+            background: theme.colors.surface,
+            color: theme.colors.text,
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: "10px 20px",
+            cursor: "pointer",
+            width: "auto",
+            minHeight: 40,
+            fontSize: 14,
+            transition: "all 0.2s ease",
+        },
+        continueBtn: {
+            background: theme.colors.secondary,
+            color: theme.colors.textOnSecondary,
+            border: "none",
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: "10px 20px",
+            cursor: "pointer",
+            width: "auto",
+            minHeight: 40,
+            fontSize: 14,
+            transition: "all 0.2s ease",
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        },
+    };
+};

package/dist/components/constant.d.ts

@@ -0,0 +1,2 @@
+export declare const MONTHS: string[];
+export declare const WEEKDAYS: string[];

package/dist/components/constant.js

@@ -0,0 +1,15 @@
+export const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+export const WEEKDAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];

package/dist/components/constants/constant.d.ts

@@ -0,0 +1,2 @@
+export declare const MONTHS: string[];
+export declare const WEEKDAYS: string[];

package/dist/components/constants/constant.js

@@ -0,0 +1,15 @@
+export const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+export const WEEKDAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];

package/dist/components/constants/index.d.ts

@@ -0,0 +1,3 @@
+export declare const API_BASE_URL = "https://api.medos.one/v1";
+export declare const MONTHS: string[];
+export declare const WEEKDAYS: string[];