opus-toolkit-components 0.2.5 → 0.2.6

package/lib/{main.44c465f9808a1ad16ef3.js → main.800321707204c2a59f90.js}

@@ -585,21 +585,23 @@ const Accordion = _ref => {
       setInternalActiveIndex(activeIndex);
     }
   }, [activeIndex]);
-  return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion"
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-item border-2 rounded-lg border-gray-200 mb-2",
+  return /*#__PURE__*/React.createElement("div", {
+    className: "accordion rounded-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "accordion-item border-2 rounded-lg border-gray-200",
     key: index
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-header flex p-4 justify-between",
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "accordion-header flex justify-between p-2",
     onClick: toggle // Handle both internal and external toggles
     ,
     style: {
-      cursor: 'pointer'
+      cursor: "pointer"
     }
-  }, /*#__PURE__*/external_react_default().createElement("h3", null, title), /*#__PURE__*/external_react_default().createElement("div", null, isActive ? '-' : '+'))), isActive && /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-body p-4"
-  }, /*#__PURE__*/external_react_default().createElement("p", null, "Example Child Prop"), children));
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "text-2xl text-gray-800"
+  }, title), /*#__PURE__*/React.createElement("div", null, isActive ? "-" : "+"))), isActive && /*#__PURE__*/React.createElement("div", {
+    className: "accordion-body p-2"
+  }, children));
 };
 /* harmony default export */ const Accordions_Accordion = (Accordion);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
@@ -746,27 +748,41 @@ function DatePicker(_ref) {
     initialDate = '',
     label = 'Select a Date:',
     isValid = true,
-    errorMessage = "Error message"
+    errorMessage = "Error message",
+    name = 'date',
+    // Add name prop for form identification
+    onChange,
+    // Add onChange prop for passing event to parent
+    value
   } = _ref;
-  const [selectedDate, setSelectedDate] = (0,external_react_.useState)(initialDate);
+  const [selectedDate, setSelectedDate] = (0,external_react_.useState)(value || initialDate);
   (0,external_react_.useEffect)(() => {
-    setSelectedDate(initialDate);
-  }, [initialDate]);
+    if (value !== undefined) {
+      setSelectedDate(value); // Sync with controlled prop if it's passed
+    } else {
+      setSelectedDate(initialDate); // Fallback to initial date if uncontrolled
+    }
+  }, [value, initialDate]);
   const handleDateChange = e => {
     setSelectedDate(e.target.value);
+    if (onChange) {
+      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'}`;
-  return /*#__PURE__*/external_react_.React.createElement("div", {
+  return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
-  }, /*#__PURE__*/external_react_.React.createElement("label", {
+  }, /*#__PURE__*/external_react_default().createElement("label", {
     htmlFor: "date"
-  }, label), /*#__PURE__*/external_react_.React.createElement("input", {
+  }, label), /*#__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
-  }), !isValid && /*#__PURE__*/external_react_.React.createElement("span", {
+  }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-rose-500 text-sm"
   }, errorMessage));
 }
@@ -8994,28 +9010,6 @@ const ForwardRef = /*#__PURE__*/ external_react_.forwardRef(ChevronDownIcon);
 
 
 
-
-/* 
-
-    Usage Example:
-
-    import Dropdown from './Dropdown';
-
-    const menuItems = [
-        { label: 'Account settings', value: 'settings' },
-        { label: 'Support', value: 'support' },
-        { label: 'License', value: 'license' },
-        { label: 'Sign out', value: 'signOut', onClick: () => alert('Signed out!') },
-    ];
-
-    function App() {
-        return <Dropdown items={menuItems} />;
-    }
-
-    export default App;
-
-*/
-
 function Dropdown(_ref) {
   let {
     items,
@@ -9023,20 +9017,22 @@ function Dropdown(_ref) {
     isValid = true,
     placeholder = "Example Placeholder",
     name,
-    value,
-    // Added value prop for controlled usage
-    onChange
+    onChange,
+    value
   } = _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();
-    }
+  const handleSelect = selectedValue => {
+    // Create a synthetic event
+    const event = {
+      target: {
+        name: name,
+        value: selectedValue
+      }
+    };
+
+    // Log the synthetic event
+    console.log('Synthetic event:', event);
+    onChange(event); // Pass the synthetic event object
   };
   return /*#__PURE__*/external_react_default().createElement(rn, {
     as: "div",
@@ -9044,7 +9040,7 @@ 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
-  }, value || placeholder, " ", /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
+  }, 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, {
@@ -9059,13 +9055,12 @@ function Dropdown(_ref) {
       active
     } = _ref2;
     return /*#__PURE__*/external_react_default().createElement("button", {
-      onClick: () => handleItemClick(item) // Handle item click
-      ,
+      onClick: () => handleSelect(item.value),
       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
 
@@ -9080,4 +9075,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.44c465f9808a1ad16ef3.js.map
+//# sourceMappingURL=main.800321707204c2a59f90.js.map