framepexls-ui-lib 0.3.18 → 0.3.20

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 (7) hide show
  1. package/dist/KpiCard.d.mts +4 -1
  2. package/dist/KpiCard.d.ts +4 -1
  3. package/dist/KpiCard.js +60 -7
  4. package/dist/KpiCard.mjs +60 -7
  5. package/dist/Table.js +1 -1
  6. package/dist/Table.mjs +1 -1
  7. package/package.json +1 -1
package/dist/KpiCard.d.mts CHANGED
@@ -1,4 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { Tone } from './Badge.mjs';
3
+ import 'react';
2
4
 
3
5
  type KpiCardProps = {
4
6
  label: string;
@@ -6,7 +8,8 @@ type KpiCardProps = {
6
8
  delta: string;
7
9
  help?: string;
8
10
  clickable?: boolean;
11
+ tone?: Tone;
9
12
  };
10
- declare function KpiCard({ label, value, delta, help, clickable }: KpiCardProps): react_jsx_runtime.JSX.Element;
13
+ declare function KpiCard({ label, value, delta, help, clickable, tone }: KpiCardProps): react_jsx_runtime.JSX.Element;
11
14
 
12
15
  export { type KpiCardProps, KpiCard as default };
package/dist/KpiCard.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { Tone } from './Badge.js';
3
+ import 'react';
2
4
 
3
5
  type KpiCardProps = {
4
6
  label: string;
@@ -6,7 +8,8 @@ type KpiCardProps = {
6
8
  delta: string;
7
9
  help?: string;
8
10
  clickable?: boolean;
11
+ tone?: Tone;
9
12
  };
10
- declare function KpiCard({ label, value, delta, help, clickable }: KpiCardProps): react_jsx_runtime.JSX.Element;
13
+ declare function KpiCard({ label, value, delta, help, clickable, tone }: KpiCardProps): react_jsx_runtime.JSX.Element;
11
14
 
12
15
  export { type KpiCardProps, KpiCard as default };
package/dist/KpiCard.js CHANGED
@@ -38,24 +38,77 @@ 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
+ function KpiCard({ label, value, delta, help, clickable, tone = "rose" }) {
92
+ var _a;
93
+ const interactive = !!clickable;
94
+ const styles = (_a = toneStyles[tone]) != null ? _a : toneStyles.rose;
42
95
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
43
96
  import_framer_motion.motion.div,
44
97
  {
45
- whileHover: clickable ? { y: -2, boxShadow: "0 12px 30px rgba(15,23,42,0.18)" } : void 0,
46
- whileTap: clickable ? { scale: 0.98 } : void 0,
47
- transition: { type: "spring", stiffness: 260, damping: 20 },
48
- className: `rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-white ${clickable ? "cursor-pointer ring-1 ring-transparent hover:ring-blue-400/60" : ""}`,
98
+ whileHover: interactive ? { y: -2, scale: 1.01 } : void 0,
99
+ whileTap: interactive ? { scale: 0.985, y: 0 } : void 0,
100
+ transition: interactive ? { type: "tween", duration: 0.16, ease: "easeOut" } : void 0,
101
+ 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}` : ""}`,
49
102
  children: [
50
103
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
51
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-600 dark:text-white/80", children: label }),
104
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-700 dark:text-slate-50", children: label }),
52
105
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
53
106
  import_framer_motion.motion.span,
54
107
  {
55
108
  initial: { opacity: 0, y: -4 },
56
109
  animate: { opacity: 1, y: 0 },
57
110
  transition: { duration: 0.2 },
58
- 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",
111
+ className: `rounded-full px-2 py-0.5 text-[12px] font-semibold ${styles.badge}`,
59
112
  children: delta
60
113
  }
61
114
  )
package/dist/KpiCard.mjs CHANGED
@@ -15,24 +15,77 @@ 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
+ function KpiCard({ label, value, delta, help, clickable, tone = "rose" }) {
69
+ var _a;
70
+ const interactive = !!clickable;
71
+ const styles = (_a = toneStyles[tone]) != null ? _a : toneStyles.rose;
19
72
  return /* @__PURE__ */ jsxs(
20
73
  motion.div,
21
74
  {
22
- whileHover: clickable ? { y: -2, boxShadow: "0 12px 30px rgba(15,23,42,0.18)" } : void 0,
23
- whileTap: clickable ? { scale: 0.98 } : void 0,
24
- transition: { type: "spring", stiffness: 260, damping: 20 },
25
- className: `rounded-2xl border border-white/50 bg-white/75 p-4 text-slate-900/90 backdrop-blur-sm dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-white ${clickable ? "cursor-pointer ring-1 ring-transparent hover:ring-blue-400/60" : ""}`,
75
+ whileHover: interactive ? { y: -2, scale: 1.01 } : void 0,
76
+ whileTap: interactive ? { scale: 0.985, y: 0 } : void 0,
77
+ transition: interactive ? { type: "tween", duration: 0.16, ease: "easeOut" } : void 0,
78
+ 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}` : ""}`,
26
79
  children: [
27
80
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
28
- /* @__PURE__ */ jsx("span", { className: "text-slate-600 dark:text-white/80", children: label }),
81
+ /* @__PURE__ */ jsx("span", { className: "text-slate-700 dark:text-slate-50", children: label }),
29
82
  /* @__PURE__ */ jsx(
30
83
  motion.span,
31
84
  {
32
85
  initial: { opacity: 0, y: -4 },
33
86
  animate: { opacity: 1, y: 0 },
34
87
  transition: { duration: 0.2 },
35
- 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",
88
+ className: `rounded-full px-2 py-0.5 text-[12px] font-semibold ${styles.badge}`,
36
89
  children: delta
37
90
  }
38
91
  )
package/dist/Table.js CHANGED
@@ -55,7 +55,7 @@ const Table = import_react.default.forwardRef(function Table2({ className, dense
55
55
  {
56
56
  ref,
57
57
  className: cx(
58
- "min-w-full table-auto text-left text-[13px] sm:text-sm",
58
+ "min-w-max table-auto text-left text-[13px] sm:text-sm w-full",
59
59
  dense && "text-xs",
60
60
  className
61
61
  ),
package/dist/Table.mjs CHANGED
@@ -18,7 +18,7 @@ const Table = React.forwardRef(function Table2({ className, dense = false, child
18
18
  {
19
19
  ref,
20
20
  className: cx(
21
- "min-w-full table-auto text-left text-[13px] sm:text-sm",
21
+ "min-w-max table-auto text-left text-[13px] sm:text-sm w-full",
22
22
  dense && "text-xs",
23
23
  className
24
24
  ),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.3.18",
3
+ "version": "0.3.20",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",