opus-toolkit-components 0.3.2 → 0.3.3

package/lib/{main.923c53023bac4e887eda.js → main.5f4fb2e84b8e3334491d.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",
@@ -9071,20 +9071,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 +9104,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 +9127,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 +9146,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.923c53023bac4e887eda.js.map
+//# sourceMappingURL=main.5f4fb2e84b8e3334491d.js.map