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

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, createElement, useState, useEffect, useRef, useCallback } from 'react';
+import React, { forwardRef, createElement, useState, useEffect, useRef, useCallback, createContext, useContext } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -205,11 +205,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$9 = [
+const __iconNode$b = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$9);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$b);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -219,8 +219,8 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$9);
  */
 
 
-const __iconNode$8 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$8);
+const __iconNode$a = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$a);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -230,12 +230,12 @@ const Check = createLucideIcon("check", __iconNode$8);
  */
 
 
-const __iconNode$7 = [
+const __iconNode$9 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$7);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -245,11 +245,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$8 = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$6);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$8);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -259,7 +259,7 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$7 = [
   [
     "path",
     {
@@ -277,7 +277,7 @@ const __iconNode$5 = [
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
 ];
-const EyeOff = createLucideIcon("eye-off", __iconNode$5);
+const EyeOff = createLucideIcon("eye-off", __iconNode$7);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -287,7 +287,7 @@ const EyeOff = createLucideIcon("eye-off", __iconNode$5);
  */
 
 
-const __iconNode$4 = [
+const __iconNode$6 = [
   [
     "path",
     {
@@ -297,7 +297,7 @@ const __iconNode$4 = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$4);
+const Eye = createLucideIcon("eye", __iconNode$6);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -307,11 +307,30 @@ const Eye = createLucideIcon("eye", __iconNode$4);
  */
 
 
-const __iconNode$3 = [
+const __iconNode$5 = [
+  [
+    "path",
+    {
+      d: "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5",
+      key: "mvr1a0"
+    }
+  ]
+];
+const Heart = createLucideIcon("heart", __iconNode$5);
+
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$4 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$3);
+const Search = createLucideIcon("search", __iconNode$4);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -321,14 +340,14 @@ const Search = createLucideIcon("search", __iconNode$3);
  */
 
 
-const __iconNode$2 = [
+const __iconNode$3 = [
   ["path", { d: "M11 2v2", key: "1539x4" }],
   ["path", { d: "M5 2v2", key: "1yf1q8" }],
   ["path", { d: "M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1", key: "rb5t3r" }],
   ["path", { d: "M8 15a6 6 0 0 0 12 0v-3", key: "x18d4x" }],
   ["circle", { cx: "20", cy: "10", r: "2", key: "ts1r5v" }]
 ];
-const Stethoscope = createLucideIcon("stethoscope", __iconNode$2);
+const Stethoscope = createLucideIcon("stethoscope", __iconNode$3);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -338,7 +357,7 @@ const Stethoscope = createLucideIcon("stethoscope", __iconNode$2);
  */
 
 
-const __iconNode$1 = [
+const __iconNode$2 = [
   [
     "path",
     {
@@ -349,7 +368,21 @@ const __iconNode$1 = [
   ["path", { d: "M12 9v4", key: "juzpu7" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$1);
+const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
+
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1 = [
+  ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
+  ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
+];
+const User = createLucideIcon("user", __iconNode$1);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -377,6 +410,18 @@ const Icon = React.forwardRef(({ size = "md", icon: IconComponent, className, ..
 });
 Icon.displayName = "Icon";
 
+const DoctorIcon = ({ size = 24, color = "currentColor", className = "", ...props }) => {
+    return (jsx(Stethoscope, { size: size, color: color, className: className, ...props }));
+};
+
+const PatientIcon = ({ size = 24, color = "currentColor", className = "", ...props }) => {
+    return jsx(Heart, { size: size, color: color, className: className, ...props });
+};
+
+const UserIcon = ({ size = 24, color = "currentColor", className = "", ...props }) => {
+    return jsx(User, { size: size, color: color, className: className, ...props });
+};
+
 const Input = React.forwardRef(({ className, variant = "default", size = "md", label, helperText, error, leftIcon, rightIcon, fullWidth = false, showPasswordToggle = false, id, type = "text", ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
     const hasError = Boolean(error);
@@ -795,6 +840,97 @@ const Logo = ({ size = "md", showTagline = true, iconOnly = false, variant = "no
     return (jsx("div", { className: cn("flex items-center", sizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: 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 = createContext(undefined);
+const ThemeProvider = ({ children, defaultTheme = "PROMED", }) => {
+    const [theme, setTheme] = useState(defaultTheme);
+    const [themeConfig, setThemeConfig] = useState(THEMES[defaultTheme]);
+    // Update theme config when theme changes
+    useEffect(() => {
+        setThemeConfig(THEMES[theme]);
+        // Update data-theme attribute for CSS variable switching
+        const root = document.documentElement;
+        root.setAttribute("data-theme", theme);
+        // Also update CSS custom properties for backward compatibility
+        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 (jsx(ThemeContext.Provider, { value: value, children: children }));
+};
+const useTheme = () => {
+    const context = 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 (jsxs("div", { className: `flex items-center space-x-2 ${className || ""}`, children: [jsx("span", { className: "text-sm font-medium text-gray-700", children: "Theme:" }), jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [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" }), 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] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -854,5 +990,5 @@ const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesCh
                                 : "border-gray-300"), children: isSelected && (jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }), jsxs("div", { className: "flex flex-col", children: [jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: specialty.label }), jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: specialty.code })] })] })) }), showSelectedCount && selectedSpecialties.length > 0 && (jsxs("div", { className: "flex items-center justify-between text-sm text-gray-600", children: [jsxs("span", { children: [selectedSpecialties.length, " specialty", selectedSpecialties.length !== 1 ? "ies" : "", " selected"] }), maxSelections && (jsxs("span", { className: "text-gray-400", children: [selectedSpecialties.length, "/", maxSelections] }))] }))] }));
 };
 
-export { ArrowRight, Button, Check, Icon, Input, Logo, Modal, MultiSearchAutocomplete, Search, SearchAutocomplete, SpecialtySearchAutocomplete, cn, debounce, formatCurrency, formatDate, generateId, useDebounce, useDebouncedCallback };
+export { ArrowRight, Button, Check, DoctorIcon, Icon, Input, Logo, Modal, MultiSearchAutocomplete, PatientIcon, Search, SearchAutocomplete, SpecialtySearchAutocomplete, ThemeProvider, ThemeToggle, UserIcon, cn, debounce, formatCurrency, formatDate, generateId, useDebounce, useDebouncedCallback, useTheme };
 //# sourceMappingURL=index.esm.js.map