Askr documentation
Generated API snapshot

@askrjs/ui/progress-circle

Exports from the declarations published in @askrjs/ui. Signatures reflect the published artifact.

Exports

This entrypoint publishes 8 exports. Use the anchored symbol rows for direct links. Type-only exports are labeled separately from runtime values.

PROGRESS_CIRCLE_A11Y_CONTRACTtype

PROGRESS_CIRCLE_A11Y_CONTRACT: { readonly ROLE: "progressbar"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly percentage: "data-percentage"; }; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly INDICATOR_MARKER: "data-progress-circle-indicator"; }

WAI-ARIA progressbar contract for circular progress.

ProgressCircletype

ProgressCircle: (props: ProgressCircleProps) => JSX.Element

Headless circular progress indicator root. Normalizes value/max, computes percentage, exposes `--ak-progress-percentage` as a dynamically injected CSS custom property, and provides progress state to `ProgressCircleIndicator` via context.

ProgressCircleA11yContracttype

ProgressCircleA11yContract: typeof PROGRESS_CIRCLE_A11Y_CONTRACT

Type of the Progress Circle A11y Contract object.

ProgressCircleIndicatortype

ProgressCircleIndicator: { (props: ProgressCircleIndicatorProps): JSX.Element; (props: ProgressCircleIndicatorAsChildProps): JSX.Element; }

Visual indicator for `ProgressCircle`, rendering the fill/arc element. Must be used within a `ProgressCircle`; reads progress state from context and exposes it as `data-state`/`data-value`/`data-max`/`data-percentage`.

ProgressCircleIndicatorAsChildPropstype

ProgressCircleIndicatorAsChildProps: BoxAsChildProps

Props for `ProgressCircleIndicator` rendered polymorphically via `asChild`.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

ProgressCircleIndicatorPropstype

ProgressCircleIndicatorProps: BoxProps<'div', HTMLDivElement>

Props for `ProgressCircleIndicator` rendered as a native `div`.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

ProgressCircleOwnPropstype

ProgressCircleOwnProps: {
  children?: unknown;
  id?: string;
  value?: number | null;
  max?: number;
  getValueLabel?: (value: number | null, max: number) => string;
}

Props specific to `ProgressCircle`, before merging with native `div` attributes.

children
children?: unknown;
getValueLabel
getValueLabel?: ((value: number | null, max: number) => string) | undefined;
id
id?: string | undefined;
max
max?: number | undefined;
value
value?: number | null | undefined;

ProgressCirclePropstype

ProgressCircleProps: BoxProps<'div', HTMLDivElement> & ProgressCircleOwnProps

Props for `ProgressCircle`, combining native `div` attributes with `ProgressCircleOwnProps`.

asChild
asChild?: false | undefined;
children
children?: unknown;
getValueLabel
getValueLabel?: ((value: number | null, max: number) => string) | undefined;
id
id?: string | undefined;
max
max?: number | undefined;
ref
ref?: Ref<HTMLDivElement>;
value
value?: number | null | undefined;