opus-toolkit-components 1.9.1 → 1.9.3

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

@@ -1,47 +1,47 @@
-export type IconComponent = (
-  props: React.SVGProps<SVGSVGElement>,
-) => JSX.Element;
-
-export type CustomComponent = (props: any) => JSX.Element;
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  label: string;
-  placeholder?: string;
-  type?:
-    | "text"
-    | "email"
-    | "password"
-    | "number"
-    | "search"
-    | "tel"
-    | "url"
-    | "date"
-    | "datetime-local"
-    | "month"
-    | "time"
-    | "week"
-    | string;
-  tabIndex?: string | number;
-  title?: string;
-  name?: string;
-  isValid?: boolean;
-  errorMessage?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  className?: string;
-  value?: string | number;
-  Icon?: IconComponent;
-  iconPosition?: "left" | "right";
-  isAnimated?: boolean;
-  required?: boolean;
-  hideLabel?: boolean;
-  disabled?: boolean;
-  shouldRenderCustomComponent?: boolean;
-  customComponent?: CustomComponent;
-  customComponentProps?: Record<string, any>;
-  dataCy?: string;
-}
-
-export const Input: React.ForwardRefExoticComponent<
-  InputProps & React.RefAttributes<HTMLInputElement>
->;
+export type IconComponent = (
+  props: React.SVGProps<SVGSVGElement>,
+) => JSX.Element;
+
+export type CustomComponent = (props: any) => JSX.Element;
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  placeholder?: string;
+  type?:
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "search"
+    | "tel"
+    | "url"
+    | "date"
+    | "datetime-local"
+    | "month"
+    | "time"
+    | "week"
+    | string;
+  tabIndex?: string | number;
+  title?: string;
+  name?: string;
+  isValid?: boolean;
+  errorMessage?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  className?: string;
+  outerClassName?: string;
+  value?: string | number;
+  Icon?: IconComponent;
+  iconPosition?: "left" | "right";
+  isAnimated?: boolean;
+  required?: boolean;
+  hideLabel?: boolean;
+  disabled?: boolean;
+  shouldRenderCustomComponent?: boolean;
+  customComponent?: CustomComponent;
+  customComponentProps?: Record<string, any>;
+  dataCy?: string;
+}
+
+export const Input: React.ForwardRefExoticComponent<
+  InputProps & React.RefAttributes<HTMLInputElement>
+>;

package/lib/main.js

@@ -1974,78 +1974,83 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/**
- * Icon component type — any React component that renders an SVG.
- * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
+/**
+ * Icon component type — any React component that renders an SVG.
+ * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
  */
 
-/**
- * Custom component type for supplementary UI below input.
- * Must be a React component.
- * @typedef {(props: any) => JSX.Element} CustomComponent
+/**
+ * Custom component type for supplementary UI below input.
+ * Must be a React component.
+ * @typedef {(props: any) => JSX.Element} CustomComponent
  */
 
-/**
- * Input component props.
- *
- * @typedef {Object} InputProps
- *
- * @property {string} label
- *   Label displayed above the input.
- *
- * @property {string} [placeholder]
- *
- * @property {'text'|'email'|'password'|'number'|'search'|'tel'|'url'|'date'|'datetime-local'|'month'|'time'|'week'|string} [type]
- *   HTML input type.
- *
- * @property {string|number} [tabIndex]
- *
- * @property {string} [title]
- *
- * @property {string} [name]
- *
- * @property {boolean} [isValid]
- *   Whether the field is valid — shows error text if false.
- *
- * @property {string} [errorMessage]
- *
- * @property {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange]
- *   Change handler using your preferred full event signature.
- *
- * @property {string} [className]
- *
- * @property {string|number} [value]
- *
- * @property {IconComponent} [Icon]
- *
- * @property {'left'|'right'} [iconPosition]
- *   Icon placement inside the input.
- *
- * @property {boolean} [isAnimated]
- *   Enables focus animation on the icon.
- *
- * @property {boolean} [required]
- *
- * @property {boolean} [hideLabel]
- *   Hides the visible label while keeping the input accessible.
- *
- * @property {boolean} [disabled]
- *
- * @property {boolean} [shouldRenderCustomComponent]
- *
- * @property {CustomComponent} [customComponent]
- *
- * @property {Object<string, any>} [customComponentProps]
- *
- * @property {string} [dataCy]
- *   Override for auto-generated test selector.
+/**
+ * Input component props.
+ *
+ * @typedef {Object} InputProps
+ *
+ * @property {string} [label]
+ *   Label displayed above the input.
+ *
+ * @property {string} [placeholder]
+ *
+ * @property {'text'|'email'|'password'|'number'|'search'|'tel'|'url'|'date'|'datetime-local'|'month'|'time'|'week'|string} [type]
+ *   HTML input type.
+ *
+ * @property {string|number} [tabIndex]
+ *
+ * @property {string} [title]
+ *
+ * @property {string} [name]
+ *
+ * @property {boolean} [isValid]
+ *   Whether the field is valid — shows error text if false.
+ *
+ * @property {string} [errorMessage]
+ *
+ * @property {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange]
+ *   Change handler using your preferred full event signature.
+ *
+ * @property {string} [className]
+ *   Extra class names applied to the input wrapper.
+ *
+ * @property {string} [outerClassName]
+ *   Extra class names applied to the outer container.
+ *   Passing an mb-* class overrides the default mb-4 spacing.
+ *
+ * @property {string|number} [value]
+ *
+ * @property {IconComponent} [Icon]
+ *
+ * @property {'left'|'right'} [iconPosition]
+ *   Icon placement inside the input.
+ *
+ * @property {boolean} [isAnimated]
+ *   Enables focus animation on the icon.
+ *
+ * @property {boolean} [required]
+ *
+ * @property {boolean} [hideLabel]
+ *   Hides the visible label while keeping the input accessible.
+ *
+ * @property {boolean} [disabled]
+ *
+ * @property {boolean} [shouldRenderCustomComponent]
+ *
+ * @property {CustomComponent} [customComponent]
+ *
+ * @property {Object<string, any>} [customComponentProps]
+ *
+ * @property {string} [dataCy]
+ *   Override for auto-generated test selector.
  */
 
-/**
- * ForwardRef Input component with complete JSDoc typings.
- *
- * @param {InputProps & React.InputHTMLAttributes<HTMLInputElement>} props
- * @param {React.Ref<HTMLInputElement>} ref
+/**
+ * ForwardRef Input component with complete JSDoc typings.
+ *
+ * @param {InputProps & React.InputHTMLAttributes<HTMLInputElement>} props
+ * @param {React.Ref<HTMLInputElement>} ref
  */
 
 const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_ref, ref) => {
@@ -2057,9 +2062,10 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
     title = "",
     name,
     isValid = true,
-    errorMessage = `${label} is required`,
+    errorMessage,
     onChange,
     className = "",
+    outerClassName = "",
     value,
     Icon,
     // Icon component
@@ -2081,11 +2087,15 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
     dataCy,
     ...rest
   } = _ref;
+  const hasLabel = Boolean(label);
+  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 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: "mb-4 flex flex-col",
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    className: outerClasses,
+    children: [hasLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_Text_Text__WEBPACK_IMPORTED_MODULE_1__["default"], {
       as: "label",
       variant: "label",
       htmlFor: name,
@@ -2120,7 +2130,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
           name,
           dataCy
         }),
-        "aria-label": hideLabel ? label : undefined,
+        "aria-label": hideLabel && hasLabel ? label : undefined,
         "aria-invalid": !isValid,
         "aria-describedby": !isValid ? `${name}-error` : undefined,
         ...rest
@@ -2135,7 +2145,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
       variant: "small",
       id: `${name}-error`,
       className: "text-[--color-util-red]",
-      children: errorMessage
+      children: resolvedErrorMessage
     }), shouldRenderCustomComponent && customComponent && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(customComponent, {
       ...customComponentProps
     })]