svelora 3.0.7 → 3.0.10

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,255 @@
+<script lang="ts">import { untrack, getContext } from "svelte";
+import { twMerge } from "tailwind-merge";
+import { Icon } from "../Icon/index.js";
+import Badge from "../Badge/Badge.svelte";
+import Kbd from "../Kbd/Kbd.svelte";
+import { DropdownMenu } from "../DropdownMenu/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { navigationMenuVariants } from "./navigation-menu.variants.js";
+let { items = [], variant = "default", orientation = "horizontal", accordion = false, class: className, ui, children } = $props();
+const sidebarCollapsedFn = getContext("sidebar-collapsed");
+let isCollapsed = $derived(sidebarCollapsedFn ? sidebarCollapsedFn() : false);
+const sidebarPositionFn = getContext("sidebar-position");
+let sidebarPosition = $derived(sidebarPositionFn ? sidebarPositionFn() : "left");
+let styles = $derived(navigationMenuVariants({
+	variant,
+	orientation,
+	collapsed: isCollapsed
+}));
+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 -->
+                        {#snippet buttonContent()}
+                            <button
+                                type="button"
+                                {...props}
+                                class={twMerge(styles.item({ active: isActive(item), collapsed: isCollapsed }), item.class)}
+                                disabled={item.disabled}
+                            >
+                                {#if item.icon}
+                                    <Icon name={item.icon} class={styles.icon({ active: isActive(item), collapsed: isCollapsed })} />
+                                {/if}
+                                {#if !isCollapsed}
+                                    <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>
+                                {/if}
+                            </button>
+                        {/snippet}
+                        
+                        {#if isCollapsed}
+                            <Tooltip text={item.label} side={sidebarPosition === 'right' ? 'left' : 'right'}>
+                                {@render buttonContent()}
+                            </Tooltip>
+                        {:else}
+                            {@render buttonContent()}
+                        {/if}
+                    {/snippet}
+                </DropdownMenu>
+            {:else}
+                <!-- VERTICAL: Accordion -->
+                {#snippet accordionButton()}
+                    <button
+                        type="button"
+                        class={twMerge(
+                            styles.accordionTrigger(), 
+                            isGroupOpen(item) ? styles.item({ active: true, collapsed: isCollapsed }) : '', 
+                            isCollapsed ? styles.item({ collapsed: 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), collapsed: isCollapsed })} />
+                            {/if}
+                            {#if !isCollapsed}
+                                <span class="truncate ml-1.5">{item.label}</span>
+                            {/if}
+                        </div>
+                        {#if !isCollapsed}
+                            <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>
+                        {/if}
+                    </button>
+                {/snippet}
+
+                {#if isCollapsed}
+                    <Tooltip text={item.label} side={sidebarPosition === 'right' ? 'left' : 'right'}>
+                        {@render accordionButton()}
+                    </Tooltip>
+                {:else}
+                    {@render accordionButton()}
+                {/if}
+                {#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 -->
+            {#snippet linkContent()}
+                <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), collapsed: isCollapsed }), 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), collapsed: isCollapsed })} />
+                        {/if}
+                        {#if !isCollapsed && item.label}
+                            <span class="truncate">{item.label}</span>
+                        {/if}
+                    </div>
+                    {#if !isCollapsed && (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>
+            {/snippet}
+
+            {#if isCollapsed}
+                <Tooltip text={item.label} side={sidebarPosition === 'right' ? 'left' : 'right'}>
+                    {@render linkContent()}
+                </Tooltip>
+            {:else}
+                {@render linkContent()}
+            {/if}
+        {/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,142 @@
+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: {};
+    };
+    collapsed: {
+        true: {
+            item: string;
+            icon: 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: {};
+    };
+    collapsed: {
+        true: {
+            item: string;
+            icon: 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: {};
+    };
+    collapsed: {
+        true: {
+            item: string;
+            icon: 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>;