framepexls-ui-lib 0.3.21 → 0.3.23

package/dist/AppTopbar.d.mts

@@ -5,6 +5,7 @@ import React__default from 'react';
 type TopbarAction = {
     label: string;
     onClick?: () => void;
+    badge?: number | string;
 };
 type ButtonColor = NonNullable<React__default.ComponentProps<typeof Button>["color"]>;
 type Props = {

package/dist/AppTopbar.d.ts

@@ -5,6 +5,7 @@ import React__default from 'react';
 type TopbarAction = {
     label: string;
     onClick?: () => void;
+    badge?: number | string;
 };
 type ButtonColor = NonNullable<React__default.ComponentProps<typeof Button>["color"]>;
 type Props = {

package/dist/AppTopbar.js

@@ -34,6 +34,7 @@ __export(AppTopbar_exports, {
 module.exports = __toCommonJS(AppTopbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Button = __toESM(require("./Button"));
+var import_Badge = __toESM(require("./Badge"));
 function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
   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: [
     /* @__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 }) {
           color,
           size: "sm",
           className: "shadow-sm",
+          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,
           children: a.label
         },
         `action-${idx}-${a.label}`

package/dist/AppTopbar.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Button from "./Button";
+import Badge from "./Badge";
 function AppTopbar({ title, subtitle, secondary, primary, actions, color }) {
   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: [
     /* @__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 }) {
           color,
           size: "sm",
           className: "shadow-sm",
+          rightIcon: a.badge != null && a.badge !== 0 ? /* @__PURE__ */ jsx(Badge, { tone: "rose", size: "sm", className: "ml-1", children: a.badge }) : void 0,
           children: a.label
         },
         `action-${idx}-${a.label}`

package/dist/RechartsBarCard.d.mts

@@ -12,7 +12,7 @@ type RechartsBarCardProps = {
     subtitle?: React__default.ReactNode;
     data: any[];
     xKey: string;
-    xTickFormatter?: (value: any) => string;
+    xTickFormatter?: (value: any, index?: number, payload?: any) => string;
     bars: BarSeries[];
 };
 declare function RechartsBarCard({ title, subtitle, data, xKey, xTickFormatter, bars, }: RechartsBarCardProps): react_jsx_runtime.JSX.Element;

package/dist/RechartsBarCard.d.ts

@@ -12,7 +12,7 @@ type RechartsBarCardProps = {
     subtitle?: React__default.ReactNode;
     data: any[];
     xKey: string;
-    xTickFormatter?: (value: any) => string;
+    xTickFormatter?: (value: any, index?: number, payload?: any) => string;
     bars: BarSeries[];
 };
 declare function RechartsBarCard({ title, subtitle, data, xKey, xTickFormatter, bars, }: RechartsBarCardProps): react_jsx_runtime.JSX.Element;

package/dist/RechartsDonutCard.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type RechartsDonutCardProps = {
+    title: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    data: any[];
+    nameKey: string;
+    valueKey: string;
+    colors?: string[];
+    valueFormatter?: (value: number) => string;
+};
+declare function RechartsDonutCard({ title, subtitle, data, nameKey, valueKey, colors, valueFormatter, }: RechartsDonutCardProps): react_jsx_runtime.JSX.Element;
+
+export { type RechartsDonutCardProps, RechartsDonutCard as default };

package/dist/RechartsDonutCard.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type RechartsDonutCardProps = {
+    title: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    data: any[];
+    nameKey: string;
+    valueKey: string;
+    colors?: string[];
+    valueFormatter?: (value: number) => string;
+};
+declare function RechartsDonutCard({ title, subtitle, data, nameKey, valueKey, colors, valueFormatter, }: RechartsDonutCardProps): react_jsx_runtime.JSX.Element;
+
+export { type RechartsDonutCardProps, RechartsDonutCard as default };

package/dist/RechartsDonutCard.js

@@ -0,0 +1,90 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RechartsDonutCard_exports = {};
+__export(RechartsDonutCard_exports, {
+  default: () => RechartsDonutCard
+});
+module.exports = __toCommonJS(RechartsDonutCard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ChartCard = __toESM(require("./ChartCard"));
+var import_recharts = require("recharts");
+const DEFAULT_COLORS = [
+  "#0ea5e9",
+  "#6366f1",
+  "#22c55e",
+  "#ec4899",
+  "#f97316",
+  "#a855f7",
+  "#f97373",
+  "#10b981"
+];
+function RechartsDonutCard({
+  title,
+  subtitle,
+  data,
+  nameKey,
+  valueKey,
+  colors = DEFAULT_COLORS,
+  valueFormatter
+}) {
+  const safeData = Array.isArray(data) ? data : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartCard.default, { title, subtitle, children: !safeData.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-[220px] items-center justify-center text-xs text-slate-500 dark:text-slate-400", children: "Sin datos para los filtros seleccionados." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-[240px] w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.PieChart, { width: 260, height: 220, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_recharts.Pie,
+      {
+        data: safeData,
+        dataKey: valueKey,
+        nameKey,
+        innerRadius: 50,
+        outerRadius: 80,
+        paddingAngle: 2,
+        children: safeData.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_recharts.Cell,
+          {
+            fill: colors[index % colors.length]
+          },
+          `slice-${index}`
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_recharts.Tooltip,
+      {
+        formatter: (value, name, props) => {
+          const v = typeof value === "number" ? valueFormatter ? valueFormatter(value) : value.toLocaleString("es-MX", {
+            maximumFractionDigits: 2
+          }) : value;
+          const label = (props == null ? void 0 : props.payload) && props.payload[nameKey] || name;
+          return [v, label];
+        }
+      }
+    )
+  ] }) }) });
+}

package/dist/RechartsDonutCard.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChartCard from "./ChartCard";
+import { PieChart, Pie, Cell, Tooltip } from "recharts";
+const DEFAULT_COLORS = [
+  "#0ea5e9",
+  "#6366f1",
+  "#22c55e",
+  "#ec4899",
+  "#f97316",
+  "#a855f7",
+  "#f97373",
+  "#10b981"
+];
+function RechartsDonutCard({
+  title,
+  subtitle,
+  data,
+  nameKey,
+  valueKey,
+  colors = DEFAULT_COLORS,
+  valueFormatter
+}) {
+  const safeData = Array.isArray(data) ? data : [];
+  return /* @__PURE__ */ jsx(ChartCard, { title, subtitle, children: !safeData.length ? /* @__PURE__ */ jsx("div", { className: "flex h-[220px] items-center justify-center text-xs text-slate-500 dark:text-slate-400", children: "Sin datos para los filtros seleccionados." }) : /* @__PURE__ */ jsx("div", { className: "flex h-[240px] w-full items-center justify-center", children: /* @__PURE__ */ jsxs(PieChart, { width: 260, height: 220, children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data: safeData,
+        dataKey: valueKey,
+        nameKey,
+        innerRadius: 50,
+        outerRadius: 80,
+        paddingAngle: 2,
+        children: safeData.map((entry, index) => /* @__PURE__ */ jsx(
+          Cell,
+          {
+            fill: colors[index % colors.length]
+          },
+          `slice-${index}`
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        formatter: (value, name, props) => {
+          const v = typeof value === "number" ? valueFormatter ? valueFormatter(value) : value.toLocaleString("es-MX", {
+            maximumFractionDigits: 2
+          }) : value;
+          const label = (props == null ? void 0 : props.payload) && props.payload[nameKey] || name;
+          return [v, label];
+        }
+      }
+    )
+  ] }) }) });
+}
+export {
+  RechartsDonutCard as default
+};

package/dist/index.d.mts

@@ -18,6 +18,7 @@ export { default as ChartCard } from './ChartCard.mjs';
 export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.mjs';
 export { BarSeries, default as RechartsBarCard, RechartsBarCardProps } from './RechartsBarCard.mjs';
 export { LineSeries, default as RechartsTimeSeriesCard, RechartsTimeSeriesCardProps } from './RechartsTimeSeriesCard.mjs';
+export { default as RechartsDonutCard, RechartsDonutCardProps } from './RechartsDonutCard.mjs';
 export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.mjs';
 export { default as MediaCard, MediaCardProps } from './MediaCard.mjs';
 export { default as MediaTile, MediaTileProps } from './MediaTile.mjs';

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { default as ChartCard } from './ChartCard.js';
 export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.js';
 export { BarSeries, default as RechartsBarCard, RechartsBarCardProps } from './RechartsBarCard.js';
 export { LineSeries, default as RechartsTimeSeriesCard, RechartsTimeSeriesCardProps } from './RechartsTimeSeriesCard.js';
+export { default as RechartsDonutCard, RechartsDonutCardProps } from './RechartsDonutCard.js';
 export { default as UploadCard, UploadCardProps, UploadItem } from './UploadCard.js';
 export { default as MediaCard, MediaCardProps } from './MediaCard.js';
 export { default as MediaTile, MediaTileProps } from './MediaTile.js';

package/dist/index.js

@@ -70,6 +70,7 @@ __export(index_exports, {
   OrderButton: () => import_OrderButton.default,
   Pagination: () => import_Pagination.default,
   RechartsBarCard: () => import_RechartsBarCard.default,
+  RechartsDonutCard: () => import_RechartsDonutCard.default,
   RechartsTimeSeriesCard: () => import_RechartsTimeSeriesCard.default,
   ReviewHistory: () => import_ReviewHistory.default,
   ReviewHistoryDialog: () => import_ReviewHistory2.ReviewHistoryDialog,
@@ -125,6 +126,7 @@ var import_ChartCard = __toESM(require("./ChartCard"));
 var import_AnalyticsCharts = require("./AnalyticsCharts");
 var import_RechartsBarCard = __toESM(require("./RechartsBarCard"));
 var import_RechartsTimeSeriesCard = __toESM(require("./RechartsTimeSeriesCard"));
+var import_RechartsDonutCard = __toESM(require("./RechartsDonutCard"));
 var import_UploadCard = __toESM(require("./UploadCard"));
 var import_MediaCard = __toESM(require("./MediaCard"));
 var import_MediaTile = __toESM(require("./MediaTile"));
@@ -212,6 +214,7 @@ var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
   OrderButton,
   Pagination,
   RechartsBarCard,
+  RechartsDonutCard,
   RechartsTimeSeriesCard,
   ReviewHistory,
   ReviewHistoryDialog,

package/dist/index.mjs

@@ -20,120 +20,122 @@ import { default as default18 } from "./ChartCard";
 import { TopImpresionesBar, CtrHorizontalBar, DestinoDonut } from "./AnalyticsCharts";
 import { default as default19 } from "./RechartsBarCard";
 import { default as default20 } from "./RechartsTimeSeriesCard";
-import { default as default21 } from "./UploadCard";
-import { default as default22 } from "./MediaCard";
-import { default as default23 } from "./MediaTile";
-import { default as default24 } from "./Skeleton";
-import { default as default25 } from "./MediaSelector";
-import { default as default26 } from "./StatCard";
-import { default as default27 } from "./KpiCard";
-import { default as default28 } from "./Badge";
-import { default as default29 } from "./BadgeCluster";
-import { default as default30 } from "./Breadcrumb";
-import { default as default31 } from "./EmptyState";
-import { default as default32 } from "./Money";
-import { default as default33 } from "./TimeAgo";
-import { default as default34 } from "./AvatarSquare";
-import { default as default35 } from "./AvatarGroup";
-import { default as default36 } from "./AppTopbar";
-import { default as default37 } from "./OrderButton";
-import { default as default38 } from "./SearchInput";
-import { default as default39 } from "./ReviewHistory";
+import { default as default21 } from "./RechartsDonutCard";
+import { default as default22 } from "./UploadCard";
+import { default as default23 } from "./MediaCard";
+import { default as default24 } from "./MediaTile";
+import { default as default25 } from "./Skeleton";
+import { default as default26 } from "./MediaSelector";
+import { default as default27 } from "./StatCard";
+import { default as default28 } from "./KpiCard";
+import { default as default29 } from "./Badge";
+import { default as default30 } from "./BadgeCluster";
+import { default as default31 } from "./Breadcrumb";
+import { default as default32 } from "./EmptyState";
+import { default as default33 } from "./Money";
+import { default as default34 } from "./TimeAgo";
+import { default as default35 } from "./AvatarSquare";
+import { default as default36 } from "./AvatarGroup";
+import { default as default37 } from "./AppTopbar";
+import { default as default38 } from "./OrderButton";
+import { default as default39 } from "./SearchInput";
+import { default as default40 } from "./ReviewHistory";
 import { ReviewHistoryDialog } from "./ReviewHistory";
-import { default as default40 } from "./MultiComboSelect";
-import { default as default41 } from "./Sidebar";
-import { default as default42 } from "./Card";
-import { default as default43 } from "./Drawer";
-import { default as default44 } from "./Tooltip";
-import { default as default45 } from "./Link";
+import { default as default41 } from "./MultiComboSelect";
+import { default as default42 } from "./Sidebar";
+import { default as default43 } from "./Card";
+import { default as default44 } from "./Drawer";
+import { default as default45 } from "./Tooltip";
+import { default as default46 } from "./Link";
 import { ToastProvider, useToast } from "./Toast";
-import { default as default46 } from "./StorageUsage";
-import { default as default47 } from "./FileButton";
-import { default as default48 } from "./SegmentedTabs";
+import { default as default47 } from "./StorageUsage";
+import { default as default48 } from "./FileButton";
+import { default as default49 } from "./SegmentedTabs";
 import * as Animations from "./animations";
-import { default as default49 } from "./MotionProvider";
-import { default as default50 } from "./CalendarPanel";
-import { default as default51 } from "./TimePopover";
+import { default as default50 } from "./MotionProvider";
+import { default as default51 } from "./CalendarPanel";
+import { default as default52 } from "./TimePopover";
 import { WeekPopover, MonthPopover } from "./TimePopover";
-import { default as default52 } from "./TimePanel";
-import { default as default53 } from "./TimeRangeField";
-import { default as default54 } from "./Steps";
+import { default as default53 } from "./TimePanel";
+import { default as default54 } from "./TimeRangeField";
+import { default as default55 } from "./Steps";
 import { StepsNav } from "./Steps";
 export * from "./iconos";
-import { default as default55 } from "./ColorPicker";
-import { default as default56, useTheme } from "./theme/ThemeProvider";
-import { default as default57 } from "./theme/ThemeScript";
-import { default as default58 } from "./theme/ThemeToggle";
+import { default as default56 } from "./ColorPicker";
+import { default as default57, useTheme } from "./theme/ThemeProvider";
+import { default as default58 } from "./theme/ThemeScript";
+import { default as default59 } from "./theme/ThemeToggle";
 export {
   default3 as ActionIconButton,
   AnimatedBody,
   Animations,
-  default36 as AppTopbar,
-  default35 as AvatarGroup,
-  default34 as AvatarSquare,
-  default28 as Badge,
-  default29 as BadgeCluster,
-  default30 as Breadcrumb,
+  default37 as AppTopbar,
+  default36 as AvatarGroup,
+  default35 as AvatarSquare,
+  default29 as Badge,
+  default30 as BadgeCluster,
+  default31 as Breadcrumb,
   default2 as Button,
-  default50 as CalendarPanel,
-  default42 as Card,
+  default51 as CalendarPanel,
+  default43 as Card,
   default18 as ChartCard,
   default6 as Checkbox,
   default7 as CheckboxPillsGroup,
-  default55 as ColorPicker,
+  default56 as ColorPicker,
   default11 as ColumnSelector,
   default10 as ComboSelect,
   CtrHorizontalBar,
   default12 as DateTimeField,
   DestinoDonut,
   default13 as Dialog,
-  default43 as Drawer,
+  default44 as Drawer,
   default14 as Dropdown,
-  default31 as EmptyState,
-  default47 as FileButton,
+  default32 as EmptyState,
+  default48 as FileButton,
   default8 as FiltersMultiSelect,
   default17 as InfoGrid,
   default4 as Input,
-  default27 as KpiCard,
-  default45 as Link,
-  default22 as MediaCard,
-  default25 as MediaSelector,
-  default23 as MediaTile,
-  default32 as Money,
+  default28 as KpiCard,
+  default46 as Link,
+  default23 as MediaCard,
+  default26 as MediaSelector,
+  default24 as MediaTile,
+  default33 as Money,
   MonthPopover,
-  default49 as MotionProvider,
-  default40 as MultiComboSelect,
-  default37 as OrderButton,
+  default50 as MotionProvider,
+  default41 as MultiComboSelect,
+  default38 as OrderButton,
   default16 as Pagination,
   default19 as RechartsBarCard,
+  default21 as RechartsDonutCard,
   default20 as RechartsTimeSeriesCard,
-  default39 as ReviewHistory,
+  default40 as ReviewHistory,
   ReviewHistoryDialog,
-  default38 as SearchInput,
-  default48 as SegmentedTabs,
+  default39 as SearchInput,
+  default49 as SegmentedTabs,
   default9 as Select,
-  default41 as Sidebar,
-  default24 as Skeleton,
+  default42 as Sidebar,
+  default25 as Skeleton,
   SortTh,
-  default26 as StatCard,
-  default54 as Steps,
+  default27 as StatCard,
+  default55 as Steps,
   StepsNav,
-  default46 as StorageUsage,
+  default47 as StorageUsage,
   default15 as Table,
   Td,
   default5 as Textarea,
   Th,
-  default56 as ThemeProvider,
-  default57 as ThemeScript,
-  default58 as ThemeToggle,
-  default33 as TimeAgo,
-  default52 as TimePanel,
-  default51 as TimePopover,
-  default53 as TimeRangeField,
+  default57 as ThemeProvider,
+  default58 as ThemeScript,
+  default59 as ThemeToggle,
+  default34 as TimeAgo,
+  default53 as TimePanel,
+  default52 as TimePopover,
+  default54 as TimeRangeField,
   ToastProvider,
-  default44 as Tooltip,
+  default45 as Tooltip,
   TopImpresionesBar,
-  default21 as UploadCard,
+  default22 as UploadCard,
   WeekPopover,
   useTheme,
   useToast

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.3.21",
+  "version": "0.3.23",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",