@svelte-thing/primitives 0.0.0

package/src/style.css

@@ -0,0 +1,10 @@
+/* Triggers VS Code Extension Intellisense for Tailwind CSS. */
+@import 'tailwindcss';
+
+@import '@svelte-thing/tailwind-radix-colors/base';
+@import '@svelte-thing/tailwind-radix-colors/brand';
+@import '@svelte-thing/tailwind-radix-colors/brand-alpha';
+@import '@svelte-thing/tailwind-radix-colors/neutral';
+@import '@svelte-thing/tailwind-radix-colors/neutral-alpha';
+@import '@svelte-thing/tailwind-radix-colors/blue';
+@import '@svelte-thing/tailwind-radix-colors/gray';

package/src/tab/index.ts

@@ -0,0 +1,6 @@
+export * from './indicator/index.js';
+export * from './list/index.js';
+export * from './panel/index.js';
+export * from './root/index.js';
+export * from './title/index.js';
+export * from './trigger/index.js';

package/src/tab/indicator/createIndicator.svelte.ts

@@ -0,0 +1,79 @@
+import { createAttachmentKey } from 'svelte/attachments';
+import type { HTMLAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+
+export interface IndicatorState {
+	props: HTMLAttributes<HTMLSpanElement>;
+}
+
+export function createIndicator(): IndicatorState {
+	const root = getRoot();
+	const tabListSelector = $derived(`[data-tabs-list][id="${root.id}-list"]`);
+	const id = $derived(`${root.id}-indicator`);
+	const indicatorSelector = $derived(`[data-tabs-indicator][id="${id}"]`);
+
+	let resizeTick = $state(0);
+
+	return {
+		props: {
+			'data-tabs-indicator': '',
+			get id() {
+				return id;
+			},
+			[createAttachmentKey()](element) {
+				const tabList = element.closest<HTMLElement>(tabListSelector);
+				if (!tabList) {
+					return;
+				}
+
+				const observer = new ResizeObserver(() => {
+					resizeTick += 1;
+				});
+				observer.observe(tabList);
+
+				return () => {
+					observer.disconnect();
+				};
+			},
+			get style() {
+				if (typeof document === 'undefined') {
+					return;
+				}
+
+				const { value, direction, id } = root;
+				// oxlint-disable-next-line no-unused-expressions
+				resizeTick; // re-compute on ResizeObserver notifications
+
+				const indicator = document.querySelector<HTMLElement>(indicatorSelector);
+				const tabList = indicator?.closest<HTMLElement>(tabListSelector) ?? null;
+				const selectedTab = tabList?.querySelector<HTMLElement>(
+					`[data-tabs-trigger][id="${id}-trigger-${value}"]`,
+				);
+				if (!tabList || value === null || !selectedTab) {
+					return;
+				}
+
+				const rect = selectedTab.getBoundingClientRect();
+				// Floor it to avoid potential overflow.
+				const width = Math.floor(rect.width);
+				const height = Math.floor(rect.height);
+
+				const right =
+					direction === 'ltr'
+						? tabList.scrollWidth - selectedTab.offsetLeft - width - tabList.clientLeft
+						: selectedTab.offsetLeft - tabList.clientLeft;
+				const bottom = tabList.scrollHeight - selectedTab.offsetTop - height - tabList.clientTop;
+
+				return (
+					`--active-tab-left: ${selectedTab.offsetLeft - tabList.clientLeft}px;` +
+					`--active-tab-top: ${selectedTab.offsetTop - tabList.clientTop}px;` +
+					`--active-tab-width: ${width}px;` +
+					`--active-tab-height: ${height}px;` +
+					`--active-tab-right: ${right}px;` +
+					`--active-tab-bottom: ${bottom}px;`
+				);
+			},
+		},
+	};
+}

package/src/tab/indicator/index.ts

@@ -0,0 +1 @@
+export * from './createIndicator.svelte.js';

package/src/tab/list/createList.svelte.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+
+export interface ListState {
+	props: HTMLAttributes<HTMLUListElement>;
+}
+
+export function createList(): ListState {
+	const root = getRoot();
+
+	return {
+		props: {
+			get id() {
+				return `${root.id}-list`;
+			},
+			get 'aria-labelledby'() {
+				return root.hasTitle ? `${root.id}-title` : undefined;
+			},
+			get 'data-orientation'() {
+				return root.orientation;
+			},
+			'data-tabs-list': '',
+			role: 'tablist',
+		},
+	};
+}

package/src/tab/list/index.ts

@@ -0,0 +1 @@
+export * from './createList.svelte.js';

package/src/tab/panel/createPanel.svelte.ts

@@ -0,0 +1,42 @@
+import type { Exact } from '@svelte-thing/type-utils';
+import type { HTMLAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+
+export interface CreatePanelProps {
+	value: string;
+}
+
+export interface PanelState {
+	props: HTMLAttributes<HTMLElement>;
+}
+
+export function createPanel<T extends CreatePanelProps>(
+	props: Exact<CreatePanelProps, T>,
+): PanelState {
+	const root = getRoot();
+	const isSelected = $derived(root.panel === props.value);
+
+	return {
+		props: {
+			get 'aria-labelledby'() {
+				return `${root.id}-trigger-${props.value}`;
+			},
+			get 'data-orientation'() {
+				return root.orientation;
+			},
+			get 'data-hidden'() {
+				return isSelected ? undefined : '';
+			},
+			get hidden() {
+				return isSelected ? undefined : '';
+			},
+			get id() {
+				return `${root.id}-panel-${props.value}`;
+			},
+			'data-tab-panel': '',
+			role: 'tabpanel',
+			tabindex: 0,
+		},
+	};
+}

package/src/tab/panel/index.ts

@@ -0,0 +1 @@
+export * from './createPanel.svelte.js';

package/src/tab/root/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'svelte';
+
+import type { RootState } from './createRoot.svelte.js';
+
+export const [getRoot, setRoot] = createContext<RootState>();

package/src/tab/root/createRoot.svelte.ts

@@ -0,0 +1,85 @@
+import type { Exact } from '@svelte-thing/type-utils';
+import type { HTMLAttributes } from 'svelte/elements';
+import { uid } from 'uid';
+
+import { setRoot } from '../root/context.js';
+
+export type Direction = 'ltr' | 'rtl';
+export type Orientation = 'horizontal' | 'vertical';
+
+export interface CreateRootProps {
+	activateOnFocus: boolean | undefined;
+	direction: Direction | undefined;
+	orientation: Orientation | undefined;
+	value: string | undefined;
+}
+
+export type TValue = string | null;
+
+export interface RootState {
+	activateOnFocus: boolean;
+	direction: Direction;
+	hasTitle: boolean;
+	id: string;
+	orientation: Orientation;
+	panel: TValue;
+	value: TValue;
+	props: HTMLAttributes<HTMLElement>;
+}
+
+export function createRoot<T extends CreateRootProps>(props: Exact<CreateRootProps, T>): RootState {
+	const activateOnFocus = $derived(props.activateOnFocus ?? true);
+	const direction = $derived(props.direction ?? 'ltr');
+	const id = $derived(uid());
+	const orientation = $derived(props.orientation ?? 'horizontal');
+
+	let hasTitle = $state(false);
+	let value = $derived(props.value ?? null);
+	let panel = $derived(props.value ?? null);
+
+	const root: RootState = {
+		get activateOnFocus() {
+			return activateOnFocus;
+		},
+		get direction() {
+			return direction;
+		},
+		get hasTitle() {
+			return hasTitle;
+		},
+		set hasTitle(h) {
+			hasTitle = h;
+		},
+		get id() {
+			return id;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get panel() {
+			return panel;
+		},
+		set panel(p) {
+			panel = p;
+		},
+		get value() {
+			return value;
+		},
+		set value(v) {
+			value = v;
+		},
+		props: {
+			get 'data-orientation'() {
+				return orientation;
+			},
+			get id() {
+				return id;
+			},
+			'data-tab-root': '',
+		},
+	};
+
+	setRoot(root);
+
+	return root;
+}

package/src/tab/root/index.ts

@@ -0,0 +1,2 @@
+export * from './context.js';
+export * from './createRoot.svelte.js';

package/src/tab/title/createTitle.svelte.ts

@@ -0,0 +1,27 @@
+import { onDestroy } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+
+export interface TitleState {
+	props: HTMLAttributes<HTMLHeadingElement>;
+}
+
+export function createTitle(): TitleState {
+	const root = getRoot();
+
+	root.hasTitle = true;
+
+	onDestroy(() => {
+		root.hasTitle = false;
+	});
+
+	return {
+		props: {
+			get id() {
+				return `${root.id}-title`;
+			},
+			'data-tab-title': '',
+		},
+	};
+}

package/src/tab/title/index.ts

@@ -0,0 +1 @@
+export * from './createTitle.svelte.js';

package/src/tab/trigger/createTrigger.svelte.ts

@@ -0,0 +1,129 @@
+import type { Exact } from '@svelte-thing/type-utils';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+
+export interface CreateTriggerProps {
+	value: string;
+	disabled: boolean | null | undefined;
+}
+
+export interface TriggerState {
+	props: HTMLButtonAttributes;
+}
+
+export function createTrigger<T extends CreateTriggerProps>(
+	props: Exact<CreateTriggerProps, T>,
+): TriggerState {
+	const root = getRoot();
+	const isSelected = $derived(root.value === props.value);
+
+	if (root.value === null) {
+		root.value = props.value;
+		root.panel = props.value;
+	}
+
+	return {
+		props: {
+			get 'aria-controls'() {
+				return `${root.id}-panel-${props.value}`;
+			},
+			get 'aria-selected'() {
+				return isSelected;
+			},
+			get 'data-disabled'() {
+				return props.disabled ? true : undefined;
+			},
+			get 'data-orientation'() {
+				return root.orientation;
+			},
+			get 'data-root-id'() {
+				return root.id;
+			},
+			get 'data-selected'() {
+				return isSelected ? '' : undefined;
+			},
+			get 'data-value'() {
+				return props.value;
+			},
+			get id() {
+				return `${root.id}-trigger-${props.value}`;
+			},
+			get tabindex() {
+				return isSelected ? undefined : -1;
+			},
+			'data-tabs-trigger': '',
+			type: 'button',
+			role: 'tab',
+			onclick(event) {
+				root.value = props.value;
+				root.panel = props.value;
+
+				event.currentTarget.focus();
+			},
+			onkeydown(event) {
+				if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) {
+					return;
+				}
+
+				let preventDefault = false;
+				let pendingValue: string | null = null;
+
+				const button = event.currentTarget as HTMLButtonElement;
+				const triggers = [
+					...document.querySelectorAll<HTMLButtonElement>(
+						`[data-tabs-trigger][data-root-id="${root.id}"]:not([data-disabled])`,
+					),
+				];
+				const currentIndex = triggers.indexOf(button);
+
+				const nextKeyName = root.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+				const previousKeyName = root.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+
+				switch (event.key) {
+					case previousKeyName: {
+						const nextIndex = currentIndex === 0 ? triggers.length - 1 : currentIndex - 1;
+						pendingValue = triggers[nextIndex]?.dataset.value ?? null;
+						triggers[nextIndex]?.focus();
+						preventDefault = true;
+						break;
+					}
+					case nextKeyName: {
+						const nextIndex = (currentIndex + 1) % triggers.length;
+						pendingValue = triggers[nextIndex]?.dataset.value ?? null;
+						triggers[nextIndex]?.focus();
+						preventDefault = true;
+						break;
+					}
+					case 'Home': {
+						pendingValue = triggers[0]?.dataset.value ?? null;
+						triggers[0]?.focus();
+						preventDefault = true;
+						break;
+					}
+					case 'End': {
+						pendingValue = triggers.at(-1)?.dataset.value ?? null;
+						triggers.at(-1)?.focus();
+						preventDefault = true;
+						break;
+					}
+					default: {
+						break;
+					}
+				}
+
+				if (pendingValue !== null) {
+					root.value = pendingValue;
+					if (root.activateOnFocus) {
+						root.panel = pendingValue;
+					}
+				}
+
+				if (preventDefault) {
+					event.stopPropagation();
+					event.preventDefault();
+				}
+			},
+		},
+	};
+}

package/src/tab/trigger/index.ts

@@ -0,0 +1 @@
+export * from './createTrigger.svelte.js';

package/src/table/index.ts

@@ -0,0 +1 @@
+export * from './row/index.js';

package/src/table/row/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'svelte';
+
+import type { RowState } from './createRow.svelte.js';
+
+export const [getRow, setRow] = createContext<RowState>();

package/src/table/row/createRow.svelte.ts

@@ -0,0 +1,26 @@
+import type { Exact } from '@svelte-thing/type-utils';
+import type { HTMLAttributes } from 'svelte/elements';
+
+import { setRow } from './context.js';
+
+export interface CreateRowProps {
+	href: string | undefined;
+}
+
+export interface RowState {
+	href: string | undefined;
+	props: HTMLAttributes<HTMLElement>;
+}
+
+export function createRow<T extends CreateRowProps>(props: Exact<CreateRowProps, T>): RowState {
+	const row: RowState = {
+		get href() {
+			return props.href;
+		},
+		props: {},
+	};
+
+	setRow(row);
+
+	return row;
+}

package/src/table/row/index.ts

@@ -0,0 +1,2 @@
+export * from './context.js';
+export * from './createRow.svelte.js';