import { type IconProp } from '../icon';
type Props = {
    title: string;
    /** Sub-label beneath the title (e.g. "6 of 8 seats used"). */
    subtitle?: string;
    /** Numerator. Drives the progress bar fill. */
    value: number;
    /** Denominator. */
    max: number;
    /** Right-aligned text beside the bar. Independent of `value` / `max` — phrase it freely ("75% used", "12.4 GB"). */
    display: string;
    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
    icon?: IconProp;
};
/**
 * UsageRow — single row inside a `<Usage>` card: icon + title / subtitle on the left, a kit `Progress`
 * bar in the middle (fill = `value / max`), and the `display` text on the right. The `display` text is
 * independent of the bar — phrase it however you want.
 *
 * ### CSS Custom Properties
 * | Property | Description | Default |
 * |---|---|---|
 * | `--sc-kit--usage-row--label-width` | Left label column width | `13.75rem` |
 * | `--sc-kit--usage-row--display-width` | Right display column width | `5.625rem` |
 * | `--sc-kit--usage-row--bar--height` | Progress bar height | `0.5rem` |
 */
declare const Cmp: import("svelte").Component<Props, {}, "">;
type Cmp = ReturnType<typeof Cmp>;
export default Cmp;