webcoreui 1.4.0 → 1.5.0-beta.1

package/components/Avatar/Avatar.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type { AvatarProps } from './avatar'
 
 import Image from '../Image/Image.tsx'
@@ -6,6 +5,8 @@ import Image from '../Image/Image.tsx'
 import { classNames } from '../../utils/classNames'
 
 import styles from './avatar.module.scss'
+
+export type Props = AvatarProps
 
 const Avatar = ({
     img,
@@ -17,7 +18,7 @@ const Avatar = ({
     reverse,
     className,
     groupClassName
-}: AvatarProps) => {
+}: Props) => {
     const classes = classNames([
         styles.avatar,
         borderless && styles.borderless,

package/components/Avatar/avatar.module.scss

@@ -1,16 +1,14 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-avatar-border: var(--w-color-primary-70);
-}
-
 .avatar {
+    --border: var(--w-avatar-border, var(--w-color-primary-70));
+
     @include border-radius(max);
 
     object-fit: cover;
 
     &:not(.borderless) {
-        border: 3px solid var(--w-avatar-border);
+        border: 3px solid var(--border);
     }
 }
 

package/components/Badge/Badge.astro

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

package/components/Badge/Badge.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-    import type { SvelteBadgeProps } from './badge'
+    import type { Snippet } from 'svelte'
+    import type { HTMLAttributes, MouseEventHandler } from 'svelte/elements'
+    import type { BadgeProps } from './badge'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './badge.module.scss'
 
+    export type Props = BadgeProps<HTMLAttributes<HTMLElement>> & {
+        onClick?: MouseEventHandler<HTMLButtonElement> | null
+        children?: Snippet
+    }
+
     const {
         theme,
         hover,
@@ -15,9 +22,9 @@
         onClick,
         children,
         ...rest
-    }: SvelteBadgeProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.badge,
         theme && styles[theme],
         (onClick || hover) && styles.hover,
@@ -25,7 +32,7 @@
         rounded && styles.round,
         transparent && styles.transparent,
         className
-    ])
+    ]))
 </script>
 
 {#if onClick}

package/components/Badge/Badge.tsx

@@ -1,10 +1,15 @@
-import React from 'react'
-import type { ReactBadgeProps } from './badge'
+import type React from 'react'
+import type { BadgeProps } from './badge'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './badge.module.scss'
 
+export type Props = BadgeProps<React.HTMLAttributes<HTMLElement>> & {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>
+    children?: React.ReactNode
+}
+
 const Badge = ({
     theme,
     onClick,
@@ -15,7 +20,7 @@ const Badge = ({
     className,
     children,
     ...rest
-}: ReactBadgeProps) => {
+}: Props) => {
     const classes = classNames([
         styles.badge,
         theme && styles[theme],

package/components/Badge/badge.module.scss

@@ -21,8 +21,7 @@
         }
 
         &.outline:hover {
-            @include typography(primary);
-            @include background(transparent);
+            @include background(primary-60);
             box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
         }
 
@@ -54,14 +53,14 @@
     }
 
     &.outline {
-        @include typography(primary-20);
-        @include background(primary-70);
-        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
+        @include typography(primary);
+        @include background(transparent);
+        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-40);
     }
 
     &.flat {
         @include typography(primary);
-        @include background(primary-70);
+        @include background(transparent);
     }
 
     &.info {

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,19 +22,20 @@
         sticky = true,
         className,
         children
-    }: SvelteBannerProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.banner,
         bottom && styles.bottom,
         padded && styles.padded,
         !sticky && styles.relative,
         className
-    ])
+    ]))
 
-    const style = top
+    const style = $derived(top
         ? `--w-banner-top: ${top}px;`
         : null
+    )
 
     let visible = $state(true)
 </script>

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.module.scss

@@ -1,24 +1,22 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-banner-top: 0;
-}
-
 .banner {
+    --top: var(--w-banner-top, 0);
+
     @include background(primary-60);
     @include spacing(p-default);
     @include position(sticky);
     @include layer(top);
     @include typography(center);
 
-    top: var(--w-banner-top);
+    top: var(--top);
 
     &.padded {
         @include border-radius();
         @include position(l20px);
 
         width: calc(100% - 40px);
-        top: calc(var(--w-banner-top) + 20px);
+        top: calc(var(--top) + 20px);
 
         &.bottom {
             @include position(l20px, b20px);

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,25 +5,28 @@
 
     import styles from './bottomnavigation.module.scss'
 
+    export type Props = BottomNavigationProps
+
     const {
         items,
         separated,
         floating,
         maxWidth,
         className
-    }: BottomNavigationProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.nav,
         separated && styles.separated,
         maxWidth && styles.bordered,
         floating && styles.floating,
         className
-    ])
+    ]))
 
-    const styleVariable = maxWidth
+    const styleVariable = $derived(maxWidth
         ? `--w-bottom-navigation-max-width: ${maxWidth};`
         : null
+    )
 </script>
 
 <nav class={classes} style={styleVariable}>

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/BottomNavigation/bottomnavigation.module.scss

@@ -1,70 +1,68 @@
-@use '../../scss/config.scss' as *;
-
-body {
-    --w-bottom-navigation-max-width: auto;
-}
-
-.nav {
-    @include background(primary-60);
-    @include position(fixed, b0, l0, r0);
-    @include layer(header);
-    @include border(top, primary-50);
-
-    &.separated ul li:not(:last-child) {
-        @include border(right, primary-50);
-    }
-
-    &.separated.bordered ul {
-        @include border(left, primary-50);
-        @include border(right, primary-50);
-    }
-
-    &.floating {
-        @include position(l20px, r20px, b20px);
-        @include border-radius(xl);
-        @include border(0);
-
-        &:not(.bordered) {
-            li:first-child .item {
-                @include border-radius(xl, left);
-            }
-    
-            li:last-child .item {
-                @include border-radius(xl, right);
-            }
-        }
-    }
-
-    ul {
-        @include spacing(none-auto, p0);
-        @include layout(flex, h-center);
-
-        max-width: var(--w-bottom-navigation-max-width);
-        list-style-type: none;
-
-        li {
-            @include spacing(mb-0);
-
-            flex: 1;
-
-            &.with-icon .item {
-                @include spacing(pt-sm, pb-xs);
-            }
-            
-            .item {
-                @include layout(flex, column, center, xs);
-                @include spacing(py-sm);
-                @include size('h100%');
-                @include transition(background);
-                @include typography(md, primary-10, none);
-
-                user-select: none;
-                cursor: pointer;
-
-                &:hover {
-                    @include background(primary-50);
-                }
-            }
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.nav {
+    --width: var(--w-bottom-navigation-max-width, auto);
+
+    @include background(primary-60);
+    @include position(fixed, b0, l0, r0);
+    @include layer(header);
+    @include border(top, primary-50);
+
+    &.separated ul li:not(:last-child) {
+        @include border(right, primary-50);
+    }
+
+    &.separated.bordered ul {
+        @include border(left, primary-50);
+        @include border(right, primary-50);
+    }
+
+    &.floating {
+        @include position(l20px, r20px, b20px);
+        @include border-radius(xl);
+        @include border(0);
+
+        &:not(.bordered) {
+            li:first-child .item {
+                @include border-radius(xl, left);
+            }
+    
+            li:last-child .item {
+                @include border-radius(xl, right);
+            }
+        }
+    }
+
+    ul {
+        @include spacing(none-auto, p0);
+        @include layout(flex, h-center);
+
+        max-width: var(--width);
+        list-style-type: none;
+
+        li {
+            @include spacing(mb-0);
+
+            flex: 1;
+
+            &.with-icon .item {
+                @include spacing(pt-sm, pb-xs);
+            }
+            
+            .item {
+                @include layout(flex, column, center, xs);
+                @include spacing(py-sm);
+                @include size('h100%');
+                @include transition(background);
+                @include typography(md, primary-10, none);
+
+                user-select: none;
+                cursor: pointer;
+
+                &:hover {
+                    @include background(primary-50);
+                }
+            }
+        }
+    }
+}

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,16 +9,18 @@
 
     import styles from './breadcrumb.module.scss'
 
+    export type Props = BreadcrumbProps
+
     const {
         items,
         separator,
         className
-    }: BreadcrumbProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.breadcrumb,
         className
-    ])
+    ]))
 </script>
 
 <ul class={classes}>

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,13 +19,13 @@
         onClick,
         children,
         ...rest
-    }: SvelteButtonProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.button,
         theme && styles[theme],
         className
-    ])
+    ]))
 </script>
 
 

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],