webcoreui 1.5.0-0 → 1.5.0-beta.2

package/components/Badge/badge.ts

@@ -1,7 +1,4 @@
-import type { Snippet } from 'svelte'
-import type { MouseEventHandler } from 'svelte/elements'
-
-export type BadgeProps = {
+type BadgeBase = {
     theme?: 'secondary'
         | 'outline'
         | 'flat'
@@ -14,15 +11,16 @@ export type BadgeProps = {
     rounded?: boolean
     transparent?: boolean
     className?: string
-    [key: string]: any
 }
 
-export type SvelteBadgeProps = {
-    onClick?: MouseEventHandler<HTMLButtonElement> | null
-    children?: Snippet
-} & BadgeProps
+type AsSpan<T extends object = object> = BadgeBase & {
+    onClick?: never
+} & T
+
+type AsButton<T extends object = object> = BadgeBase & {
+    onClick: any
+} & T
 
-export type ReactBadgeProps = {
-    onClick?: React.MouseEventHandler<HTMLButtonElement>
-    children?: React.ReactNode
-} & BadgeProps
+export type BadgeProps<T extends object = object> =
+    | AsSpan<T>
+    | AsButton<T>

package/components/Banner/Banner.astro

@@ -7,7 +7,7 @@ import closeIcon from '../../icons/close.svg?raw'
 
 import styles from './banner.module.scss'
 
-interface Props extends BannerProps {}
+export type Props = BannerProps
 
 const {
     top,

package/components/Banner/Banner.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteBannerProps } from './banner'
+    import type { Snippet } from 'svelte'
+    import type { BannerProps } from './banner'
 
     import Button from '../Button/Button.svelte'
 
@@ -9,6 +10,10 @@
 
     import styles from './banner.module.scss'
 
+    export type Props = BannerProps & {
+        children: Snippet
+    }
+
     const {
         top,
         bottom,
@@ -17,7 +22,7 @@
         sticky = true,
         className,
         children
-    }: SvelteBannerProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.banner,

package/components/Banner/Banner.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { ReactBannerProps } from './banner'
+import type { BannerProps } from './banner'
 
 import Button from '../Button/Button.tsx'
 
@@ -9,6 +9,10 @@ import closeIcon from '../../icons/close.svg?raw'
 
 import styles from './banner.module.scss'
 
+export type Props = BannerProps & {
+    children: React.ReactNode
+}
+
 const Banner = ({
     top,
     bottom,
@@ -17,7 +21,7 @@ const Banner = ({
     sticky = true,
     className,
     children
-}: ReactBannerProps) => {
+}: Props) => {
     const [visible, setVisible] = useState(true)
 
     const classes = classNames([

package/components/Banner/banner.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type BannerProps = {
     top?: number
     bottom?: boolean
@@ -8,11 +6,3 @@ export type BannerProps = {
     sticky?: boolean
     className?: string
 }
-
-export type SvelteBannerProps = {
-    children: Snippet
-} & BannerProps
-
-export type ReactBannerProps = {
-    children: React.ReactNode
-} & BannerProps

package/components/BottomNavigation/BottomNavigation.astro

@@ -5,7 +5,7 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './bottomnavigation.module.scss'
 
-interface Props extends BottomNavigationProps {}
+export type Props = BottomNavigationProps
 
 const {
     items,

package/components/BottomNavigation/BottomNavigation.svelte

@@ -5,13 +5,15 @@
 
     import styles from './bottomnavigation.module.scss'
 
+    export type Props = BottomNavigationProps
+
     const {
         items,
         separated,
         floating,
         maxWidth,
         className
-    }: BottomNavigationProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.nav,

package/components/BottomNavigation/BottomNavigation.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
 import type { BottomNavigationProps } from './bottomnavigation'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './bottomnavigation.module.scss'
 
+export type Props = BottomNavigationProps
+
 type ElementType = BottomNavigationProps['items'][0] & {
     className: string
     dangerouslySetInnerHTML: {
@@ -18,7 +19,7 @@ const BottomNavigation = ({
     floating,
     maxWidth,
     className
-}: BottomNavigationProps) => {
+}: Props) => {
     const classes = classNames([
         styles.nav,
         separated && styles.separated,

package/components/Breadcrumb/Breadcrumb.astro

@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './breadcrumb.module.scss'
 
-interface Props extends BreadcrumbProps {}
+export type Props = BreadcrumbProps
 
 const {
     items,

package/components/Breadcrumb/Breadcrumb.svelte

@@ -9,11 +9,13 @@
 
     import styles from './breadcrumb.module.scss'
 
+    export type Props = BreadcrumbProps
+
     const {
         items,
         separator,
         className
-    }: BreadcrumbProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.breadcrumb,

package/components/Breadcrumb/Breadcrumb.tsx

@@ -9,11 +9,13 @@ import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './breadcrumb.module.scss'
 
+export type Props = BreadcrumbProps
+
 const Breadcrumb = ({
     items,
     separator,
     className
-}: BreadcrumbProps) => {
+}: Props) => {
     const classes = classNames([
         styles.breadcrumb,
         className

package/components/Button/Button.astro

@@ -1,9 +1,10 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { ButtonProps } from './button'
 
 import styles from './button.module.scss'
 
-interface Props extends ButtonProps {}
+export type Props = ButtonProps<HTMLAttributes<'button'>>
 
 const {
     theme,

package/components/Button/Button.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-    import type { SvelteButtonProps } from './button'
+    import type { Snippet } from 'svelte'
+    import type { HTMLAttributes, MouseEventHandler } from 'svelte/elements'
+    import type { ButtonProps } from './button'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './button.module.scss'
 
+    export type Props = ButtonProps<HTMLAttributes<HTMLElement>> & {
+        onClick?: MouseEventHandler<HTMLButtonElement>
+        children: Snippet
+    }
+
     const {
         theme,
         href,
@@ -12,7 +19,7 @@
         onClick,
         children,
         ...rest
-    }: SvelteButtonProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.button,

package/components/Button/Button.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
-import type { ReactButtonProps } from './button'
+import type { ButtonProps } from './button'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './button.module.scss'
 
+export type Props = ButtonProps<Record<string, unknown>> & {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>
+    children?: React.ReactNode
+}
+
 const Button = ({
     theme,
     href,
@@ -12,7 +17,7 @@ const Button = ({
     onClick,
     children,
     ...rest
-}: ReactButtonProps) => {
+}: Props) => {
     const classes = classNames([
         styles.button,
         theme && styles[theme],

package/components/Button/button.ts

@@ -1,7 +1,4 @@
-import type { Snippet } from 'svelte'
-import type { MouseEventHandler } from 'svelte/elements'
-
-export type ButtonProps = {
+export type ButtonBase = {
     theme?: 'secondary'
         | 'outline'
         | 'flat'
@@ -9,23 +6,29 @@ export type ButtonProps = {
         | 'success'
         | 'warning'
         | 'alert'
-    target?: '_self'
-        | '_blank'
-        | '_parent'
-        | '_top'
-        | '_unfencedTop'
-        | ''
-    href?: string
     className?: string
-    [key: string]: any
 }
 
-export type SvelteButtonProps = {
-    onClick?: MouseEventHandler<HTMLButtonElement>
-    children: Snippet
-} & ButtonProps
+type AsButton<T extends object = object> = ButtonBase & {
+    href?: never
+    target?: never
+    rel?: never
+    download?: never
+    hreflang?: never
+    ping?: never
+    referrerpolicy?: never
+} & T
+
+type AsAnchor<T extends object = object> = ButtonBase & {
+    href?: string
+    target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop' | ''
+    rel?: string
+    download?: string | boolean
+    hreflang?: string
+    ping?: string
+    referrerpolicy?: ReferrerPolicy
+} & T
 
-export type ReactButtonProps = {
-    onClick?: React.MouseEventHandler<HTMLButtonElement>
-    children?: React.ReactNode
-} & ButtonProps
+export type ButtonProps<T extends object = object> =
+    | AsButton<T>
+    | AsAnchor<T>

package/components/Card/Card.astro

@@ -3,7 +3,7 @@ import type { CardProps } from './card'
 
 import styles from './card.module.scss'
 
-interface Props extends CardProps {}
+export type Props = CardProps
 
 const {
     element = 'section',
@@ -13,12 +13,14 @@ const {
     className,
     bodyClassName,
     secondary,
+    flat,
     ...rest
 } = Astro.props
 
 const classes = [
     styles.card,
     secondary && styles.secondary,
+    (flat && (compact || secondary)) && styles.flat,
     className
 ]
 
@@ -28,13 +30,18 @@ const bodyClasses = [
     bodyClassName
 ]
 
+const titleClasses = [
+    styles.title,
+    flat && styles.flat
+]
+
 const Component = element
 const Title = titleTag
 ---
 
 <Component class:list={classes} {...rest}>
     {title && (
-        <Title class:list={styles.title}>{title}</Title>
+        <Title class:list={titleClasses} set:html={title} />
     )}
     <div class:list={bodyClasses}>
         <slot />

package/components/Card/Card.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-    import type { SvelteCardProps } from './card'
+    import type { Snippet } from 'svelte'
+    import type { CardProps } from './card'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './card.module.scss'
 
+    export type Props = CardProps & {
+        children: Snippet
+    }
+
     const {
         element = 'section',
         title,
@@ -13,13 +18,15 @@
         className,
         bodyClassName,
         secondary,
+        flat,
         children,
         ...rest
-    }: SvelteCardProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.card,
         secondary && styles.secondary,
+        (flat && (compact || secondary)) && styles.flat,
         className
     ]))
 
@@ -28,12 +35,18 @@
         compact && styles.compact,
         bodyClassName
     ]))
+
+    const titleClasses = $derived(classNames([
+        styles.title,
+        flat && styles.flat,
+        (flat && compact) && styles.compact
+    ]))
 </script>
 
 <svelte:element this={element} class={classes} {...rest}>
     {#if title}
-        <svelte:element this={titleTag} class={styles.title}>
-            {title}
+        <svelte:element this={titleTag} class={titleClasses}>
+            {@html title}
         </svelte:element>
     {/if}
     <div class={bodyClasses}>

package/components/Card/Card.tsx

@@ -1,10 +1,16 @@
-import React from 'react'
-import type { ReactCardProps } from './card'
+import React, { type JSX } from 'react'
+import type { CardProps } from './card'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './card.module.scss'
 
+export type Props = Omit<CardProps<any>, 'titleTag' | 'element'> & {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+}
+
 const Card = ({
     Element = 'section',
     title,
@@ -13,13 +19,15 @@ const Card = ({
     className,
     bodyClassName,
     secondary,
+    flat,
     children,
     ...rest
-}: ReactCardProps) => {
+}: Props) => {
     const classes = classNames([
         styles.card,
-        className,
-        secondary && styles.secondary
+        secondary && styles.secondary,
+        (flat && (compact || secondary)) && styles.flat,
+        className
     ])
 
     const bodyClasses = classNames([
@@ -28,10 +36,19 @@ const Card = ({
         bodyClassName
     ])
 
+    const titleClasses = classNames([
+        styles.title,
+        flat && styles.flat,
+        (flat && compact) && styles.compact
+    ])
+
     return (
         <Element className={classes} {...rest}>
             {title && (
-                <TitleTag className={styles.title}>{title}</TitleTag>
+                <TitleTag
+                    className={titleClasses}
+                    dangerouslySetInnerHTML={{ __html: title }}
+                />
             )}
             <div className={bodyClasses}>
                 {children}

package/components/Card/card.module.scss

@@ -1,20 +1,27 @@
 @use '../../scss/config.scss' as *;
 
 .card {
-    @include border(primary-50);
     @include border-radius(md);
     @include layout(flex, column);
     @include background(primary-70);
     @include visibility(hidden);
+    
+    &:not(.flat) {
+        @include border(primary-50);
+    }
 
-    &.secondary .body {
+    &.secondary .body,
+    &.flat .title {
         @include background(primary-60);
     }
 
     .title {
-        @include spacing(p-default);
-        @include border(primary-50, bottom);
         @include visibility(block);
+        @include spacing(p-default);
+
+        &:not(.flat) {
+            @include border(primary-50, bottom);
+        }
     }
 
     .body {

package/components/Card/card.ts

@@ -1,7 +1,4 @@
-import type { JSX } from 'react'
-import type { Snippet } from 'svelte'
-
-export type CardProps = {
+export type CardProps<T extends object = Record<string, unknown>> = {
     element?: string
     title?: string
     titleTag?: string
@@ -9,15 +6,5 @@ export type CardProps = {
     className?: string
     bodyClassName?: string
     secondary?: boolean
-    [key: string]: any
-}
-
-export type SvelteCardProps = {
-    children: Snippet
-} & CardProps
-
-export type ReactCardProps = {
-    Element?: keyof JSX.IntrinsicElements
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & Omit<CardProps, 'titleTag' | 'element'>
+    flat?: boolean
+} & T

package/components/Carousel/Carousel.astro

@@ -9,7 +9,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './carousel.module.scss'
 
-interface Props extends CarouselProps {}
+export type Props = CarouselProps
 
 const {
     items,

package/components/Carousel/Carousel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
-    import type { SvelteCarouselProps } from './carousel'
+    import { onMount, type Snippet } from 'svelte'
+    import type { CarouselProps } from './carousel'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
     import Pagination from '../Pagination/Pagination.svelte'
@@ -14,6 +14,11 @@
 
     import type { PaginationEventType } from '../Pagination/pagination'
 
+    export type Props = CarouselProps & {
+        onScroll?: (event: number) => void
+        children: Snippet
+    }
+
     let {
         items = 0,
         itemsPerSlide = 1,
@@ -28,7 +33,7 @@
         paginationClassName,
         children,
         onScroll
-    }: SvelteCarouselProps = $props()
+    }: Props = $props()
 
     const getItemsPerSlide = () => {
         if (carousel) {

package/components/Carousel/Carousel.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import type { ReactCarouselProps } from './carousel'
+import type { CarouselProps } from './carousel'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 import Pagination from '../Pagination/Pagination.tsx'
@@ -13,6 +13,11 @@ import styles from './carousel.module.scss'
 
 import type { PaginationEventType } from '../Pagination/pagination'
 
+export type Props = CarouselProps & {
+    onScroll?: (event: number) => void
+    children?: React.ReactNode
+}
+
 const Carousel = ({
     items,
     itemsPerSlide = 1,
@@ -27,7 +32,7 @@ const Carousel = ({
     paginationClassName,
     onScroll,
     children
-}: ReactCarouselProps) => {
+}: Props) => {
     const getItemsPerSlide = () => {
         if (carousel.current) {
             return typeof itemsPerSlide === 'number'

package/components/Carousel/carousel.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 import type { Responsive } from '../../utils/getLayoutClasses'
 
 import type { PaginationProps } from '../Pagination/pagination'
@@ -19,13 +17,3 @@ export type CarouselProps = {
     wrapperClassName?: string
     paginationClassName?: string
 }
-
-export type SvelteCarouselProps = {
-    onScroll?: (event: number) => void
-    children: Snippet
-} & CarouselProps
-
-export type ReactCarouselProps = {
-    onScroll?: (event: number) => void
-    children?: React.ReactNode
-} & CarouselProps

package/components/CarouselItem/CarouselItem.astro

@@ -0,0 +1,14 @@
+---
+import type { CarouselItemProps } from './carouselItem'
+
+export type Props = CarouselItemProps
+
+const {
+    active,
+    className
+} = Astro.props
+---
+
+<li class={className} data-active={active}>
+    <slot />
+</li>

package/components/CarouselItem/CarouselItem.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { CarouselItemProps } from './carouselItem'
+
+    export type Props = CarouselItemProps & {
+        children: Snippet
+    }
+
+    const {
+        active,
+        className,
+        children
+    }: Props = $props()
+</script>
+
+<li class={className} data-active={active}>
+    {@render children?.()}
+</li>