webcoreui 1.4.0 → 1.5.0-beta.1

package/components/Group/Group.svelte

@@ -1,21 +1,26 @@
 <script lang="ts">
-    import type { SvelteGroupProps } from './group'
+    import type { Snippet } from 'svelte'
+    import type { GroupProps } from './group'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './group.module.scss'
 
+    export type Props = GroupProps & {
+        children: Snippet
+    }
+
     const {
         withSeparator,
         className,
         children
-    }: SvelteGroupProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.group,
         withSeparator && styles.separator,
         className
-    ])
+    ]))
 </script>
 
 <div class={classes}>

package/components/Group/Group.tsx

@@ -1,15 +1,19 @@
 import React from 'react'
-import type { ReactGroupProps } from './group'
+import type { GroupProps } from './group'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './group.module.scss'
 
+export type Props = GroupProps & {
+    children: React.ReactNode
+}
+
 const Group = ({
     withSeparator,
     className,
     children
-}: ReactGroupProps) => {
+}: Props) => {
     const classes = classNames([
         styles.group,
         withSeparator && styles.separator,

package/components/Group/group.ts

@@ -1,14 +1,4 @@
-import type { Snippet } from 'svelte'
-
 export type GroupProps = {
     withSeparator?: boolean
     className?: string
 }
-
-export type SvelteGroupProps = {
-    children: Snippet
-} & GroupProps
-
-export type ReactGroupProps = {
-    children: React.ReactNode
-} & GroupProps

package/components/Icon/Icon.astro

@@ -2,7 +2,7 @@
 import type { IconProps } from './icon'
 import iconMap from './map'
 
-interface Props extends IconProps {}
+export type Props = IconProps
 
 const {
     type,

package/components/Icon/Icon.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { IconProps } from './icon'
     import iconMap from './map'
+
+    export type Props = IconProps
 
     const {
         type,
@@ -8,25 +10,30 @@
         color,
         theme,
         iconSet
-    }: IconProps = $props()
+    }: Props = $props()
 
-    const icons = {
+    const icons = $derived({
         ...iconMap,
         ...(iconSet || {})
-    }
+    })
 
-    const svg = icons[type as keyof typeof iconMap]
+    const svg = $derived.by(() => {
+        const icon = icons[type as keyof typeof iconMap]
 
-    if (!svg) {
-        // eslint-disable-next-line no-console
-        console.error('Cannot find icon type:', type)
-    }
+        if (!icon) {
+            // eslint-disable-next-line no-console
+            console.error('Cannot find icon type:', type)
+        }
 
-    const icon = svg
+        return icon
+    })
+
+    const icon = $derived(svg
         ?.replace('width="24"', `width=${size}`)
         ?.replace('height="24"', color || theme
             ? `height=${size} color=${color || `var(--w-color-${theme})`}`
             : `height=${size}`)
+    )
 </script>
 
 {@html icon}

package/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
-import React from 'react'
 import type { IconProps } from './icon'
 import iconMap from './map'
+
+export type Props = IconProps
 
 const Icon = ({
     type,
@@ -8,7 +9,7 @@ const Icon = ({
     color,
     theme,
     iconSet
-}: IconProps) => {
+}: Props) => {
     const icons = {
         ...iconMap,
         ...(iconSet || {})

package/components/Image/Image.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { ImageProps } from './image'
 
 import AspectRatio from '../AspectRatio/AspectRatio.astro'
@@ -6,7 +7,7 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import styles from './image.module.scss'
 
-interface Props extends ImageProps {}
+export type Props = ImageProps<HTMLAttributes<'img'>>
 
 const {
     src,

package/components/Image/Image.svelte

@@ -1,51 +1,54 @@
-<script lang="ts">
-    import type { ImageProps } from './image'
-
-    import AspectRatio from '../AspectRatio/AspectRatio.svelte'
-
-    import { classNames } from '../../utils/classNames'
-
-    import styles from './image.module.scss'
-
-    const {
-        src,
-        alt,
-        width,
-        height,
-        lazy,
-        ratio,
-        center,
-        full,
-        rounded,
-        className,
-        ...rest
-    }: ImageProps = $props()
-
-    const classes = classNames([
-        styles.img,
-        center && styles.center,
-        full && styles[full],
-        rounded && styles[rounded],
-        className
-    ])
-</script>
-
-{#snippet img()}
-    <img
-        {...rest}
-        src={src}
-        alt={alt || ''}
-        width={width}
-        height={height}
-        loading={lazy ? 'lazy' : null}
-        class={classes}
-    />
-{/snippet}
-
-{#if ratio}
-    <AspectRatio ratio={ratio}>
-        {@render img()}
-    </AspectRatio>
-{:else}
-    {@render img()}
-{/if}
+<script lang="ts">
+    import type { HTMLImgAttributes } from 'svelte/elements'
+    import type { ImageProps } from './image'
+
+    import AspectRatio from '../AspectRatio/AspectRatio.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './image.module.scss'
+
+    export type Props = ImageProps<HTMLImgAttributes>
+
+    const {
+        src,
+        alt,
+        width,
+        height,
+        lazy,
+        ratio,
+        center,
+        full,
+        rounded,
+        className,
+        ...rest
+    }: Props = $props()
+
+    const classes = $derived(classNames([
+        styles.img,
+        center && styles.center,
+        full && styles[full],
+        rounded && styles[rounded],
+        className
+    ]))
+</script>
+
+{#snippet img()}
+    <img
+        {...rest}
+        src={src}
+        alt={alt || ''}
+        width={width}
+        height={height}
+        loading={lazy ? 'lazy' : null}
+        class={classes}
+    />
+{/snippet}
+
+{#if ratio}
+    <AspectRatio ratio={ratio}>
+        {@render img()}
+    </AspectRatio>
+{:else}
+    {@render img()}
+{/if}

package/components/Image/Image.tsx

@@ -8,6 +8,8 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './image.module.scss'
 
+export type Props = ImageProps<React.ImgHTMLAttributes<HTMLImageElement>>
+
 const Image = ({
     src,
     alt,
@@ -20,7 +22,7 @@ const Image = ({
     rounded,
     className,
     ...rest
-}: ImageProps) => {
+}: Props) => {
     const classes = classNames([
         styles.img,
         center && styles.center,

package/components/Image/image.ts

@@ -1,4 +1,4 @@
-export type ImageProps = {
+export type ImageProps<T extends object = object> = {
     src: string
     alt: string
     width: number | string
@@ -9,5 +9,4 @@ export type ImageProps = {
     full?: 'width' | 'height' | 'both'
     rounded?: 'top' | 'bottom' | 'left' | 'right' | 'diagonal' | 'reverse-diagonal' | 'none'
     className?: string
-    [key: string]: any
-}
+} & T

package/components/ImageLoader/ImageLoader.astro

@@ -8,7 +8,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './imageloader.module.scss'
 
-interface Props extends ImageLoaderProps {}
+export type Props = ImageLoaderProps
 
 const {
     fallback,

package/components/ImageLoader/ImageLoader.svelte

@@ -9,6 +9,8 @@
 
     import styles from './imageloader.module.scss'
 
+    export type Props = ImageLoaderProps
+
     const {
         fallback,
         animate,
@@ -19,14 +21,14 @@
         waveColor,
         className,
         ...rest
-    }: ImageLoaderProps = $props()
+    }: Props = $props()
 
     let container: HTMLDivElement
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         `width: ${width}px;`,
         `height: ${height}px;`
-    ])
+    ]))
 
     onMount(() => {
         const img = container.querySelector<HTMLImageElement>('img')

package/components/ImageLoader/ImageLoader.tsx

@@ -6,6 +6,8 @@ import Skeleton from '../Skeleton/Skeleton.tsx'
 
 import styles from './imageloader.module.scss'
 
+export type Props = ImageLoaderProps
+
 const ImageLoader = ({
     fallback,
     animate,
@@ -16,7 +18,7 @@ const ImageLoader = ({
     waveColor,
     className,
     ...rest
-}: ImageLoaderProps) => {
+}: Props) => {
     const containerRef = useRef<HTMLDivElement>(null)
     const styleVariables = {
         width,

package/components/Input/Input.astro

@@ -1,11 +1,12 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { InputProps } from './input'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import styles from './input.module.scss'
 
-interface Props extends InputProps {}
+export type Props = InputProps<HTMLAttributes<'input'>>
 
 const {
     type = 'text',
@@ -50,8 +51,8 @@ const useLabel = !!(label || subText || Astro.slots.has('default'))
         )}
     </label>
     <input
+        {...rest}
         type={type}
         class:list={classes}
-        {...rest}
     />
 </ConditionalWrapper>

package/components/Input/Input.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-    import type { SvelteInputProps } from './input'
+    import type { Snippet } from 'svelte'
+    import type { HTMLInputAttributes } from 'svelte/elements'
+    import type { InputProps, InputTarget } from './input'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -7,6 +9,14 @@
 
     import styles from './input.module.scss'
 
+    export type Props = InputProps<HTMLInputAttributes> & {
+        onChange?: (event: Event & InputTarget) => void
+        onKeyUp?: (event: KeyboardEvent & InputTarget) => void
+        onInput?: (event: Event & InputTarget) => void
+        onClick?: (event: MouseEvent & InputTarget) => void
+        children?: Snippet
+    }
+
     let {
         type = 'text',
         theme,
@@ -21,20 +31,20 @@
         onClick,
         children,
         ...rest
-    }: SvelteInputProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.input,
         theme && styles[theme],
         className
-    ])
+    ]))
 
-    const labelClasses = classNames([
+    const labelClasses = $derived(classNames([
         styles['input-label'],
         labelClassName
-    ])
+    ]))
 
-    const useLabel = !!(label || subText || children)
+    const useLabel = $derived(!!(label || subText || children))
 </script>
 
 <ConditionalWrapper
@@ -52,14 +62,14 @@
     >
         {@render children?.()}
         <input
+            {...rest}
+            {...{ type }}
             bind:value
             class={classes}
             onchange={onChange}
             onkeyup={onKeyUp}
             oninput={onInput}
             onclick={onClick}
-            {...{ type }}
-            {...rest}
         />
     </ConditionalWrapper>
     {#if subText}

package/components/Input/Input.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ReactInputProps } from './input'
+import type { InputProps } from './input'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -7,6 +7,14 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './input.module.scss'
 
+export type Props = InputProps<React.InputHTMLAttributes<HTMLInputElement>> & {
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+    onInput?: (event: React.InputEvent<HTMLInputElement>) => void
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
+    children?: React.ReactNode
+}
+
 const Input = ({
     type = 'text',
     theme,
@@ -17,7 +25,7 @@ const Input = ({
     labelClassName,
     children,
     ...rest
-}: ReactInputProps) => {
+}: Props) => {
     const classes = classNames([
         styles.input,
         theme && styles[theme],
@@ -50,10 +58,10 @@ const Input = ({
             )}>
                 {children}
                 <input
+                    {...rest}
                     type={type}
                     className={classes}
                     defaultValue={value}
-                    {...rest}
                 />
             </ConditionalWrapper>
             {subText && (

package/components/Input/input.ts

@@ -1,62 +1,35 @@
-import type { Snippet } from 'svelte'
-
 export type InputTarget = {
     currentTarget: HTMLInputElement
 }
 
-export type InputProps = {
-    type?: 'text'
-        | 'email'
-        | 'password'
-        | 'number'
-        | 'tel'
-        | 'url'
-        | 'search'
-        | 'file'
-        | 'date'
-        | 'datetime-local'
-        | 'month'
-        | 'week'
-        | 'time'
-        | 'color'
-    theme?: 'info'
-        | 'success'
-        | 'warning'
-        | 'alert'
-        | 'fill'
-        | null
+type InputType = 'text'
+    | 'email'
+    | 'password'
+    | 'number'
+    | 'tel'
+    | 'url'
+    | 'search'
+    | 'file'
+    | 'date'
+    | 'datetime-local'
+    | 'month'
+    | 'week'
+    | 'time'
+    | 'color'
+
+type InputTheme = 'info'
+    | 'success'
+    | 'warning'
+    | 'alert'
+    | 'fill'
+    | null
+
+export type InputProps<T extends object = object> = {
+    type?: InputType
+    theme?: InputTheme
     value?: string | number
-    name?: string
-    placeholder?: string
     label?: string
-    disabled?: boolean
     subText?: string
-    maxLength?: number
-    min?: number
-    max?: number
-    step?: number
-    multiple?: boolean
-    pattern?: string
-    required?: boolean
-    autofocus?: boolean
-    autocomplete?: 'on' | 'off' | 'one-time-code'
     className?: string
     labelClassName?: string
-    [key: string]: any
-}
-
-export type SvelteInputProps = {
-    onChange?: (event: Event & InputTarget) => void
-    onKeyUp?: (event: KeyboardEvent & InputTarget) => void
-    onInput?: (event: Event & InputTarget) => void
-    onClick?: (event: MouseEvent & InputTarget) => void
-    children?: Snippet
-} & InputProps
-
-export type ReactInputProps = {
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
-    onInput?: (event: React.InputEvent<HTMLInputElement>) => void
-    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
-    children?: React.ReactNode
-} & InputProps
+} & T

package/components/Kbd/Kbd.astro

@@ -4,7 +4,7 @@ import { keyMap } from './keyMap'
 
 import styles from './kbd.module.scss'
 
-interface Props extends KbdProps {}
+export type Props = KbdProps
 
 const {
     keys,

package/components/Kbd/Kbd.svelte

@@ -1,21 +1,26 @@
 <script lang="ts">
-    import type { SvelteKbdProps } from './kbd'
+    import type { Snippet } from 'svelte'
+    import type { KbdProps } from './kbd'
     import { keyMap } from './keyMap'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './kbd.module.scss'
 
+    export type Props = KbdProps & {
+        children?: Snippet
+    }
+
     const {
         keys,
         className,
         children
-    }: SvelteKbdProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.kbd,
         className
-    ])
+    ]))
 </script>
 
 <kbd class={classes}>{keys?.map(key => keyMap[key]).join('')}{@render children?.()}</kbd>

package/components/Kbd/Kbd.tsx

@@ -1,16 +1,20 @@
 import React from 'react'
-import type { ReactKbdProps } from './kbd'
+import type { KbdProps } from './kbd'
 import { keyMap } from './keyMap'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './kbd.module.scss'
 
+export type Props = KbdProps & {
+    children?: React.ReactNode
+}
+
 const Kbd = ({
     keys,
     className,
     children
-}: ReactKbdProps) => {
+}: Props) => {
     const classes = classNames([
         styles.kbd,
         className

package/components/Kbd/kbd.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type KbdProps = {
     keys?: ('cmd'
         | 'shift'
@@ -22,11 +20,3 @@ export type KbdProps = {
         | 'space')[]
     className?: string
 }
-
-export type SvelteKbdProps = {
-    children?: Snippet
-} & KbdProps
-
-export type ReactKbdProps = {
-    children?: React.ReactNode
-} & KbdProps

package/components/List/List.astro

@@ -8,7 +8,7 @@ import searchIcon from '../../icons/search.svg?raw'
 
 import styles from './list.module.scss'
 
-interface Props extends ListProps {}
+export type Props = ListProps
 
 const {
     showSearchBar,