npm package: @solarbeam/brand
Description: Solar Beam brand assets - Logo and Picto components
Author: Solar Beam Studio
Latest version: 1.0.3

# @solarbeam/brand

Composants React pour les assets de marque Solar Beam (Logo et Picto).

## Installation

```bash
# npm
npm install @solarbeam/brand

# yarn
yarn add @solarbeam/brand

# pnpm
pnpm add @solarbeam/brand

# bun
bun add @solarbeam/brand
```

Ou directement depuis GitHub :

```bash
npm install github:Solar-Beam-Studio/brand
```

## Utilisation

```tsx
import { SolarBeamLogo, SolarBeamPicto, MadeBySolarBeam } from "@solarbeam/brand";

function App() {
  return (
    <div>
      {/* Logo complet */}
      <SolarBeamLogo height={50} />

      {/* Pictogramme / Icône */}
      <SolarBeamPicto size={24} />

      {/* Badge "Made by" pour les footers */}
      <MadeBySolarBeam />
    </div>
  );
}
```

## Composants

### `<SolarBeamLogo />`

Le logo complet Solar Beam avec le texte.

| Prop        | Type     | Défaut | Description                          |
| ----------- | -------- | ------ | ------------------------------------ |
| `height`    | `number` | `50`   | Hauteur du logo (largeur auto)       |
| `className` | `string` | -      | Classes CSS                          |
| `...props`  | -        | -      | Toutes les props SVG sont supportées |

### `<SolarBeamPicto />`

Le pictogramme/icône Solar Beam.

| Prop        | Type     | Défaut | Description                          |
| ----------- | -------- | ------ | ------------------------------------ |
| `size`      | `number` | `24`   | Taille (largeur et hauteur)          |
| `width`     | `number` | -      | Largeur (override `size`)            |
| `height`    | `number` | -      | Hauteur (override `size`)            |
| `className` | `string` | -      | Classes CSS                          |
| `...props`  | -        | -      | Toutes les props SVG sont supportées |

### `<MadeBySolarBeam />`

Badge "Made by Solar Beam" pour les footers de sites clients.

| Prop        | Type                   | Défaut                      | Description                            |
| ----------- | ---------------------- | --------------------------- | -------------------------------------- |
| `size`      | `"sm" \| "md" \| "lg"` | `"md"`                      | Taille du badge                        |
| `href`      | `string`               | `"https://solarbeam.studio"`| Lien de destination                    |
| `className` | `string`               | -                           | Classes CSS                            |
| `...props`  | -                      | -                           | Toutes les props `<a>` sont supportées |

## Personnalisation de la couleur

Les composants utilisent `currentColor`, ce qui permet de changer la couleur via CSS :

```tsx
// Via style inline
<SolarBeamLogo style={{ color: "#ff6b00" }} />

// Via Tailwind CSS
<SolarBeamPicto className="text-orange-500" />

// Via CSS classique
<SolarBeamLogo className="logo" />
// .logo { color: #ff6b00; }
```

## Exemples

```tsx
// Logo dans une navbar
<nav>
  <SolarBeamLogo height={32} className="text-white" />
</nav>

// Picto comme favicon ou icône
<SolarBeamPicto size={16} />

// Logo responsive
<SolarBeamLogo
  height={40}
  className="hidden md:block"
/>
<SolarBeamPicto
  size={32}
  className="md:hidden"
/>

// Badge dans un footer
<footer>
  <MadeBySolarBeam size="sm" className="text-gray-500" />
</footer>
```

## Peer Dependencies

- `react` >= 18
- `react-dom` >= 18

## License

MIT