@nucel/ui 0.3.0 → 0.11.0

package/src/lib/components/Pagination.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { ChevronLeftIcon, ChevronRightIcon } from '@lucide/svelte';
+	import { cn } from '../utils.js';
+
+	let {
+		total,
+		page = $bindable(1),
+		pageSize = 10,
+		siblingCount = 1,
+		class: className,
+		ariaLabel = 'pagination',
+	}: {
+		total: number;
+		page?: number;
+		pageSize?: number;
+		siblingCount?: number;
+		class?: string;
+		ariaLabel?: string;
+	} = $props();
+
+	const buttonBase =
+		'inline-flex h-9 min-w-9 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 text-sm font-medium transition-colors outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50';
+	const navClass = `${buttonBase} hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50`;
+	const pageClass = `${buttonBase} hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50`;
+	const pageSelectedClass = `${buttonBase} bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs`;
+</script>
+
+<PaginationPrimitive.Root
+	count={total}
+	perPage={pageSize}
+	bind:page
+	{siblingCount}
+	aria-label={ariaLabel}
+	data-slot="pagination"
+	class={cn('flex items-center justify-center gap-1', className)}
+>
+	{#snippet children({ pages, currentPage })}
+		<PaginationPrimitive.PrevButton class={navClass} aria-label="Previous page">
+			<ChevronLeftIcon class="size-4" />
+			<span class="hidden sm:inline">Prev</span>
+		</PaginationPrimitive.PrevButton>
+		{#each pages as p (p.key)}
+			{#if p.type === 'ellipsis'}
+				<span
+					class="text-muted-foreground inline-flex h-9 min-w-9 items-center justify-center text-sm"
+					aria-hidden="true">…</span
+				>
+			{:else}
+				<PaginationPrimitive.Page
+					page={p}
+					class={p.value === currentPage ? pageSelectedClass : pageClass}
+					aria-label={`Page ${p.value}`}
+					aria-current={p.value === currentPage ? 'page' : undefined}
+				>
+					{p.value}
+				</PaginationPrimitive.Page>
+			{/if}
+		{/each}
+		<PaginationPrimitive.NextButton class={navClass} aria-label="Next page">
+			<span class="hidden sm:inline">Next</span>
+			<ChevronRightIcon class="size-4" />
+		</PaginationPrimitive.NextButton>
+	{/snippet}
+</PaginationPrimitive.Root>

package/src/lib/components/Radio.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { CircleIcon } from '@lucide/svelte';
+	import { cn, type WithoutChildrenOrChild } from '../utils.js';
+
+	type Props = WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> & {
+		label?: string;
+		class?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		value,
+		disabled,
+		label,
+		class: className,
+		id,
+		...restProps
+	}: Props = $props();
+
+	const uid = $props.id();
+	const itemId = $derived(id ?? `radio-${uid}`);
+
+	const dotClass =
+		'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 inline-flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
+</script>
+
+{#snippet dot()}
+	<RadioGroupPrimitive.Item
+		bind:ref
+		id={itemId}
+		{value}
+		{disabled}
+		data-slot="radio-group-item"
+		class={cn(dotClass, !label && className)}
+		{...restProps}
+	>
+		{#snippet children({ checked })}
+			{#if checked}
+				<CircleIcon class="fill-primary text-primary size-2" />
+			{/if}
+		{/snippet}
+	</RadioGroupPrimitive.Item>
+{/snippet}
+
+{#if label}
+	<label
+		for={itemId}
+		class={cn(
+			'inline-flex items-center gap-2 text-sm leading-none font-medium select-none',
+			disabled && 'cursor-not-allowed opacity-50',
+			className,
+		)}
+	>
+		{@render dot()}
+		<span>{label}</span>
+	</label>
+{:else}
+	{@render dot()}
+{/if}

package/src/lib/components/RadioGroup.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '../utils.js';
+
+	type Props = WithoutChild<RadioGroupPrimitive.RootProps> & {
+		class?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<RadioGroupPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="radio-group"
+	class={cn('grid gap-2', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</RadioGroupPrimitive.Root>

package/src/lib/components/SearchInput.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { SearchIcon, XIcon } from '@lucide/svelte';
+	import Input from './ui/input/input.svelte';
+	import { cn } from '../utils.js';
+
+	type Props = Omit<HTMLInputAttributes, 'type' | 'value'> & {
+		value?: string;
+		debounce?: number;
+		clearable?: boolean;
+		class?: string;
+		onDebounced?: (value: string) => void;
+	};
+
+	let {
+		value = $bindable(''),
+		debounce = 300,
+		clearable = true,
+		class: className,
+		placeholder = 'Search…',
+		onDebounced,
+		...restProps
+	}: Props = $props();
+
+	let inner = $state(value ?? '');
+	let timer: ReturnType<typeof setTimeout> | null = null;
+
+	// Keep inner in sync if value is updated externally
+	$effect(() => {
+		if (value !== inner) inner = value ?? '';
+	});
+
+	function commit(next: string) {
+		value = next;
+		onDebounced?.(next);
+	}
+
+	function onInput(e: Event) {
+		const next = (e.currentTarget as HTMLInputElement).value;
+		inner = next;
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => commit(next), debounce);
+	}
+
+	function clear() {
+		inner = '';
+		if (timer) clearTimeout(timer);
+		commit('');
+	}
+
+	// Avoid forwarding the `files` typing onto a text input
+	const inputProps = $derived(restProps as Record<string, unknown>);
+</script>
+
+<div data-slot="search-input" class={cn('relative w-full', className)}>
+	<SearchIcon
+		class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
+	/>
+	<Input
+		type="text"
+		value={inner}
+		oninput={onInput}
+		{placeholder}
+		class="ps-9 pe-9"
+		{...inputProps}
+	/>
+	{#if clearable && inner}
+		<button
+			type="button"
+			onclick={clear}
+			aria-label="Clear search"
+			class="text-muted-foreground hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2 rounded-md p-1 outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+		>
+			<XIcon class="size-3.5" />
+		</button>
+	{/if}
+</div>

package/src/lib/components/Skeleton.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../utils.js';
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		width?: string | number;
+		height?: string | number;
+		rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+		shimmer?: boolean;
+	};
+
+	let {
+		ref = $bindable(null),
+		width,
+		height,
+		rounded = 'md',
+		shimmer = true,
+		class: className,
+		style: styleProp,
+		...restProps
+	}: Props = $props();
+
+	function toCssLength(v: string | number | undefined): string | undefined {
+		if (v === undefined) return undefined;
+		return typeof v === 'number' ? `${v}px` : v;
+	}
+
+	const inlineStyle = $derived.by(() => {
+		const parts: string[] = [];
+		const w = toCssLength(width);
+		const h = toCssLength(height);
+		if (w) parts.push(`width:${w}`);
+		if (h) parts.push(`height:${h}`);
+		if (styleProp) parts.push(String(styleProp));
+		return parts.length ? parts.join(';') : undefined;
+	});
+
+	const roundedClass = $derived.by(() => {
+		switch (rounded) {
+			case 'none':
+				return 'rounded-none';
+			case 'sm':
+				return 'rounded-sm';
+			case 'lg':
+				return 'rounded-lg';
+			case 'full':
+				return 'rounded-full';
+			case 'md':
+			default:
+				return 'rounded-md';
+		}
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	style={inlineStyle}
+	class={cn(
+		'bg-accent relative overflow-hidden',
+		shimmer ? 'animate-pulse' : '',
+		roundedClass,
+		shimmer &&
+			"after:absolute after:inset-0 after:-translate-x-full after:animate-[shimmer_1.8s_infinite] after:bg-gradient-to-r after:from-transparent after:via-black/5 after:to-transparent dark:after:via-white/10 after:content-['']",
+		className,
+	)}
+	{...restProps}
+></div>
+
+<style>
+	@keyframes shimmer {
+		100% {
+			transform: translateX(100%);
+		}
+	}
+</style>

package/src/lib/components/StatCard.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from '@lucide/svelte';
+	import { cn } from '../utils.js';
+
+	type Trend = 'up' | 'down' | 'flat';
+
+	let {
+		label,
+		value,
+		delta,
+		trend,
+		icon,
+		hint,
+		invertTrend = false,
+		class: className,
+		children,
+	}: {
+		label: string;
+		value: string | number;
+		delta?: number;
+		trend?: Trend;
+		icon?: Component<{ class?: string }>;
+		hint?: string;
+		invertTrend?: boolean;
+		class?: string;
+		children?: Snippet;
+	} = $props();
+
+	const computedTrend = $derived<Trend>(
+		trend ?? (delta === undefined ? 'flat' : delta > 0 ? 'up' : delta < 0 ? 'down' : 'flat'),
+	);
+
+	const trendIsGood = $derived(
+		computedTrend === 'flat'
+			? null
+			: invertTrend
+				? computedTrend === 'down'
+				: computedTrend === 'up',
+	);
+
+	const trendColor = $derived.by(() => {
+		if (computedTrend === 'flat') return 'text-muted-foreground';
+		return trendIsGood
+			? 'text-emerald-600 dark:text-emerald-400'
+			: 'text-destructive';
+	});
+
+	const formattedDelta = $derived.by(() => {
+		if (delta === undefined) return null;
+		const sign = delta > 0 ? '+' : '';
+		return `${sign}${delta}%`;
+	});
+</script>
+
+<div
+	data-slot="stat-card"
+	class={cn(
+		'bg-card text-card-foreground border-border flex flex-col gap-2 rounded-xl border p-4 shadow-xs',
+		className,
+	)}
+>
+	<div class="flex items-start justify-between gap-2">
+		<p class="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+			{label}
+		</p>
+		{#if icon}
+			{@const Icon = icon}
+			<div
+				class="bg-secondary text-muted-foreground flex h-7 w-7 items-center justify-center rounded-md"
+			>
+				<Icon class="size-3.5" />
+			</div>
+		{/if}
+	</div>
+	<div class="flex items-baseline gap-2">
+		<span class="text-foreground text-2xl font-semibold tabular-nums">{value}</span>
+		{#if delta !== undefined || trend}
+			<span class={cn('inline-flex items-center gap-0.5 text-xs font-medium', trendColor)}>
+				{#if computedTrend === 'up'}
+					<ArrowUpIcon class="size-3" />
+				{:else if computedTrend === 'down'}
+					<ArrowDownIcon class="size-3" />
+				{:else}
+					<MinusIcon class="size-3" />
+				{/if}
+				{#if formattedDelta}{formattedDelta}{/if}
+			</span>
+		{/if}
+	</div>
+	{#if hint}
+		<p class="text-muted-foreground text-xs">{hint}</p>
+	{/if}
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/src/lib/components/ThemeProvider.svelte

@@ -0,0 +1,157 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	export type Theme = 'light' | 'dark' | 'system';
+	export type ResolvedTheme = 'light' | 'dark';
+
+	export type ThemeContext = {
+		/** The user's preference: 'light' | 'dark' | 'system'. */
+		readonly theme: Theme;
+		/** The currently applied theme after resolving 'system'. Always 'light' or 'dark'. */
+		readonly resolved: ResolvedTheme;
+		/** Update the user's preference. Persists to localStorage. */
+		setTheme: (t: Theme) => void;
+		/** Cycle system -> light -> dark -> system. */
+		cycleTheme: () => void;
+	};
+
+	const THEME_CONTEXT_KEY = Symbol('@nucel/ui:theme');
+
+	/** Read the ThemeProvider context from a descendant component. */
+	export function getThemeContext(): ThemeContext {
+		const ctx = getContext<ThemeContext | undefined>(THEME_CONTEXT_KEY);
+		if (!ctx) {
+			throw new Error(
+				'[@nucel/ui] getThemeContext() called outside a <ThemeProvider>. Wrap your app in <ThemeProvider> first.',
+			);
+		}
+		return ctx;
+	}
+
+	function _setThemeContext(ctx: ThemeContext): void {
+		setContext(THEME_CONTEXT_KEY, ctx);
+	}
+
+	export { _setThemeContext };
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount, untrack } from 'svelte';
+
+	type Props = {
+		/** Initial theme preference. Defaults to 'system'. */
+		defaultTheme?: Theme;
+		/** localStorage key used for persistence. */
+		storageKey?: string;
+		/** Class to apply to the html element for dark mode. Default 'dark'. */
+		darkClass?: string;
+		/** Element/attribute target. Default 'html'. */
+		attribute?: 'html' | 'body';
+		children?: Snippet;
+	};
+
+	let {
+		defaultTheme = 'system',
+		storageKey = 'nucel-ui-theme',
+		darkClass = 'dark',
+		attribute = 'html',
+		children,
+	}: Props = $props();
+
+	function isTheme(v: unknown): v is Theme {
+		return v === 'light' || v === 'dark' || v === 'system';
+	}
+
+	function readStoredTheme(): Theme {
+		if (typeof localStorage === 'undefined') return defaultTheme;
+		try {
+			const raw = localStorage.getItem(storageKey);
+			return isTheme(raw) ? raw : defaultTheme;
+		} catch {
+			return defaultTheme;
+		}
+	}
+
+	function getSystemPreference(): ResolvedTheme {
+		if (typeof window === 'undefined' || !window.matchMedia) return 'light';
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	}
+
+	// Initial value: capture the prop once. Subsequent changes flow through `setTheme`.
+	// eslint-disable-next-line svelte/no-reactive-reassign
+	let theme = $state<Theme>(untrack(() => defaultTheme));
+	let systemPref = $state<ResolvedTheme>('light');
+
+	const resolved = $derived<ResolvedTheme>(theme === 'system' ? systemPref : theme);
+
+	onMount(() => {
+		// Hydrate from localStorage on mount (avoids SSR mismatch).
+		theme = readStoredTheme();
+		systemPref = getSystemPreference();
+
+		const mql = window.matchMedia?.('(prefers-color-scheme: dark)');
+		if (!mql) return;
+
+		const onChange = (e: MediaQueryListEvent) => {
+			systemPref = e.matches ? 'dark' : 'light';
+		};
+
+		// Modern API + Safari fallback.
+		if (typeof mql.addEventListener === 'function') {
+			mql.addEventListener('change', onChange);
+			return () => mql.removeEventListener('change', onChange);
+		} else if (typeof (mql as MediaQueryList).addListener === 'function') {
+			(mql as MediaQueryList).addListener(onChange);
+			return () => (mql as MediaQueryList).removeListener(onChange);
+		}
+	});
+
+	// Apply the resolved theme to the DOM whenever it changes.
+	$effect(() => {
+		if (typeof document === 'undefined') return;
+		const target = attribute === 'body' ? document.body : document.documentElement;
+		if (!target) return;
+		if (resolved === 'dark') {
+			target.classList.add(darkClass);
+			target.style.colorScheme = 'dark';
+		} else {
+			target.classList.remove(darkClass);
+			target.style.colorScheme = 'light';
+		}
+	});
+
+	function setTheme(next: Theme) {
+		theme = next;
+		try {
+			if (typeof localStorage !== 'undefined') {
+				localStorage.setItem(storageKey, next);
+			}
+		} catch {
+			// localStorage unavailable (private mode / quota); silently ignore.
+		}
+	}
+
+	function cycleTheme() {
+		// system -> light -> dark -> system
+		const next: Theme = theme === 'system' ? 'light' : theme === 'light' ? 'dark' : 'system';
+		setTheme(next);
+	}
+
+	// Publish a stable context object whose getters always read the latest reactive state.
+	_setThemeContext({
+		get theme() {
+			return theme;
+		},
+		get resolved() {
+			return resolved;
+		},
+		setTheme,
+		cycleTheme,
+	});
+
+</script>
+
+{#if children}
+	{@render children()}
+{/if}

package/src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { MoonIcon, SunIcon, MonitorIcon } from '@lucide/svelte';
+	import { cn } from '../utils.js';
+	import { getThemeContext } from './ThemeProvider.svelte';
+
+	type Props = HTMLButtonAttributes & {
+		/** Visual size variant. */
+		size?: 'sm' | 'md' | 'lg';
+		/** Override accessible label. */
+		label?: string;
+		class?: string;
+	};
+
+	let {
+		size = 'md',
+		label,
+		class: className,
+		onclick,
+		...restProps
+	}: Props = $props();
+
+	const ctx = getThemeContext();
+
+	const sizeClass = $derived(
+		size === 'sm' ? 'h-7 w-7' : size === 'lg' ? 'h-10 w-10' : 'h-9 w-9',
+	);
+	const iconClass = $derived(
+		size === 'sm' ? 'size-3.5' : size === 'lg' ? 'size-5' : 'size-4',
+	);
+
+	const ariaLabel = $derived(
+		label ??
+			(ctx.theme === 'system'
+				? 'Theme: system. Click to switch to light.'
+				: ctx.theme === 'light'
+					? 'Theme: light. Click to switch to dark.'
+					: 'Theme: dark. Click to switch to system.'),
+	);
+
+	function handleClick(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+		ctx.cycleTheme();
+		onclick?.(e);
+	}
+</script>
+
+<button
+	type="button"
+	aria-label={ariaLabel}
+	title={ariaLabel}
+	data-theme={ctx.theme}
+	data-resolved-theme={ctx.resolved}
+	onclick={handleClick}
+	class={cn(
+		'border-border bg-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 inline-flex shrink-0 items-center justify-center rounded-md border text-sm transition-colors outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
+		sizeClass,
+		className,
+	)}
+	{...restProps}
+>
+	{#if ctx.theme === 'system'}
+		<MonitorIcon class={iconClass} aria-hidden="true" />
+	{:else if ctx.theme === 'light'}
+		<SunIcon class={iconClass} aria-hidden="true" />
+	{:else}
+		<MoonIcon class={iconClass} aria-hidden="true" />
+	{/if}
+</button>