Merge pull request #109 from incluud/next

Next

Author: markteekman

package.json

@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-components",
   "description": "A set of Accessible, easy to use, Front-end UI Components for Astro.",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "author": "Incluud",
   "license": "MIT",
   "homepage": "https://accessible-astro.incluud.dev/components/overview/",

src/components/badge/Badge.astro

@@ -33,7 +33,7 @@ interface Props {
    * Type of animation to apply on hover (when isButton is true)
    * @default "boop"
    */
-  animationType?: 'rotate' | 'boop' | 'bounce' | 'none'
+  animationType?: 'rotate' | 'boop' | 'bouncing' | 'none'
   /**
    * Animation intensity (1-10)
    * @default 5
@@ -81,15 +81,18 @@ const {
   ...rest
 } = Astro.props
 
+// Clamp animation intensity between 1-10
+const clampedIntensity = Math.max(1, Math.min(10, animationIntensity))
+
 // Calculate animation values based on intensity
-const scaleAmount = 1 + animationIntensity * 0.02 // 1.02 to 1.2
-const rotateAmount = animationIntensity * 2 // 2deg to 20deg
+const scaleAmount = 1 + clampedIntensity * 0.02 // 1.02 to 1.2
+const rotateAmount = clampedIntensity * 2 // 2deg to 20deg
 
-// Only apply animation class if it's a button
-const shouldAnimate = isButton && animateOnHover
+// Only apply animation class if it's a button and not 'none' type
+const shouldAnimate = isButton && animateOnHover && animationType !== 'none'
 
 // Determine animation class based on type
-const animationClass = shouldAnimate ? `animate-${animationType}` : ''
+const animationClass = shouldAnimate ? `animate-${animationType}-svg` : ''
 
 // Determine if we should apply the circular class
 const circularClass = isCircular ? 'circular' : ''
@@ -98,7 +101,7 @@ const circularClass = isCircular ? 'circular' : ''
 const pillClass = isPill ? 'pill' : ''
 
 // Determine if we should apply the pulse class
-const pulseClass = pulse ? 'pulse' : ''
+const pulseClass = pulse ? 'animation-pulse' : ''
 
 // Map logical size values to CSS class names
 const sizeClass = `size-${size}`
@@ -117,6 +120,7 @@ const sizeClass = `size-${size}`
         pulseClass,
         className,
       ]}
+      style={`--scaleAmount: ${scaleAmount}; --rotateAmount: ${rotateAmount}deg;`}
       {...rest}
     >
       {label && <span class="sr-only">{label}</span>}
@@ -141,12 +145,7 @@ const sizeClass = `size-${size}`
   )
 }
 
-<style
-  define:vars={{
-    scaleAmount,
-    rotateAmount: `${rotateAmount}deg`,
-  }}
->
+<style>
   :where(.badge) {
     --transition-duration: 0.3s;
     --transition-easing: cubic-bezier(0.165, 0.84, 0.44, 1);
@@ -269,56 +268,23 @@ const sizeClass = `size-${size}`
   }
 
   /* Set pulse colors based on badge type */
-  :where(.pulse.type-default) {
+  :where(.animation-pulse.type-default) {
     --pulse-color: var(--color-pulse-default);
   }
 
-  :where(.pulse.type-info) {
+  :where(.animation-pulse.type-info) {
     --pulse-color: var(--color-pulse-info);
   }
 
-  :where(.pulse.type-success) {
+  :where(.animation-pulse.type-success) {
     --pulse-color: var(--color-pulse-success);
   }
 
-  :where(.pulse.type-warning) {
+  :where(.animation-pulse.type-warning) {
     --pulse-color: var(--color-pulse-warning);
   }
 
-  :where(.pulse.type-error) {
+  :where(.animation-pulse.type-error) {
     --pulse-color: var(--color-pulse-error);
   }
-
-  /* Apply pulse animation */
-  :where(.pulse) {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 3;
-  }
-
-  /* Animation classes - apply only to SVG icons */
-  button.animate-boop:where(:hover, :focus-visible) :global(svg) {
-    animation: boop 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-  }
-
-  button.animate-bounce:where(:hover, :focus-visible) :global(svg) {
-    animation: bounce 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-  }
-
-  button.animate-rotate:where(:hover, :focus-visible) :global(svg) {
-    animation: rotate 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-  }
-
-  /* Respect user preferences */
-  @media (prefers-reduced-motion: reduce) {
-    button.animate-boop:where(:hover, :focus-visible) :global(svg),
-    button.animate-bounce:where(:hover, :focus-visible) :global(svg),
-    button.animate-rotate:where(:hover, :focus-visible) :global(svg) {
-      transform: none;
-      animation: none;
-    }
-
-    :where(.pulse) {
-      animation: none;
-      box-shadow: 0 0 0 2px rgba(var(--pulse-color, 0, 0, 0), 0.3);
-    }
-  }
 </style>

src/components/card/Card.astro

@@ -4,6 +4,9 @@
  *
  * @description A versatile card component with image, title, and content areas
  */
+import { Image } from 'astro:assets'
+import type { ImageMetadata } from 'astro'
+
 interface Props extends astroHTML.JSX.HTMLAttributes {
   /**
    * Additional classes to apply to the card
@@ -19,6 +22,32 @@ interface Props extends astroHTML.JSX.HTMLAttributes {
    * @default "https://fakeimg.pl/640x360"
    */
   img?: string
+  /**
+   * Optional Astro Image component to use instead of a regular img
+   * Can be a direct ImageMetadata object or a Promise from import()
+   * @default undefined
+   */
+  imageComponent?: ImageMetadata | Promise<{ default: ImageMetadata }>
+  /**
+   * Alt text for the image
+   * @default ""
+   */
+  imageAlt?: string
+  /**
+   * Width of the image (required for remote images with Image component)
+   * @default 640
+   */
+  width?: number
+  /**
+   * Height of the image (required for remote images with Image component)
+   * @default 360
+   */
+  height?: number
+  /**
+   * Whether to infer the image size (for remote images)
+   * @default false
+   */
+  inferSize?: boolean
   /**
    * URL for the card's link
    * @default "#"
@@ -40,6 +69,11 @@ const {
   class: className,
   title = 'Default title',
   img = 'https://fakeimg.pl/640x360',
+  imageComponent,
+  imageAlt = '',
+  width = 640,
+  height = 360,
+  inferSize = false,
   url = '#',
   tagName = 'h3',
   footer = '',
@@ -51,7 +85,13 @@ const Tag = tagName
 
 <article class:list={['card', className]} {...rest}>
   <div class="image">
-    <img src={img} alt="" />
+    {
+      imageComponent ? (
+        <Image src={imageComponent} alt={imageAlt} width={width} height={height} />
+      ) : (
+        <img src={img} alt={imageAlt} width={width} height={height} />
+      )
+    }
   </div>
   <div class="content">
     <div class="title">

src/components/darkmode/DarkMode.astro

@@ -19,10 +19,14 @@ interface Props {
    * @default "auto"
    */
   initialMode?: 'light' | 'dark' | 'auto'
+  /**
+   * Children elements for slots
+   */
+  children?: any
   /**
    * HTML attributes to spread on the dark mode toggle
    */
-  [key: string]: string | number | boolean | undefined
+  [key: string]: string | number | boolean | undefined | any
 }
 
 const { class: className, label = 'Toggle Dark Mode', initialMode = 'auto', ...rest } = Astro.props

src/styles/animations.css

@@ -3,6 +3,13 @@
  * Common animations used across components
  */
 
+/* Common animation variables */
+:root {
+  --animation-timing: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --animation-duration-hover: 0.5s;
+  --animation-duration-pulse: 2s;
+}
+
 /* Pulse animation for badges and notifications */
 @keyframes pulse {
   0% {
@@ -37,8 +44,8 @@
   }
 }
 
-/* Bounce animation for buttons and interactive elements */
-@keyframes bounce {
+/* Bouncing animation for buttons and interactive elements */
+@keyframes bouncing {
   0% {
     transform: translateY(0);
   }
@@ -69,16 +76,54 @@
   }
 }
 
+/* Animation utility classes */
+@media (prefers-reduced-motion: no-preference) {
+  .animate-boop:where(:hover, :focus-visible) {
+    animation: boop var(--animation-duration-hover) var(--animation-timing) forwards;
+  }
+
+  .animate-bouncing:where(:hover, :focus-visible) {
+    animation: bouncing var(--animation-duration-hover) var(--animation-timing) forwards;
+  }
+
+  .animate-rotate:where(:hover, :focus-visible) {
+    animation: rotate var(--animation-duration-hover) var(--animation-timing) forwards;
+  }
+
+  /* Classes specifically for SVG animation */
+  .animate-boop-svg:where(:hover, :focus-visible) svg {
+    animation: boop var(--animation-duration-hover) var(--animation-timing) forwards;
+  }
+
+  .animate-bouncing-svg:where(:hover, :focus-visible) svg {
+    animation: bouncing var(--animation-duration-hover) var(--animation-timing) forwards;
+  }
+
+  .animate-rotate-svg:where(:hover, :focus-visible) svg {
+    animation: rotate var(--animation-duration-hover) var(--animation-timing) forwards;
+  }
+
+  /* Pulse animation */
+  .animation-pulse {
+    --pulse-iteration-count: var(--pulse-iterations, 3);
+    animation: pulse var(--animation-duration-pulse) var(--animation-timing)
+      var(--pulse-iteration-count);
+  }
+}
+
 /* Respect user preferences */
 @media (prefers-reduced-motion: reduce) {
-  .animate-boop:where(:hover, :focus-visible) svg,
-  .animate-bounce:where(:hover, :focus-visible) svg,
-  .animate-rotate:where(:hover, :focus-visible) svg {
+  .animate-boop:where(:hover, :focus-visible),
+  .animate-bouncing:where(:hover, :focus-visible),
+  .animate-rotate:where(:hover, :focus-visible),
+  .animate-boop-svg:where(:hover, :focus-visible) svg,
+  .animate-bouncing-svg:where(:hover, :focus-visible) svg,
+  .animate-rotate-svg:where(:hover, :focus-visible) svg {
     transform: none;
     animation: none;
   }
 
-  .pulse {
+  .animation-pulse {
     animation: none;
     box-shadow: 0 0 0 2px rgba(var(--pulse-color, 0, 0, 0), 0.3);
   }

src/types/index.d.ts

@@ -72,7 +72,7 @@ export const AvatarGroup: AvatarGroup
  * @param _props.type - Type/color variant ('info' | 'success' | 'warning' | 'error' | 'default') - default: 'default'
  * @param _props.isButton - Whether to render as a button element - default: false
  * @param _props.animateOnHover - Whether to animate the icon on hover (only works with isButton) - default: false
- * @param _props.animationType - Type of animation to apply on hover ('rotate' | 'boop' | 'bounce' | 'none') - default: 'boop'
+ * @param _props.animationType - Type of animation to apply on hover ('rotate' | 'boop' | 'bouncing' | 'none') - default: 'boop'
  * @param _props.animationIntensity - Animation intensity (1-10) - default: 5
  * @param _props.isCircular - Whether to display the badge as a circle (best for single numbers/characters) - default: false
  * @param _props.isPill - Whether to display the badge with fully rounded corners (pill style) - default: false
@@ -119,6 +119,11 @@ export const Breadcrumbs: Breadcrumbs
  * @param _props - astroHTML.JSX.HTMLAttributes
  * @param _props.url - `<a href={url}>` - default: "#"
  * @param _props.img - `<img src={img}>` - default value = placeholder
+ * @param _props.imageComponent - Optional Astro Image component (supports both ImageMetadata and dynamic import)
+ * @param _props.imageAlt - Alt text for the image - default: ""
+ * @param _props.width - Width of the image (required for remote images) - default: 640
+ * @param _props.height - Height of the image (required for remote images) - default: 360
+ * @param _props.inferSize - Whether to infer the image size (for remote images) - default: false
  * @param _props.title - `<h3>` header > `<a>` text content
  * @param _props.footer - `<small>` text content
  * @param _props.tagName - HTML tag to use for the title - default: 'h3'
@@ -138,6 +143,8 @@ export const Card: Card
  * @param _props.initialMode - Optional: Sets initial theme mode ('light' | 'dark' | 'auto') - default: 'auto'
  * @param _props.label - Optional: Accessible label for the toggle button - default: 'Toggle Dark Mode'
  * @param _props.class - Optional CSS class names
+ * @param _props.children - Optional: Custom elements for light/dark mode icons using named slots
+ * @note Supports named slots: "light" for light mode icon and "dark" for dark mode icon
  * @note Additional HTML attributes can be passed and will be spread to the root element
  * ```
  * <style>