# Progress Bar

Determinate progress bar with percent and value/total display

## Installation

  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @termcn/progress-bar
```

<Step>Copy and paste the following code into your project.</Step>

```tsx
import { Box, Text } from "ink";

import { useTheme } from "@/components/ui/theme-provider";

export interface ProgressBarProps {
  value: number;
  total?: number;
  width?: number;
  showPercent?: boolean;
  showEta?: boolean;
  fillChar?: string;
  emptyChar?: string;
  color?: string;
  label?: string;
}

export const ProgressBar = ({
  value,
  total,
  width = 30,
  showPercent = true,
  showEta: _showEta = false,
  fillChar = "█",
  emptyChar = "░",
  color,
  label,
}: ProgressBarProps) => {
  const theme = useTheme();
  const resolvedColor = color ?? theme.colors.primary;

  const percent =
    total === undefined
      ? Math.min(100, Math.round(value))
      : Math.min(100, Math.round((value / total) * 100));
  const filled = Math.round((percent / 100) * width);
  const empty = width - filled;

  const bar = fillChar.repeat(filled) + emptyChar.repeat(empty);

  return (
    <Box flexDirection="column">
      {label && <Text>{label}</Text>}
      <Box gap={1}>
        <Text color={resolvedColor}>{bar}</Text>
        {showPercent && (
          <Text color={theme.colors.mutedForeground}>{percent}%</Text>
        )}
        {total !== undefined && (
          <Text color={theme.colors.mutedForeground} dimColor>
            {value}/{total}
          </Text>
        )}
      </Box>
    </Box>
  );
};
```

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { ProgressBar } from "@/components/ui/progress-bar";
```

```tsx
<ProgressBar value={42} total={100} label="Uploading" />
```

## Examples

### Custom Characters and Color

```tsx
import { ProgressBar } from "@/registry/bases/ink/ui/progress-bar";

export default function ProgressBarCustom() {
  return <ProgressBar value={80} fillChar="=" emptyChar="-" color="#22c55e" />;
}
```

## API Reference

### ProgressBar

| Prop          | Type      | Default    |
| ------------- | --------- | ---------- |
| `value`       | `number`  | `required` |
| `total`       | `number`  | -          |
| `width`       | `number`  | `30`       |
| `showPercent` | `boolean` | `true`     |
| `showEta`     | `boolean` | `false`    |
| `fillChar`    | `string`  | `"█"`      |
| `emptyChar`   | `string`  | `"░"`      |
| `color`       | `string`  | -          |
| `label`       | `string`  | -          |