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

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.theme.js

@@ -0,0 +1,36 @@
+/**
+ * Default theme for the MultiSegmentDonutChart component
+ */
+var multiSegmentDonutChartTheme = {
+    // Base container styles
+    baseStyle: "relative flex items-center justify-center transition-all duration-300",
+    // Background track styling
+    track: "text-[var(--color-border)]",
+    // Legend styling
+    legend: {
+        container: "flex flex-col gap-2 text-sm",
+        item: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity",
+        label: "text-[var(--color-text-primary)] font-medium",
+        value: "text-[var(--color-text-secondary)] ml-auto",
+        colorDot: "w-3 h-3 rounded-full flex-shrink-0",
+    },
+    // Center content area styling
+    centerContent: "absolute inset-0 flex flex-col items-center justify-center text-center z-20 pointer-events-none",
+    // Default color palette - using a vibrant, accessible palette
+    colors: [
+        "#3b82f6", // blue-500
+        "#10b981", // emerald-500
+        "#f59e0b", // amber-500
+        "#ef4444", // red-500
+        "#8b5cf6", // violet-500
+        "#ec4899", // pink-500
+        "#06b6d4", // cyan-500
+        "#84cc16", // lime-500
+        "#f97316", // orange-500
+        "#6366f1", // indigo-500
+        "#14b8a6", // teal-500
+        "#a855f7", // purple-500
+    ],
+};
+
+export { multiSegmentDonutChartTheme };

package/dist/components/charts/DonutChart/donut-utils.js

@@ -0,0 +1,117 @@
+/**
+ * Shared utility functions for DonutChart components
+ */
+/**
+ * Clamps a value between a minimum and maximum
+ */
+var clamp = function (value, min, max) {
+    return Math.min(Math.max(value, min), max);
+};
+/**
+ * Converts polar coordinates to cartesian coordinates
+ */
+var polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
+    var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180;
+    return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians),
+    };
+};
+/**
+ * Creates an SVG path for a ring segment (donut segment)
+ */
+var describeRingSegmentPath = function (centerX, centerY, innerRadius, outerRadius, startAngle, endAngle) {
+    var startOuter = polarToCartesian(centerX, centerY, outerRadius, endAngle);
+    var endOuter = polarToCartesian(centerX, centerY, outerRadius, startAngle);
+    var startInner = polarToCartesian(centerX, centerY, innerRadius, startAngle);
+    var endInner = polarToCartesian(centerX, centerY, innerRadius, endAngle);
+    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+    return [
+        "M",
+        startOuter.x,
+        startOuter.y,
+        "A",
+        outerRadius,
+        outerRadius,
+        0,
+        largeArcFlag,
+        0,
+        endOuter.x,
+        endOuter.y,
+        "L",
+        startInner.x,
+        startInner.y,
+        "A",
+        innerRadius,
+        innerRadius,
+        0,
+        largeArcFlag,
+        1,
+        endInner.x,
+        endInner.y,
+        "Z",
+    ].join(" ");
+};
+/**
+ * Creates an SVG path for an arc that draws clockwise
+ * Used for stroke-dashoffset animation that reveals clockwise
+ */
+var describeArcPathClockwise = function (centerX, centerY, radius, startAngle, endAngle) {
+    var start = polarToCartesian(centerX, centerY, radius, startAngle);
+    var end = polarToCartesian(centerX, centerY, radius, endAngle);
+    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+    return [
+        "M",
+        start.x,
+        start.y,
+        "A",
+        radius,
+        radius,
+        0,
+        largeArcFlag,
+        1, // clockwise sweep
+        end.x,
+        end.y,
+    ].join(" ");
+};
+/**
+ * Converts a hex color to RGB components
+ */
+var hexToRgb = function (value) {
+    var normalized = value.replace("#", "");
+    if (normalized.length !== 3 && normalized.length !== 6) {
+        return null;
+    }
+    var expanded = normalized.length === 3
+        ? normalized
+            .split("")
+            .map(function (char) { return char + char; })
+            .join("")
+        : normalized;
+    var numberValue = Number.parseInt(expanded, 16);
+    if (Number.isNaN(numberValue)) {
+        return null;
+    }
+    return {
+        r: (numberValue >> 16) & 255,
+        g: (numberValue >> 8) & 255,
+        b: numberValue & 255,
+    };
+};
+/**
+ * Interpolates between two hex colors
+ */
+var interpolateHexColor = function (from, to, factor) {
+    var start = hexToRgb(from);
+    var end = hexToRgb(to);
+    if (!start || !end) {
+        return from;
+    }
+    var safeFactor = clamp(factor, 0, 1);
+    var r = Math.round(start.r + (end.r - start.r) * safeFactor);
+    var g = Math.round(start.g + (end.g - start.g) * safeFactor);
+    var b = Math.round(start.b + (end.b - start.b) * safeFactor);
+    return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
+};
+
+export { clamp, describeArcPathClockwise, describeRingSegmentPath, hexToRgb, interpolateHexColor, polarToCartesian };

package/dist/components/charts/FunnelChart/FunnelChart.animations.js

@@ -0,0 +1,106 @@
+/**
+ * Animation variants for FunnelChart segments
+ */
+var segmentVariants = {
+    hidden: {
+        opacity: 0,
+        scaleX: 0.8,
+    },
+    visible: function (index) { return ({
+        opacity: 1,
+        scaleX: 1,
+        transition: {
+            delay: index * 0.08,
+            duration: 0.4,
+            ease: [0.25, 0.46, 0.45, 0.94], // easeOutQuad
+        },
+    }); },
+    exit: {
+        opacity: 0,
+        scaleX: 0.8,
+        transition: {
+            duration: 0.2,
+        },
+    },
+};
+/**
+ * Animation variants for vertical orientation segments
+ */
+var verticalSegmentVariants = {
+    hidden: {
+        opacity: 0,
+        scaleY: 0.8,
+    },
+    visible: function (index) { return ({
+        opacity: 1,
+        scaleY: 1,
+        transition: {
+            delay: index * 0.08,
+            duration: 0.4,
+            ease: [0.25, 0.46, 0.45, 0.94],
+        },
+    }); },
+    exit: {
+        opacity: 0,
+        scaleY: 0.8,
+        transition: {
+            duration: 0.2,
+        },
+    },
+};
+/**
+ * Animation variants for labels
+ */
+var labelVariants = {
+    hidden: {
+        opacity: 0,
+        y: -10,
+    },
+    visible: function (index) { return ({
+        opacity: 1,
+        y: 0,
+        transition: {
+            delay: index * 0.08 + 0.2,
+            duration: 0.3,
+            ease: 'easeOut',
+        },
+    }); },
+};
+/**
+ * Animation variants for conversion badges
+ */
+var badgeVariants = {
+    hidden: {
+        opacity: 0,
+        scale: 0.8,
+    },
+    visible: function (index) { return ({
+        opacity: 1,
+        scale: 1,
+        transition: {
+            delay: index * 0.08 + 0.3,
+            duration: 0.25,
+            ease: 'easeOut',
+        },
+    }); },
+};
+/**
+ * Animation variants for summary box
+ */
+var summaryVariants = {
+    hidden: {
+        opacity: 0,
+        x: 20,
+    },
+    visible: {
+        opacity: 1,
+        x: 0,
+        transition: {
+            delay: 0.5,
+            duration: 0.3,
+            ease: 'easeOut',
+        },
+    },
+};
+
+export { badgeVariants, labelVariants, segmentVariants, summaryVariants, verticalSegmentVariants };

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { FunnelChartProps } from './FunnelChart.types';
+import React from "react";
+import type { FunnelChartProps } from "./FunnelChart.types";
 /**
  * FunnelChart Component
  *