sv5ui 2.1.0 → 2.2.0

package/dist/Editor/EditorUrlPrompt.svelte

@@ -1,111 +0,0 @@
-<script lang="ts">
-    import { untrack } from 'svelte'
-    import Modal from '../Modal/Modal.svelte'
-    import Input from '../Input/Input.svelte'
-    import Button from '../Button/Button.svelte'
-    import Form from '../Form/Form.svelte'
-    import FormField from '../FormField/FormField.svelte'
-    import type { FormApi, FormError, FormSubmitEvent } from '../Form/form.types.js'
-    import { httpUrlSchema, type UrlSchema } from './editor.schemas.js'
-
-    interface Props {
-        open: boolean
-        title?: string
-        description?: string
-        placeholder?: string
-        initialValue?: string
-        confirmLabel?: string
-        schema?: UrlSchema
-        onConfirm?: (value: string) => void
-        onCancel?: () => void
-    }
-
-    let {
-        open = $bindable(false),
-        title = 'Enter URL',
-        description,
-        placeholder = 'https://',
-        initialValue = '',
-        confirmLabel = 'Insert',
-        schema,
-        onConfirm,
-        onCancel
-    }: Props = $props()
-
-    type UrlFormState = { url: string }
-
-    let formApi = $state<FormApi<UrlFormState>>()
-    let formState = $state<UrlFormState>({ url: '' })
-    let inputRef: HTMLInputElement | null = $state(null)
-    let settled = $state(false)
-
-    const resolvedSchema = $derived(schema ?? httpUrlSchema)
-
-    $effect(() => {
-        if (open) {
-            const initial = untrack(() => initialValue)
-            formState = { url: initial }
-            settled = false
-            untrack(() => formApi?.reset())
-            requestAnimationFrame(() => inputRef?.focus())
-        } else if (!settled) {
-            settled = true
-            onCancel?.()
-        }
-    })
-
-    async function validate(state: object): Promise<FormError[]> {
-        const url = (state as Partial<UrlFormState>).url ?? ''
-        const result = await resolvedSchema['~standard'].validate(url)
-        if (result.issues) {
-            return [{ name: 'url', message: result.issues[0]?.message ?? 'Invalid value' }]
-        }
-        return []
-    }
-
-    function handleSubmit(event: FormSubmitEvent<unknown>): void {
-        const data = event.data as UrlFormState
-        settled = true
-        onConfirm?.(data.url.trim())
-        open = false
-    }
-
-    function cancel(): void {
-        settled = true
-        onCancel?.()
-        open = false
-    }
-</script>
-
-<Modal bind:open {title} {description} size="sm">
-    {#snippet body()}
-        <Form
-            bind:api={formApi}
-            bind:state={formState}
-            {validate}
-            onsubmit={handleSubmit}
-            class="py-1"
-        >
-            <FormField name="url">
-                <Input
-                    bind:ref={inputRef}
-                    bind:value={formState.url}
-                    {placeholder}
-                    class="w-full"
-                />
-            </FormField>
-        </Form>
-    {/snippet}
-    {#snippet footer()}
-        <div class="flex items-center justify-end gap-2">
-            <Button variant="ghost" size="sm" label="Cancel" onclick={cancel} />
-            <Button
-                color="primary"
-                size="sm"
-                label={confirmLabel}
-                loading={formApi?.loading}
-                onclick={() => void formApi?.submit()}
-            />
-        </div>
-    {/snippet}
-</Modal>

package/dist/Empty/Empty.svelte

@@ -1,118 +0,0 @@
-<script lang="ts" module>
-    import type { EmptyProps } from './empty.types.js'
-
-    export type Props = EmptyProps
-</script>
-
-<script lang="ts">
-    import { emptyVariants, emptyDefaults } from './empty.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Avatar from '../Avatar/Avatar.svelte'
-    import Button from '../Button/Button.svelte'
-
-    const config = getComponentConfig('empty', emptyDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        icon,
-        avatar,
-        title,
-        description,
-        actions,
-        variant = config.defaultVariants.variant,
-        size = config.defaultVariants.size,
-        class: className,
-        leading,
-        titleSlot,
-        descriptionSlot,
-        actionsSlot,
-        header,
-        body,
-        footer,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    const classes = $derived.by(() => {
-        const slots = emptyVariants({ variant, size })
-        const c = config.slots
-        return {
-            root: slots.root({ class: [c.root, className, ui?.root] }),
-            header: slots.header({ class: [c.header, ui?.header] }),
-            avatar: slots.avatar({ class: [c.avatar, ui?.avatar] }),
-            title: slots.title({ class: [c.title, ui?.title] }),
-            description: slots.description({ class: [c.description, ui?.description] }),
-            body: slots.body({ class: [c.body, ui?.body] }),
-            actions: slots.actions({ class: [c.actions, ui?.actions] }),
-            footer: slots.footer({ class: [c.footer, ui?.footer] })
-        }
-    })
-
-    const hasHeader = $derived(
-        !!icon ||
-            !!avatar ||
-            !!title ||
-            !!description ||
-            !!leading ||
-            !!titleSlot ||
-            !!descriptionSlot ||
-            !!header
-    )
-    const hasActions = $derived(actions && actions.length > 0)
-    const hasBody = $derived(!!hasActions || !!actionsSlot || !!body || !!children)
-</script>
-
-<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
-    {#if header}
-        {@render header()}
-    {:else if hasHeader}
-        <div class={classes.header}>
-            {#if leading}
-                {@render leading()}
-            {:else if icon}
-                <Icon name={icon} class={classes.avatar} />
-            {:else if avatar}
-                <Avatar {...avatar} class={classes.avatar} />
-            {/if}
-
-            {#if titleSlot}
-                {@render titleSlot()}
-            {:else if title}
-                <p class={classes.title}>{title}</p>
-            {/if}
-
-            {#if descriptionSlot}
-                {@render descriptionSlot()}
-            {:else if description}
-                <p class={classes.description}>{description}</p>
-            {/if}
-        </div>
-    {/if}
-
-    {#if body}
-        {@render body()}
-    {:else if hasBody}
-        <div class={classes.body}>
-            {@render children?.()}
-
-            {#if actionsSlot}
-                {@render actionsSlot()}
-            {:else if hasActions}
-                <div class={classes.actions}>
-                    {#each actions as action, index (index)}
-                        <Button size="sm" {...action} />
-                    {/each}
-                </div>
-            {/if}
-        </div>
-    {/if}
-
-    {#if footer}
-        <div class={classes.footer}>
-            {@render footer()}
-        </div>
-    {/if}
-</svelte:element>

package/dist/FieldGroup/FieldGroup.svelte

@@ -1,53 +0,0 @@
-<script lang="ts" module>
-    import type { FieldGroupProps } from './field-group.types.js'
-
-    export type Props = FieldGroupProps
-</script>
-
-<script lang="ts">
-    import { fieldGroupVariants, fieldGroupDefaults } from './field-group.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import { setContext } from 'svelte'
-
-    const config = getComponentConfig('fieldGroup', fieldGroupDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        size = config.defaultVariants.size ?? 'md',
-        orientation = config.defaultVariants.orientation ?? 'horizontal',
-        class: className,
-        children,
-        ...restProps
-    }: Props = $props()
-
-    const variantSlots = $derived(fieldGroupVariants({ size, orientation }))
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] })
-    })
-
-    setContext<{
-        orientation: NonNullable<Props['orientation']>
-        size: NonNullable<Props['size']>
-    }>('fieldGroup', {
-        get orientation() {
-            return orientation
-        },
-        get size() {
-            return size
-        }
-    })
-</script>
-
-<svelte:element
-    this={as}
-    bind:this={ref}
-    class={classes.root}
-    data-orientation={orientation}
-    {...restProps}
->
-    {#if children}
-        {@render children()}
-    {/if}
-</svelte:element>

package/dist/Form/Form.svelte

@@ -1,203 +0,0 @@
-<script lang="ts" module>
-    import type { FormProps, FormSchema } from './form.types.js'
-
-    export type Props<
-        S extends FormSchema | undefined = FormSchema | undefined,
-        T extends boolean = true,
-        N extends boolean = false
-    > = FormProps<S, T, N>
-</script>
-
-<script
-    lang="ts"
-    generics="S extends FormSchema | undefined = FormSchema | undefined, T extends boolean = true, N extends boolean = false"
->
-    import { setContext, onMount, onDestroy, untrack } from 'svelte'
-    import type { HTMLAttributes } from 'svelte/elements'
-    import { formVariants, formDefaults } from './form.variants.js'
-    import { FormContext, FORM_CONTEXT_KEY, getFormContext } from './form.context.svelte.js'
-    import { getComponentConfig } from '../config.js'
-    import type { FormApi, FormErrorWithId } from './form.types.js'
-
-    const config = getComponentConfig('form', formDefaults)
-
-    let {
-        ref = $bindable(null),
-        api = $bindable<FormApi<unknown> | undefined>(),
-        id,
-        schema,
-        state = $bindable({} as never),
-        validate: customValidate,
-        validateOn = ['input', 'blur', 'change'],
-        validateOnInputDelay = 300,
-        disabled = false,
-        loadingAuto = true,
-        transform = true as T,
-        nested = false as N,
-        name,
-        onsubmit,
-        onerror,
-        class: className,
-        ui,
-        children,
-        ...restProps
-    }: Props<S, T, N> = $props()
-
-    // Generate a stable form id. Both `id` and `nested` are effectively init-only
-    // (they should not change over a form instance's lifetime), so `untrack`
-    // silences Svelte's state_referenced_locally warning.
-    const formId: string | number = untrack(
-        () =>
-            (id as string | number | undefined) ??
-            (typeof crypto !== 'undefined' && 'randomUUID' in crypto
-                ? crypto.randomUUID()
-                : `sv5ui-form-${Math.random().toString(36).slice(2)}`)
-    )
-
-    // Parent context captured once at init — `nested` is effectively immutable
-    // over a form instance's lifetime. We warn (dev-only) if it's mutated later.
-    const parentCtx = untrack(() => (nested ? getFormContext() : undefined))
-    const initialNested = untrack(() => nested)
-    $effect(() => {
-        if (nested !== initialNested) {
-            // eslint-disable-next-line no-console
-            console.warn(
-                '[sv5ui Form] The `nested` prop was changed after mount. This is ' +
-                    'not supported — nested/standalone status is fixed at mount time. ' +
-                    'Unmount and remount the Form to toggle.'
-            )
-        }
-    })
-
-    // Create the reactive form context. All config is passed via getter closures
-    // so that reactive prop changes are visible inside the class.
-    const ctx = new FormContext(
-        {
-            getState: () => state as unknown,
-            getSchema: () => schema as FormSchema | undefined,
-            getCustomValidate: () =>
-                customValidate as
-                    | ((s: unknown) => ReturnType<NonNullable<typeof customValidate>>)
-                    | undefined,
-            getValidateOn: () => validateOn,
-            getValidateOnInputDelay: () => validateOnInputDelay,
-            getDisabled: () => disabled,
-            getLoadingAuto: () => loadingAuto,
-            getTransform: () => transform,
-            getName: () => name as string | undefined,
-            getOnSubmit: () =>
-                onsubmit as
-                    | ((
-                          e: import('./form.types.js').FormSubmitEvent<unknown>
-                      ) => void | Promise<void>)
-                    | undefined,
-            getOnError: () => onerror
-        },
-        formId,
-        parentCtx
-    )
-
-    setContext(FORM_CONTEXT_KEY, ctx)
-
-    // Build the bindable API object. Getters ensure reactive state reads stay live.
-    const apiObject: FormApi<unknown> = {
-        validate: (opts) => ctx.validate(opts) as Promise<unknown | false>,
-        submit: () => ctx.submit(),
-        clear: (name) => ctx.clear(name),
-        getErrors: (name) => ctx.getErrors(name),
-        setErrors: (errs, name) => ctx.setErrors(errs, name),
-        reset: () => ctx.reset(),
-        get errors() {
-            return ctx.errors
-        },
-        get loading() {
-            return ctx.loading
-        },
-        get disabled() {
-            return ctx.disabled
-        },
-        get dirty() {
-            return ctx.dirty
-        },
-        get dirtyFields() {
-            return ctx.dirtyFields as ReadonlySet<string>
-        },
-        get touchedFields() {
-            return ctx.touchedFields as ReadonlySet<string>
-        },
-        get blurredFields() {
-            return ctx.blurredFields as ReadonlySet<string>
-        },
-        get submitCount() {
-            return ctx.submitCount
-        }
-    }
-
-    // Sync the api object to the bindable prop once at setup time. `apiObject`
-    // is a stable reference built from getters, so there's nothing reactive to
-    // track — direct assignment is sufficient.
-    api = apiObject as typeof api
-
-    // Nested form attach/detach lifecycle.
-    onMount(() => {
-        if (parentCtx && nested) {
-            parentCtx.attachChild(formId, {
-                formId,
-                name: name as string | undefined,
-                validate: (opts) => ctx.validate(opts) as Promise<unknown | false>,
-                clear: (n) => ctx.clear(n),
-                reset: () => ctx.reset(),
-                setErrors: (errs, n) => ctx.setErrors(errs, n)
-            })
-        }
-    })
-
-    onDestroy(() => {
-        if (parentCtx && nested) parentCtx.detachChild(formId)
-        ctx.dispose()
-    })
-
-    async function handleSubmit(event: SubmitEvent) {
-        event.preventDefault()
-        // Forward the real SubmitEvent so user handlers can read `submitter`,
-        // `target`, etc. When `api.submit()` is called programmatically, ctx.submit
-        // synthesizes a fresh event instead.
-        await ctx.submit(event)
-    }
-
-    // `formVariants` has no variants (only a single `root` slot), so its
-    // output is stable — compute once at setup rather than via $derived.
-    const variantSlots = formVariants()
-    const classes = $derived({
-        root: variantSlots.root({
-            class: [config.slots.root, className, ui?.root]
-        })
-    })
-
-    // Slot props for children
-    const slotProps = $derived({
-        errors: ctx.errors as FormErrorWithId[],
-        loading: ctx.loading
-    })
-</script>
-
-{#if nested}
-    <div
-        {...restProps as unknown as HTMLAttributes<HTMLDivElement>}
-        bind:this={ref}
-        id={typeof id === 'number' ? String(id) : id}
-        class={classes.root}
-    >
-        {@render children?.(slotProps)}
-    </div>
-{:else}
-    <form
-        {...restProps}
-        bind:this={ref}
-        id={typeof id === 'number' ? String(id) : id}
-        class={classes.root}
-        onsubmit={handleSubmit}
-    >
-        {@render children?.(slotProps)}
-    </form>
-{/if}

package/dist/FormField/FormField.svelte

@@ -1,186 +0,0 @@
-<script lang="ts" module>
-    import type { FormFieldProps } from './form-field.types.js'
-
-    export type Props = FormFieldProps
-</script>
-
-<script lang="ts">
-    import { Label, useId } from 'bits-ui'
-    import { formFieldVariants, formFieldDefaults } from './form-field.variants.js'
-    import { getComponentConfig } from '../config.js'
-    import { setContext, untrack } from 'svelte'
-    import { type FormFieldContext, FORM_FIELD_CONTEXT_KEY } from '../hooks/useFormField.svelte.js'
-    import { getFormContext } from '../Form/form.context.svelte.js'
-
-    const config = getComponentConfig('formField', formFieldDefaults)
-
-    let {
-        ref = $bindable(null),
-        ui,
-        name,
-        label,
-        description,
-        hint,
-        help,
-        error,
-        size = config.defaultVariants.size ?? 'md',
-        required = false,
-        orientation = config.defaultVariants.orientation ?? 'vertical',
-        eagerValidation,
-        validateOnInputDelay,
-        errorPattern,
-        class: className,
-        children,
-        labelSlot,
-        hintSlot,
-        descriptionSlot,
-        helpSlot,
-        errorSlot,
-        ...restProps
-    }: Props = $props()
-
-    const id = useId()
-    const ariaId = $derived(name ? `form-field-${name}` : id)
-
-    // Form-level context (undefined when FormField is used standalone).
-    const formCtx = getFormContext()
-
-    // Resolve error: explicit `error` prop always wins; otherwise ask the Form for
-    // errors matching this field's name (or errorPattern regex, if provided).
-    const resolvedError = $derived.by<string | boolean | undefined>(() => {
-        if (error !== undefined) return error
-        if (!formCtx || !name) return undefined
-        const errs = errorPattern ? formCtx.getErrors(errorPattern) : formCtx.getErrors(name)
-        return errs[0]?.message
-    })
-
-    // Register this field with the form. Split into two effects:
-    //
-    // 1. Lifecycle effect — tracks only `name`. Handles the initial registration
-    //    and cleanup on unmount / rename. Reads other entry fields via `untrack`
-    //    so they don't retrigger the lifecycle.
-    // 2. Update effect — tracks ariaId / errorPattern / eagerValidation /
-    //    validateOnInputDelay and rewrites the entry via `.set()`. No cleanup —
-    //    a single atomic overwrite, so no window where the registry is empty.
-    //
-    // Without this split, changing an unrelated prop (e.g. errorPattern) would
-    // cause cleanup→re-register, briefly leaving `#fieldRegistry.get(name)`
-    // undefined for any concurrent `#resolveErrorIds` call.
-    $effect(() => {
-        if (!formCtx || !name) return
-        const registeredName = name
-        untrack(() => {
-            formCtx.registerField(registeredName, {
-                id: ariaId,
-                pattern: errorPattern,
-                eagerValidation,
-                validateOnInputDelay
-            })
-        })
-        return () => {
-            formCtx.unregisterField(registeredName)
-        }
-    })
-
-    $effect(() => {
-        if (!formCtx || !name) return
-        formCtx.registerField(name, {
-            id: ariaId,
-            pattern: errorPattern,
-            eagerValidation,
-            validateOnInputDelay
-        })
-    })
-
-    const variantSlots = $derived(formFieldVariants({ size, required, orientation }))
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
-        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
-        labelWrapper: variantSlots.labelWrapper({
-            class: [config.slots.labelWrapper, ui?.labelWrapper]
-        }),
-        label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
-        container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
-        description: variantSlots.description({
-            class: [config.slots.description, ui?.description]
-        }),
-        error: variantSlots.error({ class: [config.slots.error, ui?.error] }),
-        hint: variantSlots.hint({ class: [config.slots.hint, ui?.hint] }),
-        help: variantSlots.help({ class: [config.slots.help, ui?.help] })
-    })
-
-    const hasError = $derived(resolvedError !== undefined && resolvedError !== false)
-    const errorMessage = $derived(typeof resolvedError === 'string' ? resolvedError : undefined)
-
-    setContext<FormFieldContext>(FORM_FIELD_CONTEXT_KEY, {
-        get name() {
-            return name
-        },
-        get size() {
-            return size
-        },
-        get error() {
-            return resolvedError
-        },
-        get ariaId() {
-            return ariaId
-        },
-        get eagerValidation() {
-            return eagerValidation
-        },
-        get validateOnInputDelay() {
-            return validateOnInputDelay
-        },
-        get errorPattern() {
-            return errorPattern
-        }
-    })
-</script>
-
-<div bind:this={ref} class={classes.root} {...restProps}>
-    <div class={classes.wrapper}>
-        {#if label || labelSlot || hint || hintSlot}
-            <div class={classes.labelWrapper}>
-                {#if labelSlot}
-                    {@render labelSlot({ label })}
-                {:else if label}
-                    <Label.Root for={ariaId} class={classes.label}>
-                        {label}
-                    </Label.Root>
-                {/if}
-
-                {#if hintSlot}
-                    {@render hintSlot({ hint })}
-                {:else if hint}
-                    <span class={classes.hint}>{hint}</span>
-                {/if}
-            </div>
-        {/if}
-
-        {#if descriptionSlot}
-            {@render descriptionSlot({ description })}
-        {:else if description}
-            <p id="{ariaId}-description" class={classes.description}>{description}</p>
-        {/if}
-    </div>
-
-    <div class={classes.container}>
-        {#if children}
-            {@render children({ error: resolvedError })}
-        {/if}
-
-        {#if hasError && (errorMessage || errorSlot)}
-            {#if errorSlot}
-                {@render errorSlot({ error: resolvedError })}
-            {:else if errorMessage}
-                <p id="{ariaId}-error" class={classes.error}>{errorMessage}</p>
-            {/if}
-        {:else if help || helpSlot}
-            {#if helpSlot}
-                {@render helpSlot({ help })}
-            {:else if help}
-                <p id="{ariaId}-help" class={classes.help}>{help}</p>
-            {/if}
-        {/if}
-    </div>
-</div>