framepexls-ui-lib 0.3.0 → 0.3.2

package/dist/iconos/index.mjs

@@ -333,20 +333,10 @@ const CloseIcon = () => {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) });
 };
 const ChevronLeftRightIcon = ({ collapsed }) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      className: `h-5 w-5 transition-transform ${collapsed ? "rotate-180" : ""}`,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M9 18l-6-6 6-6" }),
-        /* @__PURE__ */ jsx("path", { d: "M15 6l6 6-6 6" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "3", height: "16", rx: "1.5" }),
+    collapsed ? /* @__PURE__ */ jsx("path", { d: "M10 8l4 4-4 4" }) : /* @__PURE__ */ jsx("path", { d: "M14 8l-4 4 4 4" })
+  ] });
 };
 const MenuPuntosVerticalIcon = () => {
   return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "currentColor", children: [

package/dist/index.d.mts

@@ -18,6 +18,8 @@ export { default as ChartCard } from './ChartCard.mjs';
 export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.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';
+export { default as Skeleton, SkeletonBaseProps } from './Skeleton.mjs';
 export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.mjs';
 export { default as StatCard } from './StatCard.mjs';
 export { default as KpiCard, KpiCardProps } from './KpiCard.mjs';

package/dist/index.d.ts

@@ -18,6 +18,8 @@ export { default as ChartCard } from './ChartCard.js';
 export { CtrHorizontalBar, DestinoDonut, TopImpresionesBar } from './AnalyticsCharts.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';
+export { default as Skeleton, SkeletonBaseProps } from './Skeleton.js';
 export { default as MediaSelector, MediaSelectorItem, MediosAdapter } from './MediaSelector.js';
 export { default as StatCard } from './StatCard.js';
 export { default as KpiCard, KpiCardProps } from './KpiCard.js';

package/dist/index.js

@@ -61,6 +61,7 @@ __export(index_exports, {
   Link: () => import_Link.default,
   MediaCard: () => import_MediaCard.default,
   MediaSelector: () => import_MediaSelector.default,
+  MediaTile: () => import_MediaTile.default,
   Money: () => import_Money.default,
   MonthPopover: () => import_TimePopover2.MonthPopover,
   MotionProvider: () => import_MotionProvider.default,
@@ -72,6 +73,7 @@ __export(index_exports, {
   SearchInput: () => import_SearchInput.default,
   Select: () => import_Select.default,
   Sidebar: () => import_Sidebar.default,
+  Skeleton: () => import_Skeleton.default,
   SortTh: () => import_Table.SortTh,
   StatCard: () => import_StatCard.default,
   Steps: () => import_Steps.default,
@@ -118,6 +120,8 @@ var import_ChartCard = __toESM(require("./ChartCard"));
 var import_AnalyticsCharts = require("./AnalyticsCharts");
 var import_UploadCard = __toESM(require("./UploadCard"));
 var import_MediaCard = __toESM(require("./MediaCard"));
+var import_MediaTile = __toESM(require("./MediaTile"));
+var import_Skeleton = __toESM(require("./Skeleton"));
 var import_MediaSelector = __toESM(require("./MediaSelector"));
 var import_StatCard = __toESM(require("./StatCard"));
 var import_KpiCard = __toESM(require("./KpiCard"));
@@ -190,6 +194,7 @@ var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
   Link,
   MediaCard,
   MediaSelector,
+  MediaTile,
   Money,
   MonthPopover,
   MotionProvider,
@@ -201,6 +206,7 @@ var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
   SearchInput,
   Select,
   Sidebar,
+  Skeleton,
   SortTh,
   StatCard,
   Steps,

package/dist/index.mjs

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

package/dist/theme/ThemeToggle.js

@@ -44,7 +44,8 @@ function ThemeToggle({ cycle = defaultCycle, className, labels }) {
       className: [
         "inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium",
         "border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50",
-        "dark:border-white/10 dark:bg-white/10 dark:hover:bg-white/15",
+        // In dark, use the unified surface as the backplate; keep hover as a light overlay
+        "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:hover:bg-white/10",
         className != null ? className : ""
       ].join(" "),
       children: [

package/dist/theme/ThemeToggle.mjs

@@ -21,7 +21,8 @@ function ThemeToggle({ cycle = defaultCycle, className, labels }) {
       className: [
         "inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium",
         "border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50",
-        "dark:border-white/10 dark:bg-white/10 dark:hover:bg-white/15",
+        // In dark, use the unified surface as the backplate; keep hover as a light overlay
+        "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:hover:bg-white/10",
         className != null ? className : ""
       ].join(" "),
       children: [

package/package.json

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