import { type ReactNode } from "react";
import { type LayoutStyle, type Palette } from "../../style/index.js";
import { type SwatchSkin } from "./swatch.styles.js";
export type SwatchSize = "tiny" | "small" | "default" | "large";
export interface SwatchProps {
    /** The fill: any React Native color string. Pass a theme token, not a literal. */
    color?: string;
    violet?: boolean;
    cyan?: boolean;
    mint?: boolean;
    rose?: boolean;
    amber?: boolean;
    /**
     * The sample is the chosen one: draws the selection ring (a 2 px gap in the page color,
     * then a 2 px band). On a plain sample the band is the accent and the name says
     * "selected"; on a palette picker it is the one in force and the radio is checked.
     */
    selected?: boolean;
    /** Palette picker: pick this palette. */
    onPress?: () => void;
    /** 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;
    /** The 20 px disc of a token chip (`<Chip token icon={<Swatch tiny ring circle />}>`). */
    tiny?: boolean;
    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;
    /**
     * Draws the token chip's hairline INSIDE the sample, a 1 px inset ring in the field
     * border, in place of the resting hairline edge; a selected sample keeps its selection
     * ring outside it.
     */
    ring?: 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;
    /**
     * The labelled colour tile: the parent's width, 64 px tall (40 `small`), its name set
     * inside the fill on one line (ellipsized where it outgrows the tile) at an 8 px inset in
     * the 11 px mono face, at the foot (centred `small`).
     * `ink` paints the name; the value lines are read into the accessible name only.
     */
    tile?: boolean;
    /** A colour bar: the parent's width, 26 px tall at the swatch bar corner (a neutral role's sample). */
    bar?: boolean;
    /**
     * One bar of colour steps in place of `color`, flush and clipped at the ramp corner at the
     * size's height (`block small` is the 32 px accent ramp); `segmented` stands them apart.
     */
    steps?: readonly string[];
    /** `steps` as separate segments: a 28 px bar, 4 apart, the step corner inside and the bar corner at its ends. */
    segmented?: boolean;
    /** The chip's edge is the parent's width, held 1:1 (a spectrum's discs filling their cells). */
    fluid?: boolean;
    /** The fill's own ambient light under the chip (`0 12px 30px -8px`, the fill at .6). */
    glow?: boolean;
    /** The label column centred under the chip, 10 px below it. */
    centered?: boolean;
    /** No resting edge: the sample sits on its fill alone (a saturated fill that needs no hairline). */
    bare?: boolean;
    /**
     * The mono lockup: the name 500 12 px and the value 400 10 px in the code face, each on one
     * line (ellipsized where it outgrows a narrow column), 6 px apart and 6 px under the chip; a
     * `block` chip is 56 px tall.
     */
    compact?: boolean;
    /** The `tile` name's ink, a theme token like `color` (default the foreground). */
    ink?: string;
    /**
     * 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;
    /**
     * The sample is decoration beside text that already names it (a theme choice's disc
     * before its label): hidden from assistive tech, so the text carries the name once.
     * Pass it in place of `accessibilityLabel`.
     */
    decorative?: boolean;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** For layout composition only (not styling): the fill, radius, and size come from props. */
    style?: LayoutStyle;
}
/** The palette a picker sample shows, or null for a plain color sample (no palette prop). */
export declare function paletteOf(p: Pick<SwatchProps, Palette>): Palette | null;
/** A palette's name as a picker announces it ("Violet"). */
export declare function paletteName(palette: Palette): string;
/**
 * A palette's disc fill: the hand-off navbar's `oklch(.72 .17 hue)`, the same in both
 * schemes, since the disc names the hue rather than painting the accent of a scheme.
 */
export declare function paletteDiscColor(palette: Palette): string;
export declare function sizeOf(p: SwatchProps): SwatchSize;
export declare function stretchesOf(p: Pick<SwatchProps, "block" | "circle" | "inline">): boolean;
export type SwatchForm = "tile" | "bar" | "circle" | "square";
export declare function formOf(p: Pick<SwatchProps, "tile" | "bar" | "circle">): SwatchForm;
/** 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