medos-sdk 1.1.10 → 1.1.12

package/dist/components/shared/ui/SelectDropdown.js

@@ -0,0 +1,301 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDownIcon, Check } from "../icons";
+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/shared/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SelectDropdown";
+export { CustomCalendarWithDateSelector } from "./Calendar";

package/dist/components/shared/ui/index.js

@@ -0,0 +1,2 @@
+export * from "./SelectDropdown";
+export { CustomCalendarWithDateSelector } from "./Calendar";

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

@@ -0,0 +1,4 @@
+import React from "react";
+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/appointment.js

@@ -0,0 +1,220 @@
+export const PHONE_VERIFY_STYLES = {
+    container: {
+        border: "1px solid #e5e7eb",
+        borderRadius: 12,
+        overflow: "hidden",
+        backgroundColor: "#fff",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+    },
+    header: {
+        padding: "18px 24px",
+        borderBottom: "1px solid #e5e7eb",
+        backgroundColor: "#27903F",
+        color: "#fff",
+    },
+    title: {
+        margin: 0,
+        fontSize: 18,
+        fontWeight: 600,
+        color: "#fff",
+    },
+    content: { padding: "24px" },
+    label: {
+        display: "block",
+        fontSize: 14,
+        fontWeight: 500,
+        color: "#111827",
+        marginBottom: 8,
+    },
+    phoneInputContainer: { display: "flex", gap: 10 },
+    phoneInput: {
+        flex: 1,
+        padding: "10px 14px",
+        borderRadius: 8,
+        border: "1px solid #e5e7eb",
+        fontSize: 14,
+        outline: "none",
+        color: "#111827",
+        boxSizing: "border-box",
+        transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+        minHeight: 40,
+    },
+    phoneDisplay: {
+        padding: "10px 14px",
+        background: "#f9fafb",
+        borderRadius: 8,
+        fontSize: 14,
+        color: "#111827",
+        fontWeight: 500,
+        border: "1px solid #e5e7eb",
+    },
+    otpInput: {
+        width: "100%",
+        padding: "10px 14px",
+        border: "1px solid #e5e7eb",
+        borderRadius: 8,
+        fontSize: 14,
+        outline: "none",
+        color: "#111827",
+        boxSizing: "border-box",
+        transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+    },
+    otpHint: {
+        marginTop: 8,
+        fontSize: 12,
+        color: "#6b7280",
+    },
+    successMessage: {
+        marginTop: 20,
+        padding: 16,
+        borderRadius: 8,
+        backgroundColor: "#F6FBF6",
+        border: "1px solid #4E8F50",
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+    },
+    successIcon: { fontSize: 24, color: "#4E8F50" },
+    successTitle: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "#4E8F50",
+    },
+    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",
+        overflow: "hidden",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+    },
+    sectionHeader: {
+        backgroundColor: "#27903F",
+        padding: "18px 24px",
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        borderBottom: "1px solid #E5E7EB",
+        color: "#fff",
+    },
+    sectionTitle: {
+        fontSize: "18px",
+        fontWeight: 600,
+        margin: 0,
+        color: "#fff",
+    },
+    sectionBody: { padding: "24px" },
+    gridRow: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: "20px",
+        marginTop: "20px",
+    },
+    label: {
+        display: "block",
+        fontSize: 14,
+        marginBottom: 8,
+        color: "#111827",
+        fontWeight: 500,
+    },
+    input: {
+        width: "100%",
+        padding: "10px 14px",
+        borderRadius: 8,
+        border: "1px solid #e5e7eb",
+        outline: "none",
+        fontSize: 14,
+        boxSizing: "border-box",
+        transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+        minHeight: 40,
+    },
+    phoneDisplay: { display: "flex", gap: "10px" },
+    phoneCode: {
+        width: "100px",
+        padding: "10px 14px",
+        borderRadius: 8,
+        border: "1px solid #e5e7eb",
+        backgroundColor: "#F9FAFB",
+        fontSize: 14,
+        boxSizing: "border-box",
+    },
+    phoneNumber: {
+        flex: 1,
+        padding: "10px 14px",
+        borderRadius: 8,
+        border: "1px solid #e5e7eb",
+        backgroundColor: "#F9FAFB",
+        fontSize: 14,
+        boxSizing: "border-box",
+    },
+};
+export const SUCCESS_STYLES = {
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: "32px 24px",
+        textAlign: "center",
+    },
+    header: {
+        marginBottom: "24px",
+    },
+    iconContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "72px",
+        height: "72px",
+        borderRadius: "50%",
+        backgroundColor: "#ecfdf5",
+        marginBottom: "20px",
+    },
+    detailsContainer: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "12px",
+        textAlign: "center",
+    },
+    detailsTitle: {
+        fontWeight: 600,
+        fontSize: "18px",
+        color: "#4E8F50",
+        margin: 0,
+    },
+    detailsList: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        fontSize: "14px",
+        width: "100%",
+        maxWidth: "400px",
+        textAlign: "center",
+        color: "#374151",
+    },
+    confirmationNote: {
+        marginTop: "12px",
+        fontSize: "14px",
+        color: "#6B7280",
+        lineHeight: "1.5",
+    },
+    actionContainer: {
+        marginTop: "32px",
+        display: "flex",
+        justifyContent: "center",
+    },
+};

package/dist/components/styles/enquiry.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ENQUIRY_FORM_STYLES: Record<string, React.CSSProperties>;

package/dist/components/styles/enquiry.js

@@ -0,0 +1,3 @@
+export const ENQUIRY_FORM_STYLES = {
+    container: {},
+};

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

@@ -0,0 +1,2 @@
+export { getContainerStyles, getButtonStyles, getPhoneVerifyStyles, getPatientDetailsStyles, getSuccessStyles, CONTAINER_STYLES, BUTTON_STYLES, PHONE_VERIFY_STYLES, PATIENT_DETAILS_STYLES, SUCCESS_STYLES, } from "../theme-styles";
+export { getMobileStyles, getDesktopStyles, } from "../appointment-booking/appointment-modal-styles";

package/dist/components/styles/index.js

@@ -0,0 +1,2 @@
+export { getContainerStyles, getButtonStyles, getPhoneVerifyStyles, getPatientDetailsStyles, getSuccessStyles, CONTAINER_STYLES, BUTTON_STYLES, PHONE_VERIFY_STYLES, PATIENT_DETAILS_STYLES, SUCCESS_STYLES, } from "../theme-styles";
+export { getMobileStyles, getDesktopStyles, } from "../appointment-booking/appointment-modal-styles";

package/dist/components/styles/shared.d.ts

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

package/dist/components/styles/shared.js

@@ -0,0 +1,78 @@
+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 4px 12px rgba(0, 0, 0, 0.08)",
+        padding: 24,
+        boxSizing: "border-box",
+    },
+    header: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: 20,
+    },
+    title: {
+        marginLeft: 10,
+        fontSize: 20,
+        fontWeight: 600,
+        margin: 0,
+    },
+    section: { marginTop: 16 },
+    errorMessage: {
+        marginBottom: 16,
+        padding: "12px 16px",
+        borderRadius: 8,
+        backgroundColor: "#fee2e2",
+        color: "#ef4444",
+        fontWeight: 500,
+        fontSize: 14,
+        border: "1px solid rgba(239, 68, 68, 0.2)",
+    },
+    actions: {
+        display: "flex",
+        gap: 12,
+        marginTop: 24,
+        paddingTop: 20,
+        borderTop: "1px solid #e5e7eb",
+        justifyContent: "flex-end",
+    },
+};
+export const BUTTON_STYLES = {
+    primary: {
+        background: "#009b4d",
+        color: "#fff",
+        border: "none",
+        padding: "10px 20px",
+        borderRadius: 8,
+        cursor: "pointer",
+        fontWeight: 600,
+        fontSize: 14,
+        transition: "all 0.2s ease",
+        minHeight: 40,
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        lineHeight: "1.5",
+    },
+    secondary: {
+        background: "#fff",
+        color: "#111827",
+        border: "1px solid #e5e7eb",
+        padding: "10px 20px",
+        borderRadius: 8,
+        cursor: "pointer",
+        fontWeight: 600,
+        fontSize: 14,
+        transition: "all 0.2s ease",
+        minHeight: 40,
+        lineHeight: "1.5",
+    },
+};

package/dist/components/styles.d.ts

@@ -1,6 +1 @@
-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>;
+export * from "./styles";