indas-ui 0.0.1 → 0.1.1

package/dist/cjs/components/dashboard/FilterBar.js

@@ -0,0 +1,434 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FORECAST_METHODS = void 0;
+exports.computeForecast = computeForecast;
+exports.projectForecast = projectForecast;
+exports.FilterBar = FilterBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils.js");
+const dropdown_1 = require("../forms/dropdown/index.js");
+const date_picker_1 = require("../forms/date-picker/index.js");
+const tabs_1 = require("../ui/navigation/tabs.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+const ui_1 = require("../ui/index.js");
+exports.FORECAST_METHODS = [
+    { value: 'ma', label: 'Moving Avg', hint: 'Averages the last N values, all counted equally. Smooths out spikes but lags behind real shifts.' },
+    { value: 'wma', label: 'Weighted', hint: 'Averages the last N values, newer ones weighted higher. Picks up recent changes sooner.' },
+    { value: 'es', label: 'Exponential', hint: 'Blends all history, with influence fading the older a value gets. Smooth yet quick to adapt.' },
+    { value: 'holt', label: 'Trend', hint: 'Exponential smoothing plus a trend component. The only method that projects the slope into future periods.' },
+];
+const FORECAST_PERIOD_LIMITS = {
+    Day: { min: 2, max: 60 },
+    Week: { min: 2, max: 52 },
+    Month: { min: 2, max: 24 },
+    Quarter: { min: 2, max: 12 },
+    Year: { min: 2, max: 10 },
+};
+const FORECAST_HORIZON_LIMITS = {
+    Day: { min: 1, max: 30 },
+    Week: { min: 1, max: 26 },
+    Month: { min: 1, max: 12 },
+    Quarter: { min: 1, max: 8 },
+    Year: { min: 1, max: 5 },
+};
+const SHORT_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+function labelForUnit(timeFilter, offset) {
+    const now = new Date();
+    switch (timeFilter) {
+        case 'Day': {
+            const d = new Date(now);
+            d.setDate(now.getDate() + offset);
+            return `${d.getDate()} ${SHORT_MONTHS[d.getMonth()]}`;
+        }
+        case 'Week': {
+            const d = new Date(now);
+            d.setDate(now.getDate() + offset * 7);
+            const oneJan = new Date(d.getFullYear(), 0, 1);
+            const week = Math.ceil((((d.getTime() - oneJan.getTime()) / 86400000) + oneJan.getDay() + 1) / 7);
+            return `W${week}`;
+        }
+        case 'Month': {
+            const d = new Date(now.getFullYear(), now.getMonth() + offset, 1);
+            return `${SHORT_MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+        }
+        case 'Quarter': {
+            const d = new Date(now.getFullYear(), now.getMonth() + offset * 3, 1);
+            return `Q${Math.floor(d.getMonth() / 3) + 1} ${d.getFullYear()}`;
+        }
+        case 'Year':
+            return String(now.getFullYear() + offset);
+    }
+}
+/** Range covering `count` periods. dir=-1 means the last N (ending this period), dir=+1 means next N (starting next period). */
+function resolvePeriodRange(timeFilter, count, dir) {
+    if (count < 1)
+        return '';
+    const start = dir === -1 ? -(count - 1) : 1;
+    const end = dir === -1 ? 0 : count;
+    const startLabel = labelForUnit(timeFilter, start);
+    const endLabel = labelForUnit(timeFilter, end);
+    return count === 1 ? endLabel : `${startLabel} – ${endLabel}`;
+}
+const HOLT_BETA = 0.3;
+function holtState(values, period) {
+    const alpha = 2 / (period + 1);
+    let level = values[0];
+    let trend = values.length > 1 ? values[1] - values[0] : 0;
+    for (let i = 1; i < values.length; i++) {
+        const prevLevel = level;
+        level = alpha * values[i] + (1 - alpha) * (level + trend);
+        trend = HOLT_BETA * (level - prevLevel) + (1 - HOLT_BETA) * trend;
+    }
+    return { level, trend };
+}
+function computeForecast(values, method, period) {
+    if (period < 1 || values.length === 0)
+        return values.map(() => null);
+    if (method === 'es' || method === 'holt') {
+        const alpha = 2 / (period + 1);
+        const out = [values[0]];
+        if (method === 'es') {
+            for (let i = 1; i < values.length; i++) {
+                out.push(alpha * values[i] + (1 - alpha) * out[i - 1]);
+            }
+        }
+        else {
+            let level = values[0];
+            let trend = values.length > 1 ? values[1] - values[0] : 0;
+            for (let i = 1; i < values.length; i++) {
+                const prevLevel = level;
+                level = alpha * values[i] + (1 - alpha) * (level + trend);
+                trend = HOLT_BETA * (level - prevLevel) + (1 - HOLT_BETA) * trend;
+                out.push(level);
+            }
+        }
+        return out;
+    }
+    return values.map((_, i) => {
+        if (i < period - 1)
+            return null;
+        const window = values.slice(i - period + 1, i + 1);
+        if (method === 'wma') {
+            const denom = (period * (period + 1)) / 2;
+            return window.reduce((sum, v, j) => sum + v * (j + 1), 0) / denom;
+        }
+        return window.reduce((sum, v) => sum + v, 0) / period;
+    });
+}
+function projectForecast(values, method, period, horizon) {
+    if (values.length === 0 || horizon < 1 || period < 1)
+        return [];
+    if (method === 'holt') {
+        const { level, trend } = holtState(values, period);
+        return Array.from({ length: horizon }, (_, h) => level + trend * (h + 1));
+    }
+    let next;
+    if (method === 'es') {
+        const smoothed = computeForecast(values, 'es', period);
+        next = smoothed[smoothed.length - 1];
+    }
+    else {
+        const window = values.slice(-period);
+        if (method === 'wma') {
+            const n = window.length;
+            const denom = (n * (n + 1)) / 2;
+            next = window.reduce((sum, v, j) => sum + v * (j + 1), 0) / denom;
+        }
+        else {
+            next = window.reduce((sum, v) => sum + v, 0) / window.length;
+        }
+    }
+    return Array.from({ length: horizon }, () => next);
+}
+// ============================================================================
+// FilterBar Component
+// ============================================================================
+// Time filter dropdown options — quick = relative shortcuts (pinned footer), options = explicit list
+const DAY_QUICK = [
+    { value: 'today', label: 'Today' },
+    { value: 'yesterday', label: 'Yesterday' },
+    { value: 'last7', label: 'Last 7 Days' },
+    { value: 'last14', label: 'Last 14 Days' },
+    { value: 'last30', label: 'Last 30 Days' },
+];
+const DAY_OPTIONS = DAY_QUICK;
+const WEEK_QUICK = [
+    { value: 'this', label: 'This Week' },
+    { value: 'last', label: 'Last Week' },
+    { value: 'last2', label: 'Last 2 Weeks' },
+    { value: 'last4', label: 'Last 4 Weeks' },
+];
+// Fallback static list; the live options are built fiscal-year-aware in buildTimeOptions().
+const WEEK_OPTIONS = [
+    { value: 'W1', label: 'Week 1' },
+    { value: 'W2', label: 'Week 2' },
+    { value: 'W3', label: 'Week 3' },
+    { value: 'W4', label: 'Week 4' },
+    { value: 'W5', label: 'Week 5' },
+];
+const MONTH_QUICK = [
+    { value: 'this', label: 'This Month' },
+    { value: 'last', label: 'Last Month' },
+];
+const MONTH_OPTIONS = [
+    { value: 'jan', label: 'Jan' },
+    { value: 'feb', label: 'Feb' },
+    { value: 'mar', label: 'Mar' },
+    { value: 'apr', label: 'Apr' },
+    { value: 'may', label: 'May' },
+    { value: 'jun', label: 'Jun' },
+    { value: 'jul', label: 'Jul' },
+    { value: 'aug', label: 'Aug' },
+    { value: 'sep', label: 'Sep' },
+    { value: 'oct', label: 'Oct' },
+    { value: 'nov', label: 'Nov' },
+    { value: 'dec', label: 'Dec' },
+];
+const QUARTER_QUICK = [
+    { value: 'this', label: 'This Quarter' },
+    { value: 'last', label: 'Last Quarter' },
+];
+const QUARTER_OPTIONS = [
+    { value: 'Q1', label: 'Q1 (Apr-Jun)' },
+    { value: 'Q2', label: 'Q2 (Jul-Sep)' },
+    { value: 'Q3', label: 'Q3 (Oct-Dec)' },
+    { value: 'Q4', label: 'Q4 (Jan-Mar)' },
+];
+const currentYear = new Date().getFullYear();
+const YEAR_QUICK = [
+    { value: 'this', label: 'This Year' },
+    { value: 'last', label: 'Last Year' },
+];
+const YEAR_OPTIONS = [
+    { value: String(currentYear), label: String(currentYear) },
+    { value: String(currentYear - 1), label: String(currentYear - 1) },
+    { value: String(currentYear - 2), label: String(currentYear - 2) },
+    { value: String(currentYear - 3), label: String(currentYear - 3) },
+];
+// Time filter toggle options with dropdown configs (static fallback)
+const TIME_FILTER_OPTIONS = [
+    { value: 'Day', label: 'Day', dropdownOptions: DAY_OPTIONS, quickOptions: DAY_QUICK },
+    { value: 'Week', label: 'Week', dropdownOptions: WEEK_OPTIONS, quickOptions: WEEK_QUICK },
+    { value: 'Month', label: 'Month', dropdownOptions: MONTH_OPTIONS, quickOptions: MONTH_QUICK },
+    { value: 'Quarter', label: 'Quarter', dropdownOptions: QUARTER_OPTIONS, quickOptions: QUARTER_QUICK },
+    { value: 'Year', label: 'Year', dropdownOptions: YEAR_OPTIONS, quickOptions: YEAR_QUICK },
+];
+const fmtFiscalDay = (d) => `${String(d.getDate()).padStart(2, '0')} ${SHORT_MONTHS[d.getMonth()]}`;
+// Fiscal-year-aware dropdown options. FY runs 1 Apr (fyStart) → 31 Mar (fyStart+1).
+// Weeks are W1..W52/53 counting 7-day spans from 1 Apr; months ordered Apr→Mar;
+// quarters Q1 Apr-Jun … Q4 Jan-Mar; year shown as "YYYY-YYYY".
+function buildTimeOptions(fyStart) {
+    const fyOpen = new Date(fyStart, 3, 1);
+    const fyClose = new Date(fyStart + 1, 2, 31);
+    // Monday-aligned weeks clamped to the FY: W1 = 1 Apr → first Sunday (partial),
+    // then each week runs Mon–Sun; the last week is clamped to 31 Mar.
+    const firstSunday = new Date(fyStart, 3, 1 + ((7 - fyOpen.getDay()) % 7));
+    const weeks = [];
+    let from = new Date(fyOpen);
+    let sunday = new Date(firstSunday);
+    let wk = 1;
+    while (from <= fyClose) {
+        const to = sunday > fyClose ? fyClose : sunday;
+        weeks.push({ value: `W${wk}`, label: `Week ${wk} (${fmtFiscalDay(from)} – ${fmtFiscalDay(to)})` });
+        from = new Date(sunday.getFullYear(), sunday.getMonth(), sunday.getDate() + 1);
+        sunday = new Date(from.getFullYear(), from.getMonth(), from.getDate() + 6);
+        wk++;
+    }
+    const months = Array.from({ length: 12 }, (_, i) => {
+        const mo = (3 + i) % 12;
+        const yr = mo >= 3 ? fyStart : fyStart + 1;
+        return { value: `${mo}`, label: `${SHORT_MONTHS[mo]} ${yr}` };
+    });
+    const quarters = [
+        { value: 'Q1', label: `Q1 (Apr – Jun ${fyStart})` },
+        { value: 'Q2', label: `Q2 (Jul – Sep ${fyStart})` },
+        { value: 'Q3', label: `Q3 (Oct – Dec ${fyStart})` },
+        { value: 'Q4', label: `Q4 (Jan – Mar ${fyStart + 1})` },
+    ];
+    const years = [{ value: `${fyStart}`, label: `${fyStart}-${fyStart + 1}` }];
+    return [
+        { value: 'Day', label: 'Day', dropdownOptions: DAY_OPTIONS, quickOptions: DAY_QUICK },
+        { value: 'Week', label: 'Week', dropdownOptions: weeks, quickOptions: WEEK_QUICK },
+        { value: 'Month', label: 'Month', dropdownOptions: months, quickOptions: MONTH_QUICK },
+        { value: 'Quarter', label: 'Quarter', dropdownOptions: quarters, quickOptions: QUARTER_QUICK },
+        { value: 'Year', label: 'Year', dropdownOptions: years, quickOptions: YEAR_QUICK },
+    ];
+}
+function Stepper({ value, min, max, onChange }) {
+    const [text, setText] = (0, react_1.useState)(String(value));
+    (0, react_1.useEffect)(() => {
+        setText(String(value));
+    }, [value]);
+    const commit = () => {
+        const parsed = parseInt(text, 10);
+        const clamped = isNaN(parsed) ? value : Math.min(max, Math.max(min, parsed));
+        setText(String(clamped));
+        if (clamped !== value)
+            onChange(clamped);
+    };
+    const buttonClasses = (0, utils_1.cn)('w-7 h-7 rounded-md flex items-center justify-center transition-colors shrink-0', 'border border-[rgb(var(--bd-default))] text-[rgb(var(--fg-muted))]', 'hover:bg-[rgb(var(--bg-subtle))] disabled:opacity-40 disabled:pointer-events-none');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => onChange(value - 1), disabled: value <= min, className: buttonClasses, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { className: "w-3.5 h-3.5" }) }), (0, jsx_runtime_1.jsx)("input", { value: text, onChange: (e) => setText(e.target.value.replace(/\D/g, '')), onBlur: commit, onKeyDown: (e) => e.key === 'Enter' && e.target.blur(), inputMode: "numeric", className: (0, utils_1.cn)('flex-1 h-7 w-full min-w-0 rounded-md border border-[rgb(var(--bd-default))] bg-transparent', 'text-center text-xs font-semibold text-[rgb(var(--fg-default))]', 'focus:outline-none focus:border-[rgb(var(--color-primary))]') }), (0, jsx_runtime_1.jsx)("button", { onClick: () => onChange(value + 1), disabled: value >= max, className: buttonClasses, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "w-3.5 h-3.5" }) })] }));
+}
+function OverflowMenu({ showInsights, insightsActive, onInsightsClick, reports, onReportSelect, onShare, onExport }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, utils_1.cn)('w-7 h-7 rounded-md flex items-center justify-center transition-colors', 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'), title: t('More'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { className: "w-4 h-4" }) }) }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuContent, { align: "end", className: "w-52 [&_[role=menuitem]]:cursor-pointer", children: [showInsights && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: onInsightsClick, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lightbulb, { className: (0, utils_1.cn)('w-4 h-4 mr-2', insightsActive && 'text-[rgb(var(--color-warning))]') }), t('Sahay Insights')] })), reports.length > 0 && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubTrigger, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileBarChart, { className: "w-4 h-4 mr-2" }), t('Reports')] }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSubContent, { children: reports.map((report) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onClick: () => onReportSelect?.(report.value), children: report.label }, report.value))) })] })), onShare && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: onShare, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { className: "w-4 h-4 mr-2" }), t('Share')] })), onExport && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubTrigger, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileOutput, { className: "w-4 h-4 mr-2" }), t('Export')] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuSubContent, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => onExport('print'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Printer, { className: "w-4 h-4 mr-2" }), t('Print')] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => onExport('excel'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileSpreadsheet, { className: "w-4 h-4 mr-2" }), t('Excel')] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: () => onExport('pdf'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "w-4 h-4 mr-2" }), t('PDF')] })] })] }))] })] }));
+}
+function ForecastControl({ forecast, onForecastChange, timeFilter, onTimeFilterChange, bare = false }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    const limits = FORECAST_PERIOD_LIMITS[timeFilter];
+    const horizonLimits = FORECAST_HORIZON_LIMITS[timeFilter];
+    (0, react_1.useEffect)(() => {
+        const period = Math.min(limits.max, Math.max(limits.min, forecast.period));
+        const horizon = Math.min(horizonLimits.max, Math.max(horizonLimits.min, forecast.horizon));
+        if (period !== forecast.period || horizon !== forecast.horizon) {
+            onForecastChange({ ...forecast, period, horizon });
+        }
+    }, [timeFilter]);
+    const setPeriod = (p) => {
+        onForecastChange({ ...forecast, period: Math.min(limits.max, Math.max(limits.min, p)) });
+    };
+    const setHorizon = (h) => {
+        onForecastChange({ ...forecast, horizon: Math.min(horizonLimits.max, Math.max(horizonLimits.min, h)) });
+    };
+    const activeMethod = exports.FORECAST_METHODS.find(m => m.value === forecast.method);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (target?.closest?.('[data-radix-popper-content-wrapper],[role="listbox"]'))
+                return;
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [open]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: containerRef, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setOpen(!open), className: (0, utils_1.cn)('flex items-center justify-center transition-colors relative', bare ? 'w-7 h-7 rounded-md' : 'w-8 h-8 rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]', open
+                    ? 'bg-[rgb(var(--color-primary))] text-white shadow-sm'
+                    : bare
+                        ? 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'
+                        : 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-subtle))] hover:border-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary))]'), title: t('Forecast'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.TrendingUp, { className: "w-4 h-4" }), forecast.enabled && !open && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50 w-96 max-w-[calc(100vw-2rem)]', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))] shrink-0", children: t('Forecast') }), onTimeFilterChange ? ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: TIME_FILTER_OPTIONS.map(o => ({ value: o.value, label: t(o.label) })), value: timeFilter, onValueChange: (v) => onTimeFilterChange(v), searchable: false, size: "sm", triggerClassName: "h-6 text-[11px] min-w-[6.5rem]" })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: ["\u00B7 ", t(timeFilter)] }))] }), (0, jsx_runtime_1.jsx)(ui_1.Switch, { checked: forecast.enabled, onCheckedChange: (enabled) => onForecastChange({ ...forecast, enabled }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('p-3 space-y-3', !forecast.enabled && 'opacity-50 pointer-events-none'), children: [(0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: exports.FORECAST_METHODS.map(m => ({ id: m.value, label: t(m.label) })), activeTab: forecast.method, onTabChange: (tabId) => onForecastChange({ ...forecast, method: tabId }), variant: "rounded", size: "sm", fullWidth: true }), activeMethod && ((0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: t(activeMethod.hint) })), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: t('Based On Last') }), (0, jsx_runtime_1.jsx)(Stepper, { value: forecast.period, min: limits.min, max: limits.max, onChange: setPeriod }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-[10px] text-[rgb(var(--fg-muted))] truncate", children: resolvePeriodRange(timeFilter, forecast.period, -1) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: t('Forecast Ahead') }), (0, jsx_runtime_1.jsx)(Stepper, { value: forecast.horizon, min: horizonLimits.min, max: horizonLimits.max, onChange: setHorizon }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-[10px] text-[rgb(var(--fg-muted))] truncate", children: resolvePeriodRange(timeFilter, forecast.horizon, 1) })] })] })] })] }))] }));
+}
+function FilterBar({ title, contextLabel, secondaryToggle, timeFilter = 'Week', onTimeFilterChange, timeFilterSelection, onTimeFilterSelectionChange, hideTimeFilter = false, filters = [], filterValues = {}, onFilterChange, dateFrom, dateTo, onDateFromChange, onDateToChange, onApply, onReset, reports = [], onReportSelect, onExport, hideFilterButton = false, hideDateRange = false, showApplyButton = false, forecast, onForecastChange, onShare, showInsights = false, insightsActive = false, onInsightsClick, children, className, layout = 'default', fiscalStartYear }) {
+    const [popoverOpen, setPopoverOpen] = (0, react_1.useState)(false);
+    const popoverRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    const timeOptions = (0, react_1.useMemo)(() => (fiscalStartYear ? buildTimeOptions(fiscalStartYear) : TIME_FILTER_OPTIONS), [fiscalStartYear]);
+    // Handle click outside. Ignore clicks landing inside a portalled dropdown/select
+    // list (rendered to document.body, outside popoverRef) so selecting a filter
+    // option doesn't close this popover before the value commits.
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (target?.closest?.('[data-radix-popper-content-wrapper],[role="listbox"]'))
+                return;
+            if (popoverOpen &&
+                popoverRef.current &&
+                !popoverRef.current.contains(e.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(e.target)) {
+                setPopoverOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [popoverOpen]);
+    // Handle escape key
+    (0, react_1.useEffect)(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && popoverOpen) {
+                setPopoverOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [popoverOpen]);
+    const handleDateRangeChange = (0, react_1.useCallback)((value) => {
+        if (value && typeof value === 'object' && 'from' in value) {
+            const range = value;
+            onDateFromChange?.(range.from);
+            onDateToChange?.(range.to);
+        }
+    }, [onDateFromChange, onDateToChange]);
+    const handleReset = () => {
+        onDateFromChange?.(undefined);
+        onDateToChange?.(undefined);
+        onReset?.();
+    };
+    const hasActiveFilters = Object.values(filterValues).some(v => v && v.length > 0) || dateFrom || dateTo;
+    const dateRangeValue = { from: dateFrom, to: dateTo };
+    // Centered layout: Title in center, controls on left and right
+    if (layout === 'centered') {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] border-b border-[rgb(var(--bd-default))]', className), children: (0, jsx_runtime_1.jsx)("div", { className: "px-4 py-3 lg:px-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [secondaryToggle && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
+                                        Day: timeFilterSelection?.days || [],
+                                        Week: timeFilterSelection?.weeks || [],
+                                        Month: timeFilterSelection?.months || [],
+                                        Quarter: timeFilterSelection?.quarters || [],
+                                        Year: timeFilterSelection?.years || [],
+                                    }, onDropdownChange: (tabId, selectedValues) => {
+                                        const filter = tabId;
+                                        const newSelection = {
+                                            type: filter,
+                                            ...(filter === 'Day' && { days: selectedValues }),
+                                            ...(filter === 'Week' && { weeks: selectedValues }),
+                                            ...(filter === 'Month' && { months: selectedValues }),
+                                            ...(filter === 'Quarter' && { quarters: selectedValues }),
+                                            ...(filter === 'Year' && { years: selectedValues }),
+                                        };
+                                        onTimeFilterSelectionChange?.(newSelection);
+                                    } }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: title }), contextLabel && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: contextLabel }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [!hideFilterButton && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: (0, utils_1.cn)('w-8 h-8 rounded-md flex items-center justify-center transition-colors relative', 'border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))]', 'text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-subtle))] hover:border-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary))]', popoverOpen && 'bg-[rgb(var(--color-primary))] text-white border-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary))]'), title: "Filters", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && ((0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50', 'w-[95vw] sm:w-auto', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setPopoverOpen(false), className: "w-5 h-5 rounded flex items-center justify-center hover:bg-[rgb(var(--bg-subtle))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-3", children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${filters.length}, minmax(140px, 1fr))` }, children: filters.map((filter) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: filter.options, multiSelect: filter.type === 'multiselect', value: filterValues[filter.id] ?? (filter.type === 'multiselect' ? [] : ''), onValueChange: (value) => onFilterChange?.(filter.id, value), placeholder: filter.placeholder || `All ${filter.label}s`, searchable: true, className: "w-full" })] }, filter.id))) })), children, !hideDateRange && ((0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && ((0, jsx_runtime_1.jsx)(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange })), showApplyButton && ((0, jsx_runtime_1.jsx)("button", { onClick: onApply, className: (0, utils_1.cn)('h-8 px-4 rounded-md flex items-center gap-1.5', 'bg-[rgb(var(--color-primary))] text-white', 'text-xs font-semibold', 'shadow-sm hover:shadow-md transition-all', 'hover:brightness-110'), children: "Apply" })), (reports.length > 0 || onShare || onExport) && ((0, jsx_runtime_1.jsx)(OverflowMenu, { reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] })] }) }) }));
+    }
+    // Default layout: Title centered, controls on right
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] border-b border-[rgb(var(--bd-default))]', 'px-4 py-3 lg:px-6', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0 flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-base sm:text-xl font-bold text-[rgb(var(--fg-default))] leading-tight truncate", children: title }), contextLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "hidden sm:inline-flex items-center gap-1.5 shrink-0 h-6 px-2.5 rounded-full border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-xs font-medium text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [secondaryToggle && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" }) }), (0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block h-4 w-px bg-[rgb(var(--bd-default))] self-center" })] })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
+                                        Day: timeFilterSelection?.days || [],
+                                        Week: timeFilterSelection?.weeks || [],
+                                        Month: timeFilterSelection?.months || [],
+                                        Quarter: timeFilterSelection?.quarters || [],
+                                        Year: timeFilterSelection?.years || [],
+                                    }, onDropdownChange: (tabId, selectedValues) => {
+                                        const filter = tabId;
+                                        const newSelection = {
+                                            type: filter,
+                                            ...(filter === 'Day' && { days: selectedValues }),
+                                            ...(filter === 'Week' && { weeks: selectedValues }),
+                                            ...(filter === 'Month' && { months: selectedValues }),
+                                            ...(filter === 'Quarter' && { quarters: selectedValues }),
+                                            ...(filter === 'Year' && { years: selectedValues }),
+                                        };
+                                        onTimeFilterSelectionChange?.(newSelection);
+                                    } }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-0.5 rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] p-0.5", children: [!hideFilterButton && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, onClick: () => setPopoverOpen(!popoverOpen), className: (0, utils_1.cn)('w-7 h-7 rounded-md flex items-center justify-center transition-colors relative', popoverOpen
+                                                    ? 'bg-[rgb(var(--color-primary))] text-white shadow-sm'
+                                                    : 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]'), title: "Filters", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { className: "w-4 h-4" }), hasActiveFilters && !popoverOpen && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1 -right-1 w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full" }))] }), popoverOpen && ((0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, className: (0, utils_1.cn)('absolute top-full right-0 mt-2 z-50', 'w-[95vw] sm:w-auto', 'bg-[rgb(var(--bg-surface))] rounded-xl shadow-xl border border-[rgb(var(--bd-default))]', 'overflow-hidden'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-3 py-2 border-b border-[rgb(var(--bd-default))] flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-[rgb(var(--fg-default))]", children: "Filters" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setPopoverOpen(false), className: "w-5 h-5 rounded flex items-center justify-center hover:bg-[rgb(var(--bg-subtle))] transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-3", children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-3", style: { gridTemplateColumns: `repeat(${Math.min(filters.length, 3)}, minmax(140px, 1fr))` }, children: filters.map((filter) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "text-[10px] font-semibold text-[rgb(var(--fg-muted))] uppercase tracking-wider mb-1 block", children: filter.label }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: filter.options, multiSelect: filter.type === 'multiselect', value: filterValues[filter.id] ?? (filter.type === 'multiselect' ? [] : ''), onValueChange: (value) => onFilterChange?.(filter.id, value), placeholder: filter.placeholder || `All ${filter.label}s`, searchable: true, className: "w-full" })] }, filter.id))) })), children, !hideDateRange && ((0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { mode: "range", value: dateRangeValue, onChange: handleDateRangeChange, inline: true }))] })] }))] })), forecast && onForecastChange && ((0, jsx_runtime_1.jsx)(ForecastControl, { forecast: forecast, onForecastChange: onForecastChange, timeFilter: timeFilter, onTimeFilterChange: onTimeFilterChange, bare: true })), (showInsights || reports.length > 0 || onShare || onExport) && ((0, jsx_runtime_1.jsx)(OverflowMenu, { showInsights: showInsights, insightsActive: insightsActive, onInsightsClick: onInsightsClick, reports: reports, onReportSelect: onReportSelect, onShare: onShare, onExport: onExport }))] }), showApplyButton && ((0, jsx_runtime_1.jsx)("button", { onClick: onApply, className: (0, utils_1.cn)('h-8 px-4 rounded-md flex items-center gap-1.5', 'bg-[rgb(var(--color-primary))] text-white', 'text-xs font-semibold', 'shadow-sm hover:shadow-md transition-all', 'hover:brightness-110'), children: "Apply" }))] })] }), contextLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "sm:hidden mt-2 inline-flex items-center gap-1.5 h-6 px-2.5 rounded-full border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] text-xs font-medium text-[rgb(var(--fg-muted))]", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { className: "w-3.5 h-3.5" }), contextLabel] })), (!hideTimeFilter || secondaryToggle) && ((0, jsx_runtime_1.jsxs)("div", { className: "sm:hidden mt-2 flex items-center gap-2 overflow-x-auto", children: [secondaryToggle && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: secondaryToggle.options.map(opt => ({ id: opt.value, label: opt.label })), activeTab: secondaryToggle.value, onTabChange: secondaryToggle.onChange, size: "sm" })), !hideTimeFilter && ((0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: timeOptions.map(opt => ({ id: opt.value, label: opt.label, dropdownOptions: opt.dropdownOptions, quickOptions: opt.quickOptions })), activeTab: timeFilter, onTabChange: (tabId) => onTimeFilterChange?.(tabId), variant: "rounded", size: "sm", dropdownValues: {
+                            Day: timeFilterSelection?.days || [],
+                            Week: timeFilterSelection?.weeks || [],
+                            Month: timeFilterSelection?.months || [],
+                            Quarter: timeFilterSelection?.quarters || [],
+                            Year: timeFilterSelection?.years || [],
+                        }, onDropdownChange: (tabId, selectedValues) => {
+                            const filter = tabId;
+                            const newSelection = {
+                                type: filter,
+                                ...(filter === 'Day' && { days: selectedValues }),
+                                ...(filter === 'Week' && { weeks: selectedValues }),
+                                ...(filter === 'Month' && { months: selectedValues }),
+                                ...(filter === 'Quarter' && { quarters: selectedValues }),
+                                ...(filter === 'Year' && { years: selectedValues }),
+                            };
+                            onTimeFilterSelectionChange?.(newSelection);
+                        } }))] }))] }));
+}

package/dist/cjs/components/dashboard/Tooltip.js

@@ -0,0 +1,86 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardTooltip = DashboardTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const framer_motion_1 = require("framer-motion");
+const utils_1 = require("../../lib/utils.js");
+/**
+ * DashboardTooltip - Hover tooltip for dashboard elements
+ *
+ * Usage:
+ * <DashboardTooltip content="This is a tooltip">
+ *   <button>Hover me</button>
+ * </DashboardTooltip>
+ */
+function DashboardTooltip({ content, position = 'top', delay = 200, children, className, disabled = false }) {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const timeoutRef = React.useRef(null);
+    const showTooltip = () => {
+        if (disabled)
+            return;
+        timeoutRef.current = setTimeout(() => {
+            setIsVisible(true);
+        }, delay);
+    };
+    const hideTooltip = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        setIsVisible(false);
+    };
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const positionClasses = {
+        top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+        bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+        left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+        right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+    };
+    const arrowClasses = {
+        top: 'top-full left-1/2 -translate-x-1/2 border-t-[rgb(var(--fg-default))] border-x-transparent border-b-transparent',
+        bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-[rgb(var(--fg-default))] border-x-transparent border-t-transparent',
+        left: 'left-full top-1/2 -translate-y-1/2 border-l-[rgb(var(--fg-default))] border-y-transparent border-r-transparent',
+        right: 'right-full top-1/2 -translate-y-1/2 border-r-[rgb(var(--fg-default))] border-y-transparent border-l-transparent'
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative inline-flex", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, children: [children, (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isVisible && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, transition: { duration: 0.15 }, className: (0, utils_1.cn)('absolute z-50 px-2.5 py-1.5', 'bg-[rgb(var(--fg-default))] text-[rgb(var(--bg-surface))] text-xs font-medium', 'rounded-md shadow-lg whitespace-nowrap', positionClasses[position], className), role: "tooltip", children: [content, (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('absolute w-0 h-0 border-4', arrowClasses[position]) })] })) })] }));
+}