@club-employes/utopia 2.15.0 → 2.16.0

package/README.md

@@ -1,158 +1,311 @@
 # 🎨 Utopia Design System
 
-Système de design multi-marques basé sur des tokens avec Style Dictionary.
+[![npm version](https://badge.fury.io/js/@club-employes%2Futopia.svg)](https://www.npmjs.com/package/@club-employes/utopia)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Vue 3](https://img.shields.io/badge/Vue-3.x-4FC08D.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6.svg)](https://www.typescriptlang.org/)
 
-## 🏗️ Architecture
+> **Modern Vue 3 design system** with multi-brand theming, design tokens, and 30+ production-ready components. Built for **Club Employés** & **Gifteo** with full TypeScript support.
 
-```
-src/
-├── tokens/                  # Sources des design tokens
-│   ├── core/               # Tokens communs (spacing, typography, etc.)
-│   ├── brands/             # Tokens spécifiques par marque
-│   │   └── club-employes/  # Couleurs Club Employés
-│   ├── themes/             # Combinaisons marque + mode
-│   └── generated/          # Fichiers CSS/JS générés
-├── theme-provider/         # Composant ThemeProvider Vue
-├── themes/                 # Packages de thèmes exportés
-└── components/             # Composants de démo
-```
+## ✨ Features
 
-## 🚀 Utilisation
+- 🧩 **30+ Vue 3 Components** - Atoms, Molecules, Organisms, Layouts
+- 🎨 **Multi-brand Theming** - Club Employés & Gifteo brands
+- 🌙 **Dark Mode Support** - Light/dark variants for all themes  
+- 🎯 **Design Tokens** - CSS variables generated with Style Dictionary
+- 📱 **Responsive** - Mobile-first approach with breakpoint utilities
+- ♿ **Accessible** - WCAG 2.1 AA compliant components
+- 🔧 **TypeScript** - Full type definitions included
+- 🚀 **Tree Shakeable** - Import only what you need
+- 📦 **Zero Config** - Works out of the box
 
-### 1. Installation
+## 🚀 Quick Start
+
+### Installation
 
 ```bash
-npm install @clubemployes/design-system
+npm install @club-employes/utopia vue@^3.5.0
 ```
 
-### 2. Utilisation dans une app Vue
+### Basic Usage
 
 ```vue
 <template>
   <ThemeProvider :theme="clubEmployesLight">
-    <YourApp />
+    <div class="app">
+      <Button variant="primary" size="medium" @click="handleClick">
+        Get Started
+      </Button>
+      
+      <Card variant="elevated">
+        <Icon name="heart" size="large" />
+        <h2>Welcome to Utopia</h2>
+        <p>Modern design system for Vue 3</p>
+      </Card>
+    </div>
   </ThemeProvider>
 </template>
 
-<script setup>
-import { ThemeProvider } from '@clubemployes/design-system'
-import { clubEmployesLight } from '@clubemployes/theme-club-employes'
+<script setup lang="ts">
+import { 
+  Button, 
+  Card, 
+  Icon, 
+  ThemeProvider, 
+  clubEmployesLight 
+} from '@club-employes/utopia'
+import '@club-employes/utopia/styles'
+
+const handleClick = () => {
+  console.log('Button clicked!')
+}
 </script>
 ```
 
-### 3. Utilisation des CSS variables
+### Import Styles
 
-```css
-.button {
-  background-color: var(--color-blue-500);
-  padding: var(--spacing-4);
-  border-radius: var(--border-radius-base);
-  font-size: var(--font-size-base);
-}
+```javascript
+// Import all styles (recommended)
+import '@club-employes/utopia/styles'
 
-.product-card {
-  background-color: var(--color-product-exclusive-sale-primary);
-  color: white;
-}
+// Or import specific theme tokens
+import '@club-employes/utopia/tokens/club-employes/light'
+import '@club-employes/utopia/tokens/gifteo/dark'
 ```
 
-## 🎯 Tokens disponibles
+## 🎨 Available Themes
 
-### Couleurs
+```javascript
+import { 
+  clubEmployesLight,   // Club Employés light theme
+  clubEmployesDark,    // Club Employés dark theme
+  gifteoLight,         // Gifteo light theme
+  gifteoDark           // Gifteo dark theme
+} from '@club-employes/utopia'
+```
 
-#### Palette principale (Bleu)
-- `--color-blue-25` à `--color-blue-950`
+## 🧩 Components
 
-#### Couleurs produits
-- `--color-product-exclusive-sale-primary` - Vente exclusive
-- `--color-product-promo-code-primary` - Code promo  
-- `--color-product-physical-product-primary` - Produit physique
-- `--color-product-e-ticket-primary` - E-billet
-- `--color-product-member-card-primary` - Carte membre
-- `--color-product-gift-card-primary` - Carte cadeau
-- `--color-product-e-check-primary` - E-chèque
+### Atoms (Building Blocks)
+- **Button** - Interactive buttons with variants
+- **Icon** - 1200+ Lucide icons
+- **Logo** - Multi-brand logos
+- **Badge** - Status indicators
+- **Card** - Content containers
+- **Input** - Form controls
+- **Checkbox** - Boolean inputs
+- **Switch** - Toggle controls
 
-#### Signalétique
-- `--color-semantic-attention-primary` - Erreur/Attention
-- `--color-semantic-success-primary` - Succès
+### Molecules (Simple Combinations)
+- **SearchBox** - Search input with icon
+- **InputSelect** - Dropdown with filtering
 
-### Espacement
-- `--spacing-0` (0px) à `--spacing-32` (128px)
+### Organisms (Complex Components)
+- **DataTable** - Advanced data tables
+- **Header** - Navigation headers
+- **Menu** - Sidebar navigation
 
-### Typographie
-- Tailles: `--font-size-xs` à `--font-size-5xl`
-- Poids: `--font-weight-light` à `--font-weight-bold`
-- Familles: `--font-family-sans`, `--font-family-mono`
+### Layouts (Page Structures)
+- **DefaultLayout** - Main application layout
 
-### Bordures
-- Rayons: `--border-radius-none` à `--border-radius-full`
-- Largeurs: `--border-width-0` à `--border-width-4`
+## 🔧 Composables
 
-### Ombres
-- `--shadow-none` à `--shadow-xl`
+```javascript
+import { useTheme, useFavicon, useScrollShadows } from '@club-employes/utopia'
 
-## 🔧 Développement
+// Theme management
+const { theme, setTheme } = useTheme()
+setTheme('club-employes', 'dark')
 
-### Build des tokens
+// Dynamic favicon
+const { setFavicon } = useFavicon()
 
-```bash
-npm run build:tokens
+// Scroll shadows
+const { shadowTop, shadowBottom } = useScrollShadows(containerRef)
+```
+
+## 🎯 Design Tokens
+
+All components use CSS custom properties (design tokens):
+
+```css
+.my-component {
+  /* Colors */
+  background: var(--utopia-color-surface);
+  color: var(--utopia-color-text-primary);
+  
+  /* Spacing */
+  padding: var(--utopia-space-md);
+  margin: var(--utopia-space-lg);
+  
+  /* Typography */
+  font-family: var(--utopia-font-family);
+  font-size: var(--utopia-font-size-base);
+  
+  /* Borders */
+  border-radius: var(--utopia-radius-md);
+  border: 1px solid var(--utopia-color-border);
+}
 ```
 
-### Ajouter une nouvelle marque
-
-1. Créer `src/tokens/brands/nouvelle-marque/colors.json`
-2. Créer les thèmes light/dark dans `src/tokens/themes/`
-3. Mettre à jour `style-dictionary.config.js`
-4. Créer le package thème dans `src/themes/nouvelle-marque/`
-
-### Structure d'un token de couleur
-
-```json
-{
-  "color": {
-    "primary": {
-      "500": {
-        "value": "#3B82F6",
-        "type": "color"
-      }
-    }
-  }
+## 🌈 Theme Switching
+
+```vue
+<template>
+  <div>
+    <ThemeProvider :theme="currentTheme">
+      <Button @click="toggleTheme">
+        Switch to {{ isDark ? 'Light' : 'Dark' }} Mode
+      </Button>
+      <YourApp />
+    </ThemeProvider>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { 
+  ThemeProvider, 
+  clubEmployesLight, 
+  clubEmployesDark 
+} from '@club-employes/utopia'
+
+const isDark = ref(false)
+const currentTheme = computed(() => 
+  isDark.value ? clubEmployesDark : clubEmployesLight
+)
+
+const toggleTheme = () => {
+  isDark.value = !isDark.value
 }
+</script>
 ```
 
-## �� Packages
+## 📦 Package Exports
 
-- `@clubemployes/design-system` - Composants et ThemeProvider
-- `@clubemployes/theme-club-employes` - Thème Club Employés  
-- `@clubemployes/theme-ebank` - Thème eBank (à venir)
+```javascript
+// Main export
+import { Button, Icon, ThemeProvider } from '@club-employes/utopia'
 
-## 🎨 Variables universelles
+// Styles
+import '@club-employes/utopia/styles'
 
-Toutes les apps utilisent les **mêmes noms de variables CSS**. Seules les valeurs changent selon le thème importé.
+// Specific theme tokens
+import '@club-employes/utopia/tokens/club-employes/light'
+import '@club-employes/utopia/tokens/club-employes/dark'
+import '@club-employes/utopia/tokens/gifteo/light'
+import '@club-employes/utopia/tokens/gifteo/dark'
 
-```css
-/* Dans toutes les apps */
-.button {
-  background: var(--color-primary-500); /* Même variable partout */
+// Icons list (JSON)
+import iconsList from '@club-employes/utopia/icons'
+```
+
+## 🏗️ Advanced Usage
+
+### Custom Theme Configuration
+
+```vue
+<script setup lang="ts">
+import { ThemeProvider } from '@club-employes/utopia'
+
+const customTheme = {
+  colors: {
+    primary: '#your-brand-color',
+    secondary: '#your-secondary-color'
+  },
+  // ... other theme properties
 }
+</script>
 ```
 
+### Tree Shaking
+
+```javascript
+// Import only what you need
+import { Button } from '@club-employes/utopia/components/Button'
+import { Icon } from '@club-employes/utopia/components/Icon'
+```
+
+## 📱 Responsive Design
+
+Components are mobile-first and responsive by default:
+
+```vue
+<template>
+  <Button 
+    size="small"           <!-- Mobile -->
+    :size-md="'medium'"    <!-- Tablet -->
+    :size-lg="'large'"     <!-- Desktop -->
+  >
+    Responsive Button
+  </Button>
+</template>
+```
+
+## ♿ Accessibility
+
+All components follow WCAG 2.1 AA guidelines:
+
+- ✅ Keyboard navigation
+- ✅ Screen reader support
+- ✅ High contrast modes
+- ✅ Focus management
+- ✅ ARIA attributes
+
+## 🔧 TypeScript Support
+
+Full TypeScript definitions included:
+
 ```typescript
-// App Club Employés
-import { clubEmployesLight } from '@clubemployes/theme-club-employes'
+import type { ButtonProps, IconProps, ThemeConfig } from '@club-employes/utopia'
 
-// App eBank  
-import { ebankLight } from '@clubemployes/theme-ebank'
+const buttonProps: ButtonProps = {
+  variant: 'primary',
+  size: 'medium',
+  disabled: false
+}
 ```
 
-## 🔄 Workflow
+## 📊 Bundle Size
+
+- **Full package**: ~150KB (minified + gzipped)
+- **Single component**: ~5-15KB (tree-shaken)
+- **Tokens only**: ~10KB (CSS variables)
+
+## 🌐 Browser Support
+
+- ✅ Chrome 90+
+- ✅ Firefox 88+
+- ✅ Safari 14+
+- ✅ Edge 90+
+
+## 📚 Documentation & Resources
+
+- 📖 **[Complete Documentation](https://ds-utopia.vercel.app/)** - Interactive examples and guides
+- 🎨 **[Storybook](https://main--673cf2b1e9d0b7c5f2b7b7e7.chromatic.com/)** - Component stories and visual tests
+- 🐙 **[GitHub Repository](https://github.com/club-employes/ds)** - Source code and issues
+- 📦 **[NPM Package](https://www.npmjs.com/package/@club-employes/utopia)** - Package details
 
-1. **Designer** → Met à jour les tokens JSON
-2. **Build** → `npm run build:tokens` génère les CSS
-3. **Developer** → Importe le bon thème
-4. **Deploy** → Changement de thème = changement d'import
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](https://github.com/club-employes/ds/blob/main/CONTRIBUTING.md).
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests and documentation
+5. Submit a pull request
+
+## 📄 License
+
+MIT © [Club Employés](https://github.com/club-employes)
 
 ---
 
-Made with ❤️ by Club Employés
+<div align="center">
+
+**Made with ❤️ by the Club Employés team**
+
+[Website](https://ds-utopia.vercel.app/) • [GitHub](https://github.com/club-employes/ds) • [NPM](https://www.npmjs.com/package/@club-employes/utopia)
+
+</div>

package/dist/icons-list.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2025-08-19T10:41:11.553Z",
+  "generated": "2025-08-27T09:43:02.948Z",
   "count": 1238,
   "icons": [
     "Accessibility",

package/dist/index.d.ts

@@ -32,7 +32,10 @@ export interface LogoProps {
 
 export interface CardProps {
   variant?: 'default' | 'elevated' | 'outlined'
-  padding?: 'none' | 'small' | 'medium' | 'large'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+  interactive?: boolean
+  active?: boolean
 }
 
 export interface SearchBoxProps {
@@ -68,6 +71,69 @@ export interface SwitchProps {
   label?: string
 }
 
+export interface ChipProps {
+  variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+  removable?: boolean
+  leftIcon?: string
+  actionable?: boolean
+}
+
+export interface InputTextProps {
+  modelValue?: string
+  label?: string
+  placeholder?: string
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
+  state?: 'default' | 'error' | 'valid' | 'incomplete' | 'completed'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+  readonly?: boolean
+  icon?: string
+  message?: string
+  required?: boolean
+  min?: number
+  max?: number
+  step?: number
+  isCode?: boolean
+}
+
+export interface DropDownOption {
+  value: string | number
+  label: string
+  disabled?: boolean
+}
+
+export interface DropDownProps {
+  modelValue?: string | number | (string | number)[]
+  label?: string
+  placeholder?: string
+  options?: DropDownOption[]
+  state?: 'default' | 'error' | 'valid' | 'incomplete' | 'completed'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+  readonly?: boolean
+  multiple?: boolean
+  searchable?: boolean
+  clearable?: boolean
+  message?: string
+  required?: boolean
+  maxHeight?: string
+}
+
+export interface InputCodeProps {
+  modelValue?: string
+  label?: string
+  length?: number
+  type?: 'text' | 'number'
+  size?: 'small' | 'medium' | 'large'
+  state?: 'default' | 'error' | 'valid'
+  disabled?: boolean
+  message?: string
+  required?: boolean
+  autoFocus?: boolean
+}
+
 export interface DataTableProps {
   columns: Array<{
     key: string
@@ -101,6 +167,7 @@ export declare const Badge: DefineComponent<BadgeProps>
 export declare const Button: DefineComponent<ButtonProps>
 export declare const Card: DefineComponent<CardProps>
 export declare const Checkbox: DefineComponent<CheckboxProps>
+export declare const Chip: DefineComponent<ChipProps>
 export declare const Header: DefineComponent<{}>
 export declare const Icon: DefineComponent<IconProps>
 export declare const Input: DefineComponent<InputProps>
@@ -110,6 +177,9 @@ export declare const Menu: DefineComponent<{}>
 export declare const NavItem: DefineComponent<{}>
 export declare const SearchBox: DefineComponent<SearchBoxProps>
 export declare const Switch: DefineComponent<SwitchProps>
+export declare const InputText: DefineComponent<InputTextProps>
+export declare const DropDown: DefineComponent<DropDownProps>
+export declare const InputCode: DefineComponent<InputCodeProps>
 export declare const DataTable: DefineComponent<DataTableProps>
 export declare const ThemeProvider: DefineComponent<ThemeProviderProps>
 export declare const DefaultLayout: DefineComponent<{}>