From 44e87a1715223b2eb8bcb4d55f0d0b027ccfdbd4 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 17 Apr 2026 21:17:23 +0000 Subject: [PATCH] Switch to version 1: remove registry/components/TimelineHorizontalCardStack.json --- .../TimelineHorizontalCardStack.json | 106 ------------------ 1 file changed, 106 deletions(-) delete mode 100644 registry/components/TimelineHorizontalCardStack.json diff --git a/registry/components/TimelineHorizontalCardStack.json b/registry/components/TimelineHorizontalCardStack.json deleted file mode 100644 index d70a74a..0000000 --- a/registry/components/TimelineHorizontalCardStack.json +++ /dev/null @@ -1,106 +0,0 @@ -{ - "name": "TimelineHorizontalCardStack", - "description": "Horizontal auto-playing timeline component that displays 2-4 cards in a grid with animated progress bars and optional media display.", - "details": "Use for showcasing features, steps, or processes with automatic progression. Displays cards in a horizontal grid (2-4 columns on desktop, stacked on mobile) with auto-advancing progress bars. Each card has an animated progress bar that fills over 5 seconds before advancing to the next. Users can click any card to jump to that step. Active and previous cards are fully visible (opacity-100), future cards are dimmed (opacity-50). Grid adapts: 2 items = 2 columns, 3 items = 3 columns, 4+ items = 4 columns. Automatically loops back to first card after completing the sequence. Progress bars use theme foreground color. Optional mediaItems prop displays a shared media area above cards that smoothly transitions (opacity fade) between images/videos as cards advance. Media uses aspect-square on mobile and aspect-video on desktop. Children are card content that gets wrapped in card styling.", - "constraints": { - "textRules": { - "title": { - "required": true, - "example": "Our Process", - "minChars": 2, - "maxChars": 50 - }, - "description": { - "required": true, - "example": "Follow our step-by-step approach to success", - "minChars": 5, - "maxChars": 300 - }, - "tag": { - "required": false, - "example": "How It Works", - "minChars": 2, - "maxChars": 30 - } - }, - "itemRules": { - "minItems": 2, - "maxItems": 4, - "recommendedItems": "2-4", - "note": "Works best with 2-4 card content children. Grid layout adapts based on item count. Each child is wrapped in card styling with progress bar." - }, - "mediaRules": { - "imageSrc": { - "required": false, - "example": "/step1.jpg", - "note": "Either imageSrc or videoSrc per media item Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc." - }, - "videoSrc": { - "required": false, - "example": "/step1.mp4", - "note": "Either imageSrc or videoSrc per media item" - }, - "imageAlt": { - "required": false, - "example": "Step 1 illustration" - }, - "videoAriaLabel": { - "required": false, - "example": "Step 1 video" - } - } - }, - "propsSchema": { - "children": "React.ReactNode", - "title": "string", - "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", - "description": "string", - "tag?": "string", - "tagIcon?": "LucideIcon", - "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", - "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", - "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", - "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", - "useInvertedBackground?": "boolean", - "mediaItems?": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", - "ariaLabel?": "string (default: 'Timeline section')", - "className?": "string", - "containerClassName?": "string", - "textBoxClassName?": "string", - "titleClassName?": "string", - "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", - "titleImageClassName?": "string - For styling images in inline-image layout", - "descriptionClassName?": "string", - "tagClassName?": "string", - "buttonContainerClassName?": "string", - "buttonClassName?": "string", - "buttonTextClassName?": "string", - "cardClassName?": "string", - "progressBarClassName?": "string", - "mediaContainerClassName?": "string", - "mediaClassName?": "string" - }, - "usageExample": "

Step 1

Description

Step 2

Description

", - "do": [ - "Use for process flows", - "Use for roadmaps", - "Use for step-by-step explanation", - "Use for feature showcases", - "Use for capability displays", - "Requires titleSegments?[]", - "Requires buttons?[]", - "Requires mediaItems?[]" - ], - "dont": [ - "Do not use non-sequential content", - "Do not use single item", - "Do not use more than 4 items", - "Do not use less than 2 items", - "Do not use more than 4 items" - ], - "editRules": { - "textOnly": true, - "layoutLocked": true, - "styleLocked": true - } -}