opus-toolkit-components 0.3.9 → 0.4.0

package/lib/{main.55da4336968183da1c19.js → main.80f90d68be593e9d6d31.js}

@@ -872,35 +872,66 @@ function DatePicker(_ref) {
 }
 ;// ./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() {
@@ -9117,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 = {
@@ -9135,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)
@@ -9164,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
@@ -9180,4 +9211,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.55da4336968183da1c19.js.map
+//# sourceMappingURL=main.80f90d68be593e9d6d31.js.map