svelora 2.1.0

package/dist/Textarea/Textarea.svelte

@@ -0,0 +1,215 @@
+<script lang="ts" module>
+    import type { TextareaProps } from './textarea.types.js'
+
+    export type Props = TextareaProps
+</script>
+
+<script lang="ts">
+    import { getContext } from 'svelte'
+    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 { textareaDefaults, textareaVariants } from './textarea.variants.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/Textarea/Textarea.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { TextareaProps } from './textarea.types.js';
+export type Props = TextareaProps;
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "value" | "ref">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Textarea } from './Textarea.svelte';
+export type { TextareaProps } from './textarea.types.js';

package/dist/Textarea/index.js

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

package/dist/Textarea/textarea.types.d.ts

@@ -0,0 +1,103 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { TextareaSlots, TextareaVariantProps } from './textarea.variants.js';
+export type TextareaProps = Omit<HTMLTextareaAttributes, 'class' | 'size'> & {
+    /**
+     * Bind a reference to the underlying HTMLTextAreaElement.
+     */
+    ref?: HTMLTextAreaElement | null;
+    /**
+     * The current value of the textarea. Supports two-way binding with `bind:value`.
+     */
+    value?: string;
+    /**
+     * Controls the visual style of the textarea.
+     * @default 'outline'
+     */
+    variant?: NonNullable<TextareaVariantProps['variant']>;
+    /**
+     * Sets the color scheme for focus ring and highlight.
+     * @default 'primary'
+     */
+    color?: NonNullable<TextareaVariantProps['color']>;
+    /**
+     * Controls the dimensions and text size of the textarea.
+     * @default 'md'
+     */
+    size?: NonNullable<TextareaVariantProps['size']>;
+    /**
+     * Emphasizes ring color like focus state, even when not focused.
+     * Automatically enabled when used inside a FormField with an error.
+     * @default false
+     */
+    highlight?: boolean;
+    /**
+     * Renders a loading spinner and optionally disables interaction.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon displayed as the loading indicator.
+     * Supports any valid Iconify icon name.
+     * @default Uses `icons.loading` from app config
+     */
+    loadingIcon?: string;
+    /**
+     * Icon displayed on the leading or trailing side.
+     * Position controlled by the `trailing` prop.
+     * Supports any valid Iconify icon name.
+     */
+    icon?: string;
+    /**
+     * Icon placed before the textarea value.
+     * Supports any valid Iconify icon name.
+     */
+    leadingIcon?: string;
+    /**
+     * Icon placed after the textarea value.
+     * Supports any valid Iconify icon name.
+     */
+    trailingIcon?: string;
+    /**
+     * Moves the icon to the trailing (right) side.
+     * Only takes effect when using the `icon` prop.
+     * @default false
+     */
+    trailing?: boolean;
+    /**
+     * Custom content rendered before the textarea.
+     * Takes precedence over `leadingIcon`.
+     */
+    leadingSlot?: Snippet;
+    /**
+     * Custom content rendered after the textarea.
+     * Takes precedence over `trailingIcon`.
+     */
+    trailingSlot?: Snippet;
+    /**
+     * Automatically adjusts textarea height based on content.
+     * Disables manual resizing when enabled.
+     * @default false
+     */
+    autoresize?: boolean;
+    /**
+     * The number of visible text lines.
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Maximum number of rows when autoresizing.
+     * Set to 0 for unlimited growth.
+     * @default 0
+     */
+    maxrows?: number;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific textarea slots.
+     */
+    ui?: Partial<Record<TextareaSlots, ClassNameValue>>;
+};

package/dist/Textarea/textarea.types.js

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