@yatoday/astro-ui 0.6.13 → 0.7.2

package/astro.d.ts

@@ -16,6 +16,7 @@ import type { DarkModeProps as YtDarkModeProps } from './components/DarkMode/typ
 import type { HeadlineProps as YtHeadlineProps } from './components/Headline/types'
 import type { HeroSectionProps as YtHeroSectionProps } from './components/HeroSection/types'
 import type { ImageProps as YtImageProps } from './components/Image/types'
+import type { ImageGalleryIkeaProps as YtImageGalleryIkeaProps } from './components/ImageGalleryIkea/types'
 import type { ItemGrid0Props as YtItemGrid0Props } from './components/ItemGrid0/types'
 import type { LayoutProps as YtLayoutProps } from './components/Layout/types'
 import type { MetadataProps as YtMetadataProps } from './components/Metadata/types'
@@ -64,6 +65,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export function Headline(_props: YtHeadlineProps): any
 	export function HeroSection(_props: YtHeroSectionProps): any
 	export function Image(_props: YtImageProps): any
+	export function ImageGalleryIkea(_props: YtImageGalleryIkeaProps): any
 	export function ItemGrid0(_props: YtItemGrid0Props): any
 	export function Layout(_props: YtLayoutProps): any
 	export function Metadata(_props: YtMetadataProps): any
@@ -111,6 +113,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export type HeadlineProps = YtHeadlineProps
 	export type HeroSectionProps = YtHeroSectionProps
 	export type ImageProps = YtImageProps
+	export type ImageGalleryIkeaProps = YtImageGalleryIkeaProps
 	export type ItemGrid0Props = YtItemGrid0Props
 	export type LayoutProps = YtLayoutProps
 	export type MetadataProps = YtMetadataProps

package/astro.js

@@ -16,6 +16,7 @@ import DarkModeComponent from './components/DarkMode/DarkMode.astro'
 import HeadlineComponent from './components/Headline/Headline.astro'
 import HeroSectionComponent from './components/HeroSection/HeroSection.astro'
 import ImageComponent from './components/Image/Image.astro'
+import ImageGalleryIkeaComponent from './components/ImageGalleryIkea/ImageGalleryIkea.astro'
 import ItemGrid0Component from './components/ItemGrid0/ItemGrid0.astro'
 import LayoutComponent from './components/Layout/Layout.astro'
 import MetadataComponent from './components/Metadata/Metadata.astro'
@@ -63,6 +64,7 @@ export const DarkMode = DarkModeComponent
 export const Headline = HeadlineComponent
 export const HeroSection = HeroSectionComponent
 export const Image = ImageComponent
+export const ImageGalleryIkea = ImageGalleryIkeaComponent
 export const ItemGrid0 = ItemGrid0Component
 export const Layout = LayoutComponent
 export const Metadata = MetadataComponent

package/components/Card1/Card1.astro

@@ -9,9 +9,9 @@ import { cn } from '../../utils';
 
 const {
   title = await Astro.slots.render('title'),
-  description,
-  icon,
+  description = await Astro.slots.render('description'),
   image = await Astro.slots.render('image'),
+  icon,
   data = [],
   links = [],
   callToAction = await Astro.slots.render('actions'),
@@ -32,11 +32,13 @@ const {
   action: actionClass = '',
 } = classes;
 
-const img = {
-  src: typeof image === 'string' ? image : image?.src,
-  alt: typeof image === 'string' ? title : image?.alt,
-  aspectRatio: typeof image === 'string' ? '4:3' : image?.aspectRatio || '4:3',
-};
+const urlForImage = Array.isArray(callToAction)
+  ? typeof callToAction[0] === 'string'
+    ? callToAction[0]
+    : (callToAction[0] as { href?: string })?.href
+  : typeof callToAction === 'string'
+    ? callToAction
+    : (callToAction as { href?: string })?.href;
 ---
 
 <Card0
@@ -50,19 +52,43 @@ const img = {
     {
       image && (
         <div class={twMerge('w-full overflow-hidden -mt-6 h-60 bg-gray-400 dark:bg-zinc-700', imageClass)}>
-          <Image
-            src={img.src || String(image)}
-            class={twMerge('w-full h-full')}
-            widths={[400, 900]}
-            width={400}
-            height={400}
-            sizes="(max-width: 900px) 400px, 900px"
-            alt={img.alt || title}
-            aspectRatio={img.aspectRatio}
-            layout="cover"
-            loading="lazy"
-            decoding="async"
-          />
+          {urlForImage ? (
+            <a href={urlForImage} class="group">
+              {typeof image === 'string' ? (
+                <Fragment set:html={image} />
+              ) : (
+                <Image
+                  class={twMerge('w-full h-full  hover:scale-105 transition duration-300')}
+                  widths={[400, 900]}
+                  width={400}
+                  height={400}
+                  sizes="(max-width: 900px) 400px, 900px"
+                  layout="cover"
+                  loading="lazy"
+                  decoding="async"
+                  {...image}
+                />
+              )}
+            </a>
+          ) : (
+            <Fragment>
+              {typeof image === 'string' ? (
+                <Fragment set:html={image} />
+              ) : (
+                <Image
+                  class={twMerge('w-full h-full')}
+                  widths={[400, 900]}
+                  width={400}
+                  height={400}
+                  sizes="(max-width: 900px) 400px, 900px"
+                  layout="cover"
+                  loading="lazy"
+                  decoding="async"
+                  {...image}
+                />
+              )}
+            </Fragment>
+          )}
         </div>
       )
     }
@@ -83,7 +109,7 @@ const img = {
         {title}
       </WrapperHeaderTag>
 
-      <div class={twMerge('mt-2', descriptionClass)}>
+      <div class={twMerge('mt-1', descriptionClass)}>
         <slot />
         {description}
       </div>

package/components/Card2/Card2.astro

@@ -8,7 +8,7 @@ import { cn } from '../../utils';
 
 const {
   title = await Astro.slots.render('title'),
-  description,
+  description = await Astro.slots.render('description'),
   icon,
   image = await Astro.slots.render('image'),
   url = '',
@@ -29,12 +29,6 @@ const {
   image: imageClass = '',
   badge: badgeClass = 'top-2 left-2',
 } = classes;
-
-const img = {
-  src: typeof image === 'string' ? image : image?.src,
-  alt: typeof image === 'string' ? title : image?.alt,
-  aspectRatio: typeof image === 'string' ? '4:3' : image?.aspectRatio || '4:3',
-};
 ---
 
 <Card0
@@ -50,19 +44,25 @@ const img = {
     {
       image && (
         <div class={twMerge('w-full overflow-hidden -mt-6 h-40 bg-gray-400 dark:bg-zinc-700', imageClass)}>
-          <Image
-            src={img.src || String(image)}
-            class={cn('w-full md:h-full', imageClass, (url || callToAction?.href) && 'group-hover:scale-105 transition duration-300')}
-            widths={[400, 900]}
-            width={400}
-            height={400}
-            sizes="(max-width: 900px) 400px, 900px"
-            alt={img.alt || title}
-            aspectRatio={img.aspectRatio}
-            layout="cover"
-            loading="lazy"
-            decoding="async"
-          />
+          {typeof image === 'string' ? (
+            <Fragment set:html={image} />
+          ) : (
+            <Image
+              class={cn(
+                'w-full md:h-full',
+                imageClass,
+                (url || callToAction?.href) && 'group-hover:scale-105 transition duration-300'
+              )}
+              widths={[400, 900]}
+              width={400}
+              height={400}
+              sizes="(max-width: 900px) 400px, 900px"
+              layout="cover"
+              loading="lazy"
+              decoding="async"
+              {...image}
+            />
+          )}
         </div>
       )
     }

package/components/Headline/Headline.astro

@@ -6,12 +6,13 @@ const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline,
+  position = 'center',
   classes = {},
   as = 'h2',
 } = Astro.props;
 
 const {
-  container: containerClass = 'max-w-3xl md:mx-auto ',
+  container: containerClass = '',
   title: titleClass = 'text-foreground',
   subtitle: subtitleClass = '',
   tagline: taglineClass = '',
@@ -22,24 +23,34 @@ const WrapperTag = as;
 
 {
   (title || subtitle || tagline) && (
-    <div class={cn('mb-8 md:mb-12 text-center', containerClass)}>
+    <div
+      class={cn(
+        'mb-8 md:mb-12',
+        position === 'center' && 'text-center max-w-3xl md:mx-auto',
+        position === 'left' && 'text-left max-w-3xl',
+        position === 'right' && 'text-right',
+        containerClass
+      )}
+    >
       {tagline && (
         <p
-          class={cn('text-base text-muted-foreground font-bold tracking-wide uppercase', taglineClass)}
+          class={cn('text-sm md:text-base text-muted-foreground font-bold tracking-wide uppercase', taglineClass)}
           set:html={tagline}
         />
       )}
       {title && (
         <WrapperTag
           class={cn(
-            'font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl md:text-4xl',
+            'font-bold leading-tighter tracking-tighter font-heading text-heading text-2xl md:text-4xl',
             titleClass
           )}
           set:html={title}
         />
       )}
 
-      {subtitle && <p class={cn('mt-4 text-muted-foreground text-xl', subtitleClass)} set:html={subtitle} />}
+      {subtitle && (
+        <p class={cn('mt-1 md:mt-4 text-muted-foreground text-lg/6 md:text-xl', subtitleClass)} set:html={subtitle} />
+      )}
     </div>
   )
 }

package/components/Headline/types.ts

@@ -6,4 +6,5 @@ export type HeadlineProps = {
   tagline?: string;
   classes?: Record<string, string>;
   ['as']?: HTMLTag;
+  position?: 'center' | 'left' | 'right';
 };

package/components/HeroSection/HeroSection.astro

@@ -4,29 +4,32 @@ import type { HeroSectionProps as Props } from './types';
 import { twMerge } from 'tailwind-merge';
 import Image from '../Image/Image.astro';
 import Button from '../Button/Button.astro';
+import { cn } from '../../utils';
 
 const {
   asHeader = 'h3',
   classes = {},
-  image,
+  image = await Astro.slots.render('image'),
   title = await Astro.slots.render('title'),
   description = await Astro.slots.render('description'),
   callToAction,
 } = Astro.props;
 
-const img = {
-  src: typeof image === 'string' ? image : image?.src,
-  alt: typeof image === 'string' ? title : image?.alt,
-  aspectRatio: typeof image === 'string' ? '16:9' : image?.aspectRatio || '16:9',
-};
+const urlForImage = Array.isArray(callToAction)
+  ? typeof callToAction[0] === 'string'
+    ? callToAction[0]
+    : (callToAction[0] as { href?: string })?.href
+  : typeof callToAction === 'string'
+    ? callToAction
+    : (callToAction as { href?: string })?.href;
 
 const {
-  container: containerClass = 'bg-zinc-700 text-zinc-200 h-96',
+  container: containerClass = 'h-96',
   image: imageClass = '',
   content: contentClass = '',
   title: titleClass = '',
   description: descriptionClass = '',
-  action: actionClass = 'w-full',
+  action: actionClass = '',
 } = classes;
 
 const WrapperHeaderTag = asHeader;
@@ -34,33 +37,48 @@ const WrapperHeaderTag = asHeader;
 
 <div
   class={twMerge(
-    'swiper-slide overflow-hidden dark:bg-card dark:text-card-foreground',
+    'swiper-slide overflow-hidden bg-zinc-700 text-zinc-200 dark:bg-card dark:text-card-foreground',
     containerClass
   )}
 >
   <div class="slide flex flex-col-reverse justify-between md:flex-row h-full">
     <div class="w-full flex items-center justify-center">
-      <div class={twMerge("p-6 md:px-12 lg:px-20 xl:px-24 w-full h-full md:h-auto", contentClass)}>
+      <div class={twMerge('p-6 md:px-12 lg:px-20 xl:px-24 w-full h-full md:h-auto', contentClass)}>
         <slot />
         {
           title && description && (
             <div class="flex flex-col h-full justify-between">
               <div class="mb-6">
                 <WrapperHeaderTag
-                  class={twMerge(
-                    'text-base md:text-lg xl:text-2xl font-medium md:font-semibold mb-2',
-                    titleClass
-                  )}
+                  class={twMerge('text-base md:text-lg xl:text-2xl font-medium md:font-semibold mb-2', titleClass)}
                 >
                   {title}
                 </WrapperHeaderTag>
                 <p class={twMerge('text-sm md:text-base xl:text-lg', descriptionClass)}>{description}</p>
               </div>
+
               {callToAction && (
-                <Button
-                  class={twMerge('transition hover:translate-y-0.5 w-full', actionClass)}
-                  {...callToAction}
-                />
+                <div class={cn('w-full flex items-center gap-2', actionClass)}>
+                  {Array.isArray(callToAction) ? (
+                    callToAction.map((action) => (
+                      <Fragment>
+                        {typeof action === 'string' ? (
+                          <Fragment set:html={action} />
+                        ) : (
+                          <Button {...(action || {})} class="w-full sm:mb-0" />
+                        )}
+                      </Fragment>
+                    ))
+                  ) : (
+                    <Fragment>
+                      {typeof callToAction === 'string' ? (
+                        <Fragment set:html={callToAction} />
+                      ) : (
+                        <Button {...(callToAction as Object)} class="w-full sm:mb-0" />
+                      )}
+                    </Fragment>
+                  )}
+                </div>
               )}
             </div>
           )
@@ -69,36 +87,44 @@ const WrapperHeaderTag = asHeader;
     </div>
     <div class="w-full md:h-auto">
       {
-        img && (
+        image && (
           <Fragment>
-            {callToAction?.href ? (
-              <a href={callToAction?.href}>
-                <Image
-                  src={img.src}
-                  class={twMerge('w-full md:h-full bg-gray-400 dark:bg-slate-700', imageClass)}
-                  widths={[400, 900]}
-                  width={400}
-                  sizes="(max-width: 900px) 400px, 900px"
-                  alt={img.alt}
-                  aspectRatio={img.aspectRatio}
-                  layout="cover"
-                  loading="lazy"
-                  decoding="async"
-                />
+            {urlForImage ? (
+              <a href={urlForImage} class="group">
+                {typeof image === 'string' ? (
+                  <Fragment set:html={image} />
+                ) : (
+                  <Image
+                    class={twMerge('w-full md:h-full bg-gray-400 dark:bg-slate-700', imageClass)}
+                    widths={[400, 900]}
+                    width={400}
+                    height={400}
+                    sizes="(max-width: 900px) 400px, 900px"
+                    layout="cover"
+                    loading="lazy"
+                    decoding="async"
+                    {...image}
+                  />
+                )}
               </a>
             ) : (
-              <Image
-                src={img.src}
-                class={twMerge('w-full md:h-full bg-gray-400 dark:bg-slate-700', imageClass)}
-                widths={[400, 900]}
-                width={400}
-                sizes="(max-width: 900px) 400px, 900px"
-                alt={img.alt}
-                aspectRatio={img.aspectRatio}
-                layout="cover"
-                loading="lazy"
-                decoding="async"
-              />
+              <Fragment>
+                {typeof image === 'string' ? (
+                  <Fragment set:html={image} />
+                ) : (
+                  <Image
+                    class={twMerge('w-full h-full')}
+                    widths={[400, 900]}
+                    width={400}
+                    height={400}
+                    sizes="(max-width: 900px) 400px, 900px"
+                    layout="cover"
+                    loading="lazy"
+                    decoding="async"
+                    {...image}
+                  />
+                )}
+              </Fragment>
             )}
           </Fragment>
         )

package/components/HeroSection/types.ts

@@ -6,6 +6,6 @@ export type HeroSectionProps = {
   title?: string;
   description?: string;
   image: Image | string;
-  callToAction?: ToAction;
+  callToAction?: string | ToAction | Array<string | ToAction>;
   classes?: Record<string, string>;
 };

package/components/ImageGalleryIkea/ImageGalleryIkea.astro

@@ -0,0 +1,216 @@
+---
+import type { ImageGalleryIkeaProps as Props } from './types';
+import { cn } from '../../utils';
+import { Icon } from 'astro-icon/components';
+import ZoomedImage from '../ZoomedImage/ZoomedImage.astro';
+import Image from '../Image/Image.astro';
+
+const {
+  id = (Math.random() + 1).toString(36).substring(7),
+  withNavigation = true,
+  classes = {},
+  images = [],
+  height = '',
+  ...rest
+} = Astro.props;
+
+const {
+  container: containerClass = '',
+  swiper: swiperClass = '',
+  swiperThumb: swiperThumbClass = '',
+} = classes;
+---
+
+<style>
+  .swiper-thumb .swiper-slide-thumb-active {
+    opacity: 1;
+    border: 1px solid #666;
+  }
+</style>
+
+<div class={cn("@container relative", containerClass)} data-image-gallery-ikea={id}>
+  <div class="absolute left-0 top-0 z-20 hidden md:block group w-20">
+    <!-- Thumb Slider -->
+    <button
+      disabled="disabled"
+      type="button"
+      id={`btn-prev-${id}`}
+      class="absolute top-0 left-1/2 -translate-x-1/2 transform -translate-y-1/3 btn-shadow opacity-0 group-hover:not-disabled:opacity-90 hover:not-disabled:opacity-100 hidden md:flex items-center justify-center cursor-pointer z-10 size-8 bg-black text-white dark:bg-white dark:text-black rounded-full"
+    >
+      <Icon name="tabler:chevron-up" class="size-7" />
+    </button>
+    <button
+      type="button"
+      id={`btn-next-${id}`}
+      class="absolute bottom-0 left-1/2 -translate-x-1/2 transform translate-y-1/3 btn-shadow opacity-0 group-hover:not-disabled:opacity-90 hover:not-disabled:opacity-100 hidden md:flex items-center justify-center cursor-pointer z-10 size-8 bg-black text-white dark:bg-white dark:text-black rounded-full"
+    >
+      <Icon name="tabler:chevron-down" class="size-7" />
+    </button>
+
+    <swiper-container
+      id={`swiper-thumb-${id}`}
+      data-id={id}
+      direction="vertical"
+      class={cn(`swiper-thumb border-box ${swiperThumbClass}`, height)}
+      space-between="10"
+      slides-per-view="auto"
+      free-mode="true"
+      watch-slides-progress="true"
+      navigation={withNavigation
+        ? JSON.stringify({
+            nextEl: `#btn-next-${id}`,
+            prevEl: `#btn-prev-${id}`,
+          })
+        : false}
+      })}
+    >
+      {
+        images &&
+          images.map((image) => (
+            <swiper-slide class="cursor-pointer border border-input aspect-square size-20">
+              <Image
+                widths={[200, 400]}
+                width={200}
+                height={200}
+                sizes="(max-width: 400px) 200px, 400px"
+                layout="constrained"
+                loading="lazy"
+                decoding="async"
+                {...image}
+              />
+            </swiper-slide>
+          ))
+      }
+    </swiper-container>
+  </div>
+
+  <!-- Main slider -->
+  <div class="md:pl-24">
+    <div class="relative group">
+      <swiper-container
+        id={`swiper-main-${id}`}
+        init="false"
+        class={cn('', swiperClass, height)}
+        thumbs-swiper={`#swiper-thumb-${id}`}
+        speed="250"
+        space-between="10"
+        centered-slides="true"
+        slides-per-view="1.2"
+        navigation={withNavigation
+          ? JSON.stringify({
+              nextEl: `#btn-main-next-${id}`,
+              prevEl: `#btn-main-prev-${id}`,
+            })
+          : false}
+        breakpoints={JSON.stringify({
+          // 640: sm
+          // 768: sm
+          // 1024: sm
+          // 1280 xl
+          // 1536 2xl
+          640: {
+            speed: 0,
+            centeredSlides: false,
+            slidesPerView: 1,
+          },
+        })}
+        {...rest}
+      >
+        {
+          images &&
+            images.map((image, index) => (
+              <swiper-slide>
+                <ZoomedImage {...image} />
+              </swiper-slide>
+            ))
+        }
+      </swiper-container>
+
+      {
+        withNavigation && (
+          <Fragment>
+            <button
+              type="button"
+              id={`btn-main-prev-${id}`}
+              class="btn-shadow opacity-0 group-hover:not-disabled:opacity-90 hover:not-disabled:opacity-100 hidden md:flex items-center justify-center cursor-pointer absolute left-5 top-1/2 -translate-y-1/2 z-10 size-12 bg-black text-white dark:bg-white dark:text-black rounded-full transition-opacity"
+            >
+              <Icon name="tabler:chevron-left" class="size-7" />
+            </button>
+            <button
+              type="button"
+              id={`btn-main-next-${id}`}
+              class="btn-shadow opacity-0 group-hover:not-disabled:opacity-90 hover:not-disabled:opacity-100 hidden md:flex items-center justify-center cursor-pointer absolute right-5 top-1/2 -translate-y-1/2 z-10 size-12 bg-black text-white dark:bg-white dark:text-black rounded-full transition-opacity"
+            >
+              <Icon name="tabler:chevron-right" class="size-7" />
+            </button>
+          </Fragment>
+        )
+      }
+    </div>
+  </div>
+</div>
+
+<script>
+  import { on, get } from '../../utils';
+
+  import { register } from 'swiper/element/bundle';
+
+  register();
+
+  const init = () => {
+    const matches = document.querySelectorAll('div[data-image-gallery-ikea]');
+    if (!matches.length) return;
+
+    matches.forEach((elem) => {
+      const id = (elem as HTMLElement).dataset.imageGalleryIkea || '0';
+
+      // Find the Swiper containers
+      const mainSwiperEl = document.getElementById(`swiper-main-${id}`);
+      const thumbSwiperEl = document.getElementById(`swiper-thumb-${id}`);
+      if (!mainSwiperEl || !thumbSwiperEl) return;
+
+      mainSwiperEl.addEventListener('swiperafterinit', () => {
+        (thumbSwiperEl as any)?.swiper.slides.forEach((slide: HTMLElement, index: number) => {
+          slide.addEventListener('mouseenter', () => {
+            (mainSwiperEl as any)?.swiper.slideTo(index);
+          });
+        });
+      });
+
+      // Thumb Slider navigation buttons
+      const btnThumbPrev = get(`#btn-prev-${id}`) as HTMLButtonElement;
+      const btnThumbNext = get(`#btn-next-${id}`) as HTMLButtonElement;
+      thumbSwiperEl.addEventListener('swiperreachend', () => {
+        btnThumbNext.disabled = true;
+      });
+      thumbSwiperEl.addEventListener('swiperreachbeginning', () => {
+        btnThumbPrev.disabled = true;
+      });
+      thumbSwiperEl.addEventListener('swiperfromedge', () => {
+        btnThumbPrev.disabled = false;
+        btnThumbNext.disabled = false;
+      });
+
+      // Main Slider navigation buttons
+      const btnPrev = get(`#btn-main-prev-${id}`) as HTMLButtonElement;
+      const btnNext = get(`#btn-main-next-${id}`) as HTMLButtonElement;
+      mainSwiperEl.addEventListener('swiperreachend', () => {
+        btnNext.disabled = true;
+      });
+      mainSwiperEl.addEventListener('swiperreachbeginning', () => {
+        btnPrev.disabled = true;
+      });
+      mainSwiperEl.addEventListener('swiperfromedge', () => {
+        btnPrev.disabled = false;
+        btnNext.disabled = false;
+      });
+
+      Object.assign(mainSwiperEl, {});
+
+      mainSwiperEl?.initialize();
+    });
+  };
+
+  init();
+  on(document, 'astro:after-swap', init);
+</script>

package/components/ImageGalleryIkea/ImageGalleryIkea.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+  import type { ImageGalleryIkeaProps } from './types'
+</script>

package/components/ImageGalleryIkea/types.ts

@@ -0,0 +1,9 @@
+import type { Image } from '../../types';
+
+export type ImageGalleryIkeaProps = {
+  id?: string;
+  height?: string;
+  withNavigation?: boolean;
+  classes?: Record<string, string>;
+  images?: Image[];
+};

package/components/SwiperSlider/SwiperSlider.astro

@@ -15,8 +15,8 @@ const {
   <swiper-container
     data-id={id}
     class={cn('opacity-100', classes?.swiper)}
-    centered-slides="true"
     space-between="10"
+    centered-slides="true"
     slides-per-view="1.2"
     navigation={withNavigation
       ? JSON.stringify({
@@ -75,7 +75,6 @@ const {
 
 <script>
   import { addClasses, removeClasses } from '../../utils';
-
   import { register } from 'swiper/element/bundle';
 
   register();
@@ -85,29 +84,31 @@ const {
     matches.forEach((elem) => {
       const id = elem.dataset.id;
 
-      elem.addEventListener(
-        'swiperreachend',
-        () => {
-          removeClasses(`#btn-next-${id}`, 'opacity-100');
-          addClasses(`#btn-next-${id}`, 'opacity-0');
-        },
-        false
-      );
-      elem.addEventListener(
-        'swiperreachbeginning',
-        () => {
-          addClasses(`#btn-prev-${id}`, 'opacity-0');
-        },
-        false
-      );
-      elem.addEventListener(
-        'swiperfromedge',
-        () => {
-          removeClasses(`#btn-prev-${id}`, 'opacity-0');
-          addClasses(`#btn-next-${id}`, 'opacity-100');
-        },
-        false
-      );
+      if (id) {
+        elem.addEventListener(
+          'swiperreachend',
+          () => {
+            removeClasses(`#btn-next-${id}`, 'opacity-100');
+            addClasses(`#btn-next-${id}`, 'opacity-0');
+          },
+          false
+        );
+        elem.addEventListener(
+          'swiperreachbeginning',
+          () => {
+            addClasses(`#btn-prev-${id}`, 'opacity-0');
+          },
+          false
+        );
+        elem.addEventListener(
+          'swiperfromedge',
+          () => {
+            removeClasses(`#btn-prev-${id}`, 'opacity-0');
+            addClasses(`#btn-next-${id}`, 'opacity-100');
+          },
+          false
+        );
+      }
     });
   }
 </script>

package/components/WidgetFeaturesCard/WidgetFeaturesCard.astro

@@ -15,7 +15,7 @@ const {
   tagline = await Astro.slots.render('tagline'),
   items = [],
   columns = 4,
-  image,
+  image = await Astro.slots.render('image'),
 
   isBeforeContent,
   isAfterContent,
@@ -26,12 +26,6 @@ const {
 } = Astro.props;
 
 const Component = via;
-
-const img = {
-  src: typeof image === 'string' ? image : image?.src,
-  alt: typeof image === 'string' ? title : image?.alt,
-  aspectRatio: typeof image === 'string' ? '16:9' : image?.aspectRatio || '16:9',
-};
 ---
 
 <WidgetWrapper
@@ -53,15 +47,18 @@ const img = {
             classes?.image
           )}
         >
-          <Image
-            class="w-full h-80 object-cover mx-auto bg-gray-500 shadow-lg"
-            width="auto"
-            height={320}
-            widths={[400, 768]}
-            layout="fullWidth"
-            src={img.src || String(image)}
-            alt={img.alt || title || 'Demo'}
-          />
+          {typeof image === 'string' ? (
+            <Fragment set:html={image} />
+          ) : (
+            <Image
+              class="w-full h-80 object-cover mx-auto bg-gray-500 shadow-lg"
+              width="auto"
+              height={320}
+              widths={[400, 768]}
+              layout="fullWidth"
+              {...image}
+            />
+          )}
         </div>
       </div>
     )

package/components/WidgetHero1/WidgetHero1.astro

@@ -12,7 +12,7 @@ const {
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
   position = 'center',
-  image,
+  image = await Astro.slots.render('image'),
   actions = [],
   links = [],
   stats = [],
@@ -24,14 +24,6 @@ const {
 } = Astro.props;
 
 const { container: containerClass = '', bg: bgClass = '' } = classes;
-
-const img = image
-  ? {
-      src: typeof image === 'string' ? image : image?.src,
-      alt: typeof image === 'string' ? title : image?.alt,
-      aspectRatio: typeof image === 'string' ? '16:9' : image?.aspectRatio || '16:9',
-    }
-  : undefined;
 ---
 
 <WidgetWrapper
@@ -43,19 +35,24 @@ const img = image
     <div class="relative isolate overflow-hidden h-full">
       <div class={cn(' absolute top-0 left-0 w-full h-full z-20', bgClass)}></div>
       {
-        img && (
-          <Image
-            src={img.src}
-            class="absolute inset-0 z-10 size-full object-cover object-right md:object-center"
-            alt={img.alt}
-            aspectRatio={img.aspectRatio}
-            widths={[400, 768, 1024, 2040]}
-            sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
-            loading="eager"
-            width={1024}
-            height={576}
-            layout="fullWidth"
-          />
+        image && (
+          <Fragment>
+            {typeof image === 'string' ? (
+              <Fragment set:html={image} />
+            ) : (
+              <Image
+                class="absolute inset-0 z-10 size-full object-cover object-right md:object-center"
+                widths={[400, 900]}
+                widths={[400, 768, 1024, 2040]}
+                sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
+                loading="eager"
+                width={1024}
+                height={576}
+                layout="fullWidth"
+                {...image}
+              />
+            )}
+          </Fragment>
         )
       }
     </div>

package/components/ZoomedImage/ZoomedImage.astro

@@ -20,7 +20,7 @@ type ImageType = {
   attributes: HTMLAttributes<'img'>;
 };
 
-const _image = await findImage(props.src);
+const _image = await findImage(src);
 
 let image: ImageType | undefined;
 
@@ -127,6 +127,9 @@ if (
 
       if (zoomed) {
         zoomButton.style.backgroundPosition = `${mousePosition.percentX}% ${mousePosition.percentY}%`;
+
+        // Add document click listener to detect outside clicks
+        document.addEventListener('click', handleOutsideClick);
       }
     };
 

package/index.d.ts

@@ -36,6 +36,7 @@ export type Image = {
   src: string;
   alt?: string;
   aspectRatio?: string;
+  class?: string;
 };
 
 export type Testimonial = {
@@ -66,6 +67,6 @@ declare module '@yatoday/astro-ui' {
   // URLUtils.ts
   export const trimSlash = (s: number) => string;
   export const createPath = (...params: string[]) => string;
-  export const cleanSlug = (text: string[]) => string;
+  export const cleanSlug = (text: string) => string;
   export const getCanonical = (path: string) => string | URL;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.6.13",
+  "version": "0.7.2",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",

package/styles/styles.css

@@ -303,6 +303,9 @@
   .-right-5 {
     right: calc(var(--spacing) * -5);
   }
+  .right-5 {
+    right: calc(var(--spacing) * 5);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -318,6 +321,9 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
+  .left-5 {
+    left: calc(var(--spacing) * 5);
+  }
   .isolate {
     isolation: isolate;
   }
@@ -390,6 +396,9 @@
   .-mt-12 {
     margin-top: calc(var(--spacing) * -12);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -510,6 +519,10 @@
     width: calc(var(--spacing) * 7);
     height: calc(var(--spacing) * 7);
   }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .size-10 {
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
@@ -518,6 +531,10 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .size-20 {
+    width: calc(var(--spacing) * 20);
+    height: calc(var(--spacing) * 20);
+  }
   .size-72 {
     width: calc(var(--spacing) * 72);
     height: calc(var(--spacing) * 72);
@@ -581,6 +598,9 @@
   .h-\[28rem\] {
     height: 28rem;
   }
+  .h-\[500px\] {
+    height: 500px;
+  }
   .h-\[900px\] {
     height: 900px;
   }
@@ -626,6 +646,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -671,6 +694,9 @@
   .max-w-60 {
     max-width: calc(var(--spacing) * 60);
   }
+  .max-w-\[600px\] {
+    max-width: 600px;
+  }
   .max-w-none\! {
     max-width: none !important;
   }
@@ -711,6 +737,14 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1\/3 {
+    --tw-translate-y: calc(calc(1/3 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-1\/3 {
+    --tw-translate-y: calc(1/3 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-50 {
     --tw-scale-x: 50%;
     --tw-scale-y: 50%;
@@ -1205,6 +1239,10 @@
     font-size: var(--text-lg);
     line-height: calc(var(--spacing) * 5);
   }
+  .text-lg\/6 {
+    font-size: var(--text-lg);
+    line-height: calc(var(--spacing) * 6);
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1441,6 +1479,15 @@
       }
     }
   }
+  .group-hover\:not-disabled\:opacity-90 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        &:not(*:disabled) {
+          opacity: 90%;
+        }
+      }
+    }
+  }
   .group-active\:scale-75 {
     &:is(:where(.group):active *) {
       --tw-scale-x: 75%;
@@ -1517,14 +1564,6 @@
       background-color: var(--color-slate-50);
     }
   }
-  .hover\:translate-y-0\.5 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-translate-y: calc(var(--spacing) * 0.5);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
   .hover\:scale-105 {
     &:hover {
       @media (hover: hover) {
@@ -1577,6 +1616,15 @@
       }
     }
   }
+  .hover\:not-disabled\:opacity-100 {
+    &:hover {
+      @media (hover: hover) {
+        &:not(*:disabled) {
+          opacity: 100%;
+        }
+      }
+    }
+  }
   .focus\:ring-4 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
@@ -1853,6 +1901,11 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .md\:mt-4 {
+    @media (width >= 48rem) {
+      margin-top: calc(var(--spacing) * 4);
+    }
+  }
   .md\:mt-12 {
     @media (width >= 48rem) {
       margin-top: calc(var(--spacing) * 12);
@@ -2120,6 +2173,11 @@
       padding-left: calc(var(--spacing) * 0);
     }
   }
+  .md\:pl-24 {
+    @media (width >= 48rem) {
+      padding-left: calc(var(--spacing) * 24);
+    }
+  }
   .md\:text-left {
     @media (width >= 48rem) {
       text-align: left;
@@ -2536,6 +2594,11 @@
       background-color: var(--color-zinc-800);
     }
   }
+  .dark\:text-black {
+    &:where(.dark, .dark *) {
+      color: var(--color-black);
+    }
+  }
   .dark\:text-gray-400 {
     &:where(.dark, .dark *) {
       color: var(--color-gray-400);

package/styles/themes/default.css

@@ -22,6 +22,8 @@
   --yt-color-border: hsl(0 0% 89.8%);
   --yt-color-input: hsl(0 0% 89.8%);
   --yt-color-ring: hsl(0 0% 3.9%);
+
+  color-scheme: light;
 }
 
 .dark {

package/svelte.d.ts

@@ -17,6 +17,7 @@ import type { SvelteDarkModeProps as YtSvelteDarkModeProps } from './components/
 import type { SvelteHeadlineProps as YtSvelteHeadlineProps } from './components/Headline/types'
 import type { SvelteHeroSectionProps as YtSvelteHeroSectionProps } from './components/HeroSection/types'
 import type { SvelteImageProps as YtSvelteImageProps } from './components/Image/types'
+import type { SvelteImageGalleryIkeaProps as YtSvelteImageGalleryIkeaProps } from './components/ImageGalleryIkea/types'
 import type { SvelteItemGrid0Props as YtSvelteItemGrid0Props } from './components/ItemGrid0/types'
 import type { SvelteLayoutProps as YtSvelteLayoutProps } from './components/Layout/types'
 import type { SvelteMetadataProps as YtSvelteMetadataProps } from './components/Metadata/types'
@@ -65,6 +66,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export const Headline: Component<YtSvelteHeadlineProps>
 	export const HeroSection: Component<YtSvelteHeroSectionProps>
 	export const Image: Component<YtSvelteImageProps>
+	export const ImageGalleryIkea: Component<YtSvelteImageGalleryIkeaProps>
 	export const ItemGrid0: Component<YtSvelteItemGrid0Props>
 	export const Layout: Component<YtSvelteLayoutProps>
 	export const Metadata: Component<YtSvelteMetadataProps>
@@ -112,6 +114,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export type HeadlineProps = YtSvelteHeadlineProps
 	export type HeroSectionProps = YtSvelteHeroSectionProps
 	export type ImageProps = YtSvelteImageProps
+	export type ImageGalleryIkeaProps = YtSvelteImageGalleryIkeaProps
 	export type ItemGrid0Props = YtSvelteItemGrid0Props
 	export type LayoutProps = YtSvelteLayoutProps
 	export type MetadataProps = YtSvelteMetadataProps

package/svelte.js

@@ -16,6 +16,7 @@ import DarkModeComponent from './components/DarkMode/DarkMode.svelte'
 import HeadlineComponent from './components/Headline/Headline.svelte'
 import HeroSectionComponent from './components/HeroSection/HeroSection.svelte'
 import ImageComponent from './components/Image/Image.svelte'
+import ImageGalleryIkeaComponent from './components/ImageGalleryIkea/ImageGalleryIkea.svelte'
 import ItemGrid0Component from './components/ItemGrid0/ItemGrid0.svelte'
 import LayoutComponent from './components/Layout/Layout.svelte'
 import MetadataComponent from './components/Metadata/Metadata.svelte'
@@ -63,6 +64,7 @@ export const DarkMode = DarkModeComponent
 export const Headline = HeadlineComponent
 export const HeroSection = HeroSectionComponent
 export const Image = ImageComponent
+export const ImageGalleryIkea = ImageGalleryIkeaComponent
 export const ItemGrid0 = ItemGrid0Component
 export const Layout = LayoutComponent
 export const Metadata = MetadataComponent

package/utils/URLUtils.ts

@@ -39,7 +39,7 @@ export const createPath = (...params: string[]): string => {
 export const cleanSlug = (text: string = ''): string =>
   trimSlash(text)
     .split('/')
-    .map((a: string) => slugify(a))
+    .map((a: string) => slugify(a).toLowerCase())
     .join('/');
 
 /**

package/utils/slugify.ts

@@ -28,8 +28,7 @@ function replace(string: string, options?: string | Options): string {
     throw new Error('slugify: string argument expected');
   }
 
-  const resolvedOptions: Options =
-    typeof options === 'string' ? { replacement: options } : options || {};
+  const resolvedOptions: Options = typeof options === 'string' ? { replacement: options } : options || {};
 
   const locale: LocaleMap = locales[resolvedOptions.locale || ''] || {};
   const replacement: string = resolvedOptions.replacement === undefined ? '-' : resolvedOptions.replacement;