sv5ui-plus 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 asphum
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# SV5UI Plus
+
+Companion components and hooks for [SV5UI](https://github.com/ndlabdev/sv5ui) and Svelte 5.
+
+SV5UI Plus no longer maintains copies of SV5UI components. Version 4 contains only additions that SV5UI does not provide, plus a small compatibility entry point for gradual migration.
+
+## Install
+
+```bash
+bun add sv5ui sv5ui-plus
+```
+
+```css
+/* src/routes/layout.css */
+@import 'sv5ui/theme.css';
+@source '../../node_modules/sv5ui-plus/dist';
+```
+
+Import core UI from SV5UI and addons from SV5UI Plus:
+
+```svelte
+<script lang="ts">
+  import { Button, Icon } from 'sv5ui'
+  import { ColorPicker, ConfirmDialog, Search } from 'sv5ui-plus'
+</script>
+```
+
+For an incremental migration from Svelora, `sv5ui-plus/compat` re-exports SV5UI together with SV5UI Plus addons:
+
+```ts
+import { Button, ColorPicker } from 'sv5ui-plus/compat'
+```
+
+New code should use the explicit `sv5ui` and `sv5ui-plus` imports.
+
+## Addons
+
+- Content and display: `BentoGrid`, `Chart`, `Chat`, `CodeBlock`, `Fonts`, `List`, `Marquee`, `NumberTicker`, `Prose`, `Spotlight`
+- Forms and overlays: `ColorPicker`, `ConfirmDialog`, `LocaleButton`, `PasswordInput`, `Search`
+- Layout and data: `Resizable`, `ScrollArea`, `TableBulkActionBar`, `TreeView`
+- Drag and drop: `SortableGroup`, `SortableList`, `useDragDrop`, `useSortable`
+- SvelteKit adapter: `SvelteKitNavigationMenu`
+- Feedback adapter: `notify`
+
+The editor entry point remains available as `sv5ui-plus/editor` and proxies `sv5ui/editor`.
+
+## Breaking changes in v4
+
+- Removed components and hooks already supplied by SV5UI.
+- Icon names use Iconify syntax such as `lucide:edit`.
+- The former `NavigationMenu` addon is exported as `SvelteKitNavigationMenu` to avoid colliding with SV5UI.
+- Core configuration comes from `sv5ui`; SV5UI Plus-specific aliases remain available for migration.
+
+## Verification
+
+```bash
+bun run release:verify:full
+```
+
+## License
+
+[MIT](LICENSE) © [asphum](https://github.com/asphum)

package/dist/adapters/notify.d.ts

@@ -0,0 +1,29 @@
+import { type ToastOptions } from 'sv5ui';
+export interface NotifyOptions extends ToastOptions {
+    /** Inline style values merged into the toast style string. */
+    styles?: Record<string, string>;
+    /** Class values merged into the toast class string. */
+    classes?: Record<string, string>;
+}
+export interface NotifyPromiseOptions<T = unknown> extends NotifyOptions {
+    loading: string;
+    success: string | ((data: T) => string);
+    error: string | ((error: unknown) => string);
+    checkSuccess?: (data: T) => boolean;
+    loadingOptions?: NotifyOptions;
+    successOptions?: NotifyOptions;
+    errorOptions?: NotifyOptions;
+    minDuration?: number;
+}
+export declare const notify: {
+    success(message: string, options?: NotifyOptions): string | number;
+    error(error: unknown, options?: NotifyOptions): string | number;
+    info(message: string, options?: NotifyOptions): string | number;
+    warning(message: string, options?: NotifyOptions): string | number;
+    loading(message: string, options?: NotifyOptions): string | number;
+    processing(message: string, options?: NotifyOptions): string | number;
+    default(message: string, options?: NotifyOptions): string | number;
+    promise<T>(promise: Promise<T>, options: NotifyPromiseOptions<T>): Promise<T>;
+    dismiss(id?: string | number): string | number | undefined;
+};
+export type NotifyUtility = typeof notify;

package/dist/adapters/notify.js

@@ -0,0 +1,88 @@
+import { toast } from 'sv5ui';
+function errorMessage(error) {
+    if (typeof error === 'string')
+        return error;
+    if (error instanceof Error)
+        return error.message;
+    if (error && typeof error === 'object') {
+        const value = error;
+        if (typeof value.message === 'string')
+            return value.message;
+        if (typeof value.error === 'string')
+            return value.error;
+        return JSON.stringify(error);
+    }
+    return 'An unknown error occurred';
+}
+function resolveOptions(options) {
+    if (!options)
+        return undefined;
+    const { styles, classes, ...rest } = options;
+    const style = styles
+        ? Object.entries(styles)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join('; ')
+        : undefined;
+    const className = classes ? Object.values(classes).join(' ') : undefined;
+    return {
+        ...rest,
+        style: [rest.style, style].filter(Boolean).join('; ') || undefined,
+        class: [rest.class, className].filter(Boolean).join(' ') || undefined
+    };
+}
+export const notify = {
+    success(message, options) {
+        return toast.success(message, resolveOptions(options));
+    },
+    error(error, options) {
+        return toast.error(errorMessage(error), resolveOptions(options));
+    },
+    info(message, options) {
+        return toast.info(message, resolveOptions(options));
+    },
+    warning(message, options) {
+        return toast.warning(message, resolveOptions(options));
+    },
+    loading(message, options) {
+        return toast.loading(message, {
+            duration: Number.POSITIVE_INFINITY,
+            ...resolveOptions(options)
+        });
+    },
+    processing(message, options) {
+        return toast.loading(message, {
+            duration: Number.POSITIVE_INFINITY,
+            icon: 'lucide:loader-circle',
+            ...resolveOptions(options)
+        });
+    },
+    default(message, options) {
+        return toast(message, resolveOptions(options));
+    },
+    promise(promise, options) {
+        const { loading, success, error, checkSuccess, loadingOptions, successOptions, errorOptions, minDuration = 800, ...shared } = options;
+        const id = notify.loading(loading, { ...shared, ...loadingOptions });
+        const minimum = new Promise((resolve) => setTimeout(resolve, minDuration));
+        Promise.all([promise, minimum])
+            .then(([data]) => {
+            if (checkSuccess && !checkSuccess(data))
+                throw data;
+            notify.success(typeof success === 'function' ? success(data) : success, {
+                ...shared,
+                ...successOptions,
+                id
+            });
+        })
+            .catch((reason) => {
+            notify.error(typeof error === 'function' ? error(reason) : error, {
+                ...shared,
+                ...errorOptions,
+                id
+            });
+        });
+        return promise;
+    },
+    dismiss(id) {
+        return toast.dismiss(id);
+    }
+};

package/dist/compat.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Transitional entrypoint for applications migrating from Svelora 3.
+ * New code should import core UI from `sv5ui` and addons from `sv5ui-plus`.
+ */
+export * from 'sv5ui';
+export * from './index.js';

package/dist/compat.js

@@ -0,0 +1,6 @@
+/**
+ * Transitional entrypoint for applications migrating from Svelora 3.
+ * New code should import core UI from `sv5ui` and addons from `sv5ui-plus`.
+ */
+export * from 'sv5ui';
+export * from './index.js';

package/dist/components/BentoGrid/BentoCard.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { Icon } from "sv5ui";
+import { Button } from "sv5ui";
+import { bentoGridVariants } from "./bento-grid.variants.js";
+let { name, description, icon, href, cta = "Learn more", class: className, background, actionSnippet, ...restProps } = $props();
+let styles = $derived(bentoGridVariants());
+</script>
+
+<div class={twMerge(styles.cardBase(), className)} {...restProps}>
+    <div class={styles.cardBackground()}>
+        {#if background}
+            {@render background()}
+        {/if}
+    </div>
+
+    <!-- Push content up slightly on hover by adjusting group styles or locally -->
+    <div class={twMerge(styles.cardContent(), href && 'group-hover:-translate-y-4')}>
+        {#if icon}
+            <div class={styles.cardIconWrapper()}>
+                <Icon {name} class="w-6 h-6" />
+            </div>
+        {/if}
+        
+        <h3 class={styles.cardTitle()}>{name}</h3>
+        
+        {#if description}
+            <p class={styles.cardDescription()}>{description}</p>
+        {/if}
+    </div>
+
+    {#if href || actionSnippet}
+        <div class={twMerge(styles.cardAction(), !href && !actionSnippet && 'hidden')}>
+            {#if actionSnippet}
+                {@render actionSnippet()}
+            {:else if href}
+                <Button {href} variant="ghost" size="sm" class="pl-0 hover:bg-transparent">
+                    {cta}
+                    {#snippet trailingSlot()}
+                        <Icon name="lucide:arrow-right" class="w-4 h-4 ml-1" />
+                    {/snippet}
+                </Button>
+            {/if}
+        </div>
+    {/if}
+</div>

package/dist/components/BentoGrid/BentoCard.svelte.d.ts

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

package/dist/components/BentoGrid/BentoGrid.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { bentoGridVariants } from "./bento-grid.variants.js";
+let { class: className, children, ...restProps } = $props();
+let styles = $derived(bentoGridVariants());
+</script>
+
+<div class={twMerge(styles.gridBase(), className)} {...restProps}>
+    {@render children?.()}
+</div>

package/dist/components/BentoGrid/BentoGrid.svelte.d.ts

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

package/dist/components/BentoGrid/bento-grid.types.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * The cards to render inside the grid.
+     */
+    children?: Snippet;
+}
+export interface BentoCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title of the card.
+     */
+    name: string;
+    /**
+     * Description text.
+     */
+    description?: string;
+    /**
+     * Icon name.
+     */
+    icon?: string;
+    /**
+     * The href to navigate to when the call-to-action is clicked.
+     */
+    href?: string;
+    /**
+     * Text for the call-to-action button.
+     * @default 'Learn more'
+     */
+    cta?: string;
+    /**
+     * Additional CSS classes. Useful for setting grid column/row spans (e.g. `col-span-2`).
+     */
+    class?: string;
+    /**
+     * Snippet for background visual elements (e.g. gradients, images).
+     */
+    background?: Snippet;
+    /**
+     * Snippet for overriding or extending the action area.
+     */
+    actionSnippet?: Snippet;
+}

package/dist/components/BentoGrid/bento-grid.types.js

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

package/dist/components/BentoGrid/bento-grid.variants.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const bentoGridVariants: import("tailwind-variants").TVReturnType<{}, {
+    gridBase: string;
+    cardBase: string;
+    cardBackground: string;
+    cardContent: string;
+    cardIconWrapper: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardAction: string;
+}, undefined, {}, {
+    gridBase: string;
+    cardBase: string;
+    cardBackground: string;
+    cardContent: string;
+    cardIconWrapper: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardAction: string;
+}, import("tailwind-variants").TVReturnTypeLike<{}, {
+    gridBase: string;
+    cardBase: string;
+    cardBackground: string;
+    cardContent: string;
+    cardIconWrapper: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardAction: string;
+}>>;
+export type BentoGridVariantProps = VariantProps<typeof bentoGridVariants>;

package/dist/components/BentoGrid/bento-grid.variants.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const bentoGridVariants = tv({
+    slots: {
+        gridBase: 'grid grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto w-full',
+        cardBase: 'group relative flex flex-col justify-between overflow-hidden rounded-xl bg-surface-50 dark:bg-surface-900 border border-outline-variant transition-all hover:shadow-md dark:hover:shadow-surface-800/50',
+        cardBackground: 'absolute inset-0 transition-all duration-300 pointer-events-none',
+        cardContent: 'pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300',
+        cardIconWrapper: 'mb-2 w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400',
+        cardTitle: 'text-lg font-semibold text-surface-900 dark:text-surface-50',
+        cardDescription: 'text-sm text-surface-500 dark:text-surface-400',
+        cardAction: 'pointer-events-auto absolute bottom-0 left-0 w-full p-6 opacity-0 translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0'
+    },
+    variants: {
+    // Variants can be added if we want different styles of grids
+    }
+});

package/dist/components/BentoGrid/index.d.ts

@@ -0,0 +1,5 @@
+import BentoGrid from './BentoGrid.svelte';
+import BentoCard from './BentoCard.svelte';
+export { BentoGrid, BentoCard };
+export * from './bento-grid.types.js';
+export * from './bento-grid.variants.js';

package/dist/components/BentoGrid/index.js

@@ -0,0 +1,5 @@
+import BentoGrid from './BentoGrid.svelte';
+import BentoCard from './BentoCard.svelte';
+export { BentoGrid, BentoCard };
+export * from './bento-grid.types.js';
+export * from './bento-grid.variants.js';

package/dist/components/Chart/Chart.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">import { onDestroy, onMount } from "svelte";
+import { twMerge } from "tailwind-merge";
+let { options, series, class: className } = $props();
+let chartContainer = $state(null);
+let chartInstance = null;
+function mergeOptions(nextOptions, nextSeries) {
+	const initialOptions = nextSeries ? {
+		...nextOptions,
+		series: nextSeries
+	} : nextOptions;
+	return {
+		...initialOptions,
+		chart: {
+			background: "transparent",
+			toolbar: { show: false },
+			fontFamily: "inherit",
+			...initialOptions.chart
+		},
+		theme: { ...initialOptions.theme },
+		tooltip: {
+			theme: "dark",
+			...initialOptions.tooltip
+		}
+	};
+}
+onMount(() => {
+	let cancelled = false;
+	void (async () => {
+		const ApexCharts = (await import("apexcharts")).default;
+		if (cancelled || !chartContainer?.isConnected) return;
+		const instance = new ApexCharts(chartContainer, mergeOptions(options, series));
+		try {
+			await instance.render();
+		} catch {
+			instance.destroy();
+			return;
+		}
+		if (cancelled || !chartContainer?.isConnected) {
+			instance.destroy();
+			return;
+		}
+		chartInstance = instance;
+		/** sync กรณี options/series เปลี่ยนระหว่าง await import/render */
+		void chartInstance.updateOptions(mergeOptions(options, series), false, true);
+	})();
+	return () => {
+		cancelled = true;
+	};
+});
+onDestroy(() => {
+	chartInstance?.destroy();
+	chartInstance = null;
+});
+$effect(() => {
+	const nextOptions = options;
+	const nextSeries = series;
+	if (!chartInstance) return;
+	void chartInstance.updateOptions(mergeOptions(nextOptions, nextSeries), false, true);
+});
+</script>
+
+<div class={twMerge('w-full', className)} bind:this={chartContainer}></div>

package/dist/components/Chart/Chart.svelte.d.ts

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

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

@@ -0,0 +1,16 @@
+import type { ApexOptions } from 'apexcharts';
+import type { ClassNameValue } from 'tailwind-merge';
+export interface ChartProps {
+    /**
+     * Configuration options for ApexCharts.
+     */
+    options: ApexOptions;
+    /**
+     * Series data. If provided, overrides options.series.
+     */
+    series?: ApexOptions['series'];
+    /**
+     * Tailwind class to apply to the chart container wrapper.
+     */
+    class?: ClassNameValue;
+}

package/dist/components/Chart/chart.types.js

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

package/dist/components/Chart/index.d.ts

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

package/dist/components/Chart/index.js

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

package/dist/components/Chat/ChatBubble.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { setContext } from "svelte";
+import { chatVariants } from "./chat.variants.js";
+let { position = "start", name, time, class: className, avatar, children, ...restProps } = $props();
+let styles = $derived(chatVariants({ position }));
+// Provide position context to child ChatMessage components for proper rounded corners
+setContext("chat-bubble-position", () => position);
+</script>
+
+<div class={twMerge(styles.bubbleBase() as string, className as string)} {...restProps}>
+    {#if avatar}
+        <div class={styles.bubbleAvatar()}>
+            {@render avatar()}
+        </div>
+    {/if}
+    
+    <div class={styles.bubbleContent()}>
+        {#if name || time}
+            <div class={styles.bubbleHeader()}>
+                {#if name}
+                    <span class={styles.bubbleName()}>{name}</span>
+                {/if}
+                {#if time}
+                    <span class={styles.bubbleTime()}>{time}</span>
+                {/if}
+            </div>
+        {/if}
+        {@render children?.()}
+    </div>
+</div>

package/dist/components/Chat/ChatBubble.svelte.d.ts

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

package/dist/components/Chat/ChatInput.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { chatVariants } from "./chat.variants.js";
+let { value = $bindable(""), placeholder = "Type a message...", disabled = false, class: className, leading, trailing, ...restProps } = $props();
+let styles = $derived(chatVariants());
+// Auto-resize textarea function could be added here
+function autoResize(node) {
+	function resize() {
+		node.style.height = "auto";
+		node.style.height = node.scrollHeight + "px";
+	}
+	node.addEventListener("input", resize);
+	// Initial resize
+	setTimeout(resize, 0);
+	return { destroy() {
+		node.removeEventListener("input", resize);
+	} };
+}
+</script>
+
+<div class={twMerge(styles.inputBase() as string, className as string)} {...restProps}>
+    {#if leading}
+        <div class={styles.inputActions()}>
+            {@render leading()}
+        </div>
+    {/if}
+
+    <div class={styles.inputFieldWrapper()}>
+        <textarea
+            bind:value
+            {placeholder}
+            {disabled}
+            rows="1"
+            use:autoResize
+            class={styles.inputField()}
+            onkeydown={(e) => {
+                // If you want Shift+Enter for new line, and Enter to submit:
+                // if (e.key === 'Enter' && !e.shiftKey) {
+                //     e.preventDefault()
+                //     // Dispatch submit event
+                // }
+            }}
+        ></textarea>
+    </div>
+
+    {#if trailing}
+        <div class={styles.inputActions()}>
+            {@render trailing()}
+        </div>
+    {/if}
+</div>

package/dist/components/Chat/ChatInput.svelte.d.ts

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

package/dist/components/Chat/ChatMessage.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { getContext } from "svelte";
+import { chatVariants } from "./chat.variants.js";
+let { variant = "surface", position: propPosition, class: className, children, ...restProps } = $props();
+const getPositionContext = getContext("chat-bubble-position");
+let position = $derived(propPosition ?? (getPositionContext ? getPositionContext() : "start"));
+let styles = $derived(chatVariants({
+	variant,
+	position
+}));
+</script>
+
+<div class={twMerge(styles.messageBase() as string, className as string)} {...restProps}>
+    {@render children?.()}
+</div>

package/dist/components/Chat/ChatMessage.svelte.d.ts

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