medos-sdk 1.0.2 → 1.1.0

package/dist/components/uiComponents/SelectDropdown.js

@@ -0,0 +1,302 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChevronDownIcon } from '../Icons/ChevronDownIcon';
+import { Check } from '../Icons/Check';
+const cn = (...classes) => {
+    return classes.filter(Boolean).join(' ');
+};
+if (typeof document !== 'undefined') {
+    const styleId = 'custom-select-styles';
+    if (!document.getElementById(styleId)) {
+        const styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        styleElement.innerHTML = `
+    /* Container */
+    .select-container {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    /* Trigger Button */
+    .select-trigger {
+      display: flex;
+      height: 40px;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+      white-space: nowrap;
+      border-radius: 6px;
+      border: 1px solid #e2e8f0;
+      background-color: #fff;
+      padding: 8px 12px;
+      font-size: 14px;
+      line-height: 1.5;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      transition: all 0.15s ease-in-out;
+      cursor: pointer;
+      outline: none;
+      font-family: inherit;
+      text-align: left;
+    }
+
+    .select-trigger:hover:not(:disabled) {
+      background-color: #f8fafc;
+      border-color: #cbd5e1;
+    }
+
+    .select-trigger:focus:not(:disabled) {
+      border-color: #94a3b8;
+      box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
+    }
+
+    .select-trigger:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      background-color: #f9fafb;
+    }
+
+    .select-trigger-error {
+      border-color: #ef4444;
+    }
+
+    .select-trigger-error:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+    }
+
+    /* Select Value */
+    .select-value {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #1e293b;
+    }
+
+    .select-placeholder {
+      color: #94a3b8;
+    }
+
+    /* Select Icon */
+    .select-icon {
+      height: 16px;
+      width: 16px;
+      opacity: 0.5;
+      flex-shrink: 0;
+      margin-left: 8px;
+      transition: transform 0.2s;
+    }
+
+    .select-trigger[aria-expanded="true"] .select-icon {
+      transform: rotate(180deg);
+    }
+
+    .select-icon-error {
+      color: #ef4444;
+    }
+
+    /* Content Dropdown */
+    .select-content {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      z-index: 1050;
+      margin-top: 4px;
+      overflow: hidden;
+      border-radius: 6px;
+      border: 1px solid #e2e8f0;
+      background-color: #ffffff;
+      color: #1e293b;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      animation: select-show 0.15s ease-out;
+    }
+
+    @keyframes select-show {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Viewport */
+    .select-viewport {
+      padding: 4px;
+      max-height: 256px;
+      overflow-y: auto;
+    }
+
+    /* Select Item */
+    .select-item {
+      position: relative;
+      display: flex;
+      width: 100%;
+      cursor: pointer;
+      user-select: none;
+      align-items: center;
+      border-radius: 4px;
+      padding: 8px 8px 8px 32px;
+      font-size: 14px;
+      outline: none;
+      transition: background-color 0.1s ease;
+    }
+
+    .select-item:hover:not(.select-item-disabled) {
+      background-color: #f1f5f9;
+    }
+
+    .select-item:focus {
+      background-color: #f1f5f9;
+    }
+
+    .select-item-selected {
+      background-color: #f3f4f6;
+    }
+
+    .select-item-disabled {
+      pointer-events: none;
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Item Indicator */
+    .select-item-indicator {
+      position: absolute;
+      left: 8px;
+      display: flex;
+      height: 14px;
+      width: 14px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Item Text */
+    .select-item-text {
+      flex: 1;
+    }
+
+    /* Select Group */
+    .select-group {
+      padding: 2px 0;
+    }
+
+    /* Select Label */
+    .select-label {
+      padding: 8px 8px 6px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #64748b;
+    }
+
+    /* Select Separator */
+    .select-separator {
+      margin: 4px 0;
+      height: 1px;
+      background-color: #e2e8f0;
+    }
+
+    /* Scrollbar styling */
+    .select-viewport::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .select-viewport::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 4px;
+    }
+
+    .select-viewport::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 4px;
+    }
+
+    .select-viewport::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+  `;
+        document.head.appendChild(styleElement);
+    }
+}
+const SelectContext = React.createContext(undefined);
+const useSelectContext = () => {
+    const context = React.useContext(SelectContext);
+    if (!context) {
+        throw new Error('Select components must be used within a Select');
+    }
+    return context;
+};
+const Select = ({ children, value, onValueChange, defaultValue, disabled = false }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedValue, setSelectedValue] = React.useState(value || defaultValue || '');
+    const [selectedLabel, setSelectedLabel] = React.useState('');
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setSelectedValue(value);
+        }
+    }, [value]);
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (triggerRef.current &&
+                contentRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                !contentRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen]);
+    const handleSelect = (value, label) => {
+        setSelectedValue(value);
+        setSelectedLabel(label);
+        if (onValueChange) {
+            onValueChange(value);
+        }
+        setIsOpen(false);
+    };
+    return (_jsx(SelectContext.Provider, { value: {
+            isOpen,
+            setIsOpen,
+            selectedValue,
+            selectedLabel,
+            handleSelect,
+            triggerRef,
+            contentRef,
+            disabled,
+        }, children: _jsx("div", { className: "select-container", children: children }) }));
+};
+const SelectTrigger = React.forwardRef(({ children, className, error = false, ...props }, ref) => {
+    const { isOpen, setIsOpen, triggerRef, disabled } = useSelectContext();
+    return (_jsxs("button", { ref: triggerRef, type: "button", className: cn('select-trigger', error && 'select-trigger-error', className), onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", ...props, children: [children, _jsx(ChevronDownIcon, { className: cn('select-icon', error && 'select-icon-error') })] }));
+});
+SelectTrigger.displayName = 'SelectTrigger';
+const SelectValue = ({ placeholder = 'Select...' }) => {
+    const { selectedLabel, selectedValue } = useSelectContext();
+    return (_jsx("span", { className: cn('select-value', !selectedValue && 'select-placeholder'), children: selectedLabel || placeholder }));
+};
+const SelectContent = React.forwardRef(({ children, className, ...props }, ref) => {
+    const { isOpen, contentRef } = useSelectContext();
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { ref: contentRef, className: cn('select-content', className), role: "listbox", ...props, children: _jsx("div", { className: "select-viewport", children: children }) }));
+});
+SelectContent.displayName = 'SelectContent';
+const SelectItem = React.forwardRef(({ children, value, className, disabled = false, ...props }, ref) => {
+    const { selectedValue, handleSelect } = useSelectContext();
+    const isSelected = selectedValue === value;
+    return (_jsxs("div", { ref: ref, className: cn('select-item', isSelected && 'select-item-selected', disabled && 'select-item-disabled', className), onClick: () => !disabled && handleSelect(value, children), role: "option", "aria-selected": isSelected, "data-disabled": disabled, ...props, children: [isSelected && (_jsx("span", { className: "select-item-indicator", children: _jsx(Check, {}) })), _jsx("span", { className: "select-item-text", children: children })] }));
+});
+SelectItem.displayName = 'SelectItem';
+const SelectGroup = ({ children, className }) => (_jsx("div", { className: cn('select-group', className), children: children }));
+const SelectLabel = ({ children, className }) => (_jsx("div", { className: cn('select-label', className), children: children }));
+const SelectSeparator = ({ className }) => (_jsx("div", { className: cn('select-separator', className) }));
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, };

package/dist/components/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const formatDateToISO: (date: Date) => string;
+export declare const parsePatientName: (fullName: string) => {
+    firstName: string;
+    lastName: string;
+};

package/dist/components/utils.js

@@ -0,0 +1,15 @@
+export const formatDateToISO = (date) => {
+    const year = String(date.getFullYear()).padStart(4, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+};
+export const parsePatientName = (fullName) => {
+    const nameParts = fullName.trim().split(/\s+/);
+    const firstName = nameParts[0] || "Patient";
+    const lastName = nameParts.slice(1).join(" ") || "";
+    return {
+        firstName,
+        lastName,
+    };
+};

package/dist/components/validation.d.ts

@@ -0,0 +1,2 @@
+export declare const validatePhoneNumber: (phone: string) => boolean;
+export declare const validateCountryCode: (code: string) => boolean;

package/dist/components/validation.js

@@ -0,0 +1,7 @@
+export const validatePhoneNumber = (phone) => {
+    const cleaned = phone.replace(/\D/g, "");
+    return cleaned.length >= 7 && cleaned.length <= 15;
+};
+export const validateCountryCode = (code) => {
+    return /^\+[1-9]\d{0,3}$/.test(code);
+};

package/dist/context/TemplateContext.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import type { TemplateId } from "../core";
+interface TemplateContextType {
+    templateId: TemplateId;
+}
+export interface TemplateProviderProps {
+    templateId: TemplateId;
+    children: ReactNode;
+}
+export declare const TemplateProvider: React.FC<TemplateProviderProps>;
+export declare const useTemplate: () => TemplateContextType;
+export {};

package/dist/context/TemplateContext.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect } from "react";
+import { injectTemplateStyles, removeTemplateStyles, } from "../lib/templateUtils";
+const TemplateContext = createContext(null);
+export const TemplateProvider = ({ templateId, children, }) => {
+    useEffect(() => {
+        injectTemplateStyles(templateId);
+        return () => removeTemplateStyles();
+    }, [templateId]);
+    const contextValue = React.useMemo(() => ({ templateId }), [templateId]);
+    return (_jsx(TemplateContext.Provider, { value: contextValue, children: _jsx("div", { className: "medos-sdk-container", children: children }) }));
+};
+export const useTemplate = () => {
+    const context = useContext(TemplateContext);
+    if (!context) {
+        return { templateId: "default" };
+    }
+    return context;
+};

package/dist/core/index.d.ts

@@ -1,8 +1,12 @@
 export { MedosClient } from "../client/MedosClient";
+export * from "./theme";
 export * from "../appointments/provider";
 export * from "../appointments/types";
 export * from "../appointment-calendar/provider";
 export * from "../appointment-calendar/types";
+export * from "../enquiry-form/provider";
+export * from "../enquiry-form/types";
 export { PatientService, SendPhoneVerificationOtpPayload, VerifyPhoneVerificationOtpPayload, } from "../services/PatientService";
 export { AppointmentService, type BookAppointmentPayload, type PatientPayload, type PatientAddressPayload, type AddressesResponse, type AddressItem, } from "../services/AppointmentService";
 export { AuthService } from "../services/AuthService";
+export { EnquiryService } from "../services/EnquiryService";

package/dist/core/index.js

@@ -1,8 +1,12 @@
 export { MedosClient } from "../client/MedosClient";
+export * from "./theme";
 export * from "../appointments/provider";
 export * from "../appointments/types";
 export * from "../appointment-calendar/provider";
 export * from "../appointment-calendar/types";
+export * from "../enquiry-form/provider";
+export * from "../enquiry-form/types";
 export { PatientService, } from "../services/PatientService";
 export { AppointmentService, } from "../services/AppointmentService";
 export { AuthService } from "../services/AuthService";
+export { EnquiryService } from "../services/EnquiryService";

package/dist/core/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./themes";
+export * from "./utils";

package/dist/core/theme/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./themes";
+export * from "./utils";

package/dist/core/theme/themes.d.ts

@@ -0,0 +1,8 @@
+import { MedosTheme } from "./types";
+export declare const defaultTheme: MedosTheme;
+export declare const modernTheme: MedosTheme;
+export declare const themes: {
+    readonly default: MedosTheme;
+    readonly modern: MedosTheme;
+};
+export type ThemeName = keyof typeof themes;

package/dist/core/theme/themes.js

@@ -0,0 +1,178 @@
+export const defaultTheme = {
+    name: "default",
+    colors: {
+        primary: "#27903F",
+        primaryHover: "#218838",
+        primaryActive: "#1e7835",
+        secondary: "#009b4d",
+        secondaryHover: "#008840",
+        accent: "#10b981",
+        accentHover: "#059669",
+        background: "#f6f8fa",
+        backgroundSecondary: "#f9fafb",
+        backgroundTertiary: "#fff",
+        surface: "#fff",
+        surfaceHover: "#f9fafb",
+        border: "#e5e7eb",
+        borderHover: "#d1d5db",
+        borderFocus: "#27903F",
+        text: "#111827",
+        textSecondary: "#374151",
+        textTertiary: "#6b7280",
+        textDisabled: "#9ca3af",
+        textOnPrimary: "#fff",
+        textOnSecondary: "#fff",
+        success: "#10b981",
+        successBackground: "#ecfdf5",
+        successBorder: "#6ee7b7",
+        error: "#ef4444",
+        errorBackground: "#fee2e2",
+        errorBorder: "#fca5a5",
+        warning: "#f59e0b",
+        warningBackground: "#fef3c7",
+        warningBorder: "#fcd34d",
+        info: "#3b82f6",
+        infoBackground: "#dbeafe",
+        infoBorder: "#93c5fd",
+    },
+    typography: {
+        fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        fontFamilyHeading: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        fontSizeXs: "12px",
+        fontSizeSm: "14px",
+        fontSizeMd: "16px",
+        fontSizeLg: "18px",
+        fontSizeXl: "20px",
+        fontSize2xl: "24px",
+        fontSize3xl: "30px",
+        fontWeightNormal: "400",
+        fontWeightMedium: "500",
+        fontWeightSemibold: "600",
+        fontWeightBold: "700",
+        lineHeightTight: "1.25",
+        lineHeightNormal: "1.5",
+        lineHeightRelaxed: "1.75",
+    },
+    spacing: {
+        xs: "4px",
+        sm: "8px",
+        md: "12px",
+        lg: "16px",
+        xl: "20px",
+        "2xl": "24px",
+        "3xl": "32px",
+        "4xl": "40px",
+    },
+    shadows: {
+        none: "none",
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        lg: "0 8px 24px rgba(16, 24, 40, 0.08)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    },
+    radii: {
+        none: "0",
+        sm: "4px",
+        md: "8px",
+        lg: "12px",
+        xl: "16px",
+        full: "9999px",
+    },
+    transitions: {
+        fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+        normal: "200ms cubic-bezier(0.4, 0, 0.2, 1)",
+        slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
+    },
+};
+export const modernTheme = {
+    name: "modern",
+    colors: {
+        primary: "#1e3a5f",
+        primaryHover: "#2c4a6f",
+        primaryActive: "#152942",
+        secondary: "#ff6b35",
+        secondaryHover: "#ff5722",
+        accent: "#3b82f6",
+        accentHover: "#2563eb",
+        background: "#ffffff",
+        backgroundSecondary: "#f8fafc",
+        backgroundTertiary: "#f1f5f9",
+        surface: "#ffffff",
+        surfaceHover: "#f8fafc",
+        border: "#e2e8f0",
+        borderHover: "#cbd5e1",
+        borderFocus: "#3b82f6",
+        text: "#1e293b",
+        textSecondary: "#64748b",
+        textTertiary: "#94a3b8",
+        textDisabled: "#cbd5e1",
+        textOnPrimary: "#ffffff",
+        textOnSecondary: "#ffffff",
+        success: "#10b981",
+        successBackground: "#ecfdf5",
+        successBorder: "#6ee7b7",
+        error: "#ef4444",
+        errorBackground: "#fef2f2",
+        errorBorder: "#fca5a5",
+        warning: "#f59e0b",
+        warningBackground: "#fffbeb",
+        warningBorder: "#fcd34d",
+        info: "#0ea5e9",
+        infoBackground: "#e0f2fe",
+        infoBorder: "#7dd3fc",
+    },
+    typography: {
+        fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        fontFamilyHeading: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        fontSizeXs: "12px",
+        fontSizeSm: "14px",
+        fontSizeMd: "16px",
+        fontSizeLg: "18px",
+        fontSizeXl: "20px",
+        fontSize2xl: "24px",
+        fontSize3xl: "30px",
+        fontWeightNormal: "400",
+        fontWeightMedium: "500",
+        fontWeightSemibold: "600",
+        fontWeightBold: "700",
+        lineHeightTight: "1.25",
+        lineHeightNormal: "1.5",
+        lineHeightRelaxed: "1.75",
+    },
+    spacing: {
+        xs: "4px",
+        sm: "8px",
+        md: "12px",
+        lg: "16px",
+        xl: "20px",
+        "2xl": "24px",
+        "3xl": "32px",
+        "4xl": "40px",
+    },
+    shadows: {
+        none: "none",
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        lg: "0 8px 24px rgba(30, 58, 95, 0.12)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    },
+    radii: {
+        none: "0",
+        sm: "4px",
+        md: "8px",
+        lg: "12px",
+        xl: "16px",
+        full: "9999px",
+    },
+    transitions: {
+        fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+        normal: "200ms cubic-bezier(0.4, 0, 0.2, 1)",
+        slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
+    },
+};
+export const themes = {
+    default: defaultTheme,
+    modern: modernTheme,
+};