framepexls-ui-lib 0.3.17 → 0.3.18

package/dist/KpiCard.d.mts

@@ -5,7 +5,8 @@ type KpiCardProps = {
     value: string | number;
     delta: string;
     help?: string;
+    clickable?: boolean;
 };
-declare function KpiCard({ label, value, delta, help }: KpiCardProps): react_jsx_runtime.JSX.Element;
+declare function KpiCard({ label, value, delta, help, clickable }: KpiCardProps): react_jsx_runtime.JSX.Element;
 
 export { type KpiCardProps, KpiCard as default };

package/dist/KpiCard.d.ts

@@ -5,7 +5,8 @@ type KpiCardProps = {
     value: string | number;
     delta: string;
     help?: string;
+    clickable?: boolean;
 };
-declare function KpiCard({ label, value, delta, help }: KpiCardProps): react_jsx_runtime.JSX.Element;
+declare function KpiCard({ label, value, delta, help, clickable }: KpiCardProps): react_jsx_runtime.JSX.Element;
 
 export { type KpiCardProps, KpiCard as default };

package/dist/KpiCard.js

@@ -38,22 +38,31 @@ function MotionNumber({ value, format }) {
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
 }
-function KpiCard({ label, value, delta, help }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 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", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-600 dark:text-white/80", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_framer_motion.motion.span,
-        {
-          initial: { opacity: 0, y: -4 },
-          animate: { opacity: 1, y: 0 },
-          transition: { duration: 0.2 },
-          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",
-          children: delta
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xl font-extrabold", children: typeof value === "number" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MotionNumber, { value }) : value }),
-    help && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-[12px] text-slate-500 dark:text-white/70", children: help })
-  ] });
+function KpiCard({ label, value, delta, help, clickable }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      whileHover: clickable ? { y: -2, boxShadow: "0 12px 30px rgba(15,23,42,0.18)" } : void 0,
+      whileTap: clickable ? { scale: 0.98 } : void 0,
+      transition: { type: "spring", stiffness: 260, damping: 20 },
+      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" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-600 dark:text-white/80", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_framer_motion.motion.span,
+            {
+              initial: { opacity: 0, y: -4 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.2 },
+              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",
+              children: delta
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xl font-extrabold", children: typeof value === "number" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MotionNumber, { value }) : value }),
+        help && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-[12px] text-slate-500 dark:text-white/70", children: help })
+      ]
+    }
+  );
 }

package/dist/KpiCard.mjs

@@ -15,24 +15,33 @@ function MotionNumber({ value, format }) {
   }, [value]);
   return /* @__PURE__ */ jsx("span", { children: format ? format(display) : Math.round(display).toLocaleString() });
 }
-function KpiCard({ label, value, delta, help }) {
-  return /* @__PURE__ */ jsxs("div", { 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", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-slate-600 dark:text-white/80", children: label }),
-      /* @__PURE__ */ jsx(
-        motion.span,
-        {
-          initial: { opacity: 0, y: -4 },
-          animate: { opacity: 1, y: 0 },
-          transition: { duration: 0.2 },
-          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",
-          children: delta
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-1 text-xl font-extrabold", children: typeof value === "number" ? /* @__PURE__ */ jsx(MotionNumber, { value }) : value }),
-    help && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[12px] text-slate-500 dark:text-white/70", children: help })
-  ] });
+function KpiCard({ label, value, delta, help, clickable }) {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      whileHover: clickable ? { y: -2, boxShadow: "0 12px 30px rgba(15,23,42,0.18)" } : void 0,
+      whileTap: clickable ? { scale: 0.98 } : void 0,
+      transition: { type: "spring", stiffness: 260, damping: 20 },
+      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" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-slate-600 dark:text-white/80", children: label }),
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              initial: { opacity: 0, y: -4 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.2 },
+              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",
+              children: delta
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-xl font-extrabold", children: typeof value === "number" ? /* @__PURE__ */ jsx(MotionNumber, { value }) : value }),
+        help && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[12px] text-slate-500 dark:text-white/70", children: help })
+      ]
+    }
+  );
 }
 export {
   KpiCard as default

package/dist/Table.d.mts

@@ -14,6 +14,9 @@ type SortThProps = {
     colKey?: string;
     onGripDown?: (colKey: string, e: React__default.MouseEvent<HTMLSpanElement>) => void;
 };
+declare const Table: React__default.ForwardRefExoticComponent<React__default.TableHTMLAttributes<HTMLTableElement> & {
+    dense?: boolean;
+} & React__default.RefAttributes<HTMLTableElement>>;
 declare function Th({ children, w, align, className, }: {
     children: React__default.ReactNode;
     w?: string | number;
@@ -32,4 +35,4 @@ declare function AnimatedBody({ children, className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { AnimatedBody, SortTh, Td, Th };
+export { AnimatedBody, SortTh, Td, Th, Table as default };

package/dist/Table.d.ts

@@ -14,6 +14,9 @@ type SortThProps = {
     colKey?: string;
     onGripDown?: (colKey: string, e: React__default.MouseEvent<HTMLSpanElement>) => void;
 };
+declare const Table: React__default.ForwardRefExoticComponent<React__default.TableHTMLAttributes<HTMLTableElement> & {
+    dense?: boolean;
+} & React__default.RefAttributes<HTMLTableElement>>;
 declare function Th({ children, w, align, className, }: {
     children: React__default.ReactNode;
     w?: string | number;
@@ -32,4 +35,4 @@ declare function AnimatedBody({ children, className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { AnimatedBody, SortTh, Td, Th };
+export { AnimatedBody, SortTh, Td, Th, Table as default };

package/dist/Table.js

@@ -32,7 +32,8 @@ __export(Table_exports, {
   AnimatedBody: () => AnimatedBody,
   SortTh: () => SortTh,
   Td: () => Td,
-  Th: () => Th
+  Th: () => Th,
+  default: () => Table_default
 });
 module.exports = __toCommonJS(Table_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -45,6 +46,24 @@ function useMounted() {
   import_react.default.useEffect(() => setMounted(true), []);
   return mounted;
 }
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+const Table = import_react.default.forwardRef(function Table2({ className, dense = false, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "table",
+    {
+      ref,
+      className: cx(
+        "min-w-full table-auto text-left text-[13px] sm:text-sm",
+        dense && "text-xs",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
 function Th({
   children,
   w,
@@ -175,6 +194,7 @@ function AnimatedBody({ children, className }) {
     }
   );
 }
+var Table_default = Table;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimatedBody,

package/dist/Table.mjs

@@ -9,6 +9,24 @@ function useMounted() {
   React.useEffect(() => setMounted(true), []);
   return mounted;
 }
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+const Table = React.forwardRef(function Table2({ className, dense = false, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      className: cx(
+        "min-w-full table-auto text-left text-[13px] sm:text-sm",
+        dense && "text-xs",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
 function Th({
   children,
   w,
@@ -139,9 +157,11 @@ function AnimatedBody({ children, className }) {
     }
   );
 }
+var Table_default = Table;
 export {
   AnimatedBody,
   SortTh,
   Td,
-  Th
+  Th,
+  Table_default as default
 };

package/dist/index.d.mts

@@ -11,7 +11,7 @@ export { ColumnItem, default as ColumnSelector } from './ColumnSelector.mjs';
 export { default as DateTimeField, DateTimeFieldProps } from './DateTimeField.mjs';
 export { ConfirmDialog, ConfirmDialogProps, Dialog, DialogBody, DialogField, DialogFooter, DialogHeader, DialogProps, FormDialog, FormDialogProps } from './Dialog.mjs';
 export { Content, default as Dropdown, Item, Label, Separator, Trigger } from './Dropdown.mjs';
-export { AnimatedBody, SortTh, Td, Th } from './Table.mjs';
+export { AnimatedBody, SortTh, default as Table, Td, Th } from './Table.mjs';
 export { default as Pagination, PaginationProps } from './Pagination.mjs';
 export { default as InfoGrid, InfoItem } from './InfoGrid.mjs';
 export { default as ChartCard } from './ChartCard.mjs';

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { ColumnItem, default as ColumnSelector } from './ColumnSelector.js';
 export { default as DateTimeField, DateTimeFieldProps } from './DateTimeField.js';
 export { ConfirmDialog, ConfirmDialogProps, Dialog, DialogBody, DialogField, DialogFooter, DialogHeader, DialogProps, FormDialog, FormDialogProps } from './Dialog.js';
 export { Content, default as Dropdown, Item, Label, Separator, Trigger } from './Dropdown.js';
-export { AnimatedBody, SortTh, Td, Th } from './Table.js';
+export { AnimatedBody, SortTh, default as Table, Td, Th } from './Table.js';
 export { default as Pagination, PaginationProps } from './Pagination.js';
 export { default as InfoGrid, InfoItem } from './InfoGrid.js';
 export { default as ChartCard } from './ChartCard.js';

package/dist/index.js

@@ -83,6 +83,7 @@ __export(index_exports, {
   Steps: () => import_Steps.default,
   StepsNav: () => import_Steps2.StepsNav,
   StorageUsage: () => import_StorageUsage.default,
+  Table: () => import_Table.default,
   Td: () => import_Table.Td,
   Textarea: () => import_Textarea.default,
   Th: () => import_Table.Th,
@@ -117,7 +118,7 @@ var import_Dialog = __toESM(require("./Dialog"));
 __reExport(index_exports, require("./Dialog"), module.exports);
 var import_Dropdown = __toESM(require("./Dropdown"));
 __reExport(index_exports, require("./Dropdown"), module.exports);
-var import_Table = require("./Table");
+var import_Table = __toESM(require("./Table"));
 var import_Pagination = __toESM(require("./Pagination"));
 var import_InfoGrid = __toESM(require("./InfoGrid"));
 var import_ChartCard = __toESM(require("./ChartCard"));
@@ -224,6 +225,7 @@ var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
   Steps,
   StepsNav,
   StorageUsage,
+  Table,
   Td,
   Textarea,
   Th,

package/dist/index.mjs

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

package/package.json

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