webcoreui 1.5.0-0 → 1.5.0-beta.2

package/components/OTPInput/OTPInput.astro

@@ -1,15 +1,14 @@
 ---
 import type { OTPInputProps } from './otpinput'
 
-import Input from '../Input/Input.astro'
+import Input, { type Props as InputProps } from '../Input/Input.astro'
 
 import styles from './otpinput.module.scss'
 
-interface Props extends OTPInputProps {}
+export type Props = OTPInputProps<InputProps>
 
 const {
     name = 'otp',
-    disabled,
     length = 6,
     groupLength = 0,
     separator = '•',
@@ -47,17 +46,16 @@ const inputs = Array.from({ length }, (_, i) => i + 1)
                 <div class={styles.separator}>{input}</div>
             ) : (
                 <Input
+                    {...rest}
                     id={`${name}-${index}`}
                     class={styles.input}
                     type="text"
                     maxlength="1"
-                    disabled={disabled}
                     inputmode="numeric"
                     autocomplete="one-time-code"
                     data-id="w-input-otp"
                     data-index={input}
                     aria-label={`OTP digit ${input + 1}`}
-                    {...rest}
                 />
             )
         )}

package/components/OTPInput/OTPInput.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
     import type { OTPInputProps } from './otpinput'
 
-    import Input from '../Input/Input.svelte'
+    import Input, { type Props as InputProps } from '../Input/Input.svelte'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './otpinput.module.scss'
 
+    export type Props = OTPInputProps<InputProps>
+
     let {
         name = 'otp',
-        disabled,
         length = 6,
         groupLength = 0,
         separator = '•',
@@ -18,7 +19,7 @@
         className,
         value = $bindable(''),
         ...rest
-    }: OTPInputProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.wrapper,
@@ -160,11 +161,11 @@
                 <div class={styles.separator}>{input}</div>
             {:else}
                 <Input
+                    {...rest}
                     id={`${name}-${index}`}
                     className={styles.input}
                     type="text"
-                    maxlength="1"
-                    disabled={disabled}
+                    maxlength={1}
                     inputmode="numeric"
                     autocomplete="one-time-code"
                     data-index={input}
@@ -174,7 +175,6 @@
                     onfocus={handleFocus}
                     onInput={handleInput}
                     onpaste={handlePaste}
-                    {...rest}
                 />
             {/if}
         {/each}

package/components/OTPInput/OTPInput.tsx

@@ -1,15 +1,18 @@
 import React from 'react'
 import type { OTPInputProps } from './otpinput'
 
-import Input from '../Input/Input.tsx'
+import Input, { type Props as InputProps } from '../Input/Input.tsx'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './otpinput.module.scss'
 
+export type Props = OTPInputProps<Omit<InputProps, 'onChange'>> & {
+    onChange?: (value: string) => void
+}
+
 const OTPInput = ({
     name = 'otp',
-    disabled,
     length = 6,
     groupLength = 0,
     separator = '•',
@@ -18,7 +21,7 @@ const OTPInput = ({
     className,
     onChange,
     ...rest
-}: OTPInputProps) => {
+}: Props) => {
     const classes = classNames([
         styles.wrapper,
         className
@@ -64,7 +67,7 @@ const OTPInput = ({
         }
     }
 
-    const handleInput = (event: React.FormEvent<HTMLInputElement>) => {
+    const handleInput = (event: React.InputEvent<HTMLInputElement>) => {
         const target = event.target
 
         if (!(target instanceof HTMLInputElement)) {
@@ -97,7 +100,7 @@ const OTPInput = ({
         }
     }
 
-    const handlePaste = (event: ClipboardEvent) => {
+    const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
         event.preventDefault()
 
         const target = event.target
@@ -122,7 +125,7 @@ const OTPInput = ({
         }
     }
 
-    const handleFocus = (event: Event) => {
+    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
         const target = event.target
 
         if (target instanceof HTMLInputElement) {
@@ -163,12 +166,12 @@ const OTPInput = ({
                         <div className={styles.separator} key={index}>{input}</div>
                     ) : (
                         <Input
+                            {...rest}
                             key={index}
                             id={`${name}-${index}`}
                             className={styles.input}
                             type="text"
                             maxLength={1}
-                            disabled={disabled}
                             inputMode="numeric"
                             autoComplete="one-time-code"
                             data-index={input}
@@ -178,7 +181,6 @@ const OTPInput = ({
                             onFocus={handleFocus}
                             onInput={handleInput}
                             onPaste={handlePaste}
-                            {...rest}
                         />
                     )
                 )}

package/components/OTPInput/otpinput.ts

@@ -1,11 +1,9 @@
-export type OTPInputProps = {
+export type OTPInputProps<T extends object = object> = {
     name?: string
-    disabled?: boolean
     length?: number
     groupLength?: number
     separator?: string
     label?: string
     subText?: string
     className?: string
-    [key: string]: any
-}
+} & T

package/components/Pagination/Pagination.astro

@@ -8,7 +8,7 @@ import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './pagination.module.scss'
 
-interface Props extends PaginationProps {}
+export type Props = PaginationProps
 
 const {
     type,

package/components/Pagination/Pagination.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { SveltePaginationProps } from './pagination'
+    import type { PaginationEventType, PaginationProps } from './pagination'
 
     import Button from '../Button/Button.svelte'
 
@@ -10,6 +10,10 @@
 
     import styles from './pagination.module.scss'
 
+    export type Props = PaginationProps & {
+        onChange?: (event: PaginationEventType) => void
+    }
+
     const {
         type,
         showChevrons,
@@ -26,7 +30,7 @@
         currentPage,
         onChange,
         className
-    }: SveltePaginationProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.pagination,

package/components/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import type { ReactPaginationProps } from './pagination'
+import type { PaginationEventType, PaginationProps } from './pagination'
 
 import Button from '../Button/Button.tsx'
 
@@ -10,6 +10,10 @@ import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './pagination.module.scss'
 
+export type Props = PaginationProps & {
+    onChange?: (event: PaginationEventType) => void
+}
+
 const Pagination = ({
     type,
     showChevrons,
@@ -27,7 +31,7 @@ const Pagination = ({
     onChange,
     className
 // eslint-disable-next-line complexity
-}: ReactPaginationProps) => {
+}: Props) => {
     const [calculatedCurrentPage, setCalculatedCurrentPage] = useState(
         currentPage
             || (pages?.findIndex(page => page.active) || -1) + 1

package/components/Pagination/pagination.ts

@@ -26,11 +26,3 @@ export type PaginationProps = {
         link?: string
     }[]
 }
-
-export type SveltePaginationProps = {
-    onChange?: (event: PaginationEventType) => void
-} & PaginationProps
-
-export type ReactPaginationProps = {
-    onChange?: (event: PaginationEventType) => void
-} & PaginationProps

package/components/Popover/Popover.astro

@@ -1,12 +1,12 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { PopoverProps } from './popover'
 
 import styles from './popover.module.scss'
 
-interface Props extends PopoverProps {}
+export type Props = PopoverProps<HTMLAttributes<'dialog'>>
 
 const {
-    id,
     className,
     transparent,
     ...rest
@@ -19,10 +19,6 @@ const classes = [
 ]
 ---
 
-<dialog
-    class:list={classes}
-    id={id}
-    {...rest}
->
+<dialog {...rest} class:list={classes}>
     <slot />
 </dialog>

package/components/Popover/Popover.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
-    import type { SveltePopoverProps } from './popover'
+    import type { Snippet } from 'svelte'
+    import type { HTMLDialogAttributes } from 'svelte/elements'
+    import type { PopoverProps } from './popover'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './popover.module.scss'
 
+    export type Props = PopoverProps<HTMLDialogAttributes> & {
+        children: Snippet
+    }
+
     const {
-        id,
         className,
         transparent,
         children,
         ...rest
-    }: SveltePopoverProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.popover,
@@ -20,10 +25,6 @@
     ]))
 </script>
 
-<dialog
-    class={classes}
-    id={id}
-    {...rest}
->
+<dialog {...rest} class={classes}>
     {@render children?.()}
 </dialog>

package/components/Popover/Popover.tsx

@@ -1,11 +1,16 @@
 import React, { useEffect,useState } from 'react'
 import { createPortal } from 'react-dom'
-import type { ReactPopoverProps } from './popover'
+import type { PopoverProps } from './popover'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './popover.module.scss'
 
+export type Props = PopoverProps<React.DialogHTMLAttributes<HTMLDialogElement>> & {
+    isInteractive?: boolean
+    children?: React.ReactNode
+}
+
 const Popover = ({
     id,
     className,
@@ -13,7 +18,7 @@ const Popover = ({
     isInteractive = false,
     children,
     ...rest
-}: ReactPopoverProps) => {
+}: Props) => {
     const [isMounted, setIsMounted] = useState(false)
 
     const classes = classNames([
@@ -32,11 +37,7 @@ const Popover = ({
 
     if (isInteractive) {
         return createPortal(
-            <dialog
-                className={classes}
-                id={id}
-                {...rest}
-            >
+            <dialog {...rest} className={classes}>
                 {children}
             </dialog>,
             document.body
@@ -44,11 +45,7 @@ const Popover = ({
     }
 
     return (
-        <dialog
-            className={classes}
-            id={id}
-            {...rest}
-        >
+        <dialog {...rest} className={classes}>
             {children}
         </dialog>
     )

package/components/Popover/popover.ts

@@ -1,17 +1,4 @@
-import type { Snippet } from 'svelte'
-
-export type PopoverProps = {
-    id?: string
+export type PopoverProps<T extends object = object> = {
     className?: string
     transparent?: boolean
-    [key: string]: any
-}
-
-export type SveltePopoverProps = {
-    children: Snippet
-} & PopoverProps
-
-export type ReactPopoverProps = {
-    isInteractive?: boolean
-    children?: React.ReactNode
-} & PopoverProps
+} & T

package/components/Progress/Progress.astro

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

package/components/Progress/Progress.svelte

@@ -4,6 +4,8 @@
     import { classNames } from '../../utils/classNames'
 
     import styles from './progress.module.scss'
+
+    export type Props = ProgressProps
 
     const {
         value,
@@ -17,7 +19,7 @@
         stripeDark,
         indeterminate,
         className
-    }: ProgressProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles['w-progress'],

package/components/Progress/Progress.tsx

@@ -4,6 +4,8 @@ import type { ProgressProps } from './progress'
 import { classNames } from '../../utils/classNames'
 
 import styles from './progress.module.scss'
+
+export type Props = ProgressProps
 
 const Progress = ({
     value,
@@ -17,7 +19,7 @@ const Progress = ({
     stripeDark,
     indeterminate,
     className
-}: ProgressProps) => {
+}: Props) => {
     const classes = classNames([
         styles['w-progress'],
         size && styles[size],

package/components/Radio/Radio.astro

@@ -1,14 +1,14 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { RadioProps } from './radio'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import styles from './radio.module.scss'
 
-interface Props extends RadioProps {}
+export type Props = RadioProps<HTMLAttributes<'input'>>
 
 const {
-    name,
     items,
     color,
     inline,
@@ -38,13 +38,12 @@ const style = color
                     children
                 </div>
                 <input
+                    {...rest}
                     type="radio"
-                    name={name}
                     value={item.value}
                     checked={item.selected}
                     disabled={item.disabled}
                     required={item.required}
-                    {...rest}
                 />
                 <span class={styles.icon} />
                 <span class={styles.label}>

package/components/Radio/Radio.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteRadioProps } from './radio'
+    import type { HTMLInputAttributes } from 'svelte/elements'
+    import type { RadioProps } from './radio'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -7,15 +8,20 @@
 
     import styles from './radio.module.scss'
 
+    import type { InputTarget } from '../Input/input'
+
+    export type Props = RadioProps<HTMLInputAttributes> & {
+        onChange?: (event: Event & InputTarget) => void
+    }
+
     const {
-        name,
         items,
         color,
         inline,
         className,
         onChange,
         ...rest
-    }: SvelteRadioProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.radio,
@@ -42,14 +48,13 @@
                 class={styles.wrapper}
             >
                 <input
+                    {...rest}
                     type="radio"
-                    name={name}
                     value={item.value}
                     checked={item.selected}
                     disabled={item.disabled}
                     required={item.required}
                     onchange={onChange}
-                    {...rest}
                 />
                 <span class={styles.icon}></span>
                 <span class={styles.label}>

package/components/Radio/Radio.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ReactRadioProps } from './radio'
+import type { RadioProps } from './radio'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -7,15 +7,18 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './radio.module.scss'
 
+export type Props = RadioProps<React.InputHTMLAttributes<HTMLInputElement>> & {
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
 const Radio = ({
-    name,
     items,
     color,
     inline,
     className,
     onChange,
     ...rest
-}: ReactRadioProps) => {
+}: Props) => {
     const classes = classNames([
         styles.radio,
         inline && styles.inline,
@@ -42,14 +45,13 @@ const Radio = ({
                         )}
                     >
                         <input
+                            {...rest}
                             type="radio"
-                            name={name}
                             value={item.value}
                             defaultChecked={item.selected}
                             disabled={item.disabled}
                             required={item.required}
                             onChange={onChange}
-                            {...rest}
                         />
                         <span className={styles.icon} />
                         <span

package/components/Radio/radio.ts

@@ -1,6 +1,4 @@
-import type { InputTarget } from '../Input/input'
-
-export type RadioProps = {
+export type RadioProps<T extends object = object> = {
     items: {
         label: string
         value: string
@@ -9,17 +7,7 @@ export type RadioProps = {
         disabled?: boolean
         required?: boolean
     }[]
-    name: string
     color?: string
     inline?: boolean
     className?: string
-    [key: string]: any
-}
-
-export type SvelteRadioProps = {
-    onChange?: (event: Event & InputTarget) => void
-} & RadioProps
-
-export type ReactRadioProps = {
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-} & RadioProps
+} & T

package/components/RangeSlider/RangeSlider.astro

@@ -9,7 +9,7 @@ import { interpolate } from '../../utils/interpolate'
 
 import styles from './rangeslider.module.scss'
 
-interface Props extends RangeSliderProps {}
+export type Props = RangeSliderProps
 
 const {
     min = 0,

package/components/RangeSlider/RangeSlider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { SvelteRangeSliderProps } from './rangeslider'
+    import type { RangeSliderEventType, RangeSliderProps } from './rangeslider'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -8,6 +8,10 @@
 
     import styles from './rangeslider.module.scss'
 
+    export type Props = RangeSliderProps & {
+        onChange?: (event: RangeSliderEventType) => void
+    }
+
     const {
         min = 0,
         max = 100,
@@ -30,7 +34,7 @@
         className,
         onChange,
         ...rest
-    }: SvelteRangeSliderProps = $props()
+    }: Props = $props()
 
     const styleVariables = $derived(classNames([
         color && `--w-range-slider-color: ${color};`,

package/components/RangeSlider/RangeSlider.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable complexity */
 import React, { useEffect, useRef, useState } from 'react'
-import type { ReactRangeSliderProps } from './rangeslider'
+import type { RangeSliderEventType, RangeSliderProps } from './rangeslider'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -9,6 +9,10 @@ import { interpolate } from '../../utils/interpolate'
 
 import styles from './rangeslider.module.scss'
 
+export type Props = RangeSliderProps & {
+    onChange?: (event: RangeSliderEventType) => void
+}
+
 const RangeSlider = ({
     min = 0,
     max = 100,
@@ -31,7 +35,7 @@ const RangeSlider = ({
     className,
     onChange,
     ...rest
-}: ReactRangeSliderProps) => {
+}: Props) => {
     const [minValue, setMinValue] = useState(selectedMin || min)
     const [maxValue, setMaxValue] = useState(selectedMax || max)
     const [dynamicMinLabel, setDynamicMinLabel] = useState(minLabel)
@@ -55,7 +59,7 @@ const RangeSlider = ({
         }
     }
 
-    const handleInput = (event: React.FormEvent) => {
+    const handleInput = (event: React.InputEvent<HTMLInputElement>) => {
         const target = event.target
 
         if (!(target instanceof HTMLInputElement)) {

package/components/RangeSlider/rangeslider.ts

@@ -28,12 +28,3 @@ export type RangeSliderProps = {
     updateLabels?: boolean
     className?: string
 }
-
-export type SvelteRangeSliderProps = {
-    onChange?: (event: RangeSliderEventType) => void
-} & RangeSliderProps
-
-export type ReactRangeSliderProps = {
-    onChange?: (event: RangeSliderEventType) => void
-} & RangeSliderProps
-