medos-sdk 1.0.2 → 1.1.0

package/dist/components/theme-styles.js

@@ -0,0 +1,319 @@
+export function getContainerStyles(theme, prefix = "medos") {
+    return {
+        container: {
+            display: "flex",
+            justifyContent: "center",
+            padding: theme.spacing.xl,
+            fontFamily: theme.typography.fontFamily,
+            background: theme.colors.background,
+        },
+        card: {
+            width: "100%",
+            maxWidth: 720,
+            background: theme.colors.surface,
+            borderRadius: theme.radii.lg,
+            boxShadow: theme.shadows.lg,
+            padding: theme.spacing["2xl"],
+            boxSizing: "border-box",
+        },
+        header: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: theme.spacing.lg,
+        },
+        title: {
+            marginLeft: 10,
+            fontSize: theme.typography.fontSizeXl,
+            fontWeight: theme.typography.fontWeightSemibold,
+            color: theme.colors.text,
+        },
+        section: {
+            marginTop: theme.spacing.md,
+        },
+        errorMessage: {
+            marginBottom: theme.spacing.md,
+            color: theme.colors.error,
+            fontWeight: theme.typography.fontWeightSemibold,
+        },
+        actions: {
+            display: "flex",
+            gap: theme.spacing.sm,
+            marginTop: theme.spacing.lg,
+            justifyContent: "flex-end",
+        },
+    };
+}
+export function getButtonStyles(theme, prefix = "medos") {
+    return {
+        primary: {
+            background: theme.colors.secondary,
+            color: theme.colors.textOnSecondary,
+            border: "none",
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            borderRadius: theme.radii.md,
+            cursor: "pointer",
+            fontWeight: theme.typography.fontWeightSemibold,
+            fontSize: theme.typography.fontSizeSm,
+            transition: theme.transitions.normal,
+        },
+        primaryHover: {
+            background: theme.colors.secondaryHover,
+        },
+        secondary: {
+            background: theme.colors.surface,
+            color: theme.colors.primary,
+            border: `1px solid ${theme.colors.primary}`,
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            borderRadius: theme.radii.md,
+            cursor: "pointer",
+            fontSize: theme.typography.fontSizeSm,
+            transition: theme.transitions.normal,
+        },
+        secondaryHover: {
+            background: theme.colors.surfaceHover,
+        },
+    };
+}
+export function getPhoneVerifyStyles(theme, prefix = "medos") {
+    return {
+        container: {
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.radii.lg,
+            overflow: "hidden",
+            backgroundColor: theme.colors.surface,
+        },
+        header: {
+            padding: "20px 24px 10px 24px",
+        },
+        title: { fontSize: 20, fontWeight: 600, margin: 0 },
+        content: {
+            padding: theme.spacing["2xl"],
+        },
+        label: {
+            display: "block",
+            fontSize: theme.typography.fontSizeSm,
+            fontWeight: theme.typography.fontWeightMedium,
+            color: theme.colors.text,
+            marginBottom: theme.spacing.sm,
+        },
+        phoneInputContainer: {
+            display: "flex",
+            gap: theme.spacing.sm,
+        },
+        phoneInput: {
+            flex: 1,
+            width: "100%",
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            borderRadius: theme.radii.md,
+            border: `1px solid ${theme.colors.border}`,
+            fontSize: theme.typography.fontSizeSm,
+            outline: "none",
+            color: theme.colors.text,
+            boxSizing: "border-box",
+            transition: theme.transitions.normal,
+        },
+        phoneInputFocus: {
+            borderColor: theme.colors.borderFocus,
+            outline: `2px solid ${theme.colors.borderFocus}20`,
+        },
+        phoneDisplay: {
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            background: theme.colors.backgroundSecondary,
+            borderRadius: theme.radii.md,
+            fontSize: theme.typography.fontSizeSm,
+            color: theme.colors.textSecondary,
+            fontWeight: theme.typography.fontWeightMedium,
+        },
+        otpInput: {
+            width: "100%",
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            border: `1px solid ${theme.colors.borderHover}`,
+            borderRadius: theme.radii.md,
+            fontSize: theme.typography.fontSizeSm,
+            outline: "none",
+            color: theme.colors.text,
+            boxSizing: "border-box",
+            transition: theme.transitions.normal,
+        },
+        otpInputFocus: {
+            borderColor: theme.colors.borderFocus,
+            outline: `2px solid ${theme.colors.borderFocus}20`,
+        },
+        otpHint: {
+            marginTop: theme.spacing.sm,
+            fontSize: theme.typography.fontSizeXs,
+            color: theme.colors.textTertiary,
+        },
+        successMessage: {
+            marginTop: theme.spacing.xl,
+            padding: theme.spacing.lg,
+            borderRadius: theme.radii.md,
+            backgroundColor: theme.colors.successBackground,
+            border: `1px solid ${theme.colors.success}`,
+            display: "flex",
+            alignItems: "center",
+            gap: theme.spacing.md,
+        },
+        successIcon: {
+            fontSize: theme.typography.fontSize2xl,
+            color: theme.colors.success,
+        },
+        successTitle: {
+            fontSize: theme.typography.fontSizeSm,
+            fontWeight: theme.typography.fontWeightSemibold,
+            color: theme.colors.success,
+        },
+        successSubtitle: {
+            fontSize: theme.typography.fontSizeXs,
+            color: theme.colors.textTertiary,
+            marginTop: 2,
+        },
+        footer: {
+            padding: `${theme.spacing.lg} ${theme.spacing["2xl"]}`,
+            borderTop: `1px solid ${theme.colors.border}`,
+            backgroundColor: theme.colors.surface,
+            display: "flex",
+            gap: theme.spacing.md,
+            justifyContent: "flex-end",
+        },
+    };
+}
+export function getPatientDetailsStyles(theme, prefix = "medos") {
+    return {
+        sectionCard: {
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.radii.lg,
+            marginBottom: theme.spacing["2xl"],
+        },
+        sectionHeader: {
+            backgroundColor: theme.colors.primary,
+            padding: `${theme.spacing.lg} ${theme.spacing.xl}`,
+            display: "flex",
+            alignItems: "center",
+            gap: theme.spacing.md,
+            borderBottom: `1px solid ${theme.colors.border}`,
+            color: theme.colors.textOnPrimary,
+        },
+        sectionTitle: {
+            fontSize: theme.typography.fontSizeLg,
+            fontWeight: theme.typography.fontWeightSemibold,
+            margin: 0,
+            color: theme.colors.textOnPrimary,
+        },
+        sectionBody: {
+            padding: theme.spacing["2xl"],
+        },
+        gridRow: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: theme.spacing.xl,
+            marginTop: theme.spacing.xl,
+        },
+        label: {
+            display: "block",
+            fontSize: theme.typography.fontSizeXs,
+            marginBottom: theme.spacing.xs,
+            color: theme.colors.textSecondary,
+            fontWeight: theme.typography.fontWeightMedium,
+        },
+        input: {
+            width: "100%",
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            borderRadius: theme.radii.md,
+            border: `1px solid ${theme.colors.border}`,
+            outline: "none",
+            fontSize: theme.typography.fontSizeSm,
+            boxSizing: "border-box",
+            color: theme.colors.text,
+            transition: theme.transitions.normal,
+        },
+        inputFocus: {
+            borderColor: theme.colors.borderFocus,
+            outline: `2px solid ${theme.colors.borderFocus}20`,
+        },
+        phoneDisplay: {
+            display: "flex",
+            gap: theme.spacing.sm,
+        },
+        phoneCode: {
+            width: "100px",
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            borderRadius: theme.radii.md,
+            border: `1px solid ${theme.colors.border}`,
+            backgroundColor: theme.colors.backgroundSecondary,
+            fontSize: theme.typography.fontSizeSm,
+            boxSizing: "border-box",
+            color: theme.colors.textSecondary,
+        },
+        phoneNumber: {
+            flex: 1,
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            borderRadius: theme.radii.md,
+            border: `1px solid ${theme.colors.border}`,
+            backgroundColor: theme.colors.backgroundSecondary,
+            fontSize: theme.typography.fontSizeSm,
+            boxSizing: "border-box",
+            color: theme.colors.textSecondary,
+        },
+    };
+}
+export function getSuccessStyles(theme, prefix = "medos") {
+    return {
+        container: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+        },
+        header: {
+            marginTop: `-${theme.spacing.lg}`,
+            alignItems: "center",
+            textAlign: "center",
+            color: theme.colors.success,
+            fontWeight: theme.typography.fontWeightBold,
+            fontSize: theme.typography.fontSizeLg,
+            marginBottom: theme.spacing.xl,
+        },
+        iconContainer: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: `${theme.spacing.md} 0`,
+        },
+        detailsContainer: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: theme.spacing.md,
+            textAlign: "center",
+            color: theme.colors.success,
+        },
+        detailsTitle: {
+            fontWeight: theme.typography.fontWeightSemibold,
+            fontSize: theme.typography.fontSizeMd,
+        },
+        detailsList: {
+            display: "flex",
+            flexDirection: "column",
+            gap: theme.spacing.xs,
+            fontSize: theme.typography.fontSizeSm,
+            width: "100%",
+            maxWidth: "28rem",
+            textAlign: "center",
+        },
+        confirmationNote: {
+            marginTop: theme.spacing.sm,
+            fontSize: theme.typography.fontSizeXs,
+            color: theme.colors.textTertiary,
+        },
+        actionContainer: {
+            marginTop: theme.spacing["2xl"],
+        },
+    };
+}
+import { defaultTheme } from "../core/theme/themes";
+export const CONTAINER_STYLES = getContainerStyles(defaultTheme);
+export const BUTTON_STYLES = getButtonStyles(defaultTheme);
+export const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(defaultTheme);
+export const PATIENT_DETAILS_STYLES = getPatientDetailsStyles(defaultTheme);
+export const SUCCESS_STYLES = getSuccessStyles(defaultTheme);

package/dist/components/types.d.ts

@@ -0,0 +1,181 @@
+import { Doctor, Slot, AddressItem } from "../services/AppointmentService";
+export type AppointmentCalenderProps = {
+    onError?: (err: Error) => void;
+};
+export type PhoneVerificationStepProps = {
+    state: AppointmentState;
+    dispatch: React.Dispatch<AppointmentAction>;
+    onSendOtp: () => Promise<void>;
+    onVerifyOtp: () => Promise<void>;
+    onBack: () => void;
+    onContinue: () => void;
+};
+export type PatientDetailsStepProps = {
+    state: AppointmentState;
+    dispatch: React.Dispatch<AppointmentAction>;
+    onBack: () => void;
+    onSubmit: () => Promise<void>;
+};
+export type SuccessStepProps = {
+    onReset: () => void;
+};
+export type PhoneInputSectionProps = {
+    countryCode: string;
+    patientPhone: string;
+    onCountryCodeChange: (code: string) => void;
+    onPhoneChange: (phone: string) => void;
+};
+export type OtpInputSectionProps = {
+    countryCode: string;
+    patientPhone: string;
+    otpCode: string;
+    otpVerified: boolean;
+    onOtpChange: (code: string) => void;
+};
+export type PatientInfoSectionProps = {
+    state: AppointmentState;
+    dispatch: React.Dispatch<AppointmentAction>;
+};
+export type AddressInfoSectionProps = {
+    state: AppointmentState;
+    dispatch: React.Dispatch<AppointmentAction>;
+};
+export interface AppointmentState {
+    step: number;
+    loading: boolean;
+    error: string | null;
+    workspaceId: number | null;
+    addresses: AddressItem[];
+    addressDoctorsMap: Record<number, Doctor[]>;
+    selectedAddress: number | null;
+    selectedDoctor: number | null;
+    selectedDate: Date;
+    slots: Slot[];
+    selectedSlot: Slot | null;
+    consultationMode: "ONLINE" | "OFFLINE";
+    consultationCharge: string;
+    patientName: string;
+    patientAge: string;
+    patientEmail: string;
+    patientGender: string;
+    bloodGroup: string;
+    patientAddress: string;
+    patientCity: string;
+    patientState: string;
+    patientCountry: string;
+    patientZipcode: string;
+    patientLandmark: string;
+    countryCode: string;
+    patientPhone: string;
+    otpCode: string;
+    otpSent: boolean;
+    otpVerified: boolean;
+    otpSending: boolean;
+    otpVerifying: boolean;
+}
+export type AppointmentAction = {
+    type: "SET_STEP";
+    payload: number;
+} | {
+    type: "SET_LOADING";
+    payload: boolean;
+} | {
+    type: "SET_ERROR";
+    payload: string | null;
+} | {
+    type: "SET_WORKSPACE";
+    payload: {
+        id: number;
+        addresses: AddressItem[];
+    };
+} | {
+    type: "SET_SELECTED_ADDRESS";
+    payload: number | null;
+} | {
+    type: "SET_SELECTED_DOCTOR";
+    payload: number | null;
+} | {
+    type: "SET_SELECTED_DATE";
+    payload: Date;
+} | {
+    type: "SET_SLOTS";
+    payload: Slot[];
+} | {
+    type: "SET_SELECTED_SLOT";
+    payload: Slot | null;
+} | {
+    type: "SET_CONSULTATION_MODE";
+    payload: "ONLINE" | "OFFLINE";
+} | {
+    type: "SET_CONSULTATION_CHARGE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_NAME";
+    payload: string;
+} | {
+    type: "SET_PATIENT_AGE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_EMAIL";
+    payload: string;
+} | {
+    type: "SET_PATIENT_GENDER";
+    payload: string;
+} | {
+    type: "SET_BLOOD_GROUP";
+    payload: string;
+} | {
+    type: "SET_PATIENT_ADDRESS";
+    payload: string;
+} | {
+    type: "SET_PATIENT_CITY";
+    payload: string;
+} | {
+    type: "SET_PATIENT_STATE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_COUNTRY";
+    payload: string;
+} | {
+    type: "SET_PATIENT_ZIPCODE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_LANDMARK";
+    payload: string;
+} | {
+    type: "SET_COUNTRY_CODE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_PHONE";
+    payload: string;
+} | {
+    type: "SET_OTP_CODE";
+    payload: string;
+} | {
+    type: "SET_OTP_SENT";
+    payload: boolean;
+} | {
+    type: "SET_OTP_VERIFIED";
+    payload: boolean;
+} | {
+    type: "SET_OTP_SENDING";
+    payload: boolean;
+} | {
+    type: "SET_OTP_VERIFYING";
+    payload: boolean;
+} | {
+    type: "RESET_FORM";
+};
+export declare const COUNTRY_CODES: {
+    code: string;
+    label: string;
+}[];
+export declare const GENDER_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const BLOOD_GROUP_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const INITIAL_STATE: AppointmentState;

package/dist/components/types.js

@@ -0,0 +1,55 @@
+export const COUNTRY_CODES = [
+    { code: "+91", label: "🇮🇳 +91" },
+    { code: "+1", label: "🇺🇸 +1" },
+    { code: "+44", label: "🇬🇧 +44" },
+    { code: "+86", label: "🇨🇳 +86" },
+    { code: "+81", label: "🇯🇵 +81" },
+];
+export const GENDER_OPTIONS = [
+    { value: "MALE", label: "Male" },
+    { value: "FEMALE", label: "Female" },
+    { value: "OTHER", label: "Other" },
+];
+export const BLOOD_GROUP_OPTIONS = [
+    { value: "A+", label: "A+" },
+    { value: "A-", label: "A-" },
+    { value: "B+", label: "B+" },
+    { value: "B-", label: "B-" },
+    { value: "AB+", label: "AB+" },
+    { value: "AB-", label: "AB-" },
+    { value: "O+", label: "O+" },
+    { value: "O-", label: "O-" },
+];
+export const INITIAL_STATE = {
+    step: 0,
+    loading: false,
+    error: null,
+    workspaceId: null,
+    addresses: [],
+    addressDoctorsMap: {},
+    selectedAddress: null,
+    selectedDoctor: null,
+    selectedDate: new Date(),
+    slots: [],
+    selectedSlot: null,
+    consultationMode: "OFFLINE",
+    consultationCharge: "",
+    patientName: "",
+    patientAge: "",
+    patientEmail: "",
+    patientGender: "",
+    bloodGroup: "",
+    patientAddress: "",
+    patientCity: "",
+    patientState: "",
+    patientCountry: "",
+    patientZipcode: "",
+    patientLandmark: "",
+    countryCode: "+91",
+    patientPhone: "",
+    otpCode: "",
+    otpSent: false,
+    otpVerified: false,
+    otpSending: false,
+    otpVerifying: false,
+};

package/dist/components/ui/select.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    children: React.ReactNode;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement> {
+    children: React.ReactNode;
+}
+declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLOptionElement>>;
+export { Select, SelectOption };

package/dist/components/ui/select.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const Select = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("select", { ref: ref, className: className, style: {
+            width: "100%",
+            padding: "8px 12px",
+            borderRadius: "6px",
+            border: "1px solid var(--medos-border-color, #e6e9ef)",
+            fontSize: "14px",
+            cursor: "pointer",
+            backgroundColor: "#fff",
+            fontFamily: "inherit",
+            ...props.style,
+        }, ...props, children: children }));
+});
+Select.displayName = "Select";
+const SelectOption = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("option", { ref: ref, className: className, ...props, children: children }));
+});
+SelectOption.displayName = "SelectOption";
+export { Select, SelectOption };

package/dist/components/uiComponents/SelectDropdown.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+interface SelectProps {
+    children: React.ReactNode;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    defaultValue?: string;
+    disabled?: boolean;
+}
+interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    className?: string;
+    error?: boolean;
+}
+interface SelectValueProps {
+    placeholder?: string;
+}
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    value: string;
+    className?: string;
+    disabled?: boolean;
+}
+interface BaseComponentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Select: React.FC<SelectProps>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectValue: React.FC<SelectValueProps>;
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectGroup: React.FC<BaseComponentProps>;
+declare const SelectLabel: React.FC<BaseComponentProps>;
+declare const SelectSeparator: React.FC<{
+    className?: string;
+}>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, };