opus-toolkit-components 0.3.9 → 0.4.1

package/lib/{main.55da4336968183da1c19.js → main.1caabab9a1a894e98031.js}

@@ -54,6 +54,28 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.dark-card{background-color:#24135f;co
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 705:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `table thead th:first-of-type{border-top-left-radius:8px}table thead th:last-of-type{border-top-right-radius:8px}table tr:last-of-type td:first-of-type{border-bottom-left-radius:8px}table tr:last-of-type td:last-of-type{border-bottom-right-radius:8px}`, "",{"version":3,"sources":["webpack://./src/components/Tables/table.scss"],"names":[],"mappings":"AAGY,6BACI,0BAAA,CAEJ,4BACI,2BAAA,CAOA,uCACI,6BAAA,CAEJ,sCACI,8BAAA","sourcesContent":["table {\r\n    thead {\r\n        th {\r\n            &:first-of-type {\r\n                border-top-left-radius: 8px;\r\n            }\r\n            &:last-of-type {\r\n                border-top-right-radius: 8px;\r\n            }\r\n        }\r\n    }\r\n    tr {\r\n        &:last-of-type {\r\n            td {\r\n                &:first-of-type {\r\n                    border-bottom-left-radius: 8px;\r\n                }\r\n                &:last-of-type {\r\n                    border-bottom-right-radius: 8px;\r\n                }\r\n            }\r\n        }  \r\n    } \r\n}"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 314:
@@ -548,7 +570,7 @@ __webpack_require__.d(__webpack_exports__, {
   Dropdown: () => (/* reexport */ Dropdown),
   Input: () => (/* reexport */ Inputs_Input),
   RadioButton: () => (/* reexport */ RadioButton),
-  Table: () => (/* reexport */ Table)
+  Table: () => (/* reexport */ DynamicTable)
 });
 
 // EXTERNAL MODULE: external "react"
@@ -872,41 +894,121 @@ 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);
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Tables/table.scss
+var table = __webpack_require__(705);
+;// ./src/components/Tables/table.scss
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var table_options = {};
+
+table_options.styleTagTransform = (styleTagTransform_default());
+table_options.setAttributes = (setAttributesWithoutAttributes_default());
+table_options.insert = insertBySelector_default().bind(null, "head");
+table_options.domAPI = (styleDomAPI_default());
+table_options.insertStyleElement = (insertStyleElement_default());
+
+var table_update = injectStylesIntoStyleTag_default()(table/* default */.A, table_options);
+
+
+
+
+       /* harmony default export */ const Tables_table = (table/* default */.A && table/* default */.A.locals ? table/* default */.A.locals : undefined);
+
 ;// ./src/components/Tables/Table.js
 
-function Table() {
+
+function DynamicTable(_ref) {
+  let {
+    data = [],
+    // Array defining columns and rendering logic
+    rows = [],
+    // Array defining rows
+    className = "",
+    rowKeyExtractor = (row, index) => index // Function to extract unique keys for rows
+  } = _ref;
   return /*#__PURE__*/external_react_default().createElement("table", {
-    class: "table-auto"
-  }, /*#__PURE__*/external_react_default().createElement("thead", null, /*#__PURE__*/external_react_default().createElement("tr", null, /*#__PURE__*/external_react_default().createElement("th", null, "Song"), /*#__PURE__*/external_react_default().createElement("th", null, "Artist"), /*#__PURE__*/external_react_default().createElement("th", null, "Year"))), /*#__PURE__*/external_react_default().createElement("tbody", null, /*#__PURE__*/external_react_default().createElement("tr", null, /*#__PURE__*/external_react_default().createElement("td", null, "The Sliding Mr. Bones (Next Stop, Pottersville)"), /*#__PURE__*/external_react_default().createElement("td", null, "Malcolm Lockyer"), /*#__PURE__*/external_react_default().createElement("td", null, "1961")), /*#__PURE__*/external_react_default().createElement("tr", null, /*#__PURE__*/external_react_default().createElement("td", null, "Witchy Woman"), /*#__PURE__*/external_react_default().createElement("td", null, "The Eagles"), /*#__PURE__*/external_react_default().createElement("td", null, "1972")), /*#__PURE__*/external_react_default().createElement("tr", null, /*#__PURE__*/external_react_default().createElement("td", null, "Shining Star"), /*#__PURE__*/external_react_default().createElement("td", null, "Earth, Wind, and Fire"), /*#__PURE__*/external_react_default().createElement("td", null, "1975"))));
+    className: `w-full table-auto text-left border-collapse ${className}`
+  }, /*#__PURE__*/external_react_default().createElement("thead", null, /*#__PURE__*/external_react_default().createElement("tr", {
+    className: "bg-greyBaseDark900"
+  }, data.map(column => /*#__PURE__*/external_react_default().createElement("th", {
+    key: column.key,
+    className: "border-b border-gray-300 py-2 px-4 text-sm font-normal text-greyDark1000"
+  }, column.header)))), /*#__PURE__*/external_react_default().createElement("tbody", null, rows.map((row, index) => /*#__PURE__*/external_react_default().createElement("tr", {
+    key: rowKeyExtractor(row, index),
+    className: `${index % 2 === 0 ? "bg-greyLight100" : "bg-greyLight50"} hover:bg-greyLight500`
+  }, data.map(column => /*#__PURE__*/external_react_default().createElement("td", {
+    key: column.key,
+    className: "p-4 text-sm text-greyLight700"
+  }, column.render ? column.render(row) : row[column.key]))))));
 }
 ;// ./node_modules/@react-aria/utils/dist/platform.mjs
 /*
@@ -9117,7 +9219,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 +9237,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 +9266,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 +9282,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.55da4336968183da1c19.js.map
+//# sourceMappingURL=main.1caabab9a1a894e98031.js.map