@wealthx/shadcn 1.0.1 → 1.1.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.
Files changed (63) hide show
  1. package/.turbo/turbo-build.log +154 -135
  2. package/CHANGELOG.md +12 -0
  3. package/README.md +82 -0
  4. package/dist/chunk-3EQP72AW.mjs +58 -0
  5. package/dist/{chunk-2WZVSBAY.mjs → chunk-3NQGYJEZ.mjs} +1 -1
  6. package/dist/{chunk-ZN2QKLF6.mjs → chunk-46OFHMQA.mjs} +1 -1
  7. package/dist/{chunk-IAOOZCUY.mjs → chunk-4AJ5HWHD.mjs} +4 -1
  8. package/dist/chunk-5JGQAAQV.mjs +212 -0
  9. package/dist/{chunk-MKFL5MNH.mjs → chunk-CJ46PDXE.mjs} +6 -6
  10. package/dist/{chunk-7LDIMXGM.mjs → chunk-DKZRJOMF.mjs} +1 -1
  11. package/dist/{chunk-AMJ23O53.mjs → chunk-FHNT55I5.mjs} +2 -2
  12. package/dist/chunk-GLW2UO6O.mjs +212 -0
  13. package/dist/{chunk-NGYG2EA6.mjs → chunk-I64K754C.mjs} +1 -1
  14. package/dist/chunk-K74JRTJR.mjs +105 -0
  15. package/dist/{chunk-NWZ46DJL.mjs → chunk-KQDD5MU3.mjs} +1 -1
  16. package/dist/chunk-RN67642N.mjs +171 -0
  17. package/dist/chunk-UEL4RD5P.mjs +272 -0
  18. package/dist/chunk-YBXCIF5Q.mjs +198 -0
  19. package/dist/components/ui/alert-dialog.js +4 -1
  20. package/dist/components/ui/alert-dialog.mjs +2 -2
  21. package/dist/components/ui/button.js +4 -1
  22. package/dist/components/ui/button.mjs +1 -1
  23. package/dist/components/ui/calendar.js +4 -1
  24. package/dist/components/ui/calendar.mjs +2 -2
  25. package/dist/components/ui/cashflow-bar-chart.js +596 -0
  26. package/dist/components/ui/cashflow-bar-chart.mjs +16 -0
  27. package/dist/components/ui/combobox.js +261 -0
  28. package/dist/components/ui/combobox.mjs +28 -0
  29. package/dist/components/ui/data-table.js +4 -1
  30. package/dist/components/ui/data-table.mjs +4 -4
  31. package/dist/components/ui/date-picker.js +4 -1
  32. package/dist/components/ui/date-picker.mjs +3 -3
  33. package/dist/components/ui/dialog.js +4 -1
  34. package/dist/components/ui/dialog.mjs +2 -2
  35. package/dist/components/ui/expense-bar-chart.js +543 -0
  36. package/dist/components/ui/expense-bar-chart.mjs +16 -0
  37. package/dist/components/ui/field.mjs +2 -2
  38. package/dist/components/ui/income-bar-chart.js +543 -0
  39. package/dist/components/ui/income-bar-chart.mjs +16 -0
  40. package/dist/components/ui/input-group.js +4 -1
  41. package/dist/components/ui/input-group.mjs +2 -2
  42. package/dist/components/ui/pagination.js +4 -1
  43. package/dist/components/ui/pagination.mjs +2 -2
  44. package/dist/components/ui/slider.js +166 -0
  45. package/dist/components/ui/slider.mjs +8 -0
  46. package/dist/components/ui/transactions-income-expense-bar-chart.js +478 -0
  47. package/dist/components/ui/transactions-income-expense-bar-chart.mjs +16 -0
  48. package/dist/index.js +1757 -698
  49. package/dist/index.mjs +160 -115
  50. package/dist/styles.css +1 -1
  51. package/package.json +35 -2
  52. package/src/components/index.tsx +59 -0
  53. package/src/components/ui/button.tsx +2 -0
  54. package/src/components/ui/cashflow-bar-chart.tsx +336 -0
  55. package/src/components/ui/chart-shared.tsx +100 -0
  56. package/src/components/ui/combobox.tsx +217 -0
  57. package/src/components/ui/expense-bar-chart.tsx +278 -0
  58. package/src/components/ui/income-bar-chart.tsx +278 -0
  59. package/src/components/ui/slider.tsx +107 -0
  60. package/src/components/ui/transactions-income-expense-bar-chart.tsx +198 -0
  61. package/src/styles/styles-css.ts +1 -1
  62. package/tsup.config.ts +6 -0
  63. package/dist/{chunk-HUVTPUV2.mjs → chunk-NLLKTU4B.mjs} +3 -3
@@ -0,0 +1,543 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
10
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ var __export = (target, all) => {
38
+ for (var name in all)
39
+ __defProp(target, name, { get: all[name], enumerable: true });
40
+ };
41
+ var __copyProps = (to, from, except, desc) => {
42
+ if (from && typeof from === "object" || typeof from === "function") {
43
+ for (let key of __getOwnPropNames(from))
44
+ if (!__hasOwnProp.call(to, key) && key !== except)
45
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
46
+ }
47
+ return to;
48
+ };
49
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
50
+ // If the importer is in node compatibility mode or this is not an ESM
51
+ // file that has been converted to a CommonJS file using a Babel-
52
+ // compatible transform (i.e. "__esModule" has not been set), then set
53
+ // "default" to the CommonJS "module.exports" for node compatibility.
54
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
55
+ mod
56
+ ));
57
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
+
59
+ // src/components/ui/expense-bar-chart.tsx
60
+ var expense_bar_chart_exports = {};
61
+ __export(expense_bar_chart_exports, {
62
+ ExpenseBarChart: () => ExpenseBarChart
63
+ });
64
+ module.exports = __toCommonJS(expense_bar_chart_exports);
65
+ var import_react3 = require("react");
66
+ var import_chart = require("chart.js");
67
+ var import_react_chartjs_2 = require("react-chartjs-2");
68
+
69
+ // src/lib/theme-provider.tsx
70
+ var import_react = require("react");
71
+ var import_jsx_runtime = require("react/jsx-runtime");
72
+ var ThemeVarsContext = (0, import_react.createContext)({});
73
+ function useThemeVars() {
74
+ return (0, import_react.useContext)(ThemeVarsContext);
75
+ }
76
+
77
+ // src/lib/utils.ts
78
+ var import_clsx = require("clsx");
79
+ var import_tailwind_merge = require("tailwind-merge");
80
+ function cn(...inputs) {
81
+ return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
82
+ }
83
+
84
+ // src/components/ui/card.tsx
85
+ var import_jsx_runtime2 = require("react/jsx-runtime");
86
+ function Card(_a) {
87
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
88
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
89
+ "div",
90
+ __spreadValues({
91
+ className: cn(
92
+ "flex flex-col gap-6 border bg-card py-6 text-card-foreground shadow-sm",
93
+ className
94
+ ),
95
+ "data-slot": "card"
96
+ }, props)
97
+ );
98
+ }
99
+ function CardHeader(_a) {
100
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
101
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
102
+ "div",
103
+ __spreadValues({
104
+ className: cn(
105
+ "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
106
+ className
107
+ ),
108
+ "data-slot": "card-header"
109
+ }, props)
110
+ );
111
+ }
112
+ function CardTitle(_a) {
113
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
114
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
115
+ "div",
116
+ __spreadValues({
117
+ className: cn("leading-none font-semibold", className),
118
+ "data-slot": "card-title"
119
+ }, props)
120
+ );
121
+ }
122
+ function CardAction(_a) {
123
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
124
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
125
+ "div",
126
+ __spreadValues({
127
+ className: cn(
128
+ "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
129
+ className
130
+ ),
131
+ "data-slot": "card-action"
132
+ }, props)
133
+ );
134
+ }
135
+ function CardContent(_a) {
136
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
137
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
138
+ "div",
139
+ __spreadValues({
140
+ className: cn("px-6", className),
141
+ "data-slot": "card-content"
142
+ }, props)
143
+ );
144
+ }
145
+
146
+ // src/components/ui/empty.tsx
147
+ var import_class_variance_authority = require("class-variance-authority");
148
+ var import_jsx_runtime3 = require("react/jsx-runtime");
149
+ function Empty(_a) {
150
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
151
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
152
+ "div",
153
+ __spreadValues({
154
+ className: cn(
155
+ "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 border border-dashed p-6 text-center text-balance md:p-12",
156
+ className
157
+ ),
158
+ "data-slot": "empty"
159
+ }, props)
160
+ );
161
+ }
162
+ var emptyMediaVariants = (0, import_class_variance_authority.cva)(
163
+ "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
164
+ {
165
+ variants: {
166
+ variant: {
167
+ default: "[&_svg:not([class*='size-'])]:size-10",
168
+ icon: "flex size-10 shrink-0 items-center justify-center text-muted-foreground [&_svg:not([class*='size-'])]:size-6"
169
+ }
170
+ },
171
+ defaultVariants: {
172
+ variant: "default"
173
+ }
174
+ }
175
+ );
176
+ function EmptyDescription(_a) {
177
+ var _b = _a, {
178
+ className
179
+ } = _b, props = __objRest(_b, [
180
+ "className"
181
+ ]);
182
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
183
+ "div",
184
+ __spreadValues({
185
+ className: cn(
186
+ "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
187
+ className
188
+ ),
189
+ "data-slot": "empty-description"
190
+ }, props)
191
+ );
192
+ }
193
+
194
+ // src/components/ui/skeleton.tsx
195
+ var import_jsx_runtime4 = require("react/jsx-runtime");
196
+ function Skeleton(_a) {
197
+ var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
198
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
199
+ "div",
200
+ __spreadValues({
201
+ className: cn("animate-pulse bg-muted", className),
202
+ "data-slot": "skeleton"
203
+ }, props)
204
+ );
205
+ }
206
+
207
+ // src/components/ui/button.tsx
208
+ var import_react2 = require("react");
209
+ var import_class_variance_authority2 = require("class-variance-authority");
210
+ var import_lucide_react = require("lucide-react");
211
+
212
+ // src/lib/slot.tsx
213
+ var React2 = __toESM(require("react"));
214
+ function mergeRefs(...refs) {
215
+ return (value) => {
216
+ for (const ref of refs) {
217
+ if (typeof ref === "function") ref(value);
218
+ else if (ref !== null)
219
+ ref.current = value;
220
+ }
221
+ };
222
+ }
223
+ var Slot = React2.forwardRef(
224
+ (_a, forwardedRef) => {
225
+ var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
226
+ const child = React2.Children.only(children);
227
+ if (!React2.isValidElement(child)) return null;
228
+ const childProps = child.props;
229
+ const merged = __spreadValues({}, props);
230
+ for (const key of Object.keys(childProps)) {
231
+ if (key === "className") {
232
+ merged.className = [props.className, childProps.className].filter(Boolean).join(" ");
233
+ } else if (key === "style") {
234
+ merged.style = __spreadValues(__spreadValues({}, props.style), childProps.style);
235
+ } else if (key.startsWith("on") && typeof childProps[key] === "function") {
236
+ const parentHandler = props[key];
237
+ if (typeof parentHandler === "function") {
238
+ merged[key] = (...args) => {
239
+ childProps[key](...args);
240
+ parentHandler(...args);
241
+ };
242
+ } else {
243
+ merged[key] = childProps[key];
244
+ }
245
+ } else {
246
+ merged[key] = childProps[key];
247
+ }
248
+ }
249
+ const childRef = child.ref;
250
+ merged.ref = forwardedRef ? mergeRefs(forwardedRef, childRef) : childRef;
251
+ return React2.cloneElement(
252
+ child,
253
+ merged
254
+ );
255
+ }
256
+ );
257
+ Slot.displayName = "Slot";
258
+
259
+ // src/components/ui/button.tsx
260
+ var import_jsx_runtime5 = require("react/jsx-runtime");
261
+ var buttonVariants = (0, import_class_variance_authority2.cva)(
262
+ "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-sm font-medium whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
263
+ {
264
+ variants: {
265
+ variant: {
266
+ default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
267
+ secondary: "bg-brand-secondary text-brand-secondary-foreground shadow-xs hover:bg-brand-secondary/80 focus-visible:ring-brand-secondary/30",
268
+ destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
269
+ outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
270
+ "outline-primary": "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
271
+ "outline-secondary": "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:ring-brand-secondary/30",
272
+ ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs dark:hover:bg-accent/50",
273
+ link: "text-primary underline-offset-4 hover:underline"
274
+ },
275
+ size: {
276
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
277
+ xs: "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
278
+ sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
279
+ lg: "h-10 px-6 has-[>svg]:px-4",
280
+ icon: "size-9",
281
+ "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
282
+ "icon-sm": "size-8",
283
+ "icon-lg": "size-10"
284
+ }
285
+ },
286
+ defaultVariants: {
287
+ variant: "default",
288
+ size: "default"
289
+ }
290
+ }
291
+ );
292
+ var Button = (0, import_react2.forwardRef)(function Button2(_a, ref) {
293
+ var _b = _a, {
294
+ className,
295
+ variant,
296
+ size,
297
+ asChild = false,
298
+ loading = false,
299
+ disabled,
300
+ type = "button",
301
+ children
302
+ } = _b, props = __objRest(_b, [
303
+ "className",
304
+ "variant",
305
+ "size",
306
+ "asChild",
307
+ "loading",
308
+ "disabled",
309
+ "type",
310
+ "children"
311
+ ]);
312
+ const Comp = asChild ? Slot : "button";
313
+ const isIconOnly = size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg";
314
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
315
+ Comp,
316
+ __spreadProps(__spreadValues({
317
+ className: cn(buttonVariants({ variant, size, className })),
318
+ "data-size": size,
319
+ "data-slot": "button",
320
+ "data-variant": variant,
321
+ disabled: loading || disabled,
322
+ ref,
323
+ type
324
+ }, props), {
325
+ children: loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
326
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Loader2, { "aria-hidden": "true", className: "animate-spin" }),
327
+ !isIconOnly && children
328
+ ] }) : children
329
+ })
330
+ );
331
+ });
332
+
333
+ // src/components/ui/chart-shared.tsx
334
+ var import_jsx_runtime6 = require("react/jsx-runtime");
335
+ var CHART_SLICE_COUNT = {
336
+ monthly: { 1: 1, 3: 3, 6: 6, 12: 12 },
337
+ daily: { 1: 30, 3: 90, 6: 180, 12: 365 }
338
+ };
339
+ var CHART_PERIODS = {
340
+ monthly: [3, 6, 12],
341
+ daily: [1, 3, 6, 12]
342
+ };
343
+ function hexToRgba(hex, alpha) {
344
+ const clean = hex.replace("#", "");
345
+ const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
346
+ const r = parseInt(full.slice(0, 2), 16);
347
+ const g = parseInt(full.slice(2, 4), 16);
348
+ const b = parseInt(full.slice(4, 6), 16);
349
+ return `rgba(${r},${g},${b},${alpha})`;
350
+ }
351
+ var DATASET_ALPHAS = [1, 0.72, 0.52, 0.36, 0.24, 0.15];
352
+ var FALLBACK_TICK = "#9EAAB5";
353
+ function formatTooltipDate(iso, granularity) {
354
+ const d = new Date(iso);
355
+ return d.toLocaleDateString(
356
+ "en-US",
357
+ granularity === "daily" ? { month: "short", day: "numeric", year: "numeric" } : { month: "short", year: "numeric" }
358
+ );
359
+ }
360
+ function ChartLegendItem({ label, color }) {
361
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1.5", children: [
362
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: 10, height: 10, backgroundColor: color, flexShrink: 0 } }),
363
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[11px] text-muted-foreground leading-none", children: label })
364
+ ] });
365
+ }
366
+ function ChartPeriodButton({
367
+ period,
368
+ active,
369
+ onClick
370
+ }) {
371
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Button, { variant: active ? "default" : "outline", size: "xs", onClick, children: [
372
+ period,
373
+ "M"
374
+ ] });
375
+ }
376
+
377
+ // src/components/ui/expense-bar-chart.tsx
378
+ var import_jsx_runtime7 = require("react/jsx-runtime");
379
+ import_chart.Chart.register(import_chart.CategoryScale, import_chart.LinearScale, import_chart.BarElement, import_chart.Tooltip, import_chart.Legend);
380
+ var FALLBACK_SECONDARY = "#162029";
381
+ function ExpenseBarChart({
382
+ expenseData,
383
+ title = "Expenses",
384
+ showLegend = true,
385
+ showXAxis = true,
386
+ showYAxis = true,
387
+ legendPosition = "top",
388
+ defaultPeriod = 6,
389
+ granularity = "monthly",
390
+ height = 280,
391
+ width = "100%",
392
+ className,
393
+ isLoading = false
394
+ }) {
395
+ const periods = CHART_PERIODS[granularity];
396
+ const [period, setPeriod] = (0, import_react3.useState)(defaultPeriod);
397
+ const isFirstRender = (0, import_react3.useRef)(true);
398
+ (0, import_react3.useEffect)(() => {
399
+ if (isFirstRender.current) {
400
+ isFirstRender.current = false;
401
+ return;
402
+ }
403
+ setPeriod(CHART_PERIODS[granularity][0]);
404
+ }, [granularity]);
405
+ const themeVars = useThemeVars();
406
+ const brandSecondary = themeVars["--theme-secondary"] || FALLBACK_SECONDARY;
407
+ const sliced = (0, import_react3.useMemo)(() => {
408
+ var _a, _b;
409
+ if (!((_a = expenseData == null ? void 0 : expenseData.months) == null ? void 0 : _a.length) || !expenseData.datasets.length) return null;
410
+ const count = Math.min(CHART_SLICE_COUNT[granularity][period], expenseData.months.length);
411
+ const start = expenseData.months.length - count;
412
+ return {
413
+ months: expenseData.months.slice(start),
414
+ dates: (_b = expenseData.dates) == null ? void 0 : _b.slice(start),
415
+ datasets: expenseData.datasets.map((ds) => __spreadProps(__spreadValues({}, ds), {
416
+ data: ds.data.slice(start)
417
+ }))
418
+ };
419
+ }, [expenseData, period, granularity]);
420
+ const datasetColors = (0, import_react3.useMemo)(
421
+ () => {
422
+ var _a;
423
+ return (_a = sliced == null ? void 0 : sliced.datasets.map(
424
+ (_, i) => hexToRgba(brandSecondary, DATASET_ALPHAS[i % DATASET_ALPHAS.length])
425
+ )) != null ? _a : [];
426
+ },
427
+ [sliced, brandSecondary]
428
+ );
429
+ const chartData = (0, import_react3.useMemo)(() => {
430
+ if (!sliced) return { labels: [], datasets: [] };
431
+ return {
432
+ labels: sliced.months,
433
+ datasets: sliced.datasets.map((ds, i) => ({
434
+ label: ds.label,
435
+ data: ds.data,
436
+ backgroundColor: datasetColors[i],
437
+ hoverBackgroundColor: hexToRgba(
438
+ brandSecondary,
439
+ Math.min(DATASET_ALPHAS[i % DATASET_ALPHAS.length] + 0.15, 1)
440
+ ),
441
+ borderWidth: 0,
442
+ borderRadius: 0,
443
+ borderSkipped: false,
444
+ barPercentage: 0.75,
445
+ categoryPercentage: 0.7,
446
+ stack: "expense"
447
+ }))
448
+ };
449
+ }, [sliced, datasetColors, brandSecondary]);
450
+ const options = (0, import_react3.useMemo)(() => ({
451
+ responsive: true,
452
+ maintainAspectRatio: false,
453
+ animation: { duration: 800, easing: "easeOutQuart" },
454
+ layout: { padding: 0 },
455
+ plugins: {
456
+ legend: { display: false },
457
+ tooltip: {
458
+ mode: "index",
459
+ intersect: false,
460
+ padding: 12,
461
+ cornerRadius: 0,
462
+ titleFont: { size: 11, weight: "600" },
463
+ bodyFont: { size: 12, weight: "500" },
464
+ callbacks: {
465
+ title: (tooltipItems) => {
466
+ var _a, _b, _c, _d;
467
+ const idx = (_a = tooltipItems[0]) == null ? void 0 : _a.dataIndex;
468
+ if (idx != null && ((_b = sliced == null ? void 0 : sliced.dates) == null ? void 0 : _b[idx])) {
469
+ return formatTooltipDate(sliced.dates[idx], granularity);
470
+ }
471
+ return (_d = (_c = tooltipItems[0]) == null ? void 0 : _c.label) != null ? _d : "";
472
+ },
473
+ label: (ctx) => {
474
+ const val = ctx.raw;
475
+ if (val === 0) return null;
476
+ return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
477
+ }
478
+ }
479
+ }
480
+ },
481
+ scales: {
482
+ x: {
483
+ display: showXAxis,
484
+ stacked: true,
485
+ grid: { display: false },
486
+ border: { display: false },
487
+ ticks: { font: { size: 10 }, color: FALLBACK_TICK }
488
+ },
489
+ y: {
490
+ display: showYAxis,
491
+ stacked: true,
492
+ grid: { display: false },
493
+ border: { display: false },
494
+ ticks: {
495
+ font: { size: 10 },
496
+ color: FALLBACK_TICK,
497
+ maxTicksLimit: 5,
498
+ padding: 8,
499
+ callback: (v) => `$${Number(v).toLocaleString()}`
500
+ }
501
+ }
502
+ }
503
+ }), [showXAxis, showYAxis, sliced, granularity]);
504
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
505
+ Card,
506
+ {
507
+ className: cn("w-full py-4 sm:py-6 gap-2", className),
508
+ style: { maxWidth: width },
509
+ children: [
510
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardHeader, { className: "px-3 sm:px-6", children: [
511
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-sm sm:text-base", children: title }),
512
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardAction, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-0.5 sm:gap-1", children: periods.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
513
+ ChartPeriodButton,
514
+ {
515
+ period: p,
516
+ active: period === p,
517
+ onClick: () => setPeriod(p)
518
+ },
519
+ p
520
+ )) }) })
521
+ ] }),
522
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { style: { height, width: "100%" } }) : !sliced ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Empty, { className: "flex-none p-4", style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EmptyDescription, { children: "No data available" }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
523
+ showLegend && legendPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: sliced.datasets.map((ds, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartLegendItem, { label: ds.label, color: datasetColors[i] }, ds.label)) }),
524
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
525
+ import_react_chartjs_2.Chart,
526
+ {
527
+ type: "bar",
528
+ data: chartData,
529
+ options,
530
+ "aria-label": title
531
+ },
532
+ brandSecondary
533
+ ) }),
534
+ showLegend && legendPosition === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pt-2", children: sliced.datasets.map((ds, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartLegendItem, { label: ds.label, color: datasetColors[i] }, ds.label)) })
535
+ ] }) })
536
+ ]
537
+ }
538
+ );
539
+ }
540
+ // Annotate the CommonJS export names for ESM import in node:
541
+ 0 && (module.exports = {
542
+ ExpenseBarChart
543
+ });
@@ -0,0 +1,16 @@
1
+ import {
2
+ ExpenseBarChart
3
+ } from "../../chunk-5JGQAAQV.mjs";
4
+ import "../../chunk-3EQP72AW.mjs";
5
+ import "../../chunk-HS7TFG7V.mjs";
6
+ import "../../chunk-YN5SYTOO.mjs";
7
+ import "../../chunk-SLWCCURD.mjs";
8
+ import "../../chunk-4AJ5HWHD.mjs";
9
+ import "../../chunk-DBHJ5KC3.mjs";
10
+ import "../../chunk-OXQQNQZI.mjs";
11
+ import "../../chunk-QOJ2DQD6.mjs";
12
+ import "../../chunk-V7CNWJT3.mjs";
13
+ import "../../chunk-FWCSY2DS.mjs";
14
+ export {
15
+ ExpenseBarChart
16
+ };
@@ -9,9 +9,9 @@ import {
9
9
  FieldSeparator,
10
10
  FieldSet,
11
11
  FieldTitle
12
- } from "../../chunk-HUVTPUV2.mjs";
13
- import "../../chunk-ZZV5JVNW.mjs";
12
+ } from "../../chunk-NLLKTU4B.mjs";
14
13
  import "../../chunk-55CEW76V.mjs";
14
+ import "../../chunk-ZZV5JVNW.mjs";
15
15
  import "../../chunk-V7CNWJT3.mjs";
16
16
  import "../../chunk-FWCSY2DS.mjs";
17
17
  export {