@epam/ai-dial-ui-kit 0.2.0-rc.2 → 0.2.0-rc.21

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

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+import { SearchSize } from '../../types/search';
+export interface DialSearchProps {
+    elementId: string;
+    value?: string | number | null;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    cssClass?: string;
+    containerCssClass?: string;
+    onChange?: (value: string) => void;
+    size?: SearchSize;
+}
+/**
+ * A search input component with a customizable placeholder, icons, flexible props, and the ability
+ * to clear the input value via a clear button. Supports multiple sizes for flexible layouts.
+ *
+ * @example
+ * ```tsx
+ * <DialSearch
+ *   elementId="search"
+ *   value={query}
+ *   placeholder="Search"
+ *   size={SearchSize.Small}
+ *   onChange={(value) => setQuery(value)}
+ *   disabled={false}
+ * />
+ * ```
+ *
+ * @param elementId - Unique identifier for the input element
+ * @param [value] - The current value of the input
+ * @param [placeholder] - Placeholder text shown when input is empty
+ * @param [disabled=false] - Whether the input is disabled
+ * @param [readonly=false] - Whether the input is read-only (non-editable)
+ * @param [invalid=false] - Whether the input should be styled as invalid
+ * @param [cssClass] - Additional CSS classes applied to the input element
+ * @param [containerCssClass] - Additional CSS classes applied to the container
+ * @param [onChange] - Callback fired when the input value changes
+ * @param [size=SearchSize.Base] - The size of the search input. Uses the {@link SearchSize} enum.
+ */
+export declare const DialSearch: FC<DialSearchProps>;

package/dist/src/components/Search/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const SIZE_CONFIG: {
+    small: {
+        textClass: string;
+        containerClass: string;
+        iconSize: number;
+        iconStroke: number;
+    };
+    base: {
+        textClass: string;
+        containerClass: string;
+        iconSize: number;
+        iconStroke: number;
+    };
+};

package/dist/src/components/Steps/Step.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Step } from '../../models/step';
+export interface DialStepProps {
+    step: Step;
+    index: number;
+    currentStep: string;
+    onChangeStep: (step: string) => void;
+}
+export declare const DialStep: FC<DialStepProps>;

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

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { Step } from '../../models/step';
+export interface DialStepsProps {
+    steps: Step[];
+    currentStep: string;
+    onChangeStep: (step: string) => void;
+}
+/**
+ * Props for the DialSteps component, which renders a multi-step navigation UI.
+ *
+ * @example
+ * ```tsx
+ * <DialSteps
+ *   steps={[{ id: 'step1', label: 'Step 1', status: StepStatus.VALID }, { id: 'step2', label: 'Step 2', status: StepStatus.ERROR }]}
+ *   currentStep="step1"
+ *   onChangeStep={(step) => console.log(step)}
+ * />
+ * ```
+ *
+ * @param steps - Array of step objects to display
+ * @param currentStep - The id of the currently active step
+ * @param onChangeStep - Callback to set the current step by id
+ */
+export declare const DialSteps: FC<DialStepsProps>;

package/dist/src/components/Steps/tests/Steps.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/Steps/utils.d.ts

@@ -0,0 +1,3 @@
+import { Step } from '../../models/step';
+export declare const getStepClass: (step: Step, currentStepId: string) => "border-accent-secondary text-primary" | "border-red-900 text-primary" | "border-accent-primary text-primary" | "border-primary text-white" | "border-red-900 text-error" | "border-primary text-secondary";
+export declare const getCircleClass: (step: Step, currentStepId: string) => "bg-accent-secondary" | "bg-red-400" | "bg-accent-primary" | "bg-layer-4";

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

@@ -7,7 +7,7 @@ export interface DialSwitchProps {
     onChange?: (value: boolean) => void;
 }
 /**
- * A flexible input component with icon support and various styling options
+ * A Switch component with various styling options
  *
  * @example
  * ```tsx

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

@@ -30,8 +30,8 @@ export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
  * @param [disabled=false] - Whether the input is disabled and cannot be interacted with
  * @param [invalid=false] - Whether the input has validation errors (applies error styling)
  * @param [defaultEmptyText="None"] - Text to display when readonly and value is empty
- * @param [iconBeforeInput] - Icon or element to display before the input
- * @param [iconAfterInput] - Icon or element to display after the input
+ * @param [iconBefore] - Icon or element to display before the input
+ * @param [iconAfter] - Icon or element to display after the input
  * @param [textBeforeInput] - Text to display before the input
  * @param [elementContainerCssClass] - Additional CSS classes to apply to the input container
  * @param [containerCssClass] - Additional CSS classes to apply to the outer container

package/dist/src/constants/icon.d.ts

@@ -0,0 +1,5 @@
+export declare const BASE_ICON_SIZE = 18;
+export declare const BASE_ICON_PROPS: {
+    size: number;
+    stroke: number;
+};

package/dist/src/index.d.ts

@@ -1,13 +1,31 @@
-export { DialButton } from './components/Button/Button';
 export { DialErrorText } from './components/ErrorText/ErrorText';
 export { DialFieldLabel } from './components/Field/Field';
 export { DialIcon } from './components/Icon/Icon';
 export { DialAlert } from './components/Alert/Alert';
+export { DialLoader } from './components/Loader/Loader';
+export { DialCheckbox } from './components/Checkbox/Checkbox';
+export { DialSteps } from './components/Steps/Steps';
+export { DialRadioButton } from './components/RadioButton/RadioButton';
+export { DialRadioGroup } from './components/RadioGroup/RadioGroup';
+export { DialNoDataContent } from './components/NoDataContent/NoDataContent';
+export { DialButton } from './components/Button/Button';
+export { DialCloseButton } from './components/CloseButton/CloseButton';
 export { DialTextarea } from './components/Textarea/Textarea';
 export { DialTextAreaField } from './components/TextAreaField/TextAreaField';
 export { DialTooltip } from './components/Tooltip/Tooltip';
 export { DialSwitch } from './components/Switch/Switch';
+export { DialPopup } from './components/Popup/Popup';
+export { DialConfirmationPopup } from './components/ConfirmationPopup/ConfirmationPopup';
 export { DialInput } from './components/Input/Input';
 export { DialNumberInputField } from './components/InputField/InputField';
 export { DialTextInputField } from './components/InputField/InputField';
+export { DialPasswordInputField } from './components/PasswordInput/PasswordInputField';
+export { DialPasswordInput } from './components/PasswordInput/PasswordInput';
+export { DialSearch } from './components/Search/Search';
 export { AlertVariant } from './types/alert';
+export { ButtonVariant } from './types/button';
+export { RadioGroupOrientation } from './types/radio-group';
+export { PopupSize } from './types/popup';
+export { ConfirmationPopupVariant } from './types/confirmation-popup';
+export { StepStatus } from './models/step';
+export type { Step } from './models/step';

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

@@ -10,8 +10,8 @@ export interface InputBaseProps {
     disabled?: boolean;
     readonly?: boolean;
     invalid?: boolean;
-    iconAfterInput?: ReactNode;
-    iconBeforeInput?: ReactNode;
+    iconAfter?: ReactNode;
+    iconBefore?: ReactNode;
     min?: number;
     max?: number;
     textBeforeInput?: string;

package/dist/src/models/step.d.ts

@@ -0,0 +1,9 @@
+export interface Step {
+    id: string;
+    name: string;
+    status?: StepStatus;
+}
+export declare enum StepStatus {
+    VALID = "valid",
+    ERROR = "error"
+}

package/dist/src/types/button.d.ts

@@ -0,0 +1,6 @@
+export declare enum ButtonVariant {
+    Primary = "primary",
+    Secondary = "secondary",
+    Tertiary = "tertiary",
+    Danger = "danger"
+}

package/dist/src/types/confirmation-popup.d.ts

@@ -0,0 +1,4 @@
+export declare enum ConfirmationPopupVariant {
+    Info = "info",
+    Danger = "danger"
+}

package/dist/src/types/popup.d.ts

@@ -0,0 +1,5 @@
+export declare enum PopupSize {
+    Sm = "sm",
+    Md = "md",
+    Lg = "lg"
+}

package/dist/src/types/radio-group.d.ts

@@ -0,0 +1,4 @@
+export declare enum RadioGroupOrientation {
+    Row = "Row",
+    Column = "Column"
+}

package/dist/src/types/search.d.ts

@@ -0,0 +1,4 @@
+export declare enum SearchSize {
+    Small = "small",
+    Base = "base"
+}

package/package.json

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