svelora 2.1.0

package/dist/FormField/form-field.variants.d.ts

@@ -0,0 +1,313 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const formFieldVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        sm: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        md: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        lg: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        xl: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    orientation: {
+        vertical: {
+            container: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    container: string;
+    description: string;
+    error: string;
+    hint: string;
+    help: string;
+}, undefined, {
+    size: {
+        xs: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        sm: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        md: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        lg: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        xl: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    orientation: {
+        vertical: {
+            container: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    container: string;
+    description: string;
+    error: string;
+    hint: string;
+    help: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        sm: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        md: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        lg: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+        xl: {
+            label: string;
+            description: string;
+            hint: string;
+            error: string;
+            help: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    orientation: {
+        vertical: {
+            container: string;
+        };
+        horizontal: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    container: string;
+    description: string;
+    error: string;
+    hint: string;
+    help: string;
+}, undefined, unknown, unknown, undefined>>;
+export type FormFieldVariantProps = VariantProps<typeof formFieldVariants>;
+export type FormFieldSlots = keyof ReturnType<typeof formFieldVariants>;
+export declare const formFieldDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        size: {
+            xs: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+            sm: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+            md: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+            lg: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+            xl: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+        orientation: {
+            vertical: {
+                container: string;
+            };
+            horizontal: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        labelWrapper: string;
+        label: string;
+        container: string;
+        description: string;
+        error: string;
+        hint: string;
+        help: string;
+    }, {
+        size: {
+            xs: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+            sm: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+            md: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+            lg: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+            xl: {
+                label: string;
+                description: string;
+                hint: string;
+                error: string;
+                help: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+        orientation: {
+            vertical: {
+                container: string;
+            };
+            horizontal: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        labelWrapper: string;
+        label: string;
+        container: string;
+        description: string;
+        error: string;
+        hint: string;
+        help: string;
+    }>;
+    slots: Partial<Record<FormFieldSlots, string>>;
+};

package/dist/FormField/form-field.variants.js

@@ -0,0 +1,74 @@
+import { tv } from 'tailwind-variants';
+export const formFieldVariants = tv({
+    slots: {
+        root: '',
+        wrapper: '',
+        labelWrapper: 'flex content-center items-center justify-between gap-1',
+        label: 'block font-medium text-on-surface',
+        container: 'relative',
+        description: 'text-on-surface-variant',
+        error: 'mt-2 text-error',
+        hint: 'text-on-surface-variant',
+        help: 'mt-2 text-on-surface-variant'
+    },
+    variants: {
+        size: {
+            xs: {
+                label: 'text-xs',
+                description: 'text-xs',
+                hint: 'text-xs',
+                error: 'text-xs',
+                help: 'text-xs'
+            },
+            sm: {
+                label: 'text-xs',
+                description: 'text-xs',
+                hint: 'text-xs',
+                error: 'text-xs',
+                help: 'text-xs'
+            },
+            md: {
+                label: 'text-sm',
+                description: 'text-sm',
+                hint: 'text-sm',
+                error: 'text-sm',
+                help: 'text-sm'
+            },
+            lg: {
+                label: 'text-sm',
+                description: 'text-sm',
+                hint: 'text-sm',
+                error: 'text-sm',
+                help: 'text-sm'
+            },
+            xl: {
+                label: 'text-base',
+                description: 'text-base',
+                hint: 'text-base',
+                error: 'text-base',
+                help: 'text-base'
+            }
+        },
+        required: {
+            true: {
+                label: "after:ms-0.5 after:text-error after:content-['*']"
+            }
+        },
+        orientation: {
+            vertical: {
+                container: 'mt-1'
+            },
+            horizontal: {
+                root: 'grid grid-cols-2 gap-2 items-baseline'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        orientation: 'vertical'
+    }
+});
+export const formFieldDefaults = {
+    defaultVariants: formFieldVariants.defaultVariants,
+    slots: {}
+};

package/dist/FormField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FormField } from './FormField.svelte';
+export type { FormFieldProps } from './form-field.types.js';

package/dist/FormField/index.js

@@ -0,0 +1 @@
+export { default as FormField } from './FormField.svelte';

package/dist/Icon/Icon.svelte

@@ -0,0 +1,46 @@
+<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/Icon/Icon.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { IconProps } from './icon.types.js';
+export type Props = IconProps;
+import Icon from '@iconify/svelte';
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/Icon/icon.types.d.ts

@@ -0,0 +1,49 @@
+import type { IconProps as IconifyProps } from '@iconify/svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+export interface IconProps extends Omit<IconifyProps, 'icon' | 'width' | 'height' | 'rotate' | 'flip' | 'class'>, Pick<SVGAttributes<SVGSVGElement>, 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-hidden' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the rendered `<svg>`. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
+    /**
+     * Icon name in Iconify format: "collection:icon-name"
+     * @example "lucide:home", "mdi:account", "heroicons:star"
+     * @see https://icon-sets.iconify.design/
+     */
+    name: string;
+    /**
+     * Icon size (applied to both width and height).
+     * Accepts a number (pixels) or CSS string value.
+     * @default 24
+     * @example 24, "1.5rem", "20px"
+     */
+    size?: number | string;
+    /**
+     * Icon color (CSS color value).
+     * Defaults to `currentColor`, inheriting the parent's text color.
+     * Use Tailwind `text-*` classes on the parent or via `class` prop as an alternative.
+     * @default "currentColor"
+     * @example "red", "#ff0000", "rgb(255, 0, 0)"
+     */
+    color?: string;
+    /**
+     * Flip icon horizontally.
+     * @default false
+     */
+    flipH?: boolean;
+    /**
+     * Flip icon vertically.
+     * @default false
+     */
+    flipV?: boolean;
+    /**
+     * Rotate icon by specified degrees (quarter turns only).
+     * For arbitrary rotation, use a CSS class like `rotate-45`.
+     * @default 0
+     */
+    rotate?: 0 | 90 | 180 | 270;
+    /**
+     * Additional CSS classes for the icon.
+     * Merged with `shrink-0` via tailwind-merge, so conflicting utilities are resolved correctly.
+     */
+    class?: ClassNameValue;
+}

package/dist/Icon/icon.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon.svelte';
+export type { IconProps } from './icon.types.js';

package/dist/Icon/index.js

@@ -0,0 +1 @@
+export { default as Icon } from './Icon.svelte';

package/dist/Input/Input.svelte

@@ -0,0 +1,199 @@
+<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 { getContext } from 'svelte'
+    import Avatar from '../Avatar/Avatar.svelte'
+    import type { AvatarSize } from '../Avatar/avatar.types.js'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import {
+        type FieldGroupVariantProps, 
+        fieldGroupVariantWithRoot
+    } from '../FieldGroup/field-group.variants.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { inputDefaults, inputVariants } from './input.variants.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>