import type { JSX, ValidComponent } from "@solidjs/web";
import type { BaseUIEventReasons } from "../internals/change-event-details.js";
import type { BaseUIComponentProps, Orientation } from "../internals/types.js";
import { type ToggleGroupChangeEventDetails } from "./toggle-group-context.js";
export type ToggleGroupChangeEventReason = BaseUIEventReasons["none"];
export type { ToggleGroupChangeEventDetails };
/**
 * State projected to `data-*` attributes. `orientation` projects via the
 * default mapping as `data-orientation="horizontal"` / `"vertical"`.
 * `disabled` + `multiple` are emitted as presence-only attrs.
 */
export interface ToggleGroupState {
    /** Whether the group ignores user interaction. */
    disabled: boolean;
    /** `true` when any subset of children can be pressed simultaneously. */
    multiple: boolean;
    /** Keyboard-navigation orientation. */
    orientation: Orientation;
}
export interface ToggleGroupProps<Value extends string = string> extends BaseUIComponentProps<"div", ToggleGroupState> {
    /**
     * Tag/component to render. Defaults to `"div"`. Replaces the
     * pre-spike `render` prop (axis G).
     */
    as?: ValidComponent;
    /**
     * Controlled pressed-state array. When provided (not `undefined`), the
     * consumer owns the state — pair with {@link onValueChange}. When
     * omitted, the group manages its own value (seeded from
     * {@link defaultValue}). An empty array IS a controlled value.
     */
    value?: readonly Value[] | undefined;
    /**
     * Initial pressed-state array when uncontrolled. Read once at mount.
     * @default []
     */
    defaultValue?: readonly Value[] | undefined;
    /**
     * Fires when the set of pressed values changes. Consumer may call
     * `details.cancel()` to veto the write.
     */
    onValueChange?: ((groupValue: Value[], details: ToggleGroupChangeEventDetails) => void) | undefined;
    /**
     * Whether the group (and every descendant toggle) ignores user interaction.
     * @default false
     */
    disabled?: boolean | undefined;
    /**
     * Navigation orientation — drives arrow-key dispatch and the
     * `data-orientation` attribute.
     * @default "horizontal"
     */
    orientation?: Orientation | undefined;
    /**
     * Whether arrow-key navigation loops focus at the ends.
     * @default true
     */
    loopFocus?: boolean | undefined;
    /**
     * When `true`, multiple toggles can be pressed simultaneously.
     * @default false
     */
    multiple?: boolean | undefined;
}
/**
 * Groups a series of `<Toggle>` elements, coordinating their pressed state
 * through a single `value` array. Renders a `<div role="group">` (or `as`
 * override).
 *
 * §1 wave 2: replaces `renderElement` with `dynamic(() => props.as ?? "div")`.
 * The state-attr projection (`data-disabled`, `data-multiple`,
 * `data-orientation`) is emitted via inline reactive getters; the composite
 * root's `props` bag (aria-orientation, onKeyDown, onFocus) is composed via
 * `mergeRootProps`.
 */
export declare function ToggleGroup<Value extends string = string>(props: ToggleGroupProps<Value>): JSX.Element;
//# sourceMappingURL=toggle-group.d.ts.map