# Digits

Box-drawing character numerals

## Installation

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

```bash
npx shadcn@latest add @termcn/digits
```

<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 type DigitSize = "sm" | "md" | "lg";

export interface DigitsProps {
  value: string | number;
  color?: string;
  size?: DigitSize;
}

const SEGMENTS_MD: Record<string, string[]> = {
  " ": ["   ", "   ", "   ", "   ", "   "],
  "-": ["   ", "   ", " ─ ", "   ", "   "],
  ".": ["   ", "   ", "   ", "   ", " ● "],
  "0": ["╭─╮", "│ │", "│ │", "│ │", "╰─╯"],
  "1": ["  │", "  │", "  │", "  │", "  │"],
  "2": ["╭─╮", "  │", "╭─╯", "│  ", "╰─╴"],
  "3": ["╭─╮", "  │", " ─┤", "  │", "╰─╯"],
  "4": ["╷ ╷", "│ │", "╰─┤", "  │", "  ╵"],
  "5": ["╭─╴", "│  ", "╰─╮", "  │", "╰─╯"],
  "6": ["╭─╴", "│  ", "├─╮", "│ │", "╰─╯"],
  "7": ["╭─╮", "  │", "  │", "  │", "  ╵"],
  "8": ["╭─╮", "│ │", "├─┤", "│ │", "╰─╯"],
  "9": ["╭─╮", "│ │", "╰─┤", "  │", "╰─╯"],
  ":": ["   ", " ● ", "   ", " ● ", "   "],
};

const SEGMENTS_LG: Record<string, string[]> = {
  " ": ["     ", "     ", "     ", "     ", "     "],
  "-": ["     ", "     ", " ─── ", "     ", "     "],
  ".": ["     ", "     ", "     ", "     ", "  ●  "],
  "0": ["╭───╮", "│   │", "│   │", "│   │", "╰───╯"],
  "1": ["   ╷ ", "   │ ", "   │ ", "   │ ", "   ╵ "],
  "2": ["╭───╮", "    │", " ───╯", "│    ", "╰───╴"],
  "3": ["╭───╮", "    │", " ───┤", "    │", "╰───╯"],
  "4": ["╷   ╷", "│   │", "╰───┤", "    │", "    ╵"],
  "5": ["╭───╴", "│    ", "╰───╮", "    │", "╰───╯"],
  "6": ["╭───╴", "│    ", "├───╮", "│   │", "╰───╯"],
  "7": ["╭───╮", "    │", "    │", "    │", "    ╵"],
  "8": ["╭───╮", "│   │", "├───┤", "│   │", "╰───╯"],
  "9": ["╭───╮", "│   │", "╰───┤", "    │", "╰───╯"],
  ":": ["     ", "  ●  ", "     ", "  ●  ", "     "],
};

const getSegmentMap = (size: DigitSize): Record<string, string[]> =>
  size === "lg" ? SEGMENTS_LG : SEGMENTS_MD;

const getFallback = (size: DigitSize): string[] => {
  const w = size === "lg" ? 5 : 3;
  const bar = "─".repeat(w - 2);
  const side = `│${" ".repeat(w - 2)}│`;
  return [`╭${bar}╮`, side, side, side, `╰${bar}╯`];
};

export const Digits = ({ value, color, size = "md" }: DigitsProps) => {
  const theme = useTheme();
  const resolvedColor = color ?? theme.colors.primary;
  const str = String(value);

  if (size === "sm") {
    return (
      <Text color={resolvedColor} bold>
        {str}
      </Text>
    );
  }

  const segMap = getSegmentMap(size);
  const fallback = getFallback(size);
  const chars = [...str];
  const rows = 5;

  return (
    <Box flexDirection="column">
      {Array.from({ length: rows }, (_, rowIdx) => (
        <Box key={rowIdx} flexDirection="row">
          {chars.map((ch, charIdx) => {
            const segments = segMap[ch] ?? fallback;
            const rowStr =
              segments[rowIdx] ?? " ".repeat(size === "lg" ? 5 : 3);
            return (
              <Text key={charIdx} color={resolvedColor}>
                {rowStr}{" "}
              </Text>
            );
          })}
        </Box>
      ))}
    </Box>
  );
};
```

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

## Usage

```tsx
import { Digits } from "@/components/ui/digits";
```

```tsx
<Digits value="12:30" />
```

## API Reference

### Digits

| Prop    | Type                   | Default    |
| ------- | ---------------------- | ---------- |
| `value` | `string \| number`     | `required` |
| `color` | `string`               | -          |
| `size`  | `"sm" \| "md" \| "lg"` | `"md"`     |