opus-toolkit-components 0.3.2 → 0.3.4

package/lib/{main.923c53023bac4e887eda.js → main.83972011c52c05c2a738.js}

@@ -588,7 +588,7 @@ const Accordion = _ref => {
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "accordion rounded-md"
   }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-item border-2 rounded-lg border-gray-200",
+    className: "accordion-item rounded-lg",
     key: index
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "accordion-header flex justify-between p-2",
@@ -779,22 +779,38 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     errorMessage = `${label} is required`,
     onChange,
     className = '',
-    value
+    value,
+    Icon,
+    // Icon component
+    iconPosition = 'left',
+    // Icon position: left or right
+    isAnimated = false // Add animation class when focused
   } = _ref;
-  const inputClasses = `${className} rounded-md bg-white border border-greyLight500 px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-greyLight500' : 'border-utilRed1000'}`;
+  const inputClasses = `${className} flex items-center rounded-md bg-white border ${isValid ? 'border-greyLight500' : 'border-utilRed1000'} px-4 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"
   }, /*#__PURE__*/external_react_default().createElement("label", {
-    className: "text-greyLight1000"
-  }, label), /*#__PURE__*/external_react_default().createElement("input", {
+    className: "text-greyLight1000 mb-1"
+  }, label), /*#__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"
+  }, /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: iconClasses
+  })), /*#__PURE__*/external_react_default().createElement("input", {
     ref: ref,
-    className: inputClasses,
+    className: `w-full ${Icon ? iconPosition === 'left' ? 'pl-10' : 'pr-10' : ''} bg-transparent border-none focus:ring-0`,
     type: type,
     name: name,
     placeholder: placeholder,
     onChange: onChange,
     value: value
-  }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
+  }), 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, {
+    className: iconClasses
+  }))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-utilRed1000 text-sm"
   }, errorMessage));
 });
@@ -9071,20 +9087,23 @@ const ForwardRef = /*#__PURE__*/ external_react_.forwardRef(ChevronDownIcon);
 function Dropdown(_ref) {
   let {
     items,
-    label = "Test Label",
+    label = 'Test Label',
     isValid = true,
-    placeholder = "Example Placeholder",
+    placeholder = 'Example Placeholder',
     name,
+    className = '',
     onChange,
-    value
+    value,
+    Icon // Left-aligned icon
   } = _ref;
   const initialSelectedItem = items.find(item => item.value === value) || null;
   const [selectedItem, setSelectedItem] = (0,external_react_.useState)(initialSelectedItem);
+  const [isOpen, setIsOpen] = (0,external_react_.useState)(false);
   (0,external_react_.useEffect)(() => {
     const newSelectedItem = items.find(item => item.value === value) || null;
     setSelectedItem(newSelectedItem);
   }, [value, items]);
-  const inputClasses = `inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white border px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-slate-500' : 'border-rose-500'}`;
+  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 handleSelect = item => {
     setSelectedItem(item);
     const event = {
@@ -9101,18 +9120,18 @@ function Dropdown(_ref) {
     name: name
   }, /*#__PURE__*/external_react_default().createElement("label", null, label), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(It, {
     className: inputClasses,
-    style: {
-      backgroundColor: 'white'
-    }
-  }, selectedItem ? selectedItem.label : placeholder, /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
+    onClick: () => setIsOpen(prev => !prev)
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: "flex items-center gap-2"
+  }, Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: "h-5 w-5 text-greyLight700"
+  }), " ", /*#__PURE__*/external_react_default().createElement("span", null, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
     "aria-hidden": "true",
-    className: "-mr-1 h-5 w-5 text-gray-400"
+    className: `-mr-1 h-5 w-5 text-greyLight700 transition-transform duration-200 ${isOpen ? 'rotate-180' : 'rotate-0'}`
   }))), /*#__PURE__*/external_react_default().createElement(gt, {
     transition: true,
-    className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none",
-    style: {
-      backgroundColor: 'white'
-    }
+    className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none max-h-48 overflow-y-auto",
+    onClick: () => setIsOpen(false)
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "py-1"
   }, items.map((item, index) => /*#__PURE__*/external_react_default().createElement(Et, {
@@ -9124,10 +9143,10 @@ function Dropdown(_ref) {
     return /*#__PURE__*/external_react_default().createElement("button", {
       type: "button",
       onClick: () => handleSelect(item),
-      className: `block w-full px-4 py-2 text-left text-sm text-gray-700 ${active ? 'bg-gray-100 text-gray-900' : ''}`
+      className: `block w-full px-4 py-2 text-left text-sm text-greyLight700 ${active ? 'bg-greyLight100 text-greyLight700' : ''} hover:bg-greyLight100`
     }, item.label);
   })))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-rose-500 text-sm"
+    className: "text-utilRed text-sm"
   }, "Please select a valid option"));
 }
 ;// ./src/index.js
@@ -9143,4 +9162,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.923c53023bac4e887eda.js.map
+//# sourceMappingURL=main.83972011c52c05c2a738.js.map