@ims360/svelte-ivory 0.3.0 → 0.3.3

package/dist/components/basic/Element.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>
+    import { merge } from '../../utils/functions';
+    import type {
+        HTMLAttributeAnchorTarget,
+        HTMLAttributes,
+        MouseEventHandler
+    } from 'svelte/elements';
+    import type { TransitionConfig } from 'svelte/transition';
+
+    export type AnchorAttributes = {
+        download?: string | undefined | null;
+        href?: string | undefined | null;
+        hreflang?: string | undefined | null;
+        rel?: string | undefined | null;
+        target?: HTMLAttributeAnchorTarget | undefined | null;
+        type?: string | undefined | null;
+        referrerpolicy?: ReferrerPolicy | undefined | null;
+    };
+
+    export type ButtonAttributes = {
+        onclick: MouseEventHandler<HTMLElement>;
+        disabled?: boolean | undefined | null;
+        form?: string | undefined | null;
+        name?: string | undefined | null;
+        type?: 'submit' | 'reset' | 'button' | undefined | null;
+        value?: string | string[] | number | undefined | null;
+    };
+
+    export type ElementProps = HTMLAttributes<HTMLElement> & {
+        inTransition?: (element: HTMLElement) => TransitionConfig;
+        outTransition?: (element: HTMLElement) => TransitionConfig;
+    } & (AnchorAttributes | ButtonAttributes | HTMLAttributes<HTMLDivElement>);
+</script>
+
+<script lang="ts">
+    const noop = () => ({});
+    let {
+        div = $bindable(),
+        inTransition = noop,
+        outTransition = noop,
+        ...props
+    }: ElementProps & { div?: HTMLElement } = $props();
+
+    function isAnchor(props: ElementProps): props is AnchorAttributes {
+        return 'href' in props && typeof props.href !== 'undefined';
+    }
+
+    function isButton(props: ElementProps): props is ButtonAttributes {
+        return ('onclick' in props && typeof props.onclick !== 'undefined') || 'type' in props;
+    }
+</script>
+
+{#if 'disabled' in props && props.disabled}
+    <div
+        {...props}
+        in:inTransition
+        out:outTransition
+        class={merge(props.class, 'pointer-events-none opacity-60 grayscale')}
+        bind:this={div}
+    >
+        {@render props.children?.()}
+    </div>
+{:else if isAnchor(props)}
+    <a {...props} in:inTransition out:outTransition bind:this={div}>
+        {@render props.children?.()}
+    </a>
+{:else if isButton(props)}
+    <button
+        {...props}
+        in:inTransition
+        out:outTransition
+        type={props.type || 'button'}
+        bind:this={div}
+    >
+        {@render props.children?.()}
+    </button>
+{:else}
+    <div {...props} in:inTransition out:outTransition bind:this={div}>
+        {@render props.children?.()}
+    </div>
+{/if}

package/dist/components/basic/Element.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributeAnchorTarget, HTMLAttributes, MouseEventHandler } from 'svelte/elements';
+import type { TransitionConfig } from 'svelte/transition';
+export type AnchorAttributes = {
+    download?: string | undefined | null;
+    href?: string | undefined | null;
+    hreflang?: string | undefined | null;
+    rel?: string | undefined | null;
+    target?: HTMLAttributeAnchorTarget | undefined | null;
+    type?: string | undefined | null;
+    referrerpolicy?: ReferrerPolicy | undefined | null;
+};
+export type ButtonAttributes = {
+    onclick: MouseEventHandler<HTMLElement>;
+    disabled?: boolean | undefined | null;
+    form?: string | undefined | null;
+    name?: string | undefined | null;
+    type?: 'submit' | 'reset' | 'button' | undefined | null;
+    value?: string | string[] | number | undefined | null;
+};
+export type ElementProps = HTMLAttributes<HTMLElement> & {
+    inTransition?: (element: HTMLElement) => TransitionConfig;
+    outTransition?: (element: HTMLElement) => TransitionConfig;
+} & (AnchorAttributes | ButtonAttributes | HTMLAttributes<HTMLDivElement>);
+type $$ComponentProps = ElementProps & {
+    div?: HTMLElement;
+};
+declare const Element: import("svelte").Component<$$ComponentProps, {}, "div">;
+type Element = ReturnType<typeof Element>;
+export default Element;
+//# sourceMappingURL=Element.svelte.d.ts.map

package/dist/components/basic/Element.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Element.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/Element.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EACR,yBAAyB,EACzB,cAAc,EACd,iBAAiB,EACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACrC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,yBAAyB,GAAG,SAAS,GAAG,IAAI,CAAC;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,OAAO,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;CACzD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACrD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,gBAAgB,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,gBAAgB,CAAC;CAC9D,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE9E,KAAK,gBAAgB,GAAI,YAAY,GAAG;IAAE,GAAG,CAAC,EAAE,WAAW,CAAA;CAAE,CAAC;AAyC/D,QAAA,MAAM,OAAO,yDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/basic/MarkedText.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+
+    export type MarkedTextProps = {
+        class?: ClassValue;
+        content: string | undefined;
+        search: string | undefined;
+        element?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+        id?: string | undefined;
+        children?: Snippet<[{ match: string }]>;
+    };
+</script>
+
+<script lang="ts">
+    let {
+        class: clazz = 'shrink-0 whitespace-nowrap text-ellipsis overflow-hidden max-w-full',
+        content,
+        search,
+        element = 'p',
+        id,
+        children
+    }: MarkedTextProps = $props();
+
+    /**
+     * @param str
+     * @param search
+     * @return tokens: list with {match, prev}, where 'match' matches the search (case-insensitive) and prev is the string between 'match' and the prev 'match' (or start)
+     * @return tail: the string after the last match
+     */
+    const split = (str: string, search: string) => {
+        const matchLen = search.length;
+        var tokens: { match: string; prev: string }[] = [];
+        let pos = str.toLowerCase().search(search.toLowerCase());
+        while (pos != -1) {
+            tokens.push({
+                match: str.slice(pos, pos + matchLen),
+                prev: str.slice(0, pos)
+            });
+            str = str.slice(pos + matchLen);
+            pos = str.search(search);
+        }
+        return {
+            tokens,
+            tail: str
+        };
+    };
+
+    const { tokens, tail } = $derived.by(() => {
+        if (!search || !content) return { tokens: [], tail: content };
+        return split(content, search);
+    });
+</script>
+
+<!-- @component
+    marks text-parts matching the given search parameter 
+-->
+<svelte:element this={element} class={[clazz]} {id}>
+    {#each tokens as token (token)}
+        {token.prev}
+        {#if children}
+            {@render children?.({ match: token.match })}
+        {:else}
+            <mark class="bg-primary-500 text-surface-50 shrink-0 rounded-sm px-px py-0.5">
+                {token.match}
+            </mark>
+        {/if}
+    {/each}
+    {tail}
+</svelte:element>

package/dist/components/basic/MarkedText.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export type MarkedTextProps = {
+    class?: ClassValue;
+    content: string | undefined;
+    search: string | undefined;
+    element?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    id?: string | undefined;
+    children?: Snippet<[{
+        match: string;
+    }]>;
+};
+/** marks text-parts matching the given search parameter */
+declare const MarkedText: import("svelte").Component<MarkedTextProps, {}, "">;
+type MarkedText = ReturnType<typeof MarkedText>;
+export default MarkedText;
+//# sourceMappingURL=MarkedText.svelte.d.ts.map

package/dist/components/basic/MarkedText.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkedText.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/MarkedText.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxD,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CAC3C,CAAC;AA6DN,2DAA2D;AAC3D,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/basic/Textarea.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { merge } from '../../utils/functions';
+    import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+
+    interface Props extends HTMLAttributes<HTMLTextAreaElement> {
+        class?: ClassValue;
+        value?: string;
+        disabled?: boolean;
+        placeholder?: string;
+        name?: string;
+    }
+
+    let { class: clazz, value = $bindable(), ...rest }: Props = $props();
+
+    let textareaEl = $state<HTMLTextAreaElement>();
+
+    function autoResize() {
+        if (!textareaEl) return;
+        textareaEl.style.height = 'auto';
+        textareaEl.style.height = `${textareaEl.scrollHeight}px`;
+    }
+
+    $effect(() => {
+        value;
+        autoResize();
+    });
+
+    export function focus() {
+        textareaEl?.focus();
+    }
+
+    export function isActive() {
+        return document.activeElement === textareaEl;
+    }
+</script>
+
+<textarea
+    class={merge(
+        'max-h-96 w-full resize-none overflow-y-auto border-none bg-transparent ring-0 outline-0 transition-all',
+        clazz
+    )}
+    bind:this={textareaEl}
+    bind:value
+    rows="1"
+    {...rest}
+></textarea>

package/dist/components/basic/Textarea.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLTextAreaElement> {
+    class?: ClassValue;
+    value?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+}
+declare const Textarea: import("svelte").Component<Props, {
+    focus: () => void;
+    isActive: () => boolean;
+}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;
+//# sourceMappingURL=Textarea.svelte.d.ts.map

package/dist/components/basic/Textarea.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/Textarea.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG9D,UAAU,KAAM,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACvD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAqCL,QAAA,MAAM,QAAQ;;;WAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/basic/checkbox/Checkbox.svelte

@@ -7,7 +7,7 @@
     import type { ClassValue } from 'svelte/elements';
     import { scale } from 'svelte/transition';
 
-    export interface CheckboxProps extends IvoryComponent<HTMLElement> {
+    export type CheckboxProps = IvoryComponent<HTMLElement> & {
         class?: ClassValue;
         /** `checked` has prioriy over `partial` */
         checked?: boolean | null;
@@ -17,7 +17,7 @@
         /** if true, the onclick handler will not be called */
         disabled?: boolean;
         onclick?: () => void;
-    }
+    };
 </script>
 
 <!-- 

package/dist/components/basic/checkbox/Checkbox.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { IvoryComponent } from '../../../types';
 import type { ClassValue } from 'svelte/elements';
-export interface CheckboxProps extends IvoryComponent<HTMLElement> {
+export type CheckboxProps = IvoryComponent<HTMLElement> & {
     class?: ClassValue;
     /** `checked` has prioriy over `partial` */
     checked?: boolean | null;
@@ -10,7 +10,7 @@ export interface CheckboxProps extends IvoryComponent<HTMLElement> {
     /** if true, the onclick handler will not be called */
     disabled?: boolean;
     onclick?: () => void;
-}
+};
 /** It's a checkbox */
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/components/basic/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAuDL,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAuDN,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/basic/index.d.ts

@@ -1,5 +1,6 @@
-export * from './checkbox/Checkbox.svelte';
-export { default as Checkbox } from './checkbox/Checkbox.svelte';
-export * from './toggle/Toggle.svelte';
-export { default as Toggle } from './toggle/Toggle.svelte';
+export { default as Checkbox, type CheckboxProps } from './checkbox/Checkbox.svelte';
+export { default as Element, type AnchorAttributes, type ButtonAttributes, type ElementProps } from './Element.svelte';
+export { default as MarkedText, type MarkedTextProps } from './MarkedText.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Toggle, type ToggleProps } from './toggle/Toggle.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/basic/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/basic/index.js

@@ -1,4 +1,5 @@
-export * from './checkbox/Checkbox.svelte';
 export { default as Checkbox } from './checkbox/Checkbox.svelte';
-export * from './toggle/Toggle.svelte';
+export { default as Element } from './Element.svelte';
+export { default as MarkedText } from './MarkedText.svelte';
+export { default as Textarea } from './Textarea.svelte';
 export { default as Toggle } from './toggle/Toggle.svelte';

package/dist/components/basic/toggle/Toggle.svelte

@@ -4,11 +4,11 @@
     import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
 
-    export interface ToggleProps extends IvoryComponent<HTMLElement> {
+    export type ToggleProps = IvoryComponent<HTMLElement> & {
         value?: boolean;
         class?: ClassValue;
         children?: Snippet;
-    }
+    };
 </script>
 
 <script lang="ts">

package/dist/components/basic/toggle/Toggle.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { IvoryComponent } from '../../../types';
 import type { Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
-export interface ToggleProps extends IvoryComponent<HTMLElement> {
+export type ToggleProps = IvoryComponent<HTMLElement> & {
     value?: boolean;
     class?: ClassValue;
     children?: Snippet;
-}
+};
 declare const Toggle: import("svelte").Component<ToggleProps, {}, "">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/components/basic/toggle/Toggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AA8BL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AA8BN,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/inputs/TextareaInput.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import TextArea from '../basic/Textarea.svelte';
+    import Input, { type InputProps } from './Input.svelte';
+
+    let { ...props }: InputProps<string> = $props();
+
+    let inputElement = $state<TextArea>();
+    export function focus() {
+        inputElement?.focus();
+    }
+</script>
+
+<Input {...props}>
+    {#snippet children(inputProps)}
+        {@const { name } = props.form.as?.('text')}
+        <TextArea
+            {...inputProps}
+            {name}
+            bind:value={props.form.value, props.form.set}
+            bind:this={inputElement}
+        />
+    {/snippet}
+</Input>

package/dist/components/inputs/TextareaInput.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type InputProps } from './Input.svelte';
+declare const TextareaInput: import("svelte").Component<InputProps<string>, {
+    focus: () => void;
+}, "">;
+type TextareaInput = ReturnType<typeof TextareaInput>;
+export default TextareaInput;
+//# sourceMappingURL=TextareaInput.svelte.d.ts.map

package/dist/components/inputs/TextareaInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/TextareaInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAuBxD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/inputs/index.d.ts

@@ -10,6 +10,7 @@ export { default as PasswordCreateInput, type PasswordCreateInputProps, type Pas
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as Select } from './select/Select.svelte';
 export { default as SelectOption } from './select/SelectOption.svelte';
+export { default as TextareaInput } from './TextareaInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
 export { default as ToggleInput } from './ToggleInput.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACH,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EAC3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACH,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EAC3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/inputs/index.js

@@ -10,5 +10,6 @@ export { default as PasswordCreateInput } from './PasswordCreateInput.svelte';
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as Select } from './select/Select.svelte';
 export { default as SelectOption } from './select/SelectOption.svelte';
+export { default as TextareaInput } from './TextareaInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
 export { default as ToggleInput } from './ToggleInput.svelte';

package/dist/components/table/Column.svelte

@@ -3,6 +3,7 @@
     import { merge } from '../../utils/functions';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
+    import Element from '../basic/Element.svelte';
     import type { ColumnConfig } from './columnController.svelte';
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
@@ -12,6 +13,7 @@
         /** If the type is incorrect pass the "row" property with the right type */
         children: Snippet;
         onclick?: (e: Event) => void | Promise<void>;
+        href?: string;
         /** Cannot be used with resizable columns*/
         ignoreWidth?: boolean;
         offsetNestingLevel?: number;
@@ -21,37 +23,38 @@
 <script lang="ts">
     let {
         class: clazz,
-        children,
         onclick,
+        href,
         ignoreWidth = false,
+        offsetNestingLevel = 0,
         // ColumnConfig
+        id,
+        width,
+        minWidth,
         resizable = true,
-        offsetNestingLevel = 0,
+        header,
         ...props
     }: ColumnProps = $props();
 
     // Register the new column if this is the first table row that was rendered
     const tableContext = getTableContext();
-    const column = tableContext.registerColumn({ resizable, ...props });
+    const column = tableContext.registerColumn({ id, width, minWidth, resizable, header });
     const rowContext = getRowContext();
 
     const finalOnClick = $derived(onclick || rowContext.onclick);
-    const allowClicking = $derived(!!(onclick || rowContext.onclick));
-
-    const element = $derived.by(() => {
-        if (finalOnClick) return 'button';
-        if (rowContext.href) return 'a';
-        return 'div';
+    const finalHref = $derived.by(() => {
+        if (finalOnClick) return undefined;
+        return href || rowContext.href;
     });
 
     // passes updated props to the column
     $effect(() => {
-        column.updateConfig({ resizable, ...props });
+        column.updateConfig({ resizable, minWidth, id, header });
     });
 
     // this must be separate to the above effect, since otherwise the width would be reset on every scroll
     $effect(() => {
-        if (!resizable && typeof props.width !== 'undefined') column.width = props.width;
+        if (!resizable && typeof width !== 'undefined') column.width = width;
     });
 
     const widthStyle = $derived(
@@ -60,11 +63,10 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<svelte:element
-    this={element}
-    onclick={allowClicking ? finalOnClick : undefined}
-    href={!allowClicking ? rowContext.href : undefined}
-    type={allowClicking ? 'button' : undefined}
+<Element
+    {...props}
+    onclick={finalOnClick}
+    href={finalHref}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
     class={merge([
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
@@ -72,6 +74,4 @@
         theme.current.table?.column?.class,
         clazz
     ])}
->
-    {@render children()}
-</svelte:element>
+/>

package/dist/components/table/Column.svelte.d.ts

@@ -6,6 +6,7 @@ export interface ColumnProps extends ColumnConfig {
     /** If the type is incorrect pass the "row" property with the right type */
     children: Snippet;
     onclick?: (e: Event) => void | Promise<void>;
+    href?: string;
     /** Cannot be used with resizable columns*/
     ignoreWidth?: boolean;
     offsetNestingLevel?: number;

package/dist/components/table/Column.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAyDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAwDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.3.0",
+    "version": "0.3.3",
     "keywords": [
         "svelte"
     ],

package/src/lib/components/basic/Element.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>
+    import { merge } from '$lib/utils/functions';
+    import type {
+        HTMLAttributeAnchorTarget,
+        HTMLAttributes,
+        MouseEventHandler
+    } from 'svelte/elements';
+    import type { TransitionConfig } from 'svelte/transition';
+
+    export type AnchorAttributes = {
+        download?: string | undefined | null;
+        href?: string | undefined | null;
+        hreflang?: string | undefined | null;
+        rel?: string | undefined | null;
+        target?: HTMLAttributeAnchorTarget | undefined | null;
+        type?: string | undefined | null;
+        referrerpolicy?: ReferrerPolicy | undefined | null;
+    };
+
+    export type ButtonAttributes = {
+        onclick: MouseEventHandler<HTMLElement>;
+        disabled?: boolean | undefined | null;
+        form?: string | undefined | null;
+        name?: string | undefined | null;
+        type?: 'submit' | 'reset' | 'button' | undefined | null;
+        value?: string | string[] | number | undefined | null;
+    };
+
+    export type ElementProps = HTMLAttributes<HTMLElement> & {
+        inTransition?: (element: HTMLElement) => TransitionConfig;
+        outTransition?: (element: HTMLElement) => TransitionConfig;
+    } & (AnchorAttributes | ButtonAttributes | HTMLAttributes<HTMLDivElement>);
+</script>
+
+<script lang="ts">
+    const noop = () => ({});
+    let {
+        div = $bindable(),
+        inTransition = noop,
+        outTransition = noop,
+        ...props
+    }: ElementProps & { div?: HTMLElement } = $props();
+
+    function isAnchor(props: ElementProps): props is AnchorAttributes {
+        return 'href' in props && typeof props.href !== 'undefined';
+    }
+
+    function isButton(props: ElementProps): props is ButtonAttributes {
+        return ('onclick' in props && typeof props.onclick !== 'undefined') || 'type' in props;
+    }
+</script>
+
+{#if 'disabled' in props && props.disabled}
+    <div
+        {...props}
+        in:inTransition
+        out:outTransition
+        class={merge(props.class, 'pointer-events-none opacity-60 grayscale')}
+        bind:this={div}
+    >
+        {@render props.children?.()}
+    </div>
+{:else if isAnchor(props)}
+    <a {...props} in:inTransition out:outTransition bind:this={div}>
+        {@render props.children?.()}
+    </a>
+{:else if isButton(props)}
+    <button
+        {...props}
+        in:inTransition
+        out:outTransition
+        type={props.type || 'button'}
+        bind:this={div}
+    >
+        {@render props.children?.()}
+    </button>
+{:else}
+    <div {...props} in:inTransition out:outTransition bind:this={div}>
+        {@render props.children?.()}
+    </div>
+{/if}

package/src/lib/components/basic/MarkedText.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+
+    export type MarkedTextProps = {
+        class?: ClassValue;
+        content: string | undefined;
+        search: string | undefined;
+        element?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+        id?: string | undefined;
+        children?: Snippet<[{ match: string }]>;
+    };
+</script>
+
+<script lang="ts">
+    let {
+        class: clazz = 'shrink-0 whitespace-nowrap text-ellipsis overflow-hidden max-w-full',
+        content,
+        search,
+        element = 'p',
+        id,
+        children
+    }: MarkedTextProps = $props();
+
+    /**
+     * @param str
+     * @param search
+     * @return tokens: list with {match, prev}, where 'match' matches the search (case-insensitive) and prev is the string between 'match' and the prev 'match' (or start)
+     * @return tail: the string after the last match
+     */
+    const split = (str: string, search: string) => {
+        const matchLen = search.length;
+        var tokens: { match: string; prev: string }[] = [];
+        let pos = str.toLowerCase().search(search.toLowerCase());
+        while (pos != -1) {
+            tokens.push({
+                match: str.slice(pos, pos + matchLen),
+                prev: str.slice(0, pos)
+            });
+            str = str.slice(pos + matchLen);
+            pos = str.search(search);
+        }
+        return {
+            tokens,
+            tail: str
+        };
+    };
+
+    const { tokens, tail } = $derived.by(() => {
+        if (!search || !content) return { tokens: [], tail: content };
+        return split(content, search);
+    });
+</script>
+
+<!-- @component
+    marks text-parts matching the given search parameter 
+-->
+<svelte:element this={element} class={[clazz]} {id}>
+    {#each tokens as token (token)}
+        {token.prev}
+        {#if children}
+            {@render children?.({ match: token.match })}
+        {:else}
+            <mark class="bg-primary-500 text-surface-50 shrink-0 rounded-sm px-px py-0.5">
+                {token.match}
+            </mark>
+        {/if}
+    {/each}
+    {tail}
+</svelte:element>

package/src/lib/components/basic/Textarea.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { merge } from '$lib/utils/functions';
+    import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+
+    interface Props extends HTMLAttributes<HTMLTextAreaElement> {
+        class?: ClassValue;
+        value?: string;
+        disabled?: boolean;
+        placeholder?: string;
+        name?: string;
+    }
+
+    let { class: clazz, value = $bindable(), ...rest }: Props = $props();
+
+    let textareaEl = $state<HTMLTextAreaElement>();
+
+    function autoResize() {
+        if (!textareaEl) return;
+        textareaEl.style.height = 'auto';
+        textareaEl.style.height = `${textareaEl.scrollHeight}px`;
+    }
+
+    $effect(() => {
+        value;
+        autoResize();
+    });
+
+    export function focus() {
+        textareaEl?.focus();
+    }
+
+    export function isActive() {
+        return document.activeElement === textareaEl;
+    }
+</script>
+
+<textarea
+    class={merge(
+        'max-h-96 w-full resize-none overflow-y-auto border-none bg-transparent ring-0 outline-0 transition-all',
+        clazz
+    )}
+    bind:this={textareaEl}
+    bind:value
+    rows="1"
+    {...rest}
+></textarea>

package/src/lib/components/basic/checkbox/Checkbox.svelte

@@ -7,7 +7,7 @@
     import type { ClassValue } from 'svelte/elements';
     import { scale } from 'svelte/transition';
 
-    export interface CheckboxProps extends IvoryComponent<HTMLElement> {
+    export type CheckboxProps = IvoryComponent<HTMLElement> & {
         class?: ClassValue;
         /** `checked` has prioriy over `partial` */
         checked?: boolean | null;
@@ -17,7 +17,7 @@
         /** if true, the onclick handler will not be called */
         disabled?: boolean;
         onclick?: () => void;
-    }
+    };
 </script>
 
 <!-- 

package/src/lib/components/basic/index.ts

@@ -1,4 +1,10 @@
-export * from './checkbox/Checkbox.svelte';
-export { default as Checkbox } from './checkbox/Checkbox.svelte';
-export * from './toggle/Toggle.svelte';
-export { default as Toggle } from './toggle/Toggle.svelte';
+export { default as Checkbox, type CheckboxProps } from './checkbox/Checkbox.svelte';
+export {
+    default as Element,
+    type AnchorAttributes,
+    type ButtonAttributes,
+    type ElementProps
+} from './Element.svelte';
+export { default as MarkedText, type MarkedTextProps } from './MarkedText.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Toggle, type ToggleProps } from './toggle/Toggle.svelte';

package/src/lib/components/basic/toggle/Toggle.svelte

@@ -4,11 +4,11 @@
     import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
 
-    export interface ToggleProps extends IvoryComponent<HTMLElement> {
+    export type ToggleProps = IvoryComponent<HTMLElement> & {
         value?: boolean;
         class?: ClassValue;
         children?: Snippet;
-    }
+    };
 </script>
 
 <script lang="ts">

package/src/lib/components/inputs/TextareaInput.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import TextArea from '../basic/Textarea.svelte';
+    import Input, { type InputProps } from './Input.svelte';
+
+    let { ...props }: InputProps<string> = $props();
+
+    let inputElement = $state<TextArea>();
+    export function focus() {
+        inputElement?.focus();
+    }
+</script>
+
+<Input {...props}>
+    {#snippet children(inputProps)}
+        {@const { name } = props.form.as?.('text')}
+        <TextArea
+            {...inputProps}
+            {name}
+            bind:value={props.form.value, props.form.set}
+            bind:this={inputElement}
+        />
+    {/snippet}
+</Input>

package/src/lib/components/inputs/index.ts

@@ -17,5 +17,6 @@ export {
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as Select } from './select/Select.svelte';
 export { default as SelectOption } from './select/SelectOption.svelte';
+export { default as TextareaInput } from './TextareaInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
 export { default as ToggleInput } from './ToggleInput.svelte';

package/src/lib/components/table/Column.svelte

@@ -3,6 +3,7 @@
     import { merge } from '$lib/utils/functions';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
+    import Element from '../basic/Element.svelte';
     import type { ColumnConfig } from './columnController.svelte';
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
@@ -12,6 +13,7 @@
         /** If the type is incorrect pass the "row" property with the right type */
         children: Snippet;
         onclick?: (e: Event) => void | Promise<void>;
+        href?: string;
         /** Cannot be used with resizable columns*/
         ignoreWidth?: boolean;
         offsetNestingLevel?: number;
@@ -21,37 +23,38 @@
 <script lang="ts">
     let {
         class: clazz,
-        children,
         onclick,
+        href,
         ignoreWidth = false,
+        offsetNestingLevel = 0,
         // ColumnConfig
+        id,
+        width,
+        minWidth,
         resizable = true,
-        offsetNestingLevel = 0,
+        header,
         ...props
     }: ColumnProps = $props();
 
     // Register the new column if this is the first table row that was rendered
     const tableContext = getTableContext();
-    const column = tableContext.registerColumn({ resizable, ...props });
+    const column = tableContext.registerColumn({ id, width, minWidth, resizable, header });
     const rowContext = getRowContext();
 
     const finalOnClick = $derived(onclick || rowContext.onclick);
-    const allowClicking = $derived(!!(onclick || rowContext.onclick));
-
-    const element = $derived.by(() => {
-        if (finalOnClick) return 'button';
-        if (rowContext.href) return 'a';
-        return 'div';
+    const finalHref = $derived.by(() => {
+        if (finalOnClick) return undefined;
+        return href || rowContext.href;
     });
 
     // passes updated props to the column
     $effect(() => {
-        column.updateConfig({ resizable, ...props });
+        column.updateConfig({ resizable, minWidth, id, header });
     });
 
     // this must be separate to the above effect, since otherwise the width would be reset on every scroll
     $effect(() => {
-        if (!resizable && typeof props.width !== 'undefined') column.width = props.width;
+        if (!resizable && typeof width !== 'undefined') column.width = width;
     });
 
     const widthStyle = $derived(
@@ -60,11 +63,10 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<svelte:element
-    this={element}
-    onclick={allowClicking ? finalOnClick : undefined}
-    href={!allowClicking ? rowContext.href : undefined}
-    type={allowClicking ? 'button' : undefined}
+<Element
+    {...props}
+    onclick={finalOnClick}
+    href={finalHref}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
     class={merge([
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
@@ -72,6 +74,4 @@
         theme.current.table?.column?.class,
         clazz
     ])}
->
-    {@render children()}
-</svelte:element>
+/>