@maxal_studio/kratosjs-react 1.0.0

package/dist/components/utils/HintDisplay.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from './Icon';
+import { cn } from '../../utils/classNames';
+/**
+ * Reusable hint display component
+ * Shows hint text with optional icon and color
+ */
+export function HintDisplay({ hint, hintIcon, hintColor }) {
+    if (!hint)
+        return null;
+    return (_jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [hintIcon && (_jsx(Icon, { name: hintIcon, size: 14, className: cn('mt-0.5 shrink-0', hintColor || 'text-accent') })), _jsx("p", { className: cn('text-sm', hintColor || 'text-accent'), children: hint })] }));
+}

package/dist/components/utils/Icon.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import * as LucideIcons from 'lucide-react';
+export type IconName = string;
+export interface IconProps {
+    name: IconName;
+    size?: number | string;
+    color?: string;
+    className?: string;
+    strokeWidth?: number;
+}
+/**
+ * Icon component that renders Lucide icons
+ *
+ * @example
+ * <Icon name="Check" size={24} color="green" />
+ * <Icon name="X" className="text-red-500" />
+ *
+ * @see https://lucide.dev/icons for available icon names
+ */
+export declare const Icon: React.FC<IconProps>;
+export * from 'lucide-react';
+export { LucideIcons };

package/dist/components/utils/Icon.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LucideIcons from 'lucide-react';
+/**
+ * Icon component that renders Lucide icons
+ *
+ * @example
+ * <Icon name="Check" size={24} color="green" />
+ * <Icon name="X" className="text-red-500" />
+ *
+ * @see https://lucide.dev/icons for available icon names
+ */
+export const Icon = ({ name, size = 24, color, className = '', strokeWidth = 2 }) => {
+    const IconComponent = LucideIcons[name];
+    if (!IconComponent) {
+        console.warn(`Icon "${name}" not found in Lucide icons`);
+        return null;
+    }
+    return _jsx(IconComponent, { size: size, color: color, className: className, strokeWidth: strokeWidth });
+};
+// Re-export all Lucide icons for direct use
+export * from 'lucide-react';
+export { LucideIcons };

package/dist/components/utils/MediaPreviewModal.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type MediaType = 'image' | 'video' | 'audio';
+export interface MediaPreviewModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    mediaUrl: string;
+    mediaType: MediaType;
+    title?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+}
+export declare function MediaPreviewModal({ isOpen, onClose, mediaUrl, mediaType, title, autoplay, controls, loop, muted, }: MediaPreviewModalProps): React.JSX.Element;

package/dist/components/utils/MediaPreviewModal.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Icon } from './Icon';
+import { translate } from '../../i18n/activeLocale';
+export function MediaPreviewModal({ isOpen, onClose, mediaUrl, mediaType, title, autoplay = false, controls = true, loop = false, muted = false, }) {
+    const mediaRef = useRef(null);
+    useEffect(() => {
+        if (isOpen && mediaRef.current && autoplay && (mediaType === 'video' || mediaType === 'audio')) {
+            mediaRef.current.play().catch(() => {
+                // Autoplay may be blocked by browser
+            });
+        }
+    }, [isOpen, autoplay, mediaType]);
+    useEffect(() => {
+        // Pause media when modal closes
+        if (!isOpen && mediaRef.current) {
+            mediaRef.current.pause();
+        }
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm", onClick: onClose, children: _jsxs("div", { className: "relative max-w-4xl w-full mx-4 bg-surface rounded-lg shadow-2xl overflow-hidden", onClick: e => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [_jsx("h3", { className: "text-lg font-semibold text-fg", children: title ||
+                                (mediaType === 'video'
+                                    ? 'Video Preview'
+                                    : mediaType === 'audio'
+                                        ? 'Audio Player'
+                                        : 'Image Preview') }), _jsx("button", { onClick: onClose, className: "p-2 rounded-full bg-hover hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors", title: translate('core:modal.close'), children: _jsx(Icon, { name: "X", size: 20, className: "text-fg" }) })] }), _jsx("div", { className: mediaType === 'video' ? 'p-4 bg-black' : 'p-4', children: mediaType === 'video' ? (_jsx("video", { ref: el => {
+                            mediaRef.current = el;
+                        }, src: mediaUrl, className: "w-full max-h-[70vh] object-contain", controls: controls, loop: loop, muted: muted, playsInline: true })) : mediaType === 'audio' ? (_jsxs("div", { className: "flex flex-col items-center gap-4 py-4", children: [_jsx("div", { className: "w-24 h-24 rounded-full bg-linear-to-br from-blue-600 to-purple-600 flex items-center justify-center", children: _jsx(Icon, { name: "Music", size: 48, className: "text-white" }) }), _jsx("audio", { ref: el => {
+                                    mediaRef.current = el;
+                                }, src: mediaUrl, className: "w-full max-w-md", controls: controls, loop: loop })] })) : (_jsx("img", { src: mediaUrl, alt: title || translate('core:common.preview'), className: "max-w-full max-h-[80vh] object-contain mx-auto rounded" })) })] }) }));
+}

package/dist/components/utils/ViewFieldWrapper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ViewFieldWrapperProps {
+    label?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Wrapper component for consistent view mode field styling
+ * Provides label/value layout with consistent spacing and typography
+ */
+export declare function ViewFieldWrapper({ label, children, className }: ViewFieldWrapperProps): React.JSX.Element;

package/dist/components/utils/ViewFieldWrapper.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+/**
+ * Wrapper component for consistent view mode field styling
+ * Provides label/value layout with consistent spacing and typography
+ */
+export function ViewFieldWrapper({ label, children, className }) {
+    return (_jsxs("div", { className: cn('grid grid-cols-3 gap-4 pb-2', className), children: [label && _jsxs("div", { className: "font-medium text-fg-secondary", children: [label, ":"] }), _jsx("div", { className: cn('text-fg', label ? 'col-span-2' : 'col-span-3'), children: children || _jsx("span", { className: "text-fg-secondary", children: "-" }) })] }));
+}

package/dist/components/utils/layoutHelpers.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Layout helper utilities for column span, column start, and grid classes.
+ *
+ * IMPORTANT: every Tailwind class must appear as a full literal string here.
+ * Tailwind v4 only generates utilities it can see while scanning the source —
+ * template-built class names (`grid-cols-${n}`) silently produce no CSS.
+ */
+/**
+ * Get Tailwind CSS classes for column span and column start.
+ * Supports both simple values and responsive objects.
+ */
+export declare function getColumnClasses(columnSpan?: number | string | Record<string, number | string>, columnStart?: number | Record<string, number>): string;
+/**
+ * Get Tailwind CSS grid classes based on columns configuration.
+ * Supports both simple numbers (applied from lg up) and responsive objects.
+ */
+export declare function getGridClasses(columns?: number | Record<string, number>, gapX?: string): string;
+/** Vertical rhythm for stacked form fields (single column) or grid rows (multi-column). */
+export declare function getFieldLayoutClasses(columns?: number | Record<string, number>): string;

package/dist/components/utils/layoutHelpers.js

@@ -0,0 +1,257 @@
+/**
+ * Layout helper utilities for column span, column start, and grid classes.
+ *
+ * IMPORTANT: every Tailwind class must appear as a full literal string here.
+ * Tailwind v4 only generates utilities it can see while scanning the source —
+ * template-built class names (`grid-cols-${n}`) silently produce no CSS.
+ */
+const GRID_COLS = {
+    base: {
+        1: 'grid-cols-1',
+        2: 'grid-cols-2',
+        3: 'grid-cols-3',
+        4: 'grid-cols-4',
+        5: 'grid-cols-5',
+        6: 'grid-cols-6',
+    },
+    sm: {
+        1: 'sm:grid-cols-1',
+        2: 'sm:grid-cols-2',
+        3: 'sm:grid-cols-3',
+        4: 'sm:grid-cols-4',
+        5: 'sm:grid-cols-5',
+        6: 'sm:grid-cols-6',
+    },
+    md: {
+        1: 'md:grid-cols-1',
+        2: 'md:grid-cols-2',
+        3: 'md:grid-cols-3',
+        4: 'md:grid-cols-4',
+        5: 'md:grid-cols-5',
+        6: 'md:grid-cols-6',
+    },
+    lg: {
+        1: 'lg:grid-cols-1',
+        2: 'lg:grid-cols-2',
+        3: 'lg:grid-cols-3',
+        4: 'lg:grid-cols-4',
+        5: 'lg:grid-cols-5',
+        6: 'lg:grid-cols-6',
+    },
+    xl: {
+        1: 'xl:grid-cols-1',
+        2: 'xl:grid-cols-2',
+        3: 'xl:grid-cols-3',
+        4: 'xl:grid-cols-4',
+        5: 'xl:grid-cols-5',
+        6: 'xl:grid-cols-6',
+    },
+    '2xl': {
+        1: '2xl:grid-cols-1',
+        2: '2xl:grid-cols-2',
+        3: '2xl:grid-cols-3',
+        4: '2xl:grid-cols-4',
+        5: '2xl:grid-cols-5',
+        6: '2xl:grid-cols-6',
+    },
+};
+const COL_SPAN = {
+    base: {
+        1: 'col-span-1',
+        2: 'col-span-2',
+        3: 'col-span-3',
+        4: 'col-span-4',
+        5: 'col-span-5',
+        6: 'col-span-6',
+        full: 'col-span-full',
+    },
+    sm: {
+        1: 'sm:col-span-1',
+        2: 'sm:col-span-2',
+        3: 'sm:col-span-3',
+        4: 'sm:col-span-4',
+        5: 'sm:col-span-5',
+        6: 'sm:col-span-6',
+        full: 'sm:col-span-full',
+    },
+    md: {
+        1: 'md:col-span-1',
+        2: 'md:col-span-2',
+        3: 'md:col-span-3',
+        4: 'md:col-span-4',
+        5: 'md:col-span-5',
+        6: 'md:col-span-6',
+        full: 'md:col-span-full',
+    },
+    lg: {
+        1: 'lg:col-span-1',
+        2: 'lg:col-span-2',
+        3: 'lg:col-span-3',
+        4: 'lg:col-span-4',
+        5: 'lg:col-span-5',
+        6: 'lg:col-span-6',
+        full: 'lg:col-span-full',
+    },
+    xl: {
+        1: 'xl:col-span-1',
+        2: 'xl:col-span-2',
+        3: 'xl:col-span-3',
+        4: 'xl:col-span-4',
+        5: 'xl:col-span-5',
+        6: 'xl:col-span-6',
+        full: 'xl:col-span-full',
+    },
+    '2xl': {
+        1: '2xl:col-span-1',
+        2: '2xl:col-span-2',
+        3: '2xl:col-span-3',
+        4: '2xl:col-span-4',
+        5: '2xl:col-span-5',
+        6: '2xl:col-span-6',
+        full: '2xl:col-span-full',
+    },
+};
+const COL_START = {
+    base: {
+        1: 'col-start-1',
+        2: 'col-start-2',
+        3: 'col-start-3',
+        4: 'col-start-4',
+        5: 'col-start-5',
+        6: 'col-start-6',
+        7: 'col-start-7',
+    },
+    sm: {
+        1: 'sm:col-start-1',
+        2: 'sm:col-start-2',
+        3: 'sm:col-start-3',
+        4: 'sm:col-start-4',
+        5: 'sm:col-start-5',
+        6: 'sm:col-start-6',
+        7: 'sm:col-start-7',
+    },
+    md: {
+        1: 'md:col-start-1',
+        2: 'md:col-start-2',
+        3: 'md:col-start-3',
+        4: 'md:col-start-4',
+        5: 'md:col-start-5',
+        6: 'md:col-start-6',
+        7: 'md:col-start-7',
+    },
+    lg: {
+        1: 'lg:col-start-1',
+        2: 'lg:col-start-2',
+        3: 'lg:col-start-3',
+        4: 'lg:col-start-4',
+        5: 'lg:col-start-5',
+        6: 'lg:col-start-6',
+        7: 'lg:col-start-7',
+    },
+    xl: {
+        1: 'xl:col-start-1',
+        2: 'xl:col-start-2',
+        3: 'xl:col-start-3',
+        4: 'xl:col-start-4',
+        5: 'xl:col-start-5',
+        6: 'xl:col-start-6',
+        7: 'xl:col-start-7',
+    },
+    '2xl': {
+        1: '2xl:col-start-1',
+        2: '2xl:col-start-2',
+        3: '2xl:col-start-3',
+        4: '2xl:col-start-4',
+        5: '2xl:col-start-5',
+        6: '2xl:col-start-6',
+        7: '2xl:col-start-7',
+    },
+};
+const BREAKPOINTS = ['sm', 'md', 'lg', 'xl', '2xl'];
+function spanClass(breakpoint, value) {
+    const key = value === 'full' ? 'full' : Number(value);
+    return COL_SPAN[breakpoint]?.[key];
+}
+/**
+ * Get Tailwind CSS classes for column span and column start.
+ * Supports both simple values and responsive objects.
+ */
+export function getColumnClasses(columnSpan, columnStart) {
+    const classes = [];
+    if (columnSpan) {
+        if (typeof columnSpan === 'number' || typeof columnSpan === 'string') {
+            const cls = spanClass('base', columnSpan);
+            if (cls)
+                classes.push(cls);
+        }
+        else if (typeof columnSpan === 'object') {
+            const span = columnSpan;
+            if (span.default) {
+                const cls = spanClass('base', span.default);
+                if (cls)
+                    classes.push(cls);
+            }
+            for (const bp of BREAKPOINTS) {
+                if (span[bp]) {
+                    const cls = spanClass(bp, span[bp]);
+                    if (cls)
+                        classes.push(cls);
+                }
+            }
+        }
+    }
+    if (columnStart) {
+        if (typeof columnStart === 'number') {
+            const cls = COL_START.base[columnStart];
+            if (cls)
+                classes.push(cls);
+        }
+        else if (typeof columnStart === 'object') {
+            const start = columnStart;
+            if (start.default) {
+                const cls = COL_START.base[start.default];
+                if (cls)
+                    classes.push(cls);
+            }
+            for (const bp of BREAKPOINTS) {
+                if (start[bp]) {
+                    const cls = COL_START[bp]?.[start[bp]];
+                    if (cls)
+                        classes.push(cls);
+                }
+            }
+        }
+    }
+    return classes.join(' ');
+}
+/**
+ * Get Tailwind CSS grid classes based on columns configuration.
+ * Supports both simple numbers (applied from lg up) and responsive objects.
+ */
+export function getGridClasses(columns, gapX = 'gap-x-4') {
+    if (!columns || columns === 1) {
+        return `grid grid-cols-1 ${gapX}`;
+    }
+    if (typeof columns === 'number') {
+        const cls = GRID_COLS.lg[columns];
+        return cls ? `grid grid-cols-1 ${cls} ${gapX}` : `grid grid-cols-1 ${gapX}`;
+    }
+    const classes = ['grid', gapX];
+    const cols = columns;
+    classes.push(cols.default ? GRID_COLS.base[cols.default] || 'grid-cols-1' : 'grid-cols-1');
+    for (const bp of BREAKPOINTS) {
+        if (cols[bp]) {
+            const cls = GRID_COLS[bp]?.[cols[bp]];
+            if (cls)
+                classes.push(cls);
+        }
+    }
+    return classes.join(' ');
+}
+/** Vertical rhythm for stacked form fields (single column) or grid rows (multi-column). */
+export function getFieldLayoutClasses(columns) {
+    if (!columns || columns === 1) {
+        return 'flex flex-col gap-4';
+    }
+    return `${getGridClasses(columns)} gap-y-4`;
+}

package/dist/components/widgets/ChartWidget.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface ChartWidgetProps {
+    widget: {
+        name: string;
+        label?: string;
+        icon?: string;
+        color?: string;
+        chartType: 'line' | 'bar' | 'pie';
+        showLegend?: boolean;
+    };
+    data: Array<{
+        label: string;
+        value: number;
+    }> | null;
+}
+export declare function ChartWidget({ widget, data }: ChartWidgetProps): React.JSX.Element;

package/dist/components/widgets/ChartWidget.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend, } from 'chart.js';
+import { Line, Bar, Pie } from 'react-chartjs-2';
+import { cn } from '../../utils/classNames';
+import { WidgetShell } from './WidgetShell';
+import { translate } from '../../i18n/activeLocale';
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend);
+function readThemeColor(cssVar, fallback) {
+    if (typeof document === 'undefined')
+        return fallback;
+    const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
+    return value || fallback;
+}
+function getThemeColors() {
+    const fallbackAccent = '59, 130, 246';
+    const defaultPalette = ['#2563eb', '#059669', '#d97706', '#dc2626', '#52525b'];
+    const defaultPaletteSoft = ['#dbeafe', '#d1fae5', '#fef3c7', '#fee2e2', '#f3f4f6'];
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return {
+            accent: `rgb(${fallbackAccent})`,
+            accentSoft: `rgba(${fallbackAccent}, 0.35)`,
+            accentFaint: `rgba(${fallbackAccent}, 0.12)`,
+            grid: 'rgba(148, 163, 184, 0.2)',
+            tick: 'rgba(148, 163, 184, 0.85)',
+            tooltipBg: 'rgba(15, 23, 42, 0.92)',
+            palette: defaultPalette,
+            paletteSoft: defaultPaletteSoft,
+        };
+    }
+    const accent = readThemeColor('--kratos-accent', '#2563eb');
+    const fgMuted = readThemeColor('--kratos-fg-muted', '#9ca3af');
+    const surface = readThemeColor('--kratos-surface', '#151517');
+    const palette = [
+        readThemeColor('--kratos-accent', '#2563eb'),
+        readThemeColor('--kratos-success', '#059669'),
+        readThemeColor('--kratos-warning', '#d97706'),
+        readThemeColor('--kratos-danger', '#dc2626'),
+        readThemeColor('--kratos-fg-secondary', '#52525b'),
+    ];
+    const paletteSoft = [
+        readThemeColor('--kratos-accent-soft', '#dbeafe'),
+        readThemeColor('--kratos-success-soft', '#d1fae5'),
+        readThemeColor('--kratos-warning-soft', '#fef3c7'),
+        readThemeColor('--kratos-danger-soft', '#fee2e2'),
+        readThemeColor('--kratos-muted', '#f3f4f6'),
+    ];
+    return {
+        accent,
+        accentSoft: readThemeColor('--kratos-accent-soft', '#dbeafe'),
+        accentFaint: readThemeColor('--kratos-accent-soft', '#dbeafe'),
+        grid: fgMuted,
+        tick: fgMuted,
+        tooltipBg: surface,
+        palette,
+        paletteSoft,
+    };
+}
+function colorForIndex(theme, index, soft = false) {
+    const colors = soft ? theme.paletteSoft : theme.palette;
+    return colors[index % colors.length] ?? colors[0];
+}
+/** Prefer stable semantic colors for common labels (e.g. admin/editor roles). */
+function colorForLabel(theme, label, index, soft = false) {
+    const semanticIndex = {
+        admin: 3,
+        editor: 0,
+        active: 1,
+        inactive: 4,
+        published: 1,
+        draft: 4,
+    };
+    const mapped = semanticIndex[label.toLowerCase()];
+    return colorForIndex(theme, mapped ?? index, soft);
+}
+export function ChartWidget({ widget, data }) {
+    const theme = useMemo(() => getThemeColors(), []);
+    const chartData = useMemo(() => {
+        if (!data || data.length === 0) {
+            return { labels: [], datasets: [] };
+        }
+        if (widget.chartType === 'pie') {
+            return {
+                labels: data.map(item => item.label),
+                datasets: [
+                    {
+                        data: data.map(item => item.value),
+                        backgroundColor: data.map((item, index) => colorForLabel(theme, item.label, index)),
+                        borderColor: 'transparent',
+                        borderWidth: 0,
+                    },
+                ],
+            };
+        }
+        if (widget.chartType === 'bar') {
+            return {
+                labels: data.map(item => item.label),
+                datasets: [
+                    {
+                        label: widget.label || translate('core:widget.data_label'),
+                        data: data.map(item => item.value),
+                        backgroundColor: data.map((item, index) => colorForLabel(theme, item.label, index, true)),
+                        borderColor: data.map((item, index) => colorForLabel(theme, item.label, index)),
+                        borderWidth: 2,
+                        borderRadius: 6,
+                    },
+                ],
+            };
+        }
+        return {
+            labels: data.map(item => item.label),
+            datasets: [
+                {
+                    label: widget.label || translate('core:widget.data_label'),
+                    data: data.map(item => item.value),
+                    backgroundColor: theme.accentFaint,
+                    borderColor: theme.accent,
+                    borderWidth: 2,
+                    fill: true,
+                    tension: 0.35,
+                    pointRadius: 3,
+                    pointHoverRadius: 4,
+                    pointBackgroundColor: theme.accent,
+                },
+            ],
+        };
+    }, [data, widget.label, widget.chartType, theme]);
+    const options = useMemo(() => {
+        const showLegend = widget.showLegend ?? false;
+        if (widget.chartType === 'pie') {
+            return {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: showLegend,
+                        position: 'bottom',
+                        labels: {
+                            padding: 12,
+                            usePointStyle: true,
+                            boxWidth: 8,
+                            color: theme.tick,
+                            font: { size: 11 },
+                        },
+                    },
+                    tooltip: {
+                        backgroundColor: theme.tooltipBg,
+                        titleColor: theme.tick,
+                        bodyColor: theme.tick,
+                        borderColor: theme.grid,
+                        borderWidth: 1,
+                        padding: 10,
+                    },
+                },
+            };
+        }
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: showLegend, labels: { color: theme.tick, boxWidth: 8 } },
+                tooltip: {
+                    backgroundColor: theme.tooltipBg,
+                    titleColor: theme.tick,
+                    bodyColor: theme.tick,
+                    borderColor: theme.grid,
+                    borderWidth: 1,
+                    padding: 10,
+                    displayColors: false,
+                },
+            },
+            scales: {
+                x: {
+                    display: false,
+                    grid: { display: false },
+                    ticks: { display: false },
+                },
+                y: {
+                    beginAtZero: true,
+                    grid: { color: `${theme.grid}33` },
+                    ticks: { color: theme.tick, maxTicksLimit: 4, font: { size: 10 } },
+                    border: { display: false },
+                },
+            },
+        };
+    }, [widget.chartType, widget.showLegend, theme]);
+    const ChartComponent = widget.chartType === 'line' ? Line : widget.chartType === 'bar' ? Bar : Pie;
+    if (!data || data.length === 0) {
+        return (_jsx(WidgetShell, { label: widget.label, icon: widget.icon, className: widget.color, children: _jsx("div", { className: "flex flex-1 items-center justify-center rounded-lg border border-dashed border-border/70 bg-base/40 px-3 py-6", children: _jsx("p", { className: "text-sm text-fg-muted", children: translate('core:state.no_data') }) }) }));
+    }
+    return (_jsx(WidgetShell, { label: widget.label, icon: widget.icon, className: cn('min-h-[11rem]', widget.color), children: _jsx("div", { className: "min-h-[7.5rem] flex-1", children: _jsx(ChartComponent, { data: chartData, options: options }) }) }));
+}

package/dist/components/widgets/StatsWidget.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface StatsWidgetProps {
+    widget: {
+        name: string;
+        label?: string;
+        icon?: string;
+        color?: string;
+        format?: 'number' | 'currency' | 'percentage';
+        currency?: string;
+        precision?: number;
+        suffix?: string;
+        prefix?: string;
+    };
+    data: number | null;
+}
+export declare function StatsWidget({ widget, data }: StatsWidgetProps): React.JSX.Element;

package/dist/components/widgets/StatsWidget.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WidgetShell } from './WidgetShell';
+export function StatsWidget({ widget, data }) {
+    const formatValue = (value) => {
+        if (value === null || value === undefined) {
+            return '—';
+        }
+        const { format, currency, precision = 0, prefix, suffix } = widget;
+        let formatted;
+        switch (format) {
+            case 'currency':
+                formatted = new Intl.NumberFormat(undefined, {
+                    style: 'currency',
+                    currency: currency || 'USD',
+                    minimumFractionDigits: precision,
+                    maximumFractionDigits: precision,
+                }).format(value);
+                break;
+            case 'percentage':
+                formatted = `${value.toFixed(precision)}%`;
+                break;
+            case 'number':
+            default:
+                formatted = new Intl.NumberFormat(undefined, {
+                    minimumFractionDigits: precision,
+                    maximumFractionDigits: precision,
+                }).format(value);
+                break;
+        }
+        if (prefix && format !== 'currency') {
+            formatted = `${prefix}${formatted}`;
+        }
+        if (suffix) {
+            formatted = `${formatted} ${suffix}`;
+        }
+        return formatted;
+    };
+    return (_jsx(WidgetShell, { label: widget.label, icon: widget.icon, className: widget.color, children: _jsx("div", { className: "mt-auto", children: _jsx("p", { className: "text-2xl font-semibold leading-tight tracking-tight text-fg sm:text-3xl", children: formatValue(data) }) }) }));
+}