@yatoday/astro-ui 0.18.2 → 0.18.4

package/components/CopyToClipboard/CopyToClipboard.astro

@@ -1,16 +1,9 @@
 ---
 import type { CopyToClipboardProps as Props } from './types';
-import Button from "../Button/Button.astro";
+import Button from '../Button/Button.astro';
 import { Icon } from 'astro-icon/components';
 
-const {
-  variant = 'outline',
-  size = 'icon',
-  text = '',
-  class: className = '',
-  type = 'button',
-  ...rest
-} = Astro.props;
+const { variant = 'outline', size = 'icon', text = '', class: className = '', type = 'button', ...rest } = Astro.props;
 ---
 
 <Button
@@ -19,7 +12,7 @@ const {
   class={className}
   variant={variant}
   size={size}
-  {...(rest as any)}
+  {...rest as any}
 >
   <span class="copy-icon">
     <Icon name="tabler:copy" />
@@ -31,7 +24,7 @@ const {
 
 <script>
   import { on, get } from '../../utils';
-  import copyToClipboard from "./copy";
+  import copyToClipboard from './copy';
 
   declare global {
     interface Window {
@@ -54,8 +47,8 @@ const {
   const addCopyListeners = (btn: HTMLElement) => {
     btn.addEventListener('click', (e) => {
       e.preventDefault();
-      
-      if(btn.dataset.ytCopyToClipboard) {
+
+      if (btn.dataset.ytCopyToClipboard) {
         copyToClipboard(btn.dataset.ytCopyToClipboard);
 
         // Show check icon
@@ -72,7 +65,6 @@ const {
             checkIcon.style.display = 'none';
           }, 3000);
         }
-
       }
     });
   };

package/components/CopyToClipboard/copy.ts

@@ -17,7 +17,7 @@ function unsecuredCopyToClipboard(text: string) {
  * Check if using HTTPS and navigator.clipboard is available
  * Then uses standard clipboard API, otherwise uses fallback
  */
-export default async function copyToClipboard (value: string) {
+export default async function copyToClipboard(value: string) {
   if (window.isSecureContext && navigator.clipboard) {
     await navigator.clipboard.writeText(value);
   } else {

package/components/DarkMode/__tests__/DarkMode.test.ts

@@ -14,10 +14,10 @@ describe('DarkMode Component', () => {
           add: vi.fn(),
           remove: vi.fn(),
           toggle: vi.fn(),
-          contains: vi.fn().mockReturnValue(true)
-        }
+          contains: vi.fn().mockReturnValue(true),
+        },
       },
-      writable: true
+      writable: true,
     });
 
     // Mock localStorage
@@ -25,14 +25,14 @@ describe('DarkMode Component', () => {
       value: {
         theme: null,
         getItem: vi.fn(),
-        setItem: vi.fn()
+        setItem: vi.fn(),
       },
-      writable: true
+      writable: true,
     });
 
     // Mock matchMedia
     Object.defineProperty(window, 'matchMedia', {
-      value: vi.fn().mockImplementation(query => ({
+      value: vi.fn().mockImplementation((query) => ({
         matches: false,
         media: query,
         onchange: null,
@@ -42,7 +42,7 @@ describe('DarkMode Component', () => {
         removeEventListener: vi.fn(),
         dispatchEvent: vi.fn(),
       })),
-      writable: true
+      writable: true,
     });
 
     // Reset darkModeInitialized
@@ -52,7 +52,7 @@ describe('DarkMode Component', () => {
   // Test toggle functionality
   it('toggles dark mode correctly', () => {
     const root = document.documentElement;
-    
+
     // Simulate toggle
     root.classList.toggle('dark');
     localStorage.theme = root.classList.contains('dark') ? 'dark' : 'light';

package/components/Headline/Headline.astro

@@ -51,7 +51,10 @@ const SubtitleTag = asSubtitle;
       )}
 
       {subtitle && (
-        <SubtitleTag class={cn('mt-1 md:mt-4 text-muted-foreground text-lg/6 md:text-xl', subtitleClass)} set:html={subtitle} />
+        <SubtitleTag
+          class={cn('mt-1 md:mt-4 text-muted-foreground text-lg/6 md:text-xl', subtitleClass)}
+          set:html={subtitle}
+        />
       )}
     </div>
   )

package/components/HeroSection/HeroSection.astro

@@ -39,14 +39,9 @@ const WrapperHeaderTag = asHeader;
 const WrapperDescriptionTag = asDescription;
 ---
 
-<div
-  class={cn(
-    'overflow-hidden bg-zinc-700 text-zinc-200 dark:bg-card dark:text-card-foreground',
-    containerClass
-  )}
->
+<div class={cn('overflow-hidden bg-zinc-700 text-zinc-200 dark:bg-card dark:text-card-foreground', containerClass)}>
   <div class="flex flex-col-reverse justify-between md:flex-row h-full">
-    <div class={cn("flex items-center justify-center", startClass)}>
+    <div class={cn('flex items-center justify-center', startClass)}>
       <div class={cn('p-6 w-full h-full md:h-auto', contentClass)}>
         {
           title && description && (
@@ -57,7 +52,9 @@ const WrapperDescriptionTag = asDescription;
                 >
                   {title}
                 </WrapperHeaderTag>
-                <WrapperDescriptionTag class={cn('text-sm md:text-base xl:text-lg', descriptionClass)}>{description}</WrapperDescriptionTag>
+                <WrapperDescriptionTag class={cn('text-sm md:text-base xl:text-lg', descriptionClass)}>
+                  {description}
+                </WrapperDescriptionTag>
               </div>
 
               {callToAction && (
@@ -77,7 +74,7 @@ const WrapperDescriptionTag = asDescription;
                       {typeof callToAction === 'string' ? (
                         <Fragment set:html={callToAction} />
                       ) : (
-                        <Button {...(callToAction as Object)} class="w-full sm:mb-0" />
+                        <Button {...(callToAction as object)} class="w-full sm:mb-0" />
                       )}
                     </Fragment>
                   )}
@@ -90,7 +87,7 @@ const WrapperDescriptionTag = asDescription;
         <slot />
       </div>
     </div>
-    <div class={cn("md:h-auto", endClass)}>
+    <div class={cn('md:h-auto', endClass)}>
       {
         image && (
           <Fragment>
@@ -106,9 +103,9 @@ const WrapperDescriptionTag = asDescription;
                     height={1080}
                     sizes="(max-width: 768px) 100vw, 60vw"
                     layout="cover"
-                    loading={isFirstSlide ? "eager" : "lazy"}
-                    fetchpriority={isFirstSlide ? "high" : undefined}
-                    decoding={isFirstSlide ? "sync" : "async"}
+                    loading={isFirstSlide ? 'eager' : 'lazy'}
+                    fetchpriority={isFirstSlide ? 'high' : undefined}
+                    decoding={isFirstSlide ? 'sync' : 'async'}
                     {...image}
                   />
                 )}
@@ -125,9 +122,9 @@ const WrapperDescriptionTag = asDescription;
                     height={1080}
                     sizes="(max-width: 768px) 100vw, 60vw"
                     layout="cover"
-                    loading={isFirstSlide ? "eager" : "lazy"}
-                    fetchpriority={isFirstSlide ? "high" : undefined}
-                    decoding={isFirstSlide ? "sync" : "async"}
+                    loading={isFirstSlide ? 'eager' : 'lazy'}
+                    fetchpriority={isFirstSlide ? 'high' : undefined}
+                    decoding={isFirstSlide ? 'sync' : 'async'}
                     {...image}
                   />
                 )}

package/components/Image/Image.astro

@@ -54,10 +54,4 @@ if (
 }
 ---
 
-{
-  !image ? (
-    <Fragment />
-  ) : (
-    <img src={image.src} referrerpolicy="no-referrer" {...image.attributes} />
-  )
-}
+{!image ? <Fragment /> : <img src={image.src} referrerpolicy="no-referrer" {...image.attributes} />}

package/components/ImageGallery/ImageGallery.astro

@@ -22,104 +22,99 @@ const hasBadgeBottomRight = Astro.slots.has('badgeBottomRight');
 const hasBadgeBottomLeft = Astro.slots.has('badgeBottomLeft');
 ---
 
-{images.length > 0 && (
-  <div class={cn('image-gallery relative w-full h-full', className)}>
-    {/* Badge slots */}
-    {hasBadgeBottomRight && (
-      <div class="absolute z-30 bottom-2 right-2">
-        <slot name="badgeBottomRight" />
-      </div>
-    )}
-
-    {hasBadgeBottomLeft && (
-      <div class="absolute z-30 bottom-2 left-2">
-        <slot name="badgeBottomLeft" />
-      </div>
-    )}
-
-    {hasMultipleImages ? (
-      /* Multi-image gallery with hover zones */
-      <div class="image-gallery-multi relative w-full h-full" data-image-count={images.length}>
-        {/* All images stacked, first visible by default */}
-        {images.map((img, index) => (
-          <div
-            class={cn(
-              'image-gallery-item absolute inset-0 transition-opacity duration-200',
-              index === 0 ? 'opacity-100' : 'opacity-0'
-            )}
-            data-index={index}
-          >
-            {typeof img === 'string' ? (
-              <Fragment set:html={img} />
-            ) : (
-              <Image
-                class={cn(
-                  'w-full h-full',
-                  imageClass,
-                  hoverEffect && 'group-hover:scale-105 transition duration-300'
-                )}
-                widths={widths}
-                width={width}
-                height={height}
-                sizes={sizes}
-                layout={imageLayout}
-                loading={index === 0 ? 'eager' : 'lazy'}
-                decoding="async"
-                {...img}
-              />
-            )}
-          </div>
-        ))}
+{
+  images.length > 0 && (
+    <div class={cn('image-gallery relative w-full h-full', className)}>
+      {/* Badge slots */}
+      {hasBadgeBottomRight && (
+        <div class="absolute z-30 bottom-2 right-2">
+          <slot name="badgeBottomRight" />
+        </div>
+      )}
 
-        {/* Invisible hover zones */}
-        <div class="absolute inset-0 flex z-20">
-          {images.map((_, index) => (
-            <div
-              class="image-gallery-zone flex-1 h-full cursor-pointer"
-              data-zone={index}
-            />
-          ))}
+      {hasBadgeBottomLeft && (
+        <div class="absolute z-30 bottom-2 left-2">
+          <slot name="badgeBottomLeft" />
         </div>
+      )}
 
-        {/* Indicator dots */}
-        <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1 z-10">
-          {images.map((_, index) => (
+      {hasMultipleImages ? (
+        /* Multi-image gallery with hover zones */
+        <div class="image-gallery-multi relative w-full h-full" data-image-count={images.length}>
+          {/* All images stacked, first visible by default */}
+          {images.map((img, index) => (
             <div
               class={cn(
-                'image-gallery-indicator w-1.5 h-1.5 rounded-full transition-all duration-200',
-                index === 0 ? 'bg-white' : 'bg-white/50'
+                'image-gallery-item absolute inset-0 transition-opacity duration-200',
+                index === 0 ? 'opacity-100' : 'opacity-0'
               )}
-              data-indicator={index}
-            />
+              data-index={index}
+            >
+              {typeof img === 'string' ? (
+                <Fragment set:html={img} />
+              ) : (
+                <Image
+                  class={cn(
+                    'w-full h-full',
+                    imageClass,
+                    hoverEffect && 'group-hover:scale-105 transition duration-300'
+                  )}
+                  widths={widths}
+                  width={width}
+                  height={height}
+                  sizes={sizes}
+                  layout={imageLayout}
+                  loading={index === 0 ? 'eager' : 'lazy'}
+                  decoding="async"
+                  {...img}
+                />
+              )}
+            </div>
           ))}
+
+          {/* Invisible hover zones */}
+          <div class="absolute inset-0 flex z-20">
+            {images.map((_, index) => (
+              <div class="image-gallery-zone flex-1 h-full cursor-pointer" data-zone={index} />
+            ))}
+          </div>
+
+          {/* Indicator dots */}
+          <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1 z-10">
+            {images.map((_, index) => (
+              <div
+                class={cn(
+                  'image-gallery-indicator w-1.5 h-1.5 rounded-full transition-all duration-200',
+                  index === 0 ? 'bg-white' : 'bg-white/50'
+                )}
+                data-indicator={index}
+              />
+            ))}
+          </div>
         </div>
-      </div>
-    ) : (
-      /* Single image */
-      <Fragment>
-        {typeof images[0] === 'string' ? (
-          <Fragment set:html={images[0]} />
-        ) : (
-          <Image
-            class={cn(
-              'w-full h-full',
-              imageClass,
-              hoverEffect && 'group-hover:scale-105 transition duration-300'
-            )}
-            widths={widths}
-            width={width}
-            height={height}
-            sizes={sizes}
-            layout={imageLayout}
-            loading="lazy"
-            decoding="async"
-            {...images[0]}
-          />
-        )}
-      </Fragment>
-    )}
-  </div>
-)}
+      ) : (
+        /* Single image */
+        <Fragment>
+          {typeof images[0] === 'string' ? (
+            <Fragment set:html={images[0]} />
+          ) : (
+            <Image
+              class={cn('w-full h-full', imageClass, hoverEffect && 'group-hover:scale-105 transition duration-300')}
+              widths={widths}
+              width={width}
+              height={height}
+              sizes={sizes}
+              layout={imageLayout}
+              loading="lazy"
+              decoding="async"
+              {...images[0]}
+            />
+          )}
+        </Fragment>
+      )}
+    </div>
+  )
+}
 
 <script>
   function initImageGalleries() {

package/components/ImageGalleryIkea/ImageGalleryIkea.astro

@@ -38,7 +38,9 @@ const { container: containerClass = '', swiper: swiperClass = '', swiperThumb: s
 
   /* Loading spinner animation */
   @keyframes gallery-spin {
-    to { transform: rotate(360deg); }
+    to {
+      transform: rotate(360deg);
+    }
   }
   .gallery-spinner {
     animation: gallery-spin 1s linear infinite;
@@ -83,7 +85,6 @@ const { container: containerClass = '', swiper: swiperClass = '', swiperThumb: s
             prevEl: `#btn-prev-${id}`,
           })
         : false}
-      })}
     >
       {
         images &&

package/components/ImagePreload/ImagePreload.astro

@@ -13,7 +13,12 @@
  * />
  */
 import { findImage } from '../../utils/images';
-import { astroAsseetsOptimizer, getImagesOptimized, isUnpicCompatible, unpicOptimizer } from '../../utils/images-optimization';
+import {
+  astroAsseetsOptimizer,
+  getImagesOptimized,
+  isUnpicCompatible,
+  unpicOptimizer,
+} from '../../utils/images-optimization';
 import type { ImageProps } from '../../utils/images-optimization';
 
 interface Props {
@@ -31,7 +36,7 @@ const {
   widths = [400, 600],
   width = 600,
   height = 400,
-  fetchpriority = 'high'
+  fetchpriority = 'high',
 } = Astro.props;
 
 const _image = await findImage(src);
@@ -62,25 +67,22 @@ if (_image) {
 
   if (image) {
     imageSrc = image.src;
-    imageSrcset = image.attributes.srcset as string || '';
+    imageSrcset = (image.attributes.srcset as string) || '';
   }
 }
 ---
 
-{imageSrcset ? (
-  <link
-    rel="preload"
-    as="image"
-    href={imageSrc}
-    imagesrcset={imageSrcset}
-    imagesizes={sizes}
-    fetchpriority={fetchpriority}
-  />
-) : imageSrc ? (
-  <link
-    rel="preload"
-    as="image"
-    href={imageSrc}
-    fetchpriority={fetchpriority}
-  />
-) : null}
+{
+  imageSrcset ? (
+    <link
+      rel="preload"
+      as="image"
+      href={imageSrc}
+      imagesrcset={imageSrcset}
+      imagesizes={sizes}
+      fetchpriority={fetchpriority}
+    />
+  ) : imageSrc ? (
+    <link rel="preload" as="image" href={imageSrc} fetchpriority={fetchpriority} />
+  ) : null
+}

package/components/ItemGrid1/ItemGrid1.astro

@@ -1,64 +1,74 @@
 ---
 import type { ItemGrid1Props as Props } from './types';
 
-import {cn} from "../../utils";
+import { cn } from '../../utils';
 
 const { class: classNames } = Astro.props;
 ---
 
 <style is:global>
-  .item-grid > :nth-child(1) { grid-area: a }
-  .item-grid > :nth-child(2) { grid-area: b }
-  .item-grid > :nth-child(3) { grid-area: c }
-  .item-grid > :nth-child(4) { grid-area: d }
-  .item-grid > :nth-child(5) { grid-area: e }
+  .item-grid > :nth-child(1) {
+    grid-area: a;
+  }
+  .item-grid > :nth-child(2) {
+    grid-area: b;
+  }
+  .item-grid > :nth-child(3) {
+    grid-area: c;
+  }
+  .item-grid > :nth-child(4) {
+    grid-area: d;
+  }
+  .item-grid > :nth-child(5) {
+    grid-area: e;
+  }
 
   /* Dynamic grid layouts based on number of children */
-  .item-grid:has(>:nth-child(4):last-child) {
-    grid-template-areas: "a a" "b c" "d d";
+  .item-grid:has(> :nth-child(4):last-child) {
+    grid-template-areas: 'a a' 'b c' 'd d';
   }
 
   @media screen and (min-width: 56.25em) {
-    .item-grid:has(>:nth-child(4):last-child) {
-      grid-template-areas: "a a b c" "a a d d";
+    .item-grid:has(> :nth-child(4):last-child) {
+      grid-template-areas: 'a a b c' 'a a d d';
     }
   }
   /* 5 items */
-  .item-grid:has(>:nth-child(5):last-child) {
-    grid-template-areas: "a a" "b c" "d c" "d e";
+  .item-grid:has(> :nth-child(5):last-child) {
+    grid-template-areas: 'a a' 'b c' 'd c' 'd e';
   }
 
   @media screen and (min-width: 56.25em) {
-    .item-grid:has(>:nth-child(5):last-child) {
-      grid-template-areas: "a a b c" "a a d c" "a a d e";
+    .item-grid:has(> :nth-child(5):last-child) {
+      grid-template-areas: 'a a b c' 'a a d c' 'a a d e';
     }
   }
 
   /* 3 items */
-  .item-grid:has(>:nth-child(3):last-child) {
-    grid-template-areas: "a a" "b c";
+  .item-grid:has(> :nth-child(3):last-child) {
+    grid-template-areas: 'a a' 'b c';
   }
 
   @media screen and (min-width: 56.25em) {
-    .item-grid:has(>:nth-child(3):last-child) {
-      grid-template-areas: "a a b b" "a a c c";
+    .item-grid:has(> :nth-child(3):last-child) {
+      grid-template-areas: 'a a b b' 'a a c c';
     }
   }
 
   /* 2 items */
-  .item-grid:has(>:nth-child(2):last-child) {
-    grid-template-areas: "a" "b";
+  .item-grid:has(> :nth-child(2):last-child) {
+    grid-template-areas: 'a' 'b';
   }
 
   @media screen and (min-width: 56.25em) {
-    .item-grid:has(>:nth-child(2):last-child) {
-      grid-template-areas: "a b";
+    .item-grid:has(> :nth-child(2):last-child) {
+      grid-template-areas: 'a b';
     }
   }
 
   /* 1 item */
-  .item-grid:has(>:nth-child(1):last-child) {
-    grid-template-areas: "a";
+  .item-grid:has(> :nth-child(1):last-child) {
+    grid-template-areas: 'a';
   }
 </style>
 

package/components/Metadata/Metadata.astro

@@ -47,11 +47,7 @@ const alternateLocales = alternateUrls
         locale: lang,
         url: alternateUrls[lang],
       }))
-      .concat(
-        alternateUrls[defaultLocale]
-          ? [{ locale: 'x-default', url: alternateUrls[defaultLocale] }]
-          : []
-      )
+      .concat(alternateUrls[defaultLocale] ? [{ locale: 'x-default', url: alternateUrls[defaultLocale] }] : [])
   : supportedLocales
       .map((lang) => {
         // Replace current locale with target locale and ensure trailing slash