/**
 * @fileoverview Three-segment theme toggle (light / dark / system).
 *
 * Pill-shaped segmented control with Sun, Moon, and Monitor icons. Built on
 * the design-system `ToggleGroup` primitive (Pattern B — CSS-motion).
 *
 * Three appearances:
 *   - `"icon"` (default) — segments are small circles floating inside the
 *     rail. The active segment is filled with `--background` and a subtle
 *     ring. Segment shape is always pill, independent of the rail's
 *     `radius`.
 *   - `"icon-inherit"` — same compact icon footprint as `"icon"`, but each
 *     segment's border-radius matches the rail's `radius`. Use this when
 *     `radius="sharp"` should propagate to the segments too.
 *   - `"button"` — segments fill the rail end-to-end. The active segment
 *     matches the rail's outer corner radius on its outer edge and stays
 *     flat on its inner edge so it slots cleanly into the rail.
 *
 * The `radius` axis drives the rail's outer border-radius and is resolved
 * through `useSaasflareProps` (an explicit `radius` prop wins; this component
 * defaults to `"pill"` / `rounded-full`). Set `radius="sharp" | "soft" |
 * "rounded" | "pill"` — segment corners adapt automatically in
 * `"icon-inherit"` and `"button"` appearances.
 *
 * Supports `next-themes` natively. Renders `null` until hydrated to avoid
 * SSR/CSR mismatch on the active segment. When the System segment is
 * active, its `title` reflects the OS-resolved theme (e.g.
 * "System mode (currently dark)") so users see what their preference
 * resolves to.
 *
 * @module packages/ui/components/composed/theme-mode-multi-toggle
 * @package ui
 *
 * @component
 * @example
 * import { ThemeModeMultiToggle } from '@saasflare/ui';
 * <ThemeModeMultiToggle />
 *
 * @example
 * // Inherit-radius icons (segments adopt the rail's radius)
 * <ThemeModeMultiToggle appearance="icon-inherit" radius="sharp" />
 *
 * @example
 * // Button appearance with rounded geometry
 * <ThemeModeMultiToggle appearance="button" radius="rounded" />
 */
import * as React from "react";
import { type SaasflareComponentProps } from "../../providers";
/** Available theme modes — mirrors next-themes' `theme` prop. */
type ThemeMode = "light" | "dark" | "system";
/** Visual appearance of the segments. */
type ThemeModeMultiToggleAppearance = "icon" | "icon-inherit" | "button";
interface ThemeModeMultiToggleProps extends SaasflareComponentProps {
    /** Override the default screen-reader labels per segment. */
    labels?: Partial<Record<ThemeMode, string>>;
    /** Additional class names applied to the rail. */
    className?: string;
    /** Segment size — matches the Toggle/ToggleGroup `size` axis. (`"default"` is a deprecated alias for `"md"`.) */
    size?: "sm" | "md" | "lg" | "default";
    /**
     * Visual appearance of the segments.
     *
     * - `"icon"` (default): small floating circles, always pill.
     * - `"icon-inherit"`: small floating shapes that match the rail's `radius`.
     * - `"button"`: segments fill the rail; outer corners match the rail's
     *   `radius`, inner corners stay flat so the segment slots in.
     *
     * @default "icon"
     */
    appearance?: ThemeModeMultiToggleAppearance;
    /**
     * SSR-known theme mode (typically read from a cookie in the parent server
     * component). When provided, the component skips its internal mount-gate
     * and renders the matching segment as active on the very first paint —
     * eliminating the brief invisible / wrong-segment frame caused by
     * `next-themes` returning `undefined` during SSR.
     *
     * Leave undefined for the legacy mount-gated behaviour (renders `null`
     * until mounted).
     */
    initialMode?: ThemeMode;
}
/**
 * Three-segment theme switcher (light / dark / system).
 *
 * @component
 * @layer ui
 */
export declare function ThemeModeMultiToggle({ labels, className, size, appearance, surface, radius, animated, iconWeight, initialMode, }: ThemeModeMultiToggleProps): React.JSX.Element | null;
export type { ThemeModeMultiToggleProps, ThemeModeMultiToggleAppearance };