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

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

@@ -1,4 +1,5 @@
 import { FC, MouseEvent, ReactNode } from 'react';
+import { ButtonProps } from '../Button/Button';
 import { PopupSize } from '../../../types/popup';
 export interface PopupProps {
     open?: boolean;
@@ -13,7 +14,16 @@ export interface PopupProps {
     bodyClassName?: string;
     children?: ReactNode;
     footer?: ReactNode;
+    footerClassName?: string;
     onClose?: (e?: MouseEvent<HTMLButtonElement> | null) => void;
+    onBack?: (e: MouseEvent<HTMLButtonElement>) => void;
+    backAriaLabel?: string;
+    headerActions?: ReactNode;
+    headerDivider?: boolean;
+    mainButtons?: ButtonProps[];
+    additionalButtons?: ButtonProps[];
+    additionalButtonsOnLeft?: boolean;
+    footerDivider?: boolean;
     size?: PopupSize;
     hideClose?: boolean;
     closeAriaLabel?: string;
@@ -27,8 +37,18 @@ export interface PopupProps {
  *
  * 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
- * are separated by spacing rather than rules; add your own through
- * `headerClassName` or the footer node if a surface needs them.
+ * are separated by spacing rather than rules; opt into a rule with
+ * `headerDivider` / `footerDivider`.
+ *
+ * The header grows from the title alone: `onBack` prepends a back control,
+ * `headerActions` sits between the title and the close button.
+ *
+ * The footer is declared as data, not markup: `mainButtons` and
+ * `additionalButtons` take {@link ButtonProps} and the popup renders the
+ * {@link Button}s itself, so spacing, order and the neutral default are the
+ * same on every dialog. `additionalButtonsOnLeft` moves the secondary group to
+ * the opposite edge. A `footer` node still wins over both, for the rare surface
+ * that needs something other than a row of buttons.
  *
  * A string `header` names the dialog automatically. A `header` node cannot —
  * pass `ariaLabel` in that case, or the dialog opens unnamed.
@@ -39,12 +59,22 @@ export interface PopupProps {
  *   open
  *   header="Title"
  *   size={PopupSize.Md}
- *   footer={
- *     <div className="flex justify-end gap-2 px-6 py-4">
- *       <NeutralButton label="Cancel" />
- *       <PrimaryButton label="Confirm" />
- *     </div>
- *   }
+ *   onBack={() => setStep(step - 1)}
+ *   headerActions={<InfoButton caption="What is this?" />}
+ *   additionalButtonsOnLeft
+ *   additionalButtons={[
+ *     {
+ *       label: 'Back',
+ *       variant: ButtonVariant.Primary,
+ *       appearance: ButtonAppearance.Link,
+ *       iconBefore: <IconArrowLeft />,
+ *       onClick: goBack,
+ *     },
+ *   ]}
+ *   mainButtons={[
+ *     { label: 'Cancel', onClick: () => setOpen(false) },
+ *     { label: 'Confirm', variant: ButtonVariant.Primary, onClick: submit },
+ *   ]}
  *   onClose={() => setOpen(false)}
  * >
  *   <div className="px-6 py-4">Dialog content goes here…</div>
@@ -61,7 +91,16 @@ export interface PopupProps {
  * @param [headerClassName] - Additional CSS classes applied to the popup header container
  * @param [bodyClassName] - Additional CSS classes applied to the scrollable body wrapper around `children`
  * @param [children] - Body content
- * @param [footer] - Footer area for actions
+ * @param [footer] - Custom footer node; overrides `mainButtons` and `additionalButtons`
+ * @param [footerClassName] - Additional CSS classes applied to the built-in footer container
+ * @param [onBack] - Callback for the header back button; the button renders only when set
+ * @param [backAriaLabel="Back"] - Accessible name of the back button
+ * @param [headerActions] - Controls rendered between the title and the close button
+ * @param [headerDivider=false] - Whether a rule is drawn under the header
+ * @param [mainButtons] - Primary footer buttons, aligned to the trailing edge; each defaults to `ButtonVariant.Neutral`
+ * @param [additionalButtons] - Secondary footer buttons, next to `mainButtons` unless moved left
+ * @param [additionalButtonsOnLeft=false] - Whether `additionalButtons` sit on the leading edge
+ * @param [footerDivider=false] - Whether a rule is drawn above the footer
  * @param [onClose] - Callback fired when the popup requests to close
  * @param [size=PopupSize.Md] - Sets the max-width of the popup
  * @param [hideClose=false] - Whether the close button is hidden in the header

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

@@ -3,6 +3,13 @@ export declare const popupOverlayBaseClassName = "z-[52] flex items-center justi
 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-h1-text text-primary";
+/** Rule under the header. Opt-in: by default sections are separated by spacing. */
+export declare const popupHeaderDividerClassName = "border-b border-tertiary";
+export declare const popupFooterClassName = "flex flex-row items-center gap-2 px-6 py-4";
+/** Rule above the footer, mirroring the header. */
+export declare const popupFooterDividerClassName = "border-t border-tertiary";
+/** Groups the controls sitting on one side of the header or footer. */
+export declare const popupActionsGroupClassName = "flex shrink-0 flex-row items-center gap-2";
 /**
  * Max widths per size. Full width below the `md` breakpoint, where the popup
  * fills the screen.

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

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { ResizableContainerProps } from './ResizableContainer';
+export interface ConditionalResizableContainerProps extends ResizableContainerProps {
+    /** Whether resizing is enabled. Defaults to `true`. */
+    enabled?: boolean;
+}
+/**
+ * Renders its children inside a {@link ResizableContainer} only while `enabled`.
+ * aliases: OptionalResize|ConditionalPanel
+ * Design system 2.0
+ *
+ * When `enabled` is false the children are rendered on their own, with no
+ * wrapper element and no resize behaviour — useful for a panel that is only
+ * resizable while it is expanded. Every other prop is passed straight through;
+ * see {@link ResizableContainer} for controlled and uncontrolled sizing, sides
+ * and callbacks.
+ *
+ * @example
+ * ```tsx
+ * <ConditionalResizableContainer
+ *   enabled={isExpanded}
+ *   minWidth={180}
+ *   maxWidth={520}
+ *   defaultWidth={260}
+ * >
+ *   <Sidebar />
+ * </ConditionalResizableContainer>
+ * ```
+ *
+ * @param [enabled=true] - Whether resizing is enabled.
+ * @param children - Content to render inside the container.
+ * @see ResizableContainer
+ */
+export declare const ConditionalResizableContainer: FC<ConditionalResizableContainerProps>;

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

@@ -0,0 +1,77 @@
+import { FC, ReactNode } from 'react';
+import { ResizableContainerSide } from '../../../types/resizable-container';
+export interface ResizableContainerProps {
+    /** Content placed inside the container. */
+    children: ReactNode;
+    /** Minimum allowed width in px. */
+    minWidth: number;
+    /** Maximum allowed width in px. */
+    maxWidth: number;
+    /** Controlled width in px. When provided, the component becomes controlled. */
+    width?: number;
+    /** Initial width when uncontrolled. Defaults to `minWidth`. */
+    defaultWidth?: number;
+    /** Fired when a resize ends, and once per arrow key press. */
+    onResizeStop?: (width: number) => void;
+    /** Fired continuously while dragging, with the current width. */
+    onResize?: (width: number) => void;
+    /** Edge carrying the resize handle. Defaults to `ResizableContainerSide.Right`. */
+    side?: ResizableContainerSide;
+    /** Width change per arrow key press. Defaults to `16`. */
+    keyboardStep?: number;
+    /** Accessible name of the handle. Defaults to `'Resize panel'`. */
+    ariaLabel?: string;
+    /** Additional CSS classes for the inner content wrapper. */
+    className?: string;
+    /** Additional CSS classes for the resize handle. */
+    resizeHandlerClassName?: string;
+    /** Custom node rendered inside the handle, in place of the default chevron. */
+    resizeHandler?: ReactNode;
+}
+/**
+ * A panel the user can widen or narrow by dragging its edge.
+ * aliases: ResizePanel|SizableContainer|Splitter
+ * Design system 2.0
+ *
+ * Works as a controlled component when `width` is provided, otherwise it keeps
+ * its own width from `defaultWidth`. The handle — an accent line with a chevron
+ * pointing away from the panel — appears on hover and while dragging, and stays
+ * within `minWidth`–`maxWidth` in both modes.
+ *
+ * The handle is a focusable `separator`, so the panel resizes with the arrow
+ * keys — `Home` and `End` jump to the bounds — and each press reports through
+ * `onResize` and `onResizeStop`. Unlike the 1.0 container this one draws no
+ * dividers between its children; pass `divide-y divide-tertiary` through
+ * `className` if you want them.
+ *
+ * @example
+ * ```tsx
+ * <ResizableContainer minWidth={180} maxWidth={520} defaultWidth={260}>
+ *   <Sidebar />
+ * </ResizableContainer>
+ *
+ * <ResizableContainer
+ *   minWidth={180}
+ *   maxWidth={520}
+ *   width={sidebarWidth}
+ *   onResizeStop={setSidebarWidth}
+ * >
+ *   <Sidebar />
+ * </ResizableContainer>
+ * ```
+ *
+ * @param children - Content placed inside the container.
+ * @param minWidth - Minimum allowed width in px.
+ * @param maxWidth - Maximum allowed width in px.
+ * @param [width] - Controlled width. If omitted the container is uncontrolled.
+ * @param [defaultWidth] - Initial width when uncontrolled. Defaults to `minWidth`.
+ * @param [onResizeStop] - Fired when a resize ends, and once per arrow key press.
+ * @param [onResize] - Fired continuously while dragging.
+ * @param [side=ResizableContainerSide.Right] - Edge carrying the resize handle.
+ * @param [keyboardStep=16] - Width change per arrow key press.
+ * @param [ariaLabel='Resize panel'] - Accessible name of the handle.
+ * @param [className] - Additional CSS classes for the inner content wrapper.
+ * @param [resizeHandlerClassName] - Additional CSS classes for the resize handle.
+ * @param [resizeHandler] - Custom node rendered inside the handle, replacing the default chevron.
+ */
+export declare const ResizableContainer: FC<ResizableContainerProps>;

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

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import { ResizableContainerSide } from '../../../../types/resizable-container';
+interface ResizeHandleProps {
+    side: ResizableContainerSide;
+    isResizing: boolean;
+    width: number;
+    minWidth: number;
+    maxWidth: number;
+    step: number;
+    ariaLabel: string;
+    onWidthChange: (nextWidth: number) => void;
+    customHandler?: ReactNode;
+    handlerClassName?: string;
+}
+/**
+ * The draggable edge of {@link ResizableContainer}. It is a focusable
+ * `separator` — the window-splitter pattern — so the panel can be resized with
+ * the arrow keys as well as the pointer.
+ */
+export declare const ResizeHandle: FC<ResizeHandleProps>;
+export {};

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 border border-tertiary bg-layer-sunken p-[3px]";
+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

@@ -1,6 +1,6 @@
 export declare const selectOverlayBaseClassName: string;
 export declare const selectOptionBaseClassName: string;
-export declare const selectOptionSelectedClassName = "bg-control-accent-alpha-hover";
+export declare const selectOptionSelectedClassName = "bg-control-accent-alpha";
 /**
  * Holds the option list to the width of the field.
  *
@@ -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: string;
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;

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

@@ -0,0 +1,70 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'size'>;
+export interface SliderProps extends NativeInputProps {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    labelProps?: LabelProps;
+    /** 2-element or 3-element label tuple rendered below the track */
+    labels?: [string, string] | [string, string, string];
+    /** Custom formatter for the displayed value; defaults to fixed-decimal based on step */
+    formatValue?: (value: number) => string;
+    /** Renders the current value at the end of the label row */
+    showValue?: boolean;
+    caption?: string;
+    error?: string;
+    onChange?: (value: number) => void;
+    containerClassName?: string;
+    /** Additional classes for the unfilled track */
+    trackClassName?: string;
+    /** Additional classes for the filled portion of the track */
+    fillClassName?: string;
+}
+/**
+ * A range slider from the 2.0 design system.
+ * aliases: RangeInput|TemperatureSlider|RangeSlider
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   id="temperature"
+ *   labelProps={{ label: 'Temperature' }}
+ *   value={temperature}
+ *   labels={['Precise', 'Neutral', 'Creative']}
+ *   onChange={setTemperature}
+ * />
+ * ```
+ *
+ * Built on a native `<input type="range">`, so the browser owns the drag, the
+ * arrow / Home / End steps, touch and the writing direction. Only the thumb is
+ * restyled; the track and its fill are separate elements so the fill can be
+ * driven from `value`. Thumb states live in `slider.scss`, because a
+ * pseudo-element cannot be reached by a utility class.
+ *
+ * The interactive row is 24px tall and spans the full width, so the pointer
+ * target meets WCAG 2.5.8 (Minimum) but not the 44px of 2.5.5 (Enhanced) — see
+ * the exception table in the README.
+ *
+ * @param value - Current slider value
+ * @param [min=0] - Minimum value
+ * @param [max=1] - Maximum value
+ * @param [step=0.1] - Step increment
+ * @param [disabled=false] - Whether the slider is disabled
+ * @param [labelProps] - Props of the {@link Label} rendered above the track
+ * @param [labels] - 2 or 3 strings rendered below the track (start, [middle,] end)
+ * @param [formatValue] - Custom formatter for the displayed value; also becomes the announced `aria-valuetext`
+ * @param [showValue=false] - Renders the current value at the end of the label row
+ * @param [caption] - Helper text rendered below the track, and described by the slider
+ * @param [error] - Error message rendered below the track; replaces the caption
+ * @param [onChange] - Callback fired with the new value
+ * @param [containerClassName] - Additional classes for the outer container
+ * @param [trackClassName] - Additional classes for the unfilled track
+ * @param [fillClassName] - Additional classes for the filled portion of the track
+ * @param [className] - Additional classes for the underlying range input
+ */
+export declare const Slider: FC<SliderProps>;
+export {};