@x33025/sveltely 0.0.58 → 0.1.0

package/dist/components/Sheet/Sheet.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { portalContent } from '../../actions/portal';
-	interface Props {
-		open?: boolean;
-		label?: string;
-		onClose?: () => void;
-		class?: string;
-		maxWidth?: string;
-		children?: Snippet;
-	}
-
-	let {
-		open = $bindable(false),
-		label = 'Dialog',
-		onClose,
-		class: className = '',
-		maxWidth = '32rem',
-		children
-	}: Props = $props();
-
-	function close() {
-		if (!open) return;
-		open = false;
-		onClose?.();
-	}
-
-	$effect(() => {
-		if (!open) return;
-		const onKey = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') close();
-		};
-		window.addEventListener('keydown', onKey);
-		return () => window.removeEventListener('keydown', onKey);
-	});
-</script>
-
-{#if open}
-	<div class="center fixed inset-0 z-50 flex" use:portalContent>
-		<button
-			type="button"
-			aria-label="Close dialog"
-			class="sheet-overlay absolute inset-0"
-			onclick={close}
-		></button>
-		<div
-			role="dialog"
-			aria-modal="true"
-			aria-label={label}
-			style={`max-width: ${maxWidth};`}
-			class="sheet relative z-10 flex max-h-full w-full flex-col overflow-auto {className}"
-		>
-			<div class="flex-1">
-				{#if children}
-					{@render children()}
-				{/if}
-			</div>
-		</div>
-	</div>
-{/if}

package/dist/components/Slider.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-	let {
-		value = $bindable(0),
-		min = 0,
-		max = 100,
-		step = 1,
-		disabled = false,
-		class: className = '',
-		style = '',
-		...props
-	}: {
-		value?: number;
-		min?: number;
-		max?: number;
-		step?: number | string;
-		disabled?: boolean;
-		class?: string;
-		style?: string;
-	} & Record<string, unknown> = $props();
-
-	const percent = $derived.by(() => {
-		const minValue = Number(min);
-		const maxValue = Number(max);
-		const currentValue = Number(value);
-		const range = maxValue - minValue;
-		if (!Number.isFinite(range) || range <= 0) return 0;
-		const raw = ((currentValue - minValue) / range) * 100;
-		return Math.max(0, Math.min(100, raw));
-	});
-
-	const sliderStyle = $derived.by(() => {
-		const cssVars = `--slider-pct: ${percent}%;`;
-		return style ? `${cssVars} ${style}` : cssVars;
-	});
-</script>
-
-<input
-	type="range"
-	bind:value
-	{min}
-	{max}
-	{step}
-	{disabled}
-	class="slider {className}"
-	style={sliderStyle}
-	{...props}
-/>

package/dist/components/Spinner.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { LoaderIcon } from '@lucide/svelte';
-
-	let { class: className = '', ...props }: { class?: string } & Record<string, unknown> = $props();
-</script>
-
-<LoaderIcon role="status" aria-label="Loading" class="size-4 animate-spin {className}" {...props} />

package/dist/components/TextShimmer.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-	interface Props {
-		text: string;
-		as?: keyof HTMLElementTagNameMap;
-		class?: string;
-		duration?: number;
-		spread?: number;
-	}
-
-	let { text, as = 'span', class: className = '', duration = 2, spread = 2 }: Props = $props();
-
-	let dynamicSpread = $derived(text.length * spread);
-</script>
-
-<svelte:element
-	this={as}
-	class="text-shimmer {className}"
-	style="--spread: {dynamicSpread}px; animation-duration: {duration}s; background-image: var(--bg), linear-gradient(var(--base-color), var(--base-color));"
->
-	{text}
-</svelte:element>
-
-<style>
-	@keyframes shimmer {
-		0% {
-			background-position: 100% center;
-		}
-		100% {
-			background-position: 0% center;
-		}
-	}
-
-	:global(.text-shimmer) {
-		position: relative;
-		display: inline-block;
-		width: max-content;
-		max-width: 100%;
-		background-size:
-			250% 100%,
-			auto;
-		background-clip: text;
-		-webkit-background-clip: text;
-		color: transparent;
-		--base-color: #a1a1aa;
-		--base-gradient-color: #000;
-		background-repeat: no-repeat, padding-box;
-		--bg: linear-gradient(
-			90deg,
-			#0000 calc(50% - var(--spread)),
-			var(--base-gradient-color),
-			#0000 calc(50% + var(--spread))
-		);
-		animation: shimmer linear infinite;
-	}
-
-	:global(.dark .text-shimmer) {
-		--base-color: #71717a;
-		--base-gradient-color: #ffffff;
-	}
-</style>

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

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

package/dist/components/TokenSearchInput.svelte

@@ -1,124 +0,0 @@
-<script lang="ts">
-	import { SearchIcon, X } from '@lucide/svelte';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-
-	type Props = {
-		tokens?: string[];
-		value?: string;
-		confirmText?: string | null;
-		inputClass?: string;
-		tokenClass?: string;
-		placeholder?: string;
-		tokenPlaceholder?: string;
-		normalizeToken?: (value: string) => string;
-		showIcon?: boolean;
-	} & Omit<HTMLInputAttributes, 'children' | 'type' | 'value' | 'placeholder'>;
-
-	const defaultNormalizeToken = (value: string) => value.trim().replace(/\s+/g, ' ');
-
-	let {
-		tokens = $bindable<string[]>([]),
-		value = $bindable(''),
-		confirmText = null,
-		inputClass = '',
-		tokenClass = '',
-		placeholder = 'Search',
-		tokenPlaceholder = 'Add search token',
-		normalizeToken = defaultNormalizeToken,
-		showIcon = false,
-		class: className = '',
-		disabled = false,
-		...props
-	}: Props = $props();
-
-	const addToken = (rawValue: string) => {
-		const token = normalizeToken(rawValue);
-		if (!token || tokens.includes(token)) return;
-		tokens = [...tokens, token];
-	};
-
-	const commitValue = () => {
-		addToken(value);
-		value = '';
-	};
-
-	const removeToken = (index: number) => {
-		if (index < 0 || index >= tokens.length) return;
-		tokens = tokens.filter((_, currentIndex) => currentIndex !== index);
-	};
-
-	const onKeydown = (event: KeyboardEvent) => {
-		if (event.key === 'Enter' || event.key === ',') {
-			event.preventDefault();
-			commitValue();
-			return;
-		}
-
-		if (event.key === 'Backspace' && value.length === 0 && tokens.length > 0) {
-			event.preventDefault();
-			tokens = tokens.slice(0, -1);
-		}
-	};
-
-	const onPaste = (event: ClipboardEvent) => {
-		const pasted = event.clipboardData?.getData('text') ?? '';
-		if (!pasted.includes(',')) return;
-
-		event.preventDefault();
-
-		const nextTokens = [...tokens];
-		const seen = new Set(nextTokens);
-		for (const part of pasted.split(',')) {
-			const token = normalizeToken(part);
-			if (!token || seen.has(token)) continue;
-			nextTokens.push(token);
-			seen.add(token);
-		}
-
-		tokens = nextTokens;
-		value = '';
-	};
-</script>
-
-<div
-	class="token-search-input hstack w-full flex-nowrap items-center gap-1 overflow-x-auto overflow-y-hidden whitespace-nowrap {className}"
-	class:token-search-input-has-tokens={tokens.length > 0}
-	data-disabled={disabled ? 'true' : 'false'}
->
-	{#if showIcon}
-		<span class="token-search-input-icon" aria-hidden="true">
-			<SearchIcon class="size-4" />
-		</span>
-	{/if}
-
-	{#each tokens as token, index (`${token}-${index}`)}
-		<button
-			type="button"
-			class="token-search-input-token {tokenClass}"
-			onclick={() => removeToken(index)}
-			aria-label={`Remove search token ${token}`}
-			{disabled}
-		>
-			<span>{token}</span>
-			<X class="size-3" aria-hidden="true" />
-		</button>
-	{/each}
-
-	<input
-		type="search"
-		bind:value
-		{disabled}
-		placeholder={tokens.length === 0 ? placeholder : tokenPlaceholder}
-		class="token-search-input-field {inputClass}"
-		onkeydown={onKeydown}
-		onpaste={onPaste}
-		onblur={commitValue}
-		{...props}
-	/>
-
-	{#if confirmText}
-		<span class="token-search-input-confirm">
-			{confirmText}
-		</span>
-	{/if}
-</div>

package/dist/components/Tooltip.demo.svelte

@@ -1,16 +0,0 @@
-<script module lang="ts">
-	export const demo = {
-		name: 'Tooltip',
-		description: 'Hover or focus a trigger to reveal contextual text.'
-	};
-</script>
-
-<script lang="ts">
-	import Tooltip from './Tooltip.svelte';
-</script>
-
-<Tooltip label="This is a tooltip">
-	<button type="button" class="rounded-full border border-zinc-300 px-3 py-2 text-sm text-zinc-800">
-		Hover me
-	</button>
-</Tooltip>

package/dist/components/Tooltip.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-	import { tick } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import { portalContent } from '../actions/portal';
-	import { computePosition, type Anchor } from '../utils/positioning';
-
-	let {
-		label,
-		class: className = '',
-		disabled = false,
-		anchor = 'top' as Anchor,
-		children,
-		...props
-	}: {
-		label: string;
-		class?: string;
-		disabled?: boolean;
-		anchor?: Anchor;
-		children: Snippet;
-	} & Record<string, unknown> = $props();
-
-	let triggerEl = $state<HTMLElement | null>(null);
-	let tooltipEl = $state<HTMLElement | null>(null);
-	let visible = $state(false);
-	let coords = $state({ top: 0, left: 0 });
-	let transform = $state('none');
-	let resolvedAnchor = $state<Anchor>('top');
-
-	const position = async () => {
-		await tick();
-		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
-		if (!triggerEl || !tooltipEl) return;
-		const result = computePosition(
-			triggerEl.getBoundingClientRect(),
-			tooltipEl.offsetWidth,
-			tooltipEl.offsetHeight,
-			anchor,
-			'center'
-		);
-		coords = { top: result.top, left: result.left };
-		transform = result.transform;
-		resolvedAnchor = result.anchor;
-	};
-
-	const show = () => {
-		if (disabled) return;
-		visible = true;
-		void position();
-	};
-
-	const hide = () => {
-		visible = false;
-	};
-</script>
-
-<span
-	bind:this={triggerEl}
-	class="inline-flex items-center {className}"
-	onmouseenter={show}
-	onmouseleave={hide}
-	onfocusin={show}
-	onfocusout={hide}
-	{...props}
->
-	{@render children()}
-</span>
-
-{#if visible}
-	<div
-		use:portalContent
-		class="tooltip pointer-events-none fixed z-50"
-		data-anchor={resolvedAnchor}
-		style="top: {coords.top}px; left: {coords.left}px; transform: {transform};"
-		role="tooltip"
-		bind:this={tooltipEl}
-	>
-		{label}
-	</div>
-{/if}

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

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type Anchor } from '../utils/positioning';
-type $$ComponentProps = {
-    label: string;
-    class?: string;
-    disabled?: boolean;
-    anchor?: Anchor;
-    children: Snippet;
-} & Record<string, unknown>;
-declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
-type Tooltip = ReturnType<typeof Tooltip>;
-export default Tooltip;