webcoreui 1.4.0 → 1.5.0-beta.1

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,25 +8,29 @@
 
     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 = classNames([
+    const classes = $derived(classNames([
         styles.textarea,
         className
-    ])
+    ]))
 
-    const useLabel = !!(label || subText)
+    const useLabel = $derived(!!(label || subText))
 </script>
 
 <ConditionalWrapper
@@ -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,20 +21,20 @@
         primaryIcon,
         secondaryIcon,
         className
-    }: SvelteThemeSwitcherProps = $props()
+    }: Props = $props()
 
     let currentTheme = $state('')
     let toggled = false
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.switcher,
         toggle && styles.toggle,
         className
-    ])
+    ]))
 
-    const primaryTheme = themes[Object.keys(themes)[0]]
-    const secondaryTheme = themes[Object.keys(themes)[1]]
-    const useIcons = primaryIcon && secondaryIcon
+    const primaryTheme = $derived(themes[Object.keys(themes)[0]])
+    const secondaryTheme = $derived(themes[Object.keys(themes)[1]])
+    const useIcons = $derived(primaryIcon && secondaryIcon)
 
     const setTheme = (theme: string | number) => {
         if (typeof theme === 'number') {

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

@@ -1,16 +1,14 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-theme-switcher-size: 20px;
-}
-
 .switcher {
+    --size: var(--w-theme-switcher-size, 20px);
+
     @include layout(flex, sm);
 
     &.toggle {
         @include position(relative);
-        width: var(--w-theme-switcher-size);
-        height: var(--w-theme-switcher-size);
+        width: var(--size);
+        height: var(--size);
 
         .switch {
             position: absolute;
@@ -35,8 +33,8 @@ body {
     @include border-radius(max);
     @include position(relative);
 
-    width: var(--w-theme-switcher-size);
-    height: var(--w-theme-switcher-size);
+    width: var(--size);
+    height: var(--size);
     cursor: pointer;
     user-select: none;
 
@@ -53,8 +51,8 @@ body {
 
         svg, img {
             pointer-events: none;
-            width: var(--w-theme-switcher-size);
-            height: var(--w-theme-switcher-size);
+            width: var(--size);
+            height: var(--size);
         }
     }
 
@@ -71,7 +69,7 @@ body {
 
     &[data-active="true"]::after {
         @include layer(default);
-        width: calc(var(--w-theme-switcher-size) + 5px);
-        height: calc(var(--w-theme-switcher-size) + 5px);
+        width: calc(var(--size) + 5px);
+        height: calc(var(--size) + 5px);
     }
 }

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,21 +19,21 @@
         textColor,
         className,
         children
-    }: SvelteTimelineProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.timeline,
         theme && theme.split(' ').map(style => styles[style]),
         alternate && styles.alternate,
         centered && styles.centered,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         color && `--w-timeline-color: ${color};`,
         textColor && `--w-timeline-text-color: ${textColor};`,
         counter && `--w-timeline-counter: ${counter};`
-    ])
+    ]))
 </script>
 
 <ul class={classes} style={styleVariables || null}>

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

@@ -4,13 +4,11 @@
 $leftOffset: calc(((25px + 4px) / 2) - 1px);
 $rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
 
-body {
-    --w-timeline-color: var(--w-color-primary-50);
-    --w-timeline-text-color: var(--w-color-primary);
-    --w-timeline-counter: decimal;
-}
-
 .timeline {
+    --color: var(--w-timeline-color, var(--w-color-primary-50));
+    --text-color: var(--w-timeline-text-color, var(--w-color-primary));
+    --counter: var(--w-timeline-counter, decimal);
+
     @include layout(flex, default, column);
     @include spacing(pl-3xl, m0);
     @include position(relative);
@@ -22,7 +20,7 @@ body {
     &::before {
         @include position(absolute);
         @include size(w2px, 'h100%');
-        @include background(var(--w-timeline-color));
+        @include background(var(--color));
 
         content: '';
         left: $leftOffset
@@ -34,7 +32,7 @@ body {
 
     &.stroke > li::before {
         @include background(primary-70);
-        border: 2px solid var(--w-timeline-color);
+        border: 2px solid var(--color);
     }
 }
 

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,23 +1,28 @@
 <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 = classNames([
+    const classes = $derived(classNames([
         styles.item,
         icon && styles['with-icon'],
         className
-    ])
+    ]))
 </script>
 
 <li class={classes}>

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'],