opus-toolkit-components 0.7.5 → 0.7.7

package/lib/{main.83ac8a97df068a0b0db7.js → main.56fc8a295b30cd3236eb.js}

@@ -3540,6 +3540,17 @@ function AiTwotoneWarning (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 1024 1024"},"child":[{"tag":"path","attr":{"fill":"#333","d":"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"},"child":[]},{"tag":"path","attr":{"fill":"#E6E6E6","d":"M172.2 828.1h679.6L512 239.9 172.2 828.1zM560 720a48.01 48.01 0 0 1-96 0 48.01 48.01 0 0 1 96 0zm-16-304v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8z"},"child":[]},{"tag":"path","attr":{"fill":"#333","d":"M464 720a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8z"},"child":[]}]})(props);
 };
 
+;// ./src/utils/getDataCy.js
+const getDataCy = function () {
+  let {
+    name,
+    value,
+    dataCy
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (dataCy) return dataCy;
+  if (name && value) return "".concat(name, "-").concat(value);
+  return name || '';
+};
 ;// ./src/components/Buttons/Button.js
 
 
@@ -3552,6 +3563,9 @@ function Button(_ref) {
     state = 'default',
     text = 'Example Button',
     size = 'md',
+    name,
+    dataCy,
+    tabIndex,
     isFullWidth = false,
     icon: Icon,
     // Icon as a React component
@@ -3588,8 +3602,14 @@ function Button(_ref) {
   return /*#__PURE__*/external_react_default().createElement("button", {
     type: type,
     title: title,
+    name: name,
     "aria-label": title,
     className: classNames,
+    tabIndex: tabIndex,
+    "data-cy": getDataCy({
+      name,
+      dataCy
+    }),
     onClick: !isSaving && state !== 'disabled' ? onClick : null,
     disabled: isSaving || state === 'disabled'
   }, isSaving ? /*#__PURE__*/external_react_default().createElement(AiOutlineLoading3Quarters, {
@@ -3622,6 +3642,7 @@ function Input_defineProperty(e, r, t) { return (r = Input_toPropertyKey(r)) in
 function Input_toPropertyKey(t) { var i = Input_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function Input_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 
+
 const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   let {
     label,
@@ -3647,9 +3668,13 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     // Condition to render custom component
     customComponent,
     // Custom component to render
-    customComponentProps = {} // Props for the custom component
+    customComponentProps = {},
+    // Props for the custom component
+    disabled = false,
+    // New disabled prop
+    dataCy
   } = _ref;
-  const inputClasses = "".concat(className, " flex items-center rounded-md bg-[--color-input-bg] border ").concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " text-md font-normal text-[--color-text-weak]");
+  const inputClasses = "".concat(className, " flex items-center rounded-md bg-[--color-input-bg] border ").concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " text-md font-normal text-[--color-text-weak] ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '');
   const iconClasses = "h-5 w-5 ".concat(isAnimated ? 'transition-transform duration-200 group-focus-within:scale-125' : '', " text-[--color-text-weak]");
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
@@ -3672,9 +3697,14 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     onChange: onChange,
     value: value,
     title: title,
-    tabindex: tabIndex,
+    tabIndex: tabIndex,
     "aria-label": title,
-    required: required // Set HTML required attribute
+    required: required,
+    disabled: disabled,
+    "data-cy": getDataCy({
+      name,
+      dataCy
+    })
   }), Icon && iconPosition === 'right' && /*#__PURE__*/external_react_default().createElement("span", {
     className: "absolute right-3 flex items-center pointer-events-none"
   }, /*#__PURE__*/external_react_default().createElement(Icon, {
@@ -3744,6 +3774,7 @@ var datepicker_update = injectStylesIntoStyleTag_default()(datepicker/* default
 
 
 
+
 function DatePicker(_ref) {
   let {
     initialDate = '',
@@ -3755,11 +3786,12 @@ function DatePicker(_ref) {
     value,
     className = '',
     title = '',
-    required = false
+    required = false,
+    dataCy,
+    disabled = false
   } = _ref;
   const [selectedDate, setSelectedDate] = (0,external_react_.useState)(value || initialDate);
-  const inputRef = (0,external_react_.useRef)(null); // Create a reference for the input element
-
+  const inputRef = (0,external_react_.useRef)(null);
   (0,external_react_.useEffect)(() => {
     if (value !== undefined) {
       setSelectedDate(value);
@@ -3774,8 +3806,8 @@ function DatePicker(_ref) {
     }
   };
   const handleIconClick = () => {
-    if (inputRef.current) {
-      inputRef.current.showPicker(); // Opens the native date picker (supported in modern browsers)
+    if (inputRef.current && !disabled) {
+      inputRef.current.showPicker();
     }
   };
   return /*#__PURE__*/external_react_default().createElement("div", {
@@ -3789,27 +3821,33 @@ function DatePicker(_ref) {
     type: "date",
     id: name,
     name: name,
-    ref: inputRef // Assign the ref to the input
-    ,
+    ref: inputRef,
     value: selectedDate,
     title: title,
     "aria-label": title,
     onChange: handleDateChange,
     required: required,
-    className: "w-full py-2 px-3 pr-10 rounded-md bg-[--color-input-bg] border ".concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " text-md font-normal text-[--color-text-weak] ").concat(className)
+    disabled: disabled,
+    "data-cy": getDataCy({
+      name,
+      dataCy
+    }),
+    className: "w-full py-2 px-3 pr-10 rounded-md bg-[--color-input-bg] border ".concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " text-md font-normal text-[--color-text-weak] ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '', " ").concat(className)
   }), /*#__PURE__*/external_react_default().createElement("button", {
     type: "button",
     onClick: handleIconClick,
     className: "absolute top-1/2 mt-1 right-3 transform",
-    "aria-label": "Open date picker"
+    "aria-label": "Open date picker",
+    disabled: disabled
   }, /*#__PURE__*/external_react_default().createElement(esm_CalendarIcon, {
-    className: "w-5 h-5 text-[--color-text-weak] hover:text-[--color-primary-btn-hover] transition"
+    className: "w-5 h-5 ".concat(disabled ? 'text-[--color-text-disabled]' : 'text-[--color-text-weak] hover:text-[--color-primary-btn-hover]', " transition")
   })), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-utilRed1000 text-sm"
   }, errorMessage));
 }
 ;// ./src/components/Forms/Radios/RadioButton.js
 
+
 const RadioButton = _ref => {
   let {
     label,
@@ -3833,10 +3871,13 @@ const RadioButton = _ref => {
     title = '',
     isValid = true,
     errorMessage = "".concat(label, " is required"),
-    required = false
+    required = false,
+    dataCy,
+    disabled = false
   } = _ref;
   const [selectedValue, setSelectedValue] = (0,external_react_.useState)('');
   const handleChange = item => {
+    if (disabled) return;
     setSelectedValue(item.value);
     const event = {
       target: {
@@ -3849,7 +3890,7 @@ const RadioButton = _ref => {
     }
   };
   return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex flex-col mb-4"
+    className: "flex flex-col mb-4 ".concat(className)
   }, /*#__PURE__*/external_react_default().createElement("label", {
     className: "text-[--color-text-strong] mb-2 flex items-center"
   }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
@@ -3858,17 +3899,23 @@ const RadioButton = _ref => {
     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 ".concat(selectedValue === option.value ? 'bg-[--color-primary-btn] text-[--color-text-strong] border-[--color-stroke]' : "bg-[--color-input-bg] text-[--color-text-strong] ".concat(!isValid && selectedValue === '' ? 'border-utilRed1000' : 'border-[--color-stroke]'), " transition duration-200")
+    className: "py-2 px-4 border rounded-lg transition duration-200 ".concat(selectedValue === option.value ? 'bg-[--color-primary-btn] text-[--color-text-strong] border-[--color-stroke]' : "bg-[--color-input-bg] text-[--color-text-strong] ".concat(!isValid && selectedValue === '' ? 'border-utilRed1000' : 'border-[--color-stroke]'), " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
   }, /*#__PURE__*/external_react_default().createElement("input", {
     type: "radio",
-    tabindex: tabIndex,
+    tabIndex: tabIndex,
     title: title,
     "aria-label": title,
     name: name,
     value: option.value,
     checked: selectedValue === option.value,
     onChange: () => handleChange(option),
-    className: "hidden"
+    className: "hidden",
+    disabled: disabled,
+    "data-cy": getDataCy({
+      name,
+      value: option.value,
+      dataCy
+    })
   }), option.label))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-utilRed1000 text-sm mt-1"
   }, errorMessage));
@@ -3877,6 +3924,7 @@ RadioButton.displayName = 'RadioButton';
 /* harmony default export */ const Radios_RadioButton = (RadioButton);
 ;// ./src/components/Forms/Checkbox/Checkbox.jsx
 
+
 function Checkbox(_ref) {
   let {
     label,
@@ -3885,7 +3933,8 @@ function Checkbox(_ref) {
     value = false,
     isValid = true,
     errorMessage = "",
-    disabled = false
+    disabled = false,
+    dataCy
   } = _ref;
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
@@ -3897,7 +3946,11 @@ function Checkbox(_ref) {
     checked: value,
     onChange: onChange,
     disabled: disabled,
-    className: "mr-2 cursor-pointer"
+    "data-cy": getDataCy({
+      name,
+      dataCy
+    }),
+    className: "mr-2 ".concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
   }), label), !isValid && errorMessage && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-rose-500 text-sm mt-1"
   }, errorMessage));
@@ -12202,13 +12255,13 @@ const esm_ChevronDownIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(
 
 
 
+
 function Dropdown(_ref) {
   let {
     items,
     label = 'Test Label',
     isValid = true,
     required = false,
-    // New prop for required field
     placeholder = 'Example Placeholder',
     name,
     className = '',
@@ -12217,8 +12270,9 @@ function Dropdown(_ref) {
     onChange,
     value,
     Icon,
-    // Left-aligned icon
-    errorMessage = 'This field is required' // Default error message for required validation
+    errorMessage = 'This field is required',
+    disabled = false,
+    dataCy // optional override
   } = _ref;
   const initialSelectedItem = items.find(item => item.value === value) || null;
   const [selectedItem, setSelectedItem] = (0,external_react_.useState)(initialSelectedItem);
@@ -12227,12 +12281,13 @@ 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-[--color-input-bg] text-md font-normal border p-2 text-[--color-text-weak] ".concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " ").concat(className);
+  const inputClasses = "inline-flex w-full justify-between items-center rounded-md bg-[--color-input-bg] text-md font-normal border p-2 text-[--color-text-weak] ".concat(isValid ? 'border-[--color-stroke]' : 'border-utilRed1000', " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : '', " ").concat(className);
   const handleSelect = item => {
+    if (disabled) return;
     setSelectedItem(item);
     const event = {
       target: {
-        name: name,
+        name,
         value: item.value
       }
     };
@@ -12244,22 +12299,27 @@ function Dropdown(_ref) {
     name: name,
     title: title,
     "aria-label": title,
-    tabindex: tabIndex
+    tabIndex: tabIndex,
+    "data-cy": getDataCy({
+      name,
+      dataCy
+    })
   }, /*#__PURE__*/external_react_default().createElement("label", {
     className: "flex items-center text-[--color-text-weak] mb-1"
   }, label, required && /*#__PURE__*/external_react_default().createElement("span", {
     className: "ml-1 text-utilRed1000"
-  }, "*"), " "), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(It, {
+  }, "*")), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(It, {
     className: inputClasses,
-    onClick: () => setIsOpen(prev => !prev)
+    onClick: () => !disabled && setIsOpen(prev => !prev),
+    disabled: disabled
   }, /*#__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-[--color-text-weak]"
-  }), " ", /*#__PURE__*/external_react_default().createElement("span", null, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/external_react_default().createElement(solid_esm_ChevronDownIcon, {
+  }), /*#__PURE__*/external_react_default().createElement("span", null, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/external_react_default().createElement(solid_esm_ChevronDownIcon, {
     "aria-hidden": "true",
     className: "-mr-1 h-5 w-5 text-[--color-text-weak] transition-transform duration-200 ".concat(isOpen ? 'rotate-180' : 'rotate-0')
-  }))), /*#__PURE__*/external_react_default().createElement(gt, {
+  }))), !disabled && /*#__PURE__*/external_react_default().createElement(gt, {
     transition: true,
     className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-[--color-primary-bg] shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none max-h-48 overflow-y-auto",
     onClick: () => setIsOpen(false)
@@ -12456,4 +12516,4 @@ const Pill = _ref => {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.83ac8a97df068a0b0db7.js.map
+//# sourceMappingURL=main.56fc8a295b30cd3236eb.js.map