yaxa-svelte 1.0.0

package/dist/components/navigation/DropdownMenu.svelte.d.ts

@@ -0,0 +1,20 @@
+export interface MenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    separator?: boolean;
+    destructive?: boolean;
+    onSelect?: () => void;
+}
+import { DropdownMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    items: MenuItem[];
+    trigger?: Snippet;
+    class?: string;
+}
+declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/navigation/Pagination.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import Button from '../elements/Button.svelte';
+	import Icon from '../elements/Icon.svelte';
+
+	interface Props {
+		page?: number;
+		total: number;
+		pageSize?: number;
+		siblingCount?: number;
+		class?: string;
+	}
+
+	let {
+		page = $bindable(1),
+		total,
+		pageSize = 10,
+		siblingCount = 1,
+		class: className = ''
+	}: Props = $props();
+
+	let totalPages = $derived(Math.max(1, Math.ceil(total / pageSize)));
+
+	let paginationRange = $derived.by(() => {
+		const range: (number | string)[] = [];
+		const totalNumbers = siblingCount * 2 + 3;
+		const totalBlocks = totalNumbers + 2;
+
+		if (totalPages <= totalBlocks) {
+			for (let i = 1; i <= totalPages; i++) range.push(i);
+			return range;
+		}
+
+		const leftSiblingIndex = Math.max(page - siblingCount, 1);
+		const rightSiblingIndex = Math.min(page + siblingCount, totalPages);
+
+		const shouldShowLeftDots = leftSiblingIndex > 2;
+		const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+
+		if (!shouldShowLeftDots && shouldShowRightDots) {
+			const leftItemCount = 3 + 2 * siblingCount;
+			for (let i = 1; i <= leftItemCount; i++) range.push(i);
+			range.push('...');
+			range.push(totalPages);
+		} else if (shouldShowLeftDots && !shouldShowRightDots) {
+			const rightItemCount = 3 + 2 * siblingCount;
+			range.push(1);
+			range.push('...');
+			for (let i = totalPages - rightItemCount + 1; i <= totalPages; i++) range.push(i);
+		} else if (shouldShowLeftDots && shouldShowRightDots) {
+			range.push(1);
+			range.push('...');
+			for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) range.push(i);
+			range.push('...');
+			range.push(totalPages);
+		}
+
+		return range;
+	});
+</script>
+
+<nav aria-label="Pagination" class="flex items-center gap-1 {className}">
+	<!-- Previous -->
+	<Button
+		variant="outline"
+		color="neutral"
+		size="sm"
+		square
+		disabled={page <= 1}
+		onclick={() => (page = Math.max(1, page - 1))}
+		aria-label="Previous page"
+	>
+		<Icon name="chevron-left" size="xs" />
+	</Button>
+
+	<!-- Page Numbers -->
+	{#each paginationRange as p}
+		{#if typeof p === 'number'}
+			<Button
+				variant={page === p ? 'solid' : 'ghost'}
+				color={page === p ? 'primary' : 'neutral'}
+				size="sm"
+				square
+				onclick={() => (page = p)}
+				aria-label="Page {p}"
+				aria-current={page === p ? 'page' : undefined}
+			>
+				{p}
+			</Button>
+		{:else}
+			<span class="px-2 text-xs text-neutral-400 select-none">...</span>
+		{/if}
+	{/each}
+
+	<!-- Next -->
+	<Button
+		variant="outline"
+		color="neutral"
+		size="sm"
+		square
+		disabled={page >= totalPages}
+		onclick={() => (page = Math.min(totalPages, page + 1))}
+		aria-label="Next page"
+	>
+		<Icon name="chevron-right" size="xs" />
+	</Button>
+</nav>

package/dist/components/navigation/Pagination.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    page?: number;
+    total: number;
+    pageSize?: number;
+    siblingCount?: number;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/navigation/Tabs.svelte

@@ -0,0 +1,91 @@
+<script module lang="ts">
+	export interface TabItem {
+		value: string;
+		label: string;
+		icon?: string;
+		disabled?: boolean;
+		badge?: string;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from '../elements/Icon.svelte';
+
+	interface Props {
+		items: TabItem[];
+		value?: string;
+		variant?: 'pill' | 'underline' | 'segmented';
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		items,
+		value = $bindable(items[0]?.value || ''),
+		variant = 'segmented',
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div class="w-full">
+	<div
+		class="flex {variant === 'segmented'
+			? 'rounded-xl border border-neutral-200/60 bg-neutral-100 p-1 dark:border-neutral-800/60 dark:bg-neutral-900'
+			: variant === 'underline'
+				? 'gap-6 border-b border-neutral-200 dark:border-neutral-800'
+				: 'gap-2'} {className}"
+		role="tablist"
+	>
+		{#each items as tab}
+			{@const isSelected = value === tab.value}
+			<button
+				type="button"
+				role="tab"
+				aria-selected={isSelected}
+				disabled={tab.disabled}
+				onclick={() => (value = tab.value)}
+				class="inline-flex items-center justify-center gap-2 text-sm font-medium transition-all duration-150 select-none {tab.disabled
+					? 'cursor-not-allowed opacity-50'
+					: 'cursor-pointer'} {variant === 'segmented'
+					? `rounded-lg px-3 py-1.5 ${
+							isSelected
+								? 'bg-white text-neutral-900 shadow-xs dark:bg-neutral-800 dark:text-white'
+								: 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white'
+						}`
+					: variant === 'underline'
+						? `-mb-px border-b-2 pt-1 pb-3 ${
+								isSelected
+									? 'border-primary-600 font-semibold text-primary-600 dark:text-primary-400'
+									: 'border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200'
+							}`
+						: `rounded-lg px-3 py-1.5 ${
+								isSelected
+									? 'bg-primary-600 text-white shadow-xs'
+									: 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700'
+							}`}"
+			>
+				{#if tab.icon}
+					<Icon name={tab.icon} size="xs" />
+				{/if}
+				<span>{tab.label}</span>
+				{#if tab.badge}
+					<span
+						class="rounded px-1.5 py-0.5 text-[10px] font-semibold {isSelected
+							? 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200'
+							: 'bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300'}"
+					>
+						{tab.badge}
+					</span>
+				{/if}
+			</button>
+		{/each}
+	</div>
+
+	{#if children}
+		<div class="mt-4">
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/dist/components/navigation/Tabs.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface TabItem {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    badge?: string;
+}
+import type { Snippet } from 'svelte';
+interface Props {
+    items: TabItem[];
+    value?: string;
+    variant?: 'pill' | 'underline' | 'segmented';
+    class?: string;
+    children?: Snippet;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/overlays/Accordion.svelte

@@ -0,0 +1,54 @@
+<script module lang="ts">
+	export interface AccordionItem {
+		value: string;
+		title: string;
+		content?: string;
+		icon?: string;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { Accordion } from 'bits-ui';
+	import Icon from '../elements/Icon.svelte';
+
+	interface Props {
+		items: AccordionItem[];
+		type?: 'single' | 'multiple';
+		class?: string;
+	}
+
+	let { items, type = 'single', class: className = '' }: Props = $props();
+</script>
+
+<Accordion.Root
+	{type}
+	class="w-full divide-y divide-neutral-200 dark:divide-neutral-800 {className}"
+>
+	{#each items as item}
+		<Accordion.Item value={item.value} disabled={item.disabled} class="py-1">
+			<Accordion.Header>
+				<Accordion.Trigger
+					class="flex w-full items-center justify-between py-4 text-left text-sm font-medium text-neutral-900 transition-all hover:underline dark:text-white [&[data-state=open]>svg]:rotate-180"
+				>
+					<div class="flex items-center gap-2.5">
+						{#if item.icon}
+							<Icon name={item.icon} size="xs" class="text-neutral-500" />
+						{/if}
+						<span>{item.title}</span>
+					</div>
+					<Icon
+						name="chevron-down"
+						size="xs"
+						class="text-neutral-500 transition-transform duration-200"
+					/>
+				</Accordion.Trigger>
+			</Accordion.Header>
+			<Accordion.Content
+				class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden pb-4 text-sm text-neutral-600 dark:text-neutral-400"
+			>
+				{item.content}
+			</Accordion.Content>
+		</Accordion.Item>
+	{/each}
+</Accordion.Root>

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

@@ -0,0 +1,16 @@
+export interface AccordionItem {
+    value: string;
+    title: string;
+    content?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+import { Accordion } from 'bits-ui';
+interface Props {
+    items: AccordionItem[];
+    type?: 'single' | 'multiple';
+    class?: string;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/overlays/Alert.svelte

@@ -0,0 +1,110 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const alertVariants = tv({
+		base: 'relative w-full rounded-xl border p-4 transition-all duration-150',
+		variants: {
+			color: {
+				info: 'border-sky-200 bg-sky-50/70 text-sky-900 dark:border-sky-900/50 dark:bg-sky-950/30 dark:text-sky-200',
+				success:
+					'border-emerald-200 bg-emerald-50/70 text-emerald-900 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-200',
+				warning:
+					'border-amber-200 bg-amber-50/70 text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-200',
+				error:
+					'border-rose-200 bg-rose-50/70 text-rose-900 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-200'
+			}
+		},
+		defaultVariants: {
+			color: 'info'
+		}
+	});
+
+	export type AlertProps = VariantProps<typeof alertVariants> & {
+		title?: string;
+		description?: string;
+		icon?: string;
+		closable?: boolean;
+		onclose?: () => void;
+		actions?: Snippet;
+		class?: string;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
+
+	let {
+		color = 'info',
+		title,
+		description,
+		icon,
+		closable = false,
+		onclose,
+		actions,
+		class: className = '',
+		children
+	}: AlertProps = $props();
+
+	let visible = $state(true);
+
+	let defaultIcon = $derived.by(() => {
+		if (icon) return icon;
+		switch (color) {
+			case 'success':
+				return 'check';
+			case 'warning':
+			case 'error':
+				return 'alert';
+			case 'info':
+			default:
+				return 'info';
+		}
+	});
+
+	function handleClose() {
+		visible = false;
+		if (onclose) onclose();
+	}
+</script>
+
+{#if visible}
+	<div class={alertVariants({ color, class: className })} role="alert">
+		<div class="flex items-start gap-3">
+			<div class="mt-0.5 shrink-0">
+				<Icon name={defaultIcon} size="sm" />
+			</div>
+
+			<div class="flex-1">
+				{#if title}
+					<h5 class="text-base font-semibold">{title}</h5>
+				{/if}
+				{#if description}
+					<div class="mt-1 text-sm opacity-90">{description}</div>
+				{/if}
+				{#if children}
+					<div class="mt-1 text-sm">
+						{@render children()}
+					</div>
+				{/if}
+				{#if actions}
+					<div class="mt-3 flex items-center gap-2">
+						{@render actions()}
+					</div>
+				{/if}
+			</div>
+
+			{#if closable}
+				<button
+					type="button"
+					onclick={handleClose}
+					class="rounded-lg p-1 opacity-70 transition-opacity hover:opacity-100"
+					aria-label="Dismiss alert"
+				>
+					<Icon name="cross" size="xs" />
+				</button>
+			{/if}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,37 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        info: "border-sky-200 bg-sky-50/70 text-sky-900 dark:border-sky-900/50 dark:bg-sky-950/30 dark:text-sky-200";
+        success: "border-emerald-200 bg-emerald-50/70 text-emerald-900 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-200";
+        warning: "border-amber-200 bg-amber-50/70 text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-200";
+        error: "border-rose-200 bg-rose-50/70 text-rose-900 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-200";
+    };
+}, undefined, "relative w-full rounded-xl border p-4 transition-all duration-150", {
+    color: {
+        info: "border-sky-200 bg-sky-50/70 text-sky-900 dark:border-sky-900/50 dark:bg-sky-950/30 dark:text-sky-200";
+        success: "border-emerald-200 bg-emerald-50/70 text-emerald-900 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-200";
+        warning: "border-amber-200 bg-amber-50/70 text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-200";
+        error: "border-rose-200 bg-rose-50/70 text-rose-900 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-200";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        info: "border-sky-200 bg-sky-50/70 text-sky-900 dark:border-sky-900/50 dark:bg-sky-950/30 dark:text-sky-200";
+        success: "border-emerald-200 bg-emerald-50/70 text-emerald-900 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-200";
+        warning: "border-amber-200 bg-amber-50/70 text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-200";
+        error: "border-rose-200 bg-rose-50/70 text-rose-900 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-200";
+    };
+}, undefined>>;
+export type AlertProps = VariantProps<typeof alertVariants> & {
+    title?: string;
+    description?: string;
+    icon?: string;
+    closable?: boolean;
+    onclose?: () => void;
+    actions?: Snippet;
+    class?: string;
+    children?: Snippet;
+};
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/overlays/ContextMenu.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { ContextMenu } from 'bits-ui';
+	import Icon from '../elements/Icon.svelte';
+	import Kbd from '../elements/Kbd.svelte';
+
+	export interface ContextMenuItem {
+		id: string;
+		label: string;
+		icon?: string;
+		shortcut?: string;
+		disabled?: boolean;
+		destructive?: boolean;
+		separator?: boolean;
+		onSelect?: () => void;
+	}
+
+	interface Props {
+		items?: ContextMenuItem[];
+		class?: string;
+		children: Snippet;
+		content?: Snippet;
+	}
+
+	let { items = [], class: className = '', children, content }: Props = $props();
+</script>
+
+<ContextMenu.Root>
+	<ContextMenu.Trigger class="w-full">
+		{@render children()}
+	</ContextMenu.Trigger>
+
+	<ContextMenu.Portal>
+		<ContextMenu.Content
+			class="z-50 min-w-45 rounded-xl border border-neutral-200/80 bg-white/95 p-1.5 shadow-xl backdrop-blur-md transition-all focus:outline-none dark:border-neutral-800/80 dark:bg-[#18181b]/95 {className}"
+			sideOffset={5}
+		>
+			{#if content}
+				{@render content()}
+			{:else}
+				{#each items as item}
+					{#if item.separator}
+						<ContextMenu.Separator class="my-1 h-px bg-neutral-200 dark:bg-neutral-800" />
+					{:else}
+						<ContextMenu.Item
+							disabled={item.disabled}
+							onSelect={item.onSelect}
+							class="group flex cursor-pointer items-center justify-between rounded-lg px-2.5 py-1.5 text-sm font-medium text-neutral-700 transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-40 data-highlighted:bg-neutral-100 data-highlighted:text-neutral-900 dark:text-neutral-300 dark:data-highlighted:bg-neutral-800 dark:data-highlighted:text-white {item.destructive
+								? 'text-red-600 data-highlighted:bg-red-50 dark:text-red-400 dark:data-highlighted:bg-red-950/40'
+								: ''}"
+						>
+							<div class="flex items-center gap-2">
+								{#if item.icon}
+									<Icon name={item.icon} size="xs" />
+								{/if}
+								<span>{item.label}</span>
+							</div>
+							{#if item.shortcut}
+								<Kbd value={item.shortcut} size="xs" class="ml-auto" />
+							{/if}
+						</ContextMenu.Item>
+					{/if}
+				{/each}
+			{/if}
+		</ContextMenu.Content>
+	</ContextMenu.Portal>
+</ContextMenu.Root>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import { ContextMenu } from 'bits-ui';
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    destructive?: boolean;
+    separator?: boolean;
+    onSelect?: () => void;
+}
+interface Props {
+    items?: ContextMenuItem[];
+    class?: string;
+    children: Snippet;
+    content?: Snippet;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/overlays/Modal.svelte

@@ -0,0 +1,99 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const modalVariants = tv({
+		base: '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',
+		variants: {
+			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)]'
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	});
+
+	export type ModalProps = VariantProps<typeof modalVariants> & {
+		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),
+		title,
+		description,
+		size = 'md',
+		trigger,
+		header,
+		footer,
+		children,
+		class: className = ''
+	}: ModalProps = $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-200"
+		/>
+		<Dialog.Content class={modalVariants({ size, 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">
+					{@render children()}
+				</div>
+			{/if}
+
+			{#if footer}
+				<div class="mt-6 flex justify-end gap-3">
+					{@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 dialog"
+			>
+				<Icon name="cross" size="sm" />
+			</Dialog.Close>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>