@epam/ai-dial-ui-kit 0.14.0-dev.2 → 0.14.0-dev.4

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

@@ -1,14 +1,14 @@
 import { CalendarMode } from '../../../types/calendar';
 export declare const DEFAULT_CALENDAR_LOCALE = "en-GB";
 export declare const calendarModeDefaultPlaceholder: Record<CalendarMode, string>;
-export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-hover-alpha focus-within:border-focus-blue";
-export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-alpha hover:!border-transparent";
+export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
+export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent";
 export declare const calendarFieldInvalidClassName = "!border-error";
-export declare const calendarPopoverClassName = "z-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-3 py-4 shadow-md";
-export declare const calendarDayButtonBaseClassName = "flex size-8 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus-black";
+export declare const calendarPopoverClassName = "z-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
+export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus";
 export declare const calendarDaySelectedClassName = "bg-control-accent text-control-permanent";
 export declare const calendarDayTodayClassName = "text-accent dial-small-semi-text";
-export declare const calendarDayOutsideClassName = "text-control-disable-alpha";
+export declare const calendarDayOutsideClassName = "text-control-disable-primary";
 export declare const calendarFieldIconClassName = "text-secondary";
 export declare const calendarIcon: import("react/jsx-runtime").JSX.Element;
 export declare const calendarNavIcons: {

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

@@ -0,0 +1,46 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'size'>;
+export interface CheckboxProps extends NativeInputProps {
+    labelProps?: LabelProps;
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    onChange?: (value: boolean) => void;
+    caption?: string;
+}
+/**
+ * A checkbox from the 2.0 design system.
+ * aliases: ToggleCheckbox|MultiSelectOption|TriStateCheckbox
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   labelProps={{ label: 'Accept terms' }}
+ *   isSelected={accepted}
+ *   onChange={setAccepted}
+ * />
+ * ```
+ *
+ * `isIndeterminate` takes visual precedence over `isSelected` and announces the
+ * control as `mixed` — use it for a parent whose children are partly selected.
+ * It also sets the native `indeterminate` DOM property, which no React prop
+ * covers. Clicking an indeterminate checkbox selects it, as it does natively.
+ *
+ * The box 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 checkbox.
+ *
+ * @param [labelProps] - Props of the {@link Label} rendered next to the control
+ * @param [isSelected=false] - The current value of the checkbox
+ * @param [isIndeterminate=false] - Whether the checkbox is in the mixed state
+ * @param [invalid=false] - Whether the checkbox failed validation (applies error styling)
+ * @param [disabled=false] - Whether the checkbox is disabled
+ * @param [onChange] - Callback fired with the new value when toggled
+ * @param [caption] - Caption text rendered below the label, and described by the checkbox
+ */
+export declare const Checkbox: FC<CheckboxProps>;
+export {};

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

@@ -0,0 +1,10 @@
+/**
+ * The check and minus glyphs are decorative: the input's `checked` and
+ * `aria-checked` already carry the state, so the icon is hidden from assistive
+ * tech. Tabler renders a bare `<svg>` with no role, so `aria-hidden` is explicit.
+ */
+export declare const CHECKBOX_ICON_PROPS: {
+    readonly size: 14;
+    readonly stroke: 3;
+    readonly 'aria-hidden': true;
+};

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

@@ -4,6 +4,6 @@ export declare const dropdownSubMenuClassName: string;
 export declare const dropdownItemBaseClassName: string;
 export declare const dropdownItemDisabledClassName: string;
 export declare const dropdownItemDangerClassName = "text-error";
-export declare const dropdownDividerClassName = "my-1 border-t border-secondary";
+export declare const dropdownDividerClassName = "my-1 border-t border-tertiary";
 export declare const dropdownGap = 4;
 export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+import { TooltipContainerOptions } from '../Tooltip/TooltipContext';
+export interface EllipsisTooltipProps extends TooltipContainerOptions {
+    text: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    hideTooltip?: boolean;
+    id?: string;
+    customTooltipContent?: ReactNode;
+}
+/**
+ * Single-line text with a CSS ellipsis that reveals the full string in a
+ * tooltip **only when it is actually clipped**.
+ * aliases: TruncatedText|TruncationTooltip
+ * Design system 2.0
+ *
+ * Text that fits gets no tooltip at all, so a row of labels does not sprout
+ * tooltips that repeat what is already on screen.
+ *
+ * The width has to be finite for anything to truncate: the element is a
+ * `min-w-0`, `flex-1` block, and `className` sets the width it should fit into.
+ *
+ * a11y: while truncated, the full string is exposed as the element's
+ * `aria-label`, so a screen reader reads the whole label even though the
+ * tooltip itself renders nothing on mobile screens.
+ *
+ * @example
+ * ```tsx
+ * <EllipsisTooltip text="Very long message that will be truncated" />
+ *
+ * <EllipsisTooltip
+ *   text={<span className="dial-small-semi-text">Custom node</span>}
+ *   className="max-w-[160px]"
+ * />
+ *
+ * <EllipsisTooltip text="Tooltip suppressed even when clipped" hideTooltip />
+ * ```
+ *
+ * @param text - The text or node to display, truncated with an ellipsis when it does not fit
+ * @param [className] - Additional CSS classes for the text element, typically its width
+ * @param [contentClassName] - Additional CSS classes for the tooltip bubble
+ * @param [hideTooltip=false] - Suppress the tooltip even while the text is truncated
+ * @param [id] - `id` of the text element
+ * @param [customTooltipContent] - Shown instead of the full text while truncated
+ * @param [placement=TooltipPlacement.Bottom] - Side of the text the tooltip is placed on
+ * @param [initialOpen=false] - Whether the tooltip starts open (uncontrolled only)
+ * @param [isTriggerClickable=false] - Restrict hover handling to mouse input, ignoring touch
+ * @param [open] - Controlled open state; disables the hover and focus triggers
+ * @param [onOpenChange] - Callback fired when the open state should change
+ */
+export declare const EllipsisTooltip: FC<EllipsisTooltipProps>;

package/dist/src/components/New/EllipsisTooltip/use-truncation.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+/**
+ * Reports whether an element's text is being cut off by `text-overflow`, so a
+ * tooltip can carry the full string only when there is something to reveal.
+ *
+ * Truncation is a layout fact, not a prop: it depends on the width the element
+ * ends up with. The measurement therefore re-runs on every text change, on
+ * window resize, and — since a parent can resize without the window doing so —
+ * whenever the element's own box changes size.
+ *
+ * @param text - The rendered content; a change to it re-measures
+ * @returns `ref` to attach to the truncating element, whether it `isTruncated`,
+ * its `textContent` (the full string even when `text` is a node), and
+ * `remeasure` to force a fresh read before an interaction reads the result
+ */
+export declare const useTruncation: <T extends HTMLElement>(text: ReactNode) => {
+    ref: import('react').RefObject<T | null>;
+    isTruncated: boolean;
+    textContent: string;
+    remeasure: () => void;
+};

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

@@ -7,7 +7,7 @@ export interface HighlightProps {
     query: string;
     /** Optional class name for the highlighted segment. */
     markClassName?: string;
-    /** Optional class name forwarded to the `DialEllipsisTooltip` container. */
+    /** Optional class name forwarded to the `EllipsisTooltip` container. */
     className?: string;
     /** Maximum number of lines to display before truncating. Use `1` for single-line ellipsis truncation (e.g. list rows). Defaults to `2`. */
     maxLines?: number;

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

@@ -1 +1 @@
-export declare const inputButtonClassName = "bg-control-neutral-active flex items-center justify-center enabled:text-secondary enabled:hover:text-control-blue-hover enabled:active:bg-control-accent-alpha-active enabled:hover:bg-control-accent-alpha-hover enabled:active:text-control-blue-active";
+export declare const inputButtonClassName = "bg-control-neutral-active flex items-center justify-center enabled:text-secondary enabled:hover:text-control-accent-hover enabled:active:bg-control-accent-alpha-active enabled:hover:bg-control-accent-alpha-hover enabled:active:text-control-accent-active";

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

@@ -6,6 +6,7 @@ export interface LabelProps extends NativeLabelProps {
     required?: boolean;
     caption?: string;
     size?: ElementSize;
+    containerClassName?: string;
 }
 /**
  * A label component
@@ -28,6 +29,10 @@ export interface LabelProps extends NativeLabelProps {
  * 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'.
+ * @param [containerClassName] - Additional classes for the wrapper holding the
+ * `<label>` and its info button. Needed when the label is a flex item that has
+ * to shrink: a wrapper left at `min-width: auto` cannot, so its text overflows
+ * instead of truncating.
  */
 export declare const Label: FC<LabelProps>;
 export {};

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

@@ -50,6 +50,13 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  *   title="Processing"
  *   message="Please wait..."
  * />
+ *
+ * <Notification
+ *   variant={NotificationVariant.General}
+ *   type={NotificationType.SectionMessage}
+ *   title="Title"
+ *   message="Description text example"
+ * />
  * ```
  *
  * @param [variant=NotificationVariant.Info] - Defines the visual style and icon of the alert

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

@@ -7,9 +7,11 @@ export declare const InfoToastNotification: FC<NotificationVariantProps>;
 export declare const SuccessToastNotification: FC<NotificationVariantProps>;
 export declare const WarningToastNotification: FC<NotificationVariantProps>;
 export declare const LoadingToastNotification: FC<NotificationVariantProps>;
+export declare const GeneralToastNotification: FC<NotificationVariantProps>;
 export declare const ErrorMessageNotification: FC<NotificationTypeProps>;
 export declare const InfoMessageNotification: FC<NotificationTypeProps>;
 export declare const SuccessMessageNotification: FC<NotificationTypeProps>;
 export declare const WarningMessageNotification: FC<NotificationTypeProps>;
 export declare const LoadingMessageNotification: FC<NotificationTypeProps>;
+export declare const GeneralMessageNotification: FC<NotificationTypeProps>;
 export {};

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

@@ -0,0 +1,48 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'size' | 'value'>;
+export interface RadioProps extends NativeInputProps {
+    name: string;
+    value: string;
+    labelProps?: LabelProps;
+    isSelected?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    caption?: string;
+}
+/**
+ * A radio button from the 2.0 design system.
+ * aliases: RadioButton|ChoiceOption|RadioInput
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="plan"
+ *   value="pro"
+ *   labelProps={{ label: 'Pro' }}
+ *   isSelected={plan === 'pro'}
+ *   onChange={setPlan}
+ * />
+ * ```
+ *
+ * Radios sharing a `name` form one group: the browser gives them a single tab
+ * stop and moves the selection with the arrow keys, so no `role="radiogroup"`
+ * wiring is needed here. Wrap a set in a `<fieldset>` with a `<legend>` when the
+ * group itself needs a name.
+ *
+ * The circle 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 selects the radio.
+ *
+ * @param name - The group this radio belongs to; radios sharing it are mutually exclusive
+ * @param value - The value reported to `onChange` when this radio is selected
+ * @param [labelProps] - Props of the {@link Label} rendered next to the control
+ * @param [isSelected=false] - Whether this radio is the selected one of its group
+ * @param [disabled=false] - Whether the radio is disabled
+ * @param [onChange] - Callback fired with `value` when this radio becomes selected
+ * @param [caption] - Caption text rendered below the label, and described by the radio
+ */
+export declare const Radio: FC<RadioProps>;
+export {};

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

@@ -0,0 +1,78 @@
+import { FC, ReactNode } from 'react';
+import { LabelProps } from '../Label/Label';
+import { RadioGroupOrientation } from '../../../types/radio-group';
+export interface RadioGroupItem {
+    value: string;
+    label?: ReactNode;
+    /** Explanatory text rendered under the option's label. */
+    caption?: string;
+    /** Content revealed under the option while it is the selected one. */
+    content?: ReactNode;
+    disabled?: boolean;
+    /** Names the option when its `label` is not a string (or absent). */
+    'aria-label'?: string;
+}
+export interface RadioGroupProps {
+    items: RadioGroupItem[];
+    value?: string;
+    onChange: (value: string) => void;
+    name?: string;
+    id?: string;
+    orientation?: RadioGroupOrientation;
+    labelProps?: LabelProps;
+    disabled?: boolean;
+    error?: string;
+    caption?: string;
+    ariaLabel?: string;
+    className?: string;
+    optionsClassName?: string;
+    radioClassName?: string;
+    contentClassName?: string;
+}
+/**
+ * A set of mutually exclusive {@link Radio} options with one group label.
+ * aliases: SelectionGroup|OptionGroup|RadioList
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   labelProps={{ label: 'Delivery' }}
+ *   value={delivery}
+ *   onChange={setDelivery}
+ *   items={[
+ *     { value: 'pickup', label: 'Pickup', caption: 'Free, ready today' },
+ *     { value: 'courier', label: 'Courier', content: <AddressForm /> },
+ *   ]}
+ * />
+ * ```
+ *
+ * The options are native radios sharing one `name`, so the browser gives the
+ * group a single tab stop and moves the selection with the arrow keys — no
+ * roving `tabindex` is needed. The wrapper still takes `role="radiogroup"` so
+ * the group's own name is announced before the options.
+ *
+ * An option's `content` is mounted only while that option is selected, so a
+ * form or an input inside it never holds focus for an option the user has moved
+ * away from.
+ *
+ * The group is named by `labelProps.label` when that is a string, and by
+ * `ariaLabel` otherwise — a group whose label is a node has no other name.
+ *
+ * @param items - Options to render; each needs a unique `value` and may carry a `label`, `caption`, `content` and `disabled` flag
+ * @param [value] - The `value` of the selected option
+ * @param onChange - Callback fired with the newly selected `value`
+ * @param [name] - The `name` shared by the underlying radios; defaults to the group id
+ * @param [id] - Base id for the group; option ids are derived from it
+ * @param [orientation=RadioGroupOrientation.Column] - Whether the options stack or sit in a row
+ * @param [labelProps] - Props of the {@link Label} rendered above the options
+ * @param [disabled] - Disables every option
+ * @param [error] - Error message rendered below the options
+ * @param [caption] - Helper text rendered below the options when there is no `error`
+ * @param [ariaLabel] - Names the group when there is no string `labelProps.label`
+ * @param [className] - Additional classes for the outer container
+ * @param [optionsClassName] - Additional classes for the options wrapper
+ * @param [radioClassName] - Additional classes for every option's control row
+ * @param [contentClassName] - Additional classes for the selected option's content
+ */
+export declare const RadioGroup: FC<RadioGroupProps>;

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

@@ -0,0 +1,11 @@
+import { RadioGroupOrientation } from '../../../types/radio-group';
+/** Label, options and caption/error stack, matching the 2.0 field rhythm. */
+export declare const groupBaseClassName = "flex flex-col gap-2";
+export declare const optionsWrapperBaseClassName = "flex";
+/**
+ * Content revealed under the selected option. The inline offset is the one
+ * `Radio` gives its own caption, so the content lines up with the option's
+ * label text rather than with its circle.
+ */
+export declare const selectedContentClassName = "mt-2 ml-[26px]";
+export declare const orientationClassMap: Record<RadioGroupOrientation, string>;

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

@@ -0,0 +1,93 @@
+import { FC, ReactNode } from 'react';
+import { LabelProps } from '../Label/Label';
+import { RadioGroupItem } from '../RadioGroup/RadioGroup';
+import { PopupSize } from '../../../types/popup';
+export interface RadioGroupPopupFieldProps {
+    items: RadioGroupItem[];
+    value?: string;
+    customValue?: string;
+    header: ReactNode;
+    onApply: (value?: string) => void;
+    id?: string;
+    labelProps?: LabelProps;
+    placeholder?: string;
+    selectedValue?: string;
+    onSelectionChange?: (value: string) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    isValid?: boolean;
+    applyButtonLabel?: string;
+    cancelButtonLabel?: string;
+    size?: PopupSize;
+    portalId?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    error?: string;
+    caption?: string;
+    ariaLabel?: string;
+    className?: string;
+    fieldClassName?: string;
+}
+/**
+ * A field whose value is picked from a {@link RadioGroup} inside a {@link Popup}.
+ * aliases: PopupRadio|ChoicePopup|RadioPopupField
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <RadioGroupPopupField
+ *   labelProps={{ label: 'Status' }}
+ *   header="Select status"
+ *   placeholder="None"
+ *   items={[
+ *     { value: 'draft', label: 'Draft' },
+ *     { value: 'published', label: 'Published' },
+ *   ]}
+ *   value={status}
+ *   onApply={(next) => setStatus(next)}
+ * />
+ * ```
+ *
+ * The collapsed field is a `<button>` rather than a read-only `<input>`: it
+ * opens a dialog and holds no text of its own, so the button role and its
+ * `Enter` / `Space` activation come from the element itself instead of being
+ * re-implemented on an input that would also invite typing.
+ *
+ * The selection inside the popup is a draft. Uncontrolled, it is seeded from
+ * `value` each time the popup opens, so an edit the user cancelled never leaks
+ * into the next one, and `onApply` is the only callback reporting a committed
+ * value. Pass `selectedValue` with `onSelectionChange` to drive the draft
+ * yourself — needed when `isValid` depends on what is currently selected.
+ *
+ * The field's accessible name is its label followed by the current value, so it
+ * announces like a collapsed picker ("Status, Draft"). With no `labelProps`,
+ * pass `ariaLabel`: it is exposed through a visually hidden element rather than
+ * as `aria-label`, which would replace the value in the name instead of
+ * preceding it.
+ *
+ * @param items - Options offered inside the popup
+ * @param [value] - The committed value, shown in the collapsed field
+ * @param [customValue] - Text shown in the field in place of the selected option's label
+ * @param header - Title of the popup
+ * @param onApply - Callback fired with the selected value when Apply is clicked
+ * @param [id] - Base id for the field; the label and the options derive theirs from it
+ * @param [labelProps] - Props of the {@link Label} rendered above the field
+ * @param [placeholder] - Text shown in the field while no value is selected
+ * @param [selectedValue] - Controlled draft selection inside the popup
+ * @param [onSelectionChange] - Callback fired when the draft selection changes
+ * @param [onCancel] - Callback fired when Cancel is clicked, before the popup closes
+ * @param [onClose] - Callback fired whenever the popup closes
+ * @param [isValid=true] - Whether Apply is enabled
+ * @param [applyButtonLabel="Apply"] - Label of the Apply button
+ * @param [cancelButtonLabel="Cancel"] - Label of the Cancel button
+ * @param [size=PopupSize.Md] - Size of the popup
+ * @param [portalId] - Portal container id for the popup
+ * @param [disabled] - Disables the field, so the popup cannot be opened
+ * @param [invalid] - Paints the field with the error border
+ * @param [error] - Error message rendered below the field
+ * @param [caption] - Helper text rendered below the field when there is no `error`
+ * @param [ariaLabel] - Names the field when there is no string `labelProps.label`
+ * @param [className] - Additional classes for the outer container
+ * @param [fieldClassName] - Additional classes for the collapsed field
+ */
+export declare const RadioGroupPopupField: FC<RadioGroupPopupFieldProps>;

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

@@ -0,0 +1,22 @@
+/**
+ * The collapsed field. `dial-kit-input` gives it the 2.0 field box — 40px tall,
+ * raised surface, accent border on hover, accent outline on focus, and the
+ * sunken disabled treatment through its own `:disabled` rule, which a `<button>`
+ * matches. The utilities after it only lay the row out; the SCSS class is
+ * unlayered, so anything it already sets (`truncate`, `w-full`, the height)
+ * cannot be overridden from here.
+ *
+ * No `dial-kit-enhanced-target`: `truncate` puts `overflow: hidden` on the
+ * field, which would clip the 44px pseudo-element back to the field's own 40px,
+ * and being unlayered it cannot be undone with a utility. The field takes the
+ * same documented 2.5.5 exception as `Input` and `Select` — full-width target,
+ * 4px short of 44 vertically.
+ */
+export declare const fieldBaseClassName = "dial-kit-input flex flex-row items-center justify-between gap-x-2 px-3 text-left";
+export declare const fieldValueClassName = "min-w-0 flex-1 truncate text-primary";
+export declare const fieldPlaceholderClassName = "min-w-0 flex-1 truncate text-secondary";
+export declare const fieldIconClassName = "shrink-0 text-secondary";
+export declare const popupBodyClassName = "px-6 pb-4";
+export declare const popupFooterClassName = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary";
+export declare const defaultCancelLabel = "Cancel";
+export declare const defaultApplyLabel = "Apply";

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

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+export interface SegmentedControlItem<T extends string = string> {
+    value: T;
+    label?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    'aria-label'?: string;
+}
+export interface SegmentedControlProps<T extends string> {
+    items: SegmentedControlItem<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    className?: string;
+    segmentClassName?: string;
+    'aria-label'?: string;
+}
+/**
+ * A single-select switch between a few mutually exclusive, equally sized options.
+ * aliases: SegmentedButton|ViewSwitcher|ButtonGroup
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   aria-label="View"
+ *   value={view}
+ *   onChange={setView}
+ *   items={[
+ *     { value: 'list', icon: <IconList />, 'aria-label': 'List' },
+ *     { value: 'grid', icon: <IconGrid />, 'aria-label': 'Grid' },
+ *   ]}
+ * />
+ * ```
+ *
+ * This is a radio group, not a tab list: it selects a value rather than
+ * revealing a panel, so it takes `role="radiogroup"` with `role="radio"`
+ * segments. The group is a single tab stop — the selected segment holds it, and
+ * the arrow keys, `Home` and `End` move the selection, per the ARIA radio-group
+ * pattern. `DialSegmentedControl` (1.0) uses `tablist`/`tab` instead; that is
+ * the behaviour this replaces.
+ *
+ * An icon-only segment still needs a name: give it `aria-label`, since the icon
+ * carries no text. A segment with a string `label` is named by it.
+ *
+ * @param items - Segments to render; each needs a unique `value` and may carry a `label`, `icon` and `disabled` flag
+ * @param value - The currently selected `value`
+ * @param onChange - Callback fired with the newly selected `value`
+ * @param [disabled] - Disables every segment
+ * @param [className] - Additional classes for the track
+ * @param [segmentClassName] - Additional classes for every segment
+ * @param [aria-label] - Names the group as a whole
+ */
+export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+/** Keys that move the selection inside the group. */
+export declare const NAVIGATION_KEYS: string[];
+/** The sunken track the segments sit in. */
+export declare const containerClassName = "inline-flex w-fit items-center gap-1 rounded-full bg-layer-sunken p-1";
+export declare const segmentClassName = "flex h-8 min-w-8 flex-1 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 dial-small-text transition-colors duration-200 outline-offset-0 focus-visible:outline focus-visible:outline-focus";
+/** Selected lifts off the track on a raised surface and keeps the accent at rest. */
+export declare const segmentSelectedClassName = "bg-layer-raised text-accent shadow-xs";
+export declare const segmentUnselectedClassName = "bg-transparent text-secondary";
+export declare const segmentSelectedInteractiveClassName = "cursor-pointer hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
+export declare const segmentUnselectedInteractiveClassName = "cursor-pointer hover:bg-control-accent-alpha-hover hover:text-accent active:bg-control-accent-alpha-active";
+/**
+ * A disabled segment keeps its shape so the group does not reflow, but drops the
+ * accent and the shadow.
+ */
+export declare const segmentDisabledSelectedClassName = "cursor-not-allowed bg-control-disable-primary text-control-disable-primary shadow-none";
+export declare const segmentDisabledUnselectedClassName = "cursor-not-allowed bg-transparent text-control-disable-primary";

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

@@ -12,7 +12,7 @@ export declare const selectOptionSelectedClassName = "bg-control-accent-alpha-ho
  * default this component relies on).
  */
 export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]";
-export declare const selectOptionDisabledClassName = "opacity-75";
+export declare const selectOptionDisabledClassName = "text-secondary";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;

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

@@ -0,0 +1,47 @@
+import { FC, ReactNode } from 'react';
+import { IconButtonProps } from '../IconButton/IconButton';
+import { TooltipProps } from '../Tooltip/Tooltip';
+type ToggleTooltipProps = Omit<TooltipProps, 'children'>;
+export interface ToggleIconButtonProps extends Omit<IconButtonProps, 'variant' | 'appearance' | 'tooltipProps' | 'onToggle'> {
+    icon: ReactNode;
+    selectedIcon?: ReactNode;
+    isSelected?: boolean;
+    onToggle?: (isSelected: boolean) => void;
+    tooltipProps?: ToggleTooltipProps;
+}
+/**
+ * An icon button that stays pressed, for a setting the icon itself represents.
+ * aliases: IconToggle|ToggleButton|BookmarkButton
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <ToggleIconButton
+ *   icon={<IconBookmark />}
+ *   selectedIcon={<IconBookmarkFilled />}
+ *   isSelected={isBookmarked}
+ *   onToggle={setIsBookmarked}
+ *   tooltipProps={{ tooltip: 'Bookmark' }}
+ * />
+ * ```
+ *
+ * This is a button, not a checkbox: the state rides on `aria-pressed`, so one
+ * unchanging accessible name covers both states and screen readers announce it
+ * as "pressed". Do not switch the name between them — a control that renames
+ * itself on click reads as a different control.
+ *
+ * Built on the primary ghost {@link IconButton}, which already supplies the
+ * whole unselected column of the design: a secondary-grey icon that turns
+ * accent on hover, an accent-alpha tint on hover and active, and a grey icon
+ * when disabled. Selected keeps that accent icon at rest and swaps in
+ * `selectedIcon` — usually the filled twin of `icon`.
+ *
+ * @param icon - Icon shown while unselected; rendered at 16px
+ * @param [selectedIcon] - Icon shown while selected; falls back to `icon`
+ * @param [isSelected=false] - Whether the toggle is on
+ * @param [onToggle] - Callback fired with the next value when clicked
+ * @param [size=ElementSize.Small] - Defines the size of the button
+ * @param [tooltipProps] - Props of the 2.0 {@link Tooltip} wrapping the button
+ */
+export declare const ToggleIconButton: FC<ToggleIconButtonProps>;
+export {};