@ews-admin/global-design-system 1.1.9 → 1.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/Input/Input.tsx

@@ -99,6 +99,62 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       lg: "h-6 w-6",
     };
 
+    const isCheckbox = type === "checkbox";
+
+    // For checkboxes, render with or without label based on label prop
+    if (isCheckbox) {
+      if (label) {
+        // Render checkbox with built-in label
+        return (
+          <div className={cn("space-y-1", fullWidth ? "w-full" : "w-auto")}>
+            <div className="flex items-start space-x-3">
+              <input
+                id={inputId}
+                type={actualType}
+                className={cn(
+                  "mt-0.5", // Slight top margin to align with first line of text
+                  className
+                )}
+                ref={ref}
+                {...props}
+              />
+              <div className="flex-1">
+                <label
+                  htmlFor={inputId}
+                  className="block text-sm font-medium cursor-pointer text-ews-gray-700"
+                >
+                  {label}
+                  {required && <span className="ml-1 text-ews-error">*</span>}
+                </label>
+                {(error || helperText) && (
+                  <p
+                    className={cn(
+                      "mt-1 text-sm",
+                      error ? "text-ews-error" : "text-ews-gray-500"
+                    )}
+                  >
+                    {error || helperText}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      } else {
+        // Render just the checkbox for external label usage
+        return (
+          <input
+            id={inputId}
+            type={actualType}
+            className={cn(className)}
+            ref={ref}
+            {...props}
+          />
+        );
+      }
+    }
+
+    // Default rendering for non-checkbox inputs
     return (
       <div className={cn("space-y-1", fullWidth ? "w-full" : "w-auto")}>
         {label && (

package/src/components/MultiSearchAutocomplete/MultiSearchAutocomplete.tsx

@@ -181,7 +181,7 @@ export function MultiSearchAutocomplete<T extends SearchableEntity>({
 
   // Default render functions
   const defaultRenderSelectedItem = (entity: T) => (
-    <span className="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-ews-primary/10 text-ews-primary border border-ews-primary/20">
+    <span className="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full border bg-ews-primary/10 text-ews-primary border-ews-primary/20">
       {getPrimaryText(entity)}
       <button
         type="button"
@@ -199,8 +199,10 @@ export function MultiSearchAutocomplete<T extends SearchableEntity>({
     <div className="flex items-center space-x-3">
       <div
         className={cn(
-          "w-5 h-5 border-2 rounded flex items-center justify-center",
-          isSelected ? "bg-ews-primary border-ews-primary" : "border-gray-300"
+          "flex justify-center items-center w-5 h-5 rounded border-2",
+          isSelected
+            ? "bg-ews-primary border-ews-primary"
+            : "border-ews-gray-300"
         )}
       >
         {isSelected && <Check className="w-3 h-3 text-white" />}
@@ -259,23 +261,23 @@ export function MultiSearchAutocomplete<T extends SearchableEntity>({
 
       {/* Dropdown */}
       {isOpen && !disabled && (
-        <div className="absolute z-10 mt-1 w-full max-h-60 bg-white rounded-lg border border-gray-200 shadow-lg overflow-auto">
+        <div className="overflow-auto absolute z-10 mt-1 w-full max-h-60 bg-white rounded-lg border border-gray-200 shadow-lg">
           {loading || isSearching ? (
-            <div className="px-4 py-3 text-sm text-gray-500 flex items-center">
-              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-ews-primary mr-2"></div>
+            <div className="flex items-center px-4 py-3 text-sm text-gray-500">
+              <div className="mr-2 w-4 h-4 rounded-full border-b-2 animate-spin border-ews-primary"></div>
               {isSearching ? "Searching..." : "Loading..."}
             </div>
           ) : searchError ? (
             <div className="px-4 py-3 text-sm text-red-600">
               <div className="flex items-center">
-                <X className="w-4 h-4 mr-2" />
+                <X className="mr-2 w-4 h-4" />
                 Error: {searchError}
               </div>
             </div>
           ) : error ? (
             <div className="px-4 py-3 text-sm text-red-600">
               <div className="flex items-center">
-                <X className="w-4 h-4 mr-2" />
+                <X className="mr-2 w-4 h-4" />
                 {error}
               </div>
             </div>
@@ -298,10 +300,10 @@ export function MultiSearchAutocomplete<T extends SearchableEntity>({
                     type="button"
                     onClick={() => handleItemToggle(item)}
                     className={cn(
-                      "w-full px-4 py-3 text-left flex items-center transition-colors",
+                      "flex items-center px-4 py-3 w-full text-left transition-colors",
                       isSelected
-                        ? "bg-ews-primary/10 text-ews-primary border-l-4 border-ews-primary"
-                        : "hover:bg-ews-primary/5 text-gray-900"
+                        ? "border-l-4 bg-ews-primary/10 text-ews-primary border-ews-primary"
+                        : "text-gray-900 hover:bg-ews-primary/5"
                     )}
                   >
                     {renderListItem

package/src/components/Select/Select.tsx

@@ -375,7 +375,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
             htmlFor={selectId}
             className={cn(
               "block text-sm font-medium mb-1",
-              hasError ? "text-ews-error" : "text-ews-gray-700",
+              "text-ews-gray-700",
               disabled && "text-ews-gray-400"
             )}
           >

package/src/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.tsx

@@ -145,7 +145,7 @@ export const SpecialtySearchAutocomplete: React.FC<
                 "w-5 h-5 border-2 rounded flex items-center justify-center",
                 isSelected
                   ? "bg-ews-primary border-ews-primary"
-                  : "border-gray-300"
+                  : "border-ews-gray-300"
               )}
             >
               {isSelected && (

package/src/styles/index.css

@@ -287,4 +287,36 @@ div[tabindex]:focus {
   .hover-scale:hover {
     transform: scale(1.02);
   }
+
+  /* Custom checkbox styling for better control */
+  input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.25rem;
+    border: 2px solid var(--ews-gray-300);
+    background-color: white;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    accent-color: var(--ews-primary);
+  }
+
+  input[type="checkbox"]:hover {
+    border-color: var(--ews-primary);
+  }
+
+  input[type="checkbox"]:focus {
+    outline: none;
+    border-color: var(--ews-primary);
+    box-shadow: 0 0 0 2px var(--ews-primary);
+  }
+
+  input[type="checkbox"]:checked {
+    background-color: var(--ews-primary);
+    border-color: var(--ews-primary);
+  }
+
+  input[type="checkbox"]:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }

package/tailwind.preset.js

@@ -4,18 +4,18 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        // EWS Theme Colors - These will be available as CSS variables
-        "ews-primary": "var(--ews-primary, #21596c)",
-        "ews-primary-hover": "var(--ews-primary-hover, #1a4756)",
-        "ews-primary-light": "var(--ews-primary-light, #c0d0d4)",
-        "ews-secondary": "var(--ews-secondary, #3ba1a1)",
-        "ews-secondary-hover": "var(--ews-secondary-hover, #308181)",
-        "ews-success": "var(--ews-success, #059669)",
-        "ews-success-hover": "var(--ews-success-hover, #047857)",
-        "ews-warning": "var(--ews-warning, #d97706)",
-        "ews-warning-hover": "var(--ews-warning-hover, #b45309)",
-        "ews-error": "var(--ews-error, #dc2626)",
-        "ews-error-hover": "var(--ews-error-hover, #b91c1c)",
+        // EWS Theme Colors - These work with Tailwind opacity modifiers
+        "ews-primary": "rgb(33 89 108)",
+        "ews-primary-hover": "rgb(26 71 86)",
+        "ews-primary-light": "rgb(192 208 212)",
+        "ews-secondary": "rgb(59 161 161)",
+        "ews-secondary-hover": "rgb(48 129 129)",
+        "ews-success": "rgb(5 150 105)",
+        "ews-success-hover": "rgb(4 120 87)",
+        "ews-warning": "rgb(217 119 6)",
+        "ews-warning-hover": "rgb(180 83 9)",
+        "ews-error": "rgb(220 38 38)",
+        "ews-error-hover": "rgb(185 28 28)",
 
         // EWS Gray Scale
         "ews-gray-50": "#f8fafc",
@@ -36,9 +36,9 @@ module.exports = {
           200: "#bae6fd",
           300: "#7dd3fc",
           400: "#38bdf8",
-          500: "var(--ews-primary, #21596c)",
-          600: "var(--ews-primary-hover, #1a4756)",
-          700: "var(--ews-primary-hover, #1a4756)",
+          500: "rgb(33 89 108)",
+          600: "rgb(26 71 86)",
+          700: "rgb(26 71 86)",
           800: "#0f2d36",
           900: "#0a1f26",
         },
@@ -48,8 +48,8 @@ module.exports = {
           200: "#99f6e4",
           300: "#5eead4",
           400: "#2dd4bf",
-          500: "var(--ews-secondary, #3ba1a1)",
-          600: "var(--ews-secondary-hover, #308181)",
+          500: "rgb(59 161 161)",
+          600: "rgb(48 129 129)",
           700: "#0f766e",
           800: "#115e59",
           900: "#134e4a",
@@ -60,8 +60,8 @@ module.exports = {
           200: "#bbf7d0",
           300: "#86efac",
           400: "#4ade80",
-          500: "var(--ews-success, #059669)",
-          600: "var(--ews-success-hover, #047857)",
+          500: "rgb(5 150 105)",
+          600: "rgb(4 120 87)",
           700: "#15803d",
           800: "#166534",
           900: "#14532d",
@@ -72,8 +72,8 @@ module.exports = {
           200: "#fde68a",
           300: "#fcd34d",
           400: "#fbbf24",
-          500: "var(--ews-warning, #d97706)",
-          600: "var(--ews-warning-hover, #b45309)",
+          500: "rgb(217 119 6)",
+          600: "rgb(180 83 9)",
           700: "#b45309",
           800: "#92400e",
           900: "#78350f",
@@ -84,8 +84,8 @@ module.exports = {
           200: "#fecaca",
           300: "#fca5a5",
           400: "#f87171",
-          500: "var(--ews-error, #dc2626)",
-          600: "var(--ews-error-hover, #b91c1c)",
+          500: "rgb(220 38 38)",
+          600: "rgb(185 28 28)",
           700: "#b91c1c",
           800: "#991b1b",
           900: "#7f1d1d",