@yatoday/astro-ui 0.9.0 → 0.10.2

package/astro.d.ts

@@ -12,6 +12,7 @@ import type { Card3Props as YtCard3Props } from './components/Card3/types'
 import type { Card4Props as YtCard4Props } from './components/Card4/types'
 import type { Card5Props as YtCard5Props } from './components/Card5/types'
 import type { Card6Props as YtCard6Props } from './components/Card6/types'
+import type { Card7Props as YtCard7Props } from './components/Card7/types'
 import type { ConditionalWrapperProps as YtConditionalWrapperProps } from './components/ConditionalWrapper/types'
 import type { CopyToClipboardProps as YtCopyToClipboardProps } from './components/CopyToClipboard/types'
 import type { DarkModeProps as YtDarkModeProps } from './components/DarkMode/types'
@@ -23,6 +24,7 @@ import type { ItemGrid0Props as YtItemGrid0Props } from './components/ItemGrid0/
 import type { ItemGrid1Props as YtItemGrid1Props } from './components/ItemGrid1/types'
 import type { LayoutProps as YtLayoutProps } from './components/Layout/types'
 import type { MetadataProps as YtMetadataProps } from './components/Metadata/types'
+import type { PointMapProps as YtPointMapProps } from './components/PointMap/types'
 import type { QuantitySwitchProps as YtQuantitySwitchProps } from './components/QuantitySwitch/types'
 import type { SiteVerificationProps as YtSiteVerificationProps } from './components/SiteVerification/types'
 import type { Stats0Props as YtStats0Props } from './components/Stats0/types'
@@ -64,6 +66,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export function Card4(_props: YtCard4Props): any
 	export function Card5(_props: YtCard5Props): any
 	export function Card6(_props: YtCard6Props): any
+	export function Card7(_props: YtCard7Props): any
 	export function ConditionalWrapper(_props: YtConditionalWrapperProps): any
 	export function CopyToClipboard(_props: YtCopyToClipboardProps): any
 	export function DarkMode(_props: YtDarkModeProps): any
@@ -75,6 +78,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export function ItemGrid1(_props: YtItemGrid1Props): any
 	export function Layout(_props: YtLayoutProps): any
 	export function Metadata(_props: YtMetadataProps): any
+	export function PointMap(_props: YtPointMapProps): any
 	export function QuantitySwitch(_props: YtQuantitySwitchProps): any
 	export function SiteVerification(_props: YtSiteVerificationProps): any
 	export function Stats0(_props: YtStats0Props): any
@@ -115,6 +119,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export type Card4Props = YtCard4Props
 	export type Card5Props = YtCard5Props
 	export type Card6Props = YtCard6Props
+	export type Card7Props = YtCard7Props
 	export type ConditionalWrapperProps = YtConditionalWrapperProps
 	export type CopyToClipboardProps = YtCopyToClipboardProps
 	export type DarkModeProps = YtDarkModeProps
@@ -126,6 +131,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export type ItemGrid1Props = YtItemGrid1Props
 	export type LayoutProps = YtLayoutProps
 	export type MetadataProps = YtMetadataProps
+	export type PointMapProps = YtPointMapProps
 	export type QuantitySwitchProps = YtQuantitySwitchProps
 	export type SiteVerificationProps = YtSiteVerificationProps
 	export type Stats0Props = YtStats0Props

package/astro.js

@@ -12,6 +12,7 @@ import Card3Component from './components/Card3/Card3.astro'
 import Card4Component from './components/Card4/Card4.astro'
 import Card5Component from './components/Card5/Card5.astro'
 import Card6Component from './components/Card6/Card6.astro'
+import Card7Component from './components/Card7/Card7.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
 import CopyToClipboardComponent from './components/CopyToClipboard/CopyToClipboard.astro'
 import DarkModeComponent from './components/DarkMode/DarkMode.astro'
@@ -23,6 +24,7 @@ import ItemGrid0Component from './components/ItemGrid0/ItemGrid0.astro'
 import ItemGrid1Component from './components/ItemGrid1/ItemGrid1.astro'
 import LayoutComponent from './components/Layout/Layout.astro'
 import MetadataComponent from './components/Metadata/Metadata.astro'
+import PointMapComponent from './components/PointMap/PointMap.astro'
 import QuantitySwitchComponent from './components/QuantitySwitch/QuantitySwitch.astro'
 import SiteVerificationComponent from './components/SiteVerification/SiteVerification.astro'
 import Stats0Component from './components/Stats0/Stats0.astro'
@@ -63,6 +65,7 @@ export const Card3 = Card3Component
 export const Card4 = Card4Component
 export const Card5 = Card5Component
 export const Card6 = Card6Component
+export const Card7 = Card7Component
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const CopyToClipboard = CopyToClipboardComponent
 export const DarkMode = DarkModeComponent
@@ -74,6 +77,7 @@ export const ItemGrid0 = ItemGrid0Component
 export const ItemGrid1 = ItemGrid1Component
 export const Layout = LayoutComponent
 export const Metadata = MetadataComponent
+export const PointMap = PointMapComponent
 export const QuantitySwitch = QuantitySwitchComponent
 export const SiteVerification = SiteVerificationComponent
 export const Stats0 = Stats0Component

package/components/Card7/Card7.astro

@@ -0,0 +1,53 @@
+---
+import type {Card7Props as Props} from './types';
+import Card0 from '../Card0/Card0.astro';
+import {Icon} from 'astro-icon/components';
+import {cn} from '../../utils';
+
+const {
+  title = await Astro.slots.render('title'),
+  description = await Astro.slots.render('description'),
+  callToAction,
+  as = 'article',
+  asHeader = 'h3',
+  icon = await Astro.slots.render('icon'),
+  classes = {},
+} = Astro.props;
+
+const WrapperHeaderTag = asHeader;
+const DefaultIcon = 'tabler:chevron-right';
+
+const {
+  container: containerClass = '',
+  title: titleClass = '',
+  description: descriptionClass = '',
+  icon: iconClass = '',
+} = classes;
+---
+
+<Card0
+  as={as}
+  classes={{
+    container: cn('flex flex-row p-0', containerClass),
+  }}
+>
+  <div class="flex items-center relative">
+    <div class={cn("flex flex-col gap-3 justify-between h-full p-4 ", callToAction && 'border-r dark:border-white/10 border-black/10')}>
+      {callToAction ? (
+        <a href={callToAction.href} class="flex items-center">
+          <WrapperHeaderTag class={cn('text-lg md:text-xl font-bold', titleClass)}>{title}</WrapperHeaderTag>
+          <span class="absolute inset-0" aria-hidden="true"></span>
+        </a>
+      ) : (
+        <WrapperHeaderTag class={cn('text-lg md:text-xl font-bold', titleClass)}>{title}</WrapperHeaderTag>
+      )}
+      {description && (
+        <p class={cn('text-muted-foreground text-sm/5 md:text-base', descriptionClass)} set:html={description}/>
+      )}
+
+      <slot/>
+    </div>
+
+    {callToAction && <Icon name={icon ?? DefaultIcon} class={cn('flex-none size-7 mx-1', iconClass)}/>}
+  </div>
+</Card0>

package/components/Card7/Card7.svelte

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

package/components/Card7/types.ts

@@ -0,0 +1,11 @@
+import type { HTMLTag } from 'astro/types';
+import type { Card0Props } from '../Card0/types';
+import type { ToAction } from '../../types';
+
+export type Card7Props = {
+  asHeader?: HTMLTag;
+  title?: string;
+  description?: string;
+  icon?: string;
+  callToAction?: ToAction;
+} & Card0Props;

package/components/HeroSection/HeroSection.astro

@@ -1,7 +1,6 @@
 ---
 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';
@@ -25,8 +24,10 @@ const urlForImage = Array.isArray(callToAction)
 
 const {
   container: containerClass = 'h-96',
+  start: startClass = 'w-full',
+  end: endClass = 'w-full',
   image: imageClass = '',
-  content: contentClass = '',
+  content: contentClass = 'md:px-12 lg:px-20 xl:px-24',
   title: titleClass = '',
   description: descriptionClass = '',
   action: actionClass = '',
@@ -36,25 +37,24 @@ const WrapperHeaderTag = asHeader;
 ---
 
 <div
-  class={twMerge(
-    'swiper-slide overflow-hidden bg-zinc-700 text-zinc-200 dark:bg-card dark:text-card-foreground',
+  class={cn(
+    '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)}>
-        <slot />
+  <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('p-6 w-full h-full md:h-auto', contentClass)}>
         {
           title && description && (
-            <div class="flex flex-col h-full justify-between">
+            <div class="flex flex-col h-full">
               <div class="mb-6">
                 <WrapperHeaderTag
-                  class={twMerge('text-base md:text-lg xl:text-2xl font-medium md:font-semibold mb-2', titleClass)}
+                  class={cn('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>
+                <p class={cn('text-sm md:text-base xl:text-lg', descriptionClass)}>{description}</p>
               </div>
 
               {callToAction && (
@@ -83,9 +83,11 @@ const WrapperHeaderTag = asHeader;
             </div>
           )
         }
+
+        <slot />
       </div>
     </div>
-    <div class="w-full md:h-auto">
+    <div class={cn("md:h-auto", endClass)}>
       {
         image && (
           <Fragment>
@@ -95,7 +97,7 @@ const WrapperHeaderTag = asHeader;
                   <Fragment set:html={image} />
                 ) : (
                   <Image
-                    class={twMerge('w-full md:h-full bg-gray-400 dark:bg-slate-700', imageClass)}
+                    class={cn('w-full md:h-full bg-gray-400 dark:bg-slate-700', imageClass)}
                     widths={[400, 900]}
                     width={400}
                     height={400}
@@ -113,7 +115,7 @@ const WrapperHeaderTag = asHeader;
                   <Fragment set:html={image} />
                 ) : (
                   <Image
-                    class={twMerge('w-full h-full')}
+                    class={cn('w-full h-full')}
                     widths={[400, 900]}
                     width={400}
                     height={400}

package/components/PointMap/PointMap.astro

@@ -0,0 +1,326 @@
+---
+import type {PointMapProps as Props} from './types';
+import {cn, id} from "../../utils";
+import Card7 from '../Card7/Card7.astro';
+
+const {
+  via = Card7,
+  items = [],
+  pointsDisplayMode = 'always', // default to always visible
+  classes = {}
+} = Astro.props;
+
+const mapId = `map-${id()}`;
+
+const {
+  container: containerClass = '',
+  popup: popupClass = '',
+} = classes;
+
+const Component = via;
+---
+
+<div id={mapId} class={cn(`map-picker relative h-full w-full points-${pointsDisplayMode}`, containerClass)}>
+  {items.map((point, i) => (
+    <>
+      <!-- Hotspot point -->
+      <button
+        class="hotspot-point cursor-pointer"
+        style={`left: ${point.x}%; top: ${point.y}%; width: 24px; height: 24px; transform: translate(-50%, -50%);`}
+        data-index={i}
+        data-map-id={mapId}
+        aria-label={point.title}
+        {...(point.isPopupOpen ? { 'data-initially-open': '' } : {})}
+      >
+      </button>
+
+      <!-- Popup content (hidden by default) -->
+      <div
+        class={cn("popup-content absolute rounded-md shadow-lg z-10 max-w-xs hidden", popupClass)}
+        style={`left: ${point.x}%; top: ${point.y}%; transform: translate(${point.x > 50 ? '-100%' : '0'}, ${point.y > 50 ? '-100%' : '0'});`}
+        data-popup={i}
+        data-map-id={mapId}
+      >
+        <Component 
+          {...point}
+          classes={Object.assign({container: 'border-transparent dark:border-input'}, classes?.card || {}, point?.classes || {}) as Record<string, string>}
+        />
+      </div>
+    </>
+  ))}
+
+  <div class="w-full h-full">
+    <slot/>
+  </div>
+</div>
+
+<style>
+  .map-picker {
+    max-width: 100%;
+    display: block;
+  }
+
+  .popup-content {
+    width: 250px;
+    margin: 10px;
+    transition: all 200ms ease-in-out;
+  }
+
+  /* Points display modes */
+  .points-hover .hotspot-point {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
+  }
+
+  .points-hover:hover .hotspot-point,
+  .points-hover .hotspot-point[data-initially-open] {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .hotspot-point {
+    box-sizing: border-box;
+    transition: border-color 250ms ease-in-out, opacity 250ms ease-in-out, visibility 250ms ease-in-out;
+    transform: translateX(-1rem) translateY(-1rem) scale(0.999);
+    padding: 0;
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid rgba(223, 223, 223, 0.75);
+    background-clip: padding-box;
+    position: absolute;
+    background-color: rgba(17, 17, 17, 0.75);
+    border-radius: 64px;
+    line-height: .5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hotspot-point::before {
+    content: "";
+    position: absolute;
+    top: -0.5rem;
+    left: -0.5rem;
+    right: -0.5rem;
+    bottom: -0.5rem;
+    display: block;
+  }
+
+  .hotspot-point::after {
+    content: "";
+    position: relative;
+    display: block;
+    background: rgb(255, 255, 255);
+    box-shadow: 0 1px 4px rgba(17, 17, 17, 0.55);
+    width: .75rem;
+    height: .75rem;
+    border-radius: 64px;
+    transition: transform 250ms ease-in-out;
+  }
+
+  .hotspot-point:active, .hotspot-point:hover {
+    background-color: rgba(17, 17, 17, 0.9);
+  }
+
+  .hotspot-point:hover::after {
+    transform: scale(0.667);
+  }
+</style>
+
+<script>
+  interface PointCoordinates {
+    x: number;
+    y: number;
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const POPUP_DATA_ATTRIBUTE = 'data-popup';
+    const MAP_ID_ATTRIBUTE = 'data-map-id';
+
+    // Initialize each map component separately
+    document.querySelectorAll('.map-picker').forEach(mapContainer => {
+      const mapId = mapContainer.id;
+      if (!mapId) return;
+
+      // Get all hotspot points and popups for this specific map
+      const hotspotPoints = document.querySelectorAll(`.hotspot-point[${MAP_ID_ATTRIBUTE}="${mapId}"]`);
+      const popups = document.querySelectorAll(`.popup-content[${MAP_ID_ATTRIBUTE}="${mapId}"]`) as NodeListOf<HTMLElement>;
+
+      if (!hotspotPoints.length || !popups.length) return;
+
+      // Check for initially open popups
+      hotspotPoints.forEach((point, index) => {
+        // Get the data attribute to check if the popup should be initially open
+        const isInitiallyOpen = point.hasAttribute('data-initially-open');
+        if (isInitiallyOpen) {
+          showPopup(index);
+        }
+      });
+
+      // Show a popup when hovering over a point
+      function showPopup(index: number) {
+        popups.forEach((popup: HTMLElement, i) => {
+          if (i === index) {
+            popup.classList.remove('hidden');
+
+            // Position correction for popups that don't fit within the container
+            // This is especially important for mobile devices with smaller screens
+            // where popups might extend beyond the visible area
+            const containerRect = mapContainer.getBoundingClientRect();
+            const popupRect = popup.getBoundingClientRect();
+
+            // Calculate offsets if popup extends beyond container
+            let offsetX = 0;
+            let offsetY = 0;
+
+            // Check horizontal overflow
+            if (popupRect.right > containerRect.right) {
+              offsetX = containerRect.right - popupRect.right - 10; // 10px padding
+            } else if (popupRect.left < containerRect.left) {
+              offsetX = containerRect.left - popupRect.left + 10; // 10px padding
+            }
+
+            // Check vertical overflow
+            if (popupRect.bottom > containerRect.bottom) {
+              offsetY = containerRect.bottom - popupRect.bottom - 10; // 10px padding
+            } else if (popupRect.top < containerRect.top) {
+              offsetY = containerRect.top - popupRect.top + 10; // 10px padding
+            }
+
+            // Apply position adjustment if needed
+            if (offsetX !== 0 || offsetY !== 0) {
+              // Get the point data to preserve the original positioning logic
+              const popupIndex = getPopupIndex(popup);
+              if (popupIndex === null) {
+                return;
+              }
+
+              const point = document.querySelector(`.hotspot-point[data-index="${popupIndex}"][${MAP_ID_ATTRIBUTE}="${mapId}"]`) as HTMLElement;
+              if (!point) return;
+              const coordinates = getPointCoordinates(point);
+              const translateX = coordinates.x > 50 ? '-100%' : '0';
+              const translateY = coordinates.y > 50 ? '-100%' : '0';
+
+              // Apply the original transform with additional pixel offsets for correction
+              popup.style.transform = `translate(${translateX}, ${translateY}) translate(${offsetX}px, ${offsetY}px)`;
+            }
+          } else {
+            popup.classList.add('hidden');
+          }
+        });
+      }
+
+      function getPointCoordinates(pointElement: HTMLElement): PointCoordinates {
+        return {
+          x: parseFloat(pointElement.style.left) || 0,
+          y: parseFloat(pointElement.style.top) || 0
+        };
+      }
+
+      function getPopupIndex(element: HTMLElement): number | null {
+        const rawIndex = element?.getAttribute(POPUP_DATA_ATTRIBUTE);
+        if (!rawIndex) {
+          return null;
+        }
+
+        const parsedIndex = parseInt(rawIndex, 10);
+        return isNaN(parsedIndex) ? null : parsedIndex;
+      }
+
+      function getPointIndex(element: Element): number | null {
+        const dataIndex = element.getAttribute('data-index');
+        if (!dataIndex) {
+          return null;
+        }
+        const index = parseInt(dataIndex, 10);
+        if (isNaN(index)) {
+          return null;
+        }
+        return index;
+      }
+
+      // Hide popup when the mouse leaves
+      function hidePopup() {
+        popups.forEach((popup: HTMLElement) => {
+          const index = getPopupIndex(popup);
+          if (index === null) return;
+
+          const point = document.querySelector(`.hotspot-point[data-index="${index}"][${MAP_ID_ATTRIBUTE}="${mapId}"]`);
+          if (!point) return;
+
+          // Only hide popups that aren't initially open
+          if (!point.hasAttribute('data-initially-open')) {
+            popup.classList.add('hidden');
+          }
+        });
+      }
+
+      // Hide all popups (including initially open ones)
+      function hideAllPopups() {
+        popups.forEach(popup => {
+          popup.classList.add('hidden');
+        });
+      }
+
+      // Add event listeners to hotspot points
+      hotspotPoints.forEach(point => {
+        const index = getPointIndex(point);
+        if (index === null) return;
+
+        point.addEventListener('mouseenter', () => {
+          // Hide all popups (including initially open ones) when hovering a new point
+          hideAllPopups();
+          showPopup(index);
+        });
+
+        point.addEventListener('mouseleave', () => {
+          hidePopup();
+        });
+
+        // Add click event to the toggle popup
+        point.addEventListener('click', (e) => {
+          e.preventDefault();
+          // Hide all popups first
+          hideAllPopups();
+          showPopup(index);
+        });
+      });
+
+      // Add an event listener to the container for mouseleave
+      mapContainer.addEventListener('mouseleave', () => {
+        // Hide all popups first
+        hideAllPopups();
+
+        // Show popups for points that should be initially open
+        hotspotPoints.forEach((point, index) => {
+          if (point.hasAttribute('data-initially-open')) {
+            showPopup(index);
+          }
+        });
+      });
+
+      // Add event listeners to popups to keep them visible when hovered
+      popups.forEach((popup: HTMLElement) => {
+        const index = getPopupIndex(popup);
+        if (index === null) return;
+
+        popup.addEventListener('mouseenter', () => {
+          showPopup(index);
+        });
+
+        popup.addEventListener('mouseleave', () => {
+          hidePopup(); // This will preserve initially open popups
+        });
+
+        // Add click event to close the popup
+        popup.addEventListener('click', (e) => {
+          // If the click is on the popup itself (not a child element), close it
+          if (e.target === popup) {
+            hideAllPopups();
+          }
+        });
+      });
+    });
+  });
+</script>

package/components/PointMap/PointMap.svelte

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

package/components/PointMap/types.ts

@@ -0,0 +1,8 @@
+import type {HotspotPoint} from "../../types";
+
+export type PointMapProps = {
+  via?: any;
+  items: HotspotPoint[];
+  pointsDisplayMode?: 'always' | 'hover' | undefined; // controls visibility of hotspot points
+  classes?: Record<string, string>;
+}

package/components/WidgetContent/WidgetContent.astro

@@ -6,6 +6,7 @@ import ItemGrid0 from '../ItemGrid0/ItemGrid0.astro';
 import Card4 from '../Card4/Card4.astro';
 import Button from '../Button/Button.astro';
 import Image from '../Image/Image.astro';
+import PointMap from '../PointMap/PointMap.astro';
 import { cn } from '../../utils';
 
 const {
@@ -15,6 +16,8 @@ const {
   content = await Astro.slots.render('content'),
   callToAction,
   items = [],
+  points = [],
+  pointsDisplayMode = 'always',
   columns,
   image = await Astro.slots.render('image'),
   isReversed = false,
@@ -31,7 +34,7 @@ const {
 <WidgetWrapper
   id={id}
   isDark={isDark}
-  containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
+  containerClass={`${isAfterContent ? 'pt-4 md:pt-6 lg:pt-8' : ''} ${classes?.container ?? ''}`}
   bg={bg}
 >
   <Headline
@@ -43,7 +46,8 @@ const {
   />
 
   <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
-    <div class="md:basis-1/2 self-center">
+    <div class={cn("md:basis-1/2 self-center", classes?.start ?? '')}>
+      <slot />
       {content && <div class={cn('mb-12 text-lg', classes?.content ?? '')} set:html={content} />}
 
       {
@@ -62,9 +66,9 @@ const {
                 icon={defaultIcon}
                 {...item}
                 classes={{
-                  container: `gap-0 border-0 py-0`,
+                  container: `gap-0 border-0 py-0 justify-start`,
                   title: 'text-lg font-medium leading-6 dark:text-white ml-2 rtl:ml-0 rtl:mr-2',
-                  description: 'text-muted dark:text-slate-400 ml-2 rtl:ml-0 rtl:mr-2',
+                  description: 'ml-2 rtl:ml-0 rtl:mr-2',
                   icon: 'flex h-7 w-7 items-center justify-center rounded-full bg-green-600 dark:bg-green-700 text-gray-50 p-1',
                   ...((classes?.items as object) ?? {}),
                 }}
@@ -73,24 +77,26 @@ const {
         }
       </ItemGrid0>
     </div>
-    <div aria-hidden="true" class="mt-10 md:mt-0 md:basis-1/2">
+    <div aria-hidden="true" class={cn("mt-10 md:mt-0 md:basis-1/2", classes?.end ?? '')}>
       {
         image && (
-          <div class={cn('relative m-auto max-w-4xl', classes?.image ?? '')}>
-            {typeof image === 'string' ? (
-              <Fragment set:html={image} />
-            ) : (
-              <Image
-                class="mx-auto w-full rounded-lg shadow-lg"
-                width={500}
-                height={500}
-                widths={[400, 768]}
-                sizes="(max-width: 768px) 100vw, 432px"
-                layout="responsive"
-                {...image}
-              />
-            )}
-          </div>
+            <div class={cn('relative m-auto max-w-4xl', classes?.image ?? '')}>
+              <PointMap items={points} pointsDisplayMode={pointsDisplayMode} classes={{...((classes?.points as object) ?? {})}}>
+              {typeof image === 'string' ? (
+                <Fragment set:html={image} />
+              ) : (
+                <Image
+                  class="mx-auto w-full rounded-lg shadow-lg"
+                  width={500}
+                  height={500}
+                  widths={[400, 768]}
+                  sizes="(max-width: 768px) 100vw, 432px"
+                  layout="responsive"
+                  {...image}
+                />
+              )}
+              </PointMap>
+            </div>
         )
       }
     </div>

package/components/WidgetContent/types.ts

@@ -1,4 +1,4 @@
-import type { Item, ToAction } from '../../types';
+import type {Item, HotspotPoint, ToAction} from '../../types';
 import type { WidgetWrapperProps } from '../WidgetWrapper/types';
 import type { HeadlineProps } from '../Headline/types.ts';
 
@@ -7,6 +7,8 @@ export type WidgetContentProps = {
   defaultIcon?: string;
   image?: string | unknown;
   items?: Array<Item>;
+  points?: Array<HotspotPoint>;
+  pointsDisplayMode?: 'always' | 'hover' | undefined; // controls visibility of hotspot points
   columns?: number;
   isReversed?: boolean;
   isAfterContent?: boolean;

package/components/WidgetFeaturesCard/WidgetFeaturesCard.astro

@@ -9,6 +9,7 @@ import { cn } from '../../utils';
 
 const {
   via = Card1,
+  viaGrid = ItemGrid0,
 
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
@@ -26,6 +27,7 @@ const {
 } = Astro.props;
 
 const Component = via;
+const ComponentGrid = viaGrid;
 ---
 
 <WidgetWrapper
@@ -43,7 +45,7 @@ const Component = via;
     classes={classes?.headline as Record<string, string>}
     position={position}
   />
-
+  
   {
     image && (
       <div aria-hidden="true" class={cn('aspect-w-16 aspect-h-7 mb-6')}>
@@ -70,7 +72,9 @@ const Component = via;
     )
   }
 
-  <ItemGrid0 columns={columns} class={classes?.grid && ''}>
-    {items && items.map((item) => <Component {...item} classes={classes?.card as Record<string, string>} />)}
-  </ItemGrid0>
+  <slot />
+
+  <ComponentGrid columns={columns} class={classes?.grid && ''}>
+    {items && items.map((item) => <Component {...item} classes={Object.assign({}, classes?.card || {}, item?.classes || {}) as Record<string, string>}/>)}
+  </ComponentGrid>
 </WidgetWrapper>

package/components/WidgetFeaturesCard/types.ts

@@ -3,6 +3,7 @@ import type { Image } from '../../types';
 
 export type WidgetFeaturesCardProps = {
   via?: any;
+  viaGrid?: any;
   items?: any[];
   columns?: number;
   image?: Image | string;

package/components/WidgetSwiperPhotoSlider/WidgetSwiperPhotoSlider.astro

@@ -5,6 +5,7 @@ import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro';
 import SwiperSlider from '../SwiperSlider/SwiperSlider.astro';
 import { Image as AstroImage, getImage } from 'astro:assets';
 import { fetchLocalImages } from '../../utils/images';
+import Button from "../Button/Button.astro";
 
 const {
   title = await Astro.slots.render('title'),
@@ -13,7 +14,8 @@ const {
   imagesFolder,
   position = 'center',
   isAfterContent = false,
-
+  callToAction,
+  
   id = (Math.random() + 1).toString(36).substring(7),
   withNavigation = true,
   isDark = false,
@@ -77,6 +79,14 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
       </SwiperSlider>
     )
   }
+
+  {
+    callToAction && (
+      <div class="flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
+        <Button {...callToAction} />
+      </div>
+    )
+  }
 </WidgetWrapper>
 
 <script>

package/components/WidgetSwiperPhotoSlider/types.ts

@@ -1,10 +1,12 @@
 import type { WidgetWrapperProps } from '../WidgetWrapper/types';
 import type { HeadlineProps } from '../Headline/types';
+import type {ToAction} from "../../types";
 
 export type WidgetSwiperPhotoSliderProps = {
   isAfterContent?: boolean;
   withNavigation?: boolean;
   imagesFolder: string;
   classes?: Record<string, string>;
+  callToAction?: ToAction;
 } & WidgetWrapperProps &
   Omit<HeadlineProps, 'classes'>;

package/components/WidgetWrapper/WidgetWrapper.astro

@@ -21,8 +21,8 @@ const WrapperTag = as;
   <div
     class:list={[
       cn(
-        'relative mx-auto max-w-7xl 2xl:max-w-[96rem] px-4 md:px-6 text-default',
-        isAfterContent ? 'py-6 md:py-8' : 'py-12 md:py-16 lg:py-20',
+        'relative mx-auto max-w-7xl 2xl:max-w-[96rem] px-4 md:px-6 lg:px-10  text-default',
+        isAfterContent ? 'pt-6 md:pt-8 pb-12 md:pb-16 lg:pb-20' : 'py-12 md:py-16 lg:py-20',
         containerClass
       ),
       { dark: isDark },

package/index.d.ts

@@ -22,6 +22,16 @@ export type NameValue = {
   value?: string;
 };
 
+export type HotspotPoint = {
+  x: number; // percentage from the left (0-100)
+  y: number; // percentage from top (0-100)
+  title: string;
+  description: string;
+  isPopupOpen?: boolean; // whether the popup is open on initialization
+  classes?: Record<string, string>;
+  callToAction?: CallToAction;
+}
+
 export type Item = {
   title?: string;
   description?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.2",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",
@@ -32,14 +32,14 @@
     "unpic": "^3.22.0"
   },
   "peerDependencies": {
-    "astro": "^5.4.2"
+    "astro": "^5.10.1"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.4",
     "@astrojs/mdx": "^4.1.0",
     "@astrojs/node": "^9.1.2",
     "@astrojs/partytown": "^2.1.4",
-    "@astrojs/svelte": "^7.0.5",
+    "@astrojs/svelte": "^7.1.0",
     "@eslint/js": "9.18.0",
     "@iconify-json/tabler": "^1.2.10",
     "@tailwindcss/cli": "^4.0.13",

package/styles/styles.css

@@ -387,6 +387,9 @@
   .m-auto {
     margin: auto;
   }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -981,6 +984,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .border-l-2 {
     border-left-style: var(--tw-border-style);
     border-left-width: 2px;
@@ -989,6 +996,9 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-black\/10 {
+    border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+  }
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
@@ -1210,6 +1220,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
@@ -1225,6 +1238,9 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
+  .pb-12 {
+    padding-bottom: calc(var(--spacing) * 12);
+  }
   .pb-\[56\%\] {
     padding-bottom: 56%;
   }
@@ -2244,6 +2260,16 @@
       padding-top: calc(var(--spacing) * 0);
     }
   }
+  .md\:pt-6 {
+    @media (width >= 48rem) {
+      padding-top: calc(var(--spacing) * 6);
+    }
+  }
+  .md\:pt-8 {
+    @media (width >= 48rem) {
+      padding-top: calc(var(--spacing) * 8);
+    }
+  }
   .md\:pt-\[76px\] {
     @media (width >= 48rem) {
       padding-top: 76px;
@@ -2254,6 +2280,11 @@
       padding-bottom: calc(var(--spacing) * 8);
     }
   }
+  .md\:pb-16 {
+    @media (width >= 48rem) {
+      padding-bottom: calc(var(--spacing) * 16);
+    }
+  }
   .md\:pl-0 {
     @media (width >= 48rem) {
       padding-left: calc(var(--spacing) * 0);
@@ -2388,6 +2419,11 @@
       column-gap: calc(var(--spacing) * 24);
     }
   }
+  .lg\:px-10 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 10);
+    }
+  }
   .lg\:px-20 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 20);
@@ -2418,11 +2454,21 @@
       padding-top: calc(var(--spacing) * 0);
     }
   }
+  .lg\:pt-8 {
+    @media (width >= 64rem) {
+      padding-top: calc(var(--spacing) * 8);
+    }
+  }
   .lg\:pb-12 {
     @media (width >= 64rem) {
       padding-bottom: calc(var(--spacing) * 12);
     }
   }
+  .lg\:pb-20 {
+    @media (width >= 64rem) {
+      padding-bottom: calc(var(--spacing) * 20);
+    }
+  }
   .lg\:text-4xl {
     @media (width >= 64rem) {
       font-size: var(--text-4xl);
@@ -2664,6 +2710,11 @@
       border-color: var(--color-gray-700);
     }
   }
+  .dark\:border-white\/10 {
+    &:where(.dark, .dark *) {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
   .dark\:border-zinc-700 {
     &:where(.dark, .dark *) {
       border-color: var(--color-zinc-700);
@@ -2734,11 +2785,6 @@
       color: var(--color-slate-200);
     }
   }
-  .dark\:text-slate-400 {
-    &:where(.dark, .dark *) {
-      color: var(--color-slate-400);
-    }
-  }
   .dark\:text-white {
     &:where(.dark, .dark *) {
       color: var(--color-white);

package/svelte.d.ts

@@ -13,6 +13,7 @@ import type { SvelteCard3Props as YtSvelteCard3Props } from './components/Card3/
 import type { SvelteCard4Props as YtSvelteCard4Props } from './components/Card4/types'
 import type { SvelteCard5Props as YtSvelteCard5Props } from './components/Card5/types'
 import type { SvelteCard6Props as YtSvelteCard6Props } from './components/Card6/types'
+import type { SvelteCard7Props as YtSvelteCard7Props } from './components/Card7/types'
 import type { SvelteConditionalWrapperProps as YtSvelteConditionalWrapperProps } from './components/ConditionalWrapper/types'
 import type { SvelteCopyToClipboardProps as YtSvelteCopyToClipboardProps } from './components/CopyToClipboard/types'
 import type { SvelteDarkModeProps as YtSvelteDarkModeProps } from './components/DarkMode/types'
@@ -24,6 +25,7 @@ import type { SvelteItemGrid0Props as YtSvelteItemGrid0Props } from './component
 import type { SvelteItemGrid1Props as YtSvelteItemGrid1Props } from './components/ItemGrid1/types'
 import type { SvelteLayoutProps as YtSvelteLayoutProps } from './components/Layout/types'
 import type { SvelteMetadataProps as YtSvelteMetadataProps } from './components/Metadata/types'
+import type { SveltePointMapProps as YtSveltePointMapProps } from './components/PointMap/types'
 import type { SvelteQuantitySwitchProps as YtSvelteQuantitySwitchProps } from './components/QuantitySwitch/types'
 import type { SvelteSiteVerificationProps as YtSvelteSiteVerificationProps } from './components/SiteVerification/types'
 import type { SvelteStats0Props as YtSvelteStats0Props } from './components/Stats0/types'
@@ -65,6 +67,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export const Card4: Component<YtSvelteCard4Props>
 	export const Card5: Component<YtSvelteCard5Props>
 	export const Card6: Component<YtSvelteCard6Props>
+	export const Card7: Component<YtSvelteCard7Props>
 	export const ConditionalWrapper: Component<YtSvelteConditionalWrapperProps>
 	export const CopyToClipboard: Component<YtSvelteCopyToClipboardProps>
 	export const DarkMode: Component<YtSvelteDarkModeProps>
@@ -76,6 +79,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export const ItemGrid1: Component<YtSvelteItemGrid1Props>
 	export const Layout: Component<YtSvelteLayoutProps>
 	export const Metadata: Component<YtSvelteMetadataProps>
+	export const PointMap: Component<YtSveltePointMapProps>
 	export const QuantitySwitch: Component<YtSvelteQuantitySwitchProps>
 	export const SiteVerification: Component<YtSvelteSiteVerificationProps>
 	export const Stats0: Component<YtSvelteStats0Props>
@@ -116,6 +120,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export type Card4Props = YtSvelteCard4Props
 	export type Card5Props = YtSvelteCard5Props
 	export type Card6Props = YtSvelteCard6Props
+	export type Card7Props = YtSvelteCard7Props
 	export type ConditionalWrapperProps = YtSvelteConditionalWrapperProps
 	export type CopyToClipboardProps = YtSvelteCopyToClipboardProps
 	export type DarkModeProps = YtSvelteDarkModeProps
@@ -127,6 +132,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export type ItemGrid1Props = YtSvelteItemGrid1Props
 	export type LayoutProps = YtSvelteLayoutProps
 	export type MetadataProps = YtSvelteMetadataProps
+	export type PointMapProps = YtSveltePointMapProps
 	export type QuantitySwitchProps = YtSvelteQuantitySwitchProps
 	export type SiteVerificationProps = YtSvelteSiteVerificationProps
 	export type Stats0Props = YtSvelteStats0Props

package/svelte.js

@@ -12,6 +12,7 @@ import Card3Component from './components/Card3/Card3.svelte'
 import Card4Component from './components/Card4/Card4.svelte'
 import Card5Component from './components/Card5/Card5.svelte'
 import Card6Component from './components/Card6/Card6.svelte'
+import Card7Component from './components/Card7/Card7.svelte'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
 import CopyToClipboardComponent from './components/CopyToClipboard/CopyToClipboard.svelte'
 import DarkModeComponent from './components/DarkMode/DarkMode.svelte'
@@ -23,6 +24,7 @@ import ItemGrid0Component from './components/ItemGrid0/ItemGrid0.svelte'
 import ItemGrid1Component from './components/ItemGrid1/ItemGrid1.svelte'
 import LayoutComponent from './components/Layout/Layout.svelte'
 import MetadataComponent from './components/Metadata/Metadata.svelte'
+import PointMapComponent from './components/PointMap/PointMap.svelte'
 import QuantitySwitchComponent from './components/QuantitySwitch/QuantitySwitch.svelte'
 import SiteVerificationComponent from './components/SiteVerification/SiteVerification.svelte'
 import Stats0Component from './components/Stats0/Stats0.svelte'
@@ -63,6 +65,7 @@ export const Card3 = Card3Component
 export const Card4 = Card4Component
 export const Card5 = Card5Component
 export const Card6 = Card6Component
+export const Card7 = Card7Component
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const CopyToClipboard = CopyToClipboardComponent
 export const DarkMode = DarkModeComponent
@@ -74,6 +77,7 @@ export const ItemGrid0 = ItemGrid0Component
 export const ItemGrid1 = ItemGrid1Component
 export const Layout = LayoutComponent
 export const Metadata = MetadataComponent
+export const PointMap = PointMapComponent
 export const QuantitySwitch = QuantitySwitchComponent
 export const SiteVerification = SiteVerificationComponent
 export const Stats0 = Stats0Component