medos-sdk 1.1.9 → 1.1.11

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/custom-calendar.js

@@ -3,14 +3,21 @@ import { useState, useEffect } from "react";
 import ChevronLeft from "./Icons/ChevronLeft";
 import ChevronRight from "./Icons/ChevronRight";
 import { useTheme } from "../react/hooks/useTheme";
-const getStyle = (theme) => `
+import { useBreakpoint } from "../core/theme/responsive";
+const getStyle = (theme, isMobile) => `
+.custom-calendar-wrapper {
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+}
 .custom-calendar {
-  width: 340px;
+  width: ${isMobile ? "320px" : "100%"};
+  min-width: ${isMobile ? "320px" : "auto"};
   background-color: ${theme.colors.background};
   border-radius: ${theme.radii.md};
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-  padding: 16px;
+  padding: ${isMobile ? "12px" : "16px"};
   font-family: ${theme.typography.fontFamily};
+  box-sizing: border-box;
 }
 .calendar-header {
   display: flex;
@@ -92,10 +99,12 @@ const getStyle = (theme) => `
 `;
 export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDisabled = false, }) => {
     const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const isMobile = breakpoint === "mobile";
     useEffect(() => {
         const styleId = "custom-calendar-style";
         const existingStyle = document.getElementById(styleId);
-        const themeStyle = getStyle(theme);
+        const themeStyle = getStyle(theme, isMobile);
         if (existingStyle) {
             existingStyle.innerHTML = themeStyle;
         }
@@ -105,7 +114,7 @@ export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDis
             s.innerHTML = themeStyle;
             document.head.appendChild(s);
         }
-    }, [theme]);
+    }, [theme, isMobile]);
     const today = new Date();
     today.setHours(0, 0, 0, 0);
     const [currentMonth, setCurrentMonth] = useState(today.getMonth());
@@ -162,10 +171,10 @@ export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDis
         todayStart.setHours(0, 0, 0, 0);
         return date < todayStart;
     };
-    return (_jsxs("div", { className: "custom-calendar", children: [_jsxs("div", { className: "calendar-header", children: [_jsx(ChevronLeft, { onClick: prevMonth, className: "calendar-nav" }), _jsxs("p", { className: "calendar-month", children: [months[currentMonth], " ", currentYear] }), _jsx(ChevronRight, { onClick: nextMonth, className: "calendar-nav" })] }), _jsx("div", { className: "calendar-days-header", children: daysOfWeek.map((d) => (_jsx("div", { className: "calendar-day-name", children: d }, d))) }), _jsxs("div", { className: "calendar-grid", children: [Array.from({ length: startOffset }).map((_, idx) => (_jsx("div", { className: "calendar-empty" }, `empty-${idx}`))), Array.from({ length: daysInMonth }).map((_, i) => {
-                        const date = new Date(currentYear, currentMonth, i + 1);
-                        const disabled = pastDisabled && isBeforeToday(date);
-                        const isSelected = selectedDate && isSameDate(selectedDate, date);
-                        return (_jsxs("button", { disabled: disabled, onClick: () => onSelect(date), className: `calendar-day ${isSelected ? "selected" : ""} ${disabled ? "disabled" : ""}`, children: [_jsx("span", { children: i + 1 }), isSelected && _jsx("span", { className: "calendar-dot", children: "\u2022" })] }, i + 1));
-                    })] })] }));
+    return (_jsx("div", { className: "custom-calendar-wrapper", children: _jsxs("div", { className: "custom-calendar", children: [_jsxs("div", { className: "calendar-header", children: [_jsx(ChevronLeft, { onClick: prevMonth, className: "calendar-nav" }), _jsxs("p", { className: "calendar-month", children: [months[currentMonth], " ", currentYear] }), _jsx(ChevronRight, { onClick: nextMonth, className: "calendar-nav" })] }), _jsx("div", { className: "calendar-days-header", children: daysOfWeek.map((d) => (_jsx("div", { className: "calendar-day-name", children: d }, d))) }), _jsxs("div", { className: "calendar-grid", children: [Array.from({ length: startOffset }).map((_, idx) => (_jsx("div", { className: "calendar-empty" }, `empty-start-${currentMonth}-${idx}`))), Array.from({ length: daysInMonth }).map((_, i) => {
+                            const date = new Date(currentYear, currentMonth, i + 1);
+                            const disabled = pastDisabled && isBeforeToday(date);
+                            const isSelected = selectedDate && isSameDate(selectedDate, date);
+                            return (_jsxs("button", { disabled: disabled, onClick: () => onSelect(date), className: `calendar-day ${isSelected ? "selected" : ""} ${disabled ? "disabled" : ""}`, children: [_jsx("span", { children: i + 1 }), isSelected && _jsx("span", { className: "calendar-dot", children: "\u2022" })] }, i + 1));
+                        })] })] }) }));
 };