import type React from 'react';
import type { FocusDetail, KeyboardDetail, SliderDetail } from './types.js';
export interface SliderRef extends HTMLElement {
    /** Focuses the range input. */
    focus(): void;
    /** Returns the current slider value. */
    getValue(): string;
    /** Sets the slider value programmatically. */
    setValue(value: string): void;
}
/**
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<SliderRef>(null)`, pass `ref={api}`, then `api.current?.focus()`.
 * Available: focus(), getValue(), setValue().
 *
 * @csspart base
 */
export interface SliderOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label: string;
    /**
     * Accessible label for screen readers when no visible label is present.
     * @example 'example'
     */
    ariaLabel?: string;
    /**
     * Current value of the component.
     * @defaultValue 50
     * @example 1
     */
    value?: number;
    /**
     * Minimum allowed value.
     * @defaultValue 0
     * @example 1
     */
    min?: number;
    /**
     * Maximum allowed value.
     * @defaultValue 100
     * @example 100
     */
    max?: number;
    /**
     * Step increment between allowed values.
     * @defaultValue 1
     * @example 1
     */
    step?: number;
    /**
     * Layout orientation (horizontal or vertical). Allowed values: `horizontal`, `vertical`.
     * @example 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * Corner radius style. Allowed values: `sharp`, `rounded`, `pill`.
     * @example 'sharp'
     */
    shape?: 'sharp' | 'rounded' | 'pill';
    /**
     * Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`.
     * @example 'neutral'
     */
    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Whether to display the current value label.
     * @defaultValue true
     * @example true
     */
    showValue?: boolean;
    /**
     * Accessible text representation of the current value (e.g. "$50").
     * @example 'example'
     */
    valueText?: string;
    /**
     * Helper text displayed below the input.
     * @example 'example'
     */
    helperText?: string;
    /**
     * Error message text displayed below the slider.
     * @example 'example'
     */
    errorText?: string;
    /**
     * Disables the component, preventing interaction.
     * @defaultValue false
     * @example true
     */
    disabled?: boolean;
    /**
     * Renders the input without a visible label (still requires aria-label).
     * @defaultValue false
     * @example true
     */
    unlabeled?: boolean;
    /**
     * Fires on each user edit before the value is committed. Detail: `SliderDetail`.
     * @example (event) => console.log(event.detail.value)
     */
    onInput?: (event: CustomEvent<SliderDetail>) => void;
    /**
     * Fires when the committed component value or state changes. Detail: `SliderDetail`.
     * @example (event) => console.log(event.detail.value)
     */
    onChange?: (event: CustomEvent<SliderDetail>) => void;
    /**
     * Fires when focus enters the component. Detail: `FocusDetail`.
     * @example (event) => console.log(event.detail.relatedTarget)
     */
    onFocus?: (event: CustomEvent<FocusDetail>) => void;
    /**
     * Fires when focus leaves the component. Detail: `FocusDetail`.
     * @example (event) => console.log(event.detail.relatedTarget)
     */
    onBlur?: (event: CustomEvent<FocusDetail>) => void;
    /**
     * Fires when a key is pressed inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
    /**
     * Fires when a key is released inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<Slider>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-slider>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type SliderProps = SliderOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof SliderOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Slider: React.ForwardRefExoticComponent<SliderOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof SliderOwnProps> & React.RefAttributes<SliderRef>>;