yaxa-svelte 1.0.0

package/dist/components/overlays/Modal.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const modalVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "max-w-sm";
+        md: "max-w-lg";
+        lg: "max-w-2xl";
+        xl: "max-w-4xl";
+        full: "max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]";
+    };
+}, undefined, "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-neutral-200 bg-white p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900", {
+    size: {
+        sm: "max-w-sm";
+        md: "max-w-lg";
+        lg: "max-w-2xl";
+        xl: "max-w-4xl";
+        full: "max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "max-w-sm";
+        md: "max-w-lg";
+        lg: "max-w-2xl";
+        xl: "max-w-4xl";
+        full: "max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]";
+    };
+}, undefined>>;
+export type ModalProps = VariantProps<typeof modalVariants> & {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    trigger?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+};
+declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/overlays/Popover.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Popover } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		open?: boolean;
+		trigger?: Snippet;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { open = $bindable(false), trigger, children, class: className = '' }: Props = $props();
+</script>
+
+<Popover.Root bind:open>
+	{#if trigger}
+		<Popover.Trigger class="inline-flex">
+			{@render trigger()}
+		</Popover.Trigger>
+	{/if}
+
+	<Popover.Portal>
+		<Popover.Content
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl duration-150 outline-none dark:border-neutral-800 dark:bg-neutral-900 {className}"
+			sideOffset={8}
+		>
+			{#if children}
+				{@render children()}
+			{/if}
+			<Popover.Arrow class="fill-neutral-200 dark:fill-neutral-800" />
+		</Popover.Content>
+	</Popover.Portal>
+</Popover.Root>

package/dist/components/overlays/Popover.svelte.d.ts

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

package/dist/components/overlays/Slideover.svelte

@@ -0,0 +1,102 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const slideoverVariants = tv({
+		base: 'fixed z-50 flex flex-col border-neutral-200 bg-white p-6 shadow-2xl transition-transform duration-300 dark:border-neutral-800 dark:bg-neutral-900',
+		variants: {
+			side: {
+				right:
+					'inset-y-0 right-0 h-full w-full max-w-md border-l data-[state=closed]:translate-x-full data-[state=open]:translate-x-0',
+				left: 'inset-y-0 left-0 h-full w-full max-w-md border-r data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0',
+				top: 'inset-x-0 top-0 w-full max-h-[80vh] border-b data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0',
+				bottom:
+					'inset-x-0 bottom-0 w-full max-h-[80vh] rounded-t-2xl border-t data-[state=closed]:translate-y-full data-[state=open]:translate-y-0'
+			}
+		},
+		defaultVariants: {
+			side: 'right'
+		}
+	});
+
+	export type SlideoverProps = VariantProps<typeof slideoverVariants> & {
+		open?: boolean;
+		title?: string;
+		description?: string;
+		trigger?: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	import { Dialog } from 'bits-ui';
+	import Icon from '../elements/Icon.svelte';
+
+	let {
+		open = $bindable(false),
+		side = 'right',
+		title,
+		description,
+		trigger,
+		header,
+		footer,
+		children,
+		class: className = ''
+	}: SlideoverProps = $props();
+</script>
+
+<Dialog.Root bind:open>
+	{#if trigger}
+		<Dialog.Trigger class="inline-flex">
+			{@render trigger()}
+		</Dialog.Trigger>
+	{/if}
+
+	<Dialog.Portal>
+		<Dialog.Overlay
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-neutral-900/60 backdrop-blur-xs duration-300"
+		/>
+		<Dialog.Content class={slideoverVariants({ side, class: className })}>
+			{#if header}
+				{@render header()}
+			{:else if title || description}
+				<div class="mb-4">
+					{#if title}
+						<Dialog.Title class="text-lg font-bold text-neutral-900 dark:text-white">
+							{title}
+						</Dialog.Title>
+					{/if}
+					{#if description}
+						<Dialog.Description class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+							{description}
+						</Dialog.Description>
+					{/if}
+				</div>
+			{/if}
+
+			{#if children}
+				<div class="my-2 flex-1 overflow-y-auto">
+					{@render children()}
+				</div>
+			{/if}
+
+			{#if footer}
+				<div
+					class="mt-6 flex justify-end gap-3 border-t border-neutral-100 pt-4 dark:border-neutral-800"
+				>
+					{@render footer()}
+				</div>
+			{/if}
+
+			<Dialog.Close
+				class="absolute top-4 right-4 rounded-lg p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+				aria-label="Close slideover"
+			>
+				<Icon name="cross" size="sm" />
+			</Dialog.Close>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

package/dist/components/overlays/Slideover.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const slideoverVariants: import("tailwind-variants").TVReturnType<{
+    side: {
+        right: "inset-y-0 right-0 h-full w-full max-w-md border-l data-[state=closed]:translate-x-full data-[state=open]:translate-x-0";
+        left: "inset-y-0 left-0 h-full w-full max-w-md border-r data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0";
+        top: "inset-x-0 top-0 w-full max-h-[80vh] border-b data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0";
+        bottom: "inset-x-0 bottom-0 w-full max-h-[80vh] rounded-t-2xl border-t data-[state=closed]:translate-y-full data-[state=open]:translate-y-0";
+    };
+}, undefined, "fixed z-50 flex flex-col border-neutral-200 bg-white p-6 shadow-2xl transition-transform duration-300 dark:border-neutral-800 dark:bg-neutral-900", {
+    side: {
+        right: "inset-y-0 right-0 h-full w-full max-w-md border-l data-[state=closed]:translate-x-full data-[state=open]:translate-x-0";
+        left: "inset-y-0 left-0 h-full w-full max-w-md border-r data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0";
+        top: "inset-x-0 top-0 w-full max-h-[80vh] border-b data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0";
+        bottom: "inset-x-0 bottom-0 w-full max-h-[80vh] rounded-t-2xl border-t data-[state=closed]:translate-y-full data-[state=open]:translate-y-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    side: {
+        right: "inset-y-0 right-0 h-full w-full max-w-md border-l data-[state=closed]:translate-x-full data-[state=open]:translate-x-0";
+        left: "inset-y-0 left-0 h-full w-full max-w-md border-r data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0";
+        top: "inset-x-0 top-0 w-full max-h-[80vh] border-b data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0";
+        bottom: "inset-x-0 bottom-0 w-full max-h-[80vh] rounded-t-2xl border-t data-[state=closed]:translate-y-full data-[state=open]:translate-y-0";
+    };
+}, undefined>>;
+export type SlideoverProps = VariantProps<typeof slideoverVariants> & {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    trigger?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+};
+declare const Slideover: import("svelte").Component<SlideoverProps, {}, "open">;
+type Slideover = ReturnType<typeof Slideover>;
+export default Slideover;

package/dist/components/overlays/Tooltip.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Tooltip } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		text?: string;
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		trigger?: Snippet;
+		content?: Snippet;
+		children?: Snippet;
+	}
+
+	let { text, side = 'top', trigger, content, children }: Props = $props();
+</script>
+
+<Tooltip.Root>
+	<Tooltip.Trigger class="inline-flex">
+		{#if trigger}
+			{@render trigger()}
+		{:else if children}
+			{@render children()}
+		{/if}
+	</Tooltip.Trigger>
+
+	<Tooltip.Portal>
+		<Tooltip.Content
+			{side}
+			sideOffset={6}
+			class="animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white shadow-md dark:bg-neutral-100 dark:text-neutral-900"
+		>
+			{#if content}
+				{@render content()}
+			{:else if text}
+				{text}
+			{/if}
+			<Tooltip.Arrow class="fill-neutral-900 dark:fill-neutral-100" />
+		</Tooltip.Content>
+	</Tooltip.Portal>
+</Tooltip.Root>

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

@@ -0,0 +1,12 @@
+import { Tooltip } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    text?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    trigger?: Snippet;
+    content?: Snippet;
+    children?: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/saas/AuthCard.svelte

@@ -0,0 +1,273 @@
+<script lang="ts">
+	import Card from '../layout/Card.svelte';
+	import Button from '../elements/Button.svelte';
+	import Input from '../forms/Input.svelte';
+	import FormField from '../forms/FormField.svelte';
+	import Divider from '../layout/Divider.svelte';
+	import Alert from '../overlays/Alert.svelte';
+	import Icon from '../elements/Icon.svelte';
+	import { useAuth, type SocialProvider } from '../../composables/useAuth.svelte';
+
+	interface Props {
+		title?: string;
+		subtitle?: string;
+		mode?: 'signin' | 'signup' | 'magic-link';
+		providers?: SocialProvider[];
+		showSocial?: boolean;
+		showMagicLinkToggle?: boolean;
+		callbackURL?: string;
+		class?: string;
+		onsuccess?: () => void;
+		onerror?: (err: string) => void;
+	}
+
+	let {
+		title,
+		subtitle,
+		mode = 'signin',
+		providers = ['github', 'google'],
+		showSocial = true,
+		showMagicLinkToggle = true,
+		callbackURL = '/dashboard',
+		class: className = '',
+		onsuccess,
+		onerror
+	}: Props = $props();
+
+	const auth = useAuth();
+
+	let customMode = $state<'signin' | 'signup' | 'magic-link' | null>(null);
+	let currentMode = $derived(customMode ?? mode);
+
+	let name = $state('');
+	let email = $state('');
+	let password = $state('');
+	let localError = $state<string | null>(null);
+	let magicLinkSent = $state(false);
+
+	async function handleSocial(provider: SocialProvider) {
+		localError = null;
+		await auth.signInWithSocial(provider);
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		localError = null;
+
+		if (currentMode === 'magic-link') {
+			const ok = await auth.signInWithMagicLink(email);
+			if (ok) {
+				magicLinkSent = true;
+				if (onsuccess) onsuccess();
+			} else {
+				localError = auth.error || 'Failed to send magic link';
+				if (onerror) onerror(localError);
+			}
+			return;
+		}
+
+		if (currentMode === 'signup') {
+			const ok = await auth.signUpWithEmail(email, password, name);
+			if (ok) {
+				if (onsuccess) onsuccess();
+				if (typeof window !== 'undefined') window.location.href = callbackURL;
+			} else {
+				localError = auth.error || 'Could not create account';
+				if (onerror) onerror(localError);
+			}
+			return;
+		}
+
+		// Sign In mode
+		const ok = await auth.signInWithEmail(email, password);
+		if (ok) {
+			if (onsuccess) onsuccess();
+			if (typeof window !== 'undefined') window.location.href = callbackURL;
+		} else {
+			localError = auth.error || 'Invalid email or password';
+			if (onerror) onerror(localError);
+		}
+	}
+</script>
+
+<Card
+	class="mx-auto w-full max-w-md space-y-6 border-zinc-200 p-6 shadow-xl sm:p-8 dark:border-zinc-800 {className}"
+>
+	<!-- Header -->
+	<div class="space-y-1.5 text-center">
+		<h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+			{#if title}
+				{title}
+			{:else if currentMode === 'signup'}
+				Create an account
+			{:else if currentMode === 'magic-link'}
+				Sign in with Magic Link
+			{:else}
+				Welcome back
+			{/if}
+		</h2>
+		<p class="text-sm text-zinc-500 dark:text-zinc-400">
+			{#if subtitle}
+				{subtitle}
+			{:else if currentMode === 'signup'}
+				Start your 14-day free trial, no credit card required.
+			{:else if currentMode === 'magic-link'}
+				We will email you a passwordless sign-in link.
+			{:else}
+				Sign in to access your dashboard and workspace.
+			{/if}
+		</p>
+	</div>
+
+	<!-- Error Alert -->
+	{#if localError || auth.error}
+		<Alert
+			color="error"
+			title="Authentication Error"
+			description={localError || auth.error || ''}
+		/>
+	{/if}
+
+	<!-- Magic Link Success State -->
+	{#if magicLinkSent}
+		<div
+			class="space-y-2 rounded-xl border border-emerald-500/20 bg-emerald-50/50 p-5 text-center dark:bg-emerald-950/20"
+		>
+			<div class="flex justify-center text-emerald-600 dark:text-emerald-400">
+				<Icon name="check" class="h-8 w-8" />
+			</div>
+			<h3 class="font-semibold text-zinc-900 dark:text-zinc-100">Check your email</h3>
+			<p class="text-sm text-zinc-600 dark:text-zinc-400">
+				We've sent a magic link to <strong class="text-zinc-900 dark:text-zinc-100">{email}</strong
+				>.
+			</p>
+			<Button
+				variant="ghost"
+				size="sm"
+				class="mt-2 text-xs"
+				onclick={() => {
+					magicLinkSent = false;
+				}}
+			>
+				Use a different method
+			</Button>
+		</div>
+	{:else}
+		<!-- Social Login Buttons -->
+		{#if showSocial && providers.length > 0}
+			<div class="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
+				{#each providers as provider}
+					<Button
+						variant="outline"
+						class="w-full justify-center gap-2 font-medium"
+						loading={auth.isLoading}
+						onclick={() => handleSocial(provider)}
+					>
+						{#if provider === 'github'}
+							<Icon name="github" class="h-4 w-4" />
+							<span>GitHub</span>
+						{:else if provider === 'google'}
+							<Icon name="external-link" class="h-4 w-4" />
+							<span>Google</span>
+						{:else}
+							<span>{provider}</span>
+						{/if}
+					</Button>
+				{/each}
+			</div>
+
+			<Divider label="or continue with" />
+		{/if}
+
+		<!-- Email Form -->
+		<form onsubmit={handleSubmit} class="space-y-4">
+			{#if currentMode === 'signup'}
+				<FormField label="Full Name" required>
+					<Input type="text" placeholder="Alex Johnson" bind:value={name} required />
+				</FormField>
+			{/if}
+
+			<FormField label="Email address" required>
+				<Input type="email" placeholder="name@company.com" bind:value={email} required />
+			</FormField>
+
+			{#if currentMode !== 'magic-link'}
+				<FormField label="Password" required>
+					<Input type="password" placeholder="••••••••" bind:value={password} required />
+				</FormField>
+			{/if}
+
+			<Button
+				type="submit"
+				variant="solid"
+				color="primary"
+				class="w-full justify-center font-semibold shadow-md"
+				loading={auth.isLoading}
+			>
+				{#if currentMode === 'signup'}
+					Create Account
+				{:else if currentMode === 'magic-link'}
+					Send Magic Link
+				{:else}
+					Sign In
+				{/if}
+			</Button>
+		</form>
+
+		<!-- Mode Switchers -->
+		<div class="flex flex-col items-center gap-2 pt-2 text-xs text-zinc-500 dark:text-zinc-400">
+			{#if currentMode === 'signin'}
+				<div>
+					Don't have an account?
+					<button
+						type="button"
+						class="font-semibold text-primary-600 hover:underline dark:text-primary-400"
+						onclick={() => {
+							customMode = 'signup';
+							localError = null;
+						}}
+					>
+						Sign up
+					</button>
+				</div>
+				{#if showMagicLinkToggle}
+					<button
+						type="button"
+						class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200"
+						onclick={() => {
+							customMode = 'magic-link';
+							localError = null;
+						}}
+					>
+						Sign in with a passwordless magic link
+					</button>
+				{/if}
+			{:else if currentMode === 'signup'}
+				<div>
+					Already have an account?
+					<button
+						type="button"
+						class="font-semibold text-primary-600 hover:underline dark:text-primary-400"
+						onclick={() => {
+							customMode = 'signin';
+							localError = null;
+						}}
+					>
+						Sign in
+					</button>
+				</div>
+			{:else}
+				<button
+					type="button"
+					class="font-semibold text-primary-600 hover:underline dark:text-primary-400"
+					onclick={() => {
+						customMode = 'signin';
+						localError = null;
+					}}
+				>
+					← Back to email and password sign in
+				</button>
+			{/if}
+		</div>
+	{/if}
+</Card>

package/dist/components/saas/AuthCard.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type SocialProvider } from '../../composables/useAuth.svelte';
+interface Props {
+    title?: string;
+    subtitle?: string;
+    mode?: 'signin' | 'signup' | 'magic-link';
+    providers?: SocialProvider[];
+    showSocial?: boolean;
+    showMagicLinkToggle?: boolean;
+    callbackURL?: string;
+    class?: string;
+    onsuccess?: () => void;
+    onerror?: (err: string) => void;
+}
+declare const AuthCard: import("svelte").Component<Props, {}, "">;
+type AuthCard = ReturnType<typeof AuthCard>;
+export default AuthCard;