opus-toolkit-components 0.3.5 → 0.3.7

package/lib/{main.8113c4786f718627b5f5.js → main.6a096fe22842caaa5fe4.js}

@@ -784,15 +784,19 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     // Icon component
     iconPosition = 'left',
     // Icon position: left or right
-    isAnimated = false // Add animation class when focused
+    isAnimated = false,
+    // 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'} px-4 py-2 text-md font-normal text-gray-900`;
+  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 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"
   }, /*#__PURE__*/external_react_default().createElement("label", {
-    className: "text-greyLight1000 mb-1"
-  }, label), /*#__PURE__*/external_react_default().createElement("div", {
+    className: "text-greyLight1000 mb-1 flex items-center"
+  }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
+    className: "text-utilRed1000 ml-1"
+  }, "*")), /*#__PURE__*/external_react_default().createElement("div", {
     className: `${inputClasses} relative`
   }, Icon && iconPosition === 'left' && /*#__PURE__*/external_react_default().createElement("span", {
     className: "absolute left-3 flex items-center pointer-events-none"
@@ -805,7 +809,8 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     name: name,
     placeholder: placeholder,
     onChange: onChange,
-    value: value
+    value: value,
+    required: required // Set HTML required attribute
   }), Icon && iconPosition === 'right' && /*#__PURE__*/external_react_default().createElement("span", {
     className: "absolute right-3 flex items-center pointer-events-none"
   }, /*#__PURE__*/external_react_default().createElement(Icon, {
@@ -9089,12 +9094,16 @@ function Dropdown(_ref) {
     items,
     label = 'Test Label',
     isValid = true,
+    required = false,
+    // New prop for required field
     placeholder = 'Example Placeholder',
     name,
     className = '',
     onChange,
     value,
-    Icon // Left-aligned icon
+    Icon,
+    // Left-aligned icon
+    errorMessage = 'This field is required' // Default error message for required validation
   } = _ref;
   const initialSelectedItem = items.find(item => item.value === value) || null;
   const [selectedItem, setSelectedItem] = (0,external_react_.useState)(initialSelectedItem);
@@ -9103,7 +9112,7 @@ function Dropdown(_ref) {
     const newSelectedItem = items.find(item => item.value === value) || null;
     setSelectedItem(newSelectedItem);
   }, [value, items]);
-  const inputClasses = `inline-flex w-full justify-between items-center rounded-md bg-white text-md font-normal border px-4 py-2 text-greyLight700 ${isValid ? 'border-greyLight500' : 'border-utilRed'} ${className}`;
+  const inputClasses = `inline-flex w-full justify-between items-center rounded-md bg-white text-md font-normal border p-2 text-greyLight700 ${isValid ? 'border-greyLight500' : 'border-utilRed'} ${className}`;
   const handleSelect = item => {
     setSelectedItem(item);
     const event = {
@@ -9118,7 +9127,11 @@ function Dropdown(_ref) {
     as: "div",
     className: "relative inline-block text-left",
     name: name
-  }, /*#__PURE__*/external_react_default().createElement("label", null, label), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(It, {
+  }, /*#__PURE__*/external_react_default().createElement("label", {
+    className: "flex items-center"
+  }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
+    className: "ml-1 text-utilRed"
+  }, "*"), " "), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(It, {
     className: inputClasses,
     onClick: () => setIsOpen(prev => !prev)
   }, /*#__PURE__*/external_react_default().createElement("div", {
@@ -9147,7 +9160,7 @@ function Dropdown(_ref) {
     }, item.label);
   })))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-utilRed text-sm"
-  }, "Please select a valid option"));
+  }, errorMessage));
 }
 ;// ./src/index.js
 
@@ -9162,4 +9175,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.8113c4786f718627b5f5.js.map
+//# sourceMappingURL=main.6a096fe22842caaa5fe4.js.map