@x33025/sveltely 0.0.1

package/README.md

@@ -0,0 +1,65 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv create --template library --types ts --add prettier eslint tailwindcss="plugins:none" --install npm sveltely
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/actions/motion.d.ts

@@ -0,0 +1,9 @@
+import { type AnimationOptions, type DOMKeyframesDefinition } from 'motion';
+import type { Action } from 'svelte/action';
+type MotionParams = {
+    keyframes: DOMKeyframesDefinition;
+    options?: AnimationOptions;
+};
+export declare const motion: Action<HTMLElement, MotionParams>;
+export declare const hover: Action;
+export {};

package/dist/actions/motion.js

@@ -0,0 +1,24 @@
+import { animate, hover as hoverMotion } from 'motion';
+export const motion = (node, data = { keyframes: { scale: [0, 1] } }) => {
+    let animation = animate(node, data.keyframes, data.options);
+    return {
+        update(next) {
+            animation.cancel();
+            animation = animate(node, next.keyframes, next.options);
+        },
+        destroy() {
+            animation.cancel();
+        }
+    };
+};
+export const hover = (node) => {
+    const cleanup = hoverMotion(node, (element) => {
+        animate(element, { scale: 1.3 }, { type: 'spring', duration: 0.3 });
+        return () => animate(element, { scale: 1 }, { type: 'spring' });
+    });
+    return {
+        destroy() {
+            cleanup();
+        }
+    };
+};

package/dist/actions/portal.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Creates a portal host. Use this on the element that should contain the portaled content.
+ */
+export declare function createPortal(node: HTMLElement, id?: string): {
+    destroy(): void;
+};
+/**
+ * Portals an element to a named host created with createPortal.
+ */
+export declare function portal(node: HTMLElement, id?: string): {
+    destroy: () => void | undefined;
+};

package/dist/actions/portal.js

@@ -0,0 +1,47 @@
+import { tick } from 'svelte';
+const portal_map = new Map();
+/**
+ * Creates a portal host. Use this on the element that should contain the portaled content.
+ */
+export function createPortal(node, id = 'default') {
+    const key = `$$portal.${id}`;
+    if (portal_map.has(key)) {
+        throw new Error(`Duplicate portal key "${id}"`);
+    }
+    portal_map.set(key, node);
+    return {
+        destroy() {
+            portal_map.delete(key);
+        }
+    };
+}
+function mount(node, key) {
+    if (!portal_map.has(key)) {
+        throw new Error(`Unknown portal target: ${key.replace('$$portal.', '')}`);
+    }
+    const host = portal_map.get(key);
+    host.appendChild(node);
+    return () => {
+        if (host.contains(node)) {
+            host.removeChild(node);
+        }
+    };
+}
+/**
+ * Portals an element to a named host created with createPortal.
+ */
+export function portal(node, id = 'default') {
+    let destroy;
+    const key = `$$portal.${id}`;
+    if (!portal_map.has(key)) {
+        tick().then(() => {
+            destroy = mount(node, key);
+        });
+    }
+    else {
+        destroy = mount(node, key);
+    }
+    return {
+        destroy: () => destroy?.()
+    };
+}

package/dist/components/AnimatedNumber.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Spring } from 'svelte/motion';
+
+	interface Props {
+		value: number;
+		class?: string;
+		as?: keyof HTMLElementTagNameMap;
+	}
+
+	let { value, class: className = '', as = 'span' }: Props = $props();
+
+	const spring = Spring.of(() => value);
+	const display = $derived(Math.round(spring.current).toLocaleString());
+</script>
+
+<svelte:element this={as} class="tabular-nums {className}">
+	{display}
+</svelte:element>

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

@@ -0,0 +1,8 @@
+interface Props {
+    value: number;
+    class?: string;
+    as?: keyof HTMLElementTagNameMap;
+}
+declare const AnimatedNumber: import("svelte").Component<Props, {}, "">;
+type AnimatedNumber = ReturnType<typeof AnimatedNumber>;
+export default AnimatedNumber;

package/dist/components/Dropdown/Dropdown.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { portal } from '../../actions/portal';
+
+	interface Props {
+		trigger: Snippet;
+		children: Snippet;
+		class?: string;
+		align?: 'left' | 'right';
+		closeOnSelect?: boolean;
+	}
+
+	let {
+		trigger,
+		children,
+		class: className = '',
+		align = 'left',
+		closeOnSelect = true
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let triggerEl = $state<HTMLElement | null>(null);
+	let menuCoords = $state({ top: 0, left: 0, width: 0 });
+
+	function open() {
+		if (triggerEl) {
+			const rect = triggerEl.getBoundingClientRect();
+			menuCoords = {
+				top: rect.bottom + window.scrollY,
+				left: align === 'left' ? rect.left + window.scrollX : rect.right + window.scrollX,
+				width: rect.width
+			};
+		}
+		isOpen = true;
+	}
+
+	function close() {
+		isOpen = false;
+	}
+
+	function toggle() {
+		if (isOpen) {
+			close();
+		} else {
+			open();
+		}
+	}
+
+	function handleOutsideClick(event: MouseEvent) {
+		if (!isOpen) return;
+		const target = event.target as HTMLElement;
+		if (target.closest('.dropdown-container') || target.closest('.dropdown-menu')) return;
+		close();
+	}
+
+	function handleSelect() {
+		if (closeOnSelect) close();
+	}
+</script>
+
+<svelte:window onclick={handleOutsideClick} onscroll={close} onresize={close} />
+
+<div class="dropdown-container relative inline-block text-left {className}">
+	<div bind:this={triggerEl}>
+		<button type="button" onclick={toggle} aria-expanded={isOpen} aria-haspopup="true">
+			{@render trigger()}
+		</button>
+	</div>
+
+	{#if isOpen}
+		<div
+			use:portal
+			class="dropdown-menu fixed z-50 rounded-md border border-gray-200 bg-white shadow-lg focus:outline-none"
+			style="top: {menuCoords.top}px; {align === 'left'
+				? `left: ${menuCoords.left}px;`
+				: `right: ${window.innerWidth - menuCoords.left}px;`}"
+			role="menu"
+			aria-orientation="vertical"
+			tabindex="-1"
+		>
+			<div class="overflow-auto p-1" role="none" onclick={handleSelect}>
+				{@render children()}
+			</div>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    trigger: Snippet;
+    children: Snippet;
+    class?: string;
+    align?: 'left' | 'right';
+    closeOnSelect?: boolean;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

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

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

package/dist/components/Dropdown/index.js

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

package/dist/components/GlowEffect.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		colors?: string[];
+		mode?: 'breathe' | 'colorShift';
+		blur?: number | 'softest' | 'soft' | 'medium' | 'strong' | 'stronger' | 'strongest' | 'none';
+		scale?: number;
+		duration?: number;
+	}
+
+	let {
+		class: className = '',
+		colors = ['#FF5733', '#33FF57', '#3357FF', '#F1C40F'],
+		mode = 'breathe',
+		blur = 'medium',
+		scale = 1,
+		duration = 5
+	}: Props = $props();
+
+	const getBlurClass = (blurValue: Props['blur']) => {
+		if (typeof blurValue === 'number') return `blur-[${blurValue}px]`;
+		const presets = {
+			softest: 'blur-xs',
+			soft: 'blur-sm',
+			medium: 'blur-md',
+			strong: 'blur-lg',
+			stronger: 'blur-xl',
+			strongest: 'blur-2xl',
+			none: 'blur-none'
+		};
+		return presets[blurValue as keyof typeof presets] || 'blur-md';
+	};
+
+	const getBackground = () => {
+		if (mode === 'colorShift') {
+			return `conic-gradient(from 0deg at 50% 50%, var(--glow-color-1) 0%, var(--glow-color-2) 50%, var(--glow-color-1) 100%)`;
+		}
+		return `radial-gradient(circle at 50% 50%, ${colors[0]} 0%, transparent 100%)`;
+	};
+
+	const getAnimationClass = () => {
+		if (mode === 'colorShift') return 'animate-glow-rotate animate-glow-colors';
+		if (mode === 'breathe') return 'animate-glow-breathe';
+		return '';
+	};
+
+	const background = $derived(getBackground());
+	const animationClass = $derived(getAnimationClass());
+	const colorDuration = $derived(`${duration * colors.length}s`);
+</script>
+
+<div
+	class="pointer-events-none absolute inset-0 -z-10 h-full w-full overflow-hidden rounded-full {getBlurClass(
+		blur
+	)} {className}"
+	style:isolation="isolate"
+	style:transform-origin="center"
+>
+	<div
+		class="absolute transform-gpu {animationClass}"
+		style="
+			left: 50%;
+			top: 50%;
+			width: 200%;
+			height: 200%;
+			translate: -50% -50%;
+			scale: {scale};
+			background: {background};
+			will-change: transform;
+			backface-visibility: hidden;
+			--glow-color-1: {colors[0]};
+			--glow-color-2: {colors[1] || colors[0]};
+			--c1: {colors[0]};
+			--c2: {colors[1] || colors[0]};
+			--c3: {colors[2] || colors[0]};
+			--c4: {colors[3] || colors[0]};
+			--rotation-duration: {duration}s;
+			--color-duration: {colorDuration};
+		"
+	></div>
+</div>
+
+<style>
+	@property --glow-color-1 {
+		syntax: '<color>';
+		inherits: false;
+		initial-value: #ff5733;
+	}
+
+	@property --glow-color-2 {
+		syntax: '<color>';
+		inherits: false;
+		initial-value: #33ff57;
+	}
+
+	@keyframes glow-colors {
+		0% {
+			--glow-color-1: var(--c1);
+			--glow-color-2: var(--c2);
+		}
+		25% {
+			--glow-color-1: var(--c2);
+			--glow-color-2: var(--c3);
+		}
+		50% {
+			--glow-color-1: var(--c3);
+			--glow-color-2: var(--c4);
+		}
+		75% {
+			--glow-color-1: var(--c4);
+			--glow-color-2: var(--c1);
+		}
+		100% {
+			--glow-color-1: var(--c1);
+			--glow-color-2: var(--c2);
+		}
+	}
+
+	@keyframes glow-breathe {
+		0%,
+		100% {
+			scale: 1;
+		}
+		50% {
+			scale: 1.05;
+		}
+	}
+
+	.animate-glow-colors {
+		animation: glow-colors var(--color-duration, 20s) linear infinite;
+	}
+
+	.animate-glow-breathe {
+		animation: glow-breathe var(--rotation-duration, 5s) ease-in-out infinite;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    class?: string;
+    colors?: string[];
+    mode?: 'breathe' | 'colorShift';
+    blur?: number | 'softest' | 'soft' | 'medium' | 'strong' | 'stronger' | 'strongest' | 'none';
+    scale?: number;
+    duration?: number;
+}
+declare const GlowEffect: import("svelte").Component<Props, {}, "">;
+type GlowEffect = ReturnType<typeof GlowEffect>;
+export default GlowEffect;

package/dist/components/NavigationStack/NavigationStack.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { setContext, getContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		left?: Snippet;
+		right?: Snippet;
+		children?: Snippet;
+	}
+
+	let { left, right, children }: Props = $props();
+
+	const existingContext = getContext<{
+		leftOpen?: boolean;
+		rightOpen?: boolean;
+	}>('navigationStack');
+
+	let leftOpen = $state(existingContext?.leftOpen ?? true);
+	let rightOpen = $state(existingContext?.rightOpen ?? true);
+
+	function toggleLeft() {
+		leftOpen = !leftOpen;
+	}
+
+	function toggleRight() {
+		rightOpen = !rightOpen;
+	}
+
+	setContext('navigationStack', {
+		get leftOpen() {
+			return leftOpen;
+		},
+		get rightOpen() {
+			return rightOpen;
+		},
+		toggleLeft,
+		toggleRight
+	});
+</script>
+
+<div class="hstack size-full">
+	{#if left}
+		<div
+			class="h-full overflow-hidden border-r border-gray-200 transition-all duration-300 ease-in-out"
+			style="width: {leftOpen ? '16rem' : '0'}; opacity: {leftOpen ? '1' : '0'}"
+		>
+			<div class="vstack h-full w-64 overflow-auto bg-gray-50 p-4">
+				{@render left()}
+			</div>
+		</div>
+	{/if}
+
+	<div class="vstack">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if right}
+		<div
+			class="h-full overflow-hidden border-l border-gray-200 transition-all duration-300 ease-in-out"
+			style="width: {rightOpen ? '16rem' : '0'}; opacity: {rightOpen ? '1' : '0'}"
+		>
+			<div class="vstack h-full w-64 overflow-auto bg-gray-50 p-4">
+				{@render right()}
+			</div>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+}
+declare const NavigationStack: import("svelte").Component<Props, {}, "">;
+type NavigationStack = ReturnType<typeof NavigationStack>;
+export default NavigationStack;

package/dist/components/NavigationStack/SidebarToggle.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { PanelLeft, PanelRight } from '@lucide/svelte';
+
+	interface Props {
+		side: 'left' | 'right';
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { side, children, class: className = '' }: Props = $props();
+
+	const ctx = getContext<{
+		toggleLeft: () => void;
+		toggleRight: () => void;
+	}>('navigationStack');
+
+	function handleClick() {
+		if (side === 'left') {
+			ctx?.toggleLeft();
+		} else {
+			ctx?.toggleRight();
+		}
+	}
+</script>
+
+<button
+	onclick={handleClick}
+	class="rounded p-1.5 hover:bg-zinc-100 {className}"
+	title="Toggle {side} sidebar"
+>
+	{#if children}
+		{@render children()}
+	{:else if side === 'left'}
+		<PanelLeft class="h-5 w-5" />
+	{:else}
+		<PanelRight class="h-5 w-5" />
+	{/if}
+</button>

package/dist/components/NavigationStack/SidebarToggle.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    side: 'left' | 'right';
+    children?: Snippet;
+    class?: string;
+}
+declare const SidebarToggle: import("svelte").Component<Props, {}, "">;
+type SidebarToggle = ReturnType<typeof SidebarToggle>;
+export default SidebarToggle;

package/dist/components/NavigationStack/Toolbar.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		header?: Snippet;
+		children?: Snippet;
+	}
+
+	let { header, children }: Props = $props();
+</script>
+
+<div class="vstack h-full">
+	{#if header}
+		<div class="flex items-center gap-2 border-b border-zinc-200 bg-white p-2">
+			{@render header()}
+		</div>
+	{/if}
+
+	<div class="vstack">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>

package/dist/components/NavigationStack/Toolbar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    header?: Snippet;
+    children?: Snippet;
+}
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

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

@@ -0,0 +1,8 @@
+import NavigationStackComponent from './NavigationStack.svelte';
+import Toolbar from './Toolbar.svelte';
+import SidebarToggle from './SidebarToggle.svelte';
+declare const NavigationStack: typeof NavigationStackComponent & {
+    Toolbar: typeof Toolbar;
+    SidebarToggle: typeof SidebarToggle;
+};
+export default NavigationStack;

package/dist/components/NavigationStack/index.js

@@ -0,0 +1,8 @@
+import NavigationStackComponent from './NavigationStack.svelte';
+import Toolbar from './Toolbar.svelte';
+import SidebarToggle from './SidebarToggle.svelte';
+// Attach subcomponents for NavigationStack.Toolbar/SidebarToggle syntax
+const NavigationStack = NavigationStackComponent;
+NavigationStack.Toolbar = Toolbar;
+NavigationStack.SidebarToggle = SidebarToggle;
+export default NavigationStack;

package/dist/components/Portal.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { createPortal } from '../actions/portal';
+	export let name: string = 'default';
+</script>
+
+<div use:createPortal={name}></div>

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

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Portal: $$__sveltets_2_IsomorphicComponent<{
+    name?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Portal = InstanceType<typeof Portal>;
+export default Portal;