import { type Color, type ColorChannel, type ColorSpace } from '../lib/color';
/** Group name both control roots carry, so the shared thumb can react to either. */
export declare const COLOR_CONTROL_GROUP = "group/color-control";
/**
 * Inert, dimmed and flat-filled: the disabled treatment every color component shares.
 * The flat fill only shows because the components withhold their inline background
 * when disabled, leaving this class to paint.
 */
export declare const colorControlDisabledClasses = "data-disabled:pointer-events-none data-disabled:opacity-disabled data-disabled:bg-background-muted";
/**
 * That treatment plus the focus ring and gesture guards, for the two controls a
 * pointer drags. A swatch takes the disabled classes alone: `touch-none` there would
 * cost a palette its touch scrolling.
 */
export declare const colorControlRootClasses = "outline-ring relative isolate touch-none select-none forced-color-adjust-none outline-offset-2 has-focus-visible:outline-3 data-disabled:pointer-events-none data-disabled:opacity-disabled data-disabled:bg-background-muted";
/**
 * Hairline over the color, so a pale one still reads as a bounded surface, and
 * the dashed outline that replaces it when disabled. Both live on this overlay rather
 * than the root: a border on the root would shrink the padding box the thumb is
 * positioned against, nudging it a pixel the moment the control is disabled. The
 * border color is inert without a width, so only the width and style are scoped.
 */
export declare const colorControlSurfaceClasses = "ring-border border-border-strong pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-inset group-data-disabled/color-control:border group-data-disabled/color-control:border-dashed group-data-disabled/color-control:ring-0";
/**
 * The thumb, minus positioning. Its own position is deliberately not transitioned -
 * easing it toward the pointer reads as lag. Only the press scale animates, and
 * `translate` and `scale` are separate properties, so centering the thumb and scaling
 * it never contend for `transform`.
 *
 * The white rim carries a faint dark ring on each side, so it stays legible over any
 * point of the gradient in either theme, including a white one.
 */
export declare const colorControlThumbClasses = "absolute z-10 size-4.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-3 border-white ring-1 ring-black/20 inset-ring-1 inset-ring-black/20 rtl:translate-x-1/2 motion-safe:transition-[scale] motion-safe:duration-150 motion-safe:ease-out group-active/color-control:scale-125 group-data-dragging/color-control:scale-125 data-disabled:bg-background-muted";
export declare const colorControlCheckerboard = "repeating-conic-gradient(var(--background-strong) 0% 25%, var(--background) 0% 50%)";
export declare const colorControlCheckerboardSize = "0.75rem 0.75rem";
/**
 * The swatch ladder: Avatar's, shifted one step down. A swatch is read beside a
 * value rather than looked at, so it needs 16px more than it needs 80px. Every name
 * the two scales share keeps its pixel size. Driven through `font-size` so a `1em`
 * box, its corner and anything nested scale from one declaration.
 */
export declare const COLOR_SWATCH_SIZES: {
    readonly '3xs': "text-[1rem]";
    readonly '2xs': "text-[1.25rem]";
    readonly xs: "text-[1.5rem]";
    readonly sm: "text-[2rem]";
    readonly md: "text-[2.5rem]";
    readonly lg: "text-[3rem]";
    readonly xl: "text-[4rem]";
};
/** Corner of a swatch and of anything drawn around one, as a share of the box. */
export declare const COLOR_SWATCH_SHAPES: {
    readonly rounded: "rounded-[calc(tan(atan2(var(--radius-md),2.5rem))*100%)]";
    readonly circle: "rounded-full";
};
/**
 * An English description of a color, for a swatch's accessible name. A hex string is
 * announced digit by digit, which tells a screen reader user nothing about the color;
 * "dark vivid blue" does.
 */
export declare function describeColor(color: Color): string;
/** Spaces a control can plot. Every point of these is a distinct color. */
export type ColorControlSpace = Extract<ColorSpace, 'rgb' | 'hsl' | 'hsb'>;
export declare const COLOR_CONTROL_SPACES: ColorControlSpace[];
/** Rounds to the nearest step, clamped, without the float dust `%` would leave. */
export declare function snapToStep(value: number, min: number, max: number, step: number): number;
/** Parses a string value, or passes a `Color` through untouched. */
export declare function normalizeColor(value: Color | string): Color;
/**
 * Picks the space a control works in: the value's own whenever it carries the
 * channel, otherwise the channel's home space. Preferring the value's space is what
 * lets an area and a slider share one color without converting it back and forth.
 */
export declare function resolveControlSpace(valueSpace: ColorSpace, channel: ColorChannel | undefined, requested?: ColorControlSpace): ColorControlSpace;
//# sourceMappingURL=color-control.d.ts.map