flikkui 0.1.0-beta.11

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

@@ -0,0 +1,4 @@
+export { ActivityRings } from './ActivityRings';
+export type { ActivityRingsProps, RingData, ActivityRingsThemeOverrides } from './ActivityRings.types';
+export { activityRingsTheme } from './ActivityRings.theme';
+export { ACTIVITY_RINGS_DEFAULTS } from './ActivityRings.types';

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.theme.d.ts

@@ -0,0 +1,24 @@
+/**
+ * AreaChart theme configuration
+ * Uses production-ready CSS variables from global.scss
+ *
+ * Note: Color cycling and gradients are handled inline in component
+ * This theme focuses on container, SVG, and interactive styling
+ */
+export interface AreaChartTheme {
+    containerStyle: string;
+    svgStyle: string;
+    areaGroupStyle: string;
+    emptyStateStyle: string;
+}
+export declare const areaChartTheme: AreaChartTheme;
+/**
+ * Get series color class for stroke and fill
+ * Uses semantic color CSS variables in production-ready format
+ */
+export declare const getSeriesColorClass: (index: number) => string;
+/**
+ * Get fill color for SVG gradients
+ * Returns CSS variable value directly for stopColor attribute
+ */
+export declare const getSeriesFillColor: (index: number) => string;

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

@@ -0,0 +1,39 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps } from '../types/chart.types';
+export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps {
+    dotRadius?: number;
+    radius?: number;
+    strokeWidth?: number;
+    curved?: boolean;
+    showDots?: boolean;
+    fillOpacity?: number;
+    showStroke?: boolean;
+    stacked?: boolean;
+    svgClassName?: string;
+    areaClassName?: string;
+    lineClassName?: string;
+    gridClassName?: string;
+    axisClassName?: string;
+}
+export declare const AREA_CHART_DEFAULTS: {
+    readonly dotRadius: 4;
+    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 barRadius: 32;
+    readonly cellRadius: 4;
+    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,4 @@
+export { AreaChart } from './AreaChart';
+export type { AreaChartProps, AreaChartData, AreaChartConfig } from './AreaChart.types';
+export { areaChartTheme, getSeriesColorClass, getSeriesFillColor } from './AreaChart.theme';
+export type { AreaChartTheme } from './AreaChart.theme';

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,35 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps } from '../types/chart.types';
+export interface BarChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps, BarChartSpecificProps {
+    barRadius?: number;
+    radius?: number;
+    gap?: number;
+    categoryGap?: number;
+    showAnimation?: boolean;
+    showPlaceholderBars?: boolean;
+    placeholderData?: BaseChartProps['data'];
+    showValidationWarnings?: boolean;
+}
+export declare const BAR_CHART_DEFAULTS: {
+    readonly barRadius: 32;
+    readonly radius: 32;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly orientation: "horizontal" | "vertical";
+    readonly stacked: false;
+    readonly showAnimation: true;
+    readonly showPlaceholderBars: false;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly dotRadius: 4;
+    readonly cellRadius: 4;
+    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/ComboChart/ComboChart.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ComboChartProps } from "./ComboChart.types";
+/**
+ * ComboChart Component
+ *
+ * Combines bar and line series in a single chart.
+ * Now uses composed BarRenderer and LineRenderer instead of duplicating code.
+ */
+export declare const ComboChart: React.FC<ComboChartProps>;

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

@@ -0,0 +1,7 @@
+import { ChartThemeOverrides } from '../types/chart.types';
+/**
+ * ComboChart Theme Configuration
+ *
+ * Follows the established chart theming pattern with CSS variables
+ */
+export declare const comboChartTheme: ChartThemeOverrides;

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

@@ -0,0 +1,51 @@
+import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, ChartConfig } from '../types/chart.types';
+/**
+ * Series type for combo chart
+ */
+export type SeriesType = 'bar' | 'line';
+/**
+ * Extended chart config that includes series type information
+ */
+export interface ComboChartConfig extends ChartConfig {
+    [key: string]: {
+        label?: string;
+        color?: string;
+        theme?: string;
+        type?: SeriesType;
+        yAxis?: 'left' | 'right';
+    };
+}
+/**
+ * ComboChart props - extends standard chart interfaces
+ */
+export interface ComboChartProps extends BaseChartProps, StandardChartDisplayProps, Omit<StandardVisualProps, 'curved' | 'curveType' | 'showDots'> {
+    config: ComboChartConfig;
+    curved?: boolean;
+    curveType?: 'linear' | 'monotone';
+    showDots?: boolean;
+    categoryGap?: number;
+    showDualAxis?: boolean;
+    showValidationWarnings?: boolean;
+}
+export declare const COMBO_CHART_DEFAULTS: {
+    readonly barRadius: 32;
+    readonly dotRadius: 4;
+    readonly categoryGap: 16;
+    readonly curved: true;
+    readonly curveType: import("../types/chart.types").CurveType;
+    readonly showDots: true;
+    readonly showDualAxis: false;
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly cellRadius: 4;
+    readonly radius: 20;
+    readonly strokeWidth: 2;
+    readonly gap: 4;
+    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/ComboChart/index.d.ts

@@ -0,0 +1,4 @@
+export { ComboChart } from './ComboChart';
+export type { ComboChartProps, ComboChartConfig, SeriesType } from './ComboChart.types';
+export { comboChartTheme } from './ComboChart.theme';
+export { COMBO_CHART_DEFAULTS } from './ComboChart.types';

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,127 @@
+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;
+};
+/**
+ * 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;

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

@@ -0,0 +1,129 @@
+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"> {
+    /**
+     * Visual variant for the donut chart (solid or segmented)
+     * @default "solid"
+     */
+    variant?: "solid" | "segmented";
+    /**
+     * 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;
+    /**
+     * Total number of segments when using the segmented variant
+     * @default 32
+     */
+    segmentCount?: number;
+    /**
+     * Fraction of each segment kept empty to create spacing (0-0.8)
+     * Only applies to the segmented variant
+     * @default 0.35
+     */
+    segmentGap?: 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/DonutChart/MultiSegmentDonutChart.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { MultiSegmentDonutChartProps } from "./MultiSegmentDonutChart.types";
+/**
+ * MultiSegmentDonutChart component for displaying multiple data values in a circular chart
+ * Each segment represents a different data point with its own value and optional color
+ */
+export declare const MultiSegmentDonutChart: React.FC<MultiSegmentDonutChartProps>;

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

@@ -0,0 +1,50 @@
+import { MultiSegmentDonutChartThemeOverrides } from "./MultiSegmentDonutChart.types";
+/**
+ * Default theme for the MultiSegmentDonutChart component
+ */
+export declare const multiSegmentDonutChartTheme: MultiSegmentDonutChartThemeOverrides;
+/**
+ * Pre-defined color palettes for quick customization
+ */
+export declare const multiSegmentColorPalettes: {
+    readonly default: readonly ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16"];
+    readonly pastel: readonly ["#93c5fd", "#86efac", "#fde68a", "#fca5a5", "#c4b5fd", "#f9a8d4", "#a5f3fc", "#d9f99d"];
+    readonly blues: readonly ["#dbeafe", "#bfdbfe", "#93c5fd", "#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8", "#1e40af"];
+    readonly warm: readonly ["#fef3c7", "#fcd34d", "#f59e0b", "#f97316", "#ef4444", "#dc2626", "#b91c1c", "#991b1b"];
+    readonly cool: readonly ["#cffafe", "#a5f3fc", "#22d3ee", "#06b6d4", "#0891b2", "#0e7490", "#155e75", "#164e63"];
+    readonly earth: readonly ["#d6d3d1", "#a8a29e", "#78716c", "#57534e", "#44403c", "#292524", "#1c1917", "#0c0a09"];
+    readonly neon: readonly ["#fbbf24", "#facc15", "#84cc16", "#22c55e", "#14b8a6", "#06b6d4", "#0ea5e9", "#3b82f6"];
+    readonly professional: readonly ["#1e40af", "#0369a1", "#047857", "#65a30d", "#ca8a04", "#dc2626", "#9333ea", "#be123c"];
+    readonly highContrast: readonly ["#000000", "#dc2626", "#16a34a", "#0284c7", "#9333ea", "#ea580c", "#0891b2", "#4338ca"];
+};
+/**
+ * Size presets for common use cases
+ */
+export declare const multiSegmentDonutChartSizes: {
+    readonly xs: 120;
+    readonly sm: 160;
+    readonly md: 200;
+    readonly lg: 280;
+    readonly xl: 360;
+    readonly "2xl": 480;
+};
+/**
+ * Thickness presets
+ */
+export declare const multiSegmentDonutChartThickness: {
+    readonly thin: 1;
+    readonly normal: 2;
+    readonly thick: 3;
+    readonly bold: 4;
+    readonly extraBold: 6;
+};
+/**
+ * Utility function to get color palette by name
+ */
+export declare const getColorPalette: (name: keyof typeof multiSegmentColorPalettes) => readonly ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16"] | readonly ["#93c5fd", "#86efac", "#fde68a", "#fca5a5", "#c4b5fd", "#f9a8d4", "#a5f3fc", "#d9f99d"] | readonly ["#dbeafe", "#bfdbfe", "#93c5fd", "#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8", "#1e40af"] | readonly ["#fef3c7", "#fcd34d", "#f59e0b", "#f97316", "#ef4444", "#dc2626", "#b91c1c", "#991b1b"] | readonly ["#cffafe", "#a5f3fc", "#22d3ee", "#06b6d4", "#0891b2", "#0e7490", "#155e75", "#164e63"] | readonly ["#d6d3d1", "#a8a29e", "#78716c", "#57534e", "#44403c", "#292524", "#1c1917", "#0c0a09"] | readonly ["#fbbf24", "#facc15", "#84cc16", "#22c55e", "#14b8a6", "#06b6d4", "#0ea5e9", "#3b82f6"] | readonly ["#1e40af", "#0369a1", "#047857", "#65a30d", "#ca8a04", "#dc2626", "#9333ea", "#be123c"] | readonly ["#000000", "#dc2626", "#16a34a", "#0284c7", "#9333ea", "#ea580c", "#0891b2", "#4338ca"];
+/**
+ * Type definitions for exported constants
+ */
+export type MultiSegmentColorPalette = keyof typeof multiSegmentColorPalettes;
+export type MultiSegmentDonutChartSize = keyof typeof multiSegmentDonutChartSizes;
+export type MultiSegmentDonutChartThickness = keyof typeof multiSegmentDonutChartThickness;

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

@@ -0,0 +1,124 @@
+import React from "react";
+import { HTMLMotionProps } from "motion/react";
+/**
+ * Data segment for the multi-segment donut chart
+ */
+export interface DonutSegment {
+    /**
+     * The actual value this segment represents
+     */
+    value: number;
+    /**
+     * The percentage this segment represents (0-100)
+     * This should be calculated based on the total of all values
+     */
+    percentage: number;
+    /**
+     * Optional label for this segment
+     */
+    label?: string;
+    /**
+     * Optional custom color for this segment
+     * If not provided, will use colors from the theme palette
+     */
+    color?: string;
+}
+/**
+ * Theme overrides for the MultiSegmentDonutChart component
+ */
+export interface MultiSegmentDonutChartThemeOverrides {
+    /** Base style for the container */
+    baseStyle?: string;
+    /** Track (background circle) styling */
+    track?: string;
+    /** Legend container styling */
+    legend?: {
+        /** Container styles */
+        container?: string;
+        /** Individual legend item styles */
+        item?: string;
+        /** Legend label text styles */
+        label?: string;
+        /** Legend value text styles */
+        value?: string;
+        /** Color indicator dot styles */
+        colorDot?: string;
+    };
+    /** Center content area styling */
+    centerContent?: string;
+    /** Default color palette for segments */
+    colors?: string[];
+}
+/**
+ * MultiSegmentDonutChart component props
+ */
+export interface MultiSegmentDonutChartProps extends Omit<HTMLMotionProps<"div">, "children"> {
+    /**
+     * Array of data segments to display
+     * Each segment should have value and percentage
+     */
+    data: DonutSegment[];
+    /**
+     * Size of the donut chart
+     * Can be a number (pixels) or CSS size string
+     * @default 200
+     */
+    size?: number | string;
+    /**
+     * Thickness of the donut stroke
+     * @default 2
+     */
+    thickness?: number;
+    /**
+     * Gap between segments as a fraction (0-0.8)
+     * 0 means no gap, 0.8 means large gaps
+     * @default 0.02
+     */
+    segmentGap?: number;
+    /**
+     * Whether to show entrance animation
+     * @default true
+     */
+    showAnimation?: boolean;
+    /**
+     * Whether to show a legend with labels and values
+     * @default false
+     */
+    showLegend?: boolean;
+    /**
+     * Position of the legend
+     * @default "right"
+     */
+    legendPosition?: "top" | "right" | "bottom" | "left";
+    /**
+     * Custom content to display in the center of the donut
+     */
+    centerContent?: React.ReactNode;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: MultiSegmentDonutChartThemeOverrides;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Callback when a segment is hovered
+     */
+    onSegmentHover?: (segment: DonutSegment | null) => void;
+    /**
+     * Callback when a segment is clicked
+     */
+    onSegmentClick?: (segment: DonutSegment) => void;
+    /**
+     * Whether to render segments with rounded end caps
+     * Uses stroke-based rendering with stroke-linecap="round"
+     * @default true
+     */
+    roundedCaps?: boolean;
+}
+/**
+ * Default theme configuration
+ */
+export interface MultiSegmentDonutChartTheme extends Required<MultiSegmentDonutChartThemeOverrides> {
+}