@aristobyte-ui/label/README.md

AristoByteUI Label component: a reusable, styled label for forms and UI elements.

# @aristobyte-ui/anchor

<p align="center">
  <img src="https://img.shields.io/badge/TypeScript-5.8-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
  <img src="https://img.shields.io/badge/Build-Turbo-green?style=for-the-badge&logo=turbo&logoColor=white" alt="TurboRepo" />
  <img src="https://img.shields.io/badge/Lint-Strict-red?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" />
  <img src="https://img.shields.io/badge/License-MIT-black?style=for-the-badge&logo=open-source-initiative&logoColor=white" alt="License" />
  <img src="https://img.shields.io/badge/AristoByte-UI-purple?style=for-the-badge&logo=react&logoColor=white" alt="AristoByte UI" />
  <img src="https://img.shields.io/badge/Node-20.17.0+-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js >=20.17.0" />
  <img src="https://img.shields.io/badge/Yarn-1.22+-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" alt="Yarn >=1.22" />
  <img src="https://img.shields.io/badge/NPM-10.8+-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM >=10.8" />
</p>

A fully-typed, ripple-enabled Anchor component for AristoByteUI with multiple variants and seamless integration with SCSS modules and design tokens.

## 📦 Installation

```bash
# Install via Yarn
yarn add -D @aristobyte-ui/anchor

# Or via npm
npm install -D @aristobyte-ui/anchor

# Or via pnpm
pnpm add -D @aristobyte-ui/anchor
```

## 🛠 Usage

```tsx
import { Anchor } from "@aristobyte-ui/anchor";

<Anchor href="https://aristobyte.com" variant="primary">
  Visit AristoByte
</Anchor>;
```

##

📂 Presets Available
**Variants**: `default` | `primary` | `secondary`

Ripple effect automatically applied on click

## 🔧 Example in a Package

```tsx
<Anchor href="/docs" variant="secondary">
  Documentation
</Anchor>
```

## 📊 Why This Matters

- **Performance-first**: Lightweight CSS ensures fast rendering and smooth transitions.
- **Fully typed**: TypeScript-first API ensures predictable usage and IDE autocomplete.
- **AristoByteUI ready**: Seamlessly integrates with design tokens and SCSS modules.
- **Flexible**: Supports multiple variants and ripple-enabled interactive feedback.

## 🏆 Philosophy

- **Modular architecture**: Anchor component is fully composable.
- **Declarative styling**: SCSS modules keep styles maintainable and scoped.
- **Strict typing & runtime flexibility**: Props fully typed while allowing runtime overrides.
- **Developer experience optimized**: Easy to use with predictable behavior and minimal boilerplate.

## 📜 License

[MIT](./LICENSE) © AristoByte

## 🛡 Shields Showcase

<p align="center">
  <img src="https://img.shields.io/badge/Consistency-100%25-green?style=for-the-badge&logo=typescript" />
  <img src="https://img.shields.io/badge/Maintained-Active-brightgreen?style=for-the-badge&logo=github" />
  <img src="https://img.shields.io/badge/Strictness-High-critical?style=for-the-badge&logo=eslint" />
  <img src="https://img.shields.io/badge/Declarations-Enabled-blue?style=for-the-badge&logo=typescript" />
  <img src="https://img.shields.io/badge/Monorepo-Turbo-green?style=for-the-badge&logo=monorepo" />
  <img src="https://img.shields.io/badge/Interop-ESM%2FCJS-orange?style=for-the-badge&logo=javascript" />
</p>