opus-toolkit-components 0.3.0 → 0.3.1

package/lib/{main.13234ba8805408d911a7.js → main.cf31769a0398dce70335.js}

@@ -12,7 +12,7 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 250:
+/***/ 289:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
@@ -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{background:#e23193;color:#fff}.primary-btn:hover{background:#005de5}.secondary-btn{background:#005de5;color:#fff}.secondary-btn:hover{background:#e23193}.outline-btn{background:none;border:2px solid #fff;color:#fff}.outline-btn:hover{background:#e23193;border-color:#e23193}`, "",{"version":3,"sources":["webpack://./src/components/Buttons/_button.scss","webpack://./node_modules/opus-toolkit-styles/fragments/_colours.scss"],"names":[],"mappings":"AAoBA,aACI,kBCEO,CDDP,UAhBS,CAKX,mBACE,kBCSO,CDMX,eACI,kBCPO,CDQP,UAvBS,CAKX,qBACE,kBCWO,CDWX,aACI,eAAA,CACA,qBAAA,CACA,UA/BS,CAKX,mBACE,kBCWO,CDTL,oBCSK","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    background: $primary-color;\r\n    color: $text-color;\r\n    @include hover-effect($primary-hover-color);\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    @include hover-effect($hover-color);\r\n}\r\n\r\n// Outline button styles\r\n.outline-btn {\r\n    background: none;\r\n    border: 2px solid $outline-border-color;\r\n    color: $text-color;\r\n    @include hover-effect($hover-color, $hover-color);\r\n}","// Foundation Brand colors\r\n$opusDeepBlue: #0c022f;\r\n$opusNavy: #24135f;\r\n$opusRichBlue: #003494;\r\n\r\n// Grey/Blue Scale\r\n$opusDarkest: #07011c;\r\n$opusGrey800: #1b1f51;\r\n$opusGrey700: #444877;\r\n$opusGrey600: #8b8fac;\r\n$opusGrey400: #e3e4eb;\r\n$opusGrey200: #f8f8fb;\r\n$opusWhite: #ffffff;\r\n\r\n// Brand Colours\r\n$opusLightBlue: #005de5;\r\n$opusBrandBlue: #0176d9;\r\n$opusPurple: #451f88;\r\n$opusPink: #e05db4;\r\n\r\n// C247 Colours\r\n$c247Blue: #005de5;\r\n$c247Purple: #ad43c4;\r\n$c247Pink: #e23193;\r\n\r\n// Utility Colours\r\n$danger: #bb0808;\r\n$success: #27be36;"],"sourceRoot":""}]);
+___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":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -546,7 +546,7 @@ __webpack_require__.d(__webpack_exports__, {
   Card: () => (/* reexport */ Card),
   DatePicker: () => (/* reexport */ DatePicker),
   Dropdown: () => (/* reexport */ Dropdown),
-  Input: () => (/* reexport */ Input),
+  Input: () => (/* reexport */ Inputs_Input),
   RadioButton: () => (/* reexport */ RadioButton),
   Table: () => (/* reexport */ Table)
 });
@@ -622,9 +622,9 @@ var insertStyleElement_default = /*#__PURE__*/__webpack_require__.n(insertStyleE
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleTagTransform.js
 var styleTagTransform = __webpack_require__(113);
 var styleTagTransform_default = /*#__PURE__*/__webpack_require__.n(styleTagTransform);
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Buttons/_button.scss
-var _button = __webpack_require__(250);
-;// ./src/components/Buttons/_button.scss
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Buttons/button.scss
+var Buttons_button = __webpack_require__(289);
+;// ./src/components/Buttons/button.scss
 
       
       
@@ -644,12 +644,12 @@ options.insert = insertBySelector_default().bind(null, "head");
 options.domAPI = (styleDomAPI_default());
 options.insertStyleElement = (insertStyleElement_default());
 
-var update = injectStylesIntoStyleTag_default()(_button/* default */.A, options);
+var update = injectStylesIntoStyleTag_default()(Buttons_button/* default */.A, options);
 
 
 
 
-       /* harmony default export */ const Buttons_button = (_button/* default */.A && _button/* default */.A.locals ? _button/* default */.A.locals : undefined);
+       /* harmony default export */ const components_Buttons_button = (Buttons_button/* default */.A && Buttons_button/* default */.A.locals ? Buttons_button/* default */.A.locals : undefined);
 
 ;// ./src/components/Buttons/Button.js
 
@@ -657,15 +657,35 @@ var update = injectStylesIntoStyleTag_default()(_button/* default */.A, options)
 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,
-    // The boolean to toggle 'w-full'
     onClick
   } = _ref;
-  // Conditional class based on isFullWidth
-  const classNames = `transition ease-in-out duration-700 rounded px-6 py-2 text-${size} ${rank}-btn ${isFullWidth ? 'w-full' : ''}`;
+  // Define style classes based on button rank
+  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'
+  };
+  const classNames = `
+    ${rankStyles[rank] || rankStyles.primary}
+    text-white 
+    transition 
+    ease-in-out 
+    duration-700 
+    rounded-lg 
+    px-6 
+    py-2 
+    text-${size} 
+    ${isFullWidth ? 'w-full' : ''}
+  `;
   return /*#__PURE__*/external_react_default().createElement("button", {
     type: type,
     className: classNames,
@@ -716,7 +736,7 @@ function Card(_ref) {
 }
 ;// ./src/components/Forms/Inputs/Input.js
 
-function Input(_ref) {
+const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   let {
     label,
     placeholder,
@@ -731,6 +751,7 @@ function Input(_ref) {
   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", {
+    ref: ref,
     className: inputClasses,
     type: type,
     name: name,
@@ -740,7 +761,8 @@ function Input(_ref) {
   }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-rose-500 text-sm"
   }, errorMessage));
-}
+});
+/* harmony default export */ const Inputs_Input = (Input);
 ;// ./src/components/Forms/Datepickers/DatePicker.js
 
 function DatePicker(_ref) {
@@ -9085,4 +9107,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.13234ba8805408d911a7.js.map
+//# sourceMappingURL=main.cf31769a0398dce70335.js.map