/**
 * @usevyre/react — ToggleGroup + ToggleItem
 *
 * AI CONTEXT:
 * ┌──────────────────────────────────────────────────────────────────┐
 * │ Component:  ToggleGroup (+ ToggleItem)                            │
 * │ Import:     import { ToggleGroup, ToggleItem } from "@usevyre/react"│
 * │                                                                   │
 * │ Segmented control. CONTROLLED — the group owns the value.         │
 * │ onChange emits the VALUE (string|null or string[]), not an event. │
 * │                                                                   │
 * │   type     = "single"(default) | "multiple"                       │
 * │     single   → value: string | null, onChange(string | null)      │
 * │     multiple → value: string[],      onChange(string[])           │
 * │   options? = { value; label?; icon?; disabled? }[]                │
 * │   size     = "sm" | "md"(default) | "lg"                          │
 * │   disabled = boolean (disables the whole group)                   │
 * │                                                                   │
 * │ Use `options` for simple lists, or <ToggleItem value> children    │
 * │ for custom content. Keyboard: arrows move, Space/Enter toggles.   │
 * │                                                                   │
 * │ NOT Switch (boolean), NOT ButtonGroup (layout only),              │
 * │ NOT RadioGroup (form radios, single only).                        │
 * └──────────────────────────────────────────────────────────────────┘
 *
 * @example
 * const [view, setView] = useState<string | null>("grid");
 * <ToggleGroup
 *   value={view}
 *   onChange={setView}
 *   options={[
 *     { value: "grid", label: "Grid" },
 *     { value: "list", label: "List" },
 *   ]}
 * />
 *
 * @example  // multiple, composable
 * const [fmt, setFmt] = useState<string[]>(["bold"]);
 * <ToggleGroup type="multiple" value={fmt} onChange={setFmt}>
 *   <ToggleItem value="bold">B</ToggleItem>
 *   <ToggleItem value="italic">I</ToggleItem>
 * </ToggleGroup>
 */
import React from "react";
import type { BaseProps } from "../../types";
export interface ToggleOption {
    value: string;
    label?: React.ReactNode;
    icon?: React.ReactNode;
    disabled?: boolean;
}
type ToggleSize = "sm" | "md" | "lg";
type SingleProps = {
    type?: "single";
    value?: string | null;
    onChange?: (value: string | null) => void;
};
type MultipleProps = {
    type: "multiple";
    value?: string[];
    onChange?: (value: string[]) => void;
};
export type ToggleGroupProps = (SingleProps | MultipleProps) & BaseProps & {
    options?: ToggleOption[];
    size?: ToggleSize;
    disabled?: boolean;
    orientation?: "horizontal" | "vertical";
    /** Accessible label for the group */
    "aria-label"?: string;
    children?: React.ReactNode;
};
export declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
export interface ToggleItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
    value: string;
    icon?: React.ReactNode;
    disabled?: boolean;
}
export declare const ToggleItem: React.ForwardRefExoticComponent<ToggleItemProps & React.RefAttributes<HTMLButtonElement>>;
export {};