sheer-ui 0.0.0

package/src/lib/components/pagination/pagination.svelte.ts

@@ -0,0 +1,275 @@
+import { createContext } from 'svelte';
+import { attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import type { Page, PageItem } from './types.js';
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { createBitsAttrs } from '../../internal/attrs.js';
+import { kbd } from '../../internal/kbd.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { type Orientation } from '../../internal/index.js';
+
+const paginationAttrs = createBitsAttrs({
+	component: 'pagination',
+	parts: ['root', 'page', 'prev', 'next'],
+});
+
+const [getPaginationRoot, setPaginationRoot] = createContext<PaginationRootState>();
+
+interface PaginationRootStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			count: number;
+			perPage: number;
+			siblingCount: number;
+			orientation: Orientation;
+			loop: boolean;
+		}>,
+		WritableBoxedValues<{
+			page: number;
+		}> {}
+
+export class PaginationRootState {
+	static create(opts: PaginationRootStateOpts) {
+		return setPaginationRoot(new PaginationRootState(opts));
+	}
+	readonly opts: PaginationRootStateOpts;
+	readonly attachment: RefAttachment;
+	readonly totalPages = $derived.by(() => {
+		if (this.opts.count.current === 0) return 1;
+		return Math.ceil(this.opts.count.current / this.opts.perPage.current);
+	});
+	readonly range = $derived.by(() => {
+		const start = (this.opts.page.current - 1) * this.opts.perPage.current;
+		const end = Math.min(start + this.opts.perPage.current, this.opts.count.current);
+		return { start: start + 1, end };
+	});
+	readonly pages = $derived.by(() =>
+		getPageItems({
+			page: this.opts.page.current,
+			totalPages: this.totalPages,
+			siblingCount: this.opts.siblingCount.current,
+		}),
+	);
+	readonly hasPrevPage = $derived.by(() => this.opts.page.current > 1);
+	readonly hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);
+
+	readonly rovingFocusGroup: RovingFocusGroup;
+
+	constructor(opts: PaginationRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+		this.rovingFocusGroup = new RovingFocusGroup({
+			candidateSelector: [paginationAttrs.selector('prev'), paginationAttrs.selector('page'), paginationAttrs.selector('next')].join(', '),
+			rootNode: this.opts.ref,
+			loop: this.opts.loop,
+			orientation: this.opts.orientation,
+		});
+	}
+
+	setPage(page: number) {
+		this.opts.page.current = page;
+	}
+
+	prevPage() {
+		this.opts.page.current = Math.max(this.opts.page.current - 1, 1);
+	}
+
+	nextPage() {
+		this.opts.page.current = Math.min(this.opts.page.current + 1, this.totalPages);
+	}
+
+	readonly snippetProps = $derived.by(() => ({
+		pages: this.pages,
+		range: this.range,
+		currentPage: this.opts.page.current,
+	}));
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'data-orientation': this.opts.orientation.current,
+				[paginationAttrs.root]: '',
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface PaginationPageStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			page: Page;
+			disabled: boolean;
+		}> {}
+
+export class PaginationPageState {
+	static create(opts: PaginationPageStateOpts) {
+		return new PaginationPageState(opts, getPaginationRoot());
+	}
+	readonly opts: PaginationPageStateOpts;
+	readonly root: PaginationRootState;
+	readonly attachment: RefAttachment;
+	readonly #isSelected = $derived.by(() => this.opts.page.current.value === this.root.opts.page.current);
+
+	constructor(opts: PaginationPageStateOpts, root: PaginationRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref);
+
+		this.onclick = this.onclick.bind(this);
+		this.onkeydown = this.onkeydown.bind(this);
+	}
+
+	onclick(e: BitsMouseEvent) {
+		if (this.opts.disabled.current) return;
+		if (e.button !== 0) return;
+		this.root.setPage(this.opts.page.current.value);
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+			e.preventDefault();
+			this.root.setPage(this.opts.page.current.value);
+		} else {
+			this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+		}
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'aria-label': `Page ${this.opts.page.current.value}`,
+				'data-value': `${this.opts.page.current.value}`,
+				'data-selected': this.#isSelected ? '' : undefined,
+				[paginationAttrs.page]: '',
+				//
+				onclick: this.onclick,
+				onkeydown: this.onkeydown,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+//
+// NEXT/PREV BUTTON
+//
+
+interface PaginationButtonStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			disabled: boolean;
+		}> {
+	type: 'prev' | 'next';
+}
+
+export class PaginationButtonState {
+	static create(opts: PaginationButtonStateOpts) {
+		return new PaginationButtonState(opts, getPaginationRoot());
+	}
+	readonly opts: PaginationButtonStateOpts;
+	readonly root: PaginationRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: PaginationButtonStateOpts, root: PaginationRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref);
+
+		this.onclick = this.onclick.bind(this);
+		this.onkeydown = this.onkeydown.bind(this);
+	}
+
+	#action() {
+		this.opts.type === 'prev' ? this.root.prevPage() : this.root.nextPage();
+	}
+
+	readonly #isDisabled = $derived.by(() => {
+		if (this.opts.disabled.current) return true;
+		if (this.opts.type === 'prev') return !this.root.hasPrevPage;
+		if (this.opts.type === 'next') return !this.root.hasNextPage;
+		return false;
+	});
+
+	onclick(e: BitsMouseEvent) {
+		if (this.opts.disabled.current) return;
+		if (e.button !== 0) return;
+		this.#action();
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+			e.preventDefault();
+			this.#action();
+		} else {
+			this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+		}
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[paginationAttrs[this.opts.type]]: '',
+				disabled: this.#isDisabled,
+				//
+				onclick: this.onclick,
+				onkeydown: this.onkeydown,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+//
+// HELPERS
+//
+
+interface GetPageItemsProps {
+	page?: number;
+	totalPages: number;
+	siblingCount?: number;
+}
+
+/**
+ * Returns an array of page items used to render out the
+ * pagination page triggers.
+ *
+ * Credit: https://github.com/melt-ui/melt-ui
+ */
+function getPageItems({ page = 1, totalPages, siblingCount = 1 }: GetPageItemsProps): PageItem[] {
+	const pagesToShow = new Set([1, totalPages]);
+	const firstItemWithSiblings = 3 + siblingCount;
+	const lastItemWithSiblings = totalPages - 2 - siblingCount;
+
+	if (firstItemWithSiblings > lastItemWithSiblings) {
+		for (let i = 2; i <= totalPages - 1; i++) {
+			pagesToShow.add(i);
+		}
+	} else if (page < firstItemWithSiblings) {
+		for (let i = 2; i <= Math.min(firstItemWithSiblings, totalPages); i++) {
+			pagesToShow.add(i);
+		}
+	} else if (page > lastItemWithSiblings) {
+		for (let i = totalPages - 1; i >= Math.max(lastItemWithSiblings, 2); i--) {
+			pagesToShow.add(i);
+		}
+	} else {
+		for (let i = Math.max(page - siblingCount, 2); i <= Math.min(page + siblingCount, totalPages); i++) {
+			pagesToShow.add(i);
+		}
+	}
+
+	// A gap directly after page 1 is the leading ellipsis; any other gap is the trailing one.
+	// These keys are stable across navigation, so the each-block reuses the ellipsis nodes.
+	function* emit(): Generator<PageItem> {
+		let lastNumber = 0;
+		for (const value of [...pagesToShow].sort((a, b) => a - b)) {
+			if (value - lastNumber > 1) yield { type: 'ellipsis', key: lastNumber === 1 ? 'ellipsis-lead' : 'ellipsis-trail' };
+			yield { type: 'page', value, key: `page-${value}` };
+			lastNumber = value;
+		}
+	}
+	return [...emit()];
+}

package/src/lib/components/pagination/types.ts

@@ -0,0 +1,100 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type {
+	BitsPrimitiveButtonAttributes,
+	BitsPrimitiveDivAttributes,
+} from "../../internal/attribute-types.js";
+
+type PaginationSnippetProps = {
+	pages: PageItem[];
+	range: { start: number; end: number };
+	currentPage: number;
+};
+
+export type PaginationRootPropsWithoutHTML = WithChild<
+	{
+		/**
+		 * The total number of items to be paginated.
+		 */
+		count: number;
+
+		/**
+		 * The number of items per page.
+		 *
+		 * @defaultValue 1
+		 */
+		perPage?: number;
+
+		/**
+		 * The number of visible items before and after the current page.
+		 *
+		 * @defaultValue 1
+		 */
+		siblingCount?: number;
+
+		/**
+		 * The current page number.
+		 *
+		 * @defaultValue 1
+		 */
+		page?: number;
+
+		/**
+		 * A callback function called when the page changes.
+		 */
+		onPageChange?: OnChangeFn<number>;
+
+		/**
+		 * Whether keyboard navigation should loop back to the
+		 * first or last page trigger when reaching either end.
+		 *
+		 * @defaultValue false
+		 */
+		loop?: boolean;
+
+		/**
+		 * The orientation of the pagination component. Used to
+		 * determine how keyboard navigation should work between
+		 * pages.
+		 *
+		 * @defaultValue "horizontal"
+		 */
+		orientation?: "horizontal" | "vertical";
+	},
+	PaginationSnippetProps
+>;
+
+export type PaginationRootProps = PaginationRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, PaginationRootPropsWithoutHTML>;
+
+export type PaginationPagePropsWithoutHTML = WithChild<{
+	page: Page;
+}>;
+
+export type PaginationPageProps = PaginationPagePropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, PaginationPagePropsWithoutHTML>;
+
+export type PaginationPrevButtonPropsWithoutHTML = WithChild;
+
+export type PaginationPrevButtonProps = PaginationPrevButtonPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, PaginationPrevButtonPropsWithoutHTML>;
+
+export type PaginationNextButtonPropsWithoutHTML = WithChild;
+
+export type PaginationNextButtonProps = PaginationNextButtonPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, PaginationNextButtonPropsWithoutHTML>;
+
+export type Page = {
+	type: "page";
+	value: number;
+};
+
+export type Ellipsis = {
+	type: "ellipsis";
+};
+
+export type PageItem = (Page | Ellipsis) & {
+	/**
+	 * A unique key to be used as the key in a svelte `#each` block.
+	 */
+	key: string;
+};

package/src/lib/components/pin-input/components/pin-input-cell.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PinInputCellProps } from '../types.js';
+	import { PinInputCellState } from '../pin-input.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { id = createId(uid), ref = $bindable(null), cell, child, children, ...restProps }: PinInputCellProps = $props();
+
+	const cellState = PinInputCellState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		cell: boxWith(() => cell),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'pin-input-slot',
+				class: join(
+					'relative grid size-9 place-items-center border-y border-e border-border text-sm transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md aria-invalid:border-destructive dark:bg-border/30',
+					cell.isActive &&
+						'z-10 border-ring ring-3 ring-ring/50 ring-offset-background aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+				),
+			},
+			restProps,
+			cellState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{cell.char}
+		{#if cell.hasFakeCaret}
+			<div class="pointer-events-none absolute inset-0 grid place-items-center">
+				<div class="animate-caret-blink bg-foreground h-4 w-px"></div>
+			</div>
+		{/if}
+	</div>
+{/if}

package/src/lib/components/pin-input/components/pin-input.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { PinInputRootProps } from '../types.js';
+	import { PinInputRootState } from '../pin-input.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		inputId = `${createId(uid)}-input`,
+		ref = $bindable(null),
+		inputRef = $bindable(null),
+		maxlength = 6,
+		textalign = 'left',
+		pattern,
+		inputmode = 'numeric',
+		onComplete = () => {},
+		pushPasswordManagerStrategy = 'increase-width',
+		class: className,
+		children,
+		autocomplete = 'one-time-code',
+		disabled = false,
+		value = $bindable(''),
+		onValueChange = () => {},
+		pasteTransformer,
+		...restProps
+	}: PinInputRootProps = $props();
+
+	const rootState = PinInputRootState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		inputRef: boxWith(
+			() => inputRef,
+			(v) => (inputRef = v),
+		),
+		inputId: boxWith(() => inputId),
+		autocomplete: boxWith(() => autocomplete),
+		maxLength: boxWith(() => maxlength),
+		textAlign: boxWith(() => textalign),
+		disabled: boxWith(() => disabled),
+		inputmode: boxWith(() => inputmode),
+		pattern: boxWith(() => pattern),
+		onComplete: boxWith(() => onComplete),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			},
+		),
+		pushPasswordManagerStrategy: boxWith(() => pushPasswordManagerStrategy),
+		pasteTransformer: boxWith(() => pasteTransformer),
+	});
+
+	const mergedInputProps = $derived(mergeProps({ 'data-slot': 'pin-input' }, restProps, rootState.inputProps));
+	const mergedRootProps = $derived(
+		mergeProps(rootState.rootProps, {
+			class: join('flex items-center gap-2 has-disabled:opacity-50 [&_input]:disabled:cursor-not-allowed', className),
+		}),
+	);
+	const mergedInputWrapperProps = $derived(mergeProps(rootState.inputWrapperProps, {}));
+</script>
+
+<div {...mergedRootProps}>
+	{@render children?.(rootState.snippetProps)}
+
+	<div {...mergedInputWrapperProps}>
+		<input {...mergedInputProps} />
+	</div>
+</div>

package/src/lib/components/pin-input/exports.ts

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/pin-input.svelte";
+export { default as Cell } from "./components/pin-input-cell.svelte";
+
+export type { PinInputRootProps as RootProps, PinInputCellProps as CellProps } from "./types.js";

package/src/lib/components/pin-input/index.ts

@@ -0,0 +1,2 @@
+export * as PinInput from './exports.js';
+export * from './exports.js';