@wakastellar/ui 1.0.12 → 2.0.0

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

@@ -0,0 +1,123 @@
+import * as React from "react";
+export type TaskStatus = "pending" | "completed" | "skipped";
+export interface ChecklistTask {
+    /** Unique identifier */
+    id: string;
+    /** Task title */
+    title: string;
+    /** Task description (shown when expanded) */
+    description?: string;
+    /** Category/group the task belongs to */
+    category?: string;
+    /** Action button label */
+    actionLabel?: string;
+    /** Callback when action is triggered */
+    onAction?: () => void;
+    /** Whether the task can be skipped */
+    skippable?: boolean;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /** Reward points for completing this task */
+    points?: number;
+    /** Whether this task is required */
+    required?: boolean;
+}
+export interface ChecklistCategory {
+    /** Category identifier */
+    id: string;
+    /** Category label */
+    label: string;
+    /** Category description */
+    description?: string;
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+export interface ChecklistState {
+    /** Map of task ID to status */
+    tasks: Record<string, TaskStatus>;
+    /** Whether the checklist is collapsed */
+    collapsed: boolean;
+    /** Set of expanded task IDs */
+    expandedTasks: Set<string>;
+}
+export interface WakaChecklistProps {
+    /** Checklist identifier for localStorage persistence */
+    checklistId: string;
+    /** List of tasks */
+    tasks: ChecklistTask[];
+    /** Category definitions */
+    categories?: ChecklistCategory[];
+    /** Title of the checklist */
+    title?: string;
+    /** Subtitle/description */
+    subtitle?: string;
+    /** Show progress bar */
+    showProgress?: boolean;
+    /** Show completion percentage */
+    showPercentage?: boolean;
+    /** Enable localStorage persistence */
+    persistent?: boolean;
+    /** Show celebration on completion */
+    showCelebration?: boolean;
+    /** Callback when all tasks are completed */
+    onComplete?: () => void;
+    /** Callback when a task status changes */
+    onTaskChange?: (taskId: string, status: TaskStatus) => void;
+    /** Initially collapsed */
+    defaultCollapsed?: boolean;
+    /** Allow collapsing the checklist */
+    collapsible?: boolean;
+    /** Size variant */
+    size?: "sm" | "default" | "lg";
+    /** Custom className */
+    className?: string;
+}
+export interface UseChecklistOptions {
+    /** Checklist identifier for localStorage */
+    checklistId: string;
+    /** List of tasks */
+    tasks: ChecklistTask[];
+    /** Enable localStorage persistence */
+    persistent?: boolean;
+    /** Initially collapsed */
+    defaultCollapsed?: boolean;
+    /** Callback when all tasks are completed */
+    onComplete?: () => void;
+    /** Callback when a task status changes */
+    onTaskChange?: (taskId: string, status: TaskStatus) => void;
+}
+export interface UseChecklistReturn {
+    /** Current state of all tasks */
+    taskStates: Record<string, TaskStatus>;
+    /** Whether checklist is collapsed */
+    isCollapsed: boolean;
+    /** Set of expanded task IDs */
+    expandedTasks: Set<string>;
+    /** Mark a task as completed */
+    completeTask: (taskId: string) => void;
+    /** Skip a task */
+    skipTask: (taskId: string) => void;
+    /** Reset a task to pending */
+    resetTask: (taskId: string) => void;
+    /** Toggle task expansion */
+    toggleTaskExpanded: (taskId: string) => void;
+    /** Toggle checklist collapse */
+    toggleCollapsed: () => void;
+    /** Reset entire checklist */
+    resetChecklist: () => void;
+    /** Completion progress (0-100) */
+    progress: number;
+    /** Number of completed tasks */
+    completedCount: number;
+    /** Number of skipped tasks */
+    skippedCount: number;
+    /** Total number of tasks */
+    totalCount: number;
+    /** Whether all tasks are completed or skipped */
+    isComplete: boolean;
+    /** Get status of a specific task */
+    getTaskStatus: (taskId: string) => TaskStatus;
+}
+export declare function useChecklist({ checklistId, tasks, persistent, defaultCollapsed, onComplete, onTaskChange, }: UseChecklistOptions): UseChecklistReturn;
+export declare function WakaChecklist({ checklistId, tasks, categories, title, subtitle, showProgress, showPercentage, persistent, showCelebration, onComplete, onTaskChange, defaultCollapsed, collapsible, size, className, }: WakaChecklistProps): import("react/jsx-runtime").JSX.Element;
+export default WakaChecklist;

package/dist/components/waka-checkout-stepper/index.d.ts

@@ -0,0 +1,154 @@
+import { LucideIcon } from 'lucide-react';
+import * as React from "react";
+export type CheckoutStepId = "cart" | "shipping" | "payment" | "review" | "confirmation";
+export type CheckoutStepStatus = "pending" | "current" | "completed" | "error" | "skipped";
+export interface CheckoutStepValidation {
+    /** Whether the step is valid */
+    isValid: boolean;
+    /** Error message if invalid */
+    errorMessage?: string;
+    /** Field-level errors */
+    fieldErrors?: Record<string, string>;
+}
+export interface CheckoutStep {
+    /** Unique step identifier */
+    id: CheckoutStepId | string;
+    /** Step title */
+    title: string;
+    /** Step description */
+    description?: string;
+    /** Custom icon (optional) */
+    icon?: LucideIcon;
+    /** Step content component */
+    content?: React.ReactNode;
+    /** Whether step is optional (can be skipped) */
+    optional?: boolean;
+    /** Whether step is disabled */
+    disabled?: boolean;
+    /** Validation function for the step */
+    validate?: () => CheckoutStepValidation | Promise<CheckoutStepValidation>;
+    /** Summary data for the sidebar */
+    summary?: React.ReactNode;
+}
+export interface CheckoutStepperProps {
+    /** List of checkout steps */
+    steps: CheckoutStep[];
+    /** Current step index (0-indexed) */
+    currentStep?: number;
+    /** Callback when step changes */
+    onStepChange?: (stepIndex: number, stepId: string) => void;
+    /** Callback when checkout is completed */
+    onComplete?: () => void;
+    /** Layout orientation */
+    orientation?: "horizontal" | "vertical";
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Allow clicking on steps to navigate */
+    clickable?: boolean;
+    /** Only allow navigation to previous steps */
+    allowPreviousOnly?: boolean;
+    /** Show step content */
+    showContent?: boolean;
+    /** Show summary sidebar */
+    showSummary?: boolean;
+    /** Summary sidebar position */
+    summaryPosition?: "left" | "right";
+    /** Enable animated transitions */
+    animated?: boolean;
+    /** Animation direction */
+    animationDirection?: "slide" | "fade" | "scale";
+    /** Loading state */
+    isLoading?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Navigation labels */
+    labels?: {
+        back?: string;
+        next?: string;
+        skip?: string;
+        complete?: string;
+        processing?: string;
+    };
+}
+export interface UseCheckoutStepperOptions {
+    /** Initial step index */
+    initialStep?: number;
+    /** List of steps */
+    steps: CheckoutStep[];
+    /** Callback when step changes */
+    onStepChange?: (stepIndex: number, stepId: string) => void;
+    /** Callback when checkout completes */
+    onComplete?: () => void;
+    /** Validate before proceeding */
+    validateOnNext?: boolean;
+}
+export interface UseCheckoutStepperReturn {
+    /** Current step index */
+    currentStep: number;
+    /** Current step data */
+    currentStepData: CheckoutStep | undefined;
+    /** All steps with status */
+    stepsWithStatus: (CheckoutStep & {
+        status: CheckoutStepStatus;
+    })[];
+    /** Total number of steps */
+    totalSteps: number;
+    /** Whether on first step */
+    isFirstStep: boolean;
+    /** Whether on last step */
+    isLastStep: boolean;
+    /** Whether checkout is complete */
+    isComplete: boolean;
+    /** Whether currently validating */
+    isValidating: boolean;
+    /** Current validation error */
+    validationError: string | null;
+    /** Go to specific step */
+    goToStep: (index: number) => Promise<boolean>;
+    /** Go to next step */
+    nextStep: () => Promise<boolean>;
+    /** Go to previous step */
+    prevStep: () => void;
+    /** Skip current step (if optional) */
+    skipStep: () => void;
+    /** Complete checkout */
+    completeCheckout: () => Promise<boolean>;
+    /** Reset stepper */
+    reset: () => void;
+    /** Get step status */
+    getStepStatus: (index: number) => CheckoutStepStatus;
+    /** Skipped steps */
+    skippedSteps: Set<number>;
+    /** Mark step as completed manually */
+    markStepCompleted: (index: number) => void;
+}
+export interface CheckoutStepperContextValue extends UseCheckoutStepperReturn {
+    orientation: "horizontal" | "vertical";
+    size: "sm" | "md" | "lg";
+    clickable: boolean;
+    allowPreviousOnly: boolean;
+    animated: boolean;
+    animationDirection: "slide" | "fade" | "scale";
+    isLoading: boolean;
+}
+export declare function useCheckoutStepper({ initialStep, steps, onStepChange, onComplete, validateOnNext, }: UseCheckoutStepperOptions): UseCheckoutStepperReturn;
+export declare function useCheckoutStepperContext(): CheckoutStepperContextValue;
+export interface CheckoutNavigationProps {
+    /** Custom class name */
+    className?: string;
+    /** Custom labels */
+    labels?: {
+        back?: string;
+        next?: string;
+        skip?: string;
+        complete?: string;
+        processing?: string;
+    };
+}
+export declare function CheckoutNavigation({ className, labels, }: CheckoutNavigationProps): import("react/jsx-runtime").JSX.Element;
+export interface CheckoutProgressBarProps {
+    className?: string;
+}
+export declare function CheckoutProgressBar({ className }: CheckoutProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaCheckoutStepper({ steps, currentStep: controlledStep, onStepChange, onComplete, orientation, size, clickable, allowPreviousOnly, showContent, showSummary, summaryPosition, animated, animationDirection, isLoading, className, labels, }: CheckoutStepperProps): import("react/jsx-runtime").JSX.Element;
+export default WakaCheckoutStepper;

package/dist/components/waka-cohort-table/index.d.ts

@@ -0,0 +1,130 @@
+import * as React from "react";
+export type CohortPeriod = "day" | "week" | "month" | "quarter" | "year";
+export type CohortMetric = "retention" | "churn" | "revenue" | "engagement" | "custom";
+export interface CohortDataPoint {
+    /** Value for this period (0-100 for percentages, or raw value) */
+    value: number;
+    /** Number of users/items at this point */
+    count?: number;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+}
+export interface CohortRow {
+    /** Unique identifier for the cohort */
+    id: string;
+    /** Cohort label (e.g., "Jan 2024", "Week 1") */
+    label: string;
+    /** Cohort start date */
+    date: Date;
+    /** Initial cohort size */
+    size: number;
+    /** Data points for each period */
+    data: CohortDataPoint[];
+}
+export interface CohortColorScale {
+    /** Minimum value color (e.g., for 0% retention) */
+    min: string;
+    /** Maximum value color (e.g., for 100% retention) */
+    max: string;
+    /** Optional midpoint color for gradient */
+    mid?: string;
+    /** Midpoint value (defaults to 50) */
+    midValue?: number;
+}
+export interface CohortExportOptions {
+    /** Export format */
+    format: "csv" | "json";
+    /** Include metadata in export */
+    includeMetadata?: boolean;
+    /** Custom filename */
+    filename?: string;
+}
+export interface WakaCohortTableProps {
+    /** Cohort data rows */
+    data: CohortRow[];
+    /** Period type for columns */
+    period?: CohortPeriod;
+    /** Metric being displayed */
+    metric?: CohortMetric;
+    /** Custom metric label */
+    metricLabel?: string;
+    /** Whether to show as percentage */
+    showAsPercentage?: boolean;
+    /** Number of decimal places */
+    decimalPlaces?: number;
+    /** Color scale configuration */
+    colorScale?: CohortColorScale;
+    /** Show cohort size column */
+    showCohortSize?: boolean;
+    /** Show average row */
+    showAverageRow?: boolean;
+    /** Show trend indicators */
+    showTrends?: boolean;
+    /** Enable cell hover highlighting */
+    highlightOnHover?: boolean;
+    /** Show color scale legend */
+    showLegend?: boolean;
+    /** Enable export functionality */
+    enableExport?: boolean;
+    /** Callback when cell is clicked */
+    onCellClick?: (row: CohortRow, periodIndex: number, value: CohortDataPoint) => void;
+    /** Callback when export is triggered */
+    onExport?: (options: CohortExportOptions) => void;
+    /** Custom cell renderer */
+    renderCell?: (value: CohortDataPoint, row: CohortRow, periodIndex: number) => React.ReactNode;
+    /** Custom tooltip renderer */
+    renderTooltip?: (value: CohortDataPoint, row: CohortRow, periodIndex: number) => React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Table className */
+    tableClassName?: string;
+    /** Header cell className */
+    headerClassName?: string;
+    /** Body cell className */
+    cellClassName?: string;
+}
+export declare function WakaCohortTable({ data, period, metric, metricLabel, showAsPercentage, decimalPlaces, colorScale, showCohortSize, showAverageRow, showTrends, highlightOnHover, showLegend, enableExport, onCellClick, onExport, renderCell, renderTooltip, className, tableClassName, headerClassName, cellClassName, }: WakaCohortTableProps): import("react/jsx-runtime").JSX.Element;
+export interface UseCohortTableOptions {
+    /** Initial cohort data */
+    initialData?: CohortRow[];
+    /** Default period type */
+    defaultPeriod?: CohortPeriod;
+    /** Default metric */
+    defaultMetric?: CohortMetric;
+}
+export interface CohortStatistics {
+    /** Total number of cohorts */
+    totalCohorts: number;
+    /** Total users across all cohorts */
+    totalUsers: number;
+    /** Average initial cohort size */
+    averageCohortSize: number;
+    /** Average retention at each period */
+    averageRetentionByPeriod: number[];
+    /** Overall average retention */
+    overallAverageRetention: number;
+    /** Best performing cohort */
+    bestCohort: CohortRow | null;
+    /** Worst performing cohort */
+    worstCohort: CohortRow | null;
+}
+export declare function useCohortTable({ initialData, defaultPeriod, defaultMetric, }?: UseCohortTableOptions): {
+    data: CohortRow[];
+    period: CohortPeriod;
+    metric: CohortMetric;
+    selectedCohort: string | null;
+    statistics: CohortStatistics;
+    setData: React.Dispatch<React.SetStateAction<CohortRow[]>>;
+    setPeriod: React.Dispatch<React.SetStateAction<CohortPeriod>>;
+    setMetric: React.Dispatch<React.SetStateAction<CohortMetric>>;
+    setSelectedCohort: React.Dispatch<React.SetStateAction<string | null>>;
+    addCohort: (cohort: CohortRow) => void;
+    updateCohort: (id: string, updates: Partial<CohortRow>) => void;
+    removeCohort: (id: string) => void;
+    updateDataPoint: (cohortId: string, periodIndex: number, value: Partial<CohortDataPoint>) => void;
+    sortCohorts: (sortBy: "date" | "size" | "retention", order?: "asc" | "desc") => void;
+    filterByDateRange: (startDate: Date, endDate: Date) => CohortRow[];
+    getCohortById: (id: string) => CohortRow | undefined;
+    reset: () => void;
+};
+export default WakaCohortTable;

package/dist/components/waka-combo-counter/index.d.ts

@@ -0,0 +1,53 @@
+export interface WakaComboCounterProps {
+    /** Current combo count */
+    combo: number;
+    /** Current multiplier (e.g., 2 for x2) */
+    multiplier?: number;
+    /** Maximum multiplier cap */
+    maxMultiplier?: number;
+    /** Time remaining to maintain combo (0-100 percentage) */
+    timeRemaining?: number;
+    /** Callback when combo breaks (timer runs out) */
+    onComboBreak?: () => void;
+    /** Milestone numbers to celebrate */
+    milestones?: number[];
+    /** Callback when a milestone is reached */
+    onMilestone?: (milestone: number) => void;
+    /** Size variant */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** Show the timer bar */
+    showTimer?: boolean;
+    /** Show the multiplier badge */
+    showMultiplier?: boolean;
+    /** Visual intensity level */
+    intensity?: "low" | "medium" | "high" | "extreme";
+    /** Enable animations */
+    animated?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Sound effect hooks */
+    onPlayIncrementSound?: () => void;
+    onPlayMilestoneSound?: () => void;
+    onPlayBreakSound?: () => void;
+}
+export declare function WakaComboCounter({ combo, multiplier, maxMultiplier, timeRemaining, onComboBreak, milestones, onMilestone, size, showTimer, showMultiplier, intensity, animated, className, onPlayIncrementSound, onPlayMilestoneSound, onPlayBreakSound, }: WakaComboCounterProps): import("react/jsx-runtime").JSX.Element;
+export interface UseComboCounterOptions {
+    initialCombo?: number;
+    initialMultiplier?: number;
+    maxMultiplier?: number;
+    timerDuration?: number;
+    multiplierThresholds?: number[];
+    autoDecay?: boolean;
+    decayRate?: number;
+}
+export interface UseComboCounterReturn {
+    combo: number;
+    multiplier: number;
+    timeRemaining: number;
+    increment: (amount?: number) => void;
+    reset: () => void;
+    pause: () => void;
+    resume: () => void;
+    isPaused: boolean;
+}
+export declare function useComboCounter({ initialCombo, initialMultiplier, maxMultiplier, timerDuration, multiplierThresholds, autoDecay, decayRate, }?: UseComboCounterOptions): UseComboCounterReturn;

package/dist/components/waka-command-bar/index.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+export interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    shortcut?: string[];
+    category?: string;
+    action?: () => void;
+    href?: string;
+    keywords?: string[];
+}
+export interface CommandCategory {
+    id: string;
+    label: string;
+    items: CommandItem[];
+}
+export interface WakaCommandBarProps {
+    /** Whether the command bar is open */
+    open: boolean;
+    /** Callback when open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Command items or categories */
+    items: CommandItem[] | CommandCategory[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Called when an item is selected */
+    onSelect?: (item: CommandItem) => void;
+    /** Custom empty state */
+    emptyMessage?: string;
+    /** Show recent items */
+    recentItems?: CommandItem[];
+    /** Custom footer content */
+    footer?: React.ReactNode;
+    /** Keyboard shortcut to open (default: cmd+k) */
+    shortcut?: string[];
+}
+export declare function WakaCommandBar({ open, onOpenChange, items, placeholder, onSelect, emptyMessage, recentItems, footer, shortcut, }: WakaCommandBarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function useCommandBar(): {
+    open: boolean;
+    onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+    openCommandBar: () => void;
+    closeCommandBar: () => void;
+    toggleCommandBar: () => void;
+};

package/dist/components/waka-compare-period/index.d.ts

@@ -0,0 +1,122 @@
+import * as React from "react";
+export type PeriodPreset = "last_week" | "last_month" | "last_quarter" | "last_year" | "custom";
+export type TrendDirection = "up" | "down" | "neutral";
+export interface PeriodRange {
+    /** Start date of the period */
+    start: Date;
+    /** End date of the period */
+    end: Date;
+    /** Optional label for display */
+    label?: string;
+}
+export interface MetricValue {
+    /** Current period value */
+    current: number;
+    /** Previous period value */
+    previous: number;
+}
+export interface Metric {
+    /** Unique identifier for the metric */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Metric values for current and previous periods */
+    value: MetricValue;
+    /** Format function for displaying the value */
+    format?: (value: number) => string;
+    /** Unit suffix (e.g., "%", "k", "ms") */
+    unit?: string;
+    /** Invert trend colors (lower is better) */
+    invertTrend?: boolean;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /** Color theme for the metric */
+    color?: "default" | "blue" | "green" | "purple" | "orange" | "red";
+}
+export interface ComparePeriodSummary {
+    /** Total metrics improving */
+    improving: number;
+    /** Total metrics declining */
+    declining: number;
+    /** Total metrics unchanged */
+    unchanged: number;
+    /** Average percentage change */
+    averageChange: number;
+    /** Best performing metric ID */
+    bestMetricId?: string;
+    /** Worst performing metric ID */
+    worstMetricId?: string;
+}
+export interface WakaComparePeriodProps {
+    /** Array of metrics to compare */
+    metrics: Metric[];
+    /** Current period range */
+    currentPeriod: PeriodRange;
+    /** Previous period range */
+    previousPeriod: PeriodRange;
+    /** Selected period preset */
+    periodPreset?: PeriodPreset;
+    /** Callback when period preset changes */
+    onPeriodChange?: (preset: PeriodPreset, current: PeriodRange, previous: PeriodRange) => void;
+    /** Show period selector dropdown */
+    showPeriodSelector?: boolean;
+    /** Show visual comparison bars */
+    showComparisonBars?: boolean;
+    /** Show summary statistics */
+    showSummary?: boolean;
+    /** Enable animated value transitions */
+    animated?: boolean;
+    /** Layout variant */
+    variant?: "grid" | "list" | "compact";
+    /** Number of columns for grid layout */
+    columns?: 2 | 3 | 4;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function WakaComparePeriod({ metrics, currentPeriod, previousPeriod, periodPreset, onPeriodChange, showPeriodSelector, showComparisonBars, showSummary, animated, variant, columns, className, }: WakaComparePeriodProps): import("react/jsx-runtime").JSX.Element;
+export interface UseComparePeriodOptions {
+    /** Initial period preset */
+    initialPreset?: PeriodPreset;
+    /** Initial metrics data */
+    initialMetrics?: Metric[];
+    /** Reference date for calculations */
+    referenceDate?: Date;
+    /** Auto-refresh interval in milliseconds */
+    autoRefreshInterval?: number;
+    /** Callback to fetch new metric data */
+    onRefresh?: () => Promise<Metric[]>;
+}
+export interface UseComparePeriodReturn {
+    /** Current period preset */
+    preset: PeriodPreset;
+    /** Current period range */
+    currentPeriod: PeriodRange;
+    /** Previous period range */
+    previousPeriod: PeriodRange;
+    /** Metrics array */
+    metrics: Metric[];
+    /** Calculated summary */
+    summary: ComparePeriodSummary;
+    /** Loading state */
+    isLoading: boolean;
+    /** Error state */
+    error: Error | null;
+    /** Set period preset */
+    setPreset: (preset: PeriodPreset) => void;
+    /** Set custom period ranges */
+    setCustomPeriods: (current: PeriodRange, previous: PeriodRange) => void;
+    /** Update metrics data */
+    setMetrics: React.Dispatch<React.SetStateAction<Metric[]>>;
+    /** Update a single metric */
+    updateMetric: (id: string, value: MetricValue) => void;
+    /** Trigger manual refresh */
+    refresh: () => Promise<void>;
+    /** Get change for a specific metric */
+    getMetricChange: (id: string) => {
+        percentage: number;
+        absolute: number;
+        direction: TrendDirection;
+    } | null;
+}
+export declare function useComparePeriod(options?: UseComparePeriodOptions): UseComparePeriodReturn;
+export default WakaComparePeriod;