svelora 3.0.7 → 3.0.8

package/dist/Chart/Chart.svelte

@@ -1,47 +1,48 @@
-<script lang="ts">import { twMerge } from "tailwind-merge";
-import { onMount } from "svelte";
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, PointElement, LineElement, ArcElement, RadialLinearScale, Filler } from "chart.js";
-import { Bar, Line, Pie, Doughnut, Radar, PolarArea, Scatter, Bubble } from "svelte-chartjs";
-import { chartVariants } from "./chart.variants.js";
-// Register all common elements
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, PointElement, LineElement, ArcElement, RadialLinearScale, Filler);
-// Set default styling to match Tailwind/Svelora theme
-ChartJS.defaults.color = "currentColor";
-ChartJS.defaults.font.family = "inherit";
-ChartJS.defaults.plugins.tooltip.backgroundColor = "rgba(0, 0, 0, 0.8)";
-ChartJS.defaults.plugins.tooltip.titleColor = "#ffffff";
-ChartJS.defaults.plugins.tooltip.bodyColor = "#ffffff";
-ChartJS.defaults.plugins.tooltip.cornerRadius = 6;
-ChartJS.defaults.plugins.tooltip.padding = 10;
-let { type, data, options = {}, class: className, ...restProps } = $props();
-let styles = $derived(chartVariants());
-// Map string types to components
-const components = {
-	bar: Bar,
-	line: Line,
-	pie: Pie,
-	doughnut: Doughnut,
-	radar: Radar,
-	polarArea: PolarArea,
-	scatter: Scatter,
-	bubble: Bubble
-};
-// Default responsive options
-const defaultOptions = {
-	responsive: true,
-	maintainAspectRatio: false
-};
-let mergedOptions = $derived({
-	...defaultOptions,
-	...options
+<script lang="ts">import { onMount, onDestroy } from "svelte";
+import { twMerge } from "tailwind-merge";
+let { options, series, class: className } = $props();
+let chartContainer;
+let chartInstance = null;
+// Helper to dynamically load apexcharts only on the client
+onMount(async () => {
+	// Dynamic import so it doesn't break SSR
+	const ApexCharts = (await import("apexcharts")).default;
+	// Inject series if provided separately
+	const initialOptions = series ? {
+		...options,
+		series
+	} : options;
+	// Default styling to match theme
+	const mergedOptions = {
+		chart: {
+			background: "transparent",
+			toolbar: { show: false },
+			fontFamily: "inherit",
+			...initialOptions.chart
+		},
+		theme: { ...initialOptions.theme },
+		tooltip: {
+			theme: "dark",
+			...initialOptions.tooltip
+		},
+		...initialOptions
+	};
+	chartInstance = new ApexCharts(chartContainer, mergedOptions);
+	chartInstance.render();
+});
+onDestroy(() => {
+	if (chartInstance) {
+		chartInstance.destroy();
+	}
+});
+// React to options/series changes
+$effect(() => {
+	if (chartInstance) {
+		if (series) {
+			chartInstance.updateSeries(series);
+		}
+	}
 });
-// We must use "as any" or "as typeof SvelteComponent" because svelte-chartjs types 
-// are sometimes tricky with svelte:component in Svelte 5.
-const ChartComponent = $derived(components[type]);
 </script>
 
-<div class={twMerge(styles, className)} {...restProps}>
-    {#if ChartComponent}
-        <ChartComponent data={data as any} options={mergedOptions as any} />
-    {/if}
-</div>
+<div class={twMerge('w-full', className)} bind:this={chartContainer}></div>

package/dist/Chart/chart.types.d.ts

@@ -1,20 +1,16 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ChartData, ChartOptions, ChartType } from 'chart.js';
-export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'type'> {
+import type { ApexOptions } from 'apexcharts';
+import type { ClassNameValue } from 'tailwind-merge';
+export interface ChartProps {
     /**
-     * Type of the chart.
+     * Configuration options for ApexCharts.
      */
-    type: ChartType;
+    options: ApexOptions;
     /**
-     * The data object for the chart.
+     * Series data. If provided, overrides options.series.
      */
-    data: ChartData<ChartType, unknown, unknown>;
+    series?: ApexOptions['series'];
     /**
-     * Configuration options for the chart.
+     * Tailwind class to apply to the chart container wrapper.
      */
-    options?: ChartOptions<ChartType>;
-    /**
-     * Additional CSS classes.
-     */
-    class?: string;
+    class?: ClassNameValue;
 }

package/dist/Chart/index.d.ts

@@ -1,4 +1,2 @@
-import Chart from './Chart.svelte';
-export { Chart };
+export { default as Chart } from './Chart.svelte';
 export * from './chart.types.js';
-export * from './chart.variants.js';

package/dist/Chart/index.js

@@ -1,4 +1,2 @@
-import Chart from './Chart.svelte';
-export { Chart };
+export { default as Chart } from './Chart.svelte';
 export * from './chart.types.js';
-export * from './chart.variants.js';

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;
+};

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

@@ -0,0 +1,121 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const navigationMenuVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            base: string;
+            group: string;
+            item: string;
+        };
+        vertical: {
+            base: string;
+            group: string;
+            item: string;
+        };
+    };
+    variant: {
+        default: {
+            item: string[];
+            icon: string;
+        };
+        ghost: {
+            item: string[];
+            icon: string;
+        };
+    };
+    active: {
+        true: {
+            item: string;
+            icon: string;
+            accordionTrigger: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    group: string;
+    item: string[];
+    icon: string;
+    chevron: string;
+    accordionGroupContent: string;
+    accordionTrigger: string[];
+}, undefined, {
+    orientation: {
+        horizontal: {
+            base: string;
+            group: string;
+            item: string;
+        };
+        vertical: {
+            base: string;
+            group: string;
+            item: string;
+        };
+    };
+    variant: {
+        default: {
+            item: string[];
+            icon: string;
+        };
+        ghost: {
+            item: string[];
+            icon: string;
+        };
+    };
+    active: {
+        true: {
+            item: string;
+            icon: string;
+            accordionTrigger: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    group: string;
+    item: string[];
+    icon: string;
+    chevron: string;
+    accordionGroupContent: string;
+    accordionTrigger: string[];
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            base: string;
+            group: string;
+            item: string;
+        };
+        vertical: {
+            base: string;
+            group: string;
+            item: string;
+        };
+    };
+    variant: {
+        default: {
+            item: string[];
+            icon: string;
+        };
+        ghost: {
+            item: string[];
+            icon: string;
+        };
+    };
+    active: {
+        true: {
+            item: string;
+            icon: string;
+            accordionTrigger: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    group: string;
+    item: string[];
+    icon: string;
+    chevron: string;
+    accordionGroupContent: string;
+    accordionTrigger: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type NavigationMenuVariantProps = VariantProps<typeof navigationMenuVariants>;
+export type NavigationMenuSlots = keyof ReturnType<typeof navigationMenuVariants>;

package/dist/NavigationMenu/navigation-menu.variants.js

@@ -0,0 +1,64 @@
+import { tv } from 'tailwind-variants';
+export const navigationMenuVariants = tv({
+    slots: {
+        base: 'flex',
+        group: 'flex',
+        item: [
+            'group relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+            'disabled:pointer-events-none disabled:opacity-50'
+        ],
+        icon: 'text-lg shrink-0 transition-colors',
+        chevron: 'text-base opacity-50 shrink-0 transition-transform group-data-[state=open]:rotate-180',
+        accordionGroupContent: 'flex flex-col gap-1 pl-4 mt-1',
+        accordionTrigger: [
+            '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'
+        ]
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                base: 'flex-row items-center justify-between w-full gap-4',
+                group: 'flex-row items-center gap-1',
+                item: ''
+            },
+            vertical: {
+                base: 'flex-col w-full gap-4',
+                group: 'flex-col gap-1 w-full',
+                item: 'w-full justify-start'
+            }
+        },
+        variant: {
+            default: {
+                item: [
+                    'text-on-surface-variant hover:bg-surface-container hover:text-on-surface',
+                    'data-[state=open]:bg-surface-container data-[state=open]:text-on-surface'
+                ],
+                icon: 'text-on-surface-variant group-hover:text-on-surface group-data-[state=open]:text-on-surface'
+            },
+            ghost: {
+                item: [
+                    'text-on-surface hover:bg-primary/10 hover:text-primary',
+                    'data-[state=open]:bg-primary/10 data-[state=open]:text-primary'
+                ],
+                icon: 'text-on-surface-variant group-hover:text-primary group-data-[state=open]:text-primary'
+            }
+        },
+        active: {
+            true: {
+                item: 'bg-primary/10 text-primary font-semibold',
+                icon: 'text-primary',
+                accordionTrigger: 'bg-primary-container text-on-primary-container'
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        active: false,
+        orientation: 'horizontal'
+    }
+});