@appcorp/shadcn 1.1.7 → 1.1.9
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.
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
interface ChartDataItem {
|
|
3
|
+
date: string;
|
|
4
|
+
[key: string]: number | string;
|
|
5
|
+
}
|
|
6
|
+
export interface AreaChartV1Props {
|
|
7
|
+
dates: ChartDataItem[];
|
|
8
|
+
description: string;
|
|
9
|
+
legends: string[];
|
|
10
|
+
title: string;
|
|
11
|
+
selectors: {
|
|
12
|
+
label: string;
|
|
13
|
+
value: string;
|
|
14
|
+
}[];
|
|
15
|
+
onSelectorChange: (value: string) => void;
|
|
16
|
+
}
|
|
17
|
+
export declare const AreaChartV1: ({ dates, description, legends, title, selectors, onSelectorChange, }: AreaChartV1Props) => React.JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.AreaChartV1 = void 0;
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var recharts_1 = require("recharts");
|
|
40
|
+
var card_1 = require("../../components/ui/card");
|
|
41
|
+
var chart_1 = require("../../components/ui/chart");
|
|
42
|
+
var select_1 = require("../../components/ui/select");
|
|
43
|
+
// Utility function to create ChartConfig from legends array
|
|
44
|
+
var createChartConfig = function (legends) {
|
|
45
|
+
return legends.reduce(function (acc, legend, index) {
|
|
46
|
+
acc[legend.toLowerCase()] = {
|
|
47
|
+
label: legend,
|
|
48
|
+
color: "var(--chart-".concat(index + 1, ")"),
|
|
49
|
+
};
|
|
50
|
+
return acc;
|
|
51
|
+
}, {});
|
|
52
|
+
};
|
|
53
|
+
var AreaChartV1 = function (_a) {
|
|
54
|
+
var dates = _a.dates, description = _a.description, legends = _a.legends, title = _a.title, selectors = _a.selectors, onSelectorChange = _a.onSelectorChange;
|
|
55
|
+
var _b = React.useState("90d"), timeRange = _b[0], setTimeRange = _b[1];
|
|
56
|
+
var dynamicChartConfig = createChartConfig(legends);
|
|
57
|
+
var handleValueChange = function (value) {
|
|
58
|
+
setTimeRange(value);
|
|
59
|
+
onSelectorChange(value);
|
|
60
|
+
};
|
|
61
|
+
var filteredData = React.useMemo(function () {
|
|
62
|
+
var _a;
|
|
63
|
+
var daysMap = {
|
|
64
|
+
"7d": 7,
|
|
65
|
+
"30d": 30,
|
|
66
|
+
"90d": 90,
|
|
67
|
+
};
|
|
68
|
+
var daysToSubtract = (_a = daysMap[timeRange]) !== null && _a !== void 0 ? _a : 90;
|
|
69
|
+
var referenceDate = new Date(dates[dates.length - 1].date);
|
|
70
|
+
var startDate = new Date(referenceDate);
|
|
71
|
+
startDate.setDate(referenceDate.getDate() - daysToSubtract);
|
|
72
|
+
var startTime = startDate.getTime();
|
|
73
|
+
return dates.filter(function (item) { return new Date(item.date).getTime() >= startTime; });
|
|
74
|
+
}, [dates, timeRange]);
|
|
75
|
+
return (React.createElement(card_1.Card, { className: "pt-0" },
|
|
76
|
+
React.createElement(card_1.CardHeader, { className: "flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row" },
|
|
77
|
+
React.createElement("div", { className: "grid flex-1 gap-1" },
|
|
78
|
+
React.createElement(card_1.CardTitle, null, title),
|
|
79
|
+
React.createElement(card_1.CardDescription, null, description)),
|
|
80
|
+
React.createElement(select_1.Select, { value: timeRange, onValueChange: handleValueChange },
|
|
81
|
+
React.createElement(select_1.SelectTrigger, { className: "hidden w-40 rounded-lg sm:ml-auto sm:flex", "aria-label": "Select a value" },
|
|
82
|
+
React.createElement(select_1.SelectValue, { placeholder: "Last 3 months" })),
|
|
83
|
+
React.createElement(select_1.SelectContent, { className: "rounded-xl" }, selectors.map(function (selector) { return (React.createElement(select_1.SelectItem, { key: selector.label, value: selector.value }, selector.label)); })))),
|
|
84
|
+
React.createElement(card_1.CardContent, { className: "px-2 pt-4 sm:px-6 sm:pt-6" },
|
|
85
|
+
React.createElement(chart_1.ChartContainer, { config: dynamicChartConfig, className: "aspect-auto h-[250px] w-full" },
|
|
86
|
+
React.createElement(recharts_1.AreaChart, { data: filteredData },
|
|
87
|
+
React.createElement("defs", null, legends.map(function (legend) {
|
|
88
|
+
var key = legend.toLowerCase();
|
|
89
|
+
return (React.createElement("linearGradient", { key: key, id: "fill".concat(legend), x1: "0", y1: "0", x2: "0", y2: "1" },
|
|
90
|
+
React.createElement("stop", { offset: "5%", stopColor: "var(--color-".concat(key, ")"), stopOpacity: 0.8 }),
|
|
91
|
+
React.createElement("stop", { offset: "95%", stopColor: "var(--color-".concat(key, ")"), stopOpacity: 0.1 })));
|
|
92
|
+
})),
|
|
93
|
+
React.createElement(recharts_1.CartesianGrid, { vertical: false }),
|
|
94
|
+
React.createElement(recharts_1.XAxis, { dataKey: "date", tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 32, tickFormatter: function (value) {
|
|
95
|
+
var date = new Date(value);
|
|
96
|
+
return date.toLocaleDateString("en-US", {
|
|
97
|
+
month: "short",
|
|
98
|
+
day: "numeric",
|
|
99
|
+
});
|
|
100
|
+
} }),
|
|
101
|
+
React.createElement(chart_1.ChartTooltip, { cursor: false, content: React.createElement(chart_1.ChartTooltipContent, { labelFormatter: function (value) {
|
|
102
|
+
return new Date(value).toLocaleDateString("en-US", {
|
|
103
|
+
month: "short",
|
|
104
|
+
day: "numeric",
|
|
105
|
+
});
|
|
106
|
+
}, indicator: "dot" }) }),
|
|
107
|
+
legends.map(function (legend) {
|
|
108
|
+
var key = legend.toLowerCase();
|
|
109
|
+
return (React.createElement(recharts_1.Area, { key: key, dataKey: key, type: "natural", fill: "url(#fill".concat(legend, ")"), stroke: "var(--color-".concat(key, ")"), stackId: "a" }));
|
|
110
|
+
}),
|
|
111
|
+
React.createElement(chart_1.ChartLegend, { content: React.createElement(chart_1.ChartLegendContent, null) }))))));
|
|
112
|
+
};
|
|
113
|
+
exports.AreaChartV1 = AreaChartV1;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as RechartsPrimitive from "recharts";
|
|
3
|
+
declare const THEMES: {
|
|
4
|
+
readonly light: "";
|
|
5
|
+
readonly dark: ".dark";
|
|
6
|
+
};
|
|
7
|
+
export type ChartConfig = {
|
|
8
|
+
[k in string]: {
|
|
9
|
+
label?: React.ReactNode;
|
|
10
|
+
icon?: React.ComponentType;
|
|
11
|
+
} & ({
|
|
12
|
+
color?: string;
|
|
13
|
+
theme?: never;
|
|
14
|
+
} | {
|
|
15
|
+
color?: never;
|
|
16
|
+
theme: Record<keyof typeof THEMES, string>;
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
config: ChartConfig;
|
|
21
|
+
children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
|
|
22
|
+
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
declare const ChartStyle: ({ id, config }: {
|
|
24
|
+
id: string;
|
|
25
|
+
config: ChartConfig;
|
|
26
|
+
}) => React.JSX.Element | null;
|
|
27
|
+
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
28
|
+
declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
|
|
29
|
+
active?: boolean;
|
|
30
|
+
payload?: Array<{
|
|
31
|
+
name?: string;
|
|
32
|
+
dataKey?: string;
|
|
33
|
+
value?: number;
|
|
34
|
+
type?: string;
|
|
35
|
+
color?: string;
|
|
36
|
+
payload?: Record<string, unknown>;
|
|
37
|
+
fill?: string;
|
|
38
|
+
}>;
|
|
39
|
+
label?: string;
|
|
40
|
+
labelFormatter?: (label: string, payload: unknown[]) => React.ReactNode;
|
|
41
|
+
formatter?: (value: unknown, name: string, item: unknown, index: number, payload: unknown) => React.ReactNode;
|
|
42
|
+
hideLabel?: boolean;
|
|
43
|
+
hideIndicator?: boolean;
|
|
44
|
+
indicator?: "line" | "dot" | "dashed";
|
|
45
|
+
nameKey?: string;
|
|
46
|
+
labelKey?: string;
|
|
47
|
+
labelClassName?: string;
|
|
48
|
+
color?: string;
|
|
49
|
+
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
50
|
+
declare const ChartLegend: typeof RechartsPrimitive.Legend;
|
|
51
|
+
declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
|
|
52
|
+
payload?: Array<{
|
|
53
|
+
value?: string;
|
|
54
|
+
dataKey?: string;
|
|
55
|
+
type?: string;
|
|
56
|
+
color?: string;
|
|
57
|
+
}>;
|
|
58
|
+
verticalAlign?: "top" | "bottom";
|
|
59
|
+
hideIcon?: boolean;
|
|
60
|
+
nameKey?: string;
|
|
61
|
+
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
62
|
+
export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
var __assign = (this && this.__assign) || function () {
|
|
4
|
+
__assign = Object.assign || function(t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
8
|
+
t[p] = s[p];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
return __assign.apply(this, arguments);
|
|
13
|
+
};
|
|
14
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
15
|
+
if (k2 === undefined) k2 = k;
|
|
16
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
17
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
18
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
19
|
+
}
|
|
20
|
+
Object.defineProperty(o, k2, desc);
|
|
21
|
+
}) : (function(o, m, k, k2) {
|
|
22
|
+
if (k2 === undefined) k2 = k;
|
|
23
|
+
o[k2] = m[k];
|
|
24
|
+
}));
|
|
25
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
26
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
27
|
+
}) : function(o, v) {
|
|
28
|
+
o["default"] = v;
|
|
29
|
+
});
|
|
30
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
31
|
+
var ownKeys = function(o) {
|
|
32
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
33
|
+
var ar = [];
|
|
34
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
35
|
+
return ar;
|
|
36
|
+
};
|
|
37
|
+
return ownKeys(o);
|
|
38
|
+
};
|
|
39
|
+
return function (mod) {
|
|
40
|
+
if (mod && mod.__esModule) return mod;
|
|
41
|
+
var result = {};
|
|
42
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
43
|
+
__setModuleDefault(result, mod);
|
|
44
|
+
return result;
|
|
45
|
+
};
|
|
46
|
+
})();
|
|
47
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
48
|
+
var t = {};
|
|
49
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
50
|
+
t[p] = s[p];
|
|
51
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
52
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
53
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
54
|
+
t[p[i]] = s[p[i]];
|
|
55
|
+
}
|
|
56
|
+
return t;
|
|
57
|
+
};
|
|
58
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
59
|
+
exports.ChartStyle = exports.ChartLegendContent = exports.ChartLegend = exports.ChartTooltipContent = exports.ChartTooltip = exports.ChartContainer = void 0;
|
|
60
|
+
var React = __importStar(require("react"));
|
|
61
|
+
var RechartsPrimitive = __importStar(require("recharts"));
|
|
62
|
+
var utils_1 = require("../../lib/utils");
|
|
63
|
+
// Format: { THEME_NAME: CSS_SELECTOR }
|
|
64
|
+
var THEMES = { light: "", dark: ".dark" };
|
|
65
|
+
var ChartContext = React.createContext(null);
|
|
66
|
+
function useChart() {
|
|
67
|
+
var context = React.useContext(ChartContext);
|
|
68
|
+
if (!context) {
|
|
69
|
+
throw new Error("useChart must be used within a <ChartContainer />");
|
|
70
|
+
}
|
|
71
|
+
return context;
|
|
72
|
+
}
|
|
73
|
+
var ChartContainer = React.forwardRef(function (_a, ref) {
|
|
74
|
+
var id = _a.id, className = _a.className, children = _a.children, config = _a.config, props = __rest(_a, ["id", "className", "children", "config"]);
|
|
75
|
+
var uniqueId = React.useId();
|
|
76
|
+
var chartId = "chart-".concat(id || uniqueId.replace(/:/g, ""));
|
|
77
|
+
return (React.createElement(ChartContext.Provider, { value: { config: config } },
|
|
78
|
+
React.createElement("div", __assign({ "data-chart": chartId, ref: ref, className: (0, utils_1.cn)("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className) }, props),
|
|
79
|
+
React.createElement(ChartStyle, { id: chartId, config: config }),
|
|
80
|
+
React.createElement(RechartsPrimitive.ResponsiveContainer, null, children))));
|
|
81
|
+
});
|
|
82
|
+
exports.ChartContainer = ChartContainer;
|
|
83
|
+
ChartContainer.displayName = "Chart";
|
|
84
|
+
var ChartStyle = function (_a) {
|
|
85
|
+
var id = _a.id, config = _a.config;
|
|
86
|
+
var colorConfig = Object.entries(config).filter(function (_a) {
|
|
87
|
+
var config = _a[1];
|
|
88
|
+
return config.theme || config.color;
|
|
89
|
+
});
|
|
90
|
+
if (!colorConfig.length) {
|
|
91
|
+
return null;
|
|
92
|
+
}
|
|
93
|
+
return (React.createElement("style", { dangerouslySetInnerHTML: {
|
|
94
|
+
__html: Object.entries(THEMES)
|
|
95
|
+
.map(function (_a) {
|
|
96
|
+
var theme = _a[0], prefix = _a[1];
|
|
97
|
+
return "\n".concat(prefix, " [data-chart=").concat(id, "] {\n").concat(colorConfig
|
|
98
|
+
.map(function (_a) {
|
|
99
|
+
var _b;
|
|
100
|
+
var key = _a[0], itemConfig = _a[1];
|
|
101
|
+
var color = ((_b = itemConfig.theme) === null || _b === void 0 ? void 0 : _b[theme]) ||
|
|
102
|
+
itemConfig.color;
|
|
103
|
+
return color ? " --color-".concat(key, ": ").concat(color, ";") : null;
|
|
104
|
+
})
|
|
105
|
+
.join("\n"), "\n}\n");
|
|
106
|
+
})
|
|
107
|
+
.join("\n"),
|
|
108
|
+
} }));
|
|
109
|
+
};
|
|
110
|
+
exports.ChartStyle = ChartStyle;
|
|
111
|
+
var ChartTooltip = RechartsPrimitive.Tooltip;
|
|
112
|
+
exports.ChartTooltip = ChartTooltip;
|
|
113
|
+
var ChartTooltipContent = React.forwardRef(function (_a, ref) {
|
|
114
|
+
var active = _a.active, payload = _a.payload, className = _a.className, _b = _a.indicator, indicator = _b === void 0 ? "dot" : _b, _c = _a.hideLabel, hideLabel = _c === void 0 ? false : _c, _d = _a.hideIndicator, hideIndicator = _d === void 0 ? false : _d, label = _a.label, labelFormatter = _a.labelFormatter, labelClassName = _a.labelClassName, formatter = _a.formatter, color = _a.color, nameKey = _a.nameKey, labelKey = _a.labelKey;
|
|
115
|
+
var config = useChart().config;
|
|
116
|
+
var tooltipLabel = React.useMemo(function () {
|
|
117
|
+
var _a;
|
|
118
|
+
if (hideLabel || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
|
|
119
|
+
return null;
|
|
120
|
+
}
|
|
121
|
+
var item = payload[0];
|
|
122
|
+
var key = "".concat(labelKey || (item === null || item === void 0 ? void 0 : item.dataKey) || (item === null || item === void 0 ? void 0 : item.name) || "value");
|
|
123
|
+
var itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
124
|
+
var value = !labelKey && typeof label === "string"
|
|
125
|
+
? ((_a = config[label]) === null || _a === void 0 ? void 0 : _a.label) || label
|
|
126
|
+
: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label;
|
|
127
|
+
if (labelFormatter) {
|
|
128
|
+
return (React.createElement("div", { className: (0, utils_1.cn)("font-medium", labelClassName) }, labelFormatter(String(value !== null && value !== void 0 ? value : ""), payload !== null && payload !== void 0 ? payload : [])));
|
|
129
|
+
}
|
|
130
|
+
if (!value) {
|
|
131
|
+
return null;
|
|
132
|
+
}
|
|
133
|
+
return React.createElement("div", { className: (0, utils_1.cn)("font-medium", labelClassName) }, value);
|
|
134
|
+
}, [
|
|
135
|
+
label,
|
|
136
|
+
labelFormatter,
|
|
137
|
+
payload,
|
|
138
|
+
hideLabel,
|
|
139
|
+
labelClassName,
|
|
140
|
+
config,
|
|
141
|
+
labelKey,
|
|
142
|
+
]);
|
|
143
|
+
if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
|
|
144
|
+
return null;
|
|
145
|
+
}
|
|
146
|
+
var nestLabel = payload.length === 1 && indicator !== "dot";
|
|
147
|
+
return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className) },
|
|
148
|
+
!nestLabel ? tooltipLabel : null,
|
|
149
|
+
React.createElement("div", { className: "grid gap-1.5" }, payload
|
|
150
|
+
.filter(function (item) { return item.type !== "none"; })
|
|
151
|
+
.map(function (item, index) {
|
|
152
|
+
var _a;
|
|
153
|
+
var key = "".concat(nameKey || item.name || item.dataKey || "value");
|
|
154
|
+
var itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
155
|
+
var indicatorColor = color || ((_a = item.payload) === null || _a === void 0 ? void 0 : _a.fill) || item.color;
|
|
156
|
+
return (React.createElement("div", { key: item.dataKey, className: (0, utils_1.cn)("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center") }, formatter && (item === null || item === void 0 ? void 0 : item.value) !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (React.createElement(React.Fragment, null,
|
|
157
|
+
(itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) ? (React.createElement(itemConfig.icon, null)) : (!hideIndicator && (React.createElement("div", { className: (0, utils_1.cn)("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
|
|
158
|
+
"h-2.5 w-2.5": indicator === "dot",
|
|
159
|
+
"w-1": indicator === "line",
|
|
160
|
+
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
|
161
|
+
"my-0.5": nestLabel && indicator === "dashed",
|
|
162
|
+
}), style: {
|
|
163
|
+
"--color-bg": indicatorColor,
|
|
164
|
+
"--color-border": indicatorColor,
|
|
165
|
+
} }))),
|
|
166
|
+
React.createElement("div", { className: (0, utils_1.cn)("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center") },
|
|
167
|
+
React.createElement("div", { className: "grid gap-1.5" },
|
|
168
|
+
nestLabel ? tooltipLabel : null,
|
|
169
|
+
React.createElement("span", { className: "text-muted-foreground" }, (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.label) || item.name)),
|
|
170
|
+
item.value && (React.createElement("span", { className: "font-mono font-medium tabular-nums text-foreground" }, item.value.toLocaleString())))))));
|
|
171
|
+
}))));
|
|
172
|
+
});
|
|
173
|
+
exports.ChartTooltipContent = ChartTooltipContent;
|
|
174
|
+
ChartTooltipContent.displayName = "ChartTooltip";
|
|
175
|
+
var ChartLegend = RechartsPrimitive.Legend;
|
|
176
|
+
exports.ChartLegend = ChartLegend;
|
|
177
|
+
var ChartLegendContent = React.forwardRef(function (_a, ref) {
|
|
178
|
+
var className = _a.className, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b, payload = _a.payload, _c = _a.verticalAlign, verticalAlign = _c === void 0 ? "bottom" : _c, nameKey = _a.nameKey;
|
|
179
|
+
var config = useChart().config;
|
|
180
|
+
if (!(payload === null || payload === void 0 ? void 0 : payload.length)) {
|
|
181
|
+
return null;
|
|
182
|
+
}
|
|
183
|
+
return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className) }, payload
|
|
184
|
+
.filter(function (item) { return item.type !== "none"; })
|
|
185
|
+
.map(function (item) {
|
|
186
|
+
var key = "".concat(nameKey || item.dataKey || "value");
|
|
187
|
+
var itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
188
|
+
return (React.createElement("div", { key: item.value, className: (0, utils_1.cn)("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground") },
|
|
189
|
+
(itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.icon) && !hideIcon ? (React.createElement(itemConfig.icon, null)) : (React.createElement("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
|
|
190
|
+
backgroundColor: item.color,
|
|
191
|
+
} })), itemConfig === null || itemConfig === void 0 ? void 0 :
|
|
192
|
+
itemConfig.label));
|
|
193
|
+
})));
|
|
194
|
+
});
|
|
195
|
+
exports.ChartLegendContent = ChartLegendContent;
|
|
196
|
+
ChartLegendContent.displayName = "ChartLegend";
|
|
197
|
+
// Helper to extract item config from a payload.
|
|
198
|
+
function getPayloadConfigFromPayload(config, payload, key) {
|
|
199
|
+
if (typeof payload !== "object" || payload === null) {
|
|
200
|
+
return undefined;
|
|
201
|
+
}
|
|
202
|
+
var payloadPayload = "payload" in payload &&
|
|
203
|
+
typeof payload.payload === "object" &&
|
|
204
|
+
payload.payload !== null
|
|
205
|
+
? payload.payload
|
|
206
|
+
: undefined;
|
|
207
|
+
var configLabelKey = key;
|
|
208
|
+
if (key in payload &&
|
|
209
|
+
typeof payload[key] === "string") {
|
|
210
|
+
configLabelKey = payload[key];
|
|
211
|
+
}
|
|
212
|
+
else if (payloadPayload &&
|
|
213
|
+
key in payloadPayload &&
|
|
214
|
+
typeof payloadPayload[key] === "string") {
|
|
215
|
+
configLabelKey = payloadPayload[key];
|
|
216
|
+
}
|
|
217
|
+
return configLabelKey in config
|
|
218
|
+
? config[configLabelKey]
|
|
219
|
+
: config[key];
|
|
220
|
+
}
|
|
@@ -1,3 +1,34 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Button } from "./button";
|
|
3
|
+
declare const colorThemes: readonly [{
|
|
4
|
+
readonly name: "default";
|
|
5
|
+
readonly label: "Default";
|
|
6
|
+
readonly color: "bg-zinc-900";
|
|
7
|
+
}, {
|
|
8
|
+
readonly name: "blue";
|
|
9
|
+
readonly label: "Blue";
|
|
10
|
+
readonly color: "bg-blue-600";
|
|
11
|
+
}, {
|
|
12
|
+
readonly name: "green";
|
|
13
|
+
readonly label: "Green";
|
|
14
|
+
readonly color: "bg-green-600";
|
|
15
|
+
}, {
|
|
16
|
+
readonly name: "orange";
|
|
17
|
+
readonly label: "Orange";
|
|
18
|
+
readonly color: "bg-orange-600";
|
|
19
|
+
}, {
|
|
20
|
+
readonly name: "red";
|
|
21
|
+
readonly label: "Red";
|
|
22
|
+
readonly color: "bg-red-600";
|
|
23
|
+
}, {
|
|
24
|
+
readonly name: "violet";
|
|
25
|
+
readonly label: "Violet";
|
|
26
|
+
readonly color: "bg-violet-600";
|
|
27
|
+
}, {
|
|
28
|
+
readonly name: "yellow";
|
|
29
|
+
readonly label: "Yellow";
|
|
30
|
+
readonly color: "bg-yellow-500";
|
|
31
|
+
}];
|
|
32
|
+
export type ColorTheme = (typeof colorThemes)[number]["name"];
|
|
3
33
|
export declare const ThemeSwitcher: ({ className, ...props }: React.ComponentProps<typeof Button>) => React.JSX.Element;
|
|
34
|
+
export {};
|
|
@@ -61,14 +61,71 @@ var React = __importStar(require("react"));
|
|
|
61
61
|
var next_themes_1 = require("next-themes");
|
|
62
62
|
var lucide_react_1 = require("lucide-react");
|
|
63
63
|
var button_1 = require("./button");
|
|
64
|
+
var dropdown_menu_1 = require("./dropdown-menu");
|
|
65
|
+
var utils_1 = require("../../lib/utils");
|
|
66
|
+
// Available color themes from globals.css
|
|
67
|
+
var colorThemes = [
|
|
68
|
+
{ name: "default", label: "Default", color: "bg-zinc-900" },
|
|
69
|
+
{ name: "blue", label: "Blue", color: "bg-blue-600" },
|
|
70
|
+
{ name: "green", label: "Green", color: "bg-green-600" },
|
|
71
|
+
{ name: "orange", label: "Orange", color: "bg-orange-600" },
|
|
72
|
+
{ name: "red", label: "Red", color: "bg-red-600" },
|
|
73
|
+
{ name: "violet", label: "Violet", color: "bg-violet-600" },
|
|
74
|
+
{ name: "yellow", label: "Yellow", color: "bg-yellow-500" },
|
|
75
|
+
];
|
|
64
76
|
var ThemeSwitcher = function (_a) {
|
|
65
|
-
var _b;
|
|
66
77
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
67
|
-
var
|
|
68
|
-
var
|
|
69
|
-
var
|
|
70
|
-
|
|
78
|
+
var _b = (0, next_themes_1.useTheme)(), theme = _b.theme, setTheme = _b.setTheme, resolvedTheme = _b.resolvedTheme;
|
|
79
|
+
var _c = React.useState(false), mounted = _c[0], setMounted = _c[1];
|
|
80
|
+
var _d = React.useState("default"), colorTheme = _d[0], setColorTheme = _d[1];
|
|
81
|
+
// Get the current mode (light/dark)
|
|
82
|
+
var isDark = resolvedTheme === "dark" || theme === "dark";
|
|
83
|
+
React.useEffect(function () {
|
|
84
|
+
setMounted(true);
|
|
85
|
+
// Read color theme from document class
|
|
86
|
+
var root = document.documentElement;
|
|
87
|
+
var currentColorTheme = colorThemes.find(function (t) {
|
|
88
|
+
return root.classList.contains("theme-".concat(t.name));
|
|
89
|
+
});
|
|
90
|
+
if (currentColorTheme) {
|
|
91
|
+
setColorTheme(currentColorTheme.name);
|
|
92
|
+
}
|
|
93
|
+
}, []);
|
|
94
|
+
var handleModeToggle = function () {
|
|
95
|
+
setTheme(isDark ? "light" : "dark");
|
|
96
|
+
};
|
|
97
|
+
var handleColorThemeChange = function (newColorTheme) {
|
|
98
|
+
var root = document.documentElement;
|
|
99
|
+
// Remove all theme classes
|
|
100
|
+
colorThemes.forEach(function (t) {
|
|
101
|
+
root.classList.remove("theme-".concat(t.name));
|
|
102
|
+
});
|
|
103
|
+
// Add new theme class (except for default which uses :root)
|
|
104
|
+
if (newColorTheme !== "default") {
|
|
105
|
+
root.classList.add("theme-".concat(newColorTheme));
|
|
106
|
+
}
|
|
107
|
+
setColorTheme(newColorTheme);
|
|
71
108
|
};
|
|
72
|
-
|
|
109
|
+
if (!mounted) {
|
|
110
|
+
return (React.createElement(button_1.Button, __assign({ variant: "ghost", size: "icon", className: className }, props),
|
|
111
|
+
React.createElement(lucide_react_1.Palette, { className: "size-4" })));
|
|
112
|
+
}
|
|
113
|
+
return (React.createElement(dropdown_menu_1.DropdownMenu, null,
|
|
114
|
+
React.createElement(dropdown_menu_1.DropdownMenuTrigger, { asChild: true },
|
|
115
|
+
React.createElement(button_1.Button, __assign({ variant: "ghost", size: "icon", "aria-label": "Theme settings", className: className }, props),
|
|
116
|
+
React.createElement(lucide_react_1.Palette, { className: "size-4" }))),
|
|
117
|
+
React.createElement(dropdown_menu_1.DropdownMenuContent, { align: "end", className: "w-48" },
|
|
118
|
+
React.createElement(dropdown_menu_1.DropdownMenuLabel, null, "Mode"),
|
|
119
|
+
React.createElement(dropdown_menu_1.DropdownMenuItem, { onClick: handleModeToggle }, isDark ? (React.createElement(React.Fragment, null,
|
|
120
|
+
React.createElement(lucide_react_1.Sun, { className: "mr-2 size-4" }),
|
|
121
|
+
"Light Mode")) : (React.createElement(React.Fragment, null,
|
|
122
|
+
React.createElement(lucide_react_1.Moon, { className: "mr-2 size-4" }),
|
|
123
|
+
"Dark Mode"))),
|
|
124
|
+
React.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
|
|
125
|
+
React.createElement(dropdown_menu_1.DropdownMenuLabel, null, "Color Theme"),
|
|
126
|
+
colorThemes.map(function (t) { return (React.createElement(dropdown_menu_1.DropdownMenuItem, { key: t.name, onClick: function () { return handleColorThemeChange(t.name); } },
|
|
127
|
+
React.createElement("span", { className: (0, utils_1.cn)("mr-2 size-4 rounded-full", t.color) }),
|
|
128
|
+
t.label,
|
|
129
|
+
colorTheme === t.name && React.createElement(lucide_react_1.Check, { className: "ml-auto size-4" }))); }))));
|
|
73
130
|
};
|
|
74
131
|
exports.ThemeSwitcher = ThemeSwitcher;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appcorp/shadcn",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"build:next": "next build",
|
|
6
6
|
"build:storybook": "storybook build -c .storybook -o .out",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
|
|
16
16
|
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
|
|
17
17
|
"generate:sitemap": "scripts/generate-sitemap.sh",
|
|
18
|
-
"lint": "
|
|
18
|
+
"lint": "eslint .",
|
|
19
19
|
"major": "npm version major",
|
|
20
20
|
"minor": "npm version minor",
|
|
21
21
|
"patch": "npm version patch",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@storybook/addon-docs": "^10.0.6",
|
|
67
67
|
"@storybook/addon-onboarding": "^10.0.6",
|
|
68
68
|
"@storybook/nextjs": "^10.0.6",
|
|
69
|
-
"@tailwindcss/postcss": "^4.1.
|
|
69
|
+
"@tailwindcss/postcss": "^4.1.17",
|
|
70
70
|
"@tanstack/react-table": "^8.21.3",
|
|
71
71
|
"@testing-library/dom": "^10.4.1",
|
|
72
72
|
"@testing-library/jest-dom": "^6.9.1",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
"jotai": "^2.15.0",
|
|
98
98
|
"lint-staged": "^16.2.4",
|
|
99
99
|
"lodash.throttle": "^4.1.1",
|
|
100
|
-
"lucide-react": "^0.
|
|
100
|
+
"lucide-react": "^0.556.0",
|
|
101
101
|
"motion": "^12.23.24",
|
|
102
102
|
"next": "^15.5.6",
|
|
103
103
|
"next-themes": "^0.4.6",
|
|
@@ -110,11 +110,12 @@
|
|
|
110
110
|
"react-dropzone": "^14.3.8",
|
|
111
111
|
"react-hook-form": "^7.66.1",
|
|
112
112
|
"react-resizable-panels": "^3.0.6",
|
|
113
|
+
"recharts": "3.5.1",
|
|
113
114
|
"rimraf": "^6.0.1",
|
|
114
115
|
"sonner": "^2.0.7",
|
|
115
116
|
"storybook": "^10.0.6",
|
|
116
117
|
"tailwind-merge": "^3.3.1",
|
|
117
|
-
"tailwindcss": "
|
|
118
|
+
"tailwindcss": "^4.1.17",
|
|
118
119
|
"ts-node": "^10.9.2",
|
|
119
120
|
"typescript": "^5.9.3",
|
|
120
121
|
"vaul": "^1.1.2",
|