flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/ai/TokenCounter/index.d.ts

@@ -0,0 +1,4 @@
+export { TokenCounter } from "./TokenCounter";
+export { tokenCounterTheme } from "./TokenCounter.theme";
+export { MODEL_CONFIGS, estimateTokens, calculateCost, formatCost, formatTokenCount, } from "./tokenUtils";
+export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, TokenCounterSizeConfig, ModelConfig, } from "./TokenCounter.types";

package/dist/components/ai/TokenCounter/tokenUtils.d.ts

@@ -0,0 +1,23 @@
+import { ModelConfig, TokenCounterModel } from "./TokenCounter.types";
+/**
+ * Model configurations with pricing (as of 2024)
+ */
+export declare const MODEL_CONFIGS: Record<TokenCounterModel, ModelConfig>;
+/**
+ * Estimate token count from text
+ * Uses a simple word-based heuristic (1 token ≈ 0.75 words for English)
+ * This is an approximation - actual tokenization varies by model
+ */
+export declare const estimateTokens: (text: string) => number;
+/**
+ * Calculate cost based on token count
+ */
+export declare const calculateCost: (tokens: number, costPer1kTokens: number) => number;
+/**
+ * Format cost for display
+ */
+export declare const formatCost: (cost: number) => string;
+/**
+ * Format token count for display
+ */
+export declare const formatTokenCount: (tokens: number) => string;

package/dist/components/ai/TokenCounter/tokenUtils.js

@@ -0,0 +1,108 @@
+/**
+ * Model configurations with pricing (as of 2024)
+ */
+const MODEL_CONFIGS = {
+    "gpt-4": {
+        name: "GPT-4",
+        shortName: "GPT-4",
+        costPer1kTokens: 0.03,
+        maxTokens: 8192,
+    },
+    "gpt-4-turbo": {
+        name: "GPT-4 Turbo",
+        shortName: "GPT-4T",
+        costPer1kTokens: 0.01,
+        maxTokens: 128000,
+    },
+    "gpt-3.5-turbo": {
+        name: "GPT-3.5 Turbo",
+        shortName: "GPT-3.5",
+        costPer1kTokens: 0.0005,
+        maxTokens: 16385,
+    },
+    "claude-3-opus": {
+        name: "Claude 3 Opus",
+        shortName: "Opus",
+        costPer1kTokens: 0.015,
+        maxTokens: 200000,
+    },
+    "claude-3-sonnet": {
+        name: "Claude 3.5 Sonnet",
+        shortName: "Sonnet",
+        costPer1kTokens: 0.003,
+        maxTokens: 200000,
+    },
+    "claude-3-haiku": {
+        name: "Claude 3 Haiku",
+        shortName: "Haiku",
+        costPer1kTokens: 0.00025,
+        maxTokens: 200000,
+    },
+    "gemini-pro": {
+        name: "Gemini Pro",
+        shortName: "Gemini",
+        costPer1kTokens: 0.00025,
+        maxTokens: 32000,
+    },
+    "gemini-ultra": {
+        name: "Gemini Ultra",
+        shortName: "Ultra",
+        costPer1kTokens: 0.0025,
+        maxTokens: 32000,
+    },
+    custom: {
+        name: "Custom",
+        shortName: "Custom",
+        costPer1kTokens: 0,
+        maxTokens: 4096,
+    },
+};
+/**
+ * Estimate token count from text
+ * Uses a simple word-based heuristic (1 token ≈ 0.75 words for English)
+ * This is an approximation - actual tokenization varies by model
+ */
+const estimateTokens = (text) => {
+    if (!text)
+        return 0;
+    // Remove extra whitespace and split into words
+    const words = text.trim().split(/\s+/).filter(Boolean);
+    // Rough estimation: 1 token ≈ 0.75 words (or 4 characters)
+    // This is a common approximation for GPT models
+    const wordBasedEstimate = Math.ceil(words.length / 0.75);
+    const charBasedEstimate = Math.ceil(text.length / 4);
+    // Use the average of both methods for better accuracy
+    return Math.ceil((wordBasedEstimate + charBasedEstimate) / 2);
+};
+/**
+ * Calculate cost based on token count
+ */
+const calculateCost = (tokens, costPer1kTokens) => {
+    return (tokens / 1000) * costPer1kTokens;
+};
+/**
+ * Format cost for display
+ */
+const formatCost = (cost) => {
+    if (cost < 0.01) {
+        return `$${cost.toFixed(4)}`;
+    }
+    if (cost < 0.1) {
+        return `$${cost.toFixed(3)}`;
+    }
+    return `$${cost.toFixed(2)}`;
+};
+/**
+ * Format token count for display
+ */
+const formatTokenCount = (tokens) => {
+    if (tokens >= 1000000) {
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    }
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+};
+
+export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount };

package/dist/components/ai/VersionSlider/VersionSlider.d.ts

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

package/dist/components/ai/VersionSlider/VersionSlider.js

@@ -0,0 +1,97 @@
+import React__default, { useCallback, useMemo } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { versionSliderTheme } from './VersionSlider.theme.js';
+
+/**
+ * Format a timestamp for display
+ */
+const formatTimestamp = (date) => {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+    if (minutes < 1)
+        return "Just now";
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    if (hours < 24)
+        return `${hours}h ago`;
+    if (days < 7)
+        return `${days}d ago`;
+    return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+    });
+};
+const VersionSlider = ({ versions, currentIndex, onChange, showLabels = false, showTimestamps = true, size = "md", className, ...props }) => {
+    var _a, _b;
+    const theme = versionSliderTheme;
+    const sizeStyles = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || ((_b = theme.sizes) === null || _b === void 0 ? void 0 : _b.md);
+    // Navigation handlers
+    const handlePrevious = useCallback(() => {
+        if (currentIndex > 0) {
+            onChange(currentIndex - 1);
+        }
+    }, [currentIndex, onChange]);
+    const handleNext = useCallback(() => {
+        if (currentIndex < versions.length - 1) {
+            onChange(currentIndex + 1);
+        }
+    }, [currentIndex, versions.length, onChange]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case "ArrowLeft":
+            case "ArrowUp":
+                e.preventDefault();
+                handlePrevious();
+                break;
+            case "ArrowRight":
+            case "ArrowDown":
+                e.preventDefault();
+                handleNext();
+                break;
+            case "Home":
+                e.preventDefault();
+                onChange(0);
+                break;
+            case "End":
+                e.preventDefault();
+                onChange(versions.length - 1);
+                break;
+        }
+    }, [handlePrevious, handleNext, onChange, versions.length]);
+    // Progress bar width calculation
+    const progressWidth = useMemo(() => {
+        if (versions.length <= 1)
+            return 0;
+        return (currentIndex / (versions.length - 1)) * 100;
+    }, [currentIndex, versions.length]);
+    if (versions.length === 0) {
+        return null;
+    }
+    return (React__default.createElement("div", { className: cn(theme.containerStyle, className), onKeyDown: handleKeyDown, role: "slider", "aria-label": "Version history", "aria-valuenow": currentIndex + 1, "aria-valuemin": 1, "aria-valuemax": versions.length, tabIndex: 0, ...props },
+        React__default.createElement("button", { type: "button", onClick: handlePrevious, disabled: currentIndex === 0, className: cn(theme.buttonStyle, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.button), "aria-label": "Previous version" },
+            React__default.createElement(ChevronLeftIcon, { className: "size-4" })),
+        React__default.createElement("div", { className: theme.trackStyle },
+            React__default.createElement("div", { className: "absolute top-1/2 -translate-y-1/2 left-0 right-0 h-0.5 bg-[var(--color-border)] rounded-full", "aria-hidden": "true" }),
+            React__default.createElement("div", { className: theme.progressStyle, style: { width: `${progressWidth}%` }, "aria-hidden": "true" }),
+            React__default.createElement("div", { className: "relative flex items-center justify-between w-full" }, versions.map((version, index) => {
+                const isActive = index === currentIndex;
+                const isCompleted = index < currentIndex;
+                return (React__default.createElement("button", { key: version.id, type: "button", onClick: () => onChange(index), className: cn("group relative", theme.dotStyle, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.dot, isActive && theme.dotActiveStyle, isCompleted && !isActive && theme.dotCompletedStyle), "aria-label": `Version ${version.label || index + 1}${version.description ? `: ${version.description}` : ""}`, "aria-current": isActive ? "step" : undefined },
+                    showTimestamps && version.timestamp && (React__default.createElement("span", { className: theme.timestampStyle }, formatTimestamp(version.timestamp))),
+                    showLabels && version.label && (React__default.createElement("span", { className: theme.labelStyle }, version.label))));
+            }))),
+        React__default.createElement("button", { type: "button", onClick: handleNext, disabled: currentIndex === versions.length - 1, className: cn(theme.buttonStyle, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.button), "aria-label": "Next version" },
+            React__default.createElement(ChevronRightIcon, { className: "size-4" })),
+        React__default.createElement("span", { className: "text-sm text-[var(--color-text-muted)] tabular-nums min-w-[4ch] text-right" },
+            currentIndex + 1,
+            "/",
+            versions.length)));
+};
+VersionSlider.displayName = "VersionSlider";
+
+export { VersionSlider };

package/dist/components/ai/VersionSlider/VersionSlider.theme.d.ts

@@ -0,0 +1,2 @@
+import { VersionSliderTheme } from "./VersionSlider.types";
+export declare const versionSliderTheme: VersionSliderTheme;

package/dist/components/ai/VersionSlider/VersionSlider.theme.js

@@ -0,0 +1,18 @@
+const versionSliderTheme = {
+    containerStyle: "flex items-center gap-3 select-none",
+    trackStyle: "relative flex items-center gap-2 flex-1",
+    progressStyle: "absolute top-1/2 -translate-y-1/2 h-0.5 bg-[var(--color-primary)] transition-all duration-300 rounded-full",
+    dotStyle: "relative flex-shrink-0 rounded-full bg-[var(--color-border)] hover:bg-[var(--color-primary-300)] transition-colors cursor-pointer ring-2 ring-transparent hover:ring-[var(--color-primary-100)]",
+    dotActiveStyle: "bg-[var(--color-primary)] ring-[var(--color-primary-200)] shadow-md",
+    dotCompletedStyle: "bg-[var(--color-primary-400)]",
+    buttonStyle: "flex-shrink-0 p-1.5 rounded-md bg-[var(--color-background-secondary)] hover:bg-[var(--color-background-tertiary)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors disabled:opacity-40 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    labelStyle: "absolute -bottom-5 left-1/2 -translate-x-1/2 text-xs text-[var(--color-text-muted)] whitespace-nowrap",
+    timestampStyle: "absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 rounded bg-[var(--color-text-primary)] text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none",
+    sizes: {
+        sm: { dot: "size-2", button: "size-6" },
+        md: { dot: "size-3", button: "size-8" },
+        lg: { dot: "size-4", button: "size-10" },
+    },
+};
+
+export { versionSliderTheme };

package/dist/components/ai/VersionSlider/VersionSlider.types.d.ts

@@ -0,0 +1,77 @@
+import React from "react";
+export interface Version {
+    /**
+     * Unique identifier for the version
+     */
+    id: string;
+    /**
+     * Display label for the version (e.g., "v1", "Draft 2")
+     */
+    label?: string;
+    /**
+     * Timestamp when this version was created
+     */
+    timestamp?: Date;
+    /**
+     * Optional description of changes
+     */
+    description?: string;
+}
+export interface VersionSliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Array of versions to display
+     */
+    versions: Version[];
+    /**
+     * Current active version index
+     */
+    currentIndex: number;
+    /**
+     * Callback when version changes
+     */
+    onChange: (index: number) => void;
+    /**
+     * Show version labels below dots
+     * @default false
+     */
+    showLabels?: boolean;
+    /**
+     * Show timestamps on hover
+     * @default true
+     */
+    showTimestamps?: boolean;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+}
+export interface VersionSliderTheme {
+    containerStyle?: string;
+    trackStyle?: string;
+    progressStyle?: string;
+    dotStyle?: string;
+    dotActiveStyle?: string;
+    dotCompletedStyle?: string;
+    buttonStyle?: string;
+    labelStyle?: string;
+    timestampStyle?: string;
+    sizes?: {
+        sm: {
+            dot: string;
+            button: string;
+        };
+        md: {
+            dot: string;
+            button: string;
+        };
+        lg: {
+            dot: string;
+            button: string;
+        };
+    };
+}

package/dist/components/ai/VersionSlider/index.d.ts

@@ -0,0 +1,3 @@
+export { VersionSlider } from "./VersionSlider";
+export type { VersionSliderProps, VersionSliderTheme, Version, } from "./VersionSlider.types";
+export { versionSliderTheme } from "./VersionSlider.theme";

package/dist/components/ai/index.d.ts

@@ -0,0 +1,33 @@
+export { ChatInterface, chatInterfaceTheme, useChatInterfaceContext, } from "./ChatInterface";
+export type { ChatInterfaceProps, ChatInterfaceContextValue, ChatInterfaceTheme, ChatInterfaceThemeOverrides, } from "./ChatInterface";
+export { Message, messageTheme } from "../core/Message";
+export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from "../core/Message";
+export { MessageHistory, messageHistoryTheme } from "./MessageHistory";
+export type { MessageHistoryProps, ChatMessageData, MessageHistoryTheme, MessageHistoryThemeOverrides, } from "./MessageHistory";
+export { PromptInput, promptInputTheme } from "./PromptInput";
+export type { PromptInputProps, PromptInputState, ModelOption, PromptInputTheme, PromptInputThemeOverrides, } from "./PromptInput";
+export { ThinkingIndicator, thinkingIndicatorTheme } from "./ThinkingIndicator";
+export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, } from "./ThinkingIndicator";
+export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatCost, formatTokenCount, MODEL_CONFIGS, } from "./TokenCounter";
+export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
+export { PromptSuggestions } from "./PromptSuggestions";
+export type { PromptSuggestionsProps, PromptSuggestion, } from "./PromptSuggestions";
+export { StreamingResponse, ErrorDisplay, MarkdownRenderer, streamingResponseTheme, } from "./StreamingResponse";
+export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, } from "./StreamingResponse";
+export { CodeBlock, codeBlockTheme } from "./CodeBlock";
+export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
+export { ApprovalCard } from "./ApprovalCard";
+export type { ApprovalCardProps, ApprovalRiskLevel, ApprovalMode, } from "./ApprovalCard";
+export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";
+export { EditingIndicator, editingIndicatorTheme } from "./EditingIndicator";
+export type { EditingIndicatorProps, EditingIndicatorTheme, } from "./EditingIndicator";
+export { PresenceIndicator, presenceIndicatorTheme } from "./PresenceIndicator";
+export type { PresenceIndicatorProps, PresenceIndicatorTheme, PresenceSort, } from "./PresenceIndicator";
+export { PresenceProvider, usePresenceContext, PresenceContext, MockPresenceAdapter, } from "./PresenceProvider";
+export type { PresenceProviderProps, PresenceUser, TypingUser, ConnectionStatus, PresenceEvent, PresenceAdapter, PresenceAdapterConfig, PresenceContextValue, PresenceProviderTheme, } from "./PresenceProvider";
+export { ArtifactContainer, artifactContainerTheme, handleSizes, } from "./ArtifactContainer";
+export type { ArtifactContainerProps, ArtifactContainerChatProps, ArtifactContainerCanvasProps, ArtifactContainerTheme, SplitDirection, } from "./ArtifactContainer";
+export { GenerativeRenderer, generativeRendererTheme, } from "./GenerativeRenderer";
+export type { GenerativeRendererProps, GenerativeRendererTheme, RendererType, } from "./GenerativeRenderer";
+export { VersionSlider, versionSliderTheme } from "./VersionSlider";
+export type { VersionSliderProps, VersionSliderTheme, Version, } from "./VersionSlider";

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ActivityRingsProps } from "./ActivityRings.types";
+/**
+ * ActivityRings Component
+ *
+ * Multiple concentric circular progress rings, inspired by Apple Activity.
+ * Features smooth animations, accessibility support, and production-ready CSS variables.
+ */
+export declare const ActivityRings: React.FC<ActivityRingsProps>;

package/dist/components/charts/ActivityRings/ActivityRings.js

@@ -0,0 +1,163 @@
+import React__default, { useRef, useState, useEffect, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { activityRingsTheme } from './ActivityRings.theme.js';
+import { ACTIVITY_RINGS_DEFAULTS } from './ActivityRings.types.js';
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
+import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { getSpringAnimation, CIRCULAR_CHART_ANIMATIONS, getStaggerDelay } from '../utils/animation-utils.js';
+
+/**
+ * ActivityRings Component
+ *
+ * Multiple concentric circular progress rings, inspired by Apple Activity.
+ * Features smooth animations, accessibility support, and production-ready CSS variables.
+ */
+const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS_DEFAULTS.size, strokeWidth: propStrokeWidth, gap: propGap, showAnimation = ACTIVITY_RINGS_DEFAULTS.showAnimation, theme: themeOverrides, className, title, description, showValidationWarnings = process.env.NODE_ENV === "development", ...props }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = { ...activityRingsTheme, ...(themeOverrides || {}) };
+    const shouldReduceMotion = useReducedMotion();
+    const containerRef = useRef(null);
+    // Use theme defaults if not provided
+    const strokeWidth = (_b = propStrokeWidth !== null && propStrokeWidth !== void 0 ? propStrokeWidth : (_a = theme.ringDefaults) === null || _a === void 0 ? void 0 : _a.strokeWidth) !== null && _b !== void 0 ? _b : ACTIVITY_RINGS_DEFAULTS.strokeWidth;
+    const gap = (_d = propGap !== null && propGap !== void 0 ? propGap : (_c = theme.ringDefaults) === null || _c === void 0 ? void 0 : _c.gap) !== null && _d !== void 0 ? _d : ACTIVITY_RINGS_DEFAULTS.gap;
+    // Detect mobile
+    const isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    // Tooltip hook
+    const { tooltipData, tooltipRef, handleMouseEnter, handleMouseMove, handleMouseLeave, } = useTooltipPosition({
+        containerRef,
+        isMobile,
+    });
+    // Validation
+    if (process.env.NODE_ENV !== "production") {
+        if (!Array.isArray(rings) || rings.length === 0) {
+            console.error("[ActivityRings]: rings must be a non-empty array");
+        }
+        if (rings.length > 5) {
+            console.warn("[ActivityRings]: More than 5 rings may cause visual overlap. Recommended: 3-5 rings.");
+        }
+        rings.forEach((ring, i) => {
+            if (!Number.isFinite(ring.value)) {
+                console.error(`[ActivityRings]: Ring ${i} value must be a finite number. Got: ${ring.value}`);
+            }
+            if (showValidationWarnings && (ring.value > 100 || ring.value < 0)) {
+                console.warn(`[ActivityRings]: Ring ${i} value (${ring.value}) outside 0-100 range. Clamping.`);
+            }
+        });
+    }
+    // Early return for invalid configuration
+    if (!Array.isArray(rings) || rings.length === 0) {
+        return (React__default.createElement("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props },
+            React__default.createElement(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }),
+            React__default.createElement("span", { className: "text-sm text-[var(--color-text-secondary)]" }, "Invalid ActivityRings: rings array is required")));
+    }
+    // State for controlling initial animation
+    const [hasAnimated, setHasAnimated] = useState(false);
+    useEffect(() => {
+        if (showAnimation && !shouldReduceMotion) {
+            setHasAnimated(true);
+        }
+        else {
+            // If animations disabled, immediately show final state
+            setHasAnimated(true);
+        }
+    }, [showAnimation, shouldReduceMotion]);
+    // Normalize ring values (clamp to 0-100)
+    const normalizedRings = useMemo(() => rings.map((ring) => ({
+        ...ring,
+        value: Math.min(Math.max(ring.value, 0), 100),
+    })), [rings]);
+    // SVG parameters
+    const svgSize = 100;
+    const center = 50;
+    // Calculate ring radii based on count
+    const ringRadii = useMemo(() => {
+        normalizedRings.length;
+        const maxRadius = center - strokeWidth / 2 - 2; // Leave 2px padding
+        return normalizedRings.map((_, index) => {
+            // index 0 (outer) = largest radius, index N-1 (inner) = smallest
+            return maxRadius - index * (strokeWidth + gap);
+        });
+    }, [normalizedRings.length, strokeWidth, gap, center]);
+    // Get default colors from theme
+    const defaultColors = ((_e = theme.ringDefaults) === null || _e === void 0 ? void 0 : _e.colors) || [];
+    // Container size
+    const containerSize = typeof size === "number" ? `${size}px` : size;
+    // Calculate average progress for ARIA
+    const averageProgress = useMemo(() => {
+        const sum = normalizedRings.reduce((acc, ring) => acc + ring.value, 0);
+        return Math.round(sum / normalizedRings.length);
+    }, [normalizedRings]);
+    return (React__default.createElement("div", { ref: containerRef, className: cn(theme.baseStyle, className), style: { width: containerSize, height: containerSize }, role: "progressbar", "aria-valuenow": averageProgress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": title ||
+            `Activity rings: ${normalizedRings
+                .map((r, i) => `${r.label || `Ring ${i + 1}`} ${r.value}%`)
+                .join(", ")}`, "aria-describedby": description ? "rings-description" : undefined, tabIndex: 0, ...props },
+        description && (React__default.createElement("span", { id: "rings-description", className: "sr-only" }, description)),
+        React__default.createElement("svg", { className: cn(theme.svgStyle), viewBox: `0 0 ${svgSize} ${svgSize}`, width: containerSize, height: containerSize, preserveAspectRatio: "xMidYMid meet", role: "presentation", "aria-hidden": "true" },
+            React__default.createElement("title", null, title || "Activity Rings Chart"),
+            description && React__default.createElement("desc", null, description),
+            normalizedRings.map((ring, index) => {
+                const radius = ringRadii[index];
+                const circumference = 2 * Math.PI * radius;
+                const offset = circumference - (ring.value / 100) * circumference;
+                const ringColor = ring.color ||
+                    defaultColors[index % defaultColors.length] ||
+                    "var(--color-primary)";
+                const animationDelay = getStaggerDelay(index, CIRCULAR_CHART_ANIMATIONS.activityRings.staggerDelay);
+                // Check if radius is valid (prevent negative or zero radius)
+                if (radius <= 0) {
+                    if (process.env.NODE_ENV !== "production") {
+                        console.warn(`[ActivityRings]: Ring ${index} has invalid radius (${radius}). Too many rings or strokeWidth/gap too large.`);
+                    }
+                    return null;
+                }
+                // Create shared hover handlers
+                const createHoverHandlers = () => ({
+                    onMouseEnter: (e) => {
+                        const content = {
+                            category: "", // Empty to avoid duplicate text in tooltip
+                            series: [
+                                {
+                                    key: `ring-${index}`,
+                                    label: ring.label || `Ring ${index + 1}`,
+                                    value: ring.value,
+                                    color: ringColor,
+                                },
+                            ],
+                        };
+                        const svgCoordinates = {
+                            x: center,
+                            y: center - radius,
+                            dimensions: {
+                                width: svgSize,
+                                height: svgSize,
+                                left: 0,
+                                top: 0,
+                            },
+                        };
+                        handleMouseEnter(e, content, svgCoordinates);
+                    },
+                    onMouseMove: (e) => handleMouseMove(e),
+                    onMouseLeave: () => handleMouseLeave(),
+                });
+                return (React__default.createElement("g", { key: index },
+                    React__default.createElement("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "#00000010", strokeWidth: strokeWidth, strokeLinecap: "round", className: "cursor-pointer", transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() }),
+                    React__default.createElement(motion.circle, { cx: center, cy: center, r: radius, fill: "none", stroke: ringColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, className: "cursor-pointer transition-opacity duration-200", initial: { strokeDashoffset: circumference }, animate: hasAnimated ? { strokeDashoffset: offset } : {}, transition: showAnimation && !shouldReduceMotion
+                            ? getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.activityRings.preset, shouldReduceMotion, animationDelay)
+                            : { duration: 0 }, transform: `rotate(-90 ${center} ${center})`, ...createHoverHandlers() })));
+            })),
+        (centerLabel || centerSuffix) && (React__default.createElement(motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", initial: { opacity: 0, scale: 0.8 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion
+                ? {
+                    delay: CIRCULAR_CHART_ANIMATIONS.activityRings.centerLabelDelay,
+                    duration: 0.4,
+                }
+                : { duration: 0 } }, centerLabel && (React__default.createElement("div", { className: cn((_f = theme.centerText) === null || _f === void 0 ? void 0 : _f.label, "flex  flex-col items-center") },
+            React__default.createElement("span", null, centerLabel),
+            centerSuffix && (React__default.createElement("span", { className: (_g = theme.centerText) === null || _g === void 0 ? void 0 : _g.suffix }, centerSuffix)))))),
+        React__default.createElement(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 } })));
+};
+ActivityRings.displayName = "ActivityRings";
+
+export { ActivityRings };

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

@@ -0,0 +1,7 @@
+import { ActivityRingsThemeOverrides } from "./ActivityRings.types";
+/**
+ * ActivityRings Theme Configuration
+ *
+ * Follows the established chart theming pattern with CSS variables
+ */
+export declare const activityRingsTheme: ActivityRingsThemeOverrides;

package/dist/components/charts/ActivityRings/ActivityRings.theme.js

@@ -0,0 +1,27 @@
+/**
+ * ActivityRings Theme Configuration
+ *
+ * Follows the established chart theming pattern with CSS variables
+ */
+const activityRingsTheme = {
+    baseStyle: "relative flex items-center justify-center transition-all duration-300 cursor-default",
+    svgStyle: "overflow-visible relative",
+    ringDefaults: {
+        strokeWidth: 8,
+        gap: 1,
+        // Default colors using primary family gradient (dark to light)
+        colors: [
+            "var(--color-primary-600)", // Outer: Darkest
+            "var(--color-primary-400)", // Middle-outer
+            "var(--color-primary-200)", // Middle
+            "var(--color-primary-100)", // Middle-inner
+            "var(--color-primary-50)", // Inner: Lightest
+        ],
+    },
+    centerText: {
+        label: "text-xl font-semibold text-[var(--color-text-primary)]",
+        suffix: "text-sm font-normal text-[var(--color-text-secondary)]/80",
+    },
+};
+
+export { activityRingsTheme };

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

@@ -0,0 +1,62 @@
+import { BaseChartProps, StandardChartDisplayProps } from '../types/chart.types';
+/**
+ * Individual ring configuration
+ */
+export interface RingData {
+    /** Progress value (0-100) */
+    value: number;
+    /** Optional label for the ring (e.g., "Move", "Exercise") */
+    label?: string;
+    /** Ring color (CSS variable or hex) */
+    color?: string;
+}
+/**
+ * ActivityRings theme overrides
+ */
+export interface ActivityRingsThemeOverrides {
+    /** Base container styles */
+    baseStyle?: string;
+    /** SVG wrapper styles */
+    svgStyle?: string;
+    /** Ring defaults */
+    ringDefaults?: {
+        strokeWidth?: number;
+        gap?: number;
+        colors?: string[];
+    };
+    /** Center text styles */
+    centerText?: {
+        label?: string;
+        suffix?: string;
+    };
+}
+/**
+ * ActivityRings props - multiple concentric circular progress rings
+ */
+export interface ActivityRingsProps extends Pick<BaseChartProps, 'className' | 'children' | 'title' | 'description'>, Pick<StandardChartDisplayProps, 'variant'> {
+    /** Array of rings (ordered from outer to inner) */
+    rings: RingData[];
+    /** Center label content (text or ReactNode) */
+    centerLabel?: React.ReactNode;
+    /** Optional suffix for center label (e.g., "cal", "steps") */
+    centerSuffix?: string;
+    /** Size of the chart (px or string with units) */
+    size?: number | string;
+    /** Ring stroke width (default: 12) */
+    strokeWidth?: number;
+    /** Gap between rings (default: 8) */
+    gap?: number;
+    /** Whether to show animations (default: true) */
+    showAnimation?: boolean;
+    /** Theme overrides */
+    theme?: ActivityRingsThemeOverrides;
+    /** Development and debugging props */
+    showValidationWarnings?: boolean;
+}
+export declare const ACTIVITY_RINGS_DEFAULTS: {
+    readonly size: 240;
+    readonly strokeWidth: 14;
+    readonly gap: 4;
+    readonly showAnimation: true;
+    readonly variant: "default";
+};