Du JS pur,
pour du mobile
60 FPS

5 types Material, 5 types Cupertino, 3 formes, ripple, elevation

• filled, outlined, text, elevated, tonal
• filled, gray, tinted, bordered, plain
• rounded, square, pill
• Ripple effect Material

const btn = new Button(framework, {
    text: 'Cliquez-moi',
    type: 'filled',
    shape: 'rounded',
    onClick: () => console.log('Click!')
});

Filled/Outlined, label flottant, erreur, helper, icônes

• Filled & Outlined variants
• Floating label animation
• Error & helper text
• Leading/trailing icons
• Cursor blinking

const input = new Input(framework, {
    label: 'Email',
    placeholder: 'vous@exemple.com',
    variant: 'outlined'
});

Toggle avec animation fluide

• Material track/thumb animation
• iOS style with shadow
• Animated transition
• onChange callback

const toggle = new Switch(framework, {
    checked: true,
    onChange: (checked) => {
        console.log('Switch:', checked);
    }
});

Curseur avec drag & animation

• Min/max/step configurables
• Thumb scale animation
• Shadow on drag
• onChange callback

const slider = new Slider(framework, {
    min: 0, max: 100, value: 50,
    onChange: (val) => updateValue(val)
});

Groupes, sélection unique

• Ripple effect Material
• Tap overlay iOS
• Group management
• Animated selection

const radio = new RadioButton(framework, {
    group: 'gender',
    label: 'Homme',
    checked: false
});

Cases à cocher avec animations

• Material square with check
• iOS circle with check
• Label support
• onChange callback

const cb = new Checkbox(framework, {
    label: 'Accepter',
    checked: false
});

Modals avec animations

• Material design (Android)
• Cupertino design (iOS)
• Ripple on buttons
• Fade in/out animation

const dialog = new Dialog(framework, {
    title: 'Confirmation',
    message: 'Action irréversible',
    buttons: ['ANNULER', 'CONFIRMER']
});

Notifications temporaires

• Auto-dismiss configurable
• Fade in/out animation
• Text truncation
• Material & iOS styles

const toast = new Toast(framework, {
    text: 'Opération réussie !',
    duration: 3000
});
toast.show();

Notification avec action

• Action button optionnel
• Slide in/out animation
• Auto-dismiss
• Material style

const snack = new Snackbar(framework, {
    message: 'Document sauvegardé',
    actionText: 'ANNULER',
    onAction: () => undo()
});
snack.show();

Photo de profil ou initiales

• Image support
• Initials auto-generated
• Auto color generation
• Status indicator
• Border customization

const avatar = new Avatar(framework, {
    initials: 'JD',
    size: 48,
    status: 'online'
});

Tags et filtres

• Variants: filter, input, choice
• Delete button option
• Icon support
• Ripple effect

const chip = new Chip(framework, {
    label: 'React',
    variant: 'filter',
    deletable: true
});

Élément de liste standard

• Title & subtitle
• Left/right icons
• Left image support
• Divider option
• Ripple effect

const item = new ListItem(framework, {
    title: 'Jean Dupont',
    subtitle: 'Cardiologie',
    leftIcon: '👤'
});

Item avec swipe actions

• Left/right actions
• Custom colors & icons
• Swipe threshold
• Drag offset animation

const item = new SwipeableListItem(framework, {
    title: 'Document',
    leftActions: [{
        text: 'Archiver',
        color: '#388E3C',
        onClick: () => archive()
    }]
});

Liste virtualisée haute performance

• Only visible items rendered
• Item pooling
• Scroll recycling
• Memory efficient

const list = new VirtualList(framework, {
    itemHeight: 56,
    onItemClick: (index) => console.log(index)
});

Tableau complet avec features

• Sortable columns
• Pagination
• Row selection
• Alternate row colors
• Custom cell rendering

const table = new Table(framework, {
    columns: [
        { key: 'name', label: 'Nom' },
        { key: 'age', label: 'Âge' }
    ],
    data: dataArray,
    sortable: true
});

Arborescence interactive

• Nested items
• Expand/collapse
• Icons per level
• Selection support

const tree = new TreeView(framework, {
    data: treeData,
    onSelect: (node) => console.log(node)
});

Section extensible animée

• Ripple effect centré
• Content height calculation
• Chevron rotation
• Animated expansion

const acc = new Accordion(framework, {
    title: 'Paramètres avancés',
    content: 'Configuration détaillée...',
    expanded: false
});

Onglets avec contenu associé

• Ripple effect Material
• iOS style bottom indicator
• Icon + text support
• Content switching
• Position: top/bottom

const tabs = new Tabs(framework, {
    tabs: [
        { label: 'Accueil', icon: '🏠' },
        { label: 'Profil', icon: '👤' }
    ],
    onChange: (index) => loadPage(index)
});

Barre de navigation inférieure

• Ripple effect Material
• iOS blur background
• Icon + label
• Animated indicator

const nav = new BottomNavigationBar(framework, {
    items: [
        { icon: '🏠', label: 'Accueil' },
        { icon: '🔍', label: 'Recherche' }
    ]
});

Barre d'application supérieure

• Material elevation shadow
• iOS blur background
• Left/right icons
• Ripple on Material
• iOS press overlay

const appBar = new AppBar(framework, {
    title: 'Mon App',
    leftIcon: 'menu',
    rightIcon: 'search'
});

AppBar expansible/collapsable

• Collapse on scroll
• Parallax background
• Stretch on overscroll
• Title fade
• Extends AppBar

const sliver = new SliverAppBar(framework, {
    title: 'Profil',
    expandedHeight: 200,
    collapsedHeight: 56,
    parallax: true
});

Menu latéral

• Header avec titre
• Items avec icônes
• Slide animation
• Overlay semi-transparent
• Hover effect

const drawer = new Drawer(framework, {
    header: { title: 'Menu' },
    items: [
        { icon: '🏠', label: 'Accueil' },
        { icon: '⚙️', label: 'Paramètres' }
    ]
});
drawer.open();

Feuille modale par le bas

• Drag handle
• Spring animation iOS
• Easing animation Material
• Close on overlay click
• Clip content

const sheet = new BottomSheet(framework, {
    height: 400,
    dragHandle: true
});
sheet.add(button);
sheet.open();

Fenêtre modale générique

• Scale in animation
• Close button
• Overlay click to close
• Child components support
• Shadow & blur

const modal = new Modal(framework, {
    title: 'Informations',
    width: 300, height: 400
});
modal.add(content);
modal.show();

Menu contextuel

• Hover detection
• Auto-close
• Shadow & border
• Item dividers

const menu = new ContextMenu(framework, {
    options: ['Éditer', 'Copier', 'Supprimer'],
    onSelect: (index) => action(index)
});

Floating Action Button

• Variants: small, medium, large
• Extended mode with text
• Rounded corners (Material 3)
• Ripple effect
• Elevation shadow

const fab = new FAB(framework, {
    icon: '+',
    variant: 'large',
    onClick: () => addItem()
});

FAB avec menu d'actions

• Animated opening
• Staggered animation
• Labels on left
• Overlay on open
• Rotating icon

const fab = new SpeedDialFAB(framework, {
    actions: [
        { icon: '✉', label: 'Email', action: sendEmail },
        { icon: '📞', label: 'Call', action: makeCall }
    ]
});

FAB qui se transforme

• Toolbar or searchbar mode
• Smooth morph animation
• Input support for search
• Action buttons
• Back button

const fab = new MorphingFAB(framework, {
    morphType: 'searchbar',
    actions: [...]
});

Spinner circulaire

• Indeterminate mode
• Progress mode (0-100%)
• Material arc animation
• iOS 12-lines spinner
• Custom color & size

const spinner = new CircularProgress(framework, {
    indeterminate: true,
    size: 40
});

Barre de progression linéaire

• Material flat design
• iOS rounded corners
• Custom progress
• Determinate only

const bar = new ProgressBar(framework, {
    progress: 75,
    height: 4
});

Bannière d'information

• Types: info, success, warning, error
• Actions buttons
• Dismissible option
• Ripple effect Material

const banner = new Banner(framework, {
    text: 'Mise à jour disponible',
    type: 'info',
    actions: [{ label: 'Mettre à jour', onClick: update }]
});

Sélecteur de date

• Android dialog style
• iOS wheel picker
• Min/max constraints
• Modal integration
• Custom colors

const picker = new DatePicker(framework, {
    selectedDate: new Date(),
    onChange: (date) => console.log(date)
});

Sélecteur d'heure

• iOS wheel picker
• Android clock face
• Min/max constraints
• AM/PM support

const timePicker = new TimePicker(framework, {
    selectedTime: new Date(),
    onChange: (time) => console.log(time)
});

Appareil photo intégré

• Facing mode (user/environment)
• Torch support
• Fit modes (contain/cover)
• Photo capture
• Preview thumbnail

const camera = new Camera(framework, {
    facingMode: 'environment',
    onPhoto: (dataUrl) => savePhoto(dataUrl)
});

Lecteur de QR codes

• Real-time scanning
• Overlay with scanning line
• Torch support
• Vibration on detection
• Scan history

const reader = new QRCodeReader(framework, {
    onQRCodeDetected: (data) => console.log(data)
});

Pad de signature

• Smooth drawing
• Custom stroke color/width
• Clear function
• Export as DataURL/Blob
• Empty detection

const pad = new SignaturePad(framework, {
    strokeColor: '#000000',
    onSignatureChange: (points) => console.log(points)
});

Lecteur vidéo

• Play/pause controls
• Progress bar
• Time display
• Fullscreen toggle
• Poster image

const video = new Video(framework, {
    src: 'video.mp4',
    onPlay: () => console.log('Playing')
});

Lecteur audio

• Direct event handling
• Native UI controls
• Audio cache
• Volume control
• Time tracking

const player = new AudioPlayer(framework, {
    src: '/audio/track.mp3',
    onEnded: () => console.log('Finished')
});

Composant d'image

• Fit modes: cover, contain, fill, none
• Lazy loading
• Placeholder with spinner
• Error handling
• Border radius

const img = new ImageComponent(framework, {
    src: 'photo.jpg',
    fit: 'cover',
    borderRadius: 8
});

Cartes OpenStreetMap

• Pan & zoom
• Multi-touch support
• Tile caching
• Markers
• Inertia scrolling

const map = new OpenStreetMap(framework, {
    lat: 48.8566,
    lng: 2.3522,
    zoom: 13
});

Input numérique

• Min/max constraints
• Step increment
• Numeric keyboard
• Placeholder support

const num = new NumberInput(framework, {
    value: 10,
    min: 0,
    max: 100,
    step: 5
});

Champ mot de passe

• Show/hide toggle
• Mask character
• Eye icon button
• Cursor animation

const pwd = new PasswordInput(framework, {
    placeholder: 'Mot de passe'
});

Saisie de tags multiples

• Add with Enter or comma
• Delete with backspace
• Remove individual tags
• Dynamic height

const tags = new InputTags(framework, {
    tags: ['React', 'Vue'],
    onTagAdd: (tag) => console.log('Added:', tag)
});

Input avec autocomplétion

• Filter on type
• Dropdown with options
• Keyboard navigation
• Match highlighting

const datalist = new InputDatalist(framework, {
    options: ['Paris', 'Lyon', 'Marseille'],
    onSelect: (value) => console.log(value)
});

Zone de téléchargement

• Ripple effect Material
• iOS style
• File list display
• Accept attribute
• Multiple files

const upload = new FileUpload(framework, {
    accept: '.jpg,.png',
    multiple: true,
    onFilesSelected: (files) => console.log(files)
});

Menu déroulant

• Dropdown with options
• Selected value display
• Keyboard navigation
• Custom styling

const select = new Select(framework, {
    options: ['Option 1', 'Option 2'],
    onChange: (value) => console.log(value)
});

Sélection multiple

• Checkboxes per option
• Scrollable list
• Cancel/OK buttons
• Selected indices

const multi = new MultiSelectDialog(framework, {
    options: ['A', 'B', 'C'],
    selectedIndices: [0, 2],
    onSelect: (indices, values) => console.log(values)
});

Contrôle segmenté

• Ripple effect Material
• iOS style
• Button callbacks
• Rounded corners

const seg = new SegmentedControl(framework, {
    buttons: [
        { text: 'Jour', onClick: () => setView('day') }
    ]
});

Incrémenteur/décrémenteur

• Min/max/step
• Ripple effect
• iOS style
• Press feedback

const stepper = new Stepper(framework, {
    value: 1,
    min: 0,
    max: 10,
    onChange: (val) => console.log(val)
});

Graphiques avancés

• Types: line, bar, pie, doughnut
• Animations 60 FPS
• Legend & grid
• Hover interaction

const chart = new Chart(framework, {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb'],
        datasets: [{ data: [10, 20] }]
    }
});

Conteneur avec élévation

• Elevation 0-5 with shadows
• Border radius
• Child positioning
• Padding & gap

const card = new Cards(framework, {
    padding: 16,
    elevation: 4,
    borderRadius: 12
}, [text, button]);

Layout horizontal

• Align: start, center, end
• Spacing control
• Auto-sizing
• Recursive layout

const row = new Row(framework, {
    spacing: 10,
    align: 'center'
}, [child1, child2]);

Layout vertical

• Align: start, center, end, stretch
• Spacing control
• Auto-sizing
• Recursive layout

const col = new Column(framework, {
    spacing: 10,
    align: 'stretch'
}, [child1, child2]);

Grille responsive

• Configurable columns
• Equal width cells
• Spacing control
• Auto row height

const grid = new Grid(framework, {
    columns: 2,
    spacing: 10
}, items);

Superposition de composants

• Z-order by addition
• No automatic positioning
• Use with Positioned
• Recursive layout

const stack = new Stack(framework, {}, [
    background,
    foreground
]);

Positionnement absolu

• left, top, right, bottom
• Relative to parent
• Layout integration

const pos = new Positioned(framework, {
    child: fab,
    bottom: 16,
    right: 16
});

Conteneur de liste

• Automatic positioning
• Item height fixed
• Supports ListItem
• Clear function

const list = new List(framework, {
    itemHeight: 56,
    onItemClick: (index) => console.log(index)
});
list.addItem({ title: 'Item' });

Séparateur visuel

• Horizontal/vertical
• Variants: full, inset, middle
• Styles: solid, dashed, dotted
• Custom color & thickness

const divider = new Divider(framework, {
    orientation: 'horizontal',
    variant: 'inset',
    style: 'dashed'
});

Pull-to-refresh autonome

• Independent event handling
• Pull threshold
• Progress indicator
• Refresh spinner

const ptr = new PullToRefresh(framework, {
    onRefresh: async () => {
        await loadData();
    }
});

Placeholder animé

• Types: text, circle, rectangle
• Shimmer effect
• Animation progress
• Border radius

const skeleton = new Skeleton(framework, {
    type: 'text',
    width: 200,
    height: 100
});