opus-toolkit-components 0.3.1 → 0.3.2

package/lib/{main.cf31769a0398dce70335.js → main.923c53023bac4e887eda.js}

@@ -27,7 +27,7 @@ return /******/ (() => { // webpackBootstrap
 
 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, `.primary-btn{color:#fff;box-shadow:0px 2px 4px -2px rgba(0,0,0,.08),0px 4px 8px -2px rgba(0,0,0,.04)}.primary-btn:hover{background-color:#b52776}`, "",{"version":3,"sources":["webpack://./src/components/Buttons/button.scss"],"names":[],"mappings":"AAoBA,aAII,UAlBS,CAmBT,4EAAA,CAJF,mBACE,wBAAA","sourcesContent":["@import 'opus-toolkit-styles/fragments/colours';\r\n// Define color variables\r\n// $primary-color: $c247Pink;\r\n// $primary-hover-color: $c247Blue;\r\n// $secondary-color: $c247Blue;\r\n// $hover-color: $c247Pink;\r\n$text-color: white;\r\n// $outline-border-color: white;\r\n\r\n// Create a mixin for hover effects to avoid repetition\r\n// @mixin hover-effect($hover-bg, $hover-border: null) {\r\n//   &:hover {\r\n//     background: $hover-bg;\r\n//     @if $hover-border {\r\n//       border-color: $hover-border;\r\n//     }\r\n//   }\r\n// }\r\n\r\n// // Primary button styles\r\n.primary-btn {\r\n  &:hover {\r\n    background-color: #B52776;\r\n  }\r\n    color: $text-color;\r\n    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.08), 0px 4px 8px -2px rgba(0, 0, 0, 0.04);\r\n}\r\n\r\n// // Secondary button styles\r\n// .secondary-btn {\r\n//     background: $secondary-color;\r\n//     color: $text-color;\r\n// }"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ``, "",{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -657,26 +657,48 @@ var update = injectStylesIntoStyleTag_default()(Buttons_button/* default */.A, o
 function Button(_ref) {
   let {
     type = 'button',
-    cat = 'c247',
-    // c247, neutral, destructive, inverse 
     rank = 'primary',
-    // Primary, secondary, tertiary
     state = 'default',
-    // default, hover, disabled
     text = 'Example Button',
     size = 'md',
     isFullWidth = false,
+    icon: Icon,
+    // Icon as a React component
+    iconPosition = 'right',
+    // Icon position: 'left' or 'right'
+    isIconAnimated = false,
+    // Optional animation for icon hover
+    className = '',
+    // Accepts additional custom class
     onClick
   } = _ref;
-  // Define style classes based on button rank
+  // Define styles for button ranks
   const rankStyles = {
-    primary: 'bg-c247-pinkDefault hover:bg-c247-pinkHover',
-    neutral: 'bg-c247-neutralDefault hover:bg-c247-neutralHover',
-    destructive: 'bg-c247-destructiveDefault hover:bg-c247-destructiveHover'
+    primary: 'bg-brandPink600 hover:bg-brandPink700 text-greyBaseLight',
+    secondary: 'bg-greyBaseDark900 hover:bg-brandPink700 text-greyBaseLight',
+    outline: 'bg-greyLight50 border-solid border-2 border-greyLight100 hover:border-greyLight700 hover:greyLight100 text-greyLight700',
+    neutral: 'bg-greyLight50 hover:bg-greyLight100 text-greyLight700',
+    destructive: 'bg-utilRed1000 hover:bg-utilRed800 text-greyBaseLight'
   };
+
+  // Disabled styles for button
+  const disabledStyles = 'bg-greyLight100 text-greyLight500 cursor-not-allowed';
+
+  // Icon animation style (if applicable)
+  const iconClassNames = `
+    inline-block 
+    transition-transform 
+    ease-in-out 
+    duration-200
+    h-5 w-5
+    ${iconPosition === 'right' ? 'ml-2' : 'mr-2'}
+    ${isIconAnimated ? 'group-hover:translate-x-1' : ''}
+  `;
+
+  // Main button class names
   const classNames = `
-    ${rankStyles[rank] || rankStyles.primary}
-    text-white 
+    ${state === 'disabled' ? disabledStyles : rankStyles[rank] || rankStyles.primary}
+    group
     transition 
     ease-in-out 
     duration-700 
@@ -684,13 +706,23 @@ function Button(_ref) {
     px-6 
     py-2 
     text-${size} 
+    flex 
+    items-center
+    justify-center
+    whitespace-nowrap // Prevents text wrapping
     ${isFullWidth ? 'w-full' : ''}
+    ${className}
   `;
   return /*#__PURE__*/external_react_default().createElement("button", {
     type: type,
     className: classNames,
-    onClick: onClick
-  }, text);
+    onClick: state === 'disabled' ? null : onClick,
+    disabled: state === 'disabled'
+  }, iconPosition === 'left' && Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: iconClassNames
+  }), text, iconPosition === 'right' && Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: iconClassNames
+  }));
 }
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Cards/card.scss
 var card = __webpack_require__(865);
@@ -727,9 +759,10 @@ var card_update = injectStylesIntoStyleTag_default()(card/* default */.A, card_o
 function Card(_ref) {
   let {
     mode = 'light',
+    className = '',
     children
   } = _ref;
-  const cardClasses = `p-5 ${mode}-card rounded-lg shadow-lg`;
+  const cardClasses = `p-5 ${mode}-card rounded-lg shadow-lg border-solid border-2 border-greyLight100 ${className}`;
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: cardClasses
   }, children);
@@ -745,12 +778,15 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     isValid = true,
     errorMessage = `${label} is required`,
     onChange,
+    className = '',
     value
   } = _ref;
-  const inputClasses = `rounded-md bg-white border px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-slate-500' : 'border-rose-500'}`;
+  const inputClasses = `${className} rounded-md bg-white border border-greyLight500 px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-greyLight500' : 'border-utilRed1000'}`;
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
-  }, /*#__PURE__*/external_react_default().createElement("label", null, label), /*#__PURE__*/external_react_default().createElement("input", {
+  }, /*#__PURE__*/external_react_default().createElement("label", {
+    className: "text-greyLight1000"
+  }, label), /*#__PURE__*/external_react_default().createElement("input", {
     ref: ref,
     className: inputClasses,
     type: type,
@@ -759,7 +795,7 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     onChange: onChange,
     value: value
   }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-rose-500 text-sm"
+    className: "text-utilRed1000 text-sm"
   }, errorMessage));
 });
 /* harmony default export */ const Inputs_Input = (Input);
@@ -9107,4 +9143,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.cf31769a0398dce70335.js.map
+//# sourceMappingURL=main.923c53023bac4e887eda.js.map