/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ButtonProps } from '../../Button.js';
import { SVGIcon } from '@progress/kendo-svg-icons';
/**
 * Represents the properties of a single item within the SegmentedControl component.
 */
export interface SegmentedItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /**
     * The unique identifier for the SegmentedItem. Used to match against the SegmentedControl's `value` to determine selection.
     */
    value: string;
    /**
     * Sets an SVG icon to render inside the item using an `IconWrap` element.
     * Only rendered when `itemTemplate` is not provided.
     */
    svgIcon?: SVGIcon;
    /**
     * Specifies the text label of the SegmentedItem.
     * Rendered inside a `<span>` element. Only rendered when `itemTemplate` is not provided.
     */
    text?: string;
    /**
     * CSS class name applied to the icon element only when the item is selected (`isSelected` is `true`).
     * Has no effect when `itemTemplate` is provided.
     */
    iconClassName?: string;
    /**
     * Sets the `title` HTML attribute of the item button.
     */
    title?: string;
    /**
     * Represents the `dir` HTML attribute of the item button, controlling text directionality.
     */
    dir?: string;
}
/**
 * Represents a reference handle to the SegmentedControl component, exposed via `React.forwardRef`.
 *
 * Provides access to the underlying root DOM element of the SegmentedControl.
 */
export interface SegmentedControlHandle {
    /**
     * The root `<div>` DOM element of the SegmentedControl.
     */
    element: HTMLDivElement | null;
}
/**
 * Represents the properties of the SegmentedControl component.
 *
 * The SegmentedControl displays a horizontal set of mutually exclusive button segments, allowing the user to select one option at a time.
 */
export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    /**
     * Specifies the collection of items rendered as buttons inside the SegmentedControl.
     */
    items?: Array<SegmentedItemProps>;
    /**
     * Sets the size of the SegmentedControl items. The value is mapped through `kendoThemeMaps.sizeMap` to the corresponding CSS size class.
     */
    size?: ButtonProps['size'];
    /**
     * Specifies the layout mode of the SegmentedControl.
     *
     * - `compact`: Items are sized based on their content (default).
     * - `stretch`: Items stretch to fill the available horizontal space, applying the `k-segmented-control-stretched` CSS class.
     *
     * @default "compact"
     */
    layoutMode?: 'compact' | 'stretch';
    /**
     * The currently selected item value.
     * When provided, the component operates in controlled mode and `onChange` must be used to update this value.
     * The item whose `value` matches this prop receives the `k-selected` CSS class.
     *
     * @example
     * ```tsx
     * <SegmentedControl
     *   value="option1"
     *   onChange={(value) => setSelectedValue(value)}
     *   items={items}
     * />
     * ```
     */
    value?: string;
    /**
     * Sets the initially selected item value when the component is in uncontrolled mode (i.e., `value` is not provided).
     * Once set, subsequent changes to `defaultValue` are ignored.
     *
     * @example
     * ```tsx
     * <SegmentedControl
     *   defaultValue="option2"
     *   onChange={(value) => console.log('Selected:', value)}
     *   items={items}
     * />
     * ```
     */
    defaultValue?: string;
    /**
     * Callback fired when a non-selected item is clicked and the selection changes.
     * Not triggered when the already-selected item is clicked.
     * Receives the `value` of the newly selected item.
     *
     * @example
     * ```tsx
     * <SegmentedControl
     *   onChange={(value) => {
     *     console.log('Selected value:', value);
     *   }}
     *   items={items}
     * />
     * ```
     */
    onChange?: (value: string) => void;
    /**
     * A custom render function for the item content. When provided, it replaces the default rendering (SVG icon + text span) entirely.
     * Receives the full item configuration object and must return a React node.
     *
     * @param itemData - The item configuration object containing value, text, svgIcon, etc.
     * @returns React node to render inside the item button
     *
     * @example
     * ```tsx
     * <SegmentedControl
     *   items={items}
     *   itemTemplate={(itemData) => (
     *     <div className="custom-item-content">
     *       {itemData.svgIcon && <span className="icon">{itemData.svgIcon}</span>}
     *       <span className="text">{itemData.text}</span>
     *       <span className="badge">New</span>
     *     </div>
     *   )}
     * />
     * ```
     */
    itemTemplate?: (itemData: SegmentedItemProps) => React.ReactNode;
}
/**
 * Represents the internal interaction state of the SegmentedControl component.
 *
 * Tracks which items are currently selected, hovered over, or have keyboard focus,
 * used to apply the corresponding CSS state classes (`k-selected`, `k-hover`, `k-focus`) during user interactions.
 *
 * @hidden
 */
export interface SegmentedControlState {
    /**
     * The `value` of the currently selected item in uncontrolled mode.
     * Undefined when no item has been selected yet.
     */
    selectedValue?: string;
    /**
     * The `value` of the item currently being hovered over.
     * Set on `mouseenter` and cleared on `mouseleave`. Undefined when no item is hovered.
     */
    hoveredValue?: string;
    /**
     * The `value` of the item that currently has keyboard focus.
     * Set on `focus` and cleared on `blur`. Undefined when no item is focused.
     */
    focusedValue?: string;
}