framepexls-ui-lib 1.15.0 → 2.0.0

package/dist/Button.js

@@ -87,7 +87,7 @@ const Button = import_react.default.forwardRef(({
     stone: "bg-stone-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-stone-500",
     red: "bg-red-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-red-500",
     orange: "bg-orange-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-orange-500",
-    amber: "bg-amber-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-amber-500",
+    amber: "bg-amber-600 text-slate-950 hover:opacity-90 active:scale-[.98] dark:bg-amber-500 dark:text-slate-950",
     yellow: "bg-yellow-500 text-slate-900 hover:opacity-95 active:scale-[.98] dark:bg-yellow-400",
     lime: "bg-lime-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-lime-500",
     green: "bg-green-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-green-500",

package/dist/Button.mjs

@@ -54,7 +54,7 @@ const Button = React.forwardRef(({
     stone: "bg-stone-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-stone-500",
     red: "bg-red-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-red-500",
     orange: "bg-orange-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-orange-500",
-    amber: "bg-amber-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-amber-500",
+    amber: "bg-amber-600 text-slate-950 hover:opacity-90 active:scale-[.98] dark:bg-amber-500 dark:text-slate-950",
     yellow: "bg-yellow-500 text-slate-900 hover:opacity-95 active:scale-[.98] dark:bg-yellow-400",
     lime: "bg-lime-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-lime-500",
     green: "bg-green-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-green-500",

package/dist/DataTable.d.mts

@@ -54,6 +54,8 @@ type Props<Row, K extends string> = {
     columns: Array<DataTableColumn<Row, K, any>>;
     getRowId: (row: Row) => string;
     className?: string;
+    ariaLabel?: string;
+    loading?: boolean;
     dense?: boolean;
     stickyHeader?: boolean;
     striped?: boolean;
@@ -90,6 +92,6 @@ type Props<Row, K extends string> = {
         previous: unknown;
     }) => void;
 };
-declare function DataTable<Row, K extends string>({ rows, columns, getRowId, className, dense, stickyHeader, striped, hoverable, empty, resizableColumns, persistKey, animateSort, quickEdit, edicionRapida, rowClassName, sort, defaultSort, onSortChange, manualSort, onRowsChange, onCellCommit, onCellError, }: Props<Row, K>): react_jsx_runtime.JSX.Element;
+declare function DataTable<Row, K extends string>({ rows, columns, getRowId, className, ariaLabel, loading, dense, stickyHeader, striped, hoverable, empty, resizableColumns, persistKey, animateSort, quickEdit, edicionRapida, rowClassName, sort, defaultSort, onSortChange, manualSort, onRowsChange, onCellCommit, onCellError, }: Props<Row, K>): react_jsx_runtime.JSX.Element;
 
 export { type DataTableColumn, type DataTableEditorArgs, type DataTableSort, DataTable as default };

package/dist/DataTable.d.ts

@@ -54,6 +54,8 @@ type Props<Row, K extends string> = {
     columns: Array<DataTableColumn<Row, K, any>>;
     getRowId: (row: Row) => string;
     className?: string;
+    ariaLabel?: string;
+    loading?: boolean;
     dense?: boolean;
     stickyHeader?: boolean;
     striped?: boolean;
@@ -90,6 +92,6 @@ type Props<Row, K extends string> = {
         previous: unknown;
     }) => void;
 };
-declare function DataTable<Row, K extends string>({ rows, columns, getRowId, className, dense, stickyHeader, striped, hoverable, empty, resizableColumns, persistKey, animateSort, quickEdit, edicionRapida, rowClassName, sort, defaultSort, onSortChange, manualSort, onRowsChange, onCellCommit, onCellError, }: Props<Row, K>): react_jsx_runtime.JSX.Element;
+declare function DataTable<Row, K extends string>({ rows, columns, getRowId, className, ariaLabel, loading, dense, stickyHeader, striped, hoverable, empty, resizableColumns, persistKey, animateSort, quickEdit, edicionRapida, rowClassName, sort, defaultSort, onSortChange, manualSort, onRowsChange, onCellCommit, onCellError, }: Props<Row, K>): react_jsx_runtime.JSX.Element;
 
 export { type DataTableColumn, type DataTableEditorArgs, type DataTableSort, DataTable as default };

package/dist/DataTable.js

@@ -113,6 +113,8 @@ function DataTable({
   columns,
   getRowId,
   className,
+  ariaLabel,
+  loading = false,
   dense = false,
   stickyHeader = false,
   striped = false,
@@ -226,6 +228,7 @@ function DataTable({
     return withIdx.map((x) => x.row);
   }, [activeSort, collator, columns, localRows]);
   const displayRows = manualSort ? localRows : sortedRows;
+  const emptyState = loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-[var(--muted)]", children: "Cargando..." }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-8", children: empty != null ? empty : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-[var(--muted)]", children: "Sin resultados." }) });
   const resizingRef = import_react.default.useRef(null);
   const onGripDown = (colKey, e) => {
     var _a2, _b2, _c2, _d;
@@ -594,7 +597,7 @@ function DataTable({
     );
   }) });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Table.default, { dense, className: cx(resizableColumns ? "table-fixed" : "table-auto"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Table.default, { "aria-label": ariaLabel, dense, className: cx(resizableColumns ? "table-fixed" : "table-auto"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("colgroup", { children: columns.map((c) => {
         const rawW = typeof widths[c.key] === "number" ? widths[c.key] : c.width;
         const w = typeof rawW === "number" ? Math.round(clampColumnWidth(c, rawW)) : rawW;
@@ -616,7 +619,7 @@ function DataTable({
           children: headerRow
         }
       ),
-      animateSort ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.AnimatedBody, { children: displayRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.Td, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-8", children: empty != null ? empty : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-[var(--muted)]", children: "Sin resultados." }) }) }) }) : displayRows.map((row, idx) => {
+      animateSort ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.AnimatedBody, { children: displayRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.Td, { colSpan: columns.length, children: emptyState }) }) : displayRows.map((row, idx) => {
         var _a2;
         const rowId = getRowId(row);
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -634,7 +637,7 @@ function DataTable({
           },
           rowId
         );
-      }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: displayRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.Td, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-8", children: empty != null ? empty : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-[var(--muted)]", children: "Sin resultados." }) }) }) }) : displayRows.map((row, idx) => {
+      }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: displayRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.Td, { colSpan: columns.length, children: emptyState }) }) : displayRows.map((row, idx) => {
         var _a2;
         const rowId = getRowId(row);
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/DataTable.mjs

@@ -80,6 +80,8 @@ function DataTable({
   columns,
   getRowId,
   className,
+  ariaLabel,
+  loading = false,
   dense = false,
   stickyHeader = false,
   striped = false,
@@ -193,6 +195,7 @@ function DataTable({
     return withIdx.map((x) => x.row);
   }, [activeSort, collator, columns, localRows]);
   const displayRows = manualSort ? localRows : sortedRows;
+  const emptyState = loading ? /* @__PURE__ */ jsx("div", { className: "p-8", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--muted)]", children: "Cargando..." }) }) : /* @__PURE__ */ jsx("div", { className: "p-8", children: empty != null ? empty : /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--muted)]", children: "Sin resultados." }) });
   const resizingRef = React.useRef(null);
   const onGripDown = (colKey, e) => {
     var _a2, _b2, _c2, _d;
@@ -561,7 +564,7 @@ function DataTable({
     );
   }) });
   return /* @__PURE__ */ jsxs("div", { className: cx("w-full", className), children: [
-    /* @__PURE__ */ jsxs(Table, { dense, className: cx(resizableColumns ? "table-fixed" : "table-auto"), children: [
+    /* @__PURE__ */ jsxs(Table, { "aria-label": ariaLabel, dense, className: cx(resizableColumns ? "table-fixed" : "table-auto"), children: [
       /* @__PURE__ */ jsx("colgroup", { children: columns.map((c) => {
         const rawW = typeof widths[c.key] === "number" ? widths[c.key] : c.width;
         const w = typeof rawW === "number" ? Math.round(clampColumnWidth(c, rawW)) : rawW;
@@ -583,7 +586,7 @@ function DataTable({
           children: headerRow
         }
       ),
-      animateSort ? /* @__PURE__ */ jsx(AnimatedBody, { children: displayRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(Td, { colSpan: columns.length, children: /* @__PURE__ */ jsx("div", { className: "p-8", children: empty != null ? empty : /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--muted)]", children: "Sin resultados." }) }) }) }) : displayRows.map((row, idx) => {
+      animateSort ? /* @__PURE__ */ jsx(AnimatedBody, { children: displayRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(Td, { colSpan: columns.length, children: emptyState }) }) : displayRows.map((row, idx) => {
         var _a2;
         const rowId = getRowId(row);
         return /* @__PURE__ */ jsx(
@@ -601,7 +604,7 @@ function DataTable({
           },
           rowId
         );
-      }) }) : /* @__PURE__ */ jsx("tbody", { children: displayRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(Td, { colSpan: columns.length, children: /* @__PURE__ */ jsx("div", { className: "p-8", children: empty != null ? empty : /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--muted)]", children: "Sin resultados." }) }) }) }) : displayRows.map((row, idx) => {
+      }) }) : /* @__PURE__ */ jsx("tbody", { children: displayRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(Td, { colSpan: columns.length, children: emptyState }) }) : displayRows.map((row, idx) => {
         var _a2;
         const rowId = getRowId(row);
         return /* @__PURE__ */ jsx(

package/dist/PageScaffold.d.mts

@@ -76,12 +76,13 @@ type PageScaffoldProps = {
     loading?: boolean;
     loadingMinDurationMs?: number;
     loadingBody?: React__default.ReactNode;
+    loadingBehavior?: "auto" | "full" | "content";
     empty?: boolean;
     emptyState?: React__default.ReactElement | EmptyStateProps | string | number;
     emptyStateContainer?: "card" | "none";
     className?: string;
     children?: React__default.ReactNode;
 };
-declare function PageScaffold({ tools, backgroundImage, backgroundMode, backgroundImageOpacity, backgroundImageBlur, backgroundImageClassName, breadcrumb, kpis, kpiClassName, kpiColumnsClassName, search, filters, sort, columns, tabs, actions, primaryAction, top, belowToolbar, loading, loadingMinDurationMs, loadingBody, empty, emptyState, emptyStateContainer, className, children, }: PageScaffoldProps): react_jsx_runtime.JSX.Element;
+declare function PageScaffold({ tools, backgroundImage, backgroundMode, backgroundImageOpacity, backgroundImageBlur, backgroundImageClassName, breadcrumb, kpis, kpiClassName, kpiColumnsClassName, search, filters, sort, columns, tabs, actions, primaryAction, top, belowToolbar, loading, loadingMinDurationMs, loadingBody, loadingBehavior, empty, emptyState, emptyStateContainer, className, children, }: PageScaffoldProps): react_jsx_runtime.JSX.Element;
 
 export { type PageKpi, type PageKpiItem, type PageScaffoldPrimaryAction, type PageScaffoldProps, type PageScaffoldSearch, PageScaffold as default };

package/dist/PageScaffold.d.ts

@@ -76,12 +76,13 @@ type PageScaffoldProps = {
     loading?: boolean;
     loadingMinDurationMs?: number;
     loadingBody?: React__default.ReactNode;
+    loadingBehavior?: "auto" | "full" | "content";
     empty?: boolean;
     emptyState?: React__default.ReactElement | EmptyStateProps | string | number;
     emptyStateContainer?: "card" | "none";
     className?: string;
     children?: React__default.ReactNode;
 };
-declare function PageScaffold({ tools, backgroundImage, backgroundMode, backgroundImageOpacity, backgroundImageBlur, backgroundImageClassName, breadcrumb, kpis, kpiClassName, kpiColumnsClassName, search, filters, sort, columns, tabs, actions, primaryAction, top, belowToolbar, loading, loadingMinDurationMs, loadingBody, empty, emptyState, emptyStateContainer, className, children, }: PageScaffoldProps): react_jsx_runtime.JSX.Element;
+declare function PageScaffold({ tools, backgroundImage, backgroundMode, backgroundImageOpacity, backgroundImageBlur, backgroundImageClassName, breadcrumb, kpis, kpiClassName, kpiColumnsClassName, search, filters, sort, columns, tabs, actions, primaryAction, top, belowToolbar, loading, loadingMinDurationMs, loadingBody, loadingBehavior, empty, emptyState, emptyStateContainer, className, children, }: PageScaffoldProps): react_jsx_runtime.JSX.Element;
 
 export { type PageKpi, type PageKpiItem, type PageScaffoldPrimaryAction, type PageScaffoldProps, type PageScaffoldSearch, PageScaffold as default };

package/dist/PageScaffold.js

@@ -68,6 +68,7 @@ function PageScaffold({
   loading = false,
   loadingMinDurationMs = import_skeleton.DEFAULT_SKELETON_MIN_DURATION_MS,
   loadingBody,
+  loadingBehavior = "auto",
   empty = false,
   emptyState,
   emptyStateContainer = "card",
@@ -76,10 +77,13 @@ function PageScaffold({
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E;
   const showLoading = (0, import_skeleton.useMinVisible)(Boolean(loading), loadingMinDurationMs);
+  const resolvedLoadingBehavior = loadingBehavior === "auto" ? search ? "content" : "full" : loadingBehavior;
+  const showFullLoading = showLoading && resolvedLoadingBehavior === "full";
+  const showContentLoading = showLoading && resolvedLoadingBehavior === "content";
   const [mounted, setMounted] = import_react.default.useState(false);
   import_react.default.useEffect(() => setMounted(true), []);
   const primaryActionShortcut = (_a = primaryAction == null ? void 0 : primaryAction.shortcut) == null ? void 0 : _a.trim();
-  const primaryActionDisabled = Boolean(primaryAction == null ? void 0 : primaryAction.disabled) || Boolean(primaryAction == null ? void 0 : primaryAction.loading) || showLoading;
+  const primaryActionDisabled = Boolean(primaryAction == null ? void 0 : primaryAction.disabled) || Boolean(primaryAction == null ? void 0 : primaryAction.loading) || showFullLoading;
   const primaryActionOnClick = primaryAction == null ? void 0 : primaryAction.onClick;
   import_react.default.useEffect(() => {
     if (!primaryActionShortcut) return;
@@ -109,21 +113,21 @@ function PageScaffold({
     search && ((_g = tools == null ? void 0 : tools.search) != null ? _g : true) || filters && ((_h = tools == null ? void 0 : tools.filters) != null ? _h : true) || sort && ((_i = tools == null ? void 0 : tools.sort) != null ? _i : true) || columns && ((_j = tools == null ? void 0 : tools.columns) != null ? _j : true) || tabs && ((_k = tools == null ? void 0 : tools.tabs) != null ? _k : true) || primaryAction && ((_l = tools == null ? void 0 : tools.primaryAction) != null ? _l : true) || actions && ((_m = tools == null ? void 0 : tools.actions) != null ? _m : true)
   );
   const filtersProps = (_n = filters == null ? void 0 : filters.props) != null ? _n : {};
-  const showEmptyState = Boolean(empty) && !showLoading && ((_o = tools == null ? void 0 : tools.emptyState) != null ? _o : true);
+  const showEmptyState = Boolean(empty) && !showFullLoading && !showContentLoading && ((_o = tools == null ? void 0 : tools.emptyState) != null ? _o : true);
   const resolvedEmptyState = import_react.default.useMemo(() => {
     if (!emptyState) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyState.default, {});
     if (import_react.default.isValidElement(emptyState)) return emptyState;
     if (typeof emptyState === "string" || typeof emptyState === "number") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyState.default, { title: emptyState });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EmptyState.default, { ...emptyState });
   }, [emptyState]);
-  const toolbarActions = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+  const toolbarActions = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full flex-col items-stretch gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-end [&>*]:w-full sm:[&>*]:w-auto", children: [
     primaryAction && ((_p = tools == null ? void 0 : tools.primaryAction) != null ? _p : true) ? primaryAction.tooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: primaryAction.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Button.default,
       {
         variant: (_q = primaryAction.variant) != null ? _q : "primary",
         size: (_r = primaryAction.size) != null ? _r : "md",
-        disabled: primaryAction.disabled || showLoading,
-        loading: Boolean(primaryAction.loading) || showLoading,
+        disabled: primaryAction.disabled || showFullLoading,
+        loading: Boolean(primaryAction.loading) || showFullLoading,
         id: primaryAction.id,
         "data-tour": primaryAction.dataTour,
         onClick: () => primaryAction.onClick(),
@@ -134,8 +138,8 @@ function PageScaffold({
       {
         variant: (_s = primaryAction.variant) != null ? _s : "primary",
         size: (_t = primaryAction.size) != null ? _t : "md",
-        disabled: primaryAction.disabled || showLoading,
-        loading: Boolean(primaryAction.loading) || showLoading,
+        disabled: primaryAction.disabled || showFullLoading,
+        loading: Boolean(primaryAction.loading) || showFullLoading,
         id: primaryAction.id,
         "data-tour": primaryAction.dataTour,
         onClick: () => primaryAction.onClick(),
@@ -144,14 +148,14 @@ function PageScaffold({
     ) : null,
     ((_u = tools == null ? void 0 : tools.actions) != null ? _u : true) ? actions : null
   ] });
-  const toolbarControls = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+  const toolbarControls = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full flex-col items-stretch gap-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
     filters && ((_v = tools == null ? void 0 : tools.filters) != null ? _v : true) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_FiltersMultiSelect.default,
       {
         groups: filters.groups,
         ...filtersProps,
-        disabled: filtersProps.disabled || showLoading,
-        loading: filtersProps.loading || showLoading
+        disabled: filtersProps.disabled || showFullLoading,
+        loading: filtersProps.loading || showFullLoading
       }
     ) : null,
     ((_w = tools == null ? void 0 : tools.sort) != null ? _w : true) ? sort : null,
@@ -198,7 +202,7 @@ function PageScaffold({
         items: breadcrumb.items,
         ...(_z = breadcrumb == null ? void 0 : breadcrumb.props) != null ? _z : {},
         className: cx("px-1", (_A = breadcrumb == null ? void 0 : breadcrumb.props) == null ? void 0 : _A.className),
-        loading: Boolean((_B = breadcrumb == null ? void 0 : breadcrumb.props) == null ? void 0 : _B.loading) || showLoading,
+        loading: Boolean((_B = breadcrumb == null ? void 0 : breadcrumb.props) == null ? void 0 : _B.loading) || showFullLoading,
         loadingMinDurationMs: (_D = (_C = breadcrumb == null ? void 0 : breadcrumb.props) == null ? void 0 : _C.loadingMinDurationMs) != null ? _D : loadingMinDurationMs
       }
     ) : null,
@@ -206,7 +210,7 @@ function PageScaffold({
     showKpis ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: kpiColumnsClassName, children: kpiItems.map((kpi, i) => {
       var _a2, _b2;
       if (import_react.default.isValidElement(kpi)) return import_react.default.cloneElement(kpi, { key: (_a2 = kpi.key) != null ? _a2 : i });
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Card.default, { className: cx("p-4", kpiClassName), loading: showLoading, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Card.default, { className: cx("p-4", kpiClassName), loading: showFullLoading || showContentLoading, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--muted)]", children: kpi.label }),
           kpi.badge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: (_b2 = kpi.badgeTone) != null ? _b2 : "slate", children: kpi.badge }) : null
@@ -215,7 +219,7 @@ function PageScaffold({
         kpi.helper ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-[var(--muted)]", children: kpi.helper }) : null
       ] }, i);
     }) }) : null,
-    showToolbar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Card.default, { className: "p-4", loading: showLoading, children: search && ((_E = tools == null ? void 0 : tools.search) != null ? _E : true) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
+    showToolbar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Card.default, { className: "p-4", loading: showFullLoading, children: search && ((_E = tools == null ? void 0 : tools.search) != null ? _E : true) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_SearchInput.default,
@@ -224,21 +228,27 @@ function PageScaffold({
             value: search.value,
             onChange: search.onChange,
             placeholder: search.placeholder,
-            disabled: search.disabled || showLoading
+            disabled: showFullLoading || (showContentLoading ? false : Boolean(search.disabled))
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: toolbarActions })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full lg:w-auto", children: toolbarActions })
       ] }),
-      filters || sort || columns || tabs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap items-center justify-between gap-2", children: toolbarControls }) : null
+      filters || sort || columns || tabs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: toolbarControls }) : null
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
       toolbarControls,
       toolbarActions
     ] }) }) : null,
     belowToolbar,
-    showLoading ? loadingBody != null ? loadingBody : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Card.default, { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { height: 12, width: "38%", borderRadius: 10 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { height: 12, width: "72%", borderRadius: 10 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { height: 260, width: "100%", borderRadius: 18 } })
+    showFullLoading || showContentLoading ? loadingBody != null ? loadingBody : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Card.default, { className: "overflow-hidden p-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4 p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { height: 14, width: "26%", borderRadius: 10 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-3", children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "fx-skeleton",
+          style: { height: 56, width: "100%", borderRadius: 16 }
+        },
+        index
+      )) })
     ] }) }) : showEmptyState ? emptyStateContainer === "card" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Card.default, { className: "p-6", children: resolvedEmptyState }) : resolvedEmptyState : children
   ] });
 }

package/dist/PageScaffold.mjs

@@ -35,6 +35,7 @@ function PageScaffold({
   loading = false,
   loadingMinDurationMs = DEFAULT_SKELETON_MIN_DURATION_MS,
   loadingBody,
+  loadingBehavior = "auto",
   empty = false,
   emptyState,
   emptyStateContainer = "card",
@@ -43,10 +44,13 @@ function PageScaffold({
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E;
   const showLoading = useMinVisible(Boolean(loading), loadingMinDurationMs);
+  const resolvedLoadingBehavior = loadingBehavior === "auto" ? search ? "content" : "full" : loadingBehavior;
+  const showFullLoading = showLoading && resolvedLoadingBehavior === "full";
+  const showContentLoading = showLoading && resolvedLoadingBehavior === "content";
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
   const primaryActionShortcut = (_a = primaryAction == null ? void 0 : primaryAction.shortcut) == null ? void 0 : _a.trim();
-  const primaryActionDisabled = Boolean(primaryAction == null ? void 0 : primaryAction.disabled) || Boolean(primaryAction == null ? void 0 : primaryAction.loading) || showLoading;
+  const primaryActionDisabled = Boolean(primaryAction == null ? void 0 : primaryAction.disabled) || Boolean(primaryAction == null ? void 0 : primaryAction.loading) || showFullLoading;
   const primaryActionOnClick = primaryAction == null ? void 0 : primaryAction.onClick;
   React.useEffect(() => {
     if (!primaryActionShortcut) return;
@@ -76,21 +80,21 @@ function PageScaffold({
     search && ((_g = tools == null ? void 0 : tools.search) != null ? _g : true) || filters && ((_h = tools == null ? void 0 : tools.filters) != null ? _h : true) || sort && ((_i = tools == null ? void 0 : tools.sort) != null ? _i : true) || columns && ((_j = tools == null ? void 0 : tools.columns) != null ? _j : true) || tabs && ((_k = tools == null ? void 0 : tools.tabs) != null ? _k : true) || primaryAction && ((_l = tools == null ? void 0 : tools.primaryAction) != null ? _l : true) || actions && ((_m = tools == null ? void 0 : tools.actions) != null ? _m : true)
   );
   const filtersProps = (_n = filters == null ? void 0 : filters.props) != null ? _n : {};
-  const showEmptyState = Boolean(empty) && !showLoading && ((_o = tools == null ? void 0 : tools.emptyState) != null ? _o : true);
+  const showEmptyState = Boolean(empty) && !showFullLoading && !showContentLoading && ((_o = tools == null ? void 0 : tools.emptyState) != null ? _o : true);
   const resolvedEmptyState = React.useMemo(() => {
     if (!emptyState) return /* @__PURE__ */ jsx(EmptyState, {});
     if (React.isValidElement(emptyState)) return emptyState;
     if (typeof emptyState === "string" || typeof emptyState === "number") return /* @__PURE__ */ jsx(EmptyState, { title: emptyState });
     return /* @__PURE__ */ jsx(EmptyState, { ...emptyState });
   }, [emptyState]);
-  const toolbarActions = /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+  const toolbarActions = /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-stretch gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-end [&>*]:w-full sm:[&>*]:w-auto", children: [
     primaryAction && ((_p = tools == null ? void 0 : tools.primaryAction) != null ? _p : true) ? primaryAction.tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: primaryAction.tooltip, children: /* @__PURE__ */ jsx(
       Button,
       {
         variant: (_q = primaryAction.variant) != null ? _q : "primary",
         size: (_r = primaryAction.size) != null ? _r : "md",
-        disabled: primaryAction.disabled || showLoading,
-        loading: Boolean(primaryAction.loading) || showLoading,
+        disabled: primaryAction.disabled || showFullLoading,
+        loading: Boolean(primaryAction.loading) || showFullLoading,
         id: primaryAction.id,
         "data-tour": primaryAction.dataTour,
         onClick: () => primaryAction.onClick(),
@@ -101,8 +105,8 @@ function PageScaffold({
       {
         variant: (_s = primaryAction.variant) != null ? _s : "primary",
         size: (_t = primaryAction.size) != null ? _t : "md",
-        disabled: primaryAction.disabled || showLoading,
-        loading: Boolean(primaryAction.loading) || showLoading,
+        disabled: primaryAction.disabled || showFullLoading,
+        loading: Boolean(primaryAction.loading) || showFullLoading,
         id: primaryAction.id,
         "data-tour": primaryAction.dataTour,
         onClick: () => primaryAction.onClick(),
@@ -111,14 +115,14 @@ function PageScaffold({
     ) : null,
     ((_u = tools == null ? void 0 : tools.actions) != null ? _u : true) ? actions : null
   ] });
-  const toolbarControls = /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+  const toolbarControls = /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-stretch gap-2 sm:flex-row sm:flex-wrap sm:items-center", children: [
     filters && ((_v = tools == null ? void 0 : tools.filters) != null ? _v : true) ? /* @__PURE__ */ jsx(
       FiltersMultiSelect,
       {
         groups: filters.groups,
         ...filtersProps,
-        disabled: filtersProps.disabled || showLoading,
-        loading: filtersProps.loading || showLoading
+        disabled: filtersProps.disabled || showFullLoading,
+        loading: filtersProps.loading || showFullLoading
       }
     ) : null,
     ((_w = tools == null ? void 0 : tools.sort) != null ? _w : true) ? sort : null,
@@ -165,7 +169,7 @@ function PageScaffold({
         items: breadcrumb.items,
         ...(_z = breadcrumb == null ? void 0 : breadcrumb.props) != null ? _z : {},
         className: cx("px-1", (_A = breadcrumb == null ? void 0 : breadcrumb.props) == null ? void 0 : _A.className),
-        loading: Boolean((_B = breadcrumb == null ? void 0 : breadcrumb.props) == null ? void 0 : _B.loading) || showLoading,
+        loading: Boolean((_B = breadcrumb == null ? void 0 : breadcrumb.props) == null ? void 0 : _B.loading) || showFullLoading,
         loadingMinDurationMs: (_D = (_C = breadcrumb == null ? void 0 : breadcrumb.props) == null ? void 0 : _C.loadingMinDurationMs) != null ? _D : loadingMinDurationMs
       }
     ) : null,
@@ -173,7 +177,7 @@ function PageScaffold({
     showKpis ? /* @__PURE__ */ jsx("div", { className: kpiColumnsClassName, children: kpiItems.map((kpi, i) => {
       var _a2, _b2;
       if (React.isValidElement(kpi)) return React.cloneElement(kpi, { key: (_a2 = kpi.key) != null ? _a2 : i });
-      return /* @__PURE__ */ jsxs(Card, { className: cx("p-4", kpiClassName), loading: showLoading, children: [
+      return /* @__PURE__ */ jsxs(Card, { className: cx("p-4", kpiClassName), loading: showFullLoading || showContentLoading, children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--muted)]", children: kpi.label }),
           kpi.badge ? /* @__PURE__ */ jsx(Badge, { tone: (_b2 = kpi.badgeTone) != null ? _b2 : "slate", children: kpi.badge }) : null
@@ -182,7 +186,7 @@ function PageScaffold({
         kpi.helper ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-[var(--muted)]", children: kpi.helper }) : null
       ] }, i);
     }) }) : null,
-    showToolbar ? /* @__PURE__ */ jsx(Card, { className: "p-4", loading: showLoading, children: search && ((_E = tools == null ? void 0 : tools.search) != null ? _E : true) ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    showToolbar ? /* @__PURE__ */ jsx(Card, { className: "p-4", loading: showFullLoading, children: search && ((_E = tools == null ? void 0 : tools.search) != null ? _E : true) ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
         /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
           SearchInput,
@@ -191,21 +195,27 @@ function PageScaffold({
             value: search.value,
             onChange: search.onChange,
             placeholder: search.placeholder,
-            disabled: search.disabled || showLoading
+            disabled: showFullLoading || (showContentLoading ? false : Boolean(search.disabled))
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: toolbarActions })
+        /* @__PURE__ */ jsx("div", { className: "w-full lg:w-auto", children: toolbarActions })
       ] }),
-      filters || sort || columns || tabs ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-between gap-2", children: toolbarControls }) : null
+      filters || sort || columns || tabs ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: toolbarControls }) : null
     ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
       toolbarControls,
       toolbarActions
     ] }) }) : null,
     belowToolbar,
-    showLoading ? loadingBody != null ? loadingBody : /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { height: 12, width: "38%", borderRadius: 10 } }),
-      /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { height: 12, width: "72%", borderRadius: 10 } }),
-      /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { height: 260, width: "100%", borderRadius: 18 } })
+    showFullLoading || showContentLoading ? loadingBody != null ? loadingBody : /* @__PURE__ */ jsx(Card, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { height: 14, width: "26%", borderRadius: 10 } }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fx-skeleton",
+          style: { height: 56, width: "100%", borderRadius: 16 }
+        },
+        index
+      )) })
     ] }) }) : showEmptyState ? emptyStateContainer === "card" ? /* @__PURE__ */ jsx(Card, { className: "p-6", children: resolvedEmptyState }) : resolvedEmptyState : children
   ] });
 }

package/dist/Sidebar.js

@@ -577,7 +577,8 @@ function Sidebar({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-[var(--border)] bg-[var(--bg)] px-3 shadow-sm xl:hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", className: "h-14 xl:hidden" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "fixed inset-x-0 top-0 z-40 flex h-14 items-center gap-2 border-b border-[var(--border)] bg-[var(--bg)] px-3 shadow-sm xl:hidden", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Button.default,
         {
@@ -2145,10 +2146,10 @@ function SidebarInner({
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_framer_motion.motion.div,
               {
-                initial: { opacity: 0, x: -6 },
-                animate: { opacity: 1, x: 0 },
-                exit: { opacity: 0, x: -6 },
-                transition: { duration: 0.16, ease: "easeOut" },
+                initial: { opacity: 0, x: -10, filter: "blur(6px)" },
+                animate: { opacity: 1, x: 0, filter: "blur(0px)" },
+                exit: { opacity: 0, x: -14, filter: "blur(8px)" },
+                transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
                 className: "leading-tight",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight text-left", children: brandTitle }),

package/dist/Sidebar.mjs

@@ -556,7 +556,8 @@ function Sidebar({
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-40 flex h-14 items-center gap-2 border-b border-[var(--border)] bg-[var(--bg)] px-3 shadow-sm xl:hidden", children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-14 xl:hidden" }),
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-x-0 top-0 z-40 flex h-14 items-center gap-2 border-b border-[var(--border)] bg-[var(--bg)] px-3 shadow-sm xl:hidden", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -2124,10 +2125,10 @@ function SidebarInner({
             /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
               motion.div,
               {
-                initial: { opacity: 0, x: -6 },
-                animate: { opacity: 1, x: 0 },
-                exit: { opacity: 0, x: -6 },
-                transition: { duration: 0.16, ease: "easeOut" },
+                initial: { opacity: 0, x: -10, filter: "blur(6px)" },
+                animate: { opacity: 1, x: 0, filter: "blur(0px)" },
+                exit: { opacity: 0, x: -14, filter: "blur(8px)" },
+                transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
                 className: "leading-tight",
                 children: [
                   /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight text-left", children: brandTitle }),

package/dist/StatCard.d.mts

@@ -5,10 +5,45 @@ type Spark = {
     values: number[];
     color?: string;
 };
+type StatCardComparisonPeriod = "day" | "week" | "month" | "quarter" | "year";
+type StatCardComparisonTrend = "up" | "down" | "flat" | "auto";
+type StatCardComparison = {
+    value: number;
+    period?: StatCardComparisonPeriod;
+    trend?: StatCardComparisonTrend;
+    label?: React__default.ReactNode;
+    locale?: "en" | "es";
+    precision?: number;
+    suffix?: string;
+    showSign?: boolean;
+    positiveIsGood?: boolean;
+    formatter?: (value: number) => React__default.ReactNode;
+};
+type StatCardMenuItem = {
+    label: React__default.ReactNode;
+    onSelect?: () => void;
+    icon?: React__default.ReactNode;
+    kbd?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    require?: string | string[];
+    hideIfUnauthorized?: boolean;
+    disableIfUnauthorized?: boolean;
+};
+type StatCardMenu = {
+    label?: React__default.ReactNode;
+    items: StatCardMenuItem[];
+    align?: "start" | "end";
+    contentClassName?: string;
+    maxHeight?: number;
+    triggerAriaLabel?: string;
+};
 type StatCardProps = {
     title: string;
     value: React__default.ReactNode;
     hint?: string;
+    comparison?: StatCardComparison;
+    menu?: StatCardMenu;
     spark?: Spark;
     loading?: boolean;
     loadingMinDurationMs?: number;
@@ -19,6 +54,6 @@ type StatCardProps = {
         withSpark?: boolean;
     };
 };
-declare function StatCard({ title, value, hint, spark, loading, loadingMinDurationMs, skeleton }: StatCardProps): react_jsx_runtime.JSX.Element;
+declare function StatCard({ title, value, hint, comparison, menu, spark, loading, loadingMinDurationMs, skeleton }: StatCardProps): react_jsx_runtime.JSX.Element;
 
-export { type StatCardProps, StatCard as default };
+export { type StatCardComparison, type StatCardComparisonPeriod, type StatCardComparisonTrend, type StatCardMenu, type StatCardMenuItem, type StatCardProps, StatCard as default };