svelora 3.0.6 → 3.0.8

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/NavigationMenu/NavigationMenu.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">import { untrack } from "svelte";
+import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import Badge from "../Badge/Badge.svelte";
+import Kbd from "../Kbd/Kbd.svelte";
+import DropdownMenu from "../DropdownMenu/DropdownMenu.svelte";
+import { navigationMenuVariants } from "./navigation-menu.variants.js";
+let { items = [], variant = "default", orientation = "horizontal", accordion = false, class: className, ui, children } = $props();
+let styles = $derived(navigationMenuVariants({
+	variant,
+	orientation
+}));
+let normalizedItems = $derived.by(() => {
+	if (!items || items.length === 0) return [];
+	if (Array.isArray(items[0])) {
+		return items;
+	}
+	return [items];
+});
+// --- Accordion State (for vertical) ---
+function getInitialOpenGroups() {
+	const opened = [];
+	for (const group of normalizedItems) {
+		for (const item of group) {
+			if (item.defaultOpen && item.label) opened.push(item.label);
+		}
+	}
+	return opened;
+}
+let openGroupLabel = $state(untrack(() => accordion ? getInitialOpenGroups()[0] ?? null : null));
+let openGroups = $state(untrack(() => !accordion ? getInitialOpenGroups() : []));
+function handleGroupToggle(item) {
+	if (!item.label) return;
+	if (accordion) {
+		openGroupLabel = openGroupLabel === item.label ? null : item.label;
+	} else {
+		if (openGroups.includes(item.label)) {
+			openGroups = openGroups.filter((l) => l !== item.label);
+		} else {
+			openGroups = [...openGroups, item.label];
+		}
+	}
+}
+function isGroupOpen(item) {
+	if (accordion) return openGroupLabel === item.label;
+	if (!item.label) return false;
+	return openGroups.includes(item.label);
+}
+// --- Auto Active State ---
+let currentPath = $state("");
+$effect(() => {
+	if (typeof window !== "undefined") {
+		currentPath = window.location.pathname;
+		const onPopState = () => {
+			currentPath = window.location.pathname;
+		};
+		window.addEventListener("popstate", onPopState);
+		return () => window.removeEventListener("popstate", onPopState);
+	}
+});
+function isActive(item) {
+	if (item.active) return true;
+	if (item.href) {
+		return currentPath === item.href || currentPath.startsWith(item.href + "/");
+	}
+	return false;
+}
+// Helper for keyboard shortcuts
+function getKbds(item) {
+	return item.kbds || item.shortcut || [];
+}
+</script>
+
+{#snippet renderItem(item: NavigationMenuItemType)}
+    <li class={orientation === 'vertical' ? 'w-full' : ''}>
+        {#if item.type === 'separator'}
+            <!-- SEPARATOR -->
+            <div class={orientation === 'horizontal' ? 'w-px h-6 bg-outline-variant mx-1' : 'h-px w-full bg-outline-variant my-1'}></div>
+        {:else if (item.items && item.items.length > 0) || (item.children && item.children.length > 0)}
+            {@const subItems = item.items || item.children || []}
+            
+            {#if orientation === 'horizontal'}
+                <!-- HORIZONTAL: Dropdown -->
+                <DropdownMenu 
+                    items={subItems as any} 
+                    side="bottom" 
+                    align="start"
+                    sideOffset={4}
+                >
+                    {#snippet children({ props, open })}
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
+                        <button
+                            type="button"
+                            {...props}
+                            class={twMerge(styles.item({ active: isActive(item) }), item.class)}
+                            disabled={item.disabled}
+                        >
+                            {#if item.icon}
+                                <Icon name={item.icon} class={styles.icon({ active: isActive(item) })} />
+                            {/if}
+                            <span>{item.label}</span>
+                            {#if item.badge !== undefined}
+                                <Badge label={String(item.badge)} color={item.badgeColor || 'primary'} size="sm" class="ml-1" />
+                            {/if}
+                            <span class="ml-auto flex items-center">
+                                <Icon 
+                                    name="lucide:chevron-down" 
+                                    class={twMerge(styles.chevron(), open ? 'rotate-180' : '')} 
+                                />
+                            </span>
+                        </button>
+                    {/snippet}
+                </DropdownMenu>
+            {:else}
+                <!-- VERTICAL: Accordion -->
+                <button
+                    type="button"
+                    class={twMerge(
+                        styles.accordionTrigger(), 
+                        isGroupOpen(item) ? styles.item({ active: true }) : '', 
+                        item.class
+                    )}
+                    disabled={item.disabled}
+                    onclick={() => handleGroupToggle(item)}
+                >
+                    <div class="flex flex-1 items-center truncate">
+                        {#if item.icon}
+                            <Icon name={item.icon} class={styles.icon({ active: isActive(item) })} />
+                        {/if}
+                        <span class="truncate">{item.label}</span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        {#if item.badge !== undefined || getKbds(item).length > 0}
+                            <span class="flex items-center gap-2">
+                                {#if item.badge !== undefined}
+                                    <Badge label={String(item.badge)} color={item.badgeColor || 'primary'} size="sm" />
+                                {/if}
+                                {#if getKbds(item).length > 0}
+                                    <span class="flex items-center gap-0.5">
+                                        {#each getKbds(item) as key}
+                                            <Kbd value={typeof key === 'string' ? key : key.value} size="sm" />
+                                        {/each}
+                                    </span>
+                                {/if}
+                            </span>
+                        {/if}
+                        <Icon 
+                            name="lucide:chevron-down" 
+                            class={twMerge(styles.chevron(), isGroupOpen(item) ? 'rotate-180' : '')} 
+                        />
+                    </div>
+                </button>
+                {#if isGroupOpen(item)}
+                    <ul class={styles.accordionGroupContent()}>
+                        {#each subItems as subItem}
+                            {@render renderItem(subItem)}
+                        {/each}
+                    </ul>
+                {/if}
+            {/if}
+        {:else}
+            <!-- STANDARD LINK -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <svelte:element 
+                this={item.href ? 'a' : 'button'}
+                href={item.href}
+                target={item.target}
+                type={!item.href ? 'button' : undefined}
+                class={twMerge(styles.item({ active: isActive(item) }), item.class)}
+                disabled={item.disabled}
+                onclick={item.onClick}
+            >
+                <div class="flex flex-1 items-center truncate gap-1.5">
+                    {#if item.icon}
+                        <Icon name={item.icon} class={styles.icon({ active: isActive(item) })} />
+                    {/if}
+                    {#if item.label}
+                        <span class="truncate">{item.label}</span>
+                    {/if}
+                </div>
+                {#if item.badge !== undefined || getKbds(item).length > 0}
+                    <span class="ml-auto flex items-center gap-2">
+                        {#if item.badge !== undefined}
+                            <Badge label={String(item.badge)} color={item.badgeColor || 'primary'} size="sm" />
+                        {/if}
+                        {#if getKbds(item).length > 0}
+                            <span class="flex items-center gap-0.5">
+                                {#each getKbds(item) as key}
+                                    <Kbd value={typeof key === 'string' ? key : key.value} size="sm" />
+                                {/each}
+                            </span>
+                        {/if}
+                    </span>
+                {/if}
+            </svelte:element>
+        {/if}
+    </li>
+{/snippet}
+
+<nav class={twMerge(styles.base(), className)}>
+    {#if children}
+        {@render children()}
+    {:else}
+        {#each normalizedItems as group}
+            <ul class={styles.group()}>
+                {#each group as item}
+                    {@render renderItem(item)}
+                {/each}
+            </ul>
+        {/each}
+    {/if}
+</nav>

package/dist/NavigationMenu/NavigationMenu.svelte.d.ts

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

package/dist/NavigationMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export * from './navigation-menu.types.js';
+export * from './navigation-menu.variants.js';

package/dist/NavigationMenu/index.js

@@ -0,0 +1,3 @@
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export * from './navigation-menu.types.js';
+export * from './navigation-menu.variants.js';

package/dist/NavigationMenu/navigation-menu.types.d.ts

@@ -0,0 +1,104 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { BadgeProps } from '../Badge/badge.types.js';
+import type { KbdProps } from '../Kbd/kbd.types.js';
+import type { NavigationMenuVariantProps, NavigationMenuSlots } from './navigation-menu.variants.js';
+export type NavigationMenuItemType = {
+    /**
+     * Item type for compatibility with DropdownMenu.
+     */
+    type?: 'item' | 'label' | 'separator' | 'sub';
+    /**
+     * The visible text displayed in the menu item.
+     */
+    label?: string;
+    /**
+     * Optional icon to display before the label.
+     */
+    icon?: string;
+    /**
+     * Optional badge text/number to display after the label.
+     */
+    badge?: string | number;
+    /**
+     * Badge color (e.g. 'primary', 'error', 'success').
+     */
+    badgeColor?: BadgeProps['color'];
+    /**
+     * URL to navigate to when clicked.
+     */
+    href?: string;
+    /**
+     * Target attribute for the link (e.g., '_blank').
+     */
+    target?: string;
+    /**
+     * Force the active state styling.
+     */
+    active?: boolean;
+    /**
+     * Disable interaction for this item.
+     */
+    disabled?: boolean;
+    /**
+     * Whether this group should be open by default (when orientation="vertical").
+     */
+    defaultOpen?: boolean;
+    /**
+     * Keyboard shortcuts to display.
+     */
+    shortcut?: string[];
+    kbds?: (string | Pick<KbdProps, 'value' | 'size' | 'variant' | 'color'>)[];
+    /**
+     * Sub-items for this menu item (Svelora standard).
+     * If provided, the item renders as a dropdown trigger or accordion.
+     */
+    items?: NavigationMenuItemType[];
+    /**
+     * Alias for sub-items (Nuxt UI style compatibility).
+     */
+    children?: NavigationMenuItemType[];
+    /**
+     * Custom click handler for standard items.
+     */
+    onClick?: () => void;
+    /**
+     * Custom class for this specific item.
+     */
+    class?: ClassNameValue;
+};
+export type NavigationMenuProps = {
+    /**
+     * Array of navigation items. Supports 1D or 2D arrays for grouping.
+     */
+    items?: NavigationMenuItemType[] | NavigationMenuItemType[][];
+    /**
+     * Visual variant of the navigation menu.
+     * @default 'default'
+     */
+    variant?: NonNullable<NavigationMenuVariantProps['variant']>;
+    /**
+     * Orientation of the navigation menu.
+     * @default 'horizontal'
+     */
+    orientation?: NonNullable<NavigationMenuVariantProps['orientation']>;
+    /**
+     * Enable accordion mode (only affects orientation="vertical").
+     * If true, only one group can be open at a time.
+     * @default false
+     */
+    accordion?: boolean;
+    /**
+     * Additional CSS classes.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override specific slot classes.
+     */
+    ui?: Partial<Record<NavigationMenuSlots, ClassNameValue>>;
+    /**
+     * Custom snippet for rendering the entire list.
+     * Overrides `items` if provided.
+     */
+    children?: Snippet;
+};