opus-toolkit-components 0.3.8 → 0.4.0

package/lib/{main.269991b330795c1b8d09.js → main.80f90d68be593e9d6d31.js}

@@ -832,7 +832,9 @@ function DatePicker(_ref) {
     // Add name prop for form identification
     onChange,
     // Add onChange prop for passing event to parent
-    value
+    value,
+    className = '',
+    required = false // Add the required prop
   } = _ref;
   const [selectedDate, setSelectedDate] = (0,external_react_.useState)(value || initialDate);
   (0,external_react_.useEffect)(() => {
@@ -848,54 +850,88 @@ function DatePicker(_ref) {
       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'}`;
+  const inputClasses = `${className} flex items-center rounded-md bg-white border ${isValid ? 'border-greyLight500' : 'border-utilRed1000'} p-2 text-md font-normal text-gray-900`;
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
   }, /*#__PURE__*/external_react_default().createElement("label", {
     htmlFor: "date"
-  }, label), /*#__PURE__*/external_react_default().createElement("input", {
+  }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
+    className: "text-utilRed1000 ml-1"
+  }, "*")), /*#__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
+    className: inputClasses,
+    required: required // Apply the required attribute to the input
   }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-rose-500 text-sm"
+    className: "text-utilRed1000 text-sm"
   }, errorMessage));
 }
 ;// ./src/components/Forms/Radios/RadioButton.js
 
-function RadioButton(_ref) {
+const RadioButtonGroup = _ref => {
   let {
+    label,
+    options = [{
+      value: 'single',
+      label: 'Single'
+    }, {
+      value: 'married',
+      label: 'Married'
+    }, {
+      value: 'divorced',
+      label: 'Divorced'
+    }, {
+      value: 'other',
+      label: 'Other'
+    }],
     name,
-    value,
-    checked,
     onChange,
-    rank = 'primary',
-    // Can be 'primary', 'secondary', etc.
-    text = 'Example Radio',
-    size = 'md' // Sizes can be 'sm', 'md', 'lg'
+    className = '',
+    isValid = true,
+    errorMessage = `${label} is required`,
+    required = false
   } = _ref;
-  // Conditional class based on rank and size
-  const classNames = `
-    flex items-center cursor-pointer transition 
-    duration-200 ease-in-out 
-    ${rank === 'primary' ? 'text-blue-600' : 'text-gray-600'} 
-    ${size === 'lg' ? 'text-lg' : size === 'sm' ? 'text-sm' : 'text-base'}
-  `;
-  return /*#__PURE__*/external_react_default().createElement("label", {
-    className: classNames
+  const [selectedValue, setSelectedValue] = (0,external_react_.useState)('');
+  const handleChange = item => {
+    setSelectedValue(item.value);
+    const event = {
+      target: {
+        name: name,
+        value: item.value
+      }
+    };
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  return /*#__PURE__*/external_react_default().createElement("div", {
+    className: "flex flex-col mb-4"
+  }, /*#__PURE__*/external_react_default().createElement("label", {
+    className: "text-greyLight700 mb-2 flex items-center"
+  }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
+    className: "text-utilRed1000 ml-1"
+  }, "*")), /*#__PURE__*/external_react_default().createElement("div", {
+    className: "flex space-x-4"
+  }, options.map(option => /*#__PURE__*/external_react_default().createElement("label", {
+    key: option.value,
+    className: `cursor-pointer py-2 px-4 border rounded-lg ${selectedValue === option.value ? 'bg-greyBaseDark900 text-greyBaseLight border-greyBaseDark900' : `bg-white text-greyLight700 ${!isValid && selectedValue === '' ? 'border-utilRed1000' : 'border-greyLight500'}`} transition duration-200`
   }, /*#__PURE__*/external_react_default().createElement("input", {
     type: "radio",
     name: name,
-    value: value,
-    checked: checked,
-    onChange: onChange,
-    className: `mr-2 form-radio ${rank}-radio` // Apply Tailwind styles
-  }), text);
-}
+    value: option.value,
+    checked: selectedValue === option.value,
+    onChange: () => handleChange(option),
+    className: "hidden"
+  }), option.label))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
+    className: "text-utilRed1000 text-sm mt-1"
+  }, errorMessage));
+};
+RadioButtonGroup.displayName = 'RadioButtonGroup';
+/* harmony default export */ const RadioButton = (RadioButtonGroup);
 ;// ./src/components/Tables/Table.js
 
 function Table() {
@@ -9112,7 +9148,7 @@ function Dropdown(_ref) {
     const newSelectedItem = items.find(item => item.value === value) || null;
     setSelectedItem(newSelectedItem);
   }, [value, items]);
-  const inputClasses = `inline-flex w-full justify-between items-center rounded-md bg-white text-md font-normal border p-2 text-greyLight700 ${isValid ? 'border-greyLight500' : 'border-utilRed'} ${className}`;
+  const inputClasses = `inline-flex w-full justify-between items-center rounded-md bg-white text-md font-normal border p-2 text-greyLight700 ${isValid ? 'border-greyLight500' : 'border-utilRed1000'} ${className}`;
   const handleSelect = item => {
     setSelectedItem(item);
     const event = {
@@ -9130,7 +9166,7 @@ function Dropdown(_ref) {
   }, /*#__PURE__*/external_react_default().createElement("label", {
     className: "flex items-center"
   }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "ml-1 text-utilRed"
+    className: "ml-1 text-utilRed1000"
   }, "*"), " "), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(It, {
     className: inputClasses,
     onClick: () => setIsOpen(prev => !prev)
@@ -9159,7 +9195,7 @@ function Dropdown(_ref) {
       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-utilRed text-sm"
+    className: "text-utilRed1000 text-sm"
   }, errorMessage));
 }
 ;// ./src/index.js
@@ -9175,4 +9211,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.269991b330795c1b8d09.js.map
+//# sourceMappingURL=main.80f90d68be593e9d6d31.js.map