@x33025/sveltely 0.0.1

package/dist/components/Sheet/Sheet.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { portal } from '../../actions/portal';
+	interface Props {
+		open?: boolean;
+		label?: string;
+		onClose?: () => void;
+		class?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		label = 'Dialog',
+		onClose,
+		class: className = '',
+		header,
+		footer,
+		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:portal>
+		<div class="absolute inset-0 bg-black/20 backdrop-blur-sm" on:click|self={close}></div>
+		<section
+			role="dialog"
+			aria-modal="true"
+			aria-label={label}
+			class="relative z-10 flex max-h-full w-full flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-zinc-950/10 {className}"
+		>
+			{#if header}
+				<div class="border-b border-gray-200/70 px-4 py-3 text-sm font-medium text-gray-700">
+					{@render header()}
+				</div>
+			{/if}
+			<div class="flex-1 overflow-auto px-4 py-4">
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+			{#if footer}
+				<div class="border-t border-gray-200/70 px-4 py-3 text-sm text-gray-600">
+					{@render footer()}
+				</div>
+			{/if}
+		</section>
+	</div>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    label?: string;
+    onClose?: () => void;
+    class?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+}
+declare const Sheet: import("svelte").Component<Props, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

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

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

package/dist/components/Sheet/index.js

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

package/dist/components/Spinner.svelte

@@ -0,0 +1,7 @@
+<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/Spinner.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+} & Record<string, unknown>;
+declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/TabView/Tab.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		value: string;
+		disabled?: boolean;
+		class?: string;
+		activeClass?: string;
+		children?: Snippet;
+	}
+
+	let {
+		value,
+		disabled = false,
+		class: className = '',
+		activeClass = '',
+		children
+	}: Props = $props();
+
+	const context = getContext<{
+		active: string;
+		setActive: (value: string) => void;
+		registerTab?: (value: string) => void;
+	}>('tabView');
+
+	const isActive = $derived(context.active === value);
+
+	$effect(() => {
+		context.registerTab?.(value);
+	});
+
+	function handleClick() {
+		if (disabled) return;
+		context.setActive(value);
+	}
+</script>
+
+<button
+	id={'tab-' + value}
+	type="button"
+	role="tab"
+	aria-selected={isActive}
+	aria-controls={'panel-' + value}
+	{disabled}
+	class="{className} {isActive ? activeClass : ''}"
+	onclick={handleClick}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</button>

package/dist/components/TabView/Tab.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    value: string;
+    disabled?: boolean;
+    class?: string;
+    activeClass?: string;
+    children?: Snippet;
+}
+declare const Tab: import("svelte").Component<Props, {}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

package/dist/components/TabView/TabPanel.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		value: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { value, class: className = '', children }: Props = $props();
+
+	const context = getContext<{
+		active: string;
+		setActive: (value: string) => void;
+	}>('tabView');
+
+	const isActive = $derived(context.active === value);
+</script>
+
+{#if isActive}
+	<div
+		id={"panel-" + value}
+		role="tabpanel"
+		aria-labelledby={"tab-" + value}
+		class={className}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/if}

package/dist/components/TabView/TabPanel.svelte.d.ts

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

package/dist/components/TabView/TabView.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		active: string;
+		onChange?: (value: string) => void;
+		tabs?: Snippet;
+		panels?: Snippet;
+	}
+
+	let { active = $bindable(), onChange, tabs, panels }: Props = $props();
+
+	function setActive(value: string) {
+		if (active === value) return;
+		active = value;
+		onChange?.(value);
+	}
+
+	setContext('tabView', {
+		get active() {
+			return active;
+		},
+		setActive
+	});
+</script>
+
+{#if tabs}
+	<div role="tablist">
+		{@render tabs()}
+	</div>
+{/if}
+
+{#if panels}
+	<div>
+		{@render panels()}
+	</div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    active: string;
+    onChange?: (value: string) => void;
+    tabs?: Snippet;
+    panels?: Snippet;
+}
+declare const TabView: import("svelte").Component<Props, {}, "active">;
+type TabView = ReturnType<typeof TabView>;
+export default TabView;

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

@@ -0,0 +1,8 @@
+import TabViewRoot from './TabView.svelte';
+import Tab from './Tab.svelte';
+import TabPanel from './TabPanel.svelte';
+declare const TabView: typeof TabViewRoot & {
+    Tab: typeof Tab;
+    Panel: typeof TabPanel;
+};
+export default TabView;

package/dist/components/TabView/index.js

@@ -0,0 +1,7 @@
+import TabViewRoot from './TabView.svelte';
+import Tab from './Tab.svelte';
+import TabPanel from './TabPanel.svelte';
+const TabView = TabViewRoot;
+TabView.Tab = Tab;
+TabView.Panel = TabPanel;
+export default TabView;

package/dist/components/TextShimmer.svelte

@@ -0,0 +1,60 @@
+<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

@@ -0,0 +1,10 @@
+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/index.d.ts

@@ -0,0 +1,10 @@
+export { motion, hover } from './actions/motion';
+export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
+export { default as GlowEffect } from './components/GlowEffect.svelte';
+export { default as NavigationStack } from './components/NavigationStack';
+export { default as Portal } from './components/Portal.svelte';
+export { default as Sheet } from './components/Sheet';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as TextShimmer } from './components/TextShimmer.svelte';
+export { default as Dropdown } from './components/Dropdown';
+export { default as TabView } from './components/TabView';

package/dist/index.js

@@ -0,0 +1,10 @@
+export { motion, hover } from './actions/motion';
+export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
+export { default as GlowEffect } from './components/GlowEffect.svelte';
+export { default as NavigationStack } from './components/NavigationStack';
+export { default as Portal } from './components/Portal.svelte';
+export { default as Sheet } from './components/Sheet';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as TextShimmer } from './components/TextShimmer.svelte';
+export { default as Dropdown } from './components/Dropdown';
+export { default as TabView } from './components/TabView';

package/dist/style/index.css

@@ -0,0 +1,30 @@
+@import 'tailwindcss';
+
+@layer base {
+	html,
+	body {
+		@apply size-full overflow-hidden;
+	}
+}
+
+@layer utilities {
+	.layout {
+		@apply flex size-full min-h-0 flex-col;
+	}
+
+	.page {
+		@apply flex min-h-0 w-full flex-1 flex-col;
+	}
+
+	.center {
+		@apply items-center justify-center;
+	}
+
+	.vstack {
+		@apply flex min-h-0 flex-1 flex-col;
+	}
+
+	.hstack {
+		@apply flex min-h-0 min-w-0 flex-1 flex-row;
+	}
+}