audit:card-carousel

apps/web/vibes/soul/docs/carousel.mdx

@@ -0,0 +1,5 @@
+---
+title: Carousel
+preview: carousel
+previewSize: lg
+---

apps/web/vibes/soul/docs/skeleton.mdx

@@ -0,0 +1,5 @@
+---
+title: Skeleton
+preview: skeleton
+previewSize: lg
+---

apps/web/vibes/soul/docs/streamable.mdx

@@ -0,0 +1,5 @@
+---
+title: Streamable
+preview: streamable
+previewSize: lg
+---

apps/web/vibes/soul/examples/pages/blog/index.tsx

@@ -4,7 +4,7 @@ import { localeAction } from '@/vibes/soul/examples/primitives/navigation/action
 import { navigationLinks } from '@/vibes/soul/examples/primitives/navigation/electric';
 import { posts } from '@/vibes/soul/examples/sections/blog-post-list';
 import { Banner } from '@/vibes/soul/primitives/banner';
-import { BlogPostWithKey } from '@/vibes/soul/primitives/blog-post-card';
+import { BlogPostWithId } from '@/vibes/soul/primitives/blog-post-card';
 import { Navigation } from '@/vibes/soul/primitives/navigation';
 import { FeaturedBlogPostList } from '@/vibes/soul/sections/featured-blog-post-list';
 import { Footer } from '@/vibes/soul/sections/footer';
@@ -50,7 +50,7 @@ const paymentIconsArray: React.ReactNode[] = [
 ];
 
 export default function Preview() {
-  const blogPostsPromise = new Promise<BlogPostWithKey[]>((resolve) => {
+  const blogPostsPromise = new Promise<BlogPostWithId[]>((resolve) => {
     setTimeout(() => resolve(posts), 1000);
   });
 

apps/web/vibes/soul/examples/primitives/card-carousel/electric.tsx

@@ -1,5 +1,5 @@
 import { getProducts } from '@/vibes/soul/data';
-import { CardCarousel } from '@/vibes/soul/primitives/card-carousel';
+import { CardCarousel } from '@/vibes/soul/sections/card-carousel';
 
 export default function Preview() {
   const cards = getProducts('Electric', { limit: 4 });
@@ -20,6 +20,7 @@ export default function Preview() {
         <div className="mx-auto w-full max-w-screen-2xl px-4 py-10 group-has-[[data-pending]]/pending:animate-pulse @xl:px-6 @xl:py-14 @4xl:px-8 @4xl:py-20">
           <CardCarousel
             cards={cards}
+            carouselColorScheme="dark"
             className="w-full"
             emptyStateSubtitle="Try browsing our complete catalog of products."
             emptyStateTitle="No products found"

apps/web/vibes/soul/examples/primitives/card-carousel/luxury.tsx

@@ -1,5 +1,5 @@
 import { getProducts } from '@/vibes/soul/data';
-import { CardCarousel } from '@/vibes/soul/primitives/card-carousel';
+import { CardCarousel } from '@/vibes/soul/sections/card-carousel';
 
 export default function Preview() {
   const cards = getProducts('Luxury');

apps/web/vibes/soul/examples/primitives/card-carousel/warm.tsx

@@ -1,5 +1,5 @@
 import { getProducts } from '@/vibes/soul/data';
-import { CardCarousel } from '@/vibes/soul/primitives/card-carousel';
+import { CardCarousel } from '@/vibes/soul/sections/card-carousel';
 
 export default function Preview() {
   const cards = getProducts('Warm');

apps/web/vibes/soul/examples/sections/blog-post-list/index.tsx

@@ -1,10 +1,10 @@
-import { BlogPostWithKey } from '@/vibes/soul/primitives/blog-post-card';
+import { BlogPostWithId } from '@/vibes/soul/primitives/blog-post-card';
 import { BlogPostList } from '@/vibes/soul/sections/blog-post-list';
 import { SectionLayout } from '@/vibes/soul/sections/section-layout';
 
-export const posts: BlogPostWithKey[] = [
+export const posts: BlogPostWithId[] = [
   {
-    key: '5',
+    id: '5',
     title: 'A Guide to Low-Light Houseplants',
     content:
       'Not all plants need bright sunlight to thrive. This guide highlights the best low-light houseplants, perfect for those darker corners of your home or office that need a touch of green.',
@@ -17,7 +17,7 @@ export const posts: BlogPostWithKey[] = [
     author: 'Author Name',
   },
   {
-    key: '1',
+    id: '1',
     title: "Top 5 Indoor Plants to Purify Your Home's Air",
     content:
       'Discover the best indoor plants that not only add a touch of green to your space but also purify the air. From the resilient Snake Plant to the easy-going Spider Plant, these top picks will keep your home fresh and vibrant.',
@@ -30,7 +30,7 @@ export const posts: BlogPostWithKey[] = [
     author: 'Author Name',
   },
   {
-    key: '10',
+    id: '10',
     title: 'Seasonal Plant Care Tips: Preparing for Fall',
     content:
       "As the seasons change, so do your plants' needs. Get ready for fall with these seasonal plant care tips, including how to transition your outdoor plants indoors and what to expect during the colder months.",
@@ -43,7 +43,7 @@ export const posts: BlogPostWithKey[] = [
     author: 'Author Name',
   },
   {
-    key: '4',
+    id: '4',
     title: 'The Benefits of Having Plants in Your Home',
     content:
       'Plants do more than just beautify your home. They improve air quality, reduce stress, and even boost your mood. Explore the many benefits of indoor plants and why you should add more green to your living space.',
@@ -56,7 +56,7 @@ export const posts: BlogPostWithKey[] = [
     author: 'Author Name',
   },
   {
-    key: '6',
+    id: '6',
     title: 'How to Repot Your Plants for Healthy Growth',
     content:
       'Repotting your plants is essential for maintaining their health and promoting growth. Over time, plants outgrow their pots, leading to root-bound conditions where roots are cramped and unable to absorb nutrients efficiently. This guide will walk you through the process of repotting, ensuring your plants thrive in their new home.',
@@ -69,7 +69,7 @@ export const posts: BlogPostWithKey[] = [
     author: 'Author Name',
   },
   {
-    key: '7',
+    id: '7',
     title: '5 Easy-Care Plants for Busy People',
     content:
       'Too busy to care for high-maintenance plants? These 5 easy-care plants are perfect for those with a hectic schedule. They require minimal attention while still bringing life to your home.',
@@ -82,7 +82,7 @@ export const posts: BlogPostWithKey[] = [
     author: 'Author Name',
   },
   {
-    key: '8',
+    id: '8',
     title: 'Propagate & Share',
     content:
       'Propagating plants is an easy and rewarding way to multiply your favorite plants and share them with friends. Whether you’re working with succulents, herbs, or houseplants, you can start new plants from cuttings, leaves, or even water-rooting. This guide will show you how simple it is to propagate plants, making it a fun activity to spread the green love.',
@@ -95,7 +95,7 @@ export const posts: BlogPostWithKey[] = [
     author: 'Author Name',
   },
   {
-    key: '3',
+    id: '3',
     title: '5 Best Plants for Your Office Desk',
     content:
       "Brighten up your workspace with these 5 easy-to-care-for office plants. Whether you have a sunny window or a dimly lit corner, there's a perfect plant on this list to suit your office environment.",
@@ -108,7 +108,7 @@ export const posts: BlogPostWithKey[] = [
     author: 'Author Name',
   },
   {
-    key: '9',
+    id: '9',
     title: 'How to Choose the Right Pot for Your Plant',
     content:
       "The right pot can make alls the difference in your plant's health. Learn how to select the perfect pot based on your plant's size, growth habits, and aesthetic preferences.",
@@ -123,7 +123,7 @@ export const posts: BlogPostWithKey[] = [
 ];
 
 export default function Preview() {
-  const blogPostsPromise = new Promise<BlogPostWithKey[]>((resolve) => {
+  const blogPostsPromise = new Promise<BlogPostWithId[]>((resolve) => {
     setTimeout(() => resolve(posts), 1000);
   });
 

apps/web/vibes/soul/examples/sections/featured-blog-post-list/index.tsx

@@ -1,9 +1,9 @@
 import { posts } from '@/vibes/soul/examples/sections/blog-post-list';
-import { BlogPostWithKey } from '@/vibes/soul/primitives/blog-post-card';
+import { BlogPostWithId } from '@/vibes/soul/primitives/blog-post-card';
 import { FeaturedBlogPostList } from '@/vibes/soul/sections/featured-blog-post-list';
 
 export default function Preview() {
-  const blogPostsPromise = new Promise<BlogPostWithKey[]>((resolve) => {
+  const blogPostsPromise = new Promise<BlogPostWithId[]>((resolve) => {
     setTimeout(() => resolve(posts), 1000);
   });
 

apps/web/vibes/soul/navigation.ts

@@ -17,7 +17,7 @@ export const navigation = [
     ],
   },
   {
-    title: 'Components',
+    title: 'Primitives',
     pages: [
       {
         title: 'Accordion',
@@ -82,10 +82,10 @@ export const navigation = [
         component: 'card',
       },
       {
-        title: 'Card Carousel',
-        slug: 'card-carousel',
-        file: 'docs/card-carousel.mdx',
-        component: 'card-carousel',
+        title: 'Carousel',
+        slug: 'carousel',
+        file: 'docs/carousel.mdx',
+        component: 'carousel',
       },
       { title: 'Checkbox', slug: 'checkbox', file: 'docs/checkbox.mdx', component: 'checkbox' },
       { title: 'Chip', slug: 'chip', file: 'docs/chip.mdx', component: 'chip' },
@@ -132,13 +132,24 @@ export const navigation = [
         component: 'products-list',
       },
       { title: 'Rating', slug: 'rating', file: 'docs/rating.mdx', component: 'rating' },
-
+      {
+        title: 'Skeleton',
+        slug: 'skeleton',
+        file: 'docs/skeleton.mdx',
+        component: 'skeleton',
+      },
       {
         title: 'Spinner',
         slug: 'spinner',
         file: 'docs/spinner.mdx',
         component: 'spinner',
       },
+      {
+        title: 'Streamable',
+        slug: 'streamable',
+        file: 'docs/streamable.mdx',
+        component: 'streamable',
+      },
       {
         title: 'Text Area',
         slug: 'textarea',
@@ -169,6 +180,12 @@ export const navigation = [
         component: 'address-list',
       },
       { title: 'Cart', slug: 'cart', file: 'docs/cart.mdx', component: 'cart' },
+      {
+        title: 'Card Carousel',
+        slug: 'card-carousel',
+        file: 'docs/card-carousel.mdx',
+        component: 'card-carousel',
+      },
       { title: 'Checkout', slug: 'checkout', file: 'docs/checkout.mdx', component: 'checkout' },
       {
         title: 'Compare Section',

apps/web/vibes/soul/primitives.ts

@@ -67,15 +67,9 @@ export const primitives = [
     registryDependencies: ['skeleton'],
     files: ['primitives/card/index.tsx'],
   },
-  {
-    name: 'card-carousel',
-    dependencies: ['clsx'],
-    registryDependencies: ['carousel'],
-    files: ['primitives/card-carousel/index.tsx'],
-  },
   {
     name: 'carousel',
-    dependencies: ['embla-carousel-react', 'lucide-react'],
+    dependencies: ['embla-carousel-react', 'lucide-react', 'clsx'],
     registryDependencies: [],
     files: ['primitives/carousel/index.tsx'],
   },
@@ -173,12 +167,24 @@ export const primitives = [
     registryDependencies: [],
     files: ['primitives/rating/index.tsx'],
   },
+  {
+    name: 'skeleton',
+    dependencies: ['clsx'],
+    registryDependencies: [],
+    files: ['primitives/skeleton/index.tsx'],
+  },
   {
     name: 'spinner',
     dependencies: ['clsx'],
     registryDependencies: [],
     files: ['primitives/spinner/index.tsx'],
   },
+  {
+    name: 'streamable',
+    dependencies: ['uuid'],
+    registryDependencies: [],
+    files: ['lib/streamable.tsx'],
+  },
   {
     name: 'textarea',
     dependencies: ['clsx'],

apps/web/vibes/soul/primitives/blog-post-card/index.tsx

@@ -16,8 +16,8 @@ export interface BlogPost {
   href: string;
 }
 
-export interface BlogPostWithKey extends BlogPost {
-  key: string;
+export interface BlogPostWithId extends BlogPost {
+  id: string;
 }
 
 export interface BlogPostCardProps extends BlogPost {

apps/web/vibes/soul/primitives/blog-post-carousel/index.tsx

@@ -1,4 +1,4 @@
-import { BlogPostCard, BlogPostWithKey } from '@/vibes/soul/primitives/blog-post-card';
+import { BlogPostCard, BlogPostWithId } from '@/vibes/soul/primitives/blog-post-card';
 import {
   Carousel,
   CarouselButtons,
@@ -9,7 +9,7 @@ import {
 
 interface Props {
   className?: string;
-  blogPosts: BlogPostWithKey[];
+  blogPosts: BlogPostWithId[];
   scrollbarLabel?: string;
   previousLabel?: string;
   nextLabel?: string;
@@ -25,11 +25,11 @@ export function BlogPostCarousel({
   return (
     <Carousel className={className}>
       <CarouselContent className="mb-10">
-        {blogPosts.map(({ key, ...post }) => {
+        {blogPosts.map(({ id, ...post }) => {
           return (
             <CarouselItem
               className="basis-full @md:basis-1/2 @4xl:basis-1/3 @7xl:basis-1/4"
-              key={key}
+              key={id}
             >
               <BlogPostCard {...post} />
             </CarouselItem>

apps/web/vibes/soul/primitives/card/index.tsx

@@ -5,11 +5,18 @@ import Link from 'next/link';
 
 import * as Skeleton from '@/vibes/soul/primitives/skeleton';
 
-export interface CardProps {
-  className?: string;
+export interface Card {
   title: string;
   image?: { src: string; alt: string };
   href: string;
+}
+
+export interface CardWithId extends Card {
+  id: string;
+}
+
+export interface CardProps extends Card {
+  className?: string;
   textColorScheme?: 'light' | 'dark';
   iconColorScheme?: 'light' | 'dark';
   aspectRatio?: '5:6' | '3:4' | '1:1';

apps/web/vibes/soul/primitives/products-carousel/index.tsx

@@ -77,16 +77,16 @@ export function ProductsCarousel({
         return (
           <Carousel className={className} hideOverflow={hideOverflow}>
             <CarouselContent className="mb-10">
-              {products.map((product) => (
+              {products.map(({ id, ...product }) => (
                 <CarouselItem
                   className="basis-[calc(100%-1rem)] @md:basis-[calc(50%-0.75rem)] @lg:basis-[calc(33%-0.5rem)] @2xl:basis-[calc(25%-0.25rem)]"
-                  key={product.id}
+                  key={id}
                 >
                   <ProductCard
                     aspectRatio={aspectRatio}
                     colorScheme={colorScheme}
                     imageSizes="(min-width: 42rem) 25vw, (min-width: 32rem) 33vw, (min-width: 28rem) 50vw, 100vw"
-                    product={product}
+                    product={{ id, ...product }}
                   />
                 </CarouselItem>
               ))}

apps/web/vibes/soul/primitives/skeleton/index.tsx

@@ -18,7 +18,7 @@ function SkeletonRoot({
 }: {
   className?: string;
   children?: React.ReactNode;
-  pending: boolean;
+  pending?: boolean;
 }) {
   return (
     <div

apps/web/vibes/soul/sections.ts

@@ -25,6 +25,12 @@ export const sections = [
     registryDependencies: [],
     files: ['sections/blog-post-list/index.tsx'],
   },
+  {
+    name: 'card-carousel',
+    dependencies: ['clsx', 'lucide-react'],
+    registryDependencies: ['carousel', 'skeleton', 'card', 'streamable'],
+    files: ['sections/card-carousel/index.tsx'],
+  },
   {
     name: 'cart',
     dependencies: ['clsx'],