@yatoday/astro-ui 0.7.2 → 0.8.3

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 { 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'
 import type { HeadlineProps as YtHeadlineProps } from './components/Headline/types'
 import type { HeroSectionProps as YtHeroSectionProps } from './components/HeroSection/types'
@@ -61,6 +62,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export function Card4(_props: YtCard4Props): any
 	export function Card5(_props: YtCard5Props): any
 	export function ConditionalWrapper(_props: YtConditionalWrapperProps): any
+	export function CopyToClipboard(_props: YtCopyToClipboardProps): any
 	export function DarkMode(_props: YtDarkModeProps): any
 	export function Headline(_props: YtHeadlineProps): any
 	export function HeroSection(_props: YtHeroSectionProps): any
@@ -109,6 +111,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export type Card4Props = YtCard4Props
 	export type Card5Props = YtCard5Props
 	export type ConditionalWrapperProps = YtConditionalWrapperProps
+	export type CopyToClipboardProps = YtCopyToClipboardProps
 	export type DarkModeProps = YtDarkModeProps
 	export type HeadlineProps = YtHeadlineProps
 	export type HeroSectionProps = YtHeroSectionProps

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 ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
+import CopyToClipboardComponent from './components/CopyToClipboard/CopyToClipboard.astro'
 import DarkModeComponent from './components/DarkMode/DarkMode.astro'
 import HeadlineComponent from './components/Headline/Headline.astro'
 import HeroSectionComponent from './components/HeroSection/HeroSection.astro'
@@ -60,6 +61,7 @@ export const Card3 = Card3Component
 export const Card4 = Card4Component
 export const Card5 = Card5Component
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const CopyToClipboard = CopyToClipboardComponent
 export const DarkMode = DarkModeComponent
 export const Headline = HeadlineComponent
 export const HeroSection = HeroSectionComponent

package/components/Button/__tests__/Button.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+import { themeVariants } from '../theme-variants';
+
+describe('Button Theme Variants', () => {
+  it('has the correct default variant', () => {
+    const classes = themeVariants({ variant: 'default' });
+    expect(classes).toContain('bg-secondary');
+    expect(classes).toContain('text-secondary-foreground');
+  });
+
+  it('has the correct primary variant', () => {
+    const classes = themeVariants({ variant: 'primary' });
+    expect(classes).toContain('bg-primary');
+    expect(classes).toContain('text-primary-foreground');
+  });
+
+  it('has the correct size classes for default size', () => {
+    const classes = themeVariants({ size: 'default' });
+    expect(classes).toContain('px-6');
+    expect(classes).toContain('h-10');
+  });
+
+  it('has the correct size classes for small size', () => {
+    const classes = themeVariants({ size: 'sm' });
+    expect(classes).toContain('h-8');
+    expect(classes).toContain('px-4');
+  });
+});

package/components/Card0/Card0.astro

@@ -1,6 +1,7 @@
 ---
 import type { Card0Props as Props } from './types';
 import { twMerge } from 'tailwind-merge';
+import { Fragment } from 'astro/components';
 
 const { badge, as = 'article', classes = {} } = Astro.props;
 
@@ -17,7 +18,7 @@ const { container: containerClass = '', badge: badgeClass = 'top-2 left-2' } = c
 >
   <div class={twMerge('absolute z-10', badgeClass)}>
     <slot name="badge">
-      {badge && <Fragment set:html={badge} />}
+      {badge && <span set:html={badge} />}
     </slot>
   </div>
 

package/components/Card0/Card0.svelte

@@ -1,7 +1,30 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { Card0Props } from './types';
 
+  export let badge: Card0Props['badge'] = undefined;
+  export let as: Card0Props['as'] = 'article';
+  export let classes: Card0Props['classes'] = {};
+
+  const { container: containerClass = '', badge: badgeClass = 'top-2 left-2' } = classes;
 </script>
 
-<div>
-  TODO
-</div>
+<svelte:element 
+  this={as}
+  class={twMerge(
+    'relative flex flex-col justify-between gap-6 overflow-hidden rounded-lg border border-input bg-card text-card-foreground py-6 group',
+    containerClass
+  )}
+>
+  <div class={twMerge('absolute z-10', badgeClass)}>
+    <slot name="badge">
+      {#if badge}
+        {@html badge}
+      {/if}
+    </slot>
+  </div>
+
+  <slot name="image" />
+
+  <slot />
+</svelte:element>

package/components/Card4/Card4.astro

@@ -48,6 +48,8 @@ const {
           <p class={cn('text-muted-foreground text-sm/5 md:text-base', descriptionClass)} set:html={description} />
         )
       }
+
+      <slot />
     </div>
 
     {

package/components/CopyToClipboard/CopyToClipboard.astro

@@ -0,0 +1,76 @@
+---
+import type { CopyToClipboardProps as Props } from './types';
+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;
+---
+
+<Button
+  data-yt-copy-to-clipboard={text}
+  type={type}
+  class={className}
+  variant={variant}
+  size={size}
+  {...rest}
+>
+  <span class="copy-icon">
+    <Icon name="tabler:copy" />
+  </span>
+  <span class="check-icon" style="display: none;">
+    <Icon name="tabler:check" />
+  </span>
+</Button>
+
+<script>
+  import { on, get } from '../../utils';
+  import copyToClipboard from "./copy";
+
+  const init = () => {
+    // Only run once
+    if (!window.copyToClipboardInitialized) {
+      window.copyToClipboardInitialized = true;
+
+      const btn = get('[data-yt-copy-to-clipboard]', true) as NodeListOf<HTMLElement>;
+      if (btn && btn.length === 0) return;
+
+      btn.forEach(addCopyListeners);
+    }
+  };
+
+  const addCopyListeners = (btn: HTMLElement) => {
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      
+      if(btn.dataset.ytCopyToClipboard) {
+        copyToClipboard(btn.dataset.ytCopyToClipboard);
+
+        // Show check icon
+        const copyIcon = btn.querySelector('.copy-icon') as HTMLElement;
+        const checkIcon = btn.querySelector('.check-icon') as HTMLElement;
+
+        if (copyIcon && checkIcon) {
+          copyIcon.style.display = 'none';
+          checkIcon.style.display = 'block';
+
+          // Reset back to copy icon after 3 seconds
+          setTimeout(() => {
+            copyIcon.style.display = 'block';
+            checkIcon.style.display = 'none';
+          }, 3000);
+        }
+
+      }
+    });
+  };
+
+  on(document, 'astro:after-swap', init);
+  init();
+</script>

package/components/CopyToClipboard/CopyToClipboard.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type {CopyToClipboardProps} from './types';
+  import Button from '../Button/Button.svelte';
+  import Copy from "lucide-svelte/icons/copy";
+  import Check from "lucide-svelte/icons/check";
+  import copyToClipboard from "./copy.ts";
+
+  let {
+    class: className = '',
+    variant = 'outline',
+    size = 'icon',
+    ref = $bindable(null),
+    text = undefined,
+    type = 'button',
+    children,
+    ...restProps
+  }: CopyToClipboardProps = $props();
+
+  let showCheck = $state(false);
+
+  /**
+   * Copies the text passed as param to the system clipboard
+   * Check if using HTTPS and navigator.clipboard is available
+   * Then uses standard clipboard API, otherwise uses fallback
+   */
+  const copy = async (value: string) => {
+    await copyToClipboard(value);
+    
+    showCheck = true;
+    setTimeout(() => {
+      showCheck = false;
+    }, 3000);
+  }
+</script>
+
+<Button
+  type={type}
+  class={className}
+  variant={variant}
+  size={size}
+  onclick={() => copy(text)}
+  {...restProps}
+>
+  {#if showCheck}
+    <Check />
+  {:else}
+    <Copy />
+  {/if}
+
+</Button>

package/components/CopyToClipboard/copy.ts

@@ -0,0 +1,26 @@
+function unsecuredCopyToClipboard(text: string) {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand('copy');
+  } catch (err) {
+    console.error('Unable to copy to clipboard', err);
+  }
+  document.body.removeChild(textArea);
+}
+
+/**
+ * Copies the text passed as param to the system clipboard
+ * Check if using HTTPS and navigator.clipboard is available
+ * Then uses standard clipboard API, otherwise uses fallback
+ */
+export default async function copyToClipboard (value: string) {
+  if (window.isSecureContext && navigator.clipboard) {
+    await navigator.clipboard.writeText(value);
+  } else {
+    unsecuredCopyToClipboard(value);
+  }
+}

package/components/CopyToClipboard/types.ts

@@ -0,0 +1,10 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ButtonSize, ButtonVariant } from '../Button/theme-variants.ts';
+
+export type CopyToClipboardProps = WithElementRef<HTMLButtonAttributes> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  text?: string;
+  class?: string;
+};

package/components/DarkMode/DarkMode.svelte

@@ -1,7 +1,73 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import Icon from '@iconify/svelte';
+  import type { DarkModeProps } from './types';
 
+  export let label: DarkModeProps['label'] = 'Toggle between Dark and Light mode';
+  export let class: DarkModeProps['class'] = 'dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+  export let iconClass: DarkModeProps['iconClass'] = 'w-6 h-6';
+  export let iconName: DarkModeProps['iconName'] = 'tabler:sun';
+  export let initialMode: DarkModeProps['initialMode'] = 'system';
+
+  let root: HTMLElement;
+
+  function applyTheme(theme: string) {
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+  }
+
+  function initialize() {
+    if ((initialMode && initialMode.endsWith(':only')) || (!localStorage.theme && initialMode !== 'system')) {
+      applyTheme(initialMode.replace(':only', ''));
+    } else if (
+      localStorage.theme === 'dark' ||
+      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      applyTheme('dark');
+    } else {
+      applyTheme('light');
+    }
+  }
+
+  function toggleDarkMode() {
+    if (initialMode.endsWith(':only')) {
+      return;
+    }
+    root.classList.toggle('dark');
+    localStorage.theme = root.classList.contains('dark') ? 'dark' : 'light';
+  }
+
+  onMount(() => {
+    // Only run once
+    if (!window.darkModeInitialized) {
+      window.darkModeInitialized = true;
+
+      root = document.documentElement;
+
+      // Listen for view transitions (if using Astro)
+      document.addEventListener('astro:after-swap', () => {
+        initialize();
+      });
+
+      initialize();
+    }
+  });
 </script>
 
-<div>
-  TODO
-</div>
+{#if !initialMode.endsWith(':only')}
+  <button
+    type="button"
+    class={twMerge('cursor-pointer inline-flex items-center', class)}
+    aria-label={label}
+    data-yt-toggle-color-scheme
+    on:click={toggleDarkMode}
+  >
+    <slot>
+      <Icon icon={iconName} class={iconClass} />
+    </slot>
+  </button>
+{/if}

package/components/Headline/Headline.astro

@@ -5,7 +5,7 @@ import { cn } from '../../utils';
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
-  tagline,
+  tagline = await Astro.slots.render('tagline'),
   position = 'center',
   classes = {},
   as = 'h2',

package/components/ImageGalleryIkea/ImageGalleryIkea.astro

@@ -14,11 +14,7 @@ const {
   ...rest
 } = Astro.props;
 
-const {
-  container: containerClass = '',
-  swiper: swiperClass = '',
-  swiperThumb: swiperThumbClass = '',
-} = classes;
+const { container: containerClass = '', swiper: swiperClass = '', swiperThumb: swiperThumbClass = '' } = classes;
 ---
 
 <style>
@@ -28,7 +24,7 @@ const {
   }
 </style>
 
-<div class={cn("@container relative", containerClass)} data-image-gallery-ikea={id}>
+<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

package/components/Layout/Layout.astro

@@ -6,12 +6,12 @@ import type { LayoutProps as Props } from './types';
 
 import { I18N } from 'vendor:config';
 
-const { metadata = {} } = Astro.props;
+const { metadata = {}, class: className } = Astro.props;
 const { language, textDirection } = I18N;
 ---
 
 <!doctype html>
-<html lang={language} dir={textDirection}>
+<html lang={language} dir={textDirection} class={className}>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

package/components/Layout/types.ts

@@ -10,4 +10,5 @@ export type LayoutProps = {
   openGraph?: MetaDataOpenGraph;
   twitter?: MetaDataTwitter;
   metadata?: MetaData;
+  class?: string;
 };

package/components/WidgetBrands/WidgetBrands.astro

@@ -7,11 +7,12 @@ import { Icon } from 'astro-icon/components';
 import { cn } from '../../utils';
 
 const {
-  title = '',
-  subtitle = '',
-  tagline = '',
+  title = await Astro.slots.render('title'),
+  subtitle = await Astro.slots.render('subtitle'),
+  tagline = await Astro.slots.render('tagline'),
   icons = [],
   images = [],
+  position = 'center',
   isAfterContent = false,
   id,
   isDark = false,
@@ -26,7 +27,7 @@ const {
   containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} />
+  <Headline title={title} subtitle={subtitle} tagline={tagline} position={position} />
 
   <div class="flex flex-wrap justify-center gap-x-6 sm:gap-x-12 lg:gap-x-24">
     {

package/components/WidgetCardSlider/WidgetCardSlider.astro

@@ -14,7 +14,7 @@ const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
-
+  position = 'center',
   items = [] as Card1Props[] | Card2Props[] | Card3Props[],
   isAfterContent = false,
 
@@ -35,7 +35,13 @@ const Component = via;
   bg={bg}
   containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container}`}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={classes?.headline as Record<string, string>}
+    position={position}
+  />
 
   {
     items && (

package/components/WidgetContent/WidgetContent.astro

@@ -20,7 +20,7 @@ const {
   isReversed = false,
   isAfterContent = false,
   defaultIcon = 'tabler:check',
-
+  position = 'center',
   id,
   isDark = false,
   classes = {},
@@ -34,7 +34,13 @@ const {
   containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={classes?.headline as Record<string, string>}
+    position={position}
+  />
 
   <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
     <div class="md:basis-1/2 self-center">

package/components/WidgetFaq1/WidgetFaq1.astro

@@ -12,7 +12,7 @@ const {
   items = [],
   columns = 2,
   isAfterContent = false,
-
+  position = 'center',
   id,
   isDark = false,
   classes = {},
@@ -26,7 +26,14 @@ const {
   containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={classes?.headline as Record<string, string>}
+    position={position}
+  />
+
   <ItemGrid0 columns={columns}>
     {
       items &&

package/components/WidgetFeatures0/WidgetFeatures0.astro

@@ -11,7 +11,7 @@ const {
   tagline = await Astro.slots.render('tagline'),
   isAfterContent = false,
   callToAction = await Astro.slots.render('actions'),
-
+  position = 'center',
   id,
   isDark = false,
   classes = {},
@@ -25,7 +25,13 @@ const {
   containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={classes?.headline as Record<string, string>}
+    position={position}
+  />
   <slot />
 
   {

package/components/WidgetFeaturesCard/WidgetFeaturesCard.astro

@@ -16,7 +16,7 @@ const {
   items = [],
   columns = 4,
   image = await Astro.slots.render('image'),
-
+  position = 'center',
   isBeforeContent,
   isAfterContent,
   id,
@@ -36,7 +36,13 @@ const Component = via;
   }`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={classes?.headline as Record<string, string>}
+    position={position}
+  />
 
   {
     image && (

package/components/WidgetStats/WidgetStats.astro

@@ -11,6 +11,7 @@ const {
   tagline,
   items = [],
   callToAction,
+  position = 'center',
   id,
   isDark = false,
   classes = {},
@@ -26,7 +27,13 @@ const {
   ${classes?.container ?? ''}`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={classes?.headline as Record<string, string>}
+    position={position}
+  />
 
   <Stats0 items={items} classes={classes?.items as Record<string, string>} />
 

package/components/WidgetSwiperPhotoSlider/WidgetSwiperPhotoSlider.astro

@@ -5,13 +5,13 @@ 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 Image from '../Image/Image.astro';
 
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
   imagesFolder,
+  position = 'center',
   isAfterContent = false,
 
   id = (Math.random() + 1).toString(36).substring(7),
@@ -34,7 +34,13 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
   bg={bg}
   containerClass={`gallery ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container}`}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={classes?.headline as Record<string, string>}
+    position={position}
+  />
 
   {
     imagePaths && (
@@ -53,7 +59,7 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
                 data-pswp-width={optimizedImage.attributes.width}
                 data-pswp-height={optimizedImage.attributes.height}
                 target="_blank"
-                class="group overflow-hidden rounded-md border-primary cursor-zoom-in block mb-4"
+                class="group overflow-hidden rounded-md border-primary cursor-zoom-in block"
               >
                 <AstroImage
                   src={image}

package/components/WidgetTestimonials/WidgetTestimonials.astro

@@ -7,14 +7,14 @@ import Button from '../Button/Button.astro';
 import Card5 from '../Card5/Card5.astro';
 
 const {
-  title = '',
-  subtitle = '',
-  tagline = '',
+  title = await Astro.slots.render('title'),
+  subtitle = await Astro.slots.render('subtitle'),
+  tagline = await Astro.slots.render('tagline'),
   items = [],
   callToAction,
   columns = 3,
   isAfterContent = false,
-
+  position = 'center',
   id,
   isDark = false,
   classes = {},
@@ -28,7 +28,7 @@ const {
   containerClass={`max-w-6xl mx-auto ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} />
+  <Headline title={title} subtitle={subtitle} tagline={tagline} position={position} />
 
   <ItemGrid0 columns={columns}>
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.7.2",
+  "version": "0.8.3",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",
@@ -20,7 +20,10 @@
     "fix": "npm run fix:eslint && npm run fix:prettier",
     "fix:eslint": "eslint --fix .",
     "fix:prettier": "prettier -w .",
-    "create-component": "node scripts/createComponent.js"
+    "create-component": "node scripts/createComponent.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "lodash.merge": "^4.6.2",
@@ -39,6 +42,11 @@
     "@astrojs/svelte": "^7.0.5",
     "@eslint/js": "9.18.0",
     "@iconify-json/tabler": "^1.2.10",
+    "@tailwindcss/cli": "^4.0.13",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.12",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.7",
     "@types/html-escaper": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash.merge": "^4.6.9",
@@ -54,21 +62,20 @@
     "eslint-plugin-svelte": "2.46.1",
     "husky": "9.1.7",
     "js-yaml": "^4.1.0",
-    "jsdom": "26.0.0",
+    "jsdom": "^26.0.0",
     "lint-staged": "15.4.2",
+    "lucide-svelte": "^0.469.0",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
     "svelte": "5.20.1",
     "svelte-eslint-parser": "0.43.0",
-    "tailwindcss": "^4.0.12",
     "tailwind-merge": "^3.0.0",
     "tailwind-variants": "^0.3.1",
-    "@tailwindcss/cli": "^4.0.13",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.0.12",
+    "tailwindcss": "^4.0.12",
     "typescript": "5.7.3",
     "typescript-eslint": "8.21.0",
-    "vite-tsconfig-paths": "5.1.4"
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "^3.1.3"
   },
   "exports": {
     ".": "./index.js",

package/styles/styles.css

@@ -279,6 +279,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }

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 { 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'
 import type { SvelteHeadlineProps as YtSvelteHeadlineProps } from './components/Headline/types'
 import type { SvelteHeroSectionProps as YtSvelteHeroSectionProps } from './components/HeroSection/types'
@@ -62,6 +63,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export const Card4: Component<YtSvelteCard4Props>
 	export const Card5: Component<YtSvelteCard5Props>
 	export const ConditionalWrapper: Component<YtSvelteConditionalWrapperProps>
+	export const CopyToClipboard: Component<YtSvelteCopyToClipboardProps>
 	export const DarkMode: Component<YtSvelteDarkModeProps>
 	export const Headline: Component<YtSvelteHeadlineProps>
 	export const HeroSection: Component<YtSvelteHeroSectionProps>
@@ -110,6 +112,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export type Card4Props = YtSvelteCard4Props
 	export type Card5Props = YtSvelteCard5Props
 	export type ConditionalWrapperProps = YtSvelteConditionalWrapperProps
+	export type CopyToClipboardProps = YtSvelteCopyToClipboardProps
 	export type DarkModeProps = YtSvelteDarkModeProps
 	export type HeadlineProps = YtSvelteHeadlineProps
 	export type HeroSectionProps = YtSvelteHeroSectionProps

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 ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
+import CopyToClipboardComponent from './components/CopyToClipboard/CopyToClipboard.svelte'
 import DarkModeComponent from './components/DarkMode/DarkMode.svelte'
 import HeadlineComponent from './components/Headline/Headline.svelte'
 import HeroSectionComponent from './components/HeroSection/HeroSection.svelte'
@@ -60,6 +61,7 @@ export const Card3 = Card3Component
 export const Card4 = Card4Component
 export const Card5 = Card5Component
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const CopyToClipboard = CopyToClipboardComponent
 export const DarkMode = DarkModeComponent
 export const Headline = HeadlineComponent
 export const HeroSection = HeroSectionComponent