sv5ui 2.0.0 → 2.2.0

package/dist/Tabs/Tabs.svelte

@@ -1,188 +0,0 @@
-<script lang="ts" module>
-    import type { TabsProps, TabsItem } from './tabs.types.js'
-
-    export type Props = TabsProps
-</script>
-
-<script lang="ts">
-    import { Tabs } from 'bits-ui'
-    import { tick, untrack } from 'svelte'
-    import { tabsVariants, tabsDefaults } from './tabs.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-
-    const config = getComponentConfig('tabs', tabsDefaults)
-
-    let {
-        ref = $bindable(null),
-        items = [],
-        value = $bindable(),
-        defaultValue,
-        onValueChange,
-        variant = config.defaultVariants.variant ?? 'pill',
-        color = config.defaultVariants.color ?? 'primary',
-        size = config.defaultVariants.size ?? 'md',
-        orientation = config.defaultVariants.orientation ?? 'horizontal',
-        activationMode = 'automatic',
-        disabled = false,
-        loop = true,
-        content: showContent = true,
-        ui,
-        class: className,
-        leading,
-        label: labelSlot,
-        trailing,
-        body: bodySlot,
-        ...restProps
-    }: Props = $props()
-
-    // Initialize value if not provided (intentionally reads initial values only)
-    if (value === undefined) {
-        value = untrack(
-            () => defaultValue ?? (items.length > 0 ? (items[0].value ?? '0') : undefined)
-        )
-    }
-
-    let listEl: HTMLElement | null = $state(null)
-    let indicatorStyle = $state('')
-
-    const variantSlots = $derived(tabsVariants({ variant, color, size, orientation }))
-
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
-        list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
-        indicator: variantSlots.indicator({
-            class: [config.slots.indicator, ui?.indicator]
-        }),
-        trigger: variantSlots.trigger({ class: [config.slots.trigger, ui?.trigger] }),
-        leadingIcon: variantSlots.leadingIcon({
-            class: [config.slots.leadingIcon, ui?.leadingIcon]
-        }),
-        label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
-        content: variantSlots.content({ class: [config.slots.content, ui?.content] })
-    })
-
-    let rafId = 0
-
-    function getItemValue(item: TabsItem, index: number): string {
-        return item.value ?? String(index)
-    }
-
-    function getTriggerClass(item: TabsItem) {
-        if (!item.ui?.trigger && !item.class) return classes.trigger
-        return variantSlots.trigger({
-            class: [config.slots.trigger, ui?.trigger, item.ui?.trigger, item.class]
-        })
-    }
-
-    function getIconClass(item: TabsItem) {
-        if (!item.ui?.leadingIcon) return classes.leadingIcon
-        return variantSlots.leadingIcon({
-            class: [config.slots.leadingIcon, ui?.leadingIcon, item.ui?.leadingIcon]
-        })
-    }
-
-    function getLabelClass(item: TabsItem) {
-        if (!item.ui?.label) return classes.label
-        return variantSlots.label({
-            class: [config.slots.label, ui?.label, item.ui?.label]
-        })
-    }
-
-    function updateIndicator() {
-        if (!listEl) return
-        const activeTrigger = listEl.querySelector('[data-state="active"]') as HTMLElement
-        if (!activeTrigger) {
-            indicatorStyle = 'opacity: 0;'
-            return
-        }
-
-        if (orientation === 'horizontal') {
-            indicatorStyle = `left: ${activeTrigger.offsetLeft}px; width: ${activeTrigger.offsetWidth}px;`
-        } else {
-            indicatorStyle = `top: ${activeTrigger.offsetTop}px; height: ${activeTrigger.offsetHeight}px;`
-        }
-    }
-
-    function scheduleIndicatorUpdate() {
-        cancelAnimationFrame(rafId)
-        rafId = requestAnimationFrame(updateIndicator)
-    }
-
-    // Update indicator on mount and when dependencies change
-    $effect(() => {
-        void value
-        void orientation
-        void items
-        tick().then(updateIndicator)
-    })
-
-    // Handle resize with rAF debouncing
-    $effect(() => {
-        if (!listEl) return
-
-        const observer = new ResizeObserver(scheduleIndicatorUpdate)
-        observer.observe(listEl)
-
-        return () => {
-            observer.disconnect()
-            cancelAnimationFrame(rafId)
-        }
-    })
-</script>
-
-<Tabs.Root
-    {...restProps}
-    bind:ref
-    bind:value
-    {onValueChange}
-    {orientation}
-    {activationMode}
-    {disabled}
-    {loop}
-    class={classes.root}
->
-    <Tabs.List bind:ref={listEl} class={classes.list}>
-        <div class={classes.indicator} style={indicatorStyle} aria-hidden="true"></div>
-
-        {#each items as item, index (item.value ?? index)}
-            {@const itemValue = getItemValue(item, index)}
-            {@const active = value === itemValue}
-            <Tabs.Trigger value={itemValue} disabled={item.disabled} class={getTriggerClass(item)}>
-                {#if leading}
-                    {@render leading({ item, index, active })}
-                {:else if item.icon}
-                    <Icon name={item.icon} class={getIconClass(item)} />
-                {/if}
-
-                {#if item.label || labelSlot}
-                    <span class={getLabelClass(item)}>
-                        {#if labelSlot}
-                            {@render labelSlot({ item, index, active })}
-                        {:else}
-                            {item.label}
-                        {/if}
-                    </span>
-                {/if}
-
-                {#if trailing}
-                    {@render trailing({ item, index, active })}
-                {/if}
-            </Tabs.Trigger>
-        {/each}
-    </Tabs.List>
-
-    {#if showContent}
-        {#each items as item, index (item.value ?? index)}
-            {@const itemValue = getItemValue(item, index)}
-            {@const active = value === itemValue}
-            <Tabs.Content value={itemValue} class={classes.content}>
-                {#if bodySlot}
-                    {@render bodySlot({ item, index, active })}
-                {:else if item.content}
-                    {item.content}
-                {/if}
-            </Tabs.Content>
-        {/each}
-    {/if}
-</Tabs.Root>

package/dist/Textarea/Textarea.svelte

@@ -1,215 +0,0 @@
-<script lang="ts" module>
-    import type { TextareaProps } from './textarea.types.js'
-
-    export type Props = TextareaProps
-</script>
-
-<script lang="ts">
-    import { textareaVariants, textareaDefaults } from './textarea.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import { getContext } from 'svelte'
-    import {
-        fieldGroupVariantWithRoot,
-        type FieldGroupVariantProps
-    } from '../FieldGroup/field-group.variants.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-
-    const config = getComponentConfig('textarea', textareaDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        ui,
-        id,
-        name,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        size,
-        highlight,
-        loading = false,
-        loadingIcon = icons.loading,
-        disabled = false,
-        icon,
-        leadingIcon,
-        trailingIcon,
-        trailing = false,
-        leadingSlot,
-        trailingSlot,
-        autoresize = false,
-        rows = 3,
-        maxrows = 0,
-        class: className,
-        onblur,
-        oninput,
-        onchange,
-        onfocus,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    function handleBlur(event: FocusEvent & { currentTarget: HTMLTextAreaElement }) {
-        emit.onBlur()
-        onblur?.(event)
-    }
-    function handleInput(event: Event & { currentTarget: HTMLTextAreaElement }) {
-        emit.onInput()
-        oninput?.(event)
-    }
-    function handleChange(event: Event & { currentTarget: HTMLTextAreaElement }) {
-        emit.onChange()
-        onchange?.(event)
-    }
-    function handleFocus(event: FocusEvent & { currentTarget: HTMLTextAreaElement }) {
-        emit.onFocus()
-        onfocus?.(event)
-    }
-
-    const fieldGroupContext = getContext<
-        | {
-              orientation: NonNullable<FieldGroupVariantProps['orientation']>
-              size: NonNullable<FieldGroupVariantProps['size']>
-          }
-        | undefined
-    >('fieldGroup')
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedSize = $derived(
-        size ?? formFieldContext?.size ?? fieldGroupContext?.size ?? config.defaultVariants.size
-    )
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const resolvedHighlight = $derived(highlight ?? hasError)
-    const fieldGroupClass = $derived(
-        fieldGroupContext
-            ? fieldGroupVariantWithRoot.fieldGroup[fieldGroupContext.orientation ?? 'horizontal']
-            : undefined
-    )
-
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-
-    const isLeading = $derived((!!icon && !trailing) || (loading && !trailing) || !!leadingIcon)
-    const isTrailing = $derived((!!icon && trailing) || (loading && trailing) || !!trailingIcon)
-
-    const leadingIconName = $derived(
-        loading && isLeading
-            ? loadingIcon
-            : leadingIcon || (isLeading && !trailing ? icon : undefined)
-    )
-    const trailingIconName = $derived(
-        loading && isTrailing ? loadingIcon : trailingIcon || (trailing ? icon : undefined)
-    )
-
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const variantSlots = $derived(
-        textareaVariants({
-            variant,
-            color: resolvedColor,
-            size: resolvedSize,
-            leading: isLeading,
-            trailing: isTrailing,
-            loading,
-            highlight: resolvedHighlight,
-            autoresize
-        })
-    )
-    const classes = $derived({
-        root: variantSlots.root({
-            class: [config.slots.root, fieldGroupClass?.root, className, ui?.root]
-        }),
-        base: variantSlots.base({
-            class: [config.slots.base, fieldGroupClass?.base, ui?.base]
-        }),
-        leading: variantSlots.leading({ class: [config.slots.leading, ui?.leading] }),
-        leadingIcon: variantSlots.leadingIcon({
-            class: [config.slots.leadingIcon, ui?.leadingIcon]
-        }),
-        trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
-        trailingIcon: variantSlots.trailingIcon({
-            class: [config.slots.trailingIcon, ui?.trailingIcon]
-        })
-    })
-
-    let cachedMaxHeight = $state(0)
-
-    $effect(() => {
-        if (!autoresize || !ref || maxrows <= 0) {
-            cachedMaxHeight = 0
-            return
-        }
-
-        const style = window.getComputedStyle(ref)
-        cachedMaxHeight =
-            parseFloat(style.lineHeight) * maxrows +
-            parseFloat(style.paddingTop) +
-            parseFloat(style.paddingBottom)
-    })
-
-    $effect(() => {
-        if (!autoresize || !ref) return
-
-        void value
-
-        ref.style.height = 'auto'
-        const scrollHeight = ref.scrollHeight
-
-        if (cachedMaxHeight > 0 && scrollHeight > cachedMaxHeight) {
-            ref.style.height = `${cachedMaxHeight}px`
-            ref.style.overflowY = 'auto'
-        } else {
-            ref.style.height = `${scrollHeight}px`
-            ref.style.overflowY = 'hidden'
-        }
-    })
-</script>
-
-<div class={classes.root}>
-    {#if leadingSlot}
-        <span class={classes.leading}>
-            {@render leadingSlot()}
-        </span>
-    {:else if isLeading && leadingIconName}
-        <span class={classes.leading}>
-            <Icon name={leadingIconName} class={classes.leadingIcon} />
-        </span>
-    {/if}
-
-    <textarea
-        {...restProps}
-        bind:this={ref}
-        bind:value
-        {rows}
-        id={resolvedId}
-        name={resolvedName}
-        disabled={disabled || loading}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={resolvedHighlight ? true : undefined}
-        class={classes.base}
-        onblur={handleBlur}
-        oninput={handleInput}
-        onchange={handleChange}
-        onfocus={handleFocus}
-    ></textarea>
-
-    {#if trailingSlot}
-        <span class={classes.trailing}>
-            {@render trailingSlot()}
-        </span>
-    {:else if isTrailing && trailingIconName}
-        <span class={classes.trailing}>
-            <Icon name={trailingIconName} class={classes.trailingIcon} />
-        </span>
-    {/if}
-</div>

package/dist/ThemeModeButton/ThemeModeButton.svelte

@@ -1,73 +0,0 @@
-<script lang="ts" module>
-    import type { ThemeModeButtonProps } from './theme-mode-button.types.js'
-
-    export type Props = ThemeModeButtonProps
-</script>
-
-<script lang="ts">
-    import { toggleMode, mode } from 'mode-watcher'
-    import {
-        themeModeButtonVariants,
-        themeModeButtonDefaults
-    } from './theme-mode-button.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Button from '../Button/Button.svelte'
-
-    const config = getComponentConfig('themeModeButton', themeModeButtonDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ui,
-        color = config.defaultVariants.color ?? 'surface',
-        variant = config.defaultVariants.variant ?? 'ghost',
-        size,
-        lightIcon = icons.light,
-        darkIcon = icons.dark,
-        loading = false,
-        disabled = false,
-        square = true,
-        block = false,
-        children,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const isDark = $derived(mode.current === 'dark')
-
-    const slots = $derived(themeModeButtonVariants())
-
-    const iconName = $derived(isDark ? lightIcon : darkIcon)
-</script>
-
-{#if children}
-    <Button
-        {color}
-        {variant}
-        {size}
-        {loading}
-        {disabled}
-        {square}
-        {block}
-        class={slots.base({ class: [config.slots.base, className, ui?.base] })}
-        aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-        onclick={toggleMode}
-        {...restProps}
-    >
-        {@render children({ isDark })}
-    </Button>
-{:else}
-    <Button
-        {color}
-        {variant}
-        {size}
-        {loading}
-        {disabled}
-        {square}
-        {block}
-        icon={iconName}
-        class={slots.base({ class: [config.slots.base, className, ui?.base] })}
-        aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-        onclick={toggleMode}
-        {...restProps}
-    />
-{/if}

package/dist/Timeline/Timeline.svelte

@@ -1,151 +0,0 @@
-<script lang="ts" module>
-    import type { TimelineProps } from './timeline.types.js'
-
-    export type Props = TimelineProps
-</script>
-
-<script lang="ts">
-    import type { ClassNameValue } from 'tailwind-merge'
-    import { timelineVariants, timelineDefaults } from './timeline.variants.js'
-    import type { TimelineItemState } from './timeline.types.js'
-    import { getComponentConfig } from '../config.js'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import Icon from '../Icon/Icon.svelte'
-
-    const config = getComponentConfig('timeline', timelineDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        items = [],
-        size = config.defaultVariants.size,
-        color = config.defaultVariants.color,
-        orientation = config.defaultVariants.orientation,
-        reverse = config.defaultVariants.reverse,
-        value,
-        class: className,
-        ui,
-        indicator,
-        dateSlot,
-        titleSlot,
-        descriptionSlot,
-        content,
-        ...restProps
-    }: Props = $props()
-
-    type ItemUi = Partial<Record<string, ClassNameValue>>
-
-    const classes = $derived.by(() => {
-        const slots = timelineVariants({ orientation, color, size, reverse })
-        const c = config.slots
-
-        // Pre-compute defaults — reused for all items without per-item ui
-        const _item = slots.item({ class: [c.item, ui?.item] })
-        const _container = slots.container({ class: [c.container, ui?.container] })
-        const _indicator = slots.indicator({ class: [c.indicator, ui?.indicator] })
-        const _separator = slots.separator({ class: [c.separator, ui?.separator] })
-        const _wrapper = slots.wrapper({ class: [c.wrapper, ui?.wrapper] })
-        const _date = slots.date({ class: [c.date, ui?.date] })
-        const _title = slots.title({ class: [c.title, ui?.title] })
-        const _description = slots.description({ class: [c.description, ui?.description] })
-
-        return {
-            root: slots.root({ class: [c.root, className, ui?.root] }),
-            item: (itemClass?: ClassNameValue, itemUi?: ItemUi) =>
-                itemClass || itemUi
-                    ? slots.item({ class: [c.item, ui?.item, itemUi?.item, itemClass] })
-                    : _item,
-            container: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.container({ class: [c.container, ui?.container, itemUi.container] })
-                    : _container,
-            indicator: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.indicator({ class: [c.indicator, ui?.indicator, itemUi.indicator] })
-                    : _indicator,
-            separator: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.separator({ class: [c.separator, ui?.separator, itemUi.separator] })
-                    : _separator,
-            wrapper: (itemUi?: ItemUi) =>
-                itemUi
-                    ? slots.wrapper({ class: [c.wrapper, ui?.wrapper, itemUi.wrapper] })
-                    : _wrapper,
-            date: (itemUi?: ItemUi) =>
-                itemUi?.date ? slots.date({ class: [c.date, ui?.date, itemUi.date] }) : _date,
-            title: (itemUi?: ItemUi) =>
-                itemUi?.title ? slots.title({ class: [c.title, ui?.title, itemUi.title] }) : _title,
-            description: (itemUi?: ItemUi) =>
-                itemUi?.description
-                    ? slots.description({
-                          class: [c.description, ui?.description, itemUi.description]
-                      })
-                    : _description
-        }
-    })
-
-    const activeIndex = $derived(
-        value !== undefined ? items.findIndex((item) => item.value === value) : -1
-    )
-
-    function getState(index: number): TimelineItemState {
-        if (activeIndex === -1) return 'pending'
-        if (index === activeIndex) return 'active'
-        return index < activeIndex ? 'completed' : 'pending'
-    }
-</script>
-
-<svelte:element
-    this={as}
-    bind:this={ref}
-    class={classes.root}
-    data-orientation={orientation}
-    {...restProps}
->
-    {#each items as item, index (item.value ?? index)}
-        {@const state = getState(index)}
-        <div class={classes.item(item.class, item.ui)} data-state={state}>
-            <div class={classes.container(item.ui)}>
-                {#if indicator}
-                    {@render indicator({ item, index, state })}
-                {:else}
-                    <div class={classes.indicator(item.ui)}>
-                        {#if item.avatar}
-                            <Avatar {...item.avatar} {size} />
-                        {:else if item.icon}
-                            <Icon name={item.icon} />
-                        {/if}
-                    </div>
-                {/if}
-
-                {#if reverse ? index > 0 : index < items.length - 1}
-                    <div class={classes.separator(item.ui)}></div>
-                {/if}
-            </div>
-
-            <div class={classes.wrapper(item.ui)}>
-                {#if dateSlot}
-                    {@render dateSlot({ item, index, state })}
-                {:else if item.date}
-                    <div class={classes.date(item.ui)}>{item.date}</div>
-                {/if}
-
-                {#if titleSlot}
-                    {@render titleSlot({ item, index, state })}
-                {:else if item.title}
-                    <div class={classes.title(item.ui)}>{item.title}</div>
-                {/if}
-
-                {#if descriptionSlot}
-                    {@render descriptionSlot({ item, index, state })}
-                {:else if item.description}
-                    <div class={classes.description(item.ui)}>{item.description}</div>
-                {/if}
-
-                {#if content}
-                    {@render content({ item, index, state })}
-                {/if}
-            </div>
-        </div>
-    {/each}
-</svelte:element>