sv5ui 2.1.0 → 2.2.0

package/dist/Icon/Icon.svelte

@@ -1,46 +0,0 @@
-<script lang="ts" module>
-    import type { IconProps } from './icon.types.js'
-
-    export type Props = IconProps
-</script>
-
-<script lang="ts">
-    import Icon from '@iconify/svelte'
-    import { twMerge } from 'tailwind-merge'
-
-    let {
-        name,
-        size = 24,
-        color,
-        flipH = false,
-        flipV = false,
-        rotate = 0,
-        class: className,
-        ...restProps
-    }: Props = $props()
-
-    const flip = $derived(
-        flipH && flipV
-            ? 'horizontal,vertical'
-            : flipH
-              ? 'horizontal'
-              : flipV
-                ? 'vertical'
-                : undefined
-    )
-
-    const rotateValue = $derived(rotate ? rotate / 90 : undefined)
-
-    const iconClass = $derived(twMerge('shrink-0', className))
-</script>
-
-<Icon
-    icon={name}
-    width={size}
-    height={size}
-    {color}
-    {flip}
-    rotate={rotateValue}
-    class={iconClass}
-    {...restProps}
-/>

package/dist/Input/Input.svelte

@@ -1,199 +0,0 @@
-<script lang="ts" module>
-    import type { InputProps, InputValue } from './input.types.js'
-
-    export type Props<T extends InputValue = InputValue> = InputProps<T>
-</script>
-
-<script lang="ts" generics="T extends InputValue = InputValue">
-    import { inputVariants, inputDefaults } from './input.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 Avatar from '../Avatar/Avatar.svelte'
-    import type { AvatarSize } from '../Avatar/avatar.types.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-
-    const config = getComponentConfig('input', inputDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        ui,
-        id,
-        name,
-        color = config.defaultVariants.color,
-        variant = config.defaultVariants.variant,
-        size,
-        type = 'text',
-        highlight,
-        loading = false,
-        loadingIcon = icons.loading,
-        disabled = false,
-        icon,
-        leadingIcon,
-        trailingIcon,
-        trailing = false,
-        avatar,
-        leadingSlot,
-        trailingSlot,
-        class: className,
-        onblur,
-        oninput,
-        onchange,
-        onfocus,
-        ...restProps
-    }: Props<T> = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    function handleBlur(event: FocusEvent & { currentTarget: HTMLInputElement }) {
-        emit.onBlur()
-        onblur?.(event)
-    }
-    function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
-        emit.onInput()
-        oninput?.(event)
-    }
-    function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
-        emit.onChange()
-        onchange?.(event)
-    }
-    function handleFocus(event: FocusEvent & { currentTarget: HTMLInputElement }) {
-        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 loadingLeading = $derived(loading && !trailing)
-    const loadingTrailing = $derived(loading && trailing)
-
-    const isLeading = $derived((!!icon && !trailing) || !!leadingIcon || !!avatar || loadingLeading)
-    const isTrailing = $derived((!!icon && trailing) || !!trailingIcon || loadingTrailing)
-
-    const leadingIconName = $derived(leadingIcon || (!!icon && !trailing ? icon : undefined))
-    const trailingIconName = $derived(trailingIcon || (!!icon && trailing ? icon : undefined))
-
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const variantSlots = $derived(
-        inputVariants({
-            variant,
-            color: resolvedColor,
-            size: resolvedSize,
-            leading: isLeading,
-            trailing: isTrailing,
-            highlight: resolvedHighlight
-        })
-    )
-    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]
-        }),
-        leadingAvatar: variantSlots.leadingAvatar({
-            class: [config.slots.leadingAvatar, ui?.leadingAvatar]
-        }),
-        leadingAvatarSize: variantSlots.leadingAvatarSize() as AvatarSize,
-        trailing: variantSlots.trailing({ class: [config.slots.trailing, ui?.trailing] }),
-        trailingIcon: variantSlots.trailingIcon({
-            class: [config.slots.trailingIcon, ui?.trailingIcon]
-        })
-    })
-</script>
-
-<div class={classes.root}>
-    {#if leadingSlot}
-        <span class={classes.leading}>
-            {@render leadingSlot()}
-        </span>
-    {:else if loadingLeading}
-        <span class={classes.leading}>
-            <span class="inline-flex animate-spin">
-                <Icon name={loadingIcon} class={classes.leadingIcon} />
-            </span>
-        </span>
-    {:else if avatar}
-        <span class={classes.leading}>
-            <Avatar {...avatar} size={classes.leadingAvatarSize} class={classes.leadingAvatar} />
-        </span>
-    {:else if leadingIconName}
-        <span class={classes.leading}>
-            <Icon name={leadingIconName} class={classes.leadingIcon} />
-        </span>
-    {/if}
-
-    <input
-        {...restProps}
-        bind:this={ref}
-        bind:value
-        {type}
-        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}
-    />
-
-    {#if trailingSlot}
-        <span class={classes.trailing}>
-            {@render trailingSlot()}
-        </span>
-    {:else if loadingTrailing}
-        <span class={classes.trailing}>
-            <span class="inline-flex animate-spin">
-                <Icon name={loadingIcon} class={classes.trailingIcon} />
-            </span>
-        </span>
-    {:else if trailingIconName}
-        <span class={classes.trailing}>
-            <Icon name={trailingIconName} class={classes.trailingIcon} />
-        </span>
-    {/if}
-</div>

package/dist/Kbd/Kbd.svelte

@@ -1,45 +0,0 @@
-<script lang="ts" module>
-    import type { KbdProps } from './kbd.types.js'
-    import { resolveKey } from './useKbd.svelte.js'
-
-    export type Props = KbdProps
-</script>
-
-<script lang="ts">
-    import { onMount } from 'svelte'
-    import { kbdVariants, kbdDefaults } from './kbd.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('kbd', kbdDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'kbd',
-        value,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        variant = config.defaultVariants.variant,
-        ui,
-        class: className,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    let mounted = $state(false)
-    onMount(() => (mounted = true))
-
-    const displayValue = $derived(resolveKey(value, mounted))
-    const kbdClass = $derived(
-        kbdVariants({ color, size, variant }).base({
-            class: [config.slots.base, className, ui?.base]
-        })
-    )
-</script>
-
-<svelte:element this={as} bind:this={ref} class={kbdClass} {...restProps}>
-    {#if children}
-        {@render children()}
-    {:else if displayValue}
-        {displayValue}
-    {/if}
-</svelte:element>

package/dist/Link/Link.svelte

@@ -1,168 +0,0 @@
-<script lang="ts" module>
-    import type { LinkProps } from './link.types.js'
-
-    export type Props = LinkProps
-
-    function parseUrl(url: string, baseUrl: URL) {
-        try {
-            const parsed = new URL(url, baseUrl.origin)
-            return {
-                pathname: parsed.pathname,
-                query: parsed.searchParams,
-                hash: parsed.hash
-            }
-        } catch {
-            return {
-                pathname: url,
-                query: new URLSearchParams(),
-                hash: ''
-            }
-        }
-    }
-
-    function isQueryMatch(
-        linkQuery: URLSearchParams,
-        currentQuery: URLSearchParams,
-        mode: boolean | 'partial'
-    ): boolean {
-        if (mode === false) return true
-        if (mode === 'partial') {
-            for (const [key, value] of linkQuery) {
-                if (!currentQuery.getAll(key).includes(value)) return false
-            }
-            return true
-        }
-
-        // Exact: check size first (O(1) bail-out), then compare sorted strings
-        if (linkQuery.size !== currentQuery.size) return false
-        const sorted = (p: URLSearchParams) => new URLSearchParams([...p].sort()).toString()
-        return sorted(linkQuery) === sorted(currentQuery)
-    }
-
-    function isPathnameMatch(linkPath: string, currentPath: string, exactMatch: boolean): boolean {
-        if (exactMatch) return linkPath === currentPath
-
-        const link = linkPath.replace(/\/$/, '') || '/'
-        const current = currentPath.replace(/\/$/, '') || '/'
-
-        return link === '/' ? current === '/' : current === link || current.startsWith(link + '/')
-    }
-</script>
-
-<script lang="ts">
-    import { page } from '$app/state'
-    import { twMerge } from 'tailwind-merge'
-    import { linkVariants, linkDefaults } from './link.variants.js'
-    import { getComponentConfig } from '../config.js'
-
-    const config = getComponentConfig('link', linkDefaults)
-
-    let {
-        ref = $bindable(null),
-        href,
-        type,
-        active,
-        exact = false,
-        exactQuery = false,
-        exactHash = false,
-        activeClass,
-        inactiveClass,
-        disabled = false,
-        raw = false,
-        external,
-        children,
-        class: className,
-        ui,
-        target,
-        rel,
-        onclick,
-        ...restProps
-    }: Props = $props()
-
-    const isLink = $derived(!!href)
-
-    const isExternal = $derived(
-        isLink &&
-            (external ??
-                (href!.startsWith('http://') ||
-                    href!.startsWith('https://') ||
-                    href!.startsWith('//')))
-    )
-
-    const resolvedTarget = $derived(
-        isLink ? (target ?? (isExternal ? '_blank' : undefined)) : undefined
-    )
-
-    const resolvedRel = $derived(
-        isLink
-            ? (rel ??
-                  (isExternal || resolvedTarget === '_blank' ? 'noopener noreferrer' : undefined))
-            : undefined
-    )
-
-    const isActive = $derived.by(() => {
-        if (active !== undefined) return active
-        if (!isLink || !page.url || isExternal) return false
-
-        const link = parseUrl(href!, page.url)
-
-        if (exactHash && link.hash !== page.url.hash) return false
-        if (!isQueryMatch(link.query, page.url.searchParams, exactQuery)) return false
-
-        return isPathnameMatch(link.pathname, page.url.pathname, exact)
-    })
-
-    const baseClass = $derived.by(() => {
-        const stateClass = isActive ? activeClass : inactiveClass
-        if (raw) return twMerge(stateClass, className)
-
-        const slots = linkVariants({ active: isActive, disabled, raw })
-        return slots.base({ class: [config.slots.base, stateClass, className, ui?.base] })
-    })
-
-    const ariaCurrent = $derived(isActive && exact ? ('page' as const) : undefined)
-
-    function handleClick(e: MouseEvent) {
-        if (disabled) {
-            e.preventDefault()
-            e.stopPropagation()
-            return
-        }
-
-        if (typeof onclick === 'function') {
-            ;(onclick as (e: MouseEvent) => void)(e)
-        }
-    }
-</script>
-
-{#if isLink}
-    <!-- eslint-disable svelte/no-navigation-without-resolve -->
-    <a
-        bind:this={ref}
-        {...restProps}
-        href={disabled ? undefined : href}
-        class={baseClass}
-        target={resolvedTarget}
-        rel={resolvedRel}
-        role={disabled ? 'link' : undefined}
-        aria-disabled={disabled ? 'true' : undefined}
-        aria-current={ariaCurrent}
-        tabindex={disabled ? -1 : undefined}
-        onclick={handleClick}
-    >
-        <!-- eslint-enable svelte/no-navigation-without-resolve -->
-        {@render children?.()}
-    </a>
-{:else}
-    <button
-        bind:this={ref}
-        {...restProps}
-        type={type ?? 'button'}
-        class={baseClass}
-        {disabled}
-        aria-current={ariaCurrent}
-        onclick={handleClick}
-    >
-        {@render children?.()}
-    </button>
-{/if}

package/dist/PinInput/PinInput.svelte

@@ -1,162 +0,0 @@
-<script lang="ts" module>
-    import type { PinInputProps } from './pin-input.types.js'
-
-    export type Props = PinInputProps
-</script>
-
-<script lang="ts">
-    import { PinInput, useId } from 'bits-ui'
-    import { pinInputVariants, pinInputDefaults } from './pin-input.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-
-    const config = getComponentConfig('pinInput', pinInputDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        defaultValue = '',
-        value = $bindable(defaultValue),
-        onValueChange,
-        onComplete,
-        length = 5,
-        type = 'text',
-        mask = false,
-        otp = false,
-        disabled = false,
-        required,
-        textalign,
-        pasteTransformer,
-        pushPasswordManagerStrategy,
-        inputId,
-        name,
-        placeholder = '○',
-        autofocus = false,
-        autofocusDelay = 0,
-        highlight = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        fixed = false,
-        color = config.defaultVariants.color,
-        size,
-        variant = config.defaultVariants.variant,
-        class: className,
-        ui,
-        ...restProps
-    }: Props = $props()
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const isDisabled = $derived(disabled || loading)
-
-    const autoInputId = useId()
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedInputId = $derived(inputId ?? formFieldContext?.ariaId ?? autoInputId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const resolvedHighlight = $derived(hasError || highlight)
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const resolvedPasteTransformer = $derived(
-        pasteTransformer ??
-            (type === 'number' ? (text: string) => text.replace(/\D/g, '') : undefined)
-    )
-
-    function handleValueChange(v: string) {
-        const filtered = type === 'number' ? v.replace(/\D/g, '') : v
-        value = filtered
-        emit.onInput()
-        onValueChange?.(filtered)
-    }
-
-    function handleComplete(v: string) {
-        emit.onChange()
-        onComplete?.(v)
-    }
-
-    const slots = $derived(
-        pinInputVariants({
-            variant,
-            color: resolvedColor,
-            size: resolvedSize,
-            highlight: resolvedHighlight,
-            fixed,
-            disabled: isDisabled
-        })
-    )
-
-    const classes = $derived.by(() => {
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [config.slots.root, className, u.root] }),
-            base: slots.base({ class: [config.slots.base, u.base] })
-        }
-    })
-
-    $effect(() => {
-        if (!autofocus) return
-        const input = ref?.querySelector('[data-pin-input-input]') as HTMLInputElement | null
-        if (!input) return
-        const timer = setTimeout(() => input.focus(), autofocusDelay)
-        return () => clearTimeout(timer)
-    })
-</script>
-
-<div class="relative inline-flex" {...restProps}>
-    {#if resolvedName}
-        <input type="hidden" name={resolvedName} {value} />
-    {/if}
-    {#if loading}
-        <span
-            class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-surface/60"
-            aria-hidden="true"
-        >
-            <Icon name={loadingIcon} class="size-5 animate-spin text-on-surface-variant" />
-        </span>
-    {/if}
-    <PinInput.Root
-        bind:ref
-        {value}
-        maxlength={length}
-        disabled={isDisabled}
-        {textalign}
-        onComplete={handleComplete}
-        pasteTransformer={resolvedPasteTransformer}
-        {pushPasswordManagerStrategy}
-        inputId={resolvedInputId}
-        autocomplete={otp ? 'one-time-code' : undefined}
-        inputmode={type === 'number' ? 'numeric' : 'text'}
-        {required}
-        aria-describedby={ariaDescribedBy}
-        onValueChange={handleValueChange}
-        class={classes.root}
-    >
-        {#snippet children({ cells })}
-            {#each cells as cell, i (i)}
-                <PinInput.Cell {cell} class={classes.base}>
-                    {#if mask && cell.char}
-                        <span class="block size-2 rounded-full bg-current"></span>
-                    {:else if cell.char}
-                        {cell.char}
-                    {:else if cell.hasFakeCaret}
-                        <span class="pointer-events-none absolute animate-pulse select-none">|</span
-                        >
-                    {:else}
-                        <span class="text-on-surface/30">{placeholder}</span>
-                    {/if}
-                </PinInput.Cell>
-            {/each}
-        {/snippet}
-    </PinInput.Root>
-</div>