framepexls-ui-lib 0.3.15 → 0.3.17

package/dist/RechartsBarCard.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type BarSeries = {
+    key: string;
+    name?: string;
+    color?: string;
+    stackId?: string;
+};
+type RechartsBarCardProps = {
+    title: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    data: any[];
+    xKey: string;
+    xTickFormatter?: (value: any) => string;
+    bars: BarSeries[];
+};
+declare function RechartsBarCard({ title, subtitle, data, xKey, xTickFormatter, bars, }: RechartsBarCardProps): react_jsx_runtime.JSX.Element;
+
+export { type BarSeries, type RechartsBarCardProps, RechartsBarCard as default };

package/dist/RechartsBarCard.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type BarSeries = {
+    key: string;
+    name?: string;
+    color?: string;
+    stackId?: string;
+};
+type RechartsBarCardProps = {
+    title: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    data: any[];
+    xKey: string;
+    xTickFormatter?: (value: any) => string;
+    bars: BarSeries[];
+};
+declare function RechartsBarCard({ title, subtitle, data, xKey, xTickFormatter, bars, }: RechartsBarCardProps): react_jsx_runtime.JSX.Element;
+
+export { type BarSeries, type RechartsBarCardProps, RechartsBarCard as default };

package/dist/RechartsBarCard.js

@@ -0,0 +1,102 @@
+"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 RechartsBarCard_exports = {};
+__export(RechartsBarCard_exports, {
+  default: () => RechartsBarCard
+});
+module.exports = __toCommonJS(RechartsBarCard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ChartCard = __toESM(require("./ChartCard"));
+var import_recharts = require("recharts");
+const formatNumberMx = (v, opts) => {
+  const n = typeof v === "number" ? v : Number(v);
+  if (!Number.isFinite(n)) return v;
+  return n.toLocaleString("es-MX", { maximumFractionDigits: 0, ...opts });
+};
+function RechartsBarCard({
+  title,
+  subtitle,
+  data,
+  xKey,
+  xTickFormatter,
+  bars
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartCard.default, { title, subtitle, children: !Array.isArray(data) || data.length === 0 ? /* @__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: "h-[260px] w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_recharts.BarChart,
+    {
+      width: 520,
+      height: 220,
+      data,
+      margin: { top: 10, right: 20, left: 0, bottom: 20 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "#e2e8f0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_recharts.XAxis,
+          {
+            dataKey: xKey,
+            tickFormatter: xTickFormatter,
+            tick: { fontSize: 11 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_recharts.YAxis,
+          {
+            tickFormatter: (v) => formatNumberMx(v),
+            tick: { fontSize: 11 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_recharts.Tooltip,
+          {
+            formatter: (value, name) => [
+              typeof value === "number" ? value.toLocaleString("es-MX", { maximumFractionDigits: 2 }) : value,
+              name
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Legend, {}),
+        bars.map((b, idx) => {
+          var _a, _b;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.Bar,
+            {
+              dataKey: b.key,
+              name: b.name,
+              stackId: b.stackId,
+              fill: (_b = b.color) != null ? _b : idx === 0 ? "#fb7185" : "#0ea5e9",
+              radius: [4, 4, 0, 0]
+            },
+            (_a = b.key) != null ? _a : idx
+          );
+        })
+      ]
+    }
+  ) }) });
+}

package/dist/RechartsBarCard.mjs

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChartCard from "./ChartCard";
+import {
+  BarChart,
+  Bar,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend
+} from "recharts";
+const formatNumberMx = (v, opts) => {
+  const n = typeof v === "number" ? v : Number(v);
+  if (!Number.isFinite(n)) return v;
+  return n.toLocaleString("es-MX", { maximumFractionDigits: 0, ...opts });
+};
+function RechartsBarCard({
+  title,
+  subtitle,
+  data,
+  xKey,
+  xTickFormatter,
+  bars
+}) {
+  return /* @__PURE__ */ jsx(ChartCard, { title, subtitle, children: !Array.isArray(data) || data.length === 0 ? /* @__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: "h-[260px] w-full overflow-x-auto", children: /* @__PURE__ */ jsxs(
+    BarChart,
+    {
+      width: 520,
+      height: 220,
+      data,
+      margin: { top: 10, right: 20, left: 0, bottom: 20 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#e2e8f0" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: xKey,
+            tickFormatter: xTickFormatter,
+            tick: { fontSize: 11 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            tickFormatter: (v) => formatNumberMx(v),
+            tick: { fontSize: 11 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            formatter: (value, name) => [
+              typeof value === "number" ? value.toLocaleString("es-MX", { maximumFractionDigits: 2 }) : value,
+              name
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Legend, {}),
+        bars.map((b, idx) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: b.key,
+              name: b.name,
+              stackId: b.stackId,
+              fill: (_b = b.color) != null ? _b : idx === 0 ? "#fb7185" : "#0ea5e9",
+              radius: [4, 4, 0, 0]
+            },
+            (_a = b.key) != null ? _a : idx
+          );
+        })
+      ]
+    }
+  ) }) });
+}
+export {
+  RechartsBarCard as default
+};

package/dist/RechartsTimeSeriesCard.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type LineSeries = {
+    key: string;
+    name?: string;
+    color?: string;
+    yAxisId?: "left" | "right";
+};
+type RechartsTimeSeriesCardProps = {
+    title: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    data: any[];
+    xKey: string;
+    xTickFormatter?: (value: any) => string;
+    leftAxisLabel?: string;
+    rightAxisLabel?: string;
+    lines: LineSeries[];
+};
+declare function RechartsTimeSeriesCard({ title, subtitle, data, xKey, xTickFormatter, leftAxisLabel, rightAxisLabel, lines, }: RechartsTimeSeriesCardProps): react_jsx_runtime.JSX.Element;
+
+export { type LineSeries, type RechartsTimeSeriesCardProps, RechartsTimeSeriesCard as default };

package/dist/RechartsTimeSeriesCard.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type LineSeries = {
+    key: string;
+    name?: string;
+    color?: string;
+    yAxisId?: "left" | "right";
+};
+type RechartsTimeSeriesCardProps = {
+    title: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    data: any[];
+    xKey: string;
+    xTickFormatter?: (value: any) => string;
+    leftAxisLabel?: string;
+    rightAxisLabel?: string;
+    lines: LineSeries[];
+};
+declare function RechartsTimeSeriesCard({ title, subtitle, data, xKey, xTickFormatter, leftAxisLabel, rightAxisLabel, lines, }: RechartsTimeSeriesCardProps): react_jsx_runtime.JSX.Element;
+
+export { type LineSeries, type RechartsTimeSeriesCardProps, RechartsTimeSeriesCard as default };

package/dist/RechartsTimeSeriesCard.js

@@ -0,0 +1,134 @@
+"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 RechartsTimeSeriesCard_exports = {};
+__export(RechartsTimeSeriesCard_exports, {
+  default: () => RechartsTimeSeriesCard
+});
+module.exports = __toCommonJS(RechartsTimeSeriesCard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ChartCard = __toESM(require("./ChartCard"));
+var import_recharts = require("recharts");
+const formatNumberMx = (v, opts) => {
+  const n = typeof v === "number" ? v : Number(v);
+  if (!Number.isFinite(n)) return v;
+  return n.toLocaleString("es-MX", { maximumFractionDigits: 0, ...opts });
+};
+function RechartsTimeSeriesCard({
+  title,
+  subtitle,
+  data,
+  xKey,
+  xTickFormatter,
+  leftAxisLabel,
+  rightAxisLabel,
+  lines
+}) {
+  const hasRight = lines.some((l) => {
+    var _a;
+    return ((_a = l.yAxisId) != null ? _a : "left") === "right";
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartCard.default, { title, subtitle, children: !Array.isArray(data) || data.length === 0 ? /* @__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: "h-[260px] w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_recharts.LineChart,
+    {
+      width: 520,
+      height: 220,
+      data,
+      margin: { top: 10, right: 20, left: 0, bottom: 20 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "#e2e8f0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_recharts.XAxis,
+          {
+            dataKey: xKey,
+            tickFormatter: xTickFormatter,
+            tick: { fontSize: 11 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_recharts.YAxis,
+          {
+            yAxisId: "left",
+            allowDecimals: false,
+            tickFormatter: (v) => formatNumberMx(v),
+            tick: { fontSize: 11 },
+            label: leftAxisLabel ? {
+              value: leftAxisLabel,
+              angle: -90,
+              position: "insideLeft",
+              fontSize: 10
+            } : void 0
+          }
+        ),
+        hasRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_recharts.YAxis,
+          {
+            yAxisId: "right",
+            orientation: "right",
+            tickFormatter: (v) => formatNumberMx(v),
+            tick: { fontSize: 11 },
+            label: rightAxisLabel ? {
+              value: rightAxisLabel,
+              angle: 90,
+              position: "insideRight",
+              fontSize: 10
+            } : void 0
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_recharts.Tooltip,
+          {
+            formatter: (value, name) => [
+              typeof value === "number" ? value.toLocaleString("es-MX", { maximumFractionDigits: 2 }) : value,
+              name
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Legend, {}),
+        lines.map((l, idx) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.Line,
+            {
+              yAxisId: (_b = l.yAxisId) != null ? _b : "left",
+              type: "monotone",
+              dataKey: l.key,
+              name: l.name,
+              stroke: (_c = l.color) != null ? _c : idx === 0 ? "#fb7185" : "#0ea5e9",
+              strokeWidth: 2,
+              dot: false,
+              activeDot: { r: 4 }
+            },
+            (_a = l.key) != null ? _a : idx
+          );
+        })
+      ]
+    }
+  ) }) });
+}

package/dist/RechartsTimeSeriesCard.mjs

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChartCard from "./ChartCard";
+import {
+  LineChart,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend
+} from "recharts";
+const formatNumberMx = (v, opts) => {
+  const n = typeof v === "number" ? v : Number(v);
+  if (!Number.isFinite(n)) return v;
+  return n.toLocaleString("es-MX", { maximumFractionDigits: 0, ...opts });
+};
+function RechartsTimeSeriesCard({
+  title,
+  subtitle,
+  data,
+  xKey,
+  xTickFormatter,
+  leftAxisLabel,
+  rightAxisLabel,
+  lines
+}) {
+  const hasRight = lines.some((l) => {
+    var _a;
+    return ((_a = l.yAxisId) != null ? _a : "left") === "right";
+  });
+  return /* @__PURE__ */ jsx(ChartCard, { title, subtitle, children: !Array.isArray(data) || data.length === 0 ? /* @__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: "h-[260px] w-full overflow-x-auto", children: /* @__PURE__ */ jsxs(
+    LineChart,
+    {
+      width: 520,
+      height: 220,
+      data,
+      margin: { top: 10, right: 20, left: 0, bottom: 20 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#e2e8f0" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            dataKey: xKey,
+            tickFormatter: xTickFormatter,
+            tick: { fontSize: 11 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            yAxisId: "left",
+            allowDecimals: false,
+            tickFormatter: (v) => formatNumberMx(v),
+            tick: { fontSize: 11 },
+            label: leftAxisLabel ? {
+              value: leftAxisLabel,
+              angle: -90,
+              position: "insideLeft",
+              fontSize: 10
+            } : void 0
+          }
+        ),
+        hasRight && /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            yAxisId: "right",
+            orientation: "right",
+            tickFormatter: (v) => formatNumberMx(v),
+            tick: { fontSize: 11 },
+            label: rightAxisLabel ? {
+              value: rightAxisLabel,
+              angle: 90,
+              position: "insideRight",
+              fontSize: 10
+            } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            formatter: (value, name) => [
+              typeof value === "number" ? value.toLocaleString("es-MX", { maximumFractionDigits: 2 }) : value,
+              name
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Legend, {}),
+        lines.map((l, idx) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ jsx(
+            Line,
+            {
+              yAxisId: (_b = l.yAxisId) != null ? _b : "left",
+              type: "monotone",
+              dataKey: l.key,
+              name: l.name,
+              stroke: (_c = l.color) != null ? _c : idx === 0 ? "#fb7185" : "#0ea5e9",
+              strokeWidth: 2,
+              dot: false,
+              activeDot: { r: 4 }
+            },
+            (_a = l.key) != null ? _a : idx
+          );
+        })
+      ]
+    }
+  ) }) });
+}
+export {
+  RechartsTimeSeriesCard as default
+};

package/dist/SegmentedTabs.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import Button from './Button.mjs';
+
+type ButtonColor = NonNullable<React__default.ComponentProps<typeof Button>["color"]>;
+type SegmentedTabOption = {
+    value: string;
+    label: React__default.ReactNode;
+};
+type SegmentedTabsProps = {
+    value: string;
+    options: SegmentedTabOption[];
+    onChange: (value: string) => void;
+    color?: ButtonColor;
+    size?: "sm" | "md";
+    className?: string;
+};
+declare function SegmentedTabs({ value, options, onChange, color, size, className, }: SegmentedTabsProps): react_jsx_runtime.JSX.Element;
+
+export { type SegmentedTabOption, type SegmentedTabsProps, SegmentedTabs as default };

package/dist/SegmentedTabs.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import Button from './Button.js';
+
+type ButtonColor = NonNullable<React__default.ComponentProps<typeof Button>["color"]>;
+type SegmentedTabOption = {
+    value: string;
+    label: React__default.ReactNode;
+};
+type SegmentedTabsProps = {
+    value: string;
+    options: SegmentedTabOption[];
+    onChange: (value: string) => void;
+    color?: ButtonColor;
+    size?: "sm" | "md";
+    className?: string;
+};
+declare function SegmentedTabs({ value, options, onChange, color, size, className, }: SegmentedTabsProps): react_jsx_runtime.JSX.Element;
+
+export { type SegmentedTabOption, type SegmentedTabsProps, SegmentedTabs as default };

package/dist/SegmentedTabs.js

@@ -0,0 +1,73 @@
+"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 SegmentedTabs_exports = {};
+__export(SegmentedTabs_exports, {
+  default: () => SegmentedTabs
+});
+module.exports = __toCommonJS(SegmentedTabs_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_Button = __toESM(require("./Button"));
+function SegmentedTabs({
+  value,
+  options,
+  onChange,
+  color = "rose",
+  size = "md",
+  className
+}) {
+  const btnSize = size === "sm" ? "xs" : "sm";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: [
+        "inline-flex rounded-2xl border border-slate-200 bg-slate-50 p-1.5 text-sm",
+        "dark:border-white/10 dark:bg-white/5",
+        className != null ? className : ""
+      ].join(" "),
+      children: options.map((opt) => {
+        const active = value === opt.value;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Button.default,
+          {
+            size: btnSize,
+            variant: active ? "primary" : "ghost",
+            color,
+            className: "px-4 rounded-xl",
+            onClick: () => {
+              if (opt.value !== value) onChange(opt.value);
+            },
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}

package/dist/SegmentedTabs.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Button from "./Button";
+function SegmentedTabs({
+  value,
+  options,
+  onChange,
+  color = "rose",
+  size = "md",
+  className
+}) {
+  const btnSize = size === "sm" ? "xs" : "sm";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "inline-flex rounded-2xl border border-slate-200 bg-slate-50 p-1.5 text-sm",
+        "dark:border-white/10 dark:bg-white/5",
+        className != null ? className : ""
+      ].join(" "),
+      children: options.map((opt) => {
+        const active = value === opt.value;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: btnSize,
+            variant: active ? "primary" : "ghost",
+            color,
+            className: "px-4 rounded-xl",
+            onClick: () => {
+              if (opt.value !== value) onChange(opt.value);
+            },
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+export {
+  SegmentedTabs as default
+};

package/dist/index.d.mts

@@ -16,6 +16,8 @@ export { default as Pagination, PaginationProps } from './Pagination.mjs';
 export { default as InfoGrid, InfoItem } from './InfoGrid.mjs';
 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 UploadCard, UploadCardProps, UploadItem } from './UploadCard.mjs';
 export { default as MediaCard, MediaCardProps } from './MediaCard.mjs';
 export { default as MediaTile, MediaTileProps } from './MediaTile.mjs';
@@ -44,6 +46,7 @@ export { default as Link } from './Link.mjs';
 export { ToastProvider, useToast } from './Toast.mjs';
 export { default as StorageUsage, StorageUsageProps } from './StorageUsage.mjs';
 export { default as FileButton, FileButtonProps } from './FileButton.mjs';
+export { SegmentedTabOption, default as SegmentedTabs, SegmentedTabsProps } from './SegmentedTabs.mjs';
 export { a as Animations } from './animations-CHrNeawW.mjs';
 export { default as MotionProvider } from './MotionProvider.mjs';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.mjs';

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { default as Pagination, PaginationProps } from './Pagination.js';
 export { default as InfoGrid, InfoItem } from './InfoGrid.js';
 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 UploadCard, UploadCardProps, UploadItem } from './UploadCard.js';
 export { default as MediaCard, MediaCardProps } from './MediaCard.js';
 export { default as MediaTile, MediaTileProps } from './MediaTile.js';
@@ -44,6 +46,7 @@ export { default as Link } from './Link.js';
 export { ToastProvider, useToast } from './Toast.js';
 export { default as StorageUsage, StorageUsageProps } from './StorageUsage.js';
 export { default as FileButton, FileButtonProps } from './FileButton.js';
+export { SegmentedTabOption, default as SegmentedTabs, SegmentedTabsProps } from './SegmentedTabs.js';
 export { a as Animations } from './animations-CHrNeawW.js';
 export { default as MotionProvider } from './MotionProvider.js';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.js';

package/dist/index.js

@@ -69,9 +69,12 @@ __export(index_exports, {
   MultiComboSelect: () => import_MultiComboSelect.default,
   OrderButton: () => import_OrderButton.default,
   Pagination: () => import_Pagination.default,
+  RechartsBarCard: () => import_RechartsBarCard.default,
+  RechartsTimeSeriesCard: () => import_RechartsTimeSeriesCard.default,
   ReviewHistory: () => import_ReviewHistory.default,
   ReviewHistoryDialog: () => import_ReviewHistory2.ReviewHistoryDialog,
   SearchInput: () => import_SearchInput.default,
+  SegmentedTabs: () => import_SegmentedTabs.default,
   Select: () => import_Select.default,
   Sidebar: () => import_Sidebar.default,
   Skeleton: () => import_Skeleton.default,
@@ -119,6 +122,8 @@ var import_Pagination = __toESM(require("./Pagination"));
 var import_InfoGrid = __toESM(require("./InfoGrid"));
 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_UploadCard = __toESM(require("./UploadCard"));
 var import_MediaCard = __toESM(require("./MediaCard"));
 var import_MediaTile = __toESM(require("./MediaTile"));
@@ -148,6 +153,7 @@ var import_Link = __toESM(require("./Link"));
 var import_Toast = require("./Toast");
 var import_StorageUsage = __toESM(require("./StorageUsage"));
 var import_FileButton = __toESM(require("./FileButton"));
+var import_SegmentedTabs = __toESM(require("./SegmentedTabs"));
 var Animations = __toESM(require("./animations"));
 var import_MotionProvider = __toESM(require("./MotionProvider"));
 var import_CalendarPanel = __toESM(require("./CalendarPanel"));
@@ -204,9 +210,12 @@ var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
   MultiComboSelect,
   OrderButton,
   Pagination,
+  RechartsBarCard,
+  RechartsTimeSeriesCard,
   ReviewHistory,
   ReviewHistoryDialog,
   SearchInput,
+  SegmentedTabs,
   Select,
   Sidebar,
   Skeleton,

package/dist/index.mjs

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

package/package.json

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