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

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

@@ -10,6 +10,7 @@ export interface LabelProps extends NativeLabelProps {
 /**
  * A label component
  * aliases: FormLabel|RequiredIndicator
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -13,6 +13,7 @@ export interface MarkdownEditorProps {
 }
 /**
  * The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,
+ * Design system 2.0
  * text style, lists, quote/link/code, table) plus an edit/live/preview mode
  * switcher and fullscreen, built on top of `@uiw/react-md-editor`.
  *

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

@@ -14,6 +14,7 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
 /**
  * A contextual feedback component for displaying important messages.
  * aliases: Notification
+ * Design system 2.0
  *
  * Renders a colored container with an icon, message text, and an optional
  * close button.

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

@@ -8,6 +8,7 @@ export interface NumberInputProps extends Omit<InputProps, 'onChange' | 'type'>
 /**
  * A number field, built on {@link Input}.
  * aliases: NumericField|NumberField
+ * Design system 2.0
  *
  * `type` is owned by this component; every other {@link Input} prop is passed
  * through, so it shares the 2.0 field styling, sizes, label, caption and error

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

@@ -9,6 +9,7 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
 /**
  * A password field with a reveal toggle, built on {@link Input}.
  * aliases: SecureInput|ToggleablePassword
+ * Design system 2.0
  *
  * The toggle is a real `<button>`, so it is reachable by keyboard and announces
  * both its purpose and its state. `type` and `iconAfter` are owned by this

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

@@ -23,6 +23,7 @@ export interface PopupProps {
 /**
  * An accessible modal dialog using Floating UI.
  * aliases: Modal|Dialog
+ * Design system 2.0
  *
  * Renders in a portal with a scrim overlay, focus management, a header with the
  * title and close control, a scrollable body and an optional footer. Sections

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

@@ -2,7 +2,7 @@ import { PopupSize } from '../../../types/popup';
 export declare const popupOverlayBaseClassName = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
 export declare const popupBaseClassName = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto";
 export declare const popupHeaderClassName = "flex flex-row items-center justify-between px-6 py-4";
-export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h2-text text-primary";
+export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary";
 /**
  * Max widths per size. Full width below the `md` breakpoint, where the popup
  * fills the screen.

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

@@ -7,6 +7,7 @@ export interface MultiSelectTagsProps {
 }
 /**
  * The selected values of a multi-select, rendered as removable tags inside the
+ * Design system 2.0
  * field.
  *
  * @param options - All available options, used to resolve labels and icons

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

@@ -44,6 +44,7 @@ export interface SelectProps {
 /**
  * A versatile select supporting single and multiple selections.
  * aliases: OptionPicker|ChoiceSelector
+ * 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 it exposes the control as a `combobox`

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

@@ -1,6 +1,6 @@
 export declare const selectOverlayBaseClassName: string;
 export declare const selectOptionBaseClassName: string;
-export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
+export declare const selectOptionSelectedClassName = "bg-control-accent-alpha-hover";
 /**
  * Holds the option list to the width of the field.
  *

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

@@ -0,0 +1,32 @@
+import { FC, InputHTMLAttributes, ReactNode } from 'react';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'size'>;
+export interface SwitchProps extends NativeInputProps {
+    label?: ReactNode;
+    isOn?: boolean;
+    disabled?: boolean;
+    onChange?: (value: boolean) => void;
+    caption?: string;
+}
+/**
+ * A switch (toggle) control from the 2.0 design system.
+ * aliases: ToggleSwitch|BinaryToggle|Switcher
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   id="notifications"
+ *   label="Active"
+ *   isOn={isActive}
+ *   onChange={setIsActive}
+ * />
+ * ```
+ *
+ * @param [label] - Visible label rendered next to the control
+ * @param [isOn=false] - The current value of the switch
+ * @param [disabled=false] - Whether the switch is disabled
+ * @param [onChange] - Callback fired with the new value when toggled
+ * @param [caption] - Caption text rendered below the label
+ */
+export declare const Switch: FC<SwitchProps>;
+export {};

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

@@ -0,0 +1,59 @@
+import { FC } from 'react';
+/** A single tab entry rendered by {@link Tabs}. */
+export interface TabItem {
+    /** Unique identifier used to match against `activeTabId`. */
+    id: string;
+    /** Visible label text for the tab. */
+    label: string;
+    /** Optional numeric badge rendered after the label. */
+    count?: number;
+}
+export interface TabsProps {
+    /** Ordered list of tabs to render. */
+    tabs: TabItem[];
+    /** ID of the currently selected tab. */
+    activeTabId: string;
+    /** Fired with the tab's `id` when the user selects a tab. */
+    onTabChange: (tabId: string) => void;
+    /**
+     * Accessible name for the tab list. A row of tabs carries no name of its own,
+     * so screen readers announce it as an unlabelled list without this.
+     */
+    ariaLabel?: string;
+    /** Additional CSS classes for the tab list container. */
+    className?: string;
+    /** Additional CSS classes applied to every tab. */
+    tabClassName?: string;
+}
+/**
+ * A horizontal row of tabs, underlining the active one and showing optional count badges.
+ * aliases: TabRow|TabNavigation|TabBar
+ * Design system 2.0
+ *
+ * Follows the ARIA tabs pattern with automatic activation: only the active tab is
+ * in the tab order, and the arrow keys move both focus and selection. `Home` and
+ * `End` jump to the first and last tab, and the arrows wrap around the ends.
+ *
+ * The component renders the tabs only; the panels stay with the consumer.
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   ariaLabel="Conversation views"
+ *   tabs={[
+ *     { id: 'all', label: 'All', count: 12 },
+ *     { id: 'shared', label: 'Shared with me' },
+ *   ]}
+ *   activeTabId={activeTabId}
+ *   onTabChange={setActiveTabId}
+ * />
+ * ```
+ *
+ * @param tabs - Ordered list of tabs to render.
+ * @param activeTabId - ID of the currently selected tab.
+ * @param onTabChange - Fired with the tab's `id` when the user selects a tab.
+ * @param [ariaLabel] - Accessible name for the tab list.
+ * @param [className] - Additional CSS classes for the tab list container.
+ * @param [tabClassName] - Additional CSS classes applied to every tab.
+ */
+export declare const Tabs: FC<TabsProps>;

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

@@ -0,0 +1,45 @@
+import { FC, HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { ElementSize } from '../../../types/size';
+type NativeTagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
+export interface TagProps extends NativeTagProps {
+    label: string;
+    icon?: ReactNode;
+    size?: ElementSize;
+    selected?: boolean;
+    disabled?: boolean;
+    closable?: boolean;
+    removeLabel?: string;
+    onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * A compact label element used for selections, filters, or categories.
+ * aliases: Chip|Pill
+ * Design system 2.0
+ *
+ * The label truncates rather than wrapping, and carries a native `title` so the
+ * full text stays reachable when it does.
+ *
+ * A tag with `onClick` becomes a `role="button"` operable with Enter and Space.
+ * Its remove control is a real nested `<button>`, so keep the two roles apart in
+ * the caller: a clickable tag that is also closable gives a screen reader two
+ * actions with no way to tell which one it landed on.
+ *
+ * @example
+ * ```tsx
+ * <Tag label="TypeScript" />
+ * <Tag label="TypeScript" closable onRemove={() => remove('TypeScript')} />
+ * <Tag label="Drafts" selected onClick={() => toggle('Drafts')} />
+ * ```
+ *
+ * @param label - Text content displayed inside the tag.
+ * @param [icon] - Icon rendered before the label.
+ * @param [size=ElementSize.Standard] - Tag height: standard is 24px, small is 20px.
+ * @param [selected=false] - Applies the accent-tinted selected styling.
+ * @param [disabled=false] - Dims the tag and suppresses the remove control and click handling.
+ * @param [closable=false] - Renders the remove button. Needs `onRemove` to appear.
+ * @param [removeLabel] - Accessible name of the remove button; defaults to `Remove <label>`.
+ * @param [onRemove] - Called when the remove button is clicked. The click does not bubble to `onClick`.
+ * @param [onClick] - Called when the tag itself is activated. Makes the tag a button.
+ */
+export declare const Tag: FC<TagProps>;
+export {};

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

@@ -1,7 +1,7 @@
 import { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';
-import { DialLabelProps } from '../../Label/Label';
+import { LabelProps } from '../Label/Label';
 export interface TextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, HTMLTextAreaElement> {
-    labelProps?: DialLabelProps;
+    labelProps?: LabelProps;
     invalid?: boolean;
     containerClassName?: string;
     resize?: boolean;
@@ -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/New/constants/overlay.d.ts

@@ -18,7 +18,7 @@ export declare const overlaySubMenuClassName: string;
  */
 export declare const overlayItemClassName: string;
 /** Tint marking the row that is currently selected. */
-export declare const overlayItemSelectedClassName = "bg-accent-primary-alpha";
+export declare const overlayItemSelectedClassName = "bg-control-accent-alpha-hover";
 export declare const overlayItemDisabledClassName = "opacity-75";
 /** Distance between the trigger and its panel, and between nested panels. */
 export declare const overlayGap = 4;

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