@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/dist/components/ui/tab-navigation.js

@@ -15,6 +15,8 @@ import {
 } from "react";
 import { useSearchParams, useRouter, usePathname } from "../../embed-shims/next-navigation.js";
 import { cn } from "../../utils/cn.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "./loading-scope.js";
 import { Tag } from "./tag.js";
 const TabNavigationVariantContext = createContext("default");
 function TabNavigationVariantProvider({
@@ -24,6 +26,16 @@ function TabNavigationVariantProvider({
   return /* @__PURE__ */ jsx(TabNavigationVariantContext.Provider, { value: variant, children });
 }
 const HIDDEN_INDICATOR = { left: 0, width: 0 };
+const STRIP_FRAME_CLASS = "relative w-full";
+const STRIP_ROW_CLASS = "scrollbar-hide relative flex h-full items-center justify-start overflow-x-auto overflow-y-hidden";
+const ADMIN_TAB_GAP_CLASS = "gap-[var(--spacing-system-xxs)]";
+const TAB_CLASS = "group relative flex shrink-0 items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]";
+const TAB_AVATAR_GAP_CLASS = "gap-[var(--spacing-system-xsf)]";
+const TAB_AVATAR_PX = 24;
+const TAB_STRETCH_CLASS = "flex-1";
+const tabAlignClass = (tabAlign) => tabAlign === "start" ? "justify-start text-left" : "justify-center";
+const TAB_SUBLABEL_WRAP_CLASS = "flex min-w-0 flex-col items-start text-left content-md:flex-row content-md:items-baseline content-md:gap-[var(--spacing-system-xsf)]";
+const STRIP_BORDER_CLASS = "pointer-events-none absolute bottom-0 left-0 right-0 h-px";
 const StatusDot = ({ indicator, className }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -174,123 +186,114 @@ const TabBar = memo(function TabBarImpl({
   if (!placement.placedOnce && placement.indicator !== indicator) {
     setPlacement({ indicator, placedOnce: shouldAnimateIndicator });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: scrollRef,
-        className: cn(
-          "scrollbar-hide relative flex h-full items-center justify-start overflow-x-auto overflow-y-hidden",
-          isAdmin && "gap-[var(--spacing-system-xxs)]"
-        ),
-        children: [
-          tabs.map((tab) => {
-            const isActive = activeTab === tab.id;
-            return /* @__PURE__ */ jsxs(
-              "button",
-              {
-                ref: isActive ? activeTabRef : void 0,
-                type: "button",
-                onClick: () => onTabChange(tab.id),
-                "aria-label": tab.badge ? `${tab.label} (${tab.badge})` : void 0,
-                className: cn(
-                  "group relative flex shrink-0 cursor-pointer items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]",
-                  tabAlign === "start" ? "justify-start text-left" : "justify-center",
-                  // Named rather than `transition-all`: the only thing that moves
-                  // here is colour.
-                  "border-none bg-transparent outline-none transition-colors duration-200",
-                  // `outline-none` above drops the browser's own focus ring, so
-                  // put one back or the strip is un-navigable by keyboard — you
-                  // can tab through it with nothing to show where you are. Inset,
-                  // so it stays within the button and never overlaps a neighbour.
-                  "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus",
-                  stretchTabs && "flex-1",
-                  tab.avatar && "gap-[var(--spacing-system-xsf)]",
-                  // `default`: the open tab is marked by the underline alone, no surface
-                  // of its own. `admin`: the open and the hovered tab carry an accent
-                  // fade. ODS colour vars hold hex values, so Tailwind alpha modifiers
-                  // (to-ods-accent/10) silently produce no CSS; color-mix() accepts
-                  // hex, so the 10%-alpha stop is derived from the token.
-                  isAdmin && (isActive ? "bg-gradient-to-b from-transparent to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]" : "hover:bg-gradient-to-b hover:from-transparent hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]")
-                ),
-                children: [
-                  tab.avatar ? /* @__PURE__ */ jsxs("div", { className: "relative flex shrink-0 items-center justify-center", children: [
-                    tab.avatar,
-                    tab.indicator && /* @__PURE__ */ jsx(StatusDot, { indicator: tab.indicator, className: "absolute right-0 top-[-3px]" })
-                  ] }) : tab.icon ? /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
-                    /* @__PURE__ */ jsx(
-                      tab.icon,
-                      {
-                        className: cn(
-                          "h-4 w-4 transition-colors content-md:h-6 content-md:w-6",
-                          isActive ? !tab.accent && "text-ods-accent" : cn("text-ods-text-secondary", !isAdmin && "group-hover:text-ods-text-primary")
-                        ),
-                        style: isActive && tab.accent ? { color: tab.accent } : void 0
-                      }
+  return /* @__PURE__ */ jsxs("div", { className: cn(STRIP_FRAME_CLASS, className), children: [
+    /* @__PURE__ */ jsxs("div", { ref: scrollRef, className: cn(STRIP_ROW_CLASS, isAdmin && ADMIN_TAB_GAP_CLASS), children: [
+      tabs.map((tab) => {
+        const isActive = activeTab === tab.id;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: isActive ? activeTabRef : void 0,
+            type: "button",
+            onClick: () => onTabChange(tab.id),
+            "aria-label": tab.badge ? `${tab.label} (${tab.badge})` : void 0,
+            className: cn(
+              TAB_CLASS,
+              "cursor-pointer",
+              tabAlignClass(tabAlign),
+              // Named rather than `transition-all`: the only thing that moves
+              // here is colour.
+              "border-none bg-transparent outline-none transition-colors duration-200",
+              // `outline-none` above drops the browser's own focus ring, so
+              // put one back or the strip is un-navigable by keyboard — you
+              // can tab through it with nothing to show where you are. Inset,
+              // so it stays within the button and never overlaps a neighbour.
+              "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus",
+              stretchTabs && TAB_STRETCH_CLASS,
+              tab.avatar && TAB_AVATAR_GAP_CLASS,
+              // `default`: the open tab is marked by the underline alone, no surface
+              // of its own. `admin`: the open and the hovered tab carry an accent
+              // fade. ODS colour vars hold hex values, so Tailwind alpha modifiers
+              // (to-ods-accent/10) silently produce no CSS; color-mix() accepts
+              // hex, so the 10%-alpha stop is derived from the token.
+              isAdmin && (isActive ? "bg-gradient-to-b from-transparent to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]" : "hover:bg-gradient-to-b hover:from-transparent hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]")
+            ),
+            children: [
+              tab.avatar ? /* @__PURE__ */ jsxs("div", { className: "relative flex shrink-0 items-center justify-center", children: [
+                tab.avatar,
+                tab.indicator && /* @__PURE__ */ jsx(StatusDot, { indicator: tab.indicator, className: "absolute right-0 top-[-3px]" })
+              ] }) : tab.icon ? /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+                /* @__PURE__ */ jsx(
+                  tab.icon,
+                  {
+                    className: cn(
+                      "h-4 w-4 transition-colors content-md:h-6 content-md:w-6",
+                      isActive ? !tab.accent && "text-ods-accent" : cn("text-ods-text-secondary", !isAdmin && "group-hover:text-ods-text-primary")
                     ),
-                    tab.indicator && /* @__PURE__ */ jsx(StatusDot, { indicator: tab.indicator, className: "absolute right-0 top-[-3px]" })
-                  ] }) : tab.indicator ? (
-                    // Text-only tabs keep their status badge — inline dot before
-                    // the label (there's no icon corner to anchor to).
-                    /* @__PURE__ */ jsx(StatusDot, { indicator: tab.indicator, className: "shrink-0" })
-                  ) : null,
-                  tab.sublabel ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start text-left content-md:flex-row content-md:items-baseline content-md:gap-[var(--spacing-system-xsf)]", children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "whitespace-nowrap transition-colors text-h4",
-                          isActive ? "text-ods-text-primary" : cn("text-ods-text-secondary", !isAdmin && "group-hover:text-ods-text-primary")
-                        ),
-                        children: tab.label
-                      }
+                    style: isActive && tab.accent ? { color: tab.accent } : void 0
+                  }
+                ),
+                tab.indicator && /* @__PURE__ */ jsx(StatusDot, { indicator: tab.indicator, className: "absolute right-0 top-[-3px]" })
+              ] }) : tab.indicator ? (
+                // Text-only tabs keep their status badge — inline dot before
+                // the label (there's no icon corner to anchor to).
+                /* @__PURE__ */ jsx(StatusDot, { indicator: tab.indicator, className: "shrink-0" })
+              ) : null,
+              tab.sublabel ? /* @__PURE__ */ jsxs("span", { className: TAB_SUBLABEL_WRAP_CLASS, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "whitespace-nowrap transition-colors text-h4",
+                      isActive ? "text-ods-text-primary" : cn("text-ods-text-secondary", !isAdmin && "group-hover:text-ods-text-primary")
                     ),
-                    /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-ods-text-secondary text-h6", children: tab.sublabel })
-                  ] }) : /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "whitespace-nowrap transition-colors text-h4",
-                        isActive ? "text-ods-text-primary" : "text-ods-text-secondary"
-                      ),
-                      children: tab.label
-                    }
+                    children: tab.label
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-ods-text-secondary text-h6", children: tab.sublabel })
+              ] }) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "whitespace-nowrap transition-colors text-h4",
+                    isActive ? "text-ods-text-primary" : "text-ods-text-secondary"
                   ),
-                  tab.badge && // The chip is 32px against a 20/24px label line. The negative
-                  // margin takes the difference back, so a stamped tab is exactly
-                  // as tall as its neighbours at every breakpoint. No hover shade:
-                  // the tab is the target, and the cursor passes through to it.
-                  /* @__PURE__ */ jsx(
-                    Tag,
-                    {
-                      as: "span",
-                      "aria-hidden": true,
-                      label: tab.badge,
-                      variant: "warning",
-                      className: "pointer-events-none my-[calc((var(--font-line-space-h4-body)_-_2rem)/2)] ml-[var(--spacing-system-xxs)] shrink-0"
-                    }
-                  )
-                ]
-              },
-              tab.id
-            );
-          }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-hidden": true,
-              "data-testid": "tab-navigation-underline",
-              className: cn(
-                "pointer-events-none absolute bottom-0 left-0 h-1 motion-reduce:transition-none",
-                !activeAccent && "bg-ods-accent",
-                !hasProgress && shouldAnimateIndicator && "transition-[transform,width,opacity] duration-200 ease-out"
+                  children: tab.label
+                }
               ),
-              style: activeAccent ? { ...indicatorStyle, backgroundColor: activeAccent } : indicatorStyle
-            }
-          )
-        ]
-      }
-    ),
+              tab.badge && // The chip is 32px against a 20/24px label line. The negative
+              // margin takes the difference back, so a stamped tab is exactly
+              // as tall as its neighbours at every breakpoint. No hover shade:
+              // the tab is the target, and the cursor passes through to it.
+              /* @__PURE__ */ jsx(
+                Tag,
+                {
+                  as: "span",
+                  "aria-hidden": true,
+                  label: tab.badge,
+                  variant: "warning",
+                  className: "pointer-events-none my-[calc((var(--font-line-space-h4-body)_-_2rem)/2)] ml-[var(--spacing-system-xxs)] shrink-0"
+                }
+              )
+            ]
+          },
+          tab.id
+        );
+      }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          "data-testid": "tab-navigation-underline",
+          className: cn(
+            "pointer-events-none absolute bottom-0 left-0 h-1 motion-reduce:transition-none",
+            !activeAccent && "bg-ods-accent",
+            !hasProgress && shouldAnimateIndicator && "transition-[transform,width,opacity] duration-200 ease-out"
+          ),
+          style: activeAccent ? { ...indicatorStyle, backgroundColor: activeAccent } : indicatorStyle
+        }
+      )
+    ] }),
     leftFade && /* @__PURE__ */ jsx(
       "div",
       {
@@ -309,9 +312,43 @@ const TabBar = memo(function TabBarImpl({
         )
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 h-px", style: borderStyle })
+    /* @__PURE__ */ jsx("div", { className: STRIP_BORDER_CLASS, style: borderStyle })
   ] });
 });
+function TabNavigationSkeleton({
+  count,
+  avatar = false,
+  sublabel = false,
+  stretchTabs = false,
+  tabAlign = "center",
+  variant,
+  className
+}) {
+  const providedVariant = useContext(TabNavigationVariantContext);
+  const isAdmin = (variant ?? providedVariant) === "admin";
+  return /* @__PURE__ */ jsxs("div", { className: cn(STRIP_FRAME_CLASS, className), "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("div", { className: cn(STRIP_ROW_CLASS, isAdmin && ADMIN_TAB_GAP_CLASS), children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          TAB_CLASS,
+          tabAlignClass(tabAlign),
+          stretchTabs && TAB_STRETCH_CLASS,
+          avatar && TAB_AVATAR_GAP_CLASS
+        ),
+        children: [
+          avatar && /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "circular", width: TAB_AVATAR_PX, height: TAB_AVATAR_PX, className: "shrink-0" }),
+          sublabel ? /* @__PURE__ */ jsxs("span", { className: TAB_SUBLABEL_WRAP_CLASS, children: [
+            /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "h4", className: "w-20" }),
+            /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "h6", className: "w-28" })
+          ] }) : /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-20" })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: cn(STRIP_BORDER_CLASS, "bg-ods-border") })
+  ] });
+}
 function TabNavigation({
   activeTab: controlledActiveTab,
   onTabChange: controlledOnTabChange,
@@ -326,6 +363,7 @@ function TabNavigation({
   variant: variantProp,
   urlSync = false,
   defaultTab,
+  staticLabels = false,
   children
 }) {
   const providedVariant = useContext(TabNavigationVariantContext);
@@ -389,8 +427,35 @@ function TabNavigation({
   );
   const deferredActiveTab = useDeferredValue(activeTab);
   const isStale = activeTab !== deferredActiveTab;
+  const loading = useLoadingScope();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    loading && staticLabels ? /* @__PURE__ */ jsx("div", { className: "contents", "aria-hidden": "true", inert: true, children: /* @__PURE__ */ jsx(
+      TabBar,
+      {
+        tabs,
+        activeTab,
+        onTabChange: () => void 0,
+        className,
+        shadowClassName,
+        showLeftGradient,
+        showRightGradient,
+        stretchTabs,
+        tabAlign,
+        progressTransitionMs,
+        variant
+      }
+    ) }) : loading ? /* @__PURE__ */ jsx(
+      TabNavigationSkeleton,
+      {
+        count: tabs.length,
+        avatar: tabs.some((tab) => Boolean(tab.avatar)),
+        sublabel: tabs.some((tab) => Boolean(tab.sublabel)),
+        stretchTabs,
+        tabAlign,
+        variant,
+        className
+      }
+    ) : /* @__PURE__ */ jsx(
       TabBar,
       {
         tabs,
@@ -415,7 +480,9 @@ const getTabComponent = (tabs, tabId) => {
   return tab?.component || null;
 };
 export {
+  TAB_AVATAR_PX,
   TabNavigation,
+  TabNavigationSkeleton,
   TabNavigationVariantProvider,
   getTabById,
   getTabComponent

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

@@ -9,7 +9,7 @@ import { Checkbox } from "../checkbox.js";
 import { InfoHint } from "../info-hint.js";
 import { TableColumnFilterDropdown } from "./table-column-filter-dropdown.js";
 const TABLE_HEADER_LABEL_CLASS = "min-w-0 text-balance uppercase text-ods-text-secondary text-h5";
-import { getHideClasses } from "./utils.js";
+import { getHideClasses, TABLE_ACTIONS_COLUMN_KEY } from "./utils.js";
 function TableHeader({
   columns,
   className,
@@ -73,7 +73,7 @@ function TableHeader({
           }
         ) }),
         columns.map((column) => {
-          const isActionsColumn = column.key === "__actions__";
+          const isActionsColumn = column.key === TABLE_ACTIONS_COLUMN_KEY;
           const filterable = column.filterable && column.filterOptions && onFilterChange;
           if (!isLgUp && !isActionsColumn && !filterable) {
             return null;

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

@@ -1 +1 @@
-{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/table/table-row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ3D,gEAAgE;AAChE,wBAAgB,QAAQ,CAAC,CAAC,GAAG,YAAY,EAAE,EACzC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,SAAS,GACV,EAAE,aAAa,CAAC,CAAC,CAAC,qBAwGlB"}
+{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/table/table-row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ3D,gEAAgE;AAChE,wBAAgB,QAAQ,CAAC,CAAC,GAAG,YAAY,EAAE,EACzC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,SAAS,GACV,EAAE,aAAa,CAAC,CAAC,CAAC,qBAqGlB"}

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

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "../../../embed-shims/next-link.js";
 import { cn } from "../../../utils/cn.js";
+import { isOwnClick } from "../../../utils/own-click.js";
 import { Checkbox } from "../checkbox.js";
 import { TableCell } from "./table-cell.js";
 import { COMPACT_ROW_MIN_HEIGHT, ROW_HEIGHT_DESKTOP } from "./table-skeleton.js";
@@ -28,10 +29,7 @@ function TableRow({
   const Row = animate && motionDiv ? motionDiv : "div";
   const motionProps = animate ? { layout: "position", transition: { layout: { duration: 0.35, ease: [0.22, 1, 0.36, 1] } } } : {};
   const handleRowClick = (e) => {
-    const target = e.target;
-    if (target.closest("[data-no-row-click]")) {
-      return;
-    }
+    if (!isOwnClick(e.target, e.currentTarget)) return;
     if (onClick) {
       onClick(item);
     }

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

@@ -11,7 +11,12 @@ declare const ROW_HEIGHT_DESKTOP = "h-[66px] content-md:h-[78px]";
 declare const COMPACT_ROW_MIN_HEIGHT = "min-h-[56px]";
 declare const ROW_HEIGHT_MOBILE = "h-[66px]";
 /** @deprecated Use `DataTableSkeleton` from `data-table` instead. */
-export declare function TableCardSkeleton({ columns, rows, compact, hasActions, hasChevron, className, rowClassName, }: TableCardSkeletonProps): import("react").JSX.Element;
+/**
+ * Rows a table's skeleton draws when its host states no count: one screen of rows under a page's header (a 68px row
+ * card and its 8px gap; about ten fit under the header of a 1440x900 screen, nine of a phone's 66px rows).
+ */
+export declare const TABLE_SKELETON_ROWS = 10;
+export declare function TableCardSkeleton({ columns, rows, compact, actions, selectable, className, rowClassName, }: TableCardSkeletonProps): import("react").JSX.Element;
 /** @deprecated */
 export { COMPACT_ROW_MIN_HEIGHT, ROW_HEIGHT_DESKTOP, ROW_HEIGHT_MOBILE };
 //# sourceMappingURL=table-skeleton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/table/table-skeleton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAItD,QAAA,MAAM,kBAAkB,iCAAiC,CAAC;AAC1D;;;;;;;GAOG;AACH,QAAA,MAAM,sBAAsB,iBAAiB,CAAC;AAC9C,QAAA,MAAM,iBAAiB,aAAa,CAAC;AAErC,qEAAqE;AACrE,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAS,EACT,OAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,GACb,EAAE,sBAAsB,+BA2ExB;AAED,kBAAkB;AAClB,OAAO,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/table/table-skeleton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAKtD,QAAA,MAAM,kBAAkB,iCAAiC,CAAC;AAC1D;;;;;;;GAOG;AACH,QAAA,MAAM,sBAAsB,iBAAiB,CAAC;AAC9C,QAAA,MAAM,iBAAiB,aAAa,CAAC;AAErC,qEAAqE;AACrE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAA0B,EAC1B,OAAe,EACf,OAAO,EACP,UAAkB,EAClB,SAAS,EACT,YAAY,GACb,EAAE,sBAAsB,+BA6DxB;AAED,kBAAkB;AAClB,OAAO,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -1,69 +1,56 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
-import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from "../../loading/unified-skeleton.js";
+import { CHECKBOX_BOX_CLASS } from "../checkbox.js";
+import { getHideClasses, TABLE_ACTIONS_COLUMN_KEY, TABLE_CHEVRON_COLUMN_KEY } from "./utils.js";
 const ROW_HEIGHT_DESKTOP = "h-[66px] content-md:h-[78px]";
 const COMPACT_ROW_MIN_HEIGHT = "min-h-[56px]";
 const ROW_HEIGHT_MOBILE = "h-[66px]";
+const TABLE_SKELETON_ROWS = 10;
 function TableCardSkeleton({
   columns,
-  rows = 10,
+  rows = TABLE_SKELETON_ROWS,
   compact = false,
-  hasActions = false,
-  hasChevron = false,
+  actions,
+  selectable = false,
   className,
   rowClassName
 }) {
   const primaryKey = (columns.find((c) => /flex-(1|\[)/.test(c.width || "")) ?? columns[0])?.key;
-  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx(
     "div",
     {
       className: cn("relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card", className),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "hidden items-center gap-4 px-4 content-md:flex",
-              compact ? cn("py-2", COMPACT_ROW_MIN_HEIGHT) : cn("py-0", ROW_HEIGHT_DESKTOP),
-              rowClassName
-            ),
-            children: [
-              columns.map((column) => /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 flex-col justify-center", column.width || "flex-1"), children: [
-                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-1 h-5 w-3/4 rounded" }),
-                index % 2 === 0 && column.key === primaryKey && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-1/2 rounded opacity-60" })
-              ] }, column.key)),
-              hasActions && /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2", !hasChevron && "ml-auto"), children: [
-                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded" }),
-                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-24 rounded" })
-              ] }),
-              hasChevron && /* @__PURE__ */ jsx("div", { className: cn("flex w-12 shrink-0 items-center justify-end", !hasActions && "ml-auto"), children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded" }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-start gap-3 px-3 content-md:hidden",
-              // Mirror the real row on mobile too: a compact row is
-              // content-sized with a floor, a normal row a fixed height.
-              // Hard-wiring ROW_HEIGHT_MOBILE made every COMPACT table jump
-              // 68px -> 58px per row when the data replaced the skeleton.
-              compact ? cn("py-2", COMPACT_ROW_MIN_HEIGHT) : cn("py-0", ROW_HEIGHT_MOBILE),
-              rowClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col justify-center", compact ? "py-0" : "py-3"), children: [
-                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-3/4 rounded" }),
-                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2 rounded opacity-60" })
-              ] }),
-              hasActions && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 shrink-0 rounded" }),
-              hasChevron && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 shrink-0 rounded" })
-            ]
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex items-center gap-4 px-4",
+            compact ? cn("py-2", COMPACT_ROW_MIN_HEIGHT) : cn("py-0", ROW_HEIGHT_DESKTOP),
+            rowClassName
+          ),
+          children: [
+            selectable && /* @__PURE__ */ jsx("div", { className: "flex w-10 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: CHECKBOX_BOX_CLASS }) }),
+            columns.map((column) => {
+              const cellClass = cn("flex shrink-0", column.width || "min-w-0 flex-1", getHideClasses(column.hideAt));
+              if (column.key === TABLE_ACTIONS_COLUMN_KEY) {
+                return /* @__PURE__ */ jsx("div", { className: cn(cellClass, "items-center justify-end gap-2"), children: (actions ?? [{ iconOnly: true }]).map((action, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: skeleton buttons never reorder
+                  /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: action.iconOnly ? "icon" : "default" }, i)
+                )) }, column.key);
+              }
+              if (column.key === TABLE_CHEVRON_COLUMN_KEY) {
+                return /* @__PURE__ */ jsx("div", { className: cn(cellClass, "items-center justify-end"), children: /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "icon" }) }, column.key);
+              }
+              return /* @__PURE__ */ jsxs("div", { className: cn(cellClass, "flex-col justify-center overflow-hidden"), children: [
+                /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-3/4" }),
+                index % 2 === 0 && column.key === primaryKey && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-1/2" })
+              ] }, column.key);
+            })
+          ]
+        }
+      )
     },
     index
   )) });
@@ -72,5 +59,6 @@ export {
   COMPACT_ROW_MIN_HEIGHT,
   ROW_HEIGHT_DESKTOP,
   ROW_HEIGHT_MOBILE,
+  TABLE_SKELETON_ROWS,
   TableCardSkeleton
 };

package/dist/components/ui/table/table.d.ts

@@ -1,4 +1,4 @@
 import type { TableProps, TableRowData } from './types';
 /** @deprecated Use `DataTable` from `data-table` instead. */
-export declare function Table<T = TableRowData>({ data, columns, rowKey, loading, emptyMessage, skeletonRows, minRows, emptyState, keepHeightWhenEmpty, emptyDescription, className, containerClassName, headerClassName, rowClassName, compact, onRowClick, rowActions, renderRowActions, rowHref, sortBy, sortDirection, onSort, filters, onFilterChange, selectable, selectedRows, onSelectionChange, bulkActions, showToolbar, cursorPagination, pagePagination, paginationClassName, infiniteScroll, stickyHeader, stickyHeaderOffset, animateRowReorder, actionsColumnWidth, }: TableProps<T>): import("react").JSX.Element;
+export declare function Table<T = TableRowData>({ data, columns, rowKey, loading: loadingProp, emptyMessage, skeletonRows, minRows, emptyState, keepHeightWhenEmpty, emptyDescription, className, containerClassName, headerClassName, rowClassName, compact, onRowClick, rowActions, renderRowActions, rowHref, sortBy, sortDirection, onSort, filters, onFilterChange, selectable, selectedRows, onSelectionChange, bulkActions, showToolbar, cursorPagination, pagePagination, paginationClassName, infiniteScroll, stickyHeader, stickyHeaderOffset, animateRowReorder, actionsColumnWidth, }: TableProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=table.d.ts.map

package/dist/components/ui/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/table/table.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAA0B,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAoFhF,6DAA6D;AAC7D,wBAAgB,KAAK,CAAC,CAAC,GAAG,YAAY,EAAE,EACtC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,OAAe,EACf,YAAY,EACZ,YAAiB,EACjB,OAAO,EACP,UAAU,EACV,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,OAAO,EACP,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,aAAa,EACb,MAAM,EACN,OAAO,EACP,cAAc,EACd,UAAU,EACV,YAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,UAAU,CAAC,CAAC,CAAC,+BA6Pf"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/table/table.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAA0B,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAqFhF,6DAA6D;AAC7D,wBAAgB,KAAK,CAAC,CAAC,GAAG,YAAY,EAAE,EACtC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,OAAO,EAAE,WAAmB,EAC5B,YAAY,EACZ,YAAkC,EAClC,OAAO,EACP,UAAU,EACV,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,OAAO,EACP,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,aAAa,EACb,MAAM,EACN,OAAO,EACP,cAAc,EACd,UAAU,EACV,YAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,UAAU,CAAC,CAAC,CAAC,+BA4Qf"}