@wakastellar/ui 3.5.2 → 4.0.0

package/dist/components/waka-carousel/index.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+export interface CarouselImage {
+    src: string;
+    alt: string;
+    title?: string;
+    description?: string;
+    caption?: string;
+    downloadUrl?: string;
+    shareUrl?: string;
+    metadata?: {
+        width?: number;
+        height?: number;
+        size?: string;
+        format?: string;
+    };
+}
+export type CarouselTransition = 'fade' | 'slide' | 'zoom' | 'flip';
+export type CarouselLayout = 'default' | 'fullscreen' | 'compact' | 'gallery';
+export type CarouselTheme = 'light' | 'dark' | 'auto';
+export interface WakaCarouselProps {
+    images: CarouselImage[];
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    showIndicators?: boolean;
+    showNavigation?: boolean;
+    showThumbnails?: boolean;
+    showFullscreen?: boolean;
+    showDownload?: boolean;
+    showShare?: boolean;
+    showCounter?: boolean;
+    showProgress?: boolean;
+    transition?: CarouselTransition;
+    layout?: CarouselLayout;
+    theme?: CarouselTheme;
+    aspectRatio?: '16/9' | '4/3' | '1/1' | '3/2' | 'auto';
+    maxHeight?: string | number;
+    className?: string;
+    imageClassName?: string;
+    indicatorClassName?: string;
+    navigationClassName?: string;
+    thumbnailClassName?: string;
+    overlayClassName?: string;
+    counterClassName?: string;
+    progressClassName?: string;
+    onImageChange?: (index: number, image: CarouselImage) => void;
+    onImageClick?: (image: CarouselImage, index: number) => void;
+    onFullscreenToggle?: (isFullscreen: boolean) => void;
+    onDownload?: (image: CarouselImage, index: number) => void;
+    onShare?: (image: CarouselImage, index: number) => void;
+    onPlayPause?: (isPlaying: boolean) => void;
+    onThumbnailClick?: (index: number) => void;
+    onIndicatorClick?: (index: number) => void;
+    onNavigationClick?: (direction: 'prev' | 'next') => void;
+    onKeyboardNavigation?: (key: string) => void;
+    onTouchStart?: (event: React.TouchEvent) => void;
+    onTouchEnd?: (event: React.TouchEvent) => void;
+    onSwipeLeft?: () => void;
+    onSwipeRight?: () => void;
+    onSwipeUp?: () => void;
+    onSwipeDown?: () => void;
+    onLoadStart?: (index: number) => void;
+    onLoadEnd?: (index: number) => void;
+    onError?: (index: number, error: Error) => void;
+    onReady?: () => void;
+    onDestroy?: () => void;
+    loop?: boolean;
+    pauseOnHover?: boolean;
+    pauseOnFocus?: boolean;
+    pauseOnTouch?: boolean;
+    keyboardNavigation?: boolean;
+    touchNavigation?: boolean;
+    swipeThreshold?: number;
+    animationDuration?: number;
+    preloadImages?: boolean;
+    lazyLoading?: boolean;
+    imageQuality?: 'low' | 'medium' | 'high' | 'auto';
+    placeholder?: string;
+    errorImage?: string;
+    loadingSpinner?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    customControls?: React.ReactNode;
+    customOverlay?: React.ReactNode;
+    customThumbnails?: React.ReactNode;
+    customIndicators?: React.ReactNode;
+    customNavigation?: React.ReactNode;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    role?: string;
+    virtualScrolling?: boolean;
+    maxVisibleThumbnails?: number;
+    thumbnailSize?: 'small' | 'medium' | 'large';
+    overlayOpacity?: number;
+    overlayGradient?: string;
+    navigationSize?: 'small' | 'medium' | 'large';
+    indicatorSize?: 'small' | 'medium' | 'large';
+    indicatorShape?: 'circle' | 'square' | 'diamond' | 'line';
+    thumbnailAspectRatio?: '1/1' | '4/3' | '16/9' | 'auto';
+    onMount?: () => void;
+    onUnmount?: () => void;
+    onBeforeChange?: (fromIndex: number, toIndex: number) => boolean;
+    onAfterChange?: (index: number) => void;
+}
+export declare const WakaCarousel: React.FC<WakaCarouselProps>;
+export default WakaCarousel;

package/dist/components/waka-charts/WakaAreaChart.d.ts

@@ -0,0 +1,12 @@
+/**
+ * WakaAreaChart - Graphique en aire
+ */
+import * as React from "react";
+import type { AreaChartProps } from "./types";
+export interface WakaAreaChartProps extends AreaChartProps {
+}
+/**
+ * Graphique en aire avec support multi-séries, empilé, gradients, et animations
+ */
+export declare const WakaAreaChart: React.ForwardRefExoticComponent<WakaAreaChartProps & React.RefAttributes<HTMLDivElement>>;
+export default WakaAreaChart;

package/dist/components/waka-charts/WakaBarChart.d.ts

@@ -0,0 +1,12 @@
+/**
+ * WakaBarChart - Graphique à barres
+ */
+import * as React from "react";
+import type { BarChartProps } from "./types";
+export interface WakaBarChartProps extends BarChartProps {
+}
+/**
+ * Graphique à barres avec support multi-séries, empilé, et animations
+ */
+export declare const WakaBarChart: React.ForwardRefExoticComponent<WakaBarChartProps & React.RefAttributes<HTMLDivElement>>;
+export default WakaBarChart;

package/dist/components/waka-charts/WakaChart.d.ts

@@ -0,0 +1,17 @@
+/**
+ * WakaChart - Container de base pour les graphiques
+ * Gère le chargement dynamique de Recharts et les états loading/error
+ */
+import * as React from "react";
+import { useRechartsLoader } from "./hooks/useRechartsLoader";
+import type { BaseChartProps } from "./types";
+export interface WakaChartProps extends Omit<BaseChartProps, "data"> {
+    /** Contenu du graphique (rendu par les composants enfants) */
+    children: (components: ReturnType<typeof useRechartsLoader>["components"]) => React.ReactNode;
+}
+/**
+ * Container de base pour les graphiques
+ * Gère le chargement de Recharts, les états, et le responsive
+ */
+export declare const WakaChart: React.ForwardRefExoticComponent<WakaChartProps & React.RefAttributes<HTMLDivElement>>;
+export default WakaChart;

package/dist/components/waka-charts/WakaLineChart.d.ts

@@ -0,0 +1,12 @@
+/**
+ * WakaLineChart - Graphique en ligne
+ */
+import * as React from "react";
+import type { LineChartProps } from "./types";
+export interface WakaLineChartProps extends LineChartProps {
+}
+/**
+ * Graphique en ligne avec support multi-séries, courbes, et animations
+ */
+export declare const WakaLineChart: React.ForwardRefExoticComponent<WakaLineChartProps & React.RefAttributes<HTMLDivElement>>;
+export default WakaLineChart;

package/dist/components/waka-charts/WakaMiniChart.d.ts

@@ -0,0 +1,13 @@
+/**
+ * WakaMiniChart - Mini graphique pour DataTable
+ */
+import * as React from "react";
+import type { MiniChartProps } from "./types";
+export interface WakaMiniChartProps extends MiniChartProps {
+}
+/**
+ * Mini graphique optimisé pour les cellules DataTable
+ * Affiche une tendance avec sparkline et indicateur de direction
+ */
+export declare const WakaMiniChart: React.ForwardRefExoticComponent<WakaMiniChartProps & React.RefAttributes<HTMLDivElement>>;
+export default WakaMiniChart;

package/dist/components/waka-charts/WakaPieChart.d.ts

@@ -0,0 +1,12 @@
+/**
+ * WakaPieChart - Graphique camembert/donut
+ */
+import * as React from "react";
+import type { PieChartProps } from "./types";
+export interface WakaPieChartProps extends PieChartProps {
+}
+/**
+ * Graphique camembert/donut avec labels, animations, et interactivité
+ */
+export declare const WakaPieChart: React.ForwardRefExoticComponent<WakaPieChartProps & React.RefAttributes<HTMLDivElement>>;
+export default WakaPieChart;

package/dist/components/waka-charts/WakaSparkline.d.ts

@@ -0,0 +1,13 @@
+/**
+ * WakaSparkline - Mini graphique inline
+ */
+import * as React from "react";
+import type { SparklineProps } from "./types";
+export interface WakaSparklineProps extends SparklineProps {
+}
+/**
+ * Mini graphique inline (sparkline)
+ * Idéal pour afficher des tendances dans des tableaux ou textes
+ */
+export declare const WakaSparkline: React.ForwardRefExoticComponent<WakaSparklineProps & React.RefAttributes<HTMLDivElement>>;
+export default WakaSparkline;

package/dist/components/waka-charts/dataTableHelpers.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Helpers pour intégrer les graphiques dans DataTable
+ */
+import type { ColumnDef } from "@tanstack/react-table";
+import type { ChartColumnConfig } from "./types";
+/**
+ * Crée une colonne de graphique pour DataTable
+ *
+ * @example
+ * ```tsx
+ * import { createChartColumn } from "@wakastellar/ui"
+ *
+ * const columns = [
+ *   createChartColumn<Product>({
+ *     accessorKey: "salesHistory",
+ *     header: "Trend",
+ *     chartType: "sparkline",
+ *     width: 120,
+ *     showValue: true,
+ *   }),
+ * ]
+ * ```
+ */
+export declare function createChartColumn<TData extends Record<string, unknown>>(config: ChartColumnConfig<TData>): ColumnDef<TData, unknown>;
+/**
+ * Template de colonne sparkline pour useDataTableColumnTemplates
+ */
+export declare const sparklineTemplate: {
+    cell: (value: unknown) => {
+        type: string;
+        data: number[];
+    };
+    size: number;
+    enableSorting: boolean;
+    enableFiltering: boolean;
+};
+export default createChartColumn;

package/dist/components/waka-charts/hooks/useChartTheme.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Hook pour gérer le thème des graphiques
+ * Utilise les CSS variables de Tailwind/TweakCN
+ */
+import type { ChartTheme, ChartVariant } from "../types";
+export interface UseChartThemeResult {
+    /** Thème complet fusionné */
+    theme: Required<ChartTheme>;
+    /** Obtenir la couleur d'un index */
+    getColor: (index: number) => string;
+    /** Styles du tooltip */
+    tooltipStyles: {
+        contentStyle: React.CSSProperties;
+        wrapperStyle: React.CSSProperties;
+        itemStyle: React.CSSProperties;
+        labelStyle: React.CSSProperties;
+    };
+    /** Classes CSS selon la variante */
+    containerClasses: string;
+}
+/**
+ * Hook pour gérer le thème des graphiques
+ * @param customTheme - Thème personnalisé partiel
+ * @param variant - Variante visuelle
+ */
+export declare function useChartTheme(customTheme?: ChartTheme, variant?: ChartVariant): UseChartThemeResult;
+export default useChartTheme;

package/dist/components/waka-charts/index.d.ts

@@ -0,0 +1,57 @@
+/**
+ * WakaCharts - Composants de visualisation de données
+ *
+ * @module waka-charts
+ * @description
+ * Composants de graphiques basés sur Recharts avec support de :
+ * - Graphiques à barres, lignes, aires, camembert
+ * - Sparklines et mini-graphiques
+ * - Intégration DataTable
+ * - Thème CSS variables
+ * - Chargement dynamique (peer dependency optionnel)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   WakaBarChart,
+ *   WakaLineChart,
+ *   WakaPieChart,
+ *   WakaSparkline,
+ * } from "@wakastellar/ui"
+ *
+ * // Graphique à barres
+ * <WakaBarChart
+ *   data={[
+ *     { name: "Jan", value: 100 },
+ *     { name: "Feb", value: 150 },
+ *   ]}
+ *   variant="gradient"
+ *   animation
+ *   tooltip
+ * />
+ *
+ * // Sparkline dans du texte
+ * <p>Ventes: <WakaSparkline data={[10, 15, 8, 20, 25]} /></p>
+ * ```
+ */
+export { WakaChart } from "./WakaChart";
+export type { WakaChartProps } from "./WakaChart";
+export { WakaBarChart } from "./WakaBarChart";
+export type { WakaBarChartProps } from "./WakaBarChart";
+export { WakaLineChart } from "./WakaLineChart";
+export type { WakaLineChartProps } from "./WakaLineChart";
+export { WakaAreaChart } from "./WakaAreaChart";
+export type { WakaAreaChartProps } from "./WakaAreaChart";
+export { WakaPieChart } from "./WakaPieChart";
+export type { WakaPieChartProps } from "./WakaPieChart";
+export { WakaSparkline } from "./WakaSparkline";
+export type { WakaSparklineProps } from "./WakaSparkline";
+export { WakaMiniChart } from "./WakaMiniChart";
+export type { WakaMiniChartProps } from "./WakaMiniChart";
+export { useRechartsLoader } from "./hooks/useRechartsLoader";
+export type { UseRechartsLoaderResult, RechartsComponents } from "./hooks/useRechartsLoader";
+export { useChartTheme } from "./hooks/useChartTheme";
+export type { UseChartThemeResult } from "./hooks/useChartTheme";
+export { createChartColumn, sparklineTemplate } from "./dataTableHelpers";
+export type { ChartDataPoint, ChartSeries, ChartVariant, ChartSize, ChartTheme, ChartTooltipConfig, ChartLegendConfig, ChartAxisConfig, BaseChartProps, BarChartProps, LineChartProps, AreaChartProps, PieChartProps, SparklineProps, MiniChartProps, ChartColumnConfig, } from "./types";
+export { DEFAULT_CHART_COLORS, CHART_SIZE_MAP } from "./types";

package/dist/components/waka-charts/types.d.ts

@@ -0,0 +1,302 @@
+/**
+ * Types pour les composants de graphiques
+ * @module waka-charts/types
+ */
+import { CSSProperties, ReactNode } from "react";
+/**
+ * Point de données pour un graphique
+ */
+export interface ChartDataPoint {
+    /** Nom/label de la donnée (axe X pour barres/lignes, légende pour pie) */
+    name: string;
+    /** Valeur principale */
+    value?: number;
+    /** Valeurs multiples pour les séries */
+    [key: string]: string | number | undefined;
+}
+/**
+ * Configuration d'une série de données
+ */
+export interface ChartSeries {
+    /** Clé de l'accessor dans les données */
+    dataKey: string;
+    /** Label pour la légende */
+    label?: string;
+    /** Couleur de la série */
+    color?: string;
+    /** Type de ligne (pour line/area charts) */
+    strokeDasharray?: string;
+    /** Épaisseur du trait */
+    strokeWidth?: number;
+    /** Opacité de remplissage (pour area charts) */
+    fillOpacity?: number;
+}
+/**
+ * Variantes visuelles des graphiques
+ */
+export type ChartVariant = "default" | "gradient" | "outline" | "glass";
+/**
+ * Tailles des graphiques
+ */
+export type ChartSize = "sm" | "md" | "lg" | "xl" | "auto";
+/**
+ * Configuration du thème du graphique
+ */
+export interface ChartTheme {
+    /** Couleurs principales */
+    colors?: string[];
+    /** Couleur de la grille */
+    gridColor?: string;
+    /** Couleur des axes */
+    axisColor?: string;
+    /** Couleur du texte */
+    textColor?: string;
+    /** Couleur de fond du tooltip */
+    tooltipBackground?: string;
+    /** Couleur du texte du tooltip */
+    tooltipText?: string;
+    /** Couleur de la bordure du tooltip */
+    tooltipBorder?: string;
+    /** Font family */
+    fontFamily?: string;
+}
+/**
+ * Configuration du tooltip
+ */
+export interface ChartTooltipConfig {
+    /** Afficher le tooltip */
+    enabled?: boolean;
+    /** Format personnalisé du tooltip */
+    formatter?: (value: number, name: string, dataPoint: ChartDataPoint) => ReactNode;
+    /** Préfixe des valeurs */
+    valuePrefix?: string;
+    /** Suffixe des valeurs */
+    valueSuffix?: string;
+}
+/**
+ * Configuration de la légende
+ */
+export interface ChartLegendConfig {
+    /** Afficher la légende */
+    enabled?: boolean;
+    /** Position de la légende */
+    position?: "top" | "bottom" | "left" | "right";
+    /** Alignement */
+    align?: "left" | "center" | "right";
+}
+/**
+ * Configuration des axes
+ */
+export interface ChartAxisConfig {
+    /** Afficher l'axe X */
+    showXAxis?: boolean;
+    /** Afficher l'axe Y */
+    showYAxis?: boolean;
+    /** Format de l'axe X */
+    xAxisFormatter?: (value: unknown) => string;
+    /** Format de l'axe Y */
+    yAxisFormatter?: (value: unknown) => string;
+    /** Unité de l'axe Y */
+    yAxisUnit?: string;
+    /** Domaine de l'axe Y [min, max] */
+    yAxisDomain?: [number | "auto" | "dataMin" | "dataMax", number | "auto" | "dataMin" | "dataMax"];
+}
+/**
+ * Props communes à tous les graphiques
+ */
+export interface BaseChartProps {
+    /** Données du graphique */
+    data: ChartDataPoint[];
+    /** Variante visuelle */
+    variant?: ChartVariant;
+    /** Taille du graphique */
+    size?: ChartSize;
+    /** Hauteur personnalisée en pixels */
+    height?: number;
+    /** Largeur personnalisée en pixels ou pourcentage */
+    width?: number | string;
+    /** Activer les animations */
+    animation?: boolean;
+    /** Durée de l'animation en ms */
+    animationDuration?: number;
+    /** Afficher la grille */
+    grid?: boolean;
+    /** Configuration du tooltip */
+    tooltip?: boolean | ChartTooltipConfig;
+    /** Configuration de la légende */
+    legend?: boolean | ChartLegendConfig;
+    /** Configuration des axes */
+    axis?: ChartAxisConfig;
+    /** Thème personnalisé */
+    theme?: ChartTheme;
+    /** Classes CSS additionnelles */
+    className?: string;
+    /** Style inline */
+    style?: CSSProperties;
+    /** Titre du graphique */
+    title?: string;
+    /** Description/sous-titre */
+    description?: string;
+    /** État de chargement */
+    loading?: boolean;
+    /** Message d'erreur */
+    error?: string;
+    /** Callback au clic sur un élément */
+    onClick?: (data: ChartDataPoint, index: number) => void;
+    /** Responsive */
+    responsive?: boolean;
+}
+/**
+ * Props pour les graphiques à barres
+ */
+export interface BarChartProps extends BaseChartProps {
+    /** Clés des données à afficher */
+    dataKeys?: string[];
+    /** Séries configurées */
+    series?: ChartSeries[];
+    /** Disposition des barres */
+    layout?: "vertical" | "horizontal";
+    /** Barres empilées */
+    stacked?: boolean;
+    /** Rayon des coins */
+    radius?: number;
+    /** Largeur des barres (pourcentage) */
+    barSize?: number;
+    /** Écart entre les groupes de barres */
+    barGap?: number;
+    /** Écart entre les catégories */
+    barCategoryGap?: number | string;
+}
+/**
+ * Props pour les graphiques en ligne
+ */
+export interface LineChartProps extends BaseChartProps {
+    /** Clés des données à afficher */
+    dataKeys?: string[];
+    /** Séries configurées */
+    series?: ChartSeries[];
+    /** Type de courbe */
+    curve?: "linear" | "monotone" | "step" | "basis" | "natural";
+    /** Afficher les points */
+    dots?: boolean;
+    /** Taille des points */
+    dotSize?: number;
+    /** Points actifs (hover) */
+    activeDot?: boolean;
+    /** Épaisseur des lignes */
+    strokeWidth?: number;
+}
+/**
+ * Props pour les graphiques en aire
+ */
+export interface AreaChartProps extends LineChartProps {
+    /** Aires empilées */
+    stacked?: boolean;
+    /** Opacité du remplissage */
+    fillOpacity?: number;
+    /** Type de gradient */
+    gradientDirection?: "vertical" | "horizontal";
+}
+/**
+ * Props pour les graphiques camembert/donut
+ */
+export interface PieChartProps extends BaseChartProps {
+    /** Clé de la valeur */
+    dataKey?: string;
+    /** Clé du nom/label */
+    nameKey?: string;
+    /** Rayon intérieur (0 = camembert, >0 = donut) */
+    innerRadius?: number | string;
+    /** Rayon extérieur */
+    outerRadius?: number | string;
+    /** Angle de départ (en degrés) */
+    startAngle?: number;
+    /** Angle de fin */
+    endAngle?: number;
+    /** Espacement entre les segments */
+    paddingAngle?: number;
+    /** Afficher les labels */
+    label?: boolean | "percent" | "value" | "name";
+    /** Position des labels */
+    labelPosition?: "inside" | "outside";
+}
+/**
+ * Props pour les sparklines (mini graphiques inline)
+ */
+export interface SparklineProps {
+    /** Données (valeurs simples) */
+    data: number[];
+    /** Type de sparkline */
+    type?: "line" | "bar" | "area";
+    /** Largeur */
+    width?: number;
+    /** Hauteur */
+    height?: number;
+    /** Couleur */
+    color?: string;
+    /** Couleur de remplissage (area) */
+    fillColor?: string;
+    /** Opacité du remplissage */
+    fillOpacity?: number;
+    /** Afficher le min/max */
+    showMinMax?: boolean;
+    /** Afficher la valeur actuelle */
+    showValue?: boolean;
+    /** Classes CSS */
+    className?: string;
+    /** Animation */
+    animation?: boolean;
+}
+/**
+ * Props pour les mini-graphiques DataTable
+ */
+export interface MiniChartProps {
+    /** Données */
+    data: number[] | ChartDataPoint[];
+    /** Type de graphique */
+    type?: "line" | "bar" | "area" | "sparkline";
+    /** Largeur */
+    width?: number;
+    /** Hauteur */
+    height?: number;
+    /** Couleur principale */
+    color?: string;
+    /** Afficher la tendance (up/down) */
+    showTrend?: boolean;
+    /** Format de la valeur */
+    valueFormatter?: (value: number) => string;
+    /** Classes CSS */
+    className?: string;
+}
+/**
+ * Configuration pour créer une colonne chart dans DataTable
+ */
+export interface ChartColumnConfig<TData> {
+    /** Clé d'accès aux données */
+    accessorKey: keyof TData;
+    /** En-tête de colonne */
+    header?: string;
+    /** Type de graphique */
+    chartType?: "sparkline" | "bar" | "line" | "area";
+    /** Largeur de la colonne */
+    width?: number;
+    /** Hauteur du graphique */
+    height?: number;
+    /** Couleur */
+    color?: string;
+    /** Afficher la valeur */
+    showValue?: boolean;
+    /** Format de la valeur */
+    valueFormatter?: (value: number) => string;
+}
+/**
+ * Couleurs par défaut pour les graphiques
+ */
+export declare const DEFAULT_CHART_COLORS: string[];
+/**
+ * Tailles prédéfinies
+ */
+export declare const CHART_SIZE_MAP: Record<ChartSize, {
+    width: number | string;
+    height: number;
+}>;