webcoreui 1.5.0-0 → 1.5.0-beta.2

package/components/Counter/counter.ts

@@ -1,7 +1,7 @@
 import type { ButtonProps } from '../Button/button'
 import type { IconProps } from '../Icon/icon'
 
-export type CounterProps = {
+export type CounterProps<T extends object = object> = {
     type?: 'compact' | 'buttons' | 'separated'
     theme?: ButtonProps['theme']
     rounded?: boolean
@@ -9,13 +9,4 @@ export type CounterProps = {
     maxIcon?: IconProps['type'] | string
     width?: string
     className?: string
-    [key: string]: any
-}
-
-export type SvelteCounterProps = {
-    onChange?: (value: number) => void
-} & CounterProps
-
-export type ReactCounterProps = {
-    onChange?: (value: number) => void
-} & CounterProps
+} & T

package/components/DataTable/DataTable.astro

@@ -14,7 +14,7 @@ import searchIcon from '../../icons/search.svg?raw'
 
 import styles from './datatable.module.scss'
 
-interface Props extends DataTableProps {}
+export type Props = DataTableProps
 
 const {
     headings,

package/components/DataTable/DataTable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { HeadingObject, SvelteDataTableProps } from './datatable'
+    import type { Snippet } from 'svelte'
+    import type { DataTableEventType, DataTableProps, HeadingObject } from './datatable'
 
     import Button from '../Button/Button.svelte'
     import Input from '../Input/Input.svelte'
@@ -17,6 +18,11 @@
 
     import type { ListEventType } from '../List/list'
 
+    export type Props = DataTableProps & {
+        onFilter?: (event: DataTableEventType) => void
+        children?: Snippet
+    }
+
     const {
         headings,
         filterPlaceholder = 'Filter entries',
@@ -36,7 +42,7 @@
         id,
         onFilter,
         children
-    }: SvelteDataTableProps = $props()
+    }: Props = $props()
 
     let filteredData: any = $derived(data)
     let toggledData: any = $derived(data)

package/components/DataTable/DataTable.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { HeadingObject, ReactDataTableProps } from './datatable'
+import type { DataTableEventType, DataTableProps, HeadingObject } from './datatable'
 
 import Button from '../Button/Button.tsx'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
@@ -18,6 +18,11 @@ import styles from './datatable.module.scss'
 
 import type { ListEventType } from '../List/list'
 
+export type Props = DataTableProps & {
+    onFilter?: (event: DataTableEventType) => void
+    children?: React.ReactNode
+}
+
 const DataTable = ({
     headings,
     filterPlaceholder = 'Filter entries',
@@ -38,7 +43,7 @@ const DataTable = ({
     onFilter,
     children
 // eslint-disable-next-line complexity
-}: ReactDataTableProps) => {
+}: Props) => {
     const [filteredData, setFilteredData] = useState<any>(data)
     const [toggledData, setToggledData] = useState(filteredData)
     const [filteredHeadings, setFilteredHeadings] = useState<any>(headings)

package/components/DataTable/datatable.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 import type { PaginationProps } from '../Pagination/pagination'
 
 export type DataTableEventType = {
@@ -32,13 +30,3 @@ export type DataTableProps = {
     className?: string
     id?: string
 }
-
-export type SvelteDataTableProps = {
-    onFilter?: (event: DataTableEventType) => void
-    children?: Snippet
-} & DataTableProps
-
-export type ReactDataTableProps = {
-    onFilter?: (event: DataTableEventType) => void
-    children?: React.ReactNode
-} & DataTableProps

package/components/Flex/Flex.astro

@@ -1,10 +1,11 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { FlexProps } from './flex'
 
 import { classNames } from '../../utils/classNames'
 import { getLayoutClasses } from '../../utils/getLayoutClasses'
 
-interface Props extends FlexProps {}
+export type Props = FlexProps<HTMLAttributes<'div'>>
 
 const {
     element = 'div',

package/components/Flex/Flex.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
-    import type { SvelteFlexProps } from './flex'
+    import type { Snippet } from 'svelte'
+    import type { HTMLAttributes } from 'svelte/elements'
+    import type { FlexProps } from './flex'
 
     import { classNames } from '../../utils/classNames'
     import { getLayoutClasses } from '../../utils/getLayoutClasses'
 
+    export type Props = FlexProps<HTMLAttributes<HTMLElement>> & {
+        children: Snippet
+    }
+
     const {
         element = 'div',
         gap,
@@ -13,7 +19,7 @@
         className,
         children,
         ...rest
-    }: SvelteFlexProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         'flex',

package/components/Flex/Flex.tsx

@@ -1,9 +1,14 @@
-import React from 'react'
-import type { ReactFlexProps } from './flex'
+import React, { type JSX } from 'react'
+import type { FlexProps } from './flex'
 
 import { classNames } from '../../utils/classNames'
 import { getLayoutClasses } from '../../utils/getLayoutClasses'
 
+export type Props = Omit<FlexProps, 'element'> & {
+    Element?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+}
+
 const Flex = ({
     Element = 'div',
     gap,
@@ -13,7 +18,7 @@ const Flex = ({
     className,
     children,
     ...rest
-}: ReactFlexProps) => {
+}: Props) => {
     const classes = classNames([
         'flex',
         getLayoutClasses({ gap, alignment, direction, wrap }),

package/components/Flex/flex.ts

@@ -1,6 +1,3 @@
-import type { JSX } from 'react'
-import type { Snippet } from 'svelte'
-
 import type {
     Alignment,
     Direction,
@@ -9,21 +6,11 @@ import type {
     Wrap
 } from '../../utils/getLayoutClasses'
 
-export type FlexProps = {
+export type FlexProps<T extends object = object> = {
     element?: string
     gap?: Responsive<Gap>
     alignment?: Responsive<Alignment>
     direction?: Responsive<Direction>
     wrap?: Responsive<Wrap>
     className?: string
-    [key: string]: any
-}
-
-export type SvelteFlexProps = {
-    children: Snippet
-} & FlexProps
-
-export type ReactFlexProps = {
-    Element?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & Omit<FlexProps, 'element'>
+} & T

package/components/Footer/Footer.astro

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

package/components/Footer/Footer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteFooterProps } from './footer'
+    import type { Snippet } from 'svelte'
+    import type { FooterProps } from './footer'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -7,6 +8,10 @@
 
     import styles from './footer.module.scss'
 
+    export type Props = FooterProps & {
+        children?: Snippet
+    }
+
     const {
         logo,
         columns,
@@ -15,7 +20,7 @@
         wrapperClassName,
         subTextClassName,
         children
-    }: SvelteFooterProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.footer,

package/components/Footer/Footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ReactFooterProps } from './footer'
+import type { FooterProps } from './footer'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -7,6 +7,10 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './footer.module.scss'
 
+export type Props = FooterProps & {
+    children?: React.ReactNode
+}
+
 const Footer = ({
     logo,
     columns,
@@ -15,7 +19,7 @@ const Footer = ({
     wrapperClassName,
     subTextClassName,
     children
-}: ReactFooterProps) => {
+}: Props) => {
     const classes = classNames([
         styles.footer,
         className

package/components/Footer/footer.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 import type { ButtonProps } from '../Button/button'
 
 export type FooterProps = {
@@ -25,11 +23,3 @@ export type FooterProps = {
     wrapperClassName?: string
     subTextClassName?: string
 }
-
-export type SvelteFooterProps = {
-    children?: Snippet
-} & FooterProps
-
-export type ReactFooterProps = {
-    children?: React.ReactNode
-} & FooterProps

package/components/Grid/Grid.astro

@@ -1,10 +1,11 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { GridProps } from './grid'
 
 import { classNames } from '../../utils/classNames'
 import { getLayoutClasses } from '../../utils/getLayoutClasses'
 
-interface Props extends GridProps {}
+export type Props = GridProps<HTMLAttributes<'div'>>
 
 const {
     element = 'div',

package/components/Grid/Grid.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
-    import type { SvelteGridProps } from './grid'
+    import type { Snippet } from 'svelte'
+    import type { HTMLAttributes } from 'svelte/elements'
+    import type { GridProps } from './grid'
 
     import { classNames } from '../../utils/classNames'
     import { getLayoutClasses } from '../../utils/getLayoutClasses'
 
+    export type Props = GridProps<HTMLAttributes<HTMLElement>> & {
+        children: Snippet
+    }
+
     const {
         element = 'div',
         gap,
@@ -11,7 +17,7 @@
         className,
         children,
         ...rest
-    }: SvelteGridProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         'grid',

package/components/Grid/Grid.tsx

@@ -1,9 +1,14 @@
-import React from 'react'
-import type { ReactGridProps } from './grid'
+import React, { type JSX } from 'react'
+import type { GridProps } from './grid'
 
 import { classNames } from '../../utils/classNames'
 import { getLayoutClasses } from '../../utils/getLayoutClasses'
 
+export type Props = Omit<GridProps, 'element'> & {
+    Element?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+}
+
 const Grid = ({
     Element = 'div',
     gap,
@@ -11,7 +16,7 @@ const Grid = ({
     className,
     children,
     ...rest
-}: ReactGridProps) => {
+}: Props) => {
     const classes = classNames([
         'grid',
         getLayoutClasses({ gap, column }),

package/components/Grid/grid.ts

@@ -1,25 +1,12 @@
-import type { JSX } from 'react'
-import type { Snippet } from 'svelte'
-
 import type {
     Column,
     Gap,
     Responsive
 } from '../../utils/getLayoutClasses'
 
-export type GridProps = {
+export type GridProps<T extends object = object> = {
     element?: string
     gap?: Responsive<Gap>
     column?: Responsive<Column>
     className?: string
-    [key: string]: any
-}
-
-export type SvelteGridProps = {
-    children: Snippet
-} & GridProps
-
-export type ReactGridProps = {
-    Element?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & Omit<GridProps, 'element'>
+} & T

package/components/Group/Group.astro

@@ -3,7 +3,7 @@ import type { GroupProps } from './group'
 
 import styles from './group.module.scss'
 
-interface Props extends GroupProps {}
+export type Props = GroupProps
 
 const {
     withSeparator,

package/components/Group/Group.svelte

@@ -1,15 +1,20 @@
 <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 = $derived(classNames([
         styles.group,

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,7 +10,7 @@
         color,
         theme,
         iconSet
-    }: IconProps = $props()
+    }: Props = $props()
 
     const icons = $derived({
         ...iconMap,

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,4 +1,5 @@
 <script lang="ts">
+    import type { HTMLImgAttributes } from 'svelte/elements'
     import type { ImageProps } from './image'
 
     import AspectRatio from '../AspectRatio/AspectRatio.svelte'
@@ -7,6 +8,8 @@
 
     import styles from './image.module.scss'
 
+    export type Props = ImageProps<HTMLImgAttributes>
+
     const {
         src,
         alt,
@@ -19,7 +22,7 @@
         rounded,
         className,
         ...rest
-    }: ImageProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.img,

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,7 +21,7 @@
         waveColor,
         className,
         ...rest
-    }: ImageLoaderProps = $props()
+    }: Props = $props()
 
     let container: HTMLDivElement
 

package/components/ImageLoader/ImageLoader.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import type { ImageLoaderProps } from './imageloader'
 
 import Image from '../Image/Image.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>