flikkui 0.1.0-beta.2

package/dist/_virtual/jsx-runtime.js

@@ -0,0 +1,5 @@
+import { __require as requireJsxRuntime } from '../node_modules/react/jsx-runtime.js';
+
+var jsxRuntimeExports = requireJsxRuntime();
+
+export { jsxRuntimeExports as j };

package/dist/_virtual/jsx-runtime2.js

@@ -0,0 +1,3 @@
+var jsxRuntime = {exports: {}};
+
+export { jsxRuntime as __module };

package/dist/_virtual/react-jsx-runtime.development.js

@@ -0,0 +1,3 @@
+var reactJsxRuntime_development = {};
+
+export { reactJsxRuntime_development as __exports };

package/dist/_virtual/react-jsx-runtime.production.js

@@ -0,0 +1,3 @@
+var reactJsxRuntime_production = {};
+
+export { reactJsxRuntime_production as __exports };

package/dist/components/charts/AreaChart/AreaChart.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { AreaChartProps } from "./AreaChart.types";
+export declare const AreaChart: React.FC<AreaChartProps>;

package/dist/components/charts/AreaChart/AreaChart.types.d.ts

@@ -0,0 +1,32 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps } from '../types/chart.types';
+export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps {
+    radius?: number;
+    strokeWidth?: number;
+    curved?: boolean;
+    curveType?: 'linear' | 'monotone';
+    showDots?: boolean;
+    fillOpacity?: number;
+    showStroke?: boolean;
+    stacked?: boolean;
+}
+export declare const AREA_CHART_DEFAULTS: {
+    readonly radius: 4;
+    readonly strokeWidth: 2;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly showDots: true;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly stacked: false;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly showNullValues: true;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly orientation: "vertical" | "horizontal";
+    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};
+export type AreaChartData = BaseChartProps['data'][0];
+export type AreaChartConfig = BaseChartProps['config'];

package/dist/components/charts/AreaChart/index.d.ts

@@ -0,0 +1,2 @@
+export { AreaChart } from './AreaChart';
+export type { AreaChartProps, AreaChartData, AreaChartConfig } from './AreaChart.types';

package/dist/components/charts/BarChart/BarChart.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { BarChartProps } from "./BarChart.types";
+export declare const BarChart: React.FC<BarChartProps>;

package/dist/components/charts/BarChart/BarChart.types.d.ts

@@ -0,0 +1,26 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps } from '../types/chart.types';
+export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
+    radius?: number;
+    gap?: number;
+    categoryGap?: number;
+}
+export declare const BAR_CHART_DEFAULTS: {
+    readonly radius: 12;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly orientation: "horizontal" | "vertical";
+    readonly stacked: false;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly showNullValues: true;
+    readonly strokeWidth: 2;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly showDots: true;
+    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};
+export type BarChartData = BaseChartProps['data'][0];

package/dist/components/charts/BarChart/index.d.ts

@@ -0,0 +1,2 @@
+export { BarChart } from './BarChart';
+export type { BarChartProps } from './BarChart.types';

package/dist/components/charts/ChartContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ChartContainerProps, ChartConfig } from './types/chart.types';
+interface ChartContextValue {
+    data: any[];
+    config: ChartConfig;
+}
+export declare function useChart(): ChartContextValue;
+export declare function ChartContainer({ data, config, className, children, minHeight, width, height, ...props }: ChartContainerProps): React.JSX.Element;
+export {};

package/dist/components/charts/DonutChart/DonutChart.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { DonutChartProps } from "./DonutChart.types";
+/**
+ * DonutChart component for displaying a percentage value with a circular progress indicator
+ * Supports customization of size, thickness, animations, and theming
+ */
+export declare const DonutChart: React.FC<DonutChartProps>;

package/dist/components/charts/DonutChart/DonutChart.theme.d.ts

@@ -0,0 +1,164 @@
+import { DonutChartThemeOverrides } from "./DonutChart.types";
+/**
+ * Default theme for the DonutChart component
+ */
+export declare const donutChartTheme: DonutChartThemeOverrides;
+/**
+ * Pre-defined color schemes for quick customization
+ */
+export declare const donutChartColorSchemes: {
+    readonly default: {
+        readonly from: "#3b82f6";
+        readonly to: "#10b981";
+    };
+    readonly success: {
+        readonly primary: "#10b981";
+    };
+    readonly warning: {
+        readonly primary: "#f59e0b";
+    };
+    readonly error: {
+        readonly primary: "#ef4444";
+    };
+    readonly purple: {
+        readonly from: "#8b5cf6";
+        readonly to: "#ec4899";
+    };
+    readonly ocean: {
+        readonly from: "#0ea5e9";
+        readonly to: "#06b6d4";
+    };
+    readonly sunset: {
+        readonly from: "#f97316";
+        readonly to: "#ef4444";
+    };
+    readonly forest: {
+        readonly from: "#22c55e";
+        readonly to: "#16a34a";
+    };
+    readonly cosmic: {
+        readonly from: "#6366f1";
+        readonly to: "#8b5cf6";
+    };
+    readonly monochrome: {
+        readonly primary: "#6b7280";
+    };
+    readonly highContrast: {
+        readonly primary: "#000000";
+    };
+    readonly brand: {
+        readonly from: "#3b82f6";
+        readonly to: "#1d4ed8";
+    };
+};
+/**
+ * Size presets for common use cases
+ */
+export declare const donutChartSizes: {
+    readonly xs: 120;
+    readonly sm: 160;
+    readonly md: 200;
+    readonly lg: 280;
+    readonly xl: 360;
+    readonly "2xl": 480;
+};
+/**
+ * Thickness presets
+ */
+export declare const donutChartThickness: {
+    readonly thin: 1;
+    readonly normal: 2;
+    readonly thick: 3;
+    readonly bold: 4;
+    readonly extraBold: 6;
+};
+/**
+ * Animation presets for different use cases
+ */
+export declare const donutChartAnimations: {
+    readonly none: {
+        readonly enabled: false;
+    };
+    readonly quick: {
+        readonly enabled: true;
+        readonly duration: 0.6;
+        readonly delay: 0.1;
+        readonly stiffness: 120;
+        readonly damping: 25;
+    };
+    readonly smooth: {
+        readonly enabled: true;
+        readonly duration: 1.2;
+        readonly delay: 0.2;
+        readonly stiffness: 80;
+        readonly damping: 20;
+    };
+    readonly bouncy: {
+        readonly enabled: true;
+        readonly duration: 1.5;
+        readonly delay: 0.2;
+        readonly stiffness: 60;
+        readonly damping: 15;
+    };
+    readonly reveal: {
+        readonly enabled: true;
+        readonly duration: 2;
+        readonly delay: 0.5;
+        readonly stiffness: 50;
+        readonly damping: 25;
+    };
+};
+/**
+ * Utility function to create custom color schemes
+ */
+export declare const createColorScheme: (colors: {
+    primary?: string;
+    from?: string;
+    to?: string;
+}) => {
+    primary?: string;
+    from?: string;
+    to?: string;
+};
+/**
+ * Utility function to get color scheme by name
+ */
+export declare const getColorScheme: (name: keyof typeof donutChartColorSchemes) => {
+    readonly from: "#3b82f6";
+    readonly to: "#10b981";
+} | {
+    readonly primary: "#10b981";
+} | {
+    readonly primary: "#f59e0b";
+} | {
+    readonly primary: "#ef4444";
+} | {
+    readonly from: "#8b5cf6";
+    readonly to: "#ec4899";
+} | {
+    readonly from: "#0ea5e9";
+    readonly to: "#06b6d4";
+} | {
+    readonly from: "#f97316";
+    readonly to: "#ef4444";
+} | {
+    readonly from: "#22c55e";
+    readonly to: "#16a34a";
+} | {
+    readonly from: "#6366f1";
+    readonly to: "#8b5cf6";
+} | {
+    readonly primary: "#6b7280";
+} | {
+    readonly primary: "#000000";
+} | {
+    readonly from: "#3b82f6";
+    readonly to: "#1d4ed8";
+};
+/**
+ * Type definitions for exported constants
+ */
+export type DonutChartColorScheme = keyof typeof donutChartColorSchemes;
+export type DonutChartSize = keyof typeof donutChartSizes;
+export type DonutChartThickness = keyof typeof donutChartThickness;
+export type DonutChartAnimation = keyof typeof donutChartAnimations;

package/dist/components/charts/DonutChart/DonutChart.types.d.ts

@@ -0,0 +1,113 @@
+import React from "react";
+import { HTMLMotionProps } from "motion/react";
+/**
+ * Color configuration for the donut chart
+ */
+export interface DonutChartColors {
+    /** Primary color for solid color mode */
+    primary?: string;
+    /** Gradient start color */
+    from?: string;
+    /** Gradient end color */
+    to?: string;
+}
+/**
+ * Theme overrides for the DonutChart component
+ */
+export interface DonutChartThemeOverrides {
+    /** Base style for the container */
+    baseStyle?: string;
+    /** Track (background circle) styling */
+    track?: string;
+    /** Progress arc styling */
+    progress?: string;
+    /** Text styling */
+    text?: {
+        /** Main label styling */
+        label?: string;
+        /** Subtitle styling */
+        subtitle?: string;
+    };
+    /** Default colors */
+    colors?: {
+        /** Default primary color */
+        primary?: string;
+        /** Default secondary color for gradients */
+        secondary?: string;
+        /** Track color */
+        track?: string;
+    };
+}
+/**
+ * DonutChart component props
+ */
+export interface DonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+    /**
+     * Percentage value to display (0-100)
+     * Values outside this range will be clamped
+     */
+    percentage: number;
+    /**
+     * Custom label to display in center
+     * If not provided, will show percentage with % symbol
+     */
+    label?: React.ReactNode;
+    /**
+     * Subtitle text to display below the main label
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Size of the donut chart
+     * Can be a number (pixels) or CSS size string
+     * @default 200
+     */
+    size?: number | string;
+    /**
+     * Thickness of the donut stroke
+     * Progress arc will be 2x this thickness
+     * @default 2
+     */
+    thickness?: number;
+    /**
+     * Whether to show entrance animation
+     * @default true
+     */
+    showAnimation?: boolean;
+    /**
+     * Color configuration for the chart
+     */
+    colors?: DonutChartColors;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: DonutChartThemeOverrides;
+    /**
+     * Additional content to display in the center
+     * Will be rendered below the label and subtitle
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Default theme configuration
+ */
+export interface DonutChartTheme extends Required<DonutChartThemeOverrides> {
+}
+/**
+ * Animation configuration (internal use)
+ */
+export interface DonutChartAnimationConfig {
+    /** Whether animations are enabled */
+    enabled: boolean;
+    /** Animation duration in seconds */
+    duration: number;
+    /** Animation delay in seconds */
+    delay: number;
+    /** Spring animation stiffness */
+    stiffness: number;
+    /** Spring animation damping */
+    damping: number;
+}

package/dist/components/charts/Heatmap/Heatmap.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { HeatmapProps } from './Heatmap.types';
+/**
+ * Heatmap component for visualizing data in a grid format with color intensity
+ * Supports weekly, monthly, hourly views and custom data structures
+ */
+export declare const Heatmap: React.FC<HeatmapProps>;

package/dist/components/charts/Heatmap/Heatmap.types.d.ts

@@ -0,0 +1,151 @@
+import { ReactNode } from 'react';
+import { BaseChartProps, ChartConfig } from '../types/chart.types';
+/**
+ * Heatmap data point structure
+ * @property {string | number} x - X-axis category (e.g., day, month, hour)
+ * @property {string | number} y - Y-axis category (e.g., week, year, metric)
+ * @property {number | null} value - Numeric value for color intensity
+ * @property {any} [key] - Additional data for tooltips
+ */
+export interface HeatmapDataPoint {
+    x: string | number;
+    y: string | number;
+    value: number | null;
+    [key: string]: any;
+}
+/**
+ * Heatmap cell props
+ */
+export interface HeatmapCellProps {
+    data: HeatmapDataPoint;
+    intensity: number;
+    minOpacity?: number;
+    color?: string;
+    className?: string;
+    onClick?: (data: HeatmapDataPoint) => void;
+    onHover?: (data: HeatmapDataPoint, event: React.MouseEvent) => void;
+    onMouseMove?: (data: HeatmapDataPoint, event: React.MouseEvent) => void;
+    onLeave?: () => void;
+    children?: ReactNode;
+}
+/**
+ * Color scale configuration
+ */
+export interface HeatmapColorScale {
+    /** Custom color steps from light to dark */
+    colors?: string[];
+    /** Number of color steps (default: 10) */
+    steps?: number;
+    /** Minimum opacity for null/zero values */
+    minOpacity?: number;
+}
+/**
+ * Heatmap layout configuration
+ */
+export interface HeatmapLayout {
+    /** Gap between cells */
+    gap?: number | string;
+    /** Minimum cell size in pixels */
+    minCellSize?: number;
+    /** Maximum cell size in pixels */
+    maxCellSize?: number;
+}
+/**
+ * Heatmap axis configuration
+ */
+export interface HeatmapAxisConfig {
+    /** Show X-axis labels */
+    showXAxis?: boolean;
+    /** Show Y-axis labels */
+    showYAxis?: boolean;
+    /** X-axis label formatter */
+    xAxisFormatter?: (value: string | number, index: number) => string;
+    /** Y-axis label formatter */
+    yAxisFormatter?: (value: string | number, index: number) => string;
+    /** X-axis label rotation */
+    xAxisRotation?: number;
+    /** Y-axis label rotation */
+    yAxisRotation?: number;
+}
+/**
+ * Heatmap tooltip configuration
+ */
+export interface HeatmapTooltipConfig {
+    /** Show tooltip on hover */
+    enabled?: boolean;
+    /** Custom tooltip formatter */
+    formatter?: (data: HeatmapDataPoint) => ReactNode;
+    /** Tooltip delay in ms */
+    delay?: number;
+}
+/**
+ * Heatmap legend configuration
+ */
+export interface HeatmapLegendConfig {
+    /** Show legend */
+    enabled?: boolean;
+    /** Custom labels for min and max values */
+    labels?: {
+        min?: string;
+        max?: string;
+    };
+}
+/**
+ * Main Heatmap component props
+ */
+export interface HeatmapProps extends Omit<BaseChartProps, 'data' | 'config'> {
+    /** Heatmap data array - optional when using ChartContainer context */
+    data?: HeatmapDataPoint[];
+    /** Chart configuration - optional when using ChartContainer context */
+    config?: ChartConfig;
+    /** Color scale configuration */
+    colorScale?: HeatmapColorScale;
+    /** Layout configuration */
+    layout?: HeatmapLayout;
+    /** Axis configuration */
+    axis?: HeatmapAxisConfig;
+    /** Tooltip configuration */
+    tooltip?: HeatmapTooltipConfig;
+    /** Legend configuration */
+    legend?: HeatmapLegendConfig;
+    /** Custom value range [min, max] - if not provided, will be calculated from data */
+    valueRange?: [number, number];
+    /** Handle null/missing values */
+    showNullValues?: boolean;
+    /** Cell click handler */
+    onCellClick?: (data: HeatmapDataPoint) => void;
+    /** Custom cell renderer */
+    cellRenderer?: (props: HeatmapCellProps) => ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Chart variant */
+    variant?: 'default' | 'minimal' | 'bordered';
+}
+/**
+ * Processed heatmap data with calculated values
+ */
+export interface ProcessedHeatmapData {
+    data: HeatmapDataPoint[];
+    xCategories: (string | number)[];
+    yCategories: (string | number)[];
+    valueRange: [number, number];
+    maxValue: number;
+    minValue: number;
+}
+/**
+ * Heatmap theme configuration
+ */
+export interface HeatmapTheme {
+    colors: {
+        primary: string[];
+        secondary: string[];
+        neutral: string[];
+    };
+    spacing: {
+        gap: string;
+        padding: string;
+    };
+    transitions: {
+        hover: string;
+    };
+}

package/dist/components/charts/Heatmap/HeatmapCell.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { HeatmapCellProps } from './Heatmap.types';
+/**
+ * Individual heatmap cell component with hover animations and color intensity
+ */
+export declare const HeatmapCell: React.FC<HeatmapCellProps>;

package/dist/components/charts/Heatmap/HeatmapLegend.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface HeatmapLegendProps {
+    /** Base color key from chart config (e.g., 'value', 'activity') */
+    colorKey?: string;
+    /** Color to use for the gradient */
+    color?: string;
+    /** Minimum value for the legend */
+    minValue?: number;
+    /** Maximum value for the legend */
+    maxValue?: number;
+    /** Custom labels for min and max */
+    labels?: {
+        min?: string;
+        max?: string;
+    };
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const HeatmapLegend: React.FC<HeatmapLegendProps>;
+export default HeatmapLegend;

package/dist/components/charts/Heatmap/index.d.ts

@@ -0,0 +1,6 @@
+export { Heatmap } from './Heatmap';
+export { HeatmapCell } from './HeatmapCell';
+export { HeatmapLegend } from './HeatmapLegend';
+export type { HeatmapProps, HeatmapDataPoint, HeatmapCellProps } from './Heatmap.types';
+export * from './Heatmap.types';
+export * from './utils/heatmapUtils';

package/dist/components/charts/Heatmap/utils/heatmapUtils.d.ts

@@ -0,0 +1,30 @@
+import type { HeatmapDataPoint, ProcessedHeatmapData } from '../Heatmap.types';
+/**
+ * Process raw heatmap data and calculate necessary values
+ */
+export declare function processHeatmapData(data: HeatmapDataPoint[], valueRange?: [number, number]): ProcessedHeatmapData;
+/**
+ * Calculate intensity (0-1) for a given value within the range
+ */
+export declare function calculateIntensity(value: number | null, minValue: number, maxValue: number): number;
+/**
+ * Create a complete grid matrix with all x,y combinations
+ * Fills missing data points with null values
+ */
+export declare function createGridMatrix(data: HeatmapDataPoint[], xCategories: (string | number)[], yCategories: (string | number)[]): HeatmapDataPoint[][];
+/**
+ * Generate default tooltip content for a data point
+ */
+export declare function getDefaultTooltipContent(data: HeatmapDataPoint): string;
+/**
+ * Format axis labels with common patterns
+ */
+export declare function formatAxisLabel(value: string | number, type?: 'day' | 'month' | 'hour' | 'date' | 'number' | 'default'): string;
+/**
+ * Calculate responsive cell size based on container dimensions
+ */
+export declare function calculateCellSize(containerWidth: number, containerHeight: number, xCount: number, yCount: number, gap?: number, minSize?: number, maxSize?: number): number;
+/**
+ * Generate sample heatmap data for testing/examples
+ */
+export declare function generateSampleData(type?: 'weekly' | 'monthly' | 'hourly'): HeatmapDataPoint[];

package/dist/components/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { LineChartProps } from "./LineChart.types";
+export declare const LineChart: React.FC<LineChartProps>;

package/dist/components/charts/LineChart/LineChart.types.d.ts

@@ -0,0 +1,27 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps } from '../types/chart.types';
+export interface LineChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps {
+    radius?: number;
+    strokeWidth?: number;
+    curved?: boolean;
+    curveType?: 'linear' | 'monotone';
+    showDots?: boolean;
+}
+export declare const LINE_CHART_DEFAULTS: {
+    readonly radius: 4;
+    readonly strokeWidth: 2;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly showDots: true;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly showNullValues: true;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly orientation: "vertical" | "horizontal";
+    readonly stacked: false;
+    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};

package/dist/components/charts/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from './LineChart';
+export type { LineChartProps } from './LineChart.types';

package/dist/components/charts/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useChartTheme } from './useChartTheme';
+export { useChartAccessibility } from './useChartAccessibility';
+export { useTooltipPosition } from './useTooltipPosition';
+export { useChartValidation, useChartDataValidation, useChartValidationProduction } from './useChartValidation';