webcoreui 1.5.0-0 → 1.5.0-beta.2

package/components/CarouselItem/CarouselItem.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import type { CarouselItemProps } from './carouselItem'
+
+export type Props = CarouselItemProps & {
+    children: React.ReactNode
+}
+
+const CarouselItem = ({
+    active,
+    className,
+    children
+}: Props) => (
+    <li className={className} data-active={active}>
+        {children}
+    </li>
+)
+
+export default CarouselItem

package/components/CarouselItem/carouselItem.ts

@@ -0,0 +1,4 @@
+export type CarouselItemProps = {
+    active?: boolean
+    className?: string
+}

package/components/Checkbox/Checkbox.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { CheckboxProps } from './checkbox'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
@@ -7,13 +8,11 @@ import check from '../../icons/check.svg?raw'
 
 import styles from './checkbox.module.scss'
 
-interface Props extends CheckboxProps {}
+export type Props = CheckboxProps<HTMLAttributes<'input'>>
 
 const {
-    checked,
     label,
     subText,
-    disabled,
     color,
     className,
     ...rest
@@ -36,10 +35,8 @@ const style = color
             children
         </div>
         <input
-            type="checkbox"
-            checked={checked}
-            disabled={disabled}
             {...rest}
+            type="checkbox"
         />
         <span class={styles.check}>
             <Fragment set:html={check} />

package/components/Checkbox/Checkbox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteCheckboxProps } from './checkbox'
+    import type { ChangeEventHandler, HTMLInputAttributes, MouseEventHandler } from 'svelte/elements'
+    import type { CheckboxProps } from './checkbox'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -9,17 +10,20 @@
 
     import styles from './checkbox.module.scss'
 
+    export type Props = CheckboxProps<HTMLInputAttributes> & {
+        onChange?: ChangeEventHandler<HTMLInputElement>
+        onClick?: MouseEventHandler<HTMLInputElement>
+    }
+
     const {
-        checked,
         label,
         subText,
-        disabled,
         color,
         className,
         onClick,
         onChange,
         ...rest
-    }: SvelteCheckboxProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.checkbox,
@@ -40,12 +44,10 @@
         class={styles.wrapper}
     >
         <input
+            {...rest}
             type="checkbox"
-            checked={checked}
-            disabled={disabled}
             onclick={onClick}
             onchange={onChange}
-            {...rest}
         />
         <span class={styles.check}>
             {@html check}

package/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ReactCheckboxProps } from './checkbox'
+import type { CheckboxProps } from './checkbox'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -9,15 +9,19 @@ import check from '../../icons/check.svg?raw'
 
 import styles from './checkbox.module.scss'
 
+export type Props = CheckboxProps<React.InputHTMLAttributes<HTMLInputElement>> & {
+    onChange?: React.ChangeEventHandler<HTMLInputElement>
+    onClick?: React.MouseEventHandler<HTMLInputElement>
+}
+
 const Checkbox = ({
     checked,
     label,
     subText,
-    disabled,
     color,
     className,
     ...rest
-}: ReactCheckboxProps) => {
+}: Props) => {
     const classes = classNames([
         styles.checkbox,
         label && subText && styles.col,
@@ -39,10 +43,9 @@ const Checkbox = ({
                 )}
             >
                 <input
+                    {...rest}
                     type="checkbox"
                     defaultChecked={checked}
-                    disabled={disabled}
-                    {...rest}
                 />
                 <span
                     className={styles.check}

package/components/Checkbox/checkbox.ts

@@ -1,21 +1,6 @@
-import type { ChangeEventHandler, MouseEventHandler } from 'svelte/elements'
-
-export type CheckboxProps = {
-    checked?: boolean
+export type CheckboxProps<T extends object = object> = {
     label?: string
     subText?: string
-    disabled?: boolean
     color?: string
     className?: string
-    [key: string]: any
-}
-
-export type SvelteCheckboxProps = {
-    onChange?: ChangeEventHandler<HTMLInputElement>
-    onClick?: MouseEventHandler<HTMLInputElement>
-} & CheckboxProps
-
-export type ReactCheckboxProps = {
-    onChange?: React.ChangeEventHandler<HTMLInputElement>
-    onClick?: React.MouseEventHandler<HTMLInputElement>
-} & CheckboxProps
+} & T

package/components/Collapsible/Collapsible.astro

@@ -5,7 +5,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './collapsible.module.scss'
 
-interface Props extends CollapsibleProps {}
+export type Props = CollapsibleProps
 
 const {
     initialHeight,

package/components/Collapsible/Collapsible.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-    import type { SvelteCollapsibleProps } from './collapsible'
+    import type { Snippet } from 'svelte'
+    import type { CollapsibleProps } from './collapsible'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './collapsible.module.scss'
 
+    export type Props = CollapsibleProps & {
+        on: Snippet
+        off: Snippet
+        children: Snippet
+    }
+
     let {
         initialHeight,
         maxHeight,
@@ -14,7 +21,7 @@
         children,
         off,
         on
-    }: SvelteCollapsibleProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.collapsible,

package/components/Collapsible/Collapsible.tsx

@@ -1,10 +1,16 @@
 import React, { useState } from 'react'
-import type { ReactCollapsibleProps } from './collapsible'
+import type { CollapsibleProps } from './collapsible'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './collapsible.module.scss'
 
+export type Props = CollapsibleProps & {
+    on: React.ReactNode
+    off: React.ReactNode
+    children: React.ReactNode
+}
+
 const Collapsible = ({
     initialHeight,
     maxHeight,
@@ -14,7 +20,7 @@ const Collapsible = ({
     children,
     className,
     togglesClassName
-}: ReactCollapsibleProps) => {
+}: Props) => {
     const [toggle, setToggled] = useState(toggled)
 
     const classes = classNames([

package/components/Collapsible/collapsible.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type CollapsibleProps = {
     initialHeight?: string
     maxHeight?: string
@@ -7,16 +5,3 @@ export type CollapsibleProps = {
     className?: string
     togglesClassName?: string
 }
-
-export type SvelteCollapsibleProps = {
-    on: Snippet
-    off: Snippet
-    children: Snippet
-} & CollapsibleProps
-
-export type ReactCollapsibleProps = {
-    on: React.ReactNode
-    off: React.ReactNode
-    children: React.ReactNode
-} & CollapsibleProps
-

package/components/ConditionalWrapper/ConditionalWrapper.astro

@@ -1,7 +1,7 @@
 ---
 import type { ConditionalWrapperProps } from './conditionalwrapper'
 
-interface Props extends ConditionalWrapperProps {}
+export type Props = ConditionalWrapperProps
 
 const { condition } = Astro.props
 

package/components/ConditionalWrapper/ConditionalWrapper.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
-    import type { SvelteConditionalWrapperProps } from './conditionalwrapper'
+    import type { Snippet } from 'svelte'
+    import type { ConditionalWrapperProps } from './conditionalwrapper'
+
+    export type Props = ConditionalWrapperProps & {
+        children: Snippet
+        element?: string
+    }
 
     const {
         condition,
         element = 'div',
         children,
         ...rest
-    }: SvelteConditionalWrapperProps = $props()
+    }: Props = $props()
 </script>
 
 {#if condition}

package/components/ConditionalWrapper/ConditionalWrapper.tsx

@@ -1,6 +1,11 @@
-import type { ReactConditionalWrapperProps } from './conditionalwrapper'
+import type { ConditionalWrapperProps } from './conditionalwrapper'
 
-const ConditionalWrapper = ({ condition, wrapper, children }: ReactConditionalWrapperProps) =>
+export type Props = ConditionalWrapperProps & {
+    wrapper: (_: React.ReactNode) => any
+    children: React.ReactNode
+}
+
+const ConditionalWrapper = ({ condition, wrapper, children }: Props) =>
     condition ? wrapper(children) : children
 
 export default ConditionalWrapper

package/components/ConditionalWrapper/conditionalwrapper.ts

@@ -1,15 +1,3 @@
-import type { Snippet } from 'svelte'
-
-export type ConditionalWrapperProps = {
+export type ConditionalWrapperProps<T extends object = Record<string, unknown>> = {
     condition: boolean
-    [key: string]: any
-}
-
-export type SvelteConditionalWrapperProps = {
-    children: Snippet
-} & ConditionalWrapperProps
-
-export type ReactConditionalWrapperProps = {
-    wrapper: (_: React.ReactNode) => any
-    children: React.ReactNode
-} & ConditionalWrapperProps
+} & T

package/components/ContextMenu/ContextMenu.astro

@@ -1,11 +1,12 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { ContextMenuProps } from './contextmenu'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './contextmenu.module.scss'
 
-interface Props extends ContextMenuProps {}
+export type Props = ContextMenuProps<HTMLAttributes<'div'>>
 
 const {
     element = 'div',

package/components/ContextMenu/ContextMenu.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
-    import type { SvelteContextMenuProps } from './contextmenu'
+    import { onMount, type Snippet } from 'svelte'
+    import type { HTMLAttributes } from 'svelte/elements'
+    import type { ContextMenuProps } from './contextmenu'
 
     import { classNames } from '../../utils/classNames'
     import { on } from '../../utils/DOMUtils'
 
     import styles from './contextmenu.module.scss'
 
+    export type Props = ContextMenuProps<HTMLAttributes<HTMLElement>> & {
+        children: Snippet
+        context: Snippet
+    }
+
     const {
         element = 'div',
         className,
         children,
         context,
         ...rest
-    }: SvelteContextMenuProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.ctx,

package/components/ContextMenu/ContextMenu.tsx

@@ -1,18 +1,24 @@
 import React, { useEffect, useRef } from 'react'
-import type { ReactContextMenuProps } from './contextmenu'
+import type { ContextMenuProps } from './contextmenu'
 
 import { classNames } from '../../utils/classNames'
 import { on } from '../../utils/DOMUtils'
 
 import styles from './contextmenu.module.scss'
 
+export type Props = Omit<ContextMenuProps, 'element'> & {
+    Element?: React.ElementType
+    children: React.ReactNode
+    context: React.ReactNode
+}
+
 const ContextMenu = ({
     Element = 'div',
     className,
     children,
     context,
     ...rest
-}: ReactContextMenuProps) => {
+}: Props) => {
     const ctx = useRef<HTMLElement>(null)
     const content = useRef<HTMLDivElement>(null)
     const classes = classNames([

package/components/ContextMenu/contextmenu.ts

@@ -1,19 +1,4 @@
-import type React from 'react'
-import type { Snippet } from 'svelte'
-
-export type ContextMenuProps = {
+export type ContextMenuProps<T extends object = object> = {
     element?: string
     className?: string
-    [key: string]: any
-}
-
-export type SvelteContextMenuProps = {
-    children: Snippet
-    context: Snippet
-} & ContextMenuProps
-
-export type ReactContextMenuProps = {
-    Element?: React.ElementType
-    children: React.ReactNode
-    context: React.ReactNode
-} & Omit<ContextMenuProps, 'element'>
+} & T

package/components/Copy/Copy.astro

@@ -1,14 +1,14 @@
 ---
 import type { CopyProps } from './copy'
 
-import Badge from '../Badge/Badge.astro'
+import Badge, { type Props as BadgeProps } from '../Badge/Badge.astro'
 import Icon from '../Icon/Icon.astro'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './copy.module.scss'
 
-interface Props extends CopyProps {}
+export type Props = CopyProps<BadgeProps>
 
 const {
     tooltip,

package/components/Copy/Copy.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-    import type { SvelteCopyProps } from './copy'
+    import type { Snippet } from 'svelte'
+    import type { CopyProps } from './copy'
 
-    import Badge from '../Badge/Badge.svelte'
+    import Badge, { type Props as BadgeProps } from '../Badge/Badge.svelte'
 
     import { classNames } from '../../utils/classNames'
 
@@ -10,6 +11,10 @@
 
     import styles from './copy.module.scss'
 
+    export type Props = CopyProps<BadgeProps> & {
+        children: Snippet
+    }
+
     let {
         tooltip = $bindable(''),
         tooltipPosition,
@@ -18,7 +23,7 @@
         className,
         children,
         ...rest
-    }: SvelteCopyProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.copy,

package/components/Copy/Copy.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react'
-import type { ReactCopyProps } from './copy'
+import type { CopyProps } from './copy'
 
-import Badge from '../Badge/Badge.tsx'
+import Badge, { type Props as BadgeProps } from '../Badge/Badge.tsx'
 
 import { classNames } from '../../utils/classNames'
 
@@ -10,6 +10,10 @@ import copy from '../../icons/copy.svg?raw'
 
 import styles from './copy.module.scss'
 
+export type Props = CopyProps<BadgeProps> & {
+    children: React.ReactNode
+}
+
 const Copy = ({
     tooltip,
     tooltipPosition,
@@ -18,7 +22,7 @@ const Copy = ({
     className,
     children,
     ...rest
-}: ReactCopyProps) => {
+}: Props) => {
     const copyButton = useRef<HTMLButtonElement>(null)
     const copiedButton = useRef<HTMLSpanElement>(null)
     const [tooltipText, setTooltipText] = useState(tooltip)

package/components/Copy/copy.ts

@@ -1,20 +1,10 @@
-import type { Snippet } from 'svelte'
-
 import type { BadgeProps } from '../Badge/badge'
 import type { IconProps } from '../Icon/icon'
 
-export type CopyProps = {
+export type CopyProps<T extends object = object> = {
     tooltip?: string
     tooltipPosition?: 'left' | 'right' | 'bottom' | null
     copyIcon?: IconProps['type'] | string
     copiedIcon?: IconProps['type'] | string
     className?: string
-} & BadgeProps
-
-export type SvelteCopyProps = {
-    children: Snippet
-} & CopyProps
-
-export type ReactCopyProps = {
-    children: React.ReactNode
-} & CopyProps
+} & BadgeProps<T>

package/components/Counter/Counter.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { CounterProps } from './counter'
 
 import Icon from '../Icon/Icon.astro'
@@ -8,7 +9,7 @@ import plusIcon from '../../icons/plus.svg?raw'
 
 import styles from './counter.module.scss'
 
-interface Props extends CounterProps {}
+export type Props = CounterProps<HTMLAttributes<'input'>>
 
 const {
     type = 'compact',
@@ -49,10 +50,10 @@ const styleVariable = width
         </Fragment>
     </button>
     <input
+        {...rest}
         type="number"
         value={value}
         disabled={disabled}
-        {...rest}
     />
     <button data-id="w-counter-max" disabled={disabled}>
         <Fragment>

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,7 +28,7 @@
         min,
         max,
         ...rest
-    }: SvelteCounterProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.counter,
@@ -48,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
         }
 
@@ -116,6 +121,7 @@
         {@html subtractIcon}
     </button>
     <input
+        {...rest}
         bind:value={value}
         type="number"
         disabled={disabled}
@@ -123,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"