framepexls-ui-lib 0.3.20 → 0.3.22

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 (11) hide show
  1. package/dist/AppTopbar.d.mts +1 -0
  2. package/dist/AppTopbar.d.ts +1 -0
  3. package/dist/AppTopbar.js +2 -0
  4. package/dist/AppTopbar.mjs +2 -0
  5. package/dist/Checkbox.d.mts +1 -1
  6. package/dist/Checkbox.d.ts +1 -1
  7. package/dist/KpiCard.d.mts +4 -2
  8. package/dist/KpiCard.d.ts +4 -2
  9. package/dist/KpiCard.js +8 -2
  10. package/dist/KpiCard.mjs +8 -2
  11. package/package.json +1 -1
package/dist/AppTopbar.d.mts CHANGED
@@ -5,6 +5,7 @@ import React__default from 'react';
5
5
  type TopbarAction = {
6
6
  label: string;
7
7
  onClick?: () => void;
8
+ badge?: number | string;
8
9
  };
9
10
  type ButtonColor = NonNullable<React__default.ComponentProps<typeof Button>["color"]>;
10
11
  type Props = {
package/dist/AppTopbar.d.ts CHANGED
@@ -5,6 +5,7 @@ import React__default from 'react';
5
5
  type TopbarAction = {
6
6
  label: string;
7
7
  onClick?: () => void;
8
+ badge?: number | string;
8
9
  };
9
10
  type ButtonColor = NonNullable<React__default.ComponentProps<typeof Button>["color"]>;
10
11
  type Props = {
package/dist/AppTopbar.js CHANGED
@@ -34,6 +34,7 @@ __export(AppTopbar_exports, {
34
34
  module.exports = __toCommonJS(AppTopbar_exports);
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_Button = __toESM(require("./Button"));
37
+ var import_Badge = __toESM(require("./Badge"));
37
38
  function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
38
39
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-[var(--fx-surface)] backdrop-blur-xl dark:bg-[var(--fx-surface)]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
39
40
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
@@ -49,6 +50,7 @@ function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
49
50
  color,
50
51
  size: "sm",
51
52
  className: "shadow-sm",
53
+ rightIcon: a.badge != null && a.badge !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: "rose", size: "sm", className: "ml-1", children: a.badge }) : void 0,
52
54
  children: a.label
53
55
  },
54
56
  `action-${idx}-${a.label}`
package/dist/AppTopbar.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import Button from "./Button";
4
+ import Badge from "./Badge";
4
5
  function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
5
6
  return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-[var(--fx-surface)] backdrop-blur-xl dark:bg-[var(--fx-surface)]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
6
7
  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
@@ -16,6 +17,7 @@ function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
16
17
  color,
17
18
  size: "sm",
18
19
  className: "shadow-sm",
20
+ rightIcon: a.badge != null && a.badge !== 0 ? /* @__PURE__ */ jsx(Badge, { tone: "rose", size: "sm", className: "ml-1", children: a.badge }) : void 0,
19
21
  children: a.label
20
22
  },
21
23
  `action-${idx}-${a.label}`
package/dist/Checkbox.d.mts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
package/dist/Checkbox.d.ts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
package/dist/KpiCard.d.mts CHANGED
@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { Tone } from './Badge.mjs';
3
3
  import 'react';
4
4
 
5
+ type Trend = "up" | "down" | "flat";
5
6
  type KpiCardProps = {
6
7
  label: string;
7
8
  value: string | number;
@@ -9,7 +10,8 @@ type KpiCardProps = {
9
10
  help?: string;
10
11
  clickable?: boolean;
11
12
  tone?: Tone;
13
+ trend?: Trend;
12
14
  };
13
- declare function KpiCard({ label, value, delta, help, clickable, tone }: KpiCardProps): react_jsx_runtime.JSX.Element;
15
+ declare function KpiCard({ label, value, delta, help, clickable, tone, trend }: KpiCardProps): react_jsx_runtime.JSX.Element;
14
16
 
15
- export { type KpiCardProps, KpiCard as default };
17
+ export { type KpiCardProps, type Trend, KpiCard as default };
package/dist/KpiCard.d.ts CHANGED
@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { Tone } from './Badge.js';
3
3
  import 'react';
4
4
 
5
+ type Trend = "up" | "down" | "flat";
5
6
  type KpiCardProps = {
6
7
  label: string;
7
8
  value: string | number;
@@ -9,7 +10,8 @@ type KpiCardProps = {
9
10
  help?: string;
10
11
  clickable?: boolean;
11
12
  tone?: Tone;
13
+ trend?: Trend;
12
14
  };
13
- declare function KpiCard({ label, value, delta, help, clickable, tone }: KpiCardProps): react_jsx_runtime.JSX.Element;
15
+ declare function KpiCard({ label, value, delta, help, clickable, tone, trend }: KpiCardProps): react_jsx_runtime.JSX.Element;
14
16
 
15
- export { type KpiCardProps, KpiCard as default };
17
+ export { type KpiCardProps, type Trend, KpiCard as default };
package/dist/KpiCard.js CHANGED
@@ -88,10 +88,16 @@ const toneStyles = {
88
88
  badge: "bg-lime-500/10 text-lime-700 dark:bg-lime-500/20 dark:text-lime-200"
89
89
  }
90
90
  };
91
- function KpiCard({ label, value, delta, help, clickable, tone = "rose" }) {
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 }) {
92
97
  var _a;
93
98
  const interactive = !!clickable;
94
99
  const styles = (_a = toneStyles[tone]) != null ? _a : toneStyles.rose;
100
+ const badgeClass = trend ? trendStyles[trend] : styles.badge;
95
101
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
96
102
  import_framer_motion.motion.div,
97
103
  {
@@ -108,7 +114,7 @@ function KpiCard({ label, value, delta, help, clickable, tone = "rose" }) {
108
114
  initial: { opacity: 0, y: -4 },
109
115
  animate: { opacity: 1, y: 0 },
110
116
  transition: { duration: 0.2 },
111
- className: `rounded-full px-2 py-0.5 text-[12px] font-semibold ${styles.badge}`,
117
+ className: `rounded-full px-2 py-0.5 text-[12px] font-semibold ${badgeClass}`,
112
118
  children: delta
113
119
  }
114
120
  )
package/dist/KpiCard.mjs CHANGED
@@ -65,10 +65,16 @@ const toneStyles = {
65
65
  badge: "bg-lime-500/10 text-lime-700 dark:bg-lime-500/20 dark:text-lime-200"
66
66
  }
67
67
  };
68
- function KpiCard({ label, value, delta, help, clickable, tone = "rose" }) {
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 }) {
69
74
  var _a;
70
75
  const interactive = !!clickable;
71
76
  const styles = (_a = toneStyles[tone]) != null ? _a : toneStyles.rose;
77
+ const badgeClass = trend ? trendStyles[trend] : styles.badge;
72
78
  return /* @__PURE__ */ jsxs(
73
79
  motion.div,
74
80
  {
@@ -85,7 +91,7 @@ function KpiCard({ label, value, delta, help, clickable, tone = "rose" }) {
85
91
  initial: { opacity: 0, y: -4 },
86
92
  animate: { opacity: 1, y: 0 },
87
93
  transition: { duration: 0.2 },
88
- className: `rounded-full px-2 py-0.5 text-[12px] font-semibold ${styles.badge}`,
94
+ className: `rounded-full px-2 py-0.5 text-[12px] font-semibold ${badgeClass}`,
89
95
  children: delta
90
96
  }
91
97
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.3.20",
3
+ "version": "0.3.22",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",