@nadicodeai/ui 7.1.3 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +0 -7
- package/dist/components/agent-card.js +1 -1
- package/dist/components/agent-visual.js +1 -1
- package/dist/components/alert-dialog.js +1 -1
- package/dist/components/automation-section.js +1 -1
- package/dist/components/card-marketing.d.ts +1 -1
- package/dist/components/card-marketing.js +4 -4
- package/dist/components/card.js +3 -3
- package/dist/components/chart-area-stacked.d.ts +4 -0
- package/dist/components/chart-area-stacked.d.ts.map +1 -0
- package/dist/components/chart-area-stacked.js +24 -0
- package/dist/components/chart-axis.d.ts +38 -0
- package/dist/components/chart-axis.d.ts.map +1 -0
- package/dist/components/chart-axis.js +83 -0
- package/dist/components/chart-bar-multiple.d.ts +9 -0
- package/dist/components/chart-bar-multiple.d.ts.map +1 -0
- package/dist/components/chart-bar-multiple.js +26 -0
- package/dist/components/chart-bar-stacked.d.ts +10 -0
- package/dist/components/chart-bar-stacked.d.ts.map +1 -0
- package/dist/components/chart-bar-stacked.js +41 -0
- package/dist/components/chart-card.d.ts +75 -0
- package/dist/components/chart-card.d.ts.map +1 -0
- package/dist/components/chart-card.js +71 -0
- package/dist/components/chart-date-range-control.d.ts +4 -6
- package/dist/components/chart-date-range-control.d.ts.map +1 -1
- package/dist/components/chart-date-range-control.js +34 -32
- package/dist/components/chart-sparkline.d.ts +6 -42
- package/dist/components/chart-sparkline.d.ts.map +1 -1
- package/dist/components/chart-sparkline.js +22 -35
- package/dist/components/chart.d.ts +3 -4
- package/dist/components/chart.d.ts.map +1 -1
- package/dist/components/chart.js +7 -16
- package/dist/components/combobox.js +1 -1
- package/dist/components/command.js +2 -2
- package/dist/components/context-menu.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/drawer.js +1 -1
- package/dist/components/dropdown-menu.js +1 -1
- package/dist/components/glass-control.js +1 -1
- package/dist/components/hover-card.js +1 -1
- package/dist/components/kpi-card.d.ts +37 -0
- package/dist/components/kpi-card.d.ts.map +1 -0
- package/dist/components/kpi-card.js +20 -0
- package/dist/components/live-demo.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/model-mark.js +1 -1
- package/dist/components/navigation-menu.js +2 -2
- package/dist/components/popover.d.ts +1 -1
- package/dist/components/popover.d.ts.map +1 -1
- package/dist/components/popover.js +2 -2
- package/dist/components/progress.d.ts +18 -2
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +40 -10
- package/dist/components/select.js +2 -2
- package/dist/components/sheet.js +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/toggle.js +1 -1
- package/dist/components/trend-badge.d.ts +22 -0
- package/dist/components/trend-badge.d.ts.map +1 -0
- package/dist/components/trend-badge.js +31 -0
- package/dist/index.d.ts +13 -14
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -14
- package/docs/component-classification.md +1 -1
- package/docs/contract.md +19 -21
- package/package.json +9 -9
- package/dist/components/chart-breakdown-table.d.ts +0 -69
- package/dist/components/chart-breakdown-table.d.ts.map +0 -1
- package/dist/components/chart-breakdown-table.js +0 -35
- package/dist/components/chart-bullet-bar.d.ts +0 -53
- package/dist/components/chart-bullet-bar.d.ts.map +0 -1
- package/dist/components/chart-bullet-bar.js +0 -63
- package/dist/components/chart-delta.d.ts +0 -30
- package/dist/components/chart-delta.d.ts.map +0 -1
- package/dist/components/chart-delta.js +0 -32
- package/dist/components/chart-kpi-stat.d.ts +0 -44
- package/dist/components/chart-kpi-stat.d.ts.map +0 -1
- package/dist/components/chart-kpi-stat.js +0 -51
- package/dist/components/chart-time-series-layout.d.ts +0 -6
- package/dist/components/chart-time-series-layout.d.ts.map +0 -1
- package/dist/components/chart-time-series-layout.js +0 -6
- package/dist/components/chart-time-series.d.ts +0 -103
- package/dist/components/chart-time-series.d.ts.map +0 -1
- package/dist/components/chart-time-series.js +0 -310
- package/dist/components/stat-block.d.ts +0 -24
- package/dist/components/stat-block.d.ts.map +0 -1
- package/dist/components/stat-block.js +0 -26
- package/dist/components/stats-band.d.ts +0 -22
- package/dist/components/stats-band.d.ts.map +0 -1
- package/dist/components/stats-band.js +0 -32
|
@@ -1,54 +1,62 @@
|
|
|
1
|
+
// Composed from the shadcn registry items `select`, `popover` and `calendar`
|
|
2
|
+
// (https://ui.shadcn.com/r/styles/base-nova/select.json, .../popover.json,
|
|
3
|
+
// .../calendar.json).
|
|
1
4
|
"use client";
|
|
2
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
6
|
import * as React from "react";
|
|
4
|
-
import { CalendarIcon } from "lucide-react";
|
|
5
7
|
import { cn } from "../lib/utils.js";
|
|
6
|
-
import { Button } from "./button.js";
|
|
7
8
|
import { Calendar } from "./calendar.js";
|
|
8
|
-
import { Popover, PopoverContent
|
|
9
|
+
import { Popover, PopoverContent } from "./popover.js";
|
|
10
|
+
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
|
|
9
11
|
import { DATE_RANGE_PRESETS, formatIsoDay, parseIsoDay, } from "./chart-date-range.js";
|
|
10
12
|
/**
|
|
11
|
-
* chart-date-range-control —
|
|
12
|
-
*
|
|
13
|
-
*
|
|
13
|
+
* chart-date-range-control — ONE Select of relative presets with a "Custom"
|
|
14
|
+
* entry that opens a range calendar in a Popover anchored to it. A page
|
|
15
|
+
* toolbar carries one such control, not a row of range buttons.
|
|
14
16
|
*
|
|
15
17
|
* Fully controlled: the consumer owns the value and typically round-trips it
|
|
16
18
|
* through URL state with `encodeDateRange` / `decodeDateRange` from
|
|
17
|
-
* `chart-date-range` (
|
|
18
|
-
*
|
|
19
|
-
* `aria-pressed`.
|
|
19
|
+
* `chart-date-range` (a separate server-safe module, because the package owns
|
|
20
|
+
* no routing).
|
|
20
21
|
*
|
|
21
|
-
* `presets` narrows which
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
22
|
+
* `presets` narrows which entries the Select offers, in the order given. It
|
|
23
|
+
* only filters the offered entries — the codec enum (`DATE_RANGE_PRESETS`) is
|
|
24
|
+
* unchanged, so a URL arriving with an un-offered but valid preset token still
|
|
25
|
+
* decodes; the consumer decides its fallback.
|
|
25
26
|
*/
|
|
26
|
-
|
|
27
|
-
// thing that says it. A soft neutral fill sits about 1.1:1 against the page in
|
|
28
|
-
// both modes, which is a state no sighted reader can find, so the selected
|
|
29
|
-
// preset wears the navigation-selection role: the same colour the console
|
|
30
|
-
// marks a chosen destination with, and the only neutral-safe token that clears
|
|
31
|
-
// the 3:1 a state-bearing control owes.
|
|
32
|
-
const SELECTED_PRESET_CLASS = "bg-(--nc-navigation-selection-bg) text-(--nc-navigation-selection-fg) hover:bg-(--nc-navigation-selection-hover) hover:text-(--nc-navigation-selection-fg)";
|
|
27
|
+
const CUSTOM_VALUE = "custom";
|
|
33
28
|
const DEFAULT_PRESET_LABELS = {
|
|
34
|
-
"7d": "
|
|
35
|
-
"14d": "
|
|
36
|
-
"30d": "
|
|
29
|
+
"7d": "Past 7 days",
|
|
30
|
+
"14d": "Past 14 days",
|
|
31
|
+
"30d": "Past 30 days",
|
|
37
32
|
cycle: "This cycle",
|
|
38
33
|
};
|
|
39
|
-
function DateRangeControl({ value, onChange, label = "Date range", presets = DATE_RANGE_PRESETS, presetLabels, customLabel = "Custom", formatCustomValue, className,
|
|
34
|
+
function DateRangeControl({ value, onChange, label = "Date range", presets = DATE_RANGE_PRESETS, presetLabels, customLabel = "Custom", formatCustomValue, className, }) {
|
|
40
35
|
const [open, setOpen] = React.useState(false);
|
|
41
36
|
const [pending, setPending] = React.useState(undefined);
|
|
37
|
+
const anchor = React.useRef(null);
|
|
42
38
|
const isCustom = value.kind === "custom";
|
|
43
39
|
const selected = pending ??
|
|
44
40
|
(isCustom ? { from: parseIsoDay(value.from), to: parseIsoDay(value.to) } : undefined);
|
|
41
|
+
const triggerLabel = isCustom
|
|
42
|
+
? (formatCustomValue?.({ from: value.from, to: value.to }) ?? `${value.from} – ${value.to}`)
|
|
43
|
+
: (presetLabels?.[value.preset] ?? DEFAULT_PRESET_LABELS[value.preset]);
|
|
45
44
|
function handleOpenChange(nextOpen) {
|
|
46
45
|
setOpen(nextOpen);
|
|
47
46
|
if (!nextOpen) {
|
|
48
47
|
setPending(undefined);
|
|
49
48
|
}
|
|
50
49
|
}
|
|
51
|
-
function
|
|
50
|
+
function handleSelectChange(next) {
|
|
51
|
+
if (next === CUSTOM_VALUE) {
|
|
52
|
+
setOpen(true);
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (next !== null) {
|
|
56
|
+
onChange({ kind: "preset", preset: next });
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
function handleCalendarSelect(range) {
|
|
52
60
|
if (range?.from && range?.to) {
|
|
53
61
|
setPending(undefined);
|
|
54
62
|
setOpen(false);
|
|
@@ -61,12 +69,6 @@ function DateRangeControl({ value, onChange, label = "Date range", presets = DAT
|
|
|
61
69
|
}
|
|
62
70
|
setPending(range);
|
|
63
71
|
}
|
|
64
|
-
return (_jsxs("div", { "data-slot": "date-range-control",
|
|
65
|
-
const active = value.kind === "preset" && value.preset === preset;
|
|
66
|
-
return (_jsx(Button, { size: "sm", variant: "ghost", "aria-pressed": active, className: active ? SELECTED_PRESET_CLASS : undefined, onClick: () => onChange({ kind: "preset", preset }), children: presetLabels?.[preset] ?? DEFAULT_PRESET_LABELS[preset] }, preset));
|
|
67
|
-
}), _jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { size: "sm", variant: "ghost", "aria-pressed": isCustom, className: isCustom ? SELECTED_PRESET_CLASS : undefined, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), isCustom
|
|
68
|
-
? (formatCustomValue?.({ from: value.from, to: value.to }) ??
|
|
69
|
-
`${value.from} – ${value.to}`)
|
|
70
|
-
: customLabel] }) }), _jsx(PopoverContent, { align: "start", className: "w-auto p-0", children: _jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: selected?.from, selected: selected, onSelect: handleSelect }) })] })] }));
|
|
72
|
+
return (_jsxs("div", { ref: anchor, "data-slot": "date-range-control", className: cn("inline-flex", className), children: [_jsxs(Select, { value: isCustom ? CUSTOM_VALUE : value.preset, onValueChange: handleSelectChange, children: [_jsx(SelectTrigger, { "aria-label": label, className: "w-44", children: _jsx(SelectValue, { children: triggerLabel }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [presets.map((preset) => (_jsx(SelectItem, { value: preset, children: presetLabels?.[preset] ?? DEFAULT_PRESET_LABELS[preset] }, preset))), _jsx(SelectItem, { value: CUSTOM_VALUE, children: customLabel })] }) })] }), _jsx(Popover, { open: open, onOpenChange: handleOpenChange, children: _jsx(PopoverContent, { anchor: anchor, align: "start", className: "w-auto p-0", children: _jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: selected?.from, selected: selected, onSelect: handleCalendarSelect }) }) })] }));
|
|
71
73
|
}
|
|
72
74
|
export { DateRangeControl };
|
|
@@ -1,46 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
/**
|
|
3
|
-
* chart-sparkline — hand-rolled SVG sparkline for the console chart kit
|
|
4
|
-
* (issue #166; sparkline carve-out from the Recharts chart pattern the rest of
|
|
5
|
-
* the kit is built on; DESIGN.md "Delta and trend
|
|
6
|
-
* encoding", "Mark specs").
|
|
7
|
-
*
|
|
8
|
-
* Sparklines normalize against a meaningful baseline, never the visible
|
|
9
|
-
* min–max span alone: the vertical domain always includes the provided
|
|
10
|
-
* baseline, so a flat-ish series near a distant baseline reads as flat, not
|
|
11
|
-
* as dramatic noise. Marks render in real pixel space (uniform viewBox, no
|
|
12
|
-
* non-uniform scaling), single stroke of at least 2px with round joins/caps.
|
|
13
|
-
*
|
|
14
|
-
* When rendered inside a named stat (KpiStat), the sparkline is decorative
|
|
15
|
-
* and stays `aria-hidden`; when standalone, pass `label` so it carries its
|
|
16
|
-
* own accessible name. A standalone sparkline also renders a visually hidden
|
|
17
|
-
* data alternative next to the `role="img"` svg — the point values in order —
|
|
18
|
-
* so the trend is not vision-only. The decorative (aria-hidden) variant emits
|
|
19
|
-
* no such list.
|
|
20
|
-
*/
|
|
21
|
-
type SparklinePoint = {
|
|
22
|
-
x: number;
|
|
23
|
-
y: number;
|
|
24
|
-
};
|
|
25
|
-
/**
|
|
26
|
-
* Baseline-anchored normalization: the vertical domain is
|
|
27
|
-
* [min(baseline, data), max(baseline, data)] — never the visible data
|
|
28
|
-
* min–max alone. Points are inset by half the stroke width so the stroke
|
|
29
|
-
* never clips at the edges. A zero-span domain centers the line vertically.
|
|
30
|
-
*/
|
|
31
|
-
declare function normalizeSparklinePoints(data: readonly number[], baseline: number, width: number, height: number, strokeWidth?: number): SparklinePoint[];
|
|
32
|
-
declare function Sparkline({ data, baseline, label, width, height, stroke, strokeWidth, className, ...props }: Omit<React.ComponentProps<"svg">, "children" | "height" | "viewBox" | "width"> & {
|
|
1
|
+
declare function ChartSparkline({ data, label, color, className, }: {
|
|
33
2
|
data: readonly number[];
|
|
34
|
-
/** The meaningful comparison baseline the vertical domain anchors to. */
|
|
35
|
-
baseline: number;
|
|
36
3
|
/** Accessible name for standalone use; omit inside a named stat. */
|
|
37
4
|
label?: string;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}): React.JSX.Element;
|
|
44
|
-
export { Sparkline, normalizeSparklinePoints };
|
|
45
|
-
export type { SparklinePoint };
|
|
5
|
+
/** Stroke token: one chart token or an entity color, never a raw color. */
|
|
6
|
+
color?: string;
|
|
7
|
+
className?: string;
|
|
8
|
+
}): import("react").JSX.Element;
|
|
9
|
+
export { ChartSparkline };
|
|
46
10
|
//# sourceMappingURL=chart-sparkline.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart-sparkline.d.ts","sourceRoot":"","sources":["../../src/components/chart-sparkline.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"chart-sparkline.d.ts","sourceRoot":"","sources":["../../src/components/chart-sparkline.tsx"],"names":[],"mappings":"AAsBA,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,KAA2B,EAC3B,SAAS,GACV,EAAE;IACD,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAwBA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1,39 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
// Pulled from the shadcn registry item `chart-line-linear`
|
|
2
|
+
// (https://ui.shadcn.com/r/styles/new-york-v4/chart-line-linear.json),
|
|
3
|
+
// stripped of its card, axes, grid and tooltip.
|
|
4
|
+
"use client";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
import { Line, LineChart } from "recharts";
|
|
2
7
|
import { cn } from "../lib/utils.js";
|
|
8
|
+
import { ChartContainer } from "./chart.js";
|
|
3
9
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
10
|
+
* chart-sparkline — the trend line a KPI card carries beside its value. The
|
|
11
|
+
* stock linear line chart with nothing around it: no axes, no grid, no
|
|
12
|
+
* tooltip, and no card.
|
|
13
|
+
*
|
|
14
|
+
* It is decorative by default and stays out of the accessibility tree, because
|
|
15
|
+
* the value and the change beside it already carry the reading. A standalone
|
|
16
|
+
* sparkline passes `label` and becomes a named image.
|
|
8
17
|
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const pad = strokeWidth / 2;
|
|
17
|
-
const usableWidth = Math.max(width - strokeWidth, 0);
|
|
18
|
-
const usableHeight = Math.max(height - strokeWidth, 0);
|
|
19
|
-
return data.map((value, index) => ({
|
|
20
|
-
x: pad + (data.length === 1 ? usableWidth / 2 : (index / (data.length - 1)) * usableWidth),
|
|
21
|
-
y: span === 0 ? height / 2 : pad + (1 - (value - min) / span) * usableHeight,
|
|
22
|
-
}));
|
|
18
|
+
const SPARKLINE_SERIES_KEY = "value";
|
|
19
|
+
function ChartSparkline({ data, label, color = "var(--nc-chart-1)", className, }) {
|
|
20
|
+
const chartData = data.map((value, index) => ({ index, [SPARKLINE_SERIES_KEY]: value }));
|
|
21
|
+
const chartConfig = {
|
|
22
|
+
[SPARKLINE_SERIES_KEY]: { label: label ?? "Trend", color },
|
|
23
|
+
};
|
|
24
|
+
return (_jsx(ChartContainer, { "data-slot": "chart-sparkline", config: chartConfig, className: cn("aspect-auto h-8 w-24", className), ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }), children: _jsx(LineChart, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: _jsx(Line, { dataKey: SPARKLINE_SERIES_KEY, type: "linear", stroke: color, strokeWidth: 2, dot: false }) }) }));
|
|
23
25
|
}
|
|
24
|
-
|
|
25
|
-
// The 2px minimum is a DESIGN.md contract floor ("single stroke of at least
|
|
26
|
-
// 2px"); clamp the public prop so a caller passing a thinner stroke still
|
|
27
|
-
// renders at the floor and the normalization inset matches the painted line.
|
|
28
|
-
const effectiveStrokeWidth = Math.max(strokeWidth, 2);
|
|
29
|
-
const points = normalizeSparklinePoints(data, baseline, width, height, effectiveStrokeWidth);
|
|
30
|
-
const svg = (_jsx("svg", { "data-slot": "sparkline", width: width, height: height, viewBox: `0 0 ${width} ${height}`, className: cn("shrink-0", className), ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }), ...props, children: points.length >= 2 ? (_jsx("polyline", { fill: "none", stroke: stroke, strokeWidth: effectiveStrokeWidth, strokeLinejoin: "round", strokeLinecap: "round", points: points.map((point) => `${point.x},${point.y}`).join(" ") })) : null }));
|
|
31
|
-
// Decorative inside a named stat: emit the bare svg, no data twin.
|
|
32
|
-
if (!label) {
|
|
33
|
-
return svg;
|
|
34
|
-
}
|
|
35
|
-
// Standalone: pair the graphic with a visually hidden ordered value list so
|
|
36
|
-
// the trend is available to assistive tech, not vision-only.
|
|
37
|
-
return (_jsxs("span", { "data-slot": "sparkline-standalone", className: "inline-flex", children: [svg, _jsx("span", { "data-slot": "sparkline-values", className: "sr-only", children: `${label}: ${data.join(", ")}` })] }));
|
|
38
|
-
}
|
|
39
|
-
export { Sparkline, normalizeSparklinePoints };
|
|
26
|
+
export { ChartSparkline };
|
|
@@ -32,19 +32,18 @@ declare const ChartStyle: ({ id, config }: {
|
|
|
32
32
|
config: ChartConfig;
|
|
33
33
|
}) => React.JSX.Element | null;
|
|
34
34
|
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
35
|
-
declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
|
|
35
|
+
declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, valueFormatter, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
|
|
36
36
|
hideLabel?: boolean;
|
|
37
37
|
hideIndicator?: boolean;
|
|
38
38
|
indicator?: "line" | "dot" | "dashed";
|
|
39
39
|
nameKey?: string;
|
|
40
40
|
labelKey?: string;
|
|
41
|
+
valueFormatter?: (value: number) => string;
|
|
41
42
|
} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
|
|
42
43
|
declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
|
|
43
|
-
declare function ChartLegendContent({ className, hideIcon, payload,
|
|
44
|
+
declare function ChartLegendContent({ className, hideIcon, payload, nameKey, }: React.ComponentProps<"div"> & {
|
|
44
45
|
hideIcon?: boolean;
|
|
45
46
|
nameKey?: string;
|
|
46
|
-
placement?: "top" | "bottom";
|
|
47
|
-
marks?: Record<string, React.ReactNode>;
|
|
48
47
|
} & Omit<RechartsPrimitive.DefaultLegendContentProps, "verticalAlign">): React.JSX.Element | null;
|
|
49
48
|
export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
|
|
50
49
|
//# sourceMappingURL=chart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAKjD,QAAA,MAAM,MAAM;;;CAAwC,CAAC;AAGrD,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AACvC,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,MAAM,EACN;IACE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,GAAG,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,CAAC,CAC/E,CAAC;AAkBF,iBAAS,cAAc,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAoC,EACpC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,UAAU,CAAC,CAAC;IACzF,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,qBAuBA;AAED,QAAA,MAAM,UAAU,GAAI,gBAAgB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,6BA4BtE,CAAC;AAEF,QAAA,MAAM,YAAY,kCAA4B,CAAC;AAE/C,iBAAS,mBAAmB,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,aAAqB,EACrB,KAAK,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,
|
|
1
|
+
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAC;AAC9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAKjD,QAAA,MAAM,MAAM;;;CAAwC,CAAC;AAGrD,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AACvC,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,MAAM,EACN;IACE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,GAAG,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,CAAC,CAC/E,CAAC;AAkBF,iBAAS,cAAc,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAoC,EACpC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,UAAU,CAAC,CAAC;IACzF,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,qBAuBA;AAED,QAAA,MAAM,UAAU,GAAI,gBAAgB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,6BA4BtE,CAAC;AAEF,QAAA,MAAM,YAAY,kCAA4B,CAAC;AAE/C,iBAAS,mBAAmB,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAiB,EACjB,SAAiB,EACjB,aAAqB,EACrB,KAAK,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,GACf,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,OAAO,CAAC,GACvD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAOlB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C,GAAG,IAAI,CACN,iBAAiB,CAAC,0BAA0B,CAAC,gBAAgB,EAAE,eAAe,CAAC,EAC/E,oBAAoB,CACrB,4BAmHF;AAED,QAAA,MAAM,WAAW,sGAA2B,CAAC;AAE7C,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAgB,EAChB,OAAO,EACP,OAAO,GACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAIlB,GAAG,IAAI,CAAC,iBAAiB,CAAC,yBAAyB,EAAE,eAAe,CAAC,4BAwCrE;AA2BD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,UAAU,GACX,CAAC"}
|
package/dist/components/chart.js
CHANGED
|
@@ -63,7 +63,7 @@ ${colorConfig
|
|
|
63
63
|
} }));
|
|
64
64
|
};
|
|
65
65
|
const ChartTooltip = RechartsPrimitive.Tooltip;
|
|
66
|
-
function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
|
|
66
|
+
function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, valueFormatter, }) {
|
|
67
67
|
const { config } = useChart();
|
|
68
68
|
const tooltipLabel = React.useMemo(() => {
|
|
69
69
|
if (hideLabel || !payload?.length) {
|
|
@@ -99,34 +99,25 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
99
99
|
}), style: {
|
|
100
100
|
"--color-bg": indicatorColor,
|
|
101
101
|
"--color-border": indicatorColor,
|
|
102
|
-
} }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
|
|
103
|
-
? item.value.toLocaleString()
|
|
102
|
+
} }))), _jsxs("div", { className: cn("flex flex-1 justify-between gap-4 leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
|
|
103
|
+
? (valueFormatter?.(item.value) ?? item.value.toLocaleString())
|
|
104
104
|
: String(item.value) }))] })] })) }, index));
|
|
105
105
|
}) })] }));
|
|
106
106
|
}
|
|
107
107
|
const ChartLegend = RechartsPrimitive.Legend;
|
|
108
|
-
|
|
109
|
-
* A series' identity mark by its legend key, for the `marks` path below.
|
|
110
|
-
* `hasOwn` and not a bare index: the key is a series id from an app, so one
|
|
111
|
-
* named `constructor` or `toString` must read as no mark rather than as an
|
|
112
|
-
* inherited member of the record.
|
|
113
|
-
*/
|
|
114
|
-
function legendMark(marks, key) {
|
|
115
|
-
return marks && Object.hasOwn(marks, key) ? marks[key] : null;
|
|
116
|
-
}
|
|
117
|
-
function ChartLegendContent({ className, hideIcon = false, payload, placement = "bottom", nameKey, marks, }) {
|
|
108
|
+
function ChartLegendContent({ className, hideIcon = false, payload, nameKey, }) {
|
|
118
109
|
const { config } = useChart();
|
|
119
110
|
if (!payload?.length) {
|
|
120
111
|
return null;
|
|
121
112
|
}
|
|
122
|
-
return (_jsx("div", { className: cn("flex items-center justify-center gap-4
|
|
113
|
+
return (_jsx("div", { className: cn("flex items-center justify-center gap-4 pt-3", className), children: payload
|
|
123
114
|
.filter((item) => item.type !== "none")
|
|
124
115
|
.map((item, index) => {
|
|
125
116
|
const key = `${nameKey ?? item.dataKey ?? "value"}`;
|
|
126
117
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
127
|
-
return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-
|
|
118
|
+
return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-full", style: {
|
|
128
119
|
backgroundColor: item.color,
|
|
129
|
-
} })),
|
|
120
|
+
} })), itemConfig?.label] }, index));
|
|
130
121
|
}) }));
|
|
131
122
|
}
|
|
132
123
|
function getPayloadConfigFromPayload(config, payload, key) {
|
|
@@ -20,7 +20,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
|
|
|
20
20
|
return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
|
|
21
21
|
}
|
|
22
22
|
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
23
|
-
return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-
|
|
23
|
+
return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-md border-0 nc-glass text-popover-foreground nc-elevation-floating data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control-height *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none", anchoredOverlayMotion, className), ...props }) }) }));
|
|
24
24
|
}
|
|
25
25
|
function ComboboxList({ className, ...props }) {
|
|
26
26
|
return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-nadicode-xxs data-empty:p-0", className), ...props }));
|
|
@@ -6,10 +6,10 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, }
|
|
|
6
6
|
import { InputGroup, InputGroupAddon } from "./input-group.js";
|
|
7
7
|
import { SearchIcon, CheckIcon } from "lucide-react";
|
|
8
8
|
function Command({ className, ...props }) {
|
|
9
|
-
return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-
|
|
9
|
+
return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-md! nc-glass p-nadicode-xxs text-popover-foreground", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
|
|
12
|
-
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-
|
|
12
|
+
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-md! bg-transparent p-0", className), motion: "instant", showCloseButton: showCloseButton, children: children })] }));
|
|
13
13
|
}
|
|
14
14
|
function CommandInput({ className, ...props }) {
|
|
15
15
|
return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-control-height! rounded-md! border-input bg-background shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
|
|
@@ -14,7 +14,7 @@ function ContextMenuTrigger({ className, ...props }) {
|
|
|
14
14
|
return (_jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", className: cn("select-none", className), ...props }));
|
|
15
15
|
}
|
|
16
16
|
function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
|
|
17
|
-
return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--available-height) min-w-36 overflow-x-hidden overflow-y-auto rounded-
|
|
17
|
+
return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--available-height) min-w-36 overflow-x-hidden overflow-y-auto rounded-md border-0 nc-glass p-nadicode-xxs text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
18
18
|
}
|
|
19
19
|
function ContextMenuGroup({ ...props }) {
|
|
20
20
|
return _jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props });
|
|
@@ -28,7 +28,7 @@ function DialogContent({ className, children, showCloseButton = true, closeLabel
|
|
|
28
28
|
// scroll. It must not clip this popup with `overflow-hidden`: that
|
|
29
29
|
// hides Base UI's trailing focus guard, and Tab then walks out of the
|
|
30
30
|
// dialog into the page behind it.
|
|
31
|
-
"fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100svh-var(--nc-xl))] w-full max-w-[calc(100%-var(--nc-xl))] -translate-x-1/2 -translate-y-1/2 flex-col gap-nadicode-md overflow-y-auto rounded-
|
|
31
|
+
"fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100svh-var(--nc-xl))] w-full max-w-[calc(100%-var(--nc-xl))] -translate-x-1/2 -translate-y-1/2 flex-col gap-nadicode-md overflow-y-auto rounded-md border-0 bg-popover p-nadicode-lg text-sm text-popover-foreground nc-elevation-modal outline-none sm:max-w-sm", motion === "instant" ? instantModalOverlayMotion : modalOverlayMotion, className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
|
|
32
32
|
}
|
|
33
33
|
function DialogHeader({ className, ...props }) {
|
|
34
34
|
return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
|
|
@@ -36,7 +36,7 @@ function DrawerContent({ className, children, ...props }) {
|
|
|
36
36
|
const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
|
|
37
37
|
return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && _jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : undefined }), _jsx(DrawerPrimitive.Viewport, { "data-slot": "drawer-viewport", "data-modal": modal, className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto", children: _jsxs(DrawerPrimitive.Popup, { "data-slot": "drawer-popup", "data-swipe-axis": swipeAxis, "data-snap-points": hasSnapPoints ? "" : undefined, className: cn(
|
|
38
38
|
// Base.
|
|
39
|
-
"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col border-0 bg-popover text-sm text-popover-foreground nc-elevation-modal transition-[transform,opacity] duration-[var(--nc-duration-drawer)] ease-[var(--nc-ease-drawer)] outline-none select-none data-[swipe-direction=down]:rounded-t-
|
|
39
|
+
"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col border-0 bg-popover text-sm text-popover-foreground nc-elevation-modal transition-[transform,opacity] duration-[var(--nc-duration-drawer)] ease-[var(--nc-ease-drawer)] outline-none select-none data-[swipe-direction=down]:rounded-t-md data-[swipe-direction=left]:rounded-r-md data-[swipe-direction=right]:rounded-l-md data-[swipe-direction=up]:rounded-b-md motion-reduce:transition-none",
|
|
40
40
|
// Nested.
|
|
41
41
|
"data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
|
|
42
42
|
// Bleed.
|
|
@@ -13,7 +13,7 @@ function DropdownMenuTrigger({ ...props }) {
|
|
|
13
13
|
return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
|
|
14
14
|
}
|
|
15
15
|
function DropdownMenuContent({ align = "start", alignOffset = 0, density = "comfortable", side = "bottom", sideOffset = 6, className, ...props }) {
|
|
16
|
-
return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: 8, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", "data-density": density, className: cn("group/menu z-50 max-h-(--available-height) w-max min-w-[min(14rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-
|
|
16
|
+
return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: 8, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", "data-density": density, className: cn("group/menu z-50 max-h-(--available-height) w-max min-w-[min(14rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-md border-0 bg-popover p-nadicode-xxs text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
17
17
|
}
|
|
18
18
|
function DropdownMenuGroup({ ...props }) {
|
|
19
19
|
return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
@@ -5,7 +5,7 @@ function GlassControl({ className, render, shape = "control", ...props }) {
|
|
|
5
5
|
return useRender({
|
|
6
6
|
defaultTagName: "div",
|
|
7
7
|
props: mergeProps({
|
|
8
|
-
className: cn("nc-glass flex items-center border-0 text-popover-foreground nc-elevation-floating", shape === "control" && "rounded-
|
|
8
|
+
className: cn("nc-glass flex items-center border-0 text-popover-foreground nc-elevation-floating", shape === "control" && "rounded-md", shape === "bar" && "rounded-none", className),
|
|
9
9
|
}, props),
|
|
10
10
|
render,
|
|
11
11
|
state: { shape, slot: "glass-control" },
|
|
@@ -10,6 +10,6 @@ function HoverCardTrigger({ ...props }) {
|
|
|
10
10
|
return _jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
|
|
11
11
|
}
|
|
12
12
|
function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
|
|
13
|
-
return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn("z-50 w-64 rounded-
|
|
13
|
+
return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn("z-50 w-64 rounded-md border-0 bg-popover p-control-padding-inline text-sm text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
14
14
|
}
|
|
15
15
|
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { useRender } from "@base-ui/react/use-render";
|
|
3
|
+
import { type TrendDirection } from "./trend-badge.js";
|
|
4
|
+
/**
|
|
5
|
+
* kpi-card — one measured figure, the way the dashboard-01 section card shows
|
|
6
|
+
* it: the label above the value, the change top right as a badge, and the
|
|
7
|
+
* named comparison in the footer (`rule/kpi-card-trend-top-right`). A row of KPIs is a `CardRow` of these; there is no grouped or
|
|
8
|
+
* divided variant.
|
|
9
|
+
*/
|
|
10
|
+
type KpiCardDirection = TrendDirection;
|
|
11
|
+
type KpiCardTone = "default" | "warning" | "critical";
|
|
12
|
+
type KpiCardDelta = {
|
|
13
|
+
/** The formatted change, e.g. "+12.5%". */
|
|
14
|
+
value: React.ReactNode;
|
|
15
|
+
direction: KpiCardDirection;
|
|
16
|
+
/** Whether an upward move is good for this KPI. Defaults to true. */
|
|
17
|
+
upIsGood?: boolean;
|
|
18
|
+
/** A volume change keeps its arrow, which is a fact, and takes no tone, which would be a judgment. */
|
|
19
|
+
neutral?: boolean;
|
|
20
|
+
/** The whole comparison line in the reader's language, e.g. "vs August", "rispetto ad agosto". */
|
|
21
|
+
comparison: string;
|
|
22
|
+
/** The direction in the reader's language, for a screen reader. */
|
|
23
|
+
directionLabel?: string;
|
|
24
|
+
};
|
|
25
|
+
declare function KpiCard({ label, value, delta, note, tone, render, className, }: {
|
|
26
|
+
label: React.ReactNode;
|
|
27
|
+
value: React.ReactNode;
|
|
28
|
+
delta?: KpiCardDelta;
|
|
29
|
+
note?: React.ReactNode;
|
|
30
|
+
tone?: KpiCardTone;
|
|
31
|
+
/** Binds an app link or element without replacing the card's presentation. */
|
|
32
|
+
render?: useRender.ComponentProps<"div">["render"];
|
|
33
|
+
className?: string;
|
|
34
|
+
}): React.JSX.Element;
|
|
35
|
+
export { KpiCard };
|
|
36
|
+
export type { KpiCardDelta, KpiCardDirection, KpiCardTone };
|
|
37
|
+
//# sourceMappingURL=kpi-card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kpi-card.d.ts","sourceRoot":"","sources":["../../src/components/kpi-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAW3D,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtF;;;;;GAKG;AAEH,KAAK,gBAAgB,GAAG,cAAc,CAAC;AACvC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,KAAK,YAAY,GAAG;IAClB,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kGAAkG;IAClG,UAAU,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAQF,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAgB,EAChB,MAAM,EACN,SAAS,GACV,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBA4CA;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// Pulled from the shadcn registry block `dashboard-01`, its `section-cards.tsx`
|
|
2
|
+
// (https://ui.shadcn.com/r/styles/new-york-v4/dashboard-01.json).
|
|
3
|
+
"use client";
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { cn } from "../lib/utils.js";
|
|
6
|
+
import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card.js";
|
|
7
|
+
import { TrendBadge, trendTone } from "./trend-badge.js";
|
|
8
|
+
const VALUE_TONE_CLASS = {
|
|
9
|
+
default: "text-foreground",
|
|
10
|
+
warning: "text-(--nc-warning-deep)",
|
|
11
|
+
critical: "text-(--nc-error-deep)",
|
|
12
|
+
};
|
|
13
|
+
function KpiCard({ label, value, delta, note, tone = "default", render, className, }) {
|
|
14
|
+
return (_jsxs(Card, { size: "sm", "data-slot": "kpi-card", "data-tone": tone, className: className, ...(render ? { render } : {}), children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { className: "line-clamp-2 min-h-10", children: label }), _jsx(CardTitle, { className: cn(
|
|
15
|
+
// The compact card shrinks its own title to text-sm; a KPI's whole
|
|
16
|
+
// job is that figure, so it keeps the stock section-card size at
|
|
17
|
+
// both card sizes.
|
|
18
|
+
"text-2xl font-semibold tabular-nums group-data-[size=sm]/card:text-2xl", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(CardAction, { "data-kpi-delta": delta.direction, children: _jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), ...(delta.directionLabel ? { directionLabel: delta.directionLabel } : {}) }) })) : null] }), delta || note ? (_jsxs(CardFooter, { className: "flex-col items-start gap-1.5 pt-0 text-sm", children: [delta ? _jsx("div", { className: "text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("div", { className: "text-muted-foreground", children: note }) : null] })) : null] }));
|
|
19
|
+
}
|
|
20
|
+
export { KpiCard };
|
|
@@ -18,7 +18,7 @@ import { cn } from "../lib/utils.js";
|
|
|
18
18
|
* Token-only; no `dark:` styling.
|
|
19
19
|
*/
|
|
20
20
|
function LiveDemoWindow({ title, live, children, className, ...props }) {
|
|
21
|
-
return (_jsxs("div", { "data-slot": "live-demo-window", className: cn("flex flex-col overflow-hidden rounded-
|
|
21
|
+
return (_jsxs("div", { "data-slot": "live-demo-window", className: cn("flex flex-col overflow-hidden rounded-md border border-border bg-card", className), ...props, children: [_jsxs("div", { "data-slot": "live-demo-bar", className: "flex items-center gap-3 border-b border-border px-4 py-2.5", children: [_jsx("span", { "data-slot": "live-demo-chrome", "aria-hidden": "true", className: "flex gap-1.5", children: [0, 1, 2].map((i) => (_jsx("span", { className: "size-2.5 rounded-full bg-muted-foreground/40" }, i))) }), title ? (_jsx("span", { "data-slot": "live-demo-title", className: "font-mono text-[10px] tracking-[0.08em] text-muted-foreground uppercase", children: title })) : null] }), live ? (_jsxs("div", { "data-slot": "live-demo-chip", className: "flex items-center gap-2 border-b border-border px-4 py-2.5 font-mono text-[9.5px] tracking-[0.08em] text-[var(--nc-link-deep)] uppercase", children: [_jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-primary motion-safe:animate-pulse" }), live] })) : null, _jsx("div", { "data-slot": "live-demo-rows", className: "flex flex-col", children: children })] }));
|
|
22
22
|
}
|
|
23
23
|
const ROW_TINT_CLASS = {
|
|
24
24
|
done: "bg-[var(--nc-link-bg-soft)] text-[var(--nc-link-deep)]",
|
|
@@ -21,7 +21,7 @@ function MenubarTrigger({ className, ...props }) {
|
|
|
21
21
|
return (_jsx(DropdownMenuTrigger, { "data-slot": "menubar-trigger", className: cn("flex min-h-touch-target items-center rounded-md px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted [@media(hover:hover)_and_(pointer:fine)]:min-h-0", className), ...props }));
|
|
22
22
|
}
|
|
23
23
|
function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
|
|
24
|
-
return (_jsx(DropdownMenuContent, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("min-w-36 rounded-
|
|
24
|
+
return (_jsx(DropdownMenuContent, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("min-w-36 rounded-md border-0 nc-glass p-nadicode-xxs text-popover-foreground nc-elevation-floating", className), ...props }));
|
|
25
25
|
}
|
|
26
26
|
function MenubarItem({ className, inset, variant = "default", ...props }) {
|
|
27
27
|
return (_jsx(DropdownMenuItem, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("group/menubar-item min-h-touch-target gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-[var(--nc-error-deep)] data-[variant=destructive]:focus:bg-[var(--nc-error-soft)] data-[variant=destructive]:focus:text-[var(--nc-error-deep)] data-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-[var(--nc-error-deep)]!", className), ...props }));
|
|
@@ -61,6 +61,6 @@ function ModelMark({ author, name, size = MODEL_MARK_SIZE, label, className, ...
|
|
|
61
61
|
: label?.trim()
|
|
62
62
|
? { role: "img", "aria-label": label }
|
|
63
63
|
: {};
|
|
64
|
-
return (_jsxs("span", { "data-slot": "model-mark", "data-author": author, className: cn("inline-flex min-w-0 items-center gap-1.5", className), ...props, ...labelling, children: [_jsx("span", { "data-slot": "model-mark-tile", "data-mark": Mark ? "brand" : "neutral", "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center border border-border bg-background text-foreground", style: { width: size, height: size
|
|
64
|
+
return (_jsxs("span", { "data-slot": "model-mark", "data-author": author, className: cn("inline-flex min-w-0 items-center gap-1.5", className), ...props, ...labelling, children: [_jsx("span", { "data-slot": "model-mark-tile", "data-mark": Mark ? "brand" : "neutral", "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground", style: { width: size, height: size }, children: Mark ? _jsx(Mark, { size: Math.round(size * MODEL_MARK_GLYPH_RATIO) }) : null }), name ? (_jsxs("span", { className: "min-w-0 truncate", children: [_jsx("span", { className: "font-medium", children: name }), " ", _jsx("span", { className: "text-xs text-muted-foreground", children: author })] })) : null] }));
|
|
65
65
|
}
|
|
66
66
|
export { ModelMark };
|
|
@@ -17,10 +17,10 @@ function NavigationMenuTrigger({ className, children, ...props }) {
|
|
|
17
17
|
return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, " ", _jsx(ChevronDownIcon, { className: "nc-transition-transform relative top-px ml-1 size-3 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
|
|
18
18
|
}
|
|
19
19
|
function NavigationMenuContent({ className, ...props }) {
|
|
20
|
-
return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("h-full w-auto p-nadicode-xxs group-data-[viewport=false]/navigation-menu:origin-(--transform-origin) group-data-[viewport=false]/navigation-menu:rounded-
|
|
20
|
+
return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("h-full w-auto p-nadicode-xxs group-data-[viewport=false]/navigation-menu:origin-(--transform-origin) group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:nc-glass group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:nc-elevation-floating group-data-[viewport=false]/navigation-menu:transition-[opacity,scale] group-data-[viewport=false]/navigation-menu:duration-[var(--nc-duration-close)] group-data-[viewport=false]/navigation-menu:ease-[var(--nc-ease-out-strong)] group-data-[viewport=false]/navigation-menu:data-open:duration-[var(--nc-duration-open)] group-data-[viewport=false]/navigation-menu:data-ending-style:opacity-0 group-data-[viewport=false]/navigation-menu:data-ending-style:scale-[0.98] group-data-[viewport=false]/navigation-menu:data-starting-style:opacity-0 group-data-[viewport=false]/navigation-menu:data-starting-style:scale-[0.98] motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:opacity-100 motion-reduce:data-starting-style:scale-100 **:data-[slot=navigation-menu-link]:focus:outline-none", className), ...props }));
|
|
21
21
|
}
|
|
22
22
|
function NavigationMenuPositioner({ className, side = "bottom", sideOffset = 8, align = "start", alignOffset = 0, ...props }) {
|
|
23
|
-
return (_jsx(NavigationMenuPrimitive.Portal, { children: _jsx(NavigationMenuPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, className: cn("group/navigation-menu-positioner isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className), ...props, children: _jsx(NavigationMenuPrimitive.Popup, { className: "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-
|
|
23
|
+
return (_jsx(NavigationMenuPrimitive.Portal, { children: _jsx(NavigationMenuPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, className: cn("group/navigation-menu-positioner isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className), ...props, children: _jsx(NavigationMenuPrimitive.Popup, { className: "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-md border-0 nc-glass text-popover-foreground nc-elevation-floating transition-[opacity,scale] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] outline-none data-open:duration-[var(--nc-duration-open)] group-data-instant/navigation-menu-positioner:transition-none data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 motion-reduce:transition-none motion-reduce:data-ending-style:scale-100 motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:scale-100 motion-reduce:data-starting-style:opacity-100", children: _jsx(NavigationMenuPrimitive.Viewport, { className: "relative size-full overflow-hidden" }) }) }) }));
|
|
24
24
|
}
|
|
25
25
|
function NavigationMenuLink({ className, ...props }) {
|
|
26
26
|
return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("nc-transition-paint flex min-h-touch-target min-w-touch-target items-center gap-2 rounded-md p-2 text-sm hover:bg-muted focus:bg-muted data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
|
|
3
3
|
declare function Popover({ ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
|
|
4
4
|
declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): React.JSX.Element;
|
|
5
|
-
declare function PopoverContent({ className, align, alignOffset, side, sideOffset, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
|
|
5
|
+
declare function PopoverContent({ className, align, alignOffset, side, sideOffset, anchor, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "anchor" | "side" | "sideOffset">): React.JSX.Element;
|
|
6
6
|
declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
7
7
|
declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): React.JSX.Element;
|
|
8
8
|
declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,qBAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,WAAe,EACf,IAAe,EACf,UAAc,EACd,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,qBAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,qBAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,WAAe,EACf,IAAe,EACf,UAAc,EACd,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CACF,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,CAC3D,qBAuBF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,qBAQ1E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,qBAQtF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -8,8 +8,8 @@ function Popover({ ...props }) {
|
|
|
8
8
|
function PopoverTrigger({ ...props }) {
|
|
9
9
|
return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
10
10
|
}
|
|
11
|
-
function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
|
|
12
|
-
return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("z-50 flex w-72 flex-col gap-control-padding-inline rounded-
|
|
11
|
+
function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, ...props }) {
|
|
12
|
+
return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, anchor: anchor, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("z-50 flex w-72 flex-col gap-control-padding-inline rounded-md border-0 nc-glass p-control-padding-inline text-sm text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
|
|
13
13
|
}
|
|
14
14
|
function PopoverHeader({ className, ...props }) {
|
|
15
15
|
return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-0.5 text-sm", className), ...props }));
|