@epam/ai-dial-ui-kit 0.13.0-dev.57 → 0.13.0-dev.59

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

@@ -0,0 +1,72 @@
+import { FC } from 'react';
+import { ElementSize } from '../../../types/size';
+import { LabelProps } from '../Label/Label';
+export interface TagInputProps {
+    id?: string;
+    /** Controlled tag list. Pass it together with `onChange`. */
+    value?: string[];
+    /** Initial tag list when the component manages its own state. */
+    defaultValue?: string[];
+    size?: ElementSize;
+    labelProps?: LabelProps;
+    placeholder?: string;
+    caption?: string;
+    error?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    collapseTagOverflow?: boolean;
+    ariaLabel?: string;
+    tagListLabel?: string;
+    className?: string;
+    fieldClassName?: string;
+    tagClassName?: string;
+    onChange?: (tags: string[]) => void;
+}
+/**
+ * A tag input field: type a value and commit it with Enter or comma.
+ * aliases: MultiTag|TagField|ChipInput
+ * Design system 2.0
+ *
+ * The field is an {@link Input}, so it carries the 2.0 field styling, sizes,
+ * label, caption and error states, and the tags render as {@link Tag}s in its
+ * content slot. The field grows as tags wrap, unless `collapseTagOverflow` keeps
+ * them on one line behind a `+N` chip.
+ *
+ * Works controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).
+ * Duplicate tags are ignored. Backspace on an empty input removes the last tag.
+ *
+ * @example
+ * ```tsx
+ * const [tags, setTags] = useState<string[]>(['React']);
+ *
+ * <TagInput
+ *   id="skills"
+ *   labelProps={{ label: 'Skills' }}
+ *   placeholder="Add a skill"
+ *   caption="Press Enter or comma to add"
+ *   value={tags}
+ *   onChange={setTags}
+ * />
+ * ```
+ *
+ * @param [id] - The id of the text input, linked to the label.
+ * @param [value] - Controlled tag list.
+ * @param [defaultValue=[]] - Initial tag list when uncontrolled.
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px.
+ * @param [labelProps] - Props of the {@link Label} rendered above the field.
+ * @param [placeholder] - Placeholder shown while there are no tags.
+ * @param [caption] - Helper text rendered below the field when there is no `error`.
+ * @param [error] - Error message rendered below the field (pass `invalid` too for error styling).
+ * @param [invalid=false] - Applies the field's error styling.
+ * @param [disabled=false] - Disables typing and tag removal.
+ * @param [readOnly=false] - Shows the tags without allowing new ones or removal.
+ * @param [collapseTagOverflow=false] - Keep the tags on one line, replacing the ones that do not fit with a `+N` chip.
+ * @param [ariaLabel] - Accessible name for the text input; use it when there is no visible label.
+ * @param [tagListLabel="Tags"] - Accessible name of the tag list.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [fieldClassName] - Additional CSS classes for the field itself.
+ * @param [tagClassName] - Additional CSS classes applied to every tag.
+ * @param [onChange] - Called with the new list whenever a tag is added or removed.
+ */
+export declare const TagInput: FC<TagInputProps>;

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

@@ -0,0 +1,21 @@
+export interface VisibleTagCountInput {
+    /** Width the tags have to fit into, in px. */
+    availableWidth: number;
+    /** Rendered width of every tag, in render order. */
+    tagWidths: number[];
+    /** Rendered width of the `+N` chip shown when not every tag fits. */
+    overflowChipWidth: number;
+    /** Horizontal gap between two neighbouring tags. */
+    gap: number;
+}
+/**
+ * How many tags of a collapsed row fit before the `+N` chip has to take over.
+ *
+ * Kept pure and separate from the component because jsdom performs no layout:
+ * the widths come from the DOM, but the arithmetic they feed is the part worth
+ * testing.
+ *
+ * A non-positive `availableWidth` means nothing has been laid out yet, so every
+ * tag is reported as visible and the caller is expected to skip the update.
+ */
+export declare const getVisibleTagCount: ({ availableWidth, tagWidths, overflowChipWidth, gap, }: VisibleTagCountInput) => number;

package/dist/src/components/New/TagInput/utils.spec.d.ts

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

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

@@ -12,6 +12,7 @@ export interface TextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAttrib
 /**
  * A flexible textarea component with validation support and consistent styling
  * aliases: MultilineInput|TextBox
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -10,6 +10,7 @@ export interface DialNoDataContentProps {
 /**
  * A component for displaying a message and icon when there is no data to show.
  * aliases: EmptyState|NoResults
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -13,6 +13,7 @@ export interface DialNotificationProps extends Omit<HTMLAttributes<HTMLDivElemen
 /**
  * A contextual feedback component for displaying important messages.
  * aliases: Notification|StatusBanner
+ * Design system 1.0
  *
  * Renders a colored container with an icon, message text, and an optional
  * close button.

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

@@ -8,6 +8,7 @@ export interface DialNumberInputProps extends Omit<DialInputProps, 'onChange'> {
 /**
  * A number input field component
  * aliases: NumericField|NumberField
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -5,4 +5,7 @@ export interface DialPaginationProps {
     onPageChange: (page: number) => void;
     className?: string;
 }
+/**
+ * Design system 1.0
+ */
 export declare const DialPagination: FC<DialPaginationProps>;

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

@@ -3,6 +3,7 @@ import { DialInputProps } from '../Input/Input';
 /**
  * A password input component with show/hide functionality and customizable props.
  * aliases: SecureInput|ToggleablePassword
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -21,6 +21,7 @@ export interface DialPopupProps {
 /**
  * An accessible modal dialog component using Floating UI.
  * aliases: Modal|Dialog
+ * Design system 1.0
  *
  * Renders in a portal with a scrim overlay, focus management, header with a title,
  * content area, optional footer and a close control.

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

@@ -10,4 +10,7 @@ export interface DialProgressBarProps {
     className?: string;
     ariaLabel?: string;
 }
+/**
+ * Design system 1.0
+ */
 export declare const DialProgressBar: FC<DialProgressBarProps>;

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

@@ -18,6 +18,7 @@ export interface DialRadioButtonProps {
 /**
  * A stylized, accessible radio input with optional description.
  * aliases: ChoiceOption|RadioInput
+ * Design system 1.0
  *
  * Renders a native `<input type="radio" />` paired with a label. When `checked`
  * and `description` are provided, a supporting text block appears under the control.

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

@@ -24,6 +24,7 @@ export interface DialRadioGroupProps {
 /**
  * Groups multiple `DialRadio` options and renders custom content for the active option.
  * aliases: SelectionGroup|OptionGroup
+ * Design system 1.0
  *
  * Uses `DialField` as the field label and a container with `role="radiogroup"`.
  * Content provided in `radioButtons[].content` is shown under the currently active radio.

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

@@ -18,6 +18,7 @@ export interface RadioGroupPopupFieldProps extends Pick<DialLabelProps, 'label'
 /**
  * A composite field that opens a popup with a radio group selector.
  * aliases: PopupRadio|ChoicePopup
+ * Design system 1.0
  *
  * Renders a labeled readout using `DialInputPopup`; when opened, a `DialPopup`
  * displays a `DialRadioGroup` allowing the user to pick from a list of options.

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

@@ -6,6 +6,7 @@ export interface DialRemoveButtonProps extends Omit<DialButtonProps, 'iconBefore
 /**
  * A specialized button component for removal or delete actions.
  * aliases: DeleteButton|TrashButton
+ * Design system 1.0
  *
  * Renders a `DialDangerButton` with a predefined trash icon (`IconTrashX`) as the leading icon.
  * Additional props are passed directly to the underlying `DialDangerButton`.

package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts

@@ -6,6 +6,7 @@ export interface DialConditionalResizableContainerProps extends DialResizableCon
 /**
  * DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.
  * aliases: OptionalResize|ConditionalPanel
+ * Design system 1.0
  *
  * This component renders its children inside a resizable container only when `enabled` is true.
  * When `enabled` is false, children are rendered directly without any resizable behavior.

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

@@ -15,6 +15,7 @@ export interface DialResizableContainerProps {
 /**
  * DialResizableContainer — A reusable resizable container
  * aliases: ResizePanel|SizableContainer
+ * Design system 1.0
  *
  * supporting both **controlled** and **uncontrolled** width modes.
  *

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

@@ -3,6 +3,7 @@ import { DialSchemaRendererProps } from './types';
 /**
  * Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.
  * aliases: SchemaRenderer|JsonSchemaForm
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -9,6 +9,7 @@ export interface DialSearchProps extends Omit<DialInputProps, 'type' | 'size' |
 /**
  * A search input component with a customizable placeholder, icons, flexible props, and the ability
  * aliases: SearchField|QueryInput
+ * Design system 1.0
  *
  * to clear the input value via a clear button. Supports multiple sizes for flexible layouts.
  *

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

@@ -11,6 +11,7 @@ export interface DialSegmentedControlProps<T extends string> {
  * A single-select control for switching between a small set of mutually exclusive,
  * equally-sized options (e.g. view switchers).
  * aliases: SegmentedButton|ViewSwitcher
+ * Design system 1.0
  *
  * Renders a horizontal group of segments where every option is always visible and
  * equally sized. Supports 2 or more segments, optional per-option icons, and

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

@@ -41,6 +41,7 @@ export interface DialSelectProps {
 /**
  * A versatile select supporting single and multiple selections.
  * aliases: OptionPicker|ChoiceSelector
+ * Design system 1.0
  *
  * Single mode mirrors the legacy visual:
  * - Trigger shows the selected option's leading icon + label.

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

@@ -9,6 +9,7 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'className'
 /**
  * A Select field wrapper that composes `DialFormItem` and `DialSelect`.
  * aliases: SelectInput|ComboField
+ * Design system 1.0
  *
  * Provides unified label, description, error rendering and a readonly view that shows
  * the selected option labels (comma-separated in single mode, list in multiple).

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

@@ -10,6 +10,7 @@ export interface DialSharedEntityIndicatorProps {
 /**
  * A compact icon-only indicator to denote a "shared" entity.
  * aliases: SharedIcon|AccessIndicator
+ * Design system 1.0
  *
  * Renders a small arrow-up-right icon with token-based colors.
  *

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

@@ -24,6 +24,7 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * Skeleton
  * aliases: PlaceholderUI|ShimmerLoader
+ * Design system 2.0
  *
  * A placeholder component to show while content is loading.
  * Provides various skeleton shapes and configurations.

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

@@ -24,6 +24,7 @@ export interface DialSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
 /**
  * A range slider with a custom thumb showing the current value and optional labels.
  * aliases: RangeInput|TemperatureSlider
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -5,4 +5,7 @@ export interface SpinnerProps {
     fullWidth?: boolean;
     ariaLabel?: string;
 }
+/**
+ * Design system 2.0
+ */
 export declare const Spinner: FC<SpinnerProps>;

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

@@ -8,6 +8,7 @@ export interface DialStepsProps {
 /**
  * Props for the DialSteps component, which renders a multi-step navigation UI.
  * aliases: StepWizard|ProgressSteps
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -10,6 +10,7 @@ export interface DialSwitchProps {
 /**
  * A Switch component with various styling options
  * aliases: ToggleSwitch|BinaryToggle
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -19,6 +19,7 @@ export interface DialTabsProps {
 /**
  * A responsive and overflow-aware tabs component that automatically adapts its layout
  * aliases: TabNavigation|TabBar
+ * Design system 1.0
  *
  * between a scrollable tab bar and a dropdown menu on smaller screens.
  *

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

@@ -20,5 +20,6 @@ export interface DialTagProps {
 }
 /**
  * A compact label element used for selections, filters, or categories.
+ * Design system 1.0
  */
 export declare const DialTag: FC<DialTagProps>;

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

@@ -17,6 +17,7 @@ export interface DialTagInputProps extends DialLabelProps {
 /**
  * A tag input field that allows users to add multiple tags using the Enter or comma key.
  * aliases: MultiTag|TagField
+ * Design system 1.0
  *
  * Supports removing tags, displaying field labels, optional indicators, validation states,
  * and dynamic layout adjustment when tags wrap to multiple lines.

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

@@ -12,6 +12,7 @@ export interface DialTextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAt
 /**
  * A flexible textarea component with validation support and consistent styling
  * aliases: MultilineInput|TextBox
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -10,6 +10,7 @@ export interface DialTooltipProps extends DialTooltipContainerOptions {
 /**
  * A Tooltip component that displays information on hover
  * aliases: HoverPopover|InfoPopover
+ * Design system 1.0
  *
  * @example
  * ```tsx

package/dist/src/components/Tooltip/TooltipContainer.d.ts

@@ -5,6 +5,7 @@ interface Props {
 }
 /**
  * The container component that provides tooltip context and state management
+ * Design system 1.0
  *
  *
  * @param children - The tooltip trigger and content components

package/dist/src/components/Tooltip/TooltipContent.d.ts

@@ -4,6 +4,7 @@ export interface Props extends HTMLProps<HTMLDivElement> {
 }
 /**
  * The content area of a tooltip that displays the tooltip information
+ * Design system 1.0
  *
  * @param children - The content to display inside the tooltip
  * @param [style] - Additional inline styles for the tooltip content

package/dist/src/components/Tooltip/TooltipTrigger.d.ts

@@ -4,6 +4,7 @@ interface TooltipTriggerProps extends HTMLProps<HTMLElement> {
 }
 /**
  * The trigger element for a tooltip that can be clicked or hovered
+ * Design system 1.0
  *
  * @param children - The element that will trigger the tooltip
  * @param [asChild=false] - Whether to render as a child element instead of wrapping in a span

package/dist/src/index.d.ts

@@ -198,3 +198,14 @@ export type { CaptionTextProps } from './components/New/CaptionText/CaptionText'
 export { CaptionText, ErrorText, } from './components/New/CaptionText/CaptionText';
 export { Accordion } from './components/New/Accordion/Accordion';
 export type { AccordionProps } from './components/New/Accordion/Accordion';
+export { Switch } from './components/New/Switch/Switch';
+export type { SwitchProps } from './components/New/Switch/Switch';
+export { Tabs } from './components/New/Tabs/Tabs';
+export type { TabsProps, TabItem } from './components/New/Tabs/Tabs';
+export { FileDropzone } from './components/New/FileDropzone/FileDropzone';
+export type { FileDropzoneProps } from './components/New/FileDropzone/FileDropzone';
+export { Tag } from './components/New/Tag/Tag';
+export type { TagProps } from './components/New/Tag/Tag';
+export { TagInput } from './components/New/TagInput/TagInput';
+export type { TagInputProps } from './components/New/TagInput/TagInput';
+export { matchesAccept } from './utils/file-accept';

package/dist/src/utils/__tests__/file-accept.spec.d.ts

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

package/dist/src/utils/file-accept.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Tests a file against the value of a native `accept` attribute.
+ *
+ * The file picker filters by `accept` on its own, but a drop does not: dropping
+ * a `.png` onto an input that accepts `.md` hands the file over regardless. Any
+ * drop target therefore has to re-check what it received.
+ *
+ * Supports all three `accept` token forms — an extension (`.md`), a full MIME
+ * type (`text/markdown`) and a MIME wildcard (`image/*`). An empty or missing
+ * `accept` accepts everything, matching the attribute's own semantics.
+ *
+ * @param file - The file to test
+ * @param accept - Comma-separated `accept` tokens, e.g. `'.md,.zip,image/*'`
+ * @returns `true` when the file matches at least one token
+ */
+export declare const matchesAccept: (file: File, accept?: string) => boolean;

package/package.json

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