@ews-admin/global-design-system 1.1.1 → 1.1.2

package/dist/index.js

@@ -797,6 +797,95 @@ const Logo = ({ size = "md", showTagline = true, iconOnly = false, variant = "no
     return (jsxRuntime.jsx("div", { className: cn("flex items-center", sizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: jsxRuntime.jsx("img", { src: logoSrc, alt: "MEDECINE 360 Logo", className: "h-full w-auto object-contain" }) }));
 };
 
+const PROMED_THEME = {
+    name: "PROMED",
+    colors: {
+        primary: "#21596C",
+        secondary: "#3BA1A1",
+        primaryHover: "#1a4756",
+        secondaryHover: "#308181",
+        primaryLight: "#c0d0d4",
+        success: "#059669",
+        successHover: "#047857",
+        warning: "#d97706",
+        warningHover: "#b45309",
+        error: "#dc2626",
+        errorHover: "#b91c1c",
+    },
+};
+const MED_THEME = {
+    name: "MED",
+    colors: {
+        primary: "#3BA1A1", // Teal for patients (calming, trustworthy)
+        secondary: "#6B73FF", // Soft purple-blue (suggested secondary for MED)
+        primaryHover: "#308181",
+        secondaryHover: "#5a61e6",
+        primaryLight: "#a8d5d5",
+        success: "#059669",
+        successHover: "#047857",
+        warning: "#d97706",
+        warningHover: "#b45309",
+        error: "#dc2626",
+        errorHover: "#b91c1c",
+    },
+};
+const THEMES = {
+    PROMED: PROMED_THEME,
+    MED: MED_THEME,
+};
+
+const ThemeContext = React.createContext(undefined);
+const ThemeProvider = ({ children, defaultTheme = "PROMED", }) => {
+    const [theme, setTheme] = React.useState(defaultTheme);
+    const [themeConfig, setThemeConfig] = React.useState(THEMES[defaultTheme]);
+    // Update theme config when theme changes
+    React.useEffect(() => {
+        setThemeConfig(THEMES[theme]);
+        // Update CSS custom properties
+        const root = document.documentElement;
+        const colors = THEMES[theme].colors;
+        root.style.setProperty("--ews-primary", colors.primary);
+        root.style.setProperty("--ews-primary-hover", colors.primaryHover);
+        root.style.setProperty("--ews-primary-light", colors.primaryLight);
+        root.style.setProperty("--ews-secondary", colors.secondary);
+        root.style.setProperty("--ews-secondary-hover", colors.secondaryHover);
+        root.style.setProperty("--ews-success", colors.success);
+        root.style.setProperty("--ews-success-hover", colors.successHover);
+        root.style.setProperty("--ews-warning", colors.warning);
+        root.style.setProperty("--ews-warning-hover", colors.warningHover);
+        root.style.setProperty("--ews-error", colors.error);
+        root.style.setProperty("--ews-error-hover", colors.errorHover);
+    }, [theme]);
+    const handleSetTheme = (newTheme) => {
+        setTheme(newTheme);
+    };
+    const value = {
+        theme,
+        setTheme: handleSetTheme,
+        themeConfig,
+    };
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: value, children: children }));
+};
+const useTheme = () => {
+    const context = React.useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+};
+
+const ThemeToggle = ({ className }) => {
+    const { theme, setTheme } = useTheme();
+    const handleThemeChange = (newTheme) => {
+        setTheme(newTheme);
+    };
+    return (jsxRuntime.jsxs("div", { className: `flex items-center space-x-2 ${className || ""}`, children: [jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700", children: "Theme:" }), jsxRuntime.jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [jsxRuntime.jsx("button", { onClick: () => handleThemeChange("PROMED"), className: `px-3 py-1 text-xs font-medium rounded-md transition-colors ${theme === "PROMED"
+                            ? "bg-ews-primary text-white"
+                            : "text-gray-600 hover:text-gray-900"}`, children: "PROMED" }), jsxRuntime.jsx("button", { onClick: () => handleThemeChange("MED"), className: `px-3 py-1 text-xs font-medium rounded-md transition-colors ${theme === "MED"
+                            ? "bg-ews-primary text-white"
+                            : "text-gray-600 hover:text-gray-900"}`, children: "MED" })] })] }));
+};
+
 const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, }) => {
     const [specialties, setSpecialties] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -867,6 +956,8 @@ exports.MultiSearchAutocomplete = MultiSearchAutocomplete;
 exports.Search = Search;
 exports.SearchAutocomplete = SearchAutocomplete;
 exports.SpecialtySearchAutocomplete = SpecialtySearchAutocomplete;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeToggle = ThemeToggle;
 exports.cn = cn;
 exports.debounce = debounce;
 exports.formatCurrency = formatCurrency;
@@ -874,4 +965,5 @@ exports.formatDate = formatDate;
 exports.generateId = generateId;
 exports.useDebounce = useDebounce;
 exports.useDebouncedCallback = useDebouncedCallback;
+exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map