opus-toolkit-components 1.9.6 → 1.9.8

package/lib/components/Accordions/index.d.ts

@@ -1,19 +1,19 @@
-// Accordion Typescript Definitions - update when new props added
-export interface AccordionProps {
-  title: string | React.ReactNode;
-  handleToggle?: (index: number) => void;
-  activeIndex?: number;
-  index: number;
-  isPreview?: boolean;
-  isLocked?: boolean;
-  onExitPreview?: () => void;
-  content: React.ReactNode;
-  preview?: React.ReactNode;
-  isPill?: boolean;
-  pillText?: string;
-  pillStatus?: "success" | "warning" | "error" | "info" | string;
-  pillIcon?: React.ReactNode;
-  disabled?: boolean;
-}
-
-export const Accordion: React.ComponentType<AccordionProps>;
+// Accordion Typescript Definitions - update when new props added
+export interface AccordionProps {
+  title?: string | React.ReactNode;
+  handleToggle?: (index: number) => void;
+  activeIndex?: number;
+  index: number;
+  isPreview?: boolean;
+  isLocked?: boolean;
+  onExitPreview?: () => void;
+  content: React.ReactNode;
+  preview?: React.ReactNode;
+  isPill?: boolean;
+  pillText?: string;
+  pillStatus?: "success" | "warning" | "error" | "info" | string;
+  pillIcon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export const Accordion: React.ComponentType<AccordionProps>;

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/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

@@ -21,54 +21,54 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/**
- * @typedef {Object} AccordionProps
- *
- * @property {string | React.ReactNode} title
- *   Title rendered inside the header.
- *
- * @property {Function} [handleToggle]
- *   Optional external toggle handler called with (index).
- *
- * @property {number} [activeIndex]
- *   Controlled active index. If provided, the accordion becomes controlled.
- *
- * @property {number} index
- *   This accordion's position in a list.
- *
- * @property {boolean} [isPreview]
- *   If true, accordion goes into preview mode.
- *
- * @property {boolean} [isLocked]
- *   If true, accordion cannot toggle.
- *
- * @property {Function} [onExitPreview]
- *   Callback fired when exiting preview mode.
- *
- * @property {React.ReactNode} content
- *   Accordion expanded content.
- *
- * @property {React.ReactNode} [preview]
- *   Rendered when in preview mode and not active.
- *
- * @property {boolean} [isPill]
- *   Whether to show a status pill.
- *
- * @property {string} [pillText]
- *   Label inside the pill.
- *
- * @property {'success'|'warning'|'error'|'info'|string} [pillStatus]
- *   Visual status for the pill.
- *
- * @property {React.ReactNode} [pillIcon]
- *   Optional icon inside the pill.
- *
- * @property {boolean} [disabled]
- *   Disables interaction with the accordion.
+/**
+ * @typedef {Object} AccordionProps
+ *
+ * @property {string | React.ReactNode} [title]
+ *   Title rendered inside the header.
+ *
+ * @property {Function} [handleToggle]
+ *   Optional external toggle handler called with (index).
+ *
+ * @property {number} [activeIndex]
+ *   Controlled active index. If provided, the accordion becomes controlled.
+ *
+ * @property {number} index
+ *   This accordion's position in a list.
+ *
+ * @property {boolean} [isPreview]
+ *   If true, accordion goes into preview mode.
+ *
+ * @property {boolean} [isLocked]
+ *   If true, accordion cannot toggle.
+ *
+ * @property {Function} [onExitPreview]
+ *   Callback fired when exiting preview mode.
+ *
+ * @property {React.ReactNode} content
+ *   Accordion expanded content.
+ *
+ * @property {React.ReactNode} [preview]
+ *   Rendered when in preview mode and not active.
+ *
+ * @property {boolean} [isPill]
+ *   Whether to show a status pill.
+ *
+ * @property {string} [pillText]
+ *   Label inside the pill.
+ *
+ * @property {'success'|'warning'|'error'|'info'|string} [pillStatus]
+ *   Visual status for the pill.
+ *
+ * @property {React.ReactNode} [pillIcon]
+ *   Optional icon inside the pill.
+ *
+ * @property {boolean} [disabled]
+ *   Disables interaction with the accordion.
  */
 
-/**
- * @param {AccordionProps} props
+/**
+ * @param {AccordionProps} props
  */
 
 const Accordion = _ref => {
@@ -89,6 +89,7 @@ const Accordion = _ref => {
     disabled = false
   } = _ref;
   const [internalActiveIndex, setInternalActiveIndex] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  const hasTitle = title !== undefined && title !== null && title !== "";
 
   // Determine which activeIndex to use: internal or external
   const isActive = activeIndex !== undefined ? activeIndex === index : internalActiveIndex === index;
@@ -116,7 +117,7 @@ const Accordion = _ref => {
       children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
         onClick: !isPreview && !isLocked ? toggle : null,
         className: `accordion-header flex items-center justify-between rounded-t-lg bg-[--color-accordion-header] ${isActive || isPreview ? "" : "rounded-b-lg"} hover: ${!isLocked ? "cursor-pointer" : null} `,
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
+        children: [hasTitle && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
           className: "flex items-center justify-between gap-2",
           children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_3__["default"], {
             as: "h2",
@@ -1141,9 +1142,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 +1179,7 @@ __webpack_require__.r(__webpack_exports__);
 function Checkbox(_ref) {
   let {
     label,
+    hideLabel = false,
     name,
     onChange,
     value = false,
@@ -1189,6 +1194,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 +1227,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 +1304,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 +1325,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 +1343,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 +1393,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 +1435,7 @@ function DatePicker(_ref) {
       id: `${name}-error`,
       variant: "small",
       className: "text-[--color-util-red]",
-      children: errorMessage
+      children: resolvedErrorMessage
     })]
   });
 }
@@ -1481,6 +1494,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 +1531,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 +1549,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 +1569,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 +1683,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 +1706,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 +1727,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 +1755,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 +1885,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 +1918,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 +1942,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 +1987,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]",
@@ -2478,7 +2502,7 @@ __webpack_require__.r(__webpack_exports__);
  *
  * @typedef {Object} RadioButtonProps
  *
- * @property {string} label
+ * @property {string} [label]
  *   Form label above the radio group.
  *
  * @property {RadioOption[]} [options]
@@ -2541,7 +2565,7 @@ const RadioButton = _ref => {
     tabIndex = "",
     title = "",
     isValid = true,
-    errorMessage = `${label} is required`,
+    errorMessage,
     required = false,
     hideLabel = false,
     dataCy,
@@ -2549,6 +2573,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 = {
@@ -2562,7 +2590,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]",
@@ -2573,6 +2602,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}`;
@@ -2595,16 +2627,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
     })]
   });
 };