webcoreui 1.4.0 → 1.5.0-beta.1

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,27 +10,31 @@
 
     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 = classNames([
+    const classes = $derived(classNames([
         styles.checkbox,
         label && subText && styles.col,
         className
-    ])
+    ]))
 
-    const style = color
+    const style = $derived(color
         ? `--w-checkbox-color: ${color};`
         : null
+    )
 </script>
 
 <label class={classes} style={style}>
@@ -39,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.module.scss

@@ -1,10 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-checkbox-color: var(--w-color-primary);
-}
-
 .checkbox {
+    --color: var(--w-checkbox-color, var(--w-color-primary));
+
     @include layout(inline-flex, sm);
     @include typography(hmd);
 
@@ -22,7 +20,7 @@ body {
         display: none;
 
         &:checked + span {
-            @include background(var(--w-checkbox-color));
+            @include background(var(--color));
 
             svg {
                 @include position(absolute, center);
@@ -48,7 +46,7 @@ body {
 
         display: inline-block;
         min-width: 15px;
-        border: 1px solid var(--w-checkbox-color);
+        border: 1px solid var(--color);
 
         svg {
             @include visibility(none);

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,18 +21,18 @@
         children,
         off,
         on
-    }: SvelteCollapsibleProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.collapsible,
         maxHeight && styles.animated,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
         maxHeight && `--w-collapsible-max-height: ${maxHeight};`
-    ])
+    ]))
 </script>
 
 <div

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.module.scss

@@ -1,8 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-collapsible-initial-height: 0;
-    --w-collapsible-max-height: 100%;
+.wrapper {
+    --initial-height: var(--w-collapsible-initial-height, 0);
+    --max-height: var(--w-collapsible-max-height, 100%);
 }
 
 .collapsible {
@@ -14,7 +14,7 @@ body {
     }
 
     &[data-toggled="true"] .wrapper {
-        max-height: var(--w-collapsible-max-height);
+        max-height: var(--max-height);
     }
 
     &.animated .wrapper {
@@ -24,6 +24,6 @@ body {
     .wrapper {
         @include visibility(hidden);
 
-        max-height: var(--w-collapsible-initial-height);
+        max-height: var(--initial-height);
     }
 }

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,24 +1,30 @@
 <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 = classNames([
+    const classes = $derived(classNames([
         styles.ctx,
         className
-    ])
+    ]))
 
     const showContext = (event: MouseEvent) => {
         event.preventDefault()
@@ -67,10 +73,12 @@
         }
     })
 
-    if (!context) {
-        // eslint-disable-next-line no-console, max-len
-        console.error('Missing "context" slot. Attach slot="context" to one of the children of your <ContextMenu> component.')
-    }
+    $effect(() => {
+        if (!context) {
+            // eslint-disable-next-line no-console, max-len
+            console.error('Missing "context" slot. Attach slot="context" to one of the children of your <ContextMenu> component.')
+        }
+    })
 </script>
 
 <svelte:element {...rest} this={element} class={classes} bind:this={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,12 +23,12 @@
         className,
         children,
         ...rest
-    }: SvelteCopyProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.copy,
         className
-    ])
+    ]))
 
     let copyButton: HTMLButtonElement | undefined = $state()
     let copiedButton: HTMLSpanElement | undefined = $state()

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>