webcoreui 1.4.0 → 1.5.0-beta.1

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,19 +19,19 @@
         className,
         value = $bindable(''),
         ...rest
-    }: OTPInputProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.wrapper,
         className
-    ])
+    ]))
 
-    const inputs = Array.from({ length }, (_, i) => i + 1)
+    const inputs = $derived(Array.from({ length }, (_, i) => i + 1)
         .reduce<(number | string)[]>((acc, num, i) =>
             groupLength > 0 && i % groupLength === 0 && i !== 0
                 ? [...acc, separator, num]
                 : [...acc, num]
-        , [])
+        , []))
 
     const focus = (direction: 'next' | 'prev', wrapper: HTMLElement | null, clear?: boolean) => {
         const index = Number(wrapper?.dataset.active)
@@ -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.module.scss

@@ -45,15 +45,3 @@
         @include spacing(mt-xs);
     }
 }
-
-@keyframes flash {
-    0% {
-        @include visibility(0);
-    }
-    50% {
-        @include visibility(1);
-    }
-    100% {
-        @include visibility(0);
-    }
-}

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,14 +30,14 @@
         currentPage,
         onChange,
         className
-    }: SveltePaginationProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.pagination,
         theme !== 'outline' && (theme === null || theme === undefined ? styles.primary : styles[theme]),
         type === 'dots' && styles.dots,
         className
-    ])
+    ]))
 
     const calculatedTotalPages = $derived(totalPages
         || pages?.length

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,29 +1,30 @@
 <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 = classNames([
+    const classes = $derived(classNames([
         styles.popover,
         transparent && styles.transparent,
         className
-    ])
+    ]))
 </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,25 +19,25 @@
         stripeDark,
         indeterminate,
         className
-    }: ProgressProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles['w-progress'],
         size && styles[size],
         striped && styles.striped,
         square && styles.square,
         indeterminate && styles.indeterminate,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         color && `--w-progress-color: ${color};`,
         background && `--w-progress-background: ${background};`,
         stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
         stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
-    ])
+    ]))
 
-    const currentValue = indeterminate && !value ? 20 : value
+    const currentValue = $derived(indeterminate && !value ? 20 : value)
 </script>
 
 <div class={classes} style={styleVariables || null}>

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/Progress/progress.module.scss

@@ -1,20 +1,18 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-progress-color: var(--w-color-primary);
-    --w-progress-background: var(--w-color-primary-50);
-    --w-progress-stripe-light: var(--w-color-primary);
-    --w-progress-stripe-dark: var(--w-color-primary-10);
-}
-
 .w-progress {
+    --color: var(--w-progress-color, var(--w-color-primary));
+    --bg: var(--w-progress-background, var(--w-color-primary-50));
+    --stripe-light: var(--w-progress-stripe-light, var(--w-color-primary));
+    --stripe-dark: var(--w-progress-stripe-dark, var(--w-color-primary-10));
+
     @include size('w100%', h10px);
     @include border-radius(xl);
     @include visibility(hidden);
     @include typography(bold, xs);
-    @include background(var(--w-progress-background));
+    @include background(var(--bg));
 
-    color: var(--w-progress-background);
+    color: var(--bg);
     
     &.medium {
         @include size(h15px);
@@ -39,13 +37,13 @@ body {
             background-size: 10px 10px;
             background-image: linear-gradient(
                 -45deg,
-                var(--w-progress-stripe-light) 25%,
-                var(--w-progress-stripe-dark) 25%,
-                var(--w-progress-stripe-dark) 50%,
-                var(--w-progress-stripe-light) 50%,
-                var(--w-progress-stripe-light) 75%,
-                var(--w-progress-stripe-dark) 75%,
-                var(--w-progress-stripe-dark)
+                var(--stripe-light) 25%,
+                var(--stripe-dark) 25%,
+                var(--stripe-dark) 50%,
+                var(--stripe-light) 50%,
+                var(--stripe-light) 75%,
+                var(--stripe-dark) 75%,
+                var(--stripe-dark)
             );
         }
 
@@ -69,7 +67,7 @@ body {
         @include size('h100%');
         @include border-radius(xl);
         @include layout(flex, center);
-        @include background(var(--w-progress-color));
+        @include background(var(--color));
 
         width: var(--w-progress-width);
     }

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,12 +38,12 @@ const style = color
                     children
                 </div>
                 <input
+                    {...rest}
                     type="radio"
-                    name={name}
                     value={item.value}
                     checked={item.selected}
                     disabled={item.disabled}
-                    {...rest}
+                    required={item.required}
                 />
                 <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,25 +8,31 @@
 
     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 = classNames([
+    const classes = $derived(classNames([
         styles.radio,
         inline && styles.inline,
         className
-    ])
+    ]))
 
-    const style = color
+    const style = $derived(color
         ? `--w-radio-color: ${color};`
         : null
+    )
 </script>
 
 <div class={classes} style={style}>
@@ -41,13 +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,13 +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