framepexls-ui-lib 0.3.19 → 0.3.21

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 (5) hide show
  1. package/dist/KpiCard.d.mts +7 -2
  2. package/dist/KpiCard.d.ts +7 -2
  3. package/dist/KpiCard.js +62 -4
  4. package/dist/KpiCard.mjs +62 -4
  5. package/package.json +1 -1
package/dist/KpiCard.d.mts CHANGED
@@ -1,12 +1,17 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { Tone } from './Badge.mjs';
3
+ import 'react';
2
4
 
5
+ type Trend = "up" | "down" | "flat";
3
6
  type KpiCardProps = {
4
7
  label: string;
5
8
  value: string | number;
6
9
  delta: string;
7
10
  help?: string;
8
11
  clickable?: boolean;
12
+ tone?: Tone;
13
+ trend?: Trend;
9
14
  };
10
- declare function KpiCard({ label, value, delta, help, clickable }: KpiCardProps): react_jsx_runtime.JSX.Element;
15
+ declare function KpiCard({ label, value, delta, help, clickable, tone, trend }: KpiCardProps): react_jsx_runtime.JSX.Element;
11
16
 
12
- export { type KpiCardProps, KpiCard as default };
17
+ export { type KpiCardProps, type Trend, KpiCard as default };
package/dist/KpiCard.d.ts CHANGED
@@ -1,12 +1,17 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { Tone } from './Badge.js';
3
+ import 'react';
2
4
 
5
+ type Trend = "up" | "down" | "flat";
3
6
  type KpiCardProps = {
4
7
  label: string;
5
8
  value: string | number;
6
9
  delta: string;
7
10
  help?: string;
8
11
  clickable?: boolean;
12
+ tone?: Tone;
13
+ trend?: Trend;
9
14
  };
10
- declare function KpiCard({ label, value, delta, help, clickable }: KpiCardProps): react_jsx_runtime.JSX.Element;
15
+ declare function KpiCard({ label, value, delta, help, clickable, tone, trend }: KpiCardProps): react_jsx_runtime.JSX.Element;
11
16
 
12
- export { type KpiCardProps, KpiCard as default };
17
+ export { type KpiCardProps, type Trend, KpiCard as default };
package/dist/KpiCard.js CHANGED
@@ -38,25 +38,83 @@ function MotionNumber({ value, format }) {
38
38
  }, [value]);
39
39
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
40
40
  }
41
- function KpiCard({ label, value, delta, help, clickable }) {
41
+ const toneStyles = {
42
+ emerald: {
43
+ ring: "hover:ring-emerald-400/70",
44
+ badge: "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-200"
45
+ },
46
+ indigo: {
47
+ ring: "hover:ring-indigo-400/70",
48
+ badge: "bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-200"
49
+ },
50
+ amber: {
51
+ ring: "hover:ring-amber-400/70",
52
+ badge: "bg-amber-500/10 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200"
53
+ },
54
+ slate: {
55
+ ring: "hover:ring-slate-400/60",
56
+ badge: "bg-slate-500/10 text-slate-700 dark:bg-slate-500/25 dark:text-slate-100"
57
+ },
58
+ rose: {
59
+ ring: "hover:ring-rose-400/70",
60
+ badge: "bg-rose-500/10 text-rose-600 dark:bg-rose-500/20 dark:text-rose-200"
61
+ },
62
+ sky: {
63
+ ring: "hover:ring-sky-400/70",
64
+ badge: "bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-200"
65
+ },
66
+ violet: {
67
+ ring: "hover:ring-violet-400/70",
68
+ badge: "bg-violet-500/10 text-violet-600 dark:bg-violet-500/20 dark:text-violet-200"
69
+ },
70
+ cyan: {
71
+ ring: "hover:ring-cyan-400/70",
72
+ badge: "bg-cyan-500/10 text-cyan-600 dark:bg-cyan-500/20 dark:text-cyan-200"
73
+ },
74
+ teal: {
75
+ ring: "hover:ring-teal-400/70",
76
+ badge: "bg-teal-500/10 text-teal-600 dark:bg-teal-500/20 dark:text-teal-200"
77
+ },
78
+ pink: {
79
+ ring: "hover:ring-pink-400/70",
80
+ badge: "bg-pink-500/10 text-pink-600 dark:bg-pink-500/20 dark:text-pink-200"
81
+ },
82
+ orange: {
83
+ ring: "hover:ring-orange-400/70",
84
+ badge: "bg-orange-500/10 text-orange-600 dark:bg-orange-500/20 dark:text-orange-200"
85
+ },
86
+ lime: {
87
+ ring: "hover:ring-lime-400/70",
88
+ badge: "bg-lime-500/10 text-lime-700 dark:bg-lime-500/20 dark:text-lime-200"
89
+ }
90
+ };
91
+ const trendStyles = {
92
+ up: "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-200",
93
+ down: "bg-rose-500/10 text-rose-600 dark:bg-rose-500/20 dark:text-rose-200",
94
+ flat: "bg-amber-500/10 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200"
95
+ };
96
+ function KpiCard({ label, value, delta, help, clickable, tone = "rose", trend }) {
97
+ var _a;
42
98
  const interactive = !!clickable;
99
+ const styles = (_a = toneStyles[tone]) != null ? _a : toneStyles.rose;
100
+ const badgeClass = trend ? trendStyles[trend] : styles.badge;
43
101
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
44
102
  import_framer_motion.motion.div,
45
103
  {
46
104
  whileHover: interactive ? { y: -2, scale: 1.01 } : void 0,
47
105
  whileTap: interactive ? { scale: 0.985, y: 0 } : void 0,
48
106
  transition: interactive ? { type: "tween", duration: 0.16, ease: "easeOut" } : void 0,
49
- className: `rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm shadow-sm transition-shadow dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-white ${interactive ? "cursor-pointer hover:shadow-lg ring-1 ring-transparent hover:ring-blue-400/60" : ""}`,
107
+ className: `rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm shadow-sm transition-shadow dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-white ${interactive ? `cursor-pointer hover:shadow-lg ring-1 ring-transparent ${styles.ring}` : ""}`,
50
108
  children: [
51
109
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
52
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-600 dark:text-white/80", children: label }),
110
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-700 dark:text-slate-50", children: label }),
53
111
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
54
112
  import_framer_motion.motion.span,
55
113
  {
56
114
  initial: { opacity: 0, y: -4 },
57
115
  animate: { opacity: 1, y: 0 },
58
116
  transition: { duration: 0.2 },
59
- className: "rounded-full bg-blue-600/10 px-2 py-0.5 text-[12px] font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-200",
117
+ className: `rounded-full px-2 py-0.5 text-[12px] font-semibold ${badgeClass}`,
60
118
  children: delta
61
119
  }
62
120
  )
package/dist/KpiCard.mjs CHANGED
@@ -15,25 +15,83 @@ function MotionNumber({ value, format }) {
15
15
  }, [value]);
16
16
  return /* @__PURE__ */ jsx("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
17
17
  }
18
- function KpiCard({ label, value, delta, help, clickable }) {
18
+ const toneStyles = {
19
+ emerald: {
20
+ ring: "hover:ring-emerald-400/70",
21
+ badge: "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-200"
22
+ },
23
+ indigo: {
24
+ ring: "hover:ring-indigo-400/70",
25
+ badge: "bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-200"
26
+ },
27
+ amber: {
28
+ ring: "hover:ring-amber-400/70",
29
+ badge: "bg-amber-500/10 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200"
30
+ },
31
+ slate: {
32
+ ring: "hover:ring-slate-400/60",
33
+ badge: "bg-slate-500/10 text-slate-700 dark:bg-slate-500/25 dark:text-slate-100"
34
+ },
35
+ rose: {
36
+ ring: "hover:ring-rose-400/70",
37
+ badge: "bg-rose-500/10 text-rose-600 dark:bg-rose-500/20 dark:text-rose-200"
38
+ },
39
+ sky: {
40
+ ring: "hover:ring-sky-400/70",
41
+ badge: "bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-200"
42
+ },
43
+ violet: {
44
+ ring: "hover:ring-violet-400/70",
45
+ badge: "bg-violet-500/10 text-violet-600 dark:bg-violet-500/20 dark:text-violet-200"
46
+ },
47
+ cyan: {
48
+ ring: "hover:ring-cyan-400/70",
49
+ badge: "bg-cyan-500/10 text-cyan-600 dark:bg-cyan-500/20 dark:text-cyan-200"
50
+ },
51
+ teal: {
52
+ ring: "hover:ring-teal-400/70",
53
+ badge: "bg-teal-500/10 text-teal-600 dark:bg-teal-500/20 dark:text-teal-200"
54
+ },
55
+ pink: {
56
+ ring: "hover:ring-pink-400/70",
57
+ badge: "bg-pink-500/10 text-pink-600 dark:bg-pink-500/20 dark:text-pink-200"
58
+ },
59
+ orange: {
60
+ ring: "hover:ring-orange-400/70",
61
+ badge: "bg-orange-500/10 text-orange-600 dark:bg-orange-500/20 dark:text-orange-200"
62
+ },
63
+ lime: {
64
+ ring: "hover:ring-lime-400/70",
65
+ badge: "bg-lime-500/10 text-lime-700 dark:bg-lime-500/20 dark:text-lime-200"
66
+ }
67
+ };
68
+ const trendStyles = {
69
+ up: "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-200",
70
+ down: "bg-rose-500/10 text-rose-600 dark:bg-rose-500/20 dark:text-rose-200",
71
+ flat: "bg-amber-500/10 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200"
72
+ };
73
+ function KpiCard({ label, value, delta, help, clickable, tone = "rose", trend }) {
74
+ var _a;
19
75
  const interactive = !!clickable;
76
+ const styles = (_a = toneStyles[tone]) != null ? _a : toneStyles.rose;
77
+ const badgeClass = trend ? trendStyles[trend] : styles.badge;
20
78
  return /* @__PURE__ */ jsxs(
21
79
  motion.div,
22
80
  {
23
81
  whileHover: interactive ? { y: -2, scale: 1.01 } : void 0,
24
82
  whileTap: interactive ? { scale: 0.985, y: 0 } : void 0,
25
83
  transition: interactive ? { type: "tween", duration: 0.16, ease: "easeOut" } : void 0,
26
- className: `rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm shadow-sm transition-shadow dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-white ${interactive ? "cursor-pointer hover:shadow-lg ring-1 ring-transparent hover:ring-blue-400/60" : ""}`,
84
+ className: `rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm shadow-sm transition-shadow dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-white ${interactive ? `cursor-pointer hover:shadow-lg ring-1 ring-transparent ${styles.ring}` : ""}`,
27
85
  children: [
28
86
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
29
- /* @__PURE__ */ jsx("span", { className: "text-slate-600 dark:text-white/80", children: label }),
87
+ /* @__PURE__ */ jsx("span", { className: "text-slate-700 dark:text-slate-50", children: label }),
30
88
  /* @__PURE__ */ jsx(
31
89
  motion.span,
32
90
  {
33
91
  initial: { opacity: 0, y: -4 },
34
92
  animate: { opacity: 1, y: 0 },
35
93
  transition: { duration: 0.2 },
36
- className: "rounded-full bg-blue-600/10 px-2 py-0.5 text-[12px] font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-200",
94
+ className: `rounded-full px-2 py-0.5 text-[12px] font-semibold ${badgeClass}`,
37
95
  children: delta
38
96
  }
39
97
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.3.19",
3
+ "version": "0.3.21",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",