import { type ReactNode } from "react";
import { type StyleProp, type ViewStyle } from "../../style/index.js";
import { type SwatchSkin } from "./swatch.styles.js";
export type SwatchSize = "small" | "default" | "large";
export interface SwatchProps {
    /** The fill: any React Native color string. Pass a theme token, not a literal. */
    color: string;
    /** The sample's name (the token name). Swatch owns this label column. */
    children?: ReactNode;
    /** Primary mono line under the name: what the name resolves to (a hex, a custom-property name, a ramp step). */
    value?: string;
    /** Secondary mono line under the value, for a second notation of the same color (an oklch value, a legacy alias). */
    detail?: string;
    small?: boolean;
    large?: boolean;
    /** Circle instead of the default rounded square. Keeps the 1:1 footprint, so it wins over `block`'s stretch. */
    circle?: boolean;
    /** Put the label column beside the block instead of under it. */
    inline?: boolean;
    /** Stretch the block to the parent's width; the size then reads as its height (the full-width ramp bar). */
    block?: boolean;
    /**
     * Accessible name override. By default the sample names itself from its own name,
     * value, and detail (falling back to the color string), so pass this only when the
     * name is a node rather than text and there is nothing to read.
     */
    accessibilityLabel?: string;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** For layout composition only (not styling): the fill, radius, and size come from props. */
    style?: StyleProp<ViewStyle>;
}
/** Build a Swatch from a platform skin. */
export declare function createSwatch(skin: SwatchSkin): (props: SwatchProps) => import("react").JSX.Element;
//# sourceMappingURL=swatch.shared.d.ts.map