@x33025/sveltely 0.0.57 → 0.1.0

package/dist/components/Sheet/Sheet.demo.svelte.d.ts

@@ -1,8 +0,0 @@
-export declare const demo: {
-    name: string;
-    description: string;
-};
-import Sheet from './Sheet.svelte';
-declare const Sheet: import("svelte").Component<Record<string, never>, {}, "">;
-type Sheet = ReturnType<typeof Sheet>;
-export default Sheet;

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/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;