webcoreui 1.5.0-0 → 1.5.0-beta.2

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,7 +31,7 @@
         onClick,
         children,
         ...rest
-    }: SvelteInputProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.input,
@@ -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,16 +1,21 @@
 <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 = $derived(classNames([
         styles.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,

package/components/List/List.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ListEventType,SvelteListProps } from './list'
+    import type { ListEventType, ListProps } from './list'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
     import Input from '../Input/Input.svelte'
@@ -10,6 +10,10 @@
 
     import styles from './list.module.scss'
 
+    export type Props = ListProps & {
+        onSelect?: (event: ListEventType) => void
+    }
+
     let {
         showSearchBar,
         showSearchBarIcon,
@@ -22,7 +26,7 @@
         secondary,
         itemGroups = $bindable([]),
         onSelect
-    }: SvelteListProps = $props()
+    }: Props = $props()
 
     let searchValue = $state('')
     let numberOfResults = $state(1)

package/components/List/List.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { ListEventType, ReactListProps } from './list'
+import type { ListEventType, ListProps } from './list'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 import Input from '../Input/Input.tsx'
@@ -10,6 +10,10 @@ import searchIcon from '../../icons/search.svg?raw'
 
 import styles from './list.module.scss'
 
+export type Props = ListProps & {
+    onSelect?: (event: ListEventType) => void
+}
+
 const List = ({
     showSearchBar,
     showSearchBarIcon,
@@ -22,7 +26,7 @@ const List = ({
     secondary,
     itemGroups,
     onSelect
-}: ReactListProps) => {
+}: Props) => {
     const [searchValue, setSearchValue] = useState('')
     const [numberOfResults, setNumberOfResults] = useState(1)
     const [itemGroupsWithActive, setItemGroups] = useState(itemGroups)
@@ -44,7 +48,7 @@ const List = ({
         ? { maxHeight } as React.CSSProperties
         : undefined
 
-    const search = (event: React.FormEvent<HTMLInputElement>) => {
+    const search = (event: React.InputEvent<HTMLInputElement>) => {
         const value = (event.target as HTMLInputElement).value.toLowerCase()
 
         setSearchValue(value)
@@ -107,7 +111,7 @@ const List = ({
             </div>
         )}>
             <ul className={classes} id={id} style={style}>
-                {itemGroupsWithActive.map((group: ReactListProps['itemGroups'][0], index) => (
+                {itemGroupsWithActive.map((group: Props['itemGroups'][0], index) => (
                     <React.Fragment key={index}>
                         {group.title && (
                             <li className={styles.title}

package/components/List/list.ts

@@ -30,11 +30,3 @@ export type ListProps = {
         }[]
     }[]
 }
-
-export type SvelteListProps = {
-    onSelect?: (event: ListEventType) => void
-} & ListProps
-
-export type ReactListProps = {
-    onSelect?: (event: ListEventType) => void
-} & ListProps

package/components/Masonry/Masonry.astro

@@ -3,7 +3,7 @@ import type { MasonryProps } from './masonry'
 
 import styles from './masonry.module.scss'
 
-interface Props extends MasonryProps {}
+export type Props = MasonryProps
 
 const {
     items,

package/components/Masonry/Masonry.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-    import type { SvelteMasonryProps } from './masonry'
+    import type { SvelteComponent } from 'svelte'
+    import type { Items, MasonryProps } from './masonry'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './masonry.module.scss'
 
+    export type Props = Omit<MasonryProps, 'items'> & {
+        items: Items<typeof SvelteComponent<any>>[]
+    }
+
     const {
         items,
         element = 'section',
@@ -12,7 +17,7 @@
         columns = 3,
         sequential,
         className
-    }: SvelteMasonryProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.masonry,

package/components/Masonry/Masonry.tsx

@@ -1,10 +1,14 @@
-import React, { type JSX } from 'react'
-import type { ReactMasonryProps } from './masonry'
+import React, { type FC, type JSX } from 'react'
+import type { Items,MasonryProps } from './masonry'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './masonry.module.scss'
 
+export type Props = Omit<MasonryProps, 'items'> & {
+    items: Items<FC<any>>[]
+}
+
 const Masonry = ({
     items,
     element = 'section',
@@ -12,7 +16,7 @@ const Masonry = ({
     columns = 3,
     sequential,
     className
-}: ReactMasonryProps) => {
+}: Props) => {
     const classes = classNames([
         styles.masonry,
         className

package/components/Masonry/masonry.ts

@@ -1,7 +1,4 @@
-import type { FC } from 'react'
-import type { SvelteComponent } from 'svelte'
-
-type ChildrenProps<ComponentType> = {
+export type ChildrenProps<ComponentType> = {
     component: ComponentType
     children?: string | number
     props?: {
@@ -9,7 +6,7 @@ type ChildrenProps<ComponentType> = {
     }
 } | string | number
 
-type Items<ComponentType> = {
+export type Items<ComponentType> = {
     component?: ComponentType;
     children?: ChildrenProps<ComponentType>
     html?: string
@@ -26,11 +23,3 @@ export type MasonryProps = {
     sequential?: boolean
     className?: string
 }
-
-export type SvelteMasonryProps = {
-    items: Items<typeof SvelteComponent<any>>[]
-} & Omit<MasonryProps, 'items'>
-
-export type ReactMasonryProps = {
-    items: Items<FC<any>>[]
-} & Omit<MasonryProps, 'items'>

package/components/Menu/Menu.astro

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

package/components/Menu/Menu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteMenuProps } from './menu'
+    import type { Snippet } from 'svelte'
+    import type { MenuProps } from './menu'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -7,6 +8,10 @@
 
     import styles from './menu.module.scss'
 
+    export type Props = MenuProps & {
+        children?: Snippet
+    }
+
     const {
         items,
         logo,
@@ -14,7 +19,7 @@
         className,
         wrapperClassName,
         children
-    }: SvelteMenuProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.menu,

package/components/Menu/Menu.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { ReactMenuProps } from './menu'
+import type { MenuProps } from './menu'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -7,6 +7,10 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './menu.module.scss'
 
+export type Props = MenuProps & {
+    children?: React.ReactNode
+}
+
 const Menu = ({
     items,
     logo,
@@ -15,7 +19,7 @@ const Menu = ({
     wrapperClassName,
     children
 // eslint-disable-next-line complexity
-}: ReactMenuProps) => {
+}: Props) => {
     const [active, setActive] = useState(false)
 
     const classes = classNames([

package/components/Menu/menu.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 import type { ButtonProps } from '../Button/button'
 
 export type MenuProps = {
@@ -20,11 +18,3 @@ export type MenuProps = {
     className?: string
     wrapperClassName?: string
 }
-
-export type SvelteMenuProps = {
-    children?: Snippet
-} & MenuProps
-
-export type ReactMenuProps = {
-    children?: React.ReactNode
-} & MenuProps

package/components/Modal/Modal.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { ModalProps } from './modal'
 
 import Button from '../Button/Button.astro'
@@ -11,7 +12,7 @@ import warning from '../../icons/warning.svg?raw'
 
 import styles from './modal.module.scss'
 
-interface Props extends ModalProps {}
+export type Props = ModalProps<HTMLAttributes<'dialog'>>
 
 const iconMap = {
     info,
@@ -28,7 +29,6 @@ const {
     closeOnOverlay = true,
     transparent,
     theme,
-    id,
     className,
     ...rest
 } = Astro.props
@@ -49,7 +49,6 @@ const classes = [
 
 <dialog
     class:list={classes}
-    id={id}
     data-close={close.length ? close : undefined}
     {...rest}
 >

package/components/Modal/Modal.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-    import type { SvelteModalProps } from './modal'
+    import type { Snippet } from 'svelte'
+    import type { HTMLDialogAttributes } from 'svelte/elements'
+    import type { ModalProps } from './modal'
 
     import Button from '../Button/Button.svelte'
 
@@ -13,6 +15,10 @@
 
     import styles from './modal.module.scss'
 
+    export type Props = ModalProps<HTMLDialogAttributes> & {
+        children?: Snippet
+    }
+
     const {
         title,
         subTitle,
@@ -21,11 +27,10 @@
         closeOnOverlay = true,
         transparent,
         theme,
-        id,
         className,
         children,
         ...rest
-    }: SvelteModalProps = $props()
+    }: Props = $props()
 
     const iconMap = {
         info,
@@ -50,7 +55,6 @@
 
 <dialog
     class={classes}
-    id={id}
     data-close={close.length ? close : undefined}
     {...rest}
 >

package/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ReactModalProps } from './modal'
+import type { ModalProps } from './modal'
 
 import Button from '../Button/Button.tsx'
 
@@ -13,6 +13,10 @@ import warning from '../../icons/warning.svg?raw'
 
 import styles from './modal.module.scss'
 
+export type Props = ModalProps<React.DialogHTMLAttributes<HTMLDialogElement>> & {
+    children?: React.ReactNode
+}
+
 const iconMap = {
     info,
     success,
@@ -28,11 +32,10 @@ const Modal = ({
     closeOnOverlay = true,
     transparent,
     theme,
-    id,
     className,
     children,
     ...rest
-}: ReactModalProps) => {
+}: Props) => {
     const classes = classNames([
         styles.modal,
         theme && styles[theme],
@@ -50,7 +53,6 @@ const Modal = ({
         <React.Fragment>
             <dialog
                 className={classes}
-                id={id}
                 data-close={close.length ? close : undefined}
                 {...rest}
             >

package/components/Modal/modal.ts

@@ -1,25 +1,13 @@
-import type { Snippet } from 'svelte'
-
-export type ModalProps = {
+export type ModalProps<T extends object = object> = {
     title?: string
     subTitle?: string
     showCloseIcon?: boolean
     closeOnEsc?: boolean
     closeOnOverlay?: boolean
     transparent?: boolean
-    id?: string
     className?: string
     theme?: 'info'
         | 'success'
         | 'warning'
         | 'alert'
-    [key: string]: any
-}
-
-export type SvelteModalProps = {
-    children: Snippet
-} & ModalProps
-
-export type ReactModalProps = {
-    children?: React.ReactNode
-} & ModalProps
+} & T