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

package/src/components/loading/content-skeleton.tsx

@@ -1,374 +0,0 @@
-import { cn } from '../../utils/cn';
-import { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from './unified-skeleton';
-
-interface ContentSkeletonProps {
-  className?: string;
-}
-
-/**
- * Paragraph skeleton with varying line lengths for natural appearance
- */
-export function ParagraphSkeleton({ className, lines = 4 }: ContentSkeletonProps & { lines?: number }) {
-  const lineWidths = ['w-full', 'w-full', 'w-5/6', 'w-3/4', 'w-4/5', 'w-2/3'];
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      {Array.from({ length: lines }).map((_, index) => (
-        <TextSkeleton.Body key={index} className={lineWidths[index % lineWidths.length]} />
-      ))}
-    </div>
-  );
-}
-
-/**
- * List skeleton for navigation menus, categories, etc.
- */
-export function ListSkeleton({
-  className,
-  items = 5,
-  showIcons = false,
-  showActions = false,
-}: ContentSkeletonProps & {
-  items?: number;
-  showIcons?: boolean;
-  showActions?: boolean;
-}) {
-  return (
-    <div className={cn('space-y-3', className)}>
-      {Array.from({ length: items }).map((_, index) => (
-        <div key={index} className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            {showIcons && <MediaSkeleton.Icon size="sm" />}
-            <TextSkeleton.Body className="w-32 content-md:w-48" />
-          </div>
-          {showActions && (
-            <div className="flex items-center gap-2">
-              <TextSkeleton.Caption className="w-8" />
-              <UnifiedSkeleton variant="default" className="h-4 w-4" />
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-/**
- * Table skeleton for data displays
- */
-export function TableSkeleton({
-  className,
-  rows = 5,
-  columns = 4,
-}: ContentSkeletonProps & {
-  rows?: number;
-  columns?: number;
-}) {
-  return (
-    <div className={cn('space-y-4', className)}>
-      {/* Table header */}
-      <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
-        {Array.from({ length: columns }).map((_, index) => (
-          <TextSkeleton.Subheading key={index} className="w-3/4" />
-        ))}
-      </div>
-
-      {/* Table rows */}
-      <div className="space-y-3">
-        {Array.from({ length: rows }).map((_, rowIndex) => (
-          <div
-            key={rowIndex}
-            className="grid gap-4 border-b border-ods-divider py-2"
-            style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
-          >
-            {Array.from({ length: columns }).map((_cell, colIndex) => (
-              <TextSkeleton.Body key={colIndex} className="w-2/3" />
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Form skeleton for input fields and form layouts
- */
-export function FormSkeleton({ className, fields = 4 }: ContentSkeletonProps & { fields?: number }) {
-  return (
-    <div className={cn('space-y-6', className)}>
-      {Array.from({ length: fields }).map((_, index) => (
-        <div key={index} className="space-y-2">
-          <TextSkeleton.Body className="w-24" />
-          <InteractiveSkeleton.Input />
-          {index % 3 === 0 && <TextSkeleton.Caption className="w-48" />}
-        </div>
-      ))}
-
-      <div className="flex gap-4 pt-4">
-        <InteractiveSkeleton.Button />
-        <InteractiveSkeleton.Button className="bg-ods-border" />
-      </div>
-    </div>
-  );
-}
-
-/**
- * Navigation menu skeleton
- */
-export function NavigationSkeleton({
-  className,
-  items = 6,
-  horizontal = true,
-}: ContentSkeletonProps & {
-  items?: number;
-  horizontal?: boolean;
-}) {
-  return (
-    <nav
-      className={cn('flex gap-4 content-md:gap-6', !horizontal && 'flex-col', className)}
-      role="status"
-      aria-label="Loading navigation"
-    >
-      {Array.from({ length: items }).map((_, index) => (
-        <TextSkeleton.Body key={index} className="w-16 content-md:w-20" />
-      ))}
-    </nav>
-  );
-}
-
-/**
- * Profile/user info skeleton
- */
-export function ProfileSkeleton({
-  className,
-  showBio = true,
-  showStats = true,
-}: ContentSkeletonProps & {
-  showBio?: boolean;
-  showStats?: boolean;
-}) {
-  return (
-    <div className={cn('space-y-4', className)}>
-      {/* Avatar and basic info */}
-      <div className="flex items-start gap-4">
-        <MediaSkeleton.Avatar size="lg" />
-        <div className="flex-1 space-y-2">
-          <TextSkeleton.Subheading className="w-1/2" />
-          <TextSkeleton.Caption className="w-1/3" />
-          <TextSkeleton.Body className="w-2/3" />
-        </div>
-      </div>
-
-      {/* Bio/description */}
-      {showBio && (
-        <div className="space-y-2">
-          <TextSkeleton.Body className="w-full" />
-          <TextSkeleton.Body className="w-4/5" />
-          <TextSkeleton.Body className="w-3/4" />
-        </div>
-      )}
-
-      {/* Stats */}
-      {showStats && (
-        <div className="flex gap-6">
-          <div className="text-center">
-            <TextSkeleton.Subheading className="mx-auto w-8" />
-            <TextSkeleton.Caption className="mx-auto w-12" />
-          </div>
-          <div className="text-center">
-            <TextSkeleton.Subheading className="mx-auto w-8" />
-            <TextSkeleton.Caption className="mx-auto w-16" />
-          </div>
-          <div className="text-center">
-            <TextSkeleton.Subheading className="mx-auto w-8" />
-            <TextSkeleton.Caption className="mx-auto w-14" />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Comment/review skeleton for user-generated content
- */
-export function CommentSkeleton({
-  className,
-  showRating = false,
-  showReplies = false,
-}: ContentSkeletonProps & {
-  showRating?: boolean;
-  showReplies?: boolean;
-}) {
-  return (
-    <div className={cn('space-y-3', className)}>
-      {/* User info */}
-      <div className="flex items-center gap-3">
-        <MediaSkeleton.Avatar size="sm" />
-        <div className="flex flex-1 items-center gap-4">
-          <TextSkeleton.Body className="w-24" />
-          <TextSkeleton.Caption className="w-16" />
-          {showRating && (
-            <div className="flex gap-1">
-              {Array.from({ length: 5 }).map((_, i) => (
-                <MediaSkeleton.Icon key={i} size="sm" />
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Comment content */}
-      <div className="ml-11 space-y-2">
-        <TextSkeleton.Body className="w-full" />
-        <TextSkeleton.Body className="w-3/4" />
-        <TextSkeleton.Body className="w-1/2" />
-      </div>
-
-      {/* Actions */}
-      <div className="ml-11 flex gap-4">
-        <TextSkeleton.Caption className="w-12" />
-        <TextSkeleton.Caption className="w-16" />
-        <TextSkeleton.Caption className="w-8" />
-      </div>
-
-      {/* Replies */}
-      {showReplies && (
-        <div className="ml-11 space-y-4 border-l border-ods-divider pl-4">
-          {Array.from({ length: 2 }).map((_, index) => (
-            <div key={index} className="space-y-2">
-              <div className="flex items-center gap-3">
-                <MediaSkeleton.Avatar size="sm" />
-                <TextSkeleton.Body className="w-20" />
-                <TextSkeleton.Caption className="w-12" />
-              </div>
-              <div className="ml-11">
-                <TextSkeleton.Body className="w-full" />
-                <TextSkeleton.Body className="w-2/3" />
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Feature list skeleton for product features, specifications, etc.
- */
-export function FeatureListSkeleton({
-  className,
-  features = 6,
-  showIcons = true,
-  grouped = false,
-}: ContentSkeletonProps & {
-  features?: number;
-  showIcons?: boolean;
-  grouped?: boolean;
-}) {
-  if (grouped) {
-    // Grouped features with sections
-    return (
-      <div className={cn('space-y-6', className)}>
-        {Array.from({ length: 3 }).map((_, groupIndex) => (
-          <div key={groupIndex} className="space-y-3">
-            <TextSkeleton.Subheading className="w-1/3" />
-            <div className="space-y-2">
-              {Array.from({ length: features / 3 }).map((_feature, featureIndex) => (
-                <div key={featureIndex} className="flex items-center gap-3">
-                  {showIcons && <MediaSkeleton.Icon size="sm" />}
-                  <TextSkeleton.Body className="w-2/3" />
-                </div>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  // Simple feature list
-  return (
-    <div className={cn('space-y-3', className)}>
-      {Array.from({ length: features }).map((_, index) => (
-        <div key={index} className="flex items-center gap-3">
-          {showIcons && <MediaSkeleton.Icon size="sm" />}
-          <TextSkeleton.Body className="w-2/3" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-/**
- * Timeline/activity skeleton
- */
-export function TimelineSkeleton({ className, items = 5 }: ContentSkeletonProps & { items?: number }) {
-  return (
-    <div className={cn('space-y-6', className)}>
-      {Array.from({ length: items }).map((_, index) => (
-        <div key={index} className="flex gap-4">
-          <div className="flex flex-col items-center">
-            <MediaSkeleton.Icon size="sm" />
-            {index < items - 1 && <div className="mt-2 h-12 w-px bg-ods-border" />}
-          </div>
-          <div className="flex-1 space-y-2">
-            <div className="flex items-center gap-3">
-              <TextSkeleton.Body className="w-1/3" />
-              <TextSkeleton.Caption className="w-16" />
-            </div>
-            <TextSkeleton.Body className="w-full" />
-            <TextSkeleton.Body className="w-3/4" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-/**
- * Pricing/plan skeleton
- */
-export function PricingSkeleton({ className, plans = 3 }: ContentSkeletonProps & { plans?: number }) {
-  return (
-    <div
-      className={cn(
-        'grid gap-6',
-        plans === 2 && 'grid-cols-1 content-md:grid-cols-2',
-        plans === 3 && 'grid-cols-1 content-md:grid-cols-3',
-        plans === 4 && 'grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4',
-        className,
-      )}
-    >
-      {Array.from({ length: plans }).map((_, index) => (
-        <div key={index} className="rounded-lg border border-ods-border bg-ods-card p-6">
-          <div className="space-y-4">
-            {/* Plan name */}
-            <TextSkeleton.Subheading className="w-1/2" />
-
-            {/* Price */}
-            <div className="space-y-1">
-              <TextSkeleton.Heading className="w-1/3" />
-              <TextSkeleton.Caption className="w-1/4" />
-            </div>
-
-            {/* Features */}
-            <div className="space-y-3 py-4">
-              {Array.from({ length: 5 }).map((_feature, featureIndex) => (
-                <div key={featureIndex} className="flex items-center gap-2">
-                  <MediaSkeleton.Icon size="sm" />
-                  <TextSkeleton.Body className="w-3/4" />
-                </div>
-              ))}
-            </div>
-
-            {/* CTA Button */}
-            <InteractiveSkeleton.Button className="w-full" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/loading/users-grid-skeleton.tsx

@@ -1,36 +0,0 @@
-import { cn } from '../../utils/cn';
-
-interface Props {
-  rows?: number;
-  className?: string;
-}
-
-export function UsersGridSkeleton({ rows = 10, className }: Props) {
-  const skeletonRows = Array.from({ length: rows });
-  return (
-    <div className={cn('animate-pulse overflow-x-auto rounded-lg border border-ods-border bg-ods-card', className)}>
-      <table className="min-w-full divide-y divide-ods-border">
-        <thead className="bg-ods-skeleton">
-          <tr>
-            {['Name', 'Email', 'Role', 'Created', 'Last Sign-In'].map(h => (
-              <th key={h} className="px-4 py-3 text-left text-ods-text-primary text-h6">
-                {h}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-ods-border">
-          {skeletonRows.map((_, idx) => (
-            <tr key={idx}>
-              {Array.from({ length: 5 }).map((__, cell) => (
-                <td key={cell} className="whitespace-nowrap px-4 py-3">
-                  <div className="h-4 w-full rounded bg-ods-border"></div>
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/src/components/shared/product-release/release-detail-skeleton.tsx

@@ -1,7 +0,0 @@
-'use client';
-
-import { DetailPageSkeleton } from '../detail-page-skeleton';
-
-export function ReleaseDetailSkeleton() {
-  return <DetailPageSkeleton metadataColumns={4} showImageGallery={true} />;
-}

package/src/components/skeleton.tsx

@@ -1,8 +0,0 @@
-import type React from 'react';
-import { cn } from '../utils/cn';
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('animate-pulse rounded-md bg-muted/60', className)} {...props} />;
-}
-
-export { Skeleton };

package/src/components/ui/skeleton.tsx

@@ -1,173 +0,0 @@
-'use client';
-
-import { type HTMLAttributes, forwardRef } from 'react';
-import { cn } from '../../utils/cn';
-
-interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-}
-
-const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(({ className, ...props }, ref) => {
-  return <div ref={ref} className={cn('animate-pulse rounded-md bg-ods-border', className)} {...props} />;
-});
-Skeleton.displayName = 'Skeleton';
-
-interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
-  lines?: number;
-  className?: string;
-}
-
-const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(({ lines = 1, className, ...props }, ref) => {
-  return (
-    <div ref={ref} className={cn('space-y-2', className)} {...props}>
-      {Array.from({ length: lines }).map((_, i) => (
-        <Skeleton
-          key={i}
-          className={cn(
-            'h-4',
-            i === lines - 1 && lines > 1 && 'w-3/4', // Last line shorter for multi-line
-          )}
-        />
-      ))}
-    </div>
-  );
-});
-SkeletonText.displayName = 'SkeletonText';
-
-interface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {
-  showImage?: boolean;
-  className?: string;
-}
-
-const SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(
-  ({ showImage = false, className, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn('overflow-hidden rounded-lg border border-ods-border', className)} {...props}>
-        {showImage && <Skeleton className="h-48 w-full" />}
-        <div className="p-6">
-          <Skeleton className="mb-4 h-6 w-3/4" />
-          <SkeletonText lines={3} />
-        </div>
-      </div>
-    );
-  },
-);
-SkeletonCard.displayName = 'SkeletonCard';
-
-interface SkeletonGridProps extends HTMLAttributes<HTMLDivElement> {
-  columns?: number;
-  items?: number;
-  showImages?: boolean;
-  className?: string;
-}
-
-const SkeletonGrid = forwardRef<HTMLDivElement, SkeletonGridProps>(
-  ({ columns = 3, items = 6, showImages = false, className, ...props }, ref) => {
-    return (
-      <div
-        ref={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}
-      >
-        {Array.from({ length: items }).map((_, i) => (
-          <SkeletonCard key={i} showImage={showImages} />
-        ))}
-      </div>
-    );
-  },
-);
-SkeletonGrid.displayName = 'SkeletonGrid';
-
-interface SkeletonButtonProps extends HTMLAttributes<HTMLDivElement> {
-  size?: 'sm' | 'default' | 'lg';
-  className?: string;
-}
-
-const SkeletonButton = forwardRef<HTMLDivElement, SkeletonButtonProps>(
-  ({ size = 'default', className, ...props }, ref) => {
-    const sizeClasses = {
-      sm: 'h-8 w-20',
-      default: 'h-10 w-32',
-      lg: 'h-12 w-40',
-    };
-
-    return <Skeleton ref={ref} className={cn('rounded-lg', sizeClasses[size], className)} {...props} />;
-  },
-);
-SkeletonButton.displayName = 'SkeletonButton';
-
-interface SkeletonHeadingProps extends HTMLAttributes<HTMLDivElement> {
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  className?: string;
-}
-
-const SkeletonHeading = forwardRef<HTMLDivElement, SkeletonHeadingProps>(({ 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 <Skeleton ref={ref} className={cn(heightClasses[level], 'w-3/4', className)} {...props} />;
-});
-SkeletonHeading.displayName = 'SkeletonHeading';
-
-interface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {
-  items?: number;
-  className?: string;
-}
-
-const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(({ items = 5, className, ...props }, ref) => {
-  return (
-    <div ref={ref} className={cn('space-y-3', className)} {...props}>
-      {Array.from({ length: items }).map((_, i) => (
-        <div key={i} className="flex items-center gap-3">
-          <Skeleton className="h-10 w-10 flex-shrink-0 rounded-full" />
-          <div className="flex-1">
-            <Skeleton className="mb-1 h-4 w-1/3" />
-            <Skeleton className="h-3 w-1/2" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-});
-SkeletonList.displayName = 'SkeletonList';
-
-interface SkeletonNavigationProps extends HTMLAttributes<HTMLDivElement> {
-  items?: number;
-  className?: string;
-}
-
-const SkeletonNavigation = forwardRef<HTMLDivElement, SkeletonNavigationProps>(
-  ({ items = 6, className, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn('flex items-center gap-6', className)} {...props}>
-        {Array.from({ length: items }).map((_, i) => (
-          <Skeleton key={i} className="h-5 w-20" />
-        ))}
-      </div>
-    );
-  },
-);
-SkeletonNavigation.displayName = 'SkeletonNavigation';
-
-export {
-  Skeleton,
-  SkeletonText,
-  SkeletonCard,
-  SkeletonGrid,
-  SkeletonButton,
-  SkeletonHeading,
-  SkeletonList,
-  SkeletonNavigation,
-};

package/src/components/vendor-page-skeleton.tsx

@@ -1,7 +0,0 @@
-'use client';
-
-import { VendorDetailLayoutSkeleton } from './loading';
-
-export function VendorPageSkeleton() {
-  return <VendorDetailLayoutSkeleton />;
-}