opus-toolkit-components 0.2.3 → 0.2.5

package/lib/{main.10d428f5ec38bca77e8f.js → main.44c465f9808a1ad16ef3.js}

@@ -722,7 +722,8 @@ function Input(_ref) {
     name,
     isValid = true,
     errorMessage = `${label} is required`,
-    onChange
+    onChange,
+    value
   } = _ref;
   const inputClasses = `rounded-md bg-white border px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-slate-500' : 'border-rose-500'}`;
   return /*#__PURE__*/external_react_default().createElement("div", {
@@ -732,7 +733,8 @@ function Input(_ref) {
     type: type,
     name: name,
     placeholder: placeholder,
-    onChange: onChange
+    onChange: onChange,
+    value: value
   }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-rose-500 text-sm"
   }, errorMessage));
@@ -8995,15 +8997,15 @@ const ForwardRef = /*#__PURE__*/ external_react_.forwardRef(ChevronDownIcon);
 
 /* 
 
-    Usage:
+    Usage Example:
 
     import Dropdown from './Dropdown';
 
     const menuItems = [
-        { label: 'Account settings', href: '#' },
-        { label: 'Support', href: '#' },
-        { label: 'License', href: '#' },
-        { label: 'Sign out', onClick: () => alert('Signed out!') },
+        { label: 'Account settings', value: 'settings' },
+        { label: 'Support', value: 'support' },
+        { label: 'License', value: 'license' },
+        { label: 'Sign out', value: 'signOut', onClick: () => alert('Signed out!') },
     ];
 
     function App() {
@@ -9012,7 +9014,6 @@ const ForwardRef = /*#__PURE__*/ external_react_.forwardRef(ChevronDownIcon);
 
     export default App;
 
-
 */
 
 function Dropdown(_ref) {
@@ -9022,21 +9023,33 @@ function Dropdown(_ref) {
     isValid = true,
     placeholder = "Example Placeholder",
     name,
+    value,
+    // Added value prop for controlled usage
     onChange
   } = _ref;
   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 handleItemClick = item => {
+    // Call the onChange function if provided
+    if (onChange) {
+      onChange(item.value); // Pass the value of the item
+    }
+    // If there's an onClick function for the item, call it
+    if (item.onClick) {
+      item.onClick();
+    }
+  };
   return /*#__PURE__*/external_react_default().createElement(rn, {
     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, {
     className: inputClasses
-  }, placeholder, /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
+  }, value || placeholder, " ", /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
     "aria-hidden": "true",
     className: "-mr-1 h-5 w-5 text-gray-400"
   }))), /*#__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 data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in"
+    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"
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "py-1"
   }, items.map((item, index) => /*#__PURE__*/external_react_default().createElement(Et, {
@@ -9045,16 +9058,14 @@ function Dropdown(_ref) {
     let {
       active
     } = _ref2;
-    return item.href ? /*#__PURE__*/external_react_default().createElement("a", {
-      href: item.href,
-      className: `block px-4 py-2 text-sm text-gray-700 ${active ? 'bg-gray-100 text-gray-900' : ''}`
-    }, item.label) : /*#__PURE__*/external_react_default().createElement("button", {
-      onClick: item.onClick,
+    return /*#__PURE__*/external_react_default().createElement("button", {
+      onClick: () => handleItemClick(item) // Handle item click
+      ,
       className: `block w-full px-4 py-2 text-left text-sm text-gray-700 ${active ? 'bg-gray-100 text-gray-900' : ''}`
     }, item.label);
   })))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-rose-500 text-sm"
-  }));
+  }, "Invalid selection!"));
 }
 ;// ./src/index.js
 
@@ -9069,4 +9080,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.10d428f5ec38bca77e8f.js.map
+//# sourceMappingURL=main.44c465f9808a1ad16ef3.js.map