svelora 3.0.6 → 3.0.7

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';

package/dist/Menu/menu.types.d.ts

@@ -0,0 +1,82 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { MenuVariantProps } from './menu.variants.js';
+export interface MenuItemBase {
+    /**
+     * Text to display in the menu item.
+     */
+    label?: string;
+    /**
+     * Icon to display before the label.
+     */
+    icon?: string;
+    /**
+     * Whether the menu item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the menu item is active/selected.
+     */
+    active?: boolean;
+    /**
+     * Additional CSS classes.
+     */
+    class?: ClassNameValue;
+}
+export interface MenuActionItem extends MenuItemBase {
+    type?: 'action' | 'item';
+    /**
+     * The URL to navigate to when the item is clicked.
+     */
+    href?: string;
+    /**
+     * Click handler for the item.
+     */
+    onClick?: (event: MouseEvent) => void;
+    /**
+     * Target attribute for link items.
+     */
+    target?: string;
+}
+export interface MenuGroupItem extends MenuItemBase {
+    type: 'group';
+    /**
+     * Child items to display when the group is expanded.
+     */
+    items: MenuItems;
+    /**
+     * Whether the group is currently open/expanded.
+     */
+    open?: boolean;
+}
+export type MenuItemType = MenuActionItem | MenuGroupItem;
+export type MenuItems = MenuItemType[];
+export interface MenuProps {
+    /**
+     * The array of menu items to render.
+     */
+    items?: MenuItems;
+    /**
+     * Style variant of the menu.
+     */
+    variant?: MenuVariantProps['variant'];
+    /**
+     * Whether the menu allows multiple groups to be open at once (false)
+     * or acts as an accordion, closing other groups when one opens (true).
+     * @default false
+     */
+    accordion?: boolean;
+    /**
+     * Auto-detect active state from current URL if using SvelteKit.
+     * @default false
+     */
+    autoActive?: boolean;
+    /**
+     * Additional CSS classes.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom slot for completely custom rendering of items.
+     */
+    children?: Snippet;
+}

package/dist/Menu/menu.types.js

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

package/dist/Menu/menu.variants.d.ts

@@ -0,0 +1,46 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const menuVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+    };
+}, {
+    base: string;
+    group: string;
+    groupTrigger: string[];
+    groupTriggerActive: string;
+    groupContent: string;
+    item: string[];
+    itemActive: string;
+    icon: string;
+    chevron: string;
+}, undefined, {
+    variant: {
+        default: {};
+    };
+}, {
+    base: string;
+    group: string;
+    groupTrigger: string[];
+    groupTriggerActive: string;
+    groupContent: string;
+    item: string[];
+    itemActive: string;
+    icon: string;
+    chevron: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+    };
+}, {
+    base: string;
+    group: string;
+    groupTrigger: string[];
+    groupTriggerActive: string;
+    groupContent: string;
+    item: string[];
+    itemActive: string;
+    icon: string;
+    chevron: string;
+}, undefined, unknown, unknown, undefined>>;
+export type MenuVariantProps = VariantProps<typeof menuVariants>;
+export type MenuSlots = keyof typeof menuVariants.slots;

package/dist/Menu/menu.variants.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const menuVariants = tv({
+    slots: {
+        base: 'flex flex-col gap-1 w-full',
+        group: 'flex flex-col w-full',
+        groupTrigger: [
+            'flex items-center justify-between w-full px-3 py-2 text-sm font-medium rounded-md',
+            'transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-outline',
+            'text-on-surface hover:bg-surface-container-highest',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+        ],
+        groupTriggerActive: 'bg-primary-container text-on-primary-container',
+        groupContent: 'flex flex-col gap-1 pl-4 mt-1',
+        item: [
+            'flex items-center w-full px-3 py-2 text-sm font-medium rounded-md',
+            'transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-outline',
+            'text-on-surface hover:bg-surface-container-highest',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+        ],
+        itemActive: 'bg-primary-container text-on-primary-container hover:bg-primary-container/90',
+        icon: 'size-5 mr-3 shrink-0',
+        chevron: 'size-4 shrink-0 transition-transform duration-200'
+    },
+    variants: {
+        variant: {
+            default: {}
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});