svelora 3.0.5 → 3.0.7

package/dist/List/ListItem.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { getContext } from "svelte";
+import { listVariants } from "./list.variants.js";
+let { title, description, interactive = false, disabled = false, href, target, class: className, leading, trailing, children, ...restProps } = $props();
+// Get the parent list variant, default to 'default' if used outside a List
+const getListVariant = getContext("list-variant");
+let parentVariant = $derived(getListVariant ? getListVariant() : "default");
+// Determine if it should be interactive automatically if it's a link
+let isInteractive = $derived(interactive || !!href);
+let styles = $derived(listVariants({
+	variant: parentVariant,
+	interactive: isInteractive,
+	disabled
+}));
+// Using svelte:element with conditional tags and spreading restProps causes TS errors.
+// We use a snippet to keep the markup DRY while using explicit if/else tags.
+</script>
+
+{#snippet contentWrapper()}
+    {#if leading}
+        <div class={styles.leading()}>
+            {@render leading()}
+        </div>
+    {/if}
+
+    <div class={styles.itemContent()}>
+        {#if children}
+            {@render children()}
+        {:else}
+            {#if title}
+                <div class={styles.itemTitle()}>{title}</div>
+            {/if}
+            {#if description}
+                <div class={styles.itemDescription()}>{description}</div>
+            {/if}
+        {/if}
+    </div>
+
+    {#if trailing}
+        <div class={styles.trailing()}>
+            {@render trailing()}
+        </div>
+    {/if}
+{/snippet}
+
+<li>
+    {#if href}
+        <a 
+            {href}
+            {target}
+            class={twMerge(styles.item(), className)}
+            {...restProps as any}
+        >
+            {@render contentWrapper()}
+        </a>
+    {:else}
+        <div 
+            class={twMerge(styles.item(), className)}
+            {...restProps as any}
+        >
+            {@render contentWrapper()}
+        </div>
+    {/if}
+</li>

package/dist/List/ListItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ListItemProps } from './list.types.js';
+declare const ListItem: import("svelte").Component<ListItemProps, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/List/index.d.ts

@@ -0,0 +1,5 @@
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+export { List, ListItem };
+export * from './list.types.js';
+export * from './list.variants.js';

package/dist/List/index.js

@@ -0,0 +1,5 @@
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+export { List, ListItem };
+export * from './list.types.js';
+export * from './list.variants.js';

package/dist/List/list.types.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLLiAttributes } from 'svelte/elements';
+import type { ListVariantProps } from './list.variants.js';
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * The variant of the list.
+     * @default 'default'
+     */
+    variant?: ListVariantProps['variant'];
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Content of the list.
+     */
+    children?: Snippet;
+}
+export interface ListItemProps extends HTMLLiAttributes {
+    /**
+     * Title of the list item.
+     */
+    title?: string;
+    /**
+     * Description below the title.
+     */
+    description?: string;
+    /**
+     * Whether the item is interactive (hover/active states).
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional href. If provided, the item renders as an anchor tag `<a>`.
+     */
+    href?: string;
+    /**
+     * Target attribute for the anchor tag if `href` is provided.
+     */
+    target?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Snippet for the leading section (e.g., Avatar, Icon).
+     */
+    leading?: Snippet;
+    /**
+     * Snippet for the trailing section (e.g., Badge, Chevron, Switch).
+     */
+    trailing?: Snippet;
+    /**
+     * Snippet to replace the default title/description content completely.
+     */
+    children?: Snippet;
+}

package/dist/List/list.types.js

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

package/dist/List/list.variants.d.ts

@@ -0,0 +1,99 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const listVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+            item: string;
+        };
+        separated: {
+            base: string;
+            item: string;
+        };
+    };
+    interactive: {
+        true: {
+            item: string;
+        };
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    itemContent: string;
+    itemTitle: string;
+    itemDescription: string;
+    leading: string;
+    trailing: string;
+}, undefined, {
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+            item: string;
+        };
+        separated: {
+            base: string;
+            item: string;
+        };
+    };
+    interactive: {
+        true: {
+            item: string;
+        };
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    itemContent: string;
+    itemTitle: string;
+    itemDescription: string;
+    leading: string;
+    trailing: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+            item: string;
+        };
+        separated: {
+            base: string;
+            item: string;
+        };
+    };
+    interactive: {
+        true: {
+            item: string;
+        };
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    itemContent: string;
+    itemTitle: string;
+    itemDescription: string;
+    leading: string;
+    trailing: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ListVariantProps = VariantProps<typeof listVariants>;

package/dist/List/list.variants.js

@@ -0,0 +1,42 @@
+import { tv } from 'tailwind-variants';
+export const listVariants = tv({
+    slots: {
+        base: 'flex flex-col w-full text-surface-900 dark:text-surface-50',
+        item: 'flex items-center justify-between w-full px-4 py-3',
+        itemContent: 'flex flex-col flex-1 min-w-0',
+        itemTitle: 'text-sm font-medium truncate',
+        itemDescription: 'text-xs text-surface-500 dark:text-surface-400 truncate mt-0.5',
+        leading: 'mr-3 shrink-0 flex items-center justify-center',
+        trailing: 'ml-3 shrink-0 flex items-center justify-center text-surface-500 dark:text-surface-400'
+    },
+    variants: {
+        variant: {
+            default: {
+                base: ''
+            },
+            bordered: {
+                base: 'border border-outline-variant rounded-lg overflow-hidden',
+                item: 'border-b border-outline-variant last:border-b-0'
+            },
+            separated: {
+                base: 'gap-2',
+                item: 'rounded-lg border border-outline-variant'
+            }
+        },
+        interactive: {
+            true: {
+                item: 'transition-colors hover:bg-surface-100 dark:hover:bg-surface-800 cursor-pointer active:bg-surface-200 dark:active:bg-surface-700'
+            }
+        },
+        disabled: {
+            true: {
+                item: 'opacity-50 cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent active:bg-transparent dark:active:bg-transparent'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        interactive: false,
+        disabled: false
+    }
+});

package/dist/Marquee/Marquee.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { marqueeVariants } from "./marquee.variants.js";
+let { direction = "left", pauseOnHover = false, duration = "40s", gap = "1rem", repeat = 2, class: className, children, ...restProps } = $props();
+let styles = $derived(marqueeVariants({
+	direction,
+	pauseOnHover
+}));
+</script>
+
+<div 
+    class={twMerge(styles.root() as string, className)} 
+    style:--gap={gap}
+    style:--duration={duration}
+    {...restProps}
+>
+    {#each Array(Math.max(2, repeat)) as _}
+        <div class={styles.content() as string}>
+            {@render children?.()}
+        </div>
+    {/each}
+</div>
+
+<style>
+    /* Injected keyframes for marquee animation since it might not be in tailwind config */
+    :global(.animate-marquee) {
+        animation: marquee var(--duration) linear infinite;
+    }
+    
+    :global(.animate-marquee-vertical) {
+        animation: marquee-vertical var(--duration) linear infinite;
+    }
+
+    @keyframes marquee {
+        0% {
+            transform: translateX(0);
+        }
+        100% {
+            transform: translateX(calc(-100% - var(--gap)));
+        }
+    }
+
+    @keyframes marquee-vertical {
+        0% {
+            transform: translateY(0);
+        }
+        100% {
+            transform: translateY(calc(-100% - var(--gap)));
+        }
+    }
+</style>

package/dist/Marquee/Marquee.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MarqueeProps } from './marquee.types.js';
+declare const Marquee: import("svelte").Component<MarqueeProps, {}, "">;
+type Marquee = ReturnType<typeof Marquee>;
+export default Marquee;

package/dist/Marquee/index.d.ts

@@ -0,0 +1,4 @@
+import Marquee from './Marquee.svelte';
+export { Marquee };
+export * from './marquee.types.js';
+export * from './marquee.variants.js';

package/dist/Marquee/index.js

@@ -0,0 +1,4 @@
+import Marquee from './Marquee.svelte';
+export { Marquee };
+export * from './marquee.types.js';
+export * from './marquee.variants.js';

package/dist/Marquee/marquee.types.d.ts

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MarqueeVariantProps } from './marquee.variants.js';
+export interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Direction of the marquee animation.
+     * @default 'left'
+     */
+    direction?: MarqueeVariantProps['direction'];
+    /**
+     * Whether to pause the animation when hovered.
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Duration of the animation loop (e.g. '20s', '40s').
+     * @default '40s'
+     */
+    duration?: string;
+    /**
+     * Gap between items.
+     * @default '1rem'
+     */
+    gap?: string;
+    /**
+     * How many times to repeat the content. To ensure smooth looping, it should be at least 2.
+     * @default 2
+     */
+    repeat?: number;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * The content to scroll.
+     */
+    children?: Snippet;
+}

package/dist/Marquee/marquee.types.js

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

package/dist/Marquee/marquee.variants.d.ts

@@ -0,0 +1,78 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const marqueeVariants: import("tailwind-variants").TVReturnType<{
+    direction: {
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        up: {
+            root: string;
+            content: string;
+        };
+        down: {
+            root: string;
+            content: string;
+        };
+    };
+    pauseOnHover: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, undefined, {
+    direction: {
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        up: {
+            root: string;
+            content: string;
+        };
+        down: {
+            root: string;
+            content: string;
+        };
+    };
+    pauseOnHover: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    direction: {
+        left: {
+            content: string;
+        };
+        right: {
+            content: string;
+        };
+        up: {
+            root: string;
+            content: string;
+        };
+        down: {
+            root: string;
+            content: string;
+        };
+    };
+    pauseOnHover: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export type MarqueeVariantProps = VariantProps<typeof marqueeVariants>;

package/dist/Marquee/marquee.variants.js

@@ -0,0 +1,28 @@
+import { tv } from 'tailwind-variants';
+export const marqueeVariants = tv({
+    slots: {
+        root: 'group flex overflow-hidden p-2 [--gap:1rem] [gap:var(--gap)]',
+        content: 'flex shrink-0 justify-around [gap:var(--gap)] animate-marquee'
+    },
+    variants: {
+        direction: {
+            left: { content: '[animation-direction:normal]' },
+            right: { content: '[animation-direction:reverse]' },
+            up: {
+                root: 'flex-col',
+                content: 'flex-col animate-marquee-vertical [animation-direction:normal]'
+            },
+            down: {
+                root: 'flex-col',
+                content: 'flex-col animate-marquee-vertical [animation-direction:reverse]'
+            }
+        },
+        pauseOnHover: {
+            true: { content: 'group-hover:[animation-play-state:paused]' }
+        }
+    },
+    defaultVariants: {
+        direction: 'left',
+        pauseOnHover: false
+    }
+});

package/dist/Menu/Menu.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import { menuVariants } from "./menu.variants.js";
+let { items = [], variant = "default", accordion = false, autoActive = false, class: className, children } = $props();
+let styles = $derived(menuVariants({ variant }));
+// Track open state for groups
+let openGroupLabel = $state(null);
+let openGroups = $state(new Set());
+// Initialize open groups based on prop
+$effect(() => {
+	if (!accordion) {
+		items.forEach((item) => {
+			if (item.type === "group" && item.open && item.label) {
+				openGroups.add(item.label);
+			}
+		});
+		openGroups = new Set(openGroups);
+	}
+});
+function handleGroupToggle(groupItem) {
+	if (accordion) {
+		if (openGroupLabel === groupItem.label) {
+			openGroupLabel = null;
+		} else {
+			openGroupLabel = groupItem.label || null;
+		}
+	} else {
+		toggleGroup(groupItem);
+	}
+}
+function toggleGroup(groupItem) {
+	if (!groupItem.label) return;
+	if (openGroups.has(groupItem.label)) {
+		openGroups.delete(groupItem.label);
+	} else {
+		openGroups.add(groupItem.label);
+	}
+	openGroups = new Set(openGroups);
+}
+function isGroupOpen(groupItem) {
+	if (accordion) {
+		return openGroupLabel === groupItem.label;
+	}
+	if (!groupItem.label) return false;
+	return openGroups.has(groupItem.label);
+}
+// Auto active logic
+let currentPath = $state("");
+$effect(() => {
+	if (autoActive && typeof window !== "undefined") {
+		currentPath = window.location.pathname;
+		// Optionally listen to popstate for SPA navigation if not using SvelteKit stores
+		const onPopState = () => {
+			currentPath = window.location.pathname;
+		};
+		window.addEventListener("popstate", onPopState);
+		return () => window.removeEventListener("popstate", onPopState);
+	}
+});
+function isActive(item) {
+	if (item.active) return true;
+	if (autoActive && item.type !== "group" && item.href) {
+		return currentPath === item.href || currentPath.startsWith(item.href + "/");
+	}
+	return false;
+}
+</script>
+
+{#snippet renderActionItem(item: MenuItemType)}
+    <li>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <svelte:element 
+            this={item.type !== 'group' && item.href ? 'a' : 'button'}
+            href={item.type !== 'group' ? item.href : undefined}
+            type={item.type !== 'group' && !item.href ? 'button' : undefined}
+            target={item.type !== 'group' ? item.target : undefined}
+            class={twMerge(styles.item(), isActive(item) ? styles.itemActive() : '', item.class)}
+            disabled={item.disabled}
+            onclick={item.type !== 'group' ? item.onClick : undefined}
+        >
+            {#if item.icon}
+                <Icon name={item.icon} class={styles.icon()} />
+            {/if}
+            <span class="truncate">{item.label}</span>
+        </svelte:element>
+    </li>
+{/snippet}
+
+{#snippet renderGroupItem(item: MenuGroupItem)}
+    <li class={styles.group()}>
+        <button
+            type="button"
+            class={twMerge(styles.groupTrigger(), isGroupOpen(item) ? styles.groupTriggerActive() : '', item.class)}
+            disabled={item.disabled}
+            onclick={() => handleGroupToggle(item)}
+        >
+            <div class="flex items-center truncate">
+                {#if item.icon}
+                    <Icon name={item.icon} class={styles.icon()} />
+                {/if}
+                <span class="truncate">{item.label}</span>
+            </div>
+            <Icon 
+                name="lucide:chevron-down" 
+                class={twMerge(styles.chevron(), isGroupOpen(item) ? 'rotate-180' : '')} 
+            />
+        </button>
+        {#if isGroupOpen(item)}
+            <ul class={styles.groupContent()}>
+                {#each item.items as subItem}
+                    {#if subItem.type === 'group'}
+                        {@render renderGroupItem(subItem)}
+                    {:else}
+                        {@render renderActionItem(subItem)}
+                    {/if}
+                {/each}
+            </ul>
+        {/if}
+    </li>
+{/snippet}
+
+<ul class={twMerge(styles.base(), className)}>
+    {#if children}
+        {@render children()}
+    {:else}
+        {#each items as item}
+            {#if item.type === 'group'}
+                {@render renderGroupItem(item)}
+            {:else}
+                {@render renderActionItem(item)}
+            {/if}
+        {/each}
+    {/if}
+</ul>

package/dist/Menu/Menu.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MenuProps } from './menu.types.js';
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/Menu/index.d.ts

@@ -0,0 +1,4 @@
+import Menu from './Menu.svelte';
+export { Menu };
+export * from './menu.types.js';
+export * from './menu.variants.js';

package/dist/Menu/index.js

@@ -0,0 +1,4 @@
+import Menu from './Menu.svelte';
+export { Menu };
+export * from './menu.types.js';
+export * from './menu.variants.js';