sv5ui-plus 4.0.0

package/dist/components/Resizable/resizable.types.js

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

package/dist/components/Resizable/resizable.variants.d.ts

@@ -0,0 +1,48 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const resizableVariants: import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, undefined, {
+    direction: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    direction: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}>>;
+export type ResizableVariantProps = VariantProps<typeof resizableVariants>;

package/dist/components/Resizable/resizable.variants.js

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+export const resizableVariants = tv({
+    slots: {
+        base: 'relative overflow-auto border border-outline-variant bg-surface-50 dark:bg-surface-900',
+        handle: 'absolute right-0 bottom-0 w-4 h-4 cursor-se-resize flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity'
+    },
+    variants: {
+        direction: {
+            horizontal: { base: 'resize-x' },
+            vertical: { base: 'resize-y' },
+            both: { base: 'resize' }
+        }
+    },
+    defaultVariants: {
+        direction: 'both'
+    }
+});

package/dist/components/ScrollArea/ScrollArea.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { scrollAreaVariants } from "./scroll-area.variants.js";
+let { orientation = "vertical", hideScrollbar = false, class: className, viewportClass, children, ...restProps } = $props();
+let styles = $derived(scrollAreaVariants({
+	orientation,
+	hideScrollbar
+}));
+</script>
+
+<div class={twMerge(styles.root(), className)} {...restProps}>
+    <div 
+        class={twMerge(
+            styles.viewport(), 
+            !hideScrollbar && 'sv5ui-plus-scrollbar',
+            viewportClass
+        )}
+        data-orientation={orientation}
+    >
+        {@render children?.()}
+    </div>
+</div>
+
+<style>
+    /* Custom scrollbar styling for Webkit browsers */
+    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar) {
+        width: 6px;
+        height: 6px;
+    }
+    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar-track) {
+        background: transparent;
+    }
+    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar-thumb) {
+        background-color: var(--color-outline-variant, rgba(156, 163, 175, 0.5));
+        border-radius: 9999px;
+    }
+    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar-thumb:hover) {
+        background-color: var(--color-outline, rgba(107, 114, 128, 0.8));
+    }
+    
+    /* Firefox support */
+    :global(.sv5ui-plus-scrollbar) {
+        scrollbar-width: thin;
+        scrollbar-color: var(--color-outline-variant, rgba(156, 163, 175, 0.5)) transparent;
+    }
+    
+    /* Hide scrollbar utility */
+    :global(.scrollbar-none::-webkit-scrollbar) {
+        display: none;
+    }
+    :global(.scrollbar-none) {
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+    }
+</style>

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

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

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

@@ -0,0 +1,4 @@
+import ScrollArea from './ScrollArea.svelte';
+export { ScrollArea };
+export * from './scroll-area.types.js';
+export * from './scroll-area.variants.js';

package/dist/components/ScrollArea/index.js

@@ -0,0 +1,4 @@
+import ScrollArea from './ScrollArea.svelte';
+export { ScrollArea };
+export * from './scroll-area.types.js';
+export * from './scroll-area.variants.js';

package/dist/components/ScrollArea/scroll-area.types.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ScrollAreaVariantProps } from './scroll-area.variants.js';
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Orientation of the scrolling area.
+     * @default 'vertical'
+     */
+    orientation?: ScrollAreaVariantProps['orientation'];
+    /**
+     * Whether to hide the scrollbar track/thumb completely while still allowing scrolling.
+     * @default false
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Additional CSS classes for the root container.
+     */
+    class?: string;
+    /**
+     * Additional CSS classes for the viewport (the scrollable area).
+     */
+    viewportClass?: string;
+    /**
+     * Content to be scrolled.
+     */
+    children?: Snippet;
+}

package/dist/components/ScrollArea/scroll-area.types.js

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

package/dist/components/ScrollArea/scroll-area.variants.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const scrollAreaVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: "";
+        horizontal: "";
+        both: "";
+    };
+    hideScrollbar: {
+        true: {
+            viewport: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+}, undefined, {
+    orientation: {
+        vertical: "";
+        horizontal: "";
+        both: "";
+    };
+    hideScrollbar: {
+        true: {
+            viewport: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        vertical: "";
+        horizontal: "";
+        both: "";
+    };
+    hideScrollbar: {
+        true: {
+            viewport: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+}>>;
+export type ScrollAreaVariantProps = VariantProps<typeof scrollAreaVariants>;

package/dist/components/ScrollArea/scroll-area.variants.js

@@ -0,0 +1,27 @@
+import { tv } from 'tailwind-variants';
+export const scrollAreaVariants = tv({
+    slots: {
+        root: 'relative overflow-hidden',
+        viewport: 'h-full w-full rounded-[inherit] overflow-auto'
+        // Note: For actual custom scrollbars without a JS library, we can use
+        // global CSS webkit scrollbar styles or a plugin.
+        // Here we just define standard utility classes to hide or style them if Tailwind scrollbar plugin is used.
+        // We'll add a custom class `sv5ui-plus-scrollbar` to be styled in global css if needed.
+    },
+    variants: {
+        orientation: {
+            vertical: '',
+            horizontal: '',
+            both: ''
+        },
+        hideScrollbar: {
+            true: {
+                viewport: 'scrollbar-none' // Requires tailwind-scrollbar plugin or custom CSS
+            }
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+        hideScrollbar: false
+    }
+});

package/dist/components/Search/Search.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { Input } from "sv5ui";
+import { Button } from "sv5ui";
+import { Modal } from "sv5ui";
+import { Command } from "sv5ui";
+import { Kbd } from "sv5ui";
+import { onMount } from "svelte";
+let { variant = "input", value = $bindable(""), kbd = [], groups = [], onSelect, placeholder = "Search...", class: className, ...rest } = $props();
+let open = $state(false);
+onMount(() => {
+	if (kbd.length > 0 && (variant === "modal" || variant === "button")) {
+		const handleKeydown = (e) => {
+			const isMac = navigator.userAgent.toLowerCase().includes("mac");
+			const isMeta = kbd.includes("meta") || kbd.includes("ctrl");
+			const key = kbd.find((k) => k.length === 1)?.toLowerCase();
+			if (isMeta && key) {
+				if ((isMac ? e.metaKey : e.ctrlKey) && e.key.toLowerCase() === key) {
+					e.preventDefault();
+					open = true;
+				}
+			}
+		};
+		window.addEventListener("keydown", handleKeydown);
+		return () => window.removeEventListener("keydown", handleKeydown);
+	}
+});
+</script>
+
+{#if variant === 'input'}
+    <Input
+        type="search"
+        {placeholder}
+        bind:value
+        leadingIcon="lucide:search"
+        class={className}
+        {...(rest as any)}
+    >
+        {#snippet trailingSlot()}
+            {#if kbd.length > 0}
+                <div class="pointer-events-none flex items-center gap-1">
+                    {#each kbd as key}
+                        <Kbd value={key} size="sm" />
+                    {/each}
+                </div>
+            {/if}
+        {/snippet}
+    </Input>
+{:else if variant === 'modal'}
+    <button
+        type="button"
+        class={twMerge(
+            'flex h-10 w-full items-center justify-between rounded-md border border-outline-variant bg-surface px-3 py-2 text-sm text-on-surface-variant shadow-sm transition-colors hover:bg-surface-container hover:text-on-surface focus:outline-none focus:ring-2 focus:ring-primary',
+            className
+        )}
+        onclick={() => (open = true)}
+        {...(rest as any)}
+    >
+        <span class="flex items-center gap-2">
+            <span class="iconify lucide--search text-lg"></span>
+            <span>{placeholder}</span>
+        </span>
+        {#if kbd.length > 0}
+            <span class="flex items-center gap-1">
+                {#each kbd as key}
+                    <Kbd value={key} size="sm" />
+                {/each}
+            </span>
+        {/if}
+    </button>
+{:else if variant === 'button'}
+    <Button
+        variant="ghost"
+        color="surface"
+        leadingIcon="lucide:search"
+        class={className}
+        onclick={() => (open = true)}
+        {...(rest as any)}
+    />
+{/if}
+
+{#if variant === 'modal' || variant === 'button'}
+    <Modal bind:open size="lg">
+        {#snippet content()}
+            <Command
+                {groups}
+                bind:search={value}
+                placeholder="Type a command or search..."
+                ui={{
+                    root: 'border-0 shadow-none'
+                }}
+            />
+        {/snippet}
+    </Modal>
+{/if}

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

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

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

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

package/dist/components/Search/index.js

@@ -0,0 +1 @@
+export { default as Search } from './Search.svelte';

package/dist/components/Search/search.types.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { CommandGroup } from 'sv5ui';
+export type SearchVariant = 'input' | 'modal' | 'button';
+export interface SearchProps extends Omit<HTMLAttributes<HTMLInputElement | HTMLButtonElement>, 'class'> {
+    /**
+     * Determines the visual style and behavior of the search component.
+     * - `input`: A standard input box.
+     * - `modal`: A fake input that opens a modal containing a Command palette when clicked.
+     * - `button`: A simple icon button that opens a modal containing a Command palette.
+     * @default 'input'
+     */
+    variant?: SearchVariant;
+    /**
+     * The value of the search input (when variant is 'input' or internal modal search).
+     */
+    value?: string;
+    /**
+     * Keyboard shortcut to display (and listen to) for opening the modal.
+     * E.g. `['meta', 'K']` or `['ctrl', '/']`
+     */
+    kbd?: string[];
+    /**
+     * Data groups to display in the Command palette (used when variant is 'modal' or 'button').
+     */
+    groups?: CommandGroup[];
+    /**
+     * Callback fired when an item is selected from the Command palette.
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * Placeholder text for the input or fake input.
+     * @default 'Search...'
+     */
+    placeholder?: string;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+}

package/dist/components/Search/search.types.js

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

package/dist/components/SortableGroup/SortableGroup.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">import { DragDropProvider, DragOverlay } from "@dnd-kit/svelte";
+import { setContext } from "svelte";
+import { SORTABLE_GROUP_CONTEXT_KEY } from "../../hooks/internal/sortable-context.js";
+let { children, onDragStart, onDragMove, onDragOver, onDragEnd, ...rest } = $props();
+let draggingId = $state(null);
+let draggingGroupId = $state(null);
+// Map of groupId -> overlay snippet registered by each SortableList
+const overlayRegistry = new Map();
+const ctx = {
+	get draggingId() {
+		return draggingId;
+	},
+	registerOverlay(groupId, snippet) {
+		overlayRegistry.set(groupId, snippet);
+	},
+	unregisterOverlay(groupId) {
+		overlayRegistry.delete(groupId);
+	},
+	getOverlay(groupId) {
+		return overlayRegistry.get(groupId);
+	},
+	setDraggingGroupId(groupId) {
+		draggingGroupId = groupId;
+	}
+};
+setContext(SORTABLE_GROUP_CONTEXT_KEY, ctx);
+function handleDragStart(event, manager) {
+	draggingId = event.operation.source?.id ?? null;
+	onDragStart?.(event, manager);
+}
+function handleDragEnd(event, manager) {
+	const sourceId = event.operation.source?.id;
+	setTimeout(() => {
+		if (draggingId === sourceId) {
+			draggingId = null;
+			draggingGroupId = null;
+		}
+	}, 250);
+	onDragEnd?.(event, manager);
+}
+</script>
+
+<DragDropProvider {...rest} onDragStart={handleDragStart} onDragEnd={handleDragEnd} {onDragMove} {onDragOver}>
+    {@render children?.()}
+    <DragOverlay>
+        {#snippet children(draggable)}
+            {@const snippet = ctx.getOverlay(draggingGroupId ?? '')}
+            {#if snippet}
+                {@render snippet({ item: draggable.data })}
+            {/if}
+        {/snippet}
+    </DragOverlay>
+</DragDropProvider>

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

@@ -0,0 +1,13 @@
+import { type Snippet } from 'svelte';
+import type { DragStartEvent, DragEndEvent, DragOverEvent, DragMoveEvent, DragDropManagerInput } from '@dnd-kit/dom';
+import type { DragDropManager } from '@dnd-kit/dom';
+interface Props extends DragDropManagerInput {
+    children?: Snippet;
+    onDragStart?: (event: DragStartEvent, manager: DragDropManager) => void;
+    onDragMove?: (event: DragMoveEvent, manager: DragDropManager) => void;
+    onDragOver?: (event: DragOverEvent, manager: DragDropManager) => void;
+    onDragEnd?: (event: DragEndEvent, manager: DragDropManager) => void;
+}
+declare const SortableGroup: import("svelte").Component<Props, {}, "">;
+type SortableGroup = ReturnType<typeof SortableGroup>;
+export default SortableGroup;

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

@@ -0,0 +1 @@
+export { default as SortableGroup } from './SortableGroup.svelte';

package/dist/components/SortableGroup/index.js

@@ -0,0 +1 @@
+export { default as SortableGroup } from './SortableGroup.svelte';

package/dist/components/SortableList/SortableList.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="T">import { twMerge } from "tailwind-merge";
+import { Icon } from "sv5ui";
+import { useSortable } from "../../hooks/useSortable/index.js";
+let { items = $bindable(), getKey, onReorder, axis = "vertical", handle = true, disabled = false, class: className, itemClass, children, overlay, group } = $props();
+const sortable = useSortable({
+	getItems: () => items,
+	getId: (item) => getKey(item),
+	group: () => group,
+	axis: () => axis,
+	handle: () => handle === true ? "[data-sortable-handle]" : typeof handle === "string" ? handle : undefined,
+	disabled: () => disabled,
+	onReorder(nextItems) {
+		items = nextItems;
+		onReorder?.(nextItems);
+	}
+});
+const listClass = $derived(twMerge(axis === "vertical" ? "flex flex-col gap-2" : axis === "horizontal" ? "flex flex-row flex-wrap gap-2" : "gap-3", className));
+const itemClasses = $derived(twMerge("relative flex items-center gap-3 rounded-lg border border-outline-variant/60 bg-surface-container-low px-3 py-2 select-none", itemClass));
+</script>
+
+<sortable.Provider {overlay}>
+    <div use:sortable.container class={listClass} role="list">
+        {#each items as item, index (getKey(item))}
+            {@const id = getKey(item)}
+            {@const dragging = sortable.draggingId === String(id)}
+            <div
+                use:sortable.item={{ index, item }}
+                role="listitem"
+                class={twMerge(
+                    'relative sortable-item',
+                    itemClasses,
+                    dragging && (overlay ? 'bg-transparent border-transparent' : 'z-10 opacity-95 shadow-md')
+                )}
+                aria-grabbed={dragging}
+            >
+                {#if overlay && dragging}
+                    <div class="absolute inset-0 z-10 rounded-[inherit] border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none"></div>
+                {/if}
+                <div class={['flex w-full items-center gap-3', overlay && dragging && 'invisible']}>
+                    {#if handle === true}
+                        <button
+                            type="button"
+                            data-sortable-handle
+                            class="inline-flex shrink-0 cursor-grab rounded-md p-1 text-on-surface-variant hover:bg-surface-container-high active:cursor-grabbing"
+                            aria-label="Drag to reorder"
+                        >
+                            <Icon name="lucide:grip-vertical" size="16" />
+                        </button>
+                    {/if}
+                    {@render children({ item, index, dragging })}
+                </div>
+            </div>
+        {/each}
+    </div>
+</sortable.Provider>
+
+<style>
+    :global([data-sortable-active='true']) {
+        user-select: none;
+    }
+
+    /*
+     * dnd-kit animates items via Web Animations API using the CSS `translate` property.
+     * Using will-change:translate tells the browser to promote these elements to their own
+     * GPU layer so the WAAPI animation (smooth push/shift) runs without layout thrashing.
+     * Do NOT add CSS transition:transform here — it conflicts with WAAPI and causes jank.
+     */
+    :global(.sortable-item) {
+        will-change: translate;
+    }
+
+    /* Smooth color/opacity transitions for the dragging state indicator */
+    :global(.sortable-item:not([aria-grabbed='true'])) {
+        transition: background-color 150ms ease,
+                    border-color 150ms ease,
+                    opacity 150ms ease;
+    }
+</style>

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

@@ -0,0 +1,26 @@
+export type { SortableListProps } from './sortable-list.types.js';
+import type { SortableListProps } from './sortable-list.types.js';
+declare function $$render<T>(): {
+    props: SortableListProps<T>;
+    exports: {};
+    bindings: "items";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "items";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SortableList: $$IsomorphicComponent;
+type SortableList<T> = InstanceType<typeof SortableList<T>>;
+export default SortableList;

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

@@ -0,0 +1,2 @@
+export { default as SortableList } from './SortableList.svelte';
+export type { SortableListProps } from './sortable-list.types.js';

package/dist/components/SortableList/index.js

@@ -0,0 +1 @@
+export { default as SortableList } from './SortableList.svelte';

package/dist/components/SortableList/sortable-list.types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export interface SortableListProps<T> {
+    items: T[];
+    getKey: (item: T) => string | number;
+    onReorder?: (items: T[]) => void;
+    axis?: 'vertical' | 'horizontal' | 'grid';
+    handle?: boolean | string;
+    disabled?: boolean;
+    class?: ClassNameValue;
+    itemClass?: ClassNameValue;
+    children: Snippet<[{
+        item: T;
+        index: number;
+        dragging: boolean;
+    }]>;
+    overlay?: Snippet<[{
+        item: T;
+    }]>;
+    group?: string;
+}

package/dist/components/SortableList/sortable-list.types.js

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

package/dist/components/Spotlight/Spotlight.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { spotlightVariants } from "./spotlight.variants.js";
+let { size = 400, color = "rgba(255, 255, 255, 0.1)", class: className, children, ...restProps } = $props();
+let styles = $derived(spotlightVariants());
+let mouseX = $state(0);
+let mouseY = $state(0);
+function handleMouseMove(e) {
+	const target = e.currentTarget;
+	const rect = target.getBoundingClientRect();
+	mouseX = e.clientX - rect.left;
+	mouseY = e.clientY - rect.top;
+}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div 
+    class={twMerge(styles.root() as string, className)}
+    onmousemove={handleMouseMove}
+    {...restProps}
+>
+    <!-- Spotlight Effect Background -->
+    <div 
+        class={styles.spotlight() as string}
+        style:background={`radial-gradient(${size}px circle at ${mouseX}px ${mouseY}px, ${color}, transparent 80%)`}
+    ></div>
+
+    <!-- Content -->
+    <div class={styles.content() as string}>
+        {@render children?.()}
+    </div>
+</div>

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

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

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

@@ -0,0 +1,4 @@
+import Spotlight from './Spotlight.svelte';
+export { Spotlight };
+export * from './spotlight.types.js';
+export * from './spotlight.variants.js';

package/dist/components/Spotlight/index.js

@@ -0,0 +1,4 @@
+import Spotlight from './Spotlight.svelte';
+export { Spotlight };
+export * from './spotlight.types.js';
+export * from './spotlight.variants.js';