webcoreui 1.4.0 → 1.5.0-beta.1

package/components/Button/button.module.scss

@@ -12,14 +12,16 @@
     cursor: pointer;
 
     &[disabled] {
-        cursor: no-drop;
-        @include background(primary-20);
+        @include visibility(.5);
+
+        pointer-events: none;
+        cursor: not-allowed;
     }
 
     &:hover {
         @include background(primary-20);
     }
-    
+
     &.secondary {
         @include typography(primary);
         @include background(primary-50);
@@ -30,19 +32,14 @@
     }
 
     &.outline {
-        @include typography(primary-20);
+        @include typography(primary);
         @include background(transparent);
-        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
-        
+        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-40);
+
         &:hover {
-            @include typography(primary);
+            @include background(primary-60);
             box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
         }
-
-        &[disabled] {
-            @include typography(primary-30);
-            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-30);
-        }
     }
 
     &.flat {

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,27 +18,35 @@
         className,
         bodyClassName,
         secondary,
+        flat,
         children,
         ...rest
-    }: SvelteCardProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.card,
         secondary && styles.secondary,
+        (flat && (compact || secondary)) && styles.flat,
         className
-    ])
+    ]))
 
-    const bodyClasses = classNames([
+    const bodyClasses = $derived(classNames([
         styles.body,
         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,23 +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 {
+    &.secondary .body,
+    &.flat .title {
         @include background(primary-60);
-
-        .title {
-            @include background(primary-70);
-        }
     }
 
     .title {
+        @include visibility(block);
         @include spacing(p-default);
-        @include border(primary-50, bottom);
-        display: block;
+
+        &:not(.flat) {
+            @include border(primary-50, bottom);
+        }
     }
 
     .body {
@@ -28,7 +32,6 @@
         &.compact {
             @include border(20px, primary-60);
             @include spacing(p-3xl);
-            @include background(primary-70);
         }
     }
 }

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,
@@ -59,7 +59,7 @@ const paginationClasses = classNames([
 const totalPages = Math.ceil(items / getItemsPerSlide())
 const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
 const style = getItemsPerSlide() > 1
-    ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+    ? `--width: calc(${100 / getItemsPerSlide()}% - 5px);`
     : null
 ---
 
@@ -172,7 +172,7 @@ const style = getItemsPerSlide() > 1
             carousel.dataset.currentBreakpoint = breakpoint
             carousel.dataset.visibleItems = itemsPerSlide
             carousel.children[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-            carousel.style.setProperty('--w-slide-width', `calc(${100 / itemsPerSlide}% - 5px)`)
+            carousel.style.setProperty('--width', `calc(${100 / itemsPerSlide}% - 5px)`)
 
             pagination.dataset.totalPages = String(totalPages)
 

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) {
@@ -48,39 +53,39 @@
     let progressValue = $state(0)
     let paginated = false
     let currentPage = $state(1)
-    let totalPages = $state(Math.ceil(items / getItemsPerSlide()))
+    let totalPages = $derived(Math.ceil(items / getItemsPerSlide()))
     let style = $state(getItemsPerSlide() > 1
-        ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+        ? `--width: calc(${100 / getItemsPerSlide()}% - 5px);`
         : null)
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.carousel,
         className
-    ])
+    ]))
 
-    const containerClasses = classNames([
+    const containerClasses = $derived(classNames([
         styles.container,
         scrollSnap && styles.snap
-    ])
+    ]))
 
-    const wrapperClasses = classNames([
+    const wrapperClasses = $derived(classNames([
         styles.wrapper,
         effect && styles[effect],
         getItemsPerSlide() > 1 && styles['no-snap'],
         wrapperClassName
-    ])
+    ]))
 
-    const paginationWrapperClasses = classNames([
+    const paginationWrapperClasses = $derived(classNames([
         styles['pagination-wrapper'],
         paginationClassName
-    ])
+    ]))
 
-    const paginationClasses = classNames([
+    const paginationClasses = $derived(classNames([
         styles.pagination,
         !subText && paginationClassName
-    ])
+    ]))
 
-    const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
+    const subTextValue = $derived(subText?.match(/\{0\}|\{1\}/g) ? subText : undefined)
 
     const updateValues = () => {
         const activeElement = carouselItems[currentPage - 1] as HTMLLIElement
@@ -103,7 +108,7 @@
         onScroll?.(currentPage)
     }
 
-    const scroll = debounceScroll((event: Event) => {
+    const scroll = $derived(debounceScroll((event: Event) => {
         if (!paginated) {
             const target = event.target as HTMLDivElement
             const scrollLeft = target.scrollLeft
@@ -114,7 +119,7 @@
 
             updateValues()
         }
-    }, debounce)
+    }, debounce))
 
     const paginate = (event: PaginationEventType) => {
         const indexes = Array.from({ length: Math.ceil(items / getItemsPerSlide()) }, (_, i) => {
@@ -143,7 +148,7 @@
         currentPage = 1
         progressValue = 0
         totalPages = Math.ceil(items / getItemsPerSlide())
-        style = `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+        style = `--width: calc(${100 / getItemsPerSlide()}% - 5px);`
 
         if (subTextValue) {
             subText = subTextValue

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'
@@ -50,7 +55,7 @@ const Carousel = ({
     const [progressValue, setProgressValue] = useState(0)
     const [updatedSubText, setUpdatedSubText] = useState(subText)
     const [style, setStyle] = useState(getItemsPerSlide() > 1
-        ? { '--w-slide-width': `calc(${100 / getItemsPerSlide()}% - 5px)` } as React.CSSProperties
+        ? { '--width': `calc(${100 / getItemsPerSlide()}% - 5px)` } as React.CSSProperties
         : undefined)
 
     const classes = classNames([
@@ -147,7 +152,7 @@ const Carousel = ({
         totalPages.current = Math.ceil(items / getItemsPerSlide())
         setStyle(prevStyle => ({
             ...prevStyle,
-            '--w-slide-width': `calc(${100 / getItemsPerSlide()}% - 5px)`
+            '--width': `calc(${100 / getItemsPerSlide()}% - 5px)`
         }) as React.CSSProperties)
 
         if (subTextValue) {

package/components/Carousel/carousel.module.scss

@@ -1,10 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-slide-width: 100%;
-}
-
 .carousel {
+    --width: 100%;
+
     @include layout(flex, sm, column);
 }
 
@@ -43,7 +41,7 @@ body {
         @include spacing(m0);
         @include layout(flex, h-center);
 
-        min-width: var(--w-slide-width);
+        min-width: var(--width);
     }
 }
 

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>

package/components/CarouselItem/CarouselItem.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import type { CarouselItemProps } from './carouselItem'
+
+export type Props = CarouselItemProps & {
+    children: React.ReactNode
+}
+
+const CarouselItem = ({
+    active,
+    className,
+    children
+}: Props) => (
+    <li className={className} data-active={active}>
+        {children}
+    </li>
+)
+
+export default CarouselItem

package/components/CarouselItem/carouselItem.ts

@@ -0,0 +1,4 @@
+export type CarouselItemProps = {
+    active?: boolean
+    className?: string
+}

package/components/Checkbox/Checkbox.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { CheckboxProps } from './checkbox'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
@@ -7,13 +8,11 @@ import check from '../../icons/check.svg?raw'
 
 import styles from './checkbox.module.scss'
 
-interface Props extends CheckboxProps {}
+export type Props = CheckboxProps<HTMLAttributes<'input'>>
 
 const {
-    checked,
     label,
     subText,
-    disabled,
     color,
     className,
     ...rest
@@ -36,10 +35,8 @@ const style = color
             children
         </div>
         <input
-            type="checkbox"
-            checked={checked}
-            disabled={disabled}
             {...rest}
+            type="checkbox"
         />
         <span class={styles.check}>
             <Fragment set:html={check} />