medos-sdk 1.1.11 → 1.1.12

package/dist/components/shared/ui/Calendar.d.ts

@@ -0,0 +1,5 @@
+export declare const CustomCalendarWithDateSelector: ({ selectedDate, onSelect, pastDisabled, }: {
+    selectedDate?: Date;
+    onSelect: (date: Date) => void;
+    pastDisabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { ChevronLeft, ChevronRight } from "../icons";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { useBreakpoint } from "../../../core/theme/responsive";
+import { MONTHS } from "../../constants";
+const getStyle = (theme, isMobile) => `
+.custom-calendar-wrapper {
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+.custom-calendar {
+  width: ${isMobile ? "320px" : "100%"};
+  min-width: ${isMobile ? "320px" : "auto"};
+  background-color: ${theme.colors?.background || "#ffffff"};
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  padding: ${isMobile ? "12px" : "16px"};
+  font-family: ${theme.typography?.fontFamily || "system-ui, -apple-system, sans-serif"};
+  box-sizing: border-box;
+}
+.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 || "#333333"};
+}
+.calendar-nav {
+  width: 20px;
+  height: 20px;
+  color: ${theme.colors?.secondary || "#007bff"}; 
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+.calendar-nav:hover {
+  background-color: ${theme.colors?.backgroundSecondary || "#f8f9fa"};
+}
+.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 || "#333333"};
+}
+.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: 8px;
+  color: ${theme.colors?.secondary || "#007bff"};
+  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 || "#007bff"};
+  color: ${theme.colors?.textOnSecondary || "#ffffff"};
+}
+.calendar-day.selected {
+  border: 1px solid ${theme.colors?.secondary || "#007bff"};
+  color: ${theme.colors?.secondary || "#007bff"};
+  background-color: transparent;
+  font-weight: 600;
+}
+.calendar-day.disabled {
+  color: ${theme.colors?.textSecondary || "#6c757d"};
+  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();
+    const breakpoint = useBreakpoint(theme);
+    const isMobile = breakpoint === "mobile";
+    useEffect(() => {
+        const styleId = "custom-calendar-style";
+        const existingStyle = document.getElementById(styleId);
+        const themeStyle = getStyle(theme, isMobile);
+        if (existingStyle) {
+            existingStyle.innerHTML = themeStyle;
+        }
+        else {
+            const s = document.createElement("style");
+            s.id = styleId;
+            s.innerHTML = themeStyle;
+            document.head.appendChild(s);
+        }
+    }, [theme, isMobile]);
+    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 = MONTHS;
+    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 (_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));
+                        })] })] }) }));
+};

package/dist/components/shared/ui/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, };

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>;