@torch-ui/solid 0.1.3

package/src/components/navigation/NavigationMenu.tsx

@@ -0,0 +1,305 @@
+import { type JSX, splitProps, Show, onMount } from 'solid-js'
+import { Menubar as KobalteMenuBar } from "@kobalte/core/menubar";
+import { ChevronDown } from 'lucide-solid'
+import { cn } from '../../utilities/classNames'
+
+function injectMenuBarStyles() {
+	const id = 'torchui-menu-bar-styles'
+	if (typeof document === 'undefined') return
+	let el = document.getElementById(id) as HTMLStyleElement | null
+	if (!el) {
+		el = document.createElement('style')
+		el.id = id
+		document.head.appendChild(el)
+	}
+
+	el.textContent = `
+    @keyframes torchui-menu-in  { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: scale(1) } }
+    @keyframes torchui-menu-out { from { opacity: 1; transform: scale(1) } to { opacity: 0; transform: scale(0.96) } }
+    .torchui-menubar-content {
+        transform-origin: var(--kb-menu-content-transform-origin);
+        animation: torchui-menu-out 150ms ease-in forwards;
+    }
+    .torchui-menubar-content[data-expanded] {
+        animation: torchui-menu-in 150ms ease-out;
+    }
+`
+}
+
+export interface MenuBarTriggerProps {
+	class?: string
+	children?: JSX.Element
+	/** Hide the default chevron icon */
+	noChevron?: boolean
+	/** Visual style variant */
+	variant?: 'default' | 'underline' | 'ghost'
+	/** Optional icon element */
+	icon?: JSX.Element
+	/** Icon placement relative to label */
+	iconPosition?: 'start' | 'end' | 'top' | 'bottom'
+}
+
+export function MenuBarTrigger(props: MenuBarTriggerProps) {
+	const [local, others] = splitProps(props, ['class', 'children', 'noChevron', 'variant', 'icon', 'iconPosition'])
+	const v = () => local.variant ?? 'default'
+	const ip = () => local.iconPosition ?? 'start'
+	const isStacked = () => ip() === 'top' || ip() === 'bottom'
+	return (
+		<KobalteMenuBar.Trigger
+			class={cn(
+				'group relative inline-flex text-sm font-medium text-ink-700 transition-colors',
+				'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
+				isStacked() ? 'flex-col items-center justify-center gap-1 px-3 py-2' : 'flex-row items-center gap-1.5',
+				v() === 'default' && [
+					!isStacked() && 'h-9',
+					'rounded-md px-3 py-2',
+					'hover:bg-surface-overlay hover:text-ink-900',
+					'data-[expanded]:bg-surface-overlay data-[expanded]:text-ink-900',
+				],
+				v() === 'underline' && [
+					!isStacked() && 'h-full',
+					'rounded-none px-4',
+					'hover:text-primary-600 data-[expanded]:text-primary-600',
+				],
+				v() === 'ghost' && [
+					!isStacked() && 'h-9',
+					'rounded-md px-3 py-2',
+					'hover:text-primary-600 data-[expanded]:text-primary-600',
+				],
+				local.class,
+			)}
+			{...others}
+		>
+			<Show when={local.icon && (ip() === 'start' || ip() === 'top')}>
+				<span class="flex h-4 w-4 shrink-0 items-center justify-center">{local.icon}</span>
+			</Show>
+			<span class={cn(isStacked() && 'text-xs leading-none')}>{local.children}</span>
+			<Show when={local.icon && (ip() === 'end' || ip() === 'bottom')}>
+				<span class="flex h-4 w-4 shrink-0 items-center justify-center">{local.icon}</span>
+			</Show>
+			<Show when={!local.noChevron && !isStacked()}>
+				<ChevronDown
+					class="relative h-3.5 w-3.5 shrink-0 text-ink-400 transition-transform duration-200 group-data-[expanded]:rotate-180"
+					aria-hidden="true"
+				/>
+			</Show>
+			<Show when={v() === 'underline'}>
+				<span
+					aria-hidden="true"
+					class="absolute inset-x-0 bottom-0 h-[2px] origin-center scale-x-0 bg-primary-500 transition-transform duration-200 group-hover:scale-x-100 group-data-[expanded]:scale-x-100"
+				/>
+			</Show>
+		</KobalteMenuBar.Trigger>
+	)
+}
+
+export interface MenuBarContentProps {
+	class?: string
+	children?: JSX.Element
+}
+
+export function MenuBarContent(props: MenuBarContentProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteMenuBar.Portal>
+			<KobalteMenuBar.Content
+				class={cn(
+					'torchui-menubar-content',
+					'z-[9999] mt-2 rounded-xl border border-surface-border bg-surface-raised shadow-lg p-2 outline-none',
+					local.class,
+				)}
+				{...others}
+			>
+				{local.children}
+			</KobalteMenuBar.Content>
+		</KobalteMenuBar.Portal>
+	)
+}
+
+export interface MenuBarItemProps {
+	class?: string
+	children?: JSX.Element
+	/** Leading icon */
+	icon?: JSX.Element
+	/** Short description text below the label */
+	description?: string
+	/** Icon placement relative to text */
+	iconPosition?: 'start' | 'end' | 'top' | 'bottom'
+}
+
+export function MenuBarItem(props: MenuBarItemProps) {
+	const [local, others] = splitProps(props, ['class', 'children', 'icon', 'description', 'iconPosition'])
+	const ip = () => local.iconPosition ?? 'start'
+	return (
+		<KobalteMenuBar.Item
+			class={cn(
+				'relative flex cursor-default select-none rounded-lg px-3 py-2 text-sm outline-none transition-colors',
+				'text-ink-700 hover:bg-surface-overlay hover:text-ink-900',
+				'focus:bg-surface-overlay focus:text-ink-900',
+				'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+				(ip() === 'start' || ip() === 'end') ? 'items-start gap-2.5' : 'flex-col items-center text-center gap-1.5',
+				ip() === 'end' && 'flex-row-reverse',
+				ip() === 'bottom' && 'flex-col-reverse',
+				local.class,
+			)}
+			{...others}
+		>
+			<Show when={local.icon}>
+				<span class={cn(
+					'flex shrink-0 items-center justify-center text-ink-500',
+					(ip() === 'start' || ip() === 'end') ? 'mt-0.5 h-5 w-5' : 'h-5 w-5',
+				)}>
+					{local.icon}
+				</span>
+			</Show>
+			<div class={cn('min-w-0', (ip() === 'start' || ip() === 'end') && 'flex-1')}>
+				<div class="font-medium text-ink-900">{local.children}</div>
+				<Show when={local.description}>
+					<div class="mt-0.5 text-xs text-ink-500 leading-relaxed">{local.description}</div>
+				</Show>
+			</div>
+		</KobalteMenuBar.Item>
+	)
+}
+
+export function MenuBarLabel(props: { class?: string; children: JSX.Element }) {
+	return (
+		<div class={cn('px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-ink-400', props.class)}>
+			{props.children}
+		</div>
+	)
+}
+
+export function MenuBarDivider(props: { class?: string }) {
+	return <div role="separator" aria-orientation="horizontal" class={cn('-mx-2 my-1 h-px bg-surface-border', props.class)} />
+}
+
+export interface MenuBarLinkProps {
+	href: string
+	class?: string
+	children?: JSX.Element
+	icon?: JSX.Element
+	description?: string
+	active?: boolean
+	/** Visual style variant */
+	variant?: 'default' | 'underline' | 'ghost'
+	/** Icon placement relative to text */
+	iconPosition?: 'start' | 'end' | 'top' | 'bottom'
+	/**
+	 * Disabled state. Sets aria-disabled + tabIndex=-1 and prevents navigation.
+	 * Note: plain anchors don't participate in Menubar roving focus — if full
+	 * keyboard nav is needed, render via KobalteMenuBar.Item with asChild.
+	 */
+	disabled?: boolean
+}
+
+export function MenuBarLink(props: MenuBarLinkProps) {
+	const v = () => props.variant ?? 'default'
+	const ip = () => props.iconPosition ?? 'start'
+	return (
+		<a
+			href={props.disabled ? undefined : props.href}
+			aria-disabled={props.disabled || undefined}
+			tabIndex={props.disabled ? -1 : undefined}
+			onClick={props.disabled ? (e: Event) => e.preventDefault() : undefined}
+			class={cn(
+				'relative flex select-none text-sm outline-none transition-colors',
+				(ip() === 'start' || ip() === 'end') ? 'items-start gap-2.5' : 'flex-col items-center text-center gap-1.5',
+				ip() === 'end' && 'flex-row-reverse',
+				ip() === 'bottom' && 'flex-col-reverse',
+				v() === 'default' && [
+					'rounded-lg px-3 py-2',
+					props.active
+						? 'bg-primary-50 text-primary-700 dark:bg-primary-500/10 dark:text-primary-400'
+						: 'text-ink-700 hover:bg-surface-overlay hover:text-ink-900',
+				],
+				v() === 'underline' && [
+					'rounded-lg px-3 py-2',
+					props.active
+						? 'text-primary-700 underline underline-offset-2 dark:text-primary-400'
+						: 'text-ink-700 hover:text-ink-900 hover:underline hover:underline-offset-2',
+				],
+				v() === 'ghost' && [
+					'rounded-lg px-3 py-2',
+					props.active
+						? 'text-primary-700 dark:text-primary-400'
+						: 'text-ink-500 hover:text-ink-900',
+				],
+				props.class,
+			)}
+		>
+			<Show when={props.icon}>
+				<span class={cn(
+					'flex shrink-0 items-center justify-center',
+					(ip() === 'start' || ip() === 'end') ? 'mt-0.5 h-5 w-5' : 'h-5 w-5',
+					props.active ? 'text-primary-500' : 'text-ink-500',
+				)}>
+					{props.icon}
+				</span>
+			</Show>
+			<div class={cn('min-w-0', (ip() === 'start' || ip() === 'end') && 'flex-1')}>
+				<div class={cn('font-medium', props.active ? 'text-primary-700 dark:text-primary-400' : 'text-ink-900')}>
+					{props.children}
+				</div>
+				<Show when={props.description}>
+					<div class="mt-0.5 text-xs text-ink-500 leading-relaxed">{props.description}</div>
+				</Show>
+			</div>
+		</a>
+	)
+}
+
+export interface MenuBarProps {
+	class?: string
+	children?: JSX.Element
+	/** Horizontal alignment of the nav items */
+	justify?: 'start' | 'center' | 'end'
+}
+
+export function MenuBar(props: MenuBarProps) {
+	const [local, others] = splitProps(props, ['class', 'children', 'justify'])
+	onMount(injectMenuBarStyles)
+	return (
+		<KobalteMenuBar
+			class={cn(
+				'flex h-full items-center gap-1',
+				local.justify === 'center' && 'justify-center',
+				local.justify === 'end' && 'justify-end',
+				local.class,
+			)}
+			{...others}
+		>
+			{local.children}
+		</KobalteMenuBar>
+	)
+}
+
+export function MenuBarMenu(props: { children?: JSX.Element }) {
+	return <KobalteMenuBar.Menu {...props} />
+}
+
+
+export function MenuBarNavLink(props: MenuBarLinkProps) {
+	const v = () => props.variant ?? 'default'
+	return (
+		<a
+			href={props.href}
+			class={cn(
+				'group relative inline-flex h-full items-center text-sm font-medium text-ink-700 transition-colors',
+				'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
+				v() === 'default' && 'h-9 rounded-md px-3 py-2 hover:bg-surface-overlay hover:text-ink-900',
+				v() === 'underline' && 'rounded-none px-4 hover:text-primary-600',
+				v() === 'ghost' && 'h-9 rounded-md px-3 py-2 hover:text-primary-600',
+				props.class,
+			)}
+		>
+			{props.children}
+			<Show when={v() === 'underline'}>
+				<span
+					aria-hidden="true"
+					class="absolute inset-x-0 bottom-0 h-[2px] origin-center scale-x-0 bg-primary-500 transition-transform duration-200 group-hover:scale-x-100"
+				/>
+			</Show>
+		</a>
+	)
+}

package/src/components/navigation/Pagination.tsx

@@ -0,0 +1,298 @@
+import { type JSX, Show, For, splitProps, createEffect, createSignal, createUniqueId, onMount, onCleanup } from 'solid-js'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-solid'
+import { cn } from '../../utilities/classNames'
+import { Button } from '../actions'
+import { Select } from '../forms'
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50]
+
+export interface PaginationProps extends JSX.HTMLAttributes<HTMLElement> {
+	/** Current 1-based page. */
+	page: number
+	/** Total number of pages. */
+	totalPages: number
+	/** Called when page changes. */
+	onPageChange: (page: number) => void
+	/** Max page-number buttons to show (excluding prev/next). Default: 5. Set 0 to hide page numbers. */
+	maxPages?: number
+	/** Show first/last page buttons (double chevrons). Default: false. */
+	showFirstLast?: boolean
+	/** Total item count. When set, renders "Showing X–Y of Z" info text. */
+	totalItems?: number
+	/** Current page size. When set alongside onPageSizeChange, renders per-page selector. */
+	pageSize?: number
+	/** Called when page size changes. Required alongside pageSize for the per-page selector to render. */
+	onPageSizeChange?: (size: number) => void
+	/** Options for per-page selector. Default: [10, 25, 50]. */
+	pageSizeOptions?: number[]
+	/** Optional id for the per-page select element (for label association). */
+	selectId?: string
+}
+
+/** Inclusive integer range. */
+function range(start: number, end: number): number[] {
+	return Array.from({ length: end - start + 1 }, (_, i) => start + i)
+}
+
+/**
+ * Unified pagination: page-number buttons with prev/next, optional "Showing X–Y of Z" info,
+ * and optional per-page size selector. Replaces both standalone Pagination and TablePaginationFooter.
+ */
+export function Pagination(props: PaginationProps) {
+	const [local, others] = splitProps(props, [
+		'page', 'totalPages', 'onPageChange', 'maxPages', 'showFirstLast',
+		'totalItems', 'pageSize', 'onPageSizeChange', 'pageSizeOptions',
+		'selectId', 'class',
+	])
+
+	const total = () => Math.max(1, local.totalPages)
+	/** Clamped page — always valid even if consumer state is stale. */
+	const page = () => Math.max(1, Math.min(local.page, total()))
+	const userMaxPages = () => local.maxPages ?? 5
+
+	const hasInfo = () => local.totalItems != null
+	const hasPageSize = () => local.pageSize != null && local.onPageSizeChange != null
+	const showNav = () => total() > 1
+
+	// --- Responsive: measure fixed elements and available space ---
+	let navEl!: HTMLElement
+	let fixedEl!: HTMLDivElement
+	const [navWidth, setNavWidth] = createSignal(0)
+	const [fixedWidth, setFixedWidth] = createSignal(0)
+	// Fallback 40px breaks the circular dep: no buttons → no measurement → fallback → buttons render → measured.
+	const [btnWidth, setBtnWidth] = createSignal(40)
+
+	let ro: ResizeObserver | undefined
+
+	onMount(() => {
+		// Ensure refs are set before measuring
+		if (!navEl || !fixedEl) {
+			console.warn('Pagination refs not set in onMount')
+			return
+		}
+		// Synchronous initial read — eliminates flash since first reactive computation has real values.
+		setNavWidth(navEl.clientWidth)
+		setFixedWidth(fixedEl.scrollWidth)
+
+		ro = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.target === navEl) setNavWidth(entry.contentRect.width)
+				if (entry.target === fixedEl) setFixedWidth(entry.contentRect.width)
+			}
+			const btn = navEl.querySelector('button[data-page-btns]') as HTMLElement | null
+			if (btn) setBtnWidth(btn.offsetWidth + 4) // + gap-1
+		})
+		ro.observe(navEl)
+		ro.observe(fixedEl)
+	})
+
+	onCleanup(() => ro?.disconnect())
+
+	// Count icon buttons: prev/next always, first/last conditional
+	const iconBtnCount = () => 2 + (local.showFirstLast ? 2 : 0)
+	// Each icon button ≈ 36px + gap-1 (4px)
+	const iconBtnsWidth = () => iconBtnCount() * 40
+
+	/** Compute how many page buttons fit in the remaining space after fixed elements. */
+	const effectiveMaxPages = (): number => {
+		const m = userMaxPages()
+		if (m === 0) return 0
+		const nw = navWidth()
+		if (nw === 0) return m // pre-measurement fallback; observer corrects within 1 frame
+		// Available = nav - info/perpage - gap - icon buttons - rounding buffer
+		const gap = fixedWidth() > 0 ? 16 : 0 // gap-4 between fixedEl and btnGroup
+		const available = nw - fixedWidth() - gap - iconBtnsWidth() - 16
+		// Deduct 1 slot to reserve space for up to 2 ellipsis (~22px each < 1 button width)
+		const fits = Math.floor(available / btnWidth()) - 1
+		if (fits < 3) return 0
+		return Math.min(m, fits)
+	}
+
+	const showPageNumbers = () => effectiveMaxPages() > 0
+
+	/** Sync consumer state when clamp kicks in (e.g. page-size change shrinks totalPages below current page). */
+	createEffect(() => {
+		const clamped = Math.max(1, Math.min(local.page, total()))
+		if (clamped !== local.page) local.onPageChange(clamped)
+	})
+
+	// --- Info text ---
+	const pageSizeVal = () => local.pageSize ?? 10
+	const start = () => (page() - 1) * pageSizeVal()
+	const end = () => Math.min(start() + pageSizeVal(), local.totalItems ?? 0)
+
+	// --- Per-page selector ---
+	const pageSizeOptions = () => local.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS
+	const pageSizeSelectOptions = () =>
+		pageSizeOptions().map((n) => ({ value: String(n), label: String(n) }))
+	const uniqueId = createUniqueId()
+	const selectElId = () => local.selectId ?? `pagination-page-size-${uniqueId}`
+
+	// --- Page number buttons ---
+	/** Build page buttons. maxPages = exact max number of numbered buttons (including first/last). */
+	const pageRange = (): (number | '...')[] => {
+		const t = total()
+		const c = page()
+		const m = effectiveMaxPages()
+		if (!showPageNumbers() || t <= 1) return []
+		if (t <= m) return range(1, t)
+
+		const result: (number | '...')[] = []
+		// Always show first page
+		result.push(1)
+		// Window budget: m minus first and last
+		const windowSize = Math.max(0, m - 2)
+		if (windowSize === 0) {
+			// Only first and last
+			if (t > 2) result.push('...')
+			result.push(t)
+			return result
+		}
+		// Center window around current page
+		const half = Math.floor(windowSize / 2)
+		let wStart = Math.max(2, c - half)
+		let wEnd = Math.min(t - 1, wStart + windowSize - 1)
+		wStart = Math.max(2, wEnd - windowSize + 1)
+
+		if (wStart > 2) result.push('...')
+		for (let i = wStart; i <= wEnd; i++) result.push(i)
+		if (wEnd < t - 1) result.push('...')
+		result.push(t)
+		return result
+	}
+
+	const canPrev = () => page() > 1
+	const canNext = () => page() < total()
+
+	function handlePageSizeChange(v: string) {
+		local.onPageSizeChange?.(Number(v))
+		local.onPageChange(1)
+	}
+
+	return (
+		<nav
+			ref={(el) => (navEl = el)}
+			role="navigation"
+			aria-label="Pagination"
+			{...others}
+			class={cn(
+				'flex w-full items-center gap-4',
+				(hasInfo() || hasPageSize()) ? '' : 'justify-center',
+				local.class,
+			)}
+		>
+			{/* Info + per-page selector. Measured by ResizeObserver for available-width calc. */}
+			<div ref={(el) => (fixedEl = el)} class="flex shrink-0 items-center gap-4">
+				<Show when={hasInfo()}>
+					<p class="shrink-0 text-sm text-ink-600">
+						Showing{' '}
+						{(local.totalItems ?? 0) === 0 ? (
+							<>
+								<span class="font-medium text-ink-900">0</span> of{' '}
+								<span class="font-medium text-ink-900">0</span>
+							</>
+						) : (
+							<>
+								<span class="font-medium text-ink-900">{start() + 1}</span>–
+								<span class="font-medium text-ink-900">{end()}</span> of{' '}
+								<span class="font-medium text-ink-900">{local.totalItems}</span>
+							</>
+						)}
+					</p>
+				</Show>
+				<Show when={hasPageSize()}>
+					<div class="flex shrink-0 items-center gap-2">
+						<label for={selectElId()} class="text-sm text-ink-500">
+							Per page
+						</label>
+						<Select
+							id={selectElId()}
+							value={String(pageSizeVal())}
+							onValueChange={handlePageSizeChange}
+							options={pageSizeSelectOptions()}
+							compact
+							class="w-20 rounded-lg"
+						/>
+					</div>
+				</Show>
+			</div>
+			{/* All nav buttons in one gap-1 cluster: «first ‹prev [pages] next› last» */}
+			<Show when={showNav()}>
+				<div class={cn('flex items-center gap-1', (hasInfo() || hasPageSize()) && 'ml-auto')}>
+					<Show when={local.showFirstLast}>
+						<Button
+							type="button"
+							variant="outlined"
+							size="sm"
+							iconOnly
+							icon={<ChevronsLeft class="h-4 w-4" />}
+							aria-label="First page"
+							disabled={!canPrev()}
+							onClick={() => local.onPageChange(1)}
+							class="rounded-lg"
+						/>
+					</Show>
+					<Button
+						type="button"
+						variant="outlined"
+						size="sm"
+						iconOnly
+						icon={<ChevronLeft class="h-4 w-4" />}
+						aria-label="Previous page"
+						disabled={!canPrev()}
+						onClick={() => local.onPageChange(page() - 1)}
+						class="rounded-lg"
+					/>
+					<Show when={showPageNumbers()}>
+						<For each={pageRange()}>
+							{(p) =>
+								typeof p === 'number' ? (
+									<Button
+										type="button"
+										variant={p === page() ? 'primary' : 'outlined'}
+										size="sm"
+										aria-label={p === page() ? `Page ${p}` : `Go to page ${p}`}
+										aria-current={p === page() ? 'page' : undefined}
+										onClick={() => local.onPageChange(p)}
+										class="min-w-[2.25rem] rounded-lg"
+										data-page-btns
+									>
+										{p}
+									</Button>
+								) : (
+									<span class="px-1 text-ink-400" aria-hidden="true">
+										…
+									</span>
+								)
+							}
+						</For>
+					</Show>
+					<Button
+						type="button"
+						variant="outlined"
+						size="sm"
+						iconOnly
+						icon={<ChevronRight class="h-4 w-4" />}
+						aria-label="Next page"
+						disabled={!canNext()}
+						onClick={() => local.onPageChange(page() + 1)}
+						class="rounded-lg"
+					/>
+					<Show when={local.showFirstLast}>
+						<Button
+							type="button"
+							variant="outlined"
+							size="sm"
+							iconOnly
+							icon={<ChevronsRight class="h-4 w-4" />}
+							aria-label="Last page"
+							disabled={!canNext()}
+							onClick={() => local.onPageChange(total())}
+							class="rounded-lg"
+						/>
+					</Show>
+				</div>
+			</Show>
+		</nav>
+	)
+}