flikkui 0.1.0-beta.11

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

@@ -0,0 +1,27 @@
+import { LoaderSize, LoaderColor } from "./Loader.types";
+/**
+ * Internal theme structure for the Loader component
+ */
+interface LoaderTheme {
+    baseStyle: string;
+    circularStyle: string;
+    linearContainerStyle: string;
+    linearTrackStyle: string;
+    linearBarStyle: string;
+    linearLabelStyle: string;
+    sizes: Record<LoaderSize, {
+        circular: string;
+        linear: string;
+    }>;
+    colors: Record<LoaderColor, {
+        circular: string;
+        linear: string;
+    }>;
+    animation: string;
+}
+/**
+ * Default theme for the Loader component
+ * Uses production-ready CSS variables from global.scss
+ */
+export declare const loaderTheme: LoaderTheme;
+export {};

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

@@ -0,0 +1,71 @@
+/**
+ * Loader component props
+ * Supports both circular (spinner) and linear (progress bar) variants
+ */
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The variant of the loader
+     * @default "circular"
+     */
+    variant?: LoaderVariant;
+    /**
+     * The size of the loader
+     * @default "md"
+     */
+    size?: LoaderSize;
+    /**
+     * The color of the loader
+     * @default "primary"
+     */
+    color?: LoaderColor;
+    /**
+     * Current progress value (0-100)
+     * Only applies to linear variant
+     * If not provided, shows indeterminate loading animation
+     */
+    value?: number;
+    /**
+     * Maximum value for progress
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Show percentage label
+     * Only applies to linear variant with value prop
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Custom label text (overrides percentage)
+     * Only applies to linear variant
+     */
+    label?: string;
+    /**
+     * Custom CSS class to apply to the loader
+     */
+    className?: string;
+    /**
+     * Theme overrides for the loader
+     */
+    theme?: LoaderThemeOverrides;
+}
+export type LoaderVariant = "circular" | "linear";
+export type LoaderSize = "sm" | "md" | "lg";
+export type LoaderColor = "primary" | "success" | "warning" | "danger" | "muted";
+export interface LoaderThemeOverrides {
+    baseStyle?: string;
+    circularStyle?: string;
+    linearContainerStyle?: string;
+    linearTrackStyle?: string;
+    linearBarStyle?: string;
+    linearLabelStyle?: string;
+    sizes?: Partial<Record<LoaderSize, {
+        circular: string;
+        linear: string;
+    }>>;
+    colors?: Partial<Record<LoaderColor, {
+        circular: string;
+        linear: string;
+    }>>;
+    animation?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Loader } from './Loader';
+export type { LoaderProps, LoaderVariant, LoaderSize, LoaderColor } from './Loader.types';

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MasonryProps } from './Masonry.types';
+declare const Masonry: React.FC<MasonryProps>;
+export { Masonry };

package/dist/components/core/Masonry/Masonry.js

@@ -0,0 +1,215 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { getMasonryTheme } from './Masonry.theme.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+
+var Masonry = function (_a) {
+    var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 3 : _b, _c = _a.gap, gap = _c === void 0 ? 16 : _c, gapBreakpoints = _a.gapBreakpoints, className = _a.className, style = _a.style, _d = _a.minColumns, minColumns = _d === void 0 ? 1 : _d, _e = _a.maxColumns, maxColumns = _e === void 0 ? 10 : _e, _f = _a.sequential, sequential = _f === void 0 ? false : _f, themeOverrides = _a.themeOverrides, _g = _a.loading, loading = _g === void 0 ? false : _g, props = __rest(_a, ["children", "columns", "gap", "gapBreakpoints", "className", "style", "minColumns", "maxColumns", "sequential", "themeOverrides", "loading"]);
+    var containerRef = useRef(null);
+    var _h = useState(typeof columns === 'number' ? columns : 3), currentColumns = _h[0], setCurrentColumns = _h[1];
+    var _j = useState(gap), currentGap = _j[0], setCurrentGap = _j[1];
+    var _k = useState(0), containerWidth = _k[0], setContainerWidth = _k[1];
+    // Get the theme with any overrides applied
+    var theme = getMasonryTheme(themeOverrides);
+    // Calculate responsive columns and gap
+    var calculateLayout = useCallback(function () {
+        if (!containerRef.current)
+            return;
+        // Use getBoundingClientRect for more accurate width measurement
+        var containerRect = containerRef.current.getBoundingClientRect();
+        var width = Math.floor(containerRect.width);
+        // Only update if width actually changed to prevent unnecessary re-renders
+        if (width !== containerWidth && width > 0) {
+            setContainerWidth(width);
+        }
+        // Handle responsive columns
+        if (typeof columns === 'object') {
+            var breakpoints = Object.keys(columns)
+                .map(Number)
+                .sort(function (a, b) { return a - b; });
+            var newColumns = 3; // Default fallback
+            for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+                var breakpoint = breakpoints_1[_i];
+                if (width >= breakpoint) {
+                    newColumns = columns[breakpoint];
+                }
+            }
+            // Ensure columns are within min/max bounds
+            newColumns = Math.min(Math.max(newColumns, minColumns), maxColumns);
+            setCurrentColumns(newColumns);
+        }
+        else {
+            var clampedColumns = Math.min(Math.max(columns, minColumns), maxColumns);
+            setCurrentColumns(clampedColumns);
+        }
+        // Handle responsive gap
+        if (gapBreakpoints) {
+            var gapBreakpointKeys = Object.keys(gapBreakpoints)
+                .map(Number)
+                .sort(function (a, b) { return a - b; });
+            var newGap = gap;
+            for (var _a = 0, gapBreakpointKeys_1 = gapBreakpointKeys; _a < gapBreakpointKeys_1.length; _a++) {
+                var breakpoint = gapBreakpointKeys_1[_a];
+                if (width >= breakpoint) {
+                    newGap = gapBreakpoints[breakpoint];
+                }
+            }
+            setCurrentGap(newGap);
+        }
+        else {
+            setCurrentGap(gap);
+        }
+    }, [columns, gap, gapBreakpoints, minColumns, maxColumns, containerWidth]);
+    // Arrange items in masonry layout
+    var arrangeItems = useCallback(function () {
+        if (!containerRef.current)
+            return;
+        var container = containerRef.current;
+        var wrappers = Array.from(container.children);
+        if (wrappers.length === 0)
+            return;
+        // Get fresh container width to avoid stale closure issues
+        var currentContainerWidth = container.offsetWidth;
+        // Calculate column width
+        var availableWidth = currentContainerWidth - (currentGap * (currentColumns - 1));
+        var columnWidth = Math.floor(availableWidth / currentColumns);
+        if (columnWidth <= 0)
+            return; // Prevent invalid layouts
+        // Initialize column heights
+        var columnHeights = new Array(currentColumns).fill(0);
+        // PHASE 1: READ - Measure all wrapper heights first (prevents layout thrashing)
+        var wrapperHeights = [];
+        wrappers.forEach(function (wrapper) {
+            // Temporarily reset positioning to measure natural height
+            var originalPosition = wrapper.style.position;
+            var originalLeft = wrapper.style.left;
+            var originalTop = wrapper.style.top;
+            // Set width and reset positioning for accurate measurement
+            wrapper.style.width = "".concat(columnWidth, "px");
+            wrapper.style.position = 'static';
+            wrapper.style.left = '';
+            wrapper.style.top = '';
+            // Force layout recalculation to get accurate height
+            void wrapper.offsetHeight;
+            var height = wrapper.offsetHeight;
+            wrapperHeights.push(height > 0 ? height : 0);
+            // Restore original positioning (will be overwritten in write phase, but keeps state consistent)
+            wrapper.style.position = originalPosition;
+            wrapper.style.left = originalLeft;
+            wrapper.style.top = originalTop;
+        });
+        // PHASE 2: WRITE - Position all wrappers (batch all DOM writes)
+        wrappers.forEach(function (wrapper, index) {
+            // Set positioning styles
+            wrapper.style.position = 'absolute';
+            wrapper.style.width = "".concat(columnWidth, "px");
+            var targetColumn;
+            if (sequential) {
+                // Sequential placement: round-robin distribution
+                targetColumn = index % currentColumns;
+            }
+            else {
+                // Optimal placement: shortest column
+                targetColumn = columnHeights.indexOf(Math.min.apply(Math, columnHeights));
+            }
+            // Calculate position
+            var left = targetColumn * (columnWidth + currentGap);
+            var top = columnHeights[targetColumn];
+            // Position the wrapper
+            wrapper.style.left = "".concat(left, "px");
+            wrapper.style.top = "".concat(top, "px");
+            // Update column height using pre-measured height
+            var itemHeight = wrapperHeights[index];
+            if (itemHeight > 0) {
+                columnHeights[targetColumn] = top + itemHeight + currentGap;
+            }
+        });
+        // Set final container height after all items are positioned
+        requestAnimationFrame(function () {
+            var maxHeight = Math.max.apply(Math, columnHeights) - currentGap;
+            container.style.height = "".concat(Math.max(0, maxHeight), "px");
+        });
+    }, [currentColumns, currentGap, sequential]);
+    // Handle container resize with ResizeObserver for better performance
+    useEffect(function () {
+        if (!containerRef.current)
+            return;
+        var resizeTimeoutId;
+        var resizeObserver = new ResizeObserver(function (_entries) {
+            // Debounce resize events to prevent excessive recalculations
+            clearTimeout(resizeTimeoutId);
+            resizeTimeoutId = setTimeout(function () {
+                calculateLayout();
+            }, 100);
+        });
+        // Fallback window resize handler for older browsers
+        var handleWindowResize = function () {
+            clearTimeout(resizeTimeoutId);
+            resizeTimeoutId = setTimeout(function () {
+                calculateLayout();
+            }, 100);
+        };
+        resizeObserver.observe(containerRef.current);
+        window.addEventListener('resize', handleWindowResize);
+        return function () {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', handleWindowResize);
+            clearTimeout(resizeTimeoutId);
+        };
+    }, [calculateLayout]);
+    // Initial layout calculation and arrangement
+    useEffect(function () {
+        // Wait for next tick to ensure container is mounted and measured
+        var timer = setTimeout(function () {
+            calculateLayout();
+            // Only arrange items if we have a valid container width
+            if (containerWidth > 0) {
+                arrangeItems();
+            }
+        }, 0);
+        return function () { return clearTimeout(timer); };
+    }, [calculateLayout, arrangeItems, children, containerWidth]);
+    // Re-arrange when children change (with debouncing)
+    useEffect(function () {
+        var timeoutId;
+        var observer = new MutationObserver(function () {
+            // Debounce multiple rapid changes
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(function () {
+                arrangeItems();
+            }, 10);
+        });
+        if (containerRef.current) {
+            observer.observe(containerRef.current, {
+                childList: true,
+                subtree: false, // Only watch direct children, not nested changes
+            });
+        }
+        return function () {
+            observer.disconnect();
+            clearTimeout(timeoutId);
+        };
+    }, [arrangeItems]);
+    // Generate container classes
+    var containerClasses = cn(theme.container.base, loading && theme.container.loading, className);
+    // Wrap each child in a positioning div with theme styles
+    var wrappedChildren = React__default.Children.map(children, function (child, index) {
+        if (!React__default.isValidElement(child)) {
+            return child;
+        }
+        var wrapperClasses = cn(theme.item.base, theme.animations.transition);
+        return (React__default.createElement(motion.div, { key: child.key || index, className: wrapperClasses, "data-masonry-item": true, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, scale: 0.95 }, transition: {
+                duration: 0.4,
+                ease: [0.2, 0.65, 0.3, 0.9], // Subtle spring-like ease
+                delay: index * 0.05, // Stagger effect
+            } }, child));
+    });
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: containerClasses, style: __assign(__assign({}, style), { 
+            // Ensure container has minimum dimensions for proper layout calculation
+            minHeight: loading ? '200px' : undefined }) }, props),
+        React__default.createElement(AnimatePresence, { mode: "popLayout" }, wrappedChildren)));
+};
+
+export { Masonry };

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

@@ -0,0 +1,9 @@
+import { MasonryTheme, MasonryThemeOverrides } from './Masonry.types';
+/**
+ * Default theme for the Masonry component
+ */
+export declare const masonryTheme: MasonryTheme;
+/**
+ * Apply theme overrides to the default theme
+ */
+export declare const getMasonryTheme: (overrides?: MasonryThemeOverrides) => MasonryTheme;

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

@@ -0,0 +1,36 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+
+/**
+ * Default theme for the Masonry component
+ */
+var masonryTheme = {
+    // Container styles
+    container: {
+        base: "relative w-full overflow-hidden",
+        loading: "opacity-70 pointer-events-none",
+    },
+    // Item wrapper styles (auto-applied to each child wrapper)
+    item: {
+        base: "relative rounded-[var(--form-rounded)] border border-[var(--color-border)] overflow-hidden",
+    },
+    // Animation classes
+    animations: {
+        transition: "transition-[left,top,width,height] duration-400 ease-in-out",
+        enter: "opacity-0 scale-95",
+        exit: "opacity-100 scale-100",
+    },
+};
+/**
+ * Apply theme overrides to the default theme
+ */
+var getMasonryTheme = function (overrides) {
+    if (!overrides)
+        return masonryTheme;
+    return {
+        container: __assign(__assign({}, masonryTheme.container), overrides.container),
+        item: __assign(__assign({}, masonryTheme.item), overrides.item),
+        animations: __assign(__assign({}, masonryTheme.animations), overrides.animations),
+    };
+};
+
+export { getMasonryTheme, masonryTheme };

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

@@ -0,0 +1,49 @@
+import React from "react";
+/**
+ * Theme configuration for the Masonry component
+ */
+export interface MasonryTheme {
+    container: {
+        base: string;
+        loading: string;
+    };
+    item: {
+        base: string;
+    };
+    animations: {
+        transition: string;
+        enter: string;
+        exit: string;
+    };
+}
+/**
+ * Masonry theme overrides interface for customization
+ */
+export interface MasonryThemeOverrides {
+    container?: Partial<MasonryTheme['container']>;
+    item?: Partial<MasonryTheme['item']>;
+    animations?: Partial<MasonryTheme['animations']>;
+}
+/**
+ * Masonry component props
+ */
+export interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Children elements to be arranged in masonry layout */
+    children: React.ReactNode;
+    /** Number of columns (static) or breakpoint configuration (responsive) */
+    columns?: number | Record<number, number>;
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Gap configuration for different breakpoints */
+    gapBreakpoints?: Record<number, number>;
+    /** Minimum columns count */
+    minColumns?: number;
+    /** Maximum columns count */
+    maxColumns?: number;
+    /** Enable sequential placement (items placed in order vs optimal placement) */
+    sequential?: boolean;
+    /** Theme overrides for customizing appearance */
+    themeOverrides?: MasonryThemeOverrides;
+    /** Loading state */
+    loading?: boolean;
+}

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

@@ -0,0 +1,3 @@
+export { Masonry } from './Masonry';
+export { masonryTheme, getMasonryTheme } from './Masonry.theme';
+export type { MasonryProps, MasonryThemeOverrides, MasonryTheme } from './Masonry.types';

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { MetricProps } from "./Metric.types";
+export default function Metric({ value, label, description, trendValue, trendDirection, trendChart, size, color, icon, noBorder, className, ...props }: MetricProps): React.JSX.Element;

package/dist/components/core/Metric/Metric.js

@@ -0,0 +1,32 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { metricTheme } from './Metric.theme.js';
+import { Badge } from '../Badge/Badge.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ArrowTrendingUpIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ArrowTrendingDownIcon.js';
+
+function Metric(_a) {
+    var value = _a.value, label = _a.label, description = _a.description, trendValue = _a.trendValue, _b = _a.trendDirection, trendDirection = _b === void 0 ? "up" : _b, trendChart = _a.trendChart, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.color, color = _d === void 0 ? "primary" : _d, icon = _a.icon, _e = _a.noBorder, noBorder = _e === void 0 ? false : _e, className = _a.className, props = __rest(_a, ["value", "label", "description", "trendValue", "trendDirection", "trendChart", "size", "color", "icon", "noBorder", "className"]);
+    var trendIcon = trendDirection === "up" ? (React__default.createElement(ForwardRef, { className: "size-3.5", strokeWidth: 2.5 })) : (React__default.createElement(ForwardRef$1, { className: "size-3.5", strokeWidth: 2.5 }));
+    var sizeStyles = metricTheme.sizes[size];
+    return (React__default.createElement("div", __assign({ className: cn(metricTheme.baseStyle, metricTheme.colorStyles[color], sizeStyles.container, noBorder && "border-transparent", className), "data-color": color, "data-size": size }, props),
+        React__default.createElement("div", { className: "flex flex-col gap-3 " },
+            React__default.createElement("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding) },
+                icon && (React__default.createElement("div", { className: cn(metricTheme.iconContainerStyle, metricTheme.iconContainerColorStyles[color], sizeStyles.iconContainer), "data-color": color }, icon)),
+                React__default.createElement("div", { className: "flex flex-col flex-1" },
+                    React__default.createElement("div", { className: cn(metricTheme.labelStyle, sizeStyles.label) }, label),
+                    React__default.createElement("div", { className: "flex items-center gap-2" },
+                        React__default.createElement("div", { className: cn(metricTheme.valueStyle, sizeStyles.value) }, value),
+                        trendValue && (React__default.createElement("div", { className: "flex items-center gap-1" },
+                            React__default.createElement("div", { className: cn("rounded-full p-1 flex flex-shrink-0 w-fit h-fit", trendDirection === "up"
+                                    ? "bg-[var(--color-success-100)] text-[var(--color-success)]"
+                                    : "bg-[var(--color-danger-100)] text-[var(--color-danger)]") }, trendIcon),
+                            React__default.createElement(Badge, { color: trendDirection === "up" ? "success" : "danger", variant: "ghost", className: cn("!bg-transparent p-0 font-semibold !gap-1 !ring-0", trendDirection === "up"
+                                    ? "!text-[var(--color-success)]"
+                                    : "!text-[var(--color-danger)]") }, trendValue)))),
+                    description && (React__default.createElement("div", { className: cn(metricTheme.descriptionStyle, sizeStyles.description) }, description)))),
+            trendChart && (React__default.createElement("div", { className: "w-full h-12 flex-shrink-0 -mt-4" }, trendChart)))));
+}
+
+export { Metric as default };

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

@@ -0,0 +1,6 @@
+import { MetricTheme } from "./Metric.types";
+/**
+ * Default theme for the Metric component
+ * Following Button component pattern with data attributes
+ */
+export declare const metricTheme: MetricTheme;

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

@@ -0,0 +1,68 @@
+/**
+ * Default theme for the Metric component
+ * Following Button component pattern with data attributes
+ */
+var metricTheme = {
+    // Base container styles
+    baseStyle: "rounded-2xl glass-effect transition-colors duration-200 overflow-hidden",
+    // Container border colors
+    colorStyles: {
+        // neutral: 'data-[color=neutral]:border-[var(--color-border)]',
+        // primary: 'data-[color=primary]:border-[var(--color-border)]',
+        // success: 'data-[color=success]:border-[var(--color-border)]',
+        // warning: 'data-[color=warning]:border-[var(--color-border)]',
+        // danger: 'data-[color=danger]:border-[var(--color-border)]',
+        neutral: "",
+        primary: "",
+        success: "",
+        warning: "",
+        danger: "",
+    },
+    // Icon container colors - applied directly with data attributes
+    iconContainerColorStyles: {
+        neutral: "data-[color=neutral]:bg-gray-100 " +
+            "data-[color=neutral]:text-[var(--color-text-primary)]",
+        primary: "data-[color=primary]:bg-[var(--color-primary-100)] " +
+            "data-[color=primary]:text-[var(--color-primary)] data-[color=primary]:shadow-blue-500/20",
+        success: "data-[color=success]:bg-[var(--color-success-50)] " +
+            "data-[color=success]:text-[var(--color-success)] data-[color=success]:shadow-green-500/20",
+        warning: "data-[color=warning]:bg-[var(--color-warning-50)] " +
+            "data-[color=warning]:text-[var(--color-warning)] data-[color=warning]:shadow-yellow-500/20",
+        danger: "data-[color=danger]:bg-[var(--color-danger-50)] " +
+            "data-[color=danger]:text-[var(--color-danger)] data-[color=danger]:shadow-rose-400/20",
+    },
+    // Size variants for container and sub-elements
+    sizes: {
+        sm: {
+            container: "", // Padding moved to content section
+            contentPadding: "p-3",
+            iconContainer: "size-10",
+            label: "text-xs",
+            value: "text-xl",
+            description: "text-xs mt-1",
+        },
+        md: {
+            container: "", // Padding moved to content section
+            contentPadding: "p-4",
+            iconContainer: "size-14",
+            label: "text-sm",
+            value: "text-2xl",
+            description: "text-xs mt-0.5",
+        },
+        lg: {
+            container: "", // Padding moved to content section
+            contentPadding: "p-5",
+            iconContainer: "size-16",
+            label: "text-base",
+            value: "text-3xl",
+            description: "text-sm mt-1",
+        },
+    },
+    // Common element styles
+    labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-1",
+    valueStyle: "font-bold text-[var(--color-text-primary)] tracking-tight",
+    descriptionStyle: "text-[var(--color-text-secondary)]/80",
+    iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5 border-t glass-effect !to-transparent !ring-0 shadow-lg",
+};
+
+export { metricTheme };

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

@@ -0,0 +1,73 @@
+import React from 'react';
+export type MetricSize = 'sm' | 'md' | 'lg';
+export type MetricColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+export type TrendDirection = 'up' | 'down';
+export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The main value to display (number or formatted string)
+     */
+    value: string | number;
+    /**
+     * Label describing the metric
+     */
+    label: string;
+    /**
+     * Optional description or secondary text
+     */
+    description?: string;
+    /**
+     * Trend value to display (e.g., "+10.34%", "-5.2%")
+     * Also acts as boolean - if provided, trend badge is shown
+     */
+    trendValue?: string;
+    /**
+     * Trend direction - determines icon and color
+     * @default 'up'
+     */
+    trendDirection?: TrendDirection;
+    /**
+     * Optional trend chart (can be LineChart, AreaChart, BarChart, etc.)
+     */
+    trendChart?: React.ReactNode;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: MetricSize;
+    /**
+     * Semantic color for icon and accents
+     * @default 'primary'
+     */
+    color?: MetricColor;
+    /**
+     * Optional icon to display
+     */
+    icon?: React.ReactNode;
+    /**
+     * Remove border from container
+     * @default false
+     */
+    noBorder?: boolean;
+    /**
+     * Custom className for styling overrides
+     */
+    className?: string;
+}
+export interface MetricTheme {
+    baseStyle: string;
+    colorStyles: Record<MetricColor, string>;
+    iconContainerColorStyles: Record<MetricColor, string>;
+    sizes: Record<MetricSize, {
+        container: string;
+        contentPadding: string;
+        iconContainer: string;
+        label: string;
+        value: string;
+        description: string;
+    }>;
+    labelStyle: string;
+    valueStyle: string;
+    descriptionStyle: string;
+    iconContainerStyle: string;
+}
+export type MetricThemeOverrides = Partial<MetricTheme>;

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

@@ -0,0 +1,3 @@
+export { default as Metric } from './Metric';
+export type { MetricProps, MetricSize, MetricVariant, MetricColor, MetricTheme, MetricThemeOverrides, } from './Metric.types';
+export { metricTheme } from './Metric.theme';

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

@@ -0,0 +1,9 @@
+import { Variants } from 'motion/react';
+/**
+ * Modal overlay animation variants
+ */
+export declare const modalOverlayAnimations: Variants;
+/**
+ * Modal content animation variants
+ */
+export declare const modalContentAnimations: Variants;