@shipsite.dev/components 0.2.21 → 0.2.22

package/src/marketing/AlternatingFeatures.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Section } from '../ui/section';
 import { Mockup } from '../ui/mockup';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
 interface AlternatingFeatureItemProps {
   icon?: string;
@@ -23,13 +24,12 @@ export function AlternatingFeatureItem({ icon, title, description }: Alternating
 interface AlternatingFeatureRowProps {
   title: string;
   description?: string;
-  image: string;
-  imageDark?: string;
+  image: ImageSource;
   imageAlt?: string;
   children?: React.ReactNode;
 }
 
-export function AlternatingFeatureRow({ title, description, image, imageDark, imageAlt, children }: AlternatingFeatureRowProps) {
+export function AlternatingFeatureRow({ title, description, image, imageAlt, children }: AlternatingFeatureRowProps) {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center py-12 [&:nth-child(even)>div:first-child]:md:order-2">
       <div>
@@ -38,28 +38,22 @@ export function AlternatingFeatureRow({ title, description, image, imageDark, im
         {children && <div className="space-y-4">{children}</div>}
       </div>
       <Mockup type="responsive">
-        {imageDark ? (
-          <>
-            <img src={image} alt={imageAlt || title} className="w-full dark:hidden" />
-            <img src={imageDark} alt={imageAlt || title} className="w-full hidden dark:block" />
-          </>
-        ) : (
-          <img src={image} alt={imageAlt || title} className="w-full" />
-        )}
+        <ThemeImage src={image} alt={imageAlt || title} className="w-full" />
       </Mockup>
     </div>
   );
 }
 
 interface AlternatingFeaturesProps {
+  id?: string;
   title?: string;
   description?: string;
   children: React.ReactNode;
 }
 
-export function AlternatingFeatures({ title, description, children }: AlternatingFeaturesProps) {
+export function AlternatingFeatures({ id, title, description, children }: AlternatingFeaturesProps) {
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main">
         {(title || description) && (
           <div className="text-center mb-16">

package/src/marketing/BannerCTA.tsx

@@ -4,6 +4,7 @@ import { Button } from '../ui/button';
 import Glow from '../ui/glow';
 
 interface BannerCTAProps {
+  id?: string;
   title: string;
   buttonText: string;
   buttonHref?: string;
@@ -11,9 +12,9 @@ interface BannerCTAProps {
   children?: React.ReactNode;
 }
 
-export function BannerCTA({ title, buttonText, buttonHref, subtext, children }: BannerCTAProps) {
+export function BannerCTA({ id, title, buttonText, buttonHref, subtext, children }: BannerCTAProps) {
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main">
         <div className="relative overflow-hidden glass-4 rounded-3xl p-12 md:p-16 text-center">
           <Glow variant="center" />

package/src/marketing/BentoGrid.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Section } from '../ui/section';
 import { cn } from '../lib/utils';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
 interface BentoItemProps {
   title: string;
   description?: string;
-  image?: string;
+  image?: ImageSource;
   span?: 1 | 2;
   children?: React.ReactNode;
 }
@@ -20,7 +21,7 @@ export function BentoItem({ title, description, image, span = 1, children }: Ben
       {description && <p className="text-sm text-muted-foreground mb-4 leading-relaxed">{description}</p>}
       {image && (
         <div className="mt-auto -mx-6 -mb-6 md:-mx-8 md:-mb-8">
-          <img src={image} alt={title} className="w-full" />
+          <ThemeImage src={image} alt={title} className="w-full" />
         </div>
       )}
       {children}
@@ -29,14 +30,15 @@ export function BentoItem({ title, description, image, span = 1, children }: Ben
 }
 
 interface BentoGridProps {
+  id?: string;
   title?: string;
   description?: string;
   children: React.ReactNode;
 }
 
-export function BentoGrid({ title, description, children }: BentoGridProps) {
+export function BentoGrid({ id, title, description, children }: BentoGridProps) {
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main">
         {(title || description) && (
           <div className="text-center mb-12">

package/src/marketing/CalloutCard.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import { cn } from '../lib/utils';
 
 interface CalloutCardProps {
+  id?: string;
   title: string;
   description: string;
   variant?: 'info' | 'success' | 'warning';
   children?: React.ReactNode;
 }
 
-export function CalloutCard({ title, description, variant = 'info', children }: CalloutCardProps) {
+export function CalloutCard({ id, title, description, variant = 'info', children }: CalloutCardProps) {
   const accentStyles = {
     info: 'border-l-primary',
     success: 'border-l-emerald-500',
@@ -16,7 +17,7 @@ export function CalloutCard({ title, description, variant = 'info', children }:
   };
 
   return (
-    <div className={cn('mx-auto w-full max-w-[76rem] px-[clamp(1rem,3vw,3rem)] my-8')}>
+    <div id={id} className={cn('mx-auto w-full max-w-[76rem] px-[clamp(1rem,3vw,3rem)] my-8')}>
       <div className={cn('glass-1 rounded-xl border-l-4 p-6 shadow-xl', accentStyles[variant])}>
         <h3 className="font-semibold tracking-tight text-foreground mb-2">{title}</h3>
         <p className="text-sm text-muted-foreground text-balance">{description}</p>

package/src/marketing/CardGrid.tsx

@@ -19,14 +19,15 @@ export function CardGridItem({ title, description, icon, href }: CardGridItemPro
 }
 
 interface CardGridProps {
+  id?: string;
   columns?: 2 | 3 | 4;
   children: React.ReactNode;
 }
 
-export function CardGrid({ columns = 3, children }: CardGridProps) {
+export function CardGrid({ id, columns = 3, children }: CardGridProps) {
   const gridCols = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-2 lg:grid-cols-4' };
   return (
-    <div className="mx-auto w-full max-w-[76rem] px-[clamp(1rem,3vw,3rem)] py-8">
+    <div id={id} className="mx-auto w-full max-w-[76rem] px-[clamp(1rem,3vw,3rem)] py-8">
       <div className={`grid grid-cols-1 ${gridCols[columns]} gap-6`}>{children}</div>
     </div>
   );

package/src/marketing/Carousel.tsx

@@ -4,18 +4,19 @@ import React, { useRef } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Section } from '../ui/section';
 import { cn } from '../lib/utils';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
 interface CarouselItemProps {
   title?: string;
   description?: string;
-  image?: string;
+  image?: ImageSource;
   children?: React.ReactNode;
 }
 
 export function CarouselItem({ title, description, image, children }: CarouselItemProps) {
   return (
     <div className="glass-1 rounded-2xl overflow-hidden flex-shrink-0 w-[85vw] max-w-[400px] snap-center">
-      {image && <img src={image} alt={title || ''} className="w-full aspect-video object-cover" />}
+      {image && <ThemeImage src={image} alt={title || ''} className="w-full aspect-video object-cover" />}
       <div className="p-6">
         {title && <h3 className="text-lg font-semibold text-foreground mb-2">{title}</h3>}
         {description && <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>}
@@ -26,12 +27,13 @@ export function CarouselItem({ title, description, image, children }: CarouselIt
 }
 
 interface CarouselProps {
+  id?: string;
   title?: string;
   description?: string;
   children: React.ReactNode;
 }
 
-export function Carousel({ title, description, children }: CarouselProps) {
+export function Carousel({ id, title, description, children }: CarouselProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const scroll = (direction: 'left' | 'right') => {
@@ -44,7 +46,7 @@ export function Carousel({ title, description, children }: CarouselProps) {
   };
 
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main">
         {(title || description) && (
           <div className="text-center mb-12">

package/src/marketing/Companies.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { Section } from '../ui/section';
 import { Badge } from '../ui/badge';
 import { cn } from '../lib/utils';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
 interface LogoItem {
-  src: string;
+  src: ImageSource;
   alt: string;
   width?: number;
   name?: string;
@@ -13,26 +14,27 @@ interface LogoItem {
 }
 
 interface CompaniesProps {
+  id?: string;
   title?: string;
   logos: LogoItem[];
   variant?: 'marquee' | 'inline';
 }
 
-export function Companies({ title, logos, variant = 'marquee' }: CompaniesProps) {
+export function Companies({ id, title, logos, variant = 'marquee' }: CompaniesProps) {
   if (variant === 'inline') {
     return (
-      <Section className="py-12">
+      <Section id={id} className="py-12">
         <div className="container-main flex flex-col items-center gap-8 text-center">
           {title && <h2 className="text-base font-semibold sm:text-2xl text-foreground">{title}</h2>}
           <div className="flex flex-wrap items-center justify-center gap-8">
             {logos.map((logo, i) => (
               <div key={i} className="flex items-center gap-2 text-sm font-medium">
-                <img
+                <ThemeImage
                   src={logo.src}
                   alt={logo.alt}
                   width={logo.width || 32}
                   height={logo.width || 32}
-                  className="h-6 w-6 object-contain opacity-70 dark:invert"
+                  className={cn("h-6 w-6 object-contain opacity-70", typeof logo.src === 'string' && "dark:invert")}
                 />
                 {logo.name && <span className={cn(!logo.name && 'sr-only')}>{logo.name}</span>}
                 {logo.version && <span className="text-muted-foreground">{logo.version}</span>}
@@ -48,19 +50,19 @@ export function Companies({ title, logos, variant = 'marquee' }: CompaniesProps)
   }
 
   return (
-    <Section className="py-12">
+    <Section id={id} className="py-12">
       <div className="container-main">
         {title && <p className="text-center text-sm text-muted-foreground mb-8">{title}</p>}
         <div className="relative fade-x overflow-hidden">
           <div className="flex gap-12 items-center" style={{ '--marquee-gap': '3rem' } as React.CSSProperties}>
             <div className="flex gap-12 items-center animate-marquee">
               {logos.map((logo, i) => (
-                <img key={i} src={logo.src} alt={logo.alt} width={logo.width || 120} className="h-8 w-auto object-contain grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all" />
+                <ThemeImage key={i} src={logo.src} alt={logo.alt} width={logo.width || 120} className="h-8 w-auto object-contain grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all" />
               ))}
             </div>
             <div className="flex gap-12 items-center animate-marquee" aria-hidden>
               {logos.map((logo, i) => (
-                <img key={i} src={logo.src} alt="" width={logo.width || 120} className="h-8 w-auto object-contain grayscale opacity-60" />
+                <ThemeImage key={i} src={logo.src} alt="" width={logo.width || 120} className="h-8 w-auto object-contain grayscale opacity-60" />
               ))}
             </div>
           </div>

package/src/marketing/FAQ.tsx

@@ -26,14 +26,15 @@ export function FAQItem({ question, children }: FAQItemProps) {
 }
 
 interface FAQProps {
+  id?: string;
   title?: string;
   description?: string;
   children: React.ReactNode;
 }
 
-export function FAQ({ title, description, children }: FAQProps) {
+export function FAQ({ id, title, description, children }: FAQProps) {
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main max-w-3xl">
         {(title || description) && (
           <div className="text-center mb-12">

package/src/marketing/Features.tsx

@@ -22,17 +22,18 @@ export function Feature({ icon, title, description }: FeatureProps) {
 }
 
 interface FeaturesProps {
+  id?: string;
   title?: string;
   description?: string;
   columns?: 2 | 3 | 4;
   children: React.ReactNode;
 }
 
-export function Features({ title, description, columns = 3, children }: FeaturesProps) {
+export function Features({ id, title, description, columns = 3, children }: FeaturesProps) {
   const gridCols = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-2 lg:grid-cols-4' };
 
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main">
         {(title || description) && (
           <div className="text-center mb-12">

package/src/marketing/Gallery.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Section } from '../ui/section';
 import { cn } from '../lib/utils';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
 interface GalleryItemProps {
-  src: string;
+  src: ImageSource;
   alt: string;
   caption?: string;
 }
@@ -12,7 +13,7 @@ export function GalleryItem({ src, alt, caption }: GalleryItemProps) {
   return (
     <figure className="group overflow-hidden rounded-xl glass-1">
       <div className="overflow-hidden">
-        <img
+        <ThemeImage
           src={src}
           alt={alt}
           className="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-105"
@@ -26,13 +27,14 @@ export function GalleryItem({ src, alt, caption }: GalleryItemProps) {
 }
 
 interface GalleryProps {
+  id?: string;
   title?: string;
   description?: string;
   columns?: 2 | 3 | 4;
   children: React.ReactNode;
 }
 
-export function Gallery({ title, description, columns = 3, children }: GalleryProps) {
+export function Gallery({ id, title, description, columns = 3, children }: GalleryProps) {
   const gridCols = {
     2: 'md:grid-cols-2',
     3: 'md:grid-cols-2 lg:grid-cols-3',
@@ -40,7 +42,7 @@ export function Gallery({ title, description, columns = 3, children }: GalleryPr
   };
 
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main">
         {(title || description) && (
           <div className="text-center mb-12">

package/src/marketing/Hero.tsx

@@ -5,20 +5,22 @@ import { Badge } from '../ui/badge';
 import { Button } from '../ui/button';
 import { Mockup } from '../ui/mockup';
 import Glow from '../ui/glow';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
 interface HeroProps {
+  id?: string;
   title: string;
   description: string;
   primaryCta?: { label: string; href: string };
   secondaryCta?: { label: string; href: string };
   badge?: string;
-  image?: string;
+  image?: ImageSource;
   children?: React.ReactNode;
 }
 
-export function Hero({ title, description, primaryCta, secondaryCta, badge, image, children }: HeroProps) {
+export function Hero({ id, title, description, primaryCta, secondaryCta, badge, image, children }: HeroProps) {
   return (
-    <Section className="relative overflow-hidden">
+    <Section id={id} className="relative overflow-hidden">
       <Glow variant="top" />
       <div className="container-main relative z-10">
         <div className="max-w-3xl mx-auto text-center">
@@ -50,7 +52,7 @@ export function Hero({ title, description, primaryCta, secondaryCta, badge, imag
         {image && (
           <div className="mt-16 animate-appear-zoom [animation-delay:400ms]">
             <Mockup type="responsive" className="shadow-mockup w-full">
-              <img src={image} alt="" className="w-full" />
+              <ThemeImage src={image} alt="" className="w-full" />
             </Mockup>
           </div>
         )}

package/src/marketing/PageHero.tsx

@@ -3,15 +3,16 @@ import { Section } from '../ui/section';
 import { Badge } from '../ui/badge';
 
 interface PageHeroProps {
+  id?: string;
   title: string;
   description?: string;
   badge?: string;
   children?: React.ReactNode;
 }
 
-export function PageHero({ title, description, badge, children }: PageHeroProps) {
+export function PageHero({ id, title, description, badge, children }: PageHeroProps) {
   return (
-    <Section className="py-16 md:py-24">
+    <Section id={id} className="py-16 md:py-24">
       <div className="container-main text-center">
         {badge && (
           <Badge variant="outline" className="mb-4">

package/src/marketing/PricingSection.tsx

@@ -38,6 +38,7 @@ export function ComparisonCategory(_props: ComparisonCategoryProps) {
 }
 
 interface PricingSectionProps {
+  id?: string;
   title?: string;
   description?: string;
   monthlyLabel?: string;
@@ -46,7 +47,7 @@ interface PricingSectionProps {
   children: React.ReactNode;
 }
 
-export function PricingSection({ title, description, monthlyLabel = 'Monthly', yearlyLabel = 'Yearly', mostPopularLabel = 'Most Popular', children }: PricingSectionProps) {
+export function PricingSection({ id, title, description, monthlyLabel = 'Monthly', yearlyLabel = 'Yearly', mostPopularLabel = 'Most Popular', children }: PricingSectionProps) {
   const [isYearly, setIsYearly] = useState(false);
 
   const plans: PricingPlanProps[] = [];
@@ -60,7 +61,7 @@ export function PricingSection({ title, description, monthlyLabel = 'Monthly', y
   });
 
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main">
         {(title || description) && (
           <div className="text-center mb-12">

package/src/marketing/SocialProof.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { Section } from '../ui/section';
 
 interface SocialProofProps {
+  id?: string;
   avatars?: string[];
   text: string;
   subtext?: string;
 }
 
-export function SocialProof({ avatars, text, subtext }: SocialProofProps) {
+export function SocialProof({ id, avatars, text, subtext }: SocialProofProps) {
   return (
-    <Section className="py-12">
+    <Section id={id} className="py-12">
       <div className="container-main">
         <div className="flex flex-col items-center gap-4 text-center">
           {avatars && avatars.length > 0 && (

package/src/marketing/Stats.tsx

@@ -13,11 +13,12 @@ export function Stat(_props: StatProps) {
 }
 
 interface StatsProps {
+  id?: string;
   title?: string;
   children: React.ReactNode;
 }
 
-export function Stats({ title, children }: StatsProps) {
+export function Stats({ id, title, children }: StatsProps) {
   const items: StatProps[] = [];
   React.Children.forEach(children, (child) => {
     if (React.isValidElement(child) && child.type === Stat) {
@@ -26,7 +27,7 @@ export function Stats({ title, children }: StatsProps) {
   });
 
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main max-w-[960px]">
         {title && (
           <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center">{title}</h2>

package/src/marketing/Steps.tsx

@@ -11,12 +11,13 @@ export function Step(_props: StepProps) {
 }
 
 interface StepsProps {
+  id?: string;
   title?: string;
   description?: string;
   children: React.ReactNode;
 }
 
-export function Steps({ title, description, children }: StepsProps) {
+export function Steps({ id, title, description, children }: StepsProps) {
   const steps: StepProps[] = [];
   React.Children.forEach(children, (child) => {
     if (React.isValidElement(child) && child.type === Step) {
@@ -25,7 +26,7 @@ export function Steps({ title, description, children }: StepsProps) {
   });
 
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main max-w-3xl">
         {(title || description) && (
           <div className="text-center mb-12">

package/src/marketing/TabsSection.tsx

@@ -3,12 +3,13 @@
 import React, { useState } from 'react';
 import { Section } from '../ui/section';
 import { cn } from '../lib/utils';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
 interface TabItemProps {
   label: string;
   title?: string;
   description?: string;
-  image?: string;
+  image?: ImageSource;
   children?: React.ReactNode;
 }
 
@@ -17,12 +18,13 @@ export function TabItem(_props: TabItemProps) {
 }
 
 interface TabsSectionProps {
+  id?: string;
   title?: string;
   description?: string;
   children: React.ReactNode;
 }
 
-export function TabsSection({ title, description, children }: TabsSectionProps) {
+export function TabsSection({ id, title, description, children }: TabsSectionProps) {
   const [activeIndex, setActiveIndex] = useState(0);
 
   const tabs: TabItemProps[] = [];
@@ -35,7 +37,7 @@ export function TabsSection({ title, description, children }: TabsSectionProps)
   const activeTab = tabs[activeIndex];
 
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main">
         {(title || description) && (
           <div className="text-center mb-12">
@@ -73,7 +75,7 @@ export function TabsSection({ title, description, children }: TabsSectionProps)
                 )}
               </div>
               {activeTab.image && (
-                <img src={activeTab.image} alt={activeTab.title || activeTab.label} className="w-full rounded-xl" />
+                <ThemeImage src={activeTab.image} alt={activeTab.title || activeTab.label} className="w-full rounded-xl" />
               )}
             </div>
           </div>

package/src/marketing/Testimonial.tsx

@@ -1,22 +1,24 @@
 import React from 'react';
 import { Section } from '../ui/section';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
 interface TestimonialProps {
+  id?: string;
   quote: string;
   author: string;
   role?: string;
-  image?: string;
+  image?: ImageSource;
   company?: string;
 }
 
-export function Testimonial({ quote, author, role, image, company }: TestimonialProps) {
+export function Testimonial({ id, quote, author, role, image, company }: TestimonialProps) {
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main max-w-3xl">
         <div className="glass-2 rounded-2xl p-8 md:p-12">
           <blockquote className="text-lg md:text-xl text-foreground/80 italic mb-6">&ldquo;{quote}&rdquo;</blockquote>
           <div className="flex items-center gap-3">
-            {image && <img src={image} alt={author} className="w-10 h-10 rounded-full object-cover" />}
+            {image && <ThemeImage src={image} alt={author} className="w-10 h-10 rounded-full object-cover" />}
             <div>
               <p className="font-semibold text-foreground">{author}</p>
               {(role || company) && <p className="text-sm text-muted-foreground">{role}{role && company && ' \u00B7 '}{company}</p>}

package/src/marketing/Testimonials.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Section } from '../ui/section';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
 interface TestimonialCardProps {
   quote: string;
   author: string;
   role?: string;
   company?: string;
-  image?: string;
+  image?: ImageSource;
   rating?: number;
 }
 
@@ -22,7 +23,7 @@ export function TestimonialCard({ quote, author, role, company, image, rating }:
       )}
       <blockquote className="text-sm text-foreground/80 leading-relaxed">&ldquo;{quote}&rdquo;</blockquote>
       <div className="flex items-center gap-3 mt-auto pt-2">
-        {image && <img src={image} alt={author} className="w-8 h-8 rounded-full object-cover" />}
+        {image && <ThemeImage src={image} alt={author} className="w-8 h-8 rounded-full object-cover" />}
         <div>
           <p className="text-sm font-semibold text-foreground">{author}</p>
           {(role || company) && (
@@ -35,17 +36,18 @@ export function TestimonialCard({ quote, author, role, company, image, rating }:
 }
 
 interface TestimonialsProps {
+  id?: string;
   title?: string;
   description?: string;
   columns?: 2 | 3;
   children: React.ReactNode;
 }
 
-export function Testimonials({ title, description, columns = 3, children }: TestimonialsProps) {
+export function Testimonials({ id, title, description, columns = 3, children }: TestimonialsProps) {
   const gridCols = columns === 2 ? 'md:grid-cols-2' : 'md:grid-cols-2 lg:grid-cols-3';
 
   return (
-    <Section>
+    <Section id={id}>
       <div className="container-main">
         {(title || description) && (
           <div className="text-center mb-12">

package/src/ui/theme-image.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+
+export type ImageSource = string | { light: string; dark: string };
+
+interface ThemeImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+  src: ImageSource;
+}
+
+export function ThemeImage({ src, className, ...props }: ThemeImageProps) {
+  if (typeof src === 'string') {
+    return <img src={src} className={className} {...props} />;
+  }
+  return (
+    <>
+      <img src={src.light} className={cn(className, 'dark:hidden')} {...props} />
+      <img src={src.dark} className={cn(className, 'hidden dark:block')} {...props} />
+    </>
+  );
+}