ProgressBar

import { ProgressBar } from "@nexera-ui/react";

const sizes = ["sm", "md", "lg"] as const;

const tones = ["brand", "success", "warning", "danger"] as const;

export function Indeterminate() {
  return (
    <div className="flex flex-col gap-6">
      {sizes.map((size) => (
        <ProgressBar
          key={size}
          label="Loading payroll"
          labelPosition="top"
          size={size}
          isIndeterminate
        />
      ))}
      {tones.map((tone) => (
        <ProgressBar key={tone} aria-label={`Syncing ${tone}`} tone={tone} isIndeterminate />
      ))}
    </div>
  );
}

import { ProgressBar } from "@nexera-ui/react";

<ProgressBar
  label="Onboarding steps"
  value={4}
  labelPosition="top"
  maxValue={6}
  valueLabel="4 of 6"
  description="Next: bank details"
/>;

import { ProgressBar } from "@nexera-ui/react";

<ProgressBar
  label="Profile completion for the whole onboarding programme, including contract and documents"
  value={35}
  labelPosition="top"
  valueLabel="7 of 20 sections"
  description="Upload the signed contract, your ID and proof of address to finish. You can leave and come back at any time."
/>;

import { ProgressBar } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div className="flex flex-col gap-6">
      <ProgressBar label="اكتمال الملف الشخصي" labelPosition="top" value={60} />
      <ProgressBar label="رفع الملفات" labelPosition="right" value={30} tone="success" />
      <ProgressBar aria-label="جار التحميل" isIndeterminate />
    </div>
  );
}