🎨 Steerfox UI Library

Bibliothèque graphique moderne et réutilisable basée sur React et TypeScript, conçue pour les projets Steerfox avec un design glassmorphique élégant.

⚠️ ATTENTION : Cette bibliothèque est sous licence propriétaire Steerfox. Usage exclusivement réservé à Steerfox et ses partenaires autorisés.

✨ Caractéristiques

- 🎯 Composants TypeScript - Typage complet pour une meilleure DX
- 🎨 Design Glassmorphique - Effets visuels modernes et élégants
- 🌙 Mode Sombre - Support natif du thème sombre
- 📱 Responsive - Optimisé pour tous les écrans
- 🎭 Variants - Multiples variantes pour chaque composant
- 🔧 Personnalisable - Variables CSS facilement modifiables
- 📦 Tree-shakable - Import sélectif des composants

📦 Installation

``bash
npm install @steerfox/ui-library


ou

yarn add @steerfox/ui-library

ou

pnpm add @steerfox/ui-library
`

🚀 Utilisation Rapide

`tsx
import { Button, Card, Badge } from '@steerfox/ui-library'
import '@steerfox/ui-library/dist/index.css'

function App() {
return (



Bienvenue dans Steerfox UI



Commencer

Nouveau

)
}
`

📚 Composants Disponibles

$3

- Button - Boutons avec variants glassmorphiques
- Card - Cartes avec effets de verre
- Input - Champs de saisie stylisés
- Badge - Badges colorés pour les statuts

$3

- GaugeBar - Barres de progression pour métriques

$3

- Navbar - Barre de navigation responsive

$3

- LoadingSpinner - Indicateurs de chargement

🎨 Système de Design

$3

La bibliothèque utilise un système de couleurs cohérent :

- Primaire : #df6535 (Orange Steerfox)
- Secondaire : #262d6f (Bleu Steerfox)
- Succès : #1bee30
- Avertissement : #f39427
- Erreur : #dc2626

$3

`css
/ Classes disponibles /
.glass / Effet standard /
.glass-subtle / Effet subtil /
.glass-card / Pour les cartes /
.glass-btn / Pour les boutons /
`

📖 Documentation des Composants

$3

`tsx
import { Button } from '@steerfox/ui-library'

// Variants disponibles
Défaut
Glass
Glass Primary
Outline
Ghost

// Tailles disponibles
Petit
Normal
Grand
Très Grand
`

$3

`tsx
import { Card, CardHeader, CardTitle, CardContent } from '@steerfox/ui-library'



Titre de la carte


Contenu de la carte


`

$3

`tsx
import { Badge } from '@steerfox/ui-library'

Succès
Avertissement
Bon
Mauvais
`

$3

`tsx
import { GaugeBar } from '@steerfox/ui-library'

value={75}
max={100}
label="Performance"
variant="success"
size="md"
/>
`

🛠️ Développement

$3

- Node.js 18+
- npm/yarn/pnpm

$3

`bash
npm install
`

$3

`bash
npm run build # Build de production
npm run dev # Mode développement avec watch
npm run test # Lancer les tests
`

$3

`
src/
├── components/
│ ├── ui/ # Composants UI de base
│ ├── charts/ # Composants de graphiques
│ ├── layout/ # Composants de layout
│ └── feedback/ # Composants de feedback
├── styles/
│ ├── variables.css # Variables CSS
│ ├── base.css # Styles de base
│ ├── glassmorphism.css # Effets glassmorphiques
│ ├── components.css # Styles des composants
│ └── index.css # Point d'entrée des styles
└── utils/
└── cn.ts # Utilitaire de classes CSS
`

🤝 Contribution

1. Fork le projet
2. Créer une branche feature (git checkout -b feature/AmazingFeature)
3. Commit les changements (git commit -m 'Add some AmazingFeature')
4. Push vers la branche (git push origin feature/AmazingFeature)
5. Ouvrir une Pull Request

📄 Licence

⚠️ LICENCE PROPRIÉTAIRE STEERFOX

Ce projet est sous licence propriétaire exclusive à Steerfox.

$3

- ✅ Usage autorisé : Steerfox et ses filiales, employés et contractants autorisés uniquement
- ❌ Usage interdit : Toute utilisation par des tiers sans autorisation écrite explicite
- ❌ Redistribution interdite : Aucune reproduction, distribution ou publication autorisée
- ❌ Modification interdite : Reverse engineering, décompilation ou désassemblage strictement prohibés

$3

Pour toute demande de licence ou d'autorisation d'utilisation, contactez : legal@steerfox.com

Voir le fichier LICENSE` pour les détails complets des termes et conditions.

🏢 Steerfox

Développé avec ❤️ par l'équipe Steerfox pour créer des interfaces utilisateur modernes et élégantes.