ProgressBar

import { ProgressBar, ProgressBarItem, ProgressBarSteps } from "@fanvue/ui";
import type {
  ProgressBarItemProps,
  ProgressBarItemSize,
  ProgressBarItemVariant,
  ProgressBarProps,
  ProgressBarSize,
  ProgressBarStepsProps,
  ProgressBarVariant,
} from "@fanvue/ui";

import { ProgressBar } from "@fanvue/ui";

<ProgressBar className="w-[300px]" value={60} />

import { ProgressBar } from "@fanvue/ui";

<ProgressBar
  className="w-[300px]"
  value={50}
  title="Upload Progress"
  showCompletion
/>

import { ProgressBar } from "@fanvue/ui";

<div className="flex flex-col gap-6">
  {(["default", "brand", "mono", "generic", "neutral"] as const).map((variant) => (
    <div key={variant} className="flex flex-col gap-2">
      <span className="typography-description-12px-semibold text-content-tertiary">
        {variant}
      </span>
      <ProgressBar className="w-[300px]" value={60} variant={variant} />
      <ProgressBar className="w-[300px]" value={60} variant={variant} size="small" />
    </div>
  ))}
</div>

import { InfoCircleIcon, ProgressBar } from "@fanvue/ui";

<ProgressBar
  className="w-[300px]"
  value={75}
  title="Profile Setup"
  showCompletion
  stepsLabel="6/8 steps"
  helperLeft="Almost there!"
  helperRight="75% complete"
  leftIcon={<InfoCircleIcon className="size-4" />}
/>

import { ProgressBar } from "@fanvue/ui";

<ProgressBar
  className="w-[300px]"
  value={25}
  title="Profile Completion"
  stepsLabel="2/8 steps"
/>

import { ProgressBarSteps } from "@fanvue/ui";

<ProgressBarSteps className="w-[300px]" steps={4} value={1} variant="brand" />

import { ProgressBarSteps } from "@fanvue/ui";

<ProgressBarSteps
  className="w-[300px]"
  steps={4}
  value={1}
  variant="brand"
  size="small"
/>

import { ProgressBarSteps } from "@fanvue/ui";

<ProgressBarSteps className="w-[300px]" steps={4} value={1} variant="mono" />