import * as React from "react"; import { cn } from "@kineticui/core"; export type ProgressProps = React.HTMLAttributes & { /** 0–100. Leave undefined for an indeterminate bar. */ value?: number; label?: React.ReactNode; showValue?: boolean; size?: "sm" | "md" | "lg"; striped?: boolean; }; const heights = { sm: "h-1", md: "h-2", lg: "h-3.5" }; export function Progress({ value, label, showValue, size = "md", striped, className, ...props }: ProgressProps) { const indeterminate = value === undefined; const pct = Math.max(0, Math.min(100, value ?? 0)); return (

{label || showValue ? (

{label} {showValue && !indeterminate ? {Math.round(pct)}% : null}

) : null}

); } export type ProgressRingProps = { value: number; size?: number; thickness?: number; /** Text in the middle. Defaults to the percentage. */ label?: React.ReactNode; color?: string; className?: string; }; export function ProgressRing({ value, size = 72, thickness = 6, label, color = "var(--kn-accent)", className }: ProgressRingProps) { const r = (size - thickness) / 2; const c = 2 * Math.PI * r; const pct = Math.max(0, Math.min(100, value)); return (

{label ?? `${Math.round(pct)}%`}

); } export function Skeleton({ className, ...props }: React.HTMLAttributes) { return (

); }

Progress

Installation

Exports