medos-sdk 1.0.2 → 1.1.0

package/dist/components/custom-calendar.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import ChevronLeft from "./Icons/ChevronLeft";
+import ChevronRight from "./Icons/ChevronRight";
+import { useTheme } from "../react/hooks/useTheme";
+const getStyle = (theme) => `
+.custom-calendar {
+  width: 340px;
+  background-color: ${theme.colors.background};
+  border-radius: ${theme.radii.md};
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  padding: 16px;
+  font-family: ${theme.typography.fontFamily};
+}
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.calendar-month {
+  font-size: 14px;
+  font-weight: 600;
+  color: ${theme.colors.text};
+}
+.calendar-nav {
+  width: 20px;
+  height: 20px;
+  color: ${theme.colors.secondary}; 
+  cursor: pointer;
+  border-radius: ${theme.radii.sm};
+  transition: background-color 0.2s;
+}
+.calendar-nav:hover {
+  background-color: ${theme.colors.backgroundSecondary};
+}
+.calendar-days-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: ${theme.colors.text};
+}
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 6px;
+  text-align: center;
+}
+.calendar-day {
+  width: 38px;
+  height: 38px;
+  border: 1px solid transparent;
+  border-radius: ${theme.radii.md};
+  color: ${theme.colors.secondary};
+  background-color: transparent;
+  font-size: 14px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.calendar-day span {
+  line-height: 1;
+}
+.calendar-day:hover:not(.disabled):not(.selected) {
+  background-color: ${theme.colors.secondary};
+  color: ${theme.colors.textOnSecondary};
+}
+.calendar-day.selected {
+  border: 1px solid ${theme.colors.secondary};
+  color: ${theme.colors.secondary};
+  background-color: transparent;
+  font-weight: 600;
+}
+.calendar-day.disabled {
+  color: ${theme.colors.textSecondary};
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.calendar-dot {
+  font-size: 10px;
+  margin-top: -2px;
+  line-height: 1;
+}
+.calendar-empty {
+  visibility: hidden;
+}
+`;
+export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDisabled = false, }) => {
+    const theme = useTheme();
+    useEffect(() => {
+        const styleId = "custom-calendar-style";
+        const existingStyle = document.getElementById(styleId);
+        const themeStyle = getStyle(theme);
+        if (existingStyle) {
+            existingStyle.innerHTML = themeStyle;
+        }
+        else {
+            const s = document.createElement("style");
+            s.id = styleId;
+            s.innerHTML = themeStyle;
+            document.head.appendChild(s);
+        }
+    }, [theme]);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const [currentMonth, setCurrentMonth] = useState(today.getMonth());
+    const [currentYear, setCurrentYear] = useState(today.getFullYear());
+    const daysOfWeek = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+    const months = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+    ];
+    const getDaysInMonth = (year, month) => {
+        return new Date(year, month + 1, 0).getDate();
+    };
+    const getFirstDayOfMonth = (year, month) => {
+        return new Date(year, month, 1).getDay();
+    };
+    const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+    const firstDayOfMonth = getFirstDayOfMonth(currentYear, currentMonth);
+    const startOffset = (firstDayOfMonth + 6) % 7;
+    const prevMonth = () => {
+        if (currentMonth === 0) {
+            setCurrentMonth(11);
+            setCurrentYear(currentYear - 1);
+        }
+        else {
+            setCurrentMonth(currentMonth - 1);
+        }
+    };
+    const nextMonth = () => {
+        if (currentMonth === 11) {
+            setCurrentMonth(0);
+            setCurrentYear(currentYear + 1);
+        }
+        else {
+            setCurrentMonth(currentMonth + 1);
+        }
+    };
+    const isSameDate = (d1, d2) => {
+        return (d1.getFullYear() === d2.getFullYear() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getDate() === d2.getDate());
+    };
+    const isBeforeToday = (date) => {
+        const todayStart = new Date(today);
+        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));
+                    })] })] }));
+};

package/dist/components/styles.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const CONTAINER_STYLES: Record<string, React.CSSProperties>;
+export declare const BUTTON_STYLES: Record<string, React.CSSProperties>;
+export declare const PHONE_VERIFY_STYLES: Record<string, React.CSSProperties>;
+export declare const PATIENT_DETAILS_STYLES: Record<string, React.CSSProperties>;
+export declare const SUCCESS_STYLES: Record<string, React.CSSProperties>;

package/dist/components/styles.js

@@ -0,0 +1,257 @@
+export const CONTAINER_STYLES = {
+    container: {
+        display: "flex",
+        justifyContent: "center",
+        padding: 20,
+        fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
+        background: "#f6f8fa",
+    },
+    card: {
+        width: "100%",
+        maxWidth: 720,
+        background: "#fff",
+        borderRadius: 12,
+        boxShadow: "0 8px 24px rgba(16,24,40,0.08)",
+        padding: 24,
+        boxSizing: "border-box",
+    },
+    header: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: 16,
+    },
+    title: {
+        marginLeft: 10,
+        fontSize: 20,
+        fontWeight: 600,
+    },
+    section: { marginTop: 12 },
+    errorMessage: {
+        marginBottom: 12,
+        color: "#ef4444",
+        fontWeight: 600,
+    },
+    actions: {
+        display: "flex",
+        gap: 8,
+        marginTop: 16,
+        justifyContent: "flex-end",
+    },
+};
+export const BUTTON_STYLES = {
+    primary: {
+        background: "#218838",
+        color: "#fff",
+        border: "none",
+        padding: "10px 14px",
+        borderRadius: 8,
+        cursor: "pointer",
+        fontWeight: 600,
+    },
+    secondary: {
+        background: "#fff",
+        color: "#218838",
+        border: "1px solid #218838",
+        padding: "10px 14px",
+        borderRadius: 8,
+        cursor: "pointer",
+    },
+};
+export const PHONE_VERIFY_STYLES = {
+    container: {
+        border: "1px solid #e5e7eb",
+        borderRadius: 12,
+        overflow: "hidden",
+        backgroundColor: "#fff",
+    },
+    header: {
+        padding: "16px 24px",
+        borderBottom: "1px solid #e5e7eb",
+        backgroundColor: "#f9fafb",
+    },
+    title: {
+        margin: 0,
+        fontSize: 18,
+        fontWeight: 600,
+        color: "#111827",
+    },
+    content: { padding: "24px" },
+    label: {
+        display: "block",
+        fontSize: 14,
+        fontWeight: 500,
+        color: "#111827",
+        marginBottom: 8,
+    },
+    phoneInputContainer: { display: "flex", gap: 8 },
+    phoneInput: {
+        flex: 1,
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid #e6e9ef",
+        fontSize: 14,
+        outline: "none",
+        color: "#111827",
+        boxSizing: "border-box",
+    },
+    phoneDisplay: {
+        padding: "10px 12px",
+        background: "#f9fafb",
+        borderRadius: 8,
+        fontSize: 14,
+        color: "#374151",
+        fontWeight: 500,
+    },
+    otpInput: {
+        width: "100%",
+        padding: "10px 12px",
+        border: "1px solid #d1d5db",
+        borderRadius: 8,
+        fontSize: 14,
+        outline: "none",
+        color: "#111827",
+        boxSizing: "border-box",
+    },
+    otpHint: {
+        marginTop: 8,
+        fontSize: 12,
+        color: "#6b7280",
+    },
+    successMessage: {
+        marginTop: 20,
+        padding: 16,
+        borderRadius: 8,
+        backgroundColor: "#F6FBF6",
+        border: "1px solid #218838",
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+    },
+    successIcon: { fontSize: 24, color: "#218838" },
+    successTitle: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "#218838",
+    },
+    successSubtitle: {
+        fontSize: 12,
+        color: "#6B7280",
+        marginTop: 2,
+    },
+    footer: {
+        padding: "16px 24px",
+        borderTop: "1px solid #e5e7eb",
+        backgroundColor: "#fff",
+        display: "flex",
+        gap: 12,
+        justifyContent: "flex-end",
+    },
+};
+export const PATIENT_DETAILS_STYLES = {
+    sectionCard: {
+        border: "1px solid #E5E7EB",
+        borderRadius: "12px",
+        marginBottom: "24px",
+    },
+    sectionHeader: {
+        backgroundColor: "#F9FAFB",
+        padding: "16px 20px",
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        borderBottom: "1px solid #E5E7EB",
+    },
+    sectionTitle: {
+        fontSize: "18px",
+        fontWeight: 600,
+        margin: 0,
+    },
+    sectionBody: { padding: "24px" },
+    gridRow: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: "20px",
+        marginTop: "20px",
+    },
+    label: {
+        display: "block",
+        fontSize: 13,
+        marginBottom: 6,
+        color: "#374151",
+    },
+    input: {
+        width: "100%",
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid #e6e9ef",
+        outline: "none",
+        fontSize: 14,
+        boxSizing: "border-box",
+    },
+    phoneDisplay: { display: "flex", gap: "8px" },
+    phoneCode: {
+        width: "100px",
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid #e6e9ef",
+        backgroundColor: "#F9FAFB",
+        fontSize: 14,
+        boxSizing: "border-box",
+    },
+    phoneNumber: {
+        flex: 1,
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid #e6e9ef",
+        backgroundColor: "#F9FAFB",
+        fontSize: 14,
+        boxSizing: "border-box",
+    },
+};
+export const SUCCESS_STYLES = {
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+    },
+    header: {
+        marginTop: "-16px",
+        alignItems: "center",
+        textAlign: "center",
+        color: "#27903F",
+        fontWeight: 800,
+        fontSize: "18px",
+        marginBottom: "20px",
+    },
+    iconContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "12px 0",
+    },
+    detailsContainer: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "12px",
+        textAlign: "center",
+        color: "#27903F",
+    },
+    detailsTitle: { fontWeight: 600, fontSize: "16px" },
+    detailsList: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        fontSize: "14px",
+        width: "100%",
+        maxWidth: "28rem",
+        textAlign: "center",
+    },
+    confirmationNote: {
+        marginTop: "8px",
+        fontSize: "12px",
+        color: "#6B7280",
+    },
+    actionContainer: { marginTop: "24px" },
+};

package/dist/components/theme-styles.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { MedosTheme } from "../core/theme/types";
+export declare function getContainerStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getButtonStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getPhoneVerifyStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getPatientDetailsStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getSuccessStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare const CONTAINER_STYLES: Record<string, React.CSSProperties>;
+export declare const BUTTON_STYLES: Record<string, React.CSSProperties>;
+export declare const PHONE_VERIFY_STYLES: Record<string, React.CSSProperties>;
+export declare const PATIENT_DETAILS_STYLES: Record<string, React.CSSProperties>;
+export declare const SUCCESS_STYLES: Record<string, React.CSSProperties>;