webcoreui 1.4.0 → 1.5.0-beta.1

package/components/Counter/Counter.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteCounterProps } from './counter'
+    import type { HTMLInputAttributes } from 'svelte/elements'
+    import type { CounterProps } from './counter'
 
     import { classNames } from '../../utils/classNames'
 
@@ -8,6 +9,10 @@
 
     import styles from './counter.module.scss'
 
+    export type Props = CounterProps<HTMLInputAttributes> & {
+        onChange?: (value: number) => void
+    }
+
     let {
         type = 'compact',
         theme,
@@ -23,22 +28,23 @@
         min,
         max,
         ...rest
-    }: SvelteCounterProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.counter,
         styles[type],
         theme && styles[theme],
         rounded && styles.rounded,
         className
-    ])
+    ]))
 
-    const subtractIcon = minIcon || minusIcon
-    const addIcon = maxIcon || plusIcon
+    const subtractIcon = $derived(minIcon || minusIcon)
+    const addIcon = $derived(maxIcon || plusIcon)
 
-    const styleVariable = width
+    const styleVariable = $derived(width
         ? `--w-counter-width: ${width};`
         : null
+    )
 
     let intervalId: ReturnType<typeof setTimeout>
     let timeoutId: ReturnType<typeof setTimeout>
@@ -47,9 +53,9 @@
 
     const updateValue = (isMin?: boolean) => {
         const direction = isMin ? -1 : 1
-        const newValue = value + (direction * step)
+        const newValue = value + (direction * Number(step))
 
-        if ((min !== undefined && newValue < min) || (max !== undefined && newValue > max)) {
+        if ((min !== undefined && newValue < Number(min)) || (max !== undefined && newValue > Number(max))) {
             return
         }
 
@@ -115,6 +121,7 @@
         {@html subtractIcon}
     </button>
     <input
+        {...rest}
         bind:value={value}
         type="number"
         disabled={disabled}
@@ -122,7 +129,6 @@
         min={min}
         max={max}
         oninput={() => onChange?.(value)}
-        {...rest}
     />
     <button
         data-id="w-counter-max"

package/components/Counter/Counter.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react'
-import type { ReactCounterProps } from './counter'
+import type { CounterProps } from './counter'
 
 import { classNames } from '../../utils/classNames'
 
@@ -8,6 +8,10 @@ import plusIcon from '../../icons/plus.svg?raw'
 
 import styles from './counter.module.scss'
 
+export type Props = CounterProps<Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>> & {
+    onChange?: (value: number) => void
+}
+
 const Counter = ({
     type = 'compact',
     theme,
@@ -23,8 +27,8 @@ const Counter = ({
     min,
     max,
     ...rest
-}: ReactCounterProps) => {
-    const [inputValue, setInputValue] = useState(value)
+}: Props) => {
+    const [inputValue, setInputValue] = useState<number>(Number(value))
     const intervalId = useRef<ReturnType<typeof setTimeout> | null>(null)
     const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null)
     const longPressDelay = useRef(500)
@@ -48,9 +52,9 @@ const Counter = ({
     const updateValue = (isMin?: boolean) => {
         setInputValue((prevValue: number) => {
             const direction = isMin ? -1 : 1
-            const newValue = prevValue + (direction * step)
+            const newValue = prevValue + (direction * Number(step))
 
-            if ((min !== undefined && newValue < min) || (max !== undefined && newValue > max)) {
+            if ((min !== undefined && newValue < Number(min)) || (max !== undefined && newValue > Number(max))) {
                 return prevValue
             }
 
@@ -104,7 +108,7 @@ const Counter = ({
         }
     }
 
-    const handleInput = (event: React.FormEvent) => {
+    const handleInput = (event: React.InputEvent<HTMLInputElement>) => {
         const target = event.target
 
         if (target instanceof HTMLInputElement) {
@@ -131,6 +135,7 @@ const Counter = ({
                 dangerouslySetInnerHTML={{ __html: subtractIcon }}
             />
             <input
+                {...rest}
                 value={inputValue}
                 type="number"
                 disabled={disabled}
@@ -138,7 +143,6 @@ const Counter = ({
                 min={min}
                 max={max}
                 onInput={handleInput}
-                {...rest}
             />
             <button
                 data-id="w-counter-max"

package/components/Counter/counter.module.scss

@@ -1,10 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-counter-width: 10ch;
-}
-
 .counter {
+    --width: var(--w-counter-width, 10ch);
+
     @include layout(inline-flex);
     @include border(primary-50);
     @include border-radius();
@@ -139,7 +137,7 @@ body {
         @include spacing(p-xs);
 
         flex: 1;
-        width: var(--w-counter-width);
+        width: var(--width);
         appearance: none;
         -moz-appearance: textfield;
 

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,34 +42,34 @@
         id,
         onFilter,
         children
-    }: SvelteDataTableProps = $props()
+    }: Props = $props()
 
-    let filteredData: any = $state(data)
-    let toggledData: any = $state(data)
-    let filteredHeadings: any = $state(headings)
+    let filteredData: any = $derived(data)
+    let toggledData: any = $derived(data)
+    let filteredHeadings: any = $derived(headings)
     let page: number = $state(1)
     let hasActiveFilter: boolean = $state(false)
     let sortOrder = 1
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.table,
         hover && styles.hover,
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
         maxHeight && styles.scroll
-    ])
+    ]))
 
-    const footerClasses = classNames([
+    const footerClasses = $derived(classNames([
         styles.footer,
         subText && styles.between
-    ])
+    ]))
 
-    const showColumnToggle = headings?.some(heading => {
+    const showColumnToggle = $derived(headings?.some(heading => {
         return typeof heading === 'string' ? false : heading.toggleable
-    })
+    }))
 
-    const columnToggleItems = [{
+    const columnToggleItems = $derived([{
         items: headings?.length ? headings
             .filter(heading => typeof heading !== 'string' && heading.toggleable)
             .map(heading => ({
@@ -73,15 +79,17 @@
                     return (h as HeadingObject).name === (heading as HeadingObject).name
                 }))
             })) : []
-    }]
+    }])
 
-    const columnFilterIndexes = headings?.map(heading => (heading as HeadingObject).filterable)
+    const columnFilterIndexes = $derived(headings?.map(heading => (heading as HeadingObject).filterable)
         .map((heading, index) => heading ? index : null)
         .filter(heading => heading !== null) || []
+    )
 
-    const hasPagination = data?.length && itemsPerPage
+    const hasPagination = $derived(data?.length && itemsPerPage
         ? data.length > itemsPerPage
         : false
+    )
 
     const filter = debounce((event: Event) => {
         const target = event.target as HTMLInputElement

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,17 +19,17 @@
         className,
         children,
         ...rest
-    }: SvelteFlexProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         'flex',
         getLayoutClasses({ gap, alignment, direction, wrap }),
         className
-    ])
+    ]))
 
-    const componentProps = {
+    const componentProps = $derived({
         class: classes
-    }
+    })
 </script>
 
 <svelte:element this={element} {...componentProps} {...rest}>

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,22 +20,22 @@
         wrapperClassName,
         subTextClassName,
         children
-    }: SvelteFooterProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.footer,
         className
-    ])
+    ]))
 
-    const containerClasses = classNames([
+    const containerClasses = $derived(classNames([
         styles.container,
         wrapperClassName
-    ])
+    ]))
 
-    const subTextClasses = classNames([
+    const subTextClasses = $derived(classNames([
         styles.subtext,
         subTextClassName
-    ])
+    ]))
 </script>
 
 <footer class={classes}>

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,17 +17,17 @@
         className,
         children,
         ...rest
-    }: SvelteGridProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         'grid',
         getLayoutClasses({ gap, column }),
         className
-    ])
+    ]))
 
-    const componentProps = {
+    const componentProps = $derived({
         class: classes
-    }
+    })
 </script>
 
 <svelte:element this={element} {...componentProps} {...rest}>

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,