@catalystsoftware/ui 1.0.5 → 1.0.6

package/data/media-data.tsx

@@ -1,1510 +0,0 @@
-export const componentsMedia = [
-    {
-        name: "Parallax Scroll",
-        value: "parallax-scroll",
-        importPath: "~/components/catalyst-ui/media/parallax-scroll",
-        multiImport: null,
-        basicusage: `
-<ParallaxScroll images={images} />
-
-<ParallaxScroll 
-  images={imageUrls} 
-  className="custom-height"
-/>`,
-        path: "/components/catalyst-ui/media/parallax-scroll.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/parallax-scroll.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["parallax", "scroll", "gallery", "animation"],
-        features: ["Scroll-triggered", "Parallax Effect", "Responsive", "TypeScript"],
-        dependencies: ["framer-motion", "react"],
-        props: {
-            "ParallaxScroll": [
-                { name: "images", type: "string[]", default: "required" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Carousel 2",
-        value: "carousel-2",
-        importPath: "~/components/catalyst-ui/media/carousel-2",
-        multiImport: "Carousel2, CarouselItem2, carouselVariants, carouselContentVariants, carouselItemVariants",
-        basicusage: `
-<Carousel2>
-  <div>Slide 1</div>
-  <div>Slide 2</div>
-  <div>Slide 3</div>
-</Carousel2>
-
-<Carousel2 
-	variant="default"
-	autoPlay={false}
-	autoPlayInterval={3000}
-	showControls={true}
-	showIndicators={true}
-	loop={true}
-	className=""
->
-  <div>Slide 1</div>
-  <div>Slide 2</div>
-  <div>Slide 3</div>
-</Carousel2>`,
-        path: "/components/catalyst-ui/media/carousel-2.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/carousel-2.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["media", "carousel", "slider", "slideshow", "gallery", "images"],
-        features: ["Responsive", "TypeScript", "Accessible", "Auto-Play", "Navigation Controls", "Indicators", "Loop Mode", "Hover Pause"],
-        dependencies: ["react", "class-variance-authority"],
-        props: {
-            "Carousel2": [
-                { name: "variant", type: "default | contained", default: "default" },
-                { name: "autoPlay", type: "boolean", default: "false" },
-                { name: "autoPlayInterval", type: "number", default: "3000" },
-                { name: "showControls", type: "boolean", default: "true" },
-                { name: "showIndicators", type: "boolean", default: "true" },
-                { name: "loop", type: "boolean", default: "true" },
-                { name: "className", type: "string", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" },
-            ],
-            "CarouselItem2": [
-                { name: "size", type: "sm | md | lg | full | auto", default: "md" },
-                { name: "className", type: "string", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: 'Interactive Icon Cloud',
-        value: 'interactive-icon-cloud',
-        importPath: '~/components/catalyst-ui/media/interactive-icon-cloud',
-        multiImport: 'InteractiveIconCloud, cloudProps, renderCustomIcon',
-        basicusage: `
-<InteractiveIconCloud iconSlugs={["typescript", "javascript", "react"]} />`,
-        path: '/components/catalyst-ui/media/icon-cloud.tsx',
-        source: null,
-        usagePath: '/components/catalyst-ui/media/interactive-icon-cloud.tsx',
-        usage: null,
-        premium: true,
-        category: 'Media',
-        tags: ['icon', 'cloud', '3d', 'interactive', 'animation', 'tech-stack'],
-        features: ['Responsive', 'TypeScript', 'Accessible', 'Interactive'],
-        dependencies: ['react', 'react-icon-cloud'],
-        props: {
-            InteractiveIconCloud: [
-                { name: 'iconSlugs', type: 'string[]', default: 'null' },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: 'Icon Cloud',
-        value: 'icon-cloud',
-        importPath: '~/components/catalyst-ui/media/icon-cloud',
-        multiImport: null,
-        basicusage: `
-<IconCloud images={["url1.png", "url2.png"]} />
-
-<IconCloud 
-  icons={[<Icon1 />, <Icon2 />]}
-  images={["url1.png", "url2.png"]}
-/>`,
-        path: '/components/catalyst-ui/media/icon-cloud.tsx',
-        source: null,
-        usagePath: '/components/catalyst-ui/media/icon-cloud.tsx',
-        usage: null,
-        premium: true,
-        category: 'Media',
-        tags: ['icon', 'cloud', '3d', 'interactive', 'canvas', 'animation'],
-        features: ['Responsive', 'TypeScript', 'Accessible', 'Interactive'],
-        dependencies: ['react', 'react-dom'],
-        props: {
-            IconCloud: [
-                { name: 'icons', type: 'React.ReactNode[]', default: 'null' },
-                { name: 'images', type: 'string[]', default: 'null' },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Marquee1",
-        value: "marquee1",
-        importPath: "~/components/catalyst-ui/media/marquee1",
-        multiImport: null,
-        basicusage: `
-<Marquee1>
-  <div>Content 1</div>
-  <div>Content 2</div>
-</Marquee1>
-
-<Marquee1 
-  reverse={false}
-  pauseOnHover={false}
-  vertical={false}
-  repeat={4}
-  className=""
->
-  <div>Custom Content 1</div>
-  <div>Custom Content 2</div>
-</Marquee1>`,
-        path: "/components/catalyst-ui/media/marquee1.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/marquee1.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["marquee", "scrolling", "animation", "carousel"],
-        features: ["TypeScript", "Responsive", "Customizable"],
-        dependencies: ["react"],
-        props: {
-            "Marquee1": [
-                { name: "className", type: "string", default: "null" },
-                { name: "reverse", type: "boolean", default: "false" },
-                { name: "pauseOnHover", type: "boolean", default: "false" },
-                { name: "children", type: "React.ReactNode", default: "null" },
-                { name: "vertical", type: "boolean", default: "false" },
-                { name: "repeat", type: "number", default: "4" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Pixel Image",
-        value: "pixel-image",
-        importPath: "~/components/catalyst-ui/media/pixel-image",
-        multiImport: null,
-        basicusage: null,
-        path: "/components/catalyst-ui/media/pixel-image.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/pixel-image.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["image", "pixel", "animation", "reveal", "interactive"],
-        features: ["Grid-based Animation", "Grayscale Transition", "Customizable Timing", "Replay Functionality"],
-        dependencies: ["react"],
-        props: {
-            "PixelImage": [
-                { name: "src", type: "string", default: "null" },
-                { name: "grid", type: "PredefinedGridKey", default: "6x4" },
-                { name: "customGrid", type: "Grid", default: "null" },
-                { name: "grayscaleAnimation", type: "boolean", default: "true" },
-                { name: "pixelFadeInDuration", type: "number", default: "1000" },
-                { name: "maxAnimationDelay", type: "number", default: "1200" },
-                { name: "colorRevealDelay", type: "number", default: "1300" },
-                { name: "showReplayButton", type: "boolean", default: "false" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Marquee",
-        value: "marquee",
-        importPath: "~/components/catalyst-ui/media/marquee",
-        multiImport: null,
-        basicusage: null,
-        path: "/components/catalyst-ui/media/marquee.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/marquee.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["marquee", "scrolling", "animation", "content", "loop"],
-        features: ["Auto-fill", "Pause on Hover", "Custom Speed", "Fade Effects"],
-        dependencies: ["react-fast-marquee", "react"],
-        props: {
-            "Marquee": [
-                { name: "content", type: "ReactNode[]", default: "null" },
-                { name: "loop", type: "number", default: "0" },
-                { name: "autoFill", type: "boolean", default: "true" },
-                { name: "pauseOnHover", type: "boolean", default: "true" },
-                { name: "speed", type: "number", default: "50" },
-                { name: "showFade", type: "boolean", default: "true" },
-                { name: "className", type: "string", default: "null" },
-                { name: "fadeClassName", type: "string", default: "null" },
-                { name: "itemClassName", type: "string", default: "null" },
-                { name: "marqueeProps", type: "Omit<FastMarqueeProps, 'children' | 'loop' | 'autoFill' | 'pauseOnHover' | 'speed'>", default: "null" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Image Crop",
-        value: "image-crop",
-        importPath: "~/components/catalyst-ui/media/image-crop",
-        multiImport: "ImageCrop, ImageCropContent, ImageCropApply, ImageCropReset, Cropper",
-        basicusage: null,
-        path: "/components/catalyst-ui/media/image-crop.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/image-crop.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["image", "crop", "editor", "interactive", "upload"],
-        features: ["Aspect Ratio Control", "File Size Optimization", "Real-time Preview", "Reset Functionality"],
-        dependencies: ["react-image-crop", "lucide-react", "@radix-ui/react-slot", "react"],
-        props: {
-            "ImageCrop": [
-                { name: "file", type: "File", default: "null" },
-                { name: "maxImageSize", type: "number", default: "1024 * 1024 * 5" },
-                { name: "onCrop", type: "(croppedImage: string) => void", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" },
-                { name: "onChange", type: "ReactCropProps['onChange']", default: "null" },
-                { name: "onComplete", type: "ReactCropProps['onComplete']", default: "null" },
-                { name: "aspect", type: "number", default: "null" },
-                { name: "minWidth", type: "number", default: "null" },
-                { name: "minHeight", type: "number", default: "null" }
-            ],
-            "ImageCropContent": [
-                { name: "style", type: "CSSProperties", default: "null" },
-                { name: "className", type: "string", default: "null" }
-            ],
-            "ImageCropApply": [
-                { name: "asChild", type: "boolean", default: "false" },
-                { name: "children", type: "ReactNode", default: "null" },
-                { name: "onClick", type: "MouseEventHandler<HTMLButtonElement>", default: "null" }
-            ],
-            "ImageCropReset": [
-                { name: "asChild", type: "boolean", default: "false" },
-                { name: "children", type: "ReactNode", default: "null" },
-                { name: "onClick", type: "MouseEventHandler<HTMLButtonElement>", default: "null" }
-            ],
-            "Cropper": [
-                { name: "file", type: "File", default: "null" },
-                { name: "maxImageSize", type: "number", default: "null" },
-                { name: "onCrop", type: "(croppedImage: string) => void", default: "null" },
-                { name: "onChange", type: "ReactCropProps['onChange']", default: "null" },
-                { name: "onComplete", type: "ReactCropProps['onComplete']", default: "null" },
-                { name: "style", type: "CSSProperties", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "aspect", type: "number", default: "null" },
-                { name: "minWidth", type: "number", default: "null" },
-                { name: "minHeight", type: "number", default: "null" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Image Zoom",
-        value: "image-zoom",
-        importPath: "~/components/catalyst-ui/media/image-zoom",
-        multiImport: null,
-        basicusage: null,
-        path: "/components/catalyst-ui/media/image-zoom.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/image-zoom.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["image", "zoom", "interactive", "modal", "accessibility"],
-        features: ["Smooth Zooming", "Backdrop Blur", "Keyboard Navigation", "Responsive"],
-        dependencies: ["react-medium-image-zoom", "react"],
-        props: {
-            "ImageZoom": [
-                { name: "className", type: "string", default: "null" },
-                { name: "backdropClassName", type: "string", default: "null" },
-                { name: "isZoomed", type: "boolean", default: "null" },
-                { name: "onZoomChange", type: "(isZoomed: boolean) => void", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" },
-                { name: "zoomMargin", type: "number", default: "null" },
-                { name: "zoomZIndex", type: "number", default: "null" },
-                { name: "IconZoom", type: "ReactNode", default: "null" },
-                { name: "IconUnzoom", type: "ReactNode", default: "null" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Image Comparison",
-        value: "image-comparison",
-        importPath: "~/components/catalyst-ui/media/image-comparison",
-        multiImport: "Comparison, ComparisonItem, ComparisonHandle",
-        basicusage: null,
-        path: "/components/catalyst-ui/media/image-comparison.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/image-comparison.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["image", "comparison", "slider", "interactive", "drag"],
-        features: ["Drag & Hover Modes", "Smooth Animations", "Touch Support", "Accessible"],
-        dependencies: ["motion/react", "lucide-react", "react"],
-        props: {
-            "Comparison": [
-                { name: "className", type: "string", default: "null" },
-                { name: "mode", type: "hover | drag", default: "drag" },
-                { name: "onDragStart", type: "() => void", default: "null" },
-                { name: "onDragEnd", type: "() => void", default: "null" }
-            ],
-            "ComparisonItem": [
-                { name: "className", type: "string", default: "null" },
-                { name: "position", type: "left | right", default: "null" }
-            ],
-            "ComparisonHandle": [
-                { name: "className", type: "string", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Carousel",
-        value: "carousel",
-        importPath: "~/components/catalyst-ui/media/carousel",
-        multiImport: "Carousel, CarouselItem",
-        basicusage: null,
-        path: "/components/catalyst-ui/media/carousel.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/carousel.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["carousel", "slider", "images", "auto-play", "navigation"],
-        features: ["Auto-Play", "Responsive", "Customizable Controls", "Loop Mode"],
-        dependencies: ["class-variance-authority", "react"],
-        props: {
-            "Carousel": [
-                { name: "children", type: "React.ReactNode", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "variant", type: "default | contained", default: "default" },
-                { name: "autoPlay", type: "boolean", default: "false" },
-                { name: "autoPlayInterval", type: "number", default: "3000" },
-                { name: "showControls", type: "boolean", default: "true" },
-                { name: "showIndicators", type: "boolean", default: "true" },
-                { name: "loop", type: "boolean", default: "true" }
-            ],
-            "CarouselItem": [
-                { name: "children", type: "React.ReactNode", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "size", type: "sm | md | lg | full | auto", default: "md" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Three D Marquee",
-        value: "three-d-marquee",
-        importPath: "~/components/catalyst-ui/media/three-d-marquee",
-        multiImport: "ThreeDMarquee, GridLineHorizontal, GridLineVertical",
-        basicusage: null,
-        path: "/components/catalyst-ui/media/three-d-marquee.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/three-d-marquee.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["3d", "animation", "marquee", "grid", "images"],
-        features: ["3D Transformation", "Infinite Animation", "Hover Effects", "Responsive Grid"],
-        dependencies: ["motion/react", "react"],
-        props: {
-            "ThreeDMarquee": [
-                { name: "images", type: "string[]", default: "null" },
-                { name: "className", type: "string", default: "null" }
-            ],
-            "GridLineHorizontal": [
-                { name: "className", type: "string", default: "null" },
-                { name: "offset", type: "string", default: "200px" }
-            ],
-            "GridLineVertical": [
-                { name: "className", type: "string", default: "null" },
-                { name: "offset", type: "string", default: "150px" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Logo",
-        value: "logo",
-        importPath: "~/components/catalyst-ui/media/logo",
-        multiImport: "Logo, LogoImage, LogoText",
-        basicusage: `
-<Logo url="/">
-  <LogoImage
-    src="/logo.svg"
-    alt="Company Logo"
-    title="Company Name"
-  />
-  <LogoText>Company Name</LogoText>
-</Logo>
-
-<Logo url="/" className="">
-  <LogoImage
-    src="/logo.svg"
-    alt="Company Logo"
-    title="Company Name"
-    className="h-10"
-  />
-  <LogoText className="text-xl">Company Name</LogoText>
-</Logo>`,
-        path: "/components/catalyst-ui/media/logo.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/logo.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["components", "logo", "branding", "navigation"],
-        features: ["Responsive", "TypeScript", "Accessible", "Customizable"],
-        dependencies: ["react", "@remix-run/react"],
-        props: {
-            "Logo": [
-                { name: "children", type: "React.ReactNode", default: "null" },
-                { name: "url", type: "string", default: "/" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "LogoImage": [
-                { name: "src", type: "string", default: "null" },
-                { name: "alt", type: "string", default: "null" },
-                { name: "title", type: "string", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "LogoText": [
-                { name: "children", type: "React.ReactNode", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Iframe",
-        value: "iframe",
-        importPath: "~/components/catalyst-ui/core/components/iframe",
-        multiImport: 'Iframe, iframeVariants',
-        path: "/components/catlyst-ui/core/components/iframe.tsx",
-        premium: false,
-        basicusage: `
-	<Iframe src="https://example.com" title="My iframe" />
-	`,
-        usage: `
-	// With variants
-	<Iframe 
-	  variant="elevated" 
-	  size="lg" 
-	  rounded="xl"
-	  src="https://youtube.com/embed/..."
-	  title="Video"
-	/>
-	
-	// Custom styling
-	<Iframe 
-	  className="my-custom-class" 
-	  variant="ghost"
-	  loading="eager"
-	/>
-	
-	// Default
-	<Iframe
-		src="https://www.example.com"
-		title="Default iframe"
-		className="w-full"
-	/>
-	
-	// Bordered
-	<Iframe
-		variant="bordered"
-		src="https://www.example.com"
-		title="Bordered iframe"
-		className="w-full"
-	/>
-	
-	// Shadow
-	<Iframe
-		variant="shadow"
-		src="https://www.example.com"
-		title="Shadow iframe"
-		className="w-full"
-	/>
-	
-	// Elevated
-	<Iframe
-		variant="elevated"
-		src="https://www.example.com"
-		title="Elevated iframe"
-		className="w-full"
-	/>
-	
-	// Size Variants
-	// Extra Small (xs)
-	<Iframe
-		variant="bordered"
-		size="xs"
-		src="https://www.example.com"
-		title="XS iframe"
-	/>
-	
-	// Small (sm)
-	<Iframe
-		variant="bordered"
-		size="sm"
-		src="https://www.example.com"
-		title="Small iframe"
-	/>
-	
-	// Large (lg)
-	<Iframe
-		variant="elevated"
-		size="lg"
-		rounded="lg"
-		src="https://www.example.com"
-		title="Large iframe"
-	/>
-	
-	// Custom Usage Examples
-	<Iframe
-		variant="elevated"
-		size="md"
-		rounded="xl"
-		src="https://www.youtube.com/embed/dQw4w9WgXcQ"
-		title="YouTube Video"
-		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-		allowFullScreen
-	/>
-	
-	<Iframe
-		variant="ghost"
-		size="md"
-		src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.4"
-		title="Google Maps"
-		loading="lazy"
-		referrerPolicy="no-referrer-when-downgrade"
-	/>
-	// Basic usage
-	<Iframe src="https://example.com" title="My iframe" />
-	
-	// With variants
-	<Iframe 
-	  variant="elevated" 
-	  size="lg" 
-	  rounded="xl"
-	  src="https://youtube.com/embed/..."
-	  title="Video"
-	/>
-	
-	// Custom styling
-	<Iframe 
-	  className="my-custom-class" 
-	  variant="ghost"
-	  loading="eager"
-	/>`,
-        usagePath: null,
-        category: "Core: Components",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["@radix-ui/react-aspect-ratio"],
-        props: [
-            { "name": "variant", "type": "'default' | 'bordered' | 'shadow' | 'elevated' | 'ghost'", "default": "'default'" },
-            { "name": "size", "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto'", "default": "'md'" },
-            { "name": "rounded", "type": "'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'", "default": "'md'" },
-            { "name": "loading", "type": "'lazy' | 'eager'", "default": "'lazy'" },
-            { "name": "className", "type": "string", "default": "undefined" }
-        ],
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "embed",
-        value: "embed",
-        importPath: "~/components/catalyst-ui/media/embed",
-        path: "/components/catalyst-ui/media/embed.tsx",
-        premium: true,
-        source: ``,
-        usage: `
-	
-	
-	`,
-        usagePath: null,
-        category: "Media",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["@radix-ui/react-aspect-ratio"],
-        props: [
-            { name: "className", type: "string", default: "null" },
-            { name: "size", type: "sm | md | lg | xl", default: "md" },
-        ],
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Hero Video Dialog",
-        value: "hero-video-dialog",
-        importPath: "~/components/catalyst-ui/media/hero-video-dialog",
-        multiImport: null,
-        basicusage: `
-<HeroVideoDialog 
-  videoSrc="https://www.youtube.com/embed/example"
-  thumbnailSrc="/thumbnail.jpg"
-/>
-
-<HeroVideoDialog 
-  videoSrc="https://www.youtube.com/embed/example"
-  thumbnailSrc="/thumbnail.jpg"
-  thumbnailAlt="Product demo video"
-  animationStyle="from-center"
-  className="max-w-2xl mx-auto"
-/>`,
-        path: "/components/catalyst-ui/media/hero-video-dialog.tsx",
-        source: null,
-        usagePath: null,
-        usage: `
-export function HeroVideoDialogDemo() {
-  return (
-
-    <div className="relative">
-      <HeroVideoDialog
-        className="block dark:hidden"
-        animationStyle="from-center"
-        videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
-        thumbnailSrc="https://startup-template-sage.vercel.app/hero-light.png"
-        thumbnailAlt="Hero Video"
-      />
-      <HeroVideoDialog
-        className="hidden dark:block"
-        animationStyle="from-center"
-        videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
-        thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
-        thumbnailAlt="Hero Video"
-      />
-    </div>
-  )
-}
-`,
-        premium: true,
-        category: "Media",
-        tags: ["video", "modal", "animation", "youtube"],
-        features: ["Animated Modal", "Responsive", "Accessible", "TypeScript"],
-        dependencies: ["lucide-react", "motion", "react"],
-        props: {
-            "HeroVideoDialog": [
-                { name: "className", type: "string", default: "null" },
-                { name: "videoSrc", type: "string", default: "null" },
-                { name: "thumbnailSrc", type: "string", default: "null" },
-                { name: "thumbnailAlt", type: "string", default: "Video thumbnail" },
-                { name: "animationStyle", type: "AnimationStyle", default: "from-center" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Globe",
-        value: "globe",
-        importPath: "~/components/catalyst-ui/media/globe",
-        multiImport: null,
-        basicusage: `
-<Globe />
-
-<Globe 
-  className="w-full h-96"
-  config={{
-    markers: [
-      { location: [40.7128, -74.006], size: 0.1 }
-    ],
-    baseColor: [0.5, 0.5, 0.8]
-  }}
-/>`,
-        path: "/components/catalyst-ui/media/globe.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/globe.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["3d", "globe", "interactive", "world"],
-        features: ["3D Interactive", "Smooth Animation", "Customizable", "TypeScript"],
-        dependencies: ["cobe", "motion", "react"],
-        props: {
-            "Globe": [
-                { name: "className", type: "string", default: "null" },
-                { name: "config", type: "COBEOptions", default: "GLOBE_CONFIG" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Blur Fade",
-        value: "blur-fade",
-        importPath: "~/components/catalyst-ui/media/blur-fade",
-        multiImport: null,
-        basicusage: `
-<BlurFade>
-  <div>Content</div>
-</BlurFade>
-
-<BlurFade 
-  delay={0.2}
-  duration={0.6}
-  direction="up"
-  offset={10}
-  blur="4px"
-  inView={true}
-  className="p-4"
->
-  <div>Animated content</div>
-</BlurFade>`,
-        path: "/components/catalyst-ui/media/blur-fade.tsx",
-        source: null,
-        usagePath: null,
-        usage: `
-const images = Array.from({ length: 9 }, (_, i) => {
-  const isLandscape = i % 2 === 0
-  const width = isLandscape ? 800 : 600
-  const height = isLandscape ? 600 : 800
-  return \`https://picsum.photos/seed/\${i + 1}/\${width}/\${height}\`
-})
-
-export function BlurFadeDemo() {
-  return (
-    <section id="photos">
-      <div className="columns-2 gap-4 sm:columns-3">
-        {images.map((imageUrl, idx) => (
-          <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>
-            <img
-              className="mb-4 size-full rounded-lg object-contain"
-              src={imageUrl}
-              alt={\`Random stock image \${idx + 1}\`}
-            />
-          </BlurFade>
-        ))}
-      </div>
-    </section>
-  )
-}
-`,
-        premium: true,
-        category: "Media",
-        tags: ["animation", "fade", "scroll", "motion"],
-        features: ["Smooth Animation", "Scroll Triggered", "Customizable", "TypeScript"],
-        dependencies: ["motion", "react"],
-        props: {
-            "BlurFade": [
-                { name: "className", type: "string", default: "null" },
-                { name: "duration", type: "number", default: "0.4" },
-                { name: "delay", type: "number", default: "0" },
-                { name: "offset", type: "number", default: "6" },
-                { name: "direction", type: "up | down | left | right", default: "down" },
-                { name: "inView", type: "boolean", default: "false" },
-                { name: "inViewMargin", type: "string", default: "-50px" },
-                { name: "blur", type: "string", default: "6px" },
-                { name: "variant", type: "Variants", default: "null" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Avatar Circles",
-        value: "avatar-circles",
-        importPath: "~/components/catalyst-ui/media/avatar-circles",
-        multiImport: null,
-        basicusage: `
-<AvatarCircles avatarUrls={avatars} />
-
-<AvatarCircles 
-  avatarUrls={avatars}
-  numPeople={5}
-  className="justify-center"
-/>`,
-        path: "/components/catalyst-ui/media/avatar-circles.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/avatar-circles.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["avatars", "profile", "team", "overlap"],
-        features: ["Responsive", "Accessible", "TypeScript", "Interactive"],
-        dependencies: ["react"],
-        props: {
-            "AvatarCircles": [
-                { name: "className", type: "string", default: "null" },
-                { name: "numPeople", type: "number", default: "null" },
-                { name: "avatarUrls", type: "Avatar[]", default: "[]" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Google Map",
-        value: "google-map",
-        importPath: "~/components/catalyst-ui/media/google-map",
-        multiImport: "GoogleMap, MapMarker",
-        basicusage: `<GoogleMap
-	  apiKey="YOUR_GOOGLE_MAPS_API_KEY"
-	  center={{ lat: 51.0447, lng: -114.0719 }}
-	  zoom={12}
-	  searchable={true}
-	/>
-	
-	<GoogleMap
-	  apiKey="YOUR_GOOGLE_MAPS_API_KEY"
-	  variant="rounded"
-	  size="lg"
-	  center={{ lat: 51.0447, lng: -114.0719 }}
-	  zoom={12}
-	  markers={[
-		{
-		  id: "1",
-		  position: { lat: 51.0447, lng: -114.0719 },
-		  title: "Calgary Tower",
-		  description: "Iconic landmark"
-		}
-	  ]}
-	  searchable={true}
-	  showControls={true}
-	  mapTypeControl={true}
-	  streetViewControl={true}
-	  fullscreenControl={true}
-	  mapTypeId="roadmap"
-	  gestureHandling="auto"
-	  styles={[]}
-	  className=""
-	  onMarkerClick={(marker) => console.log(marker)}
-	  onMapClick={(event) => console.log(event)}
-	/>`,
-        path: "/components/catalyst-ui/media/google-map.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/google-map.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["ui", "components", "maps", "interactive", "google", "location"],
-        features: ["Responsive", "TypeScript", "Accessible", "Searchable", "Customizable Markers", "Multiple Map Types", "Custom Styling"],
-        dependencies: ["lucide-react", "react", "class-variance-authority", "radix-ui/react-slot"],
-        props: {
-            "GoogleMap": [
-                { name: "apiKey", type: "string", default: "required" },
-                { name: "center", type: "{ lat: number; lng: number }", default: "{ lat: 51.0447, lng: -114.0719 }" },
-                { name: "zoom", type: "number", default: "10" },
-                { name: "markers", type: "MapMarker[]", default: "[]" },
-                { name: "searchable", type: "boolean", default: "false" },
-                { name: "showControls", type: "boolean", default: "true" },
-                { name: "mapTypeControl", type: "boolean", default: "true" },
-                { name: "streetViewControl", type: "boolean", default: "true" },
-                { name: "fullscreenControl", type: "boolean", default: "true" },
-                { name: "onMarkerClick", type: "(marker: MapMarker) => void", default: "null" },
-                { name: "onMapClick", type: "(event: any) => void", default: "null" },
-                { name: "mapTypeId", type: "roadmap | satellite | hybrid | terrain", default: "roadmap" },
-                { name: "gestureHandling", type: "cooperative | greedy | none | auto", default: "auto" },
-                { name: "styles", type: "any[]", default: "null" },
-                { name: "variant", type: "default | rounded | square | pill", default: "default" },
-                { name: "size", type: "sm | default | lg | xl | full", default: "default" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "MapMarker": [
-                { name: "id", type: "string", default: "required" },
-                { name: "position", type: "{ lat: number; lng: number }", default: "required" },
-                { name: "title", type: "string", default: "null" },
-                { name: "description", type: "string", default: "null" },
-                { name: "icon", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "CarouselV1",
-        value: "carousel-1",
-        importPath: "~/components/catalyst-ui/media/carousel-1",
-        multiImport: null,
-        basicusage: `<Carousel items={[]} />
-
-<Carousel 
-  items={[]}
-  renderCard={undefined}
-  CardComponent={undefined}
-  autoRotate={true}
-  autoRotateInterval={10000}
-  snap={false}
-  title=""
-  subTitle=""
-  className="max-w-2xl"
-  cardClassName="w-80 h-64"
-  showControls={true}
-  controlsClassName=""
-  orientation="horizontal"
-/>`,
-        path: "/components/catalyst-ui/media/carousel-1.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/media/carousel-1.tsx",
-        usage: null,
-        premium: true,
-        category: "Media",
-        tags: ["carousel", "slider", "display", "interactive", "3d"],
-        features: ["Responsive", "TypeScript", "Accessible", "Drag Support", "Touch Support", "Auto Rotate"],
-        dependencies: ["lucide-react", "react"],
-        props: {
-            "Carousel": [
-                { name: "items", type: "T[]", default: "[]" },
-                { name: "renderCard", type: "(item: T, index: number) => React.ReactNode", default: "undefined" },
-                { name: "CardComponent", type: "React.ComponentType<{ item: T; index: number }>", default: "undefined" },
-                { name: "autoRotate", type: "boolean", default: "true" },
-                { name: "autoRotateInterval", type: "number", default: "10000" },
-                { name: "snap", type: "boolean", default: "false" },
-                { name: "title", type: "string", default: "undefined" },
-                { name: "subTitle", type: "string", default: "undefined" },
-                { name: "className", type: "string", default: "max-w-2xl" },
-                { name: "cardClassName", type: "string", default: "w-80 h-64" },
-                { name: "showControls", type: "boolean", default: "true" },
-                { name: "controlsClassName", type: "string", default: "" },
-                { name: "orientation", type: "horizontal | vertical", default: "horizontal" },
-            ],
-        },
-        desc: "This variant contains both veritcal and horizontal options, where you can supply simple images or full card components to be used and displayed in the carousel.",
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Infinite Scroll",
-        value: "infinite-scroll",
-        importPath: "~/components/catalyst-ui/media/infinite-scroll",
-        path: "/components/catalyst-ui/media/infinite-scroll.tsx",
-        source: null,
-        usagePath: null,
-        basicusage: `<InfiniteScroll />`,
-        usage: `
-export function InfiniteScrollDemo() {
-  const brandItems: ScrollItem[] = [
-	{ id: '1', name: 'Trimzales', icon: <Zap className="w-8 h-8" /> },
-	{ id: '2', name: 'ZenTrailMs', icon: <Code className="w-8 h-8" /> },
-	{ id: '3', name: 'Wavelength', icon: <Globe className="w-8 h-8" /> },
-	{ id: '4', name: 'AlphaHex', icon: <Star className="w-8 h-8" /> },
-	{ id: '5', name: 'Mistranet', icon: <Shield className="w-8 h-8" /> },
-	{ id: '6', name: 'BriteMank', icon: <Rocket className="w-8 h-8" /> },
-	{ id: '7', name: 'Limerantz', icon: <Sparkles className="w-8 h-8" /> },
-	{ id: '8', name: 'Streamlinz', icon: <Heart className="w-8 h-8" /> },
-  ];
-
-  const cardItems: ScrollItem[] = [
-	{
-	  id: '1',
-	  name: 'Next.js',
-	  icon: <Code className="w-6 h-6" />,
-	  description: 'The React Framework for Production'
-	},
-	{
-	  id: '2',
-	  name: 'TypeScript',
-	  icon: <Zap className="w-6 h-6" />,
-	  description: 'JavaScript with syntax for types'
-	},
-	{
-	  id: '3',
-	  name: 'Tailwind CSS',
-	  icon: <Sparkles className="w-6 h-6" />,
-	  description: 'A utility-first CSS framework'
-	},
-	{
-	  id: '4',
-	  name: 'Remix',
-	  icon: <Globe className="w-6 h-6" />,
-	  description: 'Full stack web framework'
-	},
-	{
-	  id: '5',
-	  name: 'React',
-	  icon: <Star className="w-6 h-6" />,
-	  description: 'A JavaScript library for building UIs'
-	}
-  ];
-
-  const logoItems: ScrollItem[] = [
-	{ id: '1', name: 'Logo 1', icon: <Zap className="w-12 h-12" /> },
-	{ id: '2', name: 'Logo 2', icon: <Code className="w-12 h-12" /> },
-	{ id: '3', name: 'Logo 3', icon: <Globe className="w-12 h-12" /> },
-	{ id: '4', name: 'Logo 4', icon: <Star className="w-12 h-12" /> },
-	{ id: '5', name: 'Logo 5', icon: <Shield className="w-12 h-12" /> },
-	{ id: '6', name: 'Logo 6', icon: <Rocket className="w-12 h-12" /> },
-  ];
-
-  const minimalItems: ScrollItem[] = [
-	{ id: '1', name: 'JavaScript' },
-	{ id: '2', name: 'TypeScript' },
-	{ id: '3', name: 'React' },
-	{ id: '4', name: 'Next.js' },
-	{ id: '5', name: 'Tailwind CSS' },
-	{ id: '6', name: 'Node.js' },
-	{ id: '7', name: 'PostgreSQL' },
-	{ id: '8', name: 'MongoDB' },
-  ];
-
-  return (
-	<div className="min-h-screen bg-background p-8 space-y-16">
-	  <div className="max-w-6xl mx-auto">
-		<h1 className="text-4xl font-bold text-foreground mb-2">Infinite Scroll Component</h1>
-		<p className="text-muted-foreground mb-16">
-		  A versatile infinite scrolling component with multiple variants, directions, and customization options.
-		</p>
-
-		<div className="space-y-16">
-		  <section>
-			<h2 className="text-2xl font-semibold text-foreground mb-4">Default Variant</h2>
-			<p className="text-muted-foreground mb-6">Basic brand showcase with icons and names</p>
-			<InfiniteScroll items={brandItems} />
-		  </section>
-
-		  <section>
-			<h2 className="text-2xl font-semibold text-foreground mb-4">Brands Variant</h2>
-			<p className="text-muted-foreground mb-6">Styled brand display with consistent spacing</p>
-			<InfiniteScroll items={brandItems} variant="brands" speed="slow" />
-		  </section>
-
-		  <section>
-			<h2 className="text-2xl font-semibold text-foreground mb-4">Logos Only</h2>
-			<p className="text-muted-foreground mb-6">Clean logo display without text</p>
-			<InfiniteScroll items={logoItems} variant="logos" speed="fast" />
-		  </section>
-
-		  <section>
-			<h2 className="text-2xl font-semibold text-foreground mb-4">Card Variant</h2>
-			<p className="text-muted-foreground mb-6">Card-based layout with descriptions</p>
-			<InfiniteScroll items={cardItems} variant="cards" gap="lg" />
-		  </section>
-
-		  <section>
-			<h2 className="text-2xl font-semibold text-foreground mb-4">Minimal Text</h2>
-			<p className="text-muted-foreground mb-6">Simple text-only scrolling</p>
-			<InfiniteScroll items={minimalItems} variant="minimal" speed="fast" />
-		  </section>
-
-		  <section>
-			<h2 className="text-2xl font-semibold text-foreground mb-4">Right Direction</h2>
-			<p className="text-muted-foreground mb-6">Scrolling from right to left</p>
-			<InfiniteScroll items={brandItems} direction="right" />
-		  </section>
-
-		  <section>
-			<h2 className="text-2xl font-semibold text-foreground mb-4">No Hover Pause</h2>
-			<p className="text-muted-foreground mb-6">Continuous scrolling without pause on hover</p>
-			<InfiniteScroll items={brandItems} pauseOnHover={false} />
-		  </section>
-		</div>
-
-		<div className="mt-16 bg-card border rounded-lg p-8">
-		  <h3 className="text-xl font-semibold text-foreground mb-4">Component Features</h3>
-		  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-muted-foreground">
-			<div>• Multiple style variants (default, brands, logos, cards, minimal)</div>
-			<div>• Configurable scroll direction (left/right)</div>
-			<div>• Adjustable scroll speed (slow, normal, fast)</div>
-			<div>• Optional pause on hover</div>
-			<div>• Customizable gap spacing</div>
-			<div>• Smooth gradient mask for seamless loops</div>
-			<div>• TypeScript support with proper interfaces</div>
-			<div>• Responsive design with Tailwind CSS</div>
-		  </div>
-		</div>
-	  </div>
-	</div>
-  );
-}
-`,
-        premium: true,
-        category: "Media",
-        tags: ["media", "scroll", "infinite"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react"],
-        props: [
-            { name: "items", type: "array", default: "null" },
-            { name: "variant", type: "default | brands | logos | cards | minimal ", default: "default" },
-            { name: "direction", type: "left | right", default: "left" },
-            { name: "speed", type: "slow | normal | fast", default: "false" },
-            { name: "pauseOnHover", type: "boolean", default: "true" },
-            { name: "gap", type: "sm | md | lg | xl", default: "md" },
-            { name: "className", type: "string", default: "null" },
-        ],
-        props2: [],
-        desc: "Infinite scrolling component for loading content dynamically",
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "galleria",
-        value: "galleria",
-        importPath: "~/components/catalyst-ui/components/messages/galleria",
-        path: "/components/catalyst-ui/media/galleria.tsx",
-        premium: true,
-        source: null,
-        usage: `
-// Minimal usage
-<Galleria images={productImages} />
-
-// Advanced usage with all props
-<Galleria
-  images={vacationPhotos}
-  autoPlay={true}
-  autoPlayInterval={5000}
-  showThumbnails={true}
-  showControls={true}
-  showIndicators={true}
-  className="custom-galleria-styles"
-  aspectRatio="4/3"
-  transitionDuration={300}
-  startIndex={2}
-  loop={true}
-  fullscreen={true}
-/>
-`,
-        usagePath: null,
-        category: "Media",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["@radix-ui/react-aspect-ratio"],
-        props: [
-            { name: "emblaApi", type: "EmblaCarouselType | undefined", default: "undefined" },
-            { name: "className", type: "string", default: "null" },
-            { name: "showIndicators", type: "boolean", default: "true" },
-            { name: "showControls", type: "boolean", default: "true" },
-            { name: "autoPlay", type: "boolean", default: "false" },
-            { name: "loop", type: "boolean", default: "false" }
-        ],
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Carousel With Indicator",
-        value: "embla-carousel-snap",
-        importPath: "~/components/catalyst-ui/media/embla-carousel-snap",
-        path: "/components/catalyst-ui/media/embla-carousel-snap.tsx",
-        premium: true,
-        source: null,
-        basicusage: `
-
-
-
-
-const CarouselDemo: React.FC = () => {
-  const [emblaRef, emblaApi] = useEmblaCarousel()
-  const { selectedSnap, snapCount } = useSelectedSnapDisplay(emblaApi)
-
-  return (
-    <div className="embla">
-      <div className="embla__viewport" ref={emblaRef}>
-        <div className="embla__container">
-          <div className="embla__slide">Slide 1</div>
-          <div className="embla__slide">Slide 2</div>
-          <div className="embla__slide">Slide 3</div>
-          <div className="embla__slide">Slide 4</div>
-        </div>
-      </div>
-      
-      {/* Display current slide position */}
-      <SelectedSnapDisplay selectedSnap={selectedSnap} snapCount={snapCount} />
-    </div>
-  )
-}
-
-export default CarouselDemo`,
-        usage: `
-
-
-
-
-const CarouselDemo: React.FC = () => {
-  const [emblaRef, emblaApi] = useEmblaCarousel()
-  const { selectedSnap, snapCount } = useSelectedSnapDisplay(emblaApi)
-
-  return (
-    <div className="embla">
-      <div className="embla__viewport" ref={emblaRef}>
-        <div className="embla__container">
-          <div className="embla__slide">Slide 1</div>
-          <div className="embla__slide">Slide 2</div>
-          <div className="embla__slide">Slide 3</div>
-          <div className="embla__slide">Slide 4</div>
-        </div>
-      </div>
-      
-      {/* Display current slide position */}
-      <SelectedSnapDisplay selectedSnap={selectedSnap} snapCount={snapCount} />
-    </div>
-  )
-}
-
-// Custom styled display
-const CustomSnapDisplay: React.FC<PropType> = ({ selectedSnap, snapCount }) => (
-  <div className="custom-indicator">
-    <span className="current">{selectedSnap + 1}</span>
-    <span className="separator">of</span>
-    <span className="total">{snapCount}</span>
-  </div>
-)
-`,
-        usagePath: null,
-        category: "Media",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ['embla-carousel'],
-        props: [
-            { name: "selectedSnap", type: "number", default: "null" },
-            { name: "snapCount", type: "number", default: "null" },
-        ],
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Embla Carousel",
-        value: "embla-carousel-arrow-buttons",
-        importPath: "~/components/catalyst-ui/media/embla-carousel-arrow-buttons",
-        path: "/components/catalyst-ui/media/embla-carousel-arrow-buttons.tsx",
-        premium: true,
-        source: null,
-        usage: `
-
-`,
-        usagePath: null,
-        category: "Media",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ['embla-carousel'],
-        props: [
-            { name: "selectedSnap", type: "number", default: "null" },
-            { name: "snapCount", type: "number", default: "null" },
-        ],
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "carousel hero",
-        value: "carousel-hero",
-        importPath: "~/components/catalyst-ui/media/carousel-hero",
-        path: "/components/catalyst-ui/media/carousel-hero.tsx",
-        premium: true,
-        source: null,
-        usage: null,
-        usagePath: null,
-        category: "Media",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ['lucide-react'],
-        props: [
-            { name: "items", type: "Array<HeroItem>", default: "[]" },
-            { name: "autoPlay", type: "boolean", default: "true" },
-            { name: "autoPlayInterval", type: "number", default: "6000" },
-            { name: "showNavigation", type: "boolean", default: "true" },
-            { name: "showIndicators", type: "boolean", default: "true" },
-            { name: "className", type: "string", default: "''" }
-        ],
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Image",
-        value: "image",
-        importPath: "~/components/catalyst-ui/media/image",
-        path: "/components/catalyst-ui/media/image.tsx",
-        premium: false,
-        source: `
-
-
-interface Props
-  extends React.DetailedHTMLProps<
-	React.ImgHTMLAttributes<HTMLImageElement>,
-	HTMLImageElement
-  > {}
-
-export function Image({ src, alt, className, ...props }: Props) {
-  return (
-	<img src={src} alt={alt} className={cn("rounded", className)} {...props} />
-  );
-}
-`,
-        category: "Media",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: [],
-        usage: `
-
-
-// Basic image usage
-<Image 
-  src="/images/hero.jpg" 
-  alt="A beautiful landscape" 
-/>
-
-// Image with custom size and additional classes
-<Image 
-  src="/images/avatar.png" 
-  alt="User profile picture"
-  className="w-24 h-24 object-cover"
-/>
-
-// Image with responsive sizing and border
-<Image 
-  src="/images/product.jpg" 
-  alt="Featured product"
-  className="w-full max-w-md border-4 border-white shadow-lg"
-/>
-
-// Image with all native HTML image attributes
-<Image 
-  src="/images/banner.png" 
-  alt="Website banner"
-  className="w-full h-64 object-contain"
-  width={800}
-  height={400}
-  loading="lazy"
-/>`,
-        usagePath: null,
-        props: [
-            { name: "src", type: "string", default: "''", required: true },
-            { name: "alt", type: "string", default: "''", required: true },
-            { name: "className", type: "string", default: "null" }
-        ],
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "carousel simple",
-        value: "carousel-simple",
-        importPath: "~/components/catalyst-ui/media/carousel-simple",
-        path: "/components/catalyst-ui/components/carousel-simple.tsx",
-        premium: true,
-        source: null,
-        category: "Media",
-        tags: ["ui", "components", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["lucide-react"],
-        usage: `
-  const sampleSlides = [
-    {
-      image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=800&fit=crop",
-      title: "Mountain Adventure",
-      description: "Discover breathtaking views and endless possibilities in the great outdoors"
-    },
-    {
-      image: "https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=1200&h=800&fit=crop",
-      title: "Urban Life",
-      description: "Experience the energy and excitement of city living"
-    },
-    {
-      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1200&h=800&fit=crop",
-      title: "Ocean Dreams",
-      description: "Let the waves wash your worries away"
-    },
-    {
-      image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1200&h=800&fit=crop",
-      title: "Forest Serenity",
-      description: "Find peace among the ancient trees"
-    }
-  ];
-
-  const imageOnlySlides = [
-    { image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=800&fit=crop" },
-    { image: "https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=1200&h=800&fit=crop" },
-    { image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1200&h=800&fit=crop" }
-  ]
-<div>
-        <h2 className="text-xl font-semibold mb-4">Center Text Position (Default)</h2>
-        <SimpleCarousel slides={sampleSlides} />
-      </div>
-      
-      {/* Top Text Position */}
-      <div>
-        <h2 className="text-xl font-semibold mb-4">Top Text Position</h2>
-        <SimpleCarousel slides={sampleSlides} textPosition="top" />
-      </div>
-      
-      {/* Bottom Text Position */}
-      <div>
-        <h2 className="text-xl font-semibold mb-4">Bottom Text Position</h2>
-        <SimpleCarousel slides={sampleSlides} textPosition="bottom" />
-      </div>
-      
-      {/* Left Text Position */}
-      <div>
-        <h2 className="text-xl font-semibold mb-4">Left Text Position</h2>
-        <SimpleCarousel slides={sampleSlides} textPosition="left" />
-      </div>
-      
-      {/* Right Text Position */}
-      <div>
-        <h2 className="text-xl font-semibold mb-4">Right Text Position</h2>
-        <SimpleCarousel slides={sampleSlides} textPosition="right" />
-      </div>
-      
-      {/* Images Only */}
-      <div>
-        <h2 className="text-xl font-semibold mb-4">Images Only (No Text)</h2>
-        <SimpleCarousel slides={imageOnlySlides} />
-      </div>
-      
-      {/* Custom Styling */}
-      <div>
-        <h2 className="text-xl font-semibold mb-4">Custom Height & Fast Transition</h2>
-        <SimpleCarousel 
-          slides={sampleSlides} 
-          interval={2000} 
-          className="h-64 rounded-lg"
-        />
-      </div>
-      
-      {/* No Auto Play */}
-      <div>
-        <h2 className="text-xl font-semibold mb-4">No Auto Play</h2>
-        <SimpleCarousel slides={sampleSlides} autoPlay={false} />
-      </div>
-`,
-        usagePath: null,
-        props: [
-            { name: "slides", type: "Array<CarouselSlide>", default: "[]", required: true },
-            { name: "autoPlay", type: "boolean", default: "true" },
-            { name: "interval", type: "number", default: "5000" },
-            { name: "textPosition", type: "'top' | 'bottom' | 'left' | 'right' | 'center'", default: "'center'" },
-            { name: "className", type: "string", default: "''" }
-        ],
-        props2: [],
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-];