@nucel/ui 0.1.0

package/src/lib/components/ui/ReviewBadge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Badge } from '../../index.js';
+
+	let { status, reviewer }: { status: string; reviewer: string } = $props();
+
+	let icon = $derived(
+		status === 'approved' ? 'check' : status === 'changes_requested' ? 'x' : 'comment',
+	);
+
+	let label = $derived(
+		status === 'approved'
+			? 'approved'
+			: status === 'changes_requested'
+				? 'requested changes'
+				: 'commented',
+	);
+
+	const variantMap: Record<string, string> = {
+		approved: 'border-success/30 bg-success/10 text-success',
+		changes_requested: 'border-destructive/30 bg-destructive/10 text-destructive',
+		commented: '',
+	};
+
+	const variant = $derived(status === 'commented' ? 'secondary' : 'outline');
+	const extraClass = $derived(variantMap[status] ?? '');
+</script>
+
+<Badge {variant} class="inline-flex items-center gap-1.5 rounded-full {extraClass}">
+	{#if icon === 'check'}
+		<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+		</svg>
+	{:else if icon === 'x'}
+		<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M6 18L18 6M6 6l12 12"
+			/>
+		</svg>
+	{:else}
+		<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
+			/>
+		</svg>
+	{/if}
+	<span class="font-medium">{reviewer}</span>
+	<span>{label}</span>
+</Badge>

package/src/lib/components/ui/Sparkline.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		data,
+		color = 'stroke-primary',
+		fillColor = 'fill-primary/10',
+		width = 80,
+		height = 24,
+		class: className,
+		...restProps
+	}: {
+		ref?: SVGSVGElement | null;
+		data: number[];
+		color?: string;
+		fillColor?: string;
+		width?: number;
+		height?: number;
+		class?: string;
+	} = $props();
+
+	const points = $derived.by(() => {
+		if (data.length === 0) return '';
+		const max = Math.max(...data, 1);
+		const step = width / Math.max(data.length - 1, 1);
+		return data.map((v, i) => `${i * step},${height - (v / max) * (height - 2) - 1}`).join(' ');
+	});
+
+	const areaPoints = $derived.by(() => {
+		if (data.length === 0) return '';
+		const max = Math.max(...data, 1);
+		const step = width / Math.max(data.length - 1, 1);
+		const linePoints = data
+			.map((v, i) => `${i * step},${height - (v / max) * (height - 2) - 1}`)
+			.join(' ');
+		return `0,${height} ${linePoints} ${(data.length - 1) * step},${height}`;
+	});
+</script>
+
+<svg
+	bind:this={ref}
+	viewBox="0 0 {width} {height}"
+	class={cn('overflow-visible', className)}
+	style="width: {width}px; height: {height}px;"
+	{...restProps}
+>
+	{#if data.length > 1}
+		<polygon points={areaPoints} class={fillColor} />
+		<polyline
+			{points}
+			fill="none"
+			class={color}
+			stroke-width="1.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	{:else if data.length === 1}
+		<line x1="0" y1={height / 2} x2={width} y2={height / 2} class={color} stroke-width="1.5" />
+	{/if}
+</svg>

package/src/lib/components/ui/StatusBadge.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Badge } from '../../index.js';
+	import StatusDot from './StatusDot.svelte';
+
+	let { status, label }: { status: string; label?: string } = $props();
+
+	const displayLabel = $derived(label ?? status);
+
+	const classes: Record<string, string> = {
+		open: 'border-success/30 bg-success/10 text-success',
+		closed: '',
+		merged: 'border-purple-500/30 bg-purple-500/10 text-purple-400',
+		running: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
+		active: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
+		passed: 'border-success/30 bg-success/10 text-success',
+		succeeded: 'border-success/30 bg-success/10 text-success',
+		failed: 'border-destructive/30 bg-destructive/10 text-destructive',
+		error: 'border-destructive/30 bg-destructive/10 text-destructive',
+		cancelled: '',
+		paused: '',
+	};
+
+	const variant = $derived(
+		status === 'closed' || status === 'cancelled' || status === 'paused' ? 'secondary' : 'outline',
+	);
+	const extraClass = $derived(classes[status] ?? '');
+</script>
+
+<Badge {variant} class="inline-flex items-center gap-1 {extraClass}">
+	<StatusDot {status} />
+	<span>{displayLabel}</span>
+</Badge>

package/src/lib/components/ui/StatusDot.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../utils.js';
+
+	type Status =
+		| 'open'
+		| 'closed'
+		| 'running'
+		| 'succeeded'
+		| 'failed'
+		| 'active'
+		| 'paused'
+		| 'merged'
+		| 'error'
+		| 'warning'
+		| 'passed'
+		| 'cancelled'
+		| 'terminated'
+		| string;
+
+	let {
+		ref = $bindable(null),
+		color,
+		status,
+		animated = false,
+		size = 'md',
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+		color?: string;
+		status?: Status;
+		animated?: boolean;
+		size?: 'xs' | 'sm' | 'md';
+	} = $props();
+
+	const colorMap: Record<string, string> = {
+		open: 'bg-success',
+		active: 'bg-success',
+		succeeded: 'bg-success',
+		passed: 'bg-success',
+		closed: 'bg-muted-foreground',
+		paused: 'bg-muted-foreground',
+		terminated: 'bg-muted-foreground',
+		running: 'bg-blue-500',
+		merged: 'bg-purple-500',
+		failed: 'bg-destructive',
+		error: 'bg-destructive',
+		warning: 'bg-yellow-500',
+	};
+
+	const resolvedColor = $derived(
+		color ?? (status ? (colorMap[status] ?? 'bg-muted-foreground') : 'bg-muted-foreground'),
+	);
+	const isAnimated = $derived(animated || status === 'running');
+	const sizeClass = $derived(size === 'xs' ? 'h-1 w-1' : size === 'sm' ? 'h-1.5 w-1.5' : 'h-2 w-2');
+</script>
+
+<span bind:this={ref} class="relative flex {sizeClass} shrink-0 {cn(className)}" {...restProps}>
+	{#if isAnimated}
+		<span
+			class="absolute inline-flex h-full w-full animate-ping rounded-full {resolvedColor} opacity-50"
+		></span>
+	{/if}
+	<span class="relative inline-flex {sizeClass} rounded-full {resolvedColor}"></span>
+</span>

package/src/lib/components/ui/TabBar.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	type TabItem = {
+		id: string;
+		label: string;
+		icon?: Component;
+		count?: number;
+		closable?: boolean;
+	};
+
+	let {
+		items,
+		selected,
+		onselect,
+		onclose,
+		variant = 'underline',
+		orientation = 'horizontal',
+		size = 'sm',
+		class: className = '',
+	}: {
+		items: TabItem[];
+		selected: string;
+		onselect: (id: string) => void;
+		onclose?: (id: string) => void;
+		variant?: 'underline' | 'pill' | 'fill';
+		orientation?: 'horizontal' | 'vertical';
+		size?: 'xs' | 'sm';
+		class?: string;
+	} = $props();
+
+	const isVertical = $derived(orientation === 'vertical');
+
+	const containerClass = $derived.by(() => {
+		const base = isVertical ? 'flex flex-col gap-0.5' : 'flex items-center gap-0';
+		return `${base} ${className}`;
+	});
+
+	const itemClass = $derived.by(() => {
+		const sizeStyles = size === 'xs' ? 'text-[10px] px-2 py-1' : 'text-xs px-3 py-1.5';
+
+		if (variant === 'pill') {
+			return {
+				base: `rounded-full font-medium transition-all duration-150 ${sizeStyles}`,
+				active: 'bg-primary/15 text-primary font-medium',
+				inactive: 'text-muted-foreground hover:text-foreground',
+			};
+		}
+
+		if (variant === 'fill') {
+			const fillSize = isVertical
+				? `w-full text-xs px-2 py-1.5 rounded-md`
+				: `${sizeStyles} rounded`;
+			return {
+				base: `font-medium transition-colors ${fillSize}`,
+				active: 'bg-accent text-foreground',
+				inactive: 'text-muted-foreground hover:text-foreground',
+			};
+		}
+
+		// underline (default)
+		return {
+			base: `relative font-medium transition-colors shrink-0 ${sizeStyles}`,
+			active: 'text-foreground',
+			inactive: 'text-muted-foreground hover:text-foreground',
+		};
+	});
+</script>
+
+<div class={containerClass} role="tablist" aria-orientation={orientation}>
+	{#each items as item (item.id)}
+		{@const isActive = selected === item.id}
+		<button
+			role="tab"
+			aria-selected={isActive}
+			class="group flex items-center gap-1.5 {itemClass.base} {isActive
+				? itemClass.active
+				: itemClass.inactive}"
+			onclick={() => onselect(item.id)}
+		>
+			{#if item.icon}
+				{@const Icon = item.icon}
+				<Icon class={size === 'xs' ? 'h-3 w-3' : 'h-3.5 w-3.5'} />
+			{/if}
+			{item.label}
+			{#if item.count !== undefined && item.count > 0}
+				{#if variant === 'underline'}
+					<span class="bg-primary/10 text-primary rounded-full px-1.5 text-[10px] font-bold"
+						>{item.count}</span
+					>
+				{:else}
+					<span class="bg-muted ml-1 rounded-full px-1.5 text-[10px] tabular-nums"
+						>{item.count}</span
+					>
+				{/if}
+			{/if}
+			{#if item.closable && onclose}
+				<span
+					class="hover:bg-muted ml-0.5 hidden h-3 w-3 items-center justify-center rounded-sm group-hover:inline-flex"
+					role="button"
+					tabindex="0"
+					onclick={(e) => {
+						e.stopPropagation();
+						onclose?.(item.id);
+					}}
+					onkeydown={(e) => {
+						if (e.key === 'Enter') {
+							e.stopPropagation();
+							onclose?.(item.id);
+						}
+					}}
+				>
+					<svg
+						class="h-2 w-2"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"><path d="M18 6L6 18M6 6l12 12" /></svg
+					>
+				</span>
+			{/if}
+			{#if variant === 'underline' && isActive}
+				<span class="bg-primary absolute right-2 bottom-0 left-2 h-0.5 rounded-full"></span>
+			{/if}
+		</button>
+	{/each}
+</div>

package/src/lib/components/ui/VerticalSeparator.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	let {
+		class: className = '',
+	}: {
+		class?: string;
+	} = $props();
+</script>
+
+<span class="bg-border/60 mx-0.5 h-3.5 w-px shrink-0 {className}"></span>

package/src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	data-slot="accordion-content"
+	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+	{...restProps}
+>
+	<div class={cn('pt-0 pb-4', className)}>
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

package/src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn('border-b last:border-b-0', className)}
+	{...restProps}
+/>

package/src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps['level'];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
+		bind:ref
+		class={cn(
+			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDownIcon
+			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/src/lib/components/ui/accordion/accordion.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	{...restProps}
+/>

package/src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,16 @@
+import Root from './accordion.svelte';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

package/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+	{...restProps}
+/>

package/src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn('aspect-square size-full', className)}
+	{...restProps}
+/>

package/src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		loadingStatus = $bindable('loading'),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+	{...restProps}
+/>

package/src/lib/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback,
+};

package/src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const badgeVariants = tv({
+		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+				secondary:
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+				destructive:
+					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

package/src/lib/components/ui/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';

package/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-ellipsis"
+	role="presentation"
+	aria-hidden="true"
+	class={cn('flex size-9 items-center justify-center', className)}
+	{...restProps}
+>
+	<EllipsisIcon class="size-4" />
+	<span class="sr-only">More</span>
+</span>

package/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-item"
+	class={cn('inline-flex items-center gap-1.5', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>

package/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		href = undefined,
+		child,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+	} = $props();
+
+	const attrs = $derived({
+		'data-slot': 'breadcrumb-link',
+		class: cn('hover:text-foreground transition-colors', className),
+		href,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: attrs })}
+{:else}
+	<a bind:this={ref} {...attrs}>
+		{@render children?.()}
+	</a>
+{/if}