opus-toolkit-components 0.2.4 → 0.2.6

package/lib/{main.354919c3ad193cd58738.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,29 +9010,6 @@ const ForwardRef = /*#__PURE__*/ external_react_.forwardRef(ChevronDownIcon);
 
 
 
-
-/* 
-
-    Usage:
-
-    import Dropdown from './Dropdown';
-
-    const menuItems = [
-        { label: 'Account settings', href: '#' },
-        { label: 'Support', href: '#' },
-        { label: 'License', href: '#' },
-        { label: 'Sign out', onClick: () => alert('Signed out!') },
-    ];
-
-    function App() {
-        return <Dropdown items={menuItems} />;
-    }
-
-    export default App;
-
-
-*/
-
 function Dropdown(_ref) {
   let {
     items,
@@ -9024,9 +9017,23 @@ function Dropdown(_ref) {
     isValid = true,
     placeholder = "Example Placeholder",
     name,
-    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 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",
     className: "relative inline-block text-left",
@@ -9038,7 +9045,7 @@ function Dropdown(_ref) {
     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, {
@@ -9047,11 +9054,8 @@ 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: () => 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", {
@@ -9071,4 +9075,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.354919c3ad193cd58738.js.map
+//# sourceMappingURL=main.800321707204c2a59f90.js.map