Progress

npm install react-aria-components

"use client";

import { Label, ProgressBar, type ProgressBarProps } from "react-aria-components";

const styles = {
  root: "flex w-full flex-col gap-(--tui-progress-gap) font-(family-name:--tui-font) text-(length:--tui-progress-font-size) leading-none",
  header: "flex items-baseline justify-between gap-3",
  label: "font-(--tui-progress-label-weight) text-(--tui-progress-label)",
  value: "text-(--tui-progress-value) tabular-nums",
  track: "h-(--tui-progress-height) w-full overflow-hidden rounded-(--tui-progress-radius) bg-(--tui-progress-track)",
  fill: "h-full rounded-(--tui-progress-radius) bg-(--tui-progress-fill) transition-[width] duration-(--tui-duration)",
  moving: "h-full w-2/5 animate-pulse rounded-(--tui-progress-radius) bg-(--tui-progress-fill)",
};

export interface ProgressProps extends Omit<ProgressBarProps, "className" | "children"> {
  label?: string;
  /** Hides the number on the right. */
  hideValue?: boolean;
  className?: string;
}

export function Progress({ label, hideValue, className, ...props }: ProgressProps) {
  return (
    <ProgressBar {...props} className={[styles.root, className].filter(Boolean).join(" ")}>
      {({ percentage, valueText, isIndeterminate }) => (
        <>
          {(label || !hideValue) && (
            <div className={styles.header}>
              {label ? <Label className={styles.label}>{label}</Label> : <span />}
              {!hideValue && !isIndeterminate && <span className={styles.value}>{valueText}</span>}
            </div>
          )}
          <div data-slot="progress-track" className={styles.track}>{isIndeterminate ? <div data-slot="progress-fill" className={styles.moving} /> : <div data-slot="progress-fill" className={styles.fill} style={{ width: `${percentage ?? 0}%` }} />}</div>
        </>
      )}
    </ProgressBar>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Progress */
  --tui-progress-height: calc(var(--tui-space) * 2);
  --tui-progress-gap: calc(var(--tui-space) * 2);
  --tui-progress-radius: 999px;
  --tui-progress-font-size: 13px;
  --tui-progress-label-weight: 500;
  --tui-progress-track: var(--tui-muted);
  --tui-progress-fill: var(--tui-primary);
  --tui-progress-label: var(--tui-fg);
  --tui-progress-value: var(--tui-muted-fg);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}