@yatoday/astro-ui 0.0.3 → 0.0.6

package/README.md

@@ -1,2 +1,17 @@
 > [!IMPORTANT]
 > This library is still in early development. New changes can break existing functionality, and no functionality should be considered final at this stage. The library will be considered stable once it reaches v1.0.
+
+
+## Publish package to npm
+
+The build is done using Github Actions. See `.github/workflows/publish.yml` for more information.
+
+1. Make a new release
+```shell
+git tag -a {tag} -m 'tag message here'
+```
+
+```shell
+git push origin {tag}
+```
+2. Go the project release page on Github, Draft a release and choose the tag you pushed before, write the release title, and publish it.

package/astro.d.ts

@@ -8,19 +8,24 @@ import type { CallToActionProps as YtCallToActionProps } from './components/Call
 import type { Card0Props as YtCard0Props } from './components/Card0/types'
 import type { Card1Props as YtCard1Props } from './components/Card1/types'
 import type { Card2Props as YtCard2Props } from './components/Card2/types'
+import type { Card3Props as YtCard3Props } from './components/Card3/types'
 import type { ConditionalWrapperProps as YtConditionalWrapperProps } from './components/ConditionalWrapper/types'
 import type { DarkModeProps as YtDarkModeProps } from './components/DarkMode/types'
+import type { FooterProps as YtFooterProps } from './components/Footer/types'
 import type { HeadlineProps as YtHeadlineProps } from './components/Headline/types'
 import type { HeroSectionProps as YtHeroSectionProps } from './components/HeroSection/types'
 import type { ImageProps as YtImageProps } from './components/Image/types'
 import type { ItemGrid0Props as YtItemGrid0Props } from './components/ItemGrid0/types'
 import type { LayoutProps as YtLayoutProps } from './components/Layout/types'
 import type { MetadataProps as YtMetadataProps } from './components/Metadata/types'
+import type { NavbarProps as YtNavbarProps } from './components/Navbar/types'
 import type { SiteVerificationProps as YtSiteVerificationProps } from './components/SiteVerification/types'
+import type { Stats0Props as YtStats0Props } from './components/Stats0/types'
 import type { SwiperSliderProps as YtSwiperSliderProps } from './components/SwiperSlider/types'
 import type { WidgetCardSliderProps as YtWidgetCardSliderProps } from './components/WidgetCardSlider/types'
 import type { WidgetFeatures0Props as YtWidgetFeatures0Props } from './components/WidgetFeatures0/types'
 import type { WidgetFeaturesCardProps as YtWidgetFeaturesCardProps } from './components/WidgetFeaturesCard/types'
+import type { WidgetHero0Props as YtWidgetHero0Props } from './components/WidgetHero0/types'
 import type { WidgetHeroSliderProps as YtWidgetHeroSliderProps } from './components/WidgetHeroSlider/types'
 import type { WidgetWrapperProps as YtWidgetWrapperProps } from './components/WidgetWrapper/types'
 
@@ -35,19 +40,24 @@ declare module '@yatoday/astro-ui/astro' {
 	export function Card0(_props: YtCard0Props): any
 	export function Card1(_props: YtCard1Props): any
 	export function Card2(_props: YtCard2Props): any
+	export function Card3(_props: YtCard3Props): any
 	export function ConditionalWrapper(_props: YtConditionalWrapperProps): any
 	export function DarkMode(_props: YtDarkModeProps): any
+	export function Footer(_props: YtFooterProps): any
 	export function Headline(_props: YtHeadlineProps): any
 	export function HeroSection(_props: YtHeroSectionProps): any
 	export function Image(_props: YtImageProps): any
 	export function ItemGrid0(_props: YtItemGrid0Props): any
 	export function Layout(_props: YtLayoutProps): any
 	export function Metadata(_props: YtMetadataProps): any
+	export function Navbar(_props: YtNavbarProps): any
 	export function SiteVerification(_props: YtSiteVerificationProps): any
+	export function Stats0(_props: YtStats0Props): any
 	export function SwiperSlider(_props: YtSwiperSliderProps): any
 	export function WidgetCardSlider(_props: YtWidgetCardSliderProps): any
 	export function WidgetFeatures0(_props: YtWidgetFeatures0Props): any
 	export function WidgetFeaturesCard(_props: YtWidgetFeaturesCardProps): any
+	export function WidgetHero0(_props: YtWidgetHero0Props): any
 	export function WidgetHeroSlider(_props: YtWidgetHeroSliderProps): any
 	export function WidgetWrapper(_props: YtWidgetWrapperProps): any
 
@@ -61,19 +71,24 @@ declare module '@yatoday/astro-ui/astro' {
 	export type Card0Props = YtCard0Props
 	export type Card1Props = YtCard1Props
 	export type Card2Props = YtCard2Props
+	export type Card3Props = YtCard3Props
 	export type ConditionalWrapperProps = YtConditionalWrapperProps
 	export type DarkModeProps = YtDarkModeProps
+	export type FooterProps = YtFooterProps
 	export type HeadlineProps = YtHeadlineProps
 	export type HeroSectionProps = YtHeroSectionProps
 	export type ImageProps = YtImageProps
 	export type ItemGrid0Props = YtItemGrid0Props
 	export type LayoutProps = YtLayoutProps
 	export type MetadataProps = YtMetadataProps
+	export type NavbarProps = YtNavbarProps
 	export type SiteVerificationProps = YtSiteVerificationProps
+	export type Stats0Props = YtStats0Props
 	export type SwiperSliderProps = YtSwiperSliderProps
 	export type WidgetCardSliderProps = YtWidgetCardSliderProps
 	export type WidgetFeatures0Props = YtWidgetFeatures0Props
 	export type WidgetFeaturesCardProps = YtWidgetFeaturesCardProps
+	export type WidgetHero0Props = YtWidgetHero0Props
 	export type WidgetHeroSliderProps = YtWidgetHeroSliderProps
 	export type WidgetWrapperProps = YtWidgetWrapperProps
 }

package/astro.js

@@ -8,19 +8,24 @@ import CallToActionComponent from './components/CallToAction/CallToAction.astro'
 import Card0Component from './components/Card0/Card0.astro'
 import Card1Component from './components/Card1/Card1.astro'
 import Card2Component from './components/Card2/Card2.astro'
+import Card3Component from './components/Card3/Card3.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
 import DarkModeComponent from './components/DarkMode/DarkMode.astro'
+import FooterComponent from './components/Footer/Footer.astro'
 import HeadlineComponent from './components/Headline/Headline.astro'
 import HeroSectionComponent from './components/HeroSection/HeroSection.astro'
 import ImageComponent from './components/Image/Image.astro'
 import ItemGrid0Component from './components/ItemGrid0/ItemGrid0.astro'
 import LayoutComponent from './components/Layout/Layout.astro'
 import MetadataComponent from './components/Metadata/Metadata.astro'
+import NavbarComponent from './components/Navbar/Navbar.astro'
 import SiteVerificationComponent from './components/SiteVerification/SiteVerification.astro'
+import Stats0Component from './components/Stats0/Stats0.astro'
 import SwiperSliderComponent from './components/SwiperSlider/SwiperSlider.astro'
 import WidgetCardSliderComponent from './components/WidgetCardSlider/WidgetCardSlider.astro'
 import WidgetFeatures0Component from './components/WidgetFeatures0/WidgetFeatures0.astro'
 import WidgetFeaturesCardComponent from './components/WidgetFeaturesCard/WidgetFeaturesCard.astro'
+import WidgetHero0Component from './components/WidgetHero0/WidgetHero0.astro'
 import WidgetHeroSliderComponent from './components/WidgetHeroSlider/WidgetHeroSlider.astro'
 import WidgetWrapperComponent from './components/WidgetWrapper/WidgetWrapper.astro'
 
@@ -34,18 +39,23 @@ export const CallToAction = CallToActionComponent
 export const Card0 = Card0Component
 export const Card1 = Card1Component
 export const Card2 = Card2Component
+export const Card3 = Card3Component
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const DarkMode = DarkModeComponent
+export const Footer = FooterComponent
 export const Headline = HeadlineComponent
 export const HeroSection = HeroSectionComponent
 export const Image = ImageComponent
 export const ItemGrid0 = ItemGrid0Component
 export const Layout = LayoutComponent
 export const Metadata = MetadataComponent
+export const Navbar = NavbarComponent
 export const SiteVerification = SiteVerificationComponent
+export const Stats0 = Stats0Component
 export const SwiperSlider = SwiperSliderComponent
 export const WidgetCardSlider = WidgetCardSliderComponent
 export const WidgetFeatures0 = WidgetFeatures0Component
 export const WidgetFeaturesCard = WidgetFeaturesCardComponent
+export const WidgetHero0 = WidgetHero0Component
 export const WidgetHeroSlider = WidgetHeroSliderComponent
 export const WidgetWrapper = WidgetWrapperComponent

package/components/Analytics/Analytics.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div>
+  TODO
+</div>

package/components/BackToTopButton/BackToTopButton.astro

@@ -1,5 +1,8 @@
 ---
 import { Icon } from 'astro-icon/components';
+import type { BackToTopButtonProps as Props } from './types';
+
+const { selector = '#header' } = Astro.props;
 ---
 
 <style>
@@ -53,65 +56,65 @@ import { Icon } from 'astro-icon/components';
 </style>
 
 <!-- Back to top button-->
-<a class="btn-scroll-top text-card-foreground" href="#top" data-scroll>
+<a class="btn-scroll-top text-card-foreground" href={selector} data-scroll>
   <svg viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <circle cx="20" cy="20" r="19" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></circle>
   </svg>
   <span class="flex items-center justify-center">
-        <Icon name="tabler:arrow-up" />
-    </span>
+    <Icon name="tabler:arrow-up" />
+  </span>
 </a>
 
 <script>
   /**
    * Animate scroll to top button in/off view
    */
-  const scrollTopButton = function() {
-    const button = document.querySelector('.btn-scroll-top')
-    const scrollOffset = '450'
+  const scrollTopButton = function () {
+    const button = document.querySelector('.btn-scroll-top');
+    const scrollOffset = '450';
 
     if (button == null) {
-      return
+      return;
     }
 
-    const offsetFromTop = parseInt(scrollOffset, 10)
-    const progress = button.querySelector('svg circle') as SVGCircleElement
+    const offsetFromTop = parseInt(scrollOffset, 10);
+    const progress = button.querySelector('svg circle') as SVGCircleElement;
 
     if (progress == null) {
-      return
+      return;
     }
 
-    let length = 0
+    let length = 0;
     if (document.documentElement.clientWidth > 100) {
-      length = progress?.getTotalLength() || 0
+      length = progress?.getTotalLength() || 0;
     }
 
-    progress.style.strokeDasharray = `${length}`
-    progress.style.strokeDashoffset = `${length}`
+    progress.style.strokeDasharray = `${length}`;
+    progress.style.strokeDashoffset = `${length}`;
 
     const showProgress = function showProgress() {
       const scrollPercent =
-        (document.body.scrollTop + document.documentElement.scrollTop)
-        / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
-      const draw = length * scrollPercent
-      progress.style.strokeDashoffset = String(length - draw)
-    }
+        (document.body.scrollTop + document.documentElement.scrollTop) /
+        (document.documentElement.scrollHeight - document.documentElement.clientHeight);
+      const draw = length * scrollPercent;
+      progress.style.strokeDashoffset = String(length - draw);
+    };
 
-    window.addEventListener('scroll', function() {
+    window.addEventListener('scroll', function () {
       // if (event?.currentTarget?.pageYOffset > offsetFromTop) {
       if (window.scrollY > offsetFromTop) {
-        button.classList.add('show')
+        button.classList.add('show');
       } else {
-        button.classList.remove('show')
+        button.classList.remove('show');
       }
 
-      showProgress()
-    })
-  }
+      showProgress();
+    });
+  };
 
-  scrollTopButton()
+  scrollTopButton();
 
   document.addEventListener('astro:after-swap', () => {
-    scrollTopButton()
-  })
+    scrollTopButton();
+  });
 </script>

package/components/BackToTopButton/BackToTopButton.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div>
+  TODO
+</div>

package/components/BackToTopButton/types.ts

@@ -1,3 +1,3 @@
 export type BackToTopButtonProps = {
-  
-}
+  selector?: string;
+};

package/components/Breadcrumbs/Breadcrumbs.astro

@@ -1,15 +1,14 @@
 ---
-import type {BreadcrumbsProps as Props} from './types';
+import type { BreadcrumbsProps as Props } from './types';
 
+import { Icon } from 'astro-icon/components';
 
-import {Icon} from 'astro-icon/components';
-
-const {class: classNames = 'text-gray-600 dark:text-gray-400', ariaLabel = 'Breadcrumbs', items = []} = Astro.props;
+const { class: classNames = 'text-gray-600 dark:text-gray-400', ariaLabel = 'Breadcrumbs', items = [] } = Astro.props;
 ---
+
 <nav class:list={['breadcrumbs', classNames]} aria-label={ariaLabel}>
   <ol class="list flex flex-wrap gap-2 m-0 p-0 list-none" itemscope itemtype="https://schema.org/BreadcrumbList">
-    {items.length === 0 &&
-      <slot/>}
+    {items.length === 0 && <slot />}
 
     <!--{
       items.length > 0 &&

package/components/Breadcrumbs/Breadcrumbs.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div>
+  TODO
+</div>

package/components/Breadcrumbs/types.ts

@@ -1,8 +1,8 @@
-import type {BreadcrumbsItemProps} from '../BreadcrumbsItem/types';
+import type { BreadcrumbsItemProps } from '../BreadcrumbsItem/types';
 
 export type BreadcrumbsProps = {
   class?: string;
   children: BreadcrumbsItemProps | BreadcrumbsItemProps[];
   items: BreadcrumbsItemProps[];
   ariaLabel?: string;
-}
+};

package/components/BreadcrumbsItem/BreadcrumbsItem.astro

@@ -1,7 +1,7 @@
 ---
-import type {BreadcrumbsItemProps as Props} from './types';
+import type { BreadcrumbsItemProps as Props } from './types';
 
-const {href = '#', label = 'Breadcrumb', currentPage = false, hasIcon = false, class: classNames} = Astro.props;
+const { href = '#', label = 'Breadcrumb', currentPage = false, hasIcon = false, class: classNames } = Astro.props;
 ---
 
 <li class:list={['item', classNames]} itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
@@ -10,18 +10,18 @@ const {href = '#', label = 'Breadcrumb', currentPage = false, hasIcon = false, c
       <span aria-current="page" class:list={[hasIcon ? 'has-icon' : '']}>
         {hasIcon ? (
           <Fragment>
-            <slot name="icon"/>
+            <slot name="icon" />
             <span class="sr-only">{label}</span>
           </Fragment>
         ) : (
           label
         )}
-            </span>
+      </span>
     ) : (
       <a href={href} class:list={[hasIcon ? 'has-icon' : '']}>
         {hasIcon ? (
           <Fragment>
-            <slot name="icon"/>
+            <slot name="icon" />
             <span class="sr-only">{label}</span>
           </Fragment>
         ) : (

package/components/BreadcrumbsItem/BreadcrumbsItem.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div>
+  TODO
+</div>

package/components/BreadcrumbsItem/types.ts

@@ -4,4 +4,4 @@ export type BreadcrumbsItemProps = {
   currentPage?: boolean;
   hasIcon?: boolean;
   class?: string;
-}
+};

package/components/Button/Button.astro

@@ -1,7 +1,36 @@
 ---
-import type {ButtonProps as Props} from './types';
----
+import type { ButtonProps as Props } from './types';
+
+import { Icon } from 'astro-icon/components';
+import { buttonVariants } from './button-variants';
+import { cn } from '../../utils';
 
-<div>
+const {
+  variant = 'default',
+  size = 'default',
+  target,
+  text = Astro.slots.render('default'),
+  icon = '',
+  class: className = '',
+  type = 'button',
+  ...rest
+} = Astro.props;
+---
 
-</div>
+{
+  rest?.href ? (
+    <a
+      class={cn(buttonVariants({ size, variant }), className)}
+      {...(target ? { target: target, rel: 'noopener noreferrer' } : {})}
+      {...rest}
+    >
+      <Fragment set:html={text} />
+      {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
+    </a>
+  ) : (
+    <button type={type} class={cn(buttonVariants({ size, variant }), className)} {...rest}>
+      <Fragment set:html={text} />
+      {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
+    </button>
+  )
+}

package/components/Button/Button.svelte

@@ -2,35 +2,7 @@
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
 
   import type { WithElementRef } from 'bits-ui';
-  import { tv, type VariantProps } from 'tailwind-variants';
-
-  export const buttonVariants = tv({
-    base: 'btn rounded-btn ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
-    variants: {
-      variant: {
-        default: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        accent: 'bg-accent text-accent-foreground hover:bg-accent/80',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-transparent text-primary hover:bg-primary/10',
-        ghost: 'text-gray-700 dark:text-zinc-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-zinc-800',
-        link: '!px-0 underline-offset-4 underline'
-      },
-      size: {
-        default: 'px-6 sm:px-8 h-10 sm:h-12',
-        sm: 'h-8 px-4 text-xs sm:h-10 sm:px-6 sm:text-sm',
-        lg: 'h-14 px-8 text-base sm:text-lg md:text-xl',
-        icon: 'size-10'
-      }
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default'
-    }
-  })
-
-  export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-  export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+  import type {ButtonSize, ButtonVariant} from "./button-variants.ts";
 
   export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
     WithElementRef<HTMLAnchorAttributes> & {
@@ -42,6 +14,7 @@
 
 <script lang="ts">
   import { cn } from '../../utils';
+  import {buttonVariants} from "./button-variants.ts";
 
   let {
     class: className = '',

package/components/Button/button-variants.ts

@@ -0,0 +1,30 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const buttonVariants = tv({
+  base: 'btn ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
+  variants: {
+    variant: {
+      default: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      accent: 'bg-accent text-accent-foreground hover:bg-accent/80',
+      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      outline: 'border border-input bg-transparent text-primary hover:bg-primary/10',
+      ghost:
+        'text-gray-700 dark:text-zinc-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-zinc-800',
+      link: '!px-0 underline-offset-4 underline',
+    },
+    size: {
+      default: 'px-6 sm:px-8 h-10 sm:h-12 rounded-(--radius-btn)',
+      sm: 'h-8 px-4 text-xs sm:h-10 sm:px-6 sm:text-sm rounded-[calc(var(--radius-btn)-2px)]',
+      lg: 'h-14 px-8 text-base sm:text-lg md:text-xl rounded-[calc(var(--radius-btn)+2px)]',
+      icon: 'size-10',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+export type ButtonSize = VariantProps<typeof buttonVariants>['size'];

package/components/Button/types.ts

@@ -1,20 +1,11 @@
-import type { WithElementRef } from 'bits-ui'
-import type { Snippet } from 'svelte'
-import type {HTMLAnchorAttributes, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
+import type { WithElementRef } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 
 export type ButtonProps = {
-  variant?: 'default'
-    | 'primary'
-    | 'accent'
-    | 'destructive'
-    | 'outline'
-    | 'ghost'
-    | 'link'
-  size?: 'default'
-    | 'sm'
-    | 'lg'
-    | 'icon'
-  text?: string
-  class?: string
-  [key: string]: any
-}
+  variant?: 'default' | 'primary' | 'accent' | 'destructive' | 'outline' | 'ghost' | 'link';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+  text?: string;
+  class?: string;
+  [key: string]: any;
+};

package/components/CallToAction/CallToAction.astro

@@ -1,9 +1,8 @@
 ---
 import type { CallToActionProps as Props } from './types';
-import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro'
-import Headline from "../Headline/Headline.astro";
-import Button from '../Button/Button.svelte';
-
+import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro';
+import Headline from '../Headline/Headline.astro';
+import Button from '../Button/Button.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -14,7 +13,7 @@ const {
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render('bg')
+  bg = await Astro.slots.render('bg'),
 } = Astro.props;
 ---
 
@@ -27,7 +26,7 @@ const {
       classes={{
         container: 'mb-0 md:mb-0 text-left',
         title: 'text-4xl md:text-4xl font-bold tracking-tighter mb-4 font-heading',
-        subtitle: 'text-xl'
+        subtitle: 'text-xl',
       }}
     />
     {

package/components/CallToAction/CallToAction.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div>
+  TODO
+</div>

package/components/CallToAction/types.ts

@@ -1,18 +1,10 @@
-import type {HTMLAttributes} from "astro/types";
-import type {WidgetWrapperProps} from "../WidgetWrapper/types";
+import type { WidgetWrapperProps } from '../WidgetWrapper/types';
+import type { ToAction } from '../../types';
 
 export type CallToActionProps = {
   title?: string;
   subtitle?: string;
   tagline?: string;
-  callToAction?: ICallToAction;
-  actions?: string | ICallToAction[];
-} & WidgetWrapperProps
-
-export interface ICallToAction extends Omit<HTMLAttributes<'a'>, 'slot'> {
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'link' | 'icon';
-  text?: string;
-  icon?: string;
-  classes?: Record<string, string>;
-  type?: 'button' | 'submit' | 'reset';
-}
+  callToAction?: ToAction;
+  actions?: string | ToAction[];
+} & WidgetWrapperProps;

package/components/Card0/Card0.astro

@@ -1,12 +1,12 @@
 ---
-import type {Card0Props as Props} from './types';
-import {twMerge} from 'tailwind-merge';
+import type { Card0Props as Props } from './types';
+import { twMerge } from 'tailwind-merge';
 
-const {as = 'article', classes = {}} = Astro.props;
+const { badge, as = 'article', classes = {} } = Astro.props;
 
 const WrapperTag = as;
 
-const {container: containerClass = '', badge: badgeClass = ''} = classes;
+const { container: containerClass = '', badge: badgeClass = 'top-2 left-2' } = classes;
 ---
 
 <WrapperTag
@@ -15,9 +15,13 @@ const {container: containerClass = '', badge: badgeClass = ''} = classes;
     containerClass
   )}
 >
-  <div class={twMerge('absolute', badgeClass)}>
-    <slot name="badge"/>
+  <div class={twMerge('absolute z-10', badgeClass)}>
+    <slot name="badge">
+      {badge && <Fragment set:html={badge} />}
+    </slot>
   </div>
-  <slot name="image"/>
-  <slot/>
+
+  <slot name="image" />
+
+  <slot />
 </WrapperTag>

package/components/Card0/Card0.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div>
+  TODO
+</div>

package/components/Card0/types.ts

@@ -1,9 +1,10 @@
-import type {HTMLTag} from 'astro/types';
-import type {ImageProps} from "../../utils/images-optimization.ts";
+import type { HTMLTag } from 'astro/types';
+import type { ImageProps } from '../../utils/images-optimization.ts';
 
 export type Card0Props = {
   image?: ImageProps | string;
   content?: string;
-  as?: HTMLTag;
+  ['as']?: HTMLTag;
+  badge?: string;
   classes?: Record<string, string>;
 };