webcoreui 1.4.0 → 1.5.0-beta.1

package/components/List/List.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ListEventType,SvelteListProps } from './list'
+    import type { ListEventType, ListProps } from './list'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
     import Input from '../Input/Input.svelte'
@@ -10,6 +10,10 @@
 
     import styles from './list.module.scss'
 
+    export type Props = ListProps & {
+        onSelect?: (event: ListEventType) => void
+    }
+
     let {
         showSearchBar,
         showSearchBarIcon,
@@ -22,25 +26,25 @@
         secondary,
         itemGroups = $bindable([]),
         onSelect
-    }: SvelteListProps = $props()
+    }: Props = $props()
 
     let searchValue = $state('')
     let numberOfResults = $state(1)
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.list,
         (secondary && !showSearchBar) && styles.secondary,
         !showSearchBar && styles.container,
         className
-    ])
+    ]))
 
-    const wrapperClasses = classNames([
+    const wrapperClasses = $derived(classNames([
         styles.container,
         secondary && styles.secondary,
         wrapperClassName
-    ])
+    ]))
 
-    const search = (event: InputEvent) => {
+    const search = (event: Event) => {
         searchValue = (event.target as HTMLInputElement).value.toLowerCase()
 
         numberOfResults = itemGroups
@@ -49,7 +53,7 @@
             .filter(item => {
                 return item.value?.toLowerCase().includes(searchValue)
                     || item.subText?.toLowerCase().includes(searchValue)
-                    || item.name.toLowerCase().includes(searchValue)
+                    || item.name?.toLowerCase().includes(searchValue)
             }).length
     }
 
@@ -118,7 +122,7 @@
                     data-hidden={(
                         !item.value?.toLowerCase().includes(searchValue)
                         && !item.subText?.toLowerCase().includes(searchValue)
-                        && !item.name.toLowerCase().includes(searchValue)
+                        && !item.name?.toLowerCase().includes(searchValue)
                     ) ? true : null}
                     onclick={item.disabled ? null : select}
                     onkeyup={item.disabled ? null : selectByKey}

package/components/List/List.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { ListEventType, ReactListProps } from './list'
+import type { ListEventType, ListProps } from './list'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 import Input from '../Input/Input.tsx'
@@ -10,6 +10,10 @@ import searchIcon from '../../icons/search.svg?raw'
 
 import styles from './list.module.scss'
 
+export type Props = ListProps & {
+    onSelect?: (event: ListEventType) => void
+}
+
 const List = ({
     showSearchBar,
     showSearchBarIcon,
@@ -22,7 +26,7 @@ const List = ({
     secondary,
     itemGroups,
     onSelect
-}: ReactListProps) => {
+}: Props) => {
     const [searchValue, setSearchValue] = useState('')
     const [numberOfResults, setNumberOfResults] = useState(1)
     const [itemGroupsWithActive, setItemGroups] = useState(itemGroups)
@@ -44,7 +48,7 @@ const List = ({
         ? { maxHeight } as React.CSSProperties
         : undefined
 
-    const search = (event: React.FormEvent<HTMLInputElement>) => {
+    const search = (event: React.InputEvent<HTMLInputElement>) => {
         const value = (event.target as HTMLInputElement).value.toLowerCase()
 
         setSearchValue(value)
@@ -55,7 +59,7 @@ const List = ({
                 .filter(item => {
                     return item.value?.toLowerCase().includes(value)
                         || item.subText?.toLowerCase().includes(value)
-                        || item.name.toLowerCase().includes(value)
+                        || item.name?.toLowerCase().includes(value)
                 }).length
         )
     }
@@ -107,7 +111,7 @@ const List = ({
             </div>
         )}>
             <ul className={classes} id={id} style={style}>
-                {itemGroupsWithActive.map((group: ReactListProps['itemGroups'][0], index) => (
+                {itemGroupsWithActive.map((group: Props['itemGroups'][0], index) => (
                     <React.Fragment key={index}>
                         {group.title && (
                             <li className={styles.title}
@@ -127,7 +131,7 @@ const List = ({
                                 data-hidden={(
                                     !item.value?.toLowerCase().includes(searchValue)
                                     && !item.subText?.toLowerCase().includes(searchValue)
-                                    && !item.name.toLowerCase().includes(searchValue)
+                                    && !item.name?.toLowerCase().includes(searchValue)
                                 ) ? true : null}
                                 onClick={item.disabled ? undefined : select}
                                 onKeyUp={item.disabled ? undefined : selectByKey}

package/components/List/list.ts

@@ -30,11 +30,3 @@ export type ListProps = {
         }[]
     }[]
 }
-
-export type SvelteListProps = {
-    onSelect?: (event: ListEventType) => void
-} & ListProps
-
-export type ReactListProps = {
-    onSelect?: (event: ListEventType) => void
-} & ListProps

package/components/Masonry/Masonry.astro

@@ -3,7 +3,7 @@ import type { MasonryProps } from './masonry'
 
 import styles from './masonry.module.scss'
 
-interface Props extends MasonryProps {}
+export type Props = MasonryProps
 
 const {
     items,

package/components/Masonry/Masonry.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-    import type { SvelteMasonryProps } from './masonry'
+    import type { SvelteComponent } from 'svelte'
+    import type { Items, MasonryProps } from './masonry'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './masonry.module.scss'
 
+    export type Props = Omit<MasonryProps, 'items'> & {
+        items: Items<typeof SvelteComponent<any>>[]
+    }
+
     const {
         items,
         element = 'section',
@@ -12,24 +17,24 @@
         columns = 3,
         sequential,
         className
-    }: SvelteMasonryProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.masonry,
         className
-    ])
+    ]))
 
-    const componentProps = {
+    const componentProps = $derived({
         class: classes,
         style: gap ? `--w-masonry-gap: ${gap};` : null
-    }
+    })
 
-    const chunkSize = Math.ceil(items.length / columns!)
-    const columnGroups = Array.from({ length: columns! }, (_, i) => {
+    const chunkSize = $derived(Math.ceil(items.length / columns!))
+    const columnGroups = $derived(Array.from({ length: columns! }, (_, i) => {
         return sequential
             ? items.slice(i * chunkSize, (i + 1) * chunkSize)
             : items.filter((_, index) => index % columns! === i)
-    })
+    }))
 </script>
 
 

package/components/Masonry/Masonry.tsx

@@ -1,10 +1,14 @@
-import React, { type JSX } from 'react'
-import type { ReactMasonryProps } from './masonry'
+import React, { type FC, type JSX } from 'react'
+import type { Items,MasonryProps } from './masonry'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './masonry.module.scss'
 
+export type Props = Omit<MasonryProps, 'items'> & {
+    items: Items<FC<any>>[]
+}
+
 const Masonry = ({
     items,
     element = 'section',
@@ -12,7 +16,7 @@ const Masonry = ({
     columns = 3,
     sequential,
     className
-}: ReactMasonryProps) => {
+}: Props) => {
     const classes = classNames([
         styles.masonry,
         className

package/components/Masonry/masonry.module.scss

@@ -1,18 +1,16 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-masonry-gap: 5px;
-}
-
 .masonry {
+    --gap: var(--w-masonry-gap, 5px);
+
     @include layout(flex);
 
-    gap: var(--w-masonry-gap);
+    gap: var(--gap);
     overflow-x: auto;
 
     .column {
         @include layout(flex, column);
 
-        gap: var(--w-masonry-gap);
+        gap: var(--gap);
     }
 }

package/components/Masonry/masonry.ts

@@ -1,7 +1,4 @@
-import type { FC } from 'react'
-import type { SvelteComponent } from 'svelte'
-
-type ChildrenProps<ComponentType> = {
+export type ChildrenProps<ComponentType> = {
     component: ComponentType
     children?: string | number
     props?: {
@@ -9,7 +6,7 @@ type ChildrenProps<ComponentType> = {
     }
 } | string | number
 
-type Items<ComponentType> = {
+export type Items<ComponentType> = {
     component?: ComponentType;
     children?: ChildrenProps<ComponentType>
     html?: string
@@ -26,11 +23,3 @@ export type MasonryProps = {
     sequential?: boolean
     className?: string
 }
-
-export type SvelteMasonryProps = {
-    items: Items<typeof SvelteComponent<any>>[]
-} & Omit<MasonryProps, 'items'>
-
-export type ReactMasonryProps = {
-    items: Items<FC<any>>[]
-} & Omit<MasonryProps, 'items'>

package/components/Menu/Menu.astro

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

package/components/Menu/Menu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteMenuProps } from './menu'
+    import type { Snippet } from 'svelte'
+    import type { MenuProps } from './menu'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -7,6 +8,10 @@
 
     import styles from './menu.module.scss'
 
+    export type Props = MenuProps & {
+        children?: Snippet
+    }
+
     const {
         items,
         logo,
@@ -14,21 +19,22 @@
         className,
         wrapperClassName,
         children
-    }: SvelteMenuProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.menu,
         className
-    ])
+    ]))
 
-    const containerClasses = classNames([
+    const containerClasses = $derived(classNames([
         styles.container,
         wrapperClassName
-    ])
+    ]))
 
-    const wrapMenu = (logo?.url || logo?.html)
+    const wrapMenu = $derived((logo?.url || logo?.html)
         && items?.length
         && children
+    )
 
     let active = $state(false)
 

package/components/Menu/Menu.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import type { ReactMenuProps } from './menu'
+import type { MenuProps } from './menu'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -7,6 +7,10 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './menu.module.scss'
 
+export type Props = MenuProps & {
+    children?: React.ReactNode
+}
+
 const Menu = ({
     items,
     logo,
@@ -15,7 +19,7 @@ const Menu = ({
     wrapperClassName,
     children
 // eslint-disable-next-line complexity
-}: ReactMenuProps) => {
+}: Props) => {
     const [active, setActive] = useState(false)
 
     const classes = classNames([

package/components/Menu/menu.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 import type { ButtonProps } from '../Button/button'
 
 export type MenuProps = {
@@ -20,11 +18,3 @@ export type MenuProps = {
     className?: string
     wrapperClassName?: string
 }
-
-export type SvelteMenuProps = {
-    children?: Snippet
-} & MenuProps
-
-export type ReactMenuProps = {
-    children?: React.ReactNode
-} & MenuProps

package/components/Modal/Modal.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { ModalProps } from './modal'
 
 import Button from '../Button/Button.astro'
@@ -11,7 +12,7 @@ import warning from '../../icons/warning.svg?raw'
 
 import styles from './modal.module.scss'
 
-interface Props extends ModalProps {}
+export type Props = ModalProps<HTMLAttributes<'dialog'>>
 
 const iconMap = {
     info,
@@ -28,7 +29,6 @@ const {
     closeOnOverlay = true,
     transparent,
     theme,
-    id,
     className,
     ...rest
 } = Astro.props
@@ -49,7 +49,6 @@ const classes = [
 
 <dialog
     class:list={classes}
-    id={id}
     data-close={close.length ? close : undefined}
     {...rest}
 >

package/components/Modal/Modal.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-    import type { SvelteModalProps } from './modal'
+    import type { Snippet } from 'svelte'
+    import type { HTMLDialogAttributes } from 'svelte/elements'
+    import type { ModalProps } from './modal'
 
     import Button from '../Button/Button.svelte'
 
@@ -13,6 +15,10 @@
 
     import styles from './modal.module.scss'
 
+    export type Props = ModalProps<HTMLDialogAttributes> & {
+        children?: Snippet
+    }
+
     const {
         title,
         subTitle,
@@ -21,11 +27,10 @@
         closeOnOverlay = true,
         transparent,
         theme,
-        id,
         className,
         children,
         ...rest
-    }: SvelteModalProps = $props()
+    }: Props = $props()
 
     const iconMap = {
         info,
@@ -34,23 +39,22 @@
         alert
     }
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.modal,
         transparent && styles.transparent,
         theme && styles[theme],
         className
-    ])
+    ]))
 
-    const close = [
+    const close = $derived([
         showCloseIcon && 'icon',
         closeOnEsc && 'esc',
         closeOnOverlay && 'overlay'
-    ].filter(Boolean).join(',')
+    ].filter(Boolean).join(','))
 </script>
 
 <dialog
     class={classes}
-    id={id}
     data-close={close.length ? close : undefined}
     {...rest}
 >

package/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ReactModalProps } from './modal'
+import type { ModalProps } from './modal'
 
 import Button from '../Button/Button.tsx'
 
@@ -13,6 +13,10 @@ import warning from '../../icons/warning.svg?raw'
 
 import styles from './modal.module.scss'
 
+export type Props = ModalProps<React.DialogHTMLAttributes<HTMLDialogElement>> & {
+    children?: React.ReactNode
+}
+
 const iconMap = {
     info,
     success,
@@ -28,11 +32,10 @@ const Modal = ({
     closeOnOverlay = true,
     transparent,
     theme,
-    id,
     className,
     children,
     ...rest
-}: ReactModalProps) => {
+}: Props) => {
     const classes = classNames([
         styles.modal,
         theme && styles[theme],
@@ -50,7 +53,6 @@ const Modal = ({
         <React.Fragment>
             <dialog
                 className={classes}
-                id={id}
                 data-close={close.length ? close : undefined}
                 {...rest}
             >

package/components/Modal/modal.module.scss

@@ -36,7 +36,7 @@
     }
 
     &.info {
-        @include border(info);
+        @include border(3px, top, info-accent);
 
         .title {
             @include typography(info);
@@ -44,7 +44,7 @@
     }
 
     &.success {
-        @include border(success);
+        @include border(3px, top, success-accent);
 
         .title {
             @include typography(success);
@@ -52,7 +52,7 @@
     }
 
     &.warning {
-        @include border(warning);
+        @include border(3px, top, warning-accent);
 
         .title {
             @include typography(warning);
@@ -60,7 +60,7 @@
     }
 
     &.alert {
-        @include border(alert);
+        @include border(3px, top, alert-accent);
 
         .title {
             @include typography(alert);
@@ -87,7 +87,7 @@
     }
 
     .subTitle {
-        @include typography(primary-20);
+        @include typography(primary-20, hmd);
         @include spacing(mb-xs);
     }
 }

package/components/Modal/modal.ts

@@ -1,25 +1,13 @@
-import type { Snippet } from 'svelte'
-
-export type ModalProps = {
+export type ModalProps<T extends object = object> = {
     title?: string
     subTitle?: string
     showCloseIcon?: boolean
     closeOnEsc?: boolean
     closeOnOverlay?: boolean
     transparent?: boolean
-    id?: string
     className?: string
     theme?: 'info'
         | 'success'
         | 'warning'
         | 'alert'
-    [key: string]: any
-}
-
-export type SvelteModalProps = {
-    children: Snippet
-} & ModalProps
-
-export type ReactModalProps = {
-    children?: React.ReactNode
-} & ModalProps
+} & T

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}
                 />
             )
         )}