@epam/ai-dial-ui-kit 0.13.0-dev.36 → 0.13.0-dev.37

package/dist/src/components/New/InfoButton/InfoButton.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+export interface InfoButtonProps {
+    caption?: string;
+    onClick?: () => void;
+    'aria-label'?: string;
+}
+/**
+ * An Info button component with a customizable icon and accessible label.
+ *
+ * @example
+ * ```tsx
+ * <InfoButton
+ *   caption="Info"
+ * />
+ * ```
+ *
+ * The button is icon-only, so it needs an accessible name. `caption` is used as
+ * the name because a tooltip alone never reaches assistive tech — pass a short
+ * `aria-label` when the caption is a long sentence.
+ *
+ * @param [caption] - Text shown in the tooltip, and the fallback accessible name
+ * @param [onClick] - Click handler for the info button
+ * @param [aria-label] - Accessible name; takes precedence over `caption`
+ */
+export declare const InfoButton: FC<InfoButtonProps>;

package/dist/src/components/New/InfoButton/InfoButton.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InfoButton } from './InfoButton';
+declare const meta: Meta<typeof InfoButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+/**
+ * A long caption still works as a tooltip, but a short `aria-label` keeps the
+ * announced name scannable.
+ */
+export declare const ExplicitAccessibleName: Story;

package/dist/src/components/New/InlineSelect/InlineSelect.d.ts

@@ -30,6 +30,11 @@ export interface InlineSelectProps {
     matchReferenceWidth?: boolean;
     /** Additional CSS classes applied to the dropdown overlay. */
     listClassName?: string;
+    /**
+     * Accessible name for the trigger. Without it the control announces only its
+     * current value ("Option A"), never what is being selected.
+     */
+    ariaLabel?: string;
 }
 /**
  * An inline select control combining `InlineSelectTrigger` with `DialDropdown`.

package/dist/src/components/New/Input/Button/InputButton.d.ts

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+import { ElementSize } from '../../../../types/size';
+export interface InputButtonProps {
+    icon: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    size?: ElementSize;
+    className?: string;
+}
+/**
+ * An Input button component with a customizable icon and accessible label.
+ *
+ * @example
+ * ```tsx
+ * <InputButton
+ *   icon={<IconInfoCircle size={16} />}
+ * />
+ * ```
+ *
+ * @param [icon] - Icon to display inside the input button
+ * @param [onClick] - Click handler for the info button
+ * @param [disabled] - Whether the button is disabled
+ * @param [size] - Size of the input button, which adjusts the icon size and padding. Uses the {@link ElementSize} enum.
+ */
+export declare const InputButton: FC<InputButtonProps>;

package/dist/src/components/New/Input/Button/constants.d.ts

@@ -0,0 +1 @@
+export declare const inputButtonClassName = "bg-layer-4 flex items-center justify-center enabled:text-secondary enabled:hover:text-accent-primary enabled:active:bg-controls-accent-primary-alpha-active enabled:hover:bg-accent-primary-alpha enabled:active:text-accent-primary";

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

@@ -0,0 +1,51 @@
+import { FC, InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { DialLabelProps } from '../../Label/Label';
+import { ElementSize } from '../../../types/size';
+import { InputButtonProps } from './Button/InputButton';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+    labelProps?: DialLabelProps;
+    inputButtonProps?: InputButtonProps;
+    size?: ElementSize;
+    invalid?: boolean;
+    error?: string;
+    caption?: string;
+    tooltipText?: string;
+    iconBefore?: ReactNode;
+    iconAfter?: ReactNode;
+    prefix?: string;
+    postfix?: string;
+    inputRef?: Ref<HTMLInputElement>;
+    onChange?: (value?: string) => void;
+    containerClassName?: string;
+    wrapperClassName?: string;
+}
+/**
+ * A flexible input component with icon support and various styling options
+ * aliases: TextField|FormInput
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   id="search"
+ *   placeholder="Search..."
+ *   iconBefore={<SearchIcon />}
+ *   iconAfter={<ClearIcon />}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @param [size=ElementSize.Standard] - The size of the input, which can be 'small', 'standard', or 'large'.
+ * @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 [suffix] - Text to display inside the input on the right
+ * @param [containerClassName] - Additional CSS classes to apply to the container div
+ * @param [wrapperClassName] - Additional CSS classes to apply to the input wrapper div
+ * @param [className] - Additional CSS classes to apply to the input element
+ * @param [inputRef] - Ref to access the underlying input element
+ * @param [error] - Error message to display below the input (also adds error styling)
+ * @param [caption] - Helper text to display below the input
+ * @param [onChange] - Callback function called when the input value changes
+ */
+export declare const Input: FC<InputProps>;

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

@@ -0,0 +1,2 @@
+import { KeyboardEvent } from 'react';
+export declare const handleKeyDown: (e: KeyboardEvent<HTMLInputElement>, type?: string, min?: number | string, max?: number | string) => void;

package/dist/src/components/New/Label/Label.d.ts

@@ -0,0 +1,32 @@
+import { FC, LabelHTMLAttributes, ReactNode } from 'react';
+import { ElementSize } from '../../../types/size';
+type NativeLabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'defaultValue' | 'onChange'>;
+export interface LabelProps extends NativeLabelProps {
+    label?: ReactNode;
+    required?: boolean;
+    caption?: string;
+    size?: ElementSize;
+}
+/**
+ * A label component
+ * aliases: FormLabel|RequiredIndicator
+ *
+ * @example
+ * ```tsx
+ * // Basic  label
+ * <Label htmlFor="email-input" label="Email Address" />
+ * ```
+ *
+ * Pass `htmlFor` with the id of the control this labels — without it the label
+ * names nothing. The `caption` info button renders as a sibling of the `<label>`
+ * rather than inside it: a button nested in a label forwards its clicks to the
+ * labelled control and leaks its own text into that control's accessible name.
+ *
+ * @param [label] - The label text to display for the label
+ * @param [required=false] - Whether the field is required. Renders a visual `*`
+ * plus visually hidden text so the requirement is announced too.
+ * @param [caption] - Explanatory text, exposed through an info button next to the label
+ * @param [size] - The size of the label, which can be 'small', 'medium', or 'large'.
+ */
+export declare const Label: FC<LabelProps>;
+export {};

package/dist/src/components/New/Notification/Notification.d.ts

@@ -18,6 +18,12 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * Renders a colored container with an icon, message text, and an optional
  * close button.
  *
+ * The container is a live region whose politeness follows the variant: `error`
+ * and `warning` use `role="alert"` (assertive, interrupts the screen reader),
+ * every other variant uses `role="status"` (polite, queues). Pass an explicit
+ * `role` to override — including for a notification that is static page content
+ * rather than an update.
+ *
  * @example
  * ```tsx
  * <Notification

package/dist/src/components/New/Notification/constants.d.ts

@@ -5,4 +5,15 @@ export declare const variantIcons: (props: {
     stroke: number;
 }) => Record<NotificationVariant, ReactNode>;
 export declare const notificationVariantClassNameMap: Record<NotificationVariant, string>;
+/**
+ * Live-region role per variant.
+ *
+ * `role="alert"` is implicitly `aria-live="assertive"`: it interrupts whatever a
+ * screen reader is currently saying. That is right for a problem the user must
+ * deal with, and wrong for routine feedback — an assertive info or success
+ * message cuts the user off mid-sentence, and a section message rendered with
+ * the page announces itself on mount even though nothing changed.
+ * `role="status"` is polite and queues instead.
+ */
+export declare const notificationVariantRoleMap: Record<NotificationVariant, 'alert' | 'status'>;
 export declare const alertBaseClassName = "items-center justify-between rounded-xl relative gap-3 p-3 border flex border-transparent";

package/dist/src/components/New/Textarea/Textarea.d.ts

@@ -0,0 +1,38 @@
+import { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';
+import { DialLabelProps } from '../../Label/Label';
+export interface TextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, HTMLTextAreaElement> {
+    labelProps?: DialLabelProps;
+    invalid?: boolean;
+    containerClassName?: string;
+    resize?: boolean;
+    error?: string;
+    caption?: string;
+    onChange?: (value: string) => void;
+}
+/**
+ * A flexible textarea component with validation support and consistent styling
+ * aliases: MultilineInput|TextBox
+ *
+ * @example
+ * ```tsx
+ * <DialTextarea
+ *   id="description"
+ *   placeholder="Enter description..."
+ *   value={value}
+ *   onChange={(value) => setValue(value)}
+ * />
+ * ```
+ * @params Component properties extending:
+ * - {@link TextareaHTMLAttributes<HTMLTextAreaElement>} - Standard textarea attributes (id, value, placeholder, disabled, etc.)
+ * - {@link HTMLTextAreaElement} - The underlying HTML textarea element type
+ *
+ * @param [onChange] - Callback function called when the textarea value changes
+ * @param [labelProps] - Props for the field label, including `label` (label text) and `required` (whether to show required indicator)
+ * @param [className=""] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName=""] - Additional CSS classes to apply to the container div
+ * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)
+ * @param [resize=false] - Whether the textarea has possibility to resize
+ * @param [error] - Error message to display below the textarea (also adds error styling)
+ * @param [caption] - Optional caption text to display below the textarea
+ */
+export declare const Textarea: FC<TextareaProps>;

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

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-export interface DialSpinnerProps {
+export interface SpinnerProps {
     size?: number;
     className?: string;
     fullWidth?: boolean;
     ariaLabel?: string;
 }
-export declare const DialSpinner: FC<DialSpinnerProps>;
+export declare const Spinner: FC<SpinnerProps>;

package/dist/src/index.d.ts

@@ -19,8 +19,8 @@ export { DialIcon } from './components/Icon/Icon';
 export { DialNotification } from './components/Notification/Notification.tsx';
 export type { DialNotificationProps } from './components/Notification/Notification.tsx';
 export { DialLoader } from './components/Loader/Loader';
-export { DialSpinner } from './components/Spinner/Spinner';
-export type { DialSpinnerProps } from './components/Spinner/Spinner';
+export { Spinner } from './components/Spinner/Spinner';
+export type { SpinnerProps } from './components/Spinner/Spinner';
 export { DialProgressBar, DialProgressBarSize, } from './components/ProgressBar/ProgressBar';
 export type { DialProgressBarProps } from './components/ProgressBar/ProgressBar';
 export { DialPagination } from './components/Pagination/Pagination';
@@ -167,3 +167,7 @@ export { ButtonDropdown } from './components/New/ButtonDropdown/ButtonDropdown';
 export type { ButtonDropdownProps } from './components/New/ButtonDropdown/ButtonDropdown';
 export { InlineSelect, InlineSelectTrigger, } from './components/New/InlineSelect/InlineSelect';
 export type { InlineSelectProps, InlineSelectTriggerProps, } from './components/New/InlineSelect/InlineSelect';
+export { InfoButton } from './components/New/InfoButton/InfoButton';
+export type { InfoButtonProps } from './components/New/InfoButton/InfoButton';
+export type { LabelProps } from './components/New/Label/Label';
+export { Label } from './components/New/Label/Label';

package/dist/src/utils/__tests__/accessible-name.spec.d.ts

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

package/dist/src/utils/accessible-name.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+/**
+ * Picks the first usable accessible name from an ordered list of candidates.
+ *
+ * Only non-empty strings can serve as an `aria-label`, so any candidate that is
+ * a different kind of `ReactNode` (an element, `undefined`, a number) is
+ * skipped. Callers pass candidates in priority order, which lets each component
+ * declare its own naming precedence.
+ *
+ * A tooltip is a common last resort: a control whose only label is a tooltip
+ * would otherwise be unnamed, because `DialTooltip` puts its `aria-describedby`
+ * on a wrapper element rather than on the control itself, and is suppressed on
+ * mobile. Pass the tooltip only when nothing else names the control — as an
+ * `aria-label` it overrides the element's own content.
+ *
+ * @param candidates - Naming candidates, highest priority first
+ * @returns The first non-empty string candidate, or `undefined` if there is none
+ */
+export declare const resolveAccessibleName: (...candidates: ReactNode[]) => string | undefined;

package/package.json

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