@rinzai/zen 0.9.0 → 0.10.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/dist/animated-number/index.d.ts +6 -2
- package/dist/animated-number/index.d.ts.map +1 -1
- package/dist/animated-number/index.js +68 -17
- package/dist/calendar-heatmap/index.d.ts +25 -0
- package/dist/calendar-heatmap/index.d.ts.map +1 -0
- package/dist/calendar-heatmap/index.js +48 -0
- package/dist/chart/allocation.d.ts +30 -0
- package/dist/chart/allocation.d.ts.map +1 -0
- package/dist/chart/allocation.js +69 -0
- package/dist/chart/index.d.ts +1 -0
- package/dist/chart/index.d.ts.map +1 -1
- package/dist/chart/index.js +85 -83
- package/dist/code-block/index.d.ts +1 -1
- package/dist/code-block/index.d.ts.map +1 -1
- package/dist/code-block/index.js +31 -22
- package/dist/collapse/index.d.ts +3 -2
- package/dist/collapse/index.d.ts.map +1 -1
- package/dist/collapse/index.js +1 -1
- package/dist/date-picker/index.d.ts +10 -2
- package/dist/date-picker/index.d.ts.map +1 -1
- package/dist/date-picker/index.js +43 -21
- package/dist/dialog/index.d.ts +4 -2
- package/dist/dialog/index.d.ts.map +1 -1
- package/dist/dialog/index.js +69 -113
- package/dist/editable-cell/index.d.ts +2 -1
- package/dist/editable-cell/index.d.ts.map +1 -1
- package/dist/editable-cell/index.js +24 -17
- package/dist/filter-bar/index.d.ts +21 -0
- package/dist/filter-bar/index.d.ts.map +1 -0
- package/dist/filter-bar/index.js +90 -0
- package/dist/icon-picker/index.d.ts +38 -0
- package/dist/icon-picker/index.d.ts.map +1 -0
- package/dist/icon-picker/index.js +112 -0
- package/dist/icons/arrow-left.js +23 -0
- package/dist/icons/micro/arrow-trending-down.d.ts +3 -0
- package/dist/icons/micro/arrow-trending-down.d.ts.map +1 -0
- package/dist/icons/micro/arrow-trending-down.js +21 -0
- package/dist/icons/micro/arrow-trending-up.d.ts +3 -0
- package/dist/icons/micro/arrow-trending-up.d.ts.map +1 -0
- package/dist/icons/micro/arrow-trending-up.js +21 -0
- package/dist/index.d.ts +17 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/kbd/index.d.ts +4 -0
- package/dist/kbd/index.d.ts.map +1 -0
- package/dist/kbd/index.js +12 -0
- package/dist/keypad/index.d.ts +20 -0
- package/dist/keypad/index.d.ts.map +1 -0
- package/dist/keypad/index.js +42 -0
- package/dist/lib.js +92 -77
- package/dist/load-more/index.d.ts +19 -0
- package/dist/load-more/index.d.ts.map +1 -0
- package/dist/load-more/index.js +37 -0
- package/dist/menu/index.d.ts +22 -3
- package/dist/menu/index.d.ts.map +1 -1
- package/dist/menu/index.js +132 -45
- package/dist/meter/index.d.ts +3 -1
- package/dist/meter/index.d.ts.map +1 -1
- package/dist/meter/index.js +19 -14
- package/dist/money-input/index.d.ts +3 -3
- package/dist/page-transition/index.d.ts +10 -0
- package/dist/page-transition/index.d.ts.map +1 -0
- package/dist/page-transition/index.js +16 -0
- package/dist/progress-ring/index.d.ts +4 -1
- package/dist/progress-ring/index.d.ts.map +1 -1
- package/dist/progress-ring/index.js +47 -38
- package/dist/range-slider/index.d.ts +26 -0
- package/dist/range-slider/index.d.ts.map +1 -0
- package/dist/range-slider/index.js +44 -0
- package/dist/repeat-picker/index.d.ts +22 -0
- package/dist/repeat-picker/index.d.ts.map +1 -0
- package/dist/repeat-picker/index.js +115 -0
- package/dist/slider/index.d.ts +2 -0
- package/dist/slider/index.d.ts.map +1 -1
- package/dist/slider/index.js +19 -18
- package/dist/sortable/index.d.ts +33 -0
- package/dist/sortable/index.d.ts.map +1 -0
- package/dist/sortable/index.js +147 -0
- package/dist/table/index.d.ts +5 -1
- package/dist/table/index.d.ts.map +1 -1
- package/dist/table/index.js +90 -58
- package/dist/table/selection.d.ts +55 -0
- package/dist/table/selection.d.ts.map +1 -0
- package/dist/table/selection.js +83 -0
- package/dist/table/swipe.d.ts +18 -0
- package/dist/table/swipe.d.ts.map +1 -0
- package/dist/table/swipe.js +53 -0
- package/dist/tabs/index.d.ts.map +1 -1
- package/dist/tabs/index.js +101 -51
- package/dist/theme-toggle/index.js +6 -6
- package/dist/theme.css +184 -11
- package/dist/toast/index.js +25 -25
- package/dist/toggle/index.d.ts.map +1 -1
- package/dist/toggle/index.js +1 -1
- package/dist/trend/index.d.ts +19 -0
- package/dist/trend/index.d.ts.map +1 -0
- package/dist/trend/index.js +27 -0
- package/dist/utils/date.d.ts +34 -0
- package/dist/utils/date.d.ts.map +1 -1
- package/dist/utils/date.js +45 -12
- package/dist/utils/money.d.ts +3 -1
- package/dist/utils/money.d.ts.map +1 -1
- package/dist/utils/money.js +24 -1
- package/dist/utils/repeat.d.ts +17 -0
- package/dist/utils/repeat.d.ts.map +1 -0
- package/dist/utils/repeat.js +38 -0
- package/dist/utils/swipe.d.ts +29 -0
- package/dist/utils/swipe.d.ts.map +1 -0
- package/dist/utils/swipe.js +85 -0
- package/dist/utils/useAnchoredPopup.d.ts.map +1 -1
- package/dist/utils/useAnchoredPopup.js +3 -9
- package/dist/zen.css +1 -1
- package/package.json +3 -1
|
@@ -2,9 +2,11 @@ import { Money } from '../utils/money';
|
|
|
2
2
|
/**
|
|
3
3
|
* A number that counts smoothly to each new value (and up from zero when it
|
|
4
4
|
* first appears). Rounds to whole numbers while moving, so money in minor
|
|
5
|
-
* units never shows fractions.
|
|
5
|
+
* units never shows fractions. With `roll`, each digit rolls to its new one
|
|
6
|
+
* instead, like an odometer: easier to read when a total changes. Instant
|
|
7
|
+
* with reduced motion.
|
|
6
8
|
*/
|
|
7
|
-
export default function AnimatedNumber({ value, format, duration, fromZero, className, }: AnimatedNumberProps): import('react').JSX.Element;
|
|
9
|
+
export default function AnimatedNumber({ value, format, duration, fromZero, roll, className, }: AnimatedNumberProps): import('react').JSX.Element;
|
|
8
10
|
/** An amount of money (minor units) that counts to each new value. */
|
|
9
11
|
export declare function AnimatedMoney({ value, currency, locale, showDecimals, ...rest }: Omit<AnimatedNumberProps, 'format' | 'value'> & {
|
|
10
12
|
value: Money;
|
|
@@ -20,6 +22,8 @@ export interface AnimatedNumberProps {
|
|
|
20
22
|
duration?: number;
|
|
21
23
|
/** Count up from zero when first shown (default), or start at the value. */
|
|
22
24
|
fromZero?: boolean;
|
|
25
|
+
/** Roll each digit to its new one, like an odometer, instead of counting. */
|
|
26
|
+
roll?: boolean;
|
|
23
27
|
className?: string;
|
|
24
28
|
}
|
|
25
29
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/animated-number/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAO3D
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/animated-number/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAO3D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,KAAK,EACL,MAAe,EACf,QAAc,EACd,QAAe,EACf,IAAY,EACZ,SAAS,GACZ,EAAE,mBAAmB,+BAiDrB;AAoBD,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,YAAoB,EACpB,GAAG,IAAI,EACV,EAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,+BAIA;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
@@ -3,32 +3,83 @@ import { cx as e } from "../utils/cx.js";
|
|
|
3
3
|
import { formatMoney as t } from "../utils/money.js";
|
|
4
4
|
import { reducedMotion as n } from "../utils/motion.js";
|
|
5
5
|
import { useEffect as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
|
|
6
|
-
import { jsx as s } from "react/jsx-runtime";
|
|
6
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
7
7
|
//#region packages/animated-number/index.tsx
|
|
8
|
-
var
|
|
9
|
-
function
|
|
10
|
-
let [
|
|
11
|
-
|
|
12
|
-
if (
|
|
13
|
-
|
|
8
|
+
var l = typeof window > "u" ? r : i, u = (e) => 1 - (1 - e) ** 3;
|
|
9
|
+
function d({ value: t, format: i = String, duration: d = 650, fromZero: f = !0, roll: m = !1, className: h }) {
|
|
10
|
+
let [g, _] = o(f ? 0 : t), v = a(f ? 0 : t), [y, b] = o(!f);
|
|
11
|
+
if (r(() => {
|
|
12
|
+
if (!m || y) return;
|
|
13
|
+
let e = requestAnimationFrame(() => b(!0));
|
|
14
|
+
return () => cancelAnimationFrame(e);
|
|
15
|
+
}, [m, y]), l(() => {
|
|
16
|
+
if (m) return;
|
|
17
|
+
if (n() || d <= 0) {
|
|
18
|
+
v.current = t, _(t);
|
|
14
19
|
return;
|
|
15
20
|
}
|
|
16
|
-
let e =
|
|
17
|
-
let
|
|
18
|
-
|
|
21
|
+
let e = v.current, r = performance.now(), i = requestAnimationFrame(function n(a) {
|
|
22
|
+
let o = Math.min(1, (a - r) / d), s = Math.round(e + (t - e) * u(o));
|
|
23
|
+
v.current = s, _(s), o < 1 && (i = requestAnimationFrame(n));
|
|
19
24
|
});
|
|
20
|
-
return () => cancelAnimationFrame(
|
|
21
|
-
}, [
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
return () => cancelAnimationFrame(i);
|
|
26
|
+
}, [
|
|
27
|
+
t,
|
|
28
|
+
d,
|
|
29
|
+
m
|
|
30
|
+
]), m) {
|
|
31
|
+
let n = i(t);
|
|
32
|
+
return /* @__PURE__ */ c("span", {
|
|
33
|
+
className: e("zen__animated-number inline-flex items-start tabular-nums", h),
|
|
34
|
+
children: [/* @__PURE__ */ s("span", {
|
|
35
|
+
className: "sr-only",
|
|
36
|
+
children: n
|
|
37
|
+
}), /* @__PURE__ */ s("span", {
|
|
38
|
+
"aria-hidden": !0,
|
|
39
|
+
className: "inline-flex items-start",
|
|
40
|
+
children: n.split("").map((e, t) => /\d/.test(e) ? /* @__PURE__ */ s(p, {
|
|
41
|
+
digit: y ? Number(e) : 0,
|
|
42
|
+
duration: d
|
|
43
|
+
}, n.length - t) : /* @__PURE__ */ s("span", { children: e }, n.length - t))
|
|
44
|
+
})]
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
return /* @__PURE__ */ s("span", {
|
|
48
|
+
className: e("zen__animated-number tabular-nums", h),
|
|
49
|
+
children: i(g)
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
var f = [
|
|
53
|
+
0,
|
|
54
|
+
1,
|
|
55
|
+
2,
|
|
56
|
+
3,
|
|
57
|
+
4,
|
|
58
|
+
5,
|
|
59
|
+
6,
|
|
60
|
+
7,
|
|
61
|
+
8,
|
|
62
|
+
9
|
|
63
|
+
];
|
|
64
|
+
function p({ digit: e, duration: t }) {
|
|
65
|
+
return /* @__PURE__ */ s("span", {
|
|
66
|
+
className: "inline-block h-[1lh] overflow-hidden",
|
|
67
|
+
children: /* @__PURE__ */ s("span", {
|
|
68
|
+
className: "zen__digit ease-out-soft flex flex-col transition-[translate]",
|
|
69
|
+
style: {
|
|
70
|
+
translate: `0 ${-e * 10}%`,
|
|
71
|
+
transitionDuration: `${t}ms`
|
|
72
|
+
},
|
|
73
|
+
children: f.map((e) => /* @__PURE__ */ s("span", { children: e }, e))
|
|
74
|
+
})
|
|
24
75
|
});
|
|
25
76
|
}
|
|
26
|
-
function
|
|
27
|
-
return /* @__PURE__ */ s(
|
|
77
|
+
function m({ value: e, currency: n, locale: r, showDecimals: i = !1, ...a }) {
|
|
78
|
+
return /* @__PURE__ */ s(d, {
|
|
28
79
|
value: e,
|
|
29
80
|
format: (e) => t(e, n, r, { showDecimals: i }),
|
|
30
81
|
...a
|
|
31
82
|
});
|
|
32
83
|
}
|
|
33
84
|
//#endregion
|
|
34
|
-
export {
|
|
85
|
+
export { m as AnimatedMoney, d as default };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { DateString } from '../utils/date';
|
|
2
|
+
import { Month } from '../utils/month';
|
|
3
|
+
/**
|
|
4
|
+
* A month as a grid of days, each shaded by its value (e.g. what was spent
|
|
5
|
+
* that day): busy days stand out at a glance. Hover a day for its figure;
|
|
6
|
+
* with `onSelect`, days are buttons.
|
|
7
|
+
*/
|
|
8
|
+
export default function CalendarHeatmap({ month, values, locale, format, weekStartsOn, onSelect, selected, label, className, }: CalendarHeatmapProps): import('react').JSX.Element;
|
|
9
|
+
export interface CalendarHeatmapProps {
|
|
10
|
+
month: Month;
|
|
11
|
+
/** Each day's value, by date ("2026-09-03"); days missing have none. */
|
|
12
|
+
values: Partial<Record<DateString, number>>;
|
|
13
|
+
locale: string;
|
|
14
|
+
/** Turns a value into text for its label, e.g. as money. */
|
|
15
|
+
format?: (value: number) => string;
|
|
16
|
+
/** 0 for Sunday … 6 for Saturday (default: the locale's). */
|
|
17
|
+
weekStartsOn?: number;
|
|
18
|
+
/** Makes the days buttons. */
|
|
19
|
+
onSelect?: (day: DateString) => void;
|
|
20
|
+
selected?: DateString | null;
|
|
21
|
+
/** Accessible name (default: the month, e.g. "September 2026"). */
|
|
22
|
+
label?: string;
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/calendar-heatmap/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAA+D,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE3D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAe,EACf,YAAgC,EAChC,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,GACZ,EAAE,oBAAoB,+BAsFtB;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,wEAAwE;IACxE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC7B,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cx as e } from "../utils/cx.js";
|
|
3
|
+
import { formatMonth as t } from "../utils/month.js";
|
|
4
|
+
import { dayOfWeek as n, daysInMonth as r, formatDate as i, weekStart as a, weekdayNames as o } from "../utils/date.js";
|
|
5
|
+
import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
6
|
+
//#region packages/calendar-heatmap/index.tsx
|
|
7
|
+
function u({ month: u, values: d, locale: f, format: p = String, weekStartsOn: m = a(f), onSelect: h, selected: g, label: _, className: v }) {
|
|
8
|
+
let y = r(u), b = Array.from({ length: y }, (e, t) => `${u}-${String(t + 1).padStart(2, "0")}`), x = (n(b[0]) - m + 7) % 7, S = [...Array(x).fill(null), ...b];
|
|
9
|
+
for (; S.length % 7;) S.push(null);
|
|
10
|
+
let C = Array.from({ length: S.length / 7 }, (e, t) => S.slice(t * 7, t * 7 + 7)), w = o(f, "narrow"), T = o(f, "long"), E = Array.from({ length: 7 }, (e, t) => (m + t) % 7), D = Math.max(0, ...b.map((e) => d[e] ?? 0));
|
|
11
|
+
return /* @__PURE__ */ l("table", {
|
|
12
|
+
"aria-label": _ ?? t(u, f, "long"),
|
|
13
|
+
className: e("zen__calendar-heatmap w-full table-fixed border-separate border-spacing-1", v),
|
|
14
|
+
children: [/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ c("tr", { children: E.map((e) => /* @__PURE__ */ c("th", {
|
|
15
|
+
scope: "col",
|
|
16
|
+
abbr: T[e],
|
|
17
|
+
className: "text-muted-foreground pb-1 text-xs font-normal",
|
|
18
|
+
children: w[e]
|
|
19
|
+
}, e)) }) }), /* @__PURE__ */ c("tbody", { children: C.map((t, n) => /* @__PURE__ */ c("tr", { children: t.map((t, n) => {
|
|
20
|
+
if (!t) return /* @__PURE__ */ c("td", {}, n);
|
|
21
|
+
let r = d[t], a = D > 0 && r ? Math.sqrt(r / D) : 0, o = `${i(t, f, "day")}: ${p(r || 0)}`, u = e("relative grid aspect-square w-full place-items-center rounded-md text-[0.65rem] tabular-nums transition-[box-shadow]", a ? a > .6 ? "text-primary-foreground" : "text-foreground/80" : "bg-tint/[0.04] text-muted-foreground", t === g && "ring-ring ring-2"), m = a ? { background: `oklch(var(--primary) / ${+(.14 + .81 * a).toFixed(2)})` } : void 0, _ = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
|
|
22
|
+
"aria-hidden": !0,
|
|
23
|
+
children: Number(t.slice(8))
|
|
24
|
+
}), /* @__PURE__ */ c("span", {
|
|
25
|
+
className: "sr-only",
|
|
26
|
+
children: o
|
|
27
|
+
})] });
|
|
28
|
+
return /* @__PURE__ */ c("td", {
|
|
29
|
+
title: o,
|
|
30
|
+
className: "p-0",
|
|
31
|
+
children: h ? /* @__PURE__ */ c("button", {
|
|
32
|
+
type: "button",
|
|
33
|
+
"aria-pressed": t === g,
|
|
34
|
+
onClick: () => h(t),
|
|
35
|
+
className: e(u, "focus-visible:ring-ring/60 cursor-pointer outline-hidden hover:shadow-[0_0_0_1px_oklch(var(--tint)/0.3)] focus-visible:ring-2"),
|
|
36
|
+
style: m,
|
|
37
|
+
children: _
|
|
38
|
+
}) : /* @__PURE__ */ c("span", {
|
|
39
|
+
className: u,
|
|
40
|
+
style: m,
|
|
41
|
+
children: _
|
|
42
|
+
})
|
|
43
|
+
}, t);
|
|
44
|
+
}) }, n)) })]
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
//#endregion
|
|
48
|
+
export { u as default };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ChartPalette } from './palette';
|
|
2
|
+
/**
|
|
3
|
+
* Where a whole went, as one bar split into its parts (e.g. income across
|
|
4
|
+
* spending, savings and bills), with a legend of each part's value and share.
|
|
5
|
+
* Pointing at a part, in the bar or the legend, picks it out; screen readers
|
|
6
|
+
* hear every part's value and share from the bar's label. Sweeps in from
|
|
7
|
+
* the start the first time it's seen. Colours default to the chart palette in
|
|
8
|
+
* order, like DonutChart's.
|
|
9
|
+
*/
|
|
10
|
+
export default function AllocationBar({ items, label, palette, formatValue, locale, legend, className, }: AllocationBarProps): import('react').JSX.Element;
|
|
11
|
+
export interface AllocationItem {
|
|
12
|
+
key: string;
|
|
13
|
+
label: string;
|
|
14
|
+
value: number;
|
|
15
|
+
color?: string;
|
|
16
|
+
}
|
|
17
|
+
export interface AllocationBarProps {
|
|
18
|
+
items: AllocationItem[];
|
|
19
|
+
/** What the whole is, e.g. "Income in September", for screen readers. */
|
|
20
|
+
label: string;
|
|
21
|
+
/** Colours for items that don't give their own: the categorical palette (default), or shades of the theme's glow. */
|
|
22
|
+
palette?: ChartPalette;
|
|
23
|
+
formatValue?: (value: number) => string;
|
|
24
|
+
/** For the shares' percent format. */
|
|
25
|
+
locale?: string;
|
|
26
|
+
/** The list of parts under the bar (default on). */
|
|
27
|
+
legend?: boolean;
|
|
28
|
+
className?: string;
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=allocation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"allocation.d.ts","sourceRoot":"","sources":["../../packages/chart/allocation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,WAAW,CAAC;AAE5D;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,KAAK,EACL,KAAK,EACL,OAAiB,EACjB,WAAoB,EACpB,MAAM,EACN,MAAa,EACb,SAAS,GACZ,EAAE,kBAAkB,+BAuEpB;AAED,MAAM,WAAW,cAAc;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cx as e } from "../utils/cx.js";
|
|
3
|
+
import { useSeen as t } from "../utils/useSeen.js";
|
|
4
|
+
import { paletteColor as n } from "./palette.js";
|
|
5
|
+
import { useRef as r, useState as i } from "react";
|
|
6
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
7
|
+
//#region packages/chart/allocation.tsx
|
|
8
|
+
function s({ items: s, label: c, palette: l = "chart", formatValue: u = String, locale: d, legend: f = !0, className: p }) {
|
|
9
|
+
let [m, h] = i(null), g = r(null), _ = t(g), v = s.filter((e) => e.value > 0), y = v.reduce((e, t) => e + t.value, 0), b = (e) => {
|
|
10
|
+
let t = s.findIndex((t) => t.key === e);
|
|
11
|
+
return s[t].color ?? n(l, t, s.length);
|
|
12
|
+
}, x = new Intl.NumberFormat(d, {
|
|
13
|
+
style: "percent",
|
|
14
|
+
maximumFractionDigits: 0
|
|
15
|
+
});
|
|
16
|
+
return /* @__PURE__ */ o("div", {
|
|
17
|
+
ref: g,
|
|
18
|
+
"data-zen-unseen": _ ? void 0 : "",
|
|
19
|
+
className: e("zen__allocation flex flex-col gap-3", p),
|
|
20
|
+
children: [/* @__PURE__ */ a("div", {
|
|
21
|
+
role: "img",
|
|
22
|
+
"aria-label": `${c}. ${v.map((e) => `${e.label}: ${u(e.value)}, ${x.format(y ? e.value / y : 0)}`).join("; ")}`,
|
|
23
|
+
className: "zen__chart-sweep flex h-3 gap-0.5 overflow-hidden rounded-full",
|
|
24
|
+
children: v.map((e) => /* @__PURE__ */ a("span", {
|
|
25
|
+
"data-active": m === e.key || void 0,
|
|
26
|
+
"data-dimmed": m !== null && m !== e.key || void 0,
|
|
27
|
+
onPointerEnter: () => h(e.key),
|
|
28
|
+
onPointerLeave: () => h(null),
|
|
29
|
+
className: "min-w-1 transition-[opacity,filter] duration-200 first:rounded-s-full last:rounded-e-full data-active:[filter:drop-shadow(0_0_8px_var(--part))] data-dimmed:opacity-35",
|
|
30
|
+
style: {
|
|
31
|
+
flexGrow: e.value,
|
|
32
|
+
flexBasis: 0,
|
|
33
|
+
background: b(e.key),
|
|
34
|
+
"--part": b(e.key)
|
|
35
|
+
}
|
|
36
|
+
}, e.key))
|
|
37
|
+
}), f && /* @__PURE__ */ a("ul", {
|
|
38
|
+
"aria-hidden": !0,
|
|
39
|
+
className: "grid gap-x-6 gap-y-1.5 text-sm sm:grid-cols-2",
|
|
40
|
+
children: s.map((e) => /* @__PURE__ */ o("li", {
|
|
41
|
+
onPointerEnter: () => h(e.key),
|
|
42
|
+
onPointerLeave: () => h(null),
|
|
43
|
+
"data-dimmed": m !== null && m !== e.key || void 0,
|
|
44
|
+
className: "flex items-center gap-2 transition-opacity duration-200 data-dimmed:opacity-50",
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ a("span", {
|
|
47
|
+
"aria-hidden": !0,
|
|
48
|
+
className: "size-2.5 shrink-0 rounded-full",
|
|
49
|
+
style: { background: b(e.key) }
|
|
50
|
+
}),
|
|
51
|
+
/* @__PURE__ */ a("span", {
|
|
52
|
+
className: "min-w-0 flex-1 truncate",
|
|
53
|
+
children: e.label
|
|
54
|
+
}),
|
|
55
|
+
/* @__PURE__ */ a("span", {
|
|
56
|
+
className: "tabular-nums",
|
|
57
|
+
children: u(e.value)
|
|
58
|
+
}),
|
|
59
|
+
/* @__PURE__ */ a("span", {
|
|
60
|
+
className: "text-muted-foreground w-10 text-end tabular-nums",
|
|
61
|
+
children: x.format(y ? Math.max(0, e.value) / y : 0)
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
}, e.key))
|
|
65
|
+
})]
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
//#endregion
|
|
69
|
+
export { s as default };
|
package/dist/chart/index.d.ts
CHANGED
|
@@ -82,6 +82,7 @@ export interface ChartProps<T extends Row, X extends keyof T & string = keyof T
|
|
|
82
82
|
children: ReactNode;
|
|
83
83
|
}
|
|
84
84
|
export { ChartTooltipCard, type ChartTooltipCardProps } from './tooltip';
|
|
85
|
+
export { default as AllocationBar, type AllocationBarProps, type AllocationItem } from './allocation';
|
|
85
86
|
export { default as DonutChart, type DonutChartProps } from './donut';
|
|
86
87
|
export { type ChartPalette, paletteColor } from './palette';
|
|
87
88
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/chart/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,WAAW,CAAC;AAE5D,OAAO,EAQH,SAAS,EAMZ,MAAM,OAAO,CAAC;AAEf,KAAK,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAQnC,oDAAoD;AACpD,eAAO,MAAM,SAAS,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAiB,CAAC;AAErE,uGAAuG;AACvG,eAAO,MAAM,SAAS,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAiB,CAAC;AAErE,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAiB,CAAC;AAEnE,gIAAgI;AAChI,eAAO,MAAM,cAAc,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAiB,CAAC;AAmB/E;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,CAAC,SAAS,GAAG,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,EAAE,EACxF,IAAI,EACJ,CAAC,EACD,KAAK,EACL,OAAO,EACP,MAAY,EACZ,OAAgB,EAChB,OAAiB,EACjB,cAAc,EACd,aAAa,EACb,MAAM,EACN,OAAiB,EACjB,SAAS,EACT,QAAQ,GACX,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/chart/index.tsx"],"names":[],"mappings":"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"}
|