import type { PrimitivePropsWithRef } from '../utils/primitive.cjs'; /** What the element is: a task's progress, or a static scalar within a known range. */ export type ProgressRole = 'progressbar' | 'meter'; /** Which band of the range the value falls in under `role="meter"`, once `low`/`high`/`optimum` are supplied. */ export type ProgressRange = 'optimum' | 'suboptimal' | 'poor'; /** @internal Shared value/range distributed from {@link Progress} to its parts via context. */ export interface ProgressContextValue { value: number | null; min: number; max: number; buffer: number | null; /** What the root renders as, which decides whether the parts publish a band. */ role: ProgressRole; /** The band the value falls in under `role="meter"`; `undefined` without a threshold, and always under `progressbar`. */ range: ProgressRange | undefined; /** The id the {@link ProgressLabel} takes, and the root points `aria-labelledby` at while one is mounted. */ labelId: string; /** Registers the presence of a {@link ProgressLabel}, so the root only wires `aria-labelledby` when one exists. */ setHasLabel: (hasLabel: boolean) => void; /** The formatted readout, shared with {@link ProgressValue} so the visible string and `aria-valuetext` cannot drift. */ valueLabel: string | undefined; } /** Props for the {@link Progress} root; `role` is the component's own axis, not the free-form ARIA attribute. */ export interface ProgressProps extends Omit, 'role'> { /** * Current value. `null` renders an indeterminate progress bar, and reads as `min` under `role="meter"`. * @default null */ value?: number | null | undefined; /** * What the element is: a task in flight (`progressbar`), or a static scalar within a known range (`meter`). * @default 'progressbar' */ role?: ProgressRole | undefined; /** * Upper edge of the low band; with `high` and `optimum` it decides `data-range`. Read only under `role="meter"`. * @default undefined — no band is derived unless one threshold is supplied. */ low?: number | undefined; /** * Lower edge of the high band, the counterpart to `low`. Read only under `role="meter"`. * @default undefined — no band is derived unless one threshold is supplied. */ high?: number | undefined; /** * Where in the range the ideal value sits, deciding which side of `low`/`high` counts as optimum. Read only under `role="meter"`. * @default undefined — the midpoint of the range. */ optimum?: number | undefined; /** * Lower bound of the range, reflected as `aria-valuemin`. * @default 0 */ min?: number | undefined; /** * Upper bound of the range that `value` is measured against. * @default 100 */ max?: number | undefined; /** * A second, further-along value — bytes fetched ahead of bytes played — * published by {@link ProgressIndicator} as `--skdx-progress-buffer`. Ignored under `role="meter"`. * @default null */ buffer?: number | null | undefined; /** * Formats the `aria-valuetext` and the {@link ProgressValue} readout. * @default undefined — falls back to a rounded percentage of the position within `[min, max]`. */ getValueLabel?: ((value: number, min: number, max: number) => string) | undefined; /** * `Intl.NumberFormat` options the value is formatted with for * `aria-valuetext` and the {@link ProgressValue} readout. * @default undefined — falls back to a rounded percentage of the position within [min, max]. */ formatOptions?: Intl.NumberFormatOptions | undefined; /** * BCP-47 locale used for formatting the value, keeping server and browser renders consistent. * @default undefined — the runtime locale. */ locale?: string | undefined; /** * Renders the derived circular ring anatomy instead of the linear bar. * @default false */ circular?: boolean | undefined; /** * Visible caption, rendered into a derived `ProgressLabel` and wired to * `aria-labelledby`. * @default undefined — no label element is rendered. */ label?: string | undefined; /** * Renders a derived `ProgressValue` readout alongside the bar or ring. * @default false */ showValue?: boolean | undefined; /** * Forces the indeterminate state regardless of `value` — equivalent to * passing `value={null}`. Ignored under `role="meter"`, which always has a value. * @default false */ indeterminate?: boolean | undefined; /** * Outer diameter of the derived ring, in unitless SVG user units; applies * only when `circular` is set. * @default 48 */ diameter?: number | undefined; /** * Stroke width of the derived ring, in the same units as `diameter`; * applies only when `circular` is set. * @default 4 */ strokeWidth?: number | undefined; } /** Props for {@link ProgressIndicator}, the fill/bar element inside `Progress`. */ export interface ProgressIndicatorProps extends PrimitivePropsWithRef<'div'> { } /** Props for {@link ProgressLabel}, the bar's visible name. */ export interface ProgressLabelProps extends PrimitivePropsWithRef<'span'> { } /** Props for {@link ProgressValue}, the visible readout inside `Progress`. */ export interface ProgressValueProps extends PrimitivePropsWithRef<'span'> { } /** @internal Ring geometry distributed from {@link ProgressCircle} to {@link ProgressCircleIndicator} via context. */ export interface ProgressCircleContextValue { diameter: number; strokeWidth: number; radius: number; circumference: number; } /** Props for {@link ProgressCircle}, the circular geometry host inside `Progress`. */ export interface ProgressCircleProps extends PrimitivePropsWithRef<'div'> { /** * Outer diameter of the ring, in unitless SVG user units — the number you * also put in your own `viewBox="0 0 diameter diameter"`. * @default 48 */ diameter?: number | undefined; /** * Stroke width of the ring, in the same unitless units as `diameter`; * insets the radius by half its value so the stroke stays inside the box. * @default 4 */ strokeWidth?: number | undefined; } /** Props for {@link ProgressCircleIndicator}, the swept arc inside `ProgressCircle`. */ export interface ProgressCircleIndicatorProps extends PrimitivePropsWithRef<'div'> { }