@rokkit/ui 1.0.0-next.98 → 1.0.1

package/src/components/Button.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { ButtonProps } from '../types/button.js'
+	import { ProxyItem } from '@rokkit/states'
+	import ItemContent from './ItemContent.svelte'
+
+	let {
+		variant = 'default',
+		style = 'default',
+		size = 'md',
+		type = 'button',
+		label,
+		icon,
+		iconRight,
+		href,
+		target = '_self',
+		title,
+		disabled = false,
+		loading = false,
+		onclick,
+		class: className = '',
+		children,
+		...rest
+	}: ButtonProps = $props()
+
+	const isIconOnly = $derived(Boolean(icon) && !label && !children)
+	const isDisabled = $derived(disabled || loading)
+
+	/**
+	 * Create a ProxyItem for default content rendering.
+	 * Constructs a minimal item from button props.
+	 */
+	const proxy = $derived(new ProxyItem({ label, icon, iconRight }))
+</script>
+
+{#snippet defaultContent()}
+	{#if loading}
+		<span data-button-spinner aria-hidden="true"></span>
+	{/if}
+	<ItemContent {proxy} />
+	{#if iconRight}
+		<span data-button-icon-right class={iconRight} aria-hidden="true"></span>
+	{/if}
+{/snippet}
+
+{#if href && !isDisabled}
+	<a
+		{href}
+		{target}
+		{title}
+		data-button
+		data-variant={variant}
+		data-style={style}
+		data-size={size}
+		data-icon-only={isIconOnly || undefined}
+		data-loading={loading || undefined}
+		class={className || undefined}
+		aria-label={label}
+		aria-busy={loading || undefined}
+		{...rest}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			{@render defaultContent()}
+		{/if}
+	</a>
+{:else}
+	<button
+		{type}
+		{title}
+		data-button
+		data-variant={variant}
+		data-style={style}
+		data-size={size}
+		data-disabled={isDisabled || undefined}
+		data-icon-only={isIconOnly || undefined}
+		data-loading={loading || undefined}
+		class={className || undefined}
+		disabled={isDisabled}
+		aria-label={label}
+		aria-busy={loading || undefined}
+		{onclick}
+		{...rest}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			{@render defaultContent()}
+		{/if}
+	</button>
+{/if}

package/src/components/ButtonGroup.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { ButtonGroupProps } from '../types/button.js'
+
+	const { size = 'md', class: className = '', children }: ButtonGroupProps = $props()
+</script>
+
+<div data-button-group data-size={size} class={className || undefined} role="group">
+	{@render children?.()}
+</div>

package/src/components/Card.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface CardProps {
+		/** Optional href to render as a link */
+		href?: string
+		/** Click handler (only applies when no href) */
+		onclick?: () => void
+		/** Visual variant */
+		variant?: 'default' | 'primary' | 'secondary' | 'tertiary'
+		/** Additional CSS class */
+		class?: string
+		/** Card header snippet */
+		header?: Snippet
+		/** Card footer snippet */
+		footer?: Snippet
+		/** Card body content */
+		children?: Snippet
+	}
+
+	const {
+		href,
+		onclick,
+		variant = 'default',
+		class: className = '',
+		header,
+		footer,
+		children
+	}: CardProps = $props()
+</script>
+
+{#snippet cardContent()}
+	{#if header}
+		<div data-card-header>
+			{@render header()}
+		</div>
+	{/if}
+
+	{#if children}
+		<div data-card-body>
+			{@render children()}
+		</div>
+	{/if}
+
+	{#if footer}
+		<div data-card-footer>
+			{@render footer()}
+		</div>
+	{/if}
+{/snippet}
+
+{#if href}
+	<a {href} data-card data-variant={variant} class={className || undefined}>
+		{@render cardContent()}
+	</a>
+{:else if onclick}
+	<button
+		type="button"
+		data-card
+		data-card-interactive
+		data-variant={variant}
+		class={className || undefined}
+		{onclick}
+	>
+		{@render cardContent()}
+	</button>
+{:else}
+	<div data-card data-variant={variant} class={className || undefined}>
+		{@render cardContent()}
+	</div>
+{/if}

package/src/components/Carousel.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { swipeable, keyboard } from '@rokkit/actions'
+	import { messages } from '@rokkit/states'
+
+	interface CarouselProps {
+		/** Number of slides (required when using children snippet) */
+		count?: number
+		/** Current slide index (bindable) */
+		current?: number
+		/** Auto-advance slides */
+		autoplay?: boolean
+		/** Autoplay interval in milliseconds (default: 5000) */
+		interval?: number
+		/** Wrap around at ends (default: true) */
+		loop?: boolean
+		/** Show navigation dots (default: true) */
+		showDots?: boolean
+		/** Show prev/next arrow buttons (default: true) */
+		showArrows?: boolean
+		/** Transition effect (default: 'slide') */
+		transition?: 'slide' | 'fade' | 'none'
+		/** Additional CSS class */
+		class?: string
+		/** Slide content — receives (index, current) */
+		slide?: Snippet<[number, number]>
+		/** Children snippet (alternative to slide) */
+		children?: Snippet
+	}
+
+	let {
+		count = 0,
+		current = $bindable(0),
+		autoplay = false,
+		interval = 5000,
+		loop = true,
+		showDots = true,
+		showArrows = true,
+		transition = 'slide',
+		labels: userLabels = {},
+		class: className = '',
+		slide,
+		children
+	}: CarouselProps & { labels?: Record<string, string> } = $props()
+
+	const labels = $derived({ ...messages.carousel, ...userLabels })
+
+	let hovered = $state(false)
+
+	const keyMap = {
+		prev: ['ArrowLeft'],
+		next: ['ArrowRight'],
+		first: ['Home'],
+		last: ['End']
+	}
+
+	function prev() {
+		if (current > 0) {
+			current--
+		} else if (loop) {
+			current = count - 1
+		}
+	}
+
+	function next() {
+		if (current < count - 1) {
+			current++
+		} else if (loop) {
+			current = 0
+		}
+	}
+
+	function goTo(index: number) {
+		if (index >= 0 && index < count) {
+			current = index
+		}
+	}
+
+	// Autoplay
+	$effect(() => {
+		if (!autoplay || hovered || count <= 1) return
+
+		const timer = setInterval(() => {
+			next()
+		}, interval)
+
+		return () => clearInterval(timer)
+	})
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	data-carousel
+	data-carousel-transition={transition}
+	class={className || undefined}
+	role="application"
+	aria-roledescription="carousel"
+	aria-label={labels.label}
+	tabindex="0"
+	use:swipeable={{ horizontal: true, vertical: false }}
+	use:keyboard={keyMap}
+	onswipeLeft={next}
+	onswipeRight={prev}
+	onprev={prev}
+	onnext={next}
+	onfirst={() => goTo(0)}
+	onlast={() => goTo(count - 1)}
+	onmouseenter={() => (hovered = true)}
+	onmouseleave={() => (hovered = false)}
+>
+	<div data-carousel-viewport>
+		<div data-carousel-track style:--carousel-current={current} style:--carousel-count={count}>
+			{#if slide}
+				{#each Array(count) as _, index (index)}
+					<div
+						data-carousel-slide
+						data-active={index === current || undefined}
+						role="tabpanel"
+						aria-roledescription="slide"
+						aria-label="Slide {index + 1} of {count}"
+						aria-hidden={index !== current}
+					>
+						{@render slide(index, current)}
+					</div>
+				{/each}
+			{:else if children}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+
+	{#if showArrows && count > 1}
+		<button
+			data-carousel-prev
+			type="button"
+			aria-label={labels.prev}
+			onclick={prev}
+			disabled={!loop && current === 0}
+		>
+			<span class="i-lucide:chevron-left" aria-hidden="true"></span>
+		</button>
+
+		<button
+			data-carousel-next
+			type="button"
+			aria-label={labels.next}
+			onclick={next}
+			disabled={!loop && current === count - 1}
+		>
+			<span class="i-lucide:chevron-right" aria-hidden="true"></span>
+		</button>
+	{/if}
+
+	{#if showDots && count > 1}
+		<div data-carousel-dots role="tablist" aria-label={labels.slides}>
+			{#each Array(count) as _, index (index)}
+				<button
+					data-carousel-dot
+					data-active={index === current || undefined}
+					type="button"
+					role="tab"
+					aria-selected={index === current}
+					aria-label="Go to slide {index + 1}"
+					onclick={() => goTo(index)}
+				></button>
+			{/each}
+		</div>
+	{/if}
+</div>

package/src/components/Code.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import type { CodeProps, CodeStateIcons } from '../types/index.js'
+	import { defaultCodeStateIcons } from '../types/code.js'
+	import { highlightCode } from '../utils/shiki.js'
+	import { messages } from '@rokkit/states'
+
+	const {
+		code,
+		language = 'text',
+		theme = 'dark',
+		showLineNumbers = false,
+		showCopyButton = true,
+		labels: userLabels = {},
+		icons: userIcons,
+		class: className = ''
+	}: CodeProps & { labels?: Record<string, string> } = $props()
+
+	const labels = $derived({ ...messages.code, ...userLabels })
+
+	// Merge icons with defaults
+	const icons = $derived<CodeStateIcons>({ ...defaultCodeStateIcons, ...userIcons })
+
+	let copied = $state(false)
+	let highlightedCode = $derived(highlightCode(code, { lang: language, theme }))
+
+	async function copyToClipboard() {
+		try {
+			await navigator.clipboard.writeText(code)
+			copied = true
+			setTimeout(() => {
+				copied = false
+			}, 2000)
+		} catch {
+			// Fallback for older browsers
+			const textarea = document.createElement('textarea')
+			textarea.value = code
+			textarea.style.position = 'fixed'
+			textarea.style.opacity = '0'
+			document.body.appendChild(textarea)
+			textarea.select()
+			document.execCommand('copy')
+			document.body.removeChild(textarea)
+			copied = true
+			setTimeout(() => {
+				copied = false
+			}, 2000)
+		}
+	}
+</script>
+
+<div
+	class="code-block {className}"
+	class:show-line-numbers={showLineNumbers}
+	data-language={language}
+	data-theme={theme}
+>
+	{#if showCopyButton}
+		<button
+			type="button"
+			class="copy-button"
+			onclick={copyToClipboard}
+			aria-label={copied ? labels.copied : labels.copy}
+		>
+			{#if copied}
+				<span class="copy-icon {icons.copysuccess}"></span>
+			{:else}
+				<span class="copy-icon {icons.copy}"></span>
+			{/if}
+		</button>
+	{/if}
+
+	{#await highlightedCode}
+		<div class="code-loading">
+			<pre><code>{code}</code></pre>
+		</div>
+	{:then html}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html html}
+	{:catch error}
+		<div class="code-error">
+			<pre><code>{code}</code></pre>
+			<p class="error-message">Highlighting failed: {error.message}</p>
+		</div>
+	{/await}
+</div>
+
+<style>
+	.code-block {
+		position: relative;
+		border-radius: 0.5rem;
+		overflow: hidden;
+	}
+
+	.code-block :global(pre) {
+		margin: 0;
+		padding: 1rem;
+		overflow-x: auto;
+		font-family: 'Victor Mono', ui-monospace, monospace;
+		font-size: 0.875rem;
+		line-height: 1.6;
+		tab-size: 2;
+	}
+
+	.code-block :global(code) {
+		font-family: inherit;
+	}
+
+	/* Line numbers */
+	.code-block.show-line-numbers :global(pre) {
+		padding-left: 3.5rem;
+	}
+
+	.code-block.show-line-numbers :global(.line::before) {
+		content: counter(line);
+		counter-increment: line;
+		display: inline-block;
+		width: 2rem;
+		margin-left: -3rem;
+		margin-right: 1rem;
+		text-align: right;
+		color: var(--code-line-number-color, hsl(220 10% 40%));
+		user-select: none;
+	}
+
+	.code-block.show-line-numbers :global(pre) {
+		counter-reset: line;
+	}
+
+	/* Copy button */
+	.copy-button {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		padding: 0.375rem;
+		background: var(--code-copy-bg, hsla(220, 15%, 25%, 0.8));
+		border: 1px solid var(--code-copy-border, hsl(220 15% 35%));
+		border-radius: 0.375rem;
+		color: var(--code-copy-color, hsl(220 10% 70%));
+		cursor: pointer;
+		opacity: 0;
+		transition:
+			opacity 0.15s ease,
+			background-color 0.15s ease;
+		z-index: 10;
+	}
+
+	.code-block:hover .copy-button,
+	.copy-button:focus {
+		opacity: 1;
+	}
+
+	.copy-button:hover {
+		background: var(--code-copy-bg-hover, hsla(220, 15%, 30%, 0.9));
+		color: var(--code-copy-color-hover, hsl(220 10% 90%));
+	}
+
+	.copy-icon {
+		display: block;
+		width: 1rem;
+		height: 1rem;
+	}
+
+	/* Loading state */
+	.code-loading {
+		background: var(--code-bg, hsl(220 15% 13%));
+	}
+
+	.code-loading pre {
+		color: var(--code-color, hsl(220 10% 60%));
+	}
+
+	/* Error state */
+	.code-error {
+		background: var(--code-bg, hsl(220 15% 13%));
+	}
+
+	.code-error pre {
+		color: var(--code-color, hsl(220 10% 70%));
+	}
+
+	.error-message {
+		padding: 0.5rem 1rem;
+		margin: 0;
+		font-size: 0.75rem;
+		color: var(--code-error-color, hsl(0 70% 60%));
+		background: var(--code-error-bg, hsla(0, 70%, 30%, 0.2));
+		border-top: 1px solid var(--code-error-border, hsl(0 70% 40%));
+	}
+</style>

package/src/components/Connector.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	/**
+	 * Connector Component
+	 *
+	 * Renders tree line connectors for hierarchical visualizations.
+	 * Supports RTL (right-to-left) layouts.
+	 *
+	 * Based on @rokkit/ui Connector implementation.
+	 */
+
+	import type { ConnectorType } from '../types/tree.js'
+
+	interface Props {
+		/** The type of connector to render */
+		type?: ConnectorType
+		/** Right-to-left layout support */
+		rtl?: boolean
+	}
+
+	const { type = 'empty', rtl = false }: Props = $props()
+
+	const validTypes: ConnectorType[] = ['last', 'child', 'sibling', 'empty']
+	const validatedType = $derived(validTypes.includes(type) ? type : 'empty')
+</script>
+
+<span data-connector data-connector-type={validatedType} data-connector-rtl={rtl || undefined}>
+	{#if validatedType === 'last'}
+		{#if rtl}
+			<i data-connector-v></i>
+			<i data-connector-corner></i>
+		{:else}
+			<i data-connector-v></i>
+			<i data-connector-h></i>
+		{/if}
+	{:else if validatedType === 'child'}
+		{#if rtl}
+			<i data-connector-v data-connector-full></i>
+			<i data-connector-corner></i>
+		{:else}
+			<i data-connector-v data-connector-full></i>
+			<i data-connector-h></i>
+		{/if}
+	{:else if validatedType === 'sibling'}
+		<i data-connector-v data-connector-full></i>
+	{/if}
+</span>

package/src/components/Divider.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	interface DividerProps {
+		/** Orientation of the divider */
+		orientation?: 'horizontal' | 'vertical'
+		/** Optional label text displayed in the center */
+		label?: string
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const { orientation = 'horizontal', label, class: className = '' }: DividerProps = $props()
+</script>
+
+<div
+	data-divider
+	data-orientation={orientation}
+	class={className || undefined}
+	role="separator"
+	aria-orientation={orientation}
+>
+	{#if label}
+		<span data-divider-label>{label}</span>
+	{/if}
+</div>