import type { Snippet } from 'svelte';
type Props = {
    value: string | null | undefined;
    /** Trigger presentation: `'fill'` floods the field with the color; `'field'` is a compact row (swatch + label + opacity). @default 'fill' */
    variant?: 'fill' | 'field';
    /** Row label for the `'field'` variant (e.g. "Background Color"). */
    label?: string;
    /** Size preset (shared with Input / DatePicker / Select). @default 'md' */
    size?: 'sm' | 'md' | 'lg';
    /** Default color shown in the picker UI when value is empty (does not set the value itself). */
    defaultColor?: string;
    /** Show a × clear button on the trigger to wipe the value. */
    clearable?: boolean;
    /** Visual disabled state — popover won't open. */
    disabled?: boolean;
    /** Placeholder shown on the swatch trigger when no value is selected. */
    placeholder?: string;
    on?: {
        change?: (value: string) => void;
    };
    /** Custom trigger snippet — replaces the default swatch+text trigger entirely. */
    children?: Snippet;
    /**
     * Custom leading icon for the default trigger — SVG source string or snippet. Defaults to a color
     * droplet glyph. Same shape as Input's `icon` prop (Rule 9).
     */
    previewIcon?: string | Snippet;
};
/**
 * A color picker with an Input-shaped swatch trigger that opens a popover hosting a full hex/rgb picker
 * (powered by `svelte-awesome-color-picker`). Designed to drop into forms next to Input / DatePicker /
 * Select — shares the same `size` preset and field tokens, so visually it sits in the same row at the
 * same height.
 *
 * When `value` is set, the trigger's background fills with the color and the swatch text auto-flips
 * between black and white for contrast.
 *
 * ### Props
 * | Prop | Type | Default |
 * |---|---|---|
 * | `value` | `string \| null \| undefined` | required |
 * | `variant` | `'fill' \| 'field'` | `'fill'` |
 * | `label` | `string` (field variant row label) | — |
 * | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
 * | `clearable` | `boolean` | `false` |
 * | `disabled` | `boolean` | `false` |
 * | `defaultColor` | `string \| undefined` | `undefined` |
 * | `placeholder` | `string \| undefined` | localized "not set" |
 * | `previewIcon` | `string \| Snippet` | color-droplet glyph |
 *
 * ### CSS Custom Properties
 * | Property | Description | Default |
 * |---|---|---|
 * | `--sc-kit--color-picker--width` | Component width | `100%` |
 * | `--sc-kit--color-picker--panel--background` | Popover panel background | `--sc-kit--color--bg--panel` |
 * | `--sc-kit--color-picker--panel--border-color` | Popover panel border | `--sc-kit--color--border` |
 * | `--sc-kit--color-picker--panel--input-bg` | svelte-awesome input bg | `--sc-kit--color--bg--field` |
 * | `--sc-kit--color-picker--panel--text-color` | Popover panel text | `--sc-kit--color--text--primary` |
 */
declare const Cmp: import("svelte").Component<Props, {}, "">;
type Cmp = ReturnType<typeof Cmp>;
export default Cmp;