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

package/src/components/loading/wizard-layout-skeleton.tsx

@@ -1,35 +0,0 @@
-import { cn } from '../../utils/cn';
-import { LoadingRegion } from './loading-region';
-import { UnifiedSkeleton, TextSkeleton } from './unified-skeleton';
-
-interface WizardLayoutSkeletonProps {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-  steps?: number;
-  className?: string;
-}
-
-export function WizardLayoutSkeleton({ region = true, steps = 6, className }: WizardLayoutSkeletonProps) {
-  return (
-    <LoadingRegion label="Loading the wizard" announce={region} className={cn('space-y-6', className)}>
-      {/* Progress bar */}
-      <div className="flex flex-wrap items-center gap-2">
-        {Array.from({ length: steps }).map((_, i) => (
-          <UnifiedSkeleton key={i} className="h-6 w-24 rounded" />
-        ))}
-      </div>
-
-      {/* Header */}
-      <div className="max-w-2xl space-y-2">
-        <TextSkeleton.Heading className="w-2/3" />
-        <TextSkeleton.Body className="w-1/2" />
-      </div>
-
-      {/* Bottom navigation buttons */}
-      <div className="mt-10 flex justify-between">
-        <UnifiedSkeleton className="h-10 w-24 rounded" />
-        <UnifiedSkeleton className="h-10 w-32 rounded" />
-      </div>
-    </LoadingRegion>
-  );
-}

package/src/components/onboarding-guides/onboarding-guides-catalog-skeleton.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-import { OnboardingGuideCardSkeleton } from '../chat/entity-cards/onboarding-guide-card';
-import { TextLineSkeleton } from '../loading/unified-skeleton';
-
-/** The catalog's layout, read by the loaded view and by its sections' skeleton, so the skeleton is the view's size. */
-export const CATALOG_VIEW_CLASS = 'flex w-full flex-col gap-10';
-export const CATALOG_CONTROLS_CLASS = 'space-y-4';
-export const CATALOG_SECTIONS_CLASS = 'space-y-10';
-export const CATALOG_SECTION_CLASS = 'space-y-4';
-export const CATALOG_SECTION_HEADING_CLASS = 'flex items-center gap-2 text-ods-text-primary text-h3';
-export const CATALOG_SECTION_COUNT_CLASS =
-  'inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 px-2 py-0.5 text-ods-text-secondary text-h6';
-export const CATALOG_LIST_CLASS = 'flex flex-col gap-4';
-
-/**
- * Catalog cards the skeleton's section draws: a typical count, at every width. The catalog reads every guide (no
- * page, no limit), so there is no page size to draw. The section count is the data's too: the skeleton draws ONE
- * section, and every loaded section is a `data-loading-item`.
- */
-export const ONBOARDING_CATALOG_SKELETON_CARDS = 3;
-/**
- * The catalog's sections while the guides are read: ONE section of `ONBOARDING_CATALOG_SKELETON_CARDS` cards in the view's
- * own classes (its heading and count bars). The view draws it itself (`useLoadingScope() || loading`): its search bar
- * is real and its section pills draw their own skeleton.
- */
-export function OnboardingCatalogSectionsSkeleton() {
-  return (
-    <div className={CATALOG_SECTIONS_CLASS}>
-      <section className={CATALOG_SECTION_CLASS} data-loading-item>
-        <h2 className={CATALOG_SECTION_HEADING_CLASS}>
-          <TextLineSkeleton type="inherit" as="span" className="w-40" />
-          <span className={CATALOG_SECTION_COUNT_CLASS}>
-            <TextLineSkeleton type="inherit" as="span" className="w-3" />
-          </span>
-        </h2>
-        <ul className={CATALOG_LIST_CLASS}>
-          {Array.from({ length: ONBOARDING_CATALOG_SKELETON_CARDS }, (_, i) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
-            <li key={i}>
-              <OnboardingGuideCardSkeleton size="catalog" />
-            </li>
-          ))}
-        </ul>
-      </section>
-    </div>
-  );
-}

package/src/components/profile/ProfileLoadingSkeleton.tsx

@@ -1,31 +0,0 @@
-import { cn } from '../../utils/cn';
-import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
-
-interface ProfileLoadingSkeletonProps {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-  className?: string;
-}
-
-export function ProfileLoadingSkeleton({ region = true, className }: ProfileLoadingSkeletonProps) {
-  return (
-    <LoadingRegion label="Loading the profile" announce={region} className={cn('space-y-6', className)}>
-      {/* Header skeleton */}
-      <div className="flex items-center space-x-4">
-        <UnifiedSkeleton className="h-16 w-16 rounded-full" />
-        <div className="space-y-2">
-          <UnifiedSkeleton className="h-4 w-32 rounded" />
-          <UnifiedSkeleton className="h-3 w-24 rounded" />
-        </div>
-      </div>
-
-      {/* Content skeleton */}
-      <div className="space-y-4">
-        <UnifiedSkeleton className="h-4 w-full rounded" />
-        <UnifiedSkeleton className="h-4 w-3/4 rounded" />
-        <UnifiedSkeleton className="h-4 w-1/2 rounded" />
-      </div>
-    </LoadingRegion>
-  );
-}

package/src/components/shared/detail-page-skeleton.tsx

@@ -1,105 +0,0 @@
-'use client';
-
-import { PageLayout } from '../layout/page-layout';
-import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
-
-export interface DetailPageSkeletonProps {
-  metadataColumns?: number; // Number of metadata grid columns (default 4)
-  showImageGallery?: boolean; // Show horizontal image gallery (default true)
-  /** Render only the skeleton blocks, WITHOUT the self-contained page wrapper
-   *  — the caller supplies its own (e.g. `<PageShell>`) so the loading state
-   *  matches the loaded page's width, padding, and min-height. Default false
-   *  (self-contained `<PageLayout>` at the hub article width). */
-  bare?: boolean;
-  /** What is loading, read once by a screen reader. Default "Loading". */
-  label?: string;
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-}
-
-/** `content-md:grid-cols-N` as static classes the build can see (a class built from a number is never generated). */
-const METADATA_COLUMNS_CLASS: Record<number, string> = {
-  1: 'content-md:grid-cols-1',
-  2: 'content-md:grid-cols-2',
-  3: 'content-md:grid-cols-3',
-  4: 'content-md:grid-cols-4',
-  5: 'content-md:grid-cols-5',
-  6: 'content-md:grid-cols-6',
-};
-
-/**
- * @deprecated Render the detail page itself inside a `LoadingScope` (e.g. `ArticleDetailLayout` with its sections): each part draws its own skeleton. Kept so hosts on an older release keep compiling; nothing in the lib uses it.
- */
-// loading-standard-ok: deprecated re-export kept for external consumers
-export function DetailPageSkeleton({
-  metadataColumns = 4,
-  showImageGallery = true,
-  bare = false,
-  label = 'Loading',
-  region = true,
-}: DetailPageSkeletonProps = {}) {
-  const content = (
-    <LoadingRegion label={label} announce={region} className="space-y-6 content-md:space-y-10">
-      {/* Title Block */}
-      <div className="flex w-full flex-col gap-6">
-        <UnifiedSkeleton className="h-16 w-full max-w-3xl rounded content-md:h-20" />
-      </div>
-
-      {/* Category Tags Skeleton */}
-      <div className="flex w-full flex-wrap gap-2">
-        <UnifiedSkeleton className="h-8 w-32 rounded" />
-        <UnifiedSkeleton className="h-8 w-28 rounded" />
-        <UnifiedSkeleton className="h-8 w-36 rounded" />
-      </div>
-
-      {/* Metadata Grid Skeleton */}
-      <div
-        className={`grid grid-cols-1 ${METADATA_COLUMNS_CLASS[metadataColumns] ?? METADATA_COLUMNS_CLASS[4]} w-full overflow-hidden rounded-md border border-ods-border`}
-      >
-        {Array.from({ length: metadataColumns }).map((_, i) => (
-          <div
-            key={i}
-            className="border-b border-ods-border bg-ods-card p-4 last:border-r-0 content-md:border-b-0 content-md:border-r"
-          >
-            <UnifiedSkeleton className="mb-2 h-6 w-24 rounded" />
-            <UnifiedSkeleton className="h-5 w-20 rounded" />
-          </div>
-        ))}
-      </div>
-
-      {/* Image Gallery Skeleton */}
-      {showImageGallery && (
-        <div className="flex w-full gap-6 overflow-x-auto">
-          {[1, 2, 3, 4, 5].map(i => (
-            <UnifiedSkeleton key={i} className="h-[200px] w-[240px] shrink-0 rounded-md border border-ods-border" />
-          ))}
-        </div>
-      )}
-
-      {/* Featured Image Skeleton (for case studies) */}
-      {!showImageGallery && <UnifiedSkeleton className="aspect-[2560/1366] w-full rounded-md" />}
-
-      {/* Content Sections Skeleton */}
-      {[1, 2, 3].map(section => (
-        <div key={section} className="space-y-6">
-          <UnifiedSkeleton className="h-16 w-64 rounded" />
-          <div className="space-y-3">
-            <UnifiedSkeleton className="h-6 w-full rounded" />
-            <UnifiedSkeleton className="h-6 w-full rounded" />
-            <UnifiedSkeleton className="h-6 w-4/5 rounded" />
-          </div>
-        </div>
-      ))}
-    </LoadingRegion>
-  );
-  if (bare) return content;
-  return (
-    <PageLayout
-      showHeader={false}
-      className="mx-auto max-w-[1280px] bg-ods-bg px-6 py-6 content-md:px-20 content-md:py-10"
-    >
-      {content}
-    </PageLayout>
-  );
-}

package/src/components/shared/roadmap/roadmap-grid-skeleton.tsx

@@ -1,54 +0,0 @@
-import { RoadmapCardSkeleton } from '../../chat/entity-cards/roadmap-card';
-import { LoadingRegion } from '../../loading/loading-region';
-/**
- * RoadmapGridSkeleton: loading state for the `/roadmap` grid view. The grid
- * renders `RoadmapCard`, so each placeholder is that card's own loading box,
- * `RoadmapCardSkeleton`.
- */
-
-/**
- * The grid's box, read by `RoadmapGrid` and by its skeleton: one column, two from `content-md` when `columns` is 2,
- * and the desktop left margin that aligns it with the page hero's title. LITERAL class strings: an interpolated
- * `content-md:grid-cols-${n}` is invisible to Tailwind's scanner and is never generated.
- */
-export function roadmapGridClass(columns: 1 | 2, showLeftMargin: boolean): string {
-  return `grid grid-cols-1 gap-6 ${columns === 2 ? 'content-md:grid-cols-2' : ''} ${
-    showLeftMargin ? 'content-md:ml-[120px]' : ''
-  }`;
-}
-
-/**
- * Cards the grid's skeleton draws when its host states no count: a typical count. The roadmap lists every item it
- * holds (no page, no limit); a host that reads a known number of items passes it as `count`.
- */
-export const ROADMAP_GRID_SKELETON_CARDS = 4;
-
-export interface RoadmapGridSkeletonProps {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-  /** Skeleton cards: the number of items the host reads. Default `ROADMAP_GRID_SKELETON_CARDS`, a typical count. */
-  count?: number;
-  /** Show the desktop left margin (~120px) that aligns the grid with
-   *  the page hero's title block. Default `true`. Related-content rails
-   *  inside narrower surfaces (e.g. the release detail page) pass `false`. */
-  showLeftMargin?: boolean;
-  /** The grid's columns from `content-md` (`RoadmapGrid`'s `columns`). Default `2`. */
-  columns?: 1 | 2;
-}
-
-export function RoadmapGridSkeleton({
-  region = true,
-  count = ROADMAP_GRID_SKELETON_CARDS,
-  showLeftMargin = true,
-  columns = 2,
-}: RoadmapGridSkeletonProps) {
-  return (
-    <LoadingRegion label="Loading the roadmap" announce={region} className={roadmapGridClass(columns, showLeftMargin)}>
-      {Array.from({ length: count }).map((_, i) => (
-        <div key={i} className="min-w-0" data-loading-item>
-          <RoadmapCardSkeleton />
-        </div>
-      ))}
-    </LoadingRegion>
-  );
-}

package/src/components/ui/data-table/data-table-skeleton.tsx

@@ -1,229 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { cn } from '../../../utils/cn';
-import { TextLineSkeleton } from '../../loading/unified-skeleton';
-import { useDataTableContext } from './data-table';
-import { getHideClasses } from './utils';
-
-/**
- * Consistent INNER row heights. The row card wraps these in a 1px border on
- * each side, so the outer block lands on the designed 68px / 80px total —
- * hence the 66/78 values here.
- */
-export const ROW_HEIGHT_DESKTOP = 'h-[66px] content-md:h-[78px]';
-export const ROW_HEIGHT_MOBILE = 'h-[66px]';
-
-/**
- * The row shell's inset and column gap.
- *
- * Shared by the real row (`data-table-row`), the skeleton rows below and the
- * pad rows in `data-table-body`, because a difference between them is a visible
- * shift on load — and there WAS one: all three placeholders used
- * `--spacing-system-sf` (12px) in their mobile variant while the real row uses
- * `--spacing-system-mf` (16px) at every width, so a loading table sat 4px closer
- * to the card edge than the loaded one and its content nudged over when data
- * arrived. Kept as a constant rather than three copies so that cannot drift again.
- */
-export const ROW_SHELL_CLASSES = 'items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]';
-
-/**
- * The column every row slot stacks in, and the gap between two of them.
- *
- * One constant for the same reason as `ROW_SHELL_CLASSES`: the body's rows, its
- * loading skeleton and the infinite footer's fallback skeleton all stack here,
- * and the footer used to stack in nothing at all — its placeholder rows were
- * bare children of the table root, touching each other.
- */
-export const ROW_STACK_CLASSES = 'flex w-full flex-col gap-[var(--spacing-system-xsf)]';
-
-export interface DataTableSkeletonProps {
-  rows?: number;
-  className?: string;
-  rowClassName?: string;
-  /**
-   * REPLACES the design row height, for a table whose rows are not that tall.
-   * Sizes the CARD, as a real row does.
-   * Appending a height through `rowClassName` cannot do this: tailwind-merge
-   * drops the plain `h-[66px]` but keeps `content-md:h-[78px]`, so the override held
-   * on a phone and lost on a desktop. See `DataTableBodyProps.rowHeightClassName`.
-   */
-  rowHeightClassName?: string;
-}
-
-export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeightClassName }: DataTableSkeletonProps) {
-  const table = useDataTableContext();
-  const columns = table.getVisibleFlatColumns();
-  const firstColumnId = columns[0]?.id;
-
-  return (
-    <>
-      {Array.from({ length: rows }).map((_, index) => (
-        <div
-          key={index}
-          // Decoration: the table's own status line says it is loading.
-          aria-hidden="true"
-          className={cn(
-            '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,
-          )}
-        >
-          <div
-            className={cn(
-              'hidden py-0 content-md:flex',
-              ROW_SHELL_CLASSES,
-              rowHeightClassName ? 'h-full' : ROW_HEIGHT_DESKTOP,
-              rowClassName,
-            )}
-          >
-            {columns.map(column => {
-              const meta = column.columnDef.meta;
-              return (
-                <div
-                  key={column.id}
-                  className={cn(
-                    'flex shrink-0 flex-col justify-center',
-                    meta?.width || 'flex-1',
-                    // Same responsive hiding the real header and row apply.
-                    // Without it a `hideAt` column was drawn in the skeleton and
-                    // absent from the loaded table, so below that breakpoint the
-                    // remaining columns were sized against a different total and
-                    // the whole row re-laid-out the moment data arrived.
-                    getHideClasses(meta?.hideAt),
-                  )}
-                >
-                  {/* A cell's text (the row's primary face), and on the first column every other row a second,
-                      secondary line (a description or an id under it). */}
-                  <TextLineSkeleton type="h4" className="w-3/4" />
-                  {index % 2 === 0 && column.id === firstColumnId && <TextLineSkeleton type="h6" className="w-1/2" />}
-                </div>
-              );
-            })}
-          </div>
-          <div
-            className={cn(
-              'flex justify-start py-0 content-md:hidden',
-              ROW_SHELL_CLASSES,
-              rowHeightClassName ? 'h-full' : ROW_HEIGHT_MOBILE,
-              rowClassName,
-            )}
-          >
-            <div className="flex min-w-0 flex-1 flex-col justify-center py-[var(--spacing-system-sf)]">
-              <TextLineSkeleton type="h4" className="w-3/4" />
-              <TextLineSkeleton type="h6" className="w-1/2" />
-            </div>
-          </div>
-        </div>
-      ))}
-    </>
-  );
-}
-
-/**
- * The empty state, floating centred over a full page's worth of reserved row
- * slots. Both table bodies render this — an empty table is exactly when a
- * collapsing one is most visible (the pagination and everything under it jump
- * the moment a filter matches nothing), and two hand-matched copies of the
- * wrapper would drift the way the two placeholder components already had.
- */
-export function ReservedEmptyState({
-  count,
-  gapClassName,
-  rowHeightClassName,
-  innerHeightClassName,
-  children,
-}: {
-  count: number;
-  gapClassName: string;
-  rowHeightClassName?: string;
-  innerHeightClassName?: string;
-  children: ReactNode;
-}) {
-  // ONE grid cell holds both layers, so the box is as tall as the TALLER of
-  // the two: a short reservation (three compact rows) never clips the empty
-  // state, and a tall one still reserves its slots. The former absolute
-  // overlay took no height of its own, so a message taller than the slots
-  // spilled out of the host's horizontal scroller and grew it a vertical
-  // scrollbar — the header scrolled away inside a section.
-  return (
-    <div className="grid w-full">
-      <div className={cn('flex w-full flex-col [grid-area:1/1]', gapClassName)}>
-        <PlaceholderRows
-          count={count}
-          rowHeightClassName={rowHeightClassName}
-          innerHeightClassName={innerHeightClassName}
-        />
-      </div>
-      {/* `sticky left-0` + `w-screen max-w-full`: hosts wrap tables in a
-          horizontal scroller with a forced min-width, and an overlay centred on
-          that CANVAS puts the message off-screen on a phone. This centres it on
-          the visible area instead, and collapses to plain centring when the
-          table is not wider than its container. */}
-      <div className="flex items-center [grid-area:1/1]">
-        <div className="sticky left-0 flex w-screen max-w-full justify-center">{children}</div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Invisible rows that occupy exactly one row slot each.
- *
- * THE height reservation for a table whose page is short or empty — every call
- * site uses it (data-table's pad + empty branches AND the legacy `Table`'s), so
- * a padded page and an empty one are the same height by construction rather
- * than by matching guesses in each component.
- */
-export function PlaceholderRows({
-  count,
-  rowHeightClassName,
-  innerHeightClassName,
-}: {
-  count: number;
-  /** Height on the CARD, as `DataTableRow` carries it. */
-  rowHeightClassName?: string;
-  /** Height on the INNER row instead — the legacy `Table` puts it there and
-   *  lets the card's border add the remaining 2px, so its pad rows must too. */
-  innerHeightClassName?: string;
-}) {
-  return (
-    <>
-      {Array.from({ length: count }).map((_, i) => (
-        <div
-          key={`placeholder-${i}`}
-          // `border-transparent`, not no border: a real row card draws a 1px
-          // border on each side, so its outer block is the inner height PLUS 2.
-          // A pad row without one is 2px shorter than the row it stands in for
-          // — invisible per row, 54px over a 27-row remainder, which is the
-          // same shift `minRows` exists to prevent.
-          className={cn(
-            'pointer-events-none relative overflow-hidden rounded-md border border-transparent',
-            // The stated slot height belongs on the CARD, exactly as a real
-            // row carries it — a real row with a sub-row is taller than its
-            // cells, so reserving the cells' height here left every pad row
-            // short by the sub-row.
-            rowHeightClassName,
-          )}
-          aria-hidden="true"
-        >
-          <div
-            className={cn(
-              'hidden py-0 content-md:flex',
-              ROW_SHELL_CLASSES,
-              innerHeightClassName ?? (rowHeightClassName ? 'h-full' : ROW_HEIGHT_DESKTOP),
-            )}
-          />
-          <div
-            className={cn(
-              'flex justify-start py-0 content-md:hidden',
-              ROW_SHELL_CLASSES,
-              innerHeightClassName ?? (rowHeightClassName ? 'h-full' : ROW_HEIGHT_MOBILE),
-            )}
-          />
-        </div>
-      ))}
-    </>
-  );
-}

package/src/components/ui/file-manager/file-manager-skeleton.tsx

@@ -1,110 +0,0 @@
-'use client';
-
-import { LoadingRegion } from '../../loading/loading-region';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
-
-interface FileManagerSkeletonProps {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-  rows?: number;
-  showSearch?: boolean;
-  showActions?: boolean;
-}
-
-export function FileManagerSkeleton({
-  region = true,
-  rows = 8,
-  showSearch = true,
-  showActions = true,
-}: FileManagerSkeletonProps) {
-  const rowPlaceholders = Array.from({ length: rows });
-
-  return (
-    <LoadingRegion label="Loading files" announce={region} className="flex h-full flex-col bg-ods-bg">
-      <div className="flex min-h-0 flex-1 flex-col space-y-6 py-6">
-        {/* Breadcrumb and Action Bar */}
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          {/* Breadcrumb skeleton */}
-          <div className="flex min-w-0 flex-1 items-center gap-2">
-            <UnifiedSkeleton className="h-5 w-12" />
-            <UnifiedSkeleton className="h-4 w-4 rounded-full" />
-            <UnifiedSkeleton className="h-5 w-20" />
-            <UnifiedSkeleton className="h-4 w-4 rounded-full" />
-            <UnifiedSkeleton className="h-5 w-24" />
-          </div>
-
-          {/* Action buttons skeleton */}
-          {showActions && (
-            <div className="flex flex-shrink-0 items-center gap-2">
-              <UnifiedSkeleton className="h-9 w-24" />
-              <UnifiedSkeleton className="h-9 w-20" />
-              <UnifiedSkeleton className="h-9 w-20" />
-              <UnifiedSkeleton className="h-9 w-28" />
-            </div>
-          )}
-        </div>
-
-        {/* Search bar skeleton */}
-        {showSearch && <UnifiedSkeleton className="h-10 w-full rounded-lg" />}
-
-        {/* Table skeleton */}
-        <div className="min-h-0 flex-1">
-          <div className="flex flex-col rounded-lg border border-ods-border bg-ods-bg">
-            {/* Table header */}
-            <div className="flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4">
-              {/* Checkbox */}
-              <div className="mr-4">
-                <UnifiedSkeleton className="h-5 w-5 rounded" />
-              </div>
-
-              {/* Column headers */}
-              <div className="flex min-w-0 flex-1 items-center gap-3 text-ods-text-secondary text-h5">NAME</div>
-
-              <div className="w-24 shrink-0 pr-4 text-ods-text-secondary text-h5">SIZE</div>
-
-              <div className="w-36 shrink-0 pl-4 text-ods-text-secondary text-h5">EDITED</div>
-
-              <div className="flex w-48 shrink-0 justify-end pl-4">{/* Empty space for actions */}</div>
-            </div>
-
-            {/* Table rows */}
-            <div className="min-h-0 flex-1 divide-y divide-ods-border overflow-auto rounded-b-lg">
-              {rowPlaceholders.map((_, idx) => (
-                <div key={idx} className="flex h-16 items-center border-ods-border bg-ods-card px-4">
-                  {/* Checkbox */}
-                  <div className="mr-4">
-                    <UnifiedSkeleton className="h-5 w-5 rounded" />
-                  </div>
-
-                  {/* File icon and name */}
-                  <div className="flex min-w-0 flex-1 items-center gap-3">
-                    <UnifiedSkeleton className="h-6 w-6 rounded" />
-                    <div className="flex min-w-0 flex-col">
-                      <UnifiedSkeleton className="h-4 w-32" />
-                    </div>
-                  </div>
-
-                  {/* Size */}
-                  <div className="w-24 shrink-0 pr-4">
-                    <UnifiedSkeleton className="h-4 w-16" />
-                  </div>
-
-                  {/* Modified date */}
-                  <div className="w-36 shrink-0 pl-4">
-                    <UnifiedSkeleton className="h-4 w-24" />
-                  </div>
-
-                  {/* Action buttons */}
-                  <div className="flex w-48 shrink-0 items-center justify-end gap-1 pl-4">
-                    <UnifiedSkeleton className="h-8 w-8 rounded" />
-                    <UnifiedSkeleton className="h-8 w-8 rounded" />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </LoadingRegion>
-  );
-}

package/src/components/ui/table/index.ts

@@ -1,34 +0,0 @@
-/**
- * @deprecated The `table` module is deprecated. Use `data-table` instead.
- */
-export { Table } from './table';
-export { TableCell } from './table-cell';
-export { TableColumnFilterDropdown, type TableColumnFilterDropdownProps } from './table-column-filter-dropdown';
-export { TableDescriptionCell } from './table-description-cell';
-export { TableEmptyState } from './table-empty-state';
-export { TableHeader } from './table-header';
-export { TableRow } from './table-row';
-export { ROW_HEIGHT_DESKTOP, ROW_HEIGHT_MOBILE, TableCardSkeleton } from './table-skeleton';
-export { TableTimestampCell } from './table-timestamp-cell';
-export { getHideClasses, isHiddenOnMobile } from './utils';
-
-export type { TableDescriptionCellProps } from './table-description-cell';
-export type { TableTimestampCellProps } from './table-timestamp-cell';
-export type {
-  BulkAction,
-  CursorPagination,
-  FilterOption,
-  FilterSection,
-  InfiniteScrollConfig,
-  PagePagination,
-  RowAction,
-  TableCardSkeletonProps,
-  TableCellProps,
-  TableColumn,
-  TableEmptyStateProps,
-  TableFilters,
-  TableHeaderProps,
-  TableProps,
-  TableRowProps,
-  TailwindBreakpoint,
-} from './types';