webcoreui 1.5.0-0 → 1.5.0-beta.2

package/components/Rating/Rating.astro

@@ -7,7 +7,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './rating.module.scss'
 
-interface Props extends RatingProps {}
+export type Props = RatingProps
 
 const {
     score,

package/components/Rating/Rating.svelte

@@ -6,6 +6,8 @@
     import { classNames } from '../../utils/classNames'
 
     import styles from './rating.module.scss'
+
+    export type Props = RatingProps
 
     const {
         score,
@@ -22,7 +24,7 @@
         emptyColor,
         size,
         className
-    }: RatingProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.rating,

package/components/Rating/Rating.tsx

@@ -6,6 +6,8 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 import { classNames } from '../../utils/classNames'
 
 import styles from './rating.module.scss'
+
+export type Props = RatingProps
 
 const Rating = ({
     score,
@@ -22,7 +24,7 @@ const Rating = ({
     emptyColor,
     size,
     className
-}: RatingProps) => {
+}: Props) => {
     const classes = classNames([
         styles.rating,
         outline && styles.outline,

package/components/Ribbon/Ribbon.astro

@@ -3,7 +3,7 @@ import type { RibbonProps } from './ribbon'
 
 import styles from './ribbon.module.scss'
 
-interface Props extends RibbonProps {}
+export type Props = RibbonProps
 
 const {
     offset,

package/components/Ribbon/Ribbon.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
-    import type { SvelteRibbonProps } from './ribbon'
+    import type { Snippet } from 'svelte'
+    import type { RibbonProps } from './ribbon'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './ribbon.module.scss'
 
+    export type Props = RibbonProps & {
+        children: Snippet
+    }
+
     const {
         offset,
         type,
         theme,
         className,
         children
-    }: SvelteRibbonProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.ribbon,

package/components/Ribbon/Ribbon.tsx

@@ -1,17 +1,21 @@
 import React from 'react'
-import type { ReactRibbonProps } from './ribbon'
+import type { RibbonProps } from './ribbon'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './ribbon.module.scss'
 
+export type Props = RibbonProps & {
+    children: React.ReactNode
+}
+
 const Ribbon = ({
     offset,
     type,
     theme,
     className,
     children
-}: ReactRibbonProps) => {
+}: Props) => {
     const classes = classNames([
         styles.ribbon,
         theme && styles[theme],

package/components/Ribbon/ribbon.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type RibbonProps = {
     offset?: number
     type?: 'folded' | null
@@ -12,11 +10,3 @@ export type RibbonProps = {
         | undefined
     className?: string
 }
-
-export type SvelteRibbonProps = {
-    children: Snippet
-} & RibbonProps
-
-export type ReactRibbonProps = {
-    children: React.ReactNode
-} & RibbonProps

package/components/Select/Select.astro

@@ -12,7 +12,7 @@ import ChevronDown from '../../icons/chevron-down.svg?raw'
 
 import styles from './select.module.scss'
 
-interface Props extends SelectProps {}
+export type Props = SelectProps
 
 const {
     name,

package/components/Select/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import type { SvelteSelectProps } from './select'
+    import type { SelectEventType, SelectProps } from './select'
 
     import Input from '../Input/Input.svelte'
     import List from '../List/List.svelte'
@@ -10,8 +10,8 @@
     import { classNames } from '../../utils/classNames'
     import { debounce } from '../../utils/debounce'
     import { on } from '../../utils/DOMUtils'
-    import { modal } from '../../utils/modal'
-    import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
+    import { modal, type ModalCallback } from '../../utils/modal'
+    import { closePopover, popover, type PopoverCallback, type PopoverPosition } from '../../utils/popover'
 
     import ChevronDown from '../../icons/chevron-down.svg?raw'
 
@@ -19,6 +19,11 @@
 
     import type { ListEventType, ListProps } from '../List/list'
 
+    export type Props = SelectProps & {
+        onChange?: (event: SelectEventType) => void
+        onClose?: (event: ModalCallback | PopoverCallback) => void
+    }
+
     const {
         name,
         value,
@@ -33,7 +38,7 @@
         onChange,
         onClose,
         ...rest
-    }: SvelteSelectProps = $props()
+    }: Props = $props()
 
     let popoverInstance: any
     let focusByTab = false

package/components/Select/Select.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect,useState } from 'react'
-import type { ReactSelectProps } from './select'
+import type { SelectEventType, SelectProps } from './select'
 
 import Input from '../Input/Input.tsx'
 import List from '../List/List.tsx'
@@ -9,8 +9,8 @@ import Popover from '../Popover/Popover.tsx'
 import { classNames } from '../../utils/classNames'
 import { debounce } from '../../utils/debounce'
 import { on } from '../../utils/DOMUtils'
-import { modal } from '../../utils/modal'
-import { closePopover, popover, type PopoverPosition } from '../../utils/popover'
+import { modal, type ModalCallback } from '../../utils/modal'
+import { closePopover, popover, type PopoverCallback, type PopoverPosition } from '../../utils/popover'
 
 import ChevronDown from '../../icons/chevron-down.svg?raw'
 
@@ -18,6 +18,11 @@ import styles from './select.module.scss'
 
 import type { ListEventType } from '../List/list'
 
+export type Props = SelectProps & {
+    onChange?: (event: SelectEventType) => void
+    onClose?: (event: ModalCallback | PopoverCallback) => void
+}
+
 const Select = ({
     name,
     value,
@@ -32,7 +37,7 @@ const Select = ({
     onChange,
     onClose,
     ...rest
-}: ReactSelectProps) => {
+}: Props) => {
     const inferredValue = rest.itemGroups.map(group => group.items)
         .flat()
         .find(item => item.value === value)?.name

package/components/Select/select.ts

@@ -1,5 +1,4 @@
-import type { ModalCallback } from '../../utils/modal'
-import type { PopoverCallback, PopoverPosition } from '../../utils/popover'
+import type { PopoverPosition } from '../../utils/popover'
 
 import type { ListEventType, ListProps } from '../List/list'
 
@@ -18,13 +17,3 @@ export type SelectProps = {
     updateValue?: boolean
     position?: PopoverPosition | 'modal'
 } & ListProps
-
-export type SvelteSelectProps = {
-    onChange?: (event: SelectEventType) => void
-    onClose?: (event: ModalCallback | PopoverCallback) => void
-} & SelectProps
-
-export type ReactSelectProps = {
-    onChange?: (event: SelectEventType) => void
-    onClose?: (event: ModalCallback | PopoverCallback) => void
-} & SelectProps

package/components/Sheet/Sheet.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { SheetProps } from './sheet'
 
 import Modal from '../Modal/Modal.astro'
@@ -7,7 +8,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './sheet.module.scss'
 
-interface Props extends SheetProps {}
+export type Props = SheetProps<HTMLAttributes<'dialog'>>
 
 const {
     position,

package/components/Sheet/Sheet.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
-    import type { SvelteSheetProps } from './sheet'
+    import type { SheetProps } from './sheet'
 
-    import Modal from '../Modal/Modal.svelte'
+    import Modal, { type Props as ModalProps } from '../Modal/Modal.svelte'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './sheet.module.scss'
 
+    export type Props = SheetProps & ModalProps
+
     const {
         position,
         className,
         children,
         ...rest
-    }: SvelteSheetProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.sheet,

package/components/Sheet/Sheet.tsx

@@ -1,18 +1,19 @@
-import React from 'react'
-import type { ReactSheetProps } from './sheet'
+import type { SheetProps } from './sheet'
 
-import Modal from '../Modal/Modal.tsx'
+import Modal, { type Props as ModalProps } from '../Modal/Modal.tsx'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './sheet.module.scss'
 
+export type Props = SheetProps & ModalProps
+
 const Sheet = ({
     position,
     className,
     children,
     ...rest
-}: ReactSheetProps) => {
+}: Props) => {
     const classes = classNames([
         styles.sheet,
         position && styles[position],

package/components/Sheet/sheet.ts

@@ -1,14 +1,7 @@
-import type {
-    ModalProps,
-    ReactModalProps,
-    SvelteModalProps
-} from '../Modal/modal'
+import type { ModalProps } from '../Modal/modal'
 
-export type SheetProps = {
+export type SheetProps<T extends object = object> = {
     position?: 'left'
         | 'top'
         | 'bottom'
-} & ModalProps
-
-export type SvelteSheetProps = SheetProps & SvelteModalProps
-export type ReactSheetProps = SheetProps & ReactModalProps
+} & ModalProps<T>

package/components/Sidebar/Sidebar.astro

@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './sidebar.module.scss'
 
-interface Props extends SidebarProps {}
+export type Props = SidebarProps
 
 const {
     groups,

package/components/Sidebar/Sidebar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteSidebarProps } from './sidebar'
+    import type { Snippet } from 'svelte'
+    import type { SidebarProps } from './sidebar'
 
     import Badge from '../Badge/Badge.svelte'
 
@@ -7,11 +8,15 @@
 
     import styles from './sidebar.module.scss'
 
+    export type Props = SidebarProps & {
+        children?: Snippet
+    }
+
     const {
         groups,
         children,
         className
-    }: SvelteSidebarProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.sidebar,

package/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ReactSidebarProps } from './sidebar'
+import type { SidebarProps } from './sidebar'
 
 import Badge from '../Badge/Badge.tsx'
 
@@ -7,11 +7,15 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './sidebar.module.scss'
 
+export type Props = SidebarProps & {
+    children?: React.ReactNode
+}
+
 const Sidebar = ({
     groups,
     children,
     className
-}: ReactSidebarProps) => {
+}: Props) => {
     const classes = classNames([
         styles.sidebar,
         className

package/components/Sidebar/sidebar.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 import type { ButtonProps } from '../Button/button'
 
 export type SidebarProps = {
@@ -17,11 +15,3 @@ export type SidebarProps = {
     }[]
     className?: string
 }
-
-export type SvelteSidebarProps = {
-    children?: Snippet
-} & SidebarProps
-
-export type ReactSidebarProps = {
-    children?: React.ReactNode
-} & SidebarProps

package/components/Skeleton/Skeleton.astro

@@ -5,7 +5,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './skeleton.module.scss'
 
-interface Props extends SkeletonProps {}
+export type Props = SkeletonProps
 
 const {
     animate = 'wave',

package/components/Skeleton/Skeleton.svelte

@@ -5,6 +5,8 @@
 
     import styles from './skeleton.module.scss'
 
+    export type Props = SkeletonProps
+
     const {
         animate = 'wave',
         type = 'rounded',
@@ -13,7 +15,7 @@
         color,
         waveColor,
         className
-    }: SkeletonProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         animate && styles[animate],

package/components/Skeleton/Skeleton.tsx

@@ -5,6 +5,8 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './skeleton.module.scss'
 
+export type Props = SkeletonProps
+
 const Skeleton = ({
     animate = 'wave',
     type = 'rounded',
@@ -13,7 +15,7 @@ const Skeleton = ({
     color,
     waveColor,
     className
-}: SkeletonProps) => {
+}: Props) => {
     const classes = classNames([
         animate && styles[animate],
         styles[type],

package/components/Slider/Slider.astro

@@ -5,7 +5,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './slider.module.scss'
 
-interface Props extends SliderProps {}
+export type Props = SliderProps
 
 const {
     min = 0,

package/components/Slider/Slider.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
-    import type { SvelteSliderProps } from './slider'
+    import type { SliderProps } from './slider'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './slider.module.scss'
 
+    import type { InputTarget } from '../Input/input'
+
+    export type Props = SliderProps & {
+        onChange?: (event: Event & InputTarget) => void
+    }
+
     const {
         min = 0,
         max = 100,
@@ -18,7 +24,7 @@
         className,
         onChange,
         ...rest
-    }: SvelteSliderProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.slider,

package/components/Slider/Slider.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
-import type { ReactSliderProps } from './slider'
+import type { SliderProps } from './slider'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './slider.module.scss'
 
+export type Props = SliderProps & {
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
 const Slider = ({
     min = 0,
     max = 100,
@@ -18,7 +22,7 @@ const Slider = ({
     className,
     onChange,
     ...rest
-}: ReactSliderProps) => {
+}: Props) => {
     const classes = classNames([
         styles.slider,
         className

package/components/Slider/slider.ts

@@ -1,5 +1,3 @@
-import type { InputTarget } from '../Input/input'
-
 export type SliderProps = {
     min?: number
     max?: number
@@ -13,11 +11,3 @@ export type SliderProps = {
     id?: string
     className?: string
 }
-
-export type SvelteSliderProps = {
-    onChange?: (event: Event & InputTarget) => void
-} & SliderProps
-
-export type ReactSliderProps = {
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-} & SliderProps

package/components/SpeedDial/SpeedDial.astro

@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './speeddial.module.scss'
 
-interface Props extends SpeedDialProps {}
+export type Props = SpeedDialProps
 
 const {
     items,

package/components/SpeedDial/SpeedDial.svelte

@@ -9,6 +9,8 @@
 
     import styles from './speeddial.module.scss'
 
+    export type Props = SpeedDialProps
+
     const {
         items,
         position,
@@ -18,7 +20,7 @@
         icon,
         triggerOnClick,
         className
-    }: SpeedDialProps = $props()
+    }: Props = $props()
 
     let show = $state(false)
 

package/components/SpeedDial/SpeedDial.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import type { SpeedDialProps } from './speeddial'
 
 import Button from '../Button/Button.tsx'
@@ -8,6 +8,8 @@ import { get, on } from '../../utils/DOMUtils'
 
 import styles from './speeddial.module.scss'
 
+export type Props = SpeedDialProps
+
 const SpeedDial = ({
     items,
     position,
@@ -17,7 +19,7 @@ const SpeedDial = ({
     icon,
     triggerOnClick,
     className
-}: SpeedDialProps) => {
+}: Props) => {
     const [show, setShow] = useState(false)
 
     const classes = classNames([

package/components/Spinner/Spinner.astro

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

package/components/Spinner/Spinner.svelte

@@ -4,6 +4,8 @@
     import { classNames } from '../../utils/classNames'
 
     import styles from './spinner.module.scss'
+
+    export type Props = SpinnerProps
 
     const {
         color,
@@ -11,7 +13,7 @@
         speed,
         size,
         dashArray
-    }: SpinnerProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.spinner,

package/components/Spinner/Spinner.tsx

@@ -4,6 +4,8 @@ import type { SpinnerProps } from './spinner'
 import { classNames } from '../../utils/classNames'
 
 import styles from './spinner.module.scss'
+
+export type Props = SpinnerProps
 
 const Spinner = ({
     color,
@@ -11,7 +13,7 @@ const Spinner = ({
     speed,
     size,
     dashArray
-}: SpinnerProps) => {
+}: Props) => {
     const classes = classNames([
         styles.spinner,
         dashArray && styles.dashed

package/components/Spoiler/Spoiler.astro

@@ -3,7 +3,7 @@ import type { SpoilerProps } from './spoiler'
 
 import styles from './spoiler.module.scss'
 
-interface Props extends SpoilerProps {}
+export type Props = SpoilerProps
 
 const {
     color,

package/components/Spoiler/Spoiler.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-    import type { SvelteSpoilerProps } from './spoiler'
+    import type { Snippet } from 'svelte'
+    import type { SpoilerProps } from './spoiler'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './spoiler.module.scss'
 
+    export type Props = SpoilerProps & {
+        children: Snippet
+    }
+
     const {
         color,
         animated = true,
@@ -12,7 +17,7 @@
         tooltip,
         tooltipPosition,
         children
-    }: SvelteSpoilerProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.spoiler,