flikkui 0.1.0-beta.2

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.types.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+export interface ChartTooltipProps {
+    content?: ReactNode;
+    cursor?: boolean | object;
+    wrapperStyle?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    contentStyle?: React.CSSProperties;
+    itemStyle?: React.CSSProperties;
+    active?: boolean;
+    payload?: any[];
+    label?: string | number;
+    className?: string;
+    position?: {
+        x: number;
+        y: number;
+    };
+}
+export interface ChartTooltipContentProps {
+    active?: boolean;
+    payload?: any[];
+    label?: string | number;
+    labelKey?: string;
+    nameKey?: string;
+    indicator?: 'dot' | 'line' | 'dashed';
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    className?: string;
+}
+export interface MultiSeriesData {
+    category: string;
+    series: Array<{
+        key: string;
+        label?: string;
+        value: number | string;
+        color?: string;
+    }>;
+}
+export interface MultiSeriesChartTooltipProps extends Omit<ChartTooltipProps, 'content'> {
+    content?: ReactNode | MultiSeriesData;
+    chartType?: 'line' | 'bar' | 'area';
+    containerClassName?: string;
+    categoryClassName?: string;
+    seriesContainerClassName?: string;
+    seriesRowClassName?: string;
+    dotClassName?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+}

package/dist/components/charts/shared/ChartTooltip/ChartTooltipContent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChartTooltipContentProps } from './ChartTooltip.types';
+export declare function ChartTooltipContent({ active, payload, label, labelKey, nameKey, indicator, hideLabel, hideIndicator, className, }: ChartTooltipContentProps): React.JSX.Element | null;

package/dist/components/charts/shared/ChartTooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartTooltip } from './ChartTooltip';
+export { ChartTooltipContent } from './ChartTooltipContent';
+export type { ChartTooltipProps, ChartTooltipContentProps } from './ChartTooltip.types';

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

@@ -0,0 +1,7 @@
+export { ChartErrorBoundary, useChartErrorHandler } from './ChartErrorBoundary';
+export { ChartCrosshair } from './ChartCrosshair';
+export { ChartMarker } from './ChartMarker';
+export { HorizontalGrid } from './ChartGrid';
+export { ChartText } from './ChartText';
+export { XAxis, YAxis } from './ChartAxis';
+export { ChartTooltip } from './ChartTooltip';

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

@@ -0,0 +1,6 @@
+import { ChartThemeConfig } from '../types/chart.types';
+/**
+ * Default theme for Chart components
+ * Uses Tailwind classes with CSS variables for consistency with the design system
+ */
+export declare const chartTheme: ChartThemeConfig;

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

@@ -0,0 +1,171 @@
+import { ReactNode } from 'react';
+export interface ChartDataPoint {
+    [key: string]: string | number | null | undefined;
+}
+export interface ChartConfig {
+    [key: string]: {
+        label?: string;
+        color?: string;
+        theme?: string;
+    };
+}
+export type ChartVariant = 'default' | 'minimal' | 'gradient';
+export type CurveType = 'linear' | 'monotone';
+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 showNullValues: true;
+    readonly radius: 4;
+    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;
+    showNullValues?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    variant?: ChartVariant;
+    theme?: ChartThemeOverrides;
+}
+export interface StandardVisualProps {
+    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/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,2 @@
+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';

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { AccordionProps, AccordionContextValue } from "./Accordion.types";
+export declare const useAccordionContext: () => AccordionContextValue;
+declare const _default: {
+    ({ children, className, type, 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>>;
+};
+export default _default;

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

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

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

@@ -0,0 +1,93 @@
+import React from "react";
+/**
+ * Accordion component props
+ */
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Accordion type - single allows only one item open, multiple allows many
+     */
+    type?: "single" | "multiple";
+    /**
+     * Whether accordion can be collapsed after being opened (for type="single")
+     */
+    collapsible?: boolean;
+    /**
+     * Default value(s) for the opened item(s)
+     */
+    defaultValue?: string | string[];
+    /**
+     * Controlled value(s) for the opened item(s)
+     */
+    value?: string | string[];
+    /**
+     * Callback when open state changes
+     */
+    onValueChange?: (value: string | string[]) => void;
+    /**
+     * Theme overrides
+     */
+    theme?: AccordionThemeOverrides;
+    children: React.ReactNode;
+}
+/**
+ * Accordion context value
+ */
+export interface AccordionContextValue {
+    type: "single" | "multiple";
+    collapsible: boolean;
+    value: string | string[] | undefined;
+    onValueChange: (value: string | string[]) => void;
+    theme: AccordionThemeOverrides & {
+        baseStyle: string;
+        triggerStyle: string;
+        contentStyle: string;
+    };
+}
+/**
+ * AccordionItem component props
+ */
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique value for the accordion item
+     */
+    value: string;
+    /**
+     * Optional className for styling
+     */
+    className?: string;
+    /**
+     * Item content
+     */
+    children: React.ReactNode;
+}
+/**
+ * AccordionItem context value - to be used by Trigger and Content
+ */
+export interface AccordionItemContextValue {
+    value: string;
+    isOpen: boolean;
+    toggle: () => void;
+}
+/**
+ * Trigger props
+ */
+export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Content props
+ */
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Theme overrides for Accordion
+ */
+export interface AccordionThemeOverrides {
+    baseStyle?: string;
+    triggerStyle?: string;
+    contentStyle?: string;
+    itemStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { AccordionContentProps } from "./Accordion.types";
+export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { AccordionItemProps, AccordionItemContextValue } from "./Accordion.types";
+export declare const useAccordionItemContext: () => AccordionItemContextValue;
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { AccordionTriggerProps } from "./Accordion.types";
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,5 @@
+import Accordion from "./Accordion";
+import { AccordionProps, AccordionTriggerProps, AccordionContentProps, AccordionItemProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides } from "./Accordion.types";
+export { Accordion };
+export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides, };
+export default Accordion;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { AvatarProps } from "./Avatar.types";
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export default Avatar;

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

@@ -0,0 +1,14 @@
+import { AvatarSize, AvatarStatus } from './Avatar.types';
+/**
+ * Internal theme structure for the Avatar component
+ */
+interface AvatarTheme {
+    baseStyle: string;
+    sizes: Record<AvatarSize, string>;
+    statuses: Record<AvatarStatus, string>;
+}
+/**
+ * Default theme for the Avatar component
+ */
+export declare const avatarTheme: AvatarTheme;
+export {};

package/dist/components/core/Avatar/Avatar.types.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'none';
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The source URL for the avatar image
+     */
+    src?: string;
+    /**
+     * Alternative text for the avatar image.
+     * Should describe the person or entity represented by the avatar.
+     * @default "Avatar"
+     */
+    alt?: string;
+    /**
+     * The size of the avatar
+     * @default "md"
+     */
+    size?: AvatarSize;
+    /**
+     * Optional status indicator
+     * @default "none"
+     */
+    status?: AvatarStatus;
+    /**
+     * Fallback content to display when image fails to load or no src is provided
+     */
+    fallback?: ReactNode;
+    /**
+     * ARIA role for the avatar
+     * Use "presentation" for purely decorative avatars
+     */
+    role?: string;
+    /**
+     * Whether to enable lazy loading for the image
+     * @default true
+     */
+    lazyLoad?: boolean;
+    /**
+     * Maximum number of times to retry loading the image if it fails
+     * @default 0
+     */
+    retryCount?: number;
+    /**
+     * Delay in milliseconds between retry attempts
+     * @default 1000
+     */
+    retryDelay?: number;
+    /**
+     * Additional contextual information about the avatar
+     * Useful for avatar groups or when more context is needed
+     */
+    contextualLabel?: string;
+    /**
+     * CSS class for the group positioning
+     * e.g. "-mr-3 ring-2 ring-white" for overlapping avatars
+     */
+    groupPosition?: string;
+    /**
+     * Whether to show a tooltip with the person's name on hover
+     * @default false
+     */
+    showTooltip?: boolean;
+}

package/dist/components/core/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarStatus, } from './Avatar.types';

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

@@ -0,0 +1,12 @@
+import { Variants } from "framer-motion";
+import { AvatarGroupDirection } from "./AvatarGroup.types";
+/**
+ * Animation variants for AvatarGroup hover effects
+ * Creates a creative sliding and focus effect where hovered avatars scale up
+ * while non-hovered avatars slide closer together and fade slightly
+ */
+export declare const getAvatarGroupVariants: (direction?: AvatarGroupDirection, shouldReduceMotion?: boolean | null) => Variants;
+/**
+ * Determines which animation state to use based on hover index
+ */
+export declare const getAnimationState: (currentIndex: number, hoveredIndex: number | null, enableAnimations: boolean) => string;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { AvatarGroupProps } from "./AvatarGroup.types";
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default AvatarGroup;