opus-toolkit-components 0.7.4 → 0.7.6

package/lib/{main.eaa73c32b68eb30f0fde.js → main.a8aa83e8cb55d25079a7.js}

@@ -3615,6 +3615,15 @@ function Card(_ref) {
     className: cardClasses
   }, children);
 }
+;// ./src/utils/getDataCy.js
+const getDataCy = _ref => {
+  let {
+    name,
+    value = '',
+    dataCy
+  } = _ref;
+  return dataCy || (value ? "".concat(name, "-").concat(value) : name);
+};
 ;// ./src/components/Forms/Inputs/Input.jsx
 function Input_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function Input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? Input_ownKeys(Object(t), !0).forEach(function (r) { Input_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Input_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -3622,6 +3631,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 +3657,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 +3686,11 @@ 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 +3760,7 @@ var datepicker_update = injectStylesIntoStyleTag_default()(datepicker/* default
 
 
 
+
 function DatePicker(_ref) {
   let {
     initialDate = '',
@@ -3755,11 +3772,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 +3792,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 +3807,30 @@ 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 +3854,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 +3873,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 +3882,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 +3907,7 @@ RadioButton.displayName = 'RadioButton';
 /* harmony default export */ const Radios_RadioButton = (RadioButton);
 ;// ./src/components/Forms/Checkbox/Checkbox.jsx
 
+
 function Checkbox(_ref) {
   let {
     label,
@@ -3885,7 +3916,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 +3929,8 @@ 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 +12235,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 +12250,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 +12261,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 +12279,24 @@ 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)
@@ -12420,19 +12457,22 @@ const statusClasses = {
   warning: "bg-[--color-util-amber] text-[--color-white]",
   success: "bg-[--color-util-green] text-[--color-white]",
   info: "bg-[--color-util-blue] text-[--color-white]",
-  notice: "bg-[--color-util-yellow] text-[--color-black]" // better contrast
+  notice: "bg-[--color-util-yellow] text-[--color-black]"
 };
 const Pill = _ref => {
   let {
     text,
     status = "info",
-    className = ""
+    className = "",
+    icon: Icon
   } = _ref;
-  const baseClasses = "inline-block text-xs font-medium px-3 py-1 rounded-full";
+  const baseClasses = "inline-flex items-center gap-1 text-xs font-medium px-3 py-1 rounded-full";
   const statusClass = statusClasses[status] || statusClasses.info;
   return /*#__PURE__*/external_react_default().createElement("span", {
     className: "".concat(baseClasses, " ").concat(statusClass, " ").concat(className)
-  }, text);
+  }, Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: "w-4 h-4"
+  }), text);
 };
 /* harmony default export */ const Pills_Pill = (Pill);
 ;// ./src/index.js
@@ -12453,4 +12493,4 @@ const Pill = _ref => {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.eaa73c32b68eb30f0fde.js.map
+//# sourceMappingURL=main.a8aa83e8cb55d25079a7.js.map