svelora 2.1.0

package/dist/Link/Link.svelte

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

package/dist/Link/Link.svelte.d.ts

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

package/dist/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Link } from './Link.svelte';
+export type { LinkProps } from './link.types.js';

package/dist/Link/index.js

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

package/dist/Link/link.types.d.ts

@@ -0,0 +1,86 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { LinkSlots } from './link.variants.js';
+export type LinkProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & Pick<HTMLButtonAttributes, 'name' | 'value' | 'form' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'popovertarget' | 'popovertargetaction'> & Pick<HTMLAnchorAttributes, 'download' | 'hreflang' | 'ping' | 'media' | 'referrerpolicy'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The destination URL for the anchor element.
+     * When omitted, renders as a `<button>` element.
+     */
+    href?: string;
+    /**
+     * Overrides the auto-detected active state.
+     * When omitted, the active state is inferred from the current route.
+     */
+    active?: boolean;
+    /**
+     * Requires an exact pathname match for active state detection.
+     * @default false
+     */
+    exact?: boolean;
+    /**
+     * Controls query parameter matching for active state detection.
+     * - `true` — requires an exact match of all query parameters.
+     * - `'partial'` — link's query params must be a subset of the current route.
+     * - `false` — query parameters are ignored.
+     * @default false
+     */
+    exactQuery?: boolean | 'partial';
+    /**
+     * Requires an exact hash match for active state detection.
+     * @default false
+     */
+    exactHash?: boolean;
+    /**
+     * Additional CSS class applied when the link is active.
+     */
+    activeClass?: string;
+    /**
+     * Additional CSS class applied when the link is inactive.
+     */
+    inactiveClass?: string;
+    /**
+     * Disables the link and prevents navigation.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Strips all default styling, applying only `class`, `activeClass`, and `inactiveClass`.
+     * @default false
+     */
+    raw?: boolean;
+    /**
+     * Treats the link as external, adding `rel="noopener noreferrer"` and `target="_blank"`.
+     * Auto-detected from the `href` when omitted.
+     */
+    external?: boolean;
+    /**
+     * The button type attribute. Only applies when rendering as `<button>`.
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * The link target attribute. Only applies when rendering as `<a>`.
+     */
+    target?: string;
+    /**
+     * The link rel attribute. Only applies when rendering as `<a>`.
+     */
+    rel?: string;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific link slots.
+     */
+    ui?: Partial<Record<LinkSlots, ClassNameValue>>;
+    /**
+     * Content rendered inside the link.
+     */
+    children?: Snippet;
+};

package/dist/Link/link.types.js

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

package/dist/Link/link.variants.d.ts

@@ -0,0 +1,113 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const linkVariants: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+    raw: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+}, undefined, {
+    active: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+    raw: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+    raw: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type LinkVariantProps = VariantProps<typeof linkVariants>;
+export type LinkSlots = keyof ReturnType<typeof linkVariants>;
+export declare const linkDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        active: {
+            true: {
+                base: string;
+            };
+            false: {
+                base: string;
+            };
+        };
+        disabled: {
+            true: {
+                base: string;
+            };
+            false: string;
+        };
+        raw: {
+            true: string;
+            false: string;
+        };
+    }, {
+        base: string;
+    }, {
+        active: {
+            true: {
+                base: string;
+            };
+            false: {
+                base: string;
+            };
+        };
+        disabled: {
+            true: {
+                base: string;
+            };
+            false: string;
+        };
+        raw: {
+            true: string;
+            false: string;
+        };
+    }, {
+        base: string;
+    }>;
+    slots: Partial<Record<LinkSlots, string>>;
+};

package/dist/Link/link.variants.js

@@ -0,0 +1,43 @@
+import { tv } from 'tailwind-variants';
+export const linkVariants = tv({
+    slots: {
+        base: 'focus-visible:outline-primary'
+    },
+    variants: {
+        active: {
+            true: {
+                base: 'text-primary'
+            },
+            false: {
+                base: 'text-on-surface-variant'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-75'
+            },
+            false: ''
+        },
+        raw: {
+            true: '',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        {
+            active: false,
+            disabled: false,
+            raw: false,
+            class: { base: 'hover:text-on-surface transition-colors' }
+        }
+    ],
+    defaultVariants: {
+        active: false,
+        disabled: false,
+        raw: false
+    }
+});
+export const linkDefaults = {
+    defaultVariants: linkVariants.defaultVariants,
+    slots: {}
+};

package/dist/Modal/Modal.svelte

@@ -0,0 +1,218 @@
+<script lang="ts" module>
+    import type { ModalProps } from './modal.types.js'
+
+    export type Props = ModalProps
+</script>
+
+<script lang="ts">
+    import { Dialog } from 'bits-ui'
+    import Button from '../Button/Button.svelte'
+    import { getComponentConfig } from '../config.js'
+    import { modalDefaults, modalVariants } from './modal.variants.js'
+
+    const config = getComponentConfig('modal', modalDefaults)
+
+    let {
+        open = $bindable(false),
+        onOpenChange,
+        onOpenChangeComplete,
+        trapFocus = true,
+        preventScroll = true,
+        onOpenAutoFocus,
+        onCloseAutoFocus,
+        onEscapeKeydown,
+        onInteractOutside,
+        forceMount,
+        restoreScrollDelay,
+        title,
+        description,
+        overlay: showOverlay = config.defaultVariants.overlay ?? true,
+        scrollable = config.defaultVariants.scrollable ?? false,
+        transition = config.defaultVariants.transition ?? 'scale',
+        size = config.defaultVariants.size ?? 'md',
+        fullscreen = false,
+        portal = true,
+        close: closeProp = true,
+        dismissible = true,
+        ui,
+        class: className,
+        children,
+        content: contentSlot,
+        header: headerSlot,
+        titleSlot,
+        descriptionSlot,
+        actions: actionsSlot,
+        body: bodySlot,
+        footer: footerSlot,
+        closeSlot
+    }: Props = $props()
+
+    const resolvedSize = $derived(fullscreen ? 'full' : size)
+    const resolvedTransition = $derived(
+        transition === false ? 'none' : transition === true ? 'scale' : transition
+    )
+
+    const showClose = $derived(!!closeProp)
+    const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
+
+    const hasTitle = $derived(!!title || !!titleSlot)
+    const hasDescription = $derived(!!description || !!descriptionSlot)
+    const hasHeading = $derived(hasTitle || hasDescription)
+    const hasHeader = $derived(
+        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
+    )
+
+    const variantSlots = $derived(
+        modalVariants({
+            transition: resolvedTransition,
+            size: resolvedSize,
+            overlay: showOverlay,
+            scrollable
+        })
+    )
+
+    const classes = $derived({
+        overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
+        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+        header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+        title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
+        description: variantSlots.description({
+            class: [config.slots.description, ui?.description]
+        }),
+        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
+        body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+        footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
+        close: variantSlots.close({ class: [config.slots.close, ui?.close] })
+    })
+
+    const contentProps = $derived.by(() => {
+        const behavior = dismissible ? ('close' as const) : ('ignore' as const)
+        return {
+            trapFocus,
+            preventScroll,
+            escapeKeydownBehavior: behavior,
+            interactOutsideBehavior: behavior,
+            onOpenAutoFocus,
+            onCloseAutoFocus,
+            onEscapeKeydown,
+            onInteractOutside,
+            forceMount,
+            restoreScrollDelay
+        }
+    })
+
+    function handleOpenChange(value: boolean) {
+        open = value
+        onOpenChange?.(value)
+    }
+</script>
+
+{#snippet titleEl()}
+    {#if titleSlot}{@render titleSlot()}{:else}{title}{/if}
+{/snippet}
+
+{#snippet descriptionEl()}
+    {#if descriptionSlot}{@render descriptionSlot()}{:else}{description}{/if}
+{/snippet}
+
+{#snippet modalContentInner()}
+    <Dialog.Content {...contentProps} class={[classes.content, !children ? className : undefined]}>
+        {#if contentSlot}
+            {#if hasHeading}
+                <div class="sr-only">
+                    {#if hasTitle}<Dialog.Title>{@render titleEl()}</Dialog.Title>{/if}
+                    {#if hasDescription}<Dialog.Description
+                            >{@render descriptionEl()}</Dialog.Description
+                        >{/if}
+                </div>
+            {/if}
+            {@render contentSlot()}
+        {:else}
+            {#if hasHeader}
+                <div class={classes.header}>
+                    {#if headerSlot}
+                        {@render headerSlot()}
+                    {:else}
+                        <div class={classes.wrapper}>
+                            {#if hasTitle}
+                                <Dialog.Title class={classes.title}
+                                    >{@render titleEl()}</Dialog.Title
+                                >
+                            {/if}
+                            {#if hasDescription}
+                                <Dialog.Description class={classes.description}
+                                    >{@render descriptionEl()}</Dialog.Description
+                                >
+                            {/if}
+                        </div>
+
+                        {#if actionsSlot}
+                            <div class={classes.actions}>{@render actionsSlot()}</div>
+                        {/if}
+
+                        {#if showClose || closeSlot}
+                            <Dialog.Close>
+                                {#snippet child({ props })}
+                                    {#if closeSlot}
+                                        <span {...props} class={classes.close}
+                                            >{@render closeSlot()}</span
+                                        >
+                                    {:else}
+                                        <Button
+                                            {...props}
+                                            leadingIcon={closeProps.icon ?? 'lucide:x'}
+                                            color={closeProps.color ?? 'surface'}
+                                            variant={closeProps.variant ?? 'ghost'}
+                                            size={closeProps.size ?? 'sm'}
+                                            square
+                                            aria-label="Close"
+                                            class={classes.close}
+                                        />
+                                    {/if}
+                                {/snippet}
+                            </Dialog.Close>
+                        {/if}
+                    {/if}
+                </div>
+            {/if}
+
+            {#if bodySlot}
+                <div class={classes.body}>{@render bodySlot()}</div>
+            {/if}
+
+            {#if footerSlot}
+                <div class={classes.footer}>{@render footerSlot()}</div>
+            {/if}
+        {/if}
+    </Dialog.Content>
+{/snippet}
+
+{#snippet modalPortalContent()}
+    {#if scrollable}
+        <Dialog.Overlay class={classes.overlay}>
+            {@render modalContentInner()}
+        </Dialog.Overlay>
+    {:else}
+        {#if showOverlay}
+            <Dialog.Overlay class={classes.overlay} />
+        {/if}
+        {@render modalContentInner()}
+    {/if}
+{/snippet}
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange} {onOpenChangeComplete}>
+    {#if children}
+        <Dialog.Trigger>
+            {#snippet child({ props })}
+                {@render children({ props })}
+            {/snippet}
+        </Dialog.Trigger>
+    {/if}
+
+    {#if portal}
+        <Dialog.Portal>{@render modalPortalContent()}</Dialog.Portal>
+    {:else}
+        {@render modalPortalContent()}
+    {/if}
+</Dialog.Root>

package/dist/Modal/Modal.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ModalProps } from './modal.types.js';
+export type Props = ModalProps;
+declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/Modal/ModalTriggerTestWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Modal from './Modal.svelte'
+</script>
+
+<Modal title="Trigger test" description="D">
+    {#snippet children({ props })}
+        <button data-testid="trigger" {...props}>Open</button>
+    {/snippet}
+    {#snippet body()}<p>Body</p>{/snippet}
+</Modal>

package/dist/Modal/ModalTriggerTestWrapper.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ModalTriggerTestWrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ModalTriggerTestWrapper = InstanceType<typeof ModalTriggerTestWrapper>;
+export default ModalTriggerTestWrapper;

package/dist/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal.svelte';
+export type { ModalProps } from './modal.types.js';

package/dist/Modal/index.js

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