webcoreui 1.5.0-0 → 1.5.0-beta.2

package/components/Tabs/Tabs.tsx

@@ -1,10 +1,14 @@
-import React, { useRef,useState } from 'react'
-import type { ReactTabsProps } from './tabs'
+import React, { useEffect, useRef, useState } from 'react'
+import type { TabsProps } from './tabs'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './tabs.module.scss'
 
+export type Props = TabsProps & {
+    children: React.ReactNode
+}
+
 const Tabs = ({
     items,
     theme,
@@ -12,9 +16,12 @@ const Tabs = ({
     even,
     className,
     children
-}: ReactTabsProps) => {
+}: Props) => {
     const tabContainer = useRef<HTMLDivElement>(null)
+    const usedInAstro = useRef(false)
+
     const [active, setActive] = useState('')
+    const hasActive = items.some(item => item.active)
 
     const classes = classNames([
         styles.tabs,
@@ -24,21 +31,25 @@ const Tabs = ({
         className
     ])
 
-    const setTab = (tab: string) => {
-        const tabs = tabContainer.current!.querySelectorAll('[data-tab]')
+    const setTab = (tab: string, index: number) => {
+        const contentChildren = usedInAstro.current
+            ? Array.from(tabContainer.current!.children[0].children) as HTMLElement[]
+            : Array.from(tabContainer.current!.children) as HTMLElement[]
 
-        Array.from(tabs).forEach((item: any) => {
-            item.dataset.active = false
+        const hasExplicitTabs = contentChildren.some((el: HTMLElement) => el.dataset.tab)
 
-            if (item.dataset.tab === tab) {
-                item.dataset.active = true
+        contentChildren.forEach((item: HTMLElement, i: number) => {
+            if (hasExplicitTabs) {
+                item.dataset.active = item.dataset.tab === tab ? 'true' : 'false'
+            } else {
+                item.dataset.active = i === index ? 'true' : 'false'
             }
         })
 
         setActive(tab)
     }
 
-    const isActive = (item: ReactTabsProps['items'][0]) => {
+    const isActive = (item: Props['items'][0]) => {
         if (!active) {
             return item.active ? 'true' : undefined
         }
@@ -46,6 +57,26 @@ const Tabs = ({
         return active === item.value ? 'true' : undefined
     }
 
+    if (!hasActive) {
+        items[0].active = true
+    }
+
+    useEffect(() => {
+        usedInAstro.current = tabContainer.current?.children[0]?.nodeName === 'ASTRO-SLOT'
+
+        const contentChildren = usedInAstro.current
+            ? Array.from(tabContainer.current!.children[0].children) as HTMLElement[]
+            : Array.from(tabContainer.current!.children) as HTMLElement[]
+
+        if (!contentChildren.some(element => element.dataset.active === 'true')) {
+            const index = items.findIndex(item => item.active)
+
+            if (contentChildren[index]) {
+                contentChildren[index].dataset.active = 'true'
+            }
+        }
+    }, [])
+
     return (
         <section className={classes}>
             <div className={styles.wrapper}>
@@ -55,7 +86,7 @@ const Tabs = ({
                             key={index}
                             disabled={item.disabled}
                             dangerouslySetInnerHTML={{ __html: item.label }}
-                            onClick={() => setTab(item.value)}
+                            onClick={() => setTab(item.value, index)}
                             data-active={isActive(item)}
                         />
                     ))}

package/components/Tabs/tabs.module.scss

@@ -110,13 +110,14 @@
 
     .content {
         @include spacing(mt-default);
-    }
-
-    [data-tab] {
-        @include visibility(none);
 
-        &[data-active="true"] {
-            @include visibility(block);
+        & > *:not(astro-slot),
+        & > astro-slot > * {
+            @include visibility(none);
+    
+            &[data-active="true"] {
+                @include visibility(block);
+            }
         }
     }
 }

package/components/Tabs/tabs.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type TabsProps = {
     items: {
         label: string
@@ -12,11 +10,3 @@ export type TabsProps = {
     even?: boolean
     className?: string
 }
-
-export type SvelteTabsProps = {
-    children: Snippet
-} & TabsProps
-
-export type ReactTabsProps = {
-    children: React.ReactNode
-} & TabsProps

package/components/Textarea/Textarea.astro

@@ -1,18 +1,17 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { TextareaProps } from './textarea'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import styles from './textarea.module.scss'
 
-interface Props extends TextareaProps {}
+export type Props = TextareaProps<HTMLAttributes<'textarea'>>
 
 const {
     label,
-    placeholder,
     subText,
     value = '',
-    disabled,
     className,
     ...rest
 } = Astro.props
@@ -39,9 +38,7 @@ const useLabel = !!(label || subText)
     </label>
 
     <textarea
-        placeholder={placeholder}
-        disabled={disabled}
-        class:list={classes}
         {...rest}
+        class:list={classes}
     >{value}</textarea>
 </ConditionalWrapper>

package/components/Textarea/Textarea.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { SvelteTextareaProps } from './textarea'
+    import type { HTMLTextareaAttributes } from 'svelte/elements'
+    import type { TextareaProps, TextareaTarget } from './textarea'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -7,18 +8,22 @@
 
     import styles from './textarea.module.scss'
 
+    export type Props = TextareaProps<HTMLTextareaAttributes> & {
+        onInput?: (event: Event & TextareaTarget) => void
+        onChange?: (event: Event & TextareaTarget) => void
+        onKeyUp?: (event: KeyboardEvent & TextareaTarget) => void
+    }
+
     const {
         label,
-        placeholder,
         subText,
         value = '',
-        disabled,
         className,
         onChange,
         onKeyUp,
         onInput,
         ...rest
-    }: SvelteTextareaProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.textarea,
@@ -37,13 +42,11 @@
         <div class={styles.label}>{label}</div>
     {/if}
     <textarea
-        placeholder={placeholder}
-        disabled={disabled}
+        {...rest}
         class={classes}
         oninput={onInput}
         onchange={onChange}
         onkeyup={onKeyUp}
-        {...rest}
     >{value}</textarea>
     {#if subText}
         <div class={styles.subtext}>

package/components/Textarea/Textarea.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ReactTextareaProps } from './textarea'
+import type { TextareaProps } from './textarea'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -7,15 +7,19 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './textarea.module.scss'
 
+export type Props = TextareaProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>> & {
+    onInput?: (event: React.InputEvent<HTMLTextAreaElement>) => void
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
+}
+
 const Textarea = ({
     label,
-    placeholder,
     subText,
     value = '',
-    disabled,
     className,
     ...rest
-}: ReactTextareaProps) => {
+}: Props) => {
     const classes = classNames([
         styles.textarea,
         className
@@ -39,11 +43,9 @@ const Textarea = ({
             </label>
         )}>
             <textarea
-                placeholder={placeholder}
-                disabled={disabled}
+                {...rest}
                 className={classes}
                 defaultValue={value}
-                {...rest}
             />
         </ConditionalWrapper>
     )

package/components/Textarea/textarea.ts

@@ -2,24 +2,9 @@ export type TextareaTarget = {
     currentTarget: HTMLTextAreaElement
 }
 
-export type TextareaProps = {
+export type TextareaProps<T extends object = object> = {
     label?: string
-    placeholder?: string
     subText?: string
     value?: string
-    disabled?: boolean
     className?: string
-    [key: string]: any
-}
-
-export type SvelteTextareaProps = {
-    onInput?: (event: Event & TextareaTarget) => void
-    onChange?: (event: Event & TextareaTarget) => void
-    onKeyUp?: (event: KeyboardEvent & TextareaTarget) => void
-} & TextareaProps
-
-export type ReactTextareaProps = {
-    onInput?: (event: React.InputEvent<HTMLTextAreaElement>) => void
-    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
-    onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
-} & TextareaProps
+} & T

package/components/ThemeSwitcher/ThemeSwitcher.astro

@@ -3,7 +3,7 @@ import type { ThemeSwitcherProps } from './themeswitcher'
 
 import styles from './themeswitcher.module.scss'
 
-interface Props extends ThemeSwitcherProps {}
+export type Props = ThemeSwitcherProps
 
 const {
     themes,

package/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
-    import type { SvelteThemeSwitcherProps } from './themeswitcher'
+    import { onMount, type Snippet } from 'svelte'
+    import type { ThemeSwitcherProps } from './themeswitcher'
 
     import { classNames } from '../../utils/classNames'
     import { getCookie, setCookie } from '../../utils/cookies'
@@ -8,6 +8,12 @@
 
     import styles from './themeswitcher.module.scss'
 
+    export type Props = ThemeSwitcherProps & {
+        primaryIcon?: Snippet
+        secondaryIcon?: Snippet
+        children?: Snippet
+    }
+
     const {
         themes,
         toggle,
@@ -15,7 +21,7 @@
         primaryIcon,
         secondaryIcon,
         className
-    }: SvelteThemeSwitcherProps = $props()
+    }: Props = $props()
 
     let currentTheme = $state('')
     let toggled = false

package/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import type { ReactThemeSwitcherProps } from './themeswitcher'
+import type { ThemeSwitcherProps } from './themeswitcher'
 
 import { classNames } from '../../utils/classNames'
 import { getCookie, setCookie } from '../../utils/cookies'
@@ -7,6 +7,11 @@ import { dispatch, listen } from '../../utils/event'
 
 import styles from './themeswitcher.module.scss'
 
+export type Props = ThemeSwitcherProps & {
+    primaryIcon?: React.ReactNode
+    secondaryIcon?: React.ReactNode
+}
+
 const ThemeSwitcher = ({
     themes,
     toggle,
@@ -14,7 +19,7 @@ const ThemeSwitcher = ({
     primaryIcon,
     secondaryIcon,
     className
-}: ReactThemeSwitcherProps) => {
+}: Props) => {
     const [currentTheme, setCurrentTheme] = useState('')
     const [toggled, setToggled] = useState(false)
 

package/components/ThemeSwitcher/themeswitcher.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type ThemeSwitcherProps = {
     themes: {
         [key: string]: string
@@ -8,14 +6,3 @@ export type ThemeSwitcherProps = {
     size?: number
     className?: string
 }
-
-export type SvelteThemeSwitcherProps = {
-    primaryIcon?: Snippet
-    secondaryIcon?: Snippet
-    children?: Snippet
-} & ThemeSwitcherProps
-
-export type ReactThemeSwitcherProps = {
-    primaryIcon?: React.ReactNode
-    secondaryIcon?: React.ReactNode
-} & ThemeSwitcherProps

package/components/Timeline/Timeline.astro

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

package/components/Timeline/Timeline.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-    import type { SvelteTimelineProps } from './timeline'
+    import type { Snippet } from 'svelte'
+    import type { TimelineProps } from './timeline'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './timeline.module.scss'
 
+    export type Props = TimelineProps & {
+        children: Snippet
+    }
+
     const {
         theme,
         counter,
@@ -14,7 +19,7 @@
         textColor,
         className,
         children
-    }: SvelteTimelineProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.timeline,

package/components/Timeline/Timeline.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
-import type { ReactTimelineProps } from './timeline'
+import type { TimelineProps } from './timeline'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './timeline.module.scss'
 
+export type Props = TimelineProps & {
+    children: React.ReactNode
+}
+
 const Timeline = ({
     theme,
     counter,
@@ -14,7 +18,7 @@ const Timeline = ({
     textColor,
     className,
     children
-}: ReactTimelineProps) => {
+}: Props) => {
     const classes = classNames([
         styles.timeline,
         theme && theme.split(' ').map(style => styles[style]),

package/components/Timeline/timeline.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type TimelineProps = {
     theme?: 'fill' | 'stroke' | 'stroke fill' | 'icons'
     alternate?: boolean
@@ -56,11 +54,3 @@ export type TimelineProps = {
     | 'upper-armenian'
     | 'upper-roman'
 }
-
-export type SvelteTimelineProps = {
-    children: Snippet
-} & TimelineProps
-
-export type ReactTimelineProps = {
-    children: React.ReactNode
-} & TimelineProps

package/components/TimelineItem/TimelineItem.astro

@@ -5,7 +5,7 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './timelineitem.module.scss'
 
-interface Props extends TimelineItemProps {}
+export type Props = TimelineItemProps
 
 const {
     title,

package/components/TimelineItem/TimelineItem.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
-    import type { SvelteTimelineItemProps } from './timelineitem'
+    import type { Snippet } from 'svelte'
+    import type { TimelineItemProps } from './timelineitem'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './timelineitem.module.scss'
 
+    export type Props = TimelineItemProps & {
+        children: Snippet
+    }
+
     const {
         title,
         titleTag = 'span',
         icon,
         className,
         children
-    }: SvelteTimelineItemProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.item,

package/components/TimelineItem/TimelineItem.tsx

@@ -1,17 +1,22 @@
-import React from 'react'
-import type { ReactTimelineItemProps } from './timelineitem'
+import React, { type JSX } from 'react'
+import type { TimelineItemProps } from './timelineitem'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './timelineitem.module.scss'
 
+export type Props = Omit<TimelineItemProps, 'titleTag'> & {
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+}
+
 const TimelineItem = ({
     title,
     TitleTag = 'span',
     icon,
     className,
     children
-}: ReactTimelineItemProps) => {
+}: Props) => {
     const classes = classNames([
         styles.item,
         icon && styles['with-icon'],

package/components/TimelineItem/timelineitem.ts

@@ -1,6 +1,3 @@
-import type { JSX } from 'react'
-import type { Snippet } from 'svelte'
-
 import type { IconProps } from '../Icon/icon'
 
 export type TimelineItemProps = {
@@ -9,12 +6,3 @@ export type TimelineItemProps = {
     icon?: IconProps['type'] | string
     className?: string
 }
-
-export type SvelteTimelineItemProps = {
-    children: Snippet
-} & TimelineItemProps
-
-export type ReactTimelineItemProps = {
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & Omit<TimelineItemProps, 'titleTag'>

package/components/Toast/Toast.astro

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

package/components/Toast/Toast.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
-    import type { SvelteToastProps } from './toast'
+    import type { ToastProps } from './toast'
 
-    import Alert from '../Alert/Alert.svelte'
+    import Alert, { type Props as AlertProps } from '../Alert/Alert.svelte'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './toast.module.scss'
 
+    export type Props = ToastProps<AlertProps>
+
     const {
         position,
         className,
         icon,
         children,
         ...rest
-    }: SvelteToastProps = $props()
+    }: Props = $props()
 
     const classes = $derived(classNames([
         styles.toast,

package/components/Toast/Toast.tsx

@@ -1,19 +1,20 @@
-import React from 'react'
-import type { ReactToastProps } from './toast'
+import type { ToastProps } from './toast'
 
-import Alert from '../Alert/Alert.tsx'
+import Alert, { type Props as AlertProps } from '../Alert/Alert.tsx'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './toast.module.scss'
 
+export type Props = ToastProps<React.HTMLAttributes<HTMLElement>> & AlertProps
+
 const Toast = ({
     icon,
     position,
     className,
     children,
     ...rest
-}: ReactToastProps) => {
+}: Props) => {
     const classes = classNames([
         styles.toast,
         className

package/components/Toast/toast.ts

@@ -1,18 +1,10 @@
-import type {
-    AlertProps,
-    ReactAlertProps,
-    SvelteAlertProps
-} from '../Alert/alert'
+import type { AlertProps } from '../Alert/alert'
 
-export type ToastProps = {
+export type ToastProps<T extends object = object> = {
     position?: 'bottom-left'
         | 'top-left'
         | 'top-right'
         | 'bottom-full'
         | 'top-full'
         | null
-    [key: string]: any
-} & AlertProps
-
-export type SvelteToastProps = ToastProps & SvelteAlertProps
-export type ReactToastProps = ToastProps & ReactAlertProps
+} & AlertProps<T>