@yatoday/astro-ui 0.8.4 → 0.9.0

package/astro.d.ts

@@ -11,6 +11,7 @@ import type { Card2Props as YtCard2Props } from './components/Card2/types'
 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 { 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'
@@ -19,6 +20,7 @@ import type { HeroSectionProps as YtHeroSectionProps } from './components/HeroSe
 import type { ImageProps as YtImageProps } from './components/Image/types'
 import type { ImageGalleryIkeaProps as YtImageGalleryIkeaProps } from './components/ImageGalleryIkea/types'
 import type { ItemGrid0Props as YtItemGrid0Props } from './components/ItemGrid0/types'
+import type { 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 { QuantitySwitchProps as YtQuantitySwitchProps } from './components/QuantitySwitch/types'
@@ -61,6 +63,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export function Card3(_props: YtCard3Props): any
 	export function Card4(_props: YtCard4Props): any
 	export function Card5(_props: YtCard5Props): any
+	export function Card6(_props: YtCard6Props): any
 	export function ConditionalWrapper(_props: YtConditionalWrapperProps): any
 	export function CopyToClipboard(_props: YtCopyToClipboardProps): any
 	export function DarkMode(_props: YtDarkModeProps): any
@@ -69,6 +72,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export function Image(_props: YtImageProps): any
 	export function ImageGalleryIkea(_props: YtImageGalleryIkeaProps): any
 	export function ItemGrid0(_props: YtItemGrid0Props): any
+	export function ItemGrid1(_props: YtItemGrid1Props): any
 	export function Layout(_props: YtLayoutProps): any
 	export function Metadata(_props: YtMetadataProps): any
 	export function QuantitySwitch(_props: YtQuantitySwitchProps): any
@@ -110,6 +114,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export type Card3Props = YtCard3Props
 	export type Card4Props = YtCard4Props
 	export type Card5Props = YtCard5Props
+	export type Card6Props = YtCard6Props
 	export type ConditionalWrapperProps = YtConditionalWrapperProps
 	export type CopyToClipboardProps = YtCopyToClipboardProps
 	export type DarkModeProps = YtDarkModeProps
@@ -118,6 +123,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export type ImageProps = YtImageProps
 	export type ImageGalleryIkeaProps = YtImageGalleryIkeaProps
 	export type ItemGrid0Props = YtItemGrid0Props
+	export type ItemGrid1Props = YtItemGrid1Props
 	export type LayoutProps = YtLayoutProps
 	export type MetadataProps = YtMetadataProps
 	export type QuantitySwitchProps = YtQuantitySwitchProps

package/astro.js

@@ -11,6 +11,7 @@ import Card2Component from './components/Card2/Card2.astro'
 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 ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
 import CopyToClipboardComponent from './components/CopyToClipboard/CopyToClipboard.astro'
 import DarkModeComponent from './components/DarkMode/DarkMode.astro'
@@ -19,6 +20,7 @@ import HeroSectionComponent from './components/HeroSection/HeroSection.astro'
 import ImageComponent from './components/Image/Image.astro'
 import ImageGalleryIkeaComponent from './components/ImageGalleryIkea/ImageGalleryIkea.astro'
 import ItemGrid0Component from './components/ItemGrid0/ItemGrid0.astro'
+import ItemGrid1Component from './components/ItemGrid1/ItemGrid1.astro'
 import LayoutComponent from './components/Layout/Layout.astro'
 import MetadataComponent from './components/Metadata/Metadata.astro'
 import QuantitySwitchComponent from './components/QuantitySwitch/QuantitySwitch.astro'
@@ -60,6 +62,7 @@ export const Card2 = Card2Component
 export const Card3 = Card3Component
 export const Card4 = Card4Component
 export const Card5 = Card5Component
+export const Card6 = Card6Component
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const CopyToClipboard = CopyToClipboardComponent
 export const DarkMode = DarkModeComponent
@@ -68,6 +71,7 @@ export const HeroSection = HeroSectionComponent
 export const Image = ImageComponent
 export const ImageGalleryIkea = ImageGalleryIkeaComponent
 export const ItemGrid0 = ItemGrid0Component
+export const ItemGrid1 = ItemGrid1Component
 export const Layout = LayoutComponent
 export const Metadata = MetadataComponent
 export const QuantitySwitch = QuantitySwitchComponent

package/components/Card0/Card0.astro

@@ -1,7 +1,6 @@
 ---
 import type { Card0Props as Props } from './types';
 import { twMerge } from 'tailwind-merge';
-import { Fragment } from 'astro/components';
 
 const { badge, as = 'article', classes = {} } = Astro.props;
 

package/components/Card0/types.ts

@@ -3,6 +3,9 @@ import type { Image } from '../../types';
 
 export type Card0Props = {
   image?: Image | string;
+  widths?: number[];
+  size?: number;
+  sizes?: string;
   content?: string;
   ['as']?: HTMLTag;
   badge?: string;

package/components/Card6/Card6.astro

@@ -0,0 +1,115 @@
+---
+import type {Card6Props as Props} from './types';
+import {Icon} from "astro-icon/components";
+import {twMerge} from 'tailwind-merge';
+import Card0 from '../Card0/Card0.astro';
+import Image from '../Image/Image.astro';
+import {cn} from '../../utils';
+
+const {
+  title = await Astro.slots.render('title'),
+  description,
+  callToAction = await Astro.slots.render('actions'),
+  image = await Astro.slots.render('image'),
+  classes = {},
+  as = 'article',
+  asHeader = 'h3',
+  badge = await Astro.slots.render('badge'),
+  widths = [800, 1600],
+  size = 800,
+  sizes = '(max-width: 1600px) 800px, 1600px'
+} = Astro.props;
+
+const WrapperHeaderTag = asHeader;
+
+const {
+  container: containerClass = '',
+  content: contentClass = 'bg-gradient-to-b from-transparent to-black/80',
+  title: titleClass = '',
+  description: descriptionClass = '',
+  image: imageClass = '',
+  badge: badgeClass = 'top-2 left-2',
+  aspect: aspectClass = 'pb-[100%]',
+} = classes;
+
+const urlForImage = Array.isArray(callToAction)
+  ? typeof callToAction[0] === 'string'
+    ? callToAction[0]
+    : (callToAction[0] as { href?: string })?.href
+  : typeof callToAction === 'string'
+    ? callToAction
+    : (callToAction as { href?: string })?.href;
+
+const LinkWrapperTag = urlForImage ? 'a' : 'div';
+---
+
+<Card0
+  as={as}
+  classes={{
+    container: cn('relative h-full bg-gray-200 dark:bg-zinc-700 border-transparent text-inherit justify-start py-0 @container', containerClass),
+    badge: badgeClass,
+  }}
+>
+  <!-- Content & link -->
+  <LinkWrapperTag href={urlForImage} class={cn("flex flex-col gap-y-2 absolute top-0 right-0 bottom-0 left-0 z-10", image ? 'justify-end' : 'justify-center')}>
+    <div class={cn("p-6 @2xl:p-10 pt-8 @2xl:pt-12", contentClass, !image && 'bg-transparent')}>
+      {badge && (
+        <div class="" set:html={badge}></div>)}
+
+      <WrapperHeaderTag
+        class={cn('font-bold text-lg @lg:text-xl @2xl:text-2xl ', urlForImage && 'group-hover:underline', titleClass)}>
+        {title}
+      </WrapperHeaderTag>
+
+      <div class={cn('text-sm @lg:text-base @2xl:text-lg mt-2 ', descriptionClass)}>
+        <slot/>
+        {description}
+      </div>
+
+      {urlForImage && (
+        <div class="size-6 overflow-hidden mt-4 ">
+          <div
+            class="grid grid-cols-2 w-12 gap-2 duration-400 transition-transform -translate-x-7 group-hover:translate-x-0">
+            <Icon name="tabler:arrow-right" class="size-6"/>
+            <Icon name="tabler:arrow-right" class="size-6"/>
+          </div>
+        </div>
+      )}
+    </div>
+  </LinkWrapperTag>
+  
+  <!-- Image -->
+  <div class="relative flex w-full h-full overflow-hidden">
+
+    <!--
+      16/9: pb-[56%]
+      4/3: pb-[75%]
+      1/1: pb-[100%] - default
+      6/7: pb-[116%]
+      4/5: pb-[125%]
+      3/4: pb-[133%]
+      9/16: pb-[177%]
+    -->
+    <div class={cn("relative w-full h-auto", aspectClass)}>
+      {image && (
+        <Fragment>
+          {typeof image === 'string' ? (
+            <Fragment set:html={image}/>
+          ) : (
+            <Image
+              class={cn('w-full h-full absolute left-0 top-0 p-0', imageClass)}
+              widths={widths}
+              width={size}
+              height={size}
+              sizes={sizes}
+              layout="cover"
+              loading="lazy"
+              decoding="async"
+              {...image}
+            />
+          )}
+        </Fragment>
+      )}
+    </div>
+  </div>
+</Card0>

package/components/Card6/Card6.svelte

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

package/components/Card6/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 Card6Props = {
+  title?: string;
+  description?: string;
+  asHeader?: HTMLTag;
+  badge?: string;
+  callToAction?: string | ToAction | Array<string | ToAction>;
+} & Card0Props;

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

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { twMerge } from 'tailwind-merge';
+
+// Since we can't directly test Svelte 5 components due to the server-side rendering approach,
+// we'll test the utility aspects of the component instead.
+
+describe('DarkMode Component', () => {
+  // Mock document and window objects
+  beforeEach(() => {
+    // Mock document.documentElement
+    Object.defineProperty(document, 'documentElement', {
+      value: {
+        classList: {
+          add: vi.fn(),
+          remove: vi.fn(),
+          toggle: vi.fn(),
+          contains: vi.fn().mockReturnValue(true)
+        }
+      },
+      writable: true
+    });
+
+    // Mock localStorage
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        theme: null,
+        getItem: vi.fn(),
+        setItem: vi.fn()
+      },
+      writable: true
+    });
+
+    // Mock matchMedia
+    Object.defineProperty(window, 'matchMedia', {
+      value: vi.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+      writable: true
+    });
+
+    // Reset darkModeInitialized
+    window.darkModeInitialized = false;
+  });
+
+  // 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';
+
+    // Check that classList.toggle was called with 'dark'
+    expect(root.classList.toggle).toHaveBeenCalledWith('dark');
+    // Check that localStorage.theme was set to 'dark' (since contains returns true)
+    expect(localStorage.theme).toBe('dark');
+  });
+});

package/components/DarkMode/global.d.ts

@@ -0,0 +1,4 @@
+// Type declarations for global properties used in DarkMode component
+interface Window {
+  darkModeInitialized?: boolean;
+}

package/components/ItemGrid1/ItemGrid1.astro

@@ -0,0 +1,69 @@
+---
+import type { ItemGrid1Props as Props } from './types';
+
+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 }
+
+  /* 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";
+  }
+
+  @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";
+    }
+  }
+  /* 5 items */
+  .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";
+    }
+  }
+
+  /* 3 items */
+  .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";
+    }
+  }
+
+  /* 2 items */
+  .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";
+    }
+  }
+
+  /* 1 item */
+  .item-grid:has(>:nth-child(1):last-child) {
+    grid-template-areas: "a";
+  }
+</style>
+
+<div class="@container">
+  <div class={cn(`item-grid grid gap-4`, classNames)}>
+    <slot />
+  </div>
+</div>

package/components/ItemGrid1/ItemGrid1.svelte

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

package/components/ItemGrid1/types.ts

@@ -0,0 +1,3 @@
+export type ItemGrid1Props = {
+  class?: string;
+}

package/components/WidgetWrapper/WidgetWrapper.astro

@@ -2,8 +2,9 @@
 import { twMerge } from 'tailwind-merge';
 import type { WidgetWrapperProps as Props } from './types';
 import Background from '../Background/Background.astro';
+import {cn} from "../../utils";
 
-const { id, isDark = false, class: className = '', containerClass = '', bg, as = 'section', ...rest } = Astro.props;
+const { id, isDark = false, class: className = '', containerClass = '', bg, as = 'section', isAfterContent = false, ...rest } = Astro.props;
 
 const WrapperTag = as;
 ---
@@ -19,8 +20,9 @@ const WrapperTag = as;
   <!-- WrapperTag: content -->
   <div
     class:list={[
-      twMerge(
-        'relative mx-auto max-w-7xl 2xl:max-w-[96rem] px-4 md:px-6 py-12 md:py-16 lg:py-20 text-default',
+      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',
         containerClass
       ),
       { dark: isDark },

package/components/WidgetWrapper/types.ts

@@ -6,6 +6,7 @@ export type WidgetWrapperProps = {
   ['as']?: HTMLTag;
   id?: string;
   isDark?: boolean;
+  isAfterContent?: boolean;
   bg?: string;
   classes?: Record<string, string | Record<string, string>>;
 };

package/package.json

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

package/styles/styles.css

@@ -14,6 +14,8 @@
     --color-violet-500: oklch(0.606 0.25 292.717);
     --color-purple-500: oklch(0.627 0.265 303.9);
     --color-purple-800: oklch(0.438 0.218 303.724);
+    --color-fuchsia-200: oklch(0.903 0.076 319.62);
+    --color-fuchsia-800: oklch(0.452 0.211 324.591);
     --color-pink-500: oklch(0.656 0.241 354.308);
     --color-slate-50: oklch(0.984 0.003 247.858);
     --color-slate-100: oklch(0.968 0.007 247.896);
@@ -21,6 +23,7 @@
     --color-slate-300: oklch(0.869 0.022 252.894);
     --color-slate-400: oklch(0.704 0.04 256.788);
     --color-slate-700: oklch(0.372 0.044 257.287);
+    --color-slate-800: oklch(0.279 0.041 260.031);
     --color-gray-50: oklch(0.985 0.002 247.839);
     --color-gray-100: oklch(0.967 0.003 264.542);
     --color-gray-200: oklch(0.928 0.006 264.531);
@@ -306,6 +309,9 @@
   .-right-5 {
     right: calc(var(--spacing) * -5);
   }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
   .right-5 {
     right: calc(var(--spacing) * 5);
   }
@@ -728,6 +734,10 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-x-7 {
+    --tw-translate-x: calc(var(--spacing) * -7);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-full {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -781,6 +791,9 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -802,6 +815,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-content-center {
+    place-content: center;
+  }
   .items-center {
     align-items: center;
   }
@@ -874,6 +890,9 @@
   .gap-x-8 {
     column-gap: calc(var(--spacing) * 8);
   }
+  .gap-y-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
   .gap-y-6 {
     row-gap: calc(var(--spacing) * 6);
   }
@@ -988,6 +1007,12 @@
   .bg-black\/10 {
     background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
   }
+  .bg-fuchsia-200 {
+    background-color: var(--color-fuchsia-200);
+  }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
   .bg-gray-400 {
     background-color: var(--color-gray-400);
   }
@@ -1030,6 +1055,10 @@
   .bg-zinc-700 {
     background-color: var(--color-zinc-700);
   }
+  .bg-gradient-to-b {
+    --tw-gradient-position: to bottom in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1058,10 +1087,18 @@
     --tw-gradient-from: var(--color-pink-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-transparent {
+    --tw-gradient-from: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-\[\#776fff\] {
     --tw-gradient-to: #776fff;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-black\/80 {
+    --tw-gradient-to: color-mix(in oklab, var(--color-black) 80%, transparent);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-gray-600 {
     --tw-gradient-to: var(--color-gray-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1173,6 +1210,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-8 {
+    padding-top: calc(var(--spacing) * 8);
+  }
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
@@ -1185,6 +1225,27 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
+  .pb-\[56\%\] {
+    padding-bottom: 56%;
+  }
+  .pb-\[75\%\] {
+    padding-bottom: 75%;
+  }
+  .pb-\[100\%\] {
+    padding-bottom: 100%;
+  }
+  .pb-\[116\%\] {
+    padding-bottom: 116%;
+  }
+  .pb-\[125\%\] {
+    padding-bottom: 125%;
+  }
+  .pb-\[133\%\] {
+    padding-bottom: 133%;
+  }
+  .pb-\[177\%\] {
+    padding-bottom: 177%;
+  }
   .pl-0 {
     padding-left: calc(var(--spacing) * 0);
   }
@@ -1342,6 +1403,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-slate-800 {
+    color: var(--color-slate-800);
+  }
   .text-transparent {
     color: transparent;
   }
@@ -1457,6 +1521,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-400 {
+    --tw-duration: 400ms;
+    transition-duration: 400ms;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -1465,6 +1533,14 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .group-hover\:translate-x-0 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-translate-x: calc(var(--spacing) * 0);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .group-hover\:scale-105 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1475,6 +1551,13 @@
       }
     }
   }
+  .group-hover\:underline {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2402,6 +2485,40 @@
       display: flex;
     }
   }
+  .\@lg\:text-base {
+    @container (width >= 32rem) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .\@lg\:text-xl {
+    @container (width >= 32rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+  .\@2xl\:p-10 {
+    @container (width >= 42rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
+  .\@2xl\:pt-12 {
+    @container (width >= 42rem) {
+      padding-top: calc(var(--spacing) * 12);
+    }
+  }
+  .\@2xl\:text-2xl {
+    @container (width >= 42rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .\@2xl\:text-lg {
+    @container (width >= 42rem) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
   .\@3xl\:grid-cols-3 {
     @container (width >= 48rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -2552,6 +2669,11 @@
       border-color: var(--color-zinc-700);
     }
   }
+  .dark\:bg-fuchsia-800 {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-fuchsia-800);
+    }
+  }
   .dark\:bg-green-700 {
     &:where(.dark, .dark *) {
       background-color: var(--color-green-700);

package/svelte.d.ts

@@ -12,6 +12,7 @@ import type { SvelteCard2Props as YtSvelteCard2Props } from './components/Card2/
 import type { SvelteCard3Props as YtSvelteCard3Props } from './components/Card3/types'
 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 { 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'
@@ -20,6 +21,7 @@ import type { SvelteHeroSectionProps as YtSvelteHeroSectionProps } from './compo
 import type { SvelteImageProps as YtSvelteImageProps } from './components/Image/types'
 import type { SvelteImageGalleryIkeaProps as YtSvelteImageGalleryIkeaProps } from './components/ImageGalleryIkea/types'
 import type { SvelteItemGrid0Props as YtSvelteItemGrid0Props } from './components/ItemGrid0/types'
+import type { 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 { SvelteQuantitySwitchProps as YtSvelteQuantitySwitchProps } from './components/QuantitySwitch/types'
@@ -62,6 +64,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export const Card3: Component<YtSvelteCard3Props>
 	export const Card4: Component<YtSvelteCard4Props>
 	export const Card5: Component<YtSvelteCard5Props>
+	export const Card6: Component<YtSvelteCard6Props>
 	export const ConditionalWrapper: Component<YtSvelteConditionalWrapperProps>
 	export const CopyToClipboard: Component<YtSvelteCopyToClipboardProps>
 	export const DarkMode: Component<YtSvelteDarkModeProps>
@@ -70,6 +73,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export const Image: Component<YtSvelteImageProps>
 	export const ImageGalleryIkea: Component<YtSvelteImageGalleryIkeaProps>
 	export const ItemGrid0: Component<YtSvelteItemGrid0Props>
+	export const ItemGrid1: Component<YtSvelteItemGrid1Props>
 	export const Layout: Component<YtSvelteLayoutProps>
 	export const Metadata: Component<YtSvelteMetadataProps>
 	export const QuantitySwitch: Component<YtSvelteQuantitySwitchProps>
@@ -111,6 +115,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export type Card3Props = YtSvelteCard3Props
 	export type Card4Props = YtSvelteCard4Props
 	export type Card5Props = YtSvelteCard5Props
+	export type Card6Props = YtSvelteCard6Props
 	export type ConditionalWrapperProps = YtSvelteConditionalWrapperProps
 	export type CopyToClipboardProps = YtSvelteCopyToClipboardProps
 	export type DarkModeProps = YtSvelteDarkModeProps
@@ -119,6 +124,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export type ImageProps = YtSvelteImageProps
 	export type ImageGalleryIkeaProps = YtSvelteImageGalleryIkeaProps
 	export type ItemGrid0Props = YtSvelteItemGrid0Props
+	export type ItemGrid1Props = YtSvelteItemGrid1Props
 	export type LayoutProps = YtSvelteLayoutProps
 	export type MetadataProps = YtSvelteMetadataProps
 	export type QuantitySwitchProps = YtSvelteQuantitySwitchProps

package/svelte.js

@@ -11,6 +11,7 @@ import Card2Component from './components/Card2/Card2.svelte'
 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 ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
 import CopyToClipboardComponent from './components/CopyToClipboard/CopyToClipboard.svelte'
 import DarkModeComponent from './components/DarkMode/DarkMode.svelte'
@@ -19,6 +20,7 @@ import HeroSectionComponent from './components/HeroSection/HeroSection.svelte'
 import ImageComponent from './components/Image/Image.svelte'
 import ImageGalleryIkeaComponent from './components/ImageGalleryIkea/ImageGalleryIkea.svelte'
 import ItemGrid0Component from './components/ItemGrid0/ItemGrid0.svelte'
+import ItemGrid1Component from './components/ItemGrid1/ItemGrid1.svelte'
 import LayoutComponent from './components/Layout/Layout.svelte'
 import MetadataComponent from './components/Metadata/Metadata.svelte'
 import QuantitySwitchComponent from './components/QuantitySwitch/QuantitySwitch.svelte'
@@ -60,6 +62,7 @@ export const Card2 = Card2Component
 export const Card3 = Card3Component
 export const Card4 = Card4Component
 export const Card5 = Card5Component
+export const Card6 = Card6Component
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const CopyToClipboard = CopyToClipboardComponent
 export const DarkMode = DarkModeComponent
@@ -68,6 +71,7 @@ export const HeroSection = HeroSectionComponent
 export const Image = ImageComponent
 export const ImageGalleryIkea = ImageGalleryIkeaComponent
 export const ItemGrid0 = ItemGrid0Component
+export const ItemGrid1 = ItemGrid1Component
 export const Layout = LayoutComponent
 export const Metadata = MetadataComponent
 export const QuantitySwitch = QuantitySwitchComponent