import type { Snippet } from 'svelte';
type Props = {
    /** Label rendered above the input. String renders as text; Snippet allows extra content (e.g. tooltip icon) next to the text. */
    label?: string | Snippet;
    /** Affordance pinned to the trailing edge of the label row — rendered only alongside a `label`. String renders the standard info icon with that text in a tooltip; Snippet renders anything (button, link, badge). Clicks inside never reach the field. */
    hint?: string | Snippet;
    /** Appends a danger-colored `*` to the label. Purely visual — does not enforce anything. */
    required?: boolean;
    /** Input slot. The wrapping `<label>` implicitly associates with the first labelable control inside (HTML standard), so no id wiring is needed. */
    children: Snippet;
};
/**
 * FormField — pure layout shell: optional label (string or snippet) above an input slot. The root is a `<label>` element, so the first labelable form control inside is automatically associated via HTML's implicit-association rule — no id wiring required. Does NOT render errors or helper text; pair with `Validatable` for that.
 *
 * Clicking the label opens a popup field inside it (select, date picker, color picker) but never re-opens one that is already expanded — that click dismisses it, exactly like a click on empty space. The same guard keeps a drag that starts inside an expanded panel from closing it, so a color picker's gradient and its hue / alpha bars stay usable when the pointer leaves the panel. A nested `<label>` — a `Checkbox` sitting next to the popup field — keeps its own activation either way. HTML forbids a `<label>` inside a `<label>`, so that pairing is tolerated rather than recommended: give the `Checkbox` its own row outside the `FormField` when you can.
 *
 * `hint` pins an affordance to the trailing edge of the label row — a string gives the standard info icon with a tooltip, a snippet takes over completely (button, link, badge). It rides on the label row, so it renders only when `label` is set. Clicks inside the hint are swallowed, so an interactive hint never activates the labelled field.
 *
 * ### CSS Custom Properties
 * | Property | Description | Default |
 * |---|---|---|
 * | `--sc-kit--form-field--gap` | Vertical gap between label and the input slot | `0.375rem` (6px) |
 * | `--sc-kit--form-field--hint--color` | Hint color (inherited by the default info icon) | `--sc-kit--color--text--muted` |
 * | `--sc-kit--form-field--label--color` | Label text color | `--sc-kit--color--text--primary` |
 * | `--sc-kit--form-field--label--font-size` | Label font size | `--sc-kit--font-size--sm` |
 * | `--sc-kit--form-field--label--font-weight` | Label font weight | `--sc-kit--font-weight--medium` |
 * | `--sc-kit--form-field--required--color` | Required `*` color | `--sc-kit--color--danger` |
 */
declare const Cmp: import("svelte").Component<Props, {}, "">;
type Cmp = ReturnType<typeof Cmp>;
export default Cmp;