toggle-group headless API

export declare const Indicator: import("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;

export declare const Item: import("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>;

export declare const Label: import("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>;

export declare const Root: import("react").ForwardRefExoticComponent<SegmentedRootProps & import("react").RefAttributes<HTMLDivElement>>;

export declare const RootProvider: import("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>;

export declare const Segmented: {
  Root: import("react").ForwardRefExoticComponent<SegmentedRootProps & import("react").RefAttributes<HTMLDivElement>>;
  RootProvider: import("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
  Item: import("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>;
  Label: import("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>;
  Indicator: import("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
};

type SegmentedChangeReason = "pointer" | "keyboard" | "programmatic";

type SegmentedCommand = CommandObject & ({
  readonly type: "VALUE_CHANGE_REQUEST";
  readonly value: SegmentedSelection;
  readonly reason: SegmentedChangeReason;
} | {
  readonly type: "FOCUS_ITEM";
  readonly key: string;
});

export declare const SegmentedContext: import("react").Context<SegmentedContextValue | null>;

declare function SegmentedContextProvider(props: {
  value: SegmentedContextValue;
  children: ReactNode;
}): import("react").JSX.Element;

interface SegmentedContextValue {
  readonly service: SegmentedService;
  readonly connector: SegmentedApi;
  readonly scope: PartScope;
  readonly snapshot: SegmentedSnapshot;
}

type SegmentedEvent = {
  readonly type: "SELECT";
  readonly value: string;
  readonly reason: SegmentedChangeReason;
} | {
  readonly type: "MOVE";
  readonly direction: -1 | 1;
} | {
  readonly type: "HOME";
} | {
  readonly type: "END";
} | {
  readonly type: "FOCUS";
  readonly value: string;
} | {
  readonly type: "BLUR";
} | {
  readonly type: "RESET";
};

interface SegmentedIndicatorProps extends ComponentPropsWithoutRef<"span"> {
  readonly asChild?: boolean;
  readonly item?: SegmentedItem;
}

type SegmentedInput = {
  readonly options: readonly SegmentedItem[];
  readonly type?: SegmentedType;
  /** Controlled committed value. A defined empty array is controlled. */
  readonly value?: SegmentedSelection;
  /** Uncontrolled initial value. */
  readonly defaultValue?: SegmentedSelection;
  readonly disabled?: boolean;
  readonly readOnly?: boolean;
  /** Connector hint; the machine receives logical movement only. */
  readonly orientation?: SegmentedOrientation;
  readonly loop?: boolean;
};

interface SegmentedItem {
  readonly value: string;
  readonly disabled?: boolean;
}

interface SegmentedItemProps extends Omit<ComponentPropsWithoutRef<"button">, "value"> {
  readonly asChild?: boolean;
  readonly item?: SegmentedItem;
  readonly value?: string;
  readonly disabled?: boolean;
  readonly children?: ReactNode;
}

interface SegmentedLabelProps extends ComponentPropsWithoutRef<"div"> {
  readonly asChild?: boolean;
}

type SegmentedContext = {
  readonly type: SegmentedType;
  readonly value: SegmentedSelection | undefined;
  readonly focusedValue?: string;
  readonly mode: BindingMode;
};

interface SegmentedRootProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "value"> {
  readonly asChild?: boolean;
  readonly options: SegmentedInput["options"];
  readonly type?: SegmentedInput["type"];
  readonly value?: SegmentedInput["value"];
  readonly defaultValue?: SegmentedInput["defaultValue"];
  readonly disabled?: boolean;
  readonly readOnly?: boolean;
  readonly orientation?: SegmentedInput["orientation"];
  readonly loop?: boolean;
  readonly dir?: "ltr" | "rtl";
  readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void;
  readonly children?: ReactNode;
  /** Internal surface selector used by the ToggleGroup alias. */
  readonly surface?: "segmented" | "toggle-group";
}

interface SegmentedRootProviderProps extends Omit<SegmentedRootProps, "options" | "value" | "defaultValue" | "type"> {
  readonly value: ReturnType<typeof useSegmented>;
}

type SegmentedSelection = string | readonly string[];

type SegmentedSnapshot = Snapshot<SegmentedStateValue, SegmentedContext>;

type SegmentedType = "single" | "multiple";

interface SegmentedValueChangeDetail {
  readonly value: string | readonly string[];
  readonly reason: import("@grassroot/ui-machines/segmented").SegmentedChangeReason;
}

export declare const ToggleGroup: {
  Root: (props: SegmentedRootProps) => import("react").JSX.Element;
  RootProvider: import("react").ForwardRefExoticComponent<SegmentedRootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
  Item: import("react").ForwardRefExoticComponent<SegmentedItemProps & import("react").RefAttributes<HTMLButtonElement>>;
  Label: import("react").ForwardRefExoticComponent<SegmentedLabelProps & import("react").RefAttributes<HTMLDivElement>>;
  Indicator: import("react").ForwardRefExoticComponent<SegmentedIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
};

declare function useSegmented(input: SegmentedInput, options?: UseSegmentedOptions): UseSegmentedResult;

declare function useSegmentedContext(part: string): SegmentedContextValue;

interface UseSegmentedOptions {
  readonly dir?: "ltr" | "rtl";
  readonly scope?: "segmented" | "toggle-group";
  readonly onValueChange?: (detail: SegmentedValueChangeDetail) => void;
}

interface UseSegmentedResult {
  readonly service: SegmentedService;
  readonly connector: SegmentedApi;
  readonly scope: PartScope;
  readonly snapshot: SegmentedSnapshot;
}

declare function provideSegmentedContext(value: SegmentedContextValue): void;

export declare const Segmented: {
  Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    options: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>;
      required: true;
    };
    type: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>;
      default: undefined;
    };
    value: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>;
      default: undefined;
    };
    defaultValue: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>;
      default: undefined;
    };
    disabled: {
      type: BooleanConstructor;
      default: undefined;
    };
    readOnly: {
      type: BooleanConstructor;
      default: undefined;
    };
    orientation: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>;
      default: undefined;
    };
    loop: {
      type: BooleanConstructor;
      default: undefined;
    };
    dir: {
      type: import("vue").PropType<"ltr" | "rtl" | undefined>;
      default: undefined;
    };
    surface: {
      type: import("vue").PropType<"segmented" | "toggle-group">;
      default: string;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
    valueChange: (_detail: SegmentedValueChangeDetail) => true;
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    options: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["options"]>;
      required: true;
    };
    type: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["type"]>;
      default: undefined;
    };
    value: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["value"]>;
      default: undefined;
    };
    defaultValue: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["defaultValue"]>;
      default: undefined;
    };
    disabled: {
      type: BooleanConstructor;
      default: undefined;
    };
    readOnly: {
      type: BooleanConstructor;
      default: undefined;
    };
    orientation: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedInput["orientation"]>;
      default: undefined;
    };
    loop: {
      type: BooleanConstructor;
      default: undefined;
    };
    dir: {
      type: import("vue").PropType<"ltr" | "rtl" | undefined>;
      default: undefined;
    };
    surface: {
      type: import("vue").PropType<"segmented" | "toggle-group">;
      default: string;
    };
  }>> & Readonly<{
    onValueChange?: ((_detail: SegmentedValueChangeDetail) => any) | undefined;
  }>, {
    asChild: boolean;
    type: import("@grassroot/ui-machines/segmented").SegmentedType | undefined;
    value: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined;
    defaultValue: import("@grassroot/ui-machines/segmented").SegmentedSelection | undefined;
    disabled: boolean;
    readOnly: boolean;
    orientation: import("@grassroot/ui-machines/segmented").SegmentedOrientation | undefined;
    loop: boolean;
    dir: "ltr" | "rtl" | undefined;
    surface: "segmented" | "toggle-group";
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
  Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
      default: undefined;
    };
    value: {
      type: StringConstructor;
      default: undefined;
    };
    disabled: {
      type: BooleanConstructor;
      default: undefined;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
      default: undefined;
    };
    value: {
      type: StringConstructor;
      default: undefined;
    };
    disabled: {
      type: BooleanConstructor;
      default: undefined;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
    item: import("@grassroot/ui-machines/segmented").SegmentedItem;
    value: string;
    disabled: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
  Label: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
  Indicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
      default: undefined;
    };
  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    asChild: {
      type: BooleanConstructor;
      default: boolean;
    };
    item: {
      type: import("vue").PropType<import("@grassroot/ui-machines/segmented").SegmentedItem>;
      default: undefined;
    };
  }>> & Readonly<{}>, {
    asChild: boolean;
    item: import("@grassroot/ui-machines/segmented").SegmentedItem;
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
};