flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -0,0 +1,108 @@
+/**
+ * Model configurations with pricing (as of 2024)
+ */
+var 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
+ */
+var estimateTokens = function (text) {
+    if (!text)
+        return 0;
+    // Remove extra whitespace and split into words
+    var 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
+    var wordBasedEstimate = Math.ceil(words.length / 0.75);
+    var 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
+ */
+var calculateCost = function (tokens, costPer1kTokens) {
+    return (tokens / 1000) * costPer1kTokens;
+};
+/**
+ * Format cost for display
+ */
+var formatCost = function (cost) {
+    if (cost < 0.01) {
+        return "$".concat(cost.toFixed(4));
+    }
+    if (cost < 0.1) {
+        return "$".concat(cost.toFixed(3));
+    }
+    return "$".concat(cost.toFixed(2));
+};
+/**
+ * Format token count for display
+ */
+var formatTokenCount = function (tokens) {
+    if (tokens >= 1000000) {
+        return "".concat((tokens / 1000000).toFixed(1), "M");
+    }
+    if (tokens >= 1000) {
+        return "".concat((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,99 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+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
+ */
+var formatTimestamp = function (date) {
+    var now = new Date();
+    var diff = now.getTime() - date.getTime();
+    var minutes = Math.floor(diff / 60000);
+    var hours = Math.floor(diff / 3600000);
+    var days = Math.floor(diff / 86400000);
+    if (minutes < 1)
+        return "Just now";
+    if (minutes < 60)
+        return "".concat(minutes, "m ago");
+    if (hours < 24)
+        return "".concat(hours, "h ago");
+    if (days < 7)
+        return "".concat(days, "d ago");
+    return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+    });
+};
+var VersionSlider = function (_a) {
+    var _b, _c;
+    var versions = _a.versions, currentIndex = _a.currentIndex, onChange = _a.onChange, _d = _a.showLabels, showLabels = _d === void 0 ? false : _d, _e = _a.showTimestamps, showTimestamps = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? "md" : _f, className = _a.className, props = __rest(_a, ["versions", "currentIndex", "onChange", "showLabels", "showTimestamps", "size", "className"]);
+    var theme = versionSliderTheme;
+    var sizeStyles = ((_b = theme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || ((_c = theme.sizes) === null || _c === void 0 ? void 0 : _c.md);
+    // Navigation handlers
+    var handlePrevious = useCallback(function () {
+        if (currentIndex > 0) {
+            onChange(currentIndex - 1);
+        }
+    }, [currentIndex, onChange]);
+    var handleNext = useCallback(function () {
+        if (currentIndex < versions.length - 1) {
+            onChange(currentIndex + 1);
+        }
+    }, [currentIndex, versions.length, onChange]);
+    // Keyboard navigation
+    var handleKeyDown = useCallback(function (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
+    var progressWidth = useMemo(function () {
+        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", __assign({ 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: "".concat(progressWidth, "%") }, "aria-hidden": "true" }),
+            React__default.createElement("div", { className: "relative flex items-center justify-between w-full" }, versions.map(function (version, index) {
+                var isActive = index === currentIndex;
+                var isCompleted = index < currentIndex;
+                return (React__default.createElement("button", { key: version.id, type: "button", onClick: function () { return 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 ".concat(version.label || index + 1).concat(version.description ? ": ".concat(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 @@
+var 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.js

@@ -0,0 +1,164 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+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.
+ */
+var ActivityRings = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var rings = _a.rings, centerLabel = _a.centerLabel, centerSuffix = _a.centerSuffix, _j = _a.size, size = _j === void 0 ? ACTIVITY_RINGS_DEFAULTS.size : _j, propStrokeWidth = _a.strokeWidth, propGap = _a.gap, _k = _a.showAnimation, showAnimation = _k === void 0 ? ACTIVITY_RINGS_DEFAULTS.showAnimation : _k, themeOverrides = _a.theme, className = _a.className, title = _a.title, description = _a.description, _l = _a.showValidationWarnings, showValidationWarnings = _l === void 0 ? process.env.NODE_ENV === "development" : _l, props = __rest(_a, ["rings", "centerLabel", "centerSuffix", "size", "strokeWidth", "gap", "showAnimation", "theme", "className", "title", "description", "showValidationWarnings"]);
+    var theme = __assign(__assign({}, activityRingsTheme), (themeOverrides || {}));
+    var shouldReduceMotion = useReducedMotion();
+    var containerRef = useRef(null);
+    // Use theme defaults if not provided
+    var strokeWidth = (_c = propStrokeWidth !== null && propStrokeWidth !== void 0 ? propStrokeWidth : (_b = theme.ringDefaults) === null || _b === void 0 ? void 0 : _b.strokeWidth) !== null && _c !== void 0 ? _c : ACTIVITY_RINGS_DEFAULTS.strokeWidth;
+    var gap = (_e = propGap !== null && propGap !== void 0 ? propGap : (_d = theme.ringDefaults) === null || _d === void 0 ? void 0 : _d.gap) !== null && _e !== void 0 ? _e : ACTIVITY_RINGS_DEFAULTS.gap;
+    // Detect mobile
+    var isMobile = typeof window !== "undefined" &&
+        ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    // Tooltip hook
+    var _m = useTooltipPosition({
+        containerRef: containerRef,
+        isMobile: isMobile,
+    }), tooltipData = _m.tooltipData, tooltipRef = _m.tooltipRef, handleMouseEnter = _m.handleMouseEnter, handleMouseMove = _m.handleMouseMove, handleMouseLeave = _m.handleMouseLeave;
+    // 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(function (ring, i) {
+            if (!Number.isFinite(ring.value)) {
+                console.error("[ActivityRings]: Ring ".concat(i, " value must be a finite number. Got: ").concat(ring.value));
+            }
+            if (showValidationWarnings && (ring.value > 100 || ring.value < 0)) {
+                console.warn("[ActivityRings]: Ring ".concat(i, " value (").concat(ring.value, ") outside 0-100 range. Clamping."));
+            }
+        });
+    }
+    // Early return for invalid configuration
+    if (!Array.isArray(rings) || rings.length === 0) {
+        return (React__default.createElement("div", __assign({ 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
+    var _o = useState(false), hasAnimated = _o[0], setHasAnimated = _o[1];
+    useEffect(function () {
+        if (showAnimation && !shouldReduceMotion) {
+            setHasAnimated(true);
+        }
+        else {
+            // If animations disabled, immediately show final state
+            setHasAnimated(true);
+        }
+    }, [showAnimation, shouldReduceMotion]);
+    // Normalize ring values (clamp to 0-100)
+    var normalizedRings = useMemo(function () {
+        return rings.map(function (ring) { return (__assign(__assign({}, ring), { value: Math.min(Math.max(ring.value, 0), 100) })); });
+    }, [rings]);
+    // SVG parameters
+    var svgSize = 100;
+    var center = 50;
+    // Calculate ring radii based on count
+    var ringRadii = useMemo(function () {
+        normalizedRings.length;
+        var maxRadius = center - strokeWidth / 2 - 2; // Leave 2px padding
+        return normalizedRings.map(function (_, 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
+    var defaultColors = ((_f = theme.ringDefaults) === null || _f === void 0 ? void 0 : _f.colors) || [];
+    // Container size
+    var containerSize = typeof size === "number" ? "".concat(size, "px") : size;
+    // Calculate average progress for ARIA
+    var averageProgress = useMemo(function () {
+        var sum = normalizedRings.reduce(function (acc, ring) { return acc + ring.value; }, 0);
+        return Math.round(sum / normalizedRings.length);
+    }, [normalizedRings]);
+    return (React__default.createElement("div", __assign({ 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: ".concat(normalizedRings
+                .map(function (r, i) { return "".concat(r.label || "Ring ".concat(i + 1), " ").concat(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 ".concat(svgSize, " ").concat(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(function (ring, index) {
+                var radius = ringRadii[index];
+                var circumference = 2 * Math.PI * radius;
+                var offset = circumference - (ring.value / 100) * circumference;
+                var ringColor = ring.color ||
+                    defaultColors[index % defaultColors.length] ||
+                    "var(--color-primary)";
+                var 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 ".concat(index, " has invalid radius (").concat(radius, "). Too many rings or strokeWidth/gap too large."));
+                    }
+                    return null;
+                }
+                // Create shared hover handlers
+                var createHoverHandlers = function () { return ({
+                    onMouseEnter: function (e) {
+                        var content = {
+                            category: "", // Empty to avoid duplicate text in tooltip
+                            series: [
+                                {
+                                    key: "ring-".concat(index),
+                                    label: ring.label || "Ring ".concat(index + 1),
+                                    value: ring.value,
+                                    color: ringColor,
+                                },
+                            ],
+                        };
+                        var svgCoordinates = {
+                            x: center,
+                            y: center - radius,
+                            dimensions: {
+                                width: svgSize,
+                                height: svgSize,
+                                left: 0,
+                                top: 0,
+                            },
+                        };
+                        handleMouseEnter(e, content, svgCoordinates);
+                    },
+                    onMouseMove: function (e) { return handleMouseMove(e); },
+                    onMouseLeave: function () { return handleMouseLeave(); },
+                }); };
+                return (React__default.createElement("g", { key: index },
+                    React__default.createElement("circle", __assign({ cx: center, cy: center, r: radius, fill: "none", stroke: "#00000010", strokeWidth: strokeWidth, strokeLinecap: "round", className: "cursor-pointer", transform: "rotate(-90 ".concat(center, " ").concat(center, ")") }, createHoverHandlers())),
+                    React__default.createElement(motion.circle, __assign({ 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 ".concat(center, " ").concat(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((_g = theme.centerText) === null || _g === void 0 ? void 0 : _g.label, "flex  flex-col items-center") },
+            React__default.createElement("span", null, centerLabel),
+            centerSuffix && (React__default.createElement("span", { className: (_h = theme.centerText) === null || _h === void 0 ? void 0 : _h.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.js

@@ -0,0 +1,27 @@
+/**
+ * ActivityRings Theme Configuration
+ *
+ * Follows the established chart theming pattern with CSS variables
+ */
+var 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.js

@@ -0,0 +1,8 @@
+// Default values
+var ACTIVITY_RINGS_DEFAULTS = {
+    size: 240,
+    strokeWidth: 14,
+    gap: 4,
+    showAnimation: true};
+
+export { ACTIVITY_RINGS_DEFAULTS };