opus-toolkit-components 0.3.1 → 0.3.3

package/lib/{main.cf31769a0398dce70335.js → main.5f4fb2e84b8e3334491d.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___);
 
@@ -588,7 +588,7 @@ const Accordion = _ref => {
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "accordion rounded-md"
   }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "accordion-item border-2 rounded-lg border-gray-200",
+    className: "accordion-item rounded-lg",
     key: index
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "accordion-header flex justify-between p-2",
@@ -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);
@@ -9035,20 +9071,23 @@ const ForwardRef = /*#__PURE__*/ external_react_.forwardRef(ChevronDownIcon);
 function Dropdown(_ref) {
   let {
     items,
-    label = "Test Label",
+    label = 'Test Label',
     isValid = true,
-    placeholder = "Example Placeholder",
+    placeholder = 'Example Placeholder',
     name,
+    className = '',
     onChange,
-    value
+    value,
+    Icon // Left-aligned icon
   } = _ref;
   const initialSelectedItem = items.find(item => item.value === value) || null;
   const [selectedItem, setSelectedItem] = (0,external_react_.useState)(initialSelectedItem);
+  const [isOpen, setIsOpen] = (0,external_react_.useState)(false);
   (0,external_react_.useEffect)(() => {
     const newSelectedItem = items.find(item => item.value === value) || null;
     setSelectedItem(newSelectedItem);
   }, [value, items]);
-  const inputClasses = `inline-flex w-full justify-center gap-x-1.5 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 = `inline-flex w-full justify-between items-center rounded-md bg-white text-md font-normal border px-4 py-2 text-greyLight700 ${isValid ? 'border-greyLight500' : 'border-utilRed'} ${className}`;
   const handleSelect = item => {
     setSelectedItem(item);
     const event = {
@@ -9065,18 +9104,18 @@ function Dropdown(_ref) {
     name: name
   }, /*#__PURE__*/external_react_default().createElement("label", null, label), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(It, {
     className: inputClasses,
-    style: {
-      backgroundColor: 'white'
-    }
-  }, selectedItem ? selectedItem.label : placeholder, /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
+    onClick: () => setIsOpen(prev => !prev)
+  }, /*#__PURE__*/external_react_default().createElement("div", {
+    className: "flex items-center gap-2"
+  }, Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: "h-5 w-5 text-greyLight700"
+  }), " ", /*#__PURE__*/external_react_default().createElement("span", null, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
     "aria-hidden": "true",
-    className: "-mr-1 h-5 w-5 text-gray-400"
+    className: `-mr-1 h-5 w-5 text-greyLight700 transition-transform duration-200 ${isOpen ? 'rotate-180' : 'rotate-0'}`
   }))), /*#__PURE__*/external_react_default().createElement(gt, {
     transition: true,
-    className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none",
-    style: {
-      backgroundColor: 'white'
-    }
+    className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none max-h-48 overflow-y-auto",
+    onClick: () => setIsOpen(false)
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "py-1"
   }, items.map((item, index) => /*#__PURE__*/external_react_default().createElement(Et, {
@@ -9088,10 +9127,10 @@ function Dropdown(_ref) {
     return /*#__PURE__*/external_react_default().createElement("button", {
       type: "button",
       onClick: () => handleSelect(item),
-      className: `block w-full px-4 py-2 text-left text-sm text-gray-700 ${active ? 'bg-gray-100 text-gray-900' : ''}`
+      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-rose-500 text-sm"
+    className: "text-utilRed text-sm"
   }, "Please select a valid option"));
 }
 ;// ./src/index.js
@@ -9107,4 +9146,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.cf31769a0398dce70335.js.map
+//# sourceMappingURL=main.5f4fb2e84b8e3334491d.js.map