@flamingo-stack/openframe-frontend-core 0.0.747 → 0.0.749

package/dist/components/shared/product-release/release-detail-skeleton.js

@@ -1,9 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { DetailPageSkeleton } from "../detail-page-skeleton.js";
-function ReleaseDetailSkeleton() {
-  return /* @__PURE__ */ jsx(DetailPageSkeleton, { metadataColumns: 4, showImageGallery: true });
-}
-export {
-  ReleaseDetailSkeleton
-};

package/dist/components/skeleton.d.ts

@@ -1,4 +0,0 @@
-import type React from 'react';
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-export { Skeleton };
-//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,qBAE9E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/skeleton.js

@@ -1,9 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { cn } from "../utils/cn.js";
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/60", className), ...props });
-}
-export {
-  Skeleton
-};

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

@@ -1,44 +0,0 @@
-import { type HTMLAttributes } from 'react';
-interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-    className?: string;
-}
-declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
-interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
-    lines?: number;
-    className?: string;
-}
-declare const SkeletonText: import("react").ForwardRefExoticComponent<SkeletonTextProps & import("react").RefAttributes<HTMLDivElement>>;
-interface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {
-    showImage?: boolean;
-    className?: string;
-}
-declare const SkeletonCard: import("react").ForwardRefExoticComponent<SkeletonCardProps & import("react").RefAttributes<HTMLDivElement>>;
-interface SkeletonGridProps extends HTMLAttributes<HTMLDivElement> {
-    columns?: number;
-    items?: number;
-    showImages?: boolean;
-    className?: string;
-}
-declare const SkeletonGrid: import("react").ForwardRefExoticComponent<SkeletonGridProps & import("react").RefAttributes<HTMLDivElement>>;
-interface SkeletonButtonProps extends HTMLAttributes<HTMLDivElement> {
-    size?: 'sm' | 'default' | 'lg';
-    className?: string;
-}
-declare const SkeletonButton: import("react").ForwardRefExoticComponent<SkeletonButtonProps & import("react").RefAttributes<HTMLDivElement>>;
-interface SkeletonHeadingProps extends HTMLAttributes<HTMLDivElement> {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    className?: string;
-}
-declare const SkeletonHeading: import("react").ForwardRefExoticComponent<SkeletonHeadingProps & import("react").RefAttributes<HTMLDivElement>>;
-interface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {
-    items?: number;
-    className?: string;
-}
-declare const SkeletonList: import("react").ForwardRefExoticComponent<SkeletonListProps & import("react").RefAttributes<HTMLDivElement>>;
-interface SkeletonNavigationProps extends HTMLAttributes<HTMLDivElement> {
-    items?: number;
-    className?: string;
-}
-declare const SkeletonNavigation: import("react").ForwardRefExoticComponent<SkeletonNavigationProps & import("react").RefAttributes<HTMLDivElement>>;
-export { Skeleton, SkeletonText, SkeletonCard, SkeletonGrid, SkeletonButton, SkeletonHeading, SkeletonList, SkeletonNavigation, };
-//# sourceMappingURL=skeleton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAGxD,UAAU,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,0GAEZ,CAAC;AAGH,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,8GAchB,CAAC;AAGH,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,8GAYjB,CAAC;AAGF,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,8GAoBjB,CAAC;AAGF,UAAU,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,gHAUnB,CAAC;AAGF,UAAU,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,iHAWnB,CAAC;AAGH,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,8GAchB,CAAC;AAGH,UAAU,uBAAwB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,kBAAkB,oHAUvB,CAAC;AAGF,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,eAAe,EACf,YAAY,EACZ,kBAAkB,GACnB,CAAC"}

package/dist/components/ui/skeleton.js

@@ -1,103 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { cn } from "../../utils/cn.js";
-const Skeleton = forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("animate-pulse rounded-md bg-ods-border", className), ...props });
-});
-Skeleton.displayName = "Skeleton";
-const SkeletonText = forwardRef(({ lines = 1, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      className: cn(
-        "h-4",
-        i === lines - 1 && lines > 1 && "w-3/4"
-        // Last line shorter for multi-line
-      )
-    },
-    i
-  )) });
-});
-SkeletonText.displayName = "SkeletonText";
-const SkeletonCard = forwardRef(
-  ({ showImage = false, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("overflow-hidden rounded-lg border border-ods-border", className), ...props, children: [
-      showImage && /* @__PURE__ */ jsx(Skeleton, { className: "h-48 w-full" }),
-      /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "mb-4 h-6 w-3/4" }),
-        /* @__PURE__ */ jsx(SkeletonText, { lines: 3 })
-      ] })
-    ] });
-  }
-);
-SkeletonCard.displayName = "SkeletonCard";
-const SkeletonGrid = forwardRef(
-  ({ columns = 3, items = 6, showImages = false, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          `grid grid-cols-1 gap-6`,
-          columns === 2 && "content-md:grid-cols-2",
-          columns === 3 && "content-md:grid-cols-3",
-          columns === 4 && "content-md:grid-cols-4",
-          className
-        ),
-        ...props,
-        children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx(SkeletonCard, { showImage: showImages }, i))
-      }
-    );
-  }
-);
-SkeletonGrid.displayName = "SkeletonGrid";
-const SkeletonButton = forwardRef(
-  ({ size = "default", className, ...props }, ref) => {
-    const sizeClasses = {
-      sm: "h-8 w-20",
-      default: "h-10 w-32",
-      lg: "h-12 w-40"
-    };
-    return /* @__PURE__ */ jsx(Skeleton, { ref, className: cn("rounded-lg", sizeClasses[size], className), ...props });
-  }
-);
-SkeletonButton.displayName = "SkeletonButton";
-const SkeletonHeading = forwardRef(({ level = 1, className, ...props }, ref) => {
-  const heightClasses = {
-    1: "h-12",
-    2: "h-10",
-    3: "h-8",
-    4: "h-7",
-    5: "h-6",
-    6: "h-5"
-  };
-  return /* @__PURE__ */ jsx(Skeleton, { ref, className: cn(heightClasses[level], "w-3/4", className), ...props });
-});
-SkeletonHeading.displayName = "SkeletonHeading";
-const SkeletonList = forwardRef(({ items = 5, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 flex-shrink-0 rounded-full" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "mb-1 h-4 w-1/3" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })
-    ] })
-  ] }, i)) });
-});
-SkeletonList.displayName = "SkeletonList";
-const SkeletonNavigation = forwardRef(
-  ({ items = 6, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-6", className), ...props, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-20" }, i)) });
-  }
-);
-SkeletonNavigation.displayName = "SkeletonNavigation";
-export {
-  Skeleton,
-  SkeletonButton,
-  SkeletonCard,
-  SkeletonGrid,
-  SkeletonHeading,
-  SkeletonList,
-  SkeletonNavigation,
-  SkeletonText
-};

package/dist/components/vendor-page-skeleton.d.ts

@@ -1,2 +0,0 @@
-export declare function VendorPageSkeleton(): import("react").JSX.Element;
-//# sourceMappingURL=vendor-page-skeleton.d.ts.map

package/dist/components/vendor-page-skeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vendor-page-skeleton.d.ts","sourceRoot":"","sources":["../../src/components/vendor-page-skeleton.tsx"],"names":[],"mappings":"AAIA,wBAAgB,kBAAkB,gCAEjC"}

package/dist/components/vendor-page-skeleton.js

@@ -1,9 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { VendorDetailLayoutSkeleton } from "./loading/index.js";
-function VendorPageSkeleton() {
-  return /* @__PURE__ */ jsx(VendorDetailLayoutSkeleton, {});
-}
-export {
-  VendorPageSkeleton
-};

package/src/components/dynamic-skeleton.tsx

@@ -1,365 +0,0 @@
-'use client';
-
-import React from 'react';
-import { useThemeAware } from '../hooks/use-theme-aware';
-import { cn } from '../utils/cn';
-
-interface DynamicSkeletonProps {
-  /**
-   * Type of skeleton animation
-   */
-  animation?: 'pulse' | 'shimmer' | 'wave' | 'static';
-
-  /**
-   * Skeleton variant based on content type
-   */
-  variant?: 'text' | 'avatar' | 'card' | 'button' | 'image' | 'custom';
-
-  /**
-   * Size preset for common elements
-   */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-
-  /**
-   * Custom dimensions
-   */
-  width?: string | number;
-  height?: string | number;
-
-  /**
-   * Number of lines for text skeleton
-   */
-  lines?: number;
-
-  /**
-   * Platform-aware styling
-   */
-  platformAware?: boolean;
-
-  /**
-   * Accessibility enhancements
-   */
-  includeAriaLabel?: boolean;
-
-  /**
-   * Custom CSS classes
-   */
-  className?: string;
-
-  /**
-   * Child elements (for container skeletons)
-   */
-  children?: React.ReactNode;
-}
-
-const sizePresets = {
-  sm: { width: '4rem', height: '1rem' },
-  md: { width: '8rem', height: '1.5rem' },
-  lg: { width: '12rem', height: '2rem' },
-  xl: { width: '16rem', height: '2.5rem' },
-};
-
-const variantStyles = {
-  text: 'rounded',
-  avatar: 'rounded-full aspect-square',
-  card: 'rounded-lg',
-  button: 'rounded-md',
-  image: 'rounded-lg aspect-video',
-  custom: '',
-};
-
-export function DynamicSkeleton({
-  animation = 'shimmer',
-  variant = 'text',
-  size = 'md',
-  width,
-  height,
-  lines = 1,
-  platformAware = true,
-  includeAriaLabel = true,
-  className,
-  children,
-}: DynamicSkeletonProps) {
-  const { platform, isDark, accentColor } = useThemeAware();
-
-  // Calculate dimensions
-  const dimensions = React.useMemo(() => {
-    if (width || height) {
-      return {
-        width: typeof width === 'number' ? `${width}px` : width,
-        height: typeof height === 'number' ? `${height}px` : height,
-      };
-    }
-
-    if (variant === 'avatar') {
-      const avatarSize = sizePresets[size].height;
-      return { width: avatarSize, height: avatarSize };
-    }
-
-    return sizePresets[size];
-  }, [width, height, size, variant]);
-
-  // Platform-specific skeleton colors
-  const platformStyles = React.useMemo(() => {
-    if (!platformAware) return {};
-
-    const baseOpacity = isDark ? 0.1 : 0.15;
-    const accentOpacity = isDark ? 0.05 : 0.08;
-
-    return {
-      '--skeleton-base': `color-mix(in srgb, var(--color-bg-skeleton) ${baseOpacity * 100}%, transparent)`,
-      '--skeleton-highlight': `color-mix(in srgb, ${accentColor} ${accentOpacity * 100}%, var(--color-bg-skeleton))`,
-      '--skeleton-accent': `color-mix(in srgb, ${accentColor} 10%, transparent)`,
-    } as React.CSSProperties;
-  }, [platformAware, isDark, accentColor]);
-
-  // Animation classes
-  const animationClasses = {
-    pulse: 'animate-pulse',
-    shimmer: 'ods-loading-dynamic',
-    wave: 'skeleton-wave',
-    static: '',
-  };
-
-  // Base skeleton classes
-  const baseClasses = cn(
-    'bg-ods-skeleton',
-    variantStyles[variant],
-    animationClasses[animation],
-    platformAware && `skeleton-platform-${platform}`,
-    className,
-  );
-
-  // For text skeletons with multiple lines
-  if (variant === 'text' && lines > 1) {
-    return (
-      <div
-        className="space-y-2"
-        style={platformStyles}
-        role="status"
-        aria-label={includeAriaLabel ? 'Loading content...' : undefined}
-      >
-        {Array.from({ length: lines }, (_, index) => (
-          <div
-            key={index}
-            className={cn(
-              baseClasses,
-              index === lines - 1 && 'w-3/4', // Last line shorter
-            )}
-            style={{
-              ...dimensions,
-              width: index === lines - 1 ? '75%' : dimensions.width,
-            }}
-          />
-        ))}
-      </div>
-    );
-  }
-
-  // Single skeleton element
-  return (
-    <div
-      className={baseClasses}
-      style={{ ...dimensions, ...platformStyles }}
-      role="status"
-      aria-label={includeAriaLabel ? 'Loading content...' : undefined}
-    >
-      {children}
-    </div>
-  );
-}
-
-/**
- * Pre-configured skeleton for common UI patterns
- */
-export const SkeletonPresets = {
-  /**
-   * Card skeleton with header, content, and actions
-   */
-  Card: ({ showActions = true, showImage = false }: { showActions?: boolean; showImage?: boolean }) => (
-    <div className="space-y-4 rounded-lg border border-ods-border bg-ods-card p-6">
-      {showImage && <DynamicSkeleton variant="image" className="h-40 w-full" />}
-      <div className="space-y-2">
-        <DynamicSkeleton variant="text" size="lg" />
-        <DynamicSkeleton variant="text" lines={2} size="md" />
-      </div>
-      {showActions && (
-        <div className="flex gap-2 pt-2">
-          <DynamicSkeleton variant="button" width="6rem" height="2.5rem" />
-          <DynamicSkeleton variant="button" width="4rem" height="2.5rem" />
-        </div>
-      )}
-    </div>
-  ),
-
-  /**
-   * User profile skeleton
-   */
-  Profile: () => (
-    <div className="flex items-start gap-4 p-4">
-      <DynamicSkeleton variant="avatar" size="lg" />
-      <div className="flex-1 space-y-2">
-        <DynamicSkeleton variant="text" size="lg" width="8rem" />
-        <DynamicSkeleton variant="text" size="sm" width="12rem" />
-        <DynamicSkeleton variant="text" lines={2} size="md" />
-      </div>
-    </div>
-  ),
-
-  /**
-   * Navigation skeleton
-   */
-  Navigation: ({ items = 5 }: { items?: number }) => (
-    <nav className="space-y-2 p-4">
-      {Array.from({ length: items }, (_, index) => (
-        <div key={index} className="flex items-center gap-3">
-          <DynamicSkeleton variant="avatar" size="sm" />
-          <DynamicSkeleton variant="text" size="md" />
-        </div>
-      ))}
-    </nav>
-  ),
-
-  /**
-   * Table skeleton
-   */
-  Table: ({ rows = 5, columns = 4 }: { rows?: number; columns?: number }) => (
-    <div className="space-y-3">
-      {/* Header */}
-      <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
-        {Array.from({ length: columns }, (_, index) => (
-          <DynamicSkeleton key={`header-${index}`} variant="text" size="md" />
-        ))}
-      </div>
-      {/* Rows */}
-      {Array.from({ length: rows }, (_, rowIndex) => (
-        <div key={`row-${rowIndex}`} className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
-          {Array.from({ length: columns }, (_cell, colIndex) => (
-            <DynamicSkeleton key={`cell-${rowIndex}-${colIndex}`} variant="text" size="sm" />
-          ))}
-        </div>
-      ))}
-    </div>
-  ),
-
-  /**
-   * Vendor grid skeleton (specific to the app)
-   */
-  VendorGrid: ({ items = 6 }: { items?: number }) => (
-    <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3">
-      {Array.from({ length: items }, (_, index) => (
-        <div key={index} className="space-y-3 rounded-lg border border-ods-border bg-ods-card p-4">
-          <div className="flex items-center gap-3">
-            <DynamicSkeleton variant="avatar" size="md" />
-            <div className="flex-1">
-              <DynamicSkeleton variant="text" size="md" width="6rem" />
-              <DynamicSkeleton variant="text" size="sm" width="4rem" className="mt-1" />
-            </div>
-          </div>
-          <DynamicSkeleton variant="text" lines={2} size="sm" />
-          <div className="flex gap-2">
-            <DynamicSkeleton variant="custom" width="3rem" height="1.25rem" className="rounded-full" />
-            <DynamicSkeleton variant="custom" width="4rem" height="1.25rem" className="rounded-full" />
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-
-  /**
-   * Blog post skeleton
-   */
-  BlogPost: () => (
-    <article className="space-y-6">
-      <div className="space-y-2">
-        <DynamicSkeleton variant="text" size="xl" width="75%" />
-        <div className="flex gap-4 text-sm">
-          <DynamicSkeleton variant="text" size="sm" width="4rem" />
-          <DynamicSkeleton variant="text" size="sm" width="6rem" />
-        </div>
-      </div>
-      <DynamicSkeleton variant="image" className="h-64 w-full" />
-      <div className="space-y-3">
-        {Array.from({ length: 4 }, (_, index) => (
-          <DynamicSkeleton key={index} variant="text" lines={3} size="md" />
-        ))}
-      </div>
-    </article>
-  ),
-};
-
-/** Every preset's props merged into one all-optional bag. */
-export interface SkeletonPresetProps {
-  showActions?: boolean;
-  showImage?: boolean;
-  items?: number;
-  rows?: number;
-  columns?: number;
-}
-
-/**
- * Platform-aware loading container that shows different skeletons based on platform
- */
-export function PlatformSkeletonContainer({
-  children,
-  isLoading,
-  skeletonType = 'Card',
-  skeletonProps = {},
-}: {
-  children: React.ReactNode;
-  isLoading: boolean;
-  skeletonType?: keyof typeof SkeletonPresets;
-  /** Props for the chosen preset. Every preset takes an all-optional bag, so
-   *  the union of them is what any one of them accepts. */
-  skeletonProps?: SkeletonPresetProps;
-}) {
-  const { platform } = useThemeAware();
-
-  if (!isLoading) {
-    return <>{children}</>;
-  }
-
-  const SkeletonComponent = SkeletonPresets[skeletonType];
-
-  return (
-    <div className={`platform-skeleton skeleton-${platform}`}>
-      <SkeletonComponent {...skeletonProps} />
-    </div>
-  );
-}
-
-/**
- * Enhanced skeleton with progressive enhancement
- */
-export function ProgressiveSkeleton({
-  // Named only to keep it out of the `...props` spread: the stage NAMES are
-  // unused, `currentStage` alone selects the skeleton shape below.
-  stages: _stages = ['basic', 'detailed', 'interactive'],
-  currentStage = 0,
-  children,
-  ...props
-}: DynamicSkeletonProps & {
-  stages?: string[];
-  currentStage?: number;
-}) {
-  const { platform } = useThemeAware();
-
-  // Show more detailed skeleton as loading progresses
-  const stageConfig = {
-    0: { animation: 'pulse' as const, variant: 'text' as const },
-    1: { animation: 'shimmer' as const, variant: 'card' as const },
-    2: { animation: 'wave' as const, variant: 'custom' as const },
-  };
-
-  const config = stageConfig[currentStage as keyof typeof stageConfig] || stageConfig[0];
-
-  return (
-    <DynamicSkeleton
-      {...props}
-      {...config}
-      className={cn(props.className, `skeleton-stage-${currentStage}`, `skeleton-platform-${platform}`)}
-    >
-      {children}
-    </DynamicSkeleton>
-  );
-}