@epam/ai-dial-ui-kit 0.3.0-rc.53 → 0.3.0-rc.54

package/dist/src/components/FormItem/FormItem.d.ts

@@ -1,21 +1,13 @@
 import { FC, ReactNode } from 'react';
-import { FormItemOrientation } from '../../types/form-item';
-export interface DialFormItemProps {
+import { DialFormItemBaseProps } from '../../types/form-item';
+export interface DialFormItemProps extends DialFormItemBaseProps {
     elementId: string;
-    label?: string | ReactNode;
-    optional?: boolean;
-    optionalText?: string;
-    description?: string;
-    error?: string | ReactNode | boolean;
-    orientation?: FormItemOrientation;
     labelVisuallyHidden?: boolean;
     cssClass?: string;
     childrenCssClass?: string;
     labelCssClass?: string;
     errorCssClass?: string;
     children: ReactNode;
-    captionDescription?: string;
-    readonly?: boolean;
     value?: ReactNode | string;
     defaultEmptyText?: string;
 }
@@ -56,22 +48,17 @@ export interface DialFormItemProps {
  * </DialFormItem>
  * ```
  *
+ * @params - Component properties extending:
+ * - {@link DialFormItemBaseProps} - Form item properties (label, error, description, orientation, etc.)
+ *
  * @param elementId - Unique identifier for the form control element (used for accessibility)
- * @param [label] - The label text or ReactNode to display above the form control
- * @param [optional=false] - Whether the field is optional (displays "(Optional)" indicator)
- * @param [optionalText="(Optional)"] - Custom text for optional indicator
- * @param [description] - Additional description text, displayed below the label.
- * @param [error] - Error message text or ReactNode to display below the form control (replaces description when present)
- * @param [orientation='vertical'] - Layout orientation, either 'vertical' (label above control) or 'horizontal' (label to the left)
- * @param [labelVisuallyHidden=false] - Whether to visually hide the label (still accessible to screen readers)
- * @param [cssClass] - Additional CSS classes to apply to the container div
- * @param [childrenCssClass] - Additional CSS classes to apply to the children container div
- * @param [labelCssClass] - Additional CSS classes to apply to the label element
- * @param [errorCssClass] - Additional CSS classes to apply to the error message element
- * @param [captionDescription] - Additional caption description text, displayed below the form control.
- * @param [readonly=false] - Whether the form control is read-only (displays value as text, no input element)
- * @param [value] - The current value of the form control
- * @param [defaultEmptyText="None"] - Text to display when readonly and value is empty
+ * @param labelVisuallyHidden - Whether to visually hide the label (still accessible to screen readers, default: false)
+ * @param cssClass - Additional CSS classes to apply to the container div
+ * @param childrenCssClass - Additional CSS classes to apply to the children container div
+ * @param labelCssClass - Additional CSS classes to apply to the label element
+ * @param errorCssClass - Additional CSS classes to apply to the error message element
  * @param children - The form control element(s) to render inside the DialFormItem
+ * @param value - The current value of the form control (for readonly mode)
+ * @param defaultEmptyText - Text to display when readonly and value is empty (default: "None")
  */
 export declare const DialFormItem: FC<DialFormItemProps>;

package/dist/src/components/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import { FC, FocusEvent } from 'react';
-import { InputBaseProps } from '../../models/field-control-props';
-export interface DialInputProps extends InputBaseProps {
+import { InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
+export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseProps> {
     type?: string;
     containerCssClass?: string;
     cssClass?: string;
@@ -24,28 +24,17 @@ export interface DialInputProps extends InputBaseProps {
  * />
  * ```
  *
- * @param elementId - Unique identifier for the input element
- * @param [value] - The current value of the input
- * @param [defaultValue] - The initial value of the input
- * @param [onChange] - Callback function called when the input value changes
- * @param [onBlur] - Callback function called when the input blurs
- * @param [iconBefore] - Icon or element to display before the input
- * @param [iconAfter] - Icon or element to display after the input
- * @param [placeholder] - Placeholder text displayed when input is empty
- * @param [containerCssClass] - Additional CSS classes to apply to the container div
- * @param [cssClass] - Additional CSS classes to apply to the input element
- * @param [type="text"] - The type of input (text, password, email, etc.)
- * @param [disabled=false] - Whether the input is disabled
- * @param [readonly=false] - Whether the input is read-only (prevents onChange from firing)
- * @param [invalid=false] - Whether the input has validation errors (applies error styling)
- * @param [hideBorder=false] - Whether to hide the input border styling
- * @param [min] - Minimum value for number inputs
- * @param [max] - Maximum value for number inputs
- * @param [prefix] - Text to display inside the input on the left
- * @param [suffix] - Text to display inside the input on the right
- * @param [textBeforeInput] - Text to display before the input in a separate field
- * @param [tooltipText] - The text to display inside the tooltip. If empty, the tooltip will display the value prop.
- * @param [tooltipTriggerClassName] - Additional CSS classes to apply to the tooltip
- * @param [textAfterInput] - Text to display after the input in a separate field
+ * @params Component properties extending:
+ * - {@link InputBaseProps} - Base input properties (elementId, value, placeholder, disabled, readonly, invalid, icons, etc.)
+ * - {@link NumberInputBaseProps} - Number input properties (min, max) - partial
+ *
+ * @param type - The HTML input type (text, password, email, number, etc.)
+ * @param containerCssClass - Additional CSS classes to apply to the container div
+ * @param cssClass - Additional CSS classes to apply to the input element
+ * @param hideBorder - Whether to hide the input border styling
+ * @param tooltipText - The text to display inside the tooltip. If empty, the tooltip will display the value prop.
+ * @param tooltipTriggerClassName - Additional CSS classes to apply to the tooltip
+ * @param onChange - Callback function called when the input value changes
+ * @param onBlur - Callback function called when the input blurs
  */
 export declare const DialInput: FC<DialInputProps>;

package/dist/src/components/InputField/InputField.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
-import { FieldControlProps, InputBaseProps } from '../../models/field-control-props';
-export interface DialInputFieldBaseProps extends FieldControlProps, InputBaseProps {
+import { FieldControlProps, InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
+import { DialFormItemBaseProps } from '../../types/form-item';
+export interface DialInputFieldBaseProps extends FieldControlProps, DialFormItemBaseProps, InputBaseProps {
     value?: string | number;
     defaultEmptyText?: string;
     errorText?: string;
@@ -8,16 +9,12 @@ export interface DialInputFieldBaseProps extends FieldControlProps, InputBasePro
     elementContainerCssClass?: string;
     containerCssClass?: string;
 }
-export interface DialInputFieldProps extends DialInputFieldBaseProps {
+export interface DialInputFieldProps extends DialInputFieldBaseProps, Partial<NumberInputBaseProps> {
     type: string;
     onChange?: (value?: string | number) => void;
-    min?: number;
-    max?: number;
 }
-export interface DialNumberInputFieldProps extends DialInputFieldBaseProps {
+export interface DialNumberInputFieldProps extends DialInputFieldBaseProps, Partial<NumberInputBaseProps> {
     onChange?: (value?: number | string) => void;
-    min?: number;
-    max?: number;
 }
 /**
  * A number input field component
@@ -33,25 +30,14 @@ export interface DialNumberInputFieldProps extends DialInputFieldBaseProps {
  * />
  * ```
  *
- * @param elementId - Unique identifier for the input element
- * @param [fieldTitle] - The label text to display above the input
- * @param [placeholder] - Placeholder text shown when input is empty
- * @param [value] - The current numeric value of the input
- * @param [onChange] - Callback function called when the input value changes.
- *                   Returns either a number (for most values) or a string (for decimal values < 1 with leading zeros)
- * @param [optional=false] - Whether the field is optional
- * @param [disabled=false] - Whether the input is disabled
- * @param [readonly=false] - Whether the input is read-only
- * @param [invalid=false] - Whether the input has validation errors (applies error styling)
- * @param [errorText] - Error message text to display below the input
- * @param [defaultEmptyText="None"] - Text to display when readonly and value is empty
- * @param [iconBefore] - Icon or element to display before the input
- * @param [iconAfter] - Icon or element to display after the input
- * @param [elementCssClass] - Additional CSS classes to apply to the input element
- * @param [elementContainerCssClass] - Additional CSS classes to apply to the input container
- * @param [containerCssClass] - Additional CSS classes to apply to the DialNumberInputField container
- * @param [min] - Minimum allowed value for the number input
- * @param [max] - Maximum allowed value for the number input
+ * @params - Component properties extending:
+ * - {@link FieldControlProps} - Field control properties (fieldTitle, optional)
+ * - {@link DialFormItemBaseProps} - Form item properties (label, error, description, etc.)
+ * - {@link InputBaseProps} - Base input properties (elementId, value, placeholder, disabled, readonly, invalid, icons, etc.)
+ * - {@link NumberInputBaseProps} - Number input properties (min, max) - partial
+ *
+ * @param onChange - Callback function called when the input value changes.
+ *                        Returns either a number (for most values) or a string (for decimal values < 1 with leading zeros)
  */
 export declare const DialNumberInputField: FC<DialNumberInputFieldProps>;
 export interface DialTextInputFieldProps extends DialInputFieldBaseProps {
@@ -72,21 +58,11 @@ export interface DialTextInputFieldProps extends DialInputFieldBaseProps {
  * />
  * ```
  *
- * @param elementId - Unique identifier for the input element
- * @param [fieldTitle] - The label text to display above the input
- * @param [placeholder] - Placeholder text shown when input is empty
- * @param [value] - The current text value of the input
- * @param [onChange] - Callback function called when the input value changes, receives the new string value
- * @param [optional=false] - Whether the field is optional (displays "(Optional)" indicator)
- * @param [disabled=false] - Whether the input is disabled and cannot be interacted with
- * @param [readonly=false] - Whether the input is read-only (displays value as text, no input element)
- * @param [invalid=false] - Whether the input has validation errors (applies error styling)
- * @param [errorText] - Error message text to display below the input
- * @param [defaultEmptyText="None"] - Text to display when readonly and value is empty
- * @param [iconBefore] - Icon or element to display before the input
- * @param [iconAfter] - Icon or element to display after the input
- * @param [elementCssClass] - Additional CSS classes to apply to the input element
- * @param [elementContainerCssClass] - Additional CSS classes to apply to the input container
- * @param [containerCssClass] - Additional CSS classes to apply to the outer container
+ * @params - Component properties extending:
+ * - {@link FieldControlProps} - Field control properties (fieldTitle, optional)
+ * - {@link DialFormItemBaseProps} - Form item properties (label, error, description, etc.)
+ * - {@link InputBaseProps} - Base input properties (elementId, value, placeholder, disabled, readonly, invalid, icons, etc.)
+ *
+ * @param onChange - Callback function called when the input value changes, receives the new string value
  */
 export declare const DialTextInputField: FC<DialTextInputFieldProps>;

package/dist/src/constants/storybook/form-item.d.ts

@@ -0,0 +1,3 @@
+import { DialFormItemBaseProps } from '../../types/form-item';
+import { ArgTypes } from '@storybook/react';
+export declare const dialFormItemBaseArgTypes: Partial<ArgTypes<DialFormItemBaseProps>>;

package/dist/src/constants/storybook/input.d.ts

@@ -0,0 +1,5 @@
+import { FieldControlProps, InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
+import { ArgTypes } from '@storybook/react';
+export declare const fieldControlArgTypes: Partial<ArgTypes<FieldControlProps>>;
+export declare const inputBaseArgTypes: Partial<ArgTypes<InputBaseProps>>;
+export declare const numberInputBaseArgTypes: Partial<ArgTypes<NumberInputBaseProps>>;

package/dist/src/models/field-control-props.d.ts

@@ -1,8 +1,31 @@
 import { ReactNode } from 'react';
+/**
+ * Base properties for field controls providing label and optional status
+ *
+ * @param fieldTitle - The label text to display above the input field
+ * @param optional - Whether the field is optional (displays "(Optional)" indicator when true)
+ */
 export interface FieldControlProps {
     fieldTitle?: string;
     optional?: boolean;
 }
+/**
+ * Base properties for input elements providing core input functionality
+ *
+ * @param elementId - Unique identifier for the input element
+ * @param value - The current value of the input (string, number, or null)
+ * @param defaultValue - The default value for the input
+ * @param placeholder - Placeholder text shown when input is empty
+ * @param disabled - Whether the input is disabled and cannot be interacted with
+ * @param readonly - Whether the input is read-only (displays value as text, no input element)
+ * @param invalid - Whether the input has validation errors (applies error styling)
+ * @param iconAfter - Icon or element to display after the input
+ * @param iconBefore - Icon or element to display before the input
+ * @param textBeforeInput - Text to display before the input
+ * @param textAfterInput - Text to display after the input
+ * @param prefix - Text to display inside the input on the left
+ * @param suffix - Text to display inside the input on the right
+ */
 export interface InputBaseProps {
     elementId: string;
     value?: string | number | null;
@@ -13,10 +36,18 @@ export interface InputBaseProps {
     invalid?: boolean;
     iconAfter?: ReactNode;
     iconBefore?: ReactNode;
-    min?: number;
-    max?: number;
     textBeforeInput?: string;
     textAfterInput?: string;
     prefix?: string;
     suffix?: string;
 }
+/**
+ * Properties specific to numeric input controls for validation and formatting
+ *
+ * @param min - Minimum allowed value for the number input
+ * @param max - Maximum allowed value for the number input
+ */
+export interface NumberInputBaseProps {
+    min?: number;
+    max?: number;
+}

package/dist/src/types/form-item.d.ts

@@ -1,4 +1,33 @@
+import { ReactNode } from 'react';
+/**
+ * Orientation options for form item layout
+ *
+ * @param Vertical - Vertical layout with label above the input
+ * @param Horizontal - Horizontal layout with label beside the input
+ */
 export declare enum FormItemOrientation {
     Vertical = "vertical",
     Horizontal = "horizontal"
 }
+/**
+ * Base properties for form item components providing layout, labeling, and validation display
+ *
+ * @param label - The label text or element to display for the form item
+ * @param optional - Whether the field is optional (displays optional indicator)
+ * @param optionalText - Custom text to display for optional fields (default: "(Optional)")
+ * @param description - Description text to display below the label
+ * @param error - Error message, element, or boolean indicating validation state
+ * @param captionDescription - Additional caption or description text
+ * @param readonly - Whether the form item is in read-only mode
+ * @param orientation - Layout orientation for the form item
+ */
+export interface DialFormItemBaseProps {
+    label?: string | ReactNode;
+    optional?: boolean;
+    optionalText?: string;
+    description?: string;
+    error?: string | ReactNode | boolean;
+    captionDescription?: string;
+    readonly?: boolean;
+    orientation?: FormItemOrientation;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.3.0-rc.53",
+  "version": "0.3.0-rc.54",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",