opus-toolkit-components 0.3.7 → 0.3.9

package/lib/{main.6a096fe22842caaa5fe4.js → main.55da4336968183da1c19.js}

@@ -788,7 +788,7 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     // Add animation class when focused
     required = false // Required field indicator
   } = _ref;
-  const inputClasses = `${className} flex items-center rounded-md bg-white border ${isValid ? 'border-greyLight500' : 'border-utilRed1000'} p-2 text-md font-normal text-gray-900 focus:outline-none focus:border-blue-500 focus:ring-0`;
+  const inputClasses = `${className} flex items-center rounded-md bg-white border ${isValid ? 'border-greyLight500' : 'border-utilRed1000'} p-2 text-md font-normal text-gray-900`;
   const iconClasses = `h-5 w-5 ${isAnimated ? 'transition-transform duration-200 group-focus-within:scale-125' : ''} text-gray-400`;
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
@@ -804,7 +804,7 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     className: iconClasses
   })), /*#__PURE__*/external_react_default().createElement("input", {
     ref: ref,
-    className: `w-full ${Icon ? iconPosition === 'left' ? 'pl-10' : 'pr-10' : ''} bg-transparent border-none focus:ring-0`,
+    className: `w-full ${Icon ? iconPosition === 'left' ? 'pl-10' : 'pr-10' : ''} bg-transparent border-none focus:ring-0 focus:outline-none`,
     type: type,
     name: name,
     placeholder: placeholder,
@@ -832,7 +832,9 @@ function DatePicker(_ref) {
     // Add name prop for form identification
     onChange,
     // Add onChange prop for passing event to parent
-    value
+    value,
+    className = '',
+    required = false // Add the required prop
   } = _ref;
   const [selectedDate, setSelectedDate] = (0,external_react_.useState)(value || initialDate);
   (0,external_react_.useEffect)(() => {
@@ -848,21 +850,24 @@ function DatePicker(_ref) {
       onChange(e); // Pass the full event object to the parent component
     }
   };
-  const inputClasses = `rounded-md bg-white border px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-slate-400' : 'border-rose-500'}`;
+  const inputClasses = `${className} flex items-center rounded-md bg-white border ${isValid ? 'border-greyLight500' : 'border-utilRed1000'} p-2 text-md font-normal text-gray-900`;
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
   }, /*#__PURE__*/external_react_default().createElement("label", {
     htmlFor: "date"
-  }, label), /*#__PURE__*/external_react_default().createElement("input", {
+  }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
+    className: "text-utilRed1000 ml-1"
+  }, "*")), /*#__PURE__*/external_react_default().createElement("input", {
     type: "date",
     id: "date",
     name: name // Pass the name to identify the input in the event
     ,
     value: selectedDate,
     onChange: handleDateChange,
-    className: inputClasses
+    className: inputClasses,
+    required: required // Apply the required attribute to the input
   }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-rose-500 text-sm"
+    className: "text-utilRed1000 text-sm"
   }, errorMessage));
 }
 ;// ./src/components/Forms/Radios/RadioButton.js
@@ -9175,4 +9180,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.6a096fe22842caaa5fe4.js.map
+//# sourceMappingURL=main.55da4336968183da1c19.js.map