@alpic-ai/ui 1.143.0 → 1.145.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/components/area-chart.mjs +5 -9
- package/dist/components/bar-chart.mjs +6 -14
- package/dist/components/bar-list.mjs +2 -9
- package/dist/components/chart-tooltip.mjs +54 -27
- package/dist/components/donut-chart.mjs +1 -3
- package/dist/components/form.mjs +2 -0
- package/dist/components/heatmap-chart.d.mts +6 -0
- package/dist/components/heatmap-chart.mjs +146 -116
- package/dist/components/line-chart.mjs +5 -9
- package/dist/components/sidebar.mjs +1 -1
- package/dist/components/skeleton.mjs +1 -1
- package/dist/components/stat.mjs +4 -4
- package/dist/lib/chart-palette.mjs +20 -17
- package/package.json +2 -2
- package/src/components/area-chart.tsx +12 -10
- package/src/components/bar-chart.tsx +13 -11
- package/src/components/bar-list.tsx +1 -9
- package/src/components/chart-tooltip.tsx +22 -6
- package/src/components/donut-chart.tsx +1 -4
- package/src/components/form.tsx +3 -1
- package/src/components/heatmap-chart.tsx +49 -5
- package/src/components/line-chart.tsx +12 -10
- package/src/components/skeleton.tsx +1 -1
- package/src/components/stat.tsx +4 -4
- package/src/lib/chart-palette.ts +20 -17
- package/dist/hooks/use-reduced-motion.d.mts +0 -4
- package/dist/hooks/use-reduced-motion.mjs +0 -16
- package/src/hooks/use-reduced-motion.ts +0 -17
package/src/lib/chart-palette.ts
CHANGED
|
@@ -15,25 +15,25 @@
|
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
17
|
export const MAGENTA_PALETTE = [
|
|
18
|
-
"#
|
|
19
|
-
"#
|
|
20
|
-
"#
|
|
21
|
-
"#
|
|
22
|
-
"#
|
|
23
|
-
"#
|
|
24
|
-
"#
|
|
25
|
-
"#
|
|
18
|
+
"#da1b6a",
|
|
19
|
+
"#ec82b0",
|
|
20
|
+
"#9a67d7",
|
|
21
|
+
"#668fdf",
|
|
22
|
+
"#47bde0",
|
|
23
|
+
"#75ddd8",
|
|
24
|
+
"#cd8c4d",
|
|
25
|
+
"#3eb0a1",
|
|
26
26
|
] as const;
|
|
27
27
|
|
|
28
28
|
export const CYAN_PALETTE = [
|
|
29
|
-
"#
|
|
30
|
-
"#
|
|
31
|
-
"#
|
|
32
|
-
"#
|
|
33
|
-
"#
|
|
34
|
-
"#
|
|
35
|
-
"#
|
|
36
|
-
"#
|
|
29
|
+
"#2eb2c5",
|
|
30
|
+
"#50d0c0",
|
|
31
|
+
"#4f90e0",
|
|
32
|
+
"#8d74e0",
|
|
33
|
+
"#bc73e0",
|
|
34
|
+
"#ec82b0",
|
|
35
|
+
"#da1b6a",
|
|
36
|
+
"#c08dd3",
|
|
37
37
|
] as const;
|
|
38
38
|
|
|
39
39
|
export type ChartPaletteName = "magenta" | "cyan";
|
|
@@ -55,7 +55,10 @@ const HEAT_RAMPS: Record<ChartPaletteName, (empty: string) => string[]> = {
|
|
|
55
55
|
cyan: heatRampMint,
|
|
56
56
|
};
|
|
57
57
|
|
|
58
|
-
export const heatRamp = (palette: ChartPaletteName, empty: string) =>
|
|
58
|
+
export const heatRamp = (palette: ChartPaletteName, empty: string, isDark = true) => {
|
|
59
|
+
const [, ...colored] = HEAT_RAMPS[palette](empty);
|
|
60
|
+
return [empty, ...(isDark ? colored : colored.reverse())];
|
|
61
|
+
};
|
|
59
62
|
|
|
60
63
|
const hexToRgb = (hex: string) => {
|
|
61
64
|
const value = Number.parseInt(hex.slice(1), 16);
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React$1 from "react";
|
|
3
|
-
//#region src/hooks/use-reduced-motion.ts
|
|
4
|
-
function useReducedMotion() {
|
|
5
|
-
const [reduced, setReduced] = React$1.useState(false);
|
|
6
|
-
React$1.useEffect(() => {
|
|
7
|
-
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
8
|
-
const update = () => setReduced(query.matches);
|
|
9
|
-
update();
|
|
10
|
-
query.addEventListener("change", update);
|
|
11
|
-
return () => query.removeEventListener("change", update);
|
|
12
|
-
}, []);
|
|
13
|
-
return reduced;
|
|
14
|
-
}
|
|
15
|
-
//#endregion
|
|
16
|
-
export { useReducedMotion };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
export function useReducedMotion() {
|
|
6
|
-
const [reduced, setReduced] = React.useState(false);
|
|
7
|
-
|
|
8
|
-
React.useEffect(() => {
|
|
9
|
-
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
10
|
-
const update = () => setReduced(query.matches);
|
|
11
|
-
update();
|
|
12
|
-
query.addEventListener("change", update);
|
|
13
|
-
return () => query.removeEventListener("change", update);
|
|
14
|
-
}, []);
|
|
15
|
-
|
|
16
|
-
return reduced;
|
|
17
|
-
}
|