@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/data/media-data.tsx

@@ -0,0 +1,1510 @@
+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
+    },
+];