@ews-admin/global-design-system 1.1.10 → 1.1.12

package/dist/utils/index.d.ts

@@ -36,4 +36,17 @@ export declare function debounce<T extends (...args: any[]) => any>(func: T, wai
  * @returns Unique ID string
  */
 export declare function generateId(prefix?: string): string;
+/**
+ * Utility function to format numeric input by removing non-digit characters
+ * @param value - String value to format
+ * @returns String with only numeric characters
+ */
+export declare const formatNumeric: (value: string) => string;
+/**
+ * Utility function to validate phone numbers
+ * Validates phone numbers with 1-15 digits, starting with a non-zero digit
+ * @param value - Phone number string to validate
+ * @returns Boolean indicating if the phone number is valid
+ */
+export declare function isValidPhoneNumber(value: string): boolean;
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAIzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "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/index.ts

@@ -42,7 +42,15 @@ export {
 export type { IconProps, SimpleIconProps } from "./icons";
 
 // Utils
-export { cn, debounce, formatCurrency, formatDate, generateId } from "./utils";
+export {
+  cn,
+  debounce,
+  formatCurrency,
+  formatDate,
+  formatNumeric,
+  generateId,
+  isValidPhoneNumber,
+} from "./utils";
 
 // Hooks
 export { useDebounce, useDebouncedCallback, useSelectField } from "./hooks";

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/src/utils/index.ts

@@ -71,3 +71,24 @@ export function debounce<T extends (...args: any[]) => any>(
 export function generateId(prefix = "ews"): string {
   return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
 }
+
+/**
+ * Utility function to format numeric input by removing non-digit characters
+ * @param value - String value to format
+ * @returns String with only numeric characters
+ */
+export const formatNumeric = (value: string): string => {
+  return value.replace(/\D/g, "");
+};
+
+/**
+ * Utility function to validate phone numbers
+ * Validates phone numbers with 1-15 digits, starting with a non-zero digit
+ * @param value - Phone number string to validate
+ * @returns Boolean indicating if the phone number is valid
+ */
+export function isValidPhoneNumber(value: string): boolean {
+  const trimmedValue = value.trim();
+  const phoneRegex = /^[0-9]\d{1,14}$/;
+  return phoneRegex.test(trimmedValue);
+}