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

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
@@ -66,6 +67,6 @@ export interface PopupProps {
  * @param [hideClose=false] - Whether the close button is hidden in the header
  * @param [closeAriaLabel="Close dialog"] - Accessible name of the close button
  * @param [closeOnOutsideClick=true] - Whether the popup closes when clicking outside
- * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile
+ * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility
  */
 export declare const Popup: FC<PopupProps>;

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/Switch/Switch.d.ts

@@ -0,0 +1,38 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'size'>;
+export interface SwitchProps extends NativeInputProps {
+    labelProps?: LabelProps;
+    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"
+ *   labelProps={{ label: 'Active' }}
+ *   isOn={isActive}
+ *   onChange={setIsActive}
+ * />
+ * ```
+ *
+ * The track and the label text are two sibling `<label for>` elements rather
+ * than one wrapper, so the {@link Label} keeps its own `required` marker and
+ * `caption` info button — a button nested in a label forwards its clicks to the
+ * labelled control. Clicking either one still toggles the switch.
+ *
+ * @param [labelProps] - Props of the {@link 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, and described by the switch
+ */
+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

@@ -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.
@@ -58,6 +59,6 @@ export interface DialPopupProps {
  * @param [size=PopupSize.Md] - Sets the max-width of the popup
  * @param [hideClose=false] Whether the close button is hidden in the header (default: false)
  * @param [closeOnOutsideClick=true] - Whether the popup closes when clicking outside (default: true)
- * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile
+ * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility
  */
 export declare const DialPopup: FC<DialPopupProps>;

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

@@ -1,13 +1,54 @@
-import { FC } from 'react';
-export declare enum DialProgressBarSize {
-    Small = "sm",
-    Medium = "md"
-}
-export interface DialProgressBarProps {
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import { LabelProps } from '../New/Label/Label';
+import { ElementSize } from '../../types/size';
+type NativeProgressBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export interface ProgressBarProps extends NativeProgressBarProps {
     value: number;
     max?: number;
-    size?: DialProgressBarSize;
-    className?: string;
-    ariaLabel?: string;
+    size?: ElementSize;
+    labelProps?: LabelProps;
+    valueLabel?: ReactNode;
 }
-export declare const DialProgressBar: FC<DialProgressBarProps>;
+/**
+ * A horizontal bar indicating progress toward a goal.
+ * aliases: Progress|LoadingBar|Meter
+ * Design system 2.0
+ *
+ * Names itself from `labelProps.label` through `aria-labelledby`; without one it
+ * falls back to `aria-label`, and finally to `Progress` so the bar is never
+ * anonymous. Prefer a real label — several bars all announcing "Progress" tell a
+ * screen reader user nothing about which is which.
+ *
+ * Screen readers derive the announced percentage from the value and `max`. When
+ * the raw numbers are more useful than a percentage, pass `aria-valuetext`
+ * (e.g. `"3 of 10 files"`); it goes straight through to the element.
+ *
+ * `valueLabel` renders a readout at the end of the label row. Formatting stays
+ * with the caller — the bar has no way to know how many decimals or which unit
+ * a given quantity deserves. It does not name the bar, so pair it with a
+ * matching `aria-valuetext` to have the same reading announced.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={40} labelProps={{ label: 'Uploading' }} />
+ * <ProgressBar value={3} max={10} aria-valuetext="3 of 10 files" />
+ * <ProgressBar value={80} size={ElementSize.Small} />
+ *
+ * <ProgressBar
+ *   value={3.313182}
+ *   max={500}
+ *   labelProps={{ label: 'Cost per month', caption: 'Billed monthly' }}
+ *   valueLabel="3.31 / 500"
+ *   aria-valuetext="3.31 of 500"
+ * />
+ * ```
+ *
+ * @param value - Current progress. Clamped into `0…max`.
+ * @param [max=100] - Value that counts as complete.
+ * @param [size=ElementSize.Standard] - Bar height: standard is 8px, small is 4px.
+ * @param [labelProps] - Props of the {@link Label} rendered above the bar, which also names it.
+ * @param [valueLabel] - Readout rendered at the end of the label row.
+ * @param [className] - Additional classes on the track element.
+ */
+export declare const ProgressBar: FC<ProgressBarProps>;
+export {};

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