opus-toolkit-components 1.9.5 → 1.9.7

package/lib/components/Forms/Checkbox/index.d.ts

@@ -1,20 +1,21 @@
-export interface CheckboxChangeEvent {
-  target: {
-    name: string;
-    value: boolean;
-  };
-}
-
-export interface CheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
-  label: string;
-  name: string;
-  onChange?: (event: CheckboxChangeEvent) => void;
-  value?: boolean;
-  isValid?: boolean;
-  errorMessage?: string;
-  disabled?: boolean;
-  title?: string;
-  dataCy?: string;
-}
-
-export const Checkbox: React.ComponentType<CheckboxProps>;
+export interface CheckboxChangeEvent {
+  target: {
+    name: string;
+    value: boolean;
+  };
+}
+
+export interface CheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+  hideLabel?: boolean;
+  name: string;
+  onChange?: (event: CheckboxChangeEvent) => void;
+  value?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+  title?: string;
+  dataCy?: string;
+}
+
+export const Checkbox: React.ComponentType<CheckboxProps>;

package/lib/components/Forms/Datepickers/index.d.ts

@@ -16,6 +16,7 @@ export interface DatePickerProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   title?: string;
   required?: boolean;
+  hideLabel?: boolean;
   dataCy?: string;
   disabled?: boolean;
   minDate?: string;

package/lib/components/Forms/Dropdowns/index.d.ts

@@ -19,6 +19,7 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
   label?: string;
   isValid?: boolean;
   required?: boolean;
+  hideLabel?: boolean;
   placeholder?: string;
   name?: string;
   className?: string;
@@ -39,6 +40,7 @@ export interface SearchDropdownProps extends React.HTMLAttributes<HTMLDivElement
   label?: string;
   isValid?: boolean;
   required?: boolean;
+  hideLabel?: boolean;
   placeholder?: string;
   searchPlaceholder?: string;
   name?: string;
@@ -68,6 +70,7 @@ export interface SearchMultiSelectDropdownProps extends React.HTMLAttributes<HTM
   label?: string;
   isValid?: boolean;
   required?: boolean;
+  hideLabel?: boolean;
   placeholder?: string;
   searchPlaceholder?: string;
   name?: string;

package/lib/components/Forms/Inputs/index.d.ts

@@ -29,6 +29,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   className?: string;
   outerClassName?: string;
+  innerClassName?: string;
   value?: string | number;
   Icon?: IconComponent;
   iconPosition?: "left" | "right";

package/lib/components/Forms/Radios/index.d.ts

@@ -11,7 +11,7 @@ export interface RadioChangeEvent {
 }
 
 export interface RadioButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-  label: string;
+  label?: string;
   options?: RadioOption[];
   name: string;
   value?: string | number;

package/lib/main.js

@@ -1141,9 +1141,12 @@ __webpack_require__.r(__webpack_exports__);
  *
  * @typedef {Object} CheckboxProps
  *
- * @property {string} label
+ * @property {string} [label]
  *   Label displayed next to the checkbox.
  *
+ * @property {boolean} [hideLabel]
+ *   Hides the visible label while keeping it available to assistive technology.
+ *
  * @property {string} name
  *   Name used in the emitted onChange event.
  *
@@ -1175,6 +1178,7 @@ __webpack_require__.r(__webpack_exports__);
 function Checkbox(_ref) {
   let {
     label,
+    hideLabel = false,
     name,
     onChange,
     value = false,
@@ -1189,6 +1193,7 @@ function Checkbox(_ref) {
   const id = `checkbox-${name}`;
   const errorId = `${id}-error`;
   const showError = !isValid && errorMessage;
+  const hasLabel = Boolean(label);
   const handleChange = event => {
     onChange?.({
       target: {
@@ -1221,10 +1226,11 @@ function Checkbox(_ref) {
           accentColor: "var(--color-primary-btn)"
         },
         className: `mr-2 rounded-sm ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+      }), hasLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
         variant: "label",
         as: "label",
         htmlFor: id,
+        className: hideLabel ? "sr-only" : undefined,
         children: label
       })]
     }), !isValid && errorMessage && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
@@ -1297,6 +1303,9 @@ __webpack_require__.r(__webpack_exports__);
  *
  * @property {boolean} [required]
  *
+ * @property {boolean} [hideLabel]
+ *   Hides the visible label while keeping it available to assistive technology.
+ *
  * @property {string} [dataCy]
  *
  * @property {boolean} [disabled]
@@ -1315,15 +1324,16 @@ __webpack_require__.r(__webpack_exports__);
 function DatePicker(_ref) {
   let {
     initialDate = "",
-    label = "Select a Date:",
+    label,
     isValid = true,
-    errorMessage = "Error message",
+    errorMessage,
     name = "date",
     onChange,
     value,
     className = "",
     title = "",
     required = false,
+    hideLabel = false,
     dataCy,
     disabled = false,
     minDate,
@@ -1332,6 +1342,8 @@ function DatePicker(_ref) {
   } = _ref;
   const [selectedDate, setSelectedDate] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("");
   const inputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  const hasLabel = Boolean(label);
+  const resolvedErrorMessage = errorMessage || (hasLabel ? `${label} is required` : "This field is required");
   const normalizeToInputFormat = dateString => {
     if (!dateString) return "";
     const [datePart] = dateString.split(" "); // Remove time if present
@@ -1380,11 +1392,11 @@ function DatePicker(_ref) {
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
     className: "relative mb-4 flex flex-col",
     ...rest,
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    children: [hasLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
       as: "label",
       variant: "label",
       htmlFor: name,
-      className: "mb-1",
+      className: hideLabel ? "sr-only" : "mb-1",
       children: [label, required && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
         className: "ml-1 text-[--color-util-red]",
         children: "*"
@@ -1422,7 +1434,7 @@ function DatePicker(_ref) {
       id: `${name}-error`,
       variant: "small",
       className: "text-[--color-util-red]",
-      children: errorMessage
+      children: resolvedErrorMessage
     })]
   });
 }
@@ -1481,6 +1493,9 @@ __webpack_require__.r(__webpack_exports__);
  * @property {boolean} [required]
  *   Whether a * is appended.
  *
+ * @property {boolean} [hideLabel]
+ *   Hides the visible label while keeping it available to assistive technology.
+ *
  * @property {string} [placeholder]
  *
  * @property {string} [name]
@@ -1515,9 +1530,10 @@ __webpack_require__.r(__webpack_exports__);
 function Dropdown(_ref) {
   let {
     items = [],
-    label = "Test Label",
+    label,
     isValid = true,
     required = false,
+    hideLabel = false,
     placeholder = "Example Placeholder",
     name,
     className = "",
@@ -1532,6 +1548,7 @@ function Dropdown(_ref) {
     ...rest
   } = _ref;
   const [selectedItem, setSelectedItem] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  const hasLabel = Boolean(label);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     const newSelectedItem = items.find(item => item.value === value) || null;
     setSelectedItem(newSelectedItem);
@@ -1551,10 +1568,10 @@ function Dropdown(_ref) {
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
     className: `mb-4 flex flex-col ${className}`,
     ...rest,
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    children: [hasLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
       as: "label",
       variant: "label",
-      className: "mb-1",
+      className: hideLabel ? "sr-only" : "mb-1",
       htmlFor: name,
       children: [label, required && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
         className: "ml-1 text-[--color-util-red]",
@@ -1665,6 +1682,7 @@ __webpack_require__.r(__webpack_exports__);
  * @property {string} [label]
  * @property {boolean} [isValid]
  * @property {boolean} [required]
+ * @property {boolean} [hideLabel]
  * @property {string} [placeholder]
  * @property {string} [searchPlaceholder]
  * @property {string} [name]
@@ -1687,9 +1705,10 @@ __webpack_require__.r(__webpack_exports__);
 function SearchDropdown(_ref) {
   let {
     items = [],
-    label = "Test Label",
+    label,
     isValid = true,
     required = false,
+    hideLabel = false,
     placeholder = "Example Placeholder",
     searchPlaceholder = "Search",
     name,
@@ -1707,6 +1726,7 @@ function SearchDropdown(_ref) {
   } = _ref;
   const [selectedItem, setSelectedItem] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
   const [searchTerm, setSearchTerm] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("");
+  const hasLabel = Boolean(label);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     const newSelectedItem = items.find(item => item.value === value) || null;
     setSelectedItem(newSelectedItem);
@@ -1734,10 +1754,10 @@ function SearchDropdown(_ref) {
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
     className: `mb-4 flex flex-col ${className}`,
     ...rest,
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    children: [hasLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
       as: "label",
       variant: "label",
-      className: "mb-1",
+      className: hideLabel ? "sr-only" : "mb-1",
       htmlFor: name,
       children: [label, required && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
         className: "ml-1 text-[--color-util-red]",
@@ -1864,6 +1884,7 @@ __webpack_require__.r(__webpack_exports__);
  * @property {string} [label]
  * @property {boolean} [isValid]
  * @property {boolean} [required]
+ * @property {boolean} [hideLabel]
  * @property {string} [placeholder]
  * @property {string} [searchPlaceholder]
  * @property {string} [name]
@@ -1896,9 +1917,10 @@ __webpack_require__.r(__webpack_exports__);
 function SearchMultiSelectDropdown(_ref) {
   let {
     items = [],
-    label = "Test Label",
+    label,
     isValid = true,
     required = false,
+    hideLabel = false,
     placeholder = "Select options",
     searchPlaceholder = "Search",
     name,
@@ -1919,6 +1941,7 @@ function SearchMultiSelectDropdown(_ref) {
   } = _ref;
   const [searchTerm, setSearchTerm] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("");
   const [localSelectedValues, setLocalSelectedValues] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value);
+  const hasLabel = Boolean(label);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     setLocalSelectedValues(value);
   }, [value]);
@@ -1963,10 +1986,10 @@ function SearchMultiSelectDropdown(_ref) {
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("div", {
     className: `mb-4 flex flex-col ${className}`,
     ...rest,
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    children: [hasLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
       as: "label",
       variant: "label",
-      className: "mb-1",
+      className: hideLabel ? "sr-only" : "mb-1",
       htmlFor: name,
       children: [label, required && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("span", {
         className: "ml-1 text-[--color-util-red]",
@@ -2304,6 +2327,9 @@ __webpack_require__.r(__webpack_exports__);
  *   Extra class names applied to the outer container.
  *   Passing an mb-* class overrides the default mb-4 spacing.
  *
+ * @property {string} [innerClassName]
+ *   Extra class names applied directly to the native input element.
+ *
  * @property {string|number} [value]
  *
  * @property {IconComponent} [Icon]
@@ -2351,6 +2377,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
     onChange,
     className = "",
     outerClassName = "",
+    innerClassName = "",
     value,
     Icon,
     // Icon component
@@ -2376,7 +2403,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
   const resolvedErrorMessage = errorMessage || (hasLabel ? `${label} is required` : "This field is required");
   const hasCustomBottomMargin = /\b(?:[a-z]+:)*mb-/.test(outerClassName);
   const outerClasses = `${hasCustomBottomMargin ? "" : "mb-4"} flex flex-col ${outerClassName}`.trim();
-  const inputClasses = `${className} flex items-center rounded-md bg-[--color-input-bg] border ${isValid ? "border-[--color-stroke]" : "border-utilRed1000"} text-md font-normal text-[--color-text-strong] ${disabled ? "opacity-50 cursor-not-allowed" : ""}`;
+  const inputClasses = `${className} flex items-center rounded-md border ${isValid ? "border-[--color-stroke]" : "border-utilRed1000"} text-md font-normal text-[--color-text-strong] ${disabled ? "opacity-50 cursor-not-allowed" : ""}`;
   const iconClasses = `h-5 w-5 ${isAnimated ? "transition-transform duration-200 group-focus-within:scale-125" : ""} text-[--color-text-weak]`;
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
     className: outerClasses,
@@ -2401,7 +2428,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input", {
         id: name,
         ref: ref,
-        className: `w-full ${Icon ? iconPosition === "left" ? "pl-10" : "pr-10" : ""} rounded-md border-none bg-[--color-input-bg] px-3 py-2 focus:outline-none focus:ring-0`,
+        className: `w-full ${Icon ? iconPosition === "left" ? "pl-10" : "pr-10" : ""} rounded-md border-none bg-[--color-input-bg] px-3 py-2 focus:outline-none focus:ring-0 ${innerClassName}`,
         type: type,
         name: name,
         placeholder: placeholder,
@@ -2474,7 +2501,7 @@ __webpack_require__.r(__webpack_exports__);
  *
  * @typedef {Object} RadioButtonProps
  *
- * @property {string} label
+ * @property {string} [label]
  *   Form label above the radio group.
  *
  * @property {RadioOption[]} [options]
@@ -2537,7 +2564,7 @@ const RadioButton = _ref => {
     tabIndex = "",
     title = "",
     isValid = true,
-    errorMessage = `${label} is required`,
+    errorMessage,
     required = false,
     hideLabel = false,
     dataCy,
@@ -2545,6 +2572,10 @@ const RadioButton = _ref => {
     ...rest
   } = _ref;
   const selectedValue = value;
+  const hasLabel = Boolean(label);
+  const labelId = `${name}-label`;
+  const errorId = `${name}-error`;
+  const resolvedErrorMessage = errorMessage || (hasLabel ? `${label} is required` : "This field is required");
   const handleChange = item => {
     if (disabled) return;
     const event = {
@@ -2558,7 +2589,8 @@ const RadioButton = _ref => {
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
     className: `mb-4 flex flex-col ${className}`,
     ...rest,
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    children: [hasLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+      id: labelId,
       as: "label",
       variant: "label",
       className: hideLabel ? "sr-only" : "mb-2 flex items-center text-[--color-text-strong]",
@@ -2569,6 +2601,9 @@ const RadioButton = _ref => {
         children: "*"
       })]
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
+      role: "radiogroup",
+      "aria-labelledby": hasLabel ? labelId : undefined,
+      "aria-describedby": !isValid ? errorId : undefined,
       className: "flex flex-wrap gap-4 md:flex-nowrap md:gap-0 md:space-x-4",
       children: options.map(option => {
         const id = `${name}-${option.value}`;
@@ -2591,16 +2626,16 @@ const RadioButton = _ref => {
               value: option.value,
               dataCy
             }),
-            "aria-describedby": !isValid ? `${name}-error` : undefined
+            "aria-describedby": !isValid ? errorId : undefined
           }), option.label]
         }, option.value);
       })
     }), !isValid && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
       as: "span",
       variant: "small",
-      id: `${name}-error`,
+      id: errorId,
       className: "text-[--color-util-red]",
-      children: errorMessage
+      children: resolvedErrorMessage
     })]
   });
 };