@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/dist/components/waka-cart-summary/index.d.ts

@@ -0,0 +1,154 @@
+import * as React from "react";
+export interface CartItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Product name */
+    name: string;
+    /** Product description (optional) */
+    description?: string;
+    /** Product image URL */
+    image?: string;
+    /** Unit price */
+    price: number;
+    /** Quantity in cart */
+    quantity: number;
+    /** Maximum quantity allowed (optional) */
+    maxQuantity?: number;
+    /** Minimum quantity allowed (default: 1) */
+    minQuantity?: number;
+    /** Whether the item is in stock */
+    inStock?: boolean;
+    /** Product variant (e.g., "Red, Large") */
+    variant?: string;
+    /** Original price before discount */
+    originalPrice?: number;
+    /** SKU or product code */
+    sku?: string;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+}
+export interface CartDiscount {
+    /** Discount code */
+    code: string;
+    /** Discount type */
+    type: "percentage" | "fixed" | "shipping";
+    /** Discount value (percentage or fixed amount) */
+    value: number;
+    /** Minimum order amount for discount to apply */
+    minOrderAmount?: number;
+    /** Description of the discount */
+    description?: string;
+}
+export interface CartTotals {
+    /** Subtotal before taxes, shipping, and discounts */
+    subtotal: number;
+    /** Tax amount */
+    tax: number;
+    /** Tax rate (percentage) */
+    taxRate: number;
+    /** Shipping cost */
+    shipping: number;
+    /** Total discount amount */
+    discount: number;
+    /** Grand total */
+    total: number;
+}
+export interface WakaCartSummaryProps {
+    /** Cart items */
+    items: CartItem[];
+    /** Currency code (default: "USD") */
+    currency?: string;
+    /** Tax rate as decimal (e.g., 0.08 for 8%) */
+    taxRate?: number;
+    /** Shipping cost */
+    shippingCost?: number;
+    /** Free shipping threshold (amount) */
+    freeShippingThreshold?: number;
+    /** Applied discount/coupon */
+    discount?: CartDiscount | null;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Show item images */
+    showImages?: boolean;
+    /** Show item descriptions */
+    showDescriptions?: boolean;
+    /** Show SKU/product codes */
+    showSku?: boolean;
+    /** Enable quantity editing */
+    enableQuantityEdit?: boolean;
+    /** Enable item removal */
+    enableRemove?: boolean;
+    /** Custom empty state */
+    emptyState?: React.ReactNode;
+    /** Custom loading state */
+    loadingState?: React.ReactNode;
+    /** Header content */
+    header?: React.ReactNode;
+    /** Footer content (e.g., checkout button) */
+    footer?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Item container CSS classes */
+    itemClassName?: string;
+    /** Summary section CSS classes */
+    summaryClassName?: string;
+    /** Callback when item quantity changes */
+    onQuantityChange?: (itemId: string, quantity: number) => void;
+    /** Callback when item is removed */
+    onRemoveItem?: (itemId: string) => void;
+    /** Callback when discount is applied */
+    onApplyDiscount?: (code: string) => Promise<CartDiscount | null>;
+    /** Callback when discount is removed */
+    onRemoveDiscount?: () => void;
+    /** Callback for checkout action */
+    onCheckout?: (totals: CartTotals) => void;
+    /** Custom price formatter */
+    formatPrice?: (price: number, currency: string) => string;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Accessibility label */
+    ariaLabel?: string;
+}
+export declare const WakaCartSummary: React.FC<WakaCartSummaryProps>;
+export interface UseCartSummaryOptions {
+    /** Initial cart items */
+    initialItems?: CartItem[];
+    /** Currency code */
+    currency?: string;
+    /** Tax rate */
+    taxRate?: number;
+    /** Shipping cost */
+    shippingCost?: number;
+    /** Free shipping threshold */
+    freeShippingThreshold?: number;
+    /** Callback when cart changes */
+    onCartChange?: (items: CartItem[]) => void;
+}
+export interface UseCartSummaryReturn {
+    /** Current cart items */
+    items: CartItem[];
+    /** Applied discount */
+    discount: CartDiscount | null;
+    /** Cart totals */
+    totals: CartTotals;
+    /** Total item count */
+    itemCount: number;
+    /** Whether the cart is empty */
+    isEmpty: boolean;
+    /** Add item to cart */
+    addItem: (item: CartItem) => void;
+    /** Remove item from cart */
+    removeItem: (itemId: string) => void;
+    /** Update item quantity */
+    updateQuantity: (itemId: string, quantity: number) => void;
+    /** Clear all items */
+    clearCart: () => void;
+    /** Apply discount code */
+    applyDiscount: (discount: CartDiscount) => void;
+    /** Remove discount */
+    removeDiscount: () => void;
+    /** Set items directly */
+    setItems: (items: CartItem[]) => void;
+}
+export declare function useCartSummary(options?: UseCartSummaryOptions): UseCartSummaryReturn;
+export default WakaCartSummary;

package/dist/components/waka-challenge-timer/index.d.ts

@@ -0,0 +1,86 @@
+import * as React from "react";
+export interface ChallengeTask {
+    /** Unique identifier */
+    id: string;
+    /** Task description */
+    text: string;
+    /** Whether the task is completed */
+    completed: boolean;
+    /** Current progress value (for countable tasks) */
+    current?: number;
+    /** Target value (for countable tasks) */
+    target?: number;
+}
+export interface ChallengeReward {
+    /** Type of reward */
+    type: "xp" | "badge" | "item" | "currency" | "custom";
+    /** Reward label */
+    label: string;
+    /** Reward value */
+    value: number | string;
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+export interface Challenge {
+    /** Unique identifier */
+    id: string;
+    /** Challenge name */
+    name: string;
+    /** Challenge description */
+    description?: string;
+    /** End date/time */
+    endTime: Date;
+    /** Start date/time (for personal challenges) */
+    startTime?: Date;
+    /** Tasks to complete (optional) */
+    tasks?: ChallengeTask[];
+    /** Rewards for completion */
+    rewards?: ChallengeReward[];
+    /** Whether this is a personal (pausable) challenge */
+    isPersonal?: boolean;
+    /** Challenge category/type */
+    category?: "daily" | "weekly" | "event" | "personal" | "competition";
+}
+export interface WakaChallengeTimerProps {
+    /** Challenge data */
+    challenge: Challenge;
+    /** Size variant */
+    size?: "compact" | "default" | "large";
+    /** Callback when timer reaches zero */
+    onComplete?: (challengeId: string) => void;
+    /** Callback when timer enters urgent mode (< threshold remaining) */
+    onUrgent?: (challengeId: string) => void;
+    /** Callback when pausing (for personal challenges) */
+    onPause?: (challengeId: string) => void;
+    /** Callback when starting/resuming (for personal challenges) */
+    onStart?: (challengeId: string) => void;
+    /** Callback when task is clicked */
+    onTaskClick?: (challengeId: string, taskId: string) => void;
+    /** Whether the timer is paused (for personal challenges) */
+    isPaused?: boolean;
+    /** Threshold in seconds for urgent animation (default: 3600 = 1 hour) */
+    urgentThreshold?: number;
+    /** Custom className */
+    className?: string;
+}
+export interface TimeRemaining {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    totalSeconds: number;
+    isExpired: boolean;
+    isUrgent: boolean;
+}
+export interface UseChallengeTimerOptions {
+    endTime: Date;
+    isPaused?: boolean;
+    urgentThreshold?: number;
+    onComplete?: () => void;
+    onUrgent?: () => void;
+}
+export declare function useChallengeTimer({ endTime, isPaused, urgentThreshold, onComplete, onUrgent, }: UseChallengeTimerOptions): TimeRemaining;
+export declare function WakaChallengeTimer({ challenge, size, onComplete, onUrgent, onPause, onStart, onTaskClick, isPaused, urgentThreshold, className, }: WakaChallengeTimerProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaChallengeTimerSkeleton({ size }: {
+    size?: "compact" | "default" | "large";
+}): import("react/jsx-runtime").JSX.Element;

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/hooks/useRechartsLoader.d.ts

@@ -0,0 +1,161 @@
+/**
+ * Hook pour charger Recharts dynamiquement
+ * Permet d'utiliser les graphiques sans avoir Recharts en dépendance obligatoire
+ */
+export interface RechartsComponents {
+    ResponsiveContainer: React.ComponentType<{
+        width?: number | string;
+        height?: number | string;
+        children: React.ReactNode;
+    }>;
+    BarChart: React.ComponentType<{
+        data?: unknown[];
+        layout?: "vertical" | "horizontal";
+        barGap?: number;
+        barCategoryGap?: number | string;
+        children?: React.ReactNode;
+    }>;
+    LineChart: React.ComponentType<{
+        data?: unknown[];
+        children?: React.ReactNode;
+    }>;
+    AreaChart: React.ComponentType<{
+        data?: unknown[];
+        children?: React.ReactNode;
+    }>;
+    PieChart: React.ComponentType<{
+        children?: React.ReactNode;
+    }>;
+    Bar: React.ComponentType<{
+        dataKey: string;
+        fill?: string;
+        radius?: number | [number, number, number, number];
+        stackId?: string;
+        barSize?: number;
+        animationDuration?: number;
+        isAnimationActive?: boolean;
+        name?: string;
+    }>;
+    Line: React.ComponentType<{
+        dataKey: string;
+        stroke?: string;
+        strokeWidth?: number;
+        type?: "linear" | "monotone" | "step" | "basis" | "natural";
+        dot?: boolean | object;
+        activeDot?: boolean | object;
+        strokeDasharray?: string;
+        animationDuration?: number;
+        isAnimationActive?: boolean;
+        name?: string;
+    }>;
+    Area: React.ComponentType<{
+        dataKey: string;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+        fillOpacity?: number;
+        type?: "linear" | "monotone" | "step" | "basis" | "natural";
+        dot?: boolean | object;
+        stackId?: string;
+        animationDuration?: number;
+        isAnimationActive?: boolean;
+        name?: string;
+    }>;
+    Pie: React.ComponentType<{
+        data?: unknown[];
+        dataKey?: string;
+        nameKey?: string;
+        cx?: string | number;
+        cy?: string | number;
+        innerRadius?: number | string;
+        outerRadius?: number | string;
+        startAngle?: number;
+        endAngle?: number;
+        paddingAngle?: number;
+        fill?: string;
+        label?: boolean | object | ((props: unknown) => React.ReactNode);
+        labelLine?: boolean | object;
+        animationDuration?: number;
+        isAnimationActive?: boolean;
+        children?: React.ReactNode;
+    }>;
+    Cell: React.ComponentType<{
+        fill?: string;
+        stroke?: string;
+        key?: string | number;
+    }>;
+    XAxis: React.ComponentType<{
+        dataKey?: string;
+        hide?: boolean;
+        tickFormatter?: (value: unknown) => string;
+        axisLine?: boolean | object;
+        tickLine?: boolean | object;
+        tick?: boolean | object;
+        type?: "number" | "category";
+    }>;
+    YAxis: React.ComponentType<{
+        hide?: boolean;
+        tickFormatter?: (value: unknown) => string;
+        domain?: [number | string, number | string];
+        unit?: string;
+        axisLine?: boolean | object;
+        tickLine?: boolean | object;
+        tick?: boolean | object;
+    }>;
+    CartesianGrid: React.ComponentType<{
+        strokeDasharray?: string;
+        stroke?: string;
+        horizontal?: boolean;
+        vertical?: boolean;
+    }>;
+    Tooltip: React.ComponentType<{
+        content?: React.ReactNode | ((props: unknown) => React.ReactNode);
+        formatter?: (value: unknown, name: string) => [string, string] | string;
+        labelFormatter?: (label: unknown) => string;
+        cursor?: boolean | object;
+        wrapperStyle?: React.CSSProperties;
+        contentStyle?: React.CSSProperties;
+        itemStyle?: React.CSSProperties;
+        labelStyle?: React.CSSProperties;
+    }>;
+    Legend: React.ComponentType<{
+        align?: "left" | "center" | "right";
+        verticalAlign?: "top" | "middle" | "bottom";
+        layout?: "horizontal" | "vertical";
+        iconType?: "circle" | "diamond" | "square" | "star" | "triangle" | "wye";
+        wrapperStyle?: React.CSSProperties;
+        formatter?: (value: string) => string;
+    }>;
+    defs: React.ComponentType<{
+        children?: React.ReactNode;
+    }>;
+    linearGradient: React.ComponentType<{
+        id: string;
+        x1?: string;
+        y1?: string;
+        x2?: string;
+        y2?: string;
+        children?: React.ReactNode;
+    }>;
+    stop: React.ComponentType<{
+        offset: string;
+        stopColor: string;
+        stopOpacity?: number;
+    }>;
+}
+export interface UseRechartsLoaderResult {
+    /** Composants Recharts chargés */
+    components: RechartsComponents | null;
+    /** État de chargement */
+    loading: boolean;
+    /** Erreur de chargement */
+    error: Error | null;
+    /** Recharts est disponible */
+    isAvailable: boolean;
+}
+/**
+ * Hook pour charger Recharts dynamiquement
+ * @returns État du chargement et composants Recharts
+ */
+export declare function useRechartsLoader(): UseRechartsLoaderResult;
+export default useRechartsLoader;

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";