@wakastellar/ui 3.5.2 → 4.0.0

package/dist/components/DataTable/hooks/useDataTableTheme.d.ts

@@ -0,0 +1,16 @@
+import { DataTableTheme } from "../types";
+/**
+ * Hook pour gérer les thèmes personnalisés du DataTable
+ */
+export declare function useDataTableTheme({ theme, variant, density, }: {
+    theme?: DataTableTheme;
+    variant?: "bordered" | "minimal" | "striped" | "glass";
+    density?: "comfortable" | "compact" | "spacious";
+}): {
+    theme: DataTableTheme;
+    variantClasses: string;
+    densityClasses: Record<string, string>;
+    customStyles: Record<string, string>;
+    getThemedClass: (baseClass: string, themeKey?: string) => string;
+    getThemedStyles: (baseStyles?: React.CSSProperties) => React.CSSProperties;
+};

package/dist/components/DataTable/hooks/useDataTableVirtualization.d.ts

@@ -0,0 +1,19 @@
+import { VirtualizationConfig } from "../types";
+/**
+ * Hook pour gérer la virtualisation du DataTable
+ */
+export declare function useDataTableVirtualization<TData>({ data, virtualization, containerRef, }: {
+    data: TData[];
+    virtualization?: VirtualizationConfig;
+    containerRef: React.RefObject<HTMLElement>;
+}): {
+    virtualizer: import("@tanstack/react-virtual").Virtualizer<HTMLElement, Element>;
+    isVirtualized: boolean;
+    containerHeight: number;
+    scrollToIndex: (index: number, align?: "start" | "center" | "end") => void;
+    scrollToOffset: (offset: number) => void;
+    getVirtualItems: () => import("@tanstack/react-virtual").VirtualItem[];
+    getTotalSize: () => number;
+    virtualItems: import("@tanstack/react-virtual").VirtualItem[];
+    totalSize: number;
+};

package/dist/components/DataTable/hooks/useTableLayout.d.ts

@@ -0,0 +1,26 @@
+import { DataTableLayout, DataTableDensity } from "../types";
+/**
+ * Hook pour gérer le layout et la densité du DataTable
+ */
+export declare function useTableLayout(initialLayout?: DataTableLayout, initialDensity?: DataTableDensity): {
+    layout: DataTableLayout;
+    setLayout: import("react").Dispatch<import("react").SetStateAction<DataTableLayout>>;
+    density: DataTableDensity;
+    setDensity: import("react").Dispatch<import("react").SetStateAction<DataTableDensity>>;
+    toggleLayout: () => void;
+    toggleDensity: () => void;
+    isMobile: boolean;
+    densityClasses: {
+        table: string;
+        cell: string;
+        header: string;
+    } | {
+        table: string;
+        cell: string;
+        header: string;
+    } | {
+        table: string;
+        cell: string;
+        header: string;
+    };
+};

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * DataTable - Composant ultra-complet basé sur TanStack Table v8
+ *
+ * @module DataTable
+ * @description
+ * Composant de table de données hautement configurable avec support de :
+ * - Tri, filtrage, pagination
+ * - Sélection multiple
+ * - Export/Import (CSV, JSON)
+ * - Layouts multiples (standard, card, compact, split, infinite)
+ * - Thème clair/sombre via TweakCN
+ * - i18n complet
+ * - Virtualisation pour grandes données
+ * - Toolbar customisable
+ * - Actions par ligne et groupées
+ */
+export { DataTable } from "./DataTable";
+export { DataTableAdvanced } from "./DataTableAdvanced";
+export { DataTableToolbar } from "./DataTableToolbar";
+export { DataTablePagination } from "./DataTablePagination";
+export { DataTableFilters } from "./DataTableFilters";
+export { DataTableEditCell } from "./DataTableEditCell";
+export { DataTableColumnResizer } from "./DataTableColumnResizer";
+export { DataTableGrouping, DataTableGroupTotals, DataTableGroupingControls } from "./DataTableGrouping";
+export { DataTableContextMenu } from "./DataTableContextMenu";
+export { DataTableSelection, useDataTableSelection } from "./DataTableSelection";
+export { useDataTable } from "./hooks/useDataTable";
+export { useDataTableAdvanced } from "./hooks/useDataTableAdvanced";
+export { useDataTableVirtualization } from "./hooks/useDataTableVirtualization";
+export { useDataTableExport } from "./hooks/useDataTableExport";
+export { useDataTableImport } from "./hooks/useDataTableImport";
+export { useDataTableTheme } from "./hooks/useDataTableTheme";
+export { useTableLayout } from "./hooks/useTableLayout";
+export { useDataTableEdit } from "./hooks/useDataTableEdit";
+export type { DataTableProps, DataTableLayout, DataTableVariant, DataTableDensity, DataTableState, FilterConfig, FilterPosition, PaginationConfig, ToolbarConfig, TableAction, ExportConfig, ImportConfig, SelectionState, EditConfig, ColumnEditConfig, SelectionMode, SortMode, VirtualizationType, GroupingConfig, VirtualizationConfig, ColumnResizeConfig, ColumnOrderConfig, RowExpansionConfig, DataTableTheme, } from "./types";
+export type { EditCellConfig } from "./DataTableEditCell";
+export { exportToCSV, exportToJSON, parseCSV, saveTableState, loadTableState, } from "./utils";

package/dist/components/DataTable/types.d.ts

@@ -0,0 +1,461 @@
+import { ColumnDef, PaginationState, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ExpandedState, GroupingState } from "@tanstack/react-table";
+import { ReactNode } from "react";
+import { EditCellConfig } from "./DataTableEditCell";
+/**
+ * Layout variants pour le DataTable
+ */
+export type DataTableLayout = "standard" | "card" | "compact" | "split" | "infinite";
+/**
+ * Variantes visuelles
+ */
+export type DataTableVariant = "bordered" | "minimal" | "striped" | "glass";
+/**
+ * Densité d'affichage
+ */
+export type DataTableDensity = "comfortable" | "compact" | "spacious";
+/**
+ * Mode de sélection
+ */
+export type SelectionMode = "single" | "multiple" | "range";
+/**
+ * Mode de tri
+ */
+export type SortMode = "single" | "multiple";
+/**
+ * Type de virtualisation
+ */
+export type VirtualizationType = "none" | "fixed" | "dynamic";
+/**
+ * Position des filtres
+ */
+export type FilterPosition = "top" | "bottom" | "left" | "right" | "modal";
+/**
+ * Configuration de pagination
+ */
+export interface PaginationConfig {
+    /** Mode de pagination */
+    mode?: "client" | "server";
+    /** Taille de page par défaut */
+    pageSize?: number;
+    /** Options de tailles de page */
+    pageSizeOptions?: number[];
+    /** Page courante (mode serveur) */
+    currentPage?: number;
+    /** Total d'items (mode serveur) */
+    totalItems?: number;
+    /** Callback de changement de page */
+    onPageChange?: (page: number) => void;
+    /** Callback de changement de taille */
+    onPageSizeChange?: (size: number) => void;
+}
+/**
+ * Configuration d'un filtre
+ */
+export interface FilterConfig {
+    /** ID unique du filtre */
+    id: string;
+    /** Libellé du filtre */
+    label: string;
+    /** Type de filtre */
+    type: "text" | "select" | "range" | "date" | "daterange" | "multiselect" | "checkbox" | "number" | "boolean";
+    /** Options pour select/multiselect */
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    /** Placeholder */
+    placeholder?: string;
+    /** Valeur par défaut */
+    defaultValue?: any;
+    /** Colonne associée */
+    column?: string;
+    /** Fonction de filtrage personnalisée */
+    filterFn?: (row: any, columnId: string, filterValue: any) => boolean;
+    /** Validation du filtre */
+    validate?: (value: any) => string | null;
+}
+/**
+ * Configuration de groupement
+ */
+export interface GroupingConfig {
+    /** Colonnes de groupement */
+    columns?: string[];
+    /** Fonction d'agrégation personnalisée */
+    aggregations?: Record<string, (values: any[]) => any>;
+    /** Affichage des totaux */
+    showTotals?: boolean;
+    /** Position des totaux */
+    totalsPosition?: "top" | "bottom" | "both";
+}
+/**
+ * Configuration de virtualisation
+ */
+export interface VirtualizationConfig {
+    /** Type de virtualisation */
+    type: VirtualizationType;
+    /** Hauteur fixe des lignes */
+    itemHeight?: number;
+    /** Hauteur estimée pour la virtualisation dynamique */
+    estimatedItemHeight?: number;
+    /** Nombre d'éléments à pré-rendre */
+    overscan?: number;
+    /** Hauteur du conteneur */
+    containerHeight?: number;
+}
+/**
+ * Configuration de redimensionnement des colonnes
+ */
+export interface ColumnResizeConfig {
+    /** Mode de redimensionnement */
+    mode?: "onChange" | "onEnd";
+    /** Colonnes redimensionnables */
+    resizable?: boolean;
+    /** Largeur minimale */
+    minSize?: number;
+    /** Largeur maximale */
+    maxSize?: number;
+    /** Largeur par défaut */
+    defaultSize?: number;
+}
+/**
+ * Configuration de réordonnancement
+ */
+export interface ColumnOrderConfig {
+    /** Activer le réordonnancement */
+    enabled?: boolean;
+    /** Colonnes non réordonnables */
+    disabled?: string[];
+    /** Callback de changement d'ordre */
+    onOrderChange?: (newOrder: string[]) => void;
+}
+/**
+ * Configuration d'expansion des lignes
+ */
+export interface RowExpansionConfig {
+    /** Activer l'expansion */
+    enabled?: boolean;
+    /** Colonne d'expansion */
+    columnId?: string;
+    /** Fonction de rendu du contenu étendu */
+    renderExpanded?: (row: any) => ReactNode;
+    /** État d'expansion initial */
+    initialExpanded?: Record<string, boolean>;
+}
+/**
+ * Action de la toolbar
+ */
+export interface TableAction {
+    /** ID unique */
+    id: string;
+    /** Libellé */
+    label: string;
+    /** Icône (composant React) */
+    icon?: ReactNode;
+    /** Callback */
+    onClick: (selectedRows: any[]) => void;
+    /** Visible seulement si sélection */
+    requiresSelection?: boolean;
+    /** Variant du bouton */
+    variant?: "default" | "destructive" | "outline" | "ghost";
+    /** Désactivé */
+    disabled?: boolean;
+}
+/**
+ * Configuration de la toolbar
+ */
+export interface ToolbarConfig {
+    /** Actions personnalisées */
+    actions?: TableAction[];
+    /** Afficher la recherche globale */
+    showSearch?: boolean;
+    /** Afficher le sélecteur de colonnes */
+    showColumnToggle?: boolean;
+    /** Afficher le changement de densité */
+    showDensity?: boolean;
+    /** Afficher le bouton de refresh */
+    showRefresh?: boolean;
+    /** Callback de refresh */
+    onRefresh?: () => void;
+}
+/**
+ * Configuration d'export
+ */
+export interface ExportConfig {
+    /** Formats supportés */
+    formats?: Array<"csv" | "xlsx" | "json" | "pdf" | "xml">;
+    /** Nom du fichier */
+    filename?: string;
+    /** Callback personnalisé */
+    onExport?: (data: any[], format: string) => void;
+    /** Colonnes à exporter */
+    columns?: string[];
+    /** Inclure les en-têtes */
+    includeHeaders?: boolean;
+    /** Formatage personnalisé */
+    formatters?: Record<string, (value: any) => string>;
+    /** Options spécifiques par format */
+    options?: {
+        csv?: {
+            delimiter?: string;
+            encoding?: string;
+        };
+        xlsx?: {
+            sheetName?: string;
+            includeStyles?: boolean;
+        };
+        pdf?: {
+            orientation?: "portrait" | "landscape";
+            pageSize?: string;
+        };
+    };
+}
+/**
+ * Configuration d'import
+ */
+export interface ImportConfig {
+    /** Formats acceptés */
+    accept?: string;
+    /** Callback de traitement */
+    onImport?: (data: any[]) => void;
+    /** Validation des données */
+    validate?: (data: any[]) => {
+        valid: boolean;
+        errors: string[];
+    };
+    /** Mapping des colonnes */
+    columnMapping?: Record<string, string>;
+    /** Options de parsing */
+    parseOptions?: {
+        csv?: {
+            delimiter?: string;
+            skipEmptyLines?: boolean;
+        };
+        xlsx?: {
+            sheetIndex?: number;
+            headerRow?: number;
+        };
+    };
+}
+/**
+ * État de sélection
+ */
+export interface SelectionState {
+    /** IDs sélectionnés */
+    selectedIds: Set<string>;
+    /** Tout sélectionné */
+    selectAll: boolean;
+}
+/**
+ * Props principales du DataTable
+ */
+export interface DataTableProps<TData> {
+    /** Données à afficher */
+    data: TData[];
+    /** Définition des colonnes */
+    columns: ColumnDef<TData, any>[];
+    /** Layout d'affichage */
+    layout?: DataTableLayout;
+    /** Variant visuel */
+    variant?: DataTableVariant;
+    /** Densité */
+    density?: DataTableDensity;
+    /** Configuration des filtres */
+    filters?: FilterConfig[];
+    /** Position des filtres */
+    filterPosition?: FilterPosition;
+    /** Configuration de la toolbar */
+    toolbar?: ToolbarConfig;
+    /** Configuration de la pagination */
+    pagination?: PaginationConfig;
+    /** Mode de sélection */
+    selection?: SelectionMode | boolean;
+    /** Actions sur les lignes */
+    actions?: TableAction[];
+    /** Namespace i18n */
+    i18nNamespace?: string;
+    /** État de chargement */
+    loading?: boolean;
+    /** Message d'erreur */
+    error?: string | null;
+    /** État vide personnalisé */
+    emptyState?: ReactNode;
+    /** Header sticky */
+    headerSticky?: boolean;
+    /** Toggle de visibilité des colonnes */
+    columnVisibilityToggle?: boolean;
+    /** Configuration de redimensionnement des colonnes */
+    columnResize?: boolean | ColumnResizeConfig;
+    /** Configuration de réordonnancement */
+    columnOrder?: ColumnOrderConfig;
+    /** Configuration de groupement */
+    grouping?: GroupingConfig;
+    /** Configuration d'expansion des lignes */
+    rowExpansion?: RowExpansionConfig;
+    /** Configuration de virtualisation */
+    virtualization?: VirtualizationConfig;
+    /** Mode de tri */
+    sortMode?: SortMode;
+    /** Activer l'export */
+    enableExport?: boolean | ExportConfig;
+    /** Activer l'import */
+    enableImport?: boolean | ImportConfig;
+    /** Activer le réordonnancement */
+    enableReorder?: boolean;
+    /** Menu contextuel */
+    enableContextMenu?: boolean;
+    /** Callback de clic sur ligne */
+    onRowClick?: (row: TData) => void;
+    /** Callback de double-clic */
+    onRowDoubleClick?: (row: TData) => void;
+    /** Callback de changement de tri */
+    onSortingChange?: (sorting: SortingState) => void;
+    /** Callback de changement de filtres */
+    onFiltersChange?: (filters: ColumnFiltersState) => void;
+    /** Callback de changement de sélection */
+    onSelectionChange?: (selectedRows: TData[]) => void;
+    /** Callback de changement d'ordre des colonnes */
+    onColumnOrderChange?: (order: ColumnOrderState) => void;
+    /** Callback de changement d'expansion */
+    onExpandedChange?: (expanded: ExpandedState) => void;
+    /** Callback de changement de groupement */
+    onGroupingChange?: (grouping: GroupingState) => void;
+    /** Classe CSS personnalisée */
+    className?: string;
+    /** ID unique pour la persistance */
+    tableId?: string;
+    /** Configuration d'édition */
+    edit?: EditConfig<TData>;
+    /** Thème personnalisé */
+    theme?: {
+        colors?: Record<string, string>;
+        spacing?: Record<string, string>;
+        typography?: Record<string, any>;
+    };
+    /** Options de performance */
+    performance?: {
+        /** Désactiver les animations */
+        disableAnimations?: boolean;
+        /** Limite de rendu */
+        renderLimit?: number;
+        /** Délai de debounce pour les filtres */
+        filterDebounceMs?: number;
+    };
+}
+/**
+ * Configuration d'édition pour une colonne
+ */
+export interface ColumnEditConfig<TData> {
+    /** Champ éditable */
+    field: keyof TData;
+    /** Configuration de la cellule d'édition */
+    config: EditCellConfig;
+    /** Validation personnalisée */
+    validate?: (value: any, row: TData) => string | null;
+    /** Callback de changement */
+    onChange?: (value: any, row: TData) => void;
+}
+/**
+ * Configuration d'édition du DataTable
+ */
+export interface EditConfig<TData> {
+    /** Colonnes éditables */
+    editableColumns?: ColumnEditConfig<TData>[];
+    /** Mode d'édition */
+    mode?: "inline" | "modal" | "row";
+    /** Auto-save */
+    autoSave?: boolean;
+    /** Délai d'auto-save en ms */
+    autoSaveDelay?: number;
+    /** Callback de sauvegarde */
+    onSave?: (rowId: string, data: Partial<TData>) => Promise<void>;
+    /** Callback d'annulation */
+    onCancel?: (rowId: string, originalData: TData) => void;
+    /** Validation globale */
+    validate?: (data: Partial<TData>, row: TData) => Record<string, string>;
+    /** Boutons d'action personnalisés */
+    actionButtons?: {
+        save?: ReactNode;
+        cancel?: ReactNode;
+        edit?: ReactNode;
+    };
+}
+/**
+ * État interne du DataTable
+ */
+export interface DataTableState {
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    columnVisibility: VisibilityState;
+    columnOrder: ColumnOrderState;
+    expanded: ExpandedState;
+    grouping: GroupingState;
+    pagination: PaginationState;
+    globalFilter: string;
+    density: DataTableDensity;
+    layout: DataTableLayout;
+    rowSelection: Record<string, boolean>;
+}
+/**
+ * Configuration de thème personnalisé
+ */
+export interface DataTableTheme {
+    /** Couleurs personnalisées */
+    colors?: {
+        primary?: string;
+        secondary?: string;
+        accent?: string;
+        background?: string;
+        surface?: string;
+        text?: string;
+        textSecondary?: string;
+        border?: string;
+        hover?: string;
+        selected?: string;
+        disabled?: string;
+    };
+    /** Espacement personnalisé */
+    spacing?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    /** Typographie personnalisée */
+    typography?: {
+        fontFamily?: string;
+        fontSize?: {
+            xs?: string;
+            sm?: string;
+            md?: string;
+            lg?: string;
+            xl?: string;
+        };
+        fontWeight?: {
+            normal?: string;
+            medium?: string;
+            semibold?: string;
+            bold?: string;
+        };
+    };
+    /** Bordures personnalisées */
+    borders?: {
+        radius?: {
+            sm?: string;
+            md?: string;
+            lg?: string;
+        };
+        width?: {
+            thin?: string;
+            medium?: string;
+            thick?: string;
+        };
+    };
+    /** Ombres personnalisées */
+    shadows?: {
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+}

package/dist/components/DataTable/utils.d.ts

@@ -0,0 +1,37 @@
+import { type ClassValue } from "clsx";
+/**
+ * Utilitaire pour merger les classes CSS
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Export des données en CSV
+ */
+export declare function exportToCSV<T extends Record<string, any>>(data: T[], filename?: string): void;
+/**
+ * Export des données en JSON
+ */
+export declare function exportToJSON<T>(data: T[], filename?: string): void;
+/**
+ * Parse un fichier CSV
+ */
+export declare function parseCSV(file: File): Promise<any[]>;
+/**
+ * Sauvegarde de l'état dans localStorage
+ */
+export declare function saveTableState(tableId: string, state: any): void;
+/**
+ * Chargement de l'état depuis localStorage
+ */
+export declare function loadTableState(tableId: string): any | null;
+/**
+ * Génère un ID unique
+ */
+export declare function generateId(): string;
+/**
+ * Debounce une fonction
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+/**
+ * Filtre global sur les données
+ */
+export declare function globalFilterFn<T extends Record<string, any>>(row: T, columnId: string, filterValue: string): boolean;

package/dist/components/alert/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: {
+    variant?: "default" | "destructive";
+} & import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/badge/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: {
+    variant?: "default" | "outline" | "destructive" | "secondary";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/button/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: {
+    variant?: "default" | "outline" | "link" | "destructive" | "secondary" | "ghost";
+    size?: "default" | "sm" | "lg" | "icon";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+/**
+ * Props for the {@link Calendar} component.
+ *
+ * Forwards every prop accepted by `react-day-picker`'s `<DayPicker>`
+ * (`mode`, `selected`, `onSelect`, `disabled`, `fromDate`, `toDate`,
+ * `numberOfMonths`, `locale`, …). Only the visual `classNames` map is
+ * pre-styled to match the WakaStart design tokens.
+ *
+ * @see https://daypicker.dev/api/types/DayPickerProps
+ */
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export { Calendar };