indas-ui 0.0.1 → 0.1.0

package/dist/components/dashboard/config.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Chart height presets (in pixels)
+ * These ensure consistent sizing across all dashboard charts
+ */
+export declare const chartHeights: {
+    /** Small charts - KPIs, mini sparklines */
+    readonly sm: 180;
+    /** Medium charts - Standard dashboard charts */
+    readonly md: 240;
+    /** Large charts - Featured/hero charts */
+    readonly lg: 300;
+    /** Extra large - Full-width detailed charts */
+    readonly xl: 360;
+};
+/**
+ * Grid layout configurations
+ * Responsive column layouts for different chart groupings
+ */
+export declare const gridLayouts: {
+    /** Single chart full width */
+    readonly single: "grid-cols-1";
+    /** 2 charts side by side on large screens */
+    readonly double: "grid-cols-1 lg:grid-cols-2";
+    /** 3 charts on large screens, 2 on medium */
+    readonly triple: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+    /** 4 charts - 2x2 on medium, 4 on large */
+    readonly quad: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4";
+    /** KPI cards - 4 columns on large, 2 on medium */
+    readonly kpi: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4";
+};
+/**
+ * Section spacing
+ * Gap between charts and sections
+ */
+export declare const spacing: {
+    /** Gap between charts in a grid */
+    readonly chartGap: "gap-4 lg:gap-6";
+    /** Gap between sections */
+    readonly sectionGap: "space-y-4 lg:space-y-6";
+    /** Padding for main content area */
+    readonly contentPadding: "p-4 md:p-6";
+};
+/**
+ * Chart card configurations
+ */
+export declare const chartCard: {
+    /** Default border radius */
+    readonly borderRadius: "rounded-xl";
+    /** Default padding */
+    readonly padding: "p-4";
+    /** Background */
+    readonly background: "bg-[rgb(var(--bg-surface))]";
+    /** Border */
+    readonly border: "border border-[rgb(var(--bd-default))]";
+};
+/**
+ * Donut chart configurations
+ */
+export declare const donutConfig: {
+    /** Inner radius percentage for donut hole */
+    readonly innerRadius: 60;
+    /** Outer radius percentage */
+    readonly outerRadius: 80;
+};
+/**
+ * Bar chart configurations
+ */
+export declare const barConfig: {
+    /** Default bar radius */
+    readonly barRadius: 4;
+    /** Max bar width */
+    readonly maxBarWidth: 40;
+};
+/**
+ * Color palette for charts
+ * Using CSS variables where possible, hex fallbacks for chart libraries
+ */
+export declare const chartColors: {
+    readonly primary: "#5470c6";
+    readonly success: "#52c41a";
+    readonly warning: "#faad14";
+    readonly error: "#f5222d";
+    readonly info: "#1890ff";
+    readonly muted: "#8c8c8c";
+    /** Extended palette for multi-series */
+    readonly palette: readonly ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"];
+};
+/**
+ * Helper to get responsive chart height
+ * Returns different heights based on viewport considerations
+ */
+export declare function getChartHeight(size?: keyof typeof chartHeights): number;
+/**
+ * Helper to build grid classes
+ */
+export declare function getGridClasses(layout: keyof typeof gridLayouts): string;

package/dist/components/dashboard/config.js

@@ -0,0 +1,113 @@
+'use client';
+// Dashboard Configuration
+// Centralized config for chart sizes, grid layouts, and responsive breakpoints
+/**
+ * Chart height presets (in pixels)
+ * These ensure consistent sizing across all dashboard charts
+ */
+export const chartHeights = {
+    /** Small charts - KPIs, mini sparklines */
+    sm: 180,
+    /** Medium charts - Standard dashboard charts */
+    md: 240,
+    /** Large charts - Featured/hero charts */
+    lg: 300,
+    /** Extra large - Full-width detailed charts */
+    xl: 360,
+};
+/**
+ * Grid layout configurations
+ * Responsive column layouts for different chart groupings
+ */
+export const gridLayouts = {
+    /** Single chart full width */
+    single: 'grid-cols-1',
+    /** 2 charts side by side on large screens */
+    double: 'grid-cols-1 lg:grid-cols-2',
+    /** 3 charts on large screens, 2 on medium */
+    triple: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    /** 4 charts - 2x2 on medium, 4 on large */
+    quad: 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4',
+    /** KPI cards - 4 columns on large, 2 on medium */
+    kpi: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+};
+/**
+ * Section spacing
+ * Gap between charts and sections
+ */
+export const spacing = {
+    /** Gap between charts in a grid */
+    chartGap: 'gap-4 lg:gap-6',
+    /** Gap between sections */
+    sectionGap: 'space-y-4 lg:space-y-6',
+    /** Padding for main content area */
+    contentPadding: 'p-4 md:p-6',
+};
+/**
+ * Chart card configurations
+ */
+export const chartCard = {
+    /** Default border radius */
+    borderRadius: 'rounded-xl',
+    /** Default padding */
+    padding: 'p-4',
+    /** Background */
+    background: 'bg-[rgb(var(--bg-surface))]',
+    /** Border */
+    border: 'border border-[rgb(var(--bd-default))]',
+};
+/**
+ * Donut chart configurations
+ */
+export const donutConfig = {
+    /** Inner radius percentage for donut hole */
+    innerRadius: 60,
+    /** Outer radius percentage */
+    outerRadius: 80,
+};
+/**
+ * Bar chart configurations
+ */
+export const barConfig = {
+    /** Default bar radius */
+    barRadius: 4,
+    /** Max bar width */
+    maxBarWidth: 40,
+};
+/**
+ * Color palette for charts
+ * Using CSS variables where possible, hex fallbacks for chart libraries
+ */
+export const chartColors = {
+    primary: '#5470c6',
+    success: '#52c41a',
+    warning: '#faad14',
+    error: '#f5222d',
+    info: '#1890ff',
+    muted: '#8c8c8c',
+    /** Extended palette for multi-series */
+    palette: [
+        '#5470c6',
+        '#91cc75',
+        '#fac858',
+        '#ee6666',
+        '#73c0de',
+        '#3ba272',
+        '#fc8452',
+        '#9a60b4',
+        '#ea7ccc',
+    ],
+};
+/**
+ * Helper to get responsive chart height
+ * Returns different heights based on viewport considerations
+ */
+export function getChartHeight(size = 'md') {
+    return chartHeights[size];
+}
+/**
+ * Helper to build grid classes
+ */
+export function getGridClasses(layout) {
+    return `grid ${gridLayouts[layout]} ${spacing.chartGap}`;
+}

package/dist/components/dashboard/index.d.ts

@@ -0,0 +1,10 @@
+export { FilterBar, computeForecast, projectForecast, FORECAST_METHODS } from './FilterBar.js';
+export type { FilterBarProps, FilterConfig, ReportOption, ToggleOption, TimeFilterSelection, ForecastMethod, ForecastSelection } from './FilterBar.js';
+export { DashboardTooltip } from './Tooltip.js';
+export type { DashboardTooltipProps } from './Tooltip.js';
+export { DrillDownModal } from './DrillDownModal.js';
+export type { DrillContext } from './DrillDownModal.js';
+export { rangeFromSelection, buildContextLabel, getFiscalStartYear } from './time-range.js';
+export * from './charts/index.js';
+export * from './kpi/index.js';
+export * from './config.js';

package/dist/components/dashboard/index.js

@@ -0,0 +1,13 @@
+'use client';
+// Main Components
+export { FilterBar, computeForecast, projectForecast, FORECAST_METHODS } from './FilterBar.js';
+export { DashboardTooltip } from './Tooltip.js';
+export { DrillDownModal } from './DrillDownModal.js';
+// Fiscal time helpers (shared by all dashboards)
+export { rangeFromSelection, buildContextLabel, getFiscalStartYear } from './time-range.js';
+// Charts
+export * from './charts/index.js';
+// KPI
+export * from './kpi/index.js';
+// Configuration
+export * from './config.js';

package/dist/components/dashboard/kpi/KpiBeforeAfter.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export interface KpiBeforeAfterProps {
+    /** Title of the KPI */
+    title: string;
+    /** Before value */
+    beforeValue: string | number;
+    /** Before label (defaults to "Before") */
+    beforeLabel?: string;
+    /** Before sublabel (e.g., "Avg cycle time") */
+    beforeSublabel?: string;
+    /** After value */
+    afterValue: string | number;
+    /** After label (defaults to "After") */
+    afterLabel?: string;
+    /** After sublabel (e.g., "Avg cycle time") */
+    afterSublabel?: string;
+    /** Improvement percentage */
+    improvement?: number;
+    /** Improvement label (defaults to "improvement") */
+    improvementLabel?: string;
+    /** Whether improvement is shown as decrease (down arrow) or increase (up arrow) */
+    improvementType?: 'decrease' | 'increase';
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * KpiBeforeAfter - KPI card comparing before/after values
+ *
+ * Great for: Process improvements, A/B results, optimization metrics
+ */
+export declare function KpiBeforeAfter({ title, beforeValue, beforeLabel, beforeSublabel, afterValue, afterLabel, afterSublabel, improvement, improvementLabel, improvementType, className }: KpiBeforeAfterProps): React.JSX.Element;

package/dist/components/dashboard/kpi/KpiBeforeAfter.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp, TrendingDown } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * KpiBeforeAfter - KPI card comparing before/after values
+ *
+ * Great for: Process improvements, A/B results, optimization metrics
+ */
+export function KpiBeforeAfter({ title, beforeValue, beforeLabel = 'Before', beforeSublabel, afterValue, afterLabel = 'After', afterSublabel, improvement, improvementLabel = 'improvement', improvementType = 'decrease', className }) {
+    const ImprovementIcon = improvementType === 'decrease' ? TrendingDown : TrendingUp;
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), improvement !== undefined && (_jsxs("div", { className: "text-right", children: [_jsxs("span", { className: "text-lg font-bold text-[rgb(var(--color-success))]", children: [improvement, "%"] }), _jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))] ml-1", children: improvementLabel })] }))] }), _jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "flex-1 text-center", children: [_jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))] mb-1", children: beforeLabel }), _jsx("p", { className: "text-2xl font-bold text-[rgb(var(--fg-muted))]", children: beforeValue }), beforeSublabel && (_jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: beforeSublabel }))] }), _jsx("div", { className: "px-4", children: _jsx("div", { className: "w-8 h-8 rounded-full bg-[rgb(var(--color-success))]/10 flex items-center justify-center", children: _jsx(ImprovementIcon, { className: "w-4 h-4 text-[rgb(var(--color-success))]" }) }) }), _jsxs("div", { className: "flex-1 text-center", children: [_jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))] mb-1", children: afterLabel }), _jsx("p", { className: "text-2xl font-bold text-[rgb(var(--color-success))]", children: afterValue }), afterSublabel && (_jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: afterSublabel }))] })] })] }));
+}

package/dist/components/dashboard/kpi/KpiBreakdown.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export interface BreakdownItem {
+    /** Label for this item */
+    label: string;
+    /** Value to display */
+    value: string | number;
+    /** Color indicator: success, warning, error, primary, info, or custom hex */
+    color?: 'success' | 'warning' | 'error' | 'primary' | 'info' | string;
+}
+export interface KpiBreakdownProps {
+    /** Title of the KPI */
+    title: string;
+    /** Total/summary value (optional, displayed in header) */
+    total?: string | number;
+    /** Breakdown items to display */
+    items: BreakdownItem[];
+    /** Show percentage next to values */
+    showPercentage?: boolean;
+    /** Show a skeleton placeholder while data loads */
+    loading?: boolean;
+    /** Tighter padding + row spacing (for dense KPI rows) */
+    compact?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * KpiBreakdown - KPI card with list breakdown
+ *
+ * Great for: Status distributions, category splits, item counts by type
+ */
+export declare function KpiBreakdown({ title, total, items, showPercentage, loading, compact, className }: KpiBreakdownProps): React.JSX.Element;

package/dist/components/dashboard/kpi/KpiBreakdown.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils.js';
+import { KpiCardSkeleton } from './kpi-shell.js';
+/**
+ * KpiBreakdown - KPI card with list breakdown
+ *
+ * Great for: Status distributions, category splits, item counts by type
+ */
+export function KpiBreakdown({ title, total, items, showPercentage = false, loading, compact, className }) {
+    if (loading)
+        return _jsx(KpiCardSkeleton, { className: className });
+    const getColorClass = (color) => {
+        switch (color) {
+            case 'success':
+                return 'bg-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'bg-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'bg-[rgb(var(--color-error))]';
+            case 'primary':
+                return 'bg-[rgb(var(--color-primary))]';
+            case 'info':
+                return 'bg-[rgb(var(--color-info))]';
+            default:
+                // If it's a custom color (hex or rgb), return empty and use inline style
+                return color?.startsWith('#') || color?.startsWith('rgb') ? '' : 'bg-[rgb(var(--color-primary))]';
+        }
+    };
+    const totalValue = typeof total === 'number' ? total :
+        items.reduce((sum, item) => sum + (typeof item.value === 'number' ? item.value : 0), 0);
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [_jsxs("div", { className: cn('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && (_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? total.toLocaleString() : total }))] }), _jsx("div", { className: compact ? 'space-y-1' : 'space-y-2', children: items.map((item, index) => {
+                    const colorClass = getColorClass(item.color);
+                    const isCustomColor = item.color?.startsWith('#') || item.color?.startsWith('rgb');
+                    const numValue = typeof item.value === 'number' ? item.value : 0;
+                    const percentage = totalValue > 0 ? Math.round((numValue / totalValue) * 100) : 0;
+                    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), _jsx("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value }), showPercentage && (_jsxs("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
+                }) })] }));
+}

package/dist/components/dashboard/kpi/KpiComparison.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export interface ComparisonBar {
+    /** Label for this bar */
+    label: string;
+    /** Value to display */
+    value: number;
+    /** Percentage fill (0-100) */
+    percentage: number;
+    /** Bar color: success, warning, error, primary, or custom */
+    color?: 'success' | 'warning' | 'error' | 'primary' | string;
+}
+export interface KpiComparisonProps {
+    /** Title of the KPI */
+    title: string;
+    /** Main value to display */
+    value: string | number;
+    /** Target value (optional) */
+    target?: string | number;
+    /** Status label (e.g., "On Track", "Behind") */
+    status?: {
+        label: string;
+        type: 'success' | 'warning' | 'error';
+    };
+    /** Comparison bars to display */
+    bars: ComparisonBar[];
+    /** Show a skeleton placeholder while data loads */
+    loading?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * KpiComparison - KPI card with comparison progress bars
+ *
+ * Great for: Target tracking, period comparisons, goal progress
+ */
+export declare function KpiComparison({ title, value, target, status, bars, loading, className }: KpiComparisonProps): React.JSX.Element;

package/dist/components/dashboard/kpi/KpiComparison.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils.js';
+import { KpiCardSkeleton } from './kpi-shell.js';
+/**
+ * KpiComparison - KPI card with comparison progress bars
+ *
+ * Great for: Target tracking, period comparisons, goal progress
+ */
+export function KpiComparison({ title, value, target, status, bars, loading, className }) {
+    if (loading)
+        return _jsx(KpiCardSkeleton, { className: className });
+    const getBarColor = (color) => {
+        switch (color) {
+            case 'success':
+                return 'bg-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'bg-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'bg-[rgb(var(--color-error))]';
+            case 'primary':
+                return 'bg-[rgb(var(--color-primary))]';
+            default:
+                return color || 'bg-[rgb(var(--color-primary))]';
+        }
+    };
+    const getStatusStyles = (type) => {
+        switch (type) {
+            case 'success':
+                return 'bg-[rgb(var(--color-success))]/10 text-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'bg-[rgb(var(--color-warning))]/10 text-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'bg-[rgb(var(--color-error))]/10 text-[rgb(var(--color-error))]';
+        }
+    };
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), status && (_jsx("span", { className: cn('text-xs px-2 py-0.5 rounded-full', getStatusStyles(status.type)), children: status.label }))] }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), target && (_jsxs("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["/ ", target, " target"] }))] }), _jsx("div", { className: "mt-4 space-y-2", children: bars.map((bar, index) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))] w-16", children: bar.label }), _jsx("div", { className: "flex-1 h-3 bg-[rgb(var(--bg-subtle))] rounded", children: _jsx("div", { className: cn('h-full rounded', getBarColor(bar.color)), style: { width: `${Math.min(bar.percentage, 100)}%` } }) }), _jsx("span", { className: "text-xs font-medium w-12 text-right", children: typeof bar.value === 'number' ? bar.value.toLocaleString() : bar.value })] }, index))) })] }));
+}

package/dist/components/dashboard/kpi/KpiQuickStats.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface QuickStat {
+    /** Label for this stat */
+    label: string;
+    /** Value to display */
+    value: string | number;
+    /** Icon component */
+    icon: LucideIcon;
+    /** Icon color: success, warning, error, primary, info */
+    iconColor?: 'success' | 'warning' | 'error' | 'primary' | 'info';
+}
+export interface KpiQuickStatsProps {
+    /** Title of the KPI card */
+    title: string;
+    /** Stats to display (2-4 recommended) */
+    stats: QuickStat[];
+    /** Number of columns (2, 3, or 4) */
+    columns?: 2 | 3 | 4;
+    /** Show a skeleton placeholder while data loads */
+    loading?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * KpiQuickStats - KPI card with grid of icon stats
+ *
+ * Great for: Quick overview panels, dashboard summaries, multi-metric cards
+ */
+export declare function KpiQuickStats({ title, stats, columns, loading, className }: KpiQuickStatsProps): React.JSX.Element;

package/dist/components/dashboard/kpi/KpiQuickStats.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils.js';
+import { KpiCardSkeleton } from './kpi-shell.js';
+/**
+ * KpiQuickStats - KPI card with grid of icon stats
+ *
+ * Great for: Quick overview panels, dashboard summaries, multi-metric cards
+ */
+export function KpiQuickStats({ title, stats, columns = 2, loading, className }) {
+    if (loading)
+        return _jsx(KpiCardSkeleton, { className: className });
+    const getIconColorClass = (color) => {
+        switch (color) {
+            case 'success':
+                return 'text-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'text-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'text-[rgb(var(--color-error))]';
+            case 'primary':
+                return 'text-[rgb(var(--color-primary))]';
+            case 'info':
+                return 'text-[rgb(var(--color-info))]';
+            default:
+                return 'text-[rgb(var(--fg-muted))]';
+        }
+    };
+    const gridClasses = {
+        2: 'grid-cols-2',
+        3: 'grid-cols-3',
+        4: 'grid-cols-4'
+    };
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))] mb-3", children: title }), _jsx("div", { className: cn('grid gap-x-3 gap-y-2', gridClasses[columns]), children: stats.map((stat, index) => {
+                    const Icon = stat.icon;
+                    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: cn('w-4 h-4', getIconColorClass(stat.iconColor)) }), _jsxs("div", { children: [_jsx("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof stat.value === 'number' ? stat.value.toLocaleString() : stat.value }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: stat.label })] })] }, index));
+                }) })] }));
+}

package/dist/components/dashboard/kpi/KpiRating.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export interface RatingBreakdown {
+    /** Star rating (1-5) */
+    stars: number;
+    /** Number of ratings */
+    count: number;
+    /** Percentage of total */
+    percentage: number;
+}
+export interface KpiRatingProps {
+    /** Title of the KPI */
+    title: string;
+    /** Rating score (e.g., 4.8) */
+    score: number;
+    /** Maximum score (defaults to 5) */
+    maxScore?: number;
+    /** Total number of reviews */
+    reviewCount?: number;
+    /** Status badge text (e.g., "Excellent", "Good") */
+    status?: string;
+    /** Status type for coloring */
+    statusType?: 'success' | 'warning' | 'error';
+    /** Change from previous period */
+    change?: number;
+    /** Period label (e.g., "from last month") */
+    changeLabel?: string;
+    /** Footer period text (e.g., "Last 30 days") */
+    periodLabel?: string;
+    /** Tooltip info */
+    tooltip?: {
+        /** Formula explanation */
+        formula?: string;
+        /** Description */
+        description?: string;
+        /** Rating breakdown data */
+        breakdown?: RatingBreakdown[];
+    };
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * KpiRating - KPI card with star rating display
+ *
+ * Great for: Customer satisfaction, NPS scores, product ratings
+ */
+export declare function KpiRating({ title, score, maxScore, reviewCount, status, statusType, change, changeLabel, periodLabel, tooltip, className }: KpiRatingProps): React.JSX.Element;

package/dist/components/dashboard/kpi/KpiRating.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp, TrendingDown, Info } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * KpiRating - KPI card with star rating display
+ *
+ * Great for: Customer satisfaction, NPS scores, product ratings
+ */
+export function KpiRating({ title, score, maxScore = 5, reviewCount, status, statusType = 'success', change, changeLabel = 'from last month', periodLabel, tooltip, className }) {
+    const filledStars = Math.floor(score);
+    const hasPartialStar = score % 1 >= 0.5;
+    const getStatusStyles = (type) => {
+        switch (type) {
+            case 'success':
+                return 'bg-[rgb(var(--color-success))]/10 text-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'bg-[rgb(var(--color-warning))]/10 text-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'bg-[rgb(var(--color-error))]/10 text-[rgb(var(--color-error))]';
+        }
+    };
+    const getBreakdownBarColor = (pct) => {
+        if (pct >= 50)
+            return 'bg-[rgb(var(--color-success))]';
+        if (pct >= 20)
+            return 'bg-[rgb(var(--color-warning))]';
+        return 'bg-[rgb(var(--color-error))]';
+    };
+    return (_jsxs("div", { className: cn('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm relative group', className), children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), tooltip && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "w-5 h-5 rounded-full bg-[rgb(var(--bg-subtle))] flex items-center justify-center cursor-help hover:bg-[rgb(var(--color-primary))]/10 transition-colors peer", children: _jsx(Info, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) }), _jsxs("div", { className: "absolute right-0 top-7 w-72 p-3 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg shadow-lg opacity-0 invisible peer-hover:opacity-100 peer-hover:visible transition-all z-10", children: [tooltip.formula && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Formula:" }), _jsx("div", { className: "bg-[rgb(var(--bg-subtle))] rounded p-2 mb-3", children: _jsx("p", { className: "text-[10px] font-mono text-[rgb(var(--fg-muted))]", children: tooltip.formula }) })] })), tooltip.description && (_jsx("p", { className: "text-[10px] text-[rgb(var(--fg-muted))] mb-3", children: tooltip.description })), tooltip.breakdown && tooltip.breakdown.length > 0 && (_jsxs("div", { className: "border-t border-[rgb(var(--bd-default))] pt-3", children: [_jsx("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Rating Breakdown:" }), _jsx("div", { className: "space-y-1.5", children: tooltip.breakdown.map((item) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-3", children: item.stars }), _jsx("svg", { className: "w-3 h-3 text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }), _jsx("div", { className: "flex-1 h-1.5 bg-[rgb(var(--bg-subtle))] rounded-full overflow-hidden", children: _jsx("div", { className: cn('h-full rounded-full', getBreakdownBarColor(item.percentage)), style: { width: `${item.percentage}%` } }) }), _jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-10 text-right", children: item.count.toLocaleString() }), _jsxs("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-6 text-right", children: [item.percentage, "%"] })] }, item.stars))) })] }))] })] }))] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { children: _jsx("p", { className: "text-4xl font-bold text-[rgb(var(--fg-default))]", children: score }) }), _jsxs("div", { children: [_jsx("div", { className: "flex gap-0.5", children: Array.from({ length: maxScore }, (_, i) => {
+                                    const starIndex = i + 1;
+                                    const isFilled = starIndex <= filledStars || (starIndex === filledStars + 1 && hasPartialStar);
+                                    return (_jsx("svg", { className: cn('w-5 h-5 transition-transform hover:scale-110 cursor-pointer', isFilled ? 'text-yellow-400' : 'text-yellow-400/30'), fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, i));
+                                }) }), reviewCount !== undefined && (_jsxs("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [reviewCount.toLocaleString(), " reviews"] }))] }), status && (_jsx("div", { className: "ml-auto text-right", children: _jsx("span", { className: cn('text-xs px-2 py-0.5 rounded-full', getStatusStyles(statusType)), children: status }) }))] }), (change !== undefined || periodLabel) && (_jsxs("div", { className: "flex items-center justify-between pt-3 mt-3 border-t border-[rgb(var(--bd-default))]", children: [change !== undefined && (_jsxs("div", { className: "flex items-center gap-1", children: [change > 0 ? (_jsx(TrendingUp, { className: "w-3 h-3 text-[rgb(var(--color-success))]" })) : change < 0 ? (_jsx(TrendingDown, { className: "w-3 h-3 text-[rgb(var(--color-error))]" })) : null, _jsxs("span", { className: cn('text-xs', change > 0 ? 'text-[rgb(var(--color-success))]' : change < 0 ? 'text-[rgb(var(--color-error))]' : 'text-[rgb(var(--fg-muted))]'), children: [change > 0 ? '+' : '', change, " ", changeLabel] })] })), periodLabel && (_jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: periodLabel }))] }))] }));
+}

package/dist/components/dashboard/kpi/KpiScroll.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface KpiScrollItem {
+    /** Unique identifier */
+    id: string;
+    /** Icon component */
+    icon?: LucideIcon;
+    /** Icon background color */
+    iconBg?: string;
+    /** Icon color */
+    iconColor?: string;
+    /** Custom icon element (for images/svgs/avatars) */
+    customIcon?: React.ReactNode;
+    /** Main title */
+    title: string;
+    /** Subtitle/description (string or custom node, e.g. a pill) */
+    subtitle?: React.ReactNode;
+    /** Metric value */
+    value: string | number;
+    /** Metric prefix (e.g., +, -, ₹) */
+    prefix?: string;
+    /** Metric suffix (e.g., %, k, m) */
+    suffix?: string;
+    /** Whether the value is positive (green), negative (red), or neutral */
+    sentiment?: 'positive' | 'negative' | 'neutral';
+    /** Secondary value (shown below main value) */
+    secondaryValue?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+export interface KpiScrollProps {
+    /** Section title */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Period options for dropdown */
+    periodOptions?: {
+        value: string;
+        label: string;
+    }[];
+    /** Selected period value */
+    periodValue?: string;
+    /** Period change handler */
+    onPeriodChange?: (value: string) => void;
+    /** Items to display */
+    items: KpiScrollItem[];
+    /** Show "View All" button */
+    showViewAll?: boolean;
+    /** View All click handler */
+    onViewAll?: () => void;
+    /** View All label */
+    viewAllLabel?: string;
+    /** Card variant */
+    variant?: 'default' | 'compact' | 'detailed';
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * KpiScroll - Horizontal scrollable KPI cards
+ *
+ * Great for: Channel stats, customer metrics, quick summaries
+ */
+export declare function KpiScroll({ title, description, periodOptions, periodValue, onPeriodChange, items, showViewAll, onViewAll, viewAllLabel, variant, className }: KpiScrollProps): React.JSX.Element;