@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.750

package/dist/components/ui/dashboard-info-card.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Link from "../../embed-shims/next-link.js";
 import { cn } from "../../utils/cn.js";
 import { QuestionCircleIcon } from "../icons-v2-generated/signs-and-symbols/question-circle-icon.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { CircularProgress } from "./circular-progress.js";
 import { FloatingTooltip } from "./floating-tooltip.js";
 import { Tag } from "./tag.js";
@@ -24,13 +25,19 @@ function DashboardInfoCard({
   valueClassName,
   subValue,
   caption,
-  loading = false
+  loading = false,
+  loadingShowsPercentage = false,
+  loadingShowsSubValue = false
 }) {
   const formattedValue = typeof value === "number" ? value.toLocaleString() : value;
+  const percentageAsTag = percentageDisplay === "tag" || percentageDisplay === "auto" && (progressVariant === "warning" || progressVariant === "error");
   const renderPercentage = () => {
+    if (loading) {
+      if (!loadingShowsPercentage) return null;
+      return percentageAsTag ? /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-12 shrink-0 rounded-md" }) : /* @__PURE__ */ jsx("p", { className: "text-h4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-12 rounded" }) });
+    }
     if (percentage === void 0) return null;
-    const asTag = percentageDisplay === "tag" || percentageDisplay === "auto" && (progressVariant === "warning" || progressVariant === "error");
-    if (asTag) {
+    if (percentageAsTag) {
       const tagVariant = progressVariant === "warning" || progressVariant === "error" ? progressVariant : progressVariant === "success" ? "success" : "grey";
       return /* @__PURE__ */ jsx(Tag, { variant: tagVariant, label: `${percentage}%` });
     }
@@ -41,10 +48,10 @@ function DashboardInfoCard({
     ] });
   };
   const renderProgress = () => {
-    if (!showProgress || percentage === void 0) return null;
+    if (!showProgress || percentage === void 0 && !loading) return null;
     const strokeFor = (size2) => Math.max(2, Math.round(size2 * 10 / 56));
     const common = {
-      percentage,
+      percentage: percentage ?? 0,
       variant: progressVariant,
       overflow: progressOverflow,
       showLabel: false
@@ -68,6 +75,18 @@ function DashboardInfoCard({
     if (lg !== void 0) {
       rings.push({ key: "lg", size: lg, className: "hidden content-lg:block" });
     }
+    if (loading) {
+      return /* @__PURE__ */ jsx(Fragment, { children: rings.map((ring) => /* @__PURE__ */ jsx(
+        UnifiedSkeleton,
+        {
+          variant: "circular",
+          width: ring.size,
+          height: ring.size,
+          className: cn("shrink-0", ring.className)
+        },
+        ring.key
+      )) });
+    }
     return /* @__PURE__ */ jsx(Fragment, { children: rings.map((ring) => /* @__PURE__ */ jsx(
       CircularProgress,
       {
@@ -83,16 +102,16 @@ function DashboardInfoCard({
     icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-sm border border-ods-border bg-ods-bg p-[var(--spacing-system-xxs)] text-ods-text-primary content-md:size-14", children: /* @__PURE__ */ jsx("span", { className: "flex size-4 items-center justify-center content-md:size-6 [&>*]:size-full", children: icon }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xxs)]", children: [
-        loading ? /* @__PURE__ */ jsx("p", { className: "text-h5", children: /* @__PURE__ */ jsx("span", { className: "block h-[1lh] w-20 animate-pulse rounded bg-ods-border" }) }) : titleSlot ?? (title !== void 0 && /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-secondary text-h5", children: title })),
+        titleSlot ?? (title !== void 0 ? /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-secondary text-h5", children: title }) : loading && /* @__PURE__ */ jsx("p", { className: "text-h5", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-20 rounded" }) })),
         titleTag
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ jsx("p", { className: cn("truncate text-ods-text-primary text-h3 content-md:text-h2", valueClassName), children: loading ? /* @__PURE__ */ jsx("span", { className: "block h-[1lh] w-24 animate-pulse rounded bg-ods-border" }) : formattedValue }),
-        subValue && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: subValue }),
+        /* @__PURE__ */ jsx("p", { className: cn("truncate text-ods-text-primary text-h3 content-md:text-h2", valueClassName), children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-24 rounded" }) : formattedValue }),
+        loading ? loadingShowsSubValue && /* @__PURE__ */ jsx("p", { className: "text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-16 rounded" }) }) : subValue && /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: subValue }),
         renderPercentage(),
         tooltip && /* @__PURE__ */ jsx(FloatingTooltip, { content: tooltip, side: "top", children: /* @__PURE__ */ jsx("span", { className: "cursor-help text-ods-text-secondary", children: /* @__PURE__ */ jsx(QuestionCircleIcon, { size: 20 }) }) })
       ] }),
-      caption && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 min-h-[2lh] text-ods-text-secondary text-h6", children: loading ? /* @__PURE__ */ jsx("span", { className: "block h-[1lh] w-32 animate-pulse rounded bg-ods-border" }) : caption })
+      caption && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 min-h-[2lh] text-ods-text-secondary text-h6", children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-32 rounded" }) : caption })
     ] }),
     renderProgress()
   ] });
@@ -103,6 +122,7 @@ function DashboardInfoCard({
       Link,
       {
         href,
+        "aria-busy": loading || void 0,
         className: cn(
           baseClassName,
           captionClassName,
@@ -114,7 +134,7 @@ function DashboardInfoCard({
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { className: cn(baseClassName, captionClassName, className), children: cardContent });
+  return /* @__PURE__ */ jsx("div", { "aria-busy": loading || void 0, className: cn(baseClassName, captionClassName, className), children: cardContent });
 }
 export {
   DashboardInfoCard

package/dist/components/ui/data-attribution.d.ts

@@ -16,4 +16,10 @@ export interface DataAttributionProps {
  * same text.
  */
 export declare function DataAttribution({ icon, source, lastUpdated, action }: DataAttributionProps): import("react").JSX.Element;
+/**
+ * `DataAttribution` while its date loads: the same line (two lines below
+ * `content-sm`, one row above it) with text bars, so the line does not move
+ * when it fills in.
+ */
+export declare function DataAttributionSkeleton(): import("react").JSX.Element;
 //# sourceMappingURL=data-attribution.d.ts.map

package/dist/components/ui/data-attribution.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-attribution.d.ts","sourceRoot":"","sources":["../../../src/components/ui/data-attribution.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,oBAAoB;IACnC,yFAAyF;IACzF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,8GAA8G;IAC9G,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAcD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,oBAAoB,+BAY1F"}
+{"version":3,"file":"data-attribution.d.ts","sourceRoot":"","sources":["../../../src/components/ui/data-attribution.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,oBAAoB;IACnC,yFAAyF;IACzF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,8GAA8G;IAC9G,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAcD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,oBAAoB,+BAY1F;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,gCAUtC"}

package/dist/components/ui/data-attribution.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { formatDate } from "../../utils/format.js";
+import { TextSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 const LINE_CLASS = "flex shrink-0 flex-col gap-[var(--spacing-system-xsf)] text-ods-text-primary text-h6 content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]";
 const ITEM_CLASS = "flex items-center gap-[var(--spacing-system-xsf)]";
 function Separator() {
@@ -23,6 +24,16 @@ function DataAttribution({ icon, source, lastUpdated, action }) {
     action ? /* @__PURE__ */ jsx("div", { className: "flex content-sm:pl-[var(--spacing-system-xs)]", children: action }) : null
   ] });
 }
+function DataAttributionSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: LINE_CLASS, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs("div", { className: ITEM_CLASS, children: [
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 rounded" }),
+      /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-40" })
+    ] }),
+    /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-52" })
+  ] });
+}
 export {
-  DataAttribution
+  DataAttribution,
+  DataAttributionSkeleton
 };

package/dist/components/ui/data-table/data-table-body.d.ts

@@ -9,6 +9,11 @@ export interface DataTableBodyProps<T = unknown> {
     emptyState?: NoDataProps;
     /** Skeleton row count when loading. Default `10`. */
     skeletonRows?: number;
+    /**
+     * The loading state announces itself (`LoadingRegion`: aria-busy plus one "Loading results" status).
+     * `false` when the table sits inside a loading region of its own (a page skeleton). Default `true`.
+     */
+    loadingRegion?: boolean;
     className?: string;
     /**
      * Per-row class name. Prefer `useCallback` for function form to avoid
@@ -76,5 +81,5 @@ export interface DataTableBodyProps<T = unknown> {
  * `onRowClick` / `rowHref` / `rowClassName` (if function) with `useCallback`
  * in the consumer to get the full benefit.
  */
-export declare function DataTableBody<T = unknown>({ loading, emptyMessage, emptyState, skeletonRows, className, rowClassName, compact, rowHeightClassName, onRowClick, rowHref, minRows, renderSubRow, }: DataTableBodyProps<T>): import("react").JSX.Element;
+export declare function DataTableBody<T = unknown>({ loading, emptyMessage, emptyState, skeletonRows, loadingRegion, className, rowClassName, compact, rowHeightClassName, onRowClick, rowHref, minRows, renderSubRow, }: DataTableBodyProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=data-table-body.d.ts.map

package/dist/components/ui/data-table/data-table-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAO9C,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,OAAO;IAC7C,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC7D,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACvC;AAKD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,CAAC,GAAG,OAAO,EAAE,EACzC,OAAO,EACP,YAAY,EACZ,UAAU,EACV,YAAiB,EACjB,SAAS,EACT,YAAY,EACZ,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,CAAC,CAAC,CAAC,+BAwFvB"}
+{"version":3,"file":"data-table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAO9C,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,OAAO;IAC7C,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iGAAiG;IACjG,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC7D,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACvC;AAKD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,CAAC,GAAG,OAAO,EAAE,EACzC,OAAO,EACP,YAAY,EACZ,UAAU,EACV,YAAiB,EACjB,aAAoB,EACpB,SAAS,EACT,YAAY,EACZ,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,OAAO,EACP,YAAY,GACb,EAAE,kBAAkB,CAAC,CAAC,CAAC,+BAwFvB"}

package/dist/components/ui/data-table/data-table-body.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useSyncExternalStore } from "react";
 import { useIsomorphicLayoutEffect } from "../../../hooks/ui/use-isomorphic-layout-effect.js";
 import { cn } from "../../../utils/cn.js";
+import { LoadingRegion } from "../../loading/loading-region.js";
 import { useDataTableContext } from "./data-table.js";
 import { DataTableEmpty } from "./data-table-empty.js";
 import { useDataTableLoadMoreStore } from "./data-table-load-more.js";
@@ -14,6 +15,7 @@ function DataTableBody({
   emptyMessage,
   emptyState,
   skeletonRows = 10,
+  loadingRegion = true,
   className,
   rowClassName,
   compact,
@@ -31,7 +33,7 @@ function DataTableBody({
   useIsomorphicLayoutEffect(() => hasRows ? loadMore.registerRowsBody() : void 0, [loadMore, hasRows]);
   const skeletonRowClassName = typeof rowClassName === "string" ? rowClassName : void 0;
   if (loading && !hasRows) {
-    return /* @__PURE__ */ jsx("div", { className: cn(ROW_STACK_CLASSES, className), children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading results", announce: loadingRegion, className: cn(ROW_STACK_CLASSES, className), children: /* @__PURE__ */ jsx(
       DataTableSkeleton,
       {
         rows: skeletonRows,

package/dist/components/ui/data-table/data-table-infinite-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-infinite-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-infinite-footer.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,4BAA4B;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmCD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,YAAgB,EAChB,UAAgC,EAChC,WAAW,GACZ,EAAE,4BAA4B,+BAuF9B"}
+{"version":3,"file":"data-table-infinite-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-infinite-footer.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,4BAA4B;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmCD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,YAAgB,EAChB,UAAgC,EAChC,WAAW,GACZ,EAAE,4BAA4B,+BAwF9B"}

package/dist/components/ui/data-table/data-table-infinite-footer.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { useIsomorphicLayoutEffect } from "../../../hooks/ui/use-isomorphic-layout-effect.js";
+import { LoadingRegion } from "../../loading/loading-region.js";
 import { Button } from "../button/index.js";
 import { useOptionalDataTableContext } from "./data-table.js";
 import { useDataTableLoadMoreStore } from "./data-table-load-more.js";
@@ -67,7 +68,8 @@ function DataTableInfiniteFooter({
     return () => observer.disconnect();
   }, [hasNextPage, isFetchingNextPage, isStalled, rootMargin]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isFetchingNextPage && !bodyDrawsRows && /* @__PURE__ */ jsx("div", { className: ROW_STACK_CLASSES, children: /* @__PURE__ */ jsx(DataTableSkeleton, { rows: skeletonRows }) }),
+    isFetchingNextPage && !bodyDrawsRows && // Busy, without a second status: the footer's own one below says "Loading more results".
+    /* @__PURE__ */ jsx(LoadingRegion, { status: false, className: ROW_STACK_CLASSES, children: /* @__PURE__ */ jsx(DataTableSkeleton, { rows: skeletonRows }) }),
     isStalled && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-[var(--spacing-system-mf)]", children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onLoadMore, children: "Load more" }) }),
     /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: isFetchingNextPage ? "Loading more results" : "" }),
     hasNextPage && /* @__PURE__ */ jsx("div", { ref: sentinelRef, className: "h-1", "aria-hidden": "true" })

package/dist/components/ui/data-table/data-table-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,iCAAiC,CAAC;AACjE,eAAO,MAAM,iBAAiB,aAAa,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,8EAA8E,CAAC;AAE7G;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,yDAAyD,CAAC;AAExF,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAS,EAAE,SAAS,EAAE,YAAY,EAAE,kBAAkB,EAAE,EAAE,sBAAsB,+BAkEnH;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA0BA;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,kBAAkB,EAClB,oBAAoB,GACrB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;kFAC8E;IAC9E,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,+BAuCA"}
+{"version":3,"file":"data-table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-table/data-table-skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,iCAAiC,CAAC;AACjE,eAAO,MAAM,iBAAiB,aAAa,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,8EAA8E,CAAC;AAE7G;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,yDAAyD,CAAC;AAExF,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAS,EAAE,SAAS,EAAE,YAAY,EAAE,kBAAkB,EAAE,EAAE,sBAAsB,+BAoEnH;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA0BA;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,kBAAkB,EAClB,oBAAoB,GACrB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;kFAC8E;IAC9E,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,+BAuCA"}

package/dist/components/ui/data-table/data-table-skeleton.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
+import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 import { useDataTableContext } from "./data-table.js";
 import { getHideClasses } from "./utils.js";
 const ROW_HEIGHT_DESKTOP = "h-[66px] content-md:h-[78px]";
@@ -14,8 +15,9 @@ function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeightClassN
   return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs(
     "div",
     {
+      "aria-hidden": "true",
       className: cn(
-        "relative animate-pulse overflow-hidden rounded-md border border-ods-border bg-ods-card",
+        "relative overflow-hidden rounded-md border border-ods-border bg-ods-card",
         // The slot height sits on the card, matching a real row.
         rowHeightClassName,
         className
@@ -46,8 +48,8 @@ function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeightClassN
                     getHideClasses(meta?.hideAt)
                   ),
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "mb-[var(--spacing-system-xxs)] h-5 w-3/4 rounded-sm bg-ods-bg-surface" }),
-                    index % 2 === 0 && column.id === firstColumnId && /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 rounded-sm bg-ods-bg-surface opacity-60" })
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-[var(--spacing-system-xxs)] h-5 w-3/4 rounded-sm" }),
+                    index % 2 === 0 && column.id === firstColumnId && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-1/2 rounded-sm opacity-60" })
                   ]
                 },
                 column.id
@@ -65,8 +67,8 @@ function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeightClassN
               rowClassName
             ),
             children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center py-[var(--spacing-system-sf)]", children: [
-              /* @__PURE__ */ jsx("div", { className: "mb-[var(--spacing-system-xsf)] h-4 w-3/4 rounded-sm bg-ods-bg-surface" }),
-              /* @__PURE__ */ jsx("div", { className: "h-3 w-1/2 rounded-sm bg-ods-bg-surface opacity-60" })
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-[var(--spacing-system-xsf)] h-4 w-3/4 rounded-sm" }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2 rounded-sm opacity-60" })
             ] })
           }
         )

package/dist/components/ui/feature-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/feature-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;QAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;KAC3E,CAAC;IACF,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA+BD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,OAAW,EACX,SAAc,EAGd,aAAsE,EACtE,aAAqC,EACrC,WAAkB,EAClB,cAAsB,EACtB,OAAY,EACZ,OAAe,EACf,cAAmB,EACnB,iBAAsB,EACtB,eAAmC,GACpC,EAAE,oBAAoB,qBA8KtB"}
+{"version":3,"file":"feature-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/feature-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;QAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;KAC3E,CAAC;IACF,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA0BD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,OAAW,EACX,SAAc,EAGd,aAAsE,EACtE,aAAqC,EACrC,WAAkB,EAClB,cAAsB,EACtB,OAAY,EACZ,OAAe,EACf,cAAmB,EACnB,iBAAsB,EACtB,eAAmC,GACpC,EAAE,oBAAoB,qBAkMtB"}

package/dist/components/ui/feature-card.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Card } from "./card.js";
 import { StatusBadge } from "./status-badge.js";
 const GRID_COLUMNS = {
@@ -18,9 +19,6 @@ function fourColumnBorders(index, count) {
   classes.push(Math.floor(index / 4) < lgRows - 1 ? "content-lg:border-b" : "content-lg:border-b-0");
   return ` ${classes.join(" ")}`;
 }
-function LineBar({ width }) {
-  return /* @__PURE__ */ jsx("span", { className: `block h-[1lh] ${width} animate-pulse rounded bg-ods-border` });
-}
 function FeatureCardGrid({
   items,
   columns = 3,
@@ -120,15 +118,15 @@ function FeatureCardGrid({
                 item.media ? /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--spacing-system-lf)]", children: [
                   /* @__PURE__ */ jsx("div", { className: "shrink-0", children: item.media }),
                   /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xsf)]", children: [
-                    item.eyebrow && /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h5", children: loading ? /* @__PURE__ */ jsx(LineBar, { width: "w-6" }) : item.eyebrow }),
-                    /* @__PURE__ */ jsx("h3", { className: `text-ods-text-primary text-h2 ${titleClassName}`, children: loading ? /* @__PURE__ */ jsx(LineBar, { width: "w-1/2" }) : item.title }),
-                    item.subtitle && /* @__PURE__ */ jsx("p", { className: `text-h4 ${accentClassName} ${subtitleClassName}`, children: loading ? /* @__PURE__ */ jsx(LineBar, { width: "w-3/4" }) : item.subtitle }),
+                    item.eyebrow && /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h5", children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-6 rounded" }) : item.eyebrow }),
+                    /* @__PURE__ */ jsx("h3", { className: `text-ods-text-primary text-h2 ${titleClassName}`, children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-1/2 rounded" }) : item.title }),
+                    item.subtitle && /* @__PURE__ */ jsx("p", { className: `text-h4 ${accentClassName} ${subtitleClassName}`, children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-3/4 rounded" }) : item.subtitle }),
                     item.content
                   ] })
                 ] }) : item.eyebrow || item.subtitle ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xsf)]", children: [
-                  item.eyebrow && /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h5", children: loading ? /* @__PURE__ */ jsx(LineBar, { width: "w-6" }) : item.eyebrow }),
-                  /* @__PURE__ */ jsx("h3", { className: `whitespace-pre-line text-ods-text-primary text-h2 ${titleClassName}`, children: loading ? /* @__PURE__ */ jsx(LineBar, { width: "w-1/2" }) : item.title }),
-                  item.subtitle && /* @__PURE__ */ jsx("p", { className: `text-h4 ${accentClassName} ${subtitleClassName}`, children: loading ? /* @__PURE__ */ jsx(LineBar, { width: "w-3/4" }) : item.subtitle })
+                  item.eyebrow && /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h5", children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-6 rounded" }) : item.eyebrow }),
+                  /* @__PURE__ */ jsx("h3", { className: `whitespace-pre-line text-ods-text-primary text-h2 ${titleClassName}`, children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-1/2 rounded" }) : item.title }),
+                  item.subtitle && /* @__PURE__ */ jsx("p", { className: `text-h4 ${accentClassName} ${subtitleClassName}`, children: loading ? /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: "block h-[1lh] w-3/4 rounded" }) : item.subtitle })
                 ] }) : /* @__PURE__ */ jsx("h3", { className: "whitespace-pre-line text-ods-text-primary text-h2", children: item.title }),
                 !item.media && item.content,
                 item.footer && /* @__PURE__ */ jsx("div", { className: "mt-auto", children: item.footer })

package/dist/components/ui/file-manager/file-manager-skeleton.d.ts

@@ -1,8 +1,10 @@
 interface FileManagerSkeletonProps {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
     rows?: number;
     showSearch?: boolean;
     showActions?: boolean;
 }
-export declare function FileManagerSkeleton({ rows, showSearch, showActions }: FileManagerSkeletonProps): import("react").JSX.Element;
+export declare function FileManagerSkeleton({ region, rows, showSearch, showActions, }: FileManagerSkeletonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=file-manager-skeleton.d.ts.map

package/dist/components/ui/file-manager/file-manager-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-manager-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/file-manager/file-manager-skeleton.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAQ,EAAE,UAAiB,EAAE,WAAkB,EAAE,EAAE,wBAAwB,+BA2FhH"}
+{"version":3,"file":"file-manager-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/file-manager/file-manager-skeleton.tsx"],"names":[],"mappings":"AAKA,UAAU,wBAAwB;IAChC,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAa,EACb,IAAQ,EACR,UAAiB,EACjB,WAAkB,GACnB,EAAE,wBAAwB,+BA2F1B"}

package/dist/components/ui/file-manager/file-manager-skeleton.js

@@ -1,44 +1,50 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Skeleton } from "../skeleton.js";
-function FileManagerSkeleton({ rows = 8, showSearch = true, showActions = true }) {
+import { LoadingRegion } from "../../loading/loading-region.js";
+import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+function FileManagerSkeleton({
+  region = true,
+  rows = 8,
+  showSearch = true,
+  showActions = true
+}) {
   const rowPlaceholders = Array.from({ length: rows });
-  return /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col bg-ods-bg", children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col space-y-6 py-6", children: [
+  return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading files", announce: region, className: "flex h-full flex-col bg-ods-bg", children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col space-y-6 py-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-12" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-full" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-20" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-full" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-24" })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-12" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-4 rounded-full" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-20" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-4 rounded-full" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-24" })
       ] }),
       showActions && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-20" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-20" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-28" })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-9 w-24" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-9 w-20" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-9 w-20" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-9 w-28" })
       ] })
     ] }),
-    showSearch && /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full rounded-lg" }),
+    showSearch && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-full rounded-lg" }),
     /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col rounded-lg border border-ods-border bg-ods-bg", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "mr-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5 rounded" }) }),
+        /* @__PURE__ */ jsx("div", { className: "mr-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-5 rounded" }) }),
         /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-3 text-ods-text-secondary text-h5", children: "NAME" }),
         /* @__PURE__ */ jsx("div", { className: "w-24 shrink-0 pr-4 text-ods-text-secondary text-h5", children: "SIZE" }),
         /* @__PURE__ */ jsx("div", { className: "w-36 shrink-0 pl-4 text-ods-text-secondary text-h5", children: "EDITED" }),
         /* @__PURE__ */ jsx("div", { className: "flex w-48 shrink-0 justify-end pl-4" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 divide-y divide-ods-border overflow-auto rounded-b-lg", children: rowPlaceholders.map((_, idx) => /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center border-ods-border bg-ods-card px-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "mr-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5 rounded" }) }),
+        /* @__PURE__ */ jsx("div", { className: "mr-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-5 rounded" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-6 rounded" }),
-          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }) })
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-6 rounded" }),
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-32" }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "w-24 shrink-0 pr-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-36 shrink-0 pl-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-24 shrink-0 pr-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16" }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-36 shrink-0 pl-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-24" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex w-48 shrink-0 items-center justify-end gap-1 pl-4", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded" })
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded" }),
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded" })
         ] })
       ] }, idx)) })
     ] }) })

package/dist/components/ui/file-manager/file-manager-table.js

@@ -2,8 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../../../utils/cn.js";
+import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 import { Checkbox } from "../checkbox.js";
-import { Skeleton } from "../skeleton.js";
 import { FileManagerEmpty } from "./file-manager-empty.js";
 import { FileManagerTableRow } from "./file-manager-table-row.js";
 function FileManagerTable({
@@ -60,26 +60,26 @@ function FileManagerTable({
     const skeletonRows = 8;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col rounded-lg border border-ods-border bg-ods-bg", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4", children: [
-        showCheckboxes && /* @__PURE__ */ jsx("div", { className: "mr-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5 rounded" }) }),
+        showCheckboxes && /* @__PURE__ */ jsx("div", { className: "mr-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-5 rounded" }) }),
         /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-3 text-ods-text-secondary text-h5", children: "NAME" }),
         /* @__PURE__ */ jsx("div", { className: "w-24 shrink-0 pr-4 text-ods-text-secondary text-h5", children: "SIZE" }),
         /* @__PURE__ */ jsx("div", { className: "w-36 shrink-0 pl-4 text-ods-text-secondary text-h5", children: "EDITED" }),
         /* @__PURE__ */ jsx("div", { className: "flex w-48 shrink-0 justify-end pl-4" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex-1 divide-y divide-ods-border overflow-auto rounded-b-lg", children: Array.from({ length: skeletonRows }).map((_, idx) => /* @__PURE__ */ jsxs("div", { className: "group flex h-16 items-center border-ods-border bg-ods-card px-4", children: [
-        showCheckboxes && /* @__PURE__ */ jsx("div", { className: "mr-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5 rounded" }) }),
+        showCheckboxes && /* @__PURE__ */ jsx("div", { className: "mr-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-5 rounded" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-6 rounded" }),
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-6 rounded" }),
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
-            isSearchResult && /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-3 w-48" })
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-32" }),
+            isSearchResult && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mt-1 h-3 w-48" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "w-24 shrink-0 pr-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-36 shrink-0 pl-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-24 shrink-0 pr-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16" }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-36 shrink-0 pl-4", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-24" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex w-48 shrink-0 items-center justify-end gap-1 pl-4", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded" })
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded" }),
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded" })
         ] })
       ] }, idx)) })
     ] });