@chloridrik/variants

Une librairie TypeScript typée pour créer des variantes de configuration dynamiques, compatible avec les navigateurs web, React Native et Node.js.

Installation

npm install @chloridrik/variants

Usage basique

import { variants } from '@chloridrik/variants';

// Définir vos variants
const buttonVariants = variants({
  size: {
    small: { padding: '8px 12px', fontSize: '14px' },
    medium: { padding: '12px 16px', fontSize: '16px' },
    large: { padding: '16px 24px', fontSize: '18px' },
    default: { padding: '12px 16px', fontSize: '16px' } // variant par défaut
  },
  variant: {
    primary: { backgroundColor: '#007bff', color: 'white' },
    secondary: { backgroundColor: '#6c757d', color: 'white' },
    default: { backgroundColor: '#007bff', color: 'white' }
  }
});

// Utiliser les variants
const buttonStyle = buttonVariants({
  size: 'large',
  variant: 'secondary'
});

console.log(buttonStyle);
// { padding: '16px 24px', fontSize: '18px', backgroundColor: '#6c757d', color: 'white' }

Fonctionnalités

• ✅ Type-safe : TypeScript entièrement typé
• ✅ Multi-plateforme : Compatible navigateur, React Native et Node.js
• ✅ Variants par défaut : Support des valeurs par défaut
• ✅ Léger : Moins de 3kB gzippé
• ✅ Zero dépendance

API

variants<T>(definition: VariantDefinition<T>): VariantResolver<T>

Crée une fonction de résolution de variants typée.

getEnvironment(): "browser" | "react-native" | "node" | "unknown"

Détecte l'environnement d'exécution actuel.

Licence

MIT