@almadar/ui 5.122.2 → 5.122.3

package/dist/avl/index.cjs

@@ -14735,7 +14735,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/avl/index.js

@@ -14689,7 +14689,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/components/index.cjs

@@ -6847,7 +6847,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/components/index.d.cts

@@ -6389,7 +6389,7 @@ interface DataGridProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataGrid {
     var displayName: string;
 }
@@ -6516,7 +6516,7 @@ interface DataListProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataList {
     var displayName: string;
 }

package/dist/components/index.d.ts

@@ -6389,7 +6389,7 @@ interface DataGridProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataGrid {
     var displayName: string;
 }
@@ -6516,7 +6516,7 @@ interface DataListProps extends DataDndProps {
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataList {
     var displayName: string;
 }

package/dist/components/index.js

@@ -6802,7 +6802,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/providers/index.cjs

@@ -11259,7 +11259,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/providers/index.js

@@ -11214,7 +11214,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/runtime/index.cjs

@@ -11327,7 +11327,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/runtime/index.js

@@ -11283,7 +11283,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.122.2",
+  "version": "5.122.3",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [

package/tailwind-preset.cjs

@@ -385,6 +385,10 @@ module.exports = {
             transform: 'var(--motion-modal-enter-to-transform, translateZ(0))',
           },
         },
+        shimmer: {
+          '0%': { backgroundPosition: '200% 0' },
+          '100%': { backgroundPosition: '-200% 0' },
+        },
         'modal-out': {
           '0%': {
             opacity: 'var(--motion-modal-exit-from-opacity, 1)',
@@ -506,7 +510,7 @@ module.exports = {
         // Motion-token-driven durations/easings (fall back to legacy
         // --transition-* so themes that haven't migrated keep working).
         'modal-in': 'modal-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
-        'modal-out': 'modal-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'modal-out': 'modal-out var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'overlay-in': 'overlay-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'overlay-out': 'overlay-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'slide-up': 'slide-up var(--duration-slow, var(--transition-slow, 400ms)) var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1))',
@@ -520,6 +524,7 @@ module.exports = {
         'fade-out': 'fade-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'page-in': 'page-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'page-out': 'page-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'shimmer': 'shimmer var(--duration-shimmer, 1.5s) var(--easing-linear, linear) infinite',
       },
       // Density-axis spacing scale. Tailwind's default `p-3` / `gap-4` resolve
       // here so existing classes keep working — but now read from tokens.

package/themes/_base.css

@@ -162,7 +162,7 @@
     --motion-modal-exit-from-opacity: 1;
     --motion-modal-exit-from-transform: translateZ(0);
     --motion-modal-exit-to-opacity: 0;
-    --motion-modal-exit-to-transform: scale(0.96) translateY(8px);
+    --motion-modal-exit-to-transform: scale(0.92) translateY(16px);
 
     --motion-slide-up-from-opacity: 0;
     --motion-slide-up-from-transform: translateY(16px);
@@ -214,6 +214,28 @@
     --motion-page-exit-from-transform: translateZ(0);
     --motion-page-exit-to-opacity: 0;
     --motion-page-exit-to-transform: translateY(-8px);
+
+    /* ----------------------------------------------------------------
+     * Skeleton shimmer — the loading-placeholder sweep. Two color stops
+     * (base + highlight) drive the gradient; --duration-shimmer the loop.
+     * Override per theme to restyle the placeholder tone.
+     * ---------------------------------------------------------------- */
+    --skeleton-base: var(--color-muted, rgba(128, 128, 128, 0.18));
+    --skeleton-highlight: var(--color-surface, rgba(255, 255, 255, 0.55));
+    --duration-shimmer: 1.5s;
+}
+
+/* The shimmer gradient background. Pair with the `animate-shimmer` utility
+ * (defined in tailwind-preset) which sweeps background-position. */
+.almadar-shimmer {
+    background-image: linear-gradient(
+        90deg,
+        var(--skeleton-base) 0%,
+        var(--skeleton-highlight) 50%,
+        var(--skeleton-base) 100%
+    );
+    background-size: 200% 100%;
+    background-repeat: no-repeat;
 }
 
 /* ----------------------------------------------------------------