@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/dist/components/ui/people-cell.js

@@ -6,7 +6,7 @@ import { AvatarStack } from "./avatar-stack.js";
 import { Button } from "./button/index.js";
 import { FloatingTooltip } from "./floating-tooltip.js";
 import { useLoadingScope } from "./loading-scope.js";
-import { SquareAvatar, SquareAvatarSkeleton } from "./square-avatar.js";
+import { SquareAvatar } from "./square-avatar.js";
 import { TruncateText } from "./truncate-text.js";
 const PERSON_CELL_SIZE = {
   sm: { avatar: "sm", gap: "gap-3", primary: "h6" },
@@ -20,9 +20,10 @@ function PersonCell({
   fallbackName = "Unassigned",
   onClick,
   actionTitle,
-  size = "sm"
+  size = "sm",
+  loading
 }) {
-  if (useLoadingScope()) return /* @__PURE__ */ jsx(PersonCellSkeleton, { size });
+  if (useLoadingScope() || loading) return /* @__PURE__ */ jsx(PersonCellSkeleton, { size });
   const displayName = name || fallbackName;
   const scale = PERSON_CELL_SIZE[size];
   const row = /* @__PURE__ */ jsxs("div", { className: `group/person-cell ${PERSON_ROW_CLASS} ${scale.gap}`, children: [
@@ -54,7 +55,7 @@ function PersonCell({
 function PersonCellSkeleton({ size = "sm" }) {
   const scale = PERSON_CELL_SIZE[size];
   return /* @__PURE__ */ jsxs("div", { className: `${PERSON_ROW_CLASS} ${scale.gap}`, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx(SquareAvatarSkeleton, { size: scale.avatar }),
+    /* @__PURE__ */ jsx(SquareAvatar, { loading: true, size: scale.avatar }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx(TextLineSkeleton, { type: scale.primary, className: "w-3/4" }),
       /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-1/2" })
@@ -94,6 +95,5 @@ function PeopleCell({ people, fallbackName = "Unassigned" }) {
 }
 export {
   PeopleCell,
-  PersonCell,
-  PersonCellSkeleton
+  PersonCell
 };

package/dist/components/ui/product-screen-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-screen-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-screen-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAC;AAO9F,gGAAgG;AAChG,eAAO,MAAM,2BAA2B,MAA8B,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,MAA0B,CAAC;AAErE,iGAAiG;AACjG,eAAO,MAAM,yBAAyB,KAA0B,CAAC;AAKjE,MAAM,WAAW,uBAAuB;IACtC,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAqB,EACrB,WAAyC,EACzC,SAAqC,EACrC,IAAW,EACX,SAAS,GACV,EAAE,uBAAuB,+BA6EzB"}
+{"version":3,"file":"product-screen-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-screen-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAC;AAO9F,gGAAgG;AAChG,eAAO,MAAM,2BAA2B,MAA8B,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,MAA0B,CAAC;AAErE,iGAAiG;AACjG,eAAO,MAAM,yBAAyB,KAA0B,CAAC;AAKjE,MAAM,WAAW,uBAAuB;IACtC,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAqB,EACrB,WAAyC,EACzC,SAAqC,EACrC,IAAW,EACX,SAAS,GACV,EAAE,uBAAuB,+BAuFzB"}

package/dist/components/ui/product-screen-frame.js

@@ -39,7 +39,11 @@ function ProductScreenFrame({
     observer.observe(element);
     return () => observer.disconnect();
   }, [designWidth, scaleFrom]);
-  const screenStyle = mode === "scaled" ? {
+  const pending = mode === "pending";
+  const screenStyle = pending ? {
+    "--product-screen-design-width": `${designWidth}px`,
+    "--product-screen-scale-from": `${scaleFrom}px`
+  } : mode === "scaled" ? {
     width: designWidth,
     // The crop is in frame pixels, so the unscaled box is taller by the same factor.
     height: `calc(100% / var(${SCALE_VAR}))`,
@@ -57,13 +61,22 @@ function ProductScreenFrame({
       role: "img",
       "aria-label": label,
       "data-app-type": appType,
-      className: cn("relative overflow-hidden", className),
+      className: cn("product-screen-frame relative overflow-hidden", className),
       style: { height },
       children: [
-        /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: portalHost, children: /* @__PURE__ */ jsx(CollisionBoundaryContext.Provider, { value: frame, children: /* @__PURE__ */ jsxs("div", { inert: true, "aria-hidden": true, className: "ods-content-area", style: screenStyle, children: [
-          /* @__PURE__ */ jsx("div", { className: "ods-content-scope", children: mode === "pending" ? /* @__PURE__ */ jsx(LoadingScope, { bare: true, children: /* @__PURE__ */ jsx(PagePicture, { children }) }) : /* @__PURE__ */ jsx(PagePicture, { children }) }),
-          /* @__PURE__ */ jsx("div", { ref: setPortalHost, style: { display: "contents" } })
-        ] }) }) }),
+        /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: portalHost, children: /* @__PURE__ */ jsx(CollisionBoundaryContext.Provider, { value: frame, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            inert: true,
+            "aria-hidden": true,
+            className: cn("ods-content-area", pending && "product-screen-pending"),
+            style: screenStyle,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "ods-content-scope", children: /* @__PURE__ */ jsx(LoadingScope, { bare: true, active: pending, children: /* @__PURE__ */ jsx(PagePicture, { children }) }) }),
+              /* @__PURE__ */ jsx("div", { ref: setPortalHost, style: { display: "contents" } })
+            ]
+          }
+        ) }) }),
         fade && /* @__PURE__ */ jsx(
           "div",
           {

package/dist/components/ui/progress-bar.d.ts

@@ -4,10 +4,6 @@ export declare const PROGRESS_BAR_HEIGHT: {
     readonly mobile: 8;
     readonly desktop: 24;
 };
-/** The bar while its value is read: one box at the bar's own height, switched at the bar's own step. */
-export declare function ProgressBarSkeleton({ className }: {
-    className?: string;
-}): React.JSX.Element;
 type ProgressBarProps = {
     progress: number;
     warningThreshold?: number;
@@ -18,6 +14,9 @@ type ProgressBarProps = {
     height?: number;
     mobileHeight?: number;
     inverted?: boolean;
+    /** The value is still being read: the bar draws its `ProgressBarSkeleton` at its own height. A loading scope does
+     *  the same. */
+    loading?: boolean;
 };
 export declare const ProgressBar: React.FC<ProgressBarProps>;
 export {};

package/dist/components/ui/progress-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,kHAAkH;AAClH,eAAO,MAAM,mBAAmB;;;CAAsC,CAAC;AAIvE,wGAAwG;AACxG,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAExE;AAED,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgFlD,CAAC"}
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,kHAAkH;AAClH,eAAO,MAAM,mBAAmB;;;CAAsC,CAAC;AASvE,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;oBACgB;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsFlD,CAAC"}

package/dist/components/ui/progress-bar.js

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { useContentMdUp } from "../../hooks/ui/use-content-breakpoint.js";
 import { cn } from "../../utils/cn.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
 const PROGRESS_BAR_HEIGHT = { mobile: 8, desktop: 24 };
 const PROGRESS_BAR_HEIGHT_CLASS = "h-2 content-md:h-6";
 function ProgressBarSkeleton({ className }) {
@@ -18,8 +19,10 @@ const ProgressBar = ({
   segmentGap = 2,
   height = PROGRESS_BAR_HEIGHT.desktop,
   mobileHeight = PROGRESS_BAR_HEIGHT.mobile,
-  inverted = false
+  inverted = false,
+  loading: loadingProp
 }) => {
+  const loading = useLoadingScope() || !!loadingProp;
   const isMdUp = useContentMdUp() ?? true;
   const effectiveSegmentWidth = isMdUp ? segmentWidth : mobileSegmentWidth;
   const effectiveHeight = isMdUp ? height : mobileHeight;
@@ -36,7 +39,8 @@ const ProgressBar = ({
     });
     resizeObserver.observe(containerRef.current);
     return () => resizeObserver.disconnect();
-  }, [effectiveSegmentWidth, segmentGap]);
+  }, [effectiveSegmentWidth, segmentGap, loading]);
+  if (loading) return /* @__PURE__ */ jsx(ProgressBarSkeleton, {});
   const getColor = () => {
     if (inverted) {
       if (progress >= criticalThreshold) return "var(--color-success)";
@@ -75,6 +79,5 @@ const ProgressBar = ({
 };
 export {
   PROGRESS_BAR_HEIGHT,
-  ProgressBar,
-  ProgressBarSkeleton
+  ProgressBar
 };

package/dist/components/ui/query-report-table/index.d.ts

@@ -1,7 +1,6 @@
 export { QueryReportTable } from './query-report-table';
 export { QueryReportTableHeader } from './query-report-table-header';
 export { QueryReportTableRow } from './query-report-table-row';
-export { QueryReportTableSkeleton } from './query-report-table-skeleton';
 export { deriveColumns, exportToCSV } from './utils';
-export type { QueryReportTableProps, QueryReportTableHeaderProps, QueryReportTableRowProps, QueryReportTableSkeletonProps, QueryResultRow, } from './types';
+export type { QueryReportTableProps, QueryReportTableHeaderProps, QueryReportTableRowProps, QueryResultRow, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/query-report-table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAErD,YAAY,EACV,qBAAqB,EACrB,2BAA2B,EAC3B,wBAAwB,EACxB,6BAA6B,EAC7B,cAAc,GACf,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAErD,YAAY,EACV,qBAAqB,EACrB,2BAA2B,EAC3B,wBAAwB,EACxB,cAAc,GACf,MAAM,SAAS,CAAC"}

package/dist/components/ui/query-report-table/index.js

@@ -1,13 +1,11 @@
 import { QueryReportTable } from "./query-report-table.js";
 import { QueryReportTableHeader } from "./query-report-table-header.js";
 import { QueryReportTableRow } from "./query-report-table-row.js";
-import { QueryReportTableSkeleton } from "./query-report-table-skeleton.js";
 import { deriveColumns, exportToCSV } from "./utils.js";
 export {
   QueryReportTable,
   QueryReportTableHeader,
   QueryReportTableRow,
-  QueryReportTableSkeleton,
   deriveColumns,
   exportToCSV
 };

package/dist/components/ui/query-report-table/query-report-table-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-report-table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table-header.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,WAAW,EACX,OAAmB,EACnB,SAAS,GACV,EAAE,2BAA2B,+BAU7B"}
+{"version":3,"file":"query-report-table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table-header.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,WAAW,EACX,OAAmB,EACnB,SAAS,GACV,EAAE,2BAA2B,+BAU7B"}

package/dist/components/ui/query-report-table/query-report-table-header.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useCallback } from "react";
 import { cn } from "../../../utils/cn.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip.js";
+import { QUERY_REPORT_HEADER_CELL_CLASS, queryReportHeaderClass } from "./query-report-table-row.js";
 function QueryReportTableHeader({
   columns,
   columnWidth,
@@ -10,7 +11,7 @@ function QueryReportTableHeader({
   className
 }) {
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4 px-4", isCompact ? "border-b border-ods-border py-2" : "", className), children: columns.map((column) => /* @__PURE__ */ jsx(TruncatedHeaderCell, { value: column, width: columnWidth }, column)) });
+  return /* @__PURE__ */ jsx("div", { className: cn(queryReportHeaderClass(isCompact), className), children: columns.map((column) => /* @__PURE__ */ jsx(TruncatedHeaderCell, { value: column, width: columnWidth }, column)) });
 }
 function TruncatedHeaderCell({ value, width }) {
   const textRef = useRef(null);
@@ -22,7 +23,7 @@ function TruncatedHeaderCell({ value, width }) {
     }
   }, []);
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Tooltip, { open: isTruncated ? void 0 : false, children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onMouseEnter: checkTruncation, children: /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", style: { width, height: 48 }, children: /* @__PURE__ */ jsx("div", { ref: textRef, className: "truncate text-ods-text-secondary text-h5", children: value }) }) }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onMouseEnter: checkTruncation, children: /* @__PURE__ */ jsx("div", { className: QUERY_REPORT_HEADER_CELL_CLASS, style: { width }, children: /* @__PURE__ */ jsx("div", { ref: textRef, className: "truncate text-ods-text-secondary text-h5", children: value }) }) }),
     /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", className: "max-w-xs break-words", children: value })
   ] }) });
 }

package/dist/components/ui/query-report-table/query-report-table-row.d.ts

@@ -1,3 +1,17 @@
 import type { QueryReportTableRowProps } from './types';
-export declare function QueryReportTableRow({ row, columns, columnWidth, variant, className, }: QueryReportTableRowProps): import("react").JSX.Element;
+/**
+ * The report's row boxes, loaded and loading, from the data table's row class set (`data-table-row-classes`): the
+ * default row is the data table's card, shell and height; a compact row a divided 56px line in the same shell.
+ */
+export declare const queryReportRowFrameClass: (compact: boolean) => string;
+export declare const queryReportRowCellsClass: (compact: boolean) => string;
+/** The header's row: the rows' shell, so each header cell sits over its column. */
+export declare const queryReportHeaderClass: (compact: boolean) => string;
+/** One header cell's box (48px high), loaded and loading. */
+export declare const QUERY_REPORT_HEADER_CELL_CLASS = "flex h-12 shrink-0 items-center";
+/** The rows' stack and the gap between rows, loaded and loading. */
+export declare const queryReportRowsClass: (compact: boolean) => string;
+/** One cell's box, loaded and loading. */
+export declare const QUERY_REPORT_CELL_CLASS = "flex shrink-0 flex-col justify-center overflow-hidden";
+export declare function QueryReportTableRow({ row, columns, columnWidth, variant, className, ...props }: QueryReportTableRowProps): import("react").JSX.Element;
 //# sourceMappingURL=query-report-table-row.d.ts.map

package/dist/components/ui/query-report-table/query-report-table-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-report-table-row.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table-row.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,OAAO,EACP,WAAW,EACX,OAAmB,EACnB,SAAS,GACV,EAAE,wBAAwB,+BAgC1B"}
+{"version":3,"file":"query-report-table-row.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table-row.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GAAI,SAAS,OAAO,WAC4B,CAAC;AACtF,eAAO,MAAM,wBAAwB,GAAI,SAAS,OAAO,WACiB,CAAC;AAC3E,mFAAmF;AACnF,eAAO,MAAM,sBAAsB,GAAI,SAAS,OAAO,WACsB,CAAC;AAC9E,6DAA6D;AAC7D,eAAO,MAAM,8BAA8B,oCAAoC,CAAC;AAChF,oEAAoE;AACpE,eAAO,MAAM,oBAAoB,GAAI,SAAS,OAAO,WACsB,CAAC;AAC5E,0CAA0C;AAC1C,eAAO,MAAM,uBAAuB,0DAA0D,CAAC;AAE/F,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,OAAO,EACP,WAAW,EACX,OAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAyB1B"}

package/dist/components/ui/query-report-table/query-report-table-row.js

@@ -2,40 +2,43 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useCallback } from "react";
 import { cn } from "../../../utils/cn.js";
+import {
+  DATA_TABLE_ROW_FRAME_CLASS,
+  ROW_HEIGHT_DESKTOP,
+  ROW_SHELL_CLASSES
+} from "../data-table/data-table-row-classes.js";
+import { loadingItemProps } from "../loading-scope.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip.js";
+const queryReportRowFrameClass = (compact) => compact ? "border-b border-ods-border" : cn("relative", DATA_TABLE_ROW_FRAME_CLASS);
+const queryReportRowCellsClass = (compact) => cn("flex", ROW_SHELL_CLASSES, compact ? "h-[56px]" : ROW_HEIGHT_DESKTOP);
+const queryReportHeaderClass = (compact) => cn("flex", ROW_SHELL_CLASSES, compact && "border-b border-ods-border py-2");
+const QUERY_REPORT_HEADER_CELL_CLASS = "flex h-12 shrink-0 items-center";
+const queryReportRowsClass = (compact) => cn("flex flex-col", compact ? "gap-0" : "gap-[var(--spacing-system-xs)]");
+const QUERY_REPORT_CELL_CLASS = "flex shrink-0 flex-col justify-center overflow-hidden";
 function QueryReportTableRow({
   row,
   columns,
   columnWidth,
   variant = "default",
-  className
+  className,
+  ...props
 }) {
   const isCompact = variant === "compact";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
-        isCompact ? "border-b border-ods-border" : "relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card",
-        className
-      ),
-      children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4 px-4", isCompact ? "h-[56px]" : "h-[80px]"), children: columns.map((column) => {
+      ...loadingItemProps(props),
+      className: cn(queryReportRowFrameClass(isCompact), className),
+      children: /* @__PURE__ */ jsx("div", { className: queryReportRowCellsClass(isCompact), children: columns.map((column) => {
         const value = row[column];
         const displayValue = value === null || value === void 0 ? "-" : String(value);
-        return /* @__PURE__ */ jsx(
-          "div",
+        return /* @__PURE__ */ jsx("div", { className: QUERY_REPORT_CELL_CLASS, style: { width: columnWidth }, children: /* @__PURE__ */ jsx(
+          TruncatedCell,
           {
-            className: "flex shrink-0 flex-col justify-center overflow-hidden",
-            style: { width: columnWidth },
-            children: /* @__PURE__ */ jsx(
-              TruncatedCell,
-              {
-                className: cn("text-ods-text-primary", isCompact ? "text-h6" : "text-h4"),
-                value: displayValue
-              }
-            )
-          },
-          column
-        );
+            className: cn("text-ods-text-primary", isCompact ? "text-h6" : "text-h4"),
+            value: displayValue
+          }
+        ) }, column);
       }) })
     }
   );
@@ -55,5 +58,11 @@ function TruncatedCell({ value, className }) {
   ] }) });
 }
 export {
-  QueryReportTableRow
+  QUERY_REPORT_CELL_CLASS,
+  QUERY_REPORT_HEADER_CELL_CLASS,
+  QueryReportTableRow,
+  queryReportHeaderClass,
+  queryReportRowCellsClass,
+  queryReportRowFrameClass,
+  queryReportRowsClass
 };

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

@@ -1 +1 @@
-{"version":3,"file":"query-report-table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table-skeleton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAE7D,wBAAgB,wBAAwB,CAAC,EACvC,MAAa,EACb,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAmB,EACnB,SAAS,GACV,EAAE,6BAA6B,+BA0C/B"}
+{"version":3,"file":"query-report-table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table-skeleton.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAE7D,wBAAgB,wBAAwB,CAAC,EACvC,MAAa,EACb,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAmB,EACnB,SAAS,GACV,EAAE,6BAA6B,+BAwC/B"}

package/dist/components/ui/query-report-table/query-report-table-skeleton.js

@@ -2,7 +2,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
 import { LoadingRegion } from "../../loading/loading-region.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
+import { LoadingItems } from "../loading-scope.js";
+import {
+  QUERY_REPORT_CELL_CLASS,
+  QUERY_REPORT_HEADER_CELL_CLASS,
+  queryReportHeaderClass,
+  queryReportRowCellsClass,
+  queryReportRowFrameClass,
+  queryReportRowsClass
+} from "./query-report-table-row.js";
 function QueryReportTableSkeleton({
   region = true,
   rows,
@@ -12,33 +21,16 @@ function QueryReportTableSkeleton({
   className
 }) {
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxs(
-    LoadingRegion,
-    {
-      label: "Loading results",
-      announce: region,
-      className: cn("flex flex-col", isCompact ? "gap-0" : "gap-[var(--spacing-system-xs)]", className),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4 px-4", isCompact ? "border-b border-ods-border py-2" : ""), children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", style: { width: columnWidth, height: 48 }, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded" }) }, `header-${i}`)) }),
-        Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              isCompact ? "border-b border-ods-border" : "relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card"
-            ),
-            children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4 px-4", isCompact ? "h-[56px]" : "h-[80px]"), children: Array.from({ length: columns }).map((_cell, colIndex) => /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: columnWidth }, children: /* @__PURE__ */ jsx(
-              UnifiedSkeleton,
-              {
-                className: cn("rounded", isCompact ? "h-4" : "h-5"),
-                width: `${55 + rowIndex * colIndex * 7 % 35}%`
-              }
-            ) }, `cell-${rowIndex}-${colIndex}`)) })
-          },
-          `row-${rowIndex}`
-        ))
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading results", announce: region, className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx("div", { className: queryReportHeaderClass(isCompact), children: /* @__PURE__ */ jsx(LoadingItems, { count: columns, children: () => /* @__PURE__ */ jsx("div", { className: QUERY_REPORT_HEADER_CELL_CLASS, style: { width: columnWidth }, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h5", className: "w-3/4" }) }) }) }),
+    /* @__PURE__ */ jsx("div", { className: queryReportRowsClass(isCompact), children: /* @__PURE__ */ jsx(LoadingItems, { count: rows, children: (rowIndex) => /* @__PURE__ */ jsx("div", { "data-loading-item": true, className: queryReportRowFrameClass(isCompact), children: /* @__PURE__ */ jsx("div", { className: queryReportRowCellsClass(isCompact), children: /* @__PURE__ */ jsx(LoadingItems, { count: columns, children: (colIndex) => /* @__PURE__ */ jsx("div", { className: QUERY_REPORT_CELL_CLASS, style: { width: columnWidth }, children: /* @__PURE__ */ jsx(
+      TextLineSkeleton,
+      {
+        type: isCompact ? "h6" : "h4",
+        width: `${55 + rowIndex * colIndex * 7 % 35}%`
+      }
+    ) }) }) }) }) }) })
+  ] });
 }
 export {
   QueryReportTableSkeleton

package/dist/components/ui/query-report-table/query-report-table.d.ts

@@ -1,3 +1,3 @@
 import type { QueryReportTableProps } from './types';
-export declare function QueryReportTable({ title, data, loading, loadingRegion, skeletonRows, skeletonColumns, emptyMessage, columnWidth, columnOrder, showExport, exportFilename, onExport, headerActions, variant, className, tableClassName, }: QueryReportTableProps): import("react").JSX.Element;
+export declare function QueryReportTable({ title, data, loading: loadingProp, loadingRegion, skeletonRows, skeletonColumns, emptyMessage, emptyState, columnWidth, columnOrder, showExport, exportFilename, onExport, headerActions, variant, className, tableClassName, }: QueryReportTableProps): import("react").JSX.Element;
 //# sourceMappingURL=query-report-table.d.ts.map

package/dist/components/ui/query-report-table/query-report-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-report-table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGrD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,OAAe,EACf,aAAoB,EACpB,YAAgB,EAChB,eAAmB,EACnB,YAAY,EACZ,WAAiB,EACjB,WAAW,EACX,UAAiB,EACjB,cAAgC,EAChC,QAAQ,EACR,aAAa,EACb,OAAmB,EACnB,SAAS,EACT,cAAc,GACf,EAAE,qBAAqB,+BAyHvB"}
+{"version":3,"file":"query-report-table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAQrD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,OAAO,EAAE,WAAmB,EAC5B,aAAoB,EACpB,YAA+C,EAC/C,eAAqD,EACrD,YAAY,EACZ,UAAU,EACV,WAAiB,EACjB,WAAW,EACX,UAAiB,EACjB,cAAgC,EAChC,QAAQ,EACR,aAAa,EACb,OAAmB,EACnB,SAAS,EACT,cAAc,GACf,EAAE,qBAAqB,+BAkIvB"}

package/dist/components/ui/query-report-table/query-report-table.js

@@ -5,19 +5,23 @@ import { useHorizontalScrollbar } from "../../../hooks/ui/use-horizontal-scrollb
 import { cn } from "../../../utils/cn.js";
 import { Download02Icon } from "../../icons-v2-generated/interface/download-02-icon.js";
 import { Button } from "../button/index.js";
-import { TableEmptyState } from "../table/table-empty-state.js";
+import { DataTableEmpty } from "../data-table/data-table-empty.js";
+import { InertWhileLoading, useLoadingScope } from "../loading-scope.js";
 import { QueryReportTableHeader } from "./query-report-table-header.js";
-import { QueryReportTableRow } from "./query-report-table-row.js";
+import { QueryReportTableRow, queryReportRowsClass } from "./query-report-table-row.js";
 import { QueryReportTableSkeleton } from "./query-report-table-skeleton.js";
 import { deriveColumns, exportToCSV } from "./utils.js";
+const QUERY_REPORT_TABLE_SKELETON_ROWS = 8;
+const QUERY_REPORT_TABLE_SKELETON_COLUMNS = 6;
 function QueryReportTable({
   title,
   data,
-  loading = false,
+  loading: loadingProp = false,
   loadingRegion = true,
-  skeletonRows = 8,
-  skeletonColumns = 6,
+  skeletonRows = QUERY_REPORT_TABLE_SKELETON_ROWS,
+  skeletonColumns = QUERY_REPORT_TABLE_SKELETON_COLUMNS,
   emptyMessage,
+  emptyState,
   columnWidth = 160,
   columnOrder,
   showExport = true,
@@ -28,7 +32,9 @@ function QueryReportTable({
   className,
   tableClassName
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const isCompact = variant === "compact";
+  const showExportButton = showExport && (loading || data.length > 0);
   const columns = useMemo(() => deriveColumns(data, columnOrder), [data, columnOrder]);
   const handleExport = () => {
     exportToCSV(data, columns, exportFilename);
@@ -51,23 +57,23 @@ function QueryReportTable({
     onThumbPointerCancel
   } = useHorizontalScrollbar();
   return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col", isCompact ? "gap-0" : "gap-[var(--spacing-system-l)]", className), children: [
-    !isCompact && (title || headerActions || showExport && data.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between pt-[var(--spacing-system-l)]", children: [
+    !isCompact && (title || headerActions || showExportButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between pt-[var(--spacing-system-l)]", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-ods-text-primary text-h2", children: title }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-s)]", children: [
         headerActions,
-        showExport && data.length > 0 && /* @__PURE__ */ jsx(
+        showExportButton && /* @__PURE__ */ jsx(InertWhileLoading, { loading, className: "inline-flex shrink-0 content-max-md:hidden", children: /* @__PURE__ */ jsx(
           Button,
           {
-            className: "bg-ods-card content-max-md:hidden",
+            className: "bg-ods-card",
             variant: "outline",
             leftIcon: /* @__PURE__ */ jsx(Download02Icon, { size: 18, className: "text-ods-text-secondary" }),
             onClick: handleExport,
             children: "Export CSV"
           }
-        )
+        ) })
       ] })
     ] }),
-    loading && /* @__PURE__ */ jsx(
+    loading ? /* @__PURE__ */ jsx(
       QueryReportTableSkeleton,
       {
         rows: skeletonRows,
@@ -76,9 +82,7 @@ function QueryReportTable({
         variant,
         region: loadingRegion
       }
-    ),
-    !loading && data.length === 0 && /* @__PURE__ */ jsx(TableEmptyState, { message: emptyMessage }),
-    !loading && data.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    ) : data.length === 0 ? emptyState ? /* @__PURE__ */ jsx(DataTableEmpty, { ...emptyState }) : emptyMessage != null ? /* @__PURE__ */ jsx(DataTableEmpty, { title: emptyMessage, description: void 0 }) : /* @__PURE__ */ jsx(DataTableEmpty, {}) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
       !isCompact && thumbRatio > 0 && /* @__PURE__ */ jsx(
         "div",
         {
@@ -107,9 +111,10 @@ function QueryReportTable({
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsx("div", { ref: scrollRef, className: cn("overflow-x-auto", tableClassName), onScroll, children: /* @__PURE__ */ jsxs("div", { style: { minWidth: tableMinWidth }, children: [
           /* @__PURE__ */ jsx(QueryReportTableHeader, { columns, columnWidth, variant }),
-          /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isCompact ? "gap-0" : "gap-[var(--spacing-system-xs)]"), children: data.map((row, index) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: queryReportRowsClass(isCompact), children: data.map((row, index) => /* @__PURE__ */ jsx(
             QueryReportTableRow,
             {
+              "data-loading-item": true,
               row,
               columns,
               columnWidth,

package/dist/components/ui/query-report-table/types.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { NoDataProps } from '../no-data';
 export type QueryResultRow = Record<string, string | number | null>;
 export type QueryReportTableVariant = 'default' | 'compact';
 export interface QueryReportTableProps {
@@ -14,8 +15,11 @@ export interface QueryReportTableProps {
     skeletonRows?: number;
     /** Number of skeleton columns to display (default: 6) */
     skeletonColumns?: number;
-    /** Message shown when data is empty */
+    /** @deprecated Use `emptyState` instead. Legacy single-line message; mapped to the empty state's title. */
     emptyMessage?: string;
+    /** Props for the empty state (NoData) shown when there are no rows, as `DataTable.Body` takes them. Overrides
+     *  `emptyMessage`. */
+    emptyState?: NoDataProps;
     /** Fixed width for each column in pixels (default: 160) */
     columnWidth?: number;
     /** Explicit column ordering — keys not listed are appended at the end */

package/dist/components/ui/query-report-table/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC;AAEpE,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IACpC,+GAA+G;IAC/G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC;AAEpE,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IACpC,+GAA+G;IAC/G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;0BACsB;IACtB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/dist/components/ui/radio-group.d.ts

@@ -2,9 +2,14 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** How many option rows the block draws while loading when the host passes no options. */
+export declare const RADIO_GROUP_BLOCK_SKELETON_OPTIONS = 3;
 interface RadioGroupBlockOption {
     value: string;
+    /** The option's label. `null` is a label still read: in a scope or while `loading` it is an `h4` bar. */
     label: ReactNode;
+    /** The option's caption. `null` is a caption still read: in a scope or while `loading` it is an `h6` bar
+     *  (`undefined`: the option has no caption). */
     description?: ReactNode;
     disabled?: boolean;
     /** Optional trailing slot rendered at the end of the row (e.g. a discount tag) */
@@ -31,6 +36,15 @@ interface RadioGroupBlockProps extends Omit<ComponentPropsWithoutRef<typeof Radi
     /** Error message displayed below the group (also triggers red borders) */
     error?: string;
     itemClassName?: string;
+    /**
+     * Which option is chosen is still being read: the options the host passes are drawn for real and inert, each dot
+     * a skeleton of the dot's own size. With no options, `skeletonCount` rows with a bar for each label. A loading
+     * scope does the same.
+     */
+    loading?: boolean;
+    /** How many option rows to draw while loading when there are no options (defaults to
+     *  `RADIO_GROUP_BLOCK_SKELETON_OPTIONS`). */
+    skeletonCount?: number;
 }
 declare const RadioGroupBlock: import("react").ForwardRefExoticComponent<RadioGroupBlockProps & import("react").RefAttributes<HTMLDivElement>>;
 export { RadioGroup, RadioGroupItem, RadioGroupBlock };

package/dist/components/ui/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,KAAK,wBAAwB,EAAqB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAIrG,QAAA,MAAM,UAAU,6LAKd,CAAC;AAGH,QAAA,MAAM,cAAc,uMAwBlB,CAAC;AAGH,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,oBAAqB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAChH,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,iHAgJpB,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,KAAK,wBAAwB,EAAqB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAQrG,QAAA,MAAM,UAAU,6LAKd,CAAC;AAGH,QAAA,MAAM,cAAc,uMAwBlB,CAAC;AAeH,0FAA0F;AAC1F,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAEpD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,yGAAyG;IACzG,KAAK,EAAE,SAAS,CAAC;IACjB;oDACgD;IAChD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,oBAAqB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAChH,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;iDAC6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,iHA8KpB,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,CAAC"}