## HeaderTabs Component

`HeaderTabs` is a customizable and accessible React component for displaying tabbed navigation with optional icons, count badges, and multi-tab selection via an auto-complete input.

### 🛠 Tailwind CSS Setup

---

> ⚠️ This component library uses [Tailwind CSS](https://tailwindcss.com/) utility classes but **does not include TailwindCSS by default**.  
> You must have TailwindCSS configured in your own project for styles to apply correctly.

### ✨ Features

---

- Customizable icons (function or object)
- Custom badges per tab
- Smooth scroll to selected tab
- Multi-tab selection (optional)
- Auto-complete search for tab selection

### 🛠 Tailwind Setup

---

To use this component library with Tailwind, add the following to your `tailwind.config.js`:

```js
module.exports = {
  content: ["...", "./node_modules/tailwind-header-tabs/**/*.{js,jsx}"],
  // other config...
};
```

### Data Structure

---

The `tabs` prop should follow a recursive `{ id: string; label: string }[]` format, allowing unlimited levels of nesting.

### Example:

```ts
const tabs = [
  { id: "1", label: "Apple" },
  { id: "car", label: "Car" },
  { id: "box", label: "Box" },
];
```

### Props

---

| Name                | Type                                                                                                         | Required | Default     | Description                                                         |
| ------------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ----------- | ------------------------------------------------------------------- |
| `tabs`              | `Tab[]` (i.e., `{ id: string; label: string }[]`)                                                            | ✅       | —           | List of all tabs.                                                   |
| `activeTab`         | `Tab \| null`                                                                                                | ✅       | —           | Currently selected tab.                                             |
| `onClickTab`        | `(tab: Tab) => void`                                                                                         | ✅       | —           | Callback when a tab is clicked.                                     |
| `showCountBadges`   | `boolean`                                                                                                    | ✅       | —           | Show numeric badges beside tab labels.                              |
| `countLabel`        | `Record<string, number>`                                                                                     | ❌       | `{}`        | Mapping of tab label to count badge.                                |
| `icons`             | `Record<string, React.ReactNode> \| (color?: string, className?: string) => Record<string, React.ReactNode>` | ❌       | `undefined` | Icons for tabs. Can be a static map or function that returns icons. |
| `activeIconColor`   | `string`                                                                                                     | ❌       | `"#2563eb"` | Color used for active tab icons.                                    |
| `inactiveIconColor` | `string`                                                                                                     | ❌       | `"#6b7280"` | Color used for inactive tab icons.                                  |
| `selectable`        | `boolean`                                                                                                    | ❌       | `false`     | Enables selecting multiple tabs using auto-complete input.          |