flikkui 0.1.0-beta.11

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

@@ -0,0 +1,176 @@
+import { ReactNode } from 'react';
+export interface ChartDataPoint {
+    [key: string]: string | number | null | undefined;
+}
+export interface ChartConfig {
+    [key: string]: {
+        label?: string;
+        color?: string;
+        theme?: string;
+        type?: 'bar' | 'line' | 'area';
+    };
+}
+export type ChartVariant = 'default' | 'minimal' | 'gradient';
+export type CurveType = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
+export interface ChartThemeOverrides {
+    baseStyle?: {
+        colors?: Partial<{
+            series: string[];
+            grid: string;
+            axis: string;
+            text: string;
+            background: string;
+            hover: string;
+            disabled: string;
+        }>;
+        opacity?: Partial<{
+            default: string;
+            hover: string;
+            disabled: string;
+        }>;
+        transitions?: Partial<{
+            default: string;
+            hover: string;
+        }>;
+    };
+    variants?: Partial<Record<ChartVariant, {
+        colors: string[];
+    }>>;
+}
+export declare const CHART_DEFAULTS: {
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly barRadius: 32;
+    readonly dotRadius: 4;
+    readonly cellRadius: 4;
+    readonly radius: 20;
+    readonly strokeWidth: 2;
+    readonly gap: 4;
+    readonly categoryGap: 16;
+    readonly curved: true;
+    readonly curveType: CurveType;
+    readonly fillOpacity: 0.3;
+    readonly showStroke: true;
+    readonly showDots: true;
+    readonly orientation: "vertical" | "horizontal";
+    readonly stacked: false;
+    readonly variant: ChartVariant;
+    readonly enableKeyboardNavigation: true;
+};
+export interface BaseChartProps {
+    data: ChartDataPoint[];
+    config: ChartConfig;
+    className?: string;
+    children?: ReactNode;
+    title?: string;
+    description?: string;
+    enableKeyboardNavigation?: boolean;
+}
+export interface StandardChartDisplayProps {
+    showGrid?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    variant?: ChartVariant;
+    theme?: ChartThemeOverrides;
+}
+export interface StandardVisualProps {
+    barRadius?: number;
+    dotRadius?: number;
+    cellRadius?: number;
+    radius?: number;
+    strokeWidth?: number;
+    gap?: number;
+    curved?: boolean;
+    curveType?: CurveType;
+    showDots?: boolean;
+    fillOpacity?: number;
+    showStroke?: boolean;
+    stacked?: boolean;
+}
+export interface BarChartSpecificProps {
+    orientation?: 'vertical' | 'horizontal';
+    categoryGap?: number;
+}
+export interface StandardAxisConfig {
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    tickFormatter?: (value: number) => string;
+    labelFormatter?: (item: any, index: number) => string;
+}
+export type LineChartData = ChartDataPoint;
+export type AreaChartData = ChartDataPoint;
+export type BarChartData = ChartDataPoint;
+export interface ChartContainerProps extends Omit<BaseChartProps, 'data' | 'config'> {
+    data?: ChartDataPoint[];
+    config?: ChartConfig;
+    minHeight?: string | number;
+    width?: string | number;
+    height?: string | number;
+}
+export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface ChartAnimationConfig {
+    duration?: number;
+    easing?: string;
+    delay?: number;
+}
+export interface ChartThemeConfig {
+    baseStyle: {
+        colors: {
+            series: string[];
+            grid: string;
+            axis: string;
+            text: string;
+            background: string;
+            hover: string;
+            disabled: string;
+        };
+        opacity: {
+            default: string;
+            hover: string;
+            disabled: string;
+        };
+        transitions: {
+            default: string;
+            hover: string;
+        };
+    };
+    variants: {
+        default: {
+            colors: string[];
+        };
+        minimal: {
+            colors: string[];
+        };
+        gradient: {
+            colors: string[];
+        };
+    };
+}
+export interface ChartTheme {
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        muted: string;
+        background: string;
+        foreground: string;
+        border: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}

package/dist/components/charts/utils/animation-utils.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Animation utilities for chart components
+ *
+ * Provides shared spring animation presets and helper functions
+ * to ensure consistent animations across all chart components.
+ */
+/**
+ * Spring animation configuration
+ */
+export interface SpringConfig {
+    type: 'spring';
+    stiffness: number;
+    damping: number;
+    delay?: number;
+}
+/**
+ * No animation configuration
+ */
+export interface NoAnimationConfig {
+    duration: 0;
+}
+/**
+ * Animation preset names
+ */
+export type AnimationPreset = 'smooth' | 'bouncy' | 'quick' | 'slow';
+/**
+ * Spring animation presets for circular charts
+ *
+ * These presets define the physics of spring animations:
+ * - stiffness: How quickly the animation reaches its target (higher = faster)
+ * - damping: How much the animation oscillates (lower = more bouncy)
+ */
+export declare const SPRING_PRESETS: Record<AnimationPreset, Omit<SpringConfig, 'type'>>;
+/**
+ * Get spring animation configuration for circular charts
+ *
+ * @param preset - The animation preset to use
+ * @param shouldReduceMotion - Whether to respect reduced motion preferences
+ * @param delay - Optional delay before animation starts (in seconds)
+ * @returns Animation configuration object for motion components
+ *
+ * @example
+ * ```tsx
+ * const animation = getSpringAnimation('smooth', shouldReduceMotion, 0.2);
+ * <motion.circle
+ *   animate={...}
+ *   transition={animation}
+ * />
+ * ```
+ */
+export declare function getSpringAnimation(preset?: AnimationPreset, shouldReduceMotion?: boolean | null, delay?: number): SpringConfig | NoAnimationConfig;
+/**
+ * Get useSpring configuration (for motion/react useSpring hook)
+ *
+ * @param preset - The animation preset to use
+ * @returns Spring configuration object for useSpring
+ *
+ * @example
+ * ```tsx
+ * const animatedValue = useSpring(value, getUseSpringConfig('bouncy'));
+ * ```
+ */
+export declare function getUseSpringConfig(preset?: AnimationPreset): {
+    stiffness: number;
+    damping: number;
+};
+/**
+ * Create staggered animation delay for multiple elements
+ *
+ * @param index - The element index
+ * @param staggerDelay - The delay between each element (in seconds)
+ * @returns The calculated delay for this element
+ *
+ * @example
+ * ```tsx
+ * rings.map((ring, index) => (
+ *   <motion.circle
+ *     transition={{ ...springConfig, delay: getStaggerDelay(index, 0.1) }}
+ *   />
+ * ))
+ * ```
+ */
+export declare function getStaggerDelay(index: number, staggerDelay?: number): number;
+/**
+ * Pre-configured animation settings for specific circular chart types
+ */
+export declare const CIRCULAR_CHART_ANIMATIONS: {
+    /**
+     * DonutChart: Smooth spring animation with slight delay
+     */
+    readonly donut: {
+        readonly preset: AnimationPreset;
+        readonly initialDelay: 0.2;
+    };
+    /**
+     * ActivityRings: Smooth spring with staggered rings
+     */
+    readonly activityRings: {
+        readonly preset: AnimationPreset;
+        readonly staggerDelay: 0.1;
+        readonly centerLabelDelay: 0.3;
+    };
+    /**
+     * GaugeChart: Bouncy animation for needle
+     */
+    readonly gauge: {
+        readonly preset: AnimationPreset;
+        readonly needleDelay: 0;
+        readonly valueDelay: 0.3;
+    };
+};

package/dist/components/charts/utils/chart-validation.d.ts

@@ -0,0 +1,79 @@
+import { ChartDataPoint, ChartConfig } from '../types/chart.types';
+/**
+ * Validation errors that can occur in chart components
+ */
+export interface ChartValidationError {
+    type: 'data' | 'config' | 'props' | 'calculation';
+    message: string;
+    field?: string;
+}
+/**
+ * Result of chart validation
+ */
+export interface ChartValidationResult {
+    isValid: boolean;
+    errors: ChartValidationError[];
+    warnings: ChartValidationError[];
+}
+/**
+ * Safe math operations to prevent division by zero and other edge cases
+ */
+export declare class SafeMath {
+    /**
+     * Safe division that returns 0 when dividing by zero
+     */
+    static divide(numerator: number, denominator: number, fallback?: number): number;
+    /**
+     * Safe percentage calculation
+     */
+    static percentage(value: number, total: number, fallback?: number): number;
+    /**
+     * Safe Math.max that handles empty arrays
+     */
+    static max(values: number[], fallback?: number): number;
+    /**
+     * Safe Math.min that handles empty arrays
+     */
+    static min(values: number[], fallback?: number): number;
+    /**
+     * Safe scale calculation for chart positioning
+     */
+    static scale(value: number, min: number, max: number, targetMin?: number, targetMax?: number): number;
+    /**
+     * Clamp a value between min and max
+     */
+    static clamp(value: number, min: number, max: number): number;
+}
+/**
+ * Validates chart data array
+ */
+export declare function validateChartData(data: unknown): ChartValidationResult;
+/**
+ * Validates chart configuration
+ */
+export declare function validateChartConfig(config: unknown): ChartValidationResult;
+/**
+ * Validates that data and config are compatible
+ */
+export declare function validateDataConfigCompatibility(data: ChartDataPoint[], config: ChartConfig): ChartValidationResult;
+/**
+ * Sanitizes chart data by removing invalid entries and normalizing values
+ */
+export declare function sanitizeChartData(data: ChartDataPoint[]): ChartDataPoint[];
+/**
+ * Calculates safe min/max values for chart scales
+ */
+export declare function calculateSafeScaleRange(data: ChartDataPoint[], config: ChartConfig, options?: {
+    minValue?: number;
+    maxValue?: number;
+    includeZero?: boolean;
+    padding?: number;
+}): {
+    min: number;
+    max: number;
+    hasValidData: boolean;
+};
+/**
+ * Comprehensive chart validation that combines all checks
+ */
+export declare function validateChart(data: unknown, config: unknown): ChartValidationResult;

package/dist/components/charts/utils/color-utils.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Color utilities for chart components
+ * Handles color extraction, manipulation, and theme integration
+ */
+/**
+ * Extracts the fill color class from a combined class string
+ * @param classString - Combined class string like "fill-primary-base stroke-primary-base"
+ * @returns The fill class or empty string
+ */
+export declare function extractFillClass(classString: string): string;
+/**
+ * Extracts the stroke color class from a combined class string
+ * @param classString - Combined class string like "fill-primary-base stroke-primary-base"
+ * @returns The stroke class or empty string
+ */
+export declare function extractStrokeClass(classString: string): string;
+/**
+ * Converts a Tailwind color class to a CSS variable
+ * @param colorClass - Tailwind color class like "fill-primary-base"
+ * @returns CSS variable string like "var(--color-primary-500)"
+ */
+export declare function colorClassToVariable(colorClass: string): string;
+/**
+ * Combines multiple Tailwind classes into a single class string
+ * @param classes - Array of class strings
+ * @returns Combined class string
+ */
+export declare function combineClasses(...classes: (string | undefined | null)[]): string;
+/**
+ * Creates a color class string for chart elements
+ * @param baseColor - Base color (e.g., "primary", "warning")
+ * @param type - Type of element ("fill", "stroke", "both")
+ * @param shade - Color shade (e.g., "base", "400", "500")
+ * @returns Tailwind class string
+ */
+export declare function createColorClass(baseColor: string, type?: 'fill' | 'stroke' | 'both', shade?: string): string;
+/**
+ * Generates a series of color classes for multiple data series
+ * @param baseColors - Array of base color names
+ * @param type - Type of element ("fill", "stroke", "both")
+ * @param shade - Color shade
+ * @returns Array of color class strings
+ */
+export declare function generateSeriesColors(baseColors: string[], type?: 'fill' | 'stroke' | 'both', shade?: string): string[];
+/**
+ * Default color palette for charts
+ */
+export declare const DEFAULT_CHART_COLORS: readonly ["primary", "warning", "success", "danger"];
+/**
+ * Extended color palette for charts with more options
+ */
+export declare const EXTENDED_CHART_COLORS: readonly ["primary", "warning", "success", "danger", "info", "purple", "pink", "indigo"];
+/**
+ * Minimal color palette for subtle charts
+ */
+export declare const MINIMAL_CHART_COLORS: readonly ["neutral", "slate", "gray", "zinc"];
+/**
+ * Generate a color palette for charts
+ */
+export declare function generateColorPalette(count: number, baseHue?: number): string[];
+/**
+ * Get contrast color (black or white) based on background color
+ */
+export declare function getContrastColor(backgroundColor: string): string;
+/**
+ * Convert HSL to hex color
+ */
+export declare function hslToHex(h: number, s: number, l: number): string;
+/**
+ * Lighten or darken a color
+ */
+export declare function adjustColorBrightness(color: string, amount: number): string;
+/**
+ * Comprehensive color mapping that handles all chart color class variations
+ * Returns CSS variable references to match actual chart element colors
+ * Only uses CSS variables that actually exist in the project
+ */
+export declare const getColorValue: (colorClass: string) => string;

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

@@ -0,0 +1,3 @@
+export { extractFillClass, extractStrokeClass, colorClassToVariable, combineClasses, createColorClass, generateSeriesColors, DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, generateColorPalette, getContrastColor, } from './color-utils';
+export { SafeMath, validateChart, validateChartData, validateChartConfig, validateDataConfigCompatibility, sanitizeChartData, calculateSafeScaleRange, type ChartValidationError, type ChartValidationResult, } from './chart-validation';
+export { getSpringAnimation, getUseSpringConfig, getStaggerDelay, SPRING_PRESETS, CIRCULAR_CHART_ANIMATIONS, type SpringConfig, type NoAnimationConfig, type AnimationPreset, } from './animation-utils';

package/dist/components/core/Accordion/Accordion.animations.d.ts

@@ -0,0 +1,9 @@
+import { Variants } from 'motion/react';
+/**
+ * Accordion animation variants for smooth, staggered open/close transitions
+ */
+export declare const accordionAnimations: Variants;
+/**
+ * Content animation variants for subtle slide-in effect after container expands
+ */
+export declare const accordionContentAnimations: Variants;

package/dist/components/core/Accordion/Accordion.animations.js

@@ -0,0 +1,45 @@
+/**
+ * Accordion animation variants for smooth, staggered open/close transitions
+ */
+var accordionAnimations = {
+    collapsed: {
+        height: 0,
+        opacity: 0,
+        transition: {
+            height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.25 }
+        }
+    },
+    open: {
+        height: 'auto',
+        opacity: 1,
+        transition: {
+            height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.3, delay: 0.1 }
+        }
+    }
+};
+/**
+ * Content animation variants for subtle slide-in effect after container expands
+ */
+var accordionContentAnimations = {
+    collapsed: {
+        opacity: 0,
+        y: -10,
+        transition: {
+            y: { duration: 0.2, ease: 'easeOut' },
+            opacity: { duration: 0.2 }
+        }
+    },
+    open: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            delay: 0.15, // Start after the container has begun expanding
+            y: { duration: 0.3, ease: 'easeOut' },
+            opacity: { duration: 0.3, ease: 'easeOut' }
+        }
+    }
+};
+
+export { accordionAnimations, accordionContentAnimations };

package/dist/components/core/Accordion/Accordion.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { AccordionProps, AccordionContextValue } from "./Accordion.types";
+export declare const useAccordionContext: () => AccordionContextValue;
+export declare const Accordion: {
+    ({ children, className, type, variant, collapsible, defaultValue, value, onValueChange, theme: themeOverrides, ...props }: AccordionProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Item: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/core/Accordion/Accordion.js

@@ -0,0 +1,55 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useContext, createContext, useState, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { accordionTheme } from './Accordion.theme.js';
+import { AccordionTrigger } from './AccordionTrigger.js';
+import { AccordionContent } from './AccordionContent.js';
+import { AccordionItem } from './AccordionItem.js';
+
+// Create context for the main Accordion component
+var AccordionContext = createContext(undefined);
+var useAccordionContext = function () {
+    var ctx = useContext(AccordionContext);
+    if (!ctx)
+        throw new Error("Accordion compound components must be used within <Accordion>");
+    return ctx;
+};
+var AccordionRoot = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.type, type = _b === void 0 ? "single" : _b, _c = _a.variant, variant = _c === void 0 ? "separated" : _c, _d = _a.collapsible, collapsible = _d === void 0 ? false : _d, defaultValue = _a.defaultValue, value = _a.value, onValueChange = _a.onValueChange, themeOverrides = _a.theme, props = __rest(_a, ["children", "className", "type", "variant", "collapsible", "defaultValue", "value", "onValueChange", "theme"]);
+    // State for uncontrolled component
+    var _e = useState(defaultValue || (type === "single" ? "" : [])), uncontrolledValue = _e[0], setUncontrolledValue = _e[1];
+    // Determine if component is controlled
+    var isControlled = value !== undefined;
+    var currentValue = isControlled ? value : uncontrolledValue;
+    // Handler for value changes
+    var handleValueChange = useCallback(function (newValue) {
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    }, [isControlled, onValueChange]);
+    // Merge theme with any overrides
+    var theme = __assign(__assign({}, accordionTheme), (themeOverrides || {}));
+    // Context value to be provided to children
+    var contextValue = {
+        type: type,
+        variant: variant,
+        collapsible: collapsible,
+        value: currentValue,
+        onValueChange: handleValueChange,
+        theme: theme,
+    };
+    // Select base style based on variant
+    var baseStyleClass = variant === "stacked" ? theme.baseStyleStacked : theme.baseStyle;
+    return (React__default.createElement(AccordionContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ className: cn(baseStyleClass, className), "data-variant": variant }, props), children)));
+};
+AccordionRoot.displayName = "Accordion";
+// Attach compound subcomponents
+var Accordion = Object.assign(AccordionRoot, {
+    Item: AccordionItem,
+    Trigger: AccordionTrigger,
+    Content: AccordionContent,
+});
+
+export { Accordion, useAccordionContext };

package/dist/components/core/Accordion/Accordion.theme.d.ts

@@ -0,0 +1,10 @@
+export interface AccordionTheme {
+    baseStyle: string;
+    baseStyleStacked: string;
+    triggerStyle: string;
+    contentStyle: string;
+    contentInnerStyle: string;
+    itemStyle: string;
+    itemStyleStacked: string;
+}
+export declare const accordionTheme: AccordionTheme;

package/dist/components/core/Accordion/Accordion.theme.js

@@ -0,0 +1,18 @@
+var accordionTheme = {
+    // Base container styles for separated variant (default)
+    baseStyle: "w-full max-w-xl",
+    // Base container styles for stacked variant (unified card)
+    baseStyleStacked: "w-full max-w-xl border border-[var(--color-border)] rounded-[var(--form-rounded)] overflow-hidden",
+    // Item styles for separated variant (individual cards with spacing)
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-rounded)] bg-white overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
+    // Item styles for stacked variant (shared borders, no spacing)
+    itemStyleStacked: "bg-white border-t border-[var(--color-border)] first-of-type:border-t-0",
+    // Trigger styles (shared across variants)
+    triggerStyle: "flex w-full gap-3 items-center justify-between px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] [&[data-state=open]>svg]:rotate-180 cursor-pointer focus:outline-none transition-all flex justify-between",
+    // Content styles (shared across variants)
+    contentStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[500px] accordion-content overflow-hidden",
+    // Content inner wrapper styles
+    contentInnerStyle: "p-4 pb-2.5 pt-0",
+};
+
+export { accordionTheme };